/*
Theme Name:  Altojive
Description: Event discovery platform — Events Manager + BuddyPress
Version:     2.0.0
Text Domain: altojive
*/

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — extracted pixel-perfect from Figma/designs
═══════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --navy:         #1e2035;
  --navy-hover:   #252843;
  --yellow:       #f5c518;
  --yellow-hover: #e0b310;
  --white:        #ffffff;

  /* Greys */
  --grey-50:  #f7f8fa;
  --grey-100: #f0f1f5;
  --grey-200: #e2e4ec;
  --grey-300: #c8ccd8;
  --grey-400: #9499b0;
  --grey-600: #565c7a;
  --grey-800: #2a2f4a;

  /* Semantic */
  --text-primary:   #1e2035;
  --text-secondary: #565c7a;
  --text-muted:     #9499b0;
  --text-on-dark:   #ffffff;
  --border:         #e2e4ec;
  --border-dark:    rgba(255,255,255,0.1);
  --bg-page:        #f7f8fa;
  --bg-white:       #ffffff;
  --bg-dark:        #1e2035;

  /* Category colours — exact from design */
  --cat-entertainment:   #ff4d4d;
  --cat-educational:     #4dd9d0;
  --cat-cultural:        #9b8ff5;
  --cat-sports:          #ff9f43;
  --cat-technology:      #54a0ff;
  --cat-travel:          #1dd1a1;
  --cat-food:            #ee5a24;
  --cat-business:        #ffd32a;

  /* Status */
  --green:      #27ae60;
  --green-bg:   #eafaf1;
  --red:        #e74c3c;
  --blue:       #3498db;

  /* Typography — static fallback; the live values are set by Altojive_Fonts
     (Customizer › Typography), defaulting to Poppins. */
  --font-display: 'Poppins', sans-serif;
  --font-body:    'Poppins', sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* Spacing (4px base) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* Layout */
  --container: 1200px;
  --navbar-h:  68px;
  --sidebar-w: 240px;

  /* Radii */
  --r-sm: 4px;  --r-md: 8px;   --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(30,32,53,0.06);
  --shadow-md: 0 4px 12px rgba(30,32,53,0.08);
  --shadow-lg: 0 8px 24px rgba(30,32,53,0.12);
  --shadow-xl: 0 16px 48px rgba(30,32,53,0.18);

  /* Transitions */
  --t-fast:   150ms ease;
  --t-base:   250ms ease;
  --t-spring: 300ms cubic-bezier(0.34,1.56,0.64,1);


  /* Aliases used by page CSS */
  --c-navy:    var(--navy);
  --c-yellow:  var(--yellow);
  --c-text:    var(--text-primary);
  --c-muted:   var(--text-muted);
  --c-border:  var(--border);
  --c-bg:      var(--bg-page);
  --yellow-hover: #e0b310;
  --green:     #27ae60;
  --blue:      #3498db;

  /* Z-index */
  --z-drop:   100;
  --z-sticky: 200;
  --z-over:   300;
  --z-modal:  400;
  --z-toast:  500;
}

/* ═══════════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}
body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;color:var(--text-primary);background:var(--bg-page);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
input[type=date],input[type=time]{
  -webkit-appearance:none;appearance:none;
  font-family:var(--font-body);font-size:var(--text-base);
  color:var(--text-primary);
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6}
button{cursor:pointer;border:none;background:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);line-height:1.2;font-weight:700;color:var(--text-primary)}

/* ═══════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-6)}
.sr-only,.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ═══════════════════════════════════════════════════════════
   FOCUS + SKIP LINK (accessibility baseline)
   The theme previously had no visible focus indicator at all, so anyone
   navigating by keyboard could not see where they were — a WCAG 2.4.7 failure.
   :focus-visible keeps it out of the way for mouse users.
═══════════════════════════════════════════════════════════ */
:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
/* On the navy header the yellow ring needs a dark halo to stay legible. */
.site-header :focus-visible{outline-color:var(--yellow);box-shadow:0 0 0 5px rgba(30,32,53,.9)}
/* Don't double up on inputs that already draw their own focus ring. */
.form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible{outline:none}

.skip-link{
  /* fixed, not absolute: an absolutely-positioned skip link is anchored to the
     document, so on a scrolled page it reveals above the viewport where nobody
     can see it. */
  position:fixed;left:var(--sp-4);top:-100px;
  z-index:calc(var(--z-modal) + 10);
  background:var(--yellow);color:var(--navy);
  font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);
  padding:var(--sp-3) var(--sp-5);
  border-radius:0 0 var(--r-md) var(--r-md);
  transition:top var(--t-fast);
}
.skip-link:focus{top:0}

