/* =========================================================
   SORAI RESPONSIVE V2
   Final responsive layer for storefront/customer pages.
   Loaded after page-specific styles so typography and spacing
   stay readable from small phones to large desktop screens.
========================================================= */

:root {
    --sorai-readable-xs: 13px;
    --sorai-readable-sm: 14px;
    --sorai-readable-md: 15px;
    --sorai-readable-lg: 16px;
    --sorai-control-height: 46px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.sorai-product-body,
body:not(.sorai-admin-body) {
    min-width: 320px;
    overflow-x: hidden;
    font-size: var(--sorai-readable-md);
    line-height: 1.65;
}

/* ---------- Global readable typography ---------- */
main :where(p, li, label, input, textarea, select, button, td, th) {
    font-size: clamp(14px, .78vw, 16px) !important;
    line-height: 1.6;
}

main :where(small) {
    font-size: clamp(12.5px, .7vw, 14px) !important;
    line-height: 1.55;
}

main :where(a:not([class*="icon"]):not([class*="arrow"])) {
    font-size: clamp(13.5px, .76vw, 15px);
}

main :where(strong) {
    font-size: clamp(14px, .82vw, 16px);
    line-height: 1.45;
}

main :where(h1, h2, h3, h4, h5, h6) strong {
    font-size: inherit !important;
}

.sorai-page-kicker,
.product-hero-label,
.cart-hero-label,
.payment-hero-label,
.detail-hero-label,
.contact-label,
.about-kicker,
.custom-eyebrow,
.sorai-content-hero .eyebrow {
    font-size: clamp(12px, .68vw, 14px) !important;
}

.sorai-page-hero p,
.product-hero p,
.cart-hero p,
.payment-hero p,
.detail-hero p,
.contact-hero p,
.about-hero p,
.custom-hero p,
.sorai-content-hero p {
    font-size: clamp(14px, .9vw, 16px) !important;
    line-height: 1.7 !important;
}

/* Tiny legacy text is normalized page by page. */
.orders-list :where(span, strong, a, p),
.order-detail-card :where(span, strong, a, button, p),
.cart-page :where(span, strong, a, button, label, p, small),
.simple-checkout-content :where(span, strong, a, button, label, p, small),
.payment-page :where(span, strong, a, button, label, p, small),
.detail-page :where(span, strong, a, button, label, p, small),
.product-page :where(span, strong, a, button, label, p, small),
.contact-page :where(span, strong, a, button, label, p, small),
.about-page :where(span, strong, a, button, label, p, small),
.custom-order-page :where(span, strong, a, button, label, p, small),
.sorai-content-page :where(span, strong, a, button, label, p, small),
.nota-paper :where(span, strong, p, small, td, th) {
    font-size: clamp(13px, .78vw, 15px) !important;
    line-height: 1.55;
}

/* Keep semantic emphasis slightly stronger/larger. */
.order-card-bottom strong,
.order-product > strong,
.order-payment-summary strong,
.cart-summary strong,
.payment-total strong,
[class*="price"] strong,
[class*="total"] strong {
    font-size: clamp(15px, .95vw, 18px) !important;
}

.order-status,
.order-status.large,
[class*="badge"],
[class*="status-pill"],
[class*="label-badge"] {
    font-size: clamp(11.5px, .65vw, 13px) !important;
}

/* ---------- Forms and tap targets ---------- */
main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select) {
    min-height: var(--sorai-control-height);
    padding: 10px 12px;
    font-size: 16px !important; /* prevents iOS focus zoom */
}

main textarea,
main textarea.form-control {
    min-height: 110px;
}

main :where(button, .btn, [class*="button"], [class*="-btn"]) {
    min-height: 42px;
}

/* ---------- Fluid containers ---------- */
.sorai-page-container,
.product-page-container,
.product-hero-container,
.cart-page-container,
.payment-container,
.detail-page-container,
.contact-container,
.about-container,
.custom-container,
.sorai-content-container,
.simple-checkout-container,
.orders-container {
    width: min(calc(100% - 40px), 1220px) !important;
    max-width: 1220px;
    margin-right: auto !important;
    margin-left: auto !important;
}

.sorai-page-container-narrow {
    width: min(calc(100% - 40px), 960px) !important;
    max-width: 960px !important;
}

