@charset "UTF-8";
/* =======================================================================
   KHIDI DARK RESTYLE 2026-06-01  —  frontend-dev
   Scope: Homepage (page-id-326), My-Account dashboard (page-id-36, reused
   across all /my-account/* endpoints), Login (page-id-554).
   Implements .claude/context/audit/frontend-khidi-design-spec.md against the
   ACTUAL live markup (bespoke Elementor dashboard, not stock Woo my-account).
   Logic untouched — presentation only. Loaded AFTER ohio-style via
   functions.php with filemtime() versioning; remove the enqueue + this file
   to fully revert.
   ======================================================================= */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS  (spec §1)
   --------------------------------------------------------------------- */
:root{
  /* Surfaces */
  --khidi-bg:           #0d0d0d;
  --khidi-surface:      #161519;
  --khidi-surface-2:    #1c1b20;
  --khidi-surface-3:    #242329;
  /* Brand */
  --khidi-primary:      #1a1444;
  --khidi-primary-700:  #120e30;
  --khidi-primary-300:  #2a2166;
  --khidi-accent:       #bf4a23;
  --khidi-accent-600:   #9c3a18;
  --khidi-accent-300:   #e0673c;   /* AA-safe accent for small text */
  --khidi-mint:         #39e6b0;
  --khidi-violet:       #1e0756;
  /* Text */
  --khidi-text:         #f4f4f4;
  --khidi-text-muted:   #a7a6ad;
  --khidi-text-faint:   #6f6e75;
  /* Lines & status */
  --khidi-border:       #2e2d33;
  --khidi-border-strong:#3d3c44;
  --khidi-success:      #39e6b0;
  --khidi-warning:      #e0a93b;
  --khidi-danger:       #cf2e2e;
  --khidi-on-accent:    #ffffff;
  /* Spacing / radius / elevation */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --radius-sm:4px; --radius:8px; --radius-lg:14px;
  --ring: 0 0 0 2px var(--khidi-bg), 0 0 0 4px var(--khidi-accent);
  --shadow-card: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px rgba(0,0,0,.45);
  /* Georgian-capable fallback ahead of Arial (Futura PT lacks Georgian glyphs) */
  --khidi-font: futura-pt, "Segoe UI", "BPG Nino Mtavruli", "Noto Sans Georgian", Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   2. ACCESSIBILITY — focus-visible ring on all interactive elements (§1.4/§7)
   Non-negotiable on dark UI. Scoped to our pages to avoid global side effects.
   --------------------------------------------------------------------- */
.page-id-326 a:focus-visible,
.page-id-326 button:focus-visible,
.page-id-326 input:focus-visible,
.page-id-326 .elementor-button:focus-visible,
.page-id-36 a:focus-visible,
.page-id-36 button:focus-visible,
.page-id-36 input:focus-visible,
.page-id-36 .elementor-button:focus-visible,
.page-id-554 a:focus-visible,
.page-id-554 button:focus-visible,
.page-id-554 input:focus-visible,
.page-id-554 .elementor-button:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce){
  .page-id-326 *, .page-id-36 *, .page-id-554 *{
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* =====================================================================
   3. MY-ACCOUNT DASHBOARD  (page-id-36)  — spec §6
   Bespoke Elementor dashboard: .user-info card, verification status
   shortcodes, "My Tickets" icon-list, Log Out button.
   ===================================================================== */

/* 3.0 Account shell: center, constrain, breathing room (spec §6.2) */
.page-id-36 .elementor-element-0ca2159{           /* outer row container */
  min-height: auto !important;
  padding-top: var(--sp-7) !important;
  padding-bottom: var(--sp-7) !important;
  justify-content: center !important;
}
.page-id-36 .elementor-element-67ea1d5{           /* content column */
  width: 100% !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: var(--sp-5) !important;
  padding-left: var(--sp-4) !important;
  padding-right: var(--sp-4) !important;
}

/* 3.1 User-info card (.user-info, widget af761da) — spec §2.3 card + §6.3 */
.page-id-36 .user-info .elementor-shortcode{
  background: var(--khidi-surface) !important;
  border: 1px solid var(--khidi-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  padding: var(--sp-5) !important;
}
.page-id-36 .user-info ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  gap: var(--sp-3);
}
.page-id-36 .user-info li{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: baseline;
  color: var(--khidi-text) !important;
  font-family: var(--khidi-font);
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--khidi-border);
}
.page-id-36 .user-info li:last-child{ border-bottom: none; padding-bottom: 0; }
.page-id-36 .user-info li strong{
  color: var(--khidi-text-muted) !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
  text-transform: uppercase;
  min-width: 120px;
}
.page-id-36 .user-info a{ color: var(--khidi-accent-300) !important; text-decoration: none; }
.page-id-36 .user-info a:hover{ text-decoration: underline; }

/* 3.1b Flatten redundant inner wrapper bfa47c9 (the "container inside a container").
   It's an isInner container_type:grid with grid_justify_items:start, so its only
   child (the .user-info widget af761da) became a grid item that SHRANK to content
   width (~277px) and pinned top-left — a narrow card next to the full-width banner
   below. §7 already zeroed its bg/border/shadow + the #54595F ::before overlay, but
   left the grid, its 25px padding and 20px radius. Drop the grid so the child fills
   width, and clear the leftover padding/radius so the user-info card IS the single,
   full-width card. No new wrapper card — the .user-info .elementor-shortcode (§3.1)
   stays the only surface. */
.page-id-36 .elementor-element-bfa47c9{
  display: block !important;     /* was grid + justify-items:start → forced 277px shrink */
  width: 100% !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.page-id-36 .elementor-element-bfa47c9 > .elementor-background-overlay,
.page-id-36 .elementor-element-bfa47c9::before,
.page-id-36 .elementor-element-bfa47c9::after{ display: none !important; }
.page-id-36 .elementor-element-bfa47c9 > .elementor-widget,
.page-id-36 .elementor-element-bfa47c9 .elementor-element-af761da,
.page-id-36 .elementor-element-bfa47c9 .user-info,
.page-id-36 .user-info .elementor-shortcode{ width: 100% !important; }

/* 3.2 Verification status shortcodes (52d1ea5 / 7490926 / a88f370) — spec §2.4 + §6.4
   Live markup outputs an inline-styled <div style="background-color:darkgreen…"><h2>Verified</h2></div>.
   Reskin to the KHIDI status banner. Empty shortcode wrappers collapse so they
   leave no blank gap. High specificity + the inline-style div override. */
.page-id-36 .elementor-widget-shortcode .elementor-shortcode:empty{ display: none !important; }
.page-id-36 .elementor-widget-shortcode .elementor-shortcode{ margin: 0 !important; }

/* the status box: catch the inline-styled child div and reskin it */
.page-id-36 .elementor-element-7490926 .elementor-shortcode > div,
.page-id-36 .elementor-element-52d1ea5 .elementor-shortcode > div,
.page-id-36 .elementor-element-a88f370 .elementor-shortcode > div{
  background-color: rgba(57,230,176,.12) !important;   /* mint tint (verified) */
  color: var(--khidi-mint) !important;
  border: 1px solid rgba(57,230,176,.35) !important;
  border-left: 3px solid var(--khidi-mint) !important;
  border-radius: var(--radius) !important;
  padding: var(--sp-4) var(--sp-5) !important;
  text-align: left !important;
}
.page-id-36 .elementor-element-7490926 .elementor-shortcode > div h2,
.page-id-36 .elementor-element-52d1ea5 .elementor-shortcode > div h2,
.page-id-36 .elementor-element-a88f370 .elementor-shortcode > div h2{
  color: inherit !important;
  margin: 0 !important;
  font-family: var(--khidi-font);
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* If a "pending"/"rejected" variant ships an amber/red inline box, tint via attribute match */
.page-id-36 .elementor-shortcode > div[style*="orange"],
.page-id-36 .elementor-shortcode > div[style*="goldenrod"]{
  background-color: rgba(224,169,59,.12) !important;
  color: var(--khidi-warning) !important;
  border-color: rgba(224,169,59,.40) !important;
  border-left-color: var(--khidi-warning) !important;
}
.page-id-36 .elementor-shortcode > div[style*="darkred"],
.page-id-36 .elementor-shortcode > div[style*="crimson"],
.page-id-36 .elementor-shortcode > div[style*="firebrick"]{
  background-color: rgba(207,46,46,.12) !important;
  color: #ff6b6b !important;
  border-color: rgba(207,46,46,.40) !important;
  border-left-color: var(--khidi-danger) !important;
}

/* 3.3 Tickets block (c2704e0) — when populated, give it card spacing.
   When it renders only whitespace (no tickets, as for a fresh account) the
   .elementor-shortcode is " " so :empty above does not catch it — collapse the
   wrapper to line-height:0 so the lone space leaves no faint empty bar, and
   restore normal flow only when it has real element children. */
.page-id-36 .elementor-element-c2704e0 .elementor-shortcode{ line-height: 0 !important; }
.page-id-36 .elementor-element-c2704e0 .elementor-shortcode > *{
  line-height: 1.5 !important;
  color: var(--khidi-text);
}

/* 3.4 "My Tickets" icon-list (244b8d9) — spec §2.1 ghost link / §6.2 nav item */
/* 3.4a Kill the leftover gray (#54595F @0.25) pill + 20px radius that sit on the
   widget's INNER .elementor-widget-container (NOT the widget div — §7 only cleared
   the widget div, so this inner box survived as the full-width gray bar behind the
   two chips → the second "container inside a container"). Strip it so the two items
   read as clean standalone ghost chips on the page background. */
.page-id-36 .elementor-element-244b8d9 > .elementor-widget-container{
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* 3.4b Make the two chips an even, full-width row (was justify-content:center →
   two small content-width chips floating mid-row). Stretch the list and split it.
   FIX (owner: "My Tickets chip cropping on its left"): Elementor's .inline-items
   ships `margin: 0 -8px`, so the row's left edge sat 8px LEFT of the column edge —
   the first chip's rounded left corner overhung the gutter and read as a left crop
   (the right chip overhung +8px right but went unnoticed). Zero that negative
   margin so the row aligns flush with the card/banner/log-out above & below. */
.page-id-36 .elementor-element-244b8d9 .elementor-icon-list-items{
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;            /* kill Elementor inline-items `0 -8px` overhang */
  padding: 0 !important;
  gap: var(--sp-4) !important;
  justify-content: stretch !important;
  list-style: none !important;
}
.page-id-36 .elementor-element-244b8d9 .elementor-icon-list-item{
  flex: 1 1 0 !important;          /* equal split across the full width */
  margin: 0 !important;
  padding: 0 !important;           /* the <a> carries the padding; keep chip edges clean */
  justify-content: center !important;
  overflow: visible !important;    /* never let the rounded chip clip the icon */
}
/* Center icon + label as one group inside each chip, with an even gap. Zero the
   Elementor default left-indent on the text (padding-left:5px) so the group is
   truly centered, not nudged right. */
.page-id-36 .elementor-element-244b8d9 .elementor-icon-list-item > a{
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--sp-2) !important;
  padding: 12px 16px !important;
  min-height: 44px;               /* touch target */
  overflow: visible !important;
  text-indent: 0 !important;
}
.page-id-36 .elementor-element-244b8d9 .elementor-icon-list-icon{
  margin: 0 !important;            /* drop any icon offset/margin that skews centering */
  padding: 0 !important;
}
.page-id-36 .elementor-element-244b8d9 .elementor-icon-list-text{
  padding-left: 0 !important;      /* default is 0 0 0 5px → asymmetric; gap handles spacing */
}
.page-id-36 .elementor-element-244b8d9 .elementor-icon-list-item{
  background: var(--khidi-surface) !important;
  border: 1px solid var(--khidi-border-strong) !important;
  border-radius: var(--radius) !important;
  transition: border-color .15s ease, background .15s ease;
}
.page-id-36 .elementor-element-244b8d9 .elementor-icon-list-item a,
.page-id-36 .elementor-element-244b8d9 .elementor-icon-list-item{
  color: var(--khidi-text) !important;
}
.page-id-36 .elementor-element-244b8d9 .elementor-icon-list-text{
  font-family: var(--khidi-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.page-id-36 .elementor-element-244b8d9 .elementor-icon-list-item:hover{
  border-color: var(--khidi-accent) !important;
  background: var(--khidi-surface-2) !important;
}
.page-id-36 .elementor-element-244b8d9 .elementor-icon-list-item:hover a,
.page-id-36 .elementor-element-244b8d9 .elementor-icon-list-item:hover .elementor-icon-list-text,
.page-id-36 .elementor-element-244b8d9 .elementor-icon-list-item:hover .elementor-icon-list-icon i{
  color: var(--khidi-accent-300) !important;
}

/* 3.5 Log Out button (#logout-button / 6b2a9af) — spec §2.1 ghost/danger (§6.2) */
.page-id-36 #logout-button .elementor-button,
.page-id-36 .elementor-element-6b2a9af .elementor-button{
  background: transparent !important;
  border: 1px solid rgba(207,46,46,.45) !important;
  color: #ff8585 !important;
  border-radius: var(--radius) !important;
  padding: 12px 24px !important;
  min-height: 44px;
  font-family: var(--khidi-font);
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.page-id-36 #logout-button .elementor-button:hover,
.page-id-36 .elementor-element-6b2a9af .elementor-button:hover{
  background: rgba(207,46,46,.14) !important;
  border-color: rgba(207,46,46,.7) !important;
  color: #ffb0b0 !important;
}

/* 3.6 WooCommerce notices that may surface on account endpoints — spec §2.7 */
.page-id-36 .woocommerce-message,
.page-id-36 .woocommerce-info,
.page-id-36 .woocommerce-error{
  background: var(--khidi-surface-2) !important;
  color: var(--khidi-text) !important;
  border: 1px solid var(--khidi-border) !important;
  border-left: 3px solid var(--khidi-mint) !important;
  border-radius: var(--radius) !important;
  padding: var(--sp-3) var(--sp-4) !important;
}
.page-id-36 .woocommerce-info{ border-left-color: var(--khidi-accent) !important; }
.page-id-36 .woocommerce-error{ border-left-color: var(--khidi-danger) !important; }

/* 3.7 Empty-state safety — if the dashboard column has only empty shortcodes,
   it still reads as an intentional, spaced card stack rather than blank voids. */
.page-id-36 .elementor-widget-shortcode{ margin-bottom: 0 !important; }

/* =====================================================================
   4. HOMEPAGE  (page-id-326)  — spec §5
   Bring the public homepage into the SAME design system as the my-account
   dashboard (§3): a centered ~1080px column of clean single token cards,
   readable section label, and proper button hierarchy.
   SUPERSEDES the legacy style.css "Professional Homepage Enhancement" block
   (full-bleed 2a508dd, ad-hoc rgba(255,255,255,.0x) surfaces, #54595F/#F1F1F1
   ::before overlays, opacity:.45 heading, gray block buttons). style.css loads
   BEFORE this file and uses .e-con[data-id] selectors; these .elementor-element
   class selectors are equal-specificity but win on source order — same pattern
   §7 used to supersede the legacy my-account rules. Presentation only.
   ===================================================================== */

/* 4.0 Centered column — match my-account's ~1080px contained feel (was full-bleed:
   2a508dd is e-con-full with max-width:none → blocks ran ~1218px edge-to-edge).
   Constrain the content column + the orphan sibling and center them; keep side
   gutters via padding so nothing touches the viewport edge. */
body.page-id-326 .elementor-element.elementor-element-2a508dd,
body.page-id-326 .elementor-element.elementor-element-3178e7a{   /* (0,3,1) > legacy (0,3,0) */
  width: 100% !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--sp-4) !important;
  padding-right: var(--sp-4) !important;
  box-sizing: border-box !important;
}
body.page-id-326 .elementor-element.elementor-element-2a508dd{
  gap: var(--sp-5) !important;        /* even vertical rhythm between cards */
}
/* The boxed outer (cfcabe6) bleeds ~16px on desktop too (scrollWidth > clientWidth);
   clip it so there's no stray horizontal scroll. */
.page-id-326 .elementor-element-cfcabe6{ overflow-x: hidden !important; }

/* 4.1 Orphan container 3178e7a: saved at 66.66% width, and its only child
   (a1b017f → vertical slider) is hidden on desktop/widescreen. A 66.66%
   block on a flattened column reads as a lopsided half-width void on desktop.
   Force full width so the column reads correctly; collapse if it has no
   visible content. */
.page-id-326 .elementor-element-3178e7a{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}
/* On desktop the slider child is hidden by Elementor (hide_desktop/widescreen);
   drop the empty container's padding so it doesn't leave a gap. */
@media (min-width: 1025px){
  .page-id-326 .elementor-element-3178e7a{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* 4.2 Hero banner (cb30c9d) — intentional dark hero, not a washed-out gray bar.
   Legacy gave it a #54595F (rgb 84,89,95) ::before overlay AND an ::after scrim →
   the low-res cover image read as flat gray. Neutralize the gray ::before, keep a
   single token gradient scrim so the image reads as a dark hero, token border +
   radius to match the card system. (Image itself is low-res — content follow-up.) */
body.page-id-326 .elementor-element.elementor-element-cb30c9d{  /* (0,3,1) > legacy (0,3,0) */
  min-height: 240px !important;
  background-size: cover !important;
  background-position: center 30% !important;
  border: 1px solid var(--khidi-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  overflow: hidden !important;
}
.page-id-326 .elementor-element-cb30c9d > .elementor-background-overlay,
.page-id-326 .elementor-element-cb30c9d::before{ display: none !important; }  /* kill #54595F gray overlay */
.page-id-326 .elementor-element-cb30c9d::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background: linear-gradient(180deg, rgba(13,13,13,.25) 0%, rgba(13,13,13,.85) 100%) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

/* 4.3 "Upcoming Nights" section (events card 2b87cbc, heading 1e99e0a, loop 9fa769a).
   One clean token card; readable uppercase section label (legacy rendered it at
   opacity:.45 / 10px ≈ invisible). */
/* The legacy style.css rules use `.page-id-326 .e-con[data-id="…"]` — the [data-id]
   attribute counts as a class, so that's specificity (0,3,0). To win deterministically
   (the child style.css is registered as 'parent-style', so load order vs khidi-dark
   isn't guaranteed) we match (0,3,1) by chaining .elementor-element + the id class
   under body. Used for the two .e-con CARDS below; widget selectors already outrank. */
body.page-id-326 .elementor-element.elementor-element-2b87cbc{
  background: var(--khidi-surface) !important;
  border: 1px solid var(--khidi-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  padding: var(--sp-5) !important;
}
.page-id-326 .elementor-element-2b87cbc::before{ display: none !important; }   /* kill #54595F overlay */
.page-id-326 .elementor-element-2b87cbc:hover{ border-color: var(--khidi-border-strong) !important; }
/* Section label: readable muted token, proper tracking (override legacy opacity:.45/10px) */
.page-id-326 .elementor-element-1e99e0a .ohio-heading,
.page-id-326 .elementor-element-1e99e0a .ohio-heading h1,
.page-id-326 .elementor-element-1e99e0a .ohio-heading h2,
.page-id-326 .elementor-element-1e99e0a .ohio-heading h3,
.page-id-326 .elementor-element-1e99e0a .ohio-heading h4,
.page-id-326 .elementor-element-1e99e0a .ohio-heading span,
.page-id-326 .elementor-element-1e99e0a{
  color: var(--khidi-text-muted) !important;
  opacity: 1 !important;
  font-family: var(--khidi-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
/* Loop event items → clean token cards consistent with the system */
.page-id-326 .elementor-element-9fa769a .elementor-loop-item,
.page-id-326 .elementor-element-9fa769a .elementor-loop-container > *{
  background: var(--khidi-surface-2) !important;
  border: 1px solid var(--khidi-border) !important;
  border-radius: var(--radius) !important;
  transition: border-color .15s ease, transform .15s ease !important;
}
.page-id-326 .elementor-element-9fa769a .elementor-loop-item:hover{
  border-color: var(--khidi-accent) !important;
  transform: translateY(-2px) !important;
}

/* 4.4 Auth row (0487d22) + BUTTON HIERARCHY — same language as my-account nav/logout.
   The row itself is a clean token card; Registration = PRIMARY filled (accent),
   Login = ghost/outline. Even full-width split, 44px min, centered. Legacy gave the
   row a #F1F1F1 (near-white) ::before overlay + .02 white bg, an uneven 83px Login
   vs 606px gray Registration. This also covers the logged-IN pair (My Account 4c59863
   = primary, Sign Out fa9edd3 = ghost) via the same child selectors. */
body.page-id-326 .elementor-element.elementor-element-0487d22{   /* (0,3,1) beats legacy .e-con[data-id] (0,3,0) */
  background: var(--khidi-surface) !important;
  border: 1px solid var(--khidi-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  padding: var(--sp-4) var(--sp-5) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--sp-3) !important;
}
.page-id-326 .elementor-element-0487d22::before{ display: none !important; }   /* kill #F1F1F1 overlay */
.page-id-326 .elementor-element-0487d22 > .elementor-widget{
  flex: 1 1 180px !important;        /* even split */
  margin: 0 !important;
}
.page-id-326 .elementor-element-0487d22 .ohio-btn,
.page-id-326 .elementor-element-0487d22 .elementor-button,
.page-id-326 .elementor-element-0487d22 .button{
  width: 100% !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius) !important;
  font-family: var(--khidi-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}
/* PRIMARY = Registration (1803345) + My Account (4c59863): filled accent */
.page-id-326 .elementor-element-1803345 .ohio-btn,
.page-id-326 .elementor-element-1803345 .button,
.page-id-326 .elementor-element-4c59863 .ohio-btn,
.page-id-326 .elementor-element-4c59863 .button{
  background: var(--khidi-accent) !important;
  border: 1px solid var(--khidi-accent) !important;
  color: var(--khidi-on-accent) !important;
}
.page-id-326 .elementor-element-1803345 .ohio-btn:hover,
.page-id-326 .elementor-element-1803345 .button:hover,
.page-id-326 .elementor-element-4c59863 .ohio-btn:hover,
.page-id-326 .elementor-element-4c59863 .button:hover{
  background: var(--khidi-accent-600) !important;
  border-color: var(--khidi-accent-600) !important;
  color: var(--khidi-on-accent) !important;
}
/* GHOST = Login (c0d56d3) + Sign Out (fa9edd3): outline */
.page-id-326 .elementor-element-c0d56d3 .ohio-btn,
.page-id-326 .elementor-element-c0d56d3 .button,
.page-id-326 .elementor-element-fa9edd3 .ohio-btn,
.page-id-326 .elementor-element-fa9edd3 .button{
  background: transparent !important;
  border: 1px solid var(--khidi-border-strong) !important;
  color: var(--khidi-text) !important;
}
.page-id-326 .elementor-element-c0d56d3 .ohio-btn:hover,
.page-id-326 .elementor-element-c0d56d3 .button:hover,
.page-id-326 .elementor-element-fa9edd3 .ohio-btn:hover,
.page-id-326 .elementor-element-fa9edd3 .button:hover{
  border-color: var(--khidi-accent) !important;
  color: var(--khidi-accent-300) !important;
}

/* 4.5 Social bar (076b6c6) — clean token card, icons centered, token hover. */
.page-id-326 .elementor-widget-ohio_social_networks,
.page-id-326 .elementor-element-076b6c6{
  background: var(--khidi-surface) !important;
  border: 1px solid var(--khidi-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  padding: var(--sp-4) var(--sp-5) !important;
}
.page-id-326 .elementor-element-076b6c6:hover{ border-color: var(--khidi-border-strong) !important; }
.page-id-326 .elementor-element-076b6c6 .ohio-social-networks,
.page-id-326 .elementor-element-076b6c6 .ohio-socialbar{
  display: flex !important;
  justify-content: center !important;
  gap: var(--sp-4) !important;
}
.page-id-326 .elementor-element-076b6c6 a:hover{ color: var(--khidi-accent-300) !important; }

/* =====================================================================
   5. LOGIN  (page-id-554)  — spec §6.1
   The existing child style.css already cards the Elementor Login widget;
   this layer aligns colors to tokens + adds the mandatory focus ring
   (handled in §2) and AA-safe link color.
   ===================================================================== */
.page-id-554 .elementor-login__lost-password a,
.page-id-554 .elementor-login a{
  color: var(--khidi-accent-300) !important;
}
.page-id-554 .elementor-field-group input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px var(--khidi-surface-3) inset !important;
  -webkit-text-fill-color: var(--khidi-text) !important;
  caret-color: var(--khidi-text);
}

/* =====================================================================
   6. RESPONSIVE  (spec §3)
   ===================================================================== */
@media (max-width: 1024px){
  .page-id-36 .elementor-element-67ea1d5{ max-width: 720px !important; }
}
/* Mobile: the outer account container (0ca2159) keeps a ~16px boxed bleed that
   resists margin overrides; clip it at a stable ancestor so there is no
   horizontal scroll/overflow on phones. Scoped to page-id-36 only. */
@media (max-width: 767px){
  body.page-id-36,
  body.page-id-36 .elementor-326,
  body.page-id-36 #content,
  body.page-id-36 .page-container{ overflow-x: hidden !important; }
}
@media (max-width: 767px){
  /* The 0ca2159/67ea1d5 containers carry a negative side margin (~-16px each
     side) from Elementor's boxed layout → ~16px horizontal overflow on phones.
     Zero the margins, constrain to viewport, and keep gutters via padding. */
  .page-id-36 .elementor-element-0ca2159,
  .page-id-36 .elementor-element-67ea1d5{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  .page-id-36 .elementor-element-0ca2159{
    padding-top: var(--sp-5) !important;
    padding-bottom: var(--sp-5) !important;
    padding-left: var(--sp-4) !important;
    padding-right: var(--sp-4) !important;
    overflow-x: hidden !important;
  }
  .page-id-36 .elementor-element-67ea1d5{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .page-id-36 .elementor-element-67ea1d5 > *{ max-width: 100% !important; }
  .page-id-36 .user-info .elementor-shortcode{ padding: var(--sp-4) !important; }
  .page-id-36 .user-info li strong{ min-width: 100%; }   /* stack label above value */
  /* Nav: stack the two ghost chips on phones (equal-split row is too tight at 390px). */
  .page-id-36 .elementor-element-244b8d9 .elementor-icon-list-items{
    flex-direction: column !important;
    gap: var(--sp-3) !important;
  }
  .page-id-36 .elementor-element-244b8d9 .elementor-icon-list-item{ flex: 1 1 100% !important; }
  /* Homepage mobile: no horizontal overflow; column fills viewport with gutters;
     auth buttons stack (each widget full-width); hero a touch shorter. */
  body.page-id-326,
  body.page-id-326 #content,
  body.page-id-326 .page-container,
  .page-id-326 .elementor-element-cfcabe6{ overflow-x: hidden !important; }
  body.page-id-326 .elementor-element.elementor-element-2a508dd,
  body.page-id-326 .elementor-element.elementor-element-3178e7a{   /* (0,3,1) > legacy (0,3,0) */
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--sp-4) !important;
    padding-right: var(--sp-4) !important;
  }
  .page-id-326 .elementor-element-2a508dd > *{ max-width: 100% !important; }
  body.page-id-326 .elementor-element.elementor-element-cb30c9d{ min-height: 160px !important; }
  body.page-id-326 .elementor-element.elementor-element-0487d22{ flex-direction: column !important; }
  .page-id-326 .elementor-element-0487d22 > .elementor-widget{ flex: 1 1 100% !important; }
}

/* =====================================================================
   7. LEGACY OVERRIDE — neutralize the older style.css my-account cards
   (.e-con[bfa47c9] + .elementor-widget-shortcode/-icon-list widget cards)
   that double-box against this file's cards. This file is the single source
   of my-account card styling. legacy my-account card neutralizer.
   ===================================================================== */
.page-id-36 .e-con[data-id="bfa47c9"]{
  background: transparent !important; border: none !important; box-shadow: none !important;
}
.page-id-36 .elementor-widget-shortcode{
  background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important;
}
.page-id-36 .elementor-widget-icon-list{
  background: transparent !important; border: none !important; padding: 0 !important;
}

/* Kill the legacy gray (#54595F) background-overlay ::before on the user-info
   container — it sat behind this file's card and produced the double-box.
   bfa47c9 background-overlay pseudo. */
.page-id-36 .e-con[data-id="bfa47c9"]::before{ display: none !important; }