/* ─── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   RURENT Frontend — Apple-Clean Design System
   ═══════════════════════════════════════════════════════════════════
   Scope: semua kelas yang dipakai di templates/*.php
   Style: Apple-clean (warm grays, subtle borders, soft shadows,
          pill buttons, generous whitespace, SF Pro typography)

   Index:
     1. Design tokens (CSS variables)
     2. Base typography & wrappers
     3. Buttons, inputs, badges, alerts
     4. Lucide icon helper
     5. Katalog & katalog-preview (product cards)
     6. Sticky cart bar
     7. Cart page
     8. Checkout (Step 1 + summary)
     9. KTP upload
    10. Step indicator
    11. Payment page (Step 3)
    12. TnC page
    13. Confirmation page
    14. Product detail page
    15. Quiz modal
    16. No-results / empty states
    17. Responsive breakpoints
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Design tokens ─────────────────────────────────────────── */
:root {
    /* Backgrounds — RURENT warm palette */
    --rr-bg:           #EBE5DD;
    --rr-surface:      #ffffff;
    --rr-surface-2:    #f4efe8;
    --rr-surface-3:    #ede7df;

    /* Borders */
    --rr-border:       #ddd6cc;
    --rr-border-strong:#c8bfb3;

    /* Text */
    --rr-text:         #1a1a1a;
    --rr-text-2:       #305057;
    --rr-text-muted:   #6b7c80;
    --rr-text-sub:     #a0abad;

    /* Brand — orange primary, teal secondary */
    --rr-primary:      #BF6616;
    --rr-primary-hover:#a8570f;
    --rr-primary-light:#f7ede1;

    /* Teal accent */
    --rr-teal:         #305057;
    --rr-teal-hover:   #264349;
    --rr-teal-light:   #e0eaec;
    --rr-teal-2:       #448888;
    --rr-teal-2-hover: #387474;

    /* Bar stats colors */
    --rr-bar-power:    var(--rr-teal-2);
    --rr-bar-control:  var(--rr-teal-2);
    --rr-bar-sweet:    var(--rr-teal-2);

    /* WhatsApp */
    --rr-wa:           #25d366;
    --rr-wa-hover:     #1fb955;

    /* Status */
    --rr-success:      #30d158;
    --rr-success-bg:   #e8faf0;
    --rr-success-text: #1a7a3a;
    --rr-warning:      #ff9f0a;
    --rr-warning-bg:   #fff4e0;
    --rr-warning-text: #c77a00;
    --rr-danger:       #ff3b30;
    --rr-danger-bg:    #ffebea;
    --rr-info:         #305057;
    --rr-info-bg:      #e0eaec;

    /* Radius */
    --rr-r-xs:   6px;
    --rr-r-sm:   8px;
    --rr-r-md:   12px;
    --rr-r-lg:   16px;
    --rr-r-xl:   20px;
    --rr-r-pill: 980px;

    /* Shadows */
    --rr-shadow-sm: 0 1px 2px rgba(48,80,87,.06);
    --rr-shadow:    0 1px 4px rgba(48,80,87,.08), 0 4px 16px rgba(48,80,87,.05);
    --rr-shadow-md: 0 2px 8px rgba(48,80,87,.10), 0 8px 32px rgba(48,80,87,.07);

    /* Type — RURENT: serif display + clean sans */
    --rr-font:         'Inter', system-ui, -apple-system, sans-serif;
    --rr-font-display: 'Fraunces', Georgia, serif;
}

/* ─── 2. Base wrappers ─────────────────────────────────────────── */
.rurent-katalog,
.rurent-katalog-preview,
.rurent-cart-page,
.rurent-checkout,
.rurent-payment-method,
.rurent-tnc,
.rurent-confirmation,
.rurent-product-page {
    font-family: var(--rr-font);
    color: var(--rr-text);
    line-height: 1.5;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 48px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rurent-katalog-preview {
    padding: 12px 0 24px;
}

.rurent-katalog *,
.rurent-katalog-preview *,
.rurent-cart-page *,
.rurent-checkout *,
.rurent-payment-method *,
.rurent-tnc *,
.rurent-confirmation *,
.rurent-product-page * {
    box-sizing: border-box;
}

/* Headings inside RURENT scopes */
.rurent-katalog h2,
.rurent-katalog-preview h2,
.rurent-cart-page h2,
.rurent-checkout h2,
.rurent-payment-method h2,
.rurent-confirmation h2 {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--rr-font-display);
    letter-spacing: -0.3px;
    margin: 0 0 8px;
    color: var(--rr-text);
}
.rurent-katalog h3,
.rurent-cart-page h3,
.rurent-checkout h3,
.rurent-payment-method h3,
.rurent-tnc h3,
.rurent-confirmation h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--rr-text);
    letter-spacing: -0.2px;
}

/* ─── 3. Buttons, inputs, alerts ───────────────────────────────── */
.rurent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--rr-r-pill);
    padding: 11px 22px;
    font-family: var(--rr-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: all .18s ease;
    user-select: none;
}
.rurent-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
}
.rurent-btn:focus-visible {
    outline: 2px solid var(--rr-teal, #305057);
    outline-offset: 2px;
}

.rurent-btn-primary {
    background: var(--rr-primary);
    color: #fff;
}
.rurent-btn-primary:hover:not(:disabled) {
    background: var(--rr-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(191,102,22,.25);
}

.rurent-btn-outline {
    background: transparent;
    color: var(--rr-text);
    border-color: var(--rr-border-strong);
}
.rurent-btn-outline:hover:not(:disabled) {
    background: var(--rr-surface-3);
    border-color: var(--rr-text-muted);
}

.rurent-btn-whatsapp {
    background: var(--rr-wa);
    color: #fff;
}
.rurent-btn-whatsapp:hover:not(:disabled) {
    background: var(--rr-wa-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37,211,102,.30);
}

.btn-full {
    width: 100%;
}

/* Inputs */
.rurent-input,
.rurent-select {
    display: block;
    width: 100%;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border-strong);
    border-radius: var(--rr-r-sm);
    padding: 11px 14px;
    font-family: var(--rr-font);
    font-size: 15px;
    color: var(--rr-text);
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
    -webkit-appearance: none;
}
.rurent-input::placeholder { color: var(--rr-text-sub); }
.rurent-input:focus,
.rurent-select:focus {
    outline: none;
    border-color: var(--rr-teal, #305057);
    box-shadow: 0 0 0 3px rgba(68,136,136,.20);
}

.rurent-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-group {
    margin-bottom: 18px;
}
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-text-2);
    margin-bottom: 6px;
    letter-spacing: -0.1px;
}
.form-group label .req { color: var(--rr-danger); margin-left: 2px; }
.form-group small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--rr-text-muted);
    margin-top: 6px;
}
.form-group small .rr-icon svg { width: 13px; height: 13px; }

/* Badges */
.rurent-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--rr-r-pill);
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.rurent-badge.pending   { background: var(--rr-warning-bg); color: var(--rr-warning-text); }
.rurent-badge.paid      { background: var(--rr-success-bg); color: var(--rr-success-text); }
.rurent-badge.completed { background: var(--rr-teal-light, #e0eaec);    color: var(--rr-teal, #305057); }
.rurent-badge.cancelled { background: var(--rr-danger-bg);  color: var(--rr-danger); }

/* Alerts */
.rurent-alert {
    border-radius: var(--rr-r-md);
    padding: 12px 14px;
    font-size: 14px;
    margin-top: 12px;
    border: 1px solid transparent;
}
.rurent-alert-error {
    background: var(--rr-danger-bg);
    color: #b8261e;
    border-color: rgba(255,59,48,.3);
}
.rurent-alert-success {
    background: var(--rr-success-bg);
    color: var(--rr-success-text);
    border-color: rgba(48,209,88,.3);
}
.rurent-loading {
    text-align: center;
    color: var(--rr-text-muted);
    padding: 12px;
    font-size: 14px;
}

/* ─── 4. Lucide icon helper ───────────────────────────────────── */
.rr-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.rr-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

/* ─── 5. Product grid + cards ─────────────────────────────────── */
.rurent-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.rurent-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.rurent-product-card {
    background: var(--rr-surface);
    border-radius: var(--rr-r-lg);
    border: 1px solid var(--rr-border);
    box-shadow: var(--rr-shadow-sm);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex;
    flex-direction: column;
}
.rurent-product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--rr-shadow-md);
    border-color: var(--rr-border-strong);
}

.product-img-link,
.product-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.product-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--rr-surface-3);
    overflow: hidden;
}
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-img-placeholder,
.product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ececf0, #f7f7fa);
    color: var(--rr-text-sub);
}
.product-img-placeholder .rr-icon svg,
.product-image-placeholder .rr-icon svg {
    width: 48px;
    height: 48px;
}

.card-score-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--rr-text);
    color: #fff;
    border-radius: var(--rr-r-pill);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.availability-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--rr-r-pill);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rr-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rr-success);
}
.availability-badge.unavailable .badge-dot { background: var(--rr-danger); }
.availability-badge.unavailable .badge-available { display: none; }
.availability-badge:not(.unavailable) .badge-unavailable { display: none; }

.product-info {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.spec-tag {
    font-size: 11px;
    font-weight: 500;
    color: var(--rr-text-muted);
    background: var(--rr-surface-3);
    border-radius: var(--rr-r-xs);
    padding: 3px 8px;
    letter-spacing: 0.1px;
}
.product-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--rr-text);
}
.product-name a {
    color: inherit;
    text-decoration: none;
}
.product-name a:hover { color: var(--rr-teal, #305057); }

.card-rating-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card-bar-row {
    display: grid;
    grid-template-columns: 56px 1fr 30px;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
}
.card-bar-label { color: var(--rr-text-muted); font-weight: 500; }
.card-bar-track {
    height: 4px;
    background: var(--rr-surface-3);
    border-radius: 4px;
    overflow: hidden;
}
.card-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .3s ease;
}
.card-bar-val { text-align: right; color: var(--rr-text-2); font-weight: 600; }

.product-card-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--rr-border);
}
.product-price-wrap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}
.product-price,
.product-pricing .product-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--rr-text);
    letter-spacing: -0.3px;
}
.product-price-period,
.price-period {
    font-size: 12px;
    color: var(--rr-text-muted);
}
.product-deposit-hint {
    width: 100%;
    font-size: 11px;
    color: var(--rr-text-sub);
    margin-top: -2px;
}

