
/* RentalAjay Operational Pack */
.ops-filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.ops-filter-chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:8px 13px;border:1px solid #dbe3ef;border-radius:999px;background:#fff;color:#334155;text-decoration:none;font-weight:750;font-size:.9rem}
.ops-filter-chip:hover,.ops-filter-chip.active{border-color:#4f63ff;background:#eef2ff;color:#3045d8}
.ops-due-badge{display:inline-flex;margin-top:6px}
.ops-calendar-card{overflow:hidden}
.ops-calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ops-calendar-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:.85rem;color:#64748b}
.ops-calendar-legend span{display:inline-flex;align-items:center;gap:6px}
.ops-calendar-dot{width:10px;height:10px;border-radius:999px;background:#cbd5e1}
.ops-calendar-dot.available{background:#16a34a}.ops-calendar-dot.limited{background:#f59e0b}.ops-calendar-dot.full{background:#dc2626}.ops-calendar-dot.blocked{background:#7c3aed}
.ops-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.ops-calendar-weekday{padding:7px 4px;text-align:center;color:#64748b;font-size:.75rem;font-weight:800;text-transform:uppercase}
.ops-calendar-day{min-height:88px;padding:10px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.ops-calendar-day.is-empty{border-color:transparent;background:transparent}
.ops-calendar-day .day-number{font-weight:850}.ops-calendar-day .day-stock{margin-top:8px;font-size:.78rem;color:#64748b;line-height:1.35}
.ops-calendar-day.available{border-color:#bbf7d0;background:#f0fdf4}.ops-calendar-day.limited{border-color:#fde68a;background:#fffbeb}.ops-calendar-day.full{border-color:#fecaca;background:#fef2f2}.ops-calendar-day.blocked{border-color:#ddd6fe;background:#f5f3ff}
.ops-calendar-loading{padding:30px 15px;text-align:center;color:#64748b}
.ops-alert-strip{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.ops-top-product-list{display:grid;gap:11px}
.ops-top-product-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #edf2f7}.ops-top-product-row:last-child{border-bottom:0}
.ops-top-product-rank{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#eef2ff;color:#3f51df;font-weight:900}
.ops-history-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ops-history-stat{padding:13px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}.ops-history-stat strong{display:block;margin-top:4px;font-size:1.2rem}
.ops-whatsapp-box{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;border:1px solid #bbf7d0;border-radius:14px;background:#f0fdf4}.ops-whatsapp-box p{margin:0;color:#166534}
.ops-whatsapp-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 14px;border-radius:10px;background:#16a34a;color:#fff!important;text-decoration:none;font-weight:800}
.ops-qr-card{text-align:center}.ops-qr-box{width:206px;min-height:206px;margin:16px auto;padding:13px;display:grid;place-items:center;border:1px solid #e2e8f0;border-radius:18px;background:#fff}.ops-qr-box img,.ops-qr-box canvas{max-width:180px!important;width:180px!important;height:180px!important}.ops-qr-code-text{font-size:1.05rem;font-weight:900;letter-spacing:1px}
.ops-scanner{display:none;margin-top:15px;padding:14px;border:1px solid #dbe3ef;border-radius:14px;background:#0f172a}.ops-scanner.is-open{display:block}.ops-scanner video{display:block;width:min(100%,520px);margin:0 auto;border-radius:12px;background:#000}.ops-scanner-status{margin-top:10px;text-align:center;color:#fff;font-size:.9rem}
.ops-maintenance-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:20px;align-items:start}
.ops-print-only{display:none}
@media(max-width:900px){.ops-maintenance-grid{grid-template-columns:1fr}.ops-history-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.ops-calendar-grid{gap:4px}.ops-calendar-day{min-height:72px;padding:7px 5px}.ops-calendar-day .day-stock{font-size:.68rem}.ops-history-stats{grid-template-columns:1fr 1fr}}
@media print{.admin-sidebar,.admin-topbar,.admin-footer,.main-nav,.customer-bottom-nav,.rp-chat-floating-stack,.rp-review-floating-button,.no-print,.btn,form{display:none!important}.admin-workspace,.admin-content,.container,.page-shell{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}.card{box-shadow:none!important;break-inside:avoid}.ops-print-only{display:block}}

/* Kalender ringkas: konten ditampilkan hanya saat pengguna membukanya. */
.ops-calendar-disclosure{overflow:hidden}
.ops-calendar-disclosure>summary{list-style:none}
.ops-calendar-disclosure>summary::-webkit-details-marker{display:none}
.ops-calendar-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;cursor:pointer;user-select:none}
.ops-calendar-summary>span:first-child{display:grid;gap:3px}
.ops-calendar-summary strong{font-size:1.05rem}
.ops-calendar-summary small{color:var(--muted);font-size:.82rem}
.ops-calendar-summary-action{display:inline-flex;align-items:center;gap:9px;color:var(--primary);font-size:.82rem;font-weight:800;white-space:nowrap}
.ops-calendar-summary-action i{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease}
.ops-calendar-disclosure[open] .ops-calendar-summary-action i{transform:rotate(225deg)}
.ops-calendar-summary-action .when-open{display:none}
.ops-calendar-disclosure[open] .when-open{display:inline}
.ops-calendar-disclosure[open] .when-closed{display:none}
.ops-calendar-disclosure-body{border-top:1px solid var(--border)}
.ops-calendar-description{margin:0 0 16px}
@media(max-width:520px){.ops-calendar-summary{padding:15px}.ops-calendar-summary-action{font-size:.75rem}.ops-calendar-summary small{font-size:.75rem}}


/* ============================================================
   Seller Center - modern functional SVG icons
   ============================================================ */

body.admin-body .admin-menu-icon {
    position: relative;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #c8d5e8;
    background: rgba(255, 255, 255, .025);
    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

body.admin-body .admin-menu-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.admin-body .admin-side-menu a:hover .admin-menu-icon {
    color: #fff;
    background: rgba(255, 255, 255, .09);
    transform: translateY(-1px);
}

body.admin-body .admin-side-menu a.active .admin-menu-icon {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .08),
        0 5px 14px rgba(0, 0, 0, .12);
}

body.admin-body .admin-menu-icon-notification {
    overflow: visible;
}

body.admin-body .admin-menu-icon-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    border: 2px solid #14233f;
    border-radius: 999px;
    background: #60a5fa;
}

body.admin-body .admin-side-menu a.active .admin-menu-icon-dot {
    border-color: #4154e8;
    background: #fff;
}

body.admin-body .admin-logout-icon {
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
}

body.admin-body .admin-logout-icon svg {
    width: 21px;
    height: 21px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Mobile drawer: larger app-like icons like the customer menu */
@media (max-width: 1024px) {
    body.admin-body .admin-side-menu {
        gap: 7px;
    }

    body.admin-body .admin-side-menu a {
        min-height: 54px;
        padding: 9px 12px;
        gap: 13px;
        border-radius: 14px;
    }

    body.admin-body .admin-menu-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    body.admin-body .admin-menu-icon svg {
        width: 24px;
        height: 24px;
    }

    body.admin-body .admin-side-menu a.active {
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28);
    }
}


/* ============================================================
   RentalAjay Brand Logo
   ============================================================ */

.rentalajay-brand-logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    background: #0751c9;
}

.brand-mark,
body.admin-body .admin-brand-mark {
    overflow: hidden;
    padding: 0;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, .32);
}

.brand-mark {
    box-shadow: 0 6px 16px rgba(39, 94, 254, .22);
}

body.admin-body .admin-brand-mark {
    box-shadow: 0 8px 20px rgba(37, 99, 235, .24);
}

.brand-mark .rentalajay-brand-logo,
body.admin-body .admin-brand-mark .rentalajay-brand-logo {
    border-radius: inherit;
}

@media (max-width: 640px) {
    .brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    body.admin-body .admin-brand-mark {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }
}


/* ============================================================
   PWA / Theme / Sharing
   ============================================================ */

.admin-app-utilities {
    display: grid;
    gap: 7px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.admin-app-utility {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    color: #cbd5e1;
    background: rgba(255,255,255,.035);
    cursor: pointer;
    font-weight: 750;
    text-align: left;
}

.admin-app-utility:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
}

.admin-app-utility-icon {
    width: 24px;
    text-align: center;
    font-size: 1.05rem;
}

.nav-utility-button {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 7px 10px;
    color: var(--text);
    background: var(--surface-2);
    cursor: pointer;
    font-weight: 700;
    white-space: nowrap;
}

.share-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.share-button {
    min-height: 40px;
}

.share-whatsapp {
    color: #fff !important;
    background: #16a34a;
    border-color: #16a34a;
}

.share-whatsapp:hover {
    background: #15803d;
}

.share-feedback {
    min-height: 20px;
    color: var(--muted);
    font-size: .82rem;
}

/* ============================================================
   Dark Mode
   ============================================================ */

html[data-theme="dark"] {
    --bg: #0b1220;
    --surface: #111b2d;
    --surface-2: #18243a;
    --text: #e8eef8;
    --muted: #9cabc0;
    --border: #283750;

    --success: #6ee7a8;
    --success-bg: #123226;

    --warning: #f6c867;
    --warning-bg: #392b10;

    --danger: #ff8f86;
    --danger-bg: #3b1919;

    --info: #8eb7ff;
    --info-bg: #142d53;

    --shadow:
        0 12px 34px rgba(0,0,0,.28);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .customer-body,
html[data-theme="dark"] .public-body {
    background: var(--bg);
    color: var(--text);
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .customer-header {
    background: rgba(11,18,32,.94);
    border-color: var(--border);
}

html[data-theme="dark"] .brand,
html[data-theme="dark"] .main-nav > a,
html[data-theme="dark"] .nav-user strong,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong {
    color: var(--text);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .summary-box,
html[data-theme="dark"] .admin-tabs,
html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination span,
html[data-theme="dark"] .main-nav,
html[data-theme="dark"] .booking-period-box,
html[data-theme="dark"] .booking-product-row,
html[data-theme="dark"] .ops-history-stat {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    color: var(--text);
    background: #0f192a;
    border-color: #33445f;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #73839a;
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .nav-toggle,
html[data-theme="dark"] .nav-utility-button {
    color: var(--text);
    background: var(--surface-2);
    border-color: var(--border);
}

html[data-theme="dark"] th {
    color: #aebbd0;
    background: #142034;
}

html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] .card-header {
    border-color: var(--border);
}

html[data-theme="dark"] .invoice {
    color: var(--text);
    background: var(--surface);
}

html[data-theme="dark"] .note {
    background: var(--info-bg);
}

html[data-theme="dark"] .store-hero {
    border-color: var(--border);
}

html[data-theme="dark"] .ops-calendar-day {
    color: #172033;
}

html[data-theme="dark"] .site-footer {
    background: #070c14;
}

html[data-theme="dark"] .customer-bottom-nav {
    background: rgba(11,18,32,.96);
    border-color: var(--border);
}

html[data-theme="dark"] .customer-bottom-nav a {
    color: #9fb0c6;
}

html[data-theme="dark"] .customer-bottom-nav a.active {
    color: #8fb0ff;
}

/*
 * Kontras komponen lama yang masih menggunakan warna terang statis.
 * Diletakkan setelah aturan dasar agar berlaku di halaman publik,
 * customer, dan Seller Center.
 */
html[data-theme="dark"] body.admin-body,
html[data-theme="dark"] .admin-content,
html[data-theme="dark"] .admin-workspace {
    color: var(--text);
    background: var(--bg);
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] .small,
html[data-theme="dark"] small,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .day-stock,
html[data-theme="dark"] .ops-calendar-weekday {
    color: #b3c0d3;
}

html[data-theme="dark"] .search-panel,
html[data-theme="dark"] .notification-item,
html[data-theme="dark"] .notification-item.is-unread,
html[data-theme="dark"] .customer-panel,
html[data-theme="dark"] .customer-recent-card,
html[data-theme="dark"] .customer-mobile-order-card,
html[data-theme="dark"] .customer-mobile-order-period,
html[data-theme="dark"] .admin-dashboard-card,
html[data-theme="dark"] .admin-quick-actions,
html[data-theme="dark"] .admin-quick-actions a,
html[data-theme="dark"] .admin-stock-item,
html[data-theme="dark"] .admin-table tbody tr:hover,
html[data-theme="dark"] .market-card,
html[data-theme="dark"] .market-filter-card,
html[data-theme="dark"] .market-toolbar,
html[data-theme="dark"] .store-card,
html[data-theme="dark"] .provider-register-box {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] .summary-row,
html[data-theme="dark"] .customer-status-item,
html[data-theme="dark"] .customer-next-booking,
html[data-theme="dark"] .booking-product-row,
html[data-theme="dark"] .store-stats > div {
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] a:not(.btn):not(.customer-hero-actions a):not(.site-footer a) {
    text-decoration-color: rgba(143,176,255,.55);
}

html[data-theme="dark"] .ops-calendar-summary {
    color: var(--text);
    background: var(--surface);
}

html[data-theme="dark"] .ops-calendar-summary-action,
html[data-theme="dark"] .market-card-price,
html[data-theme="dark"] .customer-detail-link {
    color: #9bb8ff;
}

html[data-theme="dark"] .ops-calendar-day.available {
    color: #d9fbe6;
    background: #123226;
    border-color: #256947;
}

html[data-theme="dark"] .ops-calendar-day.limited {
    color: #fff0bf;
    background: #392b10;
    border-color: #765b20;
}

html[data-theme="dark"] .ops-calendar-day.full {
    color: #ffd7d3;
    background: #3b1919;
    border-color: #743331;
}

html[data-theme="dark"] .ops-calendar-day.blocked {
    color: #eadfff;
    background: #2c2047;
    border-color: #614791;
}

html[data-theme="dark"] .ops-calendar-day .day-stock {
    color: inherit;
    opacity: .86;
}

html[data-theme="dark"] option {
    color: var(--text);
    background: #0f192a;
}

html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="month"] {
    color-scheme: dark;
}

@media (max-width: 960px) {
    .nav-utility-button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ============================================================
   Seller Subscription / DANA VA
   ============================================================ */

.subscription-va-number {
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.subscription-price-card {
    position: relative;
    overflow: hidden;
}

.subscription-price-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #4f46e5);
}

.subscription-payment-box {
    border: 1px dashed rgba(37, 99, 235, .35);
    background: rgba(37, 99, 235, .035);
}

html[data-theme="dark"] .subscription-payment-box {
    border-color: #38537d;
    background: #111f35;
}

@media (max-width: 720px) {
    .subscription-price-card .btn,
    .subscription-price-card .form-select {
        width: 100%;
    }
}


/* ============================================================
   RentalAjay Mobile Minimal UI
   - Hanya aktif pada layar <= 760px
   - Desktop/tablet besar tidak diubah
   ============================================================ */

@media (max-width: 760px) {
    :root {
        --mobile-gap: 10px;
        --mobile-radius: 14px;
    }

    body {
        font-size: 14px;
        line-height: 1.45;
    }

    .container {
        width: min(100% - 24px, 1180px);
    }

    .page-shell {
        padding-top: 14px;
        padding-bottom: 88px;
    }

    .card,
    .summary-box,
    .admin-tabs,
    .search-panel {
        border-radius: var(--mobile-radius);
        box-shadow: 0 2px 10px rgba(24, 34, 51, .035);
    }

    .card-body {
        padding: 14px;
    }

    .card-header {
        padding: 13px 14px;
        gap: 10px;
    }

    .section-head {
        margin: 21px 0 10px;
        gap: 8px;
    }

    .section-head h1,
    .section-head h2 {
        font-size: 1.18rem;
        line-height: 1.25;
    }

    .section-head p,
    .section-head .muted {
        margin-top: 4px;
        font-size: .8rem;
    }

    .btn {
        min-height: 40px;
        padding: 9px 13px;
        border-radius: 10px;
        font-size: .86rem;
    }

    .btn-sm {
        min-height: 34px;
        padding: 7px 10px;
        font-size: .78rem;
    }

    .form-group {
        margin-bottom: 13px;
    }

    .form-label {
        margin-bottom: 5px;
        font-size: .82rem;
    }

    .form-control,
    .form-select,
    input,
    select,
    textarea {
        min-height: 42px;
        border-radius: 10px;
        font-size: .88rem;
    }

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

    .alert {
        padding: 10px 12px;
        margin-bottom: 10px;
        border-radius: 11px;
        font-size: .82rem;
    }

    /* Header publik/customer lebih ringkas */
    .site-header,
    .customer-header {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .site-header .nav-wrap,
    .customer-header .nav-wrap,
    body.customer-body .customer-header .nav-wrap {
        min-height: 58px;
        gap: 8px;
    }

    .brand {
        gap: 8px;
        font-size: 1rem;
    }

    .brand-mark {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .rentalajay-brand-logo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .customer-brand-label {
        display: none !important;
    }

    body.customer-body .customer-mobile-profile-shortcut {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 11px;
        box-shadow: none;
    }

    .nav-toggle {
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 11px;
        font-size: 1.05rem;
    }

    body.public-body .main-nav {
        top: 54px;
        right: 10px;
        width: calc(100% - 20px);
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        gap: 3px;
        padding: 10px;
        border-radius: 16px;
    }

    body.public-body .main-nav > a,
    body.public-body .main-nav > button,
    body.public-body .main-nav .btn {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 9px 11px;
        border-radius: 10px;
    }

    /* Hero halaman publik: ringkas, tidak memenuhi 1 layar */
    .hero {
        padding: 20px 18px;
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(24, 34, 51, .10);
    }

    .hero-grid {
        gap: 12px;
    }

    .hero h1 {
        margin-bottom: 10px;
        font-size: 1.62rem;
        line-height: 1.12;
        letter-spacing: -.03em;
    }

    .hero p {
        margin: 0 0 13px;
        font-size: .88rem;
        line-height: 1.5;
    }

    .hero .badge {
        padding: 4px 8px;
        font-size: .66rem;
    }

    .hero-card {
        display: none;
    }

    .hero .actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .hero .actions .btn:only-child {
        grid-column: 1 / -1;
    }

    /* Kategori tetap 2 kolom agar terasa seperti marketplace mobile */
    #kategori + .grid.grid-4,
    .public-body #kategori + .grid.grid-4,
    .customer-body #kategori + .grid.grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 14px !important;
    }

    #kategori + .grid.grid-4 > .card {
        min-width: 0;
        padding: 11px !important;
        border-radius: 12px;
    }

    #kategori + .grid.grid-4 > .card strong {
        display: -webkit-box;
        min-height: 34px;
        overflow: hidden;
        font-size: .84rem !important;
        line-height: 1.25;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    #kategori + .grid.grid-4 > .card .small {
        display: none !important;
    }

    #kategori + .grid.grid-4 > .card .badge {
        max-width: 100%;
        margin-top: 8px !important;
        padding: 4px 7px;
        overflow: hidden;
        font-size: .63rem;
        text-overflow: ellipsis;
    }

    /* Search: satu input besar + filter dan tombol satu baris */
    .search-panel,
    .store-filter {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 11px;
    }

    .search-panel > input:first-of-type,
    .store-filter > input:first-of-type {
        grid-column: 1 / -1;
    }

    .search-panel .btn,
    .store-filter .btn {
        min-width: 72px;
        padding-inline: 12px;
    }

    /* Kartu produk lebih rapat */
    .market-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .market-card {
        border-radius: 12px;
        box-shadow: none;
    }

    .market-card-image {
        padding: 5px;
    }

    .market-stock {
        top: 6px;
        right: 6px;
        padding: 3px 6px;
        font-size: .58rem;
    }

    .market-card-body {
        padding: 9px;
    }

    .market-card-category {
        font-size: .6rem;
    }

    .market-card-title {
        min-height: 36px;
        margin-top: 4px;
        font-size: .79rem;
        line-height: 1.32;
    }

    .market-card-price {
        padding-top: 8px;
        font-size: .9rem;
    }

    .market-card-price small {
        font-size: .58rem;
    }

    .store-mini {
        margin-top: 6px;
    }

    .store-avatar-sm {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .store-mini-copy strong {
        font-size: .65rem;
    }

    /* Detail produk/toko */
    .detail-grid {
        gap: 12px;
    }

    .detail-image {
        border-radius: 14px;
    }

    .spec-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin: 12px 0;
    }

    .spec {
        padding: 10px;
        border-radius: 10px;
    }

    .store-hero {
        margin-bottom: 14px;
        border-radius: 16px;
        box-shadow: none;
    }

    .store-hero-inner {
        padding: 16px;
        gap: 13px;
    }

    .store-identity {
        gap: 11px;
    }

    .store-identity h1 {
        margin-bottom: 3px;
        font-size: 1.28rem;
    }

    .store-identity p {
        font-size: .8rem;
        line-height: 1.42;
    }

    .store-avatar-lg {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

    .store-stats {
        gap: 14px;
        margin-top: 9px;
    }

    .store-stats strong {
        font-size: .95rem;
    }

    .store-stats span {
        font-size: .68rem;
    }

    /* Login/daftar tidak terlalu tinggi */
    .social-auth-shell,
    .auth-shell {
        margin-top: 8px;
        margin-bottom: 22px;
    }

    .social-auth-kicker {
        padding: 4px 9px;
        margin-bottom: 7px;
        font-size: .66rem;
    }

    .social-auth-heading h1 {
        font-size: 1.55rem;
    }

    .social-auth-heading > p {
        font-size: .82rem;
    }

    .social-auth-grid {
        gap: 10px;
    }

    .social-auth-grid .card-body {
        padding: 15px;
    }

    .social-section-title {
        gap: 10px;
        margin-bottom: 14px;
    }

    .social-section-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .social-section-title h2 {
        font-size: 1.05rem;
    }

    .social-section-title p {
        font-size: .78rem;
    }

    .social-btn {
        min-height: 46px;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: .86rem;
    }

    .social-security-note,
    .provider-register-box {
        margin-top: 12px;
        padding: 10px 11px;
        font-size: .74rem;
    }

    /* Tabel tetap bisa digeser, tetapi lebih rapat */
    .table-wrap {
        margin-inline: -2px;
        border-radius: 10px;
    }

    th,
    td {
        padding: 9px 10px;
        font-size: .76rem;
    }

    th {
        font-size: .66rem;
    }

    /* Seller Center di HP */
    .admin-topbar {
        min-height: 56px;
        padding: 8px 11px;
    }

    .admin-menu-toggle {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .admin-topbar-eyebrow {
        display: none;
    }

    .admin-topbar h1 {
        max-width: 58vw;
        overflow: hidden;
        font-size: 1rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .admin-content {
        padding: 12px 10px 28px;
    }

    .admin-sidebar {
        width: min(84vw, 310px);
    }

    .admin-side-menu {
        padding-inline: 8px;
    }

    .admin-side-menu a {
        min-height: 42px;
        padding: 9px 10px;
        border-radius: 10px;
        font-size: .82rem;
    }

    .admin-stat-grid,
    .customer-stat-grid,
    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    .admin-stat-card,
    .customer-stat-card,
    .stat-card {
        padding: 12px;
        border-radius: 12px;
    }

    .admin-stat-card > strong,
    .stat-value {
        font-size: 1.25rem;
    }

    .admin-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .admin-quick-actions a {
        min-height: 68px;
        padding: 11px;
    }

    /* Subscription cards lebih padat */
    .subscription-price-card .card-body {
        padding: 14px;
    }

    .subscription-payment-box {
        padding: 12px !important;
    }

    /* Bottom nav customer: hanya 5 menu utama */
    body.customer-body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }

    body.customer-body .customer-bottom-nav.customer-bottom-nav-minimal {
        min-height: calc(62px + env(safe-area-inset-bottom, 0px));
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: start;
        padding: 5px 7px calc(4px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--border);
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -5px 18px rgba(20, 34, 66, .08);
    }

    body.customer-body .customer-bottom-nav.customer-bottom-nav-minimal > a,
    body.customer-body .customer-more-menu > summary {
        min-height: 51px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        gap: 2px;
        padding: 3px 1px;
        border-radius: 11px;
        color: #7d8798;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        list-style: none;
        -webkit-tap-highlight-color: transparent;
    }

    body.customer-body .customer-more-menu > summary::-webkit-details-marker {
        display: none;
    }

    body.customer-body .customer-bottom-nav.customer-bottom-nav-minimal > a.active,
    body.customer-body .customer-more-menu.active > summary,
    body.customer-body .customer-more-menu[open] > summary {
        color: #315ffd;
        background: #f1f4ff;
    }

    body.customer-body .customer-bottom-icon {
        width: 23px;
        height: 23px;
    }

    body.customer-body .customer-bottom-icon svg {
        width: 21px;
        height: 21px;
    }

    body.customer-body .customer-bottom-label {
        font-size: .55rem;
    }

    body.customer-body .customer-more-menu {
        min-width: 0;
    }

    body.customer-body .customer-more-sheet {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        z-index: 1185;
        overflow: hidden;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--surface);
        box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
        text-align: left;
    }

    body.customer-body .customer-more-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 2px 3px 10px;
    }

    body.customer-body .customer-more-sheet-head strong,
    body.customer-body .customer-more-sheet-head span {
        display: block;
    }

    body.customer-body .customer-more-sheet-head strong {
        font-size: .94rem;
    }

    body.customer-body .customer-more-sheet-head > div > span {
        margin-top: 1px;
        color: var(--muted);
        font-size: .7rem;
    }

    body.customer-body .customer-more-close-hint {
        color: var(--muted);
        font-size: 1.3rem;
    }

    body.customer-body .customer-more-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body.customer-body .customer-more-grid > a {
        position: relative;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 10px;
        border: 1px solid var(--border);
        border-radius: 11px;
        color: var(--text);
        background: var(--surface-2);
        font-size: .78rem;
        font-weight: 750;
        text-decoration: none;
    }

    body.customer-body .customer-more-grid > a.active {
        color: #315ffd;
        border-color: rgba(49, 95, 253, .28);
        background: #f1f4ff;
    }

    body.customer-body .customer-more-grid > a > span {
        width: 22px;
        display: inline-grid;
        place-items: center;
        font-size: 1rem;
    }

    body.customer-body .customer-more-grid > a > b {
        min-width: 19px;
        height: 19px;
        display: grid;
        place-items: center;
        padding: 0 5px;
        margin-left: auto;
        border-radius: 999px;
        color: #fff;
        background: #315ffd;
        font-size: .58rem;
    }

    body.customer-body .customer-more-utilities {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 7px;
    }

    body.customer-body .customer-more-utilities .nav-utility-button {
        width: 100%;
        min-height: 40px;
        padding: 8px 9px;
        border-radius: 10px;
        font-size: .74rem;
        text-align: center;
    }

    body.customer-body .customer-more-logout {
        margin-top: 7px;
    }

    body.customer-body .customer-more-logout button {
        width: 100%;
        min-height: 40px;
        border: 1px solid rgba(180, 35, 24, .22);
        border-radius: 10px;
        color: var(--danger);
        background: var(--danger-bg);
        font-weight: 800;
        cursor: pointer;
    }

    body.customer-body .page-shell {
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.customer-body .site-footer {
        margin-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }

    body.customer-body .rp-chat-floating-stack,
    body.customer-body .rp-review-floating-button {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Dark mode untuk menu mobile tambahan */
    html[data-theme="dark"] body.customer-body .customer-bottom-nav.customer-bottom-nav-minimal {
        background: rgba(11, 18, 32, .97);
    }

    html[data-theme="dark"] body.customer-body .customer-more-sheet {
        background: var(--surface);
        border-color: var(--border);
    }

    html[data-theme="dark"] body.customer-body .customer-more-grid > a {
        color: var(--text);
        background: var(--surface-2);
        border-color: var(--border);
    }

    html[data-theme="dark"] body.customer-body .customer-more-grid > a.active {
        color: #8fb0ff;
        background: #142342;
        border-color: #31517e;
    }
}

@media (max-width: 380px) {
    .container {
        width: min(100% - 18px, 1180px);
    }

    .hero {
        padding: 17px 14px;
    }

    .hero h1 {
        font-size: 1.42rem;
    }

    #kategori + .grid.grid-4 > .card {
        padding: 9px !important;
    }

    body.customer-body .customer-more-sheet {
        left: 7px;
        right: 7px;
        padding: 10px;
    }

    body.customer-body .customer-more-grid > a {
        padding-inline: 8px;
        font-size: .72rem;
    }
}

/* ============================================================
   RentalAjay Mobile Minimal V2
   Perbaikan nyata untuk halaman dashboard, katalog, toko,
   detail produk, auth, dan Seller Center.
   Desktop > 760px tetap menggunakan layout lama.
   ============================================================ */

.customer-mobile-order-list {
    display: none;
}

@media (max-width: 760px) {
    /* --------------------------------------------------------
       1. Header customer: benar-benar seperti aplikasi mobile
       -------------------------------------------------------- */
    body.customer-body .customer-header .nav-wrap {
        min-height: 56px !important;
        justify-content: space-between;
        padding-block: 7px;
    }

    body.customer-body .customer-header .brand {
        min-width: 0;
        gap: 8px;
        font-size: 1rem;
    }

    body.customer-body .customer-header .brand-mark {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 11px;
    }

    body.customer-body .customer-header .main-nav {
        display: none !important;
    }

    body.customer-body .customer-mobile-profile-shortcut {
        display: grid !important;
        place-items: center;
        margin-left: auto;
    }

    /* --------------------------------------------------------
       2. Dashboard customer: hero pendek + statistik 2 kolom
       -------------------------------------------------------- */
    body.customer-body .customer-dashboard-hero {
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 18px 16px !important;
        margin-top: 2px;
        border-radius: 18px !important;
        box-shadow: 0 12px 30px rgba(39, 94, 254, .16) !important;
    }

    body.customer-body .customer-dashboard-hero::after {
        width: 210px;
        height: 210px;
        right: -80px;
        bottom: -110px;
        opacity: .55;
    }

    body.customer-body .customer-hero-label {
        font-size: .62rem !important;
        letter-spacing: .08em;
    }

    body.customer-body .customer-dashboard-hero h1 {
        max-width: 100%;
        margin: 6px 0 7px !important;
        font-size: clamp(1.45rem, 7vw, 1.8rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -.035em;
    }

    body.customer-body .customer-dashboard-hero p {
        max-width: 100%;
        font-size: .82rem !important;
        line-height: 1.48;
    }

    body.customer-body .customer-hero-illustration {
        display: none !important;
    }

    body.customer-body .customer-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        margin-top: 14px !important;
    }

    body.customer-body .customer-hero-actions .btn {
        width: 100%;
        min-height: 40px;
        justify-content: center;
        padding: 8px 12px;
        border-radius: 10px;
        font-size: .79rem;
    }

    body.customer-body .customer-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    body.customer-body .customer-stat-card {
        min-height: 92px !important;
        align-items: flex-start !important;
        gap: 9px !important;
        padding: 11px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    body.customer-body .customer-stat-icon {
        width: 35px !important;
        height: 35px !important;
        flex-basis: 35px !important;
        border-radius: 10px !important;
        font-size: .82rem;
    }

    body.customer-body .customer-stat-card span {
        font-size: .66rem !important;
        line-height: 1.2;
    }

    body.customer-body .customer-stat-card strong {
        margin-top: 2px !important;
        font-size: 1.16rem !important;
        line-height: 1.1 !important;
    }

    body.customer-body .customer-stat-card .customer-money-value {
        font-size: .84rem !important;
        line-height: 1.2 !important;
    }

    body.customer-body .customer-stat-card small {
        display: none !important;
    }

    body.customer-body .customer-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        margin-top: 10px !important;
    }

    body.customer-body .customer-panel,
    body.customer-body .customer-recent-card {
        padding: 13px !important;
        border-radius: 14px !important;
    }

    body.customer-body .customer-recent-card {
        margin-top: 10px !important;
    }

    body.customer-body .customer-panel-head {
        gap: 8px !important;
        margin-bottom: 11px !important;
    }

    body.customer-body .customer-panel-head h2 {
        margin-top: 2px !important;
        font-size: .96rem !important;
    }

    body.customer-body .customer-panel-head a {
        font-size: .68rem;
        white-space: nowrap;
    }

    body.customer-body .customer-panel-kicker {
        font-size: .58rem !important;
        letter-spacing: .08em;
    }

    body.customer-body .customer-status-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body.customer-body .customer-status-item {
        min-width: 0;
        gap: 6px !important;
        padding: 9px 7px !important;
        border-radius: 10px !important;
    }

    body.customer-body .customer-status-item strong {
        font-size: .7rem;
        line-height: 1.2;
    }

    body.customer-body .customer-status-item span:last-child {
        display: none;
    }

    body.customer-body .customer-status-dot {
        width: 7px !important;
        height: 7px !important;
        flex-basis: 7px !important;
        margin-top: 3px !important;
    }

    body.customer-body .customer-next-booking {
        gap: 9px !important;
    }

    body.customer-body .customer-next-date,
    body.customer-body .customer-next-meta {
        font-size: .75rem;
    }

    body.customer-body .customer-empty-mini {
        gap: 6px !important;
        padding: 12px !important;
        font-size: .76rem;
    }

    body.customer-body .customer-empty-mini > div {
        font-size: 1.4rem !important;
    }

    /* Pesanan terakhir menjadi kartu mobile, bukan tabel desktop mini */
    body.customer-body .customer-desktop-order-table {
        display: none !important;
    }

    body.customer-body .customer-mobile-order-list {
        display: grid;
        gap: 8px;
    }

    body.customer-body .customer-mobile-order-empty {
        padding: 15px 10px;
        color: var(--muted);
        font-size: .78rem;
        text-align: center;
    }

    body.customer-body .customer-mobile-order-card {
        display: grid;
        gap: 9px;
        padding: 11px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface-2);
    }

    body.customer-body .customer-mobile-order-head,
    body.customer-body .customer-mobile-order-foot,
    body.customer-body .customer-mobile-order-period,
    body.customer-body .customer-mobile-order-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    body.customer-body .customer-mobile-order-head > div {
        min-width: 0;
        display: grid;
        gap: 1px;
    }

    body.customer-body .customer-mobile-order-label,
    body.customer-body .customer-mobile-order-meta span {
        color: var(--muted);
        font-size: .61rem;
    }

    body.customer-body .customer-mobile-order-head strong {
        overflow: hidden;
        font-size: .76rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.customer-body .customer-mobile-order-period {
        justify-content: flex-start;
        padding: 7px 8px;
        border-radius: 9px;
        background: var(--surface);
        font-size: .7rem;
    }

    body.customer-body .customer-mobile-order-meta > div {
        min-width: 0;
        display: grid;
        flex: 1;
        gap: 1px;
    }

    body.customer-body .customer-mobile-order-meta strong {
        overflow: hidden;
        font-size: .72rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.customer-body .customer-mobile-order-foot small {
        color: var(--muted);
        font-size: .61rem;
    }

    /* --------------------------------------------------------
       3. Katalog: hero pendek, kategori 2 kolom, produk 2 kolom
       -------------------------------------------------------- */
    body.public-body .hero,
    body.customer-body .hero {
        padding: 17px 14px !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 22px rgba(24, 34, 51, .08) !important;
    }

    body.public-body .hero h1,
    body.customer-body .hero h1 {
        margin-bottom: 7px !important;
        font-size: 1.42rem !important;
        line-height: 1.12 !important;
    }

    body.public-body .hero p,
    body.customer-body .hero p {
        margin-bottom: 10px !important;
        font-size: .79rem !important;
    }

    body.public-body #kategori + .grid.grid-4,
    body.customer-body #kategori + .grid.grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.public-body #kategori + .grid.grid-4 > .card,
    body.customer-body #kategori + .grid.grid-4 > .card {
        min-height: 74px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding: 10px !important;
    }

    body.public-body .search-panel,
    body.customer-body .search-panel,
    body.public-body .store-filter,
    body.customer-body .store-filter {
        grid-template-columns: minmax(0, 1fr) 96px !important;
        gap: 7px !important;
        padding: 9px !important;
    }

    body.public-body .search-panel > input:first-of-type,
    body.customer-body .search-panel > input:first-of-type,
    body.public-body .store-filter > input:first-of-type,
    body.customer-body .store-filter > input:first-of-type {
        grid-column: 1 / -1;
    }

    .market-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .market-card-image-link {
        aspect-ratio: 1 / .88;
    }

    .market-card-image {
        padding: 5px !important;
    }

    .market-card-body {
        padding: 8px !important;
    }

    .market-card-title {
        min-height: 32px !important;
        font-size: .74rem !important;
        line-height: 1.28 !important;
    }

    .market-card-price {
        padding-top: 6px !important;
        font-size: .84rem !important;
    }

    .market-card-price small,
    .market-card-category {
        font-size: .56rem !important;
    }

    .market-stock {
        top: 5px !important;
        right: 5px !important;
        padding: 3px 5px !important;
        font-size: .53rem !important;
    }

    /* --------------------------------------------------------
       4. Toko + detail produk lebih sederhana
       -------------------------------------------------------- */
    .store-hero-inner {
        padding: 13px !important;
    }

    .store-identity {
        gap: 9px !important;
    }

    .store-avatar-lg {
        width: 46px !important;
        height: 46px !important;
        flex-basis: 46px !important;
    }

    .store-identity h1 {
        font-size: 1.1rem !important;
    }

    .store-identity p {
        margin-top: 3px;
        font-size: .72rem !important;
    }

    .store-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px !important;
    }

    .store-stats > div {
        padding: 7px 5px;
        border-radius: 9px;
        background: var(--surface-2);
        text-align: center;
    }

    .store-hero-actions,
    .store-seller-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .store-hero-actions .btn,
    .store-seller-actions .btn,
    .store-seller-actions form,
    .store-seller-actions form .btn {
        width: 100%;
        min-width: 0;
    }

    .detail-grid {
        gap: 9px !important;
    }

    .product-gallery {
        overflow: hidden;
        border-radius: 14px !important;
    }

    .detail-image {
        width: 100%;
        max-height: 310px;
        object-fit: contain;
        border-radius: 12px !important;
    }

    .detail-grid > .card > .card-body {
        padding: 13px !important;
    }

    .detail-grid .price {
        margin: 10px 0 !important;
        font-size: 1.3rem !important;
    }

    .spec-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 9px 0 !important;
    }

    .spec {
        padding: 8px !important;
    }

    .store-seller-panel {
        margin-top: 10px;
    }

    .store-seller-panel-grid {
        gap: 10px !important;
        padding: 12px !important;
    }

    /* --------------------------------------------------------
       5. Login + pendaftaran lebih compact
       -------------------------------------------------------- */
    .social-auth-shell,
    .auth-shell {
        max-width: 100% !important;
        margin-top: 2px !important;
    }

    .auth-head,
    .social-auth-heading {
        margin-bottom: 12px !important;
    }

    .auth-head h1,
    .social-auth-heading h1 {
        font-size: 1.35rem !important;
        line-height: 1.15;
    }

    .auth-head p,
    .social-auth-heading > p {
        font-size: .76rem !important;
        line-height: 1.45;
    }

    .social-auth-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .social-auth-grid .card-body,
    .auth-shell > .card .card-body {
        padding: 12px !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .auth-shell .grid.grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .auth-shell .grid.grid-2 > .card {
        padding: 10px !important;
        border-radius: 11px !important;
    }

    .rp-location-form-card {
        padding: 11px !important;
        border-radius: 12px !important;
    }

    /* --------------------------------------------------------
       6. Seller Center: rapat + statistik 2 kolom
       -------------------------------------------------------- */
    body.admin-body .admin-topbar {
        min-height: 54px !important;
        padding: 7px 10px !important;
    }

    body.admin-body .admin-content {
        padding: 10px 9px 26px !important;
    }

    body.admin-body .section-head {
        align-items: stretch;
        flex-direction: column;
        margin: 10px 0 !important;
    }

    body.admin-body .section-head .actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    body.admin-body .section-head .actions .btn {
        width: 100%;
        min-width: 0;
    }

    body.admin-body .dashboard-stats,
    body.admin-body .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.admin-body .stat-card,
    body.admin-body .admin-stat-card {
        min-height: 86px;
        padding: 10px !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    body.admin-body .stat-label {
        font-size: .64rem;
    }

    body.admin-body .stat-value {
        margin-top: 3px;
        font-size: 1.08rem !important;
    }

    body.admin-body .grid.grid-2 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.admin-body .card-header {
        padding: 10px 11px !important;
    }

    body.admin-body .card-body {
        padding: 11px !important;
    }

    body.admin-body .table-wrap {
        border-radius: 10px;
    }

    /* --------------------------------------------------------
       7. Dark mode: semua kartu baru mengikuti variabel tema
       -------------------------------------------------------- */
    html[data-theme="dark"] body.customer-body .customer-mobile-order-card,
    html[data-theme="dark"] body.customer-body .customer-mobile-order-period,
    html[data-theme="dark"] .store-stats > div {
        border-color: var(--border);
        color: var(--text);
        background: var(--surface-2);
    }
}

@media (max-width: 390px) {
    body.customer-body .customer-dashboard-hero {
        padding: 16px 13px !important;
    }

    body.customer-body .customer-dashboard-hero h1 {
        font-size: 1.36rem !important;
    }

    body.customer-body .customer-stat-card {
        padding: 9px !important;
    }

    body.customer-body .customer-stat-icon {
        width: 31px !important;
        height: 31px !important;
        flex-basis: 31px !important;
    }

    .market-card-body {
        padding: 7px !important;
    }

    .market-card-title {
        font-size: .7rem !important;
    }
}

/* ============================================================
   Mobile marketplace experience
   ============================================================ */
@media (max-width: 760px) {
    html {
        scroll-padding-top: 122px;
    }

    body {
        font-size: 14px;
        -webkit-tap-highlight-color: transparent;
    }

    body.customer-body,
    body.public-body {
        background: #f4f5f7;
    }

    body.customer-body .customer-header,
    body.public-body .customer-header {
        min-height: auto;
        padding: 8px 0 10px;
        border-bottom: 0;
        background: linear-gradient(135deg, #315ffd, #5b45df);
        box-shadow: 0 4px 16px rgba(28, 53, 136, .18);
    }

    body.customer-body .customer-header .nav-wrap,
    body.public-body .customer-header .nav-wrap {
        min-height: 0;
        flex-wrap: wrap;
        gap: 8px 10px;
    }

    body.customer-body .customer-header .brand,
    body.public-body .customer-header .brand {
        color: #fff;
        font-size: 1rem;
    }

    body.customer-body .customer-header .brand-mark,
    body.public-body .customer-header .brand-mark {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        background: rgba(255,255,255,.16);
        box-shadow: none;
    }

    body.customer-body .customer-brand-label {
        color: rgba(255,255,255,.75);
    }

    body.customer-body .customer-mobile-profile-shortcut {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        margin-left: auto;
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 50%;
        background: rgba(255,255,255,.18);
        box-shadow: none;
    }

    body.public-body .customer-header .nav-toggle {
        margin-left: auto;
        color: #fff;
        background: rgba(255,255,255,.16);
    }

    .mobile-market-search {
        order: 3;
        width: 100%;
        height: 40px;
        display: grid;
        grid-template-columns: 20px minmax(0,1fr) auto;
        align-items: center;
        gap: 7px;
        padding: 0 5px 0 11px;
        border: 0;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(22, 38, 91, .14);
    }

    .mobile-market-search svg {
        width: 18px;
        fill: none;
        stroke: #8b95a7;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .mobile-market-search input {
        min-width: 0;
        height: 100%;
        padding: 0;
        border: 0;
        outline: 0;
        color: #172033;
        background: transparent;
        font-size: .84rem;
    }

    .mobile-market-search button {
        height: 32px;
        padding: 0 12px;
        border: 0;
        border-radius: 6px;
        color: #fff;
        background: #315ffd;
        font-size: .75rem;
        font-weight: 800;
    }

    html[data-theme="dark"] .mobile-market-search {
        background: #111b2d;
        box-shadow: 0 2px 8px rgba(0,0,0,.3);
    }

    html[data-theme="dark"] .mobile-market-search input {
        color: #e8eef8;
        background: transparent;
        border: 0;
    }

    html[data-theme="dark"] .mobile-market-search input::placeholder {
        color: #9cabc0;
    }

    body.customer-body .page-shell,
    body.public-body .page-shell {
        width: 100%;
        padding-top: 0;
    }

    body.customer-body .page-shell > :not(.hero):not(.market-product-grid),
    body.public-body .page-shell > :not(.hero):not(.market-product-grid) {
        margin-inline: 10px;
    }

    .hero {
        margin: 0 0 10px;
        padding: 22px 16px;
        border-radius: 0 0 18px 18px;
        box-shadow: none;
    }

    .hero h1 {
        margin-bottom: 9px;
        font-size: 1.52rem;
        line-height: 1.18;
        letter-spacing: -.025em;
    }

    .hero p {
        margin: 0 0 14px;
        font-size: .82rem;
        line-height: 1.5;
    }

    .hero-card {
        display: none;
    }

    .hero .actions .btn {
        min-height: 38px;
        padding: 8px 12px;
        font-size: .78rem;
    }

    .section-head {
        margin-top: 18px;
        margin-bottom: 10px;
        gap: 4px;
    }

    .section-head h1,
    .section-head h2 {
        font-size: 1.08rem;
        line-height: 1.3;
    }

    .section-head .muted {
        font-size: .75rem;
    }

    .market-category-grid {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto;
        margin-inline: 0 !important;
        padding: 0 10px 5px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .market-category-grid::-webkit-scrollbar {
        display: none;
    }

    .market-category-card {
        width: 138px;
        min-width: 138px;
        min-height: 96px;
        padding: 12px !important;
        border-radius: 10px;
        box-shadow: none;
        scroll-snap-align: start;
    }

    .market-category-card strong {
        font-size: .82rem !important;
    }

    .market-category-card .small {
        display: none !important;
    }

    .market-category-card .badge {
        margin-top: 8px !important;
        padding: 4px 7px;
        font-size: .62rem;
    }

    .search-panel {
        grid-template-columns: minmax(0,1fr) auto !important;
        gap: 7px;
        margin-top: 10px;
        padding: 8px;
        border-radius: 10px;
        box-shadow: none;
    }

    .search-panel .form-control {
        grid-column: 1/-1;
    }

    .search-panel .form-control,
    .search-panel .form-select,
    .search-panel .btn {
        min-height: 40px;
        padding: 8px 10px;
        font-size: .78rem;
    }

    .market-product-grid {
        gap: 7px;
        padding: 0 7px;
    }

    .market-card {
        border: 0;
        border-radius: 8px;
        box-shadow: 0 1px 5px rgba(24,34,51,.1);
    }

    .market-card-image {
        padding: 4px;
    }

    .market-stock {
        top: 6px;
        right: 6px;
        padding: 3px 6px;
        border: 0;
        border-radius: 4px;
        font-size: .58rem;
    }

    .market-card-body {
        padding: 8px 8px 9px;
    }

    .market-card-category {
        font-size: .58rem;
        letter-spacing: .02em;
    }

    .market-card-title {
        min-height: 34px;
        margin-top: 4px;
        font-size: .76rem;
        font-weight: 700;
        line-height: 1.4;
    }

    .market-card-price {
        padding-top: 8px;
        font-size: .88rem;
    }

    .store-mini {
        margin-top: 7px;
    }

    .store-avatar-sm {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

    .store-mini-copy strong {
        font-size: .63rem;
        font-weight: 650;
    }

    .site-footer {
        padding: 24px 10px;
    }

    .footer-grid {
        gap: 15px;
    }

    .footer-links {
        gap: 8px 14px;
    }

    body.customer-body .customer-bottom-nav.customer-bottom-nav-minimal {
        min-height: calc(60px + env(safe-area-inset-bottom,0px));
        padding: 4px 7px calc(3px + env(safe-area-inset-bottom,0px));
        box-shadow: 0 -2px 12px rgba(22,34,61,.1);
    }

    body.customer-body .customer-bottom-nav.customer-bottom-nav-minimal > a,
    body.customer-body .customer-more-menu > summary {
        min-height: 50px;
        border-radius: 8px;
    }

    body.customer-body .customer-bottom-nav.customer-bottom-nav-minimal > a.active,
    body.customer-body .customer-more-menu.active > summary,
    body.customer-body .customer-more-menu[open] > summary {
        background: transparent;
    }

    body.customer-body .customer-bottom-label {
        font-size: .58rem;
        font-weight: 650;
    }
}

@media (max-width: 360px) {
    .market-product-grid {
        gap: 5px;
        padding-inline: 5px;
    }

    .market-card-body {
        padding: 7px;
    }

    .market-card-title {
        font-size: .7rem;
    }

    .mobile-market-search button {
        padding-inline: 9px;
    }
}

/* Detail produk HP: padat, rapi, dan mengurangi scroll vertikal. */
@media (max-width: 760px) {
    body:is(.customer-body,.public-body) .detail-grid {
        gap: 6px !important;
    }

    body:is(.customer-body,.public-body) .product-gallery {
        margin-inline: 7px !important;
        border: 0;
        border-radius: 10px !important;
        box-shadow: none;
    }

    body:is(.customer-body,.public-body) .detail-image {
        height: min(44vw, 210px);
        max-height: 210px;
        aspect-ratio: auto;
        object-fit: contain;
        border-radius: 10px !important;
    }

    body:is(.customer-body,.public-body) .product-detail-card {
        margin-inline: 7px !important;
        border: 0;
        border-radius: 10px;
        box-shadow: none;
    }

    body:is(.customer-body,.public-body) .product-detail-card > .card-body {
        padding: 11px !important;
    }

    .product-detail-card h1 {
        margin: 3px 0 4px;
        font-size: 1.25rem;
        line-height: 1.2;
    }

    .product-detail-description {
        display: -webkit-box;
        margin: 3px 0 7px;
        overflow: hidden;
        font-size: .76rem;
        line-height: 1.4;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .product-detail-card .price {
        margin: 7px 0 !important;
        font-size: 1.2rem !important;
        line-height: 1.2;
    }

    .product-detail-card .share-actions {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 5px;
        margin-bottom: 9px !important;
    }

    .product-detail-card .share-button {
        width: 100%;
        min-width: 0;
        min-height: 34px;
        padding: 6px 4px;
        border-radius: 8px;
        font-size: .68rem;
        white-space: nowrap;
    }

    .product-detail-card .spec-list {
        gap: 5px !important;
        margin: 7px 0 0 !important;
    }

    .product-detail-card .spec {
        min-height: 48px;
        padding: 7px !important;
        border-radius: 8px;
    }

    .product-detail-card .spec span {
        font-size: .64rem;
    }

    .product-detail-card .spec strong {
        margin-top: 1px;
        font-size: .72rem;
        line-height: 1.25;
    }

    .item-booking-card {
        margin-top: 9px !important;
        border-radius: 9px;
        box-shadow: none;
    }

    .item-booking-card > .card-body {
        padding: 10px !important;
    }

    .item-booking-card h2 {
        margin: 0;
        font-size: 1rem;
    }

    .item-booking-intro {
        margin: 3px 0 9px;
        font-size: .7rem;
        line-height: 1.4;
    }

    .item-booking-form {
        display: grid;
        grid-template-columns: minmax(0,.42fr) minmax(0,.58fr);
        gap: 7px;
        align-items: end;
    }

    .item-booking-form .form-row {
        grid-column: 1/-1;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 6px;
    }

    .item-booking-form .form-group {
        min-width: 0;
        margin-bottom: 0;
    }

    .item-booking-form .form-label {
        margin-bottom: 3px;
        font-size: .66rem;
    }

    .item-booking-form .form-control {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        padding: 6px 7px;
        border-radius: 7px;
        font-size: .68rem;
    }

    .item-booking-form > .btn {
        min-height: 36px;
        padding: 6px 8px;
        border-radius: 7px;
        font-size: .67rem;
        line-height: 1.25;
    }

    .product-detail-card > .card-body > .alert {
        margin-top: 8px !important;
    }

    body:is(.customer-body,.public-body) .store-seller-panel {
        margin: 7px !important;
        padding: 10px;
        border-radius: 10px;
    }

    .store-seller-panel .store-seller-info {
        gap: 8px;
    }

    .store-seller-panel .store-avatar-lg {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
    }

    .store-seller-panel .store-seller-info h2 {
        margin: 0;
        font-size: .9rem;
    }

    .store-seller-panel .store-seller-info p,
    .store-seller-panel .store-seller-info .small {
        font-size: .65rem;
    }

    .store-seller-panel .store-seller-actions {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    }

    .store-seller-panel .store-seller-actions .btn,
    .store-seller-panel .store-seller-actions .ops-whatsapp-button {
        min-height: 34px;
        padding: 6px 5px;
        font-size: .64rem;
        white-space: nowrap;
    }

    body.customer-body .rp-chat-context-button {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        overflow: visible;
        padding: 0 !important;
        border-radius: 14px;
        color: transparent;
        font-size: 0;
        box-shadow: 0 8px 22px rgba(38,65,150,.2);
    }

    body.customer-body .rp-chat-context-button > span {
        color: #315ffd;
        font-size: 1rem;
    }

    body.customer-body .rp-chat-inbox-button,
    body.customer-body .rp-review-floating-button {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    body.customer-body .rp-review-floating-button > span:not(:first-child) {
        display: none !important;
    }

    body.customer-body .rp-review-floating-button > span:first-child {
        font-size: 1rem;
    }
}

/* ============================================================
   Final dark-theme contrast pass
   ============================================================ */
html[data-theme="dark"] body {
    color: #e8eef8;
    background: #0b1220;
}

html[data-theme="dark"] :is(
    .card,
    .card-body,
    .summary-box,
    .search-panel,
    .detail-card,
    .spec,
    .timeline-content,
    .notification-item,
    .customer-stat-card,
    .customer-panel,
    .customer-recent-card,
    .customer-status-item,
    .customer-mobile-order-card,
    .customer-mobile-order-period,
    .admin-dashboard-card,
    .admin-chart-card,
    .admin-list-card,
    .admin-stock-card,
    .admin-quick-actions,
    .admin-quick-actions a,
    .market-card,
    .market-category-card,
    .store-profile-card,
    .following-card,
    .store-seller-panel,
    .store-metric-row > div,
    .social-customer-card,
    .admin-login-card,
    .social-security-note,
    .provider-register-box
) {
    color: #e8eef8;
    background-color: #111b2d;
    border-color: #2d3d57;
}

html[data-theme="dark"] :is(
    .card,
    .detail-card,
    .customer-panel,
    .customer-stat-card,
    .admin-dashboard-card,
    .market-card,
    .following-card,
    .notification-item,
    .social-customer-card,
    .admin-login-card
) :is(p, li, label, dt, dd) {
    color: #d4deec;
}

html[data-theme="dark"] :is(
    .muted,
    .small,
    .form-help,
    .stat-label,
    .customer-stat-card span,
    .customer-stat-card small,
    .customer-status-item span:last-child,
    .customer-empty-mini,
    .customer-user-text span,
    .store-mini-copy span,
    .store-profile-main p,
    .following-card-description,
    .following-card-stats span,
    .store-seller-info p,
    .store-metric-row span,
    .market-card-category,
    .market-card-price small,
    .social-section-title p,
    .social-security-note,
    .provider-register-box
) {
    color: #b6c3d6;
}

html[data-theme="dark"] :is(
    .market-card-title,
    .store-mini-copy strong,
    .following-card-stats strong,
    .store-metric-row strong,
    .notification-title-row,
    .summary-row,
    .customer-next-date,
    .customer-next-meta,
    .admin-stock-item,
    .admin-quick-actions a
) {
    color: #edf3fc;
}

html[data-theme="dark"] :is(
    .customer-table tbody tr:hover,
    .admin-table tbody tr:hover,
    .notification-item.is-unread
) {
    background: #16243a;
}

html[data-theme="dark"] :is(
    .customer-stat-blue,
    .customer-stat-orange,
    .customer-stat-green,
    .customer-stat-purple
) .customer-stat-icon {
    border: 1px solid #3a4c69;
    background: #1b2a42;
}

html[data-theme="dark"] .social-btn-google {
    color: #172033;
    background: #f8fafc;
}

html[data-theme="dark"] .social-btn-disabled {
    color: #aebbd0;
    background: #18243a;
    border-color: #33445f;
}

html[data-theme="dark"] :is(.alert-success,.alert-warning,.alert-danger,.alert-info) {
    border-color: currentColor;
}

html[data-theme="dark"] .ops-filter-chip {
    color: #dbe6f5;
    background: #18243a;
    border-color: #33445f;
}

html[data-theme="dark"] .ops-filter-chip:hover,
html[data-theme="dark"] .ops-filter-chip.active {
    color: #c8d7ff;
    background: #1b2e55;
    border-color: #5877c8;
}

html[data-theme="dark"] .ops-whatsapp-box {
    background: #123226;
    border-color: #256947;
}

html[data-theme="dark"] .ops-whatsapp-box p {
    color: #c9f5da;
}

html[data-theme="dark"] .ops-qr-box {
    background: #fff;
    border-color: #51627a;
}

/* ============================================================
   Compact mobile system — seluruh halaman
   ============================================================ */
@media (max-width: 760px) {
    :root {
        --radius: 11px;
    }

    body.public-body .page-shell,
    body.customer-body .page-shell {
        min-height: calc(100vh - 112px);
        padding-bottom: 86px !important;
    }

    .page-shell :is(h1,h2,h3) {
        line-height: 1.25;
    }

    .page-shell h1 {
        font-size: 1.25rem;
    }

    .page-shell h2 {
        font-size: 1rem;
    }

    .page-shell h3 {
        font-size: .9rem;
    }

    .page-shell p {
        margin-top: 6px;
        margin-bottom: 9px;
        font-size: .78rem;
        line-height: 1.48;
    }

    .section-head {
        margin-top: 14px !important;
        margin-bottom: 8px !important;
    }

    .section-head > div {
        min-width: 0;
    }

    .section-head > div > p {
        margin: 2px 0 0;
    }

    .section-head > .btn,
    .section-head > a {
        width: fit-content;
        min-height: 34px;
        padding: 6px 10px;
        font-size: .7rem;
    }

    .card {
        border-radius: 10px;
        box-shadow: none;
    }

    .card-body {
        padding: 11px !important;
    }

    .card-header {
        gap: 8px;
        padding: 9px 11px !important;
    }

    .card-header h2,
    .card-header h3 {
        font-size: .92rem;
    }

    .grid {
        gap: 8px;
    }

    .grid.grid-2,
    .grid.grid-3 {
        grid-template-columns: 1fr;
    }

    .form-group {
        margin-bottom: 9px;
    }

    .form-label {
        margin-bottom: 3px;
        font-size: .7rem;
    }

    .form-help {
        margin-top: 3px;
        font-size: .65rem;
        line-height: 1.35;
    }

    .form-control,
    .form-select,
    input,
    select {
        min-height: 38px;
        padding: 7px 9px;
        border-radius: 8px;
        font-size: .76rem;
    }

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

    .btn {
        min-height: 38px;
        padding: 7px 11px;
        border-radius: 8px;
        font-size: .74rem;
    }

    .btn-sm {
        min-height: 32px;
        padding: 5px 8px;
        font-size: .67rem;
    }

    .actions {
        gap: 6px;
    }

    .alert {
        gap: 8px;
        padding: 8px 10px;
        margin-bottom: 8px;
        border-radius: 8px;
        font-size: .72rem;
        line-height: 1.4;
    }

    .badge {
        padding: 3px 7px;
        font-size: .62rem;
    }

    .summary-box {
        padding: 10px;
        border-radius: 9px;
    }

    .summary-row {
        gap: 8px;
        padding: 5px 0;
        font-size: .72rem;
    }

    .summary-row.total {
        margin-top: 4px;
        padding-top: 8px;
        font-size: .85rem;
    }

    .table-wrap {
        margin-top: 9px !important;
        border-radius: 9px;
    }

    table {
        font-size: .7rem;
    }

    th,
    td {
        padding: 7px 8px;
        white-space: nowrap;
    }

    th {
        font-size: .61rem;
        letter-spacing: .03em;
    }

    td .small,
    td .muted {
        font-size: .62rem;
    }

    .table-img {
        width: 42px;
        height: 34px;
    }

    .empty-state {
        padding: 22px 12px;
        font-size: .76rem;
    }

    .empty-icon {
        margin-bottom: 3px;
        font-size: 1.8rem;
    }

    .pagination {
        gap: 5px;
        margin-top: 10px;
    }

    .pagination a,
    .pagination span {
        min-width: 32px;
        height: 32px;
        border-radius: 7px;
        font-size: .7rem;
    }

    .timeline-item {
        gap: 7px;
    }

    .timeline-content {
        padding-bottom: 12px;
        font-size: .74rem;
    }

    .invoice {
        padding: 13px;
        border-radius: 10px;
    }

    .invoice-head {
        gap: 8px;
        margin-bottom: 12px;
    }

    .invoice-company {
        font-size: 1.1rem;
    }

    /* Keranjang dan checkout */
    body:is(.customer-body,.public-body) .page-shell > .grid.grid-2 {
        gap: 8px;
    }

    body:is(.customer-body,.public-body) .page-shell > .grid.grid-2 .form-row {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 6px !important;
    }

    /* Login, daftar, dan profil */
    .social-auth-shell {
        margin-bottom: 16px;
    }

    .social-auth-heading {
        margin-bottom: 8px !important;
    }

    .social-auth-kicker {
        margin-bottom: 5px;
        padding: 4px 8px;
        font-size: .62rem;
    }

    .social-section-title {
        gap: 8px;
        margin-bottom: 10px;
    }

    .social-section-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .social-section-title h2 {
        font-size: .92rem;
    }

    .social-section-title p {
        margin: 1px 0 0;
        font-size: .68rem;
    }

    .social-btn {
        min-height: 40px;
        padding: 8px 10px;
        border-radius: 8px;
        font-size: .74rem;
    }

    .social-security-note,
    .provider-register-box,
    .oauth-linked-account {
        margin-top: 9px;
        padding: 8px 9px;
        font-size: .68rem;
    }

    .rp-profile-wrapper .card-body {
        padding: 11px !important;
    }

    .rp-profile-logout-card {
        margin-top: 9px !important;
    }

    .rp-profile-logout-content {
        gap: 8px !important;
        padding: 10px !important;
    }

    /* Notifikasi dan daftar informasi */
    .notification-list {
        gap: 6px;
    }

    .notification-item {
        grid-template-columns: 8px 1fr;
        gap: 7px;
        padding: 9px;
    }

    .notification-content p {
        margin-top: 3px;
    }

    .notification-title-row {
        gap: 4px;
    }

    /* Toko, following, lokasi */
    .following-grid {
        gap: 7px;
    }

    .following-card,
    .store-profile-card,
    .store-seller-panel {
        padding: 10px;
    }

    .following-card-description {
        min-height: 0;
        margin: 7px 0;
        font-size: .7rem;
        -webkit-line-clamp: 1;
    }

    .following-card-stats {
        gap: 9px;
        padding: 7px 0;
    }

    .rp-nearby-store-list {
        gap: 7px;
    }

    .rp-nearby-store-card,
    .rp-nearby-filter,
    .rp-location-form-card {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    /* Kalender, alur rental, chat, dan ulasan */
    .ops-calendar-summary {
        padding: 11px;
    }

    .ops-calendar-summary strong {
        font-size: .9rem;
    }

    .ops-calendar-disclosure-body {
        padding: 9px !important;
    }

    .ops-calendar-day {
        min-height: 58px;
        padding: 5px 3px;
        border-radius: 7px;
    }

    .ops-calendar-day .day-stock {
        margin-top: 3px;
        font-size: .58rem;
    }

    .rf-hero,
    .rf-card,
    .rf-calendar-card {
        margin-bottom: 8px;
        padding: 11px !important;
        border-radius: 10px !important;
    }

    .rf-grid,
    .rf-pass-grid,
    .rf-event-list,
    .rf-report-list {
        gap: 7px;
    }

    .rp-chat-page {
        border-radius: 10px;
    }

    .rp-chat-thread-header,
    .rp-chat-compose {
        padding: 9px;
    }

    .rp-chat-messages {
        padding: 10px;
    }

    .rp-public-review-block,
    .rp-public-review-card,
    .rp-review-card {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    /* Seller Center */
    body.admin-body .admin-content {
        padding: 8px 7px 20px !important;
    }

    body.admin-body .admin-content .card {
        border-radius: 9px !important;
    }

    body.admin-body .admin-content .section-head {
        gap: 5px;
        margin: 8px 0 !important;
    }

    body.admin-body .admin-content .section-head h1 {
        font-size: 1.12rem;
    }

    body.admin-body .admin-stat-grid,
    body.admin-body .dashboard-stats {
        gap: 6px !important;
    }

    body.admin-body .admin-stat-card,
    body.admin-body .stat-card {
        min-height: 74px;
        padding: 8px !important;
    }

    body.admin-body .admin-dashboard-main-grid,
    body.admin-body .admin-dashboard-bottom-grid {
        gap: 7px !important;
    }

    body.admin-body .admin-quick-actions {
        gap: 5px;
        padding: 8px;
    }

    body.admin-body .admin-quick-actions a {
        min-height: 36px;
        padding: 6px 8px;
        font-size: .68rem;
    }

    body.admin-body .admin-footer {
        padding: 10px;
        font-size: .65rem;
    }
}
