/*========================================
    CONTENT PAGES - REAL FOOD KITCHEN
    Bold, energetic design matching the brand
=========================================*/

/* Google Fonts Import - Bold condensed font to match logo */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Typography */
    --content-heading: 'Bebas Neue', Impact, sans-serif;
    --content-body: 'Inter', -apple-system, sans-serif;

    /* Core colors from logo */
    --content-black: #000000;
    --content-charcoal: #1a1a1a;
    --content-slate: #4a4a4a;
    --content-stone: #666666;
    --content-pebble: #999999;

    /* Brand accent - Orange/Flame (matched to logo) */
    --content-flame: #f05a28;
    --content-flame-light: #ff6f3c;
    --content-flame-dark: #d94a1a;

    /* Brand accent - Sage/Teal */
    --content-teal: #83AD95;
    --content-teal-light: #9dc4ab;
    --content-teal-dark: #6a9479;

    /* Neutrals */
    --content-light: #f5f5f5;
    --content-white: #ffffff;
    --content-border: #e5e5e5;
}

/* Base Content Page Styles */
.content-page {
    background: var(--content-white);
    font-family: var(--content-body);
    color: var(--content-charcoal);
    line-height: 1.7;
    overflow-x: hidden;
}

/* Hero Section */
.content-hero {
    position: relative;
    padding: 100px 0 80px;
    background: var(--content-black);
    overflow: hidden;
}

.content-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(135deg, rgba(232, 90, 27, 0.15) 0%, transparent 50%),
        linear-gradient(225deg, rgba(44, 179, 196, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Shorter, subtle fade */
.content-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, var(--content-white), transparent);
    pointer-events: none;
}

.content-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.content-hero h1 {
    font-family: var(--content-heading);
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 400;
    color: var(--content-white);
    margin-bottom: 20px;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.content-hero h1 span {
    color: var(--content-flame);
}

.content-hero-subtitle {
    font-family: var(--content-body);
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: rgba(255, 255, 255, 0.8);
    max-width: 550px;
    margin: 0 auto;
    font-weight: 400;
}

/* Decorative accent */
.content-hero-accent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.content-hero-accent::before,
.content-hero-accent::after {
    content: '';
    width: 50px;
    height: 3px;
    background: var(--content-flame);
}

.content-hero-accent i {
    color: var(--content-teal);
    font-size: 1.25rem;
}

/* Main Content Area */
.content-main {
    position: relative;
    z-index: 1;
    padding: 60px 0 100px;
}

/* Section Titles */
.content-section-title {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    color: var(--content-black);
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.content-section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 50px;
    height: 4px;
    background: var(--content-flame);
}

.content-section-title.centered {
    display: block;
    text-align: center;
}

.content-section-title.centered::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Content Card Component */
.content-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid var(--content-border);
}

.content-card-header {
    padding: 1.5rem;
    background: var(--content-light);
    border-bottom: 1px solid var(--content-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.content-card-header h3 {
    margin: 0;
    font-family: var(--content-heading);
    font-size: 1.5rem;
    color: var(--content-charcoal);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.content-card-header h3 i {
    color: var(--content-flame);
    font-size: 1.25rem;
}

.content-card-header button {
    flex-shrink: 0;
}

.content-card-body {
    padding: 1.5rem;
}

/* Button Styles */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--content-flame);
    color: white;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 1rem;
}

.btn-primary:hover {
    background: var(--content-flame-dark);
    box-shadow: 0 4px 12px rgba(240, 90, 40, 0.3);
    text-decoration: none;
    color: white;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: white;
    color: var(--content-charcoal);
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-weight: 500;
    border: 1px solid var(--content-border);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 0.875rem;
}

.btn-secondary:hover {
    background: var(--content-light);
    border-color: var(--content-flame);
    color: var(--content-flame);
    text-decoration: none;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

/* Form Elements */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-weight: 500;
    color: var(--content-charcoal);
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--content-border);
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: var(--content-body);
}

.form-control:focus {
    outline: none;
    border-color: var(--content-flame);
    box-shadow: 0 0 0 3px rgba(240, 90, 40, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

/* Story/About Styles */
.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.story-content {
    padding-right: 20px;
}

.story-content .lead-quote {
    font-family: var(--content-body);
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    font-style: italic;
    color: var(--content-charcoal);
    border-left: 4px solid var(--content-flame);
    padding-left: 25px;
    margin-bottom: 30px;
    line-height: 1.7;
    background: var(--content-light);
    padding: 20px 25px;
    border-radius: 0 8px 8px 0;
}

.story-content p {
    font-size: 1.0625rem;
    color: var(--content-slate);
    margin-bottom: 24px;
    line-height: 1.8;
}

.story-content p strong {
    color: var(--content-black);
    font-weight: 600;
}

.story-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    position: sticky;
    top: 100px;
}

.story-images img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.story-images img:nth-child(1) {
    grid-column: 1 / 2;
    aspect-ratio: 4/5;
    transform: rotate(-2deg);
}

.story-images img:nth-child(2) {
    grid-column: 2 / 3;
    aspect-ratio: 4/5;
    transform: rotate(2deg) translateY(30px);
}

.story-images img:nth-child(3) {
    grid-column: 1 / 2;
    aspect-ratio: 4/3;
    transform: rotate(1deg);
}

.story-images img:nth-child(4) {
    grid-column: 2 / 3;
    aspect-ratio: 4/3;
    transform: rotate(-1deg) translateY(-15px);
}

.story-images img:hover {
    transform: rotate(0deg) scale(1.03);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    z-index: 10;
    position: relative;
}

/* Step Cards - How It Works */
.steps-container {
    max-width: 800px;
    margin: 0 auto;
}

.step-card {
    background: var(--content-white);
    border-radius: 12px;
    padding: 35px 40px;
    margin-bottom: 0;
    position: relative;
    border: 2px solid var(--content-border);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.step-card:last-of-type {
    margin-bottom: 0;
}

.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--content-flame);
}

.step-card:hover {
    transform: translateY(-4px);
    border-color: var(--content-flame);
    box-shadow: 0 12px 30px rgba(232, 90, 27, 0.12);
}

.step-number {
    position: absolute;
    top: 20px;
    right: 25px;
    font-family: var(--content-heading);
    font-size: 5rem;
    font-weight: 400;
    color: var(--content-light);
    line-height: 1;
    pointer-events: none;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.step-icon {
    width: 52px;
    height: 52px;
    background: var(--content-black);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--content-flame);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.step-title {
    font-family: var(--content-heading);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--content-black);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.step-content {
    position: relative;
    z-index: 1;
}

.step-content p {
    color: var(--content-slate);
    font-size: 1rem;
    margin-bottom: 16px;
    line-height: 1.7;
}

.step-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-content ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    color: var(--content-slate);
}

.step-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: var(--content-teal);
    border-radius: 50%;
}

.step-connector {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    position: relative;
    z-index: 2;
}

.step-connector i {
    color: var(--content-flame);
    font-size: 1.25rem;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* FAQ Styles */
.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-category {
    margin-bottom: 50px;
}

.faq-category-title {
    font-family: var(--content-heading);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--content-black);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--content-black);
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.faq-category-title i {
    color: var(--content-flame);
    font-size: 1.25rem;
}

.faq-item {
    background: var(--content-white);
    border-radius: 8px;
    margin-bottom: 10px;
    border: 2px solid var(--content-border);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--content-flame);
}

.faq-item.active {
    border-color: var(--content-flame);
    box-shadow: 0 4px 20px rgba(232, 90, 27, 0.1);
}

.faq-question {
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--content-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--content-charcoal);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: var(--content-flame);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer-inner {
    padding: 0 28px 24px;
    color: var(--content-stone);
    line-height: 1.7;
}

.faq-answer-inner a {
    color: var(--content-flame);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.faq-answer-inner a:hover {
    color: var(--content-flame-dark);
}

/* Contact Styles */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}

.contact-card-new {
    background: var(--content-white);
    border-radius: 12px;
    padding: 35px 30px;
    text-align: center;
    border: 2px solid var(--content-border);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.contact-card-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--content-flame);
}

.contact-card-new:hover {
    transform: translateY(-6px);
    border-color: var(--content-flame);
    box-shadow: 0 12px 30px rgba(232, 90, 27, 0.12);
}

.contact-card-icon {
    width: 65px;
    height: 65px;
    background: var(--content-black);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--content-flame);
    font-size: 1.5rem;
}

