/*
|--------------------------------------------------------------------------
| PAS.TEE POD - Customer UI Stage 2A Visual Polish Safe
|--------------------------------------------------------------------------
| Scope: visual CSS only. No backend logic.
| Marker: 
*/

:root{
    --stage2a-orange:#ff5a00;
    --stage2a-orange-soft:#fff7ed;
    --stage2a-ink:#07111f;
    --stage2a-muted:#64748b;
    --stage2a-line:#e5e7eb;
    --stage2a-soft:#f8fafc;
    --stage2a-shadow:0 18px 44px rgba(15,23,42,.08);
    --stage2a-max:1180px;
}

/* Global customer layout polish */
body.pod-customer-body{
    background:
        radial-gradient(circle at top left, rgba(255,90,0,.085), transparent 28%),
        linear-gradient(180deg,#ffffff 0%,#f8fafc 44%,#f6f8fb 100%) !important;
}

.app-header,
.pod-public-header,
.pod-public-market-header{
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.customer-page-shell,
.catalog-shell,
.public-shell{
    width:min(var(--stage2a-max), calc(100% - 28px));
}

/* Desktop: prevent mobile-looking narrow pages */
@media (min-width:761px){
    .customer-page-shell,
    .catalog-shell,
    .public-shell{
        width:min(var(--stage2a-max), calc(100% - 28px)) !important;
        max-width:none !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .customer-page-shell{
        margin-top:20px !important;
    }

    .app-header,
    .pod-public-header,
    .pod-public-market-header{
        width:min(var(--stage2a-max), calc(100% - 28px)) !important;
        border-radius:24px !important;
        box-shadow:0 14px 36px rgba(15,23,42,.08) !important;
    }

    .top-nav{
        display:flex !important;
        align-items:center;
        gap:6px;
    }

    .top-nav a,
    .pod-public-nav a,
    .pod-public-market-nav a{
        border-radius:999px !important;
        transition:background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
    }

    .top-nav a:hover,
    .pod-public-nav a:hover,
    .pod-public-market-nav a:hover{
        transform:translateY(-1px);
    }

    .bottom-nav,
    .pod-public-bottom-nav{
        display:none !important;
    }

    .pod-site-footer{
        display:block;
    }
}

/* Mobile: fixed bottom nav comfort */
@media (max-width:760px){
    body,
    body.pod-customer-body{
        padding-bottom:calc(104px + env(safe-area-inset-bottom,0px)) !important;
    }

    .customer-page-shell,
    .catalog-shell,
    .public-shell,
    .pod-partner-page,
    .account-shell,
    .account-page,
    .chat-page,
    .support-page,
    .auth-page,
    .auth-shell{
        padding-bottom:112px !important;
    }

    .app-header,
    .pod-public-header,
    .pod-public-market-header{
        border-radius:0 0 22px 22px !important;
    }

    .bottom-nav,
    .pod-public-bottom-nav{
        padding-bottom:calc(8px + env(safe-area-inset-bottom,0px)) !important;
    }
}

/* Product catalog polish */
.catalog-shell{
    margin-top:18px;
}

.product-grid,
.products-grid,
.catalog-grid,
.pod-product-grid{
    align-items:stretch;
}

.product-card,
.pod-product-card,
.catalog-card,
.products-card{
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.product-card:hover,
.pod-product-card:hover,
.catalog-card:hover,
.products-card:hover{
    transform:translateY(-2px);
    box-shadow:0 22px 48px rgba(15,23,42,.10) !important;
    border-color:rgba(255,90,0,.28) !important;
}

.product-card img,
.pod-product-card img,
.catalog-card img,
.products-card img,
.thumb img,
.product-thumb img{
    display:block;
}

@media (min-width:761px){
    .catalog-shell .product-grid,
    .catalog-shell .products-grid,
    .catalog-shell .catalog-grid,
    .product-grid,
    .products-grid,
    .catalog-grid,
    .pod-product-grid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:16px !important;
    }

    .catalog-hero,
    .products-hero,
    .pod-catalog-hero{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) minmax(320px,.72fr) !important;
        align-items:center !important;
        gap:22px !important;
        border-radius:30px !important;
        box-shadow:var(--stage2a-shadow) !important;
    }
}

@media (max-width:760px){
    .catalog-shell{
        width:100% !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .product-grid,
    .products-grid,
    .catalog-grid,
    .pod-product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }

    .product-card,
    .pod-product-card,
    .catalog-card,
    .products-card{
        border-radius:20px !important;
    }
}

/* Product detail polish without changing editor logic */
@media (min-width:761px){
    .public-shell .product-detail-hero,
    .public-shell .hero.product-detail-hero{
        display:grid !important;
        grid-template-columns:minmax(420px,1.04fr) minmax(360px,.86fr) !important;
        gap:28px !important;
        align-items:start !important;
        border-radius:30px !important;
        box-shadow:var(--stage2a-shadow) !important;
    }
}

@media (max-width:760px){
    .public-shell .fixed-cta,
    .fixed-cta{
        padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)) !important;
    }
}