.card-actions {
    display: flex;
    gap: 8px;
}
.card-btn-detail,
.card-btn-cart {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: var(--rr-r-pill);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s ease;
    border: 1px solid transparent;
    font-family: var(--rr-font);
}
.card-btn-detail {
    background: var(--rr-surface);
    color: var(--rr-text);
    border-color: var(--rr-border-strong);
}
.card-btn-detail:hover {
    background: var(--rr-surface-3);
    border-color: var(--rr-text-muted);
}
.card-btn-cart {
    background: var(--rr-teal, #305057);
    color: #fff;
}
.card-btn-cart:hover {
    background: var(--rr-teal-hover, #264349);
    transform: translateY(-1px);
}
.card-btn-cart .rr-icon svg { width: 14px; height: 14px; }

/* Quiz CTA banner (katalog full page) */
.quiz-cta-banner {
    background: linear-gradient(135deg, #f7ede1 0%, #f4efe8 100%);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.quiz-cta-content {
    display: flex;
    align-items: center;
    gap: 14px;
}
.quiz-cta-icon {
    font-size: 26px;
    line-height: 1;
}
.quiz-cta-content strong {
    display: block;
    font-size: 16px;
    color: var(--rr-text);
}
.quiz-cta-content span {
    font-size: 13.5px;
    color: var(--rr-text-muted);
}
.quiz-cta-btn {
    background: var(--rr-teal, #305057);
    color: #fff;
    border: none;
    border-radius: var(--rr-r-pill);
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s ease;
}
.quiz-cta-btn:hover {
    background: var(--rr-teal-hover, #264349);
    transform: translateY(-1px);
}

/* Filter bar */
.rurent-filter-bar {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: var(--rr-shadow-sm);
}
.rurent-filter-group { margin-bottom: 14px; }
.rurent-filter-group:last-child { margin-bottom: 0; }
.filter-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-text-2);
    margin-bottom: 8px;
}
.rurent-filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.rurent-date-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    align-items: center;
}
.date-chip {
    flex-shrink: 0;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border-strong);
    border-radius: var(--rr-r-md);
    padding: 8px 14px;
    cursor: pointer;
    transition: all .15s ease;
    text-align: center;
    min-width: 64px;
    font-family: var(--rr-font);
}
.date-chip:hover { background: var(--rr-surface-3); }
.date-chip.active {
    background: var(--rr-teal, #305057);
    border-color: var(--rr-teal, #305057);
    color: #fff;
}
.chip-day { display: block; font-size: 11px; opacity: .85; font-weight: 500; }
.chip-num { display: block; font-size: 17px; font-weight: 700; line-height: 1.1; letter-spacing: -0.3px; }
.chip-mon { display: block; font-size: 10px; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }
#custom-date {
    border: 1px solid var(--rr-border-strong);
    border-radius: var(--rr-r-md);
    padding: 8px 12px;
    font-size: 13px;
    background: var(--rr-surface);
    cursor: pointer;
    font-family: var(--rr-font);
}

.rurent-avail-bar {
    background: var(--rr-info-bg);
    border: 1px solid #c5dcf5;
    color: #0058b8;
    border-radius: var(--rr-r-md);
    padding: 10px 14px;
    font-size: 13.5px;
    margin-bottom: 16px;
}

/* Preview CTA */
.rurent-preview-cta {
    text-align: center;
    margin-top: 24px;
}

/* ─── 6. Sticky cart bar ──────────────────────────────────────── */
/* Desktop: floating pill centered, max 640px. Mobile: full-width  */
/* bottom sheet via rurent-responsive.css                          */
.rurent-sticky-cart {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 640px;
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--rr-border, #ddd6cc);
    border-radius: var(--rr-r-pill, 980px);
    box-shadow: 0 4px 24px rgba(48,80,87,.15);
    z-index: 999;
    box-sizing: border-box;
    overflow: hidden;
}
/* Handle — hidden on desktop, visible on mobile */
.sticky-cart-handle { display: none; }
.sticky-cart-handle-left,
.sticky-cart-handle-right { display: flex; align-items: center; gap: 8px; }
.sticky-cart-handle-right { flex-shrink: 0; }
.sticky-cart-toggle {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--rr-border-strong, #c8bfb3);
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--rr-text-muted, #6b7c80);
    transition: transform .3s cubic-bezier(.4,0,.2,1); padding: 0;
}
.sc-collapsed .sticky-cart-toggle { transform: rotate(180deg); }

/* Desktop body */
.sticky-cart-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 18px;
}
.sticky-cart-info {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.sticky-cart-icon {
    display: flex; align-items: center; justify-content: center;
    color: var(--rr-teal, #305057); flex-shrink: 0;
    line-height: 1;
}
.sticky-cart-qty { display: block; font-size: 13.5px; font-weight: 600; }
.sticky-cart-date { display: block; font-size: 11.5px; color: var(--rr-text-muted); }
.sticky-cart-total {
    display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1;
}
.sticky-total-label { font-size: 10px; color: var(--rr-text-muted); text-transform: uppercase; letter-spacing: .5px; }
.sticky-total-val { font-size: 14px; font-weight: 700; color: var(--rr-teal, #305057); }
.sticky-cart-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Mobile expanded: item list */
.sticky-cart-items { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--rr-border, #ddd6cc); }
.sticky-cart-item-row { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.sc-item-name { flex: 1; min-width: 0; color: var(--rr-text, #1a1a1a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-item-meta { font-size: 11px; color: var(--rr-text-muted, #6b7c80); flex-shrink: 0; }
.sc-item-price { font-size: 12px; font-weight: 600; color: var(--rr-teal, #305057); flex-shrink: 0; min-width: 64px; text-align: right; }

/* ─────────────────────────────────────────────────────────────
 * Rurent Modal — Session Conflict Dialog
 * Design tokens-aware: matches plugin's teal + warm palette.
 * Used by rrConfirmSessionChange() / rrSessionConflictDialog().
 * ───────────────────────────────────────────────────────────── */
.rr-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(26, 26, 26, .48);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .2s ease;
}
.rr-modal-overlay.is-open { opacity: 1; }

.rr-modal-box {
    background: var(--rr-surface, #fff);
    border-radius: var(--rr-r-lg, 16px);
    padding: 0;
    max-width: 440px;
    width: 100%;
    box-shadow: var(--rr-shadow-md, 0 2px 8px rgba(48,80,87,.10), 0 8px 32px rgba(48,80,87,.07));
    font-family: inherit;
    font-size: 14px;
    color: var(--rr-text, #1a1a1a);
    overflow: hidden;
    transform: translateY(12px) scale(.98);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.rr-modal-overlay.is-open .rr-modal-box {
    transform: translateY(0) scale(1);
}

.rr-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 0;
}
.rr-modal-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: var(--rr-r-pill, 980px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rr-modal-icon svg { width: 20px; height: 20px; }
.rr-modal-icon--warn {
    background: var(--rr-warning-bg, #fff4e0);
    color: var(--rr-warning-text, #c77a00);
}
.rr-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    line-height: 1.3;
    letter-spacing: -.01em;
}

.rr-modal-body {
    padding: 14px 24px 4px;
    line-height: 1.55;
    color: var(--rr-text-muted, #6b7c80);
}
.rr-modal-lead {
    margin: 0 0 16px;
    color: var(--rr-text, #1a1a1a);
    font-size: 14px;
}

.rr-slot-compare {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 18px;
}
.rr-slot-card {
    flex: 1;
    background: var(--rr-surface-2, #f4efe8);
    border: 1px solid var(--rr-border, #ddd6cc);
    border-radius: var(--rr-r-md, 12px);
    padding: 10px 12px;
    min-width: 0;
}
.rr-slot-card--new {
    background: var(--rr-teal-light, #e0eaec);
    border-color: var(--rr-teal, #305057);
}
.rr-slot-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rr-text-muted, #6b7c80);
    margin-bottom: 4px;
}
.rr-slot-card--new .rr-slot-label { color: var(--rr-teal, #305057); }
.rr-slot-date {
    font-size: 13px;
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    line-height: 1.3;
    margin-bottom: 2px;
}
.rr-slot-meta {
    font-size: 11px;
    color: var(--rr-text-muted, #6b7c80);
    line-height: 1.3;
}
.rr-slot-arrow {
    display: flex;
    align-items: center;
    color: var(--rr-text-sub, #a0abad);
    flex-shrink: 0;
}

.rr-conflict-section {
    background: var(--rr-warning-bg, #fff4e0);
    border: 1px solid #fde4b6;
    border-radius: var(--rr-r-md, 12px);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.rr-conflict-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rr-warning-text, #c77a00);
    margin-bottom: 8px;
}
.rr-conflict-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rr-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.rr-item-dot {
    width: 6px; height: 6px;
    background: var(--rr-warning, #ff9f0a);
    border-radius: 50%;
    flex-shrink: 0;
}
.rr-item-name {
    flex: 1;
    color: var(--rr-text, #1a1a1a);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rr-pill {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: var(--rr-r-pill, 980px);
}
.rr-pill--danger {
    background: var(--rr-danger-bg, #ffebea);
    color: var(--rr-danger, #ff3b30);
}
.rr-pill--warn {
    background: #fef3c7;
    color: var(--rr-warning-text, #c77a00);
}

.rr-modal-note {
    margin: 0;
    font-size: 12px;
    color: var(--rr-text-muted, #6b7c80);
    line-height: 1.5;
}

.rr-modal-actions {
    display: flex;
    gap: 10px;
    padding: 18px 24px 22px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.rr-modal-btn {
    padding: 11px 20px;
    border-radius: var(--rr-r-pill, 980px);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
    border: 1.5px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}
.rr-modal-btn:active { transform: scale(.98); }
.rr-modal-btn--ghost {
    background: var(--rr-surface, #fff);
    border-color: var(--rr-border-strong, #c8bfb3);
    color: var(--rr-text-2, #305057);
}
.rr-modal-btn--ghost:hover {
    background: var(--rr-surface-2, #f4efe8);
    border-color: var(--rr-teal, #305057);
}
.rr-modal-btn--primary {
    background: var(--rr-teal, #305057);
    color: #fff;
    border-color: var(--rr-teal, #305057);
}
.rr-modal-btn--primary:hover {
    background: var(--rr-teal-hover, #264349);
    border-color: var(--rr-teal-hover, #264349);
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .rr-modal-header { padding: 18px 18px 0; }
    .rr-modal-body   { padding: 12px 18px 4px; }
    .rr-modal-actions {
        padding: 16px 18px 20px;
        flex-direction: column-reverse;
    }
    .rr-modal-btn { width: 100%; text-align: center; }
    .rr-slot-compare { gap: 6px; }
    .rr-slot-card    { padding: 9px 10px; }
    .rr-slot-arrow svg { width: 14px; height: 14px; }
}

.sticky-cart-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sticky-date-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--rr-teal, #305057);
    background: var(--rr-teal-light, #e0eaec);
    border-radius: 6px; padding: 3px 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex-shrink: 1; min-width: 0;
}

/* Buttons */
.sticky-cart-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--rr-teal, #305057); color: #fff;
    border: 1.5px solid var(--rr-teal, #305057);
    border-radius: var(--rr-r-pill, 980px);
    padding: 9px 18px; font-size: 13.5px; font-weight: 600;
    text-decoration: none; cursor: pointer;
    font-family: var(--rr-font, 'Inter', sans-serif);
    transition: background .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.sticky-cart-btn:hover { background: var(--rr-teal-hover, #264349); border-color: var(--rr-teal-hover, #264349); color: #fff; }

.sticky-cart-btn--secondary,
.sticky-view-cart-link {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent; color: var(--rr-teal, #305057);
    border: 1.5px solid var(--rr-teal, #305057);
    border-radius: var(--rr-r-pill, 980px);
    padding: 8px 14px; font-size: 12.5px; font-weight: 600;
    text-decoration: none; cursor: pointer;
    font-family: var(--rr-font, 'Inter', sans-serif);
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}
.sticky-cart-btn--secondary:hover,
.sticky-view-cart-link:hover { background: var(--rr-teal, #305057); color: #fff; }

/* Desktop: mobile-only elements hidden by default, shown via mobile @media */
.sticky-cart-items,
.sticky-cart-summary-row { display: none; }

/* ─── 7. Cart page ────────────────────────────────────────────── */
.cart-empty {
    text-align: center;
    padding: 80px 20px;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
}
.cart-empty-icon {
    color: var(--rr-text-sub);
    margin-bottom: 16px;
}
.cart-empty-icon .rr-icon svg { width: 48px; height: 48px; }
.cart-empty h3 { font-size: 22px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.3px; }
.cart-empty p { color: var(--rr-text-muted); margin: 0 0 20px; font-size: 15px; }

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}

.cart-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
    padding: 24px;
}

.cart-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rr-border);
}
.cart-date-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--rr-text-2);
}
.cart-date-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--rr-text-muted);
}
.cart-date-label .rr-icon svg { width: 14px; height: 14px; }
.btn-text-link {
    background: transparent;
    border: 0;
    color: var(--rr-teal, #305057);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--rr-r-xs);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--rr-font);
    transition: background .15s ease;
}
.btn-text-link:hover { background: var(--rr-teal-light, #e0eaec); }
.btn-text-link .rr-icon svg { width: 13px; height: 13px; }

.cart-item {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rr-border);
    align-items: start;
}
.cart-item:last-of-type { border-bottom: 0; }

.cart-item-image {
    width: 84px;
    height: 84px;
    border-radius: var(--rr-r-sm);
    background: var(--rr-surface-3);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-item-image img {
    width: 84px !important;
    height: 84px !important;
    object-fit: cover;
    border-radius: var(--rr-r-sm);
}
.cart-item-icon {
    color: var(--rr-text-sub);
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rr-surface-3);
}
.cart-item-icon .rr-icon svg { width: 32px; height: 32px; }

.cart-item-info {
    min-width: 0;
}
.cart-item-name {
    margin: 0 0 4px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--rr-text);
    letter-spacing: -0.2px;
}
.cart-item-specs {
    font-size: 12.5px;
    color: var(--rr-text-muted);
    margin-bottom: 4px;
}
.cart-item-price-unit {
    font-size: 13px;
    color: var(--rr-text-2);
    font-weight: 500;
}

.cart-item-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 130px;
}

.qty-control {
    display: inline-flex;
    align-items: center;
    background: var(--rr-surface-3);
    border-radius: var(--rr-r-pill);
    padding: 2px;
}
.qty-btn {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--rr-text);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s ease;
    line-height: 1;
}
.qty-btn:hover { background: var(--rr-surface); }
.qty-input {
    width: 40px;
    text-align: center;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--rr-font);
    color: var(--rr-text);
    -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qty-input:focus { outline: none; }

.cart-item-subtotal {
    font-size: 15px;
    font-weight: 700;
    color: var(--rr-text);
    letter-spacing: -0.2px;
}
.btn-remove-item {
    background: transparent;
    border: 0;
    color: var(--rr-danger);
    font-size: 12.5px;
    cursor: pointer;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--rr-r-xs);
    font-family: var(--rr-font);
    transition: background .15s ease;
}
.btn-remove-item:hover { background: var(--rr-danger-bg); }
.btn-remove-item .rr-icon svg { width: 13px; height: 13px; }

.btn-add-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 10px 16px;
    background: transparent;
    color: var(--rr-teal, #305057);
    border: 1px dashed var(--rr-border-strong);
    border-radius: var(--rr-r-md);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s ease;
}
.btn-add-more:hover {
    background: var(--rr-teal-light, #e0eaec);
    border-color: var(--rr-teal, #305057);
}
.btn-add-more .rr-icon svg { width: 14px; height: 14px; }

/* Cart summary card */
.cart-summary-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
    padding: 22px;
    position: sticky;
    top: 20px;
}
#cart-summary-items .summary-row {
    color: var(--rr-text-2);
}
.summary-divider {
    height: 1px;
    background: var(--rr-border);
    margin: 12px 0;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: var(--rr-text-2);
}
.summary-row.total {
    border-top: 1px solid var(--rr-border);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 16px;
    color: var(--rr-text);
}
.summary-row small { color: var(--rr-text-sub); font-size: 11.5px; }
.summary-row--discount {
    color: var(--rr-teal, #305057);
    font-weight: 500;
}
.summary-row--discount span:last-child { font-weight: 600; }
.confirmation-item-row--discount {
    color: var(--rr-teal, #305057);
    font-weight: 500;
}
.confirmation-item-row--discount span:last-child { font-weight: 600; }
.deposit-note {
    font-size: 11.5px;
    color: var(--rr-text-muted);
    line-height: 1.5;
    margin: 12px 0 0;
}

/* ─── 8. Checkout layout ──────────────────────────────────────── */
.rurent-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
    margin-top: 28px;
}
.checkout-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
    padding: 28px;
}
.checkout-card-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0 0 4px;
}
.checkout-card-sub {
    font-size: 13.5px;
    color: var(--rr-text-muted);
    margin: 0 0 22px;
}
.rurent-form { display: block; }

/* Order summary panel */
.order-summary-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
    padding: 22px;
    position: sticky;
    top: 20px;
}
.summary-card-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
    letter-spacing: -0.2px;
}
.summary-date-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rr-teal-light, #e0eaec);
    color: var(--rr-teal, #305057);
    border-radius: var(--rr-r-pill);
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 16px;
}
.summary-date-tag .rr-icon svg { width: 13px; height: 13px; }

.summary-time-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
    color: var(--rr-muted, #6b7a7d);
    margin-bottom: 14px;
}
.summary-time-row svg { flex-shrink: 0; opacity: .7; }
.summary-time-row strong { color: var(--rr-text, #1a2e32); font-weight: 600; }
.summary-return-sep { opacity: .45; }

.summary-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.summary-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rr-border);
}
.summary-item-row:last-child { border-bottom: 0; }
.summary-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.summary-item-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--rr-r-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.summary-item-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--rr-r-sm);
    background: var(--rr-surface-3);
    color: var(--rr-text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.summary-item-icon .rr-icon svg { width: 22px; height: 22px; }
.summary-item-text strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rr-text);
    line-height: 1.3;
}
.summary-meta {
    font-size: 11.5px;
    color: var(--rr-text-muted);
    margin-top: 2px;
}
.summary-item-right {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rr-text);
    white-space: nowrap;
}

.summary-breakdown {
    border-top: 1px solid var(--rr-border);
    padding-top: 12px;
}

/* ─── 9. KTP upload area ──────────────────────────────────────── */
.ktp-upload-area {
    display: block;
    background: var(--rr-surface-2);
    border: 2px dashed var(--rr-border-strong);
    border-radius: var(--rr-r-md);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all .2s ease;
}
.ktp-upload-area:hover,
.ktp-upload-area.drag-over {
    background: var(--rr-teal-light, #e0eaec);
    border-color: var(--rr-teal, #305057);
}
.ktp-upload-area.has-file {
    background: var(--rr-surface);
    border-style: solid;
    border-color: var(--rr-success);
    padding: 16px;
    text-align: left;
}
.ktp-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ktp-icon { color: var(--rr-teal, #305057); }
.ktp-icon .rr-icon svg { width: 36px; height: 36px; }
.ktp-text { font-size: 14.5px; font-weight: 600; color: var(--rr-text); }
.ktp-sub { font-size: 12px; color: var(--rr-text-muted); }
.ktp-preview-wrap {
    position: relative;
}
.ktp-preview-wrap img {
    max-width: 100%;
    border-radius: var(--rr-r-sm);
    display: block;
}
.ktp-pdf-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--rr-surface-3);
    border-radius: var(--rr-r-sm);
    font-size: 13.5px;
    color: var(--rr-text-2);
    font-weight: 500;
}
.ktp-change-btn {
    margin-top: 12px;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border-strong);
    border-radius: var(--rr-r-pill);
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rr-text);
    cursor: pointer;
    font-family: var(--rr-font);
    transition: background .15s ease;
}
.ktp-change-btn:hover { background: var(--rr-surface-3); }

/* ─── 10. Step indicator ──────────────────────────────────────── */
.checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 24px;
    padding: 6px 0;
}
.checkout-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--rr-text-sub);
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}
.checkout-step span { white-space: nowrap; }
.step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rr-surface-3);
    color: var(--rr-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    transition: all .2s ease;
    flex-shrink: 0;
}
.checkout-step.active .step-circle {
    background: var(--rr-teal-2, #448888);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(68,136,136,.18);
}
.checkout-step.active {
    color: var(--rr-text);
    font-weight: 600;
}
.checkout-step.done .step-circle {
    background: var(--rr-teal-2);
    color: #fff;
    font-size: 0; /* hide number */
}
.checkout-step.done .step-circle .rr-icon svg { width: 14px; height: 14px; }
.checkout-step.done { color: var(--rr-text-2); }
.step-line {
    flex: 0 1 40px;
    min-width: 20px;
    height: 2px;
    background: var(--rr-border-strong);
    border-radius: 2px;
}
.step-line.active { background: var(--rr-teal-2); }

/* ─── 11. Payment page ────────────────────────────────────────── */
.payment-summary {
    text-align: center;
    margin-bottom: 28px;
}
.payment-summary-sub {
    font-size: 14.5px;
    color: var(--rr-text-muted);
    margin: 0 0 20px;
}
.booking-summary-mini {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
    padding: 20px 24px;
    text-align: left;
    max-width: 480px;
    margin: 0 auto;
}
.booking-date-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rr-teal-light, #e0eaec);
    color: var(--rr-teal, #305057);
    border-radius: var(--rr-r-pill);
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 12px;
}
.booking-date-tag .rr-icon svg { width: 13px; height: 13px; }
.payment-item-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--rr-text-2);
    border-bottom: 1px solid var(--rr-border);
}
.payment-item-row:last-of-type { border-bottom: 0; }
.payment-item-row.payment-grand {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--rr-border-strong);
    border-bottom: 0;
    font-size: 16px;
    color: var(--rr-text);
}
.booking-code-display {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--rr-text-muted);
    text-align: center;
}
.booking-code-display strong {
    color: var(--rr-text);
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.payment-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    max-width: 880px;
    margin: 0 auto;
}
.payment-option-card {
    background: var(--rr-surface);
    border: 1.5px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    padding: 22px;
    box-shadow: var(--rr-shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.payment-option-midtrans:hover {
    border-color: var(--rr-teal, #305057);
    box-shadow: 0 4px 16px rgba(191,102,22,.15);
    transform: translateY(-1px);
}
.payment-option-whatsapp:hover {
    border-color: var(--rr-wa);
    box-shadow: 0 4px 16px rgba(37,211,102,.12);
    transform: translateY(-1px);
}
.payment-option-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.payment-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--rr-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.payment-icon .rr-icon svg { width: 22px; height: 22px; }
.payment-icon-midtrans { background: var(--rr-teal-light, #e0eaec); color: var(--rr-teal, #305057); }
.payment-icon-whatsapp { background: #d6f5e0; color: #1f8a3a; }
.payment-option-info { flex: 1; min-width: 180px; }
.payment-option-info h3 { margin: 0 0 2px; font-size: 16px; font-weight: 600; }
.payment-option-info p { margin: 0; font-size: 12.5px; color: var(--rr-text-muted); line-height: 1.45; }

.payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--rr-r-pill);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--rr-warning-bg);
    color: var(--rr-warning-text);
    align-self: flex-start;
}
.payment-badge.recommended .rr-icon svg { width: 11px; height: 11px; }

.payment-option-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.payment-option-perks li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--rr-text-2);
}
.payment-option-perks li .rr-icon { color: var(--rr-success); }
.payment-option-perks li .rr-icon svg { width: 14px; height: 14px; }

.wa-message-preview {
    background: var(--rr-surface-3);
    border-radius: var(--rr-r-sm);
    padding: 12px;
    border: 1px solid var(--rr-border);
}
.wa-preview-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--rr-text-muted);
    margin-bottom: 4px;
}
.wa-message-preview code {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--rr-text-2);
    background: transparent;
    line-height: 1.55;
    word-wrap: break-word;
}

/* ─── 12. TnC page ────────────────────────────────────────────── */
.rurent-tnc {
    max-width: 680px;
}
.tnc-page-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin: 0 0 24px;
    color: var(--rr-text);
}
.tnc-page-title em {
    font-style: italic;
    color: var(--rr-teal-2);
}
.tnc-title-italic {
    font-style: italic;
}
.tnc-subtitle {
    display: none;
}
.tnc-content {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: 20px;
    box-shadow: var(--rr-shadow-sm);
    padding: 32px 36px;
    margin-bottom: 20px;
}
.tnc-section {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--rr-border);
}
.tnc-content h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--rr-text);
    letter-spacing: -0.2px;
}
.tnc-content p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--rr-text-2);
    margin: 0 0 10px;
}
.tnc-content p:last-child { margin-bottom: 0; }
.tnc-content ul, .tnc-content ol {
    padding-left: 22px;
    margin: 8px 0 12px;
}
.tnc-content li {
    font-size: 14px;
    line-height: 1.65;
    color: var(--rr-text-2);
    margin-bottom: 4px;
}
.tnc-accept-section {
    background: var(--rr-surface-2, #f0ece8);
    border-radius: 16px;
    padding: 20px 24px;
    margin-top: 8px;
}
.tnc-accept-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.tnc-checkbox-label {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}
.tnc-checkbox-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--rr-border, #ddd);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    cursor: pointer;
}
.tnc-checkbox-icon.checked {
    background: var(--rr-teal, #305057);
    border-color: var(--rr-teal, #305057);
    color: #fff;
}
.tnc-checkbox-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tnc-checkbox-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rr-text-1, #1a1a1a);
    line-height: 1.4;
}
.tnc-checkbox-sub {
    font-size: 12.5px;
    color: var(--rr-text-muted, #888);
    line-height: 1.4;
}
.tnc-checkbox-label input[type="checkbox"] {
    display: none;
}
.tnc-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.rurent-btn-ghost {
    background: transparent;
    border: none;
    color: var(--rr-text-2, #555);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 99px;
    transition: background 0.15s;
}
.rurent-btn-ghost:hover {
    background: rgba(0,0,0,0.06);
}
.rurent-btn-pill {
    border-radius: 99px !important;
    padding: 10px 28px !important;
}
.tnc-standalone-cta {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

/* ─── 13. Confirmation page ──────────────────────────────────── */
.rurent-confirmation { max-width: 720px; }
.confirmation-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow);
    padding: 32px 28px;
    text-align: center;
}
.confirmation-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 14px;
}
.confirmation-card h2 {
    text-align: center;
    margin-bottom: 6px;
}
.confirmation-card > p {
    color: var(--rr-text-muted);
    font-size: 14.5px;
    margin: 0 0 22px;
}
.confirmation-details {
    background: var(--rr-surface-2);
    border-radius: var(--rr-r-md);
    padding: 14px 18px;
    text-align: left;
    margin-bottom: 18px;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--rr-border);
    font-size: 13.5px;
}
.detail-row:last-child { border-bottom: 0; }
.detail-key { color: var(--rr-text-muted); }
.detail-val { font-weight: 600; color: var(--rr-text); }
.detail-val.booking-code {
    font-family: ui-monospace, SFMono-Regular, monospace;
    letter-spacing: 0.5px;
    color: var(--rr-teal, #305057);
}
.confirmation-items {
    text-align: left;
    margin-bottom: 20px;
}
.confirmation-items h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--rr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.confirmation-item-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid var(--rr-border);
    font-size: 13.5px;
    color: var(--rr-text-2);
}
.confirmation-item-row.deposit-row { color: var(--rr-text-muted); font-style: italic; }
.confirmation-item-row.grand-row {
    border-top: 1px solid var(--rr-border-strong);
    border-bottom: 0;
    padding-top: 10px;
    margin-top: 4px;
    font-size: 15px;
    color: var(--rr-text);
}
.confirmation-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.confirmation-note {
    font-size: 12.5px;
    color: var(--rr-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ─── 14. Product detail page ────────────────────────────────── */
.rurent-product-page { max-width: 1100px; }

.product-breadcrumb {
    margin-bottom: 20px;
}
.product-breadcrumb a {
    font-size: 13.5px;
    color: var(--rr-text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color .2s;
}
.product-breadcrumb a:hover { color: var(--rr-teal); }

.rurent-product-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%) !important;
    gap: 40px;
    align-items: start;
    width: 100%;
}

/* ── Left column ── */
.product-page-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 24px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.product-page-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: var(--rr-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-page-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-img-placeholder-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 320px;
}
.product-score-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--rr-text);
    color: #fff;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.product-radar-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: 16px;
    padding: 18px 20px;
}
.product-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--rr-text-muted);
    margin: 0 0 12px;
}
.radar-wrap {
    display: flex;
    justify-content: center;
}
.radar-wrap canvas {
    max-width: 100%;
    height: auto;
}

/* ── Right column ── */
.product-page-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.product-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.badge-level,
.badge-shape,
.badge-style {
    display: inline-block;
    background: var(--rr-teal-light, #e0eaec);
    color: var(--rr-teal, #305057);
    border-radius: var(--rr-r-pill);
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
}

.product-page-name {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.6px;
    line-height: 1.15;
    margin: 0 0 14px;
    color: var(--rr-text);
}

/* spec pills row */
.product-spec-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.spec-pill-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rr-surface-3);
    border-radius: 8px;
    padding: 6px 12px;
}
.spec-pill-key {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rr-text-muted);
    font-weight: 600;
}
.spec-pill-key::after { content: ':'; }
.spec-pill-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--rr-text);
}

/* description */
.product-description {
    font-size: 14px;
    line-height: 1.65;
    color: var(--rr-text-sub);
    margin: 0 0 18px;
}

/* rating bars */
.product-ratings-section {
    margin-bottom: 20px;
}
.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}
.rating-bar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 160px;
    flex-shrink: 0;
}
.rating-bar-name {
    font-size: 12.5px;
    color: var(--rr-text-muted);
    font-weight: 500;
}
.rating-bar-val {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rr-text-2);
}
.rating-bar-track {
    flex: 1;
    height: 5px;
    background: var(--rr-surface-3);
    border-radius: 99px;
    overflow: hidden;
}
.rating-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .4s ease;
    background: var(--rr-teal-2);
}

/* materials */
.product-materials-section {
    margin-bottom: 20px;
}
.material-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rr-border);
    font-size: 13px;
}
.material-item:last-child { border-bottom: 0; }
.material-icon { color: var(--rr-teal); flex-shrink: 0; }
.material-info { display: flex; flex-direction: column; flex: 1; }
.material-type {
    font-size: 10px;
    color: var(--rr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.material-val { font-weight: 600; color: var(--rr-text); font-size: 13.5px; }

/* rec note */
.product-rec-note {
    background: rgba(68, 136, 136, 0.08);
    color: var(--rr-teal, #305057);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 20px;
}

.product-divider {
    height: 1px;
    background: var(--rr-border);
    margin: 4px 0 20px;
}

/* ── Booking form ── */
.rurent-booking-form {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: 18px;
    padding: 24px;
}
.booking-form-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 18px;
    color: var(--rr-text);
}

/* date chips inside booking form */
.booking-date-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 4px;
}
.booking-date-chips::-webkit-scrollbar { display: none; }
.booking-date-chip {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 99px;
    border: 1.5px solid var(--rr-border);
    background: var(--rr-surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--rr-text-muted);
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
}
.booking-date-chip.active,
.booking-date-chip:hover {
    background: var(--rr-teal);
    border-color: var(--rr-teal);
    color: #fff;
}

.availability-status {
    font-size: 12.5px;
    color: var(--rr-text-muted);
    margin-top: 6px;
    min-height: 18px;
}
.availability-status.available { color: var(--rr-success); }
.availability-status.unavailable { color: var(--rr-danger); }

/* price summary */
.rurent-price-summary {
    background: var(--rr-surface-2);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    color: var(--rr-text-sub);
}
.price-row small { font-size: 11px; color: var(--rr-text-muted); }
.deposit-row { color: var(--rr-text-muted); }
.total-row {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--rr-border);
    font-size: 15px;
    color: var(--rr-text);
}
.total-row strong { color: var(--rr-teal-2); font-size: 17px; }

/* cta */
.product-cta-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

/* btn-add-to-cart pakai --rr-teal-2 */
.product-cta-group #btn-add-to-cart,
.product-cta-group .rurent-btn-primary {
    background: var(--rr-teal-2, #448888);
    color: #fff;
}
.product-cta-group #btn-add-to-cart:hover:not(:disabled),
.product-cta-group .rurent-btn-primary:hover:not(:disabled) {
    background: var(--rr-teal, #305057);
    box-shadow: 0 4px 12px rgba(68,136,136,.30);
    transform: translateY(-1px);
}
.btn-full { width: 100%; text-align: center; justify-content: center; }

/* ─── 14b. Booking form — pickup time, extra hours, pills ────── */

/* btn-add-to-cart uses teal-2 */
#btn-add-to-cart {
    background: var(--rr-teal-2) !important;
    color: #fff !important;
    border-color: #2d7a4f !important;
}
#btn-add-to-cart:hover:not(:disabled) {
    background: #246040 !important;
    border-color: #246040 !important;
    box-shadow: 0 4px 14px rgba(45,122,79,.30) !important;
    transform: translateY(-1px);
}

/* Hidden date input */
.rental-date-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* Form label */
.form-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-text);
    margin-bottom: 8px;
}
.form-label svg { flex-shrink: 0; color: var(--rr-text-muted); }
.form-required { color: var(--rr-danger); font-size: 12px; }
.form-field-error {
    font-size: 12px;
    color: var(--rr-danger);
    margin-top: 5px;
}

/* Date pills row */
.date-pills-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
}
.date-pills-row::-webkit-scrollbar { display: none; }

.date-pill {
    flex-shrink: 0;
    padding: 6px 13px;
    border-radius: 99px;
    border: 1.5px solid var(--rr-border);
    background: var(--rr-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rr-text-muted);
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
    line-height: 1;
}
.date-pill:hover {
    border-color: var(--rr-teal-2);
    color: var(--rr-teal-2);
}
.date-pill.active {
    background: var(--rr-teal-2);
    border-color: var(--rr-teal-2);
    color: #fff;
}
.date-pill-cal {
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.date-pill-cal svg { width: 14px; height: 14px; }

/* Pickup time select */
.rurent-select {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1.5px solid var(--rr-border-strong);
    border-radius: 10px;
    background: var(--rr-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7c80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    appearance: none;
    font-size: 13.5px;
    font-family: var(--rr-font);
    color: var(--rr-text);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    line-height: 1.4;
}
.rurent-select:focus {
    outline: none;
    border-color: var(--rr-teal-2);
    box-shadow: 0 0 0 3px rgba(68,136,136,.12);
}
.rurent-select option { color: var(--rr-text); background: var(--rr-surface); }

/* Extra hours label */
.extra-hours-price-label {
    font-weight: 400;
    color: var(--rr-text-muted);
    font-size: 12px;
    margin-left: 2px;
}

/* Extra hours pills */
.extra-hours-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.extra-pill {
    padding: 6px 14px;
    border-radius: 99px;
    border: 1.5px solid var(--rr-border);
    background: var(--rr-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rr-text-muted);
    cursor: pointer;
    transition: all .15s ease;
    line-height: 1;
    white-space: nowrap;
}
.extra-pill:hover {
    border-color: var(--rr-teal-2);
    color: var(--rr-teal-2);
}
.extra-pill.active {
    background: var(--rr-teal-2);
    border-color: var(--rr-teal-2);
    color: #fff;
}
/* Pill khusus "Sewa 2 Hari" — visual berbeda agar user sadar ini beda tier */
.extra-pill-2hari {
    border-style: dashed;
    border-color: var(--rr-teal-2);
    color: var(--rr-teal-2);
}
.extra-pill-2hari:hover {
    background: var(--rr-teal-2);
    color: #fff;
    border-style: solid;
}
.extra-pill-2hari.active {
    background: var(--rr-teal-2);
    border-color: var(--rr-teal-2);
    border-style: solid;
    color: #fff;
}

/* Return time info */
.return-time-info {
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--rr-teal-2);
    font-weight: 500;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 4px;
}
.return-time-info strong {
    font-weight: 700;
    color: var(--rr-teal-2);
}

/* Quantity label + unit */
.qty-max-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--rr-text-muted);
    margin-left: 4px;
}
.qty-unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--rr-text-muted);
    margin-left: 6px;
    align-self: center;
}

/* Deposit badge */
.deposit-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 99px;
    background: var(--rr-teal-light);
    color: var(--rr-teal-2);
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: .01em;
}

/* Diskon row styling */
.price-row-discount {
    color: #2d7a4f;
    font-weight: 600;
}
.price-row-discount span:last-child { color: #2d7a4f; }

/* Booking form footer (durasi info) */
.booking-form-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}
.booking-footer-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(68, 136, 136, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
}
.booking-footer-item svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--rr-teal-2, #448888);
    width: 14px;
    height: 14px;
}
.booking-footer-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.booking-footer-item strong {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--rr-text);
    display: block;
}
.booking-footer-item span {
    font-size: 11px;
    color: var(--rr-text-muted);
    line-height: 1.4;
}

/* Form group spacing in booking form */
.rurent-booking-form .form-group {
    margin-bottom: 16px;
}
.rurent-booking-form .form-group:last-of-type {
    margin-bottom: 0;
}

