/* =========================================================
   CONCESSIONS — REDESIGN ("The Concession Stand")
   Drop-in stylesheet. Append to style.css OR include after it.
   Uses your existing CSS variables (--primary-color, etc.)
   ========================================================= */

#concessions.concessions-section {
    position: relative;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(243,156,18,0.08), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(231,76,60,0.06), transparent 60%),
        var(--card-bg-color);
    overflow: hidden;
}

/* Subtle film-grain backdrop for cinematic depth */
#concessions.concessions-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(243,156,18,0.07) 1px, transparent 0);
    background-size: 22px 22px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

#concessions .container { position: relative; z-index: 1; }

/* ---------- Section Heading ---------- */
.concession-stand-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 6px 16px;
    background: rgba(243, 156, 18, 0.1);
    color: var(--primary-color);
    border: 1px solid rgba(243,156,18,0.3);
    border-radius: 50px;
    font-family: var(--heading-font);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.85rem;
}
.concession-stand-eyebrow i { font-size: 0.7rem; }

.concession-stand-title {
    font-family: var(--heading-font);
    font-size: clamp(2rem, 4.6vw, 3rem);
    font-weight: 700;
    margin: 0 0 0.4rem;
    line-height: 1.1;
}

.concession-stand-script {
    display: block;
    font-family: var(--signature-font);
    font-weight: 700;
    font-size: 0.55em;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 0.1em;
    letter-spacing: 0;
    transform: rotate(-2deg);
    display: inline-block;
}

.concession-stand-sub {
    max-width: 620px;
    margin: 0 auto 2.5rem;
    color: var(--muted-text-color);
    font-size: 1.02rem;
    line-height: 1.6;
    text-align: center;
}

/* ---------- "Free Delivery" Bundle Banner ---------- */
.concession-bundle-banner {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.1rem 1.75rem;
    margin: 0 auto 3rem;
    max-width: 980px;
    background: linear-gradient(95deg, rgba(231,76,60,0.08), rgba(243,156,18,0.12) 50%, rgba(241,196,15,0.08));
    border: 1px solid rgba(243,156,18,0.35);
    border-radius: 18px;
    box-shadow: 0 6px 28px rgba(243,156,18,0.10);
    overflow: hidden;
}
.concession-bundle-banner::before {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(243,156,18,0.04) 12px 13px);
    pointer-events: none;
}
.bundle-banner-icon {
    flex-shrink: 0;
    width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 6px 18px rgba(243,156,18,0.4);
}
.bundle-banner-text h4 {
    font-family: var(--heading-font);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--text-color);
}
.bundle-banner-text h4 span {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bundle-banner-text p {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 0.88rem;
    line-height: 1.4;
}
.bundle-banner-cta {
    flex-shrink: 0;
    padding: 10px 22px;
    background: var(--accent-gradient);
    color: #1a1a00;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    border-radius: 50px;
    letter-spacing: 0.02em;
    transition: transform .25s, box-shadow .25s, filter .25s;
    white-space: nowrap;
}
.bundle-banner-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 8px 22px rgba(243,156,18,0.4);
}

/* ---------- Showcase Grid ---------- */
.concession-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    align-items: stretch;
    margin-bottom: 2.5rem;
}

/* ---------- Individual Showcase Card ---------- */
.showcase-card {
    --card-accent: #f39c12;
    --card-accent-2: #f1c40f;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
    isolation: isolate;
}

.showcase-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 48px rgba(0,0,0,0.12), 0 0 0 1px var(--card-accent);
    border-color: var(--card-accent);
}

/* Marquee dot row across the top of each card */
.showcase-marquee {
    height: 8px;
    background:
        radial-gradient(circle, var(--card-accent) 0 2px, transparent 2.5px) 0 50% / 14px 8px repeat-x,
        linear-gradient(90deg, var(--card-accent), var(--card-accent-2));
    position: relative;
    overflow: hidden;
}
.showcase-marquee::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: marqueeShimmer 3.5s ease-in-out infinite;
}
@keyframes marqueeShimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

/* Top-tier badge — featured card */
.showcase-card.featured {
    --card-accent: #e67e22;
    --card-accent-2: #f39c12;
    border-color: rgba(243, 156, 18, 0.45);
    box-shadow: 0 8px 28px rgba(243, 156, 18, 0.18);
}
.showcase-card.featured:hover {
    border-color: rgba(243, 156, 18, 0.85);
    box-shadow: 0 22px 50px rgba(243, 156, 18, 0.28);
}

.showcase-ribbon {
    position: absolute;
    top: 18px; left: -8px;
    z-index: 5;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: #fff;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 14px 6px 12px;
    border-radius: 4px 4px 4px 0;
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.45);
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.showcase-ribbon::before {
    content: "";
    position: absolute;
    bottom: -8px; left: 0;
    border: 4px solid transparent;
    border-top-color: #b8540e;
    border-right-color: #b8540e;
}
.showcase-ribbon i { margin-right: 4px; }

