/* ============================================================
   QUICKBOOK — Login Screen
   File: public/assets/css/login.css
   Theme: Warm cream / gold — matching home.css aesthetic
   Fonts: Playfair Display (display) · DM Sans (body) · DM Mono (mono)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');

/* ── OVERRIDE FONT VARS (matching home page) ─────────────── */
:root {
  --font-display: 'Playfair Display', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;
  --font-ui:      'DM Sans', sans-serif;
  --gold:         #C9A84C;
  --ink-deep:     #1A1410;
  --cream-bg:     #F9F7F2;
}

/* ── BASE RESET ──────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── PAGE LAYOUT ─────────────────────────────────────────── */
.login-page {
  display:    flex;
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport on mobile */
}

/* ── LEFT PANEL ──────────────────────────────────────────── */
.login-left {
  width:           42%;
  flex-shrink:     0;
  background:      #1A1410;
  padding:         3.5rem 3.8rem;
  display:         flex;
  flex-direction:  column;
  gap:             1.8rem;
  color:           #F9F7F2;
  position:        relative;
  overflow:        hidden;
}

.login-left::before {
  content:        '';
  position:       absolute;
  top:            -140px;
  right:          -100px;
  width:          440px;
  height:         440px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(201,168,76,.22) 0%, transparent 65%);
  pointer-events: none;
}

.login-left::after {
  content:        '';
  position:       absolute;
  bottom:         -100px;
  left:           -60px;
  width:          320px;
  height:         320px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(15,31,61,.75) 0%, transparent 68%);
  pointer-events: none;
}

.login-left-bg {
  position:          absolute;
  inset:             0;
  background-image:  radial-gradient(circle, rgba(249,247,242,.045) 1px, transparent 1px);
  background-size:   28px 28px;
  pointer-events:    none;
}

/* ── LEFT LOGO — image + wordmark ───────────────────────── */
.login-left-logo {
  font-family:     'Playfair Display', serif;
  font-size:       1.55rem;
  font-weight:     700;
  font-style:      italic;
  color:           #F9F7F2;
  text-decoration: none;
  letter-spacing:  .01em;
  position:        relative;
  z-index:         1;
  animation:       slideRight .5s ease both;
  display:         flex;
  align-items:     center;
  gap:             .5rem;
}
.login-left-logo span {
  color:       #C9A84C;
  font-style:  normal;
  font-weight: 700;
}

/* ── AUTH LOGO IMAGE (shared by login + register) ────────── */
.auth-logo-img {
  width:       42px;
  height:      42px;
  object-fit:  contain;
  flex-shrink: 0;
  filter:      brightness(1.1) drop-shadow(0 2px 6px rgba(201,168,76,.35));
}