/* ═══════════════════════════════════════════════════════════
   NAVBAR — exact match to design: navy bg, logo left, nav centre, actions right
═══════════════════════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--navy);height:var(--navbar-h);
  display:flex;align-items:center;
  border-bottom:1px solid var(--border-dark);
}
.site-header .container{display:flex;align-items:center;gap:var(--sp-8)}

/* Logo */
.site-logo{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0}
.site-logo__icon{width:34px;height:34px}
.site-logo__text{font-family:var(--font-display);font-size:1.375rem;font-weight:800;color:var(--yellow);letter-spacing:-0.02em}

/* Primary nav */
.primary-nav{display:flex;align-items:center;gap:var(--sp-1);flex:1}
.primary-nav a{
  font-size:var(--text-sm);font-weight:500;
  color:rgba(255,255,255,0.72);
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-md);
  transition:color var(--t-fast),background var(--t-fast);
}
.primary-nav a:hover,.primary-nav a.current-menu-item{color:#fff;background:rgba(255,255,255,0.08)}

/* Nav actions right */
.header-actions{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}

.btn-create-event{
  font-size:var(--text-sm);font-weight:500;
  color:rgba(255,255,255,0.8);
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-md);
  transition:color var(--t-fast);
}
.btn-create-event:hover{color:#fff}

/* Icon+label header buttons (Tickets, Interested) */
.header-icon-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:rgba(255,255,255,0.72);
  font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  padding:var(--sp-1) var(--sp-2);
  min-width:44px;min-height:44px;      /* WCAG 2.5.8 target size */
  transition:color var(--t-fast);
  line-height:1;
}
.header-icon-btn svg{width:20px;height:20px}
.header-icon-btn:hover{color:var(--yellow)}

/* Profile dropdown */
.header-profile{position:relative}
.header-profile__btn{
  display:flex;align-items:center;gap:var(--sp-2);
  color:rgba(255,255,255,0.72);font-family:inherit;font-size:var(--text-sm);font-weight:500;
  padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);
  min-height:44px;                      /* comfortable pointer/touch target */
  background:none;border:none;
  cursor:pointer;transition:background var(--t-fast),color var(--t-fast);
}
.header-profile__btn:hover{background:rgba(255,255,255,0.08);color:#fff}
.header-profile__chev{transition:transform var(--t-fast)}
.header-profile.is-open .header-profile__chev{transform:rotate(180deg)}
.header-profile__avatar{
  display:block;flex-shrink:0;
  width:30px;height:30px;border-radius:var(--r-full);
  overflow:hidden;border:2px solid rgba(255,255,255,0.15);
  background:var(--grey-800);
}
.header-profile__avatar img{width:100%;height:100%;object-fit:cover}

.profile-dropdown{
  position:absolute;top:calc(100% + var(--sp-2));right:0;
  min-width:180px;
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
  /* visibility (not just opacity) — otherwise the hidden links stay in the tab
     order and keyboard users tab through an invisible menu. */
  opacity:0;pointer-events:none;visibility:hidden;
  transform:translateY(-4px);
  transition:opacity var(--t-base),transform var(--t-base),visibility var(--t-base);
  z-index:var(--z-drop);
}
.header-profile.is-open .profile-dropdown{opacity:1;pointer-events:all;visibility:visible;transform:translateY(0)}
.profile-dropdown a{
  display:block;padding:var(--sp-3) var(--sp-5);
  font-size:var(--text-sm);color:var(--text-primary);
  transition:background var(--t-fast);
}
.profile-dropdown a:hover{background:var(--grey-50)}
.profile-dropdown hr{border:none;border-top:1px solid var(--border);margin:var(--sp-1) 0}
/* Grouped account menu: a hairline between sections and a quiet caps label give
   the list a scannable hierarchy instead of one flat run of links. */
.profile-dropdown__section{padding:var(--sp-2) 0}
.profile-dropdown__section+.profile-dropdown__section{border-top:1px solid var(--border)}
.profile-dropdown__label{
  padding:var(--sp-1) var(--sp-5);margin:0;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);
}
/* Log Out reads as a normal item until hover, when a restrained red confirms the
   "leave" action — always-on red would over-signal danger for a reversible step.
   Scoped past `.profile-dropdown a` so it isn't out-specificity'd into a no-op. */