/* ---------- Image area ---------- */
.showcase-media {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 8%, var(--bg-color)), var(--bg-color));
}
.showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.showcase-card:hover .showcase-media img { transform: scale(1.06); }

/* Soft corner gradient over image for legibility of the price ticket */
.showcase-media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(220deg, rgba(0,0,0,0.32) 0%, transparent 45%);
    pointer-events: none;
}

/* Themed floating motion layer */
.showcase-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}
.fx-particle {
    position: absolute;
    font-size: 1.1rem;
    opacity: 0;
    will-change: transform, opacity;
}

/* Popcorn — pop-up bursts */
.showcase-card[data-theme="popcorn"] .fx-particle { animation: popBurst 4s ease-in-out infinite; }
.showcase-card[data-theme="popcorn"] .fx-particle:nth-child(1) { left: 18%; bottom: 14%; animation-delay: 0s; }
.showcase-card[data-theme="popcorn"] .fx-particle:nth-child(2) { left: 48%; bottom: 18%; animation-delay: 1.1s; }
.showcase-card[data-theme="popcorn"] .fx-particle:nth-child(3) { left: 76%; bottom: 12%; animation-delay: 2.2s; }
@keyframes popBurst {
    0%   { transform: translateY(0) scale(0.6); opacity: 0; }
    20%  { opacity: 0.85; }
    60%  { transform: translateY(-60px) scale(1.05) rotate(20deg); opacity: 0.6; }
    100% { transform: translateY(-95px) scale(0.9) rotate(40deg); opacity: 0; }
}

/* Cotton candy — sugar swirl drift */
.showcase-card[data-theme="cotton-candy"] .fx-particle { animation: sugarDrift 5s ease-in-out infinite; font-size: 1.2rem; }
.showcase-card[data-theme="cotton-candy"] .fx-particle:nth-child(1) { left: 22%; top: 60%; animation-delay: 0s; }
.showcase-card[data-theme="cotton-candy"] .fx-particle:nth-child(2) { left: 55%; top: 50%; animation-delay: 1.6s; }
.showcase-card[data-theme="cotton-candy"] .fx-particle:nth-child(3) { left: 78%; top: 55%; animation-delay: 3.2s; }
@keyframes sugarDrift {
    0%   { transform: translate(0,0) scale(0.7) rotate(0); opacity: 0; }
    20%  { opacity: 0.85; }
    50%  { transform: translate(15px,-40px) scale(1.0) rotate(180deg); opacity: 0.7; }
    100% { transform: translate(-10px,-90px) scale(0.6) rotate(360deg); opacity: 0; }
}

/* Snow cone — frost shimmer drop */
.showcase-card[data-theme="snow-cone"] .fx-particle { animation: snowFall 4.5s linear infinite; }
.showcase-card[data-theme="snow-cone"] .fx-particle:nth-child(1) { left: 20%; top: -10%; animation-delay: 0s; }
.showcase-card[data-theme="snow-cone"] .fx-particle:nth-child(2) { left: 55%; top: -10%; animation-delay: 1.3s; }
.showcase-card[data-theme="snow-cone"] .fx-particle:nth-child(3) { left: 82%; top: -10%; animation-delay: 2.8s; }
@keyframes snowFall {
    0%   { transform: translateY(0) rotate(0); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translateY(280px) rotate(180deg); opacity: 0; }
}

/* ---------- Price ticket (movie ticket stub) ---------- */
.showcase-ticket {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 3;
    display: flex;
    align-items: stretch;
    background: #fff;
    color: #1a1a00;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    transform: rotate(3deg);
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.showcase-card:hover .showcase-ticket { transform: rotate(-1deg) scale(1.04); }

.ticket-amount {
    padding: 10px 14px;
    background: var(--accent-gradient);
    color: #1a1a00;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
}
.ticket-amount sup {
    font-size: 0.7rem;
    margin-right: 1px;
    vertical-align: top;
    margin-top: 2px;
}

.ticket-divider {
    position: relative;
    width: 0;
    border-left: 2px dashed rgba(0,0,0,0.18);
    margin: 4px 0;
}
.ticket-divider::before,
.ticket-divider::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 8px; height: 8px;
    background: var(--bg-color);
    border-radius: 50%;
    transform: translateX(-50%);
}
.ticket-divider::before { top: -8px; }
.ticket-divider::after  { bottom: -8px; }

.ticket-meta {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}
.ticket-meta strong {
    font-family: var(--heading-font);
    font-size: 0.72rem;
    font-weight: 700;
    color: #1a1a00;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ticket-meta span {
    font-size: 0.68rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 1px;
}

/* ---------- Card Content ---------- */
.showcase-body {
    padding: 1.6rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.showcase-tagline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--card-accent);
    margin-bottom: 0.5rem;
}
.showcase-tagline::before {
    content: "";
    width: 18px; height: 2px;
    background: var(--card-accent);
}