.contact-card-new h4 {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--content-black);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.contact-card-new p {
    color: var(--content-stone);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.contact-card-new a {
    color: var(--content-flame);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.contact-card-new a:hover {
    color: var(--content-flame-dark);
}

.contact-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.contact-map-wrapper {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    height: 450px;
}

.contact-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.contact-form-wrapper {
    background: var(--content-light);
    border-radius: 12px;
    padding: 40px;
}

.contact-form-wrapper h3 {
    font-family: var(--content-heading);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--content-black);
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* CTA Section */
.content-cta {
    background: var(--content-black);
    color: white;
    padding: 70px 40px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 60px;
}

.content-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(135deg, rgba(232, 90, 27, 0.2) 0%, transparent 50%),
        linear-gradient(225deg, rgba(44, 179, 196, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.content-cta h3 {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    margin-bottom: 15px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.content-cta p {
    font-size: 1.0625rem;
    opacity: 0.85;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.content-cta .btn {
    background: var(--content-flame);
    color: white;
    padding: 16px 40px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    transition: all 0.3s ease;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.content-cta .btn:hover {
    background: var(--content-flame-light);
    box-shadow: 0 10px 30px rgba(232, 90, 27, 0.3);
}

/* Responsive */
@media (max-width: 991px) {
    .story-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .story-content {
        padding-right: 0;
    }

    .story-images {
        position: relative;
        top: 0;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .content-hero {
        padding: 80px 0 60px;
    }

    .step-card {
        padding: 30px 25px;
    }

    .step-number {
        font-size: 3rem;
        top: 20px;
        right: 20px;
    }

    .story-images img:nth-child(1),
    .story-images img:nth-child(2),
    .story-images img:nth-child(3),
    .story-images img:nth-child(4) {
        transform: none;
    }

    .content-cta {
        padding: 50px 25px;
        border-radius: 16px;
    }
}

/* Animation on scroll - add .animate-on-scroll class to elements */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay classes */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* Contact Form Styling within content-page */
.contact-form-wrapper .contact-form {
    background: transparent;
    padding: 0;
}

.contact-form-wrapper .contact-form h4 {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--content-black);
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.contact-form-wrapper .form-group {
    margin-bottom: 20px;
}

.contact-form-wrapper .form-input-group {
    position: relative;
}

.contact-form-wrapper .form-control {
    width: 100%;
    padding: 14px 16px;
    padding-right: 45px;
    border: 2px solid var(--content-border);
    border-radius: 8px;
    font-family: var(--content-body);
    font-size: 1rem;
    background: var(--content-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form-wrapper .form-control:focus {
    outline: none;
    border-color: var(--content-flame);
    box-shadow: 0 0 0 3px rgba(232, 90, 27, 0.1);
}

.contact-form-wrapper .form-control::placeholder {
    color: var(--content-pebble);
}

.contact-form-wrapper textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

.contact-form-wrapper .form-input-group i {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--content-pebble);
    font-size: 1.1rem;
}

.contact-form-wrapper textarea.form-control + i {
    top: 20px;
    transform: none;
}

.contact-form-wrapper .form-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--content-black);
    color: white;
    border: none;
    padding: 14px 30px;
    border-radius: 8px;
    font-family: var(--content-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.contact-form-wrapper .form-btn-group:hover {
    background: var(--content-flame);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(232, 90, 27, 0.25);
}

.contact-form-wrapper .form-btn-group span {
    text-transform: uppercase;
}

/* Validation messages */
.contact-form-wrapper .field-validation-error {
    display: block;
    color: var(--content-flame);
    font-size: 0.875rem;
    margin-top: 6px;
}

/*========================================
    GLOBAL PAGE STYLING
=========================================*/

/* Page sections */
.inner-section,
.user-form-card,
.account-card {
    background: var(--content-white);
    font-family: var(--content-body);
}

/* Page titles */
.inner-section h2,
.single-banner h2,
.user-form-card h3,
.account-card h3 {
    font-family: var(--content-heading);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black);
}

/* Section headers with background */
.section-heading {
    background: var(--content-black);
    padding: 60px 0;
}

.section-heading h2 {
    font-family: var(--content-heading);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Banner sections */
.single-banner,
.inner-banner {
    background: var(--content-black);
    position: relative;
}

.single-banner h2,
.inner-banner h2 {
    font-family: var(--content-heading);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Buttons - Primary */
.btn,
.form-btn,
button[type="submit"],
input[type="submit"] {
    background: var(--content-flame) !important;
    color: var(--content-white) !important;
    font-family: var(--content-body);
    font-weight: 600;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn:hover,
.form-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background: var(--content-flame-light) !important;
    color: var(--content-white) !important;
    border: none !important;
}

/* Buttons - Secondary/Outline */
.btn-outline,
.btn-secondary {
    background: transparent !important;
    color: var(--content-black) !important;
    border: 2px solid var(--content-black) !important;
}

.btn-outline:hover,
.btn-secondary:hover {
    background: var(--content-black) !important;
    color: var(--content-white) !important;
}

/* Buttons - Dark */
.btn-dark {
    background: var(--content-black) !important;
    color: var(--content-white) !important;
}

.btn-dark:hover {
    background: var(--content-charcoal) !important;
}

/* Form inputs */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
    font-family: var(--content-body);
    border: 2px solid var(--content-border);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 15px;
    transition: border-color 0.2s ease;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--content-flame);
    box-shadow: 0 0 0 3px rgba(240, 90, 40, 0.1);
}

/* Form labels */
label,
.form-label {
    font-family: var(--content-body);
    font-weight: 600;
    color: var(--content-charcoal);
    font-size: 14px;
    margin-bottom: 6px;
}

/* Cards and panels */
.card,
.panel,
.product-card,
.order-card {
    background: var(--content-white);
    border: 2px solid var(--content-border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.card:hover,
.panel:hover {
    border-color: var(--content-flame);
    box-shadow: 0 8px 25px rgba(240, 90, 40, 0.1);
}

/* Card titles */
.card-title,
.panel-title {
    font-family: var(--content-heading);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black);
}

/* Tables */
.table,
table {
    font-family: var(--content-body);
}

.table thead th,
table thead th {
    font-family: var(--content-body);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--content-charcoal);
    background: var(--content-light);
    border-bottom: 2px solid var(--content-border);
}

.table tbody td,
table tbody td {
    color: var(--content-slate);
    border-bottom: 1px solid var(--content-border);
}

/* Badges and labels */
.badge,
.label,
.tag {
    font-family: var(--content-body);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 4px;
}

.badge-primary,
.label-primary {
    background: var(--content-flame);
    color: var(--content-white);
}

.badge-success,
.label-success {
    background: #11b76b;
    color: var(--content-white);
}

.badge-warning,
.label-warning {
    background: #ffab10;
    color: var(--content-black);
}

.badge-danger,
.label-danger {
    background: #ff3838;
    color: var(--content-white);
}

/* Alerts */
.alert {
    font-family: var(--content-body);
    border-radius: 8px;
    border: none;
    padding: 16px 20px;
}

.alert-success {
    background: rgba(17, 183, 107, 0.1);
    color: #0a7b47;
}

.alert-danger {
    background: rgba(255, 56, 56, 0.1);
    color: #c62828;
}

.alert-warning {
    background: rgba(255, 171, 16, 0.1);
    color: #8a6d00;
}

.alert-info {
    background: rgba(0, 183, 196, 0.1);
    color: #007a83;
}

/* Links */
a {
    color: var(--content-flame);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--content-flame-dark);
}

/* Breadcrumbs */
.breadcrumb {
    font-family: var(--content-body);
    font-size: 14px;
}

.breadcrumb a {
    color: var(--content-flame);
}

.breadcrumb-item.active {
    color: var(--content-stone);
}

/* Pagination */
.pagination .page-link {
    font-family: var(--content-body);
    color: var(--content-charcoal);
    border: 2px solid var(--content-border);
    border-radius: 6px;
    margin: 0 3px;
}

.pagination .page-item.active .page-link {
    background: var(--content-flame);
    border-color: var(--content-flame);
    color: var(--content-white);
}

.pagination .page-link:hover {
    background: var(--content-light);
    border-color: var(--content-flame);
    color: var(--content-flame);
}

/* Modal styling */
.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-header {
    background: var(--content-black);
    color: var(--content-white);
    border-radius: 12px 12px 0 0;
    padding: 20px 25px;
}

.modal-title {
    font-family: var(--content-heading);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.modal-header .btn-close {
    filter: invert(1);
}

.modal-body {
    padding: 25px;
}

.modal-footer {
    border-top: 1px solid var(--content-border);
    padding: 20px 25px;
}

/* Accordion styling */
.accordion-button {
    font-family: var(--content-body);
    font-weight: 600;
    color: var(--content-charcoal);
}

.accordion-button:not(.collapsed) {
    background: var(--content-light);
    color: var(--content-flame);
}

.accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(240, 90, 40, 0.1);
    border-color: var(--content-flame);
}

/* Tab styling */
.nav-tabs .nav-link {
    font-family: var(--content-body);
    font-weight: 600;
    color: var(--content-stone);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 20px;
}

.nav-tabs .nav-link:hover {
    color: var(--content-flame);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--content-flame);
    border-bottom-color: var(--content-flame);
    background: transparent;
}

/* Product/Menu grid */
.product-card,
.menu-card {
    background: var(--content-white);
    border: 2px solid var(--content-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-card:hover,
.menu-card:hover {
    border-color: var(--content-flame);
    box-shadow: 0 12px 30px rgba(240, 90, 40, 0.12);
    transform: translateY(-4px);
}

.product-card .product-title,
.menu-card .product-title {
    font-family: var(--content-heading);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black);
}

.product-card .product-price,
.menu-card .product-price {
    color: var(--content-flame);
    font-weight: 700;
}

/* Account/Profile sections */
.profile-card,
.account-section {
    background: var(--content-white);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    border: 2px solid var(--content-border);
}

.profile-card h4,
.account-section h4 {
    font-family: var(--content-heading);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--content-border);
}

/* Order cards */
.order-item,
.order-card {
    background: var(--content-white);
    border: 2px solid var(--content-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.order-item:hover,
.order-card:hover {
    border-color: var(--content-flame);
}

.order-status {
    font-family: var(--content-body);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 4px 12px;
    border-radius: 4px;
}

.order-status.pending {
    background: rgba(255, 171, 16, 0.15);
    color: #8a6d00;
}

.order-status.confirmed {
    background: rgba(0, 183, 196, 0.15);
    color: #007a83;
}

.order-status.delivered {
    background: rgba(17, 183, 107, 0.15);
    color: #0a7b47;
}

/*========================================
    SITE-WIDE HEADER & FOOTER STYLING
=========================================*/

/* Header Top Bar */
.header-top {
    background: var(--content-black) !important;
    padding: 10px 0;
    position: relative;
    z-index: 9999 !important;
}

.header-top-welcome p {
    font-family: var(--content-body);
    font-size: 14px;
    color: var(--content-white);
    letter-spacing: 0.3px;
}

.header-top-welcome a {
    color: var(--content-flame) !important;
    font-weight: 500;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.header-top-welcome a:hover {
    color: var(--content-flame-light) !important;
}

/* Main Header */
.header-part {
    background: var(--content-white);
    border-bottom: 1px solid var(--content-border);
    position: relative;
    z-index: 9999 !important;
}

.header-part.active {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    z-index: 9999 !important;
}

/* Navigation Bar */
.navbar-part {
    background: var(--content-white);
    padding: 0;
    border-bottom: 1px solid var(--content-border);
    position: relative;
    z-index: 9999 !important;
}

.navbar-list .navbar-link {
    font-family: var(--content-body);
    font-weight: 600;
    color: var(--content-charcoal);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 18px 18px;
    transition: color 0.2s ease;
}

.navbar-list .navbar-link:hover,
.navbar-list .navbar-link.active {
    color: var(--content-flame);
}

.navbar-list .navbar-item.dropdown:hover .navbar-link {
    color: var(--content-flame);
}

.navbar-list .navbar-link.dropdown-arrow::after {
    border-color: var(--content-charcoal);
}

.navbar-list .navbar-item.dropdown:hover .dropdown-arrow::after {
    border-color: var(--content-flame);
}

/* Dropdown menus */
.navbar-item.dropdown {
    position: relative;
}

.dropdown-position-list {
    background: var(--content-white);
    border: 1px solid var(--content-border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 10px 0;
    min-width: 200px;
    position: absolute;
    z-index: 9999 !important;
}

.dropdown-position-list li a {
    font-family: var(--content-body);
    font-size: 14px;
    color: var(--content-charcoal);
    padding: 10px 20px;
    display: block;
    transition: all 0.2s ease;
}

.dropdown-position-list li a:hover {
    background: var(--content-light);
    color: var(--content-flame);
}

/* Header cart button */
.header-cart {
    background: var(--content-white) !important;
    border: 2px solid var(--content-border) !important;
    border-radius: 50px;
    padding: 8px 18px 8px 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.header-cart:hover {
    border-color: var(--content-flame) !important;
}

.header-cart i {
    width: 38px;
    height: 38px;
    background: var(--content-flame);
    color: var(--content-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.header-cart .cart-text {
    font-family: var(--content-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--content-stone);
}

.header-cart .cart-text small {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: var(--content-black);
}

/* Header Subscribe Button */
.header-widget-subscribe {
    background: var(--content-flame) !important;
    border: 2px solid var(--content-flame) !important;
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-decoration: none !important;
    color: var(--content-white) !important;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.header-widget-subscribe:hover {
    background: var(--content-flame-dark) !important;
    border-color: var(--content-flame-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(240, 90, 40, 0.3);
    color: var(--content-white) !important;
}

.header-widget-subscribe i {
    font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .header-widget-subscribe span {
        display: none;
    }

    .header-widget-subscribe {
        padding: 8px;
        min-width: 42px;
        justify-content: center;
    }

    .header-widget-subscribe i {
        font-size: 16px;
    }
}

/* Footer */
.footer-part {
    background: var(--content-black);
    padding-top: 80px;
    padding-bottom: 30px;
}

.footer-title {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--content-flame);
}

.footer-widget p,
.footer-desc {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--content-body);
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.footer-contact li i {
    color: var(--content-flame);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 3px;
}

.footer-contact li p,
.footer-contact li span {
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--content-body);
    font-size: 15px;
    line-height: 1.6;
}

/* Footer Social */
.footer-social {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
}

.footer-social li a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--content-white);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.footer-social li a:hover {
    background: var(--content-flame);
    transform: translateY(-3px);
}

/* Footer Links */
.footer-links {
    display: flex;
    gap: 40px;
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links ul li a {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--content-body);
    font-size: 15px;
    transition: all 0.2s ease;
    position: relative;
}

.footer-links ul li a:hover {
    color: var(--content-flame);
    padding-left: 5px;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    margin-top: 50px;
}

.footer-copytext {
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--content-body);
    font-size: 14px;
}

.footer-copytext a {
    color: var(--content-flame);
    font-weight: 500;
}

.footer-copytext a:hover {
    color: var(--content-flame-light);
}

/* Newsletter Form Styling */
.news-form {
    display: flex;
    gap: 10px;
    max-width: 450px;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.news-form input {
    flex: 1;
    padding: 14px 18px;
    border: none;
    border-radius: 6px;
    background: var(--content-white);
    color: var(--content-charcoal);
    font-family: var(--content-body);
    font-size: 15px;
    min-width: 0;
}

.news-form input::placeholder {
    color: var(--content-pebble);
}

.news-form input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--content-flame);
}

.news-form button {
    background: var(--content-flame);
    color: var(--content-white);
    padding: 14px 22px;
    border: none !important;
    border-radius: 6px;
    font-family: var(--content-body);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    outline: none !important;
    box-shadow: none !important;
}

.news-form button:hover {
    background: var(--content-flame-light);
}

.news-form button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.news-form button i {
    font-size: 1rem;
}

.news-form button span {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: inline !important;
}

.news-form-validation {
    margin-top: 8px;
}

.news-form-validation .field-validation-error {
    color: var(--content-flame-light);
    font-size: 13px;
}

/*========================================
    PAGE-SPECIFIC OVERRIDES (about.css, etc.)
=========================================*/

/* Card steps - used on ReferAFriend, HowItWorks, etc. */
.card-step {
    background: var(--content-white) !important;
    border: 2px solid var(--content-border) !important;
    border-left: 5px solid var(--content-flame) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease;
}

.card-step:hover {
    border-color: var(--content-flame) !important;
    box-shadow: 0 8px 25px rgba(240, 90, 40, 0.12);
    transform: translateY(-3px);
}

.card-step h3 {
    font-family: var(--content-heading) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black) !important;
}

.card-step p {
    font-family: var(--content-body);
    color: var(--content-slate);
}

.card-step ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.card-step ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    color: var(--content-slate);
}

.card-step ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: var(--content-teal);
    border-radius: 50%;
}

/* Override Bootstrap's .text-success for arrows - use brand orange */
.text-success {
    color: var(--content-flame) !important;
}

/* Section headings used on various pages */
.section-heading {
    background: var(--content-black);
    padding: 60px 0;
    border-radius: 12px;
    margin-bottom: 40px;
}

.section-heading h2 {
    font-family: var(--content-heading) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--content-white) !important;
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: 15px;
}

.section-heading p,
.section-heading .lead {
    font-family: var(--content-body);
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1.1rem;
}

.about-company h2 {
    font-family: var(--content-heading) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--content-black) !important;
}

/* Cycle Section - AutoRenew page */
.cycle-section {
    background: var(--content-black);
    padding: 70px 0;
    margin: 40px 0;
    position: relative;
    overflow: hidden;
}

.cycle-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(240, 90, 40, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(131, 173, 149, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.cycle-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.cycle-header h3 {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--content-white);
    margin-bottom: 10px;
}

.cycle-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
}

.cycle-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

/* You Create section */
.cycle-setup {
    flex: 0 0 auto;
}

.cycle-label {
    font-family: var(--content-heading);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--content-flame);
    margin-bottom: 15px;
    text-align: center;
}

.cycle-weeks {
    display: flex;
    gap: 15px;
}

.cycle-week {
    background: var(--content-white);
    border-radius: 16px;
    padding: 20px;
    width: 160px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cycle-week:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.cycle-week.week-a {
    border-top: 4px solid var(--content-flame);
}

.cycle-week.week-b {
    border-top: 4px solid var(--content-teal);
}

.cycle-week-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.week-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--content-heading);
    font-size: 1.1rem;
    color: var(--content-white);
}

.week-a .week-badge {
    background: var(--content-flame);
}

.week-b .week-badge {
    background: var(--content-teal);
}

.week-name {
    font-family: var(--content-heading);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black);
}

.cycle-week-meals {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.meal-day {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--content-light);
    border-radius: 6px;
    font-size: 0.85rem;
}

.meal-day span {
    color: var(--content-slate);
}

.meal-day strong {
    color: var(--content-black);
    font-size: 1rem;
}

.cycle-week-total {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--content-slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Repeat indicator */
.cycle-repeat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.repeat-arrow {
    width: 50px;
    height: 50px;
    background: var(--content-flame);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(240, 90, 40, 0.4);
}

.repeat-arrow i {
    color: var(--content-white);
    font-size: 1.25rem;
}

.repeat-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.repeat-badge i {
    color: var(--content-flame);
    font-size: 0.9rem;
}

.repeat-badge span {
    font-family: var(--content-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* You Get section */
.cycle-result {
    flex: 0 0 auto;
}

.cycle-sequence {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sequence-item {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--content-heading);
    font-size: 1.1rem;
    color: var(--content-white);
    transition: transform 0.2s ease;
}

.sequence-item:hover {
    transform: scale(1.1);
}

.sequence-item.pattern-a {
    background: var(--content-flame);
}

.sequence-item.pattern-b {
    background: var(--content-teal);
}

.sequence-dots {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
}

.cycle-sequence-labels {
    display: flex;
    gap: 8px;
}

.cycle-sequence-labels span {
    width: 44px;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Footer note */
.cycle-footer {
    text-align: center;
    margin-top: 50px;
    position: relative;
}

.cycle-footer p {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 25px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.cycle-footer i {
    color: var(--content-flame);
}

/* Mobile cycle */
@media (max-width: 992px) {
    .cycle-visual {
        flex-direction: column;
        gap: 30px;
    }

    .cycle-weeks {
        flex-direction: row;
        justify-content: center;
    }

    .cycle-week {
        width: 140px;
        padding: 15px;
    }

    .cycle-repeat {
        flex-direction: row;
    }

    .repeat-arrow {
        transform: rotate(90deg);
    }

    .cycle-sequence {
        flex-wrap: wrap;
        justify-content: center;
    }

    .cycle-sequence-labels {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .cycle-section {
        padding: 50px 15px;
    }

    .cycle-weeks {
        flex-direction: row;
        gap: 10px;
    }

    .cycle-week {
        width: 45%;
        min-width: 130px;
        padding: 12px;
    }

    .week-badge {
        width: 26px;
        height: 26px;
        font-size: 0.9rem;
    }

    .week-name {
        font-size: 0.85rem;
    }

    .meal-day {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    .meal-day strong {
        font-size: 0.85rem;
    }

    .cycle-week-total {
        font-size: 0.7rem;
    }

    .sequence-item {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .cycle-sequence-labels span {
        width: 32px;
        font-size: 0.55rem;
    }

    .cycle-footer p {
        flex-direction: column;
        text-align: center;
        gap: 5px;
        padding: 12px 20px;
        font-size: 0.85rem;
    }

    .repeat-arrow {
        width: 40px;
        height: 40px;
    }

    .repeat-badge {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

/* Rewards Calculator Section */
.rewards-calc-section {
    background: var(--content-black);
    padding: 80px 0;
    margin: 0;
}

/* Multiplier Scale - Horizontal Gauge */
.multiplier-scale {
    max-width: 800px;
    margin: 0 auto 60px;
    position: relative;
}

.scale-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 0 10px;
}

.scale-label {
    font-family: var(--content-heading);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
}

.scale-track {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.scale-segment {
    flex: 1;
    padding: 20px 15px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    cursor: default;
}

.scale-segment::after {
    content: attr(data-mult);
    display: block;
    font-family: var(--content-heading);
    font-size: 2rem;
    margin-top: 8px;
    transition: transform 0.3s ease;
}

.scale-segment:hover {
    background: rgba(255, 255, 255, 0.08);
}

.scale-segment:hover::after {
    transform: scale(1.15);
}

.seg-range {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.scale-segment.seg-1 { background: rgba(255, 255, 255, 0.02); }
.scale-segment.seg-1::after { color: rgba(255, 255, 255, 0.4); }

.scale-segment.seg-2 { background: rgba(240, 90, 40, 0.1); }
.scale-segment.seg-2::after { color: rgba(240, 90, 40, 0.6); }

.scale-segment.seg-3 { background: rgba(240, 90, 40, 0.2); }
.scale-segment.seg-3::after { color: rgba(240, 90, 40, 0.8); }

.scale-segment.seg-4 { background: rgba(240, 90, 40, 0.35); }
.scale-segment.seg-4::after { color: var(--content-flame); }

.scale-caption {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Showdown Comparison */
.rewards-showdown {
    max-width: 700px;
    margin: 0 auto 60px;
}

.showdown-header {
    text-align: center;
    margin-bottom: 30px;
}

.showdown-amount {
    display: block;
    font-family: var(--content-heading);
    font-size: clamp(3rem, 8vw, 5rem);
    color: var(--content-white);
    line-height: 1;
    letter-spacing: -0.02em;
}

.showdown-question {
    display: block;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 10px;
}

.showdown-versus {
    display: flex;
    align-items: stretch;
    gap: 20px;
    justify-content: center;
}

.showdown-option {
    flex: 1;
    max-width: 260px;
    background: var(--content-white);
    border-radius: 20px;
    padding: 30px 25px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showdown-option:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.showdown-option.winner {
    border: 3px solid var(--content-teal);
}

.showdown-option.loser {
    border: 3px solid #dc3545;
    opacity: 0.85;
}

.option-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.showdown-option.winner .option-badge {
    background: var(--content-teal);
    color: var(--content-white);
}

.showdown-option.loser .option-badge {
    background: #dc3545;
    color: var(--content-white);
}

.option-strategy {
    font-family: var(--content-heading);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--content-slate);
    margin: 15px 0 20px;
}

.option-math {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.math-base {
    font-size: 0.85rem;
    color: var(--content-slate);
}

.math-times {
    color: var(--content-slate);
}

.math-mult {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    color: var(--content-flame);
}

.option-result {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.result-num {
    font-family: var(--content-heading);
    font-size: 3.5rem;
    line-height: 1;
    letter-spacing: -0.02em;
}

.showdown-option.winner .result-num {
    color: var(--content-teal);
}

.showdown-option.loser .result-num {
    color: #dc3545;
}

.result-unit {
    font-size: 1rem;
    color: var(--content-slate);
    text-transform: uppercase;
}

.showdown-vs {
    display: flex;
    align-items: center;
    justify-content: center;
}

.showdown-vs span {
    font-family: var(--content-heading);
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Insight Callout */
.showdown-insight {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    background: rgba(131, 173, 149, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(131, 173, 149, 0.2);
}

.insight-diff {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--content-teal);
    color: var(--content-white);
    padding: 8px 20px;
    border-radius: 25px;
    margin-bottom: 12px;
}

.diff-arrow {
    font-size: 0.9rem;
}

.diff-amount {
    font-family: var(--content-heading);
    font-size: 1.2rem;
}

.showdown-insight p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 0.95rem;
}

/* Redemption Equation */
.rewards-redeem {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    padding-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.redeem-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.redeem-step {
    text-align: center;
}

.step-value {
    display: block;
    font-family: var(--content-heading);
    font-size: 3rem;
    color: var(--content-white);
    line-height: 1;
}

.redeem-step.highlight .step-value {
    color: var(--content-flame);
}

.step-label {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 5px;
}

.redeem-equals {
    font-family: var(--content-heading);
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
}

.redeem-note {
    margin-top: 20px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Weekly Accumulation Demo */
.rewards-accumulate {
    max-width: 700px;
    margin: 0 auto 60px;
    position: relative;
}

.accumulate-header {
    text-align: center;
    margin-bottom: 35px;
}

.accumulate-title {
    display: block;
    font-family: var(--content-heading);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.accumulate-sub {
    display: block;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
}

.accumulate-demo {
    background: var(--content-white);
    border-radius: 20px;
    padding: 35px 30px;
    position: relative;
}

/* Delivery items row */
.demo-deliveries {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.delivery-item {
    background: var(--content-light);
    border-radius: 12px;
    padding: 18px 25px;
    text-align: center;
    min-width: 90px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.delivery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.delivery-day {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--content-slate);
    margin-bottom: 6px;
}

.delivery-amount {
    display: block;
    font-family: var(--content-heading);
    font-size: 1.75rem;
    color: var(--content-black);
    line-height: 1;
}

.delivery-plus {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    color: var(--content-pebble);
}

/* Arrow pointing down */
.demo-arrow {
    text-align: center;
    padding: 20px 0;
}

.demo-arrow i {
    font-size: 1.5rem;
    color: var(--content-flame);
    animation: pulse-arrow 1.5s ease-in-out infinite;
}

@keyframes pulse-arrow {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(6px); opacity: 0.7; }
}

/* Result section */
.demo-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(240, 90, 40, 0.08) 0%, rgba(131, 173, 149, 0.08) 100%);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid var(--content-border);
}

.result-weekly {
    text-align: center;
}

.weekly-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--content-slate);
    margin-bottom: 5px;
}

.weekly-amount {
    display: block;
    font-family: var(--content-heading);
    font-size: 2.25rem;
    color: var(--content-black);
    line-height: 1;
}

.result-unlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 15px;
}

.unlock-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--content-slate);
    margin-bottom: 5px;
}

.unlock-mult {
    font-family: var(--content-heading);
    font-size: 2.5rem;
    color: var(--content-flame);
    line-height: 1;
}

.unlock-rate {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--content-slate);
    margin-top: 2px;
}

.result-earn {
    text-align: center;
    background: var(--content-teal);
    padding: 15px 25px;
    border-radius: 12px;
}

.earn-calc {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 3px;
}

.earn-total {
    display: block;
    font-family: var(--content-heading);
    font-size: 1.75rem;
    color: var(--content-white);
    line-height: 1;
}

/* Insight callout */
.accumulate-insight {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    padding: 20px 25px;
    background: rgba(131, 173, 149, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(131, 173, 149, 0.25);
}

.accumulate-insight i {
    font-size: 1.5rem;
    color: var(--content-teal);
    flex-shrink: 0;
}

.accumulate-insight p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.accumulate-insight p strong {
    color: var(--content-white);
}

/* Mobile Rewards */
@media (max-width: 768px) {
    .rewards-calc-section {
        padding: 60px 20px;
    }

    .scale-track {
        flex-direction: column;
    }

    .scale-segment {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .scale-segment::after {
        margin-top: 0;
        font-size: 1.5rem;
    }

    .scale-segment:last-child {
        border-bottom: none;
    }

    /* Accumulation demo mobile */
    .accumulate-demo {
        padding: 25px 20px;
    }

    .demo-deliveries {
        gap: 10px;
    }

    .delivery-item {
        padding: 14px 18px;
        min-width: 75px;
    }

    .delivery-amount {
        font-size: 1.4rem;
    }

    .delivery-plus {
        font-size: 1.2rem;
    }

    .demo-result {
        gap: 15px;
        padding: 20px 15px;
    }

    .weekly-amount {
        font-size: 1.75rem;
    }

    .unlock-mult {
        font-size: 2rem;
    }

    .result-earn {
        padding: 12px 18px;
    }

    .earn-total {
        font-size: 1.4rem;
    }

    .accumulate-insight {
        flex-direction: column;
        text-align: center;
        padding: 18px 20px;
    }

    .showdown-versus {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .showdown-option {
        max-width: 280px;
        width: 100%;
    }

    .showdown-vs {
        transform: rotate(90deg);
    }

    .showdown-amount {
        font-size: 3.5rem;
    }

    .result-num {
        font-size: 2.8rem;
    }

    .redeem-equation {
        gap: 15px;
    }

    .step-value {
        font-size: 2.2rem;
    }

    .redeem-equals {
        font-size: 1.5rem;
    }
}

/* Dark CTA sections */
.cta-dark,
[style*="background-color: #000"] {
    background: var(--content-black) !important;
}

.cta-dark h4,
.cta-dark p {
    font-family: var(--content-body);
}

/* Button outline light - used on dark backgrounds */
.btn-outline-light {
    border: 2px solid var(--content-white) !important;
    color: var(--content-white) !important;
    background: transparent !important;
    font-family: var(--content-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 12px 28px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background: var(--content-flame) !important;
    border-color: var(--content-flame) !important;
    color: var(--content-white) !important;
}

/* Inner sections and banners */
.inner-section,
.about-company {
    font-family: var(--content-body);
}

.inner-section h2,
.inner-section h3,
.inner-section h4 {
    font-family: var(--content-heading);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black);
}

/* Icons in card steps */
.card-step .text-dark,
.card-step i.text-dark {
    color: var(--content-flame) !important;
}

/* About content styling */
.about-content h2 {
    font-family: var(--content-heading) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.about-content p {
    font-family: var(--content-body);
    color: var(--content-slate);
}

/* Choose cards */
.choose-card {
    border: 2px solid var(--content-border);
    border-radius: 12px;
    background: var(--content-white);
    transition: all 0.3s ease;
}

.choose-card:hover {
    border-color: var(--content-flame);
    box-shadow: 0 8px 25px rgba(240, 90, 40, 0.12);
}

/* Card hover effect */
.card-hover:hover {
    border-color: var(--content-flame) !important;
    box-shadow: 0 8px 25px rgba(240, 90, 40, 0.12) !important;
}

/* Mobile nav sidebar */
.nav-sidebar {
    background: var(--content-white) !important;
    z-index: 99999 !important;
}

.nav-sidebar .nav-header {
    background: var(--content-white);
    padding: 20px;
    border-bottom: 1px solid var(--content-border);
}

.nav-sidebar .nav-close {
    color: var(--content-charcoal);
    font-size: 1.25rem;
}

.nav-sidebar .nav-close:hover {
    color: var(--content-flame);
}

.nav-sidebar .nav-content {
    background: var(--content-white);
}


/* Product cards on homepage - ensure consistency */
.feature-card {
    border: 2px solid var(--content-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: var(--content-white);
}

.feature-card:hover {
    border-color: var(--content-flame);
    box-shadow: 0 12px 30px rgba(240, 90, 40, 0.12);
    transform: translateY(-4px);
}

.feature-content {
    padding: 20px;
}

.feature-name {
    font-family: var(--content-heading);
    font-size: 1.25rem;
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.feature-price {
    color: var(--content-flame);
    font-family: var(--content-body);
    font-weight: 600;
}

.product-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--content-black);
    color: var(--content-white);
    padding: 10px 18px;
    border-radius: 6px;
    font-family: var(--content-body);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.product-add:hover {
    background: var(--content-flame);
    color: var(--content-white);
}

/* Labels on product cards */
.label-text {
    font-family: var(--content-body);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
}

.label-text.order {
    background: var(--content-flame);
    color: var(--content-white);
}

.label-text.rate {
    background: var(--content-teal);
    color: var(--content-white);
}

.label-text.off {
    background: var(--content-black);
    color: var(--content-white);
}

/* Mobile side nav list */
.nav-sidebar .nav-list {
    padding: 0;
    margin: 0;
    list-style: none;
    background: var(--content-white);
}

.nav-sidebar .nav-list li {
    border-bottom: 1px solid var(--content-border);
}

.nav-sidebar .nav-list .nav-link {
    display: block;
    padding: 15px 25px;
    color: var(--content-charcoal);
    font-family: var(--content-body);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-sidebar .nav-list .nav-link:hover,
.nav-sidebar .nav-list .nav-link.active {
    background: var(--content-light);
    color: var(--content-flame);
}

.nav-sidebar .nav-list .dropdown-link {
    position: relative;
}

.nav-sidebar .nav-list .dropdown-list {
    background: var(--content-light);
    padding: 0;
    list-style: none;
    display: none;
}

.nav-sidebar .nav-list .dropdown-list.active,
.nav-sidebar .nav-list li:hover .dropdown-list {
    display: block;
}

.nav-sidebar .nav-list .dropdown-list li {
    border-bottom: 1px solid var(--content-border);
}

.nav-sidebar .nav-list .dropdown-list li:last-child {
    border-bottom: none;
}

.nav-sidebar .nav-list .dropdown-list li a {
    display: block;
    padding: 12px 25px 12px 40px;
    color: var(--content-slate);
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--content-light);
}

.nav-sidebar .nav-list .dropdown-list li a:hover {
    color: var(--content-flame);
    background: var(--content-white);
}

/* Nav profile section */
.nav-sidebar .nav-profile {
    padding: 30px 25px;
    text-align: center;
    border-bottom: 1px solid var(--content-border);
    background: var(--content-white);
}

.nav-sidebar .nav-profile .nav-user {
    display: inline-block;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

.nav-sidebar .nav-profile .nav-user img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: none !important;
    margin-bottom: 15px;
    box-shadow: none !important;
}

.nav-sidebar .nav-profile .nav-name a {
    color: var(--content-charcoal);
    font-family: var(--content-heading);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.nav-sidebar .nav-profile .nav-name a:hover {
    color: var(--content-flame);
}

/* Backdrop overlay */
.backdrop {
    z-index: 99998 !important;
}

/* Cart sidebar styling */
.cart-sidebar {
    background: var(--content-white);
    z-index: 99999 !important;
}

.cart-sidebar .cart-header {
    background: var(--content-black) !important;
    color: var(--content-white) !important;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-sidebar .cart-header .cart-total {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--content-white) !important;
}

.cart-sidebar .cart-header .cart-total i {
    color: var(--content-flame);
    font-size: 1.25rem;
}

.cart-sidebar .cart-header .cart-total span {
    font-family: var(--content-heading);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--content-white) !important;
}

.cart-sidebar .cart-close {
    color: var(--content-white) !important;
    font-size: 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
}

.cart-sidebar .cart-close:hover {
    color: var(--content-flame) !important;
}

/* Cart list styling */
.cart-sidebar .cart-list {
    background: var(--content-white);
}

.cart-sidebar .cart-date-toggle {
    background: var(--content-light);
    color: var(--content-charcoal);
    padding: 12px 20px;
    font-family: var(--content-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-sidebar .cart-date-toggle i {
    color: var(--content-flame);
}

/* Cart footer */
.cart-sidebar .cart-footer {
    background: var(--content-white);
    border-top: 1px solid var(--content-border);
}

/* Header login/register links */
.header-form .navbar-list .navbar-link {
    color: var(--content-charcoal);
    font-family: var(--content-body);
    font-weight: 500;
    font-size: 14px;
    padding: 8px 16px;
    transition: color 0.2s ease;
}

.header-form .navbar-list .navbar-link:hover {
    color: var(--content-flame);
}

/* Responsive header/footer adjustments */
@media (max-width: 991px) {
    .footer-links {
        flex-direction: column;
        gap: 0;
    }

    .footer-links ul {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .footer-part {
        padding-top: 50px;
    }

    .footer-title {
        font-size: 1.25rem;
    }

    .news-form {
        flex-direction: column;
        gap: 10px;
    }

    .news-form input {
        padding: 14px 18px;
    }

    .news-form button {
        justify-content: center;
    }
}

/*========================================
    REWARDS PAGE - REDESIGNED SECTIONS
=========================================*/

/* Section Eyebrow Labels */
.section-eyebrow {
    display: inline-block;
    font-family: var(--content-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--content-flame);
    margin-bottom: 15px;
    position: relative;
    padding-left: 35px;
}

.section-eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 2px;
    background: var(--content-flame);
}

.section-eyebrow.light {
    color: var(--content-flame-light);
}

.section-eyebrow.light::before {
    background: var(--content-flame-light);
}

/* ===== THE BASICS SECTION (Light) ===== */
.rewards-basics {
    padding: 100px 0;
    background: var(--content-white);
}

.basics-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.basics-headline {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 20px;
}

.basics-headline span {
    color: var(--content-flame);
}

.basics-lead {
    font-size: 1.15rem;
    color: var(--content-slate);
    line-height: 1.7;
}

/* Basics Cards */
.basics-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.basics-card {
    background: var(--content-white);
    border: 2px solid var(--content-border);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden;
}

.basics-card:hover {
    border-color: var(--content-flame);
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(240, 90, 40, 0.12);
}

.basics-card-icon {
    width: 70px;
    height: 70px;
    background: var(--content-light);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.75rem;
    color: var(--content-flame);
    transition: all 0.3s ease;
}

.basics-card:hover .basics-card-icon {
    background: var(--content-black);
    transform: scale(1.1);
}

.basics-card-number {
    position: absolute;
    top: 20px;
    right: 25px;
    font-family: var(--content-heading);
    font-size: 4rem;
    color: rgba(0, 0, 0, 0.12);
    line-height: 1;
    pointer-events: none;
}

.basics-card h4 {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black);
    margin-bottom: 12px;
}

.basics-card p {
    color: var(--content-slate);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* ===== CALC SECTION HEADER ===== */
.calc-header {
    text-align: center;
    margin-bottom: 50px;
}

.calc-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 15px;
}

.calc-lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 500px;
    margin: 0 auto;
}

/* ===== REDEMPTION SECTION (Light) ===== */
.rewards-redemption {
    padding: 100px 0;
    background: var(--content-white);
}

.redemption-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.redemption-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-bottom: 20px;
}

.redemption-headline span {
    color: var(--content-teal);
}

.redemption-lead {
    font-size: 1.1rem;
    color: var(--content-slate);
    line-height: 1.7;
    margin-bottom: 30px;
}

.redemption-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.redemption-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--content-charcoal);
}

.redemption-feature i {
    color: var(--content-teal);
    font-size: 1.1rem;
}

/* Conversion Card Visual */
.redemption-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.conversion-card {
    display: flex;
    align-items: center;
    gap: 30px;
    background: var(--content-white);
    border: 2px solid var(--content-border);
    border-radius: 24px;
    padding: 40px 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.conversion-card:hover {
    border-color: var(--content-teal);
    transform: translateY(-5px);
    box-shadow: 0 25px 70px rgba(131, 173, 149, 0.15);
}

.conversion-from,
.conversion-to {
    text-align: center;
}

.conversion-value {
    display: block;
    font-family: var(--content-heading);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--content-black);
}

.conversion-to .conversion-value {
    color: var(--content-teal);
}

.conversion-unit {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--content-slate);
    margin-top: 8px;
}

.conversion-arrow {
    width: 50px;
    height: 50px;
    background: var(--content-flame);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--content-white);
    font-size: 1.25rem;
    box-shadow: 0 8px 25px rgba(240, 90, 40, 0.3);
}

.conversion-note {
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--content-stone);
    text-align: center;
}

/* ===== COUNTING SECTION ===== */
.rewards-counting {
    padding: 100px 0;
    background: var(--content-white);
}

.rewards-counting.dark {
    background: var(--content-black);
}

.rewards-counting.dark .counting-headline {
    color: var(--content-white);
}

.counting-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
    position: relative;
}

.counting-headline {
    font-family: var(--content-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.counting-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* Order Example */
.counting-example {
    background: var(--content-white);
    border: 2px solid var(--content-border);
    border-radius: 20px;
    padding: 35px;
    text-align: center;
}

.order-placed {
    margin-bottom: 25px;
}

.order-label {
    display: block;
    font-size: 0.85rem;
    color: var(--content-slate);
    margin-bottom: 15px;
}

.order-days {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.order-day {
    background: var(--content-black);
    color: var(--content-white);
    padding: 12px 20px;
    border-radius: 8px;
    font-family: var(--content-heading);
    font-size: 1rem;
    text-transform: uppercase;
}

.counting-arrow {
    padding: 15px 0;
}

.counting-arrow i {
    font-size: 1.5rem;
    color: var(--content-flame);
}

.order-split {
    background: var(--content-light);
    border-radius: 16px;
    padding: 25px;
}

.split-label {
    display: block;
    font-size: 0.85rem;
    color: var(--content-slate);
    margin-bottom: 15px;
}

.split-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.split-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--content-white);
    padding: 12px 18px;
    border-radius: 8px;
    border: 1px solid var(--content-border);
}

.split-day {
    font-weight: 600;
    color: var(--content-charcoal);
}

.split-amount {
    font-family: var(--content-heading);
    font-size: 1.25rem;
    color: var(--content-black);
}

/* Explanation Cards */
.counting-explanation {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.explanation-card {
    background: var(--content-white);
    border: 2px solid var(--content-border);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.explanation-card:hover {
    border-color: var(--content-flame);
    box-shadow: 0 10px 30px rgba(240, 90, 40, 0.08);
}

.explanation-icon {
    width: 50px;
    height: 50px;
    background: var(--content-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--content-flame);
    flex-shrink: 0;
}

.explanation-card.auto-renew .explanation-icon {
    background: rgba(131, 173, 149, 0.15);
    color: var(--content-teal);
}

.explanation-card h4 {
    font-family: var(--content-heading);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black);
    margin-bottom: 8px;
}

.explanation-card p {
    color: var(--content-slate);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Counting Insight */
.counting-insight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 50px;
    padding: 20px 30px;
    background: rgba(240, 90, 40, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(240, 90, 40, 0.1);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.counting-insight i {
    font-size: 1.5rem;
    color: var(--content-flame);
    flex-shrink: 0;
}

.counting-insight p {
    color: var(--content-charcoal);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.counting-insight.dark {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.counting-insight.dark p {
    color: rgba(255, 255, 255, 0.8);
}

/* ===== REFERRAL SECTION (Split) ===== */
.rewards-referral {
    position: relative;
}

.referral-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
}

.referral-left {
    background: var(--content-black);
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.referral-content {
    max-width: 400px;
    position: relative;
}

.referral-headline {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 20px;
}

.referral-lead {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 35px;
}

.referral-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--content-flame);
    color: var(--content-white);
    padding: 16px 30px;
    border-radius: 10px;
    font-family: var(--content-body);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.3s ease;
}

.referral-btn:hover {
    background: var(--content-flame-light);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(240, 90, 40, 0.35);
    color: var(--content-white);
}

.referral-btn i {
    transition: transform 0.3s ease;
}

.referral-btn:hover i {
    transform: translateX(5px);
}

/* Referral Right - Light side */
.referral-right {
    background: var(--content-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.referral-rewards {
    display: flex;
    align-items: center;
    gap: 25px;
    position: relative;
}

.referral-reward {
    background: var(--content-white);
    border-radius: 20px;
    padding: 35px 40px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.referral-reward:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.referral-reward.you {
    border-top: 4px solid var(--content-flame);
}

.referral-reward.friend {
    border-top: 4px solid var(--content-teal);
}

.reward-for {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--content-slate);
    margin-bottom: 10px;
}

.reward-amount {
    display: block;
    font-family: var(--content-heading);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--content-black);
}

.referral-reward.you .reward-amount {
    color: var(--content-flame);
}

.referral-reward.friend .reward-amount {
    color: var(--content-teal);
}

.reward-unit {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--content-slate);
    margin-top: 8px;
}

.referral-plus {
    font-family: var(--content-heading);
    font-size: 2rem;
    color: var(--content-pebble);
}

/* ===== FINAL CTA SECTION (White) ===== */
.rewards-final {
    background: var(--content-white);
    padding: 100px 0;
    text-align: center;
}

.final-content {
    max-width: 600px;
    margin: 0 auto;
}

.rewards-final h2 {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 20px;
}

.rewards-final p {
    font-size: 1.15rem;
    color: var(--content-slate);
    margin-bottom: 40px;
    line-height: 1.7;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--content-flame);
    color: var(--content-white);
    padding: 18px 40px;
    border-radius: 10px;
    font-family: var(--content-body);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background: var(--content-flame-light);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(240, 90, 40, 0.4);
    color: var(--content-white);
}

.cta-btn.primary {
    background: var(--content-black);
}

.cta-btn.primary:hover {
    background: var(--content-flame);
}

/* Referral Mention */
.referral-mention {
    margin-top: 35px;
    padding-top: 35px;
    border-top: 1px solid var(--content-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.referral-mention span {
    color: var(--content-slate);
    font-size: 0.95rem;
}

.referral-mention a {
    color: var(--content-flame);
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.referral-mention a:hover {
    color: var(--content-flame-dark);
}

.referral-mention a i {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.referral-mention a:hover i {
    transform: translateX(3px);
}

/* ===== REWARDS PAGE RESPONSIVE ===== */
@media (max-width: 991px) {
    .rewards-basics {
        padding: 80px 0;
    }

    .basics-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .redemption-layout {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .redemption-features {
        justify-content: center;
    }

    .counting-visual {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .rewards-basics {
        padding: 60px 0;
    }

    .basics-intro {
        margin-bottom: 40px;
    }

    .basics-card {
        padding: 30px 25px;
    }

    .basics-card-number {
        font-size: 3rem;
    }

    .rewards-redemption {
        padding: 60px 0;
    }

    .conversion-card {
        padding: 30px 35px;
        gap: 20px;
    }

    .conversion-value {
        font-size: 2.5rem;
    }

    .conversion-arrow {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .rewards-counting {
        padding: 60px 0;
    }

    .counting-example {
        padding: 25px;
    }

    .order-days {
        flex-wrap: wrap;
    }

    .order-day {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .rewards-final {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .section-eyebrow {
        padding-left: 0;
    }

    .section-eyebrow::before {
        display: none;
    }

    .basics-headline {
        font-size: 2.25rem;
    }

    .conversion-card {
        flex-direction: column;
        gap: 25px;
        padding: 30px 25px;
    }

    .conversion-arrow {
        transform: rotate(90deg);
    }

    .redemption-features {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .counting-insight {
        flex-direction: column;
        text-align: center;
    }

    .explanation-card {
        flex-direction: column;
        text-align: center;
    }

    .explanation-icon {
        margin: 0 auto;
    }
}

/*========================================
    HOW IT WORKS PAGE
=========================================*/

/* Process Section - White */
.hiw-process {
    padding: 100px 0;
    background: var(--content-white);
}

.process-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px;
}

.process-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0;
}

.process-headline span {
    color: var(--content-flame);
}

/* Process Steps */
.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.process-step {
    text-align: center;
    position: relative;
}

.process-step-number {
    position: absolute;
    top: -10px;
    right: 20px;
    font-family: var(--content-heading);
    font-size: 5rem;
    color: rgba(0, 0, 0, 0.12);
    line-height: 1;
    pointer-events: none;
}

.process-step-icon {
    width: 80px;
    height: 80px;
    background: var(--content-black);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2rem;
    color: var(--content-flame);
    transition: transform 0.3s ease;
}

.process-step:hover .process-step-icon {
    transform: scale(1.1);
}

.process-step h3 {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black);
    margin-bottom: 12px;
}

.process-step p {
    color: var(--content-slate);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Schedule Section - Black */
.hiw-schedule {
    padding: 100px 0;
    background: var(--content-black);
}

.schedule-header {
    text-align: center;
    margin-bottom: 50px;
}

.schedule-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 15px;
}

.schedule-lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 500px;
    margin: 0 auto;
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 900px;
    margin: 0 auto;
}

.schedule-card {
    background: var(--content-white);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
}

.schedule-day {
    font-family: var(--content-heading);
    font-size: 1.75rem;
    text-transform: uppercase;
    color: var(--content-black);
    margin-bottom: 5px;
}

.schedule-time {
    font-size: 0.9rem;
    color: var(--content-flame);
    font-weight: 600;
    margin-bottom: 20px;
}

.schedule-covers {
    background: var(--content-light);
    border-radius: 10px;
    padding: 15px;
}

.covers-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--content-slate);
    margin-bottom: 8px;
}

.covers-days {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.covers-days span {
    background: var(--content-black);
    color: var(--content-white);
    padding: 6px 14px;
    border-radius: 6px;
    font-family: var(--content-heading);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.schedule-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.schedule-note i {
    color: var(--content-flame);
}

/* Auto-Renew Mention Section - White */
.hiw-autorenew {
    padding: 100px 0;
    background: var(--content-white);
}

.autorenew-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.autorenew-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 20px;
}

.autorenew-text p {
    color: var(--content-slate);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 25px;
}

.autorenew-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--content-flame);
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.autorenew-link:hover {
    color: var(--content-flame-dark);
}

.autorenew-link i {
    transition: transform 0.2s ease;
}

.autorenew-link:hover i {
    transform: translateX(5px);
}

.autorenew-cycle {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.cycle-item {
    background: var(--content-black);
    color: var(--content-white);
    padding: 15px 25px;
    border-radius: 10px;
    font-family: var(--content-heading);
    font-size: 1rem;
    text-transform: uppercase;
}

.cycle-item.faded {
    opacity: 0.4;
}

.cycle-arrow {
    color: var(--content-flame);
    font-size: 1.25rem;
}

.cycle-dots {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    color: var(--content-pebble);
}

/* HIW CTA - Black */
.hiw-cta {
    padding: 100px 0;
    background: var(--content-black);
    text-align: center;
}

.hiw-cta h2 {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 15px;
}

.hiw-cta p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 35px;
}

/* HIW Responsive */
@media (max-width: 991px) {
    .process-steps {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .schedule-grid {
        grid-template-columns: 1fr;
        max-width: 350px;
    }

    .autorenew-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .hiw-process,
    .hiw-schedule,
    .hiw-autorenew,
    .hiw-cta {
        padding: 60px 0;
    }

    .process-step-number {
        font-size: 4rem;
    }
}

/*========================================
    AUTO-RENEW PAGE
=========================================*/

/* Intro Section - White */
.ar-intro {
    padding: 100px 0;
    background: var(--content-white);
}

.intro-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.intro-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 20px;
}

.intro-headline span {
    color: var(--content-teal);
}

.intro-lead {
    font-size: 1.1rem;
    color: var(--content-slate);
    line-height: 1.7;
    margin-bottom: 25px;
}

.intro-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.intro-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--content-charcoal);
}

.intro-feature i {
    color: var(--content-teal);
    font-size: 1rem;
}

/* ON/OFF Compare */
.onoff-compare {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.onoff-item {
    background: var(--content-white);
    border: 1px solid var(--content-border);
    border-radius: 16px;
    padding: 25px;
}

.onoff-item.on {
    border-color: var(--content-teal);
}

.onoff-item.off {
    border-color: var(--content-border);
}

.onoff-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-family: var(--content-heading);
    font-size: 1.1rem;
    text-transform: uppercase;
}

.onoff-item.on .onoff-status {
    color: var(--content-teal);
}

.onoff-item.off .onoff-status {
    color: var(--content-slate);
}

.onoff-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.onoff-item ul li {
    padding: 6px 0;
    font-size: 0.9rem;
    color: var(--content-slate);
    border-bottom: 1px solid var(--content-light);
}

.onoff-item ul li:last-child {
    border-bottom: none;
}

/* AR Cycle Section - uses existing cycle-section styles */
.ar-cycle {
    padding: 100px 0;
    background: var(--content-black);
}

.ar-cycle .cycle-header {
    text-align: center;
    margin-bottom: 50px;
}

.ar-cycle .cycle-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 15px;
}

.ar-cycle .cycle-lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Cutoffs Section - White */
.ar-cutoffs {
    padding: 100px 0;
    background: var(--content-white);
}

.cutoffs-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px;
}

.cutoffs-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 2.5rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 15px;
}

.cutoffs-lead {
    font-size: 1.05rem;
    color: var(--content-slate);
}

.cutoffs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 900px;
    margin: 0 auto;
}

.cutoff-card {
    background: var(--content-white);
    border: 1px solid var(--content-border);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
}

.cutoff-delivery,
.cutoff-time {
    text-align: center;
}

.delivery-label,
.time-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--content-slate);
    margin-bottom: 5px;
}

.delivery-day {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--content-black);
}

.time-value {
    font-family: var(--content-heading);
    font-size: 1.25rem;
    text-transform: uppercase;
    color: var(--content-flame);
}

.cutoff-arrow {
    color: var(--content-pebble);
    font-size: 1rem;
}

.cutoffs-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
    color: var(--content-slate);
    font-size: 0.95rem;
}

.cutoffs-note i {
    color: var(--content-flame);
}

/* Control Section - Black */
.ar-control {
    padding: 100px 0;
    background: var(--content-black);
}

.control-header {
    text-align: center;
    margin-bottom: 50px;
}

.control-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 2.5rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.control-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.control-option {
    text-align: center;
}

.control-icon {
    width: 70px;
    height: 70px;
    background: var(--content-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.5rem;
    color: var(--content-black);
}

.control-option h4 {
    font-family: var(--content-heading);
    font-size: 1.25rem;
    text-transform: uppercase;
    color: var(--content-white);
    margin-bottom: 10px;
}

.control-option p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* AR CTA - White */
.ar-cta {
    padding: 100px 0;
    background: var(--content-white);
    text-align: center;
}

.ar-cta h2 {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 15px;
}

.ar-cta p {
    font-size: 1.1rem;
    color: var(--content-slate);
    margin-bottom: 35px;
}

/* Commitment Levels Section - White */
.ar-commitment {
    padding: 100px 0;
    background: var(--content-light);
}

.commitment-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.commitment-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 2.5rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 15px;
}

.commitment-lead {
    font-size: 1.1rem;
    color: var(--content-slate);
    line-height: 1.6;
}

.commitment-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto 40px;
}

.commitment-card {
    background: var(--content-white);
    border-radius: 12px;
    padding: 24px 20px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.commitment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.commitment-featured {
    border: 2px solid var(--content-flame);
    box-shadow: 0 4px 16px rgba(240, 90, 40, 0.2);
}

.commitment-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--content-flame);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(240, 90, 40, 0.4);
}

.commitment-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--content-light);
    color: var(--content-flame);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 16px;
}

.commitment-12week .commitment-icon {
    background: var(--content-flame);
    color: white;
}

.commitment-card h3 {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    text-align: center;
}

.commitment-details {
    text-align: center;
    margin-bottom: 16px;
}

.commitment-description {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--content-charcoal);
    margin-bottom: 4px;
}

.commitment-subdescription {
    font-size: 0.8125rem;
    color: var(--content-pebble);
}

.commitment-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--content-flame);
    margin-bottom: 4px;
}