/* ── LEFT HEADING ────────────────────────────────────────── */
.login-left h2 {
  font-family:    'Playfair Display', serif;
  font-size:      clamp(2.3rem, 3.2vw, 3rem);
  font-weight:    800;
  color:          #F9F7F2;
  line-height:    1.08;
  letter-spacing: -.02em;
  position:       relative;
  z-index:        1;
  animation:      slideRight .5s .08s ease both;
}
.login-left h2 em {
  color:      #C9A84C;
  font-style: italic;
}
.login-left h2 .underline-accent {
  position: relative;
  display:  inline-block;
}
.login-left h2 .underline-accent::after {
  content:       '';
  position:      absolute;
  bottom:        -5px;
  left:          0;
  width:         100%;
  height:        2px;
  background:    linear-gradient(90deg, #C9A84C, transparent);
  border-radius: 99px;
}

/* ── LEFT DESC ───────────────────────────────────────────── */
.login-left-desc {
  font-size:   .92rem;
  color:       rgba(249,247,242,.52);
  line-height: 1.85;
  font-weight: 300;
  position:    relative;
  z-index:     1;
  animation:   slideRight .5s .14s ease both;
}

/* ── FEATURE LIST ────────────────────────────────────────── */
.feature-list {
  display:        flex;
  flex-direction: column;
  gap:            .85rem;
  position:       relative;
  z-index:        1;
}

.feature-item {
  display:     flex;
  align-items: center;
  gap:         .9rem;
  font-size:   .88rem;
  color:       rgba(249,247,242,.72);
  font-weight: 300;
  animation:   slideRight .5s ease both;
}
.feature-item:nth-child(1) { animation-delay: .20s; }
.feature-item:nth-child(2) { animation-delay: .26s; }
.feature-item:nth-child(3) { animation-delay: .32s; }
.feature-item:nth-child(4) { animation-delay: .38s; }
.feature-item:nth-child(5) { animation-delay: .44s; }

.feature-check {
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      rgba(201,168,76,.15);
  border:          1px solid rgba(201,168,76,.35);
  color:           #C9A84C;
  font-size:       .65rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-family:     'Playfair Display', serif;
  transition:      all .22s;
}
.feature-item:hover .feature-check {
  background: rgba(201,168,76,.32);
  transform:  scale(1.1);
  box-shadow: 0 0 10px rgba(201,168,76,.32);
}

/* ── TESTIMONIAL CARD ────────────────────────────────────── */
.testimonial-card {
  background:      rgba(249,247,242,.05);
  border:          1px solid rgba(249,247,242,.12);
  border-radius:   var(--radius-lg);
  padding:         1.6rem 1.8rem;
  margin-top:      auto;
  position:        relative;
  z-index:         1;
  backdrop-filter: blur(12px);
  animation:       fadeUp .6s .5s ease both;
  transition:      background .25s, border-color .25s;
}
.testimonial-card:hover {
  background:   rgba(249,247,242,.08);
  border-color: rgba(201,168,76,.35);
}
.testimonial-card::before {
  content:     '\201C';
  position:    absolute;
  top:         -8px;
  left:        18px;
  font-family: 'Playfair Display', serif;
  font-size:   3.8rem;
  color:       #C9A84C;
  line-height: 1;
  opacity:     .5;
}

.testimonial-quote {
  font-size:     .875rem;
  color:         rgba(249,247,242,.68);
  line-height:   1.8;
  font-style:    italic;
  font-weight:   300;
  margin-bottom: 1.2rem;
}

.testimonial-author {
  display:     flex;
  align-items: center;
  gap:         .9rem;
}

.testimonial-avatar {
  width:           40px;
  height:          40px;
  border-radius:   10px;
  background:      linear-gradient(135deg, #C9A84C, #B8973B);
  color:           #1A1410;
  font-family:     'Playfair Display', serif;
  font-size:       .72rem;
  font-weight:     900;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  box-shadow:      0 8px 28px rgba(201,168,76,.3);
}

.testimonial-name {
  font-family:    'Playfair Display', serif;
  font-weight:    700;
  font-size:      .88rem;
  color:          #F9F7F2;
  letter-spacing: -.01em;
}
.testimonial-role {
  font-family:    'DM Mono', monospace;
  font-size:      .62rem;
  color:          rgba(249,247,242,.38);
  letter-spacing: .04em;
  margin-top:     .15rem;
}
.testimonial-stars {
  color:          #C9A84C;
  font-size:      .72rem;
  margin-top:     .2rem;
  letter-spacing: .05em;
}

/* ── RIGHT PANEL ─────────────────────────────────────────── */
.login-right {
  flex:            1;
  background:      #F9F7F2;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         3rem 2rem;
  overflow-y:      auto;
  position:        relative;
}

.login-right::before {
  content:        '';
  position:       absolute;
  top:            0;
  right:          0;
  width:          380px;
  height:         380px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 65%);
  pointer-events: none;
}
.login-right::after {
  content:        '';
  position:       absolute;
  bottom:         0;
  left:           0;
  width:          280px;
  height:         280px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(240,237,228,.9) 0%, transparent 65%);
  pointer-events: none;
}

/* ── FORM BOX ────────────────────────────────────────────── */
.login-form-box {
  background:      #FFFFFF;
  border:          1px solid rgba(201,168,76,.2);
  border-radius:   var(--radius-xl);
  padding:         2.8rem 3rem;
  width:           100%;
  max-width:       520px;
  box-shadow:      0 12px 48px rgba(26,20,16,.1), 0 2px 8px rgba(201,168,76,.08);
  position:        relative;
  z-index:         1;
  animation:       scaleIn .55s cubic-bezier(.34,1.2,.64,1) both;
}