/* Booking form qty row — inline dengan unit label */
.rurent-booking-form .qty-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rurent-booking-form .qty-control {
    display: inline-flex;
    align-items: center;
    background: var(--rr-surface-2, #f3f4f6);
    border: 1.5px solid var(--rr-border, #e5e7eb);
    border-radius: 99px;
    padding: 3px;
    gap: 0;
    width: auto;
}
.rurent-booking-form .qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
    background: var(--rr-surface, #fff);
    border: 1px solid var(--rr-border, #e5e7eb);
    color: var(--rr-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s;
    line-height: 1;
    flex-shrink: 0;
}
.rurent-booking-form .qty-btn:hover { background: var(--rr-surface-3); }
.rurent-booking-form .qty-input {
    width: 32px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    border: none;
    background: transparent;
    font-family: var(--rr-font);
    color: var(--rr-text);
    -moz-appearance: textfield;
}
.rurent-booking-form .qty-input::-webkit-outer-spin-button,
.rurent-booking-form .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.rurent-booking-form .qty-unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--rr-text-muted);
}

/* Cart: pickup time info row */
.cart-time-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--rr-text-muted);
    flex-wrap: wrap;
}
.cart-time-label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--rr-text-muted);
}
.cart-return-label {
    font-size: 12px;
    color: var(--rr-teal-2);
    font-weight: 500;
}

/* Cart extra hours summary row */
#cart-extra-hours-row {
    color: var(--rr-text-sub);
    font-size: 13.5px;
}

/* ─── Custom date calendar popup ───────────────────────────── */
.rr-cal-popup {
    position: relative;
    z-index: 10;
    background: var(--rr-surface);
    border: 1.5px solid var(--rr-border);
    border-radius: 14px;
    padding: 14px 16px 16px;
    box-shadow: 0 4px 20px rgba(48,80,87,.10);
    width: 100%;
    user-select: none;
    margin-top: 10px;
    box-sizing: border-box;
}

.rr-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.rr-cal-month-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--rr-text);
    text-align: center;
    flex: 1;
    letter-spacing: -.01em;
}
.rr-cal-nav {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--rr-text-muted);
    padding: 0;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.rr-cal-nav:hover {
    background: var(--rr-surface-2);
    color: var(--rr-text);
}

.rr-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: 4px;
}
.rr-cal-dow {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--rr-text-muted);
    padding: 0 0 6px;
    letter-spacing: .02em;
}

.rr-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.rr-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    border-radius: 50%;
    cursor: pointer;
    color: var(--rr-text);
    border: none;
    background: transparent;
    padding: 0;
    transition: background .12s, color .12s;
    line-height: 1;
    width: 100%;
}
.rr-cal-day:hover:not(.disabled):not(.active):not(.today) {
    background: var(--rr-teal-light);
    color: var(--rr-teal-2);
}
.rr-cal-day.today {
    background: var(--rr-primary);
    color: #fff;
    font-weight: 700;
}
.rr-cal-day.active {
    background: var(--rr-teal-2);
    color: #fff;
    font-weight: 700;
}
.rr-cal-day.today.active {
    background: var(--rr-teal-2);
}
.rr-cal-day.disabled {
    color: var(--rr-border-strong);
    cursor: default;
    pointer-events: none;
}
.rr-cal-day.empty {
    pointer-events: none;
    background: transparent;
}

/* ─── 15. Quiz modal ─────────────────────────────────────────── */
/* (Keeps existing structure; just polished) */
#rurent-quiz-modal {
    font-family: var(--rr-font);
}
.result-image-placeholder {
    background: var(--rr-surface-3);
    border-radius: var(--rr-r-md);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rr-text-sub);
}
.result-rank-badge {
    background: var(--rr-text);
    color: #fff;
    border-radius: var(--rr-r-pill);
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
}

/* ─── 16. Empty / no-results states ──────────────────────────── */
.rurent-no-results {
    text-align: center;
    padding: 60px 20px;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    color: var(--rr-text-muted);
}
.no-results-icon {
    font-size: 38px;
    margin-bottom: 10px;
    opacity: 0.5;
}
.rurent-no-results p {
    font-size: 14.5px;
    margin: 0 0 14px;
}
.rurent-no-results button {
    background: var(--rr-teal, #305057);
    color: #fff;
    border: 0;
    border-radius: var(--rr-r-pill);
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

/* ─── 17. Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .cart-layout,
    .rurent-checkout-layout,
    .rurent-product-layout {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .order-summary-card,
    .cart-summary-card {
        position: static;
    }
    .product-page-left {
        position: static;
        width: 100% !important;
    }
    .product-page-details {
        width: 100% !important;
    }
    .product-page-image {
        aspect-ratio: 4 / 3;
        max-height: 340px;
    }
    .quiz-cta-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .quiz-cta-btn { width: 100%; }
}

@media (max-width: 640px) {
    .product-page-name { font-size: 24px; }
    .rating-bar-meta { width: 130px; }
    .rurent-booking-form { padding: 18px 16px; }
}

@media (max-width: 640px) {
    .rurent-katalog,
    .rurent-cart-page,
    .rurent-checkout,
    .rurent-payment-method,
    .rurent-tnc,
    .rurent-confirmation,
    .rurent-product-page {
        padding: 16px 14px 80px;
    }
    .checkout-card { padding: 22px 18px; }
    .cart-card { padding: 18px; }
    .cart-item {
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
        gap: 12px;
    }
    .cart-item-image,
    .cart-item-image img,
    .cart-item-icon {
        width: 64px !important;
        height: 64px !important;
    }
    .cart-item-controls {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-width: 0;
    }
    .checkout-step span { display: none; }
    .checkout-step.active span,
    .checkout-step.done + .step-line + .checkout-step.active span { display: inline; }
    .step-line { flex-basis: 24px; }
    .rurent-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }
    .rurent-preview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .product-info { padding: 10px 12px 12px; gap: 8px; }
    .product-name { font-size: 14.5px; }
    .product-price { font-size: 16px; }
    .card-btn-detail,
    .card-btn-cart { font-size: 12px; padding: 7px 10px; }
    .payment-options { grid-template-columns: 1fr; }
    .booking-summary-mini { padding: 16px 18px; }
    .rurent-katalog h2,
    .rurent-cart-page h2,
    .rurent-checkout h2,
    .rurent-payment-method h2,
    .rurent-tnc h2,
    .rurent-confirmation h2 { font-size: 22px; }
    .checkout-card-title { font-size: 19px; }
}

/* ═══════════════════════════════════════════════════════════════════
   18. Elementor Widget Integration
   ═══════════════════════════════════════════════════════════════════
   Wrapper .rurent-elementor-widget di-inject oleh setiap widget
   RURENT_Widget_*. Inline <style> per-widget akan men-set CSS
   variables di bawah ini sehingga tiap instance bisa beda warna.

   Variabel custom yang bisa di-override per-widget:
     --rr-icon-color        : warna default semua icon SVG
     --rr-icon-color-accent : warna icon status (success-tinted)
     --rr-icon-size         : ukuran icon (px)
     --rr-primary           : warna tombol primer (override --rr-primary global)
     --rr-primary-text      : warna teks tombol primer
     --rr-primary-hover     : warna tombol saat hover
     --rr-text              : warna teks body
     --rr-text-2            : warna teks sekunder
     --rr-text-muted        : warna teks tertier
     --rr-link-color        : warna link
     --rr-bg                : background section
     --rr-surface           : background card
     --rr-border            : warna border
     --rr-r-lg              : radius card
     --rr-r-pill            : radius tombol
     --rr-widget-padding    : padding sekitar widget
   ═══════════════════════════════════════════════════════════════════ */

.rurent-elementor-widget {
    padding: var(--rr-widget-padding, 0);
}

/* Apply icon color */
.rurent-elementor-widget .rr-icon {
    color: var(--rr-icon-color, currentColor);
}
.rurent-elementor-widget .rr-icon svg {
    width: var(--rr-icon-size, 18px);
    height: var(--rr-icon-size, 18px);
}

/* Hapus aksen ke icon yang punya class .rr-icon-success-bg / status */
.rurent-elementor-widget .rr-icon-accent,
.rurent-elementor-widget .ktp-icon .rr-icon,
.rurent-elementor-widget .payment-icon-midtrans .rr-icon,
.rurent-elementor-widget .payment-icon-whatsapp .rr-icon {
    color: var(--rr-icon-color-accent, var(--rr-icon-color, currentColor));
}

/* Override button color: tombol .rurent-btn-primary, .card-btn-cart, .quiz-cta-btn,
   .sticky-cart-btn, .btn-text-link, etc. */
.rurent-elementor-widget .rurent-btn-primary {
    background: var(--rr-primary);
    color: var(--rr-primary-text, #fff);
}
.rurent-elementor-widget .card-btn-cart,
.rurent-elementor-widget .quiz-cta-btn,
.rurent-elementor-widget .sticky-cart-btn {
    background: var(--rr-teal, #305057);
    color: #fff;
}
.rurent-elementor-widget .rurent-btn-primary:hover:not(:disabled) {
    background: var(--rr-primary-hover);
}
.rurent-elementor-widget .card-btn-cart:hover,
.rurent-elementor-widget .quiz-cta-btn:hover,
.rurent-elementor-widget .sticky-cart-btn:hover {
    background: var(--rr-teal-hover, #264349);
}

.rurent-elementor-widget .rurent-btn,
.rurent-elementor-widget .rurent-btn-primary,
.rurent-elementor-widget .card-btn-cart,
.rurent-elementor-widget .card-btn-detail,
.rurent-elementor-widget .quiz-cta-btn,
.rurent-elementor-widget .sticky-cart-btn,
.rurent-elementor-widget .btn-add-more,
.rurent-elementor-widget .ktp-change-btn,
.rurent-elementor-widget .qty-control {
    border-radius: var(--rr-r-pill);
}

/* Card / surface override */
.rurent-elementor-widget .rurent-product-card,
.rurent-elementor-widget .checkout-card,
.rurent-elementor-widget .order-summary-card,
.rurent-elementor-widget .cart-card,
.rurent-elementor-widget .cart-summary-card,
.rurent-elementor-widget .booking-summary-mini,
.rurent-elementor-widget .payment-option-card,
.rurent-elementor-widget .confirmation-card,
.rurent-elementor-widget .tnc-content,
.rurent-elementor-widget .tnc-accept-section,
.rurent-elementor-widget .rurent-filter-bar {
    background: var(--rr-surface);
    border-color: var(--rr-border);
    border-radius: var(--rr-r-lg);
}

/* Background section */
.rurent-elementor-widget {
    background: var(--rr-bg);
}
/* Tapi: kalau --rr-bg tidak di-set di kontrol, jangan paksa abu-abu —
   biarkan Elementor section background yang berbicara. Ini di-handle
   secara otomatis oleh CSS var fallback (var(--rr-bg) = "" → tidak apply). */

/* Link color override */
.rurent-elementor-widget a {
    color: var(--rr-link-color, var(--rr-teal, #305057));
}

/* Text color body */
.rurent-elementor-widget {
    color: var(--rr-text);
}
.rurent-elementor-widget .rr-stock-sub,
.rurent-elementor-widget .product-deposit-hint,
.rurent-elementor-widget .summary-meta,
.rurent-elementor-widget .deposit-note,
.rurent-elementor-widget .checkout-card-sub,
.rurent-elementor-widget .booking-code-display,
.rurent-elementor-widget .form-group small {
    color: var(--rr-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   19. Stok Hari Ini (publik) — widget Elementor
   ═══════════════════════════════════════════════════════════════════ */

.rurent-stock-today {
    font-family: var(--rr-font);
    color: var(--rr-text);
}

.rr-stock-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.rr-stock-heading {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin: 0 0 4px;
    color: var(--rr-text);
}
.rr-stock-sub {
    font-size: 13.5px;
    color: var(--rr-text-muted);
    margin: 0;
}
.rr-stock-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rr-teal-light, #e0eaec);
    color: var(--rr-teal, #305057);
    border-radius: var(--rr-r-pill);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
}
.rr-stock-date .rr-icon svg { width: 14px; height: 14px; }

.rr-stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.rr-stock-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
    padding: 14px;
    display: flex;
    gap: 12px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.rr-stock-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--rr-shadow);
}

.rr-stock-card-img {
    width: 64px;
    height: 64px;
    border-radius: var(--rr-r-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--rr-surface-3);
}
.rr-stock-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rr-stock-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rr-text-sub);
}
.rr-stock-placeholder .rr-icon svg { width: 28px; height: 28px; }

.rr-stock-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rr-stock-name {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--rr-text);
}
.rr-stock-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rr-stock-fraction {
    font-size: 12.5px;
    color: var(--rr-text-muted);
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}
.rr-stock-fraction strong {
    color: var(--rr-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.rr-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--rr-r-pill);
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.rr-stock-badge .rr-icon svg { width: 11px; height: 11px; }
.rr-badge-success { background: var(--rr-success-bg); color: var(--rr-success-text); }
.rr-badge-warning { background: var(--rr-warning-bg); color: var(--rr-warning-text); }
.rr-badge-danger  { background: var(--rr-danger-bg);  color: var(--rr-danger); }

.rr-stock-bar {
    height: 5px;
    background: var(--rr-surface-3);
    border-radius: 5px;
    overflow: hidden;
    margin-top: 2px;
}
.rr-stock-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width .35s ease;
}
.rr-bar-success { background: var(--rr-success); }
.rr-bar-warning { background: var(--rr-warning); }
.rr-bar-danger  { background: var(--rr-danger); }

.rr-stock-empty {
    text-align: center;
    padding: 40px 20px;
    background: var(--rr-surface);
    border: 1px dashed var(--rr-border);
    border-radius: var(--rr-r-lg);
    color: var(--rr-text-muted);
}
.rr-stock-empty .rr-icon svg { width: 32px; height: 32px; margin-bottom: 6px; }
.rr-stock-empty p { margin: 0; font-size: 13.5px; }

@media (max-width: 640px) {
    .rr-stock-grid { grid-template-columns: 1fr; gap: 10px; }
    .rr-stock-heading { font-size: 18px; }
    .rr-stock-card { padding: 12px; }
    .rr-stock-card-img { width: 56px; height: 56px; }
}
/* ═══════════════════════════════════════════════════════════════════
   20. Landing Page Widgets (Hero, USP, Flow, Instagram, CTA)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────── */
.rr-hero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #305057;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.rr-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.rr-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 100px 24px 80px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.rr-hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;      /* center tiap span secara horizontal */
    text-align: center;       /* center teks di dalam span */
    gap: 6px;
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(36px, 5.5vw, 68px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0 auto 22px;      /* auto kiri-kanan agar kotak h1 sendiri center */
    width: 100%;
}
.rr-hero-title span { display: block; text-align: center; }
.rr-hero-title em { font-style: italic; }
.rr-hero-sub {
    font-size: clamp(15px, 2vw, 18px);
    color: rgba(255,255,255,.80);
    margin: 0 auto 40px;
    max-width: 580px;
    line-height: 1.6;
    text-align: center;
}
.rr-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 44px;
    border-radius: 8px;
    font-family: var(--rr-font, 'Inter', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: filter .2s ease, transform .2s ease;
}
.rr-hero-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    color: #fff;
}
.rr-hero-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}
/* Primary button default */
.rr-hero-btn--primary {
    background: #BF6616;
    color: #fff;
    border-color: transparent;
}
/* Secondary / outline button default */
.rr-hero-btn--secondary {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}
.rr-hero-btn--secondary:hover {
    background: rgba(255,255,255,0.12);
    border-color: #fff;
    filter: none;
}
/* Legacy ghost class — backward compat */
.rr-hero-btn--ghost {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.7);
    color: #fff !important;
}
.rr-hero-btn--ghost:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: #fff;
    filter: none;
}

/* ── USP ──────────────────────────────────────────────────────── */

/* ── USP Section Heading ───────────────────────────────────────── */
.rr-usp-section-heading {
    text-align: center;
    margin-bottom: 40px;
}
.rr-usp-section-heading h2 {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: 36px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
    line-height: 1.2;
}
.rr-usp-section-heading h2 em {
    font-style: italic;
    color: #BF6616;
}
.rr-usp-section-heading p {
    font-size: 16px;
    color: #6b7c80;
    margin: 0;
    line-height: 1.6;
}

.rr-usp-section { padding: 60px 0; }
.rr-usp-grid {
    display: grid;
    gap: 24px;
}
.rr-usp-card {
    background: transparent;
}