.showcase-title {
    font-family: var(--heading-font);
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--text-color);
    letter-spacing: -0.01em;
}

.showcase-blurb {
    color: var(--muted-text-color);
    font-size: 0.93rem;
    line-height: 1.55;
    margin: 0 0 1.1rem;
}

.showcase-stats {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
.showcase-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: rgba(243,156,18,0.08);
    border: 1px solid rgba(243,156,18,0.2);
    color: var(--text-color);
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--heading-font);
}
.showcase-stat i {
    color: var(--card-accent);
    font-size: 0.7rem;
}

.showcase-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.showcase-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-color);
    line-height: 1.4;
}
.showcase-features li i {
    flex-shrink: 0;
    width: 18px; height: 18px;
    background: var(--card-accent);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    margin-top: 2px;
}

/* ---------- Card Actions ---------- */
.showcase-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: auto;
}

.showcase-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 13px 22px;
    background: var(--accent-gradient);
    color: #1a1a00;
    text-decoration: none;
    border-radius: 50px;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    transition: transform .25s, box-shadow .25s, filter .25s;
    border: none;
    cursor: pointer;
}
.showcase-cta-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 10px 26px rgba(243, 156, 18, 0.4);
}
.showcase-cta-primary i { transition: transform .25s; }
.showcase-cta-primary:hover i { transform: translateX(3px); }

.showcase-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 6px 12px;
    color: var(--muted-text-color);
    font-family: var(--heading-font);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: color .25s;
}
.showcase-cta-secondary:hover { color: var(--card-accent); }
.showcase-cta-secondary i { font-size: 0.7rem; }

/* ---------- Trust strip below cards ---------- */
.concession-trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem;
    padding: 1.4rem 1.5rem;
    margin: 0 auto;
    max-width: 1000px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--muted-text-color);
    font-size: 0.88rem;
    font-family: var(--heading-font);
    font-weight: 600;
}
.trust-item i {
    color: var(--primary-color);
    font-size: 1.1rem;
}
.trust-item strong {
    color: var(--text-color);
    font-weight: 700;
}

/* =========================================================
   DARK MODE POLISH
   ========================================================= */
body.dark-mode #concessions.concessions-section {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(243,156,18,0.05), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(231,76,60,0.04), transparent 60%),
        #0e0c0a;
}
body.dark-mode .showcase-card {
    background-color: #181510;
    border-color: #2e2418;
}
body.dark-mode .showcase-card:hover {
    box-shadow: 0 22px 48px rgba(0,0,0,0.6), 0 0 0 1px var(--card-accent);
}
body.dark-mode .showcase-title { color: var(--text-color); }
body.dark-mode .showcase-features li { color: var(--text-color); }
body.dark-mode .showcase-stat {
    background: rgba(243,156,18,0.1);
    border-color: rgba(243,156,18,0.25);
    color: var(--text-color);
}
body.dark-mode .ticket-divider::before,
body.dark-mode .ticket-divider::after {
    background: #181510;
}
body.dark-mode .concession-bundle-banner {
    background: linear-gradient(95deg, rgba(231,76,60,0.12), rgba(243,156,18,0.18) 50%, rgba(241,196,15,0.10));
    border-color: rgba(243,156,18,0.4);
}
body.dark-mode .bundle-banner-text h4 { color: var(--text-color); }
body.dark-mode .concession-trust-strip {
    border-color: #2a2318;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px) {
    .concession-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
    .showcase-card.featured {
        grid-column: 1 / -1;
    }
    .showcase-card.featured .showcase-media { height: 280px; }
}

@media (max-width: 720px) {
    .concession-showcase {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .showcase-card.featured {
        grid-column: auto;
    }
    .showcase-card.featured .showcase-media { height: 240px; }

    .concession-bundle-banner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 1.25rem 1.25rem 1.4rem;
        gap: 0.85rem;
    }
    .bundle-banner-icon { margin: 0 auto; }
    .bundle-banner-cta { justify-self: center; }

    .concession-trust-strip {
        gap: 1.1rem 2rem;
        padding: 1.1rem 1rem;
    }
    .trust-item { font-size: 0.82rem; }

    .showcase-ticket { transform: rotate(2deg); }
    .ticket-amount { font-size: 1.25rem; padding: 9px 12px; }

    .showcase-body { padding: 1.4rem 1.25rem 1.3rem; }
    .showcase-title { font-size: 1.3rem; }
}

@media (max-width: 420px) {
    .showcase-features li { font-size: 0.86rem; }
    .showcase-stat { font-size: 0.74rem; padding: 4px 9px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .showcase-fx,
    .showcase-marquee::after { display: none !important; }
    .showcase-card,
    .showcase-cta-primary,
    .showcase-ticket,
    .showcase-media img { transition: none !important; }
}