/*
 * The Grill Peri Peri — Brand Theme
 * Flame-grilled peri-peri chicken | Mill Road, Cambridge
 * Orange/flame palette inspired by peri-peri, charcoal grills, warm hospitality
 */
:root {
    --color-primary: #E8722A;
    --color-primary-dark: #C75B1E;
    --color-order: #E8722A;
    --color-hero-cta: #E8722A;
    --color-hero-cta-dark: #C75B1E;
    --color-accent: #FFB347;
    --color-accent-soft: #FFF3E0;
    --color-cream: #FFF8F0;
    --color-gold: #FFB347;
    --color-gold-soft: rgba(255, 179, 71, 0.14);
    --color-footer-heading: #E8722A;
    --color-scrollbar-thumb-hover: #E8722A;
}

/* GPP brand badge colours */
.badge-halal {
    background: #2D9F6B;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.badge-spicy {
    background: #E8722A;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* Hero gradient override for GPP warm tones */
.hero-home__orb--gold {
    background: radial-gradient(circle, rgba(232, 114, 42, 0.18) 0%, transparent 70%);
}

.hero-home__orb--red {
    background: radial-gradient(circle, rgba(255, 179, 71, 0.12) 0%, transparent 70%);
}

/* GPP button hover warmth */
.btn-primary:hover,
.btn-order:hover {
    background: #C75B1E;
}

/* Deal cards with warm overlay */
.deal-card__image::after {
    background: linear-gradient(180deg, transparent 40%, rgba(232, 114, 42, 0.08) 100%);
}

/* Menu item halal indicator */
.menu-item-card[data-halal="true"]::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2D9F6B;
    z-index: 2;
}

/* Spice level indicators */
.spice-level {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

.spice-level__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(185, 28, 28, 0.35);
    box-sizing: border-box;
}

.spice-level__dot.active {
    background: #DC2626;
    border-color: #B91C1C;
}

.spice-level__dot.is-active {
    background: #DC2626;
    border-color: #B91C1C;
}

/* Allergen tags */
.allergen-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}

/* Responsive fixes for all sections */
/* Trending grid responsive */
.trending-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1024px) {
    .trending-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
    .section [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .section [style*="grid-template-columns:repeat(auto-fit,minmax(300px,1fr))"] {
        grid-template-columns: 1fr !important;
    }

    .section [style*="grid-template-columns:repeat(auto-fit,minmax(240px,1fr))"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .trending-grid { grid-template-columns: repeat(2, 1fr) !important; }

    #welcomePopup > div { margin: 12px; max-width: 100% !important; }
    #welcomePopup > div > div:first-child { height: 140px !important; }
}

@media (max-width: 480px) {
    .section [style*="grid-template-columns:repeat(auto-fit,minmax(240px,1fr))"] {
        grid-template-columns: 1fr !important;
    }

    .section [style*="display:flex;gap:24px"] {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* App-download feature pills: 2 on the first row, the 3rd centered below (saves vertical space) */
    .section .home-app__features {
        display: grid !important;
        grid-template-columns: repeat(2, auto) !important;
        justify-content: center !important;
        gap: 12px 22px !important;
    }
    .section .home-app__features > *:last-child {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
    }

    .trending-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .trending-grid > a > div:first-child { height: 160px !important; }
}

/* Dark mode overrides for GPP — manual toggle only */
html[data-theme="dark"] {
    --color-primary: #F08942;
    --color-primary-dark: #E8722A;
    --color-accent: #FFB347;
    --color-accent-soft: rgba(255, 179, 71, 0.15);
    --color-cream: #1A1208;
    --color-footer-heading: #F08942;
}

html[data-theme="dark"] .allergen-tag {
    background: rgba(146, 64, 14, 0.2);
    color: #FDE68A;
    border-color: rgba(253, 230, 138, 0.2);
}