.commitment-savings {
    font-size: 0.8125rem;
    color: var(--content-teal-dark);
    font-weight: 500;
}

.commitment-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    flex: 1;
}

.commitment-card ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.8125rem;
    color: var(--content-stone);
    line-height: 1.4;
}

.commitment-card ul li i {
    color: var(--content-teal);
    flex-shrink: 0;
    margin-top: 2px;
}

.commitment-card ul li i.fa-exchange-alt,
.commitment-card ul li i.fa-info-circle {
    color: var(--content-flame);
}

.commitment-card ul li strong {
    color: var(--content-charcoal);
    font-weight: 600;
}

.commitment-fineprint {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.commitment-fineprint p {
    font-size: 0.875rem;
    color: var(--content-stone);
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    background: rgba(240, 90, 40, 0.08);
    padding: 16px 20px;
    border-radius: 8px;
}

.commitment-fineprint p i {
    color: var(--content-flame);
    flex-shrink: 0;
    margin-top: 2px;
}

.commitment-fineprint p strong {
    color: var(--content-charcoal);
    font-weight: 600;
}

/* AR Responsive */
@media (max-width: 991px) {
    .intro-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .commitment-cards {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
    }

    .cutoffs-grid {
        grid-template-columns: 1fr;
        max-width: 350px;
    }

    .control-options {
        grid-template-columns: 1fr;
        max-width: 350px;
    }
}

@media (max-width: 768px) {
    .ar-intro,
    .ar-commitment,
    .ar-cycle,
    .ar-cutoffs,
    .ar-control,
    .ar-cta {
        padding: 60px 0;
    }

    .commitment-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
        gap: 16px;
    }

    .commitment-card {
        padding: 20px 16px;
    }

    .commitment-fineprint p {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 14px 16px;
    }
}