main img,
main video,
main iframe {
    max-width: 100%;
}

main img {
    height: auto;
}

/* Grids must be allowed to shrink instead of forcing horizontal scroll. */
main :where(.row, [class*="grid"], [class*="layout"], [class*="content"]) > * {
    min-width: 0;
}

/* ---------- Order page: reference size for the rest of the site ---------- */
.orders-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.order-card {
    padding: clamp(18px, 1.5vw, 24px) !important;
}

.order-card-top > div span,
.order-card-top > div strong,
.order-card-bottom span,
.order-detail-head > div > span,
.order-detail-info span,
.order-product > div span,
.order-payment-summary span,
.order-proof span,
.order-proof a,
.order-detail-actions a,
.order-detail-actions button {
    font-size: clamp(13px, .78vw, 15px) !important;
}

.order-card-bottom strong,
.order-detail-info strong,
.order-product > div strong,
.order-product > strong,
.order-payment-summary strong {
    font-size: clamp(14px, .9vw, 17px) !important;
}

.order-detail-head h2,
.order-detail-head h1 {
    font-size: clamp(23px, 2vw, 30px) !important;
}

.order-detail-info {
    gap: 14px !important;
}

.order-detail-info > div {
    padding: 14px !important;
}

/* ---------- Tables ---------- */
.table-responsive,
[class*="table-wrap"],
[class*="table-responsive"] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
}

table th,
table td {
    min-width: 110px;
    vertical-align: middle;
}

/* ---------- Public header ---------- */
.product-auth-header {
    width: 100%;
}

.sorai-auth-navbar {
    min-height: 76px;
}

.sorai-navbar-container {
    width: min(calc(100% - 32px), 1240px) !important;
    max-width: 1240px !important;
}

.sorai-navbar-logo img {
    width: auto;
    max-width: 168px;
    max-height: 54px;
    object-fit: contain;
}

.sorai-navbar-menu .nav-link,
.sorai-navbar-login,
.sorai-navbar-register,
.sorai-navbar-account-button,
.sorai-navbar-account-menu .dropdown-item {
    font-size: 14px !important;
}

