/* ================================================
   FARM TO TABLE — PREMIUM BLACK & WHITE THEME
   ================================================ */

:root {
  --ink:     #0A0A0A !important;
  --ink2:    #141414 !important;
  --ink3:    #1E1E1E !important;
  --leaf:    #1A1A1A !important;
  --leaf2:   #333333 !important;
  --leaf3:   #888888 !important;
  --gold:    #B0B0B0 !important;
  --gold2:   #D8D8D8 !important;
  --gold3:   #F2F2F2 !important;
  --cream:   #F8F8F8 !important;
  --cream2:  #F0F0F0 !important;
  --warm:    #E5E5E5 !important;
  --mist:    #FAFAFA !important;
  --stone:   #707070 !important;
  --stone2:  #A8A8A8 !important;
  --white:   #FFFFFF !important;
}

/* ---- BODY ---- */
body { background: #FAFAFA; color: #0A0A0A; }

/* ---- LOADER ---- */
.loader-line  { background: #888888 !important; }

/* ---- NAVBAR ---- */
nav.scrolled  { background: rgba(10,10,10,0.95) !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.nav-brand-sub { color: #888888 !important; }
.nav-links a::after { background: #888888 !important; }
.nav-order    { background: #1A1A1A !important; color: #fff !important; }
.nav-order:hover { background: #333333 !important; }
.nav-mobile-menu { background: rgba(10,10,10,0.98) !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }

/* ---- HERO ---- */
.hero-left    { background: #0A0A0A !important; }
.hero-left::before { background: radial-gradient(ellipse at 30% 70%, rgba(80,80,80,0.2) 0%, transparent 60%) !important; }
.hero-tag     { color: #888888 !important; }
.hero-tag::before { background: #888888 !important; }
.hero h1 em   { color: #D8D8D8 !important; }
.hero-scroll-line { background: linear-gradient(to bottom, rgba(180,180,180,0.8), transparent) !important; }
.hero-right::after { background: linear-gradient(to right, #0A0A0A 0%, transparent 30%) !important; }

/* ---- BUTTONS ---- */
.btn-gold     { background: #1A1A1A !important; color: #fff !important; }
.btn-gold:hover { background: #333333 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important; }
.btn-ghost    { border-color: rgba(255,255,255,0.3) !important; color: rgba(255,255,255,0.75) !important; }
.btn-ghost:hover { border-color: #D8D8D8 !important; color: #D8D8D8 !important; }

/* ---- MARQUEE ---- */
.marquee      { background: #1A1A1A !important; }
.marquee-dot  { color: #D8D8D8 !important; }

/* ---- TRUST BAR ---- */
.trust-bar    { background: #1A1A1A !important; }

/* ---- SECTION LABELS ---- */
.s-label      { color: #333333 !important; }
.s-label::before { background: #333333 !important; }
.s-title em   { color: #1A1A1A !important; }
.s-title-light em { color: #D8D8D8 !important; }

/* ---- ABOUT ---- */
.about        { background: #F8F8F8 !important; }
.am-label     { background: #1A1A1A !important; }
.about-badge  { background: #FFFFFF !important; border-color: #E5E5E5 !important; }
.ab-n         { color: #1A1A1A !important; }

/* ---- MENU ---- */
.menu-sec     { background: #141414 !important; }
.menu-card-tag { color: #D8D8D8 !important; }
.menu-card-body { background: linear-gradient(to top, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.7) 60%, transparent 100%) !important; }

/* ---- PROGRAMS ---- */
.programs-sec { background: #FAFAFA !important; }
.prog-card    { background: #FFFFFF !important; border-color: rgba(0,0,0,0.1) !important; }
.prog-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important; }
.prog-pill    { background: #1A1A1A !important; }
.prog-price   { color: #1A1A1A !important; background: rgba(0,0,0,0.07) !important; }
.ptag         { background: #F0F0F0 !important; color: #333333 !important; }

/* ---- PLANS ---- */
.plans-sec    { background: #0A0A0A !important; }
.plan-card:hover { border-color: rgba(180,180,180,0.3) !important; }
.plan-card.featured { border-color: #B0B0B0 !important; background: rgba(255,255,255,0.05) !important; }
.plan-feat-tag { background: #B0B0B0 !important; color: #0A0A0A !important; }
.plan-price   { color: #FFFFFF !important; }
.plan-features li::before { color: #D8D8D8 !important; }
.plan-btn:hover,.plan-card.featured .plan-btn { background: #FFFFFF !important; color: #0A0A0A !important; border-color: #FFFFFF !important; }

/* ---- BUY NOW BUTTONS ---- */
.buy-now-btn  { background: #1A1A1A !important; }
.buy-now-btn:hover { background: #333333 !important; }
.buy-now-btn.gold { background: #B0B0B0 !important; color: #0A0A0A !important; }
.buy-now-btn.gold:hover { background: #D8D8D8 !important; }

/* ---- PROGRAM DETAIL ---- */
.prog-detail.dark { background: #141414 !important; }
.prog-detail.darker { background: #0A0A0A !important; }
.prog-detail.light { background: #F8F8F8 !important; }
.pd-img-pill.dark-pill { background: #1A1A1A !important; }
.pd-img-pill.gold-pill { background: #B0B0B0 !important; color: #0A0A0A !important; }

/* ---- TABS ---- */
.tab-btn-dark.active  { background: #333333 !important; color: #fff !important; }
.tab-btn-light.active { background: #1A1A1A !important; color: #fff !important; border-color: #1A1A1A !important; }

/* ---- WEEK TABLES ---- */
.week-header  { background: #1A1A1A !important; }
.week-header-l { background: #1A1A1A !important; }
.day-label    { color: #D8D8D8 !important; }
.day-label-l  { color: #1A1A1A !important; }
.dc-type,.dc-type-l { color: #B0B0B0 !important; }

/* ---- DETOX TABLE ---- */
.detox-table thead tr { background: #1A1A1A !important; }
.dt-day       { color: #333333 !important; }

/* ---- JUICE CLEANSE ---- */
.juice-sec    { background: #0A0A0A !important; }
.jb-tip       { color: rgba(180,180,180,0.65) !important; }
.jc-panel-title { color: #D8D8D8 !important; }

/* ---- REVIEWS ---- */
.reviews-sec  { background: #F0F0F0 !important; }
.review-card  { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; }
.review-stars { color: #0A0A0A !important; }
.review-avatar { background: #1A1A1A !important; }
.review-score { background: #FFFFFF !important; border-color: rgba(0,0,0,0.1) !important; }

/* ---- INSTAGRAM ---- */
.ig-sec       { background: #141414 !important; }
.ig-tile::after { background: rgba(10,10,10,0) !important; }
.ig-tile:hover::after { background: rgba(10,10,10,0.65) !important; }

/* ---- TEAM ---- */
.team-sec     { background: #FAFAFA !important; }
.team-tagline { -webkit-text-stroke-color: #333333 !important; }
.team-card    { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; }
.team-avatar  { background: #1A1A1A !important; }
.team-role    { color: #333333 !important; }

/* ---- DELIVERY STRIP ---- */
.delivery-strip { background: #E5E5E5 !important; }
.ds-app       { background: #FFFFFF !important; border-color: rgba(0,0,0,0.12) !important; }
.ds-badge     { background: #1A1A1A !important; color: #fff !important; }

/* ---- CONTACT ---- */
.contact-sec  { background: #1A1A1A !important; }
.contact-label { color: #888888 !important; }
.contact-label::before { background: #888888 !important; }
.ci-icon      { background: rgba(255,255,255,0.1) !important; }
.ci-val a     { color: #D8D8D8 !important; }
.soc-btn      { background: rgba(255,255,255,0.1) !important; }
.soc-btn:hover { background: rgba(255,255,255,0.2) !important; }
.fg input, .fg select, .fg textarea { border-color: rgba(0,0,0,0.15) !important; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: #1A1A1A !important; }
.form-cta     { background: #1A1A1A !important; }
.form-cta:hover { background: #333333 !important; }

/* ---- CHATBOT ---- */
#chat-box     { border-color: rgba(0,0,0,0.12) !important; }
.chat-head    { background: #1A1A1A !important; }
.bot-msg      { background: #F0F0F0 !important; color: #0A0A0A !important; }
.user-msg     { background: #1A1A1A !important; }
.chat-chip:hover { background: #E5E5E5 !important; }
#chat-input   { border-color: rgba(0,0,0,0.15) !important; background: #FAFAFA !important; }
#chat-send    { background: #1A1A1A !important; }
#chat-fab     { background: #1A1A1A !important; box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important; }
#chat-fab:hover { background: #333333 !important; }

/* ---- FOOTER ---- */
footer        { background: #0A0A0A !important; }
.fb-email     { color: #888888 !important; }

/* ---- AUTH MODALS ---- */
.modal        { border-color: rgba(200,200,200,0.2) !important; }
.auth-fg input, .auth-fg select, .auth-fg textarea { border-color: rgba(200,200,200,0.2) !important; background: rgba(200,200,200,0.06) !important; }
.auth-fg input:focus, .auth-fg select, .auth-fg textarea:focus { border-color: #888888 !important; }
.auth-btn     { background: #1A1A1A !important; }
.auth-btn:hover { background: #333333 !important; }
.auth-switch a { color: #888888 !important; }
.pay-method.selected { border-color: #888888 !important; background: rgba(136,136,136,0.1) !important; color: #fff !important; }
.order-ref    { border-color: rgba(200,200,200,0.15) !important; background: rgba(200,200,200,0.08) !important; }
.plan-step    { background: rgba(200,200,200,0.08) !important; border-color: rgba(200,200,200,0.15) !important; }
.pay-total    { background: rgba(176,176,176,0.1) !important; border-color: rgba(176,176,176,0.2) !important; }
.auth-divider::before, .auth-divider::after { background: rgba(200,200,200,0.15) !important; }

/* ---- LIGHT MODE OVERRIDES ---- */
body.light    { background: #FAFAFA !important; color: #0A0A0A !important; }
body.light nav { background: rgba(250,250,250,0.96) !important; border-bottom: 1px solid rgba(0,0,0,0.12) !important; }
body.light .nav-brand-name { color: #0A0A0A !important; }
body.light .nav-brand-sub  { color: #333333 !important; }
body.light .nav-links a    { color: #606060 !important; }
body.light .nav-links a:hover { color: #0A0A0A !important; }
body.light .nav-signin     { border-color: rgba(0,0,0,0.3) !important; color: #333333 !important; }
body.light #dark-btn       { border-color: rgba(0,0,0,0.3) !important; color: #333333 !important; }
body.light .marquee        { background: #1A1A1A !important; }
body.light .trust-bar      { background: #333333 !important; }
body.light .contact-sec    { background: #1A1A1A !important; }
body.light .prog-card      { background: #fff !important; border-color: rgba(0,0,0,0.12) !important; }
body.light .plans-sec      { background: #1A1A1A !important; }
body.light .reviews-sec    { background: #E8E8E8 !important; }
body.light .review-card    { background: #fff !important; }
body.light .team-card      { background: #fff !important; }
body.light footer          { background: #0A0A0A !important; }

/* ================================================
   MOBILE RESPONSIVENESS FIXES
   ================================================ */
@media screen and (max-width: 900px) {
    /* Layout Overrides */
    html, body {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* Hero Adjustments */
    .hero {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
        padding-top: 100px !important;
        padding-bottom: 40px !important;
        gap: 0 !important;
    }
    .hero-left {
        width: 100% !important;
        padding: 0 30px !important;
        text-align: center !important;
    }
    .hero h1 {
        font-size: 3.2rem !important;
        line-height: 1.05 !important;
        letter-spacing: -2px !important;
        margin-bottom: 1.5rem !important;
    }
    .hero-right {
        width: 100% !important;
        height: 45vh !important;
        min-height: 350px !important;
        padding: 20px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .hero-right img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 40px 40px 0 0 !important; /* Soft premium curve */
        box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
    }
    .hero-stats {
        position: relative !important;
        bottom: 0 !important;
        transform: translateY(-50%) !important;
        background: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 20px !important;
        width: 90% !important;
        margin: 0 auto !important;
        padding: 15px !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    }
    .hero-stat-n { font-size: 1.2rem !important; }
    .hero-stat-l { font-size: 0.6rem !important; }
    
    /* Section Spacing */
    section {
        padding: 60px 20px !important;
    }
    
    /* Stack these specific elements */
    .about-grid,
    .stats-row,
    .footer-top,
    .days-grid,
    .days-grid-l,
    .jc-timeline,
    .pd-img-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Make these sections swipeable on mobile */
    .menu-grid,
    .prog-grid,
    .plans-grid,
    .ig-grid,
    .team-grid,
    .how-grid,
    .jb-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 15px !important;
        padding-bottom: 20px !important; /* give space for scrollbar */
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        /* Hide scrollbar for cleaner look but keep functionality */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .menu-grid::-webkit-scrollbar,
    .prog-grid::-webkit-scrollbar,
    .plans-grid::-webkit-scrollbar,
    .ig-grid::-webkit-scrollbar,
    .team-grid::-webkit-scrollbar,
    .how-grid::-webkit-scrollbar,
    .jb-grid::-webkit-scrollbar {
        display: none;
    }
    
    /* Set width of swipeable items */
    .menu-grid > div,
    .prog-grid > div,
    .plans-grid > div,
    .ig-grid > div,
    .team-grid > div,
    .how-grid > div,
    .jb-grid > div,
    .menu-card,
    .prog-card,
    .plan-card,
    .ig-tile,
    .team-card,
    .jb-card {
        flex: 0 0 85% !important;
        max-width: 85% !important;
        scroll-snap-align: center !important;
    }
    
    /* Adjust IG tile width for better fit (show a bit of the next) */
    .ig-grid > div {
        flex: 0 0 45% !important;
        max-width: 45% !important;
    }

    
    .hero-tag {
        font-size: 0.8rem !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        margin-bottom: 1rem !important;
    }
    .hero-left > * {
        animation: fadeInUp 0.8s ease-out forwards;
        opacity: 0;
    }
    .hero-left .hero-tag { animation-delay: 0.1s; }
    .hero-left h1 { animation-delay: 0.2s; }
    .hero-left .hero-desc { animation-delay: 0.3s; }
    .hero-left .hero-btns { animation-delay: 0.4s; }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .hero-desc {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        margin-bottom: 2.5rem !important;
        opacity: 0.7 !important;
    }
    .hero-btns {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 3rem !important;
    }
    .hero-btns .btn-gold,
    .hero-btns .btn-ghost {
        width: 100% !important;
        padding: 18px !important;
        font-size: 0.95rem !important;
    }

    .footer-top {
        text-align: center !important;
        gap: 40px !important;
    }

    .footer-top > div {
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .footer-top ul {
        padding: 0;
    }

    /* Images */
    .am-mosaic img,
    .prog-img,
    .menu-card-img img,
    img {
        max-width: 100% !important;
        height: auto;
    }
    
    /* Navigation */
    .nav-links {
        display: none !important;
    }
    
    .nav-container {
        padding: 10px 20px !important;
        justify-content: space-between !important;
    }
    
    .nav-order {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
    
    /* Tables for mobile */
    .detox-table, .week-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Typography on mobile */
    .s-title {
        font-size: 2.2rem !important;
    }
    
    .ab-t {
        font-size: 1.8rem !important;
    }
    
    /* Contact Form */
    .contact-form {
        padding: 20px !important;
    }

    /* Footer Adjustments */
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 20px !important;
    }
    
    /* Program Buttons on Mobile */
    .prog-card div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .prog-card button {
        width: 100% !important;
    }
}

/* Social Icon Enhancements */
.footer-ig {
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-decoration: none;
    color: var(--leaf3);
}
.footer-ig:hover {
    transform: translateY(-2px);
    opacity: 0.8;
}

/* Fix any missing max-widths globally just in case */
img {
    max-width: 100%;
}