.profile-dropdown a.profile-dropdown__logout:hover{color:#b91c1c;background:rgba(185,25,29,.06)}
/* "Become an organiser" — the one hosting affordance an attendee sees. */
.profile-dropdown a.profile-dropdown__become{color:var(--navy);font-weight:600}

/* "Organiser" identity badge (member profile + event host card). */
.aj-org-badge{
  display:inline-block;vertical-align:middle;
  font-family:var(--font-display);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;
  color:var(--navy);background:var(--yellow);
  padding:2px 8px;border-radius:var(--r-full);margin-left:8px;
}

/* Notifications bell */
.header-notif{position:relative}
.header-notif__btn{background:none;border:none;cursor:pointer}
.header-notif__icon{position:relative;display:inline-flex}
.header-notif__badge{
  position:absolute;top:-6px;right:-8px;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--yellow);color:var(--navy);
  font-size:10px;font-weight:800;line-height:16px;text-align:center;
  border-radius:var(--r-full);border:2px solid var(--navy);
  box-sizing:content-box;
}
.header-notif__badge[hidden]{display:none}

/* Messages icon badge (shares the notification badge look) */
.header-msg{position:relative}
.header-msg__icon{position:relative;display:inline-flex}
.header-msg__badge{
  position:absolute;top:-6px;right:-8px;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--yellow);color:var(--navy);
  font-size:10px;font-weight:800;line-height:16px;text-align:center;
  border-radius:var(--r-full);border:2px solid var(--navy);
  box-sizing:content-box;
}
.header-msg__badge[hidden]{display:none}

.notif-dropdown{
  position:absolute;top:calc(100% + var(--sp-2));right:0;
  width:340px;max-width:calc(100vw - 32px);
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);overflow:hidden;
  opacity:0;pointer-events:none;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--t-base),transform var(--t-base),visibility var(--t-base);
  z-index:var(--z-drop);
}
.header-notif.is-open .notif-dropdown{opacity:1;pointer-events:all;visibility:visible;transform:translateY(0)}
.notif-dropdown__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);
  font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);color:var(--navy);
}
.notif-dropdown__head a{font-size:var(--text-xs,.75rem);font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:3px}
.notif-dropdown__list{max-height:min(60vh,420px);overflow-y:auto}
.notif-empty{padding:var(--sp-8) var(--sp-5);text-align:center;color:var(--text-muted);font-size:var(--text-sm);margin:0}

.notif-item{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);
}
.notif-item:last-child{border-bottom:none}
.notif-item__body{display:flex;gap:var(--sp-3);flex:1;min-width:0;align-items:flex-start;text-decoration:none}
.notif-item__avatar{width:36px;height:36px;border-radius:var(--r-full);object-fit:cover;flex-shrink:0}
.notif-item__dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--yellow);flex-shrink:0;margin-top:6px}
.notif-item__text{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--text-secondary)}
.notif-item__link:hover .notif-item__text{color:var(--navy)}
.notif-item__dismiss{
  background:none;border:none;cursor:pointer;flex-shrink:0;
  font-size:18px;line-height:1;color:var(--text-muted);padding:0 2px;
}
.notif-item__dismiss:hover{color:var(--navy)}