.sorai-navbar-toggler {
    width: 46px;
    height: 42px;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sorai-navbar-toggler .sorai-toggler-line {
    display: block;
    width: 25px;
    height: 2px;
    margin: 5px auto;
    border-radius: 99px;
    background: #4b3a36;
}

/* ---------- Large screens ---------- */
@media (min-width: 1440px) {
    .sorai-page-container,
    .product-page-container,
    .product-hero-container,
    .cart-page-container,
    .payment-container,
    .detail-page-container,
    .contact-container,
    .about-container,
    .custom-container,
    .sorai-content-container,
    .simple-checkout-container {
        max-width: 1280px !important;
    }

    .sorai-page-section {
        padding-top: 52px;
        padding-bottom: 82px;
    }
}

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
    .sorai-auth-navbar {
        min-height: 68px;
        padding: 8px 0 !important;
    }

    .sorai-navbar-logo img {
        max-width: 145px;
        max-height: 46px;
    }

    #soraiFrontendNavbar,
    #soraiAuthNavbar {
        margin-top: 8px;
        padding: 12px 0 14px;
        border-top: 1px solid rgba(75, 58, 54, .10);
    }

    .sorai-navbar-menu {
        width: 100%;
    }

    .sorai-navbar-menu .nav-link {
        display: block;
        min-height: 44px;
        padding: 11px 4px !important;
        font-size: 15px !important;
    }

    .sorai-navbar-actions {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
        padding-top: 10px;
    }

    .sorai-navbar-login,
    .sorai-navbar-register {
        min-height: 42px;
        padding: 9px 14px !important;
    }

    .orders-list {
        grid-template-columns: 1fr !important;
    }

    .order-detail-info,
    .sorai-order-payment-full {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ---------- Small phones ---------- */
@media (max-width: 767.98px) {
    body.sorai-product-body,
    body:not(.sorai-admin-body) {
        font-size: 15px;
    }

    .sorai-page-container,
    .sorai-page-container-narrow,
    .product-page-container,
    .product-hero-container,
    .cart-page-container,
    .payment-container,
    .detail-page-container,
    .contact-container,
    .about-container,
    .custom-container,
    .sorai-content-container,
    .simple-checkout-container,
    .orders-container {
        width: calc(100% - 24px) !important;
    }

    .sorai-page-hero,
    .product-hero,
    .cart-hero,
    .payment-hero,
    .detail-hero,
    .contact-hero,
    .about-hero,
    .custom-hero {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    .sorai-page-section,
    .product-page,
    .cart-content,
    .payment-content,
    .detail-content,
    .contact-main-section,
    .custom-main {
        padding-top: 24px !important;
        padding-bottom: 44px !important;
    }

    .sorai-page-hero h1,
    .product-hero h1,
    .cart-hero h1,
    .payment-hero h1,
    .detail-hero h1,
    .contact-hero h1,
    .about-hero h1,
    .custom-hero h1,
    .sorai-content-hero h1 {
        font-size: clamp(27px, 8vw, 34px) !important;
        line-height: 1.15 !important;
    }

    .order-card-bottom,
    .order-detail-info,
    .sorai-order-payment-full,
    .sorai-fulfillment-grid {
        grid-template-columns: 1fr !important;
    }

    .order-detail-card,
    .sorai-toolbar-card,
    .sorai-shopee-gate {
        padding: 16px !important;
    }

    .order-detail-head,
    .order-product,
    .order-proof,
    .sorai-toolbar-card,
    .sorai-shopee-gate {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .order-payment-summary {
        width: 100% !important;
    }

    .order-detail-actions {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .order-detail-actions a,
    .order-detail-actions button,
    main .btn,
    main [class*="button"] {
        min-height: 46px;
    }

    /* Mobile header = logo + three-line menu only before expansion. */
    .sorai-navbar-container {
        width: calc(100% - 20px) !important;
    }

    .sorai-navbar-logo img {
        max-width: 132px;
        max-height: 42px;
    }

    .sorai-navbar-toggler {
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }
}

@media (max-width: 479.98px) {
    .sorai-page-container,
    .sorai-page-container-narrow,
    .product-page-container,
    .product-hero-container,
    .cart-page-container,
    .payment-container,
    .detail-page-container,
    .contact-container,
    .about-container,
    .custom-container,
    .sorai-content-container,
    .simple-checkout-container,
    .orders-container {
        width: calc(100% - 18px) !important;
    }

    .sorai-page-hero h1,
    .product-hero h1,
    .cart-hero h1,
    .payment-hero h1,
    .detail-hero h1,
    .contact-hero h1,
    .about-hero h1,
    .custom-hero h1,
    .sorai-content-hero h1 {
        font-size: 27px !important;
    }

    main :where(p, li, label, td, th),
    main :where(a:not([class*="icon"]):not([class*="arrow"])),
    main :where(strong) {
        font-size: 14px !important;
    }

    main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select) {
        font-size: 16px !important;
    }

    .sorai-navbar-logo img {
        max-width: 118px;
    }
}

/* ---------- Authentication & address pages ---------- */
.auth-page,
.login-page,
.register-page,
.alamat-page,
[class*="auth-"][class*="page"],
[class*="login-"][class*="page"] {
    font-size: 15px;
}

.auth-page :where(p, label, a, button, small),
.login-page :where(p, label, a, button, small),
.register-page :where(p, label, a, button, small),
.alamat-page :where(p, label, a, button, small),
.login-form-panel :where(p, label, a, button, small),
.account-panel :where(p, label, a, button, small),
.address-panel :where(p, label, a, button, small) {
    font-size: clamp(14px, .78vw, 16px) !important;
    line-height: 1.55;
}

.auth-page :where(input, select, textarea, .form-control, .form-select),
.login-form-panel :where(input, select, textarea, .form-control, .form-select),
.account-panel :where(input, select, textarea, .form-control, .form-select),
.address-panel :where(input, select, textarea, .form-control, .form-select),
.alamat-page :where(input, select, textarea, .form-control, .form-select) {
    min-height: 46px;
    font-size: 16px !important;
}

@media (max-width: 767.98px) {
    .auth-page {
        padding: 14px 0 !important;
    }

    .auth-card {
        margin-right: 10px;
        margin-left: 10px;
        border-radius: 16px !important;
    }

    .account-panel,
    .address-panel,
    .login-form-panel,
    .login-intro-panel {
        padding: 24px 18px !important;
    }

    .section-title,
    .login-form-header h1,
    .login-form-header h2 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }
}

/* ---------- Home & footer readability ---------- */
.sorai-hero :where(p, span, a, button, small, strong),
.sorai-section :where(p, span, a, button, small, strong),
.sorai-footer :where(p, span, a, small, strong),
footer :where(p, a, small) {
    font-size: clamp(13.5px, .78vw, 15.5px) !important;
    line-height: 1.6;
}

.sorai-hero h1,
.sorai-hero h2 {
    font-size: clamp(34px, 4.4vw, 62px) !important;
    line-height: 1.08 !important;
}

.sorai-section h2 {
    font-size: clamp(26px, 2.7vw, 38px) !important;
    line-height: 1.18 !important;
}

@media (max-width: 767.98px) {
    .sorai-hero h1,
    .sorai-hero h2 {
        font-size: clamp(30px, 10vw, 42px) !important;
    }

    .sorai-section h2 {
        font-size: 26px !important;
    }
}

/* =========================================================
   V3 ALIGNMENT — keep layout-based pages identical to standalone pages
========================================================= */

/* The previous responsive layer must not reduce the internal hero/page text again. */
.sorai-page-hero,
.sorai-content-hero {
    width: min(calc(100% - 40px), 1220px) !important;
    max-width: 1220px !important;
    margin: 24px auto 0 !important;
    padding: 36px 40px !important;
    border: 1px solid rgba(189, 74, 60, .11) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 91% 8%, rgba(242, 198, 190, .56), transparent 30%),
        linear-gradient(135deg, #fffdfc 0%, #fff4f1 100%) !important;
    box-shadow: 0 10px 28px rgba(83, 55, 49, .055) !important;
}

.sorai-page-hero > .sorai-page-container {
    width: 100% !important;
    max-width: none !important;
}

.sorai-page-kicker,
.sorai-content-hero small,
.sorai-content-hero .eyebrow {
    font-size: 13px !important;
}

.sorai-page-hero h1,
.sorai-content-hero h1 {
    font-size: clamp(32px, 3.25vw, 42px) !important;
    line-height: 1.12 !important;
}

.sorai-page-hero p,
.sorai-content-hero p {
    font-size: clamp(14.5px, .9vw, 16px) !important;
    line-height: 1.7 !important;
}

@media (max-width: 767.98px) {
    .sorai-page-hero,
    .sorai-content-hero {
        width: calc(100% - 22px) !important;
        margin-top: 14px !important;
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }

    .sorai-page-hero h1,
    .sorai-content-hero h1 {
        font-size: clamp(27px, 8vw, 33px) !important;
    }

    .sorai-page-hero p,
    .sorai-content-hero p {
        font-size: 14.5px !important;
        line-height: 1.62 !important;
    }
}

/* Readability V3: use the Pesanan Saya scale as the baseline for other customer pages. */
.orders-list :where(span, strong, a, p),
.order-detail-card :where(span, strong, a, button, p),
.cart-page :where(span, strong, a, button, label, p, small),
.simple-checkout-content :where(span, strong, a, button, label, p, small),
.payment-page :where(span, strong, a, button, label, p, small),
.detail-page :where(span, strong, a, button, label, p, small),
.contact-page :where(span, strong, a, button, label, p, small),
.about-page :where(span, strong, a, button, label, p, small),
.custom-order-page :where(span, strong, a, button, label, p, small),
.sorai-content-page :where(span, strong, a, button, label, p, small),
.nota-paper :where(span, strong, p, small, td, th) {
    font-size: clamp(14px, .82vw, 16px) !important;
    line-height: 1.58 !important;
}

.order-status,
.order-status.large,
[class*="status-pill"],
[class*="label-badge"] {
    font-size: clamp(12px, .7vw, 13.5px) !important;
}

@media (max-width: 767.98px) {
    .orders-list :where(span, strong, a, p),
    .order-detail-card :where(span, strong, a, button, p),
    .simple-checkout-content :where(span, strong, a, button, label, p, small),
    .sorai-content-page :where(span, strong, a, button, label, p, small) {
        font-size: 14.5px !important;
    }
}