/*========================================
    REFER A FRIEND PAGE
=========================================*/

/* Steps Section - White */
.ref-steps {
    padding: 100px 0;
    background: var(--content-white);
}

.steps-header {
    text-align: center;
    margin-bottom: 60px;
}

.steps-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.ref-step {
    text-align: center;
    position: relative;
}

.ref-step-number {
    position: absolute;
    top: -10px;
    right: 20px;
    font-family: var(--content-heading);
    font-size: 5rem;
    color: rgba(0, 0, 0, 0.12);
    line-height: 1;
    pointer-events: none;
}

.ref-step-icon {
    width: 80px;
    height: 80px;
    background: var(--content-black);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2rem;
    color: var(--content-flame);
    transition: transform 0.3s ease;
}

.ref-step:hover .ref-step-icon {
    transform: scale(1.1);
}

.ref-step h3 {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black);
    margin-bottom: 12px;
}

.ref-step p {
    color: var(--content-slate);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.ref-step a {
    color: var(--content-flame);
    font-weight: 500;
}

.ref-step a:hover {
    text-decoration: underline;
}

/* Reward Section - Black */
.ref-reward {
    padding: 100px 0;
    background: var(--content-black);
}

.reward-header {
    text-align: center;
    margin-bottom: 50px;
}

.reward-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.reward-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}

.reward-card {
    background: var(--content-white);
    border-radius: 20px;
    padding: 40px 50px;
    text-align: center;
}

.reward-who {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--content-slate);
    margin-bottom: 10px;
}

.reward-credits {
    font-family: var(--content-heading);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--content-black);
}

.reward-card.you .reward-credits {
    color: var(--content-flame);
}

.reward-card.friend .reward-credits {
    color: var(--content-teal);
}

.reward-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--content-slate);
    margin-top: 8px;
}

.reward-plus {
    font-family: var(--content-heading);
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.3);
}

.reward-note {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

.reward-note a {
    color: var(--content-flame);
    font-weight: 500;
}

.reward-note a:hover {
    text-decoration: underline;
}

/* Ref CTA - White */
.ref-cta {
    padding: 100px 0;
    background: var(--content-white);
    text-align: center;
}

.ref-cta h2 {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 15px;
}

.ref-cta p {
    font-size: 1.1rem;
    color: var(--content-slate);
    margin-bottom: 35px;
}

/* Ref Responsive */
@media (max-width: 991px) {
    .steps-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .reward-visual {
        flex-direction: column;
        gap: 20px;
    }

    .reward-plus {
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {
    .ref-steps,
    .ref-reward,
    .ref-cta {
        padding: 60px 0;
    }

    .ref-step-number {
        font-size: 4rem;
    }

    .reward-card {
        padding: 30px 40px;
    }

    .reward-credits {
        font-size: 2.5rem;
    }
}

/*========================================
    FAQ PAGE
=========================================*/

/* Nav Section - White */
.faq-nav {
    padding: 40px 0;
    background: var(--content-white);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--content-border);
}

.faq-nav-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.faq-nav-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--content-slate);
}

.faq-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.faq-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--content-black);
    color: var(--content-white);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 100px;
    transition: all 0.2s ease;
}

.faq-nav-link i {
    font-size: 0.8rem;
    color: var(--content-flame);
}

.faq-nav-link:hover {
    background: var(--content-flame);
}

.faq-nav-link:hover i {
    color: var(--content-white);
}

/* FAQ Content Section - White */
.faq-content {
    padding: 80px 0;
    background: var(--content-white);
}

.faq-category {
    margin-bottom: 60px;
    scroll-margin-top: 120px;
}

.faq-category:last-child {
    margin-bottom: 0;
}

.faq-category-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--content-border);
}

.faq-category-icon {
    width: 60px;
    height: 60px;
    background: var(--content-black);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--content-flame);
    flex-shrink: 0;
}