.notif-item__actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);flex-basis:100%;padding-left:48px}
.notif-btn{
  font-family:var(--font-display);font-weight:700;font-size:12px;line-height:1;
  padding:8px 16px;border-radius:var(--r-md);cursor:pointer;border:1.5px solid var(--navy);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.notif-btn--accept{background:var(--navy);color:#fff}
.notif-btn--accept:hover{background:var(--navy-hover)}
.notif-btn--reject{background:#fff;color:var(--navy);border-color:var(--border)}
.notif-btn--reject:hover{border-color:var(--navy)}
.notif-item__actions button:disabled{opacity:.6;cursor:default}

@media(max-width:900px){
  .notif-dropdown{position:fixed;top:64px;right:12px;left:12px;width:auto}
}

/* Auth buttons (guest) */
.btn-nav-login{
  font-size:var(--text-sm);font-weight:500;
  color:rgba(255,255,255,0.8);padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-md);transition:color var(--t-fast);
}
.btn-nav-login:hover{color:#fff}
.btn-nav-signup{
  font-size:var(--text-sm);font-weight:600;
  background:var(--yellow);color:var(--navy);
  padding:var(--sp-2) var(--sp-5);border-radius:var(--r-md);
  transition:background var(--t-fast),transform var(--t-fast);
}
.btn-nav-signup:hover{background:var(--yellow-hover);transform:translateY(-1px)}

/* Mobile toggle + slide-down drawer (drawer shown only ≤900px, see media query) */
.mobile-menu-toggle{display:none;align-items:center;justify-content:center;color:#fff;width:44px;height:44px;border-radius:var(--r-md)}
.mobile-menu-toggle:hover{background:rgba(255,255,255,0.08)}
/* Swap burger ↔ X so the control shows what it will do next. */
.mobile-menu-toggle__close{display:none}
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__open{display:none}
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__close{display:block}
.mobile-drawer{display:none}              /* hidden on desktop; never leaks via .is-open */
.mobile-drawer a{
  display:flex;align-items:center;
  color:rgba(255,255,255,0.85);font-size:var(--text-base);font-weight:500;
  padding:var(--sp-3) var(--sp-2);
  min-height:48px;                       /* full-width, thumb-friendly rows */
  border-radius:var(--r-md);
}
.mobile-drawer a:hover,.mobile-drawer a:focus-visible{color:#fff;background:rgba(255,255,255,0.08)}
/* The page you're on, called out in the drawer too. A quiet filled row — no
   left accent bar, which (inheriting the link's border-radius) rendered as a
   bright curved sliver on the left. */
.mobile-drawer a[aria-current="page"]{color:#fff;background:rgba(255,255,255,0.10)}
.mobile-drawer__auth{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4)}
.mobile-drawer__links{display:flex;flex-direction:column;margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border-dark)}
/* Grouped account links, mirroring the desktop dropdown's hierarchy. */
.mobile-drawer__section{display:flex;flex-direction:column;gap:var(--sp-1)}
.mobile-drawer__section+.mobile-drawer__section{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border-dark)}
.mobile-drawer__label{
  margin:0;padding:var(--sp-1) var(--sp-2);
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,0.45);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — 5-col dark grid
═══════════════════════════════════════════════════════════ */
.site-footer{background:var(--navy);color:rgba(255,255,255,0.55);padding-top:var(--sp-16)}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-8);
  padding-bottom:var(--sp-12);
}
.footer-col__title{
  font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;
  color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--sp-4);
}
.footer-col ul{display:flex;flex-direction:column;gap:var(--sp-2)}
.footer-col a{font-size:var(--text-sm);color:rgba(255,255,255,0.5);transition:color var(--t-fast)}
.footer-col a:hover{color:var(--yellow)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:var(--sp-5) 0;
  text-align:center;font-size:var(--text-sm);
  color:rgba(255,255,255,0.3);
}

/* ═══════════════════════════════════════════════════════════
   HEADER & FOOTER — responsive
═══════════════════════════════════════════════════════════ */
/* Footer grid collapses gracefully: four columns → an even 2×2 on tablets →
   a single centred column on phones. (No 3-column stage — with four items it
   would leave one column stranded on its own row.) */
@media (max-width:768px){
  .site-footer{padding-top:var(--sp-10)}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-6) var(--sp-8);padding-bottom:var(--sp-8)}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .footer-col{text-align:center}
  .footer-col ul{align-items:center}
  .footer-bottom{font-size:var(--text-xs);padding-inline:var(--sp-4)}
}

/* Header: swap desktop nav + actions for the hamburger + slide-down drawer.
   The drawer is absolutely positioned below the sticky header (not a flex
   sibling of the logo), animates open, and is scoped to this breakpoint so it
   can never appear on desktop. */
@media (max-width:900px){
  .primary-nav{display:none}
  .header-actions{display:none}
  .mobile-menu-toggle{display:inline-flex;margin-left:auto}
  .site-header .container{gap:var(--sp-4)}

  .mobile-drawer{
    display:flex;flex-direction:column;gap:var(--sp-1);
    position:absolute;top:100%;left:0;right:0;
    background:var(--navy);
    border-top:1px solid var(--border-dark);
    box-shadow:0 16px 28px rgba(0,0,0,.28);
    max-height:0;overflow:hidden;
    opacity:0;visibility:hidden;
    padding:0 var(--sp-6);
    transition:max-height .3s ease,opacity .2s ease,padding .3s ease,visibility .3s;
    -webkit-overflow-scrolling:touch;
  }
  .mobile-drawer.is-open{
    max-height:calc(100vh - var(--navbar-h));
    max-height:calc(100dvh - var(--navbar-h));
    overflow-y:auto;
    opacity:1;visibility:visible;
    padding:var(--sp-5) var(--sp-6) var(--sp-6);
  }
}

