/*
|--------------------------------------------------------------------------
| Stage 148N - Booking Clean Focus Mode
|--------------------------------------------------------------------------
| Tujuan:
| - Saat pelanggan booking/order, bottom nav disembunyikan.
| - Layar HP lebih bersih dan profesional.
| - Bottom bar estimasi cukup satu baris.
| - Berlaku untuk /booking-service-ac, /pesan-service, /pelanggan/orders/create.
*/

:root {
    --ys-booking-bottom-bar-height: 72px;
    --ys-booking-blue: #0b5ee8;
    --ys-booking-pink: #e91e73;
    --ys-booking-dark: #07172f;
    --ys-booking-border: #e5e7eb;
}

/* Body focus mode */
body.ys-booking-focus-mode {
    background: #f8fafc !important;
    padding-bottom: calc(var(--ys-booking-bottom-bar-height) + 20px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
}

/* Hide customer bottom navigation only while booking */
body.ys-booking-focus-mode .mobile-bottom-nav,
body.ys-booking-focus-mode .bottom-navigation,
body.ys-booking-focus-mode .bottom-nav,
body.ys-booking-focus-mode .customer-bottom-nav,
body.ys-booking-focus-mode .pelanggan-bottom-nav,
body.ys-booking-focus-mode .app-bottom-nav,
body.ys-booking-focus-mode .ys-bottom-nav,
body.ys-booking-focus-mode nav[aria-label="Bottom Navigation"],
body.ys-booking-focus-mode nav[aria-label="Navigasi bawah"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Compact typography during booking */
body.ys-booking-focus-mode h1,
body.ys-booking-focus-mode .page-title,
body.ys-booking-focus-mode .booking-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
}

body.ys-booking-focus-mode h2,
body.ys-booking-focus-mode .card-title,
body.ys-booking-focus-mode .section-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
}

body.ys-booking-focus-mode p,
body.ys-booking-focus-mode label,
body.ys-booking-focus-mode input,
body.ys-booking-focus-mode textarea,
body.ys-booking-focus-mode select,
body.ys-booking-focus-mode button,
body.ys-booking-focus-mode td,
body.ys-booking-focus-mode th,
body.ys-booking-focus-mode .text-base {
    font-size: 13px !important;
}

body.ys-booking-focus-mode .text-sm,
body.ys-booking-focus-mode small,
body.ys-booking-focus-mode .helper-text,
body.ys-booking-focus-mode .form-hint {
    font-size: 11.5px !important;
}

/* Header booking focus */
.ys-booking-focus-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: #ffffff;
    border-bottom: 1px solid var(--ys-booking-border);
    padding: 10px 12px;
}

.ys-booking-focus-header-inner {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 8px;
    max-width: 980px;
    margin: 0 auto;
}

.ys-booking-back,
.ys-booking-home {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 900;
    border: 1px solid #e2e8f0;
}

.ys-booking-focus-title {
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    color: #0f172a;
}

.ys-booking-focus-subtitle {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    margin-top: 1px;
}

/* Ensure booking content has enough breathing room */
body.ys-booking-focus-mode main,
body.ys-booking-focus-mode .content,
body.ys-booking-focus-mode .page-content,
body.ys-booking-focus-mode .booking-container,
body.ys-booking-focus-mode .order-form-container,
body.ys-booking-focus-mode .container {
    padding-bottom: calc(var(--ys-booking-bottom-bar-height) + 28px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Compact bottom estimate: one row only */
body.ys-booking-focus-mode .ys-order-bottom-bar,
body.ys-booking-focus-mode .booking-bottom-bar,
body.ys-booking-focus-mode .order-bottom-bar,
body.ys-booking-focus-mode .estimate-bottom-bar,
body.ys-booking-focus-mode .sticky-estimate,
body.ys-booking-focus-mode [data-ys-compact-estimate="true"],
body.ys-booking-focus-mode [data-order-estimate] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1099 !important;
    min-height: var(--ys-booking-bottom-bar-height) !important;
    background: var(--ys-booking-dark) !important;
    color: #fff !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -8px 24px rgba(2, 6, 23, .22) !important;
}

/* Force bottom estimate content into one row */
body.ys-booking-focus-mode .ys-order-bottom-inner,
body.ys-booking-focus-mode .booking-bottom-inner,
body.ys-booking-focus-mode .order-bottom-inner,
body.ys-booking-focus-mode .estimate-bottom-inner,
body.ys-booking-focus-mode [data-ys-compact-estimate="true"] > div,
body.ys-booking-focus-mode [data-order-estimate] > div {
    max-width: 980px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Hide detailed lines in bottom estimate; keep only total + button */
body.ys-booking-focus-mode .ys-order-bottom-bar .estimate-detail,
body.ys-booking-focus-mode .ys-order-bottom-bar .detail-line,
body.ys-booking-focus-mode .ys-order-bottom-bar .service-line,
body.ys-booking-focus-mode .ys-order-bottom-bar .unit-line,
body.ys-booking-focus-mode .booking-bottom-bar .estimate-detail,
body.ys-booking-focus-mode .booking-bottom-bar .detail-line,
body.ys-booking-focus-mode .booking-bottom-bar .service-line,
body.ys-booking-focus-mode .booking-bottom-bar .unit-line,
body.ys-booking-focus-mode [data-order-estimate] .estimate-detail,
body.ys-booking-focus-mode [data-order-estimate] .detail-line,
body.ys-booking-focus-mode [data-order-estimate] .service-line,
body.ys-booking-focus-mode [data-order-estimate] .unit-line {
    display: none !important;
}

body.ys-booking-focus-mode .ys-estimate-label,
body.ys-booking-focus-mode .estimate-label {
    display: block !important;
    color: #cbd5e1 !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

body.ys-booking-focus-mode .ys-estimate-amount,
body.ys-booking-focus-mode .estimate-amount,
body.ys-booking-focus-mode [data-order-estimate-total] {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    color: #fff !important;
}

body.ys-booking-focus-mode .ys-order-next-btn,
body.ys-booking-focus-mode .booking-next-btn,
body.ys-booking-focus-mode .order-next-btn,
body.ys-booking-focus-mode .btn-next,
body.ys-booking-focus-mode .btn-primary {
    min-width: 138px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: var(--ys-booking-pink) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    border: none !important;
}

/* Avoid oversized service cards */
body.ys-booking-focus-mode .card,
body.ys-booking-focus-mode .service-card,
body.ys-booking-focus-mode .order-card,
body.ys-booking-focus-mode .booking-card {
    border-radius: 16px !important;
}

/* Mobile focused */
@media (max-width: 768px) {
    body.ys-booking-focus-mode {
        padding-bottom: calc(var(--ys-booking-bottom-bar-height) + 22px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .ys-booking-focus-header {
        display: block !important;
    }
}

/* Desktop: focus mode still clean, no bottom nav issue */
@media (min-width: 769px) {
    .ys-booking-focus-header {
        display: none;
    }
}