.faq-category h2 {
    font-family: var(--content-heading);
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-page .faq-item {
    background: var(--content-white);
    border: 1px solid var(--content-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-page .faq-item:hover {
    border-color: var(--content-black);
}

.faq-page .faq-item.active {
    border-color: var(--content-flame);
}

.faq-page .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq-page .faq-question span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--content-black);
    line-height: 1.4;
}

.faq-page .faq-question i {
    font-size: 0.9rem;
    color: var(--content-flame);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-page .faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-page .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-page .faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-page .faq-answer-inner {
    padding: 0 25px 25px;
}

.faq-page .faq-answer p {
    color: var(--content-slate);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.faq-page .faq-answer a {
    color: var(--content-flame);
    font-weight: 500;
}

.faq-page .faq-answer a:hover {
    text-decoration: underline;
}

/* FAQ CTA - Black */
.faq-cta {
    padding: 100px 0;
    background: var(--content-black);
    text-align: center;
}

.faq-cta h2 {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 15px;
}

.faq-cta p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 35px;
}

/* FAQ Responsive */
@media (max-width: 991px) {
    .faq-nav-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .faq-nav-links {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .faq-nav {
        padding: 25px 0;
        position: relative;
    }

    .faq-nav-link {
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    .faq-content {
        padding: 60px 0;
    }

    .faq-category {
        margin-bottom: 50px;
    }

    .faq-category-header {
        gap: 15px;
    }

    .faq-category-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .faq-question {
        padding: 18px 20px;
    }

    .faq-answer-inner {
        padding: 0 20px 20px;
    }

    .faq-cta {
        padding: 60px 0;
    }
}

/*========================================
    CONTACT PAGE
=========================================*/

/* Contact Methods - White */
.contact-methods {
    padding: 100px 0;
    background: var(--content-white);
}

.methods-header {
    text-align: center;
    margin-bottom: 60px;
}

.methods-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.method-card {
    text-align: center;
    padding: 40px 30px;
    background: var(--content-white);
    border: 1px solid var(--content-border);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.method-card:hover {
    border-color: var(--content-black);
    transform: translateY(-5px);
}

.method-icon {
    width: 70px;
    height: 70px;
    background: var(--content-black);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 1.8rem;
    color: var(--content-flame);
    transition: transform 0.3s ease;
}

.method-card:hover .method-icon {
    transform: scale(1.1);
}

.method-content h3 {
    font-family: var(--content-heading);
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black);
    margin-bottom: 12px;
}

.method-content p {
    color: var(--content-slate);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.method-content a {
    color: var(--content-black);
    font-weight: 600;
    transition: color 0.2s ease;
}

.method-content a:hover {
    color: var(--content-flame);
}

.method-note {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--content-slate);
    opacity: 0.7;
}

/* Contact Main - Black */
.contact-main {
    padding: 100px 0;
    background: var(--content-black);
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.map-header,
.form-header {
    margin-bottom: 30px;
}

.map-headline,
.form-headline {
    font-family: var(--content-heading);
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.map-wrapper {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-wrapper iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

.form-wrapper {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 35px;
}

/* Contact form styling overrides */
.contact-page .form-wrapper input,
.contact-page .form-wrapper textarea,
.contact-page .form-wrapper select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 14px 18px;
    color: var(--content-white);
    font-size: 0.95rem;
    width: 100%;
    transition: all 0.2s ease;
}

.contact-page .form-wrapper input:focus,
.contact-page .form-wrapper textarea:focus,
.contact-page .form-wrapper select:focus {
    outline: none;
    border-color: var(--content-flame);
    background: rgba(255, 255, 255, 0.08);
}

.contact-page .form-wrapper input::placeholder,
.contact-page .form-wrapper textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.contact-page .form-wrapper label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
}

.contact-page .form-wrapper .form-group,
.contact-page .form-wrapper .mb-3 {
    margin-bottom: 20px;
}

.contact-page .form-wrapper button[type="submit"],
.contact-page .form-wrapper .btn-primary {
    width: 100%;
    padding: 16px 30px;
    background: var(--content-flame);
    color: var(--content-white);
    border: none;
    border-radius: 10px;
    font-family: var(--content-heading);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-page .form-wrapper button[type="submit"]:hover,
.contact-page .form-wrapper .btn-primary:hover {
    background: #d94d20;
}

/* Hide duplicate form heading */
.contact-page .form-wrapper .contact-form h4 {
    display: none;
}

/* Form input group with icons */
.contact-page .form-wrapper .form-input-group {
    position: relative;
}

.contact-page .form-wrapper .form-input-group i {
    display: none;
}

.contact-page .form-wrapper .form-group {
    margin-bottom: 20px;
}

.contact-page .form-wrapper .form-btn-group {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    background: var(--content-flame);
    color: var(--content-white);
    border: none;
    border-radius: 10px;
    font-family: var(--content-heading);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-page .form-wrapper .form-btn-group:hover {
    background: #d94d20;
    transform: translateY(-2px);
}

/* Contact CTA - White */
.contact-cta {
    padding: 100px 0;
    background: var(--content-white);
    text-align: center;
}

.contact-cta h2 {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 15px;
}

.contact-cta p {
    font-size: 1.1rem;
    color: var(--content-slate);
    margin-bottom: 35px;
}

/* Contact Responsive */
@media (max-width: 991px) {
    .methods-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .contact-methods,
    .contact-main,
    .contact-cta {
        padding: 60px 0;
    }

    .method-card {
        padding: 30px 25px;
    }

    .form-wrapper {
        padding: 25px;
    }

    .map-wrapper iframe {
        height: 300px;
    }
}

/*========================================
    GIFT VOUCHERS PAGE
=========================================*/

/* How It Works - White */
.gv-howitworks {
    padding: 100px 0;
    background: var(--content-white);
}

.gv-how-header {
    text-align: center;
    margin-bottom: 60px;
}

.gv-how-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.gv-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.gv-step {
    text-align: center;
    position: relative;
}

.gv-step-number {
    position: absolute;
    top: -10px;
    right: 10px;
    font-family: var(--content-heading);
    font-size: 4rem;
    color: rgba(0, 0, 0, 0.12);
    line-height: 1;
    pointer-events: none;
}

.gv-step-icon {
    width: 70px;
    height: 70px;
    background: var(--content-black);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.6rem;
    color: var(--content-flame);
    transition: transform 0.3s ease;
}

.gv-step:hover .gv-step-icon {
    transform: scale(1.1);
}

.gv-step h3 {
    font-family: var(--content-heading);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black);
    margin-bottom: 10px;
}

.gv-step p {
    color: var(--content-slate);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Purchase Section - Black */
.gv-purchase {
    padding: 100px 0;
    background: var(--content-black);
}

.gv-purchase-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}

.gv-purchase-headline {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 2.5rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 15px;
}

.gv-purchase-lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 35px;
}

.gv-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gv-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.gv-feature i {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--content-flame);
    font-size: 1rem;
}

/* Form Card */
.gv-form-card {
    background: var(--content-white);
    border-radius: 20px;
    padding: 40px;
}

.gv-form-section {
    margin-bottom: 25px;
}

.gv-form-field {
    margin-bottom: 20px;
}

.gv-form-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--content-slate);
}

.gv-amount-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.gv-amount-option {
    cursor: pointer;
}

.gv-amount-option input {
    display: none;
}

.gv-amount-btn {
    display: block;
    padding: 14px 10px;
    text-align: center;
    background: var(--content-white);
    border: 1px solid var(--content-border);
    border-radius: 10px;
    font-family: var(--content-heading);
    font-size: 1rem;
    color: var(--content-black);
    transition: all 0.2s ease;
}

.gv-amount-option:hover .gv-amount-btn {
    border-color: var(--content-black);
}

.gv-amount-option input:checked + .gv-amount-btn {
    background: var(--content-black);
    border-color: var(--content-black);
    color: var(--content-white);
}

.gv-amount-custom {
    grid-column: span 2;
}

.gv-custom-amount {
    margin-top: 15px;
}

.gv-input-group {
    display: flex;
    align-items: center;
    background: var(--content-white);
    border: 1px solid var(--content-border);
    border-radius: 10px;
    overflow: hidden;
}

.gv-input-prefix {
    padding: 14px 15px;
    background: rgba(0, 0, 0, 0.03);
    color: var(--content-slate);
    font-weight: 600;
}

.gv-input {
    flex: 1;
    padding: 14px 15px;
    border: none;
    font-size: 0.95rem;
    color: var(--content-black);
    background: transparent;
}

.gv-input:focus {
    outline: none;
}

.gv-input-group:focus-within {
    border-color: var(--content-black);
}

.gv-qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--content-border);
    border-radius: 10px;
    overflow: hidden;
}

.gv-qty-btn {
    width: 45px;
    height: 45px;
    background: var(--content-white);
    border: none;
    font-size: 1.2rem;
    color: var(--content-black);
    cursor: pointer;
    transition: background 0.2s ease;
}

.gv-qty-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.gv-qty-input {
    width: 60px;
    height: 45px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--content-border);
    border-right: 1px solid var(--content-border);
    font-size: 1rem;
    font-weight: 600;
    color: var(--content-black);
}

.gv-qty-input:focus {
    outline: none;
}

/* Checkbox */
.gv-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.gv-checkbox input {
    display: none;
}

.gv-checkbox-mark {
    width: 22px;
    height: 22px;
    border: 2px solid var(--content-border);
    border-radius: 6px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.gv-checkbox input:checked + .gv-checkbox-mark {
    background: var(--content-black);
    border-color: var(--content-black);
}

.gv-checkbox input:checked + .gv-checkbox-mark::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--content-white);
    font-size: 0.7rem;
}

.gv-checkbox-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gv-checkbox-label strong {
    color: var(--content-black);
    font-size: 0.95rem;
}

.gv-checkbox-label small {
    color: var(--content-slate);
    font-size: 0.85rem;
}

/* Personalise Fields */
.gv-personalise {
    padding-top: 20px;
    border-top: 1px solid var(--content-border);
    margin-top: 10px;
}

.gv-textarea {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid var(--content-border);
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--content-black);
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s ease;
}

.gv-textarea:focus {
    outline: none;
    border-color: var(--content-black);
}

.gv-char-count {
    display: block;
    text-align: right;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--content-slate);
}

/* Message */
.gv-message {
    margin-bottom: 20px;
}

.gv-alert {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 0.95rem;
}

.gv-alert.error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.gv-alert.success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* Submit Button */
.gv-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 30px;
    background: var(--content-black);
    color: var(--content-white);
    border: none;
    border-radius: 12px;
    font-family: var(--content-heading);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gv-submit-btn:hover {
    background: var(--content-flame);
    transform: translateY(-2px);
}

/* Redeem Section - White */
.gv-redeem {
    padding: 80px 0;
    background: var(--content-white);
}

.gv-redeem-content {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 50px;
    background: var(--content-white);
    border: 1px solid var(--content-border);
    border-radius: 20px;
}

.gv-redeem-icon {
    width: 70px;
    height: 70px;
    background: var(--content-black);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--content-flame);
    flex-shrink: 0;
}

.gv-redeem-text {
    flex: 1;
}

.gv-redeem-text h3 {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--content-black);
    margin-bottom: 5px;
}

.gv-redeem-text p {
    color: var(--content-slate);
    font-size: 0.95rem;
    margin: 0;
}

.gv-redeem-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--content-flame);
    color: var(--content-white);
    text-decoration: none;
    border-radius: 10px;
    font-family: var(--content-heading);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.gv-redeem-btn:hover {
    background: #d94d20;
    transform: translateY(-2px);
}

/* GV CTA - Black */
.gv-cta {
    padding: 100px 0;
    background: var(--content-black);
    text-align: center;
}

.gv-cta h2 {
    font-family: var(--content-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 15px;
}

.gv-cta p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 35px;
}

/* GV Responsive */
@media (max-width: 991px) {
    .gv-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
    }

    .gv-purchase-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .gv-redeem-content {
        flex-direction: column;
        text-align: center;
        padding: 35px 30px;
    }
}

@media (max-width: 768px) {
    .gv-howitworks,
    .gv-purchase,
    .gv-redeem,
    .gv-cta {
        padding: 60px 0;
    }

    .gv-steps {
        grid-template-columns: 1fr;
        max-width: 300px;
        margin: 0 auto;
    }

    .gv-step-number {
        font-size: 3rem;
    }

    .gv-form-card {
        padding: 30px 25px;
    }

    .gv-amount-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gv-amount-custom {
        grid-column: span 3;
    }

    .gv-redeem {
        padding: 50px 0;
    }

    .gv-redeem-content {
        padding: 30px 25px;
    }
}

/*========================================
    HOMEPAGE
=========================================*/

/* Hero Section */
.hp-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--content-black);
    overflow: hidden;
}

.hp-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
}

.hp-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%);
}

.hp-hero .container {
    position: relative;
    z-index: 2;
}

.hp-hero-content {
    max-width: 650px;
    padding: 40px 0;
}

.hp-hero-eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--content-flame);
    margin-bottom: 20px;
}

.hp-hero h1 {
    font-family: var(--content-heading);
    font-size: clamp(4rem, 12vw, 7rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 0.95;
    margin-bottom: 30px;
}

.hp-hero h1 span {
    color: var(--content-flame);
}

.hp-hero-content > p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 35px;
    max-width: 500px;
}

.hp-hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.hp-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 35px;
    border-radius: 10px;
    font-family: var(--content-heading);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hp-hero-btn.primary {
    background: var(--content-flame);
    color: var(--content-white);
}

.hp-hero-btn.primary:hover {
    background: #d94d20;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(240, 90, 40, 0.4);
}

.hp-hero-btn.secondary {
    background: transparent;
    color: var(--content-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.hp-hero-btn.secondary:hover {
    border-color: var(--content-white);
    background: rgba(255, 255, 255, 0.1);
}

.hp-hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

.hp-hero-scroll span {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
}

.scroll-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, var(--content-flame), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; height: 50px; }
    50% { opacity: 1; height: 70px; }
}

/* Promise Strip - Black */
.hp-promise {
    background: var(--content-black);
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hp-promise-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

.hp-promise-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--content-white);
}

.hp-promise-item i {
    font-size: 1.2rem;
    color: var(--content-flame);
}

.hp-promise-item span {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Why Section - White */
.hp-why {
    padding: 100px 0;
    background: var(--content-white);
}

.hp-why-header {
    text-align: center;
    margin-bottom: 60px;
}

.hp-why-header h2 {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hp-why-header h2 span {
    color: var(--content-flame);
}

.hp-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.hp-why-card {
    display: flex;
    gap: 20px;
    padding: 35px;
    background: var(--content-white);
    border: 1px solid var(--content-border);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.hp-why-card:hover {
    border-color: var(--content-black);
    transform: translateY(-5px);
}

.hp-why-icon {
    width: 60px;
    height: 60px;
    background: var(--content-black);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--content-flame);
    flex-shrink: 0;
}

.hp-why-content h3 {
    font-family: var(--content-heading);
    font-size: 1.4rem;
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.hp-why-content p {
    color: var(--content-slate);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* How It Works - Black */
.hp-how {
    padding: 100px 0;
    background: var(--content-black);
}

.hp-how-header {
    text-align: center;
    margin-bottom: 60px;
}

.hp-how-header h2 {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hp-how-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.hp-step {
    flex: 1;
    text-align: center;
    max-width: 280px;
    position: relative;
}

.hp-step-number {
    font-family: var(--content-heading);
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.15);
    line-height: 1;
    position: absolute;
    top: -20px;
    right: 10px;
    pointer-events: none;
}

.hp-step-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    color: var(--content-flame);
    transition: all 0.3s ease;
}

.hp-step:hover .hp-step-icon {
    background: var(--content-flame);
    color: var(--content-white);
    border-color: var(--content-flame);
    transform: scale(1.1);
}

.hp-step h3 {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
}

.hp-step p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.hp-step-connector {
    display: flex;
    align-items: center;
    padding-top: 30px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 1.5rem;
}

.hp-how-cta {
    text-align: center;
    margin-top: 50px;
}

/* Menu Preview - White */
.hp-menu {
    padding: 100px 0;
    background: var(--content-white);
}

.hp-menu-header {
    text-align: center;
    margin-bottom: 50px;
}

.hp-menu-header h2 {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hp-menu-header h2 span {
    color: var(--content-flame);
}

.hp-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 50px;
}

.hp-menu-card {
    background: var(--content-white);
    border: 1px solid var(--content-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.hp-menu-card:hover {
    border-color: var(--content-black);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.hp-menu-image {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.hp-menu-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.hp-menu-card:hover .hp-menu-image img {
    transform: scale(1.08);
}

.hp-menu-day {
    position: absolute;
    top: 12px;
    left: 12px;
}

.hp-menu-day span {
    display: inline-block;
    padding: 6px 12px;
    background: var(--content-black);
    color: var(--content-white);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 6px;
}

.hp-menu-info {
    padding: 20px;
}

.hp-menu-info h3 {
    font-family: var(--content-heading);
    font-size: 1.1rem;
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    line-height: 1.3;
}

.hp-menu-info h3 i {
    color: #dc2626;
    font-size: 0.9rem;
    margin-left: 5px;
}

.hp-menu-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 12px;
}

.hp-menu-price .price-from {
    font-size: 0.75rem;
    color: var(--content-slate);
}

.hp-menu-price .price-value {
    font-family: var(--content-heading);
    font-size: 1.3rem;
    color: var(--content-flame);
}

.hp-menu-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--content-black);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hp-menu-view:hover {
    color: var(--content-flame);
}

.hp-menu-view i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.hp-menu-view:hover i {
    transform: translateX(4px);
}

.hp-menu-cta {
    text-align: center;
}

/* Rewards - Black */
.hp-rewards {
    padding: 100px 0;
    background: var(--content-black);
}

.hp-rewards-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hp-rewards-content h2 {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 20px;
}

.hp-rewards-content h2 span {
    color: var(--content-flame);
}

.hp-rewards-content > p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 30px;
}

.hp-rewards-perks {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 35px;
}

.hp-perk {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hp-perk i {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--content-flame);
    font-size: 1rem;
}

.hp-perk span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.hp-rewards-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hp-rewards-conversion {
    display: flex;
    align-items: center;
    gap: 30px;
}

.conversion-item {
    text-align: center;
}

.conversion-number {
    display: block;
    font-family: var(--content-heading);
    font-size: clamp(4rem, 10vw, 6rem);
    line-height: 1;
    color: var(--content-white);
    letter-spacing: -0.02em;
}

.conversion-item.highlight .conversion-number {
    color: var(--content-flame);
}

.conversion-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
}

.conversion-arrow {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 18px;
}

/* Final CTA - White */
.hp-final-cta {
    padding: 120px 0;
    background: var(--content-white);
    text-align: center;
}

.hp-final-content {
    max-width: 600px;
    margin: 0 auto;
}

.hp-final-content h2 {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 7vw, 4rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 20px;
}

.hp-final-content h2 span {
    color: var(--content-flame);
}

.hp-final-content > p {
    font-size: 1.15rem;
    color: var(--content-slate);
    line-height: 1.7;
    margin-bottom: 35px;
}

.cta-btn.large {
    padding: 20px 45px;
    font-size: 1.1rem;
}

/* Newsletter - Black */
.hp-newsletter {
    padding: 60px 0;
    background: var(--content-black);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hp-newsletter-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.hp-newsletter-content h3 {
    font-family: var(--content-heading);
    font-size: 1.8rem;
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 5px;
}

.hp-newsletter-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin: 0;
}

.hp-newsletter-form {
    flex: 1;
    max-width: 500px;
}

/* Newsletter form styling */
.hp-newsletter-form input[type="email"] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 14px 18px;
    color: var(--content-white);
    font-size: 0.95rem;
    width: 100%;
}

.hp-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--content-flame);
}

.hp-newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.hp-newsletter-form button[type="submit"] {
    background: var(--content-flame);
    color: var(--content-white);
    border: none;
    border-radius: 10px;
    padding: 14px 25px;
    font-family: var(--content-heading);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hp-newsletter-form button[type="submit"]:hover {
    background: #d94d20;
}

/* Homepage Responsive */
@media (max-width: 1199px) {
    .hp-menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .hp-hero {
        min-height: auto;
        padding: 120px 0 80px;
    }

    .hp-hero-scroll {
        display: none;
    }

    .hp-promise-grid {
        gap: 30px 40px;
    }

    .hp-why-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .hp-how-steps {
        flex-direction: column;
        align-items: center;
    }

    .hp-step-connector {
        transform: rotate(90deg);
        padding: 10px 0;
    }

    .hp-rewards-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hp-rewards-perks {
        align-items: center;
    }

    .hp-rewards-conversion {
        margin-top: 40px;
    }

    .hp-newsletter-layout {
        flex-direction: column;
        text-align: center;
    }

    .hp-newsletter-form {
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 767px) {
    .hp-hero h1 {
        font-size: clamp(3rem, 15vw, 4.5rem);
    }

    .hp-hero-actions {
        flex-direction: column;
    }

    .hp-hero-btn {
        width: 100%;
        justify-content: center;
    }

    .hp-promise-grid {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .hp-why,
    .hp-how,
    .hp-menu,
    .hp-rewards,
    .hp-final-cta {
        padding: 70px 0;
    }

    .hp-menu-grid {
        grid-template-columns: 1fr;
        max-width: 350px;
        margin: 0 auto 40px;
    }

    .hp-step-number {
        font-size: 4rem;
    }
}

/*========================================
    OUR STORY PAGE
=========================================*/

/* Story Question Section - White */
.story-question {
    padding: 100px 0;
    background: var(--content-white);
}

.question-block {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.question-mark {
    font-family: var(--content-heading);
    font-size: clamp(8rem, 20vw, 14rem);
    color: var(--content-flame);
    opacity: 0.12;
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
    pointer-events: none;
}

.question-block blockquote {
    font-family: var(--content-body);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 500;
    color: var(--content-charcoal);
    line-height: 1.6;
    margin: 0 0 30px;
    padding: 0;
    position: relative;
    z-index: 1;
}

.question-attribution {
    font-family: var(--content-heading);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--content-flame);
}

/* Story Origin Section - Black */
.story-origin {
    padding: 100px 0;
    background: var(--content-black);
}

.origin-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.origin-content .section-eyebrow.light {
    color: var(--content-flame);
}

.origin-content .section-eyebrow.light::before {
    background: var(--content-flame);
}

.origin-content h2 {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 30px;
    line-height: 1.1;
}

.origin-content h2 span {
    color: var(--content-flame);
}

.origin-content p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin-bottom: 20px;
}

.origin-content p strong {
    color: var(--content-white);
    font-weight: 600;
}

.origin-image {
    position: relative;
}

.origin-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.origin-image::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--content-flame);
    border-radius: 16px;
    opacity: 0.3;
    z-index: -1;
}