/* Reclaim edge space on very small screens */
@media (max-width:480px){
  .container{padding-inline:var(--sp-4)}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .mobile-drawer,.profile-dropdown,.notif-dropdown,.header-profile__chev,.skip-link{transition:none}
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-body);font-weight:600;border-radius:var(--r-md);
  transition:all var(--t-base);cursor:pointer;border:none;white-space:nowrap;
  /* WCAG 2.5.8 target size. btn-md/btn-lg already clear this on padding alone;
     btn-sm did not, which left small actions (Gate, Export, View) at ~41px —
     awkward on a phone and below the accessible minimum. */
  min-height:44px;
}
.btn-sm {font-size:var(--text-sm);padding:var(--sp-2) var(--sp-4)}
.btn-md {font-size:var(--text-base);padding:12px var(--sp-6)}
.btn-lg {font-size:var(--text-lg);padding:var(--sp-4) var(--sp-8)}
.btn-full{width:100%}

.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-hover);transform:translateY(-1px)}
.btn-yellow{background:var(--yellow);color:var(--navy)}
.btn-yellow:hover{background:var(--yellow-hover);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text-primary);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--navy);color:var(--navy)}
.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-ghost:hover{background:var(--grey-100)}
.btn-green{background:#27ae60;color:#fff}
.btn-green:hover{background:#219a52;transform:translateY(-1px)}
.btn-dark-navy{background:#252843;color:#fff}
.btn-dark-navy:hover{background:#2d3160}

/* ═══════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════ */
.form-group{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.form-label{font-size:var(--text-sm);font-weight:500;color:var(--text-primary)}
.form-label .req{color:var(--red);margin-left:2px}
.form-input,.form-select,.form-textarea{
  width:100%;padding:12px var(--sp-4);
  font-size:var(--text-base);font-family:var(--font-body);
  color:var(--text-primary);background:#fff;
  border:1.5px solid var(--border);border-radius:var(--r-md);
  outline:none;appearance:none;transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,32,53,.08);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted)}
.form-textarea{resize:vertical;min-height:120px;line-height:1.5}
.form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239499b0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:40px;
}
.form-hint{font-size:var(--text-xs);color:var(--text-muted)}
.form-error{font-size:var(--text-xs);color:var(--red)}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}

/* Password toggle */
.pw-wrap{position:relative}
.pw-wrap .form-input{padding-right:44px}
.pw-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);padding:var(--sp-1);
  transition:color var(--t-fast);
}
.pw-toggle:hover{color:var(--text-primary)}

/* ═══════════════════════════════════════════════════════════
   EVENT CARD — square format (homepage grids)
═══════════════════════════════════════════════════════════ */
.ev-card{
  background:#fff;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-base),box-shadow var(--t-base);
}
.ev-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

.ev-card__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--grey-100)}
.ev-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 400ms ease;display:block}
.ev-card:hover .ev-card__img img{transform:scale(1.04)}

.ev-card__cat{
  position:absolute;bottom:var(--sp-2);left:var(--sp-2);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  padding:3px 10px;border-radius:var(--r-full);color:#fff;
}
.ev-card__star{
  position:absolute;top:var(--sp-2);right:var(--sp-2);
  width:30px;height:30px;border-radius:var(--r-full);
  background:rgba(255,255,255,0.92);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);cursor:pointer;
  transition:all var(--t-fast);z-index:2;
}
.ev-card__star:hover,.ev-card__star.active{color:var(--yellow-hover);background:#fff}

/* "Booked" badge — top-left corner of any event card the viewer already holds a
   ticket for, so they don't rebook from a listing. Shared by both card styles
   (square .ev-card + horizontal .evh); their image wrappers are position:relative.
   pointer-events:none so it never blocks the card's image link underneath. */
.ev-booked-badge{
  position:absolute;top:var(--sp-2);left:var(--sp-2);z-index:2;
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:3px 9px 3px 7px;border-radius:var(--r-full);color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);pointer-events:none;
}
.ev-booked-badge--confirmed{background:#1e9e57}
.ev-booked-badge--pending{background:#d9970a}
.ev-booked-badge svg{width:11px;height:11px;flex-shrink:0}

.ev-card__body{padding:var(--sp-4)}
.ev-card__meta-row{display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.ev-card__date{display:flex;flex-direction:column;align-items:center;min-width:36px;flex-shrink:0}
.ev-card__month{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow-hover);line-height:1}
.ev-card__day{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;line-height:1;color:var(--text-primary)}
.ev-card__info{flex:1;min-width:0}
.ev-card__title{
  font-family:var(--font-display);font-size:var(--text-base);font-weight:700;
  color:var(--text-primary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:var(--sp-1);line-height:1.3;
}
.ev-card__title a{color:inherit;transition:color var(--t-fast)}
.ev-card__title a:hover{color:var(--navy-hover)}
.ev-card__loc,.ev-card__time{
  font-size:var(--text-xs);color:var(--text-muted);
  display:flex;align-items:center;gap:4px;margin-bottom:2px;
}
.ev-card__foot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:var(--sp-3);border-top:1px solid var(--grey-100);margin-top:var(--sp-3);
}
.ev-card__price{
  display:flex;align-items:center;gap:4px;
  font-size:var(--text-sm);font-weight:600;color:var(--text-primary);
}
.ev-card__price.free{color:var(--green)}
.ev-card__interested{font-size:var(--text-xs);color:var(--text-muted);display:flex;align-items:center;gap:4px}

/* Category colours */
.cat--entertainment{background:var(--cat-entertainment)}
.cat--educational{background:var(--cat-educational)}
.cat--cultural{background:var(--cat-cultural)}
.cat--sports{background:var(--cat-sports)}
.cat--technology{background:var(--cat-technology)}
.cat--travel{background:var(--cat-travel)}
.cat--food{background:var(--cat-food)}
.cat--business{background:var(--cat-business)}

/* Country badge — trending section */
.ev-card__country{
  position:absolute;top:var(--sp-2);left:var(--sp-2);
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  color:#fff;font-size:11px;font-weight:600;
  padding:2px var(--sp-2);border-radius:var(--r-sm);
  display:flex;align-items:center;gap:4px;z-index:2;
}

/* ═══════════════════════════════════════════════════════════
   SECTION HEADERS
═══════════════════════════════════════════════════════════ */
.section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-6)}
.section-hd__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800}
.section-hd__link{
  font-size:var(--text-sm);font-weight:600;color:var(--navy);
  display:flex;align-items:center;gap:4px;transition:gap var(--t-fast);
}
.section-hd__link:hover{gap:var(--sp-2)}