.login-form-box::before {
  content:       '';
  position:      absolute;
  top:           0;
  left:          2.5rem;
  right:         2.5rem;
  height:        2px;
  background:    linear-gradient(90deg, transparent, #C9A84C, #B8973B, transparent);
  border-radius: 0 0 99px 99px;
}

/* ── FORM HEADINGS ───────────────────────────────────────── */
.form-heading {
  font-family:    'Playfair Display', serif;
  font-size:      1.75rem;
  font-weight:    800;
  color:          #1A1410;
  margin-bottom:  .35rem;
  letter-spacing: -.02em;
  line-height:    1.15;
}

.form-subheading {
  font-size:     .87rem;
  color:         rgba(26,20,16,.45);
  margin-bottom: 1.8rem;
  font-weight:   400;
}
.form-subheading a {
  color:       #C9A84C;
  font-weight: 600;
  transition:  color .2s;
}
.form-subheading a:hover { color: #B8973B; }

/* ── FORM LABELS ─────────────────────────────────────────── */
.login-right .form-label {
  color:          rgba(26,20,16,.65);
  font-family:    'DM Mono', monospace;
  font-size:      .66rem;
  font-weight:    500;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom:  .45rem;
}

/* ── FORM CONTROLS ───────────────────────────────────────── */
.login-right .form-control {
  background:    #F9F7F2;
  border:        1.5px solid rgba(26,20,16,.12);
  color:         #1A1410;
  border-radius: var(--radius-sm);
  /* Prevent zoom on iOS (font-size must be ≥ 16px on mobile) */
  font-size:     1rem;
}
.login-right .form-control::placeholder {
  color: rgba(26,20,16,.28);
}
.login-right .form-control:focus {
  border-color: #C9A84C;
  background:   #FFFFFF;
  box-shadow:   0 0 0 3px rgba(201,168,76,.14);
  outline:      none;
}

/* ── AUTOFILL OVERRIDE ───────────────────────────────────── */
.login-right .form-control:-webkit-autofill,
.login-right .form-control:-webkit-autofill:hover,
.login-right .form-control:-webkit-autofill:focus,
.login-right .form-control:-webkit-autofill:active {
  -webkit-box-shadow:      0 0 0 1000px #F9F7F2 inset !important;
  box-shadow:              0 0 0 1000px #F9F7F2 inset !important;
  -webkit-text-fill-color: #1A1410 !important;
  caret-color:             #1A1410 !important;
  border-color:            rgba(26,20,16,.18) !important;
  transition:              background-color 9999s ease-in-out 0s !important;
}

/* ── FORM GROUP SPACING ──────────────────────────────────── */
.login-right .form-group {
  margin-bottom: 1.1rem;
}

/* ── PASSWORD WRAPPER ────────────────────────────────────── */
.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-right: 3rem; }

.pw-toggle {
  position:        absolute;
  right:           .9rem;
  top:             50%;
  transform:       translateY(-50%);
  cursor:          pointer;
  color:           rgba(26,20,16,.32);
  user-select:     none;
  transition:      color .2s, transform .15s;
  line-height:     1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      none;
  border:          none;
  padding:         0;
  /* Larger touch target on mobile */
  min-width:       44px;
  min-height:      44px;
}
.pw-toggle:hover {
  color:     #C9A84C;
  transform: translateY(-50%) scale(1.12);
}
.pw-toggle svg { width: 18px; height: 18px; pointer-events: none; }

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button { display: none; }

/* ── FORM EXTRAS ─────────────────────────────────────────── */
.form-extras {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1.5rem;
  font-size:       .82rem;
  flex-wrap:       wrap;
  gap:             .6rem;
}

.remember-label {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  color:       rgba(26,20,16,.48);
  cursor:      pointer;
  font-family: 'DM Sans', sans-serif;
  user-select: none;
  /* Larger touch target */
  padding:     .25rem 0;
}
.remember-label input[type="checkbox"] {
  width:        15px;
  height:       15px;
  accent-color: #C9A84C;
  cursor:       pointer;
}

.forgot-link {
  color:          #C9A84C;
  font-family:    'DM Mono', monospace;
  font-size:      .65rem;
  font-weight:    500;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition:     color .2s, letter-spacing .2s;
  /* Minimum touch target */
  padding:        .35rem 0;
  display:        inline-block;
}
.forgot-link:hover { color: #B8973B; letter-spacing: .08em; }

/* ── SUBMIT BUTTON ───────────────────────────────────────── */
.btn-submit {
  width:           100%;
  justify-content: center;
  padding:         .9rem;
  font-size:       .78rem;
  border-radius:   var(--radius-sm);
  margin-bottom:   .5rem;
  font-family:     'Playfair Display', serif;
  font-weight:     800;
  letter-spacing:  .04em;
  position:        relative;
  overflow:        hidden;
  background:      #C9A84C;
  color:           #1A1410;
  box-shadow:      0 8px 28px rgba(201,168,76,.35);
  border:          none;
  cursor:          pointer;
  transition:      all .22s cubic-bezier(.4,0,.2,1);
  /* Accessible touch target */
  min-height:      48px;
  display:         flex;
  align-items:     center;
}
.btn-submit:hover {
  background: #B8973B;
  transform:  translateY(-2px);
  box-shadow: 0 12px 36px rgba(201,168,76,.48);
}
/* Remove hover translate on touch to avoid sticky hover state */
@media (hover: none) {
  .btn-submit:hover {
    transform:  none;
    box-shadow: 0 8px 28px rgba(201,168,76,.35);
  }
  .btn-submit:active {
    background: #B8973B;
    transform:  scale(.98);
  }
}

/* ── DIVIDER ─────────────────────────────────────────────── */
.login-form-box .divider {
  display:        flex;
  align-items:    center;
  gap:            1rem;
  color:          rgba(26,20,16,.3);
  font-size:      .75rem;
  font-family:    'DM Mono', monospace;
  letter-spacing: .06em;
  margin:         1.2rem 0;
}
.login-form-box .divider::before,
.login-form-box .divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: rgba(26,20,16,.1);
}

/* ── SOCIAL BUTTONS ──────────────────────────────────────── */
.social-btn {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             .75rem;
  padding:         .75rem 1rem;
  background:      #FFFFFF;
  border:          1.5px solid rgba(26,20,16,.12);
  border-radius:   var(--radius-sm);
  font-family:     'DM Sans', sans-serif;
  font-size:       .84rem;
  font-weight:     500;
  color:           rgba(26,20,16,.72);
  cursor:          pointer;
  margin-bottom:   .65rem;
  transition:      all .22s;
  letter-spacing:  .01em;
  /* Accessible touch target */
  min-height:      48px;
}
.social-btn:hover {
  background:   #F9F7F2;
  border-color: #C9A84C;
  color:        #1A1410;
  transform:    translateY(-1px);
  box-shadow:   0 4px 16px rgba(201,168,76,.15);
}
@media (hover: none) {
  .social-btn:hover {
    transform:  none;
    box-shadow: none;
  }
  .social-btn:active {
    background: #F9F7F2;
    border-color: #C9A84C;
  }
}
.social-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ── TOAST NOTIFICATIONS ─────────────────────────────────── */
#toast-container {
  display:        flex;
  flex-direction: column;
  gap:            .5rem;
  margin-bottom:  1rem;
}