/* Story Philosophy Section - White */
.story-philosophy {
    padding: 100px 0;
    background: var(--content-white);
}

.philosophy-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.philosophy-header h2 {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.philosophy-header h2 span {
    color: var(--content-flame);
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.philosophy-card {
    background: var(--content-white);
    border: 1px solid var(--content-border);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.philosophy-card:hover {
    border-color: var(--content-flame);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.philosophy-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--content-flame), var(--content-flame-light));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.philosophy-icon i {
    font-size: 1.6rem;
    color: var(--content-white);
}

.philosophy-card h3 {
    font-family: var(--content-heading);
    font-size: 1.5rem;
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 15px;
}

.philosophy-card p {
    font-size: 0.95rem;
    color: var(--content-slate);
    line-height: 1.7;
    margin: 0;
}

/* Story Values Section - Black */
.story-values {
    padding: 100px 0;
    background: var(--content-black);
}

.values-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.values-image {
    position: relative;
}

.values-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.values-image::before {
    content: '';
    position: absolute;
    top: 20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--content-teal);
    border-radius: 16px;
    opacity: 0.3;
    z-index: -1;
}

.values-content .section-eyebrow.light {
    color: var(--content-flame);
}

.values-content .section-eyebrow.light::before {
    background: var(--content-flame);
}

.values-content h2 {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 20px;
    line-height: 1.1;
}

.values-content h2 span {
    color: var(--content-teal);
}

.values-lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 30px;
}

.values-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.value-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.value-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.value-item i {
    color: var(--content-teal);
    font-size: 1rem;
    flex-shrink: 0;
}

.value-item span {
    color: var(--content-white);
    font-size: 0.95rem;
    font-weight: 500;
}

/* Story Vision Section - White */
.story-vision {
    padding: 100px 0;
    background: var(--content-white);
}

.vision-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.vision-content h2 {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 30px;
    line-height: 1.1;
}

.vision-content h2 span {
    color: var(--content-flame);
}

.vision-content p {
    font-size: 1.15rem;
    color: var(--content-slate);
    line-height: 1.8;
    margin-bottom: 20px;
}

.vision-content p:last-child {
    margin-bottom: 0;
}

/* Story CTA Section - Black */
.story-cta {
    padding: 100px 0;
    background: var(--content-black);
}

.story-cta .cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.story-cta .cta-content h2 {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 7vw, 4rem);
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 20px;
}

.story-cta .cta-content p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 35px;
}

/* Our Story Responsive */
@media (max-width: 991px) {
    .origin-layout,
    .values-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .origin-image {
        order: -1;
        max-width: 500px;
        margin: 0 auto;
    }

    .values-image {
        max-width: 500px;
        margin: 0 auto;
    }

    .philosophy-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .question-mark {
        font-size: 10rem;
        top: -60px;
    }
}

@media (max-width: 767px) {
    .story-question,
    .story-origin,
    .story-philosophy,
    .story-values,
    .story-vision,
    .story-cta {
        padding: 70px 0;
    }

    .question-block blockquote {
        font-size: 1.1rem;
    }

    .question-mark {
        font-size: 8rem;
        top: -50px;
    }

    .origin-image::before,
    .values-image::before {
        display: none;
    }

    .value-item {
        padding: 12px 15px;
    }

    .value-item span {
        font-size: 0.9rem;
    }
}

/*========================================
    MENU PAGE - EDITORIAL REDESIGN
=========================================*/

/* Menu Hero */
.menu-hero {
    position: relative;
    padding: 120px 0 140px; /* Extra bottom padding for quick nav */
    background: var(--content-black);
    overflow: visible;
}

.menu-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(240, 90, 40, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(131, 173, 149, 0.1) 0%, transparent 40%);
}

.menu-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 100%);
}

.menu-hero .container {
    position: relative;
    z-index: 2;
}

.menu-hero-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.menu-hero-eyebrow {
    display: inline-block;
    font-family: var(--content-heading);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--content-flame);
    margin-bottom: 15px;
}

.menu-hero h1 {
    font-family: var(--content-heading);
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: 400;
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
    margin-bottom: 20px;
}

.menu-hero h1 span {
    color: var(--content-flame);
}

.menu-hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Delivery/Pickup Toggle */
.menu-mode-toggle {
    display: flex;
    justify-content: center;
}

.mode-pill {
    position: relative;
    display: inline-flex;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 5px;
}

.mode-pill input[type="radio"] {
    display: none;
}

.mode-pill label {
    position: relative;
    z-index: 2;
    padding: 12px 28px;
    font-family: var(--content-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mode-pill label i {
    font-size: 1rem;
}

.mode-slider {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(50% - 5px);
    height: calc(100% - 10px);
    background: var(--content-flame);
    border-radius: 50px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#delivery-option:checked ~ .mode-slider {
    transform: translateX(0);
}

#pickup-option:checked ~ .mode-slider {
    transform: translateX(100%);
}

#delivery-option:checked ~ label[for="delivery-option"],
#pickup-option:checked ~ label[for="pickup-option"] {
    color: var(--content-white);
}

/* Countdown Timer */
.menu-countdown-wrapper {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px 35px;
    max-width: 600px;
    margin: 0 auto 20px;
}

.menu-countdown-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.menu-countdown-label i {
    color: var(--content-flame);
}

.menu-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.countdown-unit {
    text-align: center;
    min-width: 60px;
}

.countdown-value {
    display: block;
    font-family: var(--content-heading);
    font-size: 2.5rem;
    color: var(--content-white);
    line-height: 1;
}

.countdown-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 5px;
}

.countdown-separator {
    font-family: var(--content-heading);
    font-size: 2rem;
    color: var(--content-flame);
    opacity: 0.5;
}

/* Quick Navigation */
.menu-quick-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--content-white);
    display: flex;
    justify-content: center;
    gap: 0;
    border-top: 1px solid var(--content-border);
}

.quick-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 40px;
    text-decoration: none;
    color: var(--content-slate);
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.quick-nav-item i {
    font-size: 1.2rem;
}

.quick-nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--content-flame);
    transition: width 0.3s ease;
}

.quick-nav-item:hover,
.quick-nav-item.active {
    color: var(--content-flame);
}

.quick-nav-item.active::after {
    width: 60%;
}

.quick-nav-item.tour-btn {
    background: linear-gradient(135deg, var(--content-flame), var(--content-flame-light));
    color: var(--content-white);
    border-radius: 0;
    padding: 20px 35px;
    position: relative;
    overflow: hidden;
}

.quick-nav-item.tour-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.quick-nav-item.tour-btn:hover::before {
    left: 100%;
}

.quick-nav-item.tour-btn:hover {
    background: linear-gradient(135deg, var(--content-flame-light), var(--content-flame));
    color: var(--content-white);
    transform: none;
}

.quick-nav-item.tour-btn::after {
    display: none;
}

.quick-nav-item.tour-btn i {
    font-size: 1.1rem;
}

.quick-nav-item.tour-btn span {
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Section Headers */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.section-header h2 {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-bottom: 15px;
}

.section-header h2 span {
    color: var(--content-flame);
}

.section-header.light h2 {
    color: var(--content-white);
}

.section-lead {
    font-size: 1.1rem;
    color: var(--content-slate);
    line-height: 1.7;
}

.section-header.light .section-lead {
    color: rgba(255, 255, 255, 0.7);
}

/* Packages Section */
.menu-packages {
    padding: 100px 0;
    background: var(--content-white);
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.package-card {
    background: var(--content-white);
    border: 1px solid var(--content-border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.package-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
    border-color: var(--content-flame);
}

.package-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.package-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.package-card:hover .package-image img {
    transform: scale(1.05);
}

.package-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 8px;
}

.package-badge {
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 20px;
}

.package-badge.regular {
    background: var(--content-black);
    color: var(--content-white);
}

.package-badge.large {
    background: var(--content-flame);
    color: var(--content-white);
}

.package-content {
    padding: 25px;
}

.package-name {
    font-family: var(--content-heading);
    font-size: 1.6rem;
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
}

.package-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--content-slate);
    margin-bottom: 15px;
}

.package-divider {
    color: var(--content-border);
}

.package-price {
    margin-bottom: 15px;
}

.price-total {
    font-family: var(--content-heading);
    font-size: 2rem;
    color: var(--content-flame);
}

.price-period {
    font-size: 0.85rem;
    color: var(--content-slate);
    margin-left: 5px;
}

.package-rewards {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: rgba(240, 90, 40, 0.1);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--content-flame);
    margin-bottom: 20px;
}

.package-rewards i {
    color: #f7931e;
}

.package-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 25px;
    background: var(--content-black);
    color: var(--content-white);
    text-decoration: none;
    font-family: var(--content-heading);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.package-btn:hover {
    background: var(--content-flame);
    color: var(--content-white);
}

/* À La Carte Section */
.menu-alacarte {
    padding: 100px 0;
    background: var(--content-black);
}

/* Day Navigation */
.day-nav-wrapper {
    margin-bottom: 50px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.day-nav-wrapper::-webkit-scrollbar {
    display: none;
}

.day-nav {
    display: flex;
    gap: 15px;
    justify-content: center;
    min-width: max-content;
    padding: 0 20px;
}

.day-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 100px;
}

.day-nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.day-nav-item.active {
    background: var(--content-flame);
    border-color: var(--content-flame);
}

.day-name {
    font-family: var(--content-heading);
    font-size: 1.1rem;
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.day-date {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
}

.day-nav-item.active .day-date {
    color: rgba(255, 255, 255, 0.9);
}

.day-count {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 5px;
}

.day-nav-item.active .day-count {
    color: rgba(255, 255, 255, 0.8);
}

/* Day Sections */
.day-section {
    margin-bottom: 60px;
    scroll-margin-top: 100px;
}

.day-section:last-child {
    margin-bottom: 0;
}

.day-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.day-info h3 {
    font-family: var(--content-heading);
    font-size: 1.8rem;
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 5px;
}

.day-cutoff {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--content-flame);
}

/* Meals Grid */
.meals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

/* Meal Cards - Editorial Redesign */
.meal-card {
    background: var(--content-white);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
}

.meal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--content-flame), var(--content-teal));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.meal-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.meal-card:hover::before {
    transform: scaleX(1);
}

.meal-card.in-cart {
    box-shadow: 0 4px 20px rgba(131, 173, 149, 0.3);
}

.meal-card.in-cart::before {
    background: var(--content-teal);
    transform: scaleX(1);
}

.meal-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.meal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.meal-card:hover .meal-image img {
    transform: scale(1.08);
}

/* Image Overlay Gradient */
.meal-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.meal-card:hover .meal-image::after {
    opacity: 1;
}

.meal-badge {
    position: absolute;
    z-index: 2;
    font-family: var(--content-heading);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.meal-badge.in-cart-badge {
    top: 12px;
    left: 12px;
    padding: 8px 14px;
    background: var(--content-teal);
    color: var(--content-white);
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 15px rgba(131, 173, 149, 0.4);
}

.meal-badge.veg-badge {
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: var(--content-white);
    border-radius: 50%;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.meal-badge.spicy-badge {
    bottom: 12px;
    right: 56px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #B90F10, #E53935);
    color: var(--content-white);
    border-radius: 50%;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(185, 15, 16, 0.4);
}

.meal-content {
    padding: 24px;
    background: var(--content-white);
}

.meal-name {
    font-family: var(--content-heading);
    font-size: 1.35rem;
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
    line-height: 1.15;
}

/* Size Selector - Editorial Style */
.meal-size-selector {
    margin-bottom: 16px;
}

.size-select {
    width: 100%;
    padding: 12px 18px;
    background: var(--content-light);
    border: 2px solid transparent;
    border-radius: 12px;
    color: var(--content-black);
    font-family: var(--content-body);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23111111' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.size-select:hover {
    border-color: var(--content-border);
}

.size-select:focus {
    outline: none;
    border-color: var(--content-flame);
    box-shadow: 0 0 0 4px rgba(240, 90, 40, 0.1);
}

.size-select option {
    background: var(--content-white);
    color: var(--content-black);
    padding: 10px;
}

/* Price Display (for non-size products) */
.meal-price-display {
    margin-bottom: 16px;
}

.meal-price {
    font-family: var(--content-heading);
    font-size: 1.6rem;
    color: var(--content-flame);
    letter-spacing: 0.02em;
}

/* Macros - Circular Ring Design */
.meal-macros {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, var(--content-light) 0%, rgba(240, 90, 40, 0.03) 100%);
    border-radius: 14px;
}

.macro {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.macro-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid var(--content-border);
    position: relative;
    margin-bottom: 6px;
}

.macro-ring::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: inherit;
    border-right-color: inherit;
}

.macro.cal .macro-ring::after { border-top-color: #E53935; border-right-color: #E53935; }
.macro.protein .macro-ring::after { border-top-color: #00897B; border-right-color: #00897B; }
.macro.carbs .macro-ring::after { border-top-color: #1E88E5; border-right-color: #1E88E5; }
.macro.fat .macro-ring::after { border-top-color: #FB8C00; border-right-color: #FB8C00; }

.macro-value {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--content-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--content-black);
    line-height: 1;
}

.macro-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.macro.cal .macro-label { color: #E53935; }
.macro.protein .macro-label { color: #00897B; }
.macro.carbs .macro-label { color: #1E88E5; }
.macro.fat .macro-label { color: #FB8C00; }

/* Meal Options - Pill Style */
.meal-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.option-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--content-light);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.option-toggle:hover {
    border-color: var(--content-border);
}

.option-toggle input {
    display: none;
}

.toggle-track {
    position: relative;
    width: 38px;
    height: 22px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 22px;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--content-white);
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.option-toggle input:checked + .toggle-track {
    background: var(--content-teal);
}

.option-toggle input:checked + .toggle-track::after {
    transform: translateX(16px);
}

.option-toggle:has(input:checked) {
    background: rgba(131, 173, 149, 0.1);
    border-color: var(--content-teal);
}

.toggle-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--content-black);
}

.toggle-label small {
    color: var(--content-flame);
    font-weight: 700;
    margin-left: 4px;
}

/* Meal Actions - Editorial Buttons */
.meal-actions {
    display: flex;
    gap: 10px;
}

.add-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--content-flame), #ff7043);
    color: var(--content-white);
    border: none;
    border-radius: 12px;
    font-family: var(--content-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(240, 90, 40, 0.3);
    position: relative;
    overflow: hidden;
}

.add-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.add-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(240, 90, 40, 0.4);
}

.add-btn:hover::before {
    left: 100%;
}

.add-btn.added-state {
    background: linear-gradient(135deg, var(--content-teal), #9CCC65);
    box-shadow: 0 4px 15px rgba(131, 173, 149, 0.3);
}

.add-btn.added-state:hover {
    box-shadow: 0 8px 25px rgba(131, 173, 149, 0.4);
}

.add-btn.adding {
    opacity: 0.8;
    cursor: wait;
}

.add-btn.adding::before {
    animation: shimmer 1s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.info-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--content-light);
    border: 2px solid var(--content-border);
    border-radius: 12px;
    color: var(--content-black);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.info-btn:hover {
    background: var(--content-black);
    border-color: var(--content-black);
    color: var(--content-white);
    transform: translateY(-3px);
}

/* Add-ons Section */
.menu-addons {
    padding: 100px 0;
    background: var(--content-white);
}

.addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
}

.addon-card {
    background: var(--content-white);
    border: 1px solid var(--content-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.addon-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-color: var(--content-flame);
}

.addon-card.in-cart {
    border-color: var(--content-teal);
    background: rgba(131, 173, 149, 0.05);
}

.addon-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.addon-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.addon-card:hover .addon-image img {
    transform: scale(1.05);
}

.addon-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    background: var(--content-teal);
    color: var(--content-white);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 15px;
}

.addon-content {
    padding: 20px;
}

.addon-name {
    font-family: var(--content-heading);
    font-size: 1.1rem;
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.addon-price {
    font-family: var(--content-heading);
    font-size: 1.3rem;
    color: var(--content-flame);
    margin-bottom: 12px;
}

.addon-date-select {
    margin-bottom: 12px;
}

.addon-product-date-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--content-light);
    border: 1px solid var(--content-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--content-charcoal);
    cursor: pointer;
}

.addon-product-date-select:focus {
    outline: none;
    border-color: var(--content-flame);
}

.addon-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--content-black);
    color: var(--content-white);
    border: none;
    border-radius: 10px;
    font-family: var(--content-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.addon-btn:hover {
    background: var(--content-flame);
}

.addon-btn.added-state {
    background: var(--content-teal);
}

/* Help Section */
.menu-help {
    padding: 60px 0;
    background: var(--content-black);
}

.help-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.help-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.help-icon i {
    font-size: 1.5rem;
    color: var(--content-flame);
}

.help-text {
    text-align: left;
}

.help-text h3 {
    font-family: var(--content-heading);
    font-size: 1.4rem;
    color: var(--content-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 5px;
}

.help-text p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.help-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    background: var(--content-flame);
    color: var(--content-white);
    border: none;
    border-radius: 12px;
    font-family: var(--content-heading);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.help-btn:hover {
    background: var(--content-flame-light);
    transform: translateY(-2px);
}

/* Toast Notification */
.menu-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 25px;
    background: var(--content-teal);
    color: var(--content-white);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    font-size: 0.95rem;
    font-weight: 500;
}

.toast-content i {
    font-size: 1.2rem;
}

.toast-link {
    color: var(--content-white);
    text-decoration: underline;
    font-weight: 600;
    margin-left: 10px;
}

.toast-link:hover {
    color: var(--content-white);
    opacity: 0.8;
}

/* Menu Page Responsive */
@media (max-width: 991px) {
    .menu-hero {
        padding: 100px 0 120px;
    }

    .menu-quick-nav {
        position: relative;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }

    .quick-nav-item {
        padding: 15px 25px;
        flex-shrink: 0;
    }

    .quick-nav-item.tour-btn {
        padding: 15px 25px;
    }

    .packages-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 0 auto;
    }

    .day-nav {
        justify-content: flex-start;
    }

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

    .help-content {
        flex-direction: column;
        text-align: center;
    }

    .help-text {
        text-align: center;
    }
}

