/* ============================================================
   valla-booking / public / css / customer-portal.css
   Direction B redesign — Full-bleed hero + floating glass card
   Accent + tints are tenant-themeable via --valla-auth-accent (neutral #2563eb default)
   v2.1 — full-parity pass vs approved comp
   ============================================================ */

/* ── Customer portal shell (unchanged) ─────────────────────── */
.valla-portal-shell{max-width:980px;margin:20px auto;padding:12px}
.valla-portal-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.valla-portal-nav a{padding:8px 12px;border:1px solid #d9e1e8;border-radius:8px;text-decoration:none}
.valla-portal-nav a.is-active{background:color-mix(in srgb, var(--valla-auth-accent,#2563eb) 12%, #ffffff);border-color:var(--valla-auth-accent,#2563eb)}
.valla-portal-panel{background:#fff;border:1px solid #d9e1e8;border-radius:12px;padding:14px;margin-bottom:12px}
.valla-portal-table{width:100%;border-collapse:collapse}
.valla-portal-table th,.valla-portal-table td{padding:8px;border-bottom:1px solid #eaeff4;text-align:left}
.valla-portal-login-gate{max-width:620px;margin:20px auto;padding:18px;border:1px solid #d9e1e8;border-radius:10px;background:#fff}
.valla-portal-help-text{margin:10px 0 0;color:#3c434a}
.valla-portal-cta{margin:8px 0 12px}
.valla-portal-empty{padding:14px;border:1px dashed #d9e1e8;border-radius:10px;background:#f8fbff}
.valla-portal-status{display:inline-flex;padding:4px 10px;border-radius:999px;font-weight:600;font-size:12px}
.valla-portal-status--confirmed{background:#e6fded;color:#0a5c1a}
.valla-portal-status--pending{background:#fff8e6;color:#7a5a00}
.valla-portal-status--cancelled{background:#feecec;color:#9c1a1a}

/* ── Hide theme/Elementor header on auth pages ─────────────────
   The login page uses the elementor_header_footer template, which
   still renders .site-header above the shortcode content.
   body:has() is supported in all modern browsers (Chrome 105+,
   Firefox 121+, Safari 15.4+). No page-ID hard-coding needed.
   ──────────────────────────────────────────────────────────── */
body:has(.valla-auth-shell) .site-header,
body:has(.valla-auth-shell) #masthead,
body:has(.valla-auth-shell) .elementor-location-header,
body:has(.valla-auth-shell) .main-navigation,
body:has(.valla-auth-shell) .elementor-location-footer,
body:has(.valla-auth-shell) .elementor-section:not(.valla-auth-shell .elementor-section),
body:has(.valla-auth-shell) [data-elementor-type="footer"],
/* Block themes (Twenty Twenty-*, etc.) render the site header/footer as
   template parts, which the classic selectors above miss -- so the theme header
   used to stack on top of the full-bleed auth hero and collide with it. */
body:has(.valla-auth-shell) header.wp-block-template-part,
body:has(.valla-auth-shell) footer.wp-block-template-part,
body:has(.valla-auth-shell) footer:not(.valla-auth-ticker) {
  display: none !important;
}
/* Hide Elementor page-title widget (shows "Register", "Forgot Password" etc.)
   above the auth shell on non-login pages */
body:has(.valla-auth-shell) .elementor-widget-theme-page-title,
body:has(.valla-auth-shell) .page-title-area,
body:has(.valla-auth-shell) .elementor-widget-page-title,
body:has(.valla-auth-shell) h1.entry-title,
body:has(.valla-auth-shell) .entry-header {
  display: none !important;
}
body.admin-bar:has(.valla-auth-shell) #wpadminbar {
  position: fixed;
}
body:has(.valla-auth-shell) #page,
body:has(.valla-auth-shell) .site {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Classic themes with a sidebar (GeneratePress, Astra, etc.) put the content in
   a constrained, offset column next to a widget sidebar. Left alone, the
   full-bleed auth hero renders squeezed beside a leftover Search widget (the
   "weird login" report). Hide the sidebar and collapse the content column so the
   hero can actually fill the viewport. Scoped to auth pages only. */
body:has(.valla-auth-shell) .widget-area,
body:has(.valla-auth-shell) .sidebar,
body:has(.valla-auth-shell) #right-sidebar,
body:has(.valla-auth-shell) #left-sidebar,
body:has(.valla-auth-shell) .is-right-sidebar,
body:has(.valla-auth-shell) .is-left-sidebar {
  display: none !important;
}
body:has(.valla-auth-shell) .site-content,
body:has(.valla-auth-shell) .content-area,
body:has(.valla-auth-shell) #primary,
body:has(.valla-auth-shell) .site-main,
body:has(.valla-auth-shell) .inside-article,
body:has(.valla-auth-shell) .inside-content,
body:has(.valla-auth-shell) .ast-container,
body:has(.valla-auth-shell) .entry-content {
  display: block !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  grid-template-columns: 1fr !important;
}

/* ── Full-bleed breakout from WP theme containers ──────────────
   Escapes .entry-content / .site-main / .hentry max-width and
   padding so the hero shell can fill the viewport edge-to-edge.
   ──────────────────────────────────────────────────────────── */
.valla-auth-shell{
  width:100vw;
  position:relative;
  left:50%;
  margin-left:-50vw;
  max-width:none!important;
  padding-left:0!important;
  padding-right:0!important;
  overflow-x:clip;
}

/* ── Auth shell — Direction B: full-bleed hero ─────────────── */
.valla-auth-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:var(--valla-auth-theme-font,"Inter Tight",system-ui,-apple-system,sans-serif);
  color:#0E1712;
  overflow-x:clip;
  overflow-y:clip;
}
.valla-auth-shell,.valla-auth-shell *{box-sizing:border-box}

.valla-auth-bg{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg, color-mix(in srgb, var(--valla-auth-accent,#2563eb) 70%, #06120a) 0%, color-mix(in srgb, var(--valla-auth-accent,#2563eb) 85%, #0a1e12) 45%, color-mix(in srgb, var(--valla-auth-accent,#2563eb) 55%, #05100a) 100%);
}
.valla-auth-bg-svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  opacity:.5;
}

.valla-auth-topbar{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 44px;
}
.valla-auth-topbar-guest{
  padding:9px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.22);
  color:#fff;
  text-decoration:none;
  font-size:13px;font-weight:600;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background 140ms ease;
}
.valla-auth-topbar-guest:hover{background:rgba(255,255,255,0.2);color:#fff}
.valla-auth-brand{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;cursor:pointer}
.valla-auth-brand-mark svg{display:block}
/* ── Logo image — uploaded via Auth Display Settings ──────────
   mix-blend-mode: screen → black background becomes transparent
   on the dark hero, leaving only the green mark visible.
   Outline/border reset prevents browser or WP-admin focus rings.
   ──────────────────────────────────────────────────────────── */
.valla-auth-logo-img,
.valla-auth-brand-mark img.valla-auth-logo-img {
  /* Remove any focus/admin outlines */
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  /* Sizing — 80px at desktop (~54% larger than 52px) */
  height: 80px;
  width: auto;
  max-width: 280px;
  min-width: 60px;
  object-fit: contain;
  display: block;
  /* Black-bg PNG → transparent via blend mode */
  mix-blend-mode: screen;
}
/* Also kill any admin highlight/outline on the wrapper */
.valla-auth-brand-mark,
.valla-auth-brand-mark a,
.valla-auth-brand-mark a:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* Tablet (561–900px): 70px */
@media (min-width:561px) and (max-width:900px){
  .valla-auth-logo-img{ height:70px; max-width:240px; }
}
/* Mobile (≤560px): 60px — much bigger than before (+58% vs old 38px) */
@media (max-width:560px){
  .valla-auth-logo-img{ height:60px; max-width:200px; }
}
.valla-auth-brand-name{
  font-size:10px;font-weight:700;
  letter-spacing:2.8px;text-transform:uppercase;
  color:#fff;white-space:nowrap;
  line-height:1;padding-left:2px;
}

.valla-auth-layout{
  position:relative;z-index:10;
  flex:1;
  display:grid;
  grid-template-columns:1fr minmax(360px,500px);
  gap:0;
  align-items:center;
  padding:32px 72px 88px 44px;
  max-width:1800px;width:100%;margin:0 auto;
}

.valla-auth-hero{color:#fff;max-width:500px;padding-right:40px;}
.valla-auth-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:999px;
  background:color-mix(in srgb, var(--valla-auth-accent,#2563eb) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--valla-auth-accent,#2563eb) 40%, transparent);
  font-size:11px;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;
  color:#BFF5C7;margin-bottom:22px;
}
.valla-auth-eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--valla-auth-accent,#2563eb);box-shadow:0 0 8px var(--valla-auth-accent,#2563eb);
}
.valla-auth-headline{
  font-size:clamp(42px,4.5vw,66px);
  font-weight:400;line-height:1.03;
  letter-spacing:-0.03em;
  margin:0 0 18px;color:#fff;
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
}
.valla-auth-headline em{color:var(--valla-auth-accent,#2563eb);font-style:italic}
.valla-auth-sub{
  font-size:15px;line-height:1.6;
  color:rgba(255,255,255,0.75);
  max-width:400px;margin:0 0 28px;
}

.valla-auth-weather{
  display:inline-flex;align-items:center;gap:14px;
  padding:12px 16px;border-radius:10px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.valla-auth-weather-sun{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 35%,#FFD56B,#F5A623);
  box-shadow:0 0 14px rgba(245,166,35,0.4);
}
.valla-auth-weather-label{font-size:13px;font-weight:600;color:#fff}
.valla-auth-weather-sub{font-size:11px;color:rgba(255,255,255,0.6);margin-top:2px}
.valla-auth-weather-sub strong{color:var(--valla-auth-accent,#2563eb);font-weight:600}

.valla-auth-card{
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:16px;padding:32px;
  box-shadow:0 24px 56px rgba(0,0,0,0.32),0 1px 2px rgba(0,0,0,0.08);
  color:#0E1712;
}
.valla-auth-card .valla-auth-card-title{
  margin:0 0 4px;
  font-size:24px!important;font-weight:600!important;
  letter-spacing:-0.04em!important;line-height:1.1!important;
  font-family:inherit!important;color:#0E1712!important;
}
.valla-auth-card-sub{font-size:13px;color:#6B7A71;margin:0 0 22px;}
.valla-auth-card-sub a{color:var(--valla-auth-accent,#2563eb);font-weight:600;text-decoration:none}
.valla-auth-card-sub a:hover{text-decoration:underline}

.valla-fl-wrap{position:relative;margin-bottom:14px;}
.valla-fl-input{
  display:block;width:100%;height:52px;
  padding:20px 14px 6px;
  border:1px solid #E5E7E1;border-radius:6px;
  font-size:15px;color:#0E1712;background:#fff;
  outline:none;font-family:inherit;
  transition:border-color 120ms ease,box-shadow 120ms ease;
  -webkit-text-fill-color:#0E1712;
}
.valla-fl-input::placeholder{color:transparent}
.valla-fl-input:focus{border-color:var(--valla-auth-accent,#2563eb);box-shadow:0 0 0 3px color-mix(in srgb, var(--valla-auth-accent,#2563eb) 16%, transparent);}
.valla-fl-label{
  position:absolute;left:14px;top:16px;
  font-size:14px;font-weight:400;color:#6B7A71;
  pointer-events:none;
  transition:top 140ms ease,font-size 140ms ease,font-weight 140ms ease,
             letter-spacing 140ms ease,color 140ms ease;
  line-height:1;
}
.valla-fl-input:focus ~ .valla-fl-label,
.valla-fl-input:not(:placeholder-shown) ~ .valla-fl-label{
  top:8px;font-size:11px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;
}
.valla-fl-input:focus ~ .valla-fl-label{color:var(--valla-auth-accent,#2563eb)}
.valla-fl-input:not(:placeholder-shown):not(:focus) ~ .valla-fl-label{color:#6B7A71}
.valla-auth-name-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.valla-auth-card label:not(.valla-fl-label){font-weight:400;font-size:13px;}

.valla-auth-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 22px;
  border-radius:6px;border:none;
  background:var(--valla-auth-theme-color,var(--valla-auth-accent,#2563eb));
  color:#fff;font-weight:600;font-size:14px;letter-spacing:.2px;
  text-decoration:none;cursor:pointer;width:100%;
  transition:filter 120ms ease;font-family:inherit;margin-top:4px;
}
.valla-auth-btn:hover{filter:brightness(1.08);color:#fff}
.valla-auth-btn:focus,.valla-auth-btn:focus-visible{
  outline:2px solid var(--valla-auth-accent,#2563eb);outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--valla-auth-accent,#2563eb) 20%, transparent);
}
.valla-auth-btn--secondary{
  background:#fff;color:#0E1712;
  border:1px solid #E5E7E1;margin-top:8px;
}
.valla-auth-btn--secondary:hover{background:#FAFAF7;color:#0E1712}
.valla-auth-btn--dark{background:#0E1712}
.valla-auth-btn--dark:hover{background:#1a2e22;color:#fff}

.valla-auth-row-between{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;margin:2px 0 14px;
}
.valla-auth-forgot{color:var(--valla-auth-accent,#2563eb);font-weight:600;text-decoration:none}
.valla-auth-forgot:hover{text-decoration:underline}
.valla-auth-inline-links{margin:16px 0 0;font-size:12px;color:#6B7A71;text-align:center;}
.valla-auth-inline-links a{color:#0E1712;font-weight:600;text-decoration:none}
.valla-auth-inline-links a:hover{text-decoration:underline}

.valla-auth-divider{
  display:flex;align-items:center;gap:10px;
  margin:18px 0 14px;color:#6B7A71;font-size:10px;
  letter-spacing:1.4px;text-transform:uppercase;
}
.valla-auth-divider::before,.valla-auth-divider::after{
  content:'';flex:1;height:1px;background:#E5E7E1;
}

.valla-auth-oauth-wrap{margin:0}
.valla-auth-oauth-title{display:none}
.valla-auth-oauth{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.valla-auth-oauth-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 12px;border-radius:6px;
  border:1px solid #E5E7E1;background:#fff;
  color:#0E1712;font-weight:500;font-size:13px;
  text-decoration:none;transition:background 100ms ease;
}
.valla-auth-oauth-btn:hover,.valla-auth-oauth-btn:focus-visible{background:#FAFAF7;color:#0E1712;}
.valla-auth-oauth-btn:focus-visible{outline:2px solid var(--valla-auth-accent,#2563eb);outline-offset:2px;}
.valla-auth-oauth-btn svg{flex-shrink:0}

.valla-auth-alert{border-radius:8px;padding:10px 14px;margin:0 0 14px;font-size:13px;line-height:1.5}
.valla-auth-alert p{margin:0 0 6px}.valla-auth-alert p:last-child{margin:0}
.valla-auth-alert--info{background:color-mix(in srgb, var(--valla-auth-accent,#2563eb) 8%, transparent);color:#0a4d18;border:1px solid color-mix(in srgb, var(--valla-auth-accent,#2563eb) 20%, transparent)}
.valla-auth-alert--success{background:color-mix(in srgb, var(--valla-auth-accent,#2563eb) 10%, transparent);color:#0a4d18;border:1px solid color-mix(in srgb, var(--valla-auth-accent,#2563eb) 25%, transparent)}
.valla-auth-alert--error{background:#feecec;color:#9c1a1a;border:1px solid #f5c5c5}
.valla-auth-alert a{color:inherit;font-weight:700}

.valla-auth-tip{
  margin:14px 0 0;padding:12px 14px;
  background:color-mix(in srgb, var(--valla-auth-accent,#2563eb) 8%, transparent);border:1px solid color-mix(in srgb, var(--valla-auth-accent,#2563eb) 22%, transparent);
  border-radius:8px;font-size:12px;line-height:1.55;color:#2B3A2F;
}
.valla-auth-tip strong{color:#0E5A2A;font-weight:600}
.valla-auth-terms{font-size:12px;color:#6B7A71;margin:4px 0 14px;line-height:1.5;}
.valla-auth-terms a{color:#0E1712;font-weight:600;text-decoration:none}
.valla-auth-terms a:hover{text-decoration:underline}

.valla-auth-ticker{
  position:absolute;left:0;right:0;bottom:0;z-index:10;
  padding:12px 44px;
  background:rgba(5,29,16,0.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:rgba(255,255,255,0.55);
}
.valla-auth-ticker a{color:inherit;text-decoration:none;margin-left:16px}
.valla-auth-ticker a:hover{color:rgba(255,255,255,0.85)}
.valla-auth-social-row{display:flex;gap:14px;align-items:center}
.valla-auth-social-link{
  color:rgba(255,255,255,0.65);text-decoration:none;font-size:11px;
  display:inline-flex;align-items:center;gap:5px;transition:color 100ms;
}
.valla-auth-social-link:hover{color:#fff}

/* custom logo swap — set via admin Settings > Auth Display */
.valla-auth-topbar .valla-auth-logo-img{height:48px}
.valla-auth-card .valla-auth-card-logo{display:block;margin:0 0 20px}
.valla-auth-card .valla-auth-card-logo img{height:36px;width:auto;object-fit:contain}

.valla-auth-font--inter{--valla-auth-theme-font:"Inter Tight","Inter",system-ui,-apple-system,sans-serif}
.valla-auth-font--display{--valla-auth-theme-font:var(--wp--preset--font-family--heading,system-ui)}
.valla-auth-font--serif{--valla-auth-theme-font:var(--wp--preset--font-family--serif,Georgia,serif)}
.valla-auth-font--mono{--valla-auth-theme-font:var(--wp--preset--font-family--monospace,"SFMono-Regular",Menlo,monospace)}

@media (max-width:980px){
  .valla-auth-topbar{padding:18px 24px}
  .valla-auth-layout{
    grid-template-columns:1fr;
    padding:24px 24px 88px;
    justify-items:center;
  }
  .valla-auth-hero{display:none}
  .valla-auth-card{width:100%;max-width:440px}
  .valla-auth-ticker{padding:12px 24px}
}
@media (max-width:560px){
  .valla-auth-topbar{padding:14px 16px}
  .valla-auth-layout{padding:16px 16px 88px}
  .valla-auth-card{padding:22px 18px}
  .valla-auth-oauth{grid-template-columns:1fr 1fr}
  .valla-auth-name-row{grid-template-columns:1fr}
  .valla-auth-ticker{
    flex-direction:column;gap:10px;
    text-align:center;padding:14px 16px;
  }
}

/* ── Responsive layout fixes ─────────────────────────────────── */

/* Card: constrain width on all screen sizes */
.valla-auth-card{
  max-width:480px;
  min-width:320px;
  width:100%;
  box-sizing:border-box;
}

/* Wide screens (>1400px): stop the layout from stretching infinitely */
@media (min-width:1400px){
  .valla-auth-layout{
    padding:32px 80px 88px 80px;
  }
  .valla-auth-topbar{
    padding:20px 80px;
  }
}

/* Narrow tablet / large mobile (561–900px): reduce hero, keep side-by-side */
@media (max-width:900px){
  .valla-auth-layout{
    grid-template-columns:1fr minmax(320px,420px);
    padding:24px 32px 88px 32px;
    gap:16px;
  }
  .valla-auth-topbar{ padding:16px 32px; }
  .valla-auth-headline{ font-size:clamp(2rem,5vw,3.5rem); }
}

/* Mobile (≤560px): single column, card full-width */
@media (max-width:560px){
  .valla-auth-layout{
    grid-template-columns:1fr;
    padding:16px 16px 88px;
    gap:24px;
  }
  .valla-auth-topbar{ padding:14px 20px; }
  .valla-auth-hero{ display:none; }
  .valla-auth-card{
    max-width:100%;
    min-width:0;
    width:calc(100% - 0px);
    border-radius:16px;
    margin:0 auto;
  }
}