.toast {
  display:       flex;
  align-items:   center;
  width:         100%;
  padding:       .8rem 1rem;
  border-radius: var(--radius-sm);
  font-size:     .875rem;
  font-weight:   500;
  font-family:   'DM Sans', sans-serif;
  opacity:       0;
  transform:     translateY(-6px);
  transition:    opacity .3s ease, transform .3s ease;
  overflow:      hidden;
}
.toast.toast-visible { opacity: 1; transform: translateY(0); }
.toast.toast-hiding  { opacity: 0; transform: translateY(-6px); }

.toast-error {
  background:  rgba(239,68,68,.08);
  border:      1px solid rgba(239,68,68,.22);
  border-left: 3px solid #DC2626;
  color:       #991B1B;
}
.toast-success {
  background:  rgba(22,163,74,.08);
  border:      1px solid rgba(22,163,74,.22);
  border-left: 3px solid #16A34A;
  color:       #14532D;
}
.toast-message { flex: 1; line-height: 1.4; }
.alert { display: none !important; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── TABLET LANDSCAPE: 860px–1100px ─────────────────────── */
@media (max-width: 1100px) {
  .login-left {
    width:   38%;
    padding: 3rem 2.8rem;
    gap:     1.5rem;
  }
  .login-right {
    padding: 2.5rem 1.8rem;
  }
  .login-form-box {
    padding: 2.4rem 2.4rem;
  }
}

/* ── TABLET PORTRAIT: 600px–860px ───────────────────────── */
@media (max-width: 860px) {
  /* Stack panels vertically */
  .login-page {
    flex-direction: column;
  }

  /* Left panel: compact banner across full width */
  .login-left {
    width:   100%;
    padding: 2.4rem 2rem 2rem;
    gap:     1.1rem;
    /* Shorter on tablet — enough for logo + heading + desc + badge row */
    min-height: unset;
  }

  /* Hide feature list and testimonial on stacked layout,
     revealed again at > 860px or small screens via mobile-banner */
  .feature-list,
  .testimonial-card {
    display: none;
  }

  /* Show compact trust badge strip instead */
  .login-left-desc {
    display: none;
  }

  .login-left h2 {
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    animation: none; /* Prevent layout shift on stack reflow */
  }

  .login-left-logo {
    animation: none;
  }

  /* Mobile trust strip (injected via pseudo-sibling, using CSS only) */
  .login-left::before {
    top:    -80px;
    right:  -60px;
    width:  280px;
    height: 280px;
  }

  /* Right panel: full width, comfortable padding */
  .login-right {
    padding:    2rem 1.4rem 3rem;
    align-items: flex-start;
    padding-top: 2rem;
  }

  .login-form-box {
    padding:       2.2rem 1.8rem;
    max-width:     100%;
    border-radius: var(--radius-lg);
    animation:     none; /* Remove heavy animation on mobile */
    box-shadow:    0 6px 24px rgba(26,20,16,.09);
  }

  .auth-logo-img {
    width:  34px;
    height: 34px;
  }
}

/* ── MOBILE LARGE: 480px–600px ──────────────────────────── */
@media (max-width: 600px) {
  .login-left {
    padding: 2rem 1.4rem 1.8rem;
  }

  .login-left h2 {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }

  .login-right {
    padding: 1.8rem 1rem 2.5rem;
  }

  .login-form-box {
    padding:       2rem 1.3rem;
    border-radius: var(--radius-md, 12px);
  }

  .form-heading {
    font-size: 1.5rem;
  }

  .form-subheading {
    font-size:     .83rem;
    margin-bottom: 1.4rem;
  }
}

/* ── MOBILE SMALL: ≤ 480px ───────────────────────────────── */
@media (max-width: 480px) {
  .login-left {
    padding: 1.6rem 1.2rem 1.4rem;
    gap:     .9rem;
  }

  .login-left-logo {
    font-size: 1.3rem;
  }

  .auth-logo-img {
    width:  28px;
    height: 28px;
  }

  .login-left h2 {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }

  .login-right {
    padding: 1.4rem .9rem 2.2rem;
  }

  .login-form-box {
    padding: 1.6rem 1.1rem;
  }

  .login-form-box::before {
    left:  1.2rem;
    right: 1.2rem;
  }

  .form-heading {
    font-size: 1.35rem;
  }

  /* Two-column form extras stack on very small screens */
  .form-extras {
    flex-direction: column;
    align-items:    flex-start;
    gap:            .5rem;
  }

  /* Social buttons: slightly smaller text, still full-width */
  .social-btn {
    font-size: .8rem;
    gap:       .55rem;
  }
}

/* ── VERY SMALL: ≤ 360px (Galaxy S series, Moto G) ─────── */
@media (max-width: 360px) {
  .login-left {
    padding: 1.3rem 1rem 1.2rem;
  }

  .login-form-box {
    padding: 1.4rem .9rem;
  }

  .form-heading {
    font-size: 1.25rem;
  }

  .login-right {
    padding: 1.2rem .75rem 2rem;
  }
}

/* ── LANDSCAPE MOBILE (short viewport, wide) ────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .login-page {
    flex-direction: row;
    min-height:     100dvh;
  }

  .login-left {
    width:          36%;
    padding:        1.4rem 1.8rem;
    gap:            .9rem;
    overflow-y:     auto;
    justify-content: flex-start;
  }

  .login-left h2 {
    font-size: 1.6rem;
  }

  .login-right {
    padding:     1rem 1.2rem;
    align-items: center;
    overflow-y:  auto;
  }

  .login-form-box {
    padding: 1.5rem 1.6rem;
    /* Shrink max-width so form fits in landscape without scrolling */
    max-width: 420px;
    animation: none;
  }

  .form-heading {
    font-size:     1.3rem;
    margin-bottom: .2rem;
  }

  .form-subheading {
    margin-bottom: 1rem;
  }

  .login-right .form-group {
    margin-bottom: .75rem;
  }

  .form-extras {
    margin-bottom: 1rem;
  }

  .btn-submit {
    padding: .7rem;
  }

  .login-form-box .divider {
    margin: .8rem 0;
  }

  .social-btn {
    padding:    .6rem 1rem;
    min-height: 42px;
  }
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .login-left-logo,
  .login-left h2,
  .login-left-desc,
  .feature-item,
  .testimonial-card,
  .login-form-box {
    animation: none !important;
  }

  .btn-submit,
  .social-btn,
  .feature-check,
  .forgot-link {
    transition: none !important;
  }
}