/* Evenly spaced 3-col event grid */
.ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}

/* Tab pills */
.tab-bar{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.tab-pill{
  font-size:var(--text-sm);font-weight:500;
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-full);border:1.5px solid var(--border);
  color:var(--text-secondary);background:transparent;cursor:pointer;
  transition:all var(--t-fast);
}
.tab-pill:hover{border-color:var(--navy);color:var(--navy)}
.tab-pill.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* See More button */
.see-more-wrap{display:flex;justify-content:center;margin-top:var(--sp-8)}

/* ═══════════════════════════════════════════════════════════
   MODALS — shared overlay system
═══════════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.5);backdrop-filter:blur(3px);
  z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-4);
  opacity:0;pointer-events:none;transition:opacity var(--t-base);
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{
  background:#fff;border-radius:var(--r-2xl);
  box-shadow:var(--shadow-xl);
  width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
  transform:translateY(12px) scale(.98);
  transition:transform var(--t-spring);position:relative;
}
.modal-overlay.open .modal{transform:translateY(0) scale(1)}
.modal-close{
  position:absolute;top:var(--sp-3);right:var(--sp-3);
  /* WCAG 2.5.8 target size — a close button is one of the most-tapped
     controls on a phone and was previously 32px. */
  width:44px;height:44px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);transition:background var(--t-fast),color var(--t-fast);
}
.modal-close:hover{background:var(--grey-100);color:var(--text-primary)}
.modal-hd{padding:var(--sp-6) var(--sp-8);border-bottom:1px solid var(--border)}
.modal-hd__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800}
.modal-bd{padding:var(--sp-6) var(--sp-8)}
.modal-ft{padding:var(--sp-4) var(--sp-8) var(--sp-6)}

/* ── Auth modal — split layout */
.auth-modal{display:flex;min-height:520px;max-width:860px;width:95vw}
.auth-modal__side{
  width:40%;background:var(--navy);
  border-radius:var(--r-2xl) 0 0 var(--r-2xl);
  padding:var(--sp-12) var(--sp-10);
  display:flex;align-items:flex-end;
}
.auth-modal__side-text{
  font-family:var(--font-display);font-size:var(--text-3xl);
  font-weight:800;color:#fff;line-height:1.2;
}
.auth-modal__side-text em{font-style:normal;color:var(--yellow)}
.auth-modal__body{
  flex:1;padding:var(--sp-10);
  border-radius:0 var(--r-2xl) var(--r-2xl) 0;
  background:#fff;overflow-y:auto;position:relative;
}

