/* =========================================================
   FEET AND PEDALS — DESIGN SYSTEM (fresh build, v2.1 base)
   Loaded after bootstrap.min.css / main.css in styles.blade.php.
   Only rules in this file target the new fp- markup below;
   nothing here touches legacy ot- templates not yet migrated.
   ========================================================= */

:root{
    --fp-black:#0b0b0b;
    --fp-red:#bb1b25;
    --fp-red-dark:#8f151d;
    --fp-white:#ffffff;
    --fp-paper:#f7f6f4;
    --fp-line:#e6e4e0;
    --fp-line-dark:rgba(255,255,255,.14);
    --fp-muted:#6c6b68;
    --fp-green:#1a7f43;
    --fp-green-bg:#eafaf0;
    /* "Pending/warning" semantic token — mapped to the brand red instead of
       the gold/amber Bootstrap-admin default, per brand: warning/pending
       states read as red, not amber (success stays green). */
    --fp-amber:#bb1b25;
    --fp-amber-bg:#fdeaea;
    --fp-blue:#0b0b0b;      /* retired: brand uses red, white and black only */
    --fp-blue-bg:#f1efec;
    --font-display:'Big Shoulders Display', sans-serif;
    --font-body:'Inter', sans-serif;
}

body{ font-family: var(--font-body); color: var(--fp-black); }
.fp-container{ max-width:1160px; margin:0 auto; padding:0 20px; }

