/* =========================================================
   SISTEM TEMA PUBLIK MULTI-ENTITAS
   Dipakai oleh halaman depan dan halaman pesanan online.
   Nilai warna berasal dari tb_tampilan_online.
   ========================================================= */

body.landing-body,
body.po-public-body{
    --theme-primary:var(--public-primary,#5b4ff7);
    --theme-secondary:var(--public-secondary,#2f75e8);
    --theme-accent:var(--public-accent,#ff7a45);
    --theme-bg:var(--public-bg,#f7f7ff);
    --theme-surface:#ffffff;
    --theme-surface-soft:rgba(255,255,255,.70);
    --theme-text:#172033;
    --theme-muted:#687186;
    --theme-line:rgba(71,85,105,.14);
    --theme-shadow:0 22px 60px rgba(30,41,59,.11);
    --theme-hero-text:#ffffff;
    --theme-hero-muted:rgba(255,255,255,.84);
    --theme-radius:28px;
    background:
        radial-gradient(circle at 6% 0%,color-mix(in srgb,var(--theme-primary) 15%,transparent),transparent 30%),
        radial-gradient(circle at 96% 12%,color-mix(in srgb,var(--theme-accent) 13%,transparent),transparent 28%),
        linear-gradient(180deg,color-mix(in srgb,var(--theme-bg) 82%,#fff) 0%,var(--theme-bg) 52%,#fff 100%) !important;
    color:var(--theme-text) !important;
}

body.landing-body::before{
    background:
        radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--theme-primary) 14%,transparent),transparent 28%),
        radial-gradient(circle at 95% 18%,color-mix(in srgb,var(--theme-accent) 12%,transparent),transparent 30%),
        linear-gradient(180deg,color-mix(in srgb,var(--theme-bg) 78%,#fff) 0%,var(--theme-bg) 58%,#fff 100%) !important;
}

/* ---------- Theme personalities ---------- */
body.theme-modern{--theme-shadow:0 24px 68px rgba(69,67,190,.15)}
body.theme-hangat{--theme-shadow:0 24px 65px rgba(154,52,18,.15)}
body.theme-alami{--theme-shadow:0 24px 65px rgba(22,101,52,.14)}
body.theme-pink{--theme-shadow:0 24px 65px rgba(190,24,93,.14)}
body.theme-ocean{--theme-shadow:0 24px 65px rgba(8,145,178,.15)}
body.theme-coffee{--theme-shadow:0 24px 65px rgba(92,58,33,.16)}
body.theme-minimal{--theme-shadow:0 18px 46px rgba(15,23,42,.08);--theme-radius:20px}
body.theme-midnight{
    --theme-surface:#111827;
    --theme-surface-soft:rgba(17,24,39,.78);
    --theme-text:#f8fafc;
    --theme-muted:#cbd5e1;
    --theme-line:rgba(255,255,255,.13);
    --theme-shadow:0 24px 70px rgba(2,6,23,.42);
    --theme-hero-text:#fff7d6;
    --theme-hero-muted:#dbeafe;
    background:
        radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--theme-primary) 34%,transparent),transparent 32%),
        radial-gradient(circle at 92% 12%,color-mix(in srgb,var(--theme-accent) 16%,transparent),transparent 25%),
        #0f172a !important;
}
body.theme-midnight.landing-body::before{background:linear-gradient(180deg,#0f172a,#020617) !important}

/* ---------- Reusable surfaces ---------- */
body.landing-body .lp-top-card,
body.landing-body .lp-mini-product,
body.landing-body .lp-product-card,
body.landing-body .lp-flow-card,
body.landing-body .lp-access-card,
body.landing-body .lp-promo-card,
body.po-public-body .product-card,
body.po-public-body .modal,
body.po-public-body .box,
body.po-public-body .cart-item,
body.po-public-body .qris-card,
body.po-public-body .empty{
    background:var(--theme-surface) !important;
    color:var(--theme-text);
    border-color:var(--theme-line) !important;
}
body.landing-body .lp-top-head p,
body.landing-body .lp-section-subtitle,
body.landing-body .lp-product-meta,
body.landing-body .lp-flow-card p,
body.landing-body .lp-access-card p,
body.landing-body .lp-dev-credit,
body.po-public-body .section-title p,
body.po-public-body .prod-meta,
body.po-public-body .pay small,
body.po-public-body .brand small{
    color:var(--theme-muted) !important;
}
body.theme-midnight .lp-navbar .lp-brand,
body.theme-midnight .po-header .brand,
body.theme-midnight .lp-top-head h2,
body.theme-midnight .lp-section-title,
body.theme-midnight .lp-product-name,
body.theme-midnight .prod-name,
body.theme-midnight .section-title h2{color:var(--theme-text) !important}
body.theme-midnight .inp,
body.theme-midnight .select,
body.theme-midnight .control,
body.theme-midnight .chat-form textarea,
body.theme-midnight .qty-row input{
    background:#0b1220 !important;
    color:#f8fafc !important;
    border-color:var(--theme-line) !important;
}
body.theme-midnight .summary,
body.theme-midnight .pay-info,
body.theme-midnight .chat-products,
body.theme-midnight .chat-body,
body.theme-midnight .quick,
body.theme-midnight .chat-form{
    background:#0b1220 !important;
    color:#f8fafc;
    border-color:var(--theme-line) !important;
}

/* ---------- Hero ---------- */
body.landing-body .lp-hero-card,
body.po-public-body .hero{
    background:
        radial-gradient(circle at 88% 8%,rgba(255,255,255,.20),transparent 25%),
        radial-gradient(circle at 8% 92%,rgba(255,255,255,.10),transparent 30%),
        linear-gradient(135deg,var(--theme-primary) 0%,var(--theme-secondary) 58%,var(--theme-accent) 125%) !important;
    color:var(--theme-hero-text) !important;
    box-shadow:var(--theme-shadow) !important;
}
body.landing-body .lp-hero-card .lp-title,
body.po-public-body .hero h1{
    color:var(--theme-hero-text) !important;
    text-shadow:0 9px 26px rgba(15,23,42,.18);
}
body.landing-body .lp-hero-card .lp-desc,
body.po-public-body .hero p{color:var(--theme-hero-muted) !important}
body.landing-body .lp-badge,
body.po-public-body .hero .chip{
    color:inherit;
}
body.landing-body .lp-top-head .lp-badge{
    color:var(--theme-primary) !important;
    background:color-mix(in srgb,var(--theme-primary) 10%,#fff) !important;
    border-color:color-mix(in srgb,var(--theme-primary) 22%,transparent) !important;
}
body.theme-hangat .lp-hero-card,
body.theme-hangat .hero{background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary) 58%,#fbbf24 130%) !important}
body.theme-alami .lp-hero-card,
body.theme-alami .hero{background:linear-gradient(135deg,#14532d,var(--theme-primary) 42%,var(--theme-secondary) 78%,var(--theme-accent) 145%) !important}
body.theme-pink .lp-hero-card,
body.theme-pink .hero{background:linear-gradient(135deg,#9d174d,var(--theme-primary) 42%,var(--theme-secondary) 75%,var(--theme-accent) 135%) !important}
body.theme-ocean .lp-hero-card,
body.theme-ocean .hero{background:linear-gradient(135deg,#0c4a6e,var(--theme-primary) 38%,var(--theme-secondary) 74%,var(--theme-accent) 140%) !important}
body.theme-coffee .lp-hero-card,
body.theme-coffee .hero{background:linear-gradient(135deg,#3f2818,var(--theme-primary) 48%,var(--theme-secondary) 88%,var(--theme-accent) 150%) !important}
body.theme-midnight .lp-hero-card,
body.theme-midnight .hero{background:linear-gradient(135deg,#020617,#1e1b4b 48%,var(--theme-primary) 92%,var(--theme-accent) 155%) !important;border:1px solid rgba(245,158,11,.20)}
body.theme-minimal .lp-hero-card,
body.theme-minimal .hero{
    background:var(--theme-surface) !important;
    color:var(--theme-text) !important;
    border:1px solid var(--theme-line);
    box-shadow:var(--theme-shadow) !important;
}
body.theme-minimal .lp-hero-card .lp-title,
body.theme-minimal .hero h1{color:var(--theme-primary) !important;text-shadow:none}
body.theme-minimal .lp-hero-card .lp-desc,
body.theme-minimal .hero p{color:var(--theme-muted) !important}
body.theme-minimal .lp-hero-card::before,
body.theme-minimal .hero::before{background:color-mix(in srgb,var(--theme-accent) 12%,transparent) !important}
body.theme-minimal .lp-stat{background:var(--theme-bg) !important;border-color:var(--theme-line) !important;color:var(--theme-text)}
body.theme-minimal .lp-stat span{color:var(--theme-muted) !important}
body.theme-minimal .lp-hero-buttons .lp-btn-soft{color:var(--theme-text) !important;background:var(--theme-bg) !important;border-color:var(--theme-line) !important}

/* ---------- Dynamic accent usage ---------- */
body.landing-body .lp-btn-primary,
body.po-public-body .btn-primary{background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary)) !important;color:#fff !important}
body.landing-body .lp-btn-orange,
body.po-public-body .btn-orange{background:linear-gradient(135deg,var(--theme-accent),var(--theme-primary)) !important;color:#fff !important}
body.landing-body .lp-product-price,
body.landing-body .lp-mini-price,
body.po-public-body .price,
body.po-public-body .sum-row.total{color:var(--theme-primary) !important}
body.landing-body .lp-chip,
body.po-public-body .chip{
    color:var(--theme-primary) !important;
    background:color-mix(in srgb,var(--theme-primary) 9%,#fff) !important;
}
body.landing-body .lp-flow-icon{
    color:var(--theme-primary) !important;
    background:color-mix(in srgb,var(--theme-primary) 10%,#fff) !important;
}
body.landing-body .lp-access-icon{background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary)) !important}
body.landing-body .lp-access-card:nth-child(2) .lp-access-icon{background:linear-gradient(135deg,var(--theme-accent),var(--theme-primary)) !important}
body.landing-body .lp-promo-discount,
body.po-public-body .promo-tag{background:var(--theme-accent) !important;color:#fff !important}
body.po-public-body .cart-badge{background:var(--theme-accent) !important}
body.po-public-body .modal-head{background:linear-gradient(135deg,var(--theme-secondary),var(--theme-primary),var(--theme-accent)) !important}
body.po-public-body .qty-row button{color:var(--theme-primary) !important;background:color-mix(in srgb,var(--theme-primary) 10%,#fff) !important}

/* ---------- Menu / navigation CSS choices ---------- */
body.landing-body .lp-navbar,
body.po-public-body .po-header{transition:.25s ease}

/* Floating Premium */
body.menu-floating .lp-navbar,
body.menu-floating .po-header{
    top:10px;
    background:transparent !important;
    border:0 !important;
    backdrop-filter:none !important;
    padding:0 12px;
}
body.menu-floating .lp-nav-inner,
body.menu-floating .po-head-inner{
    min-height:68px;
    height:auto;
    padding:9px 12px;
    background:color-mix(in srgb,var(--theme-surface) 92%,transparent) !important;
    border:1px solid var(--theme-line);
    border-radius:22px;
    box-shadow:0 18px 48px rgba(15,23,42,.13);
    backdrop-filter:blur(18px);
}
body.menu-floating .po-head-inner{width:min(1180px,calc(100% - 8px))}
body.menu-floating .lp-nav-actions .lp-btn,
body.menu-floating .head-actions .btn{border-radius:15px !important}

/* Glass Transparan */
body.menu-glass .lp-navbar,
body.menu-glass .po-header{
    background:color-mix(in srgb,var(--theme-surface) 76%,transparent) !important;
    border-bottom:1px solid var(--theme-line) !important;
    backdrop-filter:blur(20px) saturate(145%) !important;
}
body.menu-glass .lp-nav-actions .lp-btn,
body.menu-glass .head-actions .btn{border-radius:999px !important}

/* Solid Berwarna */
body.menu-solid .lp-navbar,
body.menu-solid .po-header{
    background:linear-gradient(110deg,var(--theme-primary),var(--theme-secondary)) !important;
    border:0 !important;
    box-shadow:0 12px 34px color-mix(in srgb,var(--theme-primary) 22%,transparent);
}
body.menu-solid .lp-brand,
body.menu-solid .brand{color:#fff !important}
body.menu-solid .lp-brand small,
body.menu-solid .brand small{color:rgba(255,255,255,.76) !important}
body.menu-solid .lp-nav-actions .lp-btn,
body.menu-solid .head-actions .btn{
    color:#fff !important;
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:none !important;
}
body.menu-solid .lp-nav-actions .lp-btn:hover,
body.menu-solid .head-actions .btn:hover{background:rgba(255,255,255,.24) !important}

/* Minimal Garis */
body.menu-minimal .lp-navbar,
body.menu-minimal .po-header{
    background:var(--theme-surface) !important;
    border-bottom:1px solid var(--theme-line) !important;
    backdrop-filter:none !important;
}
body.menu-minimal .lp-nav-actions .lp-btn,
body.menu-minimal .head-actions .btn{
    background:transparent !important;
    color:var(--theme-text) !important;
    border:0 !important;
    border-radius:4px !important;
    box-shadow:none !important;
    border-bottom:2px solid transparent !important;
}
body.menu-minimal .lp-nav-actions .lp-btn:hover,
body.menu-minimal .head-actions .btn:hover{
    color:var(--theme-primary) !important;
    border-bottom-color:var(--theme-primary) !important;
    transform:none !important;
}

/* Dark Premium */
body.menu-dark .lp-navbar,
body.menu-dark .po-header{
    background:rgba(2,6,23,.94) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 16px 42px rgba(2,6,23,.25);
}
body.menu-dark .lp-brand,
body.menu-dark .brand{color:#fff !important}
body.menu-dark .lp-brand small,
body.menu-dark .brand small{color:#cbd5e1 !important}
body.menu-dark .lp-nav-actions .lp-btn,
body.menu-dark .head-actions .btn{
    color:#fff !important;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:none !important;
}
body.menu-dark .lp-nav-actions .lp-btn-primary,
body.menu-dark .head-actions .btn-primary{background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary)) !important}
body.menu-dark .lp-nav-actions .lp-btn-orange,
body.menu-dark .head-actions .btn-orange{background:linear-gradient(135deg,var(--theme-accent),var(--theme-primary)) !important}

/* ---------- Hero layout choices ---------- */
body.hero-centered .lp-hero-grid{grid-template-columns:1fr !important}
body.hero-centered .lp-hero-card{
    min-height:440px !important;
    display:grid;
    place-items:center;
    text-align:center;
}
body.hero-centered .lp-hero-content{max-width:850px;margin:auto}
body.hero-centered .lp-hero-buttons,
body.hero-centered .lp-stats{justify-content:center}
body.hero-centered .lp-stats{max-width:720px;margin-left:auto;margin-right:auto}
body.hero-centered .lp-feature-products-wide{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
body.hero-centered .lp-top-card{animation:none !important}
body.hero-centered.po-public-body .hero{text-align:center;padding:54px 28px}
body.hero-centered.po-public-body .hero h1,
body.hero-centered.po-public-body .hero p{margin-left:auto;margin-right:auto}
body.hero-centered.po-public-body .hero-row{justify-content:center}

body.hero-compact .lp-hero-card{min-height:390px !important;padding:28px !important}
body.hero-compact .lp-title{font-size:clamp(32px,5vw,52px) !important}
body.hero-compact .lp-stats{margin-top:20px}
body.hero-compact.po-public-body .hero{padding:24px 28px;border-radius:24px}
body.hero-compact.po-public-body .hero h1{font-size:clamp(32px,5vw,52px)}
body.hero-compact.po-public-body .marquee{margin-top:12px}

/* ---------- Product card CSS choices ---------- */
body.cards-elevated .lp-mini-product,
body.cards-elevated .lp-product-card,
body.cards-elevated .lp-promo-card,
body.cards-elevated .product-card{
    border-radius:24px !important;
    box-shadow:var(--theme-shadow) !important;
}
body.cards-soft .lp-mini-product,
body.cards-soft .lp-product-card,
body.cards-soft .lp-promo-card,
body.cards-soft .product-card{
    background:color-mix(in srgb,var(--theme-surface) 86%,var(--theme-primary) 5%) !important;
    border:1px solid color-mix(in srgb,var(--theme-primary) 10%,transparent) !important;
    box-shadow:none !important;
    border-radius:26px !important;
}
body.cards-outline .lp-mini-product,
body.cards-outline .lp-product-card,
body.cards-outline .lp-promo-card,
body.cards-outline .product-card{
    box-shadow:none !important;
    border:2px solid color-mix(in srgb,var(--theme-primary) 18%,var(--theme-line)) !important;
    border-radius:18px !important;
}
body.cards-minimal .lp-mini-product,
body.cards-minimal .lp-product-card,
body.cards-minimal .lp-promo-card,
body.cards-minimal .product-card{
    box-shadow:none !important;
    border:0 !important;
    border-radius:12px !important;
}
body.cards-minimal .lp-product-body,
body.cards-minimal .prod-body{padding-left:4px !important;padding-right:4px !important}
body.cards-minimal .lp-product-img,
body.cards-minimal .prod-img{border-radius:12px}

/* ---------- Landing-specific refinements ---------- */
body.landing-body .lp-top-card{border-radius:var(--theme-radius) !important}
body.landing-body .lp-section-title{color:var(--theme-text) !important}
body.landing-body .lp-top-head h2{color:var(--theme-text) !important}
body.landing-body .lp-footer{background:transparent !important;border-top-color:var(--theme-line) !important}
body.landing-body .lp-footer-shell{
    background:
        radial-gradient(circle at 12% 10%,rgba(255,255,255,.17),transparent 28%),
        radial-gradient(circle at 92% 16%,color-mix(in srgb,var(--theme-accent) 32%,transparent),transparent 32%),
        linear-gradient(135deg,var(--theme-primary),var(--theme-secondary) 55%,color-mix(in srgb,var(--theme-primary) 72%,#111827)) !important;
    box-shadow:0 26px 70px color-mix(in srgb,var(--theme-primary) 24%,transparent) !important;
}
body.theme-minimal .lp-footer-shell{background:#0f172a !important}

/* ---------- Order-page refinements ---------- */
body.po-public-body{--blue:var(--theme-secondary);--purple:var(--theme-primary);--orange:var(--theme-accent);--bg:var(--theme-bg);--dark:var(--theme-text);--muted:var(--theme-muted);--line:var(--theme-line);--card:var(--theme-surface)}
body.po-public-body .po-header{color:var(--theme-text)}
body.po-public-body .toolbar .inp,
body.po-public-body .toolbar .select{background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-line)}
body.po-public-body .product-card{color:var(--theme-text)}
body.po-public-body .prod-img,
body.landing-body .lp-mini-img,
body.landing-body .lp-product-img{
    background:linear-gradient(135deg,color-mix(in srgb,var(--theme-primary) 8%,#fff),color-mix(in srgb,var(--theme-accent) 8%,#fff)) !important;
}
body.theme-midnight .prod-img,
body.theme-midnight .lp-mini-img,
body.theme-midnight .lp-product-img{background:linear-gradient(135deg,#1e293b,#111827) !important}
body.po-public-body .btn-soft{background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-line)}
body.po-public-body .promo-card{background:var(--theme-surface) !important;color:var(--theme-text);border-color:var(--theme-line) !important}
body.theme-midnight .bubble.admin{background:#111827;color:#f8fafc;border-color:var(--theme-line)}
body.theme-midnight .prod-chip,
body.theme-midnight .quick button,
body.theme-midnight .emoji-toggle,
body.theme-midnight .emoji-panel,
body.theme-midnight .emoji-panel button{background:#111827;color:#f8fafc;border-color:var(--theme-line)}

/* ---------- Responsive ---------- */
@media(max-width:920px){
    body.hero-centered .lp-feature-products-wide{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
    body.menu-floating .lp-navbar,
    body.menu-floating .po-header{top:6px;padding:0 6px}
}
@media(max-width:720px){
    body.menu-solid .lp-nav-inner,
    body.menu-solid .po-head-inner{padding-top:10px;padding-bottom:10px}
    body.menu-minimal .lp-nav-actions .lp-btn,
    body.menu-minimal .head-actions .btn{border:1px solid var(--theme-line) !important;border-radius:12px !important}
    body.hero-centered .lp-hero-card{min-height:auto !important;text-align:left}
    body.hero-centered .lp-hero-buttons{justify-content:flex-start}
    body.hero-centered .lp-stats{justify-content:stretch}
}
@media(max-width:560px){
    body.menu-floating .lp-nav-inner,
    body.menu-floating .po-head-inner{border-radius:17px}
    body.hero-centered .lp-feature-products-wide{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}