/* Auth notices (login / signup / forgot feedback) */
.auth-modal .notice{
  padding:10px 14px;border-radius:var(--r-md);
  font-size:var(--text-sm);font-weight:500;
  margin-bottom:var(--sp-4);align-items:center;
}
.auth-modal .notice-error{background:#fee2e2;color:#b91c1c}
.auth-modal .notice-success{background:#dcfce7;color:#15803d}

/* Referral banner — shown when someone arrives via a member's invite link */
.auth-invite{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:12px 14px;margin:0 0 var(--sp-5);
  background:var(--grey-50);border-left:3px solid var(--yellow);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.auth-invite__avatar{width:40px;height:40px;border-radius:var(--r-full);object-fit:cover;flex-shrink:0}
.auth-invite__text{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--navy)}
.auth-invite__text strong{font-family:var(--font-display);font-weight:700}
.auth-invite__text span{display:block;font-size:var(--text-xs,.75rem);color:var(--text-muted);margin-top:2px}

/* Forgot-password link */
.auth-forgot{display:flex;justify-content:flex-end;margin:-6px 0 var(--sp-5)}
.auth-link{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--navy);font-weight:600;font-size:var(--text-sm);
}
.auth-link:hover{text-decoration:underline}

/* Auth modal — mobile: collapse to a single column, drop the navy side panel */
@media (max-width:600px){
  .auth-modal{flex-direction:column;min-height:auto;width:95vw;max-width:420px}
  .auth-modal__side{display:none}
  .auth-modal__body{padding:var(--sp-8) var(--sp-6);border-radius:var(--r-2xl)}
}


/* ════════════════════════════════════════════════════════════
   BOOKING MODAL — 3-step flow (bk- prefix matches booking.js)
════════════════════════════════════════════════════════════ */

/* Modal sizing */
#modal-booking .modal {
  max-width: 520px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.booking-modal-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── HEADER (all 3 steps) ─────────────────────────── */
.bk-hd {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bk-hd__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-primary);
}
.bk-hd__back {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); flex-shrink: 0;
  transition: color var(--t-fast);
}
.bk-hd__back:hover { color: var(--text-primary); }

/* ── STEP 1: SELECT TICKETS ───────────────────────── */
.bk-table-hd {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-6);
  background: var(--grey-50);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.bk-ticket-list { flex: 1; }

.bk-ticket-row {
  display: flex;
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border);
  border-left: 4px solid var(--green);
  background: #fff;
  gap: var(--sp-4);
}
.bk-ticket-row__info { flex: 1; min-width: 0; }
.bk-ticket-row__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.bk-ticket-row__price {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

/* Qty stepper */
.bk-qty {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-shrink: 0;
}
.bk-qty__btn {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xl); font-weight: 700;
  color: var(--text-secondary);
  background: #fff; cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
  line-height: 1;
}
.bk-qty__btn:hover { border-color: var(--navy); color: var(--navy); }
.bk-qty__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  color: var(--text-primary);
}

/* Grey spacer below ticket list */
.bk-spacer { flex: 1; background: var(--grey-50); min-height: 60px; }

/* ── FOOTER (steps 1 + 2) ─────────────────────────── */
.bk-ft {
  border-top: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-6) var(--sp-5);
  flex-shrink: 0;
  background: #fff;
}
.bk-ft__summary {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--sp-4);
  color: var(--text-primary);
}
.bk-ft__val { color: var(--green); }

/* Proceed / Continue to Checkout button */
.bk-proceed-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  background: var(--navy); color: #fff;
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 700;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-md);
  cursor: pointer; border: none;
  transition: background var(--t-fast);
}
.bk-proceed-btn:hover { background: var(--navy-hover); }
.bk-proceed-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── STEP 2: ATTENDEE DETAILS ─────────────────────── */
.bk-event-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-6);
  background: var(--grey-50);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.bk-event-info__name { font-weight: 500; }
.bk-event-info__date {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.bk-attendees-wrap { padding: 0 var(--sp-6) var(--sp-4); }

.bk-attendee-block {
  border: 1px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: var(--sp-5);
}
.bk-attendee-block__label {
  background: var(--grey-50);
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border);
}
.bk-attendee-block__fields { padding: var(--sp-4); }
.bk-attendee-block__fields .form-group { margin-bottom: var(--sp-4); }
.bk-attendee-block__fields .form-group:last-child { margin-bottom: 0; }

/* Phone field with flag */
.bk-phone-wrap {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.bk-phone-wrap:focus-within { border-color: var(--navy); }
.bk-phone-flag {
  display: flex; align-items: center; gap: 4px;
  padding: 0 var(--sp-3);
  background: var(--grey-50);
  border-right: 1px solid var(--border);
  font-size: var(--text-sm);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.bk-phone-flag__emoji { font-size: 1.1em; }
.bk-phone-flag__code { font-weight: 500; color: var(--text-secondary); }
.bk-phone-wrap .form-input {
  border: none; border-radius: 0;
  flex: 1; min-width: 0;
}
.bk-phone-wrap .form-input:focus { box-shadow: none; }

/* ToS line */
.bk-tos {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--sp-4) 0 var(--sp-2);
}
.bk-tos a { color: var(--blue); text-decoration: underline; }

/* ── STEP 3: ORDER SUMMARY ────────────────────────── */
.bk-summary-bg {
  background: var(--grey-50);
  padding: var(--sp-8) var(--sp-6);
  flex: 1;
}

/* Ticket stub with notch cutouts */
.bk-stub {
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  max-width: 380px;
  margin-inline: auto;
  position: relative;
  overflow: visible;
  margin-bottom: var(--sp-4);
}
.bk-stub::before,
.bk-stub::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 22px; height: 22px;
  border-radius: var(--r-full);
  background: var(--grey-50);
  transform: translateY(-50%);
}
.bk-stub::before { left: -11px; }
.bk-stub::after  { right: -11px; }
.bk-stub__top {
  border-top: 4px solid var(--blue);
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
}
.bk-stub__type {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--blue);
  text-align: center;
  margin-bottom: var(--sp-4);
}
.bk-stub__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}
.bk-stub__name { font-weight: 500; font-size: var(--text-base); }
.bk-stub__email { font-size: var(--text-sm); color: var(--text-muted); }
.bk-stub__badge {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 4px var(--sp-4);
  border-radius: var(--r-md);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Totals */
.bk-totals { padding: var(--sp-5) var(--sp-6); }
.bk-totals__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}
.bk-totals__row--total {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-5);
}
.bk-totals__row--total span { color: var(--green); }

/* Pay Now button */
.bk-pay-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  background: var(--green); color: #fff;
  font-family: var(--font-body); font-size: var(--text-lg); font-weight: 700;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-md);
  cursor: pointer; border: none;
  transition: background var(--t-fast);
}
.bk-pay-btn:hover { background: #219a52; }
.bk-pay-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Error banner */
.bk-error {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: #fdedec;
  color: #943126;
  border-left: 3px solid var(--red);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
}

/* ── SHARE MODAL ──────────────────────────────────── */
.share-icons { display:flex;justify-content:center;gap:var(--sp-6);margin-bottom:var(--sp-6) }
.share-icon-btn {
  width:52px;height:52px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform var(--t-spring);border:none;
}
.share-icon-btn:hover { transform:scale(1.1) }
.share-url-box {
  border:1.5px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
}
.share-url-box__label { font-size:var(--text-sm);color:var(--text-muted);margin-bottom:2px }
.share-url-box__url { font-size:var(--text-sm);color:var(--text-primary);word-break:break-all }

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 540px) {
  .bk-hd,
  .bk-table-hd,
  .bk-ticket-row,
  .bk-event-info,
  .bk-attendees-wrap,
  .bk-ft,
  .bk-summary-bg,
  .bk-totals { padding-inline: var(--sp-4); }
  .bk-stub { max-width: 100%; }
  .bk-stub::before, .bk-stub::after { display: none; }
  .bk-event-info { flex-direction: column; align-items: flex-start; }
}


/* ══════════════════════════════════════════════════════
   GLOBAL INPUT / SELECT CHROME NORMALISATION
══════════════════════════════════════════════════════ */

/* Consistent date / time input across all pages */
input[type=date],
input[type=time] {
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  cursor: pointer;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--t-fast);
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Better select arrow — thicker chevron, correct position */
select, .form-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239499b0' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   FLAT STROKE ICONS (Altojive_Icons) — inline alignment + states
═══════════════════════════════════════════════════════════ */
.aj-icon { display: inline-block; flex-shrink: 0; vertical-align: -0.15em; }

/* Inline icons that precede text in meta rows / buttons / brand */
.me-card__meta .aj-icon,
.bc-meta .aj-icon,
.ticket-card__meta-row .aj-icon { color: var(--text-muted); margin-right: 5px; }
.ticket-doc__brand .aj-icon,
.create-strip__cta .aj-icon,
.btn .aj-icon { vertical-align: -0.2em; }

/* Large empty-state icons (were 48px emoji) */
.me-empty__icon,
.mt-empty__icon,
.eb-empty__icon { color: var(--grey-300); line-height: 0; }
.me-empty__icon .aj-icon,
.mt-empty__icon .aj-icon,
.eb-empty__icon .aj-icon { width: 48px; height: 48px; vertical-align: middle; }

/* Card thumbnail placeholder icon */
.me-card__thumb-ph .aj-icon { width: 40px; height: 40px; color: var(--grey-400); }