/* ---------- HEADER ---------- */
.fp-header{ background:#fff; border-bottom:1px solid var(--fp-line); position:sticky; top:0; z-index:1000; }
/* Bootstrap's dropdown-menu (Dashboard/Profile/Logout) was rendering behind
   page content below the header on some pages — forcing a high z-index
   directly on it, since it's the dropdown itself (not just the header)
   that needs to win against any other stacking context on the page. */
.fp-header .dropdown-menu{
    z-index:9999 !important;
    border:1px solid var(--fp-line); border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,.1);
    padding:0; overflow:hidden; min-width:200px; margin-top:6px !important;
}
.fp-header .dropdown-item{
    display:flex; align-items:center; gap:10px; padding:11px 16px; font-size:13.5px; font-weight:500;
    color:var(--fp-black); border-bottom:1px solid var(--fp-line);
}
.fp-header .dropdown-item:last-child{ border-bottom:none; }
.fp-header .dropdown-item i{ color:var(--fp-muted); width:15px; text-align:center; flex-shrink:0; }
.fp-header .dropdown-item:hover, .fp-header .dropdown-item:focus{ background:var(--fp-paper); color:var(--fp-red); }
.fp-header .dropdown-item:hover i, .fp-header .dropdown-item:focus i{ color:var(--fp-red); }
.fp-header .dropdown-item.fp-logout-item{ color:var(--fp-red); }
.fp-header .dropdown-item.fp-logout-item i{ color:var(--fp-red); }
.fp-header-inner{ max-width:1160px; margin:0 auto; padding:9px 20px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.fp-logo{ display:flex; align-items:center; }
.fp-logo img{ max-height:68px; width:auto; object-fit:contain; }
.fp-nav ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.fp-nav a{ color:#333; font-size:14px; font-weight:700; text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; }
.fp-nav a:hover{ color:var(--fp-red); border-color:var(--fp-red); }
.fp-header-actions{ display:flex; align-items:center; gap:16px; }
/* Login/Register simplified to plain bold text — no box/border — at every
   screen size. Scoped to .fp-header-actions only, so the generic .fp-btn
   classes used elsewhere on the site (Pricing CTAs, etc.) are untouched. */
.fp-header-actions .fp-btn{ border:none; background:none !important; padding:0; font-size:13.5px; font-weight:700; }
.fp-header-actions .fp-btn-ghost{ color:var(--fp-black); }
.fp-header-actions .fp-btn-solid{ color:var(--fp-red); }

/* Sticky-scroll header search — hidden until scrolled, see header.blade.php
   for the small scroll-listener that toggles .fp-header--scrolled. */
.fp-header-search{ display:flex; align-items:center; gap:8px; color:var(--fp-muted); }
.fp-header-search svg{ color:var(--fp-red); flex-shrink:0; }
.fp-header-search input{ border:none; background:transparent; outline:none; font-size:12.5px; line-height:1.3; height:auto; font-family:inherit; flex:1; min-width:0; color:var(--fp-black); }

.fp-header-search-desktop{
    flex:1; max-width:340px; background:var(--fp-paper); border:1px solid var(--fp-line); border-radius:18px; padding:5px 14px;
    opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.fp-header--scrolled .fp-header-search-desktop{ opacity:1; transform:translateY(0); pointer-events:auto; }

.fp-header-search-mobile{ display:none; }

@media (max-width:640px){
    .fp-header-search-desktop{ display:none; }
    .fp-header-search-mobile{
        display:flex; margin:0 14px; padding:0 14px; border-radius:20px; background:var(--fp-paper); border:1px solid transparent;
        max-height:0; opacity:0; overflow:hidden;
        transition:max-height .25s ease, opacity .25s ease, padding .25s ease, margin .25s ease, border-color .25s ease;
    }
    .fp-header--scrolled .fp-header-search-mobile{ max-height:44px; opacity:1; padding:7px 14px; margin:0 14px 10px; border-color:var(--fp-line); }
}
.fp-btn{ font-size:13px; font-weight:600; padding:8px 16px; border-radius:4px; border:1px solid var(--fp-black); text-decoration:none; display:inline-block; }
.fp-btn-ghost{ background:transparent; color:var(--fp-black); }
.fp-btn-ghost:hover{ background:var(--fp-black); color:#fff; }
.fp-btn-solid{ background:var(--fp-red); border-color:var(--fp-red); color:#fff; }
.fp-btn-solid:hover{ background:var(--fp-red-dark); border-color:var(--fp-red-dark); color:#fff; }
.fp-mobile-toggle{ display:none; border:0; background:none; font-size:20px; color:var(--fp-black); }
.fp-user-menu{ display:flex; align-items:center; gap:10px; }
.fp-user-menu .fp-user-avatar{ width:28px; height:28px; border-radius:50%; overflow:hidden; background:var(--fp-black); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fp-user-menu .fp-user-avatar img{ width:100%; height:100%; object-fit:cover; }
.fp-user-menu .fp-user-avatar-initial{ color:#fff; font-family:var(--font-display); font-weight:800; font-size:11px; }
.fp-user-toggle{ display:flex; align-items:center; gap:8px; color:var(--fp-black); font-weight:600; font-size:13.5px; text-decoration:none; }

/* ---------- HERO ---------- */
.fp-hero{ background:var(--fp-black); color:#fff; padding:32px 0; }
.fp-hero-inner{ max-width:1160px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; }
.fp-eyebrow{ display:inline-block; font-size:12px; font-weight:600; color:var(--fp-red); margin-bottom:10px; }
.fp-hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3.6vw,44px); line-height:1.03; margin:0 0 12px; max-width:24ch; }
/* Colors the admin can assign per-word from Settings > Homepage > Hero (heading_color_part_one / two) */
.fp-hero h1 .ot-heading-color-1, .fp-hero h1 .ot-heading-color-2{ color:var(--fp-red); }
/* Only the words "challenge" and "start" inside the red heading phrases
   are called out in white — see fp-hero-word-white span added in
   hero.blade.php's colorText() call, nested inside the red spans above. */
.fp-hero h1 .fp-hero-word-white{ color:var(--fp-white); }
.fp-hero p{ font-size:14.5px; color:rgba(255,255,255,.65); max-width:44ch; margin:0 0 20px; line-height:1.55; }
.fp-search-bar{ background:#fff; border-radius:50px; padding:6px; display:flex; align-items:center; max-width:560px; box-shadow:0 20px 50px rgba(0,0,0,.12); }
.fp-search-bar input{ flex:1; border:none; outline:none; padding:14px 20px; font-size:14.5px; font-family:inherit; min-width:0; background:transparent; }
.fp-search-bar button{ background:transparent; border:1.5px solid var(--fp-red); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--fp-red); flex-shrink:0; cursor:pointer; margin-right:2px; }
.fp-search-bar button:hover{ background:var(--fp-red); color:#fff; }
.fp-popular{ margin-top:16px; font-size:13px; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fp-popular b{ color:#fff; }
.fp-popular a{ color:rgba(255,255,255,.75); text-decoration:none; }
.fp-popular a:hover{ color:var(--fp-red); }
.fp-hero-images{ position:relative; width:360px; height:240px; flex-shrink:0; border-radius:12px; overflow:hidden; }
.fp-hero-fade{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
@media (max-width:980px){ .fp-hero-images{ width:100%; height:220px; } }
@media (max-width:991px){
    .fp-hero-inner{ grid-template-columns:1fr; }
    .fp-search{ max-width:100%; flex-direction:column; }
    .fp-search-field{ border-right:none; border-bottom:1px solid var(--fp-line); }
    .fp-search-btn{ padding:14px; }
    .fp-hero-images{ display:none; }
}

/* ---------- UPCOMING EVENTS (CMS "event" section) ---------- */
.fp-events-section{ padding:18px 0; background:var(--fp-paper); border-top:1px solid var(--fp-line); }
.fp-events-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.fp-events-head h2{ font-family:var(--font-display); font-weight:800; font-size:26px; margin:0; }
.fp-events-head p{ color:var(--fp-muted); font-size:13.5px; margin:5px 0 0; }
.fp-events-more{ font-weight:600; font-size:13px; border-bottom:1px solid var(--fp-black); padding-bottom:2px; text-decoration:none; color:var(--fp-black); }
.fp-events-more:hover{ color:var(--fp-red); border-color:var(--fp-red); }
/* "View all" sits below the cards, not above them — people scroll the grid
   before deciding to see more, so the link belongs at the end of that flow.
   Styled as a real button (like the card's "View Details") rather than a
   plain underlined link, so it doesn't read as an orphaned bit of text
   floating in the gap before the next section. */
.fp-events-foot{ display:flex; justify-content:center; margin-top:14px; }
.fp-events-foot .fp-events-more{
    border:1.5px solid var(--fp-black);
    border-radius:6px;
    padding:10px 24px;
    font-size:13.5px;
    display:inline-block;
}
.fp-events-foot .fp-events-more:hover{ background:var(--fp-red); border-color:var(--fp-red); color:#fff; }
/* Events header on every screen size, two lines to save space.
   Line 1: heading + subtitle. Line 2: the Near me bar (home page), full width. */
.fp-events-section.fp-ev-list > .fp-container{ display:grid; grid-template-columns:auto 1fr auto; column-gap:16px; row-gap:8px; align-items:center; }
.fp-events-section.fp-ev-list .fp-events-head,
.fp-events-section.fp-ev-list .fp-events-head > div{ display:contents; }
.fp-events-section.fp-ev-list .fp-events-head h2{ grid-column:1; grid-row:1; align-self:baseline; }
.fp-events-section.fp-ev-list .fp-events-head p{ grid-column:2 / 4; grid-row:1; align-self:baseline; margin:0; }
.fp-events-section.fp-ev-list .fp-nearme{ grid-column:1 / -1; grid-row:2; margin:0; }
.fp-events-section.fp-ev-list .fp-event-grid{ grid-column:1 / -1; grid-row:3; }
.fp-events-section.fp-ev-list .fp-events-foot{ grid-column:1 / -1; grid-row:4; }
.fp-event-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:900px){ .fp-event-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .fp-event-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* ---------- EVENT CARD (event/_list.blade.php) ---------- */
.fp-ecard{ background:#fff; border:1px solid var(--fp-line); border-radius:8px; overflow:hidden; transition:border-color .15s ease; }
.fp-ecard:hover{ border-color:var(--fp-black); }
.fp-ecard-media{ position:relative; aspect-ratio:16/10; background:#111; overflow:hidden; }
.fp-ecard-media img{ width:100%; height:100%; object-fit:cover; }
.fp-ecard-badges{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:5px; align-items:flex-start; z-index:2; }
.fp-badge{ font-size:10px; font-weight:700; padding:3px 7px; border-radius:4px; white-space:nowrap; }
.fp-badge.featured{ background:var(--fp-amber-bg); color:var(--fp-amber); }
.fp-badge.soon{ background:var(--fp-blue-bg); color:var(--fp-blue); }
.fp-badge.low{ background:var(--fp-amber-bg); color:var(--fp-amber); }
.fp-badge.hot{ background:#fdeaea; color:var(--fp-red); }
.fp-badge.free{ background:var(--fp-green-bg); color:var(--fp-green); }
.fp-ecard-soldout{ position:absolute; inset:0; background:rgba(0,0,0,.72); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; letter-spacing:.5px; z-index:2; }
.fp-ecard-social{ position:absolute; top:10px; right:10px; display:flex; gap:6px; z-index:2; }
.fp-ecard-social a, .fp-ecard-social button{ width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; border:none; color:#333; font-size:12px; }
.fp-ecard-body{ padding:14px; }
.fp-ecard-body h3{ font-size:15px; margin:0 0 6px; font-weight:700; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.fp-ecard-body h3 a{ color:var(--fp-black); text-decoration:none; }
.fp-ecard-body h3 a:hover{ color:var(--fp-red); }
.fp-ecard-meta{ font-size:12px; color:var(--fp-muted); display:flex; align-items:center; gap:6px; margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-ecard-cat{ font-size:11.5px; color:var(--fp-muted); margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-ecard-price-row{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:10px; gap:8px; }
.fp-ecard-price{ font-family:var(--font-display); font-weight:800; font-size:17px; white-space:nowrap; }
.fp-ecard-price span{ font-size:10.5px; font-weight:500; color:var(--fp-muted); display:block; white-space:normal; margin-bottom:1px; }
.fp-ecard-avail{ font-size:11px; font-weight:600; color:var(--fp-muted); text-align:right; white-space:nowrap; }
.fp-ecard-progress{ height:4px; background:var(--fp-line); border-radius:2px; overflow:hidden; margin-bottom:4px; }
.fp-ecard-progress i{ display:block; height:100%; background:var(--fp-red); }
.fp-ecard-sold-text{ font-size:10.5px; color:var(--fp-muted); margin-bottom:12px; }
.fp-ecard-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--fp-line); }
.fp-ecard-organizer{ display:flex; align-items:center; gap:8px; min-width:0; }
.fp-avatar-sm{ width:26px; height:26px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--fp-black); }
.fp-avatar-sm img{ width:100%; height:100%; object-fit:cover; }
.fp-ecard-organizer div{ font-size:11px; min-width:0; }
.fp-ecard-organizer b{ display:block; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-ecard-organizer span{ color:var(--fp-muted); }
.fp-ecard-cta{ font-size:12px; font-weight:700; border:1px solid var(--fp-black); border-radius:5px; padding:7px 13px; color:var(--fp-black); text-decoration:none; white-space:nowrap; flex-shrink:0; }
.fp-ecard-cta:hover{ background:var(--fp-red); border-color:var(--fp-red); color:#fff; }
.fp-ecard-cta.disabled{ border-color:var(--fp-line); color:var(--fp-muted); pointer-events:none; }
/* Equal-height cards with the footer (organiser + View Details) pinned to the bottom: when a card has less text, the empty space sits above the footer, not below it, so every View Details button lines up. */
.fp-ecard{ display:flex; flex-direction:column; }
.fp-ecard-media{ flex:none; }
.fp-ecard-body{ flex:1 1 auto; display:flex; flex-direction:column; }
.fp-ecard-foot{ margin-top:auto; }
.fp-ecard-organizer div > span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fp-ecard-empty{ grid-column:1/-1; text-align:center; padding:60px 20px; border:1px dashed var(--fp-line); border-radius:8px; background:#fff; }
.fp-ecard-empty h3{ font-family:var(--font-display); font-size:20px; margin:10px 0 6px; }
.fp-ecard-empty p{ color:var(--fp-muted); font-size:13.5px; margin:0; }

/* ---------- ABOUT SECTION (admin-configurable: heading, sub_title, feature icons,
   video image/url, button text/link — from Settings > Homepage > About) ---------- */
.fp-about{ background:var(--fp-red); color:#fff; padding:44px 0; }
.fp-about-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.fp-about-content{ flex:1; min-width:240px; }
.fp-about .fp-eyebrow{ color:#fff; opacity:.75; }
.fp-about-content h2{ font-family:var(--font-display); font-weight:800; font-size:26px; margin:6px 0 14px; max-width:24ch; }
.fp-about-features{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:18px; }
.fp-about-feature{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.fp-about-feature i{ color:#fff; opacity:.85; }
.fp-btn-outline{ background:transparent; border:1.5px solid #fff; color:#fff; font-weight:700; padding:11px 22px; border-radius:4px; font-size:13.5px; text-decoration:none; white-space:nowrap; display:inline-block; }
.fp-btn-outline:hover{ background:#fff; color:var(--fp-red); }

/* When the admin sets an image (Video Image field), switch to a two-column layout */
.fp-about-inner.has-media{ align-items:center; }
.fp-about-media{ flex:1; min-width:240px; position:relative; }
.fp-about-media img{ width:100%; border-radius:8px; display:block; }
.fp-about-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; color:var(--fp-red); font-weight:700; font-size:12.5px; padding:10px 18px; border-radius:24px; text-decoration:none; white-space:nowrap; }
@media (max-width:700px){ .fp-about-inner{ flex-direction:column; align-items:flex-start; } }

/* ---------- FOOTER ---------- */
.fp-footer{ background:var(--fp-black); color:rgba(255,255,255,.62); }
.fp-footer-main{ padding:22px 0 14px; }
.fp-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; }
.fp-footer-logo img{ max-height:34px; }
.fp-footer-description{ font-size:13px; line-height:1.4; margin:8px 0 10px; max-width:34ch; }
.fp-footer-social ul{ display:flex; gap:8px; list-style:none; margin:0; padding:0; }
.fp-footer-social a{ width:32px; height:32px; border-radius:50%; border:1px solid var(--fp-line-dark); display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; font-size:13px; }
.fp-footer-social a:hover{ background:var(--fp-red); border-color:var(--fp-red); }
.fp-footer-apps{ display:flex; gap:10px; margin-top:8px; }
.fp-footer-apps img{ height:34px; }
.fp-footer-title{ color:#fff; font-size:12.5px; font-weight:700; margin:0 0 8px; }
.fp-footer-links{ list-style:none; margin:0; padding:0; }
.fp-footer-links li{ margin-bottom:4px; font-size:13px; }
.fp-footer-links a{ color:rgba(255,255,255,.62); text-decoration:none; }
.fp-footer-links a:hover{ color:#fff; }
.fp-footer-contact-item{ display:flex; gap:8px; margin-bottom:7px; }
.fp-footer-contact-icon{ color:var(--fp-red); flex-shrink:0; margin-top:2px; }
.fp-footer-contact-item p{ font-size:13px; margin:2px 0 0; color:rgba(255,255,255,.62); }
.fp-footer-contact-item p a{ color:rgba(255,255,255,.62); text-decoration:none; }
.fp-footer-contact-item p a:hover{ color:#fff; }
.fp-footer-bottom{ border-top:1px solid var(--fp-line-dark); padding:10px 0; }
.fp-footer-bottom-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; }
.fp-footer-policy a{ color:rgba(255,255,255,.55); text-decoration:none; margin-left:14px; }
.fp-footer-policy a:hover{ color:#fff; }
@media (max-width:900px){ .fp-footer-grid{ grid-template-columns:1fr 1fr; row-gap:28px; } }
@media (max-width:600px){
    .fp-footer-grid{ grid-template-columns:1fr 1fr; }
    /* Brand block and Contact block stay full-width; the two link
       columns in between (Explore, TnC) sit side by side in the
       resulting 2-column grid instead of each stacking full-width. */
    .fp-footer-grid > .fp-footer-brand,
    .fp-footer-grid > .fp-footer-column:last-child{ grid-column:1 / -1; }

    /* Social icons and app store badges merge into one row instead of
       stacking on their own lines. */
    .fp-footer-social{ display:inline-flex; vertical-align:middle; }
    .fp-footer-apps{ display:inline-flex; vertical-align:middle; margin-top:0; margin-left:10px; padding-left:10px; border-left:1px solid var(--fp-line-dark); }
}

/* ---------- CATEGORY SECTION ---------- */
.fp-category-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.fp-category-grid.fp-category-grid-8{ grid-template-columns:repeat(8,1fr); }
.fp-category-card{ display:block; text-decoration:none; color:var(--fp-black); border:1px solid var(--fp-line); border-radius:8px; overflow:hidden; background:#fff; transition:border-color .15s ease; }
.fp-category-card:hover{ border-color:var(--fp-black); }
.fp-category-media{ aspect-ratio:1/1; background:linear-gradient(135deg,#3a3a3a,#0b0b0b); overflow:hidden; }
.fp-category-media img{ width:100%; height:100%; object-fit:cover; }
.fp-category-card h3{ font-size:13.5px; font-weight:700; text-align:center; padding:12px 8px; margin:0; }
@media (max-width:900px){ .fp-category-grid{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:600px){ .fp-category-grid{ grid-template-columns:repeat(4,1fr); gap:8px; } }

/* .fp-category-grid-8 (home page, 8 items) has higher specificity than the
   bare .fp-category-grid responsive rules above, so it needs its own
   breakpoints repeated here — otherwise it would stay at 8 columns (tiny,
   squashed cards) all the way down to mobile instead of collapsing. */
@media (max-width:1100px){ .fp-category-grid.fp-category-grid-8{ grid-template-columns:repeat(5,1fr); } }
/* Phones: 4 compact category tiles per row (home page and categories page). */
@media (max-width:600px){
    .fp-category-grid.fp-category-grid-8{ grid-template-columns:repeat(4,1fr); gap:8px; }
    .fp-category-grid .fp-category-card{ border-radius:6px; }
    .fp-category-grid .fp-category-card h3{ font-size:10.5px; line-height:1.25; padding:6px 3px; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(2 * 1.25em + 12px); }
}

/* ---------- FAQ SECTION ---------- */
.fp-faq{ margin-top:10px; }
.fp-faq-item{ border-bottom:1px solid var(--fp-line); }
.fp-faq-button{ width:100%; text-align:left; background:none; border:none; padding:18px 4px; font-size:15px; font-weight:600; color:var(--fp-black); display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.fp-faq-icon{ font-size:20px; color:var(--fp-red); font-weight:400; flex-shrink:0; margin-left:14px; transition:transform .2s ease; }
.fp-faq-button[aria-expanded="true"] .fp-faq-icon{ transform:rotate(45deg); }
.fp-faq-body{ padding:0 4px 18px; font-size:14px; color:#3a3a3a; line-height:1.6; }

/* ---------- HOTFIX: hero heading line spacing + search dropdown arrow clash ---------- */
.fp-hero h1{ line-height:1.18 !important; }
.fp-search-field select{ appearance:none; -webkit-appearance:none; padding-right:14px; }

/* ---------- BREADCRUMB (shared across all pages) ---------- */
.fp-breadcrumb{ background-color:var(--fp-black); background-size:cover; background-position:center; padding:44px 0; text-align:center; color:#fff; }
.fp-breadcrumb h1{ font-family:var(--font-display); font-weight:800; font-size:28px; margin:0 0 8px; }
.fp-breadcrumb-trail{ font-size:13px; color:rgba(255,255,255,.7); }
.fp-breadcrumb-trail a{ color:rgba(255,255,255,.85); text-decoration:none; }
.fp-breadcrumb-trail a:hover{ color:#fff; }
.fp-breadcrumb-trail span{ margin:0 6px; }

/* ---------- AUTH (login / register) — two-column layout ---------- */
.fp-auth-shell{ display:grid; grid-template-columns:1fr 1fr; min-height:460px; }
.fp-auth-brand{ background:var(--fp-black); color:#fff; padding:32px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.fp-auth-brand::after{ content:""; position:absolute; right:-140px; bottom:-140px; width:420px; height:420px; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.fp-auth-brand::before{ content:""; position:absolute; right:-40px; bottom:-40px; width:260px; height:260px; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.fp-auth-brand-logo{ position:relative; z-index:1; display:block; font-family:var(--font-display); font-weight:800; font-size:19px; color:#fff; }
.fp-auth-brand-logo .and{ color:var(--fp-red); }
.fp-auth-brand-copy{ position:relative; z-index:1; }
.fp-auth-brand-copy h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3vw,36px); line-height:1.15; margin:0 0 14px; max-width:12ch; color:#fff; }
.fp-auth-brand-copy h1 .fp-auth-accent{ color:var(--fp-red); }
.fp-auth-brand-copy p{ font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,.62); max-width:34ch; line-height:1.6; margin:0; }
.fp-auth-brand-stats{ position:relative; z-index:1; min-height:1px; display:flex; gap:32px; }
.fp-auth-stat b{ display:block; font-family:var(--font-display); font-weight:800; font-size:26px; color:#fff; }
.fp-auth-stat span{ font-size:11.5px; color:rgba(255,255,255,.5); }

.fp-auth-panel{ display:flex; align-items:center; justify-content:center; padding:32px 34px; background:#fff; }
.fp-auth-form-wrap{ width:100%; max-width:380px; }
.fp-auth-form-wrap-wide{ max-width:400px; }
.fp-form-head{ margin-bottom:26px; }
.fp-form-head h2{ font-family:var(--font-display); font-weight:800; font-size:24px; margin:0 0 6px; }
.fp-form-head p{ font-size:13.5px; color:var(--fp-muted); margin:0; }

.fp-field{ margin-bottom:14px; }
.fp-field label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; }
.fp-auth-form input[type="email"],
.fp-auth-form input[type="password"],
.fp-auth-form input[type="text"],
.fp-auth-form .fp-input.form-control{
    width:100%; border:1px solid var(--fp-line); border-radius:6px; padding:12px 14px; font-size:13.5px; font-family:var(--font-body); color:var(--fp-black); background:#fff;
}
.fp-auth-form input:focus, .fp-auth-form .fp-input.form-control:focus{ outline:none; border-color:var(--fp-black); box-shadow:none; }
.fp-field-password{ position:relative; }
.fp-password-eye{ position:absolute; right:12px; top:50%; transform:translateY(-50%); }
.fp-password-eye button{ background:none; border:none; color:var(--fp-muted); padding:2px; }
.fp-field-error{ color:var(--fp-red); font-size:12px; margin-top:5px; }
.fp-field-label{ display:block; font-size:11px; font-weight:700; color:var(--fp-muted); margin-bottom:10px; }

.fp-otp-row{ display:flex; justify-content:center; gap:10px; margin-bottom:24px; }
.fp-otp-input{
    width:44px; height:52px; text-align:center; font-family:var(--font-body); font-size:19px; font-weight:700;
    border:1px solid var(--fp-line); border-radius:8px; color:var(--fp-black); background:#fff;
}
.fp-otp-input:focus{ outline:none; border-color:var(--fp-red); box-shadow:0 0 0 2px rgba(187,27,37,.15); }

.fp-account-type{ margin-bottom:16px; }
.fp-account-type-row{ display:flex; gap:10px; }
.fp-account-type-option{ flex:1; border:1px solid var(--fp-line); border-radius:6px; padding:12px; text-align:center; font-size:13.5px; font-weight:600; cursor:pointer; position:relative; }
.fp-account-type-option input{ position:absolute; opacity:0; }
.fp-account-type-option:has(input:checked){ border-color:var(--fp-black); background:var(--fp-paper); }

.fp-row-between{ display:flex; align-items:center; justify-content:space-between; margin:14px 0 20px; font-size:13px; flex-wrap:wrap; gap:8px; }
.fp-check{ display:flex; align-items:flex-start; gap:8px; cursor:pointer; color:#333; }
.fp-check input{ accent-color:var(--fp-red); width:15px; height:15px; margin-top:2px; flex-shrink:0; }
.fp-check a{ color:var(--fp-black); font-weight:600; text-decoration:underline; }
.fp-link{ color:var(--fp-red); font-weight:600; text-decoration:none; }
.fp-btn-block:disabled{ opacity:.6; cursor:not-allowed; }

.fp-divider{ text-align:center; font-size:12.5px; color:var(--fp-muted); margin:22px 0 16px; position:relative; }
.fp-divider::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--fp-line); z-index:0; }
.fp-divider span{ background:#fff; padding:0 12px; position:relative; z-index:1; }
.fp-social-row{ display:flex; gap:10px; margin-bottom:18px; }
.fp-social-btn{ flex:1; border:1px solid var(--fp-line); border-radius:6px; padding:11px; display:flex; align-items:center; justify-content:center; }
.fp-switch{ text-align:center; font-size:13px; color:var(--fp-muted); margin:0; }
.fp-switch a{ color:var(--fp-red); font-weight:600; text-decoration:none; }

@media (max-width:860px){
    .fp-auth-shell{ grid-template-columns:1fr; }
    .fp-auth-brand{ padding:28px 22px; min-height:0; }
    .fp-auth-brand::after, .fp-auth-brand::before{ display:none; }
    .fp-auth-brand-copy h1{ font-size:22px; max-width:16ch; margin-bottom:8px; }
    .fp-auth-brand-copy p{ font-size:12.5px; }
    .fp-auth-brand-stats{ display:none; }
    .fp-auth-panel{ padding:26px 22px 40px; }
}


/* ---------- BROWSE PAGE ---------- */
.fp-page-head{ background:#fff; border-bottom:1px solid var(--fp-line); padding:22px 0; }
.fp-page-head-row{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.fp-page-head h1{ font-family:var(--font-display); font-weight:800; font-size:26px; margin:0; }
.fp-browse-section{ padding:22px 0 10px; }

/* Filter bar */
.fp-filter-bar-wrap{ position:relative; margin-bottom:16px; }
.fp-filter-bar{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.fp-filter-bar::-webkit-scrollbar{ display:none; }
.fp-filter-pill{ display:flex; align-items:center; gap:6px; border:1px solid var(--fp-line); border-radius:5px; padding:7px 12px; font-size:12.5px; font-weight:600; white-space:nowrap; flex-shrink:0; background:#fff; color:var(--fp-black); }
.fp-filter-pill svg{ color:var(--fp-red); }
.fp-filter-pill.active{ border-color:var(--fp-black); background:var(--fp-paper); }
.fp-filter-clear-pill{ color:var(--fp-red); }

/* Dropdown panels */
.fp-filter-panel{ display:none; position:absolute; top:calc(100% + 6px); left:0; background:#fff; border:1px solid var(--fp-line); border-radius:6px; box-shadow:0 12px 30px rgba(0,0,0,.1); padding:16px; min-width:260px; z-index:30; }
.fp-filter-panel.is-open{ display:block; }
.fp-panel-label{ font-size:11px; font-weight:700; color:var(--fp-muted); margin:0 0 10px; text-transform:none; }
.fp-tag-block{ margin-bottom:14px; }
.fp-tag-block:last-child{ margin-bottom:0; }
.fp-tag-pill{ display:inline-block; border:1px solid var(--fp-line); border-radius:5px; padding:6px 12px; font-size:12px; font-weight:600; color:#333; margin:0 6px 6px 0; cursor:pointer; }
.fp-tag-pill[aria-pressed="true"]{ background:var(--fp-black); border-color:var(--fp-black); color:#fff; }
.fp-select-native{ width:100%; border:1px solid var(--fp-line); border-radius:6px; padding:10px 12px; font-size:13px; font-weight:600; background:#fff; }
.fp-range-labels{ display:flex; justify-content:space-between; font-size:12px; font-weight:700; margin-top:8px; }
.fp-date-row{ display:flex; gap:8px; }
.fp-field-icon{ position:relative; flex:1; }
.fp-field-icon input{ width:100%; border:1px solid var(--fp-line); border-radius:6px; padding:9px 30px 9px 11px; font-size:12.5px; }
.fp-field-icon .sidebar-widget-input-icon{ position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--fp-muted); pointer-events:none; }
.fp-location-input{ position:relative; }
.fp-location-input input[type="text"]{ width:100%; border:1px solid var(--fp-line); border-radius:6px; padding:9px 34px 9px 11px; font-size:12.5px; }
.fp-location-input .use-current-location{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:none; color:var(--fp-red); padding:4px; }

/* Active filter chips (real .filter-tag-list, restyled) */
.fp-active-filters-row{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; background:transparent !important; box-shadow:none !important; padding:0 !important; border:none !important; }
.fp-active-filters-label{ display:none; }
.fp-active-filters{ list-style:none; display:flex !important; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.fp-active-filters.d-none{ display:none; }
.fp-active-filters .filter-tag{ display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--fp-line); border-radius:5px; padding:5px 10px; font-size:11.5px; font-weight:600; color:var(--fp-black); }
.fp-active-filters .filter-tag i{ cursor:pointer; color:var(--fp-muted); }

/* Browse/Find Events page has many more items than Home or Similar
   Events, so it gets its own scoped column behavior (an intermediate
   3-column tablet step) instead of redefining the shared base class —
   avoids the exact "same class defined twice" conflict this replaced. */
.fp-browse-section .fp-event-grid{ gap:16px; }
@media (max-width:980px){
    .fp-browse-section .fp-event-grid{ grid-template-columns:repeat(3,1fr); }
    /* Was previously a bottom-fixed sheet — now matches desktop behavior
       (appears right below the clicked filter pill) at every width. */
    .fp-filter-panel{ left:16px; right:16px; min-width:0; max-height:70vh; overflow-y:auto; }
}
@media (max-width:620px){
    .fp-browse-section .fp-event-grid{ grid-template-columns:repeat(2,1fr); }
    .fp-filter-pill{ padding:6px 10px; font-size:11.5px; }
}

/* ---------- MOBILE HOTFIX: event card footer was squeezing organizer name
   and Book Now button into too little space, causing text to wrap one
   character per line. Stack them instead of forcing them side by side. ---------- */
@media (max-width:620px){
    .fp-ecard-foot{ flex-direction:column; align-items:stretch; gap:8px; }
    .fp-ecard-organizer{ width:100%; }
    .fp-ecard-cta{ width:100%; text-align:center; }
}

/* ---------- COMPACT EVENT CARD ON MOBILE: 2-per-row needs a much tighter
   card than the desktop one — trims padding and drops the organizer/
   progress/social rows that don't fit two-up without crowding. ---------- */
@media (max-width:620px){
    /* The base site line-height is a fixed 26px (not relative), so every
       text element below must set its own line-height explicitly or it
       keeps reserving a full 26px line box regardless of its font-size —
       that fixed 26px was the real source of the excess empty space. */
    .fp-ecard-media{ aspect-ratio:16/11; }
    .fp-ecard-body{ padding:8px; }
    .fp-ecard-body h3{ font-size:12.5px; line-height:1.25; margin:0 0 3px; min-height:0; -webkit-line-clamp:1; }
    .fp-ecard-meta{ font-size:10px; line-height:1.2; margin-bottom:2px; }
    .fp-ecard-meta i{ font-size:10px; line-height:1.2; }
    .fp-ecard-cat{ font-size:9.5px; line-height:1.2; margin-bottom:5px; }
    .fp-ecard-price-row{ margin-bottom:0; }
    .fp-ecard-price{ font-size:13px; line-height:1.15; }
    .fp-ecard-price span{ font-size:8.5px; line-height:1.3; }
    .fp-ecard-avail{ font-size:9.5px; line-height:1.2; }
    .fp-ecard-badges{ top:6px; left:6px; gap:3px; }
    .fp-badge{ font-size:8.5px; line-height:1.2; padding:2px 5px; }
    .fp-ecard-social{ display:none; }
    .fp-ecard-progress, .fp-ecard-sold-text, .fp-ecard-organizer{ display:none; }
    .fp-ecard-foot{ padding-top:6px; }
    .fp-ecard-cta{ font-size:11px; line-height:1.2; padding:6px 8px; }
}

/* ---------- EVENT DETAILS ---------- */
.fp-hero-banner{ position:relative; height:340px; background:#0b0b0b; display:flex; align-items:flex-end; background-size:contain; background-repeat:no-repeat; background-position:center; }
.fp-hero-overlay{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.78),transparent 60%); }
.fp-hero-content{ position:relative; padding:28px 0; color:#fff; width:100%; }
.fp-hero-tag{ display:inline-block; background:var(--fp-amber-bg); color:var(--fp-amber); font-size:11px; font-weight:700; padding:4px 10px; border-radius:4px; margin-bottom:10px; }
.fp-hero-content h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.6vw,40px); margin:0 0 8px; color:#fff; }

.fp-stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--fp-line); border:1px solid var(--fp-line); border-radius:8px; overflow:hidden; margin:24px 0; }
.fp-stat-box{ background:#fff; padding:18px; text-align:center; }
.fp-stat-box svg{ color:var(--fp-red); margin:0 auto 8px; }
.fp-stat-box h4{ font-size:11px; font-weight:700; color:var(--fp-muted); margin:0 0 6px; text-transform:uppercase; letter-spacing:.3px; }
.fp-stat-box p{ font-size:13px; font-weight:600; margin:0; }
.fp-avatar-stack{ display:flex; justify-content:center; margin-bottom:2px; }
.fp-avatar-stack img,.fp-avatar-stack span{ width:26px; height:26px; border-radius:50%; background:var(--fp-black); color:#fff; font-size:9px; display:flex; align-items:center; justify-content:center; border:2px solid #fff; margin-left:-8px; font-weight:700; object-fit:cover; }
.fp-avatar-stack img:first-child,.fp-avatar-stack span:first-child{ margin-left:0; }

.fp-details-layout{ display:grid; grid-template-columns:1fr 360px; gap:36px; padding-bottom:20px; }
.fp-section-title{ font-family:var(--font-display); font-weight:800; font-size:20px; margin:30px 0 14px; }
.fp-section-title:first-child{ margin-top:0; }
.fp-body-text{ font-size:14px; line-height:1.7; color:#333; }

.fp-organizer-box{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--fp-line); border-radius:8px; padding:16px; background:#fff; flex-wrap:wrap; gap:12px; }
.fp-organizer-left{ display:flex; align-items:center; gap:12px; }
.fp-organizer-avatar{ width:52px; height:52px; border-radius:50%; background:var(--fp-black); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:16px; object-fit:cover; overflow:hidden; }
.fp-organizer-avatar img{ width:100%; height:100%; object-fit:cover; }
.fp-organizer-left h4{ font-size:15px; margin:0 0 4px; }
.fp-organizer-meta{ font-size:12px; color:var(--fp-muted); display:flex; gap:12px; flex-wrap:wrap; }
.fp-organizer-actions{ display:flex; gap:8px; align-items:center; }
.fp-icon-btn{ width:36px; height:36px; border:1px solid var(--fp-line); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--fp-muted); flex-shrink:0; }

.fp-ticket-sidebar{ position:sticky; top:20px; border:1px solid var(--fp-line); border-radius:10px; background:#fff; overflow:hidden; }
.fp-ticket-sidebar-head{ padding:18px 18px 0; }
.fp-ticket-sidebar-head h3{ font-family:var(--font-display); font-weight:800; font-size:18px; margin:0 0 6px; }
.fp-date-select-row{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; }
.fp-date-pill{ position:relative; }
.fp-date-pill input{ position:absolute; opacity:0; }
.fp-date-pill label{ display:block; border:1px solid var(--fp-line); border-radius:5px; padding:7px 12px; font-size:12px; font-weight:600; cursor:pointer; }
.fp-date-pill input:checked + label{ border-color:var(--fp-black); background:var(--fp-paper); }

.fp-ticket-row{ border-top:1px solid var(--fp-line); padding:16px 18px; }
.fp-ticket-row.hidden-ticket{ display:none; }
.fp-ticket-row-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:4px; gap:8px; }
.fp-ticket-row h4{ font-size:13.5px; margin:0; font-weight:700; }
.fp-badge.soldout{ background:#fdeaea; color:var(--fp-red); }
.fp-ticket-seats{ font-size:11px; color:var(--fp-muted); display:block; margin-bottom:2px; }
.fp-ticket-timer{ font-size:11px; color:var(--fp-green); display:block; margin-bottom:8px; }
.fp-ticket-price-qty{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.fp-ticket-price{ font-family:var(--font-display); font-weight:800; font-size:17px; }
.fp-ticket-price .strike{ font-size:12px; color:var(--fp-muted); text-decoration:line-through; font-weight:500; margin-right:6px; }
.fp-qty-stepper{ display:flex; align-items:center; border:1px solid var(--fp-line); border-radius:6px; overflow:hidden; }
.fp-qty-stepper button{ width:28px; height:28px; background:var(--fp-paper); border:none; font-size:14px; font-weight:700; cursor:pointer; }
.fp-qty-stepper button:disabled{ opacity:.4; cursor:not-allowed; }
.fp-qty-stepper input{ width:32px; text-align:center; font-size:13px; font-weight:700; border:none; background:none; }
.fp-ticket-validation{ font-size:11.5px; color:var(--fp-red); margin-top:6px; }

.fp-ticket-summary{ padding:16px 18px; border-top:1px solid var(--fp-line); background:var(--fp-paper); }
.fp-summary-row{ display:flex; justify-content:space-between; font-size:13px; }
.fp-ticket-cta{ margin:16px 18px 18px; }
.fp-btn-block{ width:100%; background:var(--fp-red); color:#fff; border:none; border-radius:6px; padding:13px; font-size:14px; font-weight:700; text-align:center; display:block; cursor:pointer; }
.fp-btn-block:hover{ background:var(--fp-red-dark); color:#fff; }
.fp-notice-box{ margin:0 18px 18px; padding:12px; border-radius:6px; background:var(--fp-paper); border:1px solid var(--fp-line); font-size:12.5px; color:#444; }
.fp-notice-box.warning{ background:var(--fp-amber-bg); border-color:transparent; color:var(--fp-amber); }
.fp-notice-box.success{ background:var(--fp-green-bg); border-color:transparent; color:var(--fp-green); }
.fp-notice-box.flush{ margin:0 0 16px; }

.fp-map-box{ border:1px solid var(--fp-line); border-radius:8px; overflow:hidden; height:220px; margin-top:10px; }
.fp-map-box iframe{ width:100%; height:100%; border:0; }

.fp-review-summary{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.fp-review-score{ font-family:var(--font-display); font-weight:800; font-size:36px; }
.fp-stars{ color:var(--fp-amber); font-size:14px; }
.fp-review-form{ border:1px solid var(--fp-line); border-radius:8px; padding:18px; margin-bottom:20px; }
.fp-review-form h4{ font-size:15px; margin:0 0 14px; }
.fp-review-empty{ border:1px dashed var(--fp-line); border-radius:8px; padding:30px; text-align:center; color:var(--fp-muted); font-size:13.5px; }
.fp-review-item{ border-top:1px solid var(--fp-line); padding:16px 0; display:flex; gap:12px; }
.fp-review-item .fp-avatar-sm{ width:36px; height:36px; border-radius:50%; background:var(--fp-black); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.fp-review-item h5{ font-size:13.5px; margin:0 0 2px; }
.fp-review-item p{ font-size:13px; color:#444; margin:6px 0 0; line-height:1.6; }

.fp-guest-section{ background:#fff; border-top:1px solid var(--fp-line); border-bottom:1px solid var(--fp-line); padding:40px 0; }
.fp-guest-row{ display:flex; gap:18px; overflow-x:auto; }
.fp-guest-card{ flex-shrink:0; width:420px; max-width:90vw; border:1px solid var(--fp-line); border-radius:8px; overflow:hidden; background:#fff; display:flex; }
.fp-guest-media{ width:140px; flex-shrink:0; background:linear-gradient(135deg,#3a3a3a,#0b0b0b); }
.fp-guest-media img{ width:100%; height:100%; object-fit:cover; }
.fp-guest-info{ padding:16px; flex:1; min-width:0; }
.fp-guest-info h4{ font-size:15px; margin:0 0 3px; }
.fp-guest-info .fp-guest-role{ font-size:12px; color:var(--fp-muted); display:block; margin-bottom:10px; }
.fp-guest-info p{ font-size:12.5px; color:#444; line-height:1.55; margin:0 0 12px; }
.fp-guest-social{ display:flex; gap:8px; }
.fp-guest-social a{ width:28px; height:28px; border:1px solid var(--fp-line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--fp-muted); font-size:11px; }

.fp-similar-section{ padding:40px 0; }

@media (max-width:980px){
    .fp-details-layout{ grid-template-columns:1fr; }
    .fp-ticket-sidebar{ position:static; }
    .fp-stat-row{ grid-template-columns:1fr 1fr; }
    /* Ticket/checkout card moves above the description on mobile, right
       after the stat row, instead of falling to the bottom of the page.
       Desktop keeps its normal side-by-side order — this only reorders
       how the two columns stack once they're a single column. */
    .fp-details-layout > aside{ order:1; }
    .fp-details-layout > main{ order:2; }
}

/* ---------- NEWSLETTER (replaces stock's oversized/off-brand CTA box) ---------- */
.fp-newsletter-section{ background:var(--fp-paper); border-top:1px solid var(--fp-line); padding:8px 0; }
.fp-newsletter-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.fp-newsletter-title{ font-family:var(--font-display); font-weight:800; font-size:19px; margin:2px 0 0; }
.fp-newsletter-form{ display:flex; gap:8px; width:100%; max-width:420px; }
.fp-newsletter-form input{ flex:1; border:1px solid var(--fp-line); border-radius:5px; padding:10px 14px; font-size:13.5px; background:#fff; }
.fp-newsletter-form input:focus{ outline:none; border-color:var(--fp-black); }
.fp-newsletter-form button{ background:var(--fp-red); color:#fff; border:none; border-radius:5px; padding:10px 20px; font-size:13.5px; font-weight:700; white-space:nowrap; }
.fp-newsletter-form button:hover{ background:var(--fp-red-dark); }
@media (max-width:700px){ .fp-newsletter-form{ max-width:100%; } }

/* ---------- PRICING ---------- */
.fp-pricing-section{ padding:44px 0 56px; }
.fp-plans-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
.fp-plan-card{ border:1px solid var(--fp-line); border-radius:10px; padding:22px 20px; display:flex; flex-direction:column; position:relative; background:#fff; min-height:280px; }
.fp-plan-card.free{ border-color:var(--fp-black); }
.fp-plan-badge{ position:absolute; top:-11px; left:20px; background:var(--fp-red); color:#fff; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:4px; }
.fp-plan-name{ font-family:var(--font-display); font-weight:800; font-size:17px; margin:6px 0 12px; }
.fp-plan-price{ font-family:var(--font-display); font-weight:800; font-size:28px; margin-bottom:4px; }
.fp-plan-price sup{ font-size:13px; font-weight:600; margin-right:2px; color:var(--fp-muted); }
.fp-plan-features{ list-style:none; margin:12px 0 20px; padding:0; }
.fp-plan-features li{ display:flex; gap:7px; font-size:12.5px; padding:7px 0; border-top:1px solid var(--fp-line); }
.fp-plan-features li:first-child{ border-top:none; }
.fp-plan-features svg{ color:var(--fp-green); flex-shrink:0; margin-top:2px; }
.fp-plan-cta{ background:var(--fp-black); color:#fff; text-align:center; border-radius:6px; padding:11px; font-size:13px; font-weight:700; margin-top:auto; text-decoration:none; }
.fp-plan-cta:hover{ background:var(--fp-red); color:#fff; }
.fp-plan-card.free .fp-plan-cta{ background:var(--fp-red); }
.fp-plan-card.free .fp-plan-cta:hover{ background:var(--fp-red-dark); }

@media (max-width:900px){ .fp-plans-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .fp-plans-grid{ grid-template-columns:1fr; } }

/* ---------- USER DASHBOARD SHELL (applies to every user panel page) ---------- */
.fp-dash-section{ background:var(--fp-paper); padding:30px 0 60px; }
.fp-dash-layout{ display:grid; grid-template-columns:270px 1fr; gap:26px; }
.fp-dash-sidebar{ align-self:start; }
.fp-user-card{ background:#fff; border:1px solid var(--fp-line); border-radius:10px; padding:20px; text-align:center; margin-bottom:16px; }
.fp-user-card .fp-user-avatar{ width:64px; height:64px; border-radius:50%; overflow:hidden; margin:0 auto 12px; background:var(--fp-black); display:flex; align-items:center; justify-content:center; }
.fp-user-card .fp-user-avatar img{ width:100%; height:100%; object-fit:cover; }
.fp-user-card .fp-user-avatar-initial{ color:#fff; font-family:var(--font-display); font-weight:800; font-size:22px; }
.fp-user-card h4{ font-size:15px; margin:0 0 3px; }
.fp-user-card a{ font-size:12px; color:var(--fp-muted); display:block; margin-bottom:10px; text-decoration:none; }
.fp-user-balance{ background:var(--fp-paper); border-radius:6px; padding:8px; font-size:12.5px; font-weight:700; }
.fp-dash-nav{ background:#fff; border:1px solid var(--fp-line); border-radius:10px; overflow:hidden; margin-bottom:16px; }
.fp-dash-nav a{ display:flex; align-items:center; gap:10px; padding:11px 16px; font-size:13px; font-weight:500; color:#333; border-bottom:1px solid var(--fp-line); text-decoration:none; }
.fp-dash-nav a:last-child{ border-bottom:none; }
.fp-dash-nav a i{ color:var(--fp-muted); width:15px; text-align:center; }
.fp-dash-nav a.active{ background:var(--fp-paper); color:var(--fp-black); font-weight:700; }
.fp-dash-nav a.active i{ color:var(--fp-red); }
.fp-dash-nav a:hover i{ color:var(--fp-red); }
.fp-dash-logout{ width:100%; background:#fff; border:1px solid var(--fp-line); border-radius:10px; padding:12px; color:var(--fp-red); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; gap:8px; }
.fp-dash-logout:hover{ background:var(--fp-red); color:#fff; border-color:var(--fp-red); }

/* Mobile-only "Menu" trigger and the sidebar's own close button — both
   hidden on desktop, where the sidebar sits statically in the grid. */
.fp-dash-mobile-bar{ display:none; }
.fp-dash-sidebar-close{ display:none; }
.fp-dash-backdrop{ display:none; }

.fp-dash-content{ min-width:0; }
.fp-dash-main h1{ font-family:var(--font-display); font-weight:800; font-size:22px; margin:0 0 4px; }
.fp-dash-main > p{ font-size:13px; color:var(--fp-muted); margin:0 0 20px; }
.fp-dash-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
.fp-dash-stat{ background:#fff; border:1px solid var(--fp-line); border-radius:8px; padding:16px; }
.fp-dash-stat span{ font-size:12px; color:var(--fp-muted); display:block; margin-bottom:6px; }
.fp-dash-stat b{ font-family:var(--font-display); font-weight:800; font-size:22px; }
.fp-dash-panel{ background:#fff; border:1px solid var(--fp-line); border-radius:8px; overflow:hidden; }
.fp-dash-panel-head{ padding:14px 16px; border-bottom:1px solid var(--fp-line); font-weight:700; font-size:14px; }

@media (max-width:980px){
    .fp-dash-layout{ grid-template-columns:1fr; }
    .fp-dash-stats{ grid-template-columns:1fr 1fr; }

    /* Sidebar becomes an off-canvas drawer instead of a long static list
       stacked above the page content — the previous "Menu" button toggled
       a class (.sidebar-open on .user-sidebar) that didn't match anything
       in this markup, so the full ~17-item nav always rendered inline and
       had to be scrolled past before reaching the actual page. */
    .fp-dash-sidebar{
        position:fixed; top:0; left:0; bottom:0; height:100vh; width:280px; max-width:82vw;
        background:var(--fp-paper); z-index:1200; overflow-y:auto; overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        /* Extra bottom padding (plus the safe-area inset on notched phones) so the
           Logout button — the last thing in this scroll area — has clear space
           below it instead of sitting flush against the viewport edge. */
        padding:18px 18px calc(18px + env(safe-area-inset-bottom, 0px)) 18px;
        transform:translateX(-100%); transition:transform .25s ease;
        box-shadow:0 0 30px rgba(0,0,0,.2);
    }
    .fp-dash-sidebar .fp-dash-logout{ margin-top:8px; margin-bottom:24px; }
    .fp-dash-sidebar.is-open{ transform:translateX(0); }
    .fp-dash-sidebar-close{ display:flex; }

    .fp-dash-backdrop{
        position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1150; opacity:0; pointer-events:none;
        transition:opacity .25s ease;
    }
    .fp-dash-backdrop.is-open{ display:block; opacity:1; pointer-events:auto; }

    .fp-dash-mobile-bar{ display:block; margin-bottom:14px; }
    .fp-dash-menu-btn{
        display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--fp-line); border-radius:6px;
        padding:9px 14px; font-size:13px; font-weight:700; color:var(--fp-black); cursor:pointer;
    }
    .fp-dash-menu-btn:hover{ border-color:var(--fp-black); }
}

/* Athlete dashboard on phones (list 3, item 23): three small numbers in one row, tighter panels, and the
   "Events for you" cards one per row (their inline 3-column grid is unreadable on a phone). */
@media (max-width:600px){
    .fp-dash-main h1{ font-size:20px; }
    .fp-dash-main > p{ margin-bottom:12px; }
    .fp-dash-stats{ grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
    .fp-dash-stat{ padding:10px; }
    .fp-dash-stat span{ font-size:11px; margin-bottom:3px; line-height:1.25; }
    .fp-dash-stat b{ font-size:16px; overflow-wrap:anywhere; }
    .fp-dash-panel{ margin-bottom:14px !important; }
    .fp-dash-panel-head{ padding:10px 12px; }
    .fp-dash-main .fp-event-grid{ grid-template-columns:1fr !important; }
}

/* ---------- CONTACT ---------- */
.fp-contact-section{ padding:44px 0 60px; }
/* Contact page needs a taller map with different spacing than the
   default (Event Details) — scoped instead of a second base-level
   .fp-map-box definition, which was silently overriding Event
   Details' version everywhere due to source order. */
.fp-contact-section .fp-map-box{ height:280px; margin-top:0; margin-bottom:36px; }
.fp-contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:40px; }
.fp-contact-info-item{ border:1px solid var(--fp-line); border-radius:8px; padding:20px; margin-bottom:14px; display:flex; gap:14px; }
.fp-contact-info-item svg{ color:var(--fp-red); flex-shrink:0; }
.fp-contact-info-item h2{ font-family:var(--font-display); font-weight:800; font-size:16px; margin:0 0 8px; }
.fp-contact-info-item span{ display:block; font-size:13px; color:#444; margin-bottom:4px; }
.fp-contact-form h3{ font-family:var(--font-display); font-weight:800; font-size:18px; margin:0 0 16px; }
@media (max-width:900px){ .fp-contact-grid{ grid-template-columns:1fr; } }

/* ---------- LEGAL / GENERIC STATIC PAGES (Terms, Privacy, Refund, Delivery —
   these share one generic raw-content wrapper, no dedicated template) ---------- */
.container.ot-space{ padding-top:40px !important; padding-bottom:50px !important; }
.container.ot-space :is(h1,h2,h3,h4){ font-family:var(--font-display); font-weight:800; margin:26px 0 10px; }
.container.ot-space h1{ font-size:26px; }
.container.ot-space h2{ font-size:19px; }
.container.ot-space p{ font-size:14px; line-height:1.7; color:#333; margin:0 0 14px; max-width:760px; }
.container.ot-space ul, .container.ot-space ol{ font-size:14px; line-height:1.7; color:#333; max-width:760px; padding-left:20px; }
.container.ot-space a{ color:var(--fp-red); }

/* ---------- GENERIC DATA TABLE (used in User Dashboard ticket history) ---------- */
table.fp-table{ width:100%; border-collapse:collapse; }
.fp-table th{ text-align:left; font-size:11px; color:var(--fp-muted); font-weight:700; padding:10px 16px; border-bottom:1px solid var(--fp-line); white-space:nowrap; }
.fp-table td{ padding:12px 16px; font-size:13px; border-bottom:1px solid var(--fp-line); vertical-align:middle; }
.fp-table tr:last-child td{ border-bottom:none; }
.fp-table td.name{ font-weight:600; }
.fp-table td.sub{ color:var(--fp-muted); font-size:12px; }
.fp-table .actions{ display:flex; gap:10px; }
.fp-table .actions a{ color:var(--fp-muted); }
.fp-table .actions a:hover{ color:var(--fp-red); }
.status-pill{ display:inline-block; font-size:11px; font-weight:700; padding:4px 10px; border-radius:12px; }
.status-pill.live, .status-pill.approved, .status-pill.paid{ background:var(--fp-green-bg); color:var(--fp-green); }
.status-pill.draft{ background:#eee; color:#777; }
.status-pill.closed, .status-pill.rejected{ background:#fdeaea; color:var(--fp-red); }
.status-pill.pending{ background:var(--fp-amber-bg); color:var(--fp-amber); }

/* ---------- USER "MY ACCOUNT" DASHBOARD PAGES (My Tickets, My Events,
   Profile, KYC, Transactions, Referral, Withdraw, Refunds, Following,
   Interests) — reuse the same fp-dash / fp-table / status-pill components
   already built for the main Dashboard page, so every page in this
   section is visually one system instead of half old vendor theme. ---------- */
.fp-dash-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:6px; }
@media (max-width:640px){ .fp-dash-form-row{ grid-template-columns:1fr; } }

.fp-interest-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
@media (max-width:860px){ .fp-interest-grid{ grid-template-columns:repeat(2,1fr); } }
.fp-interest-card{ display:flex; align-items:center; gap:8px; border:1px solid var(--fp-line); border-radius:8px; padding:11px 14px; font-size:13px; font-weight:600; cursor:pointer; background:#fff; }
.fp-interest-card input{ accent-color:var(--fp-red); width:16px; height:16px; }
.fp-interest-card:has(input:checked){ border-color:var(--fp-red); background:#fdeaea; }

.fp-copy-box{ display:flex; gap:8px; margin-bottom:20px; }
.fp-copy-box input{ flex:1; border:1px solid var(--fp-line); border-radius:6px; padding:11px 14px; font-size:13px; background:var(--fp-paper); color:var(--fp-muted); }
.fp-copy-box button{ position:relative; background:var(--fp-red); color:#fff; border:none; border-radius:6px; padding:0 18px; font-weight:700; cursor:pointer; }
.fp-copy-box button:hover{ background:var(--fp-red-dark); }
.copy-tooltip{ position:absolute; bottom:calc(100% + 6px); right:0; background:var(--fp-black); color:#fff; font-size:11px; font-weight:600; padding:4px 8px; border-radius:4px; white-space:nowrap; display:none; }

.fp-info-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
@media (max-width:860px){ .fp-info-cards{ grid-template-columns:1fr; } }
.fp-info-card{ background:#fff; border:1px solid var(--fp-line); border-radius:8px; padding:16px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.fp-info-card h6{ font-size:13.5px; font-weight:700; margin:0 0 4px; }
.fp-info-card p{ font-size:12px; color:var(--fp-muted); margin:0; }
.fp-info-card i{ color:var(--fp-red); font-size:20px; flex-shrink:0; }

.fp-filter-form{ background:#fff; border:1px solid var(--fp-line); border-radius:8px; padding:16px; margin-bottom:20px; }
.fp-filter-form .fp-filter-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; align-items:end; }
@media (max-width:860px){ .fp-filter-form .fp-filter-row{ grid-template-columns:1fr 1fr; } }

/* ---------- CHECKOUT ---------- */
.fp-checkout-section{ padding:30px 0 60px; }
.fp-checkout-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.fp-checkout-head h1{ font-family:var(--font-display); font-weight:800; font-size:24px; margin:0 0 4px; }
.fp-checkout-head p{ font-size:13px; color:var(--fp-muted); margin:0; }
.fp-status-badge{ font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:14px; background:var(--fp-amber-bg); color:var(--fp-amber); }
.fp-status-badge.status-paid{ background:var(--fp-green-bg); color:var(--fp-green); }
.fp-status-badge.status-failed{ background:#fdeaea; color:var(--fp-red); }

.fp-checkout-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; }
.fp-card{ background:#fff; border:1px solid var(--fp-line); border-radius:10px; padding:24px; }
.fp-meta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.fp-meta-tile{ background:var(--fp-paper); border-radius:6px; padding:12px 14px; }
.fp-meta-tile span{ font-size:11px; color:var(--fp-muted); display:block; margin-bottom:3px; }
.fp-meta-tile b{ font-size:13.5px; }
.fp-card h5{ font-family:var(--font-display); font-weight:800; font-size:15px; margin:0 0 14px; }

table.fp-ticket-table{ width:100%; border-collapse:collapse; margin-bottom:20px; }
.fp-ticket-table th{ text-align:left; font-size:11px; color:var(--fp-muted); padding:8px 0; border-bottom:1px solid var(--fp-line); }
.fp-ticket-table th:not(:first-child){ text-align:right; }
.fp-ticket-table td{ padding:10px 0; font-size:13.5px; border-bottom:1px solid var(--fp-line); }
.fp-ticket-table td:not(:first-child){ text-align:right; }
.fp-ticket-table .sub{ font-size:11.5px; color:var(--fp-muted); }

.fp-promo-toggle{ border:1px solid var(--fp-line); border-radius:6px; padding:9px 16px; font-size:12.5px; font-weight:600; background:#fff; cursor:pointer; }
.fp-promo-box-wrap{ margin-top:12px; }
.fp-promo-box{ display:flex; gap:8px; }
.fp-promo-box input{ flex:1; border:1px solid var(--fp-line); border-radius:6px; padding:10px 12px; font-size:13px; }
.fp-promo-box button{ background:var(--fp-black); color:#fff; border:none; border-radius:6px; padding:0 18px; font-size:13px; font-weight:700; cursor:pointer; }
.fp-promo-hint{ font-size:11px; color:var(--fp-muted); margin-top:8px; }
.fp-promo-msg{ font-size:12px; margin-top:6px; }
.fp-promo-msg.small.text-success{ color:var(--fp-green); }
.fp-promo-msg.small.text-danger{ color:var(--fp-red); }

/* Checkout page needs slightly different summary-row spacing/color
   than Event Details' ticket sidebar — scoped instead of a second
   conflicting base-level definition. */
.fp-checkout-section .fp-summary-row{ font-size:13.5px; margin-bottom:9px; color:#444; }
.fp-summary-row.discount span:last-child{ color:var(--fp-green); font-weight:700; }
.fp-summary-divider{ border-top:1px solid var(--fp-line); margin:14px 0; }
.fp-summary-total{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.fp-summary-total span:first-child{ font-weight:800; font-size:16px; }
.fp-summary-total span:last-child{ font-family:var(--font-display); font-weight:800; font-size:22px; }

.fp-gateway-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.fp-gateway-option{ border:1px solid var(--fp-line); border-radius:6px; padding:11px 14px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px; cursor:pointer; }
.fp-gateway-option:has(input:checked){ border-color:var(--fp-black); background:var(--fp-paper); }
.fp-gateway-option input{ accent-color:var(--fp-red); }
.fp-gateway-empty{ border:1px dashed var(--fp-line); border-radius:8px; padding:22px; text-align:center; color:var(--fp-muted); font-size:12.5px; margin-bottom:14px; }
.fp-gateway-empty svg{ margin:0 auto 8px; color:var(--fp-amber); }

.fp-terms-row{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--fp-muted); margin:14px 0 16px; }
.fp-terms-row a{ color:var(--fp-red); font-weight:600; text-decoration:none; }
.fp-terms-row a:hover{ text-decoration:underline; }
.fp-secure-note{ text-align:center; font-size:11.5px; color:var(--fp-muted); margin-top:12px; }

/* The manual-payment sub-form is admin-configurable and AJAX-loaded — it uses
   generic Bootstrap classes (.card, .form-control, label) since its fields
   vary per gateway, so these rules restyle whatever comes back rather than
   targeting specific dedicated classes. */
.fp-manual-gateway-form .card{ border:1px solid var(--fp-line); border-radius:8px; overflow:hidden; }
.fp-manual-gateway-form .card-header{ background:var(--fp-paper); padding:10px 14px; border-bottom:1px solid var(--fp-line); }
.fp-manual-gateway-form .card-title{ font-family:var(--font-display); font-weight:800; font-size:13px; margin:0; }
.fp-manual-gateway-form .card-body{ padding:14px; font-size:13px; color:#444; }
.fp-manual-gateway-form label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; }
.fp-manual-gateway-form .form-control{ width:100%; border:1px solid var(--fp-line); border-radius:6px; padding:10px 12px; font-size:13px; font-family:inherit; }

@media (max-width:900px){
    .fp-checkout-layout{ grid-template-columns:1fr; }
    .fp-meta-grid{ grid-template-columns:1fr; }
}

/* ---------- MOBILE HEADER: single row, no hamburger/drawer, Login+Register
   become plain text links instead of buttons (desktop keeps the buttons) ---------- */
@media (max-width:640px){
    .fp-header-inner{ padding:10px 14px; gap:8px; }
    .fp-logo{ flex-shrink:0; }
    .fp-logo img{ max-height:26px; }
    .fp-nav{ min-width:0; overflow-x:auto; }
    .fp-nav ul{ gap:10px; }
    .fp-nav a{ font-size:11px; white-space:nowrap; }
    .fp-header-actions{ gap:12px; flex-shrink:0; }
}

/* ---------- CART REMINDER ICON (header) ---------- */
.fp-cart-icon{ position:relative; width:38px; height:38px; border:1px solid var(--fp-line); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--fp-black); flex-shrink:0; }
.fp-cart-icon:hover{ border-color:var(--fp-black); }
.fp-cart-badge{ position:absolute; top:-6px; right:-6px; background:var(--fp-red); color:#fff; font-size:10px; font-weight:800; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }

@media (max-width:640px){
    .fp-cart-icon{ width:30px; height:30px; border:none; }
    .fp-cart-badge{ width:15px; height:15px; font-size:9px; top:-5px; right:-6px; }
}

/* ---------- PROFILE / ATHLETE FIELDS ---------- */
.fp-profile-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.fp-profile-head h1{ font-family:var(--font-display); font-weight:800; font-size:22px; margin:0; }
.fp-card-sub{ font-size:12px; color:var(--fp-muted); margin:-6px 0 14px; }
.fp-profile-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.fp-profile-grid .fp-field:last-child{ margin-bottom:0; }
.fp-input{ width:100%; border:1px solid var(--fp-line); border-radius:6px; padding:10px 12px; font-size:13px; font-family:inherit; background:#fff; }
.fp-optional{ font-weight:400; color:#999; font-size:11.5px; }
.fp-private-badge{ display:inline-block; background:#fdeaea; color:var(--fp-red); font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:4px; margin-left:8px; vertical-align:middle; }

@media (max-width:640px){ .fp-profile-grid{ grid-template-columns:1fr; } }

/* ---------- PAYMENT RESULT (success / pending / cancelled) ---------- */
.fp-result-section{ padding:60px 0; }
.fp-result-card{ max-width:420px; margin:0 auto; background:#fff; border:1px solid var(--fp-line); border-radius:12px; padding:34px 28px; text-align:center; }
.fp-result-icon{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.fp-result-icon.success{ background:var(--fp-green-bg); color:var(--fp-green); }
.fp-result-icon.pending{ background:var(--fp-amber-bg); color:var(--fp-amber); }
.fp-result-icon.cancelled{ background:#fdeaea; color:var(--fp-red); }
.fp-result-title{ font-family:var(--font-display); font-weight:800; font-size:22px; margin:0 0 6px; }
.fp-result-title.success{ color:var(--fp-green); }
.fp-result-title.pending{ color:var(--fp-amber); }
.fp-result-title.cancelled{ color:var(--fp-red); }
.fp-result-card > p{ font-size:13px; color:var(--fp-muted); margin:0 0 24px; }
.fp-result-details{ text-align:left; border-top:1px solid var(--fp-line); padding-top:16px; margin-bottom:16px; }
.fp-result-row{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; color:#444; }
.fp-result-total{ display:flex; justify-content:space-between; font-weight:800; font-size:16px; border-top:1px solid var(--fp-line); padding-top:12px; margin-bottom:22px; }
.fp-result-btns{ display:flex; gap:10px; }
.fp-result-btns .fp-btn{ flex:1; padding:11px; text-align:center; }
.fp-result-invoice{ display:block; margin-top:14px; font-size:12px; color:var(--fp-muted); }
.fp-result-invoice:hover{ color:var(--fp-red); }

/* ---------- HEADER LOGIN/REGISTER HOVER FIX: .fp-header-actions .fp-btn
   forces background:none !important (no boxed button look in the header),
   but the generic .fp-btn-ghost:hover / .fp-btn-solid:hover rules turn the
   text white assuming a solid background fills in behind it — with no
   background here that made both links go invisible (white text on the
   white header) on hover. Swap the two brand colors between each other
   instead: black text turns red, red text turns black. ---------- */
.fp-header-actions .fp-btn-ghost:hover{ color:var(--fp-red); }
.fp-header-actions .fp-btn-solid:hover{ color:var(--fp-black); }

/* ---------- MOBILE PAGE COMPACTNESS: appended at the very end of the file
   so it reliably wins the cascade over every base rule above (font-size
   alone doesn't shrink these elements — the site's base line-height is a
   fixed 26px, not relative, so small text keeps reserving a full 26px
   line box until it gets its own explicit line-height too). Trims hero,
   section and FAQ padding/line-height so the homepage reads tighter on
   phones without touching desktop at all. ---------- */
@media (max-width:640px){
    .fp-hero{ padding:28px 0; }
    .fp-eyebrow{ line-height:1.3; margin-bottom:8px; }
    .fp-hero p{ margin-bottom:16px; }
    .fp-popular{ line-height:1.3; margin-top:12px; }

    .fp-events-section{ padding:16px 0; }
    .fp-events-head{ margin-bottom:14px; gap:8px; }
    .fp-events-head h2{ font-size:20px; line-height:1.25; }
    .fp-events-head p{ font-size:12px; line-height:1.35; margin-top:3px; }

    .fp-faq-button{ padding:14px 2px; line-height:1.3; }
    .fp-faq-body{ padding:0 2px 14px; }
}

/* ---------- OVERFLOW GUARD ----------
   Grid/flex children default to min-width:auto, so one long unbreakable string
   (a pasted URL) or a wide table/image/embed in organizer-written HTML stretches
   the whole column past the phone screen. Keep the columns shrinkable and make
   user-authored rich text wrap and scale inside its box. */
.fp-details-layout{ grid-template-columns:minmax(0,1fr) 360px; }
.fp-details-layout > main,
.fp-details-layout > aside{ min-width:0; }
@media (max-width:980px){
    .fp-details-layout{ grid-template-columns:minmax(0,1fr); }
}
.fp-body-text{ overflow-wrap:anywhere; word-break:break-word; min-width:0; max-width:100%; }
.fp-body-text img,
.fp-body-text video,
.fp-body-text iframe,
.fp-body-text embed,
.fp-body-text object{ max-width:100% !important; height:auto; }
.fp-body-text iframe{ aspect-ratio:16/9; height:auto; }
.fp-body-text table{ display:block; max-width:100%; overflow-x:auto; }
.fp-body-text pre{ max-width:100%; overflow-x:auto; white-space:pre-wrap; }
.fp-body-text *{ max-width:100%; box-sizing:border-box; }

/* Organizers often paste text copied from other websites. That markup can carry
   a collapsed "read more" state as inline styles (max-height + overflow:hidden),
   which clips the description. Inline styles only lose to !important. */
.fp-body-text :where(div,section,article,p,span,ul,ol,li,blockquote){ max-height:none !important; overflow:visible !important; }

/* Phones and small tablets: events header in two lines.
   Line 1: heading + subtitle. Line 2: the Near me bar, full width. */
@media (max-width:719px){
    .fp-events-section.fp-ev-list > .fp-container{ column-gap:8px; row-gap:6px; }
    .fp-events-section.fp-ev-list .fp-events-head h2{ font-size:18px; line-height:1.2; }
    .fp-events-section.fp-ev-list .fp-events-head p{ font-size:11px; line-height:1.3; }
    .fp-events-section.fp-ev-list .fp-events-foot .fp-events-more{ font-size:12px; padding:8px 18px; }
    .fp-events-section.fp-ev-list .fp-nearme{ gap:4px 6px; font-size:10.5px; flex-wrap:wrap; min-width:0; }
    .fp-events-section.fp-ev-list .fp-nearme button{ height:24px; padding:0 7px; font-size:10.5px; white-space:nowrap; }
    .fp-events-section.fp-ev-list .fp-nearme .fp-nm-tag{ font-size:10.5px; white-space:nowrap; gap:5px; }
    .fp-events-section.fp-ev-list .fp-events-head p{ min-width:0; }
    .fp-events-section.fp-ev-list .fp-nearme .fp-nm-tag::before{ width:6px; height:6px; }
}

/* Desktop only: categories header (heading + subtitle) on one line. */
@media (min-width:992px){
    .fp-events-section.fp-cat-list .fp-events-head{ align-items:baseline; margin-bottom:14px; }
    .fp-events-section.fp-cat-list .fp-events-head > div{ display:flex; align-items:baseline; gap:18px; }
    .fp-events-section.fp-cat-list .fp-events-head p{ margin:0; }
}

/* ---------- Pagination: replaces the theme's bare 56x56px squares (main.css
   .table-pagination .page-btn) with a smaller, tighter control in the site's
   own style. Same markup/classes (components/pagination.blade.php), so this
   applies everywhere pagination is used — no view changes needed. ---------- */
.table-pagination{ gap:2px !important; margin:8px 0; }
.table-pagination .page-btn{
    width:30px !important; height:30px !important; line-height:1 !important;
    min-width:30px; padding:0; margin:0;
    display:inline-flex !important; align-items:center; justify-content:center;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:700;
    color:var(--fp-muted) !important; background:transparent !important;
    border:none !important; border-radius:4px !important;
    transition:color .15s ease, background .15s ease;
}
.table-pagination .page-btn i{ font-size:12px; color:var(--fp-black); }
.table-pagination a.page-btn:hover{ background:var(--fp-paper) !important; color:var(--fp-black) !important; }
.table-pagination .page-btn.active{
    position:relative; color:var(--fp-red) !important; background:transparent !important;
    cursor:default;
}
.table-pagination .page-btn.active::after{
    content:''; position:absolute; bottom:2px; left:8px; right:8px; height:2px; background:var(--fp-red);
}
.table-pagination .page-btn.disabled{
    color:var(--fp-muted) !important; width:auto !important; min-width:16px; font-weight:700; cursor:default;
}
.table-pagination .page-btn:disabled{ opacity:.35 !important; }

/* ---------- Infinite scroll: events / categories / organizers / blog auto-load
   the next batch as you near the bottom, instead of numbered pages. The
   numbered pagination markup above still renders (so it degrades gracefully
   without JS) but gets hidden once a listing's script takes over. ---------- */
.fp-infinite-loading{ display:none; text-align:center; padding:18px 0; color:var(--fp-muted); font-size:20px; grid-column:1/-1; }
.fp-infinite-sentinel{ height:1px; grid-column:1/-1; }

/* Home: 8 events on desktop (2 rows of 4), the first 6 on phones and tablets (Amit, 29 Sep 2026). */
@media (max-width:900px){ .fp-home-grid > .fp-ecard:nth-child(n+7){ display:none; } }

/* Events page top, desktop only: the search bar and the location chip share line 1; the filters, "Organiser? List your event free" and Clear Filters share line 2. Below 992px the stacked layout is unchanged. */
.fp-list-link-desk{ display:none; }
@media (min-width:992px){
  /* Only when the location chip is shown (once a city or All India is chosen). A first-time visitor sees the wide city bar instead and keeps the stacked layout. */
  .fp-browse-section > .fp-container:has(#fpCity.is-chip){ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:14px; align-items:center; }
  .fp-browse-section > .fp-container:has(#fpCity.is-chip) > *{ grid-column:1 / -1; order:5; }
  .fp-browse-section > .fp-container:has(#fpCity.is-chip) .fp-evsearch{ grid-column:1; order:1; margin:0 0 12px; }
  .fp-browse-section > .fp-container:has(#fpCity.is-chip) #fpCity.is-chip{ grid-column:2; order:2; margin:0 0 12px; align-self:center; position:relative; }
  .fp-browse-section > .fp-container:has(#fpCity.is-chip) #fpCity.is-chip .fp-city-pick{ position:absolute; right:0; top:100%; margin-top:6px; width:320px; max-width:320px; z-index:40; background:#fff; border:1px solid var(--fp-line); border-radius:8px; padding:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); }
  .fp-browse-section > .fp-container:has(#fpCity.is-chip) #fpEventSearchRes{ order:3; }
  .fp-browse-section > .fp-container:has(#fpCity.is-chip) .fp-filter-bar-wrap{ order:4; }
  .fp-browse-section > .fp-container:has(#fpCity.is-chip) .fp-active-filters-row{ order:5; }
  .fp-browse-section > .fp-container:has(#fpCity.is-chip) .ot-event-filter-wrapp{ order:7; }
  .fp-browse-section .fp-filter-bar{ align-items:center; }
  .fp-list-link-desk{ display:inline-flex; align-items:center; margin-left:auto; padding:0 14px; color:var(--fp-red); font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap; }
  .fp-list-link-desk + .fp-filter-clear-pill{ margin-left:0 !important; }
  .fp-list-link-mobile{ display:none; }
  .fp-ours-only-wrap{ display:none !important; }
}