.rr-usp-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--rr-r-md, 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.rr-usp-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rr-usp-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--rr-text, #1a1a1a); }
.rr-usp-card p  { font-size: 13.5px; color: var(--rr-text-muted, #6b7c80); line-height: 1.55; margin: 0; }

/* ── Flow ─────────────────────────────────────────────────────── */
.rr-flow-section {
    padding: 60px 0;
    background: var(--rr-bg, #EBE5DD);
    text-align: center;
}
.rr-flow-title {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    margin: 0 0 40px;
}
.rr-flow-title-accent { font-style: italic; color: var(--rr-teal-2, #448888); }
.rr-flow-steps {
    display: grid;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
}
.rr-flow-step {
    text-align: center;
    position: relative;
    padding: 0 8px;
}
.rr-flow-num-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--rr-teal, #305057);
    color: var(--rr-teal, #305057);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    margin: 0 auto 14px;
    position: relative;
    z-index: 2;
    transition: all .2s ease;
}
.rr-flow-step:hover .rr-flow-num-circle {
    background: var(--rr-teal, #305057);
    color: #fff;
}
.rr-flow-connector {
    position: absolute;
    top: 22px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 1.5px;
    background: var(--rr-border-strong, #c8bfb3);
    z-index: 0;
}
.rr-flow-step h4 { font-size: 13.5px; font-weight: 600; margin: 0 0 6px; color: var(--rr-text, #1a1a1a); }
.rr-flow-step p  { font-size: 12.5px; color: var(--rr-text-muted, #6b7c80); line-height: 1.5; max-width: 180px; margin: 0 auto; }

/* ── Instagram ────────────────────────────────────────────────── */
.rr-instagram-section { padding: 60px 0; background: var(--rr-surface, #fff); }
.rr-ig-header { text-align: center; margin-bottom: 32px; }
.rr-ig-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--rr-teal-2, #448888);
    margin-bottom: 10px;
}
.rr-ig-eyebrow svg { flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; }
.rr-ig-title {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    margin: 0 0 8px;
}
.rr-ig-title em { font-style: italic; color: var(--rr-teal-2, #448888); }
.rr-ig-sub { font-size: 15px; color: var(--rr-text-muted, #6b7c80); margin: 0; }
.rr-ig-grid {
    display: grid;
    grid-template-columns: repeat(var(--rr-ig-cols, 3), 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.rr-ig-item {
    position: relative;
    border-radius: var(--rr-r-md, 12px);
    overflow: hidden;
    aspect-ratio: 1/1;
    background: var(--rr-surface-3, #ede7df);
}
.rr-ig-item a { display: block; width: 100%; height: 100%; }
.rr-ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.rr-ig-item:hover img { transform: scale(1.04); }
.rr-ig-overlay {
    position: absolute;
    inset: 0;
    background: rgba(48,80,87,0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .25s ease;
}
.rr-ig-overlay svg { opacity: 0; transition: opacity .25s ease; stroke: currentColor; fill: none; stroke-width: 2; }
.rr-ig-item:hover .rr-ig-overlay { background: rgba(48,80,87,.45); }
.rr-ig-item:hover .rr-ig-overlay svg { opacity: 1; }
.rr-ig-cta { text-align: center; }
.rr-ig-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rr-teal, #305057);
    color: #fff;
    padding: 11px 24px;
    border-radius: 980px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s ease;
}
.rr-ig-cta-btn svg { stroke: currentColor; fill: none; stroke-width: 2; }
.rr-ig-cta-btn:hover { background: #264349; color: #fff; transform: translateY(-1px); }

/* ── CTA Banner ───────────────────────────────────────────────── */
.rr-cta-banner {
    border-radius: var(--rr-r-xl, 20px);
    padding: 40px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.rr-cta-text { flex: 1; min-width: 240px; }
.rr-cta-text h3 { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; color: #fff; margin: 0 0 6px; }
.rr-cta-text p  { font-size: 14.5px; color: rgba(255,255,255,.75); line-height: 1.55; margin: 0; }
.rr-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    padding: 13px 26px;
    border-radius: 980px;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
}
.rr-cta-btn svg { stroke: currentColor; fill: none; stroke-width: 2; }
.rr-cta-btn:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }

/* ── Responsive landing widgets ───────────────────────────────── */
@media (max-width: 768px) {
    .rr-hero-inner { padding: 72px 20px 60px; }
    .rr-usp-grid { grid-template-columns: 1fr !important; }
    .rr-flow-steps { grid-template-columns: 1fr !important; gap: 24px; }
    .rr-flow-connector { display: none; }
    .rr-ig-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .rr-cta-banner { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   Katalog Preview — Improvements (v3.2)
   Tambahkan ke bagian akhir rurent-core/assets/css/rurent.css
   ═══════════════════════════════════════════════════════════════ */

/* Preview filter bar — lebih compact */
.rurent-preview-filter-bar {
    margin-bottom: 16px;
    padding: 14px 18px;
}
.rurent-preview-filter-bar .rurent-filter-group { margin-bottom: 12px; }
.rurent-preview-filter-bar .rurent-filter-group:last-child { margin-bottom: 0; }
.rurent-preview-filter-bar .rurent-filter-row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.rurent-preview-filter-bar .rurent-select {
    padding: 8px 32px 8px 12px;
    font-size: 13px;
}

/* Preview grid — RESPECT inline grid-template-columns dari template */
.rurent-preview-grid {
    /* Tidak override grid-template-columns — itu dari inline style */
    gap: 16px;
}

/* Responsive: di tablet pakai 2-3 kolom, mobile pakai 2 kolom */
@media (max-width: 1024px) {
    .rurent-preview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 768px) {
    .rurent-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }
}
@media (max-width: 480px) {
    .rurent-preview-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Empty state — hanya muncul saat user pilih filter yang tidak match */
.rurent-preview-empty {
    margin-top: 24px;
    padding: 32px 20px;
}
.rurent-preview-reset {
    background: var(--rr-teal, #305057);
    color: #fff;
    border: 0;
    border-radius: var(--rr-r-pill, 980px);
    padding: 10px 22px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background .15s ease;
}
.rurent-preview-reset:hover {
    background: var(--rr-teal-hover, #264349);
}

/* Quiz CTA banner — ensure visible */
.rurent-katalog-preview .quiz-cta-banner {
    margin-bottom: 16px;
}
/* ═══════════════════════════════════════════════════════════════
   Katalog Penuh — Display Score Badge
   ═══════════════════════════════════════════════════════════════ */

.rk2-card__score {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--rr-text, #1a1a1a);
    color: #fff;
    border-radius: 980px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.2px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    z-index: 2;
    line-height: 1.2;
    min-width: 28px;
    text-align: center;
}

.rk2-card__img { position: relative; }


/* ═══════════════════════════════════════════════════════════════
   Quiz Modal — REWRITE LENGKAP sesuai desain referensi
   Class hierarchy:
   .quiz-overlay > .quiz-modal > .quiz-header / .quiz-progress-wrap / .quiz-body / .quiz-nav
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   Quiz Modal — REWRITE LENGKAP sesuai desain referensi RURENT
   PENTING: Hapus dulu CSS quiz lama (jika ada) di rurent.css
   sebelum append CSS ini.
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay ───────────────────────────────────────────────────── */
.quiz-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 35, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: rrQuizFadeIn .25s ease;
}
@keyframes rrQuizFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal container ──────────────────────────────────────────── */
.quiz-modal {
    background: var(--rr-bg, #EBE5DD);
    border-radius: 16px;
    width: 100%;
    max-width: 580px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.30);
    font-family: var(--rr-font, 'Inter', system-ui, sans-serif);
    color: var(--rr-text, #1a1a1a);
    display: flex;
    flex-direction: column;
    animation: rrQuizSlideUp .3s ease;

    /* Hide scrollbar — Firefox */
    scrollbar-width: none;
    /* Hide scrollbar — IE/Edge */
    -ms-overflow-style: none;
}
/* Hide scrollbar — Chrome/Safari/Opera */
.quiz-modal::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
/* ── Header ───────────────────────────────────────────────────── */
.quiz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
}
.quiz-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.quiz-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rr-teal-2, #448888);
    line-height: 0;
}
.quiz-logo-text {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: 19px;
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    letter-spacing: -0.2px;
}
.quiz-close {
    background: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--rr-text-muted, #6b7c80);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
    padding: 0;
}
.quiz-close:hover {
    background: rgba(0,0,0,.06);
    color: var(--rr-text, #1a1a1a);
}

/* ── Progress bar — 3 segmen terpisah ─────────────────────────── */
.quiz-progress-wrap {
    display: flex;
    gap: 6px;
    padding: 0 24px;
    margin-bottom: 24px;
}
.quiz-progress-seg {
    flex: 1;
    height: 4px;
    background: rgba(48, 80, 87, 0.15);
    border-radius: 4px;
    transition: background .35s ease;
}
.quiz-progress-seg.active {
    background: var(--rr-teal-2, #448888);
}

/* ── Body ─────────────────────────────────────────────────────── */
.quiz-body {
    padding: 0 24px 16px;
    flex: 1;
}
.quiz-step {
    animation: rrQuizStepFade .3s ease;
}
@keyframes rrQuizStepFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.quiz-step-count {
    font-size: 13px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 0 0 6px;
    font-weight: 500;
}
.quiz-question {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: 26px;
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    margin: 0 0 6px;
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.quiz-subtitle {
    font-size: 14px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 0 0 22px;
}

/* ── Options — vertical card list ─────────────────────────────── */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.quiz-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    text-align: left;
    background: var(--rr-surface-2, #f4efe8);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all .18s ease;
    font-family: inherit;
    color: inherit;
}
.quiz-option:hover {
    background: rgba(68, 136, 136, 0.05);
    border-color: var(--rr-teal-2, #448888);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(48,80,87,.08);
}
.quiz-option:hover .quiz-option-label {
    color: var(--rr-teal-2, #448888);
}
.quiz-option.selected {
    background: rgba(68, 136, 136, 0.05);
    border-color: var(--rr-teal-2, #448888);
    box-shadow: 0 4px 14px rgba(68,136,136,.20);
}
.quiz-option.selected .quiz-option-label {
    color: var(--rr-teal-2, #448888);
}
.quiz-option-label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    transition: color .15s ease;
    line-height: 1.3;
}
.quiz-option-desc {
    display: block;
    font-size: 13.5px;
    color: var(--rr-text-muted, #6b7c80);
    line-height: 1.4;
}

/* ── Loading spinner ──────────────────────────────────────────── */
.quiz-loading {
    text-align: center;
    padding: 40px 20px;
}
.quiz-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border: 3px solid rgba(48,80,87,.15);
    border-top-color: var(--rr-teal-2, #448888);
    border-radius: 50%;
    animation: rrSpin .8s linear infinite;
}
@keyframes rrSpin {
    to { transform: rotate(360deg); }
}
.quiz-loading p {
    font-size: 14px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 0;
}

/* ── Results header ───────────────────────────────────────────── */
.quiz-results-header {
    margin-bottom: 18px;
}
.quiz-results-header h2 {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--rr-text, #1a1a1a);
    letter-spacing: -0.2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.quiz-results-header h2 .quiz-logo-icon {
    color: var(--rr-teal-2, #448888);
}
.quiz-results-header p {
    font-size: 13.5px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 0;
}

/* ── Result cards — Detail + Cart buttons ─────────────────────── */
.quiz-result-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.quiz-result-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 14px;
    align-items: center;
    background: #f4efe8;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 12px 14px;
    transition: all .15s ease;
}
.quiz-result-card.top-pick {
    border-color: var(--rr-teal-2, #448888);
    background: rgba(68, 136, 136, 0.05);
    box-shadow: 0 4px 14px rgba(68,136,136,.15);
}
.quiz-result-card .result-image {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--rr-surface-3, #ede7df);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.quiz-result-card .result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.quiz-result-card .result-image-placeholder {
    color: var(--rr-text-muted, #6b7c80);
}
.quiz-result-card .result-info {
    min-width: 0;
    overflow: hidden;
}
.quiz-result-card .result-brand {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--rr-teal-2, #448888);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 2px;
}
.quiz-result-card .result-name {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--rr-text, #1a1a1a);
    letter-spacing: -0.2px;
    line-height: 1.2;
}
.quiz-result-card .result-specs-text {
    font-size: 12.5px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 0 0 4px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quiz-result-card .result-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.quiz-result-card .result-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--rr-teal-2, #448888);
    letter-spacing: -0.3px;
}
.quiz-result-card .result-price-period {
    font-size: 11.5px;
    color: var(--rr-text-muted, #6b7c80);
}

/* Result actions: Detail + Cart sebelahan */
.quiz-result-card .result-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    flex-shrink: 0;
}
.quiz-result-card .result-btn-detail,
.quiz-result-card .result-btn-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 980px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
    border: 1.5px solid transparent;
    white-space: nowrap;
    line-height: 1;
    font-family: inherit;
    min-width: 72px;
}
.quiz-result-card .result-btn-detail {
    background: transparent;
    color: var(--rr-teal, #305057);
    border-color: var(--rr-teal, #305057);
}
.quiz-result-card .result-btn-detail:hover {
    background: var(--rr-teal, #305057);
    color: #f4efe8;
}
.quiz-result-card .result-btn-cart {
    background: var(--rr-teal, #305057);
    color: #f4efe8;
    border-color: var(--rr-teal, #305057);
}
.quiz-result-card .result-btn-cart:hover:not(:disabled) {
    background: var(--rr-teal-hover, #264349);
    border-color: var(--rr-teal-hover, #264349);
}
.quiz-result-card .result-btn-cart:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.quiz-result-card.result-unavailable {
    opacity: .65;
}
.quiz-result-card .result-unavailable-tag {
    font-size: 11px;
    color: var(--rr-danger, #ff3b30);
    text-align: center;
    margin-top: 2px;
}

/* ── Results footer (Ulangi Quiz + Lihat Semua Raket) ─────────── */
.quiz-results-footer {
    display: flex;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(48,80,87,.10);
}
.quiz-btn-secondary,
.quiz-btn-primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border-radius: 980px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    border: 1.5px solid transparent;
    font-family: inherit;
    line-height: 1;
}
.quiz-btn-secondary {
    background: transparent;
    color: var(--rr-text-2, #305057);
    border-color: var(--rr-border-strong, #c8bfb3);
}
.quiz-btn-secondary:hover {
    background: var(--rr-surface-3, #f4efe8);
    border-color: var(--rr-text-muted, #6b7c80);
}
.quiz-btn-primary {
    background: var(--rr-teal, #305057);
    color: #fff;
    border-color: var(--rr-teal, #305057);
}
.quiz-btn-primary:hover {
    background: var(--rr-teal-hover, #264349);
    border-color: var(--rr-teal-hover, #264349);
}

/* ── No results state ─────────────────────────────────────────── */
.quiz-empty-state {
    text-align: center;
    padding: 24px 16px 8px;
}
.quiz-empty-icon {
    color: var(--rr-text-muted, #6b7c80);
    margin-bottom: 12px;
}
.quiz-empty-state h3 {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--rr-text, #1a1a1a);
}
.quiz-empty-state p {
    font-size: 13.5px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 0 0 20px;
}
.quiz-empty-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ── Nav (Kembali button) ─────────────────────────────────────── */
.quiz-nav {
    display: flex;
    align-items: center;
    padding: 14px 24px 22px;
}
.quiz-back-btn {
    background: transparent;
    border: 0;
    color: var(--rr-text-muted, #6b7c80);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background .15s ease, color .15s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.quiz-back-btn:hover {
    background: rgba(0,0,0,.05);
    color: var(--rr-text, #1a1a1a);
}

/* ═══════════════════════════════════════════════════════════════
   Responsive — Mobile bottom sheet
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .quiz-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .quiz-modal {
        max-width: 100%;
        max-height: 96vh;
        border-radius: 16px 16px 0 0;
    }
    .quiz-header {
        padding: 16px 18px 12px;
    }
    .quiz-logo-text { font-size: 17px; }
    .quiz-progress-wrap { padding: 0 18px; margin-bottom: 18px; }
    .quiz-body { padding: 0 18px 12px; }

    .quiz-question { font-size: 22px; }
    .quiz-option { padding: 14px 16px; }
    .quiz-option-label { font-size: 15px; }
    .quiz-option-desc { font-size: 13px; }

    /* Result card: image kiri, info & actions stack ke kanan */
    .quiz-result-card {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
        gap: 12px;
        padding: 12px;
    }
    .quiz-result-card .result-image { width: 56px; height: 56px; }
    .quiz-result-card .result-actions {
        grid-column: 1 / -1;
        flex-direction: row;
    }
    .quiz-result-card .result-btn-detail,
    .quiz-result-card .result-btn-cart {
        flex: 1;
    }

    .quiz-results-footer {
        flex-direction: column;
    }

    .quiz-nav { padding: 12px 18px 18px; }
}
/* ═══════════════════════════════════════════════════════════════
   Katalog Penuh — Responsive grid (mobile auto 2 kolom)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .rurent-katalog--v2 .rk2-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 768px) {
    .rurent-katalog--v2 .rk2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }
    .rurent-katalog--v2 .rk2-header {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 480px) {
    .rurent-katalog--v2 .rk2-grid {
        grid-template-columns: 1fr !important;
    }
}
/* ═══════════════════════════════════════════════════════════════
   Katalog Preview — Section override (homepage version)
   Tambahkan ke bagian akhir rurent-core/assets/css/rurent.css
   ═══════════════════════════════════════════════════════════════ */

/* Container preview — padding lebih kompak dari katalog penuh */
.rurent-katalog-preview {
    padding: 0;
    max-width: 100%;
}

/* Title size sedikit lebih kecil dari katalog penuh */
.rurent-katalog-preview .rk2-title {
    font-size: clamp(22px, 3vw, 32px);
}
.rurent-katalog-preview .rk2-sub {
    font-size: 13.5px;
}

/* Pastikan header actions sebelahan, wrap di mobile */
.rurent-katalog-preview .rk2-header {
    align-items: center;
    margin-bottom: 18px;
}
.rurent-katalog-preview .rk2-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Tombol di header — pastikan icon sejajar text */
.rurent-katalog-preview .rk2-btn {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.rurent-katalog-preview .rk2-btn svg {
    flex-shrink: 0;
}

/* No results state */
.rurent-katalog-preview .rk2-no-results {
    text-align: center;
    padding: 32px 20px;
    background: var(--rr-surface, #fff);
    border: 1px solid var(--rr-border, #ddd6cc);
    border-radius: var(--rr-r-lg, 16px);
    margin-top: 20px;
    color: var(--rr-text-muted, #6b7c80);
}
.rurent-katalog-preview .rk2-no-results p {
    margin: 0 0 14px;
    font-size: 14.5px;
}
.rurent-katalog-preview .rk2-no-results button {
    background: var(--rr-teal, #305057);
    color: #fff;
    border: 0;
    border-radius: var(--rr-r-pill, 980px);
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.rurent-katalog-preview .rk2-no-results button:hover {
    background: var(--rr-teal-hover, #264349);
}

/* Responsive — mobile auto 2 kolom */
@media (max-width: 1024px) {
    .rurent-katalog-preview .rk2-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 768px) {
    .rurent-katalog-preview .rk2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }
    .rurent-katalog-preview .rk2-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .rurent-katalog-preview .rk2-header-actions {
        width: 100%;
    }
    .rurent-katalog-preview .rk2-header-actions .rk2-btn {
        flex: 1;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .rurent-katalog-preview .rk2-grid {
        grid-template-columns: 1fr !important;
    }
}/* ═══════════════════════════════════════════════════════════════
   USP Widget — Rata Tengah, Icon Bulatan Berwarna
   Tambahkan ke bagian akhir rurent-core/assets/css/rurent.css
   ═══════════════════════════════════════════════════════════════ */

.rr-usp-section {
    padding: 60px 20px;
    width: 100%;
}

.rr-usp-grid {
    display: grid;
    gap: 32px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Alignment per section ─────────────────────────────────────── */
.rr-usp-align-center .rr-usp-card {
    text-align: center;
    align-items: center;
}
.rr-usp-align-left .rr-usp-card {
    text-align: left;
    align-items: flex-start;
}
.rr-usp-align-right .rr-usp-card {
    text-align: right;
    align-items: flex-end;
}

/* ── Card ──────────────────────────────────────────────────────── */
.rr-usp-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
}

/* ── Icon box (rounded square berwarna) ────────────────────────── */
.rr-usp-icon {
    width: var(--rr-usp-box-size, 76px);
    height: var(--rr-usp-box-size, 76px);
    border-radius: var(--rr-usp-box-radius, 18px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .25s ease;
}


/* Inline SVG built-in icons */
.rr-usp-icon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rr-usp-icon-size, 40px);
    height: var(--rr-usp-icon-size, 40px);
    line-height: 0;
    color: inherit;
}
.rr-usp-icon-inline svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Uploaded SVG/img — pakai CSS mask supaya warnanya bisa di-set
   (cocok untuk SVG monochrome). Untuk PNG warna asli akan tampil. */
.rr-usp-icon-img {
    width: var(--rr-usp-icon-size, 40px);
    height: var(--rr-usp-icon-size, 40px);
    object-fit: contain;
}
/* Jika upload SVG monochrome, aktifkan mask agar warna ikut --rr-icon-color */
img.rr-usp-icon-img[src$=".svg"] {
    background: var(--rr-icon-color, currentColor);
    -webkit-mask: var(--rr-icon-mask, none);
    mask: var(--rr-icon-mask, none);
}

/* ── Title ─────────────────────────────────────────────────────── */
.rr-usp-title {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: var(--rr-usp-title-size, 18px);
    font-weight: 700;
    color: var(--rr-usp-title-color, #1a1a1a);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

/* ── Description ───────────────────────────────────────────────── */
.rr-usp-desc {
    font-size: var(--rr-usp-desc-size, 14px);
    color: var(--rr-usp-desc-color, #6b7c80);
    line-height: 1.6;
    margin: 0;
    max-width: 380px;
}
.rr-usp-align-center .rr-usp-desc { margin-left: auto; margin-right: auto; }
.rr-usp-align-right .rr-usp-desc  { margin-left: auto; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .rr-usp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 640px) {
    .rr-usp-section { padding: 40px 16px; }
    .rr-usp-grid {
        grid-template-columns: 1fr !important;
        gap: 28px;
    }
    .rr-usp-card { padding: 0; }
}
/* ════════════════════════════════════════════════════════════════
   RECOVERY BAR — Booking Tertunda (global, di bawah navbar)
   Desain: krem/beige, 2 baris teks kiri + badge kode, tombol kanan
   ════════════════════════════════════════════════════════════════ */
.rurent-recovery-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: #F5EDE0;
    border-bottom: 1px solid #E5D5C0;
    padding: 10px 24px;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
}
.rr-recovery-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1280px;
    margin: 0 auto;
}
/* Lingkaran icon oranye kecil */
.rr-recovery-icon {
    width: 26px; height: 26px; min-width: 26px;
    background: #E07A3A;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; line-height: 1;
}
/* Blok teks 2 baris — ambil sisa ruang */
.rr-recovery-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
/* Baris 1: judul + badge kode */
.rr-recovery-row1 {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rr-recovery-row1 strong {
    font-size: 13.5px; font-weight: 700; color: #1a1a1a; white-space: nowrap;
}
/* Badge pill kode booking */
.rr-recovery-code {
    display: inline-block;
    background: #E4DAD0; color: #5a4a3a;
    font-size: 11.5px; font-weight: 600;
    padding: 2px 9px; border-radius: 999px;
    letter-spacing: .3px; white-space: nowrap;
}
/* Baris 2: detail — nama · tanggal · qty · harga */
.rr-recovery-detail {
    font-size: 12.5px; color: #6b5f55;
    display: flex; align-items: center; gap: 5px;
    flex-wrap: nowrap; overflow: hidden;
}
.rr-recovery-detail .rr-dot { color: #b8a898; font-size: 10px; }
.rr-recovery-detail .rr-price { color: #305057; font-weight: 700; }
/* Tombol kanan */
.rr-recovery-actions {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.rr-recovery-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 600;
    text-decoration: none; cursor: pointer;
    border: none; line-height: 1.3; white-space: nowrap;
    transition: opacity .15s;
}
.rr-recovery-btn:hover { opacity: .85; }
/* Lanjutkan Pembayaran — solid teal */
.rr-recovery-btn--pay { background: #305057; color: #fff; }
/* WhatsApp — outline teal */
.rr-recovery-btn--wa {
    background: transparent; color: #305057;
    border: 1.5px solid #305057; padding: 5.5px 14px;
}
/* × Batalkan — teks plain */
.rr-recovery-btn--cancel {
    background: transparent; color: #7a6e66;
    border: none; padding: 6px 2px;
    font-size: 13px; font-weight: 500;
}
.rr-recovery-btn--cancel:hover { color: #333; opacity: 1; }

body.has-recovery-bar { padding-top: 52px !important; }

@media (max-width: 768px) {
    .rurent-recovery-bar { padding: 10px 16px; }
    .rr-recovery-detail { display: none; }
    .rr-recovery-btn--wa { display: none !important; }
    .rr-recovery-btn--pay { padding: 7px 13px; font-size: 12px; }
}
@media (max-width: 480px) {
    .rr-recovery-code { display: none; }
}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   RURENT Frontend — Apple-Clean Design System
   ═══════════════════════════════════════════════════════════════════
   Scope: semua kelas yang dipakai di templates/*.php
   Style: Apple-clean (warm grays, subtle borders, soft shadows,
          pill buttons, generous whitespace, SF Pro typography)

   Index:
     1. Design tokens (CSS variables)
     2. Base typography & wrappers
     3. Buttons, inputs, badges, alerts
     4. Lucide icon helper
     5. Katalog & katalog-preview (product cards)
     6. Sticky cart bar
     7. Cart page
     8. Checkout (Step 1 + summary)
     9. KTP upload
    10. Step indicator
    11. Payment page (Step 3)
    12. TnC page
    13. Confirmation page
    14. Product detail page
    15. Quiz modal
    16. No-results / empty states
    17. Responsive breakpoints
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Design tokens ─────────────────────────────────────────── */
:root {
    /* Backgrounds — RURENT warm palette */
    --rr-bg:           #EBE5DD;
    --rr-surface:      #ffffff;
    --rr-surface-2:    #f4efe8;
    --rr-surface-3:    #ede7df;

    /* Borders */
    --rr-border:       #ddd6cc;
    --rr-border-strong:#c8bfb3;

    /* Text */
    --rr-text:         #1a1a1a;
    --rr-text-2:       #305057;
    --rr-text-muted:   #6b7c80;
    --rr-text-sub:     #a0abad;

    /* Brand — orange primary, teal secondary */
    --rr-primary:      #BF6616;
    --rr-primary-hover:#a8570f;
    --rr-primary-light:#f7ede1;

    /* Teal accent */
    --rr-teal:         #305057;
    --rr-teal-hover:   #264349;
    --rr-teal-light:   #e0eaec;
    --rr-teal-2:       #448888;
    --rr-teal-2-hover: #387474;

    /* Bar stats colors */
    --rr-bar-power:    var(--rr-teal-2);
    --rr-bar-control:  var(--rr-teal-2);
    --rr-bar-sweet:    var(--rr-teal-2);

    /* WhatsApp */
    --rr-wa:           #25d366;
    --rr-wa-hover:     #1fb955;

    /* Status */
    --rr-success:      #30d158;
    --rr-success-bg:   #e8faf0;
    --rr-success-text: #1a7a3a;
    --rr-warning:      #ff9f0a;
    --rr-warning-bg:   #fff4e0;
    --rr-warning-text: #c77a00;
    --rr-danger:       #ff3b30;
    --rr-danger-bg:    #ffebea;
    --rr-info:         #305057;
    --rr-info-bg:      #e0eaec;

    /* Radius */
    --rr-r-xs:   6px;
    --rr-r-sm:   8px;
    --rr-r-md:   12px;
    --rr-r-lg:   16px;
    --rr-r-xl:   20px;
    --rr-r-pill: 980px;

    /* Shadows */
    --rr-shadow-sm: 0 1px 2px rgba(48,80,87,.06);
    --rr-shadow:    0 1px 4px rgba(48,80,87,.08), 0 4px 16px rgba(48,80,87,.05);
    --rr-shadow-md: 0 2px 8px rgba(48,80,87,.10), 0 8px 32px rgba(48,80,87,.07);

    /* Type — RURENT: serif display + clean sans */
    --rr-font:         'Inter', system-ui, -apple-system, sans-serif;
    --rr-font-display: 'Fraunces', Georgia, serif;
}

/* ─── 2. Base wrappers ─────────────────────────────────────────── */
.rurent-katalog,
.rurent-katalog-preview,
.rurent-cart-page,
.rurent-checkout,
.rurent-payment-method,
.rurent-tnc,
.rurent-confirmation,
.rurent-product-page {
    font-family: var(--rr-font);
    color: var(--rr-text);
    line-height: 1.5;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 48px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rurent-katalog-preview {
    padding: 12px 0 24px;
}

.rurent-katalog *,
.rurent-katalog-preview *,
.rurent-cart-page *,
.rurent-checkout *,
.rurent-payment-method *,
.rurent-tnc *,
.rurent-confirmation *,
.rurent-product-page * {
    box-sizing: border-box;
}

/* Headings inside RURENT scopes */
.rurent-katalog h2,
.rurent-katalog-preview h2,
.rurent-cart-page h2,
.rurent-checkout h2,
.rurent-payment-method h2,
.rurent-confirmation h2 {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--rr-font-display);
    letter-spacing: -0.3px;
    margin: 0 0 8px;
    color: var(--rr-text);
}
.rurent-katalog h3,
.rurent-cart-page h3,
.rurent-checkout h3,
.rurent-payment-method h3,
.rurent-tnc h3,
.rurent-confirmation h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--rr-text);
    letter-spacing: -0.2px;
}

/* ─── 3. Buttons, inputs, alerts ───────────────────────────────── */
.rurent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--rr-r-pill);
    padding: 11px 22px;
    font-family: var(--rr-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: all .18s ease;
    user-select: none;
}
.rurent-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
}
.rurent-btn:focus-visible {
    outline: 2px solid var(--rr-teal, #305057);
    outline-offset: 2px;
}

.rurent-btn-primary {
    background: var(--rr-primary);
    color: #fff;
}
.rurent-btn-primary:hover:not(:disabled) {
    background: var(--rr-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(191,102,22,.25);
}

.rurent-btn-outline {
    background: transparent;
    color: var(--rr-text);
    border-color: var(--rr-border-strong);
}
.rurent-btn-outline:hover:not(:disabled) {
    background: var(--rr-surface-3);
    border-color: var(--rr-text-muted);
}

.rurent-btn-whatsapp {
    background: var(--rr-wa);
    color: #fff;
}
.rurent-btn-whatsapp:hover:not(:disabled) {
    background: var(--rr-wa-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37,211,102,.30);
}

.btn-full {
    width: 100%;
}

/* Inputs */
.rurent-input,
.rurent-select {
    display: block;
    width: 100%;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border-strong);
    border-radius: var(--rr-r-sm);
    padding: 11px 14px;
    font-family: var(--rr-font);
    font-size: 15px;
    color: var(--rr-text);
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
    -webkit-appearance: none;
}
.rurent-input::placeholder { color: var(--rr-text-sub); }
.rurent-input:focus,
.rurent-select:focus {
    outline: none;
    border-color: var(--rr-teal, #305057);
    box-shadow: 0 0 0 3px rgba(68,136,136,.20);
}

.rurent-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-group {
    margin-bottom: 18px;
}
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-text-2);
    margin-bottom: 6px;
    letter-spacing: -0.1px;
}
.form-group label .req { color: var(--rr-danger); margin-left: 2px; }
.form-group small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--rr-text-muted);
    margin-top: 6px;
}
.form-group small .rr-icon svg { width: 13px; height: 13px; }

/* Badges */
.rurent-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--rr-r-pill);
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.rurent-badge.pending   { background: var(--rr-warning-bg); color: var(--rr-warning-text); }
.rurent-badge.paid      { background: var(--rr-success-bg); color: var(--rr-success-text); }
.rurent-badge.completed { background: var(--rr-teal-light, #e0eaec);    color: var(--rr-teal, #305057); }
.rurent-badge.cancelled { background: var(--rr-danger-bg);  color: var(--rr-danger); }

/* Alerts */
.rurent-alert {
    border-radius: var(--rr-r-md);
    padding: 12px 14px;
    font-size: 14px;
    margin-top: 12px;
    border: 1px solid transparent;
}
.rurent-alert-error {
    background: var(--rr-danger-bg);
    color: #b8261e;
    border-color: rgba(255,59,48,.3);
}
.rurent-alert-success {
    background: var(--rr-success-bg);
    color: var(--rr-success-text);
    border-color: rgba(48,209,88,.3);
}
.rurent-loading {
    text-align: center;
    color: var(--rr-text-muted);
    padding: 12px;
    font-size: 14px;
}

/* ─── 4. Lucide icon helper ───────────────────────────────────── */
.rr-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.rr-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

/* ─── 5. Product grid + cards ─────────────────────────────────── */
.rurent-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.rurent-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.rurent-product-card {
    background: var(--rr-surface);
    border-radius: var(--rr-r-lg);
    border: 1px solid var(--rr-border);
    box-shadow: var(--rr-shadow-sm);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex;
    flex-direction: column;
}
.rurent-product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--rr-shadow-md);
    border-color: var(--rr-border-strong);
}

.product-img-link,
.product-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.product-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--rr-surface-3);
    overflow: hidden;
}
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-img-placeholder,
.product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ececf0, #f7f7fa);
    color: var(--rr-text-sub);
}
.product-img-placeholder .rr-icon svg,
.product-image-placeholder .rr-icon svg {
    width: 48px;
    height: 48px;
}

.card-score-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--rr-text);
    color: #fff;
    border-radius: var(--rr-r-pill);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.availability-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--rr-r-pill);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rr-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rr-success);
}
.availability-badge.unavailable .badge-dot { background: var(--rr-danger); }
.availability-badge.unavailable .badge-available { display: none; }
.availability-badge:not(.unavailable) .badge-unavailable { display: none; }

.product-info {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.spec-tag {
    font-size: 11px;
    font-weight: 500;
    color: var(--rr-text-muted);
    background: var(--rr-surface-3);
    border-radius: var(--rr-r-xs);
    padding: 3px 8px;
    letter-spacing: 0.1px;
}
.product-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--rr-text);
}
.product-name a {
    color: inherit;
    text-decoration: none;
}
.product-name a:hover { color: var(--rr-teal, #305057); }

.card-rating-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card-bar-row {
    display: grid;
    grid-template-columns: 56px 1fr 30px;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
}
.card-bar-label { color: var(--rr-text-muted); font-weight: 500; }
.card-bar-track {
    height: 4px;
    background: var(--rr-surface-3);
    border-radius: 4px;
    overflow: hidden;
}
.card-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .3s ease;
}
.card-bar-val { text-align: right; color: var(--rr-text-2); font-weight: 600; }

.product-card-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--rr-border);
}
.product-price-wrap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}
.product-price,
.product-pricing .product-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--rr-text);
    letter-spacing: -0.3px;
}
.product-price-period,
.price-period {
    font-size: 12px;
    color: var(--rr-text-muted);
}
.product-deposit-hint {
    width: 100%;
    font-size: 11px;
    color: var(--rr-text-sub);
    margin-top: -2px;
}

.card-actions {
    display: flex;
    gap: 8px;
}
.card-btn-detail,
.card-btn-cart {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: var(--rr-r-pill);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s ease;
    border: 1px solid transparent;
    font-family: var(--rr-font);
}
.card-btn-detail {
    background: var(--rr-surface);
    color: var(--rr-text);
    border-color: var(--rr-border-strong);
}
.card-btn-detail:hover {
    background: var(--rr-surface-3);
    border-color: var(--rr-text-muted);
}
.card-btn-cart {
    background: var(--rr-teal, #305057);
    color: #fff;
}
.card-btn-cart:hover {
    background: var(--rr-teal-hover, #264349);
    transform: translateY(-1px);
}
.card-btn-cart .rr-icon svg { width: 14px; height: 14px; }

/* Quiz CTA banner (katalog full page) */
.quiz-cta-banner {
    background: linear-gradient(135deg, #f7ede1 0%, #f4efe8 100%);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.quiz-cta-content {
    display: flex;
    align-items: center;
    gap: 14px;
}
.quiz-cta-icon {
    font-size: 26px;
    line-height: 1;
}
.quiz-cta-content strong {
    display: block;
    font-size: 16px;
    color: var(--rr-text);
}
.quiz-cta-content span {
    font-size: 13.5px;
    color: var(--rr-text-muted);
}
.quiz-cta-btn {
    background: var(--rr-teal, #305057);
    color: #fff;
    border: none;
    border-radius: var(--rr-r-pill);
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s ease;
}
.quiz-cta-btn:hover {
    background: var(--rr-teal-hover, #264349);
    transform: translateY(-1px);
}

/* Filter bar */
.rurent-filter-bar {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: var(--rr-shadow-sm);
}
.rurent-filter-group { margin-bottom: 14px; }
.rurent-filter-group:last-child { margin-bottom: 0; }
.filter-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-text-2);
    margin-bottom: 8px;
}
.rurent-filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.rurent-date-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    align-items: center;
}
.date-chip {
    flex-shrink: 0;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border-strong);
    border-radius: var(--rr-r-md);
    padding: 8px 14px;
    cursor: pointer;
    transition: all .15s ease;
    text-align: center;
    min-width: 64px;
    font-family: var(--rr-font);
}
.date-chip:hover { background: var(--rr-surface-3); }
.date-chip.active {
    background: var(--rr-teal, #305057);
    border-color: var(--rr-teal, #305057);
    color: #fff;
}
.chip-day { display: block; font-size: 11px; opacity: .85; font-weight: 500; }
.chip-num { display: block; font-size: 17px; font-weight: 700; line-height: 1.1; letter-spacing: -0.3px; }
.chip-mon { display: block; font-size: 10px; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }
#custom-date {
    border: 1px solid var(--rr-border-strong);
    border-radius: var(--rr-r-md);
    padding: 8px 12px;
    font-size: 13px;
    background: var(--rr-surface);
    cursor: pointer;
    font-family: var(--rr-font);
}

.rurent-avail-bar {
    background: var(--rr-info-bg);
    border: 1px solid #c5dcf5;
    color: #0058b8;
    border-radius: var(--rr-r-md);
    padding: 10px 14px;
    font-size: 13.5px;
    margin-bottom: 16px;
}

/* Preview CTA */
.rurent-preview-cta {
    text-align: center;
    margin-top: 24px;
}

/* ─── 7. Cart page ────────────────────────────────────────────── */
/* (Sticky cart bar styles are in section 6 above)                */
.cart-empty {
    text-align: center;
    padding: 80px 20px;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
}
.cart-empty-icon {
    color: var(--rr-text-sub);
    margin-bottom: 16px;
}
.cart-empty-icon .rr-icon svg { width: 48px; height: 48px; }
.cart-empty h3 { font-size: 22px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.3px; }
.cart-empty p { color: var(--rr-text-muted); margin: 0 0 20px; font-size: 15px; }

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}

.cart-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
    padding: 24px;
}

.cart-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rr-border);
}
.cart-date-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--rr-text-2);
}
.cart-date-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--rr-text-muted);
}
.cart-date-label .rr-icon svg { width: 14px; height: 14px; }
.btn-text-link {
    background: transparent;
    border: 0;
    color: var(--rr-teal, #305057);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--rr-r-xs);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--rr-font);
    transition: background .15s ease;
}
.btn-text-link:hover { background: var(--rr-teal-light, #e0eaec); }
.btn-text-link .rr-icon svg { width: 13px; height: 13px; }

.cart-item {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rr-border);
    align-items: start;
}
.cart-item:last-of-type { border-bottom: 0; }

.cart-item-image {
    width: 84px;
    height: 84px;
    border-radius: var(--rr-r-sm);
    background: var(--rr-surface-3);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-item-image img {
    width: 84px !important;
    height: 84px !important;
    object-fit: cover;
    border-radius: var(--rr-r-sm);
}
.cart-item-icon {
    color: var(--rr-text-sub);
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rr-surface-3);
}
.cart-item-icon .rr-icon svg { width: 32px; height: 32px; }

.cart-item-info {
    min-width: 0;
}
.cart-item-name {
    margin: 0 0 4px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--rr-text);
    letter-spacing: -0.2px;
}
.cart-item-specs {
    font-size: 12.5px;
    color: var(--rr-text-muted);
    margin-bottom: 4px;
}
.cart-item-price-unit {
    font-size: 13px;
    color: var(--rr-text-2);
    font-weight: 500;
}

.cart-item-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 130px;
}

.qty-control {
    display: inline-flex;
    align-items: center;
    background: var(--rr-surface-3);
    border-radius: var(--rr-r-pill);
    padding: 2px;
}
.qty-btn {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--rr-text);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s ease;
    line-height: 1;
}
.qty-btn:hover { background: var(--rr-surface); }
.qty-input {
    width: 40px;
    text-align: center;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--rr-font);
    color: var(--rr-text);
    -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qty-input:focus { outline: none; }

.cart-item-subtotal {
    font-size: 15px;
    font-weight: 700;
    color: var(--rr-text);
    letter-spacing: -0.2px;
}
.btn-remove-item {
    background: transparent;
    border: 0;
    color: var(--rr-danger);
    font-size: 12.5px;
    cursor: pointer;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--rr-r-xs);
    font-family: var(--rr-font);
    transition: background .15s ease;
}
.btn-remove-item:hover { background: var(--rr-danger-bg); }
.btn-remove-item .rr-icon svg { width: 13px; height: 13px; }

.btn-add-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 10px 16px;
    background: transparent;
    color: var(--rr-teal, #305057);
    border: 1px dashed var(--rr-border-strong);
    border-radius: var(--rr-r-md);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s ease;
}
.btn-add-more:hover {
    background: var(--rr-teal-light, #e0eaec);
    border-color: var(--rr-teal, #305057);
}
.btn-add-more .rr-icon svg { width: 14px; height: 14px; }

/* Cart summary card */
.cart-summary-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
    padding: 22px;
    position: sticky;
    top: 20px;
}
#cart-summary-items .summary-row {
    color: var(--rr-text-2);
}
.summary-divider {
    height: 1px;
    background: var(--rr-border);
    margin: 12px 0;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: var(--rr-text-2);
}
.summary-row.total {
    border-top: 1px solid var(--rr-border);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 16px;
    color: var(--rr-text);
}
.summary-row small { color: var(--rr-text-sub); font-size: 11.5px; }
.deposit-note {
    font-size: 11.5px;
    color: var(--rr-text-muted);
    line-height: 1.5;
    margin: 12px 0 0;
}

/* ─── 8. Checkout layout ──────────────────────────────────────── */
.rurent-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
    margin-top: 28px;
}
.checkout-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
    padding: 28px;
}
.checkout-card-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0 0 4px;
}
.checkout-card-sub {
    font-size: 13.5px;
    color: var(--rr-text-muted);
    margin: 0 0 22px;
}
.rurent-form { display: block; }

/* Order summary panel */
.order-summary-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
    padding: 22px;
    position: sticky;
    top: 20px;
}
.summary-card-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
    letter-spacing: -0.2px;
}
.summary-date-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rr-teal-light, #e0eaec);
    color: var(--rr-teal, #305057);
    border-radius: var(--rr-r-pill);
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 16px;
}
.summary-date-tag .rr-icon svg { width: 13px; height: 13px; }

.summary-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.summary-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rr-border);
}
.summary-item-row:last-child { border-bottom: 0; }
.summary-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.summary-item-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--rr-r-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.summary-item-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--rr-r-sm);
    background: var(--rr-surface-3);
    color: var(--rr-text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.summary-item-icon .rr-icon svg { width: 22px; height: 22px; }
.summary-item-text strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rr-text);
    line-height: 1.3;
}
.summary-meta {
    font-size: 11.5px;
    color: var(--rr-text-muted);
    margin-top: 2px;
}
.summary-item-right {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rr-text);
    white-space: nowrap;
}

.summary-breakdown {
    border-top: 1px solid var(--rr-border);
    padding-top: 12px;
}

/* ─── 9. KTP upload area ──────────────────────────────────────── */
.ktp-upload-area {
    display: block;
    background: var(--rr-surface-2);
    border: 2px dashed var(--rr-border-strong);
    border-radius: var(--rr-r-md);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all .2s ease;
}
.ktp-upload-area:hover,
.ktp-upload-area.drag-over {
    background: var(--rr-teal-light, #e0eaec);
    border-color: var(--rr-teal, #305057);
}
.ktp-upload-area.has-file {
    background: var(--rr-surface);
    border-style: solid;
    border-color: var(--rr-success);
    padding: 16px;
    text-align: left;
}
.ktp-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ktp-icon { color: var(--rr-teal, #305057); }
.ktp-icon .rr-icon svg { width: 36px; height: 36px; }
.ktp-text { font-size: 14.5px; font-weight: 600; color: var(--rr-text); }
.ktp-sub { font-size: 12px; color: var(--rr-text-muted); }
.ktp-preview-wrap {
    position: relative;
}
.ktp-preview-wrap img {
    max-width: 100%;
    border-radius: var(--rr-r-sm);
    display: block;
}
.ktp-pdf-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--rr-surface-3);
    border-radius: var(--rr-r-sm);
    font-size: 13.5px;
    color: var(--rr-text-2);
    font-weight: 500;
}
.ktp-change-btn {
    margin-top: 12px;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border-strong);
    border-radius: var(--rr-r-pill);
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rr-text);
    cursor: pointer;
    font-family: var(--rr-font);
    transition: background .15s ease;
}
.ktp-change-btn:hover { background: var(--rr-surface-3); }

/* ─── 10. Step indicator ──────────────────────────────────────── */
.checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 24px;
    padding: 6px 0;
}
.checkout-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--rr-text-sub);
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}
.checkout-step span { white-space: nowrap; }
.step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rr-surface-3);
    color: var(--rr-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    transition: all .2s ease;
    flex-shrink: 0;
}
.checkout-step.active .step-circle {
    background: var(--rr-teal-2, #448888);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(68,136,136,.18);
}
.checkout-step.active {
    color: var(--rr-text);
    font-weight: 600;
}
.checkout-step.done .step-circle {
    background: var(--rr-teal-2);
    color: #fff;
    font-size: 0; /* hide number */
}
.checkout-step.done .step-circle .rr-icon svg { width: 14px; height: 14px; }
.checkout-step.done { color: var(--rr-text-2); }
.step-line {
    flex: 0 1 40px;
    min-width: 20px;
    height: 2px;
    background: var(--rr-border-strong);
    border-radius: 2px;
}
.step-line.active { background: var(--rr-teal-2); }

/* ─── 11. Payment page ────────────────────────────────────────── */
.payment-summary {
    text-align: center;
    margin-bottom: 28px;
}
.payment-summary-sub {
    font-size: 14.5px;
    color: var(--rr-text-muted);
    margin: 0 0 20px;
}
.booking-summary-mini {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
    padding: 20px 24px;
    text-align: left;
    max-width: 480px;
    margin: 0 auto;
}
.booking-date-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rr-teal-light, #e0eaec);
    color: var(--rr-teal, #305057);
    border-radius: var(--rr-r-pill);
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 12px;
}
.booking-date-tag .rr-icon svg { width: 13px; height: 13px; }
.payment-item-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--rr-text-2);
    border-bottom: 1px solid var(--rr-border);
}
.payment-item-row:last-of-type { border-bottom: 0; }
.payment-item-row.payment-grand {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--rr-border-strong);
    border-bottom: 0;
    font-size: 16px;
    color: var(--rr-text);
}
.booking-code-display {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--rr-text-muted);
    text-align: center;
}
.booking-code-display strong {
    color: var(--rr-text);
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.payment-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    max-width: 880px;
    margin: 0 auto;
}
.payment-option-card {
    background: var(--rr-surface);
    border: 1.5px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    padding: 22px;
    box-shadow: var(--rr-shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.payment-option-midtrans:hover {
    border-color: var(--rr-teal, #305057);
    box-shadow: 0 4px 16px rgba(191,102,22,.15);
    transform: translateY(-1px);
}
.payment-option-whatsapp:hover {
    border-color: var(--rr-wa);
    box-shadow: 0 4px 16px rgba(37,211,102,.12);
    transform: translateY(-1px);
}
.payment-option-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.payment-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--rr-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.payment-icon .rr-icon svg { width: 22px; height: 22px; }
.payment-icon-midtrans { background: var(--rr-teal-light, #e0eaec); color: var(--rr-teal, #305057); }
.payment-icon-whatsapp { background: #d6f5e0; color: #1f8a3a; }
.payment-option-info { flex: 1; min-width: 180px; }
.payment-option-info h3 { margin: 0 0 2px; font-size: 16px; font-weight: 600; }
.payment-option-info p { margin: 0; font-size: 12.5px; color: var(--rr-text-muted); line-height: 1.45; }

.payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--rr-r-pill);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--rr-warning-bg);
    color: var(--rr-warning-text);
    align-self: flex-start;
}
.payment-badge.recommended .rr-icon svg { width: 11px; height: 11px; }

.payment-option-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.payment-option-perks li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--rr-text-2);
}
.payment-option-perks li .rr-icon { color: var(--rr-success); }
.payment-option-perks li .rr-icon svg { width: 14px; height: 14px; }

.wa-message-preview {
    background: var(--rr-surface-3);
    border-radius: var(--rr-r-sm);
    padding: 12px;
    border: 1px solid var(--rr-border);
}
.wa-preview-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--rr-text-muted);
    margin-bottom: 4px;
}
.wa-message-preview code {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--rr-text-2);
    background: transparent;
    line-height: 1.55;
    word-wrap: break-word;
}

/* ─── 12. TnC page ────────────────────────────────────────────── */
.rurent-tnc {
    max-width: 680px;
}
.tnc-page-title {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0 0 8px;
    color: var(--rr-text);
}
.tnc-page-title em {
    font-style: italic;
    color: var(--rr-teal-2);
}
.tnc-title-italic {
    font-style: italic;
}
.tnc-subtitle {
    display: none;
}
.tnc-content {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: 20px;
    box-shadow: var(--rr-shadow-sm);
    padding: 32px 36px;
    margin-bottom: 20px;
}
.tnc-section {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--rr-border);
}
.tnc-content h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--rr-text);
    letter-spacing: -0.2px;
}
.tnc-content p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--rr-text-2);
    margin: 0 0 10px;
}
.tnc-content p:last-child { margin-bottom: 0; }
.tnc-content ul, .tnc-content ol {
    padding-left: 22px;
    margin: 8px 0 12px;
}
.tnc-content li {
    font-size: 14px;
    line-height: 1.65;
    color: var(--rr-text-2);
    margin-bottom: 4px;
}
.tnc-accept-section {
    background: var(--rr-surface-2, #f0ece8);
    border-radius: 16px;
    padding: 20px 24px;
    margin-top: 8px;
}
.tnc-accept-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.tnc-checkbox-label {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}
.tnc-checkbox-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--rr-border, #ddd);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    cursor: pointer;
}
.tnc-checkbox-icon.checked {
    background: var(--rr-teal, #305057);
    border-color: var(--rr-teal, #305057);
    color: #fff;
}
.tnc-checkbox-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tnc-checkbox-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rr-text-1, #1a1a1a);
    line-height: 1.4;
}
.tnc-checkbox-sub {
    font-size: 12.5px;
    color: var(--rr-text-muted, #888);
    line-height: 1.4;
}
.tnc-checkbox-label input[type="checkbox"] {
    display: none;
}
.tnc-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.rurent-btn-ghost {
    background: transparent;
    border: none;
    color: var(--rr-text-2, #555);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 99px;
    transition: background 0.15s;
}
.rurent-btn-ghost:hover {
    background: rgba(0,0,0,0.06);
}
.rurent-btn-pill {
    border-radius: 99px !important;
    padding: 10px 28px !important;
}
.tnc-standalone-cta {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

/* ─── 13. Confirmation page ──────────────────────────────────── */
.rurent-confirmation { max-width: 720px; }
.confirmation-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow);
    padding: 32px 28px;
    text-align: center;
}
.confirmation-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 14px;
}
.confirmation-card h2 {
    text-align: center;
    margin-bottom: 6px;
}
.confirmation-card > p {
    color: var(--rr-text-muted);
    font-size: 14.5px;
    margin: 0 0 22px;
}
.confirmation-details {
    background: var(--rr-surface-2);
    border-radius: var(--rr-r-md);
    padding: 14px 18px;
    text-align: left;
    margin-bottom: 18px;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--rr-border);
    font-size: 13.5px;
}
.detail-row:last-child { border-bottom: 0; }
.detail-key { color: var(--rr-text-muted); }
.detail-val { font-weight: 600; color: var(--rr-text); }
.detail-val.booking-code {
    font-family: ui-monospace, SFMono-Regular, monospace;
    letter-spacing: 0.5px;
    color: var(--rr-teal, #305057);
}
.confirmation-items {
    text-align: left;
    margin-bottom: 20px;
}
.confirmation-items h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--rr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.confirmation-item-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid var(--rr-border);
    font-size: 13.5px;
    color: var(--rr-text-2);
}
.confirmation-item-row.deposit-row { color: var(--rr-text-muted); font-style: italic; }
.confirmation-item-row.grand-row {
    border-top: 1px solid var(--rr-border-strong);
    border-bottom: 0;
    padding-top: 10px;
    margin-top: 4px;
    font-size: 15px;
    color: var(--rr-text);
}
.confirmation-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.confirmation-note {
    font-size: 12.5px;
    color: var(--rr-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ─── 14. Product detail page ────────────────────────────────── */
.rurent-product-page { max-width: 1100px; }

.product-breadcrumb {
    margin-bottom: 20px;
}
.product-breadcrumb a {
    font-size: 13.5px;
    color: var(--rr-text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color .2s;
}
.product-breadcrumb a:hover { color: var(--rr-teal); }

.rurent-product-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%) !important;
    gap: 40px;
    align-items: start;
    width: 100%;
}

/* ── Left column ── */
.product-page-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 24px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.product-page-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: var(--rr-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-page-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-img-placeholder-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 320px;
}
.product-score-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--rr-text);
    color: #fff;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.product-radar-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: 16px;
    padding: 18px 20px;
}
.product-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--rr-text-muted);
    margin: 0 0 12px;
}
.radar-wrap {
    display: flex;
    justify-content: center;
}
.radar-wrap canvas {
    max-width: 100%;
    height: auto;
}

/* ── Right column ── */
.product-page-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.product-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.badge-level,
.badge-shape,
.badge-style {
    display: inline-block;
    background: var(--rr-teal-light, #e0eaec);
    color: var(--rr-teal, #305057);
    border-radius: var(--rr-r-pill);
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
}

.product-page-name {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.6px;
    line-height: 1.15;
    margin: 0 0 14px;
    color: var(--rr-text);
}

/* spec pills row */
.product-spec-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.spec-pill-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rr-surface-3);
    border-radius: 8px;
    padding: 6px 12px;
}
.spec-pill-key {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rr-text-muted);
    font-weight: 600;
}
.spec-pill-key::after { content: ':'; }
.spec-pill-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--rr-text);
}

/* description */
.product-description {
    font-size: 14px;
    line-height: 1.65;
    color: var(--rr-text-sub);
    margin: 0 0 18px;
}

/* rating bars */
.product-ratings-section {
    margin-bottom: 20px;
}
.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}
.rating-bar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 160px;
    flex-shrink: 0;
}
.rating-bar-name {
    font-size: 12.5px;
    color: var(--rr-text-muted);
    font-weight: 500;
}
.rating-bar-val {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rr-text-2);
}
.rating-bar-track {
    flex: 1;
    height: 5px;
    background: var(--rr-surface-3);
    border-radius: 99px;
    overflow: hidden;
}
.rating-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .4s ease;
    background: var(--rr-teal-2);
}