/* Home polish */
.customer-page-shell .hero,
.customer-page-shell .home-hero,
.customer-page-shell .pod-home-hero{
    border-radius:30px;
}

@media (min-width:761px){
    .customer-page-shell .hero,
    .customer-page-shell .home-hero,
    .customer-page-shell .pod-home-hero{
        display:grid;
        grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
        gap:28px;
        align-items:center;
    }

    .customer-page-shell .product-grid,
    .customer-page-shell .home-product-grid,
    .customer-page-shell .featured-grid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:16px !important;
    }
}

/* Account polish */
.account-shell,
.account-page,
.account-dashboard,
.pod-account-page{
    width:100%;
}

.account-card,
.account-menu-card,
.pod-account-card,
.order-card,
.design-card{
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.account-card:hover,
.account-menu-card:hover,
.pod-account-card:hover,
.order-card:hover,
.design-card:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 42px rgba(15,23,42,.08) !important;
}

@media (min-width:761px){
    .account-grid,
    .account-menu-grid,
    .pod-account-grid{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:16px !important;
    }

    .account-shell,
    .account-page,
    .pod-account-page{
        max-width:var(--stage2a-max) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

/* Support / Chat polish */
@media (min-width:761px){
    .chat-page,
    .support-page,
    .pod-support-page{
        width:min(var(--stage2a-max), 100%) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .chat-shell,
    .support-shell,
    .pod-support-shell{
        display:grid !important;
        grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr) !important;
        gap:18px !important;
        align-items:start !important;
    }

    .chat-card,
    .support-card,
    .pod-support-card{
        border-radius:28px !important;
        box-shadow:var(--stage2a-shadow) !important;
    }
}

/* Auth polish */
@media (min-width:761px){
    .auth-shell,
    .auth-page,
    .login-shell,
    .register-shell{
        width:min(980px, calc(100% - 28px)) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .auth-card,
    .login-card,
    .register-card{
        border-radius:30px !important;
        box-shadow:var(--stage2a-shadow) !important;
    }
}

/* Kemitraan polish */
.pod-partner-page{
    width:100%;
}

.pod-partner-section,
.pod-partner-hero{
    border-color:var(--stage2a-line) !important;
}

.pod-partner-btn.primary,
.pod-partner-submit{
    background:var(--stage2a-orange) !important;
    color:#fff !important;
}

@media (min-width:761px){
    .pod-partner-page{
        width:min(var(--stage2a-max), 100%) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

/* CTA/button consistency */
.pod-btn.primary,
.btn-primary,
button[type="submit"],
.custom-btn,
.cta{
    border-radius:16px;
}

a[href*="/produk"],
a[href*="kemitraan"],
a[href*="/support"],
a[href*="/akun"]{
    -webkit-tap-highlight-color:transparent;
}

/* Remove old floating help if any leftover */
.support-bubble-wrap,
[data-support-bubble]{
    display:none !important;
}

/* Stage marker for grep validation */
.stage2a-visual-polish-marker{
    display:none !important;
}