@media (max-width: 767px) {
    .menu-hero {
        padding: 80px 0 100px;
    }

    .menu-hero h1 {
        font-size: 2.5rem;
    }

    .mode-pill label {
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    .menu-countdown-wrapper {
        padding: 20px;
    }

    .countdown-value {
        font-size: 1.8rem;
    }

    .countdown-unit {
        min-width: 45px;
    }

    .quick-nav-item {
        padding: 12px 18px;
        font-size: 0.75rem;
    }

    .quick-nav-item i {
        font-size: 1rem;
    }

    .quick-nav-item.tour-btn {
        padding: 12px 20px;
    }

    .menu-packages,
    .menu-alacarte,
    .menu-addons {
        padding: 60px 0;
    }

    .section-header {
        margin-bottom: 35px;
    }

    .day-nav-item {
        padding: 15px 20px;
        min-width: 85px;
    }

    .meals-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Meal card responsive adjustments */
    .meal-content {
        padding: 20px;
    }

    .meal-name {
        font-size: 1.2rem;
    }

    .meal-macros {
        padding: 12px;
        gap: 4px;
    }

    .macro-ring {
        width: 38px;
        height: 38px;
    }

    .macro-ring::after {
        width: 38px;
        height: 38px;
    }

    .macro-value {
        top: 10px;
        font-size: 0.75rem;
    }

    .macro-label {
        font-size: 0.55rem;
    }

    .option-toggle {
        padding: 8px 12px;
    }

    .toggle-label {
        font-size: 0.75rem;
    }

    .add-btn {
        padding: 12px 18px;
        font-size: 0.8rem;
    }

    .info-btn {
        width: 44px;
        height: 44px;
    }

    .addons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .addon-content {
        padding: 15px;
    }

    .addon-name {
        font-size: 0.95rem;
    }

    .menu-help {
        padding: 50px 0;
    }

    .help-icon {
        width: 50px;
        height: 50px;
    }

    .help-text h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .mode-pill label {
        padding: 8px 15px;
        font-size: 0.8rem;
    }

    .mode-pill label i {
        display: none;
    }

    .countdown-unit {
        min-width: 40px;
    }

    .countdown-value {
        font-size: 1.5rem;
    }

    .countdown-separator {
        font-size: 1.5rem;
    }

    .addons-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
        margin: 0 auto;
    }
}

/*========================================
    DRIVER.JS TOUR - BRANDED STYLING
=========================================*/

/* Overlay - lighter to show content */
.driver-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Popover Container - Light theme */
.driver-popover {
    background: var(--content-white) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
    padding: 0 !important;
    max-width: 300px !important;
    overflow: hidden;
}

/* Arrow */
.driver-popover-arrow {
    border: 10px solid transparent !important;
}

.driver-popover-arrow-side-left {
    border-left-color: var(--content-white) !important;
}

.driver-popover-arrow-side-right {
    border-right-color: var(--content-white) !important;
}

.driver-popover-arrow-side-top {
    border-top-color: var(--content-white) !important;
}

.driver-popover-arrow-side-bottom {
    border-bottom-color: var(--content-white) !important;
}

/* Title Section */
.driver-popover-title {
    font-family: var(--content-heading) !important;
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    color: var(--content-black) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 20px 20px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    position: relative;
}

.driver-popover-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    width: 50px;
    height: 3px;
    background: var(--content-flame);
    border-radius: 2px;
}

/* Description */
.driver-popover-description {
    font-family: var(--content-body) !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: var(--content-slate) !important;
    padding: 10px 20px 15px !important;
    margin: 0 !important;
}

/* Progress Bar */
.driver-popover-progress-text {
    font-family: var(--content-body) !important;
    font-size: 0.65rem !important;
    color: var(--content-slate) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    margin: 0 10px 0 0 !important;
    opacity: 0.5;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Footer / Navigation */
.driver-popover-footer {
    padding: 15px 20px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border-top: none !important;
    margin-top: 0 !important;
}

/* Navigation Buttons */
.driver-popover-footer button {
    font-family: var(--content-body) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

/* Previous Button */
.driver-popover-prev-btn {
    background: var(--content-light) !important;
    color: var(--content-slate) !important;
}

.driver-popover-prev-btn:hover {
    background: var(--content-border) !important;
    color: var(--content-black) !important;
}

/* Next Button */
.driver-popover-next-btn {
    background: var(--content-flame) !important;
    color: var(--content-white) !important;
    margin-left: auto !important;
}

.driver-popover-next-btn:hover {
    background: var(--content-flame-light) !important;
}

/* Close Button */
.driver-popover-close-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    color: var(--content-slate) !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex: none !important;
}

.driver-popover-close-btn:hover {
    background: var(--content-light) !important;
    color: var(--content-black) !important;
}

/* Highlighted Element - inset border */
.driver-active-element {
    position: relative !important;
    z-index: 10000 !important;
    box-shadow: inset 0 0 0 3px var(--content-flame) !important;
}

/* Animation for popover appearance */
.driver-popover {
    animation: tourPopoverIn 0.3s ease-out !important;
}

@keyframes tourPopoverIn {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Progress dots instead of text (optional enhancement) */
.driver-popover-navigation-btns {
    display: flex !important;
    gap: 10px !important;
}

/* Done button styling */
.driver-popover-done-btn {
    background: var(--content-teal) !important;
    color: var(--content-white) !important;
    box-shadow: 0 4px 12px rgba(131, 173, 149, 0.3) !important;
}

.driver-popover-done-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(131, 173, 149, 0.4) !important;
}

/*========================================
    PRODUCT PANEL - EDITORIAL REDESIGN
=========================================*/

/* Modal Override */
#product-view .modal-dialog {
    max-width: 900px;
    margin: 100px auto 30px;
}

#product-view .modal-content {
    background: var(--content-white);
    border: none;
    border-radius: 20px;
    overflow: visible;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

#product-view .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: var(--content-black);
    border: none;
    border-radius: 50%;
    color: var(--content-white);
    font-size: 1rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#product-view .modal-close:hover {
    background: var(--content-flame);
    transform: rotate(90deg);
}

/* Product Panel */
.product-panel {
    display: flex;
    flex-direction: column;
}

.product-panel-header {
    background: var(--content-black);
    padding: 15px 25px;
}

.delivery-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--content-white);
    font-size: 0.85rem;
}

.delivery-badge i {
    color: var(--content-flame);
}

.product-panel-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Image Section */
.product-panel-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--content-light);
}

.product-panel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.day-badge {
    padding: 6px 14px;
    font-family: var(--content-heading);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 20px;
    color: var(--content-white);
}

.day-badge.sunday { background: var(--content-flame); }
.day-badge.tuesday { background: #2196f3; }
.day-badge.wednesday { background: var(--content-teal); }

.diet-badge {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--content-white);
    font-size: 0.85rem;
}

.diet-badge.veg { background: #4CAF50; }
.diet-badge.spicy { background: #B90F10; }

/* Details Section */
.product-panel-details {
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.product-panel-name {
    font-family: var(--content-heading);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-bottom: 10px;
}

.product-panel-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 15px;
}

.price-value {
    font-family: var(--content-heading);
    font-size: 2rem;
    color: var(--content-flame);
}

.price-unit {
    font-size: 0.85rem;
    color: var(--content-slate);
}

.product-panel-desc {
    font-size: 0.9rem;
    color: var(--content-slate);
    line-height: 1.6;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--content-border);
}

/* Macros - Editorial Circular Ring Design */
.product-panel-macros {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px 25px;
    background: linear-gradient(135deg, var(--content-light) 0%, rgba(240, 90, 40, 0.03) 100%);
    border-radius: 16px;
}

.product-panel-macros .macro-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.product-panel-macros .macro-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid var(--content-border);
    position: relative;
    margin-bottom: 10px;
}

.product-panel-macros .macro-ring::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: inherit;
    border-right-color: inherit;
}

.product-panel-macros .macro-item.cal .macro-ring::after { border-top-color: #E53935; border-right-color: #E53935; }
.product-panel-macros .macro-item.protein .macro-ring::after { border-top-color: #00897B; border-right-color: #00897B; }
.product-panel-macros .macro-item.carbs .macro-ring::after { border-top-color: #1E88E5; border-right-color: #1E88E5; }
.product-panel-macros .macro-item.fat .macro-ring::after { border-top-color: #FB8C00; border-right-color: #FB8C00; }

.product-panel-macros .macro-value {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--content-heading);
    font-size: 1.1rem;
    color: var(--content-black);
    line-height: 1;
}

.product-panel-macros .macro-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.product-panel-macros .macro-item.cal .macro-label { color: #E53935; }
.product-panel-macros .macro-item.protein .macro-label { color: #00897B; }
.product-panel-macros .macro-item.carbs .macro-label { color: #1E88E5; }
.product-panel-macros .macro-item.fat .macro-label { color: #FB8C00; }

/* Options */
.product-panel-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.option-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-label {
    font-family: var(--content-heading);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--content-charcoal);
}

/* Size Selector */
.size-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.size-option input {
    display: none;
}

.size-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 10px;
    border: 2px solid var(--content-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.size-option input:checked + .size-btn {
    border-color: var(--content-flame);
    background: rgba(240, 90, 40, 0.05);
}

.size-btn:hover {
    border-color: var(--content-flame);
}

.size-name {
    font-family: var(--content-heading);
    font-size: 1rem;
    color: var(--content-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.size-info {
    font-size: 0.7rem;
    color: var(--content-slate);
    margin: 2px 0;
}

.size-price {
    font-family: var(--content-heading);
    font-size: 0.9rem;
    color: var(--content-flame);
}

/* Toggle Options */
.toggle-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toggle-option {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.toggle-option input {
    display: none;
}

.toggle-option .toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--content-border);
    border-radius: 24px;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.toggle-option .toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--content-white);
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-option input:checked + .toggle-track {
    background: var(--content-teal);
}

.toggle-option input:checked + .toggle-track::after {
    transform: translateX(20px);
}

.toggle-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-name {
    font-size: 0.9rem;
    color: var(--content-charcoal);
    font-weight: 500;
}

.toggle-price {
    font-size: 0.85rem;
    color: var(--content-flame);
    font-weight: 600;
}

/* Actions */
.product-panel-actions {
    display: flex;
    gap: 15px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--content-border);
}

.quantity-selector {
    display: flex;
    align-items: center;
    background: var(--content-light);
    border-radius: 12px;
    overflow: hidden;
}

.qty-btn {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    color: var(--content-charcoal);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover:not(:disabled) {
    background: var(--content-border);
    color: var(--content-black);
}

.qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.qty-input {
    width: 50px;
    height: 44px;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--content-heading);
    font-size: 1.2rem;
    color: var(--content-black);
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.add-to-cart-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 30px;
    height: 50px;
    background: var(--content-flame);
    color: var(--content-white);
    border: none;
    border-radius: 12px;
    font-family: var(--content-heading);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-to-cart-btn:hover {
    background: var(--content-flame-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(240, 90, 40, 0.3);
}

.add-to-cart-btn i {
    font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
    #product-view .modal-dialog {
        margin: 15px;
    }

    .product-panel-body {
        grid-template-columns: 1fr;
    }

    .product-panel-image {
        aspect-ratio: 16/10;
    }

    .product-panel-details {
        padding: 25px 20px;
    }

    .product-panel-macros {
        padding: 15px;
        gap: 10px;
    }

    .product-panel-macros .macro-ring {
        width: 50px;
        height: 50px;
    }

    .product-panel-macros .macro-ring::after {
        width: 50px;
        height: 50px;
    }

    .product-panel-macros .macro-value {
        top: 14px;
        font-size: 1rem;
    }

    .product-panel-macros .macro-label {
        font-size: 0.6rem;
    }

    .size-selector {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .size-btn {
        flex-direction: row;
        justify-content: space-between;
        padding: 12px 15px;
    }

    .size-name {
        order: 1;
    }

    .size-info {
        order: 2;
        margin: 0 auto 0 10px;
    }

    .size-price {
        order: 3;
    }

    .product-panel-actions {
        flex-direction: column;
    }

    .quantity-selector {
        justify-content: center;
    }
}

/*========================================
    HOMEPAGE PATH SELECTION
    Subscribe vs One-Time Order
=========================================*/

.hp-path-selection {
    padding: 80px 0;
    background: var(--content-white);
}

.hp-path-header {
    text-align: center;
    margin-bottom: 50px;
}

.hp-path-header .section-eyebrow {
    display: block;
    font-family: var(--content-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--content-flame);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
}

.hp-path-header h2 {
    font-family: var(--content-heading);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 400;
    color: var(--content-black);
    margin: 0;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-transform: uppercase;
}

.hp-path-header h2 span {
    color: var(--content-flame);
}

.hp-path-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.hp-path-card {
    position: relative;
    background: var(--content-white);
    border: 2px solid var(--content-border);
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.hp-path-card:hover {
    border-color: var(--content-flame);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(240, 90, 40, 0.15);
}

.hp-path-card.featured {
    border-color: var(--content-flame);
    background: linear-gradient(135deg, rgba(240, 90, 40, 0.03) 0%, rgba(240, 90, 40, 0.08) 100%);
}

.hp-path-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--content-flame);
    color: var(--content-white);
    font-family: var(--content-body);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hp-path-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--content-flame) 0%, var(--content-flame-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--content-white);
}

.hp-path-card:not(.featured) .hp-path-icon {
    background: linear-gradient(135deg, var(--content-slate) 0%, var(--content-charcoal) 100%);
}

.hp-path-card h3 {
    font-family: var(--content-heading);
    font-size: 2rem;
    font-weight: 400;
    color: var(--content-black);
    margin: 0 0 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hp-path-subtitle {
    font-family: var(--content-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--content-stone);
    margin-bottom: 25px;
}

.hp-path-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    text-align: left;
}

.hp-path-features li {
    font-family: var(--content-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--content-charcoal);
    padding: 10px 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.hp-path-features li i {
    color: var(--content-teal);
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}

.hp-path-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--content-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    text-decoration: none;
}

.hp-path-btn.primary {
    background: linear-gradient(135deg, var(--content-flame) 0%, var(--content-flame-dark) 100%);
    color: var(--content-white);
}

.hp-path-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(240, 90, 40, 0.35);
}

.hp-path-btn.secondary {
    background: var(--content-charcoal);
    color: var(--content-white);
}

.hp-path-btn.secondary:hover {
    background: var(--content-black);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .hp-path-selection {
        padding: 50px 0;
    }

    .hp-path-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hp-path-card {
        padding: 30px 20px;
    }

    .hp-path-header h2 {
        font-size: 2rem;
    }

    .hp-path-card h3 {
        font-size: 1.6rem;
    }

    .hp-path-features {
        margin-bottom: 25px;
    }
}

/* Start date dropdown fix - prevent text cutoff */
#start-date-select {
    padding: 10px 16px !important;
    line-height: 1.4 !important;
    height: auto !important;
}

/* ========================================
   Subscription Confirmation Page Styles
   ======================================== */

/* Feature List */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.feature-list li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    border-bottom: 1px solid var(--content-border);
}

.feature-list li:last-child {
    border-bottom: none;
}

.feature-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--content-flame);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.875rem;
}

/* Review Grid Layout */
.review-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
}

.review-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.review-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 2rem;
}

/* Review Details */
.review-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.review-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--content-border);
}

.review-detail-row:last-child {
    border-bottom: none;
}

.review-detail-row.highlight {
    background: linear-gradient(135deg, rgba(240, 90, 40, 0.1) 0%, rgba(240, 90, 40, 0.05) 100%);
    padding: 1rem 1.25rem;
    margin: 0 -1.25rem;
    border-radius: 8px;
    border-bottom: none;
}

.review-detail-row.highlight .review-label {
    color: var(--content-flame);
    font-weight: 600;
}

.review-detail-row.highlight .review-label i {
    margin-right: 0.5rem;
}

.review-label {
    font-weight: 500;
    color: var(--content-charcoal);
}

.review-value {
    font-weight: 600;
    color: var(--content-stone);
    text-align: right;
}

/* Pricing Card */
.pricing-card {
    border: 2px solid var(--content-flame);
}

.pricing-card .content-card-header {
    background: linear-gradient(135deg, var(--content-flame) 0%, var(--content-flame-light) 100%);
    color: white;
}

.pricing-card .content-card-header h3 {
    color: white;
    margin: 0;
}

.pricing-card .content-card-header h3 i {
    color: white;
}

.pricing-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-row:last-child {
    border-bottom: none;
}

.pricing-row.discount {
    color: rgba(255, 255, 255, 0.9);
}

.pricing-row.total {
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    border-bottom: none;
    font-size: 1.25rem;
    font-weight: 700;
}

.pricing-amount {
    font-weight: 700;
    font-size: 1.125rem;
}

.pricing-amount small {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
    display: block;
    margin-top: 0.25rem;
}

/* Submit Card */
.submit-card {
    background: linear-gradient(135deg, var(--content-light) 0%, white 100%);
    border: 2px solid var(--content-flame);
}

.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
}

.terms-check .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    cursor: pointer;
    accent-color: var(--content-flame);
}

.terms-check .form-check-label {
    flex: 1;
    cursor: pointer;
    line-height: 1.5;
}

.terms-check .form-check-label a {
    color: var(--content-flame);
    text-decoration: underline;
}

.terms-check .form-check-label a:hover {
    color: var(--content-flame-dark);
}

/* Form Actions */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    color: var(--content-stone);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.btn-link:hover {
    color: var(--content-flame);
    background: var(--content-light);
    text-decoration: none;
}

/* Alert styles */
.alert {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert i {
    font-size: 1.25rem;
}

.alert-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .review-grid {
        grid-template-columns: 1fr;
    }

    .review-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .review-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .review-value {
        text-align: left;
    }

    .pricing-row {
        font-size: 0.9375rem;
    }

    .pricing-amount {
        font-size: 1rem;
    }

    .pricing-row.total {
        font-size: 1.125rem;
    }

    .content-hero {
        padding: 60px 0 40px;
    }

    .content-hero h1 {
        font-size: 2.5rem;
    }
}

/* ========================================
   Subscription Review Page Styles
   ======================================== */

/* Compact Hero */
.content-hero-compact {
    padding: 60px 0 40px;
}

/* Section with spacing after hero */
.content-section-with-spacing {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Review Grid Layout */
.review-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
}

.review-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.review-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 2rem;
}

/* Review Details */
.review-details {
    display: flex;
    flex-direction: column;
}

.review-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--content-border);
}

.review-detail-row:last-child {
    border-bottom: none;
}

.review-detail-row.highlight {
    background: linear-gradient(135deg, rgba(240, 90, 40, 0.08) 0%, rgba(240, 90, 40, 0.04) 100%);
    padding: 1rem 1.25rem;
    margin: 0 -1.25rem;
    border-radius: 8px;
    border-bottom: none;
}

.review-detail-row.highlight .review-label {
    color: var(--content-flame);
    font-weight: 600;
}

.review-detail-row.highlight .review-label i {
    margin-right: 0.5rem;
}

.review-label {
    font-weight: 500;
    color: var(--content-charcoal);
}

.review-value {
    font-weight: 600;
    color: var(--content-stone);
    text-align: right;
}

/* Pricing Card */
.pricing-card {
    border: 2px solid var(--content-flame);
}

.pricing-card .content-card-header {
    background: linear-gradient(135deg, var(--content-flame) 0%, var(--content-flame-light) 100%);
    color: white;
}

.pricing-card .content-card-header h3 {
    color: white;
    margin: 0;
}

.pricing-card .content-card-header h3 i {
    color: white;
}

.pricing-summary {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--content-border);
}

.pricing-row:last-child {
    border-bottom: none;
}

.pricing-row.discount {
    color: #4CAF50;
}

.pricing-row.total {
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 2px solid var(--content-border);
    font-size: 1.125rem;
    font-weight: 700;
}

.pricing-amount {
    font-weight: 700;
    font-size: 1.125rem;
}

.pricing-amount small {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
    display: block;
    margin-top: 0.25rem;
}

.pricing-badge {
    margin-top: 1rem;
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Submit Card */
.submit-card {
    background: linear-gradient(135deg, var(--content-light) 0%, white 100%);
    border: 2px solid var(--content-flame);
}

.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
}

.terms-check .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    cursor: pointer;
    accent-color: var(--content-flame);
}

.terms-check .form-check-label {
    flex: 1;
    cursor: pointer;
    line-height: 1.5;
}

.terms-check .form-check-label a {
    color: var(--content-flame);
    text-decoration: underline;
}

.terms-check .form-check-label a:hover {
    color: var(--content-flame-dark);
}

/* Form Actions */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    color: var(--content-stone);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.btn-link:hover {
    color: var(--content-flame);
    background: var(--content-light);
    text-decoration: none;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100001;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal.active {
    display: flex;
}

.modal-dialog {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: var(--content-light);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: var(--content-flame);
    color: white;
}

.modal-body {
    padding: 2rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .review-grid {
        grid-template-columns: 1fr;
    }

    .review-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .review-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .review-value {
        text-align: left;
    }

    .pricing-row {
        font-size: 0.9375rem;
    }

    .pricing-amount {
        font-size: 1rem;
    }

    .pricing-row.total {
        font-size: 1.125rem;
    }

    .content-hero-compact {
        padding: 40px 0 30px;
    }

    .content-hero-compact h1 {
        font-size: 2rem;
    }
}

/* Selection Grid (for addresses and payment cards) */
.selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.selection-item {
    background: white;
    border: 2px solid var(--content-border);
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.selection-item:hover {
    border-color: var(--content-flame-light);
    box-shadow: 0 4px 12px rgba(240, 90, 40, 0.1);
    transform: translateY(-2px);
}

.selection-item.selected {
    border-color: var(--content-flame);
    background: linear-gradient(135deg, rgba(240, 90, 40, 0.05) 0%, rgba(240, 90, 40, 0.02) 100%);
}

.selection-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.selection-item-header > i:first-child {
    color: var(--content-flame);
    font-size: 1.25rem;
}

.selection-item-header span {
    flex: 1;
    font-weight: 600;
    color: var(--content-charcoal);
}

.selection-checked {
    color: #4CAF50 !important;
    font-size: 1.25rem;
}

.selection-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.selection-item-address,
.selection-item-card-number {
    font-size: 0.9375rem;
    color: var(--content-charcoal);
    margin: 0;
}

.selection-item-notes {
    font-size: 0.875rem;
    color: var(--content-stone);
    margin: 0;
    font-style: italic;
}

.selection-item-cardholder {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--content-stone);
    margin: 0;
}

.selection-item-delete {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    background: var(--content-light);
    border: none;
    border-radius: 6px;
    color: var(--content-stone);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selection-item-delete:hover {
    background: #dc3545;
    color: white;
}

.selection-empty {
    background: var(--content-light);
    border: 2px dashed var(--content-border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    color: var(--content-stone);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.selection-empty:hover {
    border-color: var(--content-flame);
    color: var(--content-flame);
    background: rgba(240, 90, 40, 0.05);
}

.selection-empty i {
    font-size: 2rem;
}

/* Responsive adjustments for selection grid */
@media (max-width: 768px) {
    .selection-grid {
        grid-template-columns: 1fr;
    }
}

/* Terms Agreement Checkbox */
.terms-agreement {
    margin-bottom: 1.5rem;
}

.terms-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--content-light);
    border-radius: 8px;
    border: 1px solid var(--content-border);
    transition: all 0.3s ease;
}

.terms-checkbox-wrapper:hover {
    border-color: var(--content-flame-light);
    background: rgba(240, 90, 40, 0.02);
}

.terms-checkbox {
    width: 20px;
    height: 20px;
    margin-top: 0.125rem;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--content-flame);
}

.terms-label {
    margin: 0;
    cursor: pointer;
    flex: 1;
}

.terms-checkbox-text {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--content-charcoal);
}

.terms-link {
    color: var(--content-flame);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.terms-link:hover {
    color: var(--content-flame-dark);
    text-decoration: underline;
}

.terms-agreement .text-danger {
    margin-left: 2.5rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

/* Submit Card with Pricing - Simple Version */
.submit-pricing {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(240, 90, 40, 0.05) 0%, rgba(240, 90, 40, 0.02) 100%);
    border-radius: 8px;
    border: 1px solid var(--content-flame);
}

.submit-pricing .pricing-summary {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.submit-pricing .pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.submit-pricing .pricing-row.total.large {
    font-size: 1.25rem;
}

.submit-pricing .pricing-row.total.large span {
    font-weight: 700;
    color: var(--content-charcoal);
}

.submit-pricing .pricing-amount {
    color: var(--content-flame);
}

.submit-pricing small {
    font-size: 0.75em;
    opacity: 0.8;
    font-weight: normal;
}

/* Coupon / Gift Voucher Section */
.coupon-section {
    margin-bottom: 1.5rem;
}

.coupon-toggle {
    width: 100%;
    padding: 0.75rem 1rem;
    background: white;
    border: 2px dashed var(--content-flame);
    border-radius: 8px;
    color: var(--content-flame);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.coupon-toggle:hover {
    background: rgba(240, 90, 40, 0.05);
    border-color: var(--content-flame-dark);
}

.coupon-toggle i {
    font-size: 1rem;
}

#js-code-form {
    margin-top: 1rem;
}

#js-code-form .nav-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--content-border);
    margin-bottom: 1rem !important;
}

#js-code-form .nav-tabs li {
    margin-bottom: 0;
}

#js-code-form .tab-link {
    padding: 0.75rem 1.5rem;
    color: var(--content-stone);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    display: block;
}

#js-code-form .tab-link:hover {
    color: var(--content-flame);
}

#js-code-form .tab-link.active {
    color: var(--content-flame);
    border-bottom-color: var(--content-flame);
}

.coupon-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.coupon-input-group .form-control {
    flex: 1;
    height: 42px;
    border: 1px solid var(--content-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
}

.coupon-input-group .form-control:focus {
    outline: none;
    border-color: var(--content-flame);
    box-shadow: 0 0 0 3px rgba(240, 90, 40, 0.1);
}

.coupon-input-group .btn {
    padding: 0.5rem 1.25rem;
    height: 42px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 6px;
}

.coupon-applied {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
    border: 1px solid #4CAF50;
    border-radius: 8px;
    font-size: 0.9375rem;
}

.coupon-applied i.fa-check-circle {
    color: #4CAF50;
    font-size: 1rem;
}

.coupon-applied strong {
    color: #4CAF50;
}

.coupon-remove {
    margin-left: auto;
    color: #dc3545;
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
}

.coupon-remove:hover {
    color: #c82333;
    text-decoration: none;
}

#js-coupon-error,
#js-voucher-message-subscription {
    font-size: 0.875rem;
}

/* Fixed Coupon / Gift Voucher Section Styles */
.coupon-section {
    margin-bottom: 1.5rem;
}

.coupon-toggle {
    width: 100%;
    padding: 0.875rem 1rem;
    background: white;
    border: 2px dashed var(--content-flame);
    border-radius: 8px;
    color: var(--content-flame);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.coupon-toggle:hover {
    background: rgba(240, 90, 40, 0.05);
    border-color: var(--content-flame-dark);
}

.coupon-toggle:active {
    transform: scale(0.98);
}

#js-code-form {
    margin-top: 1rem;
}

#js-code-form .nav-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--content-border);
    margin-bottom: 1rem !important;
    list-style: none;
    padding: 0;
}

#js-code-form .nav-tabs .nav-item {
    margin-bottom: 0;
}

#js-code-form .tab-link {
    padding: 0.75rem 1.5rem;
    color: var(--content-stone);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    display: block;
}

#js-code-form .tab-link:hover {
    color: var(--content-flame);
}

#js-code-form .tab-link.active {
    color: var(--content-flame);
    border-bottom-color: var(--content-flame);
}

.coupon-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.coupon-input-group .form-control {
    flex: 1;
    height: 42px;
    border: 1px solid var(--content-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    transition: all 0.3s ease;
}

.coupon-input-group .form-control:focus {
    outline: none;
    border-color: var(--content-flame);
    box-shadow: 0 0 0 3px rgba(240, 90, 40, 0.1);
}

.coupon-input-group .btn {
    padding: 0.5rem 1.25rem;
    height: 42px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
}

.coupon-applied {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
    border: 1px solid #4CAF50;
    border-radius: 8px;
    font-size: 0.9375rem;
    margin: 0;
}

.coupon-applied i.fa-check-circle {
    color: #4CAF50;
    font-size: 1.125rem;
}

.coupon-applied strong {
    color: #4CAF50;
    font-weight: 600;
}

.coupon-remove {
    margin-left: auto;
    color: #dc3545;
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
    font-weight: 500;
}

.coupon-remove:hover {
    color: #c82333;
    text-decoration: none;
}

.coupon-remove i {
    font-size: 0.875rem;
}

#js-coupon-error,
#js-voucher-message-subscription {
    font-size: 0.875rem;
}

/* Tab content fixes */
.tab-content > .tab-pane {
    display: none;
}

.tab-content > .tab-pane.active {
    display: block;
}

.tab-content > .tab-pane.show {
    display: block;
}

/* Mobile: Move back button below submit button */
@media (max-width: 991px) {
    .review-main .form-actions {
        display: none;
    }

    .submit-card .content-card-body {
        display: flex;
        flex-direction: column;
    }

    .submit-card .content-card-body > * {
        order: 1;
    }

    /* Add back button at bottom of submit card */
    .submit-card .content-card-body::after {
        content: "";
        order: 3;
    }

    .mobile-back-link {
        order: 4;
        margin-top: 1rem;
    }
}

/* Mobile: Move back button below submit button */
.mobile-back-link {
    display: none;
}

@media (max-width: 991px) {
    .review-main .form-actions:not(.mobile-back-link) {
        display: none;
    }

    .mobile-back-link {
        display: block;
        order: 4;
        margin-top: 1rem;
    }

    .submit-card .content-card-body {
        display: flex;
        flex-direction: column;
    }

    .submit-card .content-card-body > * {
        order: 1;
    }

    .submit-pricing {
        order: 1 !important;
    }

    .terms-agreement {
        order: 2 !important;
    }

    .form-actions:not(.mobile-back-link) {
        order: 3 !important;
    }

    .mobile-back-link {
        order: 4 !important;
    }
}

/* Improved Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100001;
    padding: 20px;
}

.modal.active {
    display: flex;
}

.modal-dialog {
    width: 100%;
    max-width: 500px;
    position: relative;
}

.modal-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--content-light);
    color: var(--content-stone);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.modal-close:hover {
    background: var(--content-flame);
    color: white;
    transform: rotate(90deg);
}

.modal-body {
    padding: 2rem;
}

.modal-form .form-title {
    margin-bottom: 1.5rem;
    text-align: center;
}

.modal-form .form-title h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--content-charcoal);
}

.modal-form .form-group {
    margin-bottom: 1.25rem;
}

.modal-form .form-control {
    border: 2px solid var(--content-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    transition: all 0.3s ease;
    background: white;
}

.modal-form .form-control:focus {
    border-color: var(--content-flame);
    box-shadow: 0 0 0 3px rgba(240, 90, 40, 0.1);
}

.modal-form .form-control:disabled {
    background: var(--content-light);
    color: var(--content-stone);
}

.modal-form .form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--content-charcoal);
    margin-bottom: 0.5rem;
}

.modal-form .form-floating label {
    font-size: 0.875rem;
    color: var(--content-stone);
}

.modal-form textarea.form-control {
    min-height: 80px;
    resize: vertical;
}

.modal-form .form-btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--content-flame);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.modal-form .form-btn:hover {
    background: var(--content-flame-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(240, 90, 40, 0.3);
}

.modal-form .form-btn:active {
    transform: translateY(0);
}

/* Select dropdown styling */
.modal-form select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem !important;
    cursor: pointer;
}

/* Modal responsive */
@media (max-width: 575px) {
    .modal {
        padding: 15px;
    }

    .modal-body {
        padding: 1.5rem;
    }

    .modal-form .form-title h3 {
        font-size: 1.25rem;
    }
}

/* Improved Modal Styles - Override old styles */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100001 !important;
    padding: 20px;
}

.modal.active {
    display: flex !important;
}

.modal-dialog {
    width: 100% !important;
    max-width: 500px !important;
    position: relative !important;
    margin: 0 !important;
}

.modal-content {
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
    position: relative !important;
    border: none !important;
}

.modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--content-light) !important;
    color: var(--content-stone) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    line-height: 1 !important;
}

.modal-close:hover {
    background: var(--content-flame) !important;
    color: white !important;
    transform: rotate(90deg) !important;
}

.modal-body {
    padding: 2rem !important;
}

.modal-form {
    width: 100% !important;
    max-width: 500px !important;
    padding: 0 !important;
    background: transparent !important;
}

.modal-form .form-title {
    margin-bottom: 1.5rem !important;
    text-align: center !important;
}

.modal-form .form-title h3 {
    margin: 0 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--content-charcoal) !important;
    text-transform: capitalize !important;
}

.modal-form .form-group {
    margin-bottom: 1.25rem !important;
}

.modal-form .form-control {
    border: 2px solid var(--content-border) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
    transition: all 0.3s ease !important;
    background: white !important;
    height: auto !important;
}

.modal-form .form-control:focus {
    border-color: var(--content-flame) !important;
    box-shadow: 0 0 0 3px rgba(240, 90, 40, 0.1) !important;
}

.modal-form .form-control:disabled {
    background: var(--content-light) !important;
    color: var(--content-stone) !important;
}

.modal-form .form-label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--content-charcoal) !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

.modal-form textarea.form-control {
    min-height: 80px !important;
    resize: vertical !important;
}

.modal-form .form-btn {
    width: 100% !important;
    padding: 0.875rem 1.5rem !important;
    background: var(--content-flame) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: capitalize !important;
}

.modal-form .form-btn:hover {
    background: var(--content-flame-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(240, 90, 40, 0.3) !important;
}

.modal-form .form-btn:active {
    transform: translateY(0) !important;
}

/* Select dropdown styling */
.modal-form select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    padding-right: 2.5rem !important;
    cursor: pointer !important;
}

/* Modal responsive */
@media (max-width: 575px) {
    .modal {
        padding: 15px !important;
    }

    .modal-body {
        padding: 1.5rem !important;
    }

    .modal-form .form-title h3 {
        font-size: 1.25rem !important;
    }
}

/*========================================
    COMMITMENT UPSELL CARD
=========================================*/

.commitment-upsell-card {
    position: relative;
    background: linear-gradient(135deg, rgba(240, 90, 40, 0.08) 0%, rgba(240, 90, 40, 0.02) 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    overflow: hidden;
    animation: commitmentPulse 3s ease-in-out infinite;
}

.commitment-upsell-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(240, 90, 40, 0.3), rgba(240, 90, 40, 0.05));
    border-radius: 16px;
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6;
}

@keyframes commitmentPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(240, 90, 40, 0), 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(240, 90, 40, 0.1), 0 4px 25px rgba(240, 90, 40, 0.15);
    }
}

.commitment-visual {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.commitment-icon-ring {
    position: relative;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #ff6b00 0%, #ff8533 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 8px 24px rgba(240, 90, 40, 0.3),
                0 0 0 0 rgba(240, 90, 40, 0.4);
    animation: iconGlow 2s ease-in-out infinite;
}

.commitment-icon-ring::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(135deg, #ff6b00, #ffab40, #ff6b00);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.5;
    filter: blur(8px);
    animation: rotateGradient 3s linear infinite;
}

@keyframes iconGlow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 24px rgba(240, 90, 40, 0.3), 0 0 0 0 rgba(240, 90, 40, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 32px rgba(240, 90, 40, 0.4), 0 0 0 8px rgba(240, 90, 40, 0.2);
    }
}

@keyframes rotateGradient {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.commitment-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.commitment-title {
    font-family: var(--content-body);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--content-charcoal);
    margin: 0 0 0.5rem 0;
    letter-spacing: 0.02em;
    text-transform: none;
}

.commitment-text {
    font-family: var(--content-body);
    font-size: 0.9rem;
    color: var(--content-stone);
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

.commitment-subtext {
    font-family: var(--content-body);
    font-size: 0.75rem;
    color: var(--content-stone);
    margin: 0;
    line-height: 1.4;
    opacity: 0.85;
}

.commitment-subtext small {
    font-size: inherit;
}

.commitment-sparkles {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    pointer-events: none;
    overflow: hidden;
}

.sparkle {
    position: absolute;
    color: #ff6b00;
    font-size: 0.875rem;
    opacity: 0;
    animation: sparkleFloat 3s ease-in-out infinite;
}

.sparkle-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.sparkle-2 {
    top: 30%;
    right: 15%;
    animation-delay: 1s;
    font-size: 0.625rem;
}

.sparkle-3 {
    bottom: 25%;
    left: 20%;
    animation-delay: 2s;
    font-size: 0.75rem;
}

@keyframes sparkleFloat {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) rotate(0deg);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-8px) rotate(180deg);
    }
}

/* Responsive */
@media (max-width: 575px) {
    .commitment-upsell-card {
        padding: 1.25rem;
    }

    .commitment-icon-ring {
        width: 56px;
        height: 56px;
        font-size: 1.25rem;
    }

    .commitment-title {
        font-size: 1rem;
    }

    .commitment-text {
        font-size: 0.85rem;
    }
}