/* materials */
.product-materials-section {
    margin-bottom: 20px;
}
.material-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rr-border);
    font-size: 13px;
}
.material-item:last-child { border-bottom: 0; }
.material-icon { color: var(--rr-teal); flex-shrink: 0; }
.material-info { display: flex; flex-direction: column; flex: 1; }
.material-type {
    font-size: 10px;
    color: var(--rr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.material-val { font-weight: 600; color: var(--rr-text); font-size: 13.5px; }

/* rec note */
.product-rec-note {
    background: rgba(68, 136, 136, 0.08);
    color: var(--rr-teal, #305057);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 20px;
}

.product-divider {
    height: 1px;
    background: var(--rr-border);
    margin: 4px 0 20px;
}

/* ── Booking form ── */
.rurent-booking-form {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: 18px;
    padding: 24px;
}
.booking-form-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 18px;
    color: var(--rr-text);
}

/* date chips inside booking form */
.booking-date-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 4px;
}
.booking-date-chips::-webkit-scrollbar { display: none; }
.booking-date-chip {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 99px;
    border: 1.5px solid var(--rr-border);
    background: var(--rr-surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--rr-text-muted);
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
}
.booking-date-chip.active,
.booking-date-chip:hover {
    background: var(--rr-teal);
    border-color: var(--rr-teal);
    color: #fff;
}

.availability-status {
    font-size: 12.5px;
    color: var(--rr-text-muted);
    margin-top: 6px;
    min-height: 18px;
}
.availability-status.available { color: var(--rr-success); }
.availability-status.unavailable { color: var(--rr-danger); }

/* price summary */
.rurent-price-summary {
    background: var(--rr-surface-2);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    color: var(--rr-text-sub);
}
.price-row small { font-size: 11px; color: var(--rr-text-muted); }
.deposit-row { color: var(--rr-text-muted); }
.total-row {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--rr-border);
    font-size: 15px;
    color: var(--rr-text);
}
.total-row strong { color: var(--rr-teal-2); font-size: 17px; }

/* cta */
.product-cta-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.btn-full { width: 100%; text-align: center; justify-content: center; }

/* ─── 14b. Booking form — pickup time, extra hours, pills ────── */

/* btn-add-to-cart uses teal-2 */
#btn-add-to-cart {
    background: var(--rr-teal-2) !important;
    color: #fff !important;
    border-color: #2d7a4f !important;
}
#btn-add-to-cart:hover:not(:disabled) {
    background: #246040 !important;
    border-color: #246040 !important;
    box-shadow: 0 4px 14px rgba(45,122,79,.30) !important;
    transform: translateY(-1px);
}

/* Hidden date input */
.rental-date-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* Form label */
.form-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-text);
    margin-bottom: 8px;
}
.form-label svg { flex-shrink: 0; color: var(--rr-text-muted); }
.form-required { color: var(--rr-danger); font-size: 12px; }
.form-field-error {
    font-size: 12px;
    color: var(--rr-danger);
    margin-top: 5px;
}

/* Date pills row */
.date-pills-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
}
.date-pills-row::-webkit-scrollbar { display: none; }

.date-pill {
    flex-shrink: 0;
    padding: 6px 13px;
    border-radius: 99px;
    border: 1.5px solid var(--rr-border);
    background: var(--rr-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rr-text-muted);
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
    line-height: 1;
}
.date-pill:hover {
    border-color: var(--rr-teal-2);
    color: var(--rr-teal-2);
}
.date-pill.active {
    background: var(--rr-teal-2);
    border-color: var(--rr-teal-2);
    color: #fff;
}
.date-pill-cal {
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.date-pill-cal svg { width: 14px; height: 14px; }

/* Pickup time select */
.rurent-select {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1.5px solid var(--rr-border-strong);
    border-radius: 10px;
    background: var(--rr-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7c80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    appearance: none;
    font-size: 13.5px;
    font-family: var(--rr-font);
    color: var(--rr-text);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    line-height: 1.4;
}
.rurent-select:focus {
    outline: none;
    border-color: var(--rr-teal-2);
    box-shadow: 0 0 0 3px rgba(68,136,136,.12);
}
.rurent-select option { color: var(--rr-text); background: var(--rr-surface); }

/* Extra hours label */
.extra-hours-price-label {
    font-weight: 400;
    color: var(--rr-text-muted);
    font-size: 12px;
    margin-left: 2px;
}

/* Extra hours pills */
.extra-hours-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.extra-pill {
    padding: 6px 14px;
    border-radius: 99px;
    border: 1.5px solid var(--rr-border);
    background: var(--rr-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rr-text-muted);
    cursor: pointer;
    transition: all .15s ease;
    line-height: 1;
    white-space: nowrap;
}
.extra-pill:hover {
    border-color: var(--rr-teal-2);
    color: var(--rr-teal-2);
}
.extra-pill.active {
    background: var(--rr-teal-2);
    border-color: var(--rr-teal-2);
    color: #fff;
}
.extra-pill-2hari {
    border-style: dashed;
    border-color: var(--rr-teal-2);
    color: var(--rr-teal-2);
}
.extra-pill-2hari:hover {
    background: var(--rr-teal-2);
    color: #fff;
    border-style: solid;
}
.extra-pill-2hari.active {
    background: var(--rr-teal-2);
    border-color: var(--rr-teal-2);
    border-style: solid;
    color: #fff;
}

/* Return time info */
.return-time-info {
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--rr-teal-2);
    font-weight: 500;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 4px;
}
.return-time-info strong {
    font-weight: 700;
    color: var(--rr-teal-2);
}

/* Quantity label + unit */
.qty-max-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--rr-text-muted);
    margin-left: 4px;
}
.qty-unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--rr-text-muted);
    margin-left: 6px;
    align-self: center;
}

/* Deposit badge */
.deposit-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 99px;
    background: var(--rr-teal-light);
    color: var(--rr-teal-2);
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: .01em;
}

/* Diskon row styling */
.price-row-discount {
    color: #2d7a4f;
    font-weight: 600;
}
.price-row-discount span:last-child { color: #2d7a4f; }

/* Booking form footer (durasi info) */
.booking-form-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}
.booking-footer-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(68, 136, 136, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
}
.booking-footer-item svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--rr-teal-2, #448888);
    width: 14px;
    height: 14px;
}
.booking-footer-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.booking-footer-item strong {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--rr-text);
    display: block;
}
.booking-footer-item span {
    font-size: 11px;
    color: var(--rr-text-muted);
    line-height: 1.4;
}

/* Form group spacing in booking form */
.rurent-booking-form .form-group {
    margin-bottom: 16px;
}
.rurent-booking-form .form-group:last-of-type {
    margin-bottom: 0;
}

/* Booking form qty row — inline dengan unit label */
.rurent-booking-form .qty-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rurent-booking-form .qty-control {
    display: inline-flex;
    align-items: center;
    background: var(--rr-surface-2, #f3f4f6);
    border: 1.5px solid var(--rr-border, #e5e7eb);
    border-radius: 99px;
    padding: 3px;
    gap: 0;
    width: auto;
}
.rurent-booking-form .qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
    background: var(--rr-surface, #fff);
    border: 1px solid var(--rr-border, #e5e7eb);
    color: var(--rr-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s;
    line-height: 1;
    flex-shrink: 0;
}
.rurent-booking-form .qty-btn:hover { background: var(--rr-surface-3); }
.rurent-booking-form .qty-input {
    width: 32px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    border: none;
    background: transparent;
    font-family: var(--rr-font);
    color: var(--rr-text);
    -moz-appearance: textfield;
}
.rurent-booking-form .qty-input::-webkit-outer-spin-button,
.rurent-booking-form .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.rurent-booking-form .qty-unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--rr-text-muted);
}

/* Cart: pickup time info row */
.cart-time-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--rr-text-muted);
    flex-wrap: wrap;
}
.cart-time-label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--rr-text-muted);
}
.cart-return-label {
    font-size: 12px;
    color: var(--rr-teal-2);
    font-weight: 500;
}

/* Cart extra hours summary row */
#cart-extra-hours-row {
    color: var(--rr-text-sub);
    font-size: 13.5px;
}

/* ─── Custom date calendar popup ───────────────────────────── */
.rr-cal-popup {
    position: relative;
    z-index: 10;
    background: var(--rr-surface);
    border: 1.5px solid var(--rr-border);
    border-radius: 14px;
    padding: 14px 16px 16px;
    box-shadow: 0 4px 20px rgba(48,80,87,.10);
    width: 100%;
    user-select: none;
    margin-top: 10px;
    box-sizing: border-box;
}

.rr-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.rr-cal-month-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--rr-text);
    text-align: center;
    flex: 1;
    letter-spacing: -.01em;
}
.rr-cal-nav {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--rr-text-muted);
    padding: 0;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.rr-cal-nav:hover {
    background: var(--rr-surface-2);
    color: var(--rr-text);
}

.rr-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: 4px;
}
.rr-cal-dow {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--rr-text-muted);
    padding: 0 0 6px;
    letter-spacing: .02em;
}

.rr-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.rr-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    border-radius: 50%;
    cursor: pointer;
    color: var(--rr-text);
    border: none;
    background: transparent;
    padding: 0;
    transition: background .12s, color .12s;
    line-height: 1;
    width: 100%;
}
.rr-cal-day:hover:not(.disabled):not(.active):not(.today) {
    background: var(--rr-teal-light);
    color: var(--rr-teal-2);
}
.rr-cal-day.today {
    background: var(--rr-primary);
    color: #fff;
    font-weight: 700;
}
.rr-cal-day.active {
    background: var(--rr-teal-2);
    color: #fff;
    font-weight: 700;
}
.rr-cal-day.today.active {
    background: var(--rr-teal-2);
}
.rr-cal-day.disabled {
    color: var(--rr-border-strong);
    cursor: default;
    pointer-events: none;
}
.rr-cal-day.empty {
    pointer-events: none;
    background: transparent;
}

/* ─── 15. Quiz modal ─────────────────────────────────────────── */
/* (Keeps existing structure; just polished) */
#rurent-quiz-modal {
    font-family: var(--rr-font);
}
.result-image-placeholder {
    background: var(--rr-surface-3);
    border-radius: var(--rr-r-md);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rr-text-sub);
}
.result-rank-badge {
    background: var(--rr-text);
    color: #fff;
    border-radius: var(--rr-r-pill);
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
}

/* ─── 16. Empty / no-results states ──────────────────────────── */
.rurent-no-results {
    text-align: center;
    padding: 60px 20px;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    color: var(--rr-text-muted);
}
.no-results-icon {
    font-size: 38px;
    margin-bottom: 10px;
    opacity: 0.5;
}
.rurent-no-results p {
    font-size: 14.5px;
    margin: 0 0 14px;
}
.rurent-no-results button {
    background: var(--rr-teal, #305057);
    color: #fff;
    border: 0;
    border-radius: var(--rr-r-pill);
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.rk2-cal-label {
    display: none !important;
}
/* ─── 17. Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .cart-layout,
    .rurent-checkout-layout,
    .rurent-product-layout {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .order-summary-card,
    .cart-summary-card {
        position: static;
    }
    .product-page-left {
        position: static;
        width: 100% !important;
    }
    .product-page-details {
        width: 100% !important;
    }
    .product-page-image {
        aspect-ratio: 4 / 3;
        max-height: 340px;
    }
    .quiz-cta-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .quiz-cta-btn { width: 100%; }
}

@media (max-width: 640px) {
    .product-page-name { font-size: 24px; }
    .rating-bar-meta { width: 130px; }
    .rurent-booking-form { padding: 18px 16px; }
}

@media (max-width: 640px) {
    .rurent-katalog,
    .rurent-cart-page,
    .rurent-checkout,
    .rurent-payment-method,
    .rurent-tnc,
    .rurent-confirmation,
    .rurent-product-page {
        padding: 16px 14px 80px;
    }
    .checkout-card { padding: 22px 18px; }
    .cart-card { padding: 18px; }
    .cart-item {
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
        gap: 12px;
    }
    .cart-item-image,
    .cart-item-image img,
    .cart-item-icon {
        width: 64px !important;
        height: 64px !important;
    }
    .cart-item-controls {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-width: 0;
    }
    .checkout-step span { display: none; }
    .checkout-step.active span,
    .checkout-step.done + .step-line + .checkout-step.active span { display: inline; }
    .step-line { flex-basis: 24px; }
    .rurent-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }
    .rurent-preview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .product-info { padding: 10px 12px 12px; gap: 8px; }
    .product-name { font-size: 14.5px; }
    .product-price { font-size: 16px; }
    .card-btn-detail,
    .card-btn-cart { font-size: 12px; padding: 7px 10px; }
    .payment-options { grid-template-columns: 1fr; }
    .booking-summary-mini { padding: 16px 18px; }
    .rurent-katalog h2,
    .rurent-cart-page h2,
    .rurent-checkout h2,
    .rurent-payment-method h2,
    .rurent-tnc h2,
    .rurent-confirmation h2 { font-size: 22px; }
    .checkout-card-title { font-size: 19px; }
}

/* ═══════════════════════════════════════════════════════════════════
   18. Elementor Widget Integration
   ═══════════════════════════════════════════════════════════════════
   Wrapper .rurent-elementor-widget di-inject oleh setiap widget
   RURENT_Widget_*. Inline <style> per-widget akan men-set CSS
   variables di bawah ini sehingga tiap instance bisa beda warna.

   Variabel custom yang bisa di-override per-widget:
     --rr-icon-color        : warna default semua icon SVG
     --rr-icon-color-accent : warna icon status (success-tinted)
     --rr-icon-size         : ukuran icon (px)
     --rr-primary           : warna tombol primer (override --rr-primary global)
     --rr-primary-text      : warna teks tombol primer
     --rr-primary-hover     : warna tombol saat hover
     --rr-text              : warna teks body
     --rr-text-2            : warna teks sekunder
     --rr-text-muted        : warna teks tertier
     --rr-link-color        : warna link
     --rr-bg                : background section
     --rr-surface           : background card
     --rr-border            : warna border
     --rr-r-lg              : radius card
     --rr-r-pill            : radius tombol
     --rr-widget-padding    : padding sekitar widget
   ═══════════════════════════════════════════════════════════════════ */

.rurent-elementor-widget {
    padding: var(--rr-widget-padding, 0);
}

/* Apply icon color */
.rurent-elementor-widget .rr-icon {
    color: var(--rr-icon-color, currentColor);
}
.rurent-elementor-widget .rr-icon svg {
    width: var(--rr-icon-size, 18px);
    height: var(--rr-icon-size, 18px);
}

/* Hapus aksen ke icon yang punya class .rr-icon-success-bg / status */
.rurent-elementor-widget .rr-icon-accent,
.rurent-elementor-widget .ktp-icon .rr-icon,
.rurent-elementor-widget .payment-icon-midtrans .rr-icon,
.rurent-elementor-widget .payment-icon-whatsapp .rr-icon {
    color: var(--rr-icon-color-accent, var(--rr-icon-color, currentColor));
}

/* Override button color: tombol .rurent-btn-primary, .card-btn-cart, .quiz-cta-btn,
   .sticky-cart-btn, .btn-text-link, etc. */
.rurent-elementor-widget .rurent-btn-primary {
    background: var(--rr-primary);
    color: var(--rr-primary-text, #fff);
}
.rurent-elementor-widget .card-btn-cart,
.rurent-elementor-widget .quiz-cta-btn,
.rurent-elementor-widget .sticky-cart-btn {
    background: var(--rr-teal, #305057);
    color: #fff;
}
.rurent-elementor-widget .rurent-btn-primary:hover:not(:disabled) {
    background: var(--rr-primary-hover);
}
.rurent-elementor-widget .card-btn-cart:hover,
.rurent-elementor-widget .quiz-cta-btn:hover,
.rurent-elementor-widget .sticky-cart-btn:hover {
    background: var(--rr-teal-hover, #264349);
}

.rurent-elementor-widget .rurent-btn,
.rurent-elementor-widget .rurent-btn-primary,
.rurent-elementor-widget .card-btn-cart,
.rurent-elementor-widget .card-btn-detail,
.rurent-elementor-widget .quiz-cta-btn,
.rurent-elementor-widget .sticky-cart-btn,
.rurent-elementor-widget .btn-add-more,
.rurent-elementor-widget .ktp-change-btn,
.rurent-elementor-widget .qty-control {
    border-radius: var(--rr-r-pill);
}

/* Card / surface override */
.rurent-elementor-widget .rurent-product-card,
.rurent-elementor-widget .checkout-card,
.rurent-elementor-widget .order-summary-card,
.rurent-elementor-widget .cart-card,
.rurent-elementor-widget .cart-summary-card,
.rurent-elementor-widget .booking-summary-mini,
.rurent-elementor-widget .payment-option-card,
.rurent-elementor-widget .confirmation-card,
.rurent-elementor-widget .tnc-content,
.rurent-elementor-widget .tnc-accept-section,
.rurent-elementor-widget .rurent-filter-bar {
    background: var(--rr-surface);
    border-color: var(--rr-border);
    border-radius: var(--rr-r-lg);
}

/* Background section */
.rurent-elementor-widget {
    background: var(--rr-bg);
}
/* Tapi: kalau --rr-bg tidak di-set di kontrol, jangan paksa abu-abu —
   biarkan Elementor section background yang berbicara. Ini di-handle
   secara otomatis oleh CSS var fallback (var(--rr-bg) = "" → tidak apply). */

/* Link color override */
.rurent-elementor-widget a {
    color: var(--rr-link-color, var(--rr-teal, #305057));
}

/* Text color body */
.rurent-elementor-widget {
    color: var(--rr-text);
}
.rurent-elementor-widget .rr-stock-sub,
.rurent-elementor-widget .product-deposit-hint,
.rurent-elementor-widget .summary-meta,
.rurent-elementor-widget .deposit-note,
.rurent-elementor-widget .checkout-card-sub,
.rurent-elementor-widget .booking-code-display,
.rurent-elementor-widget .form-group small {
    color: var(--rr-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   19. Stok Hari Ini (publik) — widget Elementor
   ═══════════════════════════════════════════════════════════════════ */

.rurent-stock-today {
    font-family: var(--rr-font);
    color: var(--rr-text);
}

.rr-stock-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.rr-stock-heading {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin: 0 0 4px;
    color: var(--rr-text);
}
.rr-stock-sub {
    font-size: 13.5px;
    color: var(--rr-text-muted);
    margin: 0;
}
.rr-stock-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rr-teal-light, #e0eaec);
    color: var(--rr-teal, #305057);
    border-radius: var(--rr-r-pill);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
}
.rr-stock-date .rr-icon svg { width: 14px; height: 14px; }

.rr-stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.rr-stock-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-r-lg);
    box-shadow: var(--rr-shadow-sm);
    padding: 14px;
    display: flex;
    gap: 12px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.rr-stock-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--rr-shadow);
}

.rr-stock-card-img {
    width: 64px;
    height: 64px;
    border-radius: var(--rr-r-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--rr-surface-3);
}
.rr-stock-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rr-stock-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rr-text-sub);
}
.rr-stock-placeholder .rr-icon svg { width: 28px; height: 28px; }

.rr-stock-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rr-stock-name {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--rr-text);
}
.rr-stock-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rr-stock-fraction {
    font-size: 12.5px;
    color: var(--rr-text-muted);
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}
.rr-stock-fraction strong {
    color: var(--rr-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.rr-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--rr-r-pill);
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.rr-stock-badge .rr-icon svg { width: 11px; height: 11px; }
.rr-badge-success { background: var(--rr-success-bg); color: var(--rr-success-text); }
.rr-badge-warning { background: var(--rr-warning-bg); color: var(--rr-warning-text); }
.rr-badge-danger  { background: var(--rr-danger-bg);  color: var(--rr-danger); }

.rr-stock-bar {
    height: 5px;
    background: var(--rr-surface-3);
    border-radius: 5px;
    overflow: hidden;
    margin-top: 2px;
}
.rr-stock-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width .35s ease;
}
.rr-bar-success { background: var(--rr-success); }
.rr-bar-warning { background: var(--rr-warning); }
.rr-bar-danger  { background: var(--rr-danger); }

.rr-stock-empty {
    text-align: center;
    padding: 40px 20px;
    background: var(--rr-surface);
    border: 1px dashed var(--rr-border);
    border-radius: var(--rr-r-lg);
    color: var(--rr-text-muted);
}
.rr-stock-empty .rr-icon svg { width: 32px; height: 32px; margin-bottom: 6px; }
.rr-stock-empty p { margin: 0; font-size: 13.5px; }

@media (max-width: 640px) {
    .rr-stock-grid { grid-template-columns: 1fr; gap: 10px; }
    .rr-stock-heading { font-size: 18px; }
    .rr-stock-card { padding: 12px; }
    .rr-stock-card-img { width: 56px; height: 56px; }
}
/* ═══════════════════════════════════════════════════════════════════
   20. Landing Page Widgets (Hero, USP, Flow, Instagram, CTA)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────── */
.rr-hero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #305057;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.rr-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.rr-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 100px 24px 80px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.rr-hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(36px, 5.5vw, 68px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0 auto 22px;
    width: 100%;
}
.rr-hero-title span { display: block; text-align: center; }
.rr-hero-title em { font-style: italic; }
.rr-hero-sub {
    font-size: clamp(15px, 2vw, 18px);
    color: rgba(255,255,255,.80);
    margin: 0 auto 40px;
    max-width: 580px;
    line-height: 1.6;
    text-align: center;
}
.rr-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 44px;
    border-radius: 8px;
    font-family: var(--rr-font, 'Inter', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: filter .2s ease, transform .2s ease;
}
.rr-hero-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    color: #fff;
}
.rr-hero-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}
.rr-hero-btn--primary {
    background: #BF6616;
    color: #fff;
    border-color: transparent;
}
.rr-hero-btn--secondary {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}
.rr-hero-btn--secondary:hover {
    background: rgba(255,255,255,0.12);
    border-color: #fff;
    filter: none;
}
.rr-hero-btn--ghost {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.7);
    color: #fff !important;
}
.rr-hero-btn--ghost:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: #fff;
    filter: none;
}

/* ── USP ──────────────────────────────────────────────────────── */
.rr-usp-section { padding: 60px 0; }
.rr-usp-grid {
    display: grid;
    gap: 24px;
}
.rr-usp-card {
    background: transparent;
}

.rr-usp-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--rr-r-md, 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.rr-usp-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rr-usp-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--rr-text, #1a1a1a); }
.rr-usp-card p  { font-size: 13.5px; color: var(--rr-text-muted, #6b7c80); line-height: 1.55; margin: 0; }

/* ── Flow ─────────────────────────────────────────────────────── */
.rr-flow-section {
    padding: 60px 0;
    background: var(--rr-bg, #EBE5DD);
    text-align: center;
}
.rr-flow-title {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    margin: 0 0 40px;
}
.rr-flow-title-accent { font-style: italic; color: var(--rr-teal-2, #448888); }
.rr-flow-steps {
    display: grid;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
}
.rr-flow-step {
    text-align: center;
    position: relative;
    padding: 0 8px;
}
.rr-flow-num-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--rr-teal, #305057);
    color: var(--rr-teal, #305057);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    margin: 0 auto 14px;
    position: relative;
    z-index: 2;
    transition: all .2s ease;
}
.rr-flow-step:hover .rr-flow-num-circle {
    background: var(--rr-teal, #305057);
    color: #fff;
}
.rr-flow-connector {
    position: absolute;
    top: 22px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 1.5px;
    background: var(--rr-border-strong, #c8bfb3);
    z-index: 0;
}
.rr-flow-step h4 { font-size: 13.5px; font-weight: 600; margin: 0 0 6px; color: var(--rr-text, #1a1a1a); }
.rr-flow-step p  { font-size: 12.5px; color: var(--rr-text-muted, #6b7c80); line-height: 1.5; max-width: 180px; margin: 0 auto; }

/* ── Instagram ────────────────────────────────────────────────── */
.rr-instagram-section { padding: 60px 0; background: var(--rr-surface, #fff); }
.rr-ig-header { text-align: center; margin-bottom: 32px; }
.rr-ig-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--rr-teal-2, #448888);
    margin-bottom: 10px;
}
.rr-ig-eyebrow svg { flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; }
.rr-ig-title {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    margin: 0 0 8px;
}
.rr-ig-title em { font-style: italic; color: var(--rr-teal-2, #448888); }
.rr-ig-sub { font-size: 15px; color: var(--rr-text-muted, #6b7c80); margin: 0; }
.rr-ig-grid {
    display: grid;
    grid-template-columns: repeat(var(--rr-ig-cols, 3), 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.rr-ig-item {
    position: relative;
    border-radius: var(--rr-r-md, 12px);
    overflow: hidden;
    aspect-ratio: 1/1;
    background: var(--rr-surface-3, #ede7df);
}
.rr-ig-item a { display: block; width: 100%; height: 100%; }
.rr-ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.rr-ig-item:hover img { transform: scale(1.04); }
.rr-ig-overlay {
    position: absolute;
    inset: 0;
    background: rgba(48,80,87,0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .25s ease;
}
.rr-ig-overlay svg { opacity: 0; transition: opacity .25s ease; stroke: currentColor; fill: none; stroke-width: 2; }
.rr-ig-item:hover .rr-ig-overlay { background: rgba(48,80,87,.45); }
.rr-ig-item:hover .rr-ig-overlay svg { opacity: 1; }
.rr-ig-cta { text-align: center; }
.rr-ig-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rr-teal, #305057);
    color: #fff;
    padding: 11px 24px;
    border-radius: 980px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s ease;
}
.rr-ig-cta-btn svg { stroke: currentColor; fill: none; stroke-width: 2; }
.rr-ig-cta-btn:hover { background: #264349; color: #fff; transform: translateY(-1px); }

/* ── CTA Banner ───────────────────────────────────────────────── */
.rr-cta-banner {
    border-radius: var(--rr-r-xl, 20px);
    padding: 40px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.rr-cta-text { flex: 1; min-width: 240px; }
.rr-cta-text h3 { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; color: #fff; margin: 0 0 6px; }
.rr-cta-text p  { font-size: 14.5px; color: rgba(255,255,255,.75); line-height: 1.55; margin: 0; }
.rr-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    padding: 13px 26px;
    border-radius: 980px;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
}
.rr-cta-btn svg { stroke: currentColor; fill: none; stroke-width: 2; }
.rr-cta-btn:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }

/* ── Responsive landing widgets ───────────────────────────────── */
@media (max-width: 768px) {
    .rr-hero-inner { padding: 72px 20px 60px; }
    .rr-usp-grid { grid-template-columns: 1fr !important; }
    .rr-flow-steps { grid-template-columns: 1fr !important; gap: 24px; }
    .rr-flow-connector { display: none; }
    .rr-ig-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .rr-cta-banner { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   Katalog Preview — Improvements (v3.2)
   Tambahkan ke bagian akhir rurent-core/assets/css/rurent.css
   ═══════════════════════════════════════════════════════════════ */

/* Preview filter bar — lebih compact */
.rurent-preview-filter-bar {
    margin-bottom: 16px;
    padding: 14px 18px;
}
.rurent-preview-filter-bar .rurent-filter-group { margin-bottom: 12px; }
.rurent-preview-filter-bar .rurent-filter-group:last-child { margin-bottom: 0; }
.rurent-preview-filter-bar .rurent-filter-row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.rurent-preview-filter-bar .rurent-select {
    padding: 8px 32px 8px 12px;
    font-size: 13px;
}

/* Preview grid — RESPECT inline grid-template-columns dari template */
.rurent-preview-grid {
    /* Tidak override grid-template-columns — itu dari inline style */
    gap: 16px;
}

/* Responsive: di tablet pakai 2-3 kolom, mobile pakai 2 kolom */
@media (max-width: 1024px) {
    .rurent-preview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 768px) {
    .rurent-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }
}
@media (max-width: 480px) {
    .rurent-preview-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Empty state — hanya muncul saat user pilih filter yang tidak match */
.rurent-preview-empty {
    margin-top: 24px;
    padding: 32px 20px;
}
.rurent-preview-reset {
    background: var(--rr-teal, #305057);
    color: #fff;
    border: 0;
    border-radius: var(--rr-r-pill, 980px);
    padding: 10px 22px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background .15s ease;
}
.rurent-preview-reset:hover {
    background: var(--rr-teal-hover, #264349);
}

/* Quiz CTA banner — ensure visible */
.rurent-katalog-preview .quiz-cta-banner {
    margin-bottom: 16px;
}
/* ═══════════════════════════════════════════════════════════════
   Katalog Penuh — Display Score Badge
   ═══════════════════════════════════════════════════════════════ */

.rk2-card__score {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--rr-text, #1a1a1a);
    color: #fff;
    border-radius: 980px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.2px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    z-index: 2;
    line-height: 1.2;
    min-width: 28px;
    text-align: center;
}

.rk2-card__img { position: relative; }


/* ═══════════════════════════════════════════════════════════════
   Quiz Modal — REWRITE LENGKAP sesuai desain referensi
   Class hierarchy:
   .quiz-overlay > .quiz-modal > .quiz-header / .quiz-progress-wrap / .quiz-body / .quiz-nav
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   Quiz Modal — REWRITE LENGKAP sesuai desain referensi RURENT
   PENTING: Hapus dulu CSS quiz lama (jika ada) di rurent.css
   sebelum append CSS ini.
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay ───────────────────────────────────────────────────── */
.quiz-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 35, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: rrQuizFadeIn .25s ease;
}
@keyframes rrQuizFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal container ──────────────────────────────────────────── */
.quiz-modal {
    background: var(--rr-bg, #EBE5DD);
    border-radius: 16px;
    width: 100%;
    max-width: 580px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.30);
    font-family: var(--rr-font, 'Inter', system-ui, sans-serif);
    color: var(--rr-text, #1a1a1a);
    display: flex;
    flex-direction: column;
    animation: rrQuizSlideUp .3s ease;

    /* Hide scrollbar — Firefox */
    scrollbar-width: none;
    /* Hide scrollbar — IE/Edge */
    -ms-overflow-style: none;
}
/* Hide scrollbar — Chrome/Safari/Opera */
.quiz-modal::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
/* ── Header ───────────────────────────────────────────────────── */
.quiz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
}
.quiz-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.quiz-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rr-teal-2, #448888);
    line-height: 0;
}
.quiz-logo-text {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: 19px;
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    letter-spacing: -0.2px;
}
.quiz-close {
    background: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--rr-text-muted, #6b7c80);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
    padding: 0;
}
.quiz-close:hover {
    background: rgba(0,0,0,.06);
    color: var(--rr-text, #1a1a1a);
}

/* ── Progress bar — 3 segmen terpisah ─────────────────────────── */
.quiz-progress-wrap {
    display: flex;
    gap: 6px;
    padding: 0 24px;
    margin-bottom: 24px;
}
.quiz-progress-seg {
    flex: 1;
    height: 4px;
    background: rgba(48, 80, 87, 0.15);
    border-radius: 4px;
    transition: background .35s ease;
}
.quiz-progress-seg.active {
    background: var(--rr-teal-2, #448888);
}

/* ── Body ─────────────────────────────────────────────────────── */
.quiz-body {
    padding: 0 24px 16px;
    flex: 1;
}
.quiz-step {
    animation: rrQuizStepFade .3s ease;
}
@keyframes rrQuizStepFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.quiz-step-count {
    font-size: 13px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 0 0 6px;
    font-weight: 500;
}
.quiz-question {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: 26px;
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    margin: 0 0 6px;
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.quiz-subtitle {
    font-size: 14px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 0 0 22px;
}

/* ── Options — vertical card list ─────────────────────────────── */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.quiz-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    text-align: left;
    background: var(--rr-surface-2, #f4efe8);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all .18s ease;
    font-family: inherit;
    color: inherit;
}
.quiz-option:hover {
    background: rgba(68, 136, 136, 0.05);
    border-color: var(--rr-teal-2, #448888);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(48,80,87,.08);
}
.quiz-option:hover .quiz-option-label {
    color: var(--rr-teal-2, #448888);
}
.quiz-option.selected {
    background: rgba(68, 136, 136, 0.05);
    border-color: var(--rr-teal-2, #448888);
    box-shadow: 0 4px 14px rgba(68,136,136,.20);
}
.quiz-option.selected .quiz-option-label {
    color: var(--rr-teal-2, #448888);
}
.quiz-option-label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    transition: color .15s ease;
    line-height: 1.3;
}
.quiz-option-desc {
    display: block;
    font-size: 13.5px;
    color: var(--rr-text-muted, #6b7c80);
    line-height: 1.4;
}

/* ── Loading spinner ──────────────────────────────────────────── */
.quiz-loading {
    text-align: center;
    padding: 40px 20px;
}
.quiz-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border: 3px solid rgba(48,80,87,.15);
    border-top-color: var(--rr-teal-2, #448888);
    border-radius: 50%;
    animation: rrSpin .8s linear infinite;
}
@keyframes rrSpin {
    to { transform: rotate(360deg); }
}
.quiz-loading p {
    font-size: 14px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 0;
}

/* ── Results header ───────────────────────────────────────────── */
.quiz-results-header {
    margin-bottom: 18px;
}
.quiz-results-header h2 {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--rr-text, #1a1a1a);
    letter-spacing: -0.2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.quiz-results-header h2 .quiz-logo-icon {
    color: var(--rr-teal-2, #448888);
}
.quiz-results-header p {
    font-size: 13.5px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 0;
}

/* ── Result cards — Detail + Cart buttons ─────────────────────── */
.quiz-result-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.quiz-result-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 14px;
    align-items: center;
    background: #f4efe8;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 12px 14px;
    transition: all .15s ease;
}
.quiz-result-card.top-pick {
    border-color: var(--rr-teal-2, #448888);
    background: rgba(68, 136, 136, 0.05);
    box-shadow: 0 4px 14px rgba(68,136,136,.15);
}
.quiz-result-card .result-image {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--rr-surface-3, #ede7df);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.quiz-result-card .result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.quiz-result-card .result-image-placeholder {
    color: var(--rr-text-muted, #6b7c80);
}
.quiz-result-card .result-info {
    min-width: 0;
    overflow: hidden;
}
.quiz-result-card .result-brand {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--rr-teal-2, #448888);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 2px;
}
.quiz-result-card .result-name {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--rr-text, #1a1a1a);
    letter-spacing: -0.2px;
    line-height: 1.2;
}
.quiz-result-card .result-specs-text {
    font-size: 12.5px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 0 0 4px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quiz-result-card .result-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.quiz-result-card .result-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--rr-teal-2, #448888);
    letter-spacing: -0.3px;
}
.quiz-result-card .result-price-period {
    font-size: 11.5px;
    color: var(--rr-text-muted, #6b7c80);
}

/* Result actions: Detail + Cart sebelahan */
.quiz-result-card .result-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    flex-shrink: 0;
}
.quiz-result-card .result-btn-detail,
.quiz-result-card .result-btn-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 980px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
    border: 1.5px solid transparent;
    white-space: nowrap;
    line-height: 1;
    font-family: inherit;
    min-width: 72px;
}
.quiz-result-card .result-btn-detail {
    background: transparent;
    color: var(--rr-teal, #305057);
    border-color: var(--rr-teal, #305057);
}
.quiz-result-card .result-btn-detail:hover {
    background: var(--rr-teal, #305057);
    color: #f4efe8;
}
.quiz-result-card .result-btn-cart {
    background: var(--rr-teal, #305057);
    color: #f4efe8;
    border-color: var(--rr-teal, #305057);
}
.quiz-result-card .result-btn-cart:hover:not(:disabled) {
    background: var(--rr-teal-hover, #264349);
    border-color: var(--rr-teal-hover, #264349);
}
.quiz-result-card .result-btn-cart:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.quiz-result-card.result-unavailable {
    opacity: .65;
}
.quiz-result-card .result-unavailable-tag {
    font-size: 11px;
    color: var(--rr-danger, #ff3b30);
    text-align: center;
    margin-top: 2px;
}

/* ── Results footer (Ulangi Quiz + Lihat Semua Raket) ─────────── */
.quiz-results-footer {
    display: flex;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(48,80,87,.10);
}
.quiz-btn-secondary,
.quiz-btn-primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border-radius: 980px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    border: 1.5px solid transparent;
    font-family: inherit;
    line-height: 1;
}
.quiz-btn-secondary {
    background: transparent;
    color: var(--rr-text-2, #305057);
    border-color: var(--rr-border-strong, #c8bfb3);
}
.quiz-btn-secondary:hover {
    background: var(--rr-surface-3, #f4efe8);
    border-color: var(--rr-text-muted, #6b7c80);
}
.quiz-btn-primary {
    background: var(--rr-teal, #305057);
    color: #fff;
    border-color: var(--rr-teal, #305057);
}
.quiz-btn-primary:hover {
    background: var(--rr-teal-hover, #264349);
    border-color: var(--rr-teal-hover, #264349);
}

/* ── No results state ─────────────────────────────────────────── */
.quiz-empty-state {
    text-align: center;
    padding: 24px 16px 8px;
}
.quiz-empty-icon {
    color: var(--rr-text-muted, #6b7c80);
    margin-bottom: 12px;
}
.quiz-empty-state h3 {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--rr-text, #1a1a1a);
}
.quiz-empty-state p {
    font-size: 13.5px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 0 0 20px;
}
.quiz-empty-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ── Nav (Kembali button) ─────────────────────────────────────── */
.quiz-nav {
    display: flex;
    align-items: center;
    padding: 14px 24px 22px;
}
.quiz-back-btn {
    background: transparent;
    border: 0;
    color: var(--rr-text-muted, #6b7c80);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background .15s ease, color .15s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.quiz-back-btn:hover {
    background: rgba(0,0,0,.05);
    color: var(--rr-text, #1a1a1a);
}

/* ═══════════════════════════════════════════════════════════════
   Responsive — Mobile bottom sheet
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .quiz-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .quiz-modal {
        max-width: 100%;
        max-height: 96vh;
        border-radius: 16px 16px 0 0;
    }
    .quiz-header {
        padding: 16px 18px 12px;
    }
    .quiz-logo-text { font-size: 17px; }
    .quiz-progress-wrap { padding: 0 18px; margin-bottom: 18px; }
    .quiz-body { padding: 0 18px 12px; }

    .quiz-question { font-size: 22px; }
    .quiz-option { padding: 14px 16px; }
    .quiz-option-label { font-size: 15px; }
    .quiz-option-desc { font-size: 13px; }

    /* Result card: image kiri, info & actions stack ke kanan */
    .quiz-result-card {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
        gap: 12px;
        padding: 12px;
    }
    .quiz-result-card .result-image { width: 56px; height: 56px; }
    .quiz-result-card .result-actions {
        grid-column: 1 / -1;
        flex-direction: row;
    }
    .quiz-result-card .result-btn-detail,
    .quiz-result-card .result-btn-cart {
        flex: 1;
    }

    .quiz-results-footer {
        flex-direction: column;
    }

    .quiz-nav { padding: 12px 18px 18px; }
}
/* ═══════════════════════════════════════════════════════════════
   Katalog Penuh — Responsive grid (mobile auto 2 kolom)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .rurent-katalog--v2 .rk2-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 768px) {
    .rurent-katalog--v2 .rk2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }
    .rurent-katalog--v2 .rk2-header {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 480px) {
    .rurent-katalog--v2 .rk2-grid {
        grid-template-columns: 1fr !important;
    }
}
/* ═══════════════════════════════════════════════════════════════
   Katalog Preview — Section override (homepage version)
   Tambahkan ke bagian akhir rurent-core/assets/css/rurent.css
   ═══════════════════════════════════════════════════════════════ */

/* Container preview — padding lebih kompak dari katalog penuh */
.rurent-katalog-preview {
    padding: 0;
    max-width: 100%;
}

/* Title size sedikit lebih kecil dari katalog penuh */
.rurent-katalog-preview .rk2-title {
    font-size: clamp(22px, 3vw, 32px);
}
.rurent-katalog-preview .rk2-sub {
    font-size: 13.5px;
}

/* Pastikan header actions sebelahan, wrap di mobile */
.rurent-katalog-preview .rk2-header {
    align-items: center;
    margin-bottom: 18px;
}
.rurent-katalog-preview .rk2-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Tombol di header — pastikan icon sejajar text */
.rurent-katalog-preview .rk2-btn {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.rurent-katalog-preview .rk2-btn svg {
    flex-shrink: 0;
}

/* No results state */
.rurent-katalog-preview .rk2-no-results {
    text-align: center;
    padding: 32px 20px;
    background: var(--rr-surface, #fff);
    border: 1px solid var(--rr-border, #ddd6cc);
    border-radius: var(--rr-r-lg, 16px);
    margin-top: 20px;
    color: var(--rr-text-muted, #6b7c80);
}
.rurent-katalog-preview .rk2-no-results p {
    margin: 0 0 14px;
    font-size: 14.5px;
}
.rurent-katalog-preview .rk2-no-results button {
    background: var(--rr-teal, #305057);
    color: #fff;
    border: 0;
    border-radius: var(--rr-r-pill, 980px);
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.rurent-katalog-preview .rk2-no-results button:hover {
    background: var(--rr-teal-hover, #264349);
}

/* Responsive — mobile auto 2 kolom */
@media (max-width: 1024px) {
    .rurent-katalog-preview .rk2-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 768px) {
    .rurent-katalog-preview .rk2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }
    .rurent-katalog-preview .rk2-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .rurent-katalog-preview .rk2-header-actions {
        width: 100%;
    }
    .rurent-katalog-preview .rk2-header-actions .rk2-btn {
        flex: 1;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .rurent-katalog-preview .rk2-grid {
        grid-template-columns: 1fr !important;
    }
}/* ═══════════════════════════════════════════════════════════════
   USP Widget — Rata Tengah, Icon Bulatan Berwarna
   Tambahkan ke bagian akhir rurent-core/assets/css/rurent.css
   ═══════════════════════════════════════════════════════════════ */

.rr-usp-section {
    padding: 60px 20px;
    width: 100%;
}

.rr-usp-grid {
    display: grid;
    gap: 32px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Alignment per section ─────────────────────────────────────── */
.rr-usp-align-center .rr-usp-card {
    text-align: center;
    align-items: center;
}
.rr-usp-align-left .rr-usp-card {
    text-align: left;
    align-items: flex-start;
}
.rr-usp-align-right .rr-usp-card {
    text-align: right;
    align-items: flex-end;
}

/* ── Card ──────────────────────────────────────────────────────── */
.rr-usp-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
}

/* ── Icon box (rounded square berwarna) ────────────────────────── */
.rr-usp-icon {
    width: var(--rr-usp-box-size, 76px);
    height: var(--rr-usp-box-size, 76px);
    border-radius: var(--rr-usp-box-radius, 18px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .25s ease;
}


/* Inline SVG built-in icons */
.rr-usp-icon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rr-usp-icon-size, 40px);
    height: var(--rr-usp-icon-size, 40px);
    line-height: 0;
    color: inherit;
}
.rr-usp-icon-inline svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Uploaded SVG/img — pakai CSS mask supaya warnanya bisa di-set
   (cocok untuk SVG monochrome). Untuk PNG warna asli akan tampil. */
.rr-usp-icon-img {
    width: var(--rr-usp-icon-size, 40px);
    height: var(--rr-usp-icon-size, 40px);
    object-fit: contain;
}
/* Jika upload SVG monochrome, aktifkan mask agar warna ikut --rr-icon-color */
img.rr-usp-icon-img[src$=".svg"] {
    background: var(--rr-icon-color, currentColor);
    -webkit-mask: var(--rr-icon-mask, none);
    mask: var(--rr-icon-mask, none);
}

/* ── Title ─────────────────────────────────────────────────────── */
.rr-usp-title {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: var(--rr-usp-title-size, 18px);
    font-weight: 700;
    color: var(--rr-usp-title-color, #1a1a1a);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

/* ── Description ───────────────────────────────────────────────── */
.rr-usp-desc {
    font-size: var(--rr-usp-desc-size, 14px);
    color: var(--rr-usp-desc-color, #6b7c80);
    line-height: 1.6;
    margin: 0;
    max-width: 380px;
}
.rr-usp-align-center .rr-usp-desc { margin-left: auto; margin-right: auto; }
.rr-usp-align-right .rr-usp-desc  { margin-left: auto; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .rr-usp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 640px) {
    .rr-usp-section { padding: 40px 16px; }
    .rr-usp-grid {
        grid-template-columns: 1fr !important;
        gap: 28px;
    }
    .rr-usp-card { padding: 0; }
}
/* ════════════════════════════════════════════════════════════════
   RECOVERY BAR — Booking Tertunda (global, di bawah navbar)
   ════════════════════════════════════════════════════════════════ */
.rurent-recovery-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #FEF3C7;
    border-bottom: 1.5px solid #F59E0B;
    padding: 9px 20px;
    box-shadow: 0 2px 8px rgba(245,158,11,.18);
}
.rr-recovery-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.rr-recovery-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.rr-recovery-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.rr-recovery-text strong {
    font-size: 13px;
    font-weight: 700;
    color: #92400E;
}
.rr-recovery-detail {
    font-size: 12px;
    color: #78350F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rr-recovery-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.rr-recovery-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity .15s;
    line-height: 1.3;
}
.rr-recovery-btn:hover { opacity: .85; }
.rr-recovery-btn--pay {
    background: #305057;
    color: #fff;
}
.rr-recovery-btn--wa {
    background: #25D366;
    color: #fff;
}
.rr-recovery-btn--cancel {
    background: transparent;
    color: #92400E;
    border: 1.5px solid #F59E0B;
    padding: 5px 10px;
    font-size: 12px;
}

/* Offset body/navbar saat recovery bar muncul agar konten tidak tertutup */
body.has-recovery-bar {
    padding-top: 52px !important;
}

@media (max-width: 640px) {
    .rurent-recovery-bar { padding: 8px 12px; }
    .rr-recovery-detail { display: none; }
    .rr-recovery-btn--pay { padding: 6px 10px; font-size: 12px; }
    .rr-recovery-actions { gap: 6px; }
}

/* ─── Voucher Input Box ────────────────────────────────────────── */
.rr-voucher-section {
    border: 1px dashed var(--rr-border, #d9e4e6);
    border-radius: var(--rr-r-md, 10px);
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--rr-bg-2, #f9fbfb);
}
.rr-voucher-section-header {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600;
    color: var(--rr-text, #1a2e32);
    margin-bottom: 10px;
}
.rr-voucher-section-header .rr-icon svg { width: 14px; height: 14px; }
.rr-voucher-box { margin-bottom: 4px; }
.rr-voucher-input-row {
    display: flex; gap: 8px; align-items: center;
}
.rr-voucher-input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--rr-border, #d1dfe2);
    border-radius: 8px;
    font-size: 13px;
    letter-spacing: .06em;
    font-family: monospace;
    background: var(--rr-bg, #fff);
    color: var(--rr-text, #1a2e32);
    transition: border .15s;
}
.rr-voucher-input:focus { outline: none; border-color: var(--rr-teal, #305057); }
.rr-voucher-apply-btn {
    padding: 9px 16px;
    background: var(--rr-teal, #305057);
    color: #fff;
    border: none; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: opacity .15s;
}
.rr-voucher-apply-btn:hover { opacity: .85; }
.rr-voucher-apply-btn:disabled { opacity: .5; cursor: not-allowed; }
.rr-voucher-applied {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--rr-teal-light, #e0eef0);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 4px;
}
.rr-voucher-applied-code {
    font-family: monospace; font-weight: 700; font-size: 13px;
    letter-spacing: .06em; color: var(--rr-teal, #305057);
}
.rr-voucher-applied-desc {
    font-size: 12px; color: var(--rr-teal, #305057);
}
.rr-voucher-remove-btn {
    margin-left: auto;
    background: none; border: none;
    color: var(--rr-muted, #6b7a7d);
    font-size: 12px; cursor: pointer; padding: 2px 4px;
    border-radius: 4px;
}
.rr-voucher-remove-btn:hover { color: var(--rr-danger, #c0392b); background: rgba(0,0,0,.04); }
.rr-voucher-msg {
    font-size: 12px; margin-top: 6px; padding: 4px 0;
}
.rr-voucher-msg--ok { color: var(--rr-teal, #1D9E75); }
.rr-voucher-msg--err { color: var(--rr-danger, #c0392b); }
/* ═══════════════════════════════════════════════════════════════
   RURENT — Floating WhatsApp Button
   ═══════════════════════════════════════════════════════════════ */
@keyframes rurent-wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.rurent-wa-float {
    position: fixed;
    right: 24px;
    bottom: 28px;
    z-index: 9990;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(37, 211, 102, 0.4);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    animation: rurent-wa-pulse 2.4s ease-out infinite;
}
.rurent-wa-float:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(37, 211, 102, 0.5);
    color: #fff;
    text-decoration: none;
    animation: none;
}
.rurent-wa-float:active {
    transform: scale(0.95);
}
.rurent-wa-float svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}
/* Jika sticky cart aktif — naikkan agar tidak tertimpa */
body.rurent-cart-visible .rurent-wa-float {
    bottom: 100px;
}

/* ══════════════════════════════════════════════════════════════
   BOOKING PAGE — Date Bar & Time Dropdown (katalog-style)
   bp-* = booking page components
   ══════════════════════════════════════════════════════════════ */

/* ── Date Bar ──────────────────────────────────────────────── */
.bp-datebar {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    background: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 5px 10px 5px 5px;
    /* scroll ada di sini — chips ikut scroll, icon tetap */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #d9d1c7 transparent;
    position: relative;
}
.bp-datebar::-webkit-scrollbar {
    height: 3px;
}
.bp-datebar::-webkit-scrollbar-track {
    background: transparent;
}
.bp-datebar::-webkit-scrollbar-thumb {
    background: #d9d1c7;
    border-radius: 99px;
}

/* Calendar icon — circle bg #d9d1c7, sticky di kiri */
.bp-cal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    border: none;
    background: #d9d1c7;
    color: var(--rr-teal, #305057);
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}
.bp-cal-icon:hover,
.bp-cal-icon.active {
    background: #ccc4b8;
}

/* Garis pemisah vertikal via elemen flex — lebih stabil dari ::after */
.bp-datebar-sep {
    width: 1px;
    min-width: 1px;
    height: 20px;
    background: #d9d1c7;
    flex-shrink: 0;
    margin: 0 10px;
    align-self: center;
}

/* Chips wrap — tidak scroll sendiri, ikut scroll datebar */
.bp-chips-wrap {
    display: contents; /* transparant wrapper, chips langsung di flex datebar */
}

/* Chips baris langsung */
.bp-chips {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    flex-wrap: nowrap;
}

/* Date chip — bg #d9d1c7 */
.bp-chip {
    flex-shrink: 0;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: #d9d1c7;
    color: #4a4a4a;
    font-size: 0.81rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    line-height: 1;
}
.bp-chip:hover {
    border-color: var(--rr-teal, #305057);
    color: var(--rr-teal, #305057);
    background: #ccc4b8;
}
.bp-chip.active {
    background: var(--rr-teal, #305057);
    border-color: var(--rr-teal, #305057);
    color: #fff;
    font-weight: 600;
}

/* ── Calendar Popup (portaled to body) ────────────────────── */
.bp-cal-popup {
    position: fixed;
    z-index: 999999;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.13);
    padding: 14px;
    width: 240px;
    font-size: 0.82rem;
    user-select: none;
}
.bp-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.bp-cal-month-label {
    font-weight: 700;
    font-size: 0.86rem;
    color: #1a2e33;
    flex: 1;
    text-align: center;
}
.bp-cal-nav {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 5px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    transition: background .15s, color .15s;
}
.bp-cal-nav:hover {
    background: #f3f4f6;
    color: var(--rr-teal, #305057);
}
.bp-cal-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 3px;
}
.bp-cal-dow-row span {
    font-size: 0.68rem;
    color: #b0bec5;
    font-weight: 700;
    padding: 2px 0;
    text-transform: uppercase;
}
.bp-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}
.bp-cal-cell {
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 0.79rem;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: background .12s, color .12s;
    padding: 0;
    font-family: inherit;
}
button.bp-cal-cell:hover {
    background: rgba(48,80,87,.09);
    color: var(--rr-teal, #305057);
}
.bp-cal-cell.today {
    background: rgba(48,80,87,.13);
    color: var(--rr-teal, #305057);
    font-weight: 700;
}
.bp-cal-cell.selected {
    background: var(--rr-teal, #305057) !important;
    color: #fff !important;
    font-weight: 700;
}
.bp-cal-cell.today.selected {
    background: var(--rr-teal, #305057) !important;
    color: #fff !important;
}
.bp-cal-cell.bp-disabled {
    color: #d1d5db !important;
    cursor: default;
    pointer-events: none;
}
.bp-cal-cell.bp-empty {
    pointer-events: none;
    visibility: hidden;
}

/* ── Time Dropdown (katalog rk2-dropdown style) ───────────── */
.bp-time-dropdown {
    position: relative;
}
.bp-time-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #d9d1c7;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #4a4040;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    text-align: left;
    gap: 8px;
}
.bp-time-btn:hover,
.bp-time-btn[aria-expanded="true"] {
    background: #ccc4b8;
    box-shadow: none;
}
.bp-time-btn.has-value {
    color: var(--rr-text, #1a2e33);
    font-weight: 600;
}
.bp-time-chevron {
    flex-shrink: 0;
    transition: transform .2s;
    color: var(--rr-text-muted, #6b7c80);
}
.bp-time-btn[aria-expanded="true"] .bp-time-chevron {
    transform: rotate(180deg);
}
.bp-time-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #d9d1c7;
    border: none;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    padding: 4px;
    z-index: 9999;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #bfb8ae transparent;
}
.bp-time-menu::-webkit-scrollbar { width: 4px; }
.bp-time-menu::-webkit-scrollbar-track { background: transparent; }
.bp-time-menu::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }

.bp-time-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-size: 0.84rem;
    color: #333;
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
}
.bp-time-item:hover {
    background: #BF6616;
    color: #fff;
}
.bp-time-item.active {
    background: var(--rr-teal, #305057);
    color: #fff;
    font-weight: 600;
}

/* ── bp-datebar responsive ─────────────────────────────────── */
@media (max-width: 640px) {
    .bp-datebar {
        border-radius: 10px;
        padding: 4px 8px 4px 4px;
    }
    .bp-cal-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }
    .bp-datebar-sep {
        margin: 0 7px;
        height: 16px;
    }
    .bp-chip {
        padding: 4px 11px;
        font-size: 0.78rem;
    }
    .bp-time-btn {
        padding: 9px 12px;
        font-size: 0.82rem;
    }
}

/* ═══ Quiz: Slider step (pertanyaan power vs control) ═══ */
.quiz-slider-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0 0;
}
.quiz-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rr-text-muted, #6b7c80);
}
/* Track */
.quiz-slider-input {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 99px;
    background: linear-gradient(
        to right,
        var(--rr-teal-2, #448888) var(--slider-pct, 50%),
        rgba(0,0,0,.09) var(--slider-pct, 50%)
    );
    outline: none;
    cursor: pointer;
    transition: background 0.08s;
}
/* Thumb — webkit */
.quiz-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--rr-teal-2, #448888);
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(68,136,136,.25), 0 0 0 4px rgba(68,136,136,.10);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.quiz-slider-input::-webkit-slider-thumb:hover {
    box-shadow: 0 2px 10px rgba(68,136,136,.35), 0 0 0 6px rgba(68,136,136,.14);
}
.quiz-slider-input::-webkit-slider-thumb:active {
    transform: scale(1.12);
    box-shadow: 0 2px 12px rgba(68,136,136,.4), 0 0 0 8px rgba(68,136,136,.16);
}
/* Thumb — Firefox */
.quiz-slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--rr-teal-2, #448888);
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(68,136,136,.25);
}
/* Value display */
.quiz-slider-value-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
}
.quiz-slider-value-label {
    font-size: 36px;
    font-weight: 700;
    color: var(--rr-teal-2, #448888);
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.quiz-slider-value-hint {
    font-size: 15px;
    color: var(--rr-text-muted, #6b7c80);
    font-weight: 400;
}
/* Tick marks */
.quiz-slider-ticks {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
}
.quiz-slider-tick {
    font-size: 10.5px;
    color: rgba(0,0,0,.18);
    transition: color 0.12s, font-weight 0.12s;
    min-width: 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.quiz-slider-tick.active {
    color: var(--rr-teal-2, #448888);
    font-weight: 700;
}
.quiz-slider-next {
    margin-top: 4px;
    align-self: flex-end;
}

/* ═══ Quiz Result Card — Rating bars (4 dimensi) ═══ */
.result-rating-bars {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 8px 0 4px;
}
.result-rbar {
    display: grid;
    grid-template-columns: 46px 1fr 26px;
    align-items: center;
    gap: 7px;
}
.result-rbar-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--rr-text-muted, #6b7c80);
}
.result-rbar-track {
    height: 5px;
    background: rgba(0,0,0,.07);
    border-radius: 99px;
    overflow: hidden;
}
.result-rbar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s cubic-bezier(.4,0,.2,1);
    background: var(--rr-teal-2, #448888);
}
/* Per-bar colors — tonal variations of teal */
.result-rbar-power   { background: var(--rr-primary, #BF6616); }
.result-rbar-control { background: var(--rr-teal-2, #448888); }
.result-rbar-balance { background: var(--rr-teal, #305057); }
.result-rbar-maneuv  { background: #5a9e6f; }
.result-rbar-val {
    font-size: 11px;
    font-weight: 700;
    color: var(--rr-text-2, #305057);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ══ RRDT Upgraded Calendar Popup ═══════════════════════════════ */
.rrdt-upgraded { min-width: 280px; }
.rrdt-tabs-bar {
    display: flex; gap: 3px;
    padding: 8px 8px 0;
    background: #f2ede6;
    border-bottom: 1px solid #cfc8bc;
}
.rrdt-tab-btn {
    flex: 1; padding: 6px 4px;
    border: none; border-radius: 7px 7px 0 0;
    font-size: 11px; font-weight: 500; cursor: pointer;
    background: transparent; color: #9a8878;
    transition: background .15s, color .15s;
    font-family: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rrdt-tab-btn:hover { background: rgba(184,110,26,.08); color: #574a3d; }
.rrdt-tab-active { background: #faf8f5 !important; color: #140f0a !important; }
.rrdt-time-head {
    font-size: 10.5px; font-weight: 700; color: #9a8878;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 10px 12px 4px;
}
.rrdt-avail-badge {
    font-size: 11px; color: #2d6b38;
    background: #d4edd9; border-radius: 99px;
    padding: 2px 10px; margin: 0 12px 8px;
    display: inline-block;
}
.rrdt-slot-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 5px; padding: 0 10px 10px;
    max-height: 180px; overflow-y: auto;
}
.rrdt-slot-grid::-webkit-scrollbar { width: 3px; }
.rrdt-slot-grid::-webkit-scrollbar-thumb { background: #cfc8bc; border-radius: 99px; }
@media (max-width: 360px) { .rrdt-slot-grid { grid-template-columns: repeat(3, 1fr); } }
.rrdt-slot {
    padding: 7px 0; border-radius: 7px; border: none;
    font-size: 12px; cursor: pointer; text-align: center;
    transition: background .12s, color .12s; font-family: inherit;
}
.rrdt-slot-av { background: #f2ede6; color: #140f0a; }
.rrdt-slot-av:hover { background: #f5e4cc; color: #6b3d0a; }
.rrdt-slot-bk {
    background: transparent; color: #9a8878;
    opacity: .35; cursor: default; text-decoration: line-through;
}
.rrdt-slot-past {
    background: transparent; color: #bbb;
    opacity: .4; cursor: not-allowed;
}
.rrdt-slot-pk { background: #b86e1a !important; color: #fff !important; font-weight: 600; }
/* ── Extra time tab ─────────────────────────────── */
.rrdt-extra-head { font-size:13px;font-weight:600;color:var(--rr-text);padding:10px 14px 4px; }
.rrdt-extra-hint { font-size:11px;font-weight:400;color:var(--rr-text-muted); }
.rrdt-extra-pills { display:flex;gap:8px;flex-wrap:wrap;padding:8px 14px 4px; }
.rrdt-extra-pill {
    padding:6px 14px;border-radius:99px;border:1.5px solid var(--rr-border);
    background:var(--rr-surface-2);color:var(--rr-text);font-size:13px;
    cursor:pointer;transition:all .15s;
}
.rrdt-extra-pill:hover { border-color:var(--rr-primary);color:var(--rr-primary); }
.rrdt-extra-pill-active { background:var(--rr-primary)!important;color:#fff!important;border-color:var(--rr-primary)!important;font-weight:600; }
.rrdt-extra-desc { font-size:12px;color:var(--rr-text-muted);padding:6px 14px 10px;margin:0;line-height:1.4; }
.rrdt-extra-badge { display:inline-block;background:var(--rr-primary);color:#fff;border-radius:99px;font-size:10px;font-weight:700;padding:1px 5px;margin-left:3px;vertical-align:middle; }
/* v5: Return date+time row inside Extra tab */
.rrdt-return-row {
    display: flex; gap: 8px; padding: 6px 14px 4px; align-items: center;
}
.rrdt-return-row .rrdt-return-date,
.rrdt-return-row .rrdt-return-time {
    flex: 1 1 auto; min-width: 0;
    padding: 8px 10px;
    border: 1.5px solid var(--rr-border);
    border-radius: 8px;
    background: var(--rr-surface-2);
    color: var(--rr-text);
    font-size: 13px; font-family: inherit;
    appearance: none; -webkit-appearance: none;
}
.rrdt-return-row .rrdt-return-date:focus,
.rrdt-return-row .rrdt-return-time:focus {
    outline: none; border-color: var(--rr-primary);
}
@media (max-width: 480px) {
    .rrdt-return-row { flex-direction: column; align-items: stretch; }
}
.rrdt-cal-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px 10px; border-top: 1px solid #cfc8bc;
    gap: 8px;
}
.rrdt-footer-txt { font-size: 12px; color: #574a3d; flex: 1; }
.rrdt-footer-txt strong { color: #140f0a; }
.rrdt-apply-btn {
    padding: 6px 16px; border-radius: 999px;
    background: #b86e1a; color: #fff;
    border: none; font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap; font-family: inherit;
    transition: background .15s;
}
.rrdt-apply-btn:hover { background: #9a5c14; }
.rrdt-apply-btn.rrdt-dim { background: #e8e2d9 !important; color: #9a8878 !important; cursor: default; }

/* ── Rental Days pills ──────────────────────────────────────── */
#rental-days-pills .extra-pill {
    min-width: 72px;
    font-weight: 500;
}
#extra-hours-pills .extra-pill[data-hours="0"] {
    color: var(--rr-text-muted);
}
#extra-hours-pills .extra-pill[data-hours="0"].active {
    color: var(--rr-bg);
}

/* ══ RURENT Toast Notification ══════════════════════════════════ */
.rr-toast-container{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
    z-index:99999;display:flex;flex-direction:column;gap:8px;
    align-items:center;pointer-events:none;
    width:min(400px, 92vw);
}
.rr-toast{
    display:flex;align-items:flex-start;gap:10px;
    padding:12px 16px;border-radius:12px;
    font-family:'Inter',system-ui,sans-serif;font-size:13.5px;line-height:1.45;
    box-shadow:0 8px 24px rgba(60,35,10,.16);
    pointer-events:all;cursor:pointer;
    animation:rrToastIn .22s cubic-bezier(.34,1.56,.64,1);
    max-width:100%;
}
.rr-toast.rr-toast--success{background:#d4edd9;color:#1e5a2b;border:1px solid #8bca96;}
.rr-toast.rr-toast--error  {background:#f2dbd8;color:#7a1e14;border:1px solid #d48880;}
.rr-toast.rr-toast--warning{background:#f5e4cc;color:#6b3d0a;border:1px solid #d9a84a;}
.rr-toast.rr-toast--info   {background:#cce4ef;color:#235e7a;border:1px solid #7ab0c8;}
.rr-toast-icon{font-size:15px;flex-shrink:0;margin-top:1px;}
.rr-toast-body{flex:1;}
.rr-toast-title{font-weight:600;margin-bottom:2px;}
.rr-toast-msg{opacity:.85;}
@keyframes rrToastIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes rrToastOut{to{opacity:0;transform:translateY(8px) scale(.95)}}

/* ── Badge improvements ──────────────────────────────────────── */
.rk2-avail-badge.is-unavailable .badge-dot{background:#d48880 !important;}
.rk2-avail-badge.is-unavailable .badge-available{display:none;}
.rk2-avail-badge.is-unavailable .badge-unavailable{display:inline !important;color:#a63228;}
.rk2-avail-badge .badge-unavailable{display:none;}
.rk2-card.slot-unavailable .rk2-btn-cart{
    opacity:.45;cursor:not-allowed;pointer-events:none;
}
.rk2-card.slot-unavailable .rk2-btn-cart::after{content:'Full';}
.rk2-card.slot-unavailable .rk2-btn-cart .cart-btn-text{display:none;}
/* When no date selected — badge shows total stock with hint */
.rk2-avail-badge.no-date-selected .badge-available::after{
    content:' (select date)';
    opacity:.6;font-size:.9em;
}

/* ══════════════════════════════════════════════════════════════
   CART BOOKING BANNER (Traveloka-style session summary)
══════════════════════════════════════════════════════════════ */
.cart-booking-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1.5px solid #bfdbfe;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.cbb-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #2563eb;
    margin-bottom: 14px;
    opacity: .85;
}
.cbb-grid {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.cbb-col {
    flex: 1;
    min-width: 0;
}
.cbb-col--right {
    text-align: right;
}
.cbb-col-hd {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    margin-bottom: 5px;
}
.cbb-col--right .cbb-col-hd {
    justify-content: flex-end;
}
.cbb-col-val {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cbb-col-sub {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.cbb-arrow {
    font-size: 18px;
    color: #2563eb;
    padding-top: 18px;
    flex-shrink: 0;
    opacity: .6;
}
.cbb-dur-chip {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: 4px;
    white-space: nowrap;
}
.cbb-change-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 9px 16px;
    background: transparent;
    border: 1.5px solid #2563eb;
    border-radius: 9px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: center;
}
.cbb-change-btn:hover {
    background: #2563eb;
    color: #fff;
}
@media (max-width: 640px) {
    .cbb-grid { flex-wrap: wrap; gap: 8px; }
    .cbb-col--right { flex-basis: 100%; text-align: left; }
    .cbb-col--right .cbb-col-hd { justify-content: flex-start; }
    .cbb-arrow { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Cart Session Countdown Timer (TTL 2h) — adaptive positioning
   ═══════════════════════════════════════════════════════════════════
   States:
     .cart-timer-banner            → normal (inline, scrolls with page)
     .cart-timer-banner.is-urgent  → <5 min remaining (red + pulse)
     .cart-timer-banner.is-sticky  → urgent state → sticks to top of viewport
     .cart-timer-banner.is-expired → session ended (gray, before modal shows)
*/
.cart-timer-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fdba74;
    color: #9a3412;
    font-size: 14px;
    line-height: 1.4;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    width: 100%;
}
.cart-timer-banner * { box-sizing: border-box; }

.cart-timer-banner.is-urgent {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #f87171;
    color: #991b1b;
    animation: rrCartTimerPulse 1.5s ease-in-out infinite;
}
.cart-timer-banner.is-expired {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
    animation: none;
}

/* Sticky state — only kicks in on urgent (<5 min) */
.cart-timer-banner.is-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
    margin-left: -2px;
    margin-right: -2px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cart-timer-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
}
.cart-timer-icon svg { width: 18px; height: 18px; }

.cart-timer-text {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: baseline;
    min-width: 0;
}
.cart-timer-label { font-weight: 500; }
.cart-timer-text strong {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.cart-timer-hint {
    font-size: 12px;
    opacity: 0.85;
}

@keyframes rrCartTimerPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0); }
}
/* Sticky + pulse: use a softer shadow combo */
.cart-timer-banner.is-sticky.is-urgent {
    animation: rrCartTimerPulseSticky 1.5s ease-in-out infinite;
}
@keyframes rrCartTimerPulseSticky {
    0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 0 rgba(248,113,113,0.4); }
    50%      { box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 4px rgba(248,113,113,0); }
}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
    .cart-timer-banner { gap: 10px; padding: 11px 14px; }
}

/* Phone large / phablet (≤600px) */
@media (max-width: 600px) {
    .cart-timer-banner { padding: 10px 12px; font-size: 13px; gap: 10px; }
    .cart-timer-icon   { width: 28px; height: 28px; }
    .cart-timer-icon svg { width: 16px; height: 16px; }
    .cart-timer-text strong { font-size: 15px; }
    .cart-timer-hint { display: block; width: 100%; font-size: 11.5px; }

    /* On mobile, sticky banner needs to clear any potential top bars */
    .cart-timer-banner.is-sticky {
        margin-left: -12px;
        margin-right: -12px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* Phone (≤480px) */
@media (max-width: 480px) {
    .cart-timer-banner { padding: 9px 11px; font-size: 12.5px; }
    .cart-timer-label  { font-size: 12.5px; }
    .cart-timer-text strong { font-size: 14.5px; }
}

/* Small phones (≤375px) — iPhone SE, low-end Android */
@media (max-width: 375px) {
    .cart-timer-banner { padding: 8px 10px; gap: 8px; }
    .cart-timer-icon { width: 26px; height: 26px; }
    .cart-timer-icon svg { width: 14px; height: 14px; }
    .cart-timer-text strong { font-size: 14px; }
    .cart-timer-label { font-size: 12px; }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .cart-timer-banner { transition: none; }
    .cart-timer-banner.is-urgent,
    .cart-timer-banner.is-sticky.is-urgent { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Cart Expired Modal (full-screen overlay when session ends)
   ═══════════════════════════════════════════════════════════════════ */
.cart-expired-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: rrModalFadeIn 0.25s ease-out;
}
.cart-expired-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.cart-expired-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: rrModalSlideUp 0.3s ease-out;
}
.cart-expired-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fef3c7;
    color: #d97706;
    margin: 0 auto 20px;
}
.cart-expired-card h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}
.cart-expired-card p {
    margin: 0 0 24px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
}
.cart-expired-cta {
    display: inline-block;
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
}
@keyframes rrModalFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes rrModalSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 480px) {
    .cart-expired-card { padding: 24px 20px; }
    .cart-expired-card h3 { font-size: 18px; }
    .cart-expired-card p  { font-size: 13.5px; }
    .cart-expired-icon { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
    .cart-expired-modal,
    .cart-expired-card { animation: none; }
}