:root {
  --text-dark: #2f2530;
  --text-muted: rgba(47, 37, 48, 0.62);
  --accent: #9c6470;
  --accent-dark: #7c4e59;
  --glass-bg: rgba(255, 255, 255, 0.22);
  --glass-border: rgba(255, 255, 255, 0.4);
  --radius-lg: 28px;
  --radius-sm: 14px;
}

* { box-sizing: border-box; }

/*body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #d98a6b 0%, #b06b78 45%, #6f4f68 100%);
  overflow-x: hidden;
}*/
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden; /* Prevent scrolling */
    /*            background: linear-gradient(135deg, #83a7dd 0%, #58a3b2 45%, rgb(59 130 151) 100%);*/
    /*            background: linear-gradient(135deg, #fbfdff 0%, #a8d4dd 45%, rgb(0 79 103) 100%)*/
    /*    background: linear-gradient(135deg, #fbfdff 0%, #000000 45%, rgb(0 79 103) 100%) */
    background: linear-gradient( 135deg, #ffffff 0%, #92d1e4 100% );
}

body {
    min-height: 100vh;
}

.page {
  min-height: 100vh;
  padding: 1.5rem;
  position: relative;
  z-index: 1;
}

/* Ambient glow blobs behind the glass card */
/*.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  z-index: 0;
  animation: float 10s ease-in-out infinite;
}*/
/*.glow-a { width: 320px; height: 320px; background: #ffb88c; top: -60px; left: -60px; }
.glow-b { width: 380px; height: 380px; background: #8c5a8a; bottom: -80px; right: -60px; animation-delay: 2s; }
.glow-c { width: 260px; height: 260px; background: #ffd98a; top: 40%; right: 15%; animation-delay: 4s; }*/

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -20px); }
}

/* Glass card */
.auth-card {
    width: 100%;
    max-width: 985px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 60px -15px rgba(60, 30, 45, 0.45);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    position: relative;
    z-index: 1;
}

.form-panel { padding: clamp(2rem, 5vw, 3.5rem); }

.headline {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    color: #1aa3bf !important;
    margin: 0 0 0.4rem;
}

.subtext { color: var(--text-muted); font-size: 0.95rem; margin: 0; }

.link-muted { color: var(--text-muted); font-size: 0.85rem; text-decoration: none; }
.link-muted:hover { color: var(--accent-dark); text-decoration: underline; }

/* Inputs */
.glass-input {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
  color: var(--text-dark);
}
.glass-input::placeholder { color: rgba(47, 37, 48, 0.5); }
.glass-input:focus {
  background: rgba(255, 255, 255, 0.68);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(156, 100, 112, 0.25);
  color: var(--text-dark);
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(47, 37, 48, 0.55);
  padding: 0 0.6rem;
}
.toggle-password:hover { color: var(--text-dark); }
.toggle-password:focus { box-shadow: none; }

/* Sign in button */
.btn-signin {
    background: linear-gradient(135deg, #0dcaf0, #5d8992);
    color: #fff;
    border: none;
    padding: 0.9rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 10px 25px -8px rgba(124, 78, 89, 0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-signin:hover { transform: translateY(-2px); color: #fff; }
.btn-signin:active { transform: translateY(0); }

/* Divider */
.divider {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(47, 37, 48, 0.15);
}
.divider span { padding: 0 0.75rem; }

/* Social buttons */
.social-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid #92d1e4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #4a4a4a;
    transition: transform 0.15s ease, background 0.15s ease;
}
.social-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.8); }
.social-btn-dark i { color: #1a1a1a; }
.social-btn i.fa-facebook {
    color: #92d1e4
}

.social-btn i.fa-twitter {
    color: #92d1e4
}
.social-btn i.fa-linkedin {
    color: #92d1e4
}

.EmailIconSize {
    color: #1aa3bf
}
/* Illustration panel */
.art-panel {
    position: relative;
    overflow: hidden;
    min-height: 560px;
}

.scene {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #4a3358 0%, #a4536a 30%, #e08a5e 55%, #f4b96a 72%, #f6c98a 100%);
}

.sun {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  top: 24%;
  left: 18%;
  background: radial-gradient(circle, #fff8e0 0%, #ffd98a 45%, rgba(255, 180, 120, 0) 72%);
}

.mountain { position: absolute; left: 0; right: 0; bottom: 20%; height: 45%; }
.mountain-back {
  background: rgba(70, 45, 80, 0.55);
  clip-path: polygon(0% 100%, 12% 45%, 30% 68%, 50% 32%, 72% 60%, 100% 25%, 100% 100%);
}
.mountain-front {
  background: rgba(42, 26, 50, 0.82);
  bottom: 14%;
  clip-path: polygon(0% 100%, 18% 58%, 42% 78%, 68% 48%, 100% 72%, 100% 100%);
}

.water {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20%;
  background: linear-gradient(180deg, rgba(180, 110, 140, 0.55), rgba(50, 32, 60, 0.9));
}

.tree { position: absolute; bottom: 3%; opacity: 0.9; }
.tree svg { width: 100%; height: 100%; display: block; }
.tree-1 { left: 10%; width: 28px; height: 85px; }
.tree-2 { left: 40%; width: 34px; height: 125px; }
.tree-3 { left: 72%; width: 30px; height: 95px; }

.caption {
  position: absolute;
  left: 1.75rem;
  right: 1.75rem;
  bottom: 1.75rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-sm);
  color: #fff;
}
.caption p { font-size: 0.95rem; }

.glass-strong {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 0;
}
.nav-arrow:hover { background: rgba(255, 255, 255, 0.2); }

/* Small screens */
@media (max-width: 575.98px) {
  .form-panel { padding: 2.25rem 1.5rem; }
  .auth-card { border-radius: 22px; }
}

@media (max-width:764px) {
    body {
        margin: 0;
        min-height: 100vh;
        background: url('/Content_1/Content/Images/image1.png') no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
        font-family: Arial, sans-serif;
    }
}

@media (prefers-reduced-motion: reduce) {
/*  .glow { animation: none; }*/
  .btn-signin:hover, .social-btn:hover { transform: none; }
}