/* FILE: /assets/css/auth.css */

/* ===== Transparent header for auth pages (unchanged from earlier, kept here) ===== */
.site-header.header--transparent{position:absolute;top:0;left:0;right:0;background:transparent;box-shadow:none;z-index:1000}
.site-header.header--transparent .header-nav a,
.site-header.header--transparent .menu-toggle{color:#ffffff!important}
.site-header.header--transparent .btn-login.btn--outline{background:transparent;color:#ffffff;border:1px solid rgba(255,255,255,.85)}
.site-header.header--transparent .btn-login.btn--outline:hover{background:rgba(255,255,255,.08)}
.site-header.header--transparent.is-solid{position:fixed;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.site-header.header--transparent.is-solid .header-nav a,
.site-header.header--transparent.is-solid .menu-toggle{color:#133A3A!important}
.site-header.header--transparent.is-solid .btn-login.btn--outline{color:#fff;background:#133A3A;border:1px solid #0e2f2f}

/* ===== Header base layout ===== */
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px}
.header-logo img{height:34px}
.header-panel{display:flex;align-items:center;gap:18px}

/* Desktop nav */
.header-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.header-nav a{text-decoration:none;color:#133A3A;font-weight:500}

/* Buttons */
.header-login{display:flex;gap:10px;align-items:center}
.btn-login,.auth-btn,.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:6px;font-weight:600;letter-spacing:.2px;text-decoration:none;transition:transform .06s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.btn--solid{background:#133A3A;color:#fff;border:1px solid #0e2f2f}
.btn--solid:hover{background:#0f2f2f;box-shadow:0 6px 16px rgba(19,58,58,.25);transform:translateY(-1px)}
.btn--outline{background:transparent;color:#133A3A;border:1px solid #133A3A}
.btn--outline:hover{background:rgba(19,58,58,.08);transform:translateY(-1px)}

/* Hamburger */
.menu-toggle{background:transparent;border:0;font-size:24px;line-height:1;cursor:pointer;color:#133A3A;display:none}

/* ===== Mobile panel behavior ===== */
@media (max-width: 992px){
  .menu-toggle{display:block;z-index:1100}
  .header-panel{
    position:absolute;top:100%;left:0;right:0;
    display:block; /* hidden by default via height 0 */
    background:#ffffff;border-top:1px solid #e6ecec;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transform-origin:top;transform:scaleY(0);transition:transform .18s ease;
  }
  .header-panel.is-open{transform:scaleY(1)}
  .header-nav ul{flex-direction:column;padding:10px 14px}
  .header-nav a{padding:10px 6px;display:block}
  .header-login{padding:8px 14px 14px;border-top:1px dashed #e6ecec}
}

/* ===== Auth hero (center card, already provided earlier) ===== */
.auth-hero{background:linear-gradient(135deg,#133A3A 0%,#1f6f6f 60%,#2c8f8f 100%);position:relative;overflow:hidden;padding:96px 0;min-height:calc(100vh - 200px);display:flex;align-items:center}
.auth-hero .bg-graphic{position:absolute;inset:0;background-image:url('../source/home-slider.jpg');background-size:cover;background-position:center;opacity:.12;filter:saturate(.8) contrast(1.1)}
.auth-hero .container{position:relative;z-index:1;width:100%}
.auth-card{max-width:1080px;margin:0 auto;background:#fff;border:1px solid #e6ecec;border-radius:10px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 14px 40px rgba(19,58,58,.18)}
@media (max-width:960px){.auth-card{grid-template-columns:1fr}.auth-hero{padding:88px 0 56px;min-height:auto}}

/* Left brand panel */
.auth-card .card-side {
  background: linear-gradient(180deg, #155f5f 0%, #0f4a4a 100%);
  color: #e6f2f2;
  padding: 32px 28px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.card-side .brand-top { display: flex; align-items: center; gap: 10px; }
.card-side .brand-top img { height: 28px; }
.card-side h2 { margin: 16px 0 8px; font-size: 28px; color: #ffffff; }
.card-side p { margin: 0; opacity: .95; font-size: 15px; }
.card-side .bullets { margin-top: 18px; }
.card-side .bullets li { display: flex; gap: 10px; margin: 10px 0; font-size: 15px; }
.card-side .bullets i { margin-top: 3px; }

/* Right form panel */
.auth-card .card-form { padding: 32px 28px; }
.card-form h1 { margin: 0 0 8px; color: #133A3A; font-size: 30px; line-height: 1.2; }
.card-form .sub { color: #5b6b6b; margin-bottom: 16px; font-size: 14px; }

/* Grid & fields */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field { display: flex; flex-direction: column; }
.form-field label { font-size: 13px; margin-bottom: 6px; color: #0e2f2f; letter-spacing: .2px; }
.form-field input, .form-field select {
  border:1px solid #cfd8d8; padding:11px 12px; border-radius:6px; font-size:14px;
  transition: border-color .15s ease, box-shadow .15s ease; background: #fff;
}
.form-field input:focus, .form-field select:focus {
  border-color: #1f6f6f; outline: 0; box-shadow: 0 0 0 3px rgba(31,111,111,.15);
}
.form-field .hint { font-size:12px; color:#6b7b7b; margin-top:4px; }

/* Password visibility toggle */
.input-with-toggle { position: relative; }
.input-with-toggle input { padding-right: 40px; }
.input-with-toggle .toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 14px; cursor: pointer; color: #5b6b6b; user-select: none;
}

/* Alerts */
.auth-alert { border-radius:6px; padding:12px 14px; margin-bottom:12px; font-size:14px; }
.auth-alert-error { background:#ffecec; color:#8a1f11; border:1px solid #f5c6cb; }
.auth-alert-success { background:#ecfff3; color:#135a2e; border:1px solid #b7ebc6; }

/* Buttons (header/login/register reuse these) */
.btn-login, .auth-btn, .btn {
  display:inline-flex; align-items:center; gap:8px;
  padding: 11px 16px; border-radius: 6px; font-weight: 600; letter-spacing:.2px;
  text-decoration:none; transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn--solid { background:#133A3A; color:#fff; border:1px solid #0e2f2f; }
.btn--solid:hover { background:#0f2f2f; box-shadow:0 6px 16px rgba(19,58,58,.25); transform: translateY(-1px); }
.btn--outline { background:transparent; color:#133A3A; border:1px solid #133A3A; }
.btn--outline:hover { background:rgba(19,58,58,.08); transform: translateY(-1px); }

/* Header buttons spacing */
.header-login { display:flex; gap:10px; align-items:center; }

/* Secondary links */
.auth-links { margin-top: 12px; display:flex; gap:18px; flex-wrap:wrap; }
.auth-links a { color:#0f4a4a; text-decoration: none; border-bottom:1px dashed rgba(15,74,74,.4); }
.auth-links a:hover { border-bottom-color: transparent; }

/* Responsive */
@media (max-width: 1080px) {
  .auth-card { max-width: 95%; }
}
@media (max-width: 960px) {
  .auth-card { grid-template-columns: 1fr; }
  .card-form h1 { font-size: 26px; }
  .auth-hero { padding: 88px 0 56px; min-height: auto; }
}




/* --- FIX 1: Header buttons should not float/overlap --- */
.site-header .header-login .btn-login {
  position: static !important;   /* kill any absolute/float from base theme */
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: auto;
  line-height: 1.2;
  margin: 0;                     /* remove any weird offsets */
}

/* Keep nav and buttons on one line on desktop */
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Make sure the nav consumes available space (prevents crowding) */
.header-panel {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-nav { flex: 1 1 auto; }            /* nav grows */
.header-login { flex: 0 0 auto; }          /* buttons keep natural width */

/* Slightly smaller outline buttons on transparent header for visual balance */
.site-header.header--transparent .btn-login.btn--outline {
  padding: 9px 14px;
  border-radius: 8px;
}

/* When scrolled/solid, keep standard sizing */
.site-header.header--transparent.is-solid .btn-login.btn--outline {
  padding: 10px 14px;
}

/* ===== Mobile menu: fixed drawer, tight spacing, no gaps ===== */
@media (max-width: 992px){
  .menu-toggle{display:block;z-index:1300}

  /* Fixed drawer under header; --hdrH set by JS */
  .header-panel{
    position: fixed !important;
    top: var(--hdrH, 64px) !important;   /* set by JS to header height */
    left: 0; right: 0;
    height: calc(100vh - var(--hdrH, 64px));
    background:#fff;
    border-top: 0 !important;            /* no extra line/gap */
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    padding: 0 !important;               /* remove interior top padding */
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
  .header-panel.is-open{ display:block; }

  .header-nav{ width:100%; margin:0; }
  .header-nav ul{
    display:flex; flex-direction:column; gap:0;
    margin:0; padding:0; list-style:none;
  }
  .header-nav a{
    display:block;
    padding:12px 8px;
    text-decoration:none;
    border-bottom:1px solid #f0f4f4;    /* subtle separators */
  }
  .header-nav li:last-child a{ border-bottom: none; }

  /* Buttons: two in one row, no giant margins */
  

  /* Kill theme underline/pseudo elements on buttons inside mobile menu */
  .header-login .btn-login::before,
  .header-login .btn-login::after{ content:none !important; display:none !important; }
}

/* Make sure header buttons never float/overlap */
.site-header .header-login .btn-login{
  position:static !important; float:none !important;
  display:inline-flex !important; margin:0;
}

/* When mobile menu is open, lock body scroll */
body.nav-open{ overflow:hidden; }


/* (Auth header transparency rules you already have remain as-is) */



/* --- FIX 3: Auth hero & card full-width on small screens --- */
.auth-hero { padding: 96px 0; min-height: calc(100vh - 200px); display:flex; align-items:center; }
.auth-hero .container { position: relative; z-index: 1; width: 100%; max-width: 1200px; padding: 0 16px; box-sizing: border-box; }
.auth-card {
  max-width: 1080px;
  width: 100%;                 /* let it fill */
  margin: 0 auto;
  border-radius: 12px;
  display: grid; grid-template-columns: 1fr 1fr;
}

@media (max-width: 960px){
  .auth-card { grid-template-columns: 1fr; }
  .auth-hero { padding: 88px 0 56px; min-height: auto; }
}

@media (max-width: 640px){
  .auth-card { margin: 0 auto; }          /* keep centered */
  .form-grid { grid-template-columns: 1fr; }  /* collapse earlier for phones */
  .auth-card .card-side,
  .auth-card .card-form { padding: 22px 18px; }
  .auth-card .card-form h1 { font-size: 24px; }
  .btn-login, .auth-btn { width: 100%; justify-content: center; }
}

/* Ensure inputs don’t overflow on tiny screens */
.form-field input, .form-field select { min-width: 0; box-sizing: border-box; width: 100%; }


/* Hide the mobile CTAs on desktop */
.nav-login-mobile,
.nav-register-mobile { display: none; }

/* Mobile: show both CTAs inside the menu, hide the desktop header-login block */
@media (max-width: 992px){
  /* show both */
  .nav-login-mobile,
  .nav-register-mobile { display: block; }

  /* style the buttons to match your pill look */
  .header-nav .btn-nav{
    display: block;
    width: 100%;
    text-align: center;
    margin: 10px 0 6px;
    padding: 8px 20px 8px 25px;
    border-radius: 18px;
    background-color: #F2C186;   /* your gold */
    color: #133A3A;              /* your green text */
    border: 1px solid #0e2f2f;   /* subtle edge like desktop pill */
    font-family: 'montserrat-bold';
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
  }

  /* hide the separate desktop pill block on mobile so you don't get duplicates */
  .header-login { display: none; }
}
/* Hide desktop-only header-login in mobile */
@media (max-width: 992px){
  .desktop-only { display: none !important; }
}

/* Make sure NO grid appears for the old header-login in mobile panel */
@media (max-width: 992px){
  .header-panel .header-login {
    display: none !important;
  }
}