.two-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* batas 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
}

/* Venue List Lapangan - Slot */
.unit-loading-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.field-slot-item {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* slot normal */
.field-slot-item .border {
    background-color: #fff;
}

/* slot booked (disabled) — merah soft */
.field-slot-item-disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
}

.field-slot-item-disabled .border {
    background-color: #fde8e8;
    border-color: #f5b5b5 !important;
    color: #b42318;
}

.field-slot-item-disabled .field-slot-item-time-disabled,
.field-slot-item-disabled .field-slot-item-price-disabled {
    color: #b42318;
}

.field-slot-item-disabled .field-slot-item-price-disabled {
    font-weight: 600;
}

/* slot tidak tersedia karena unit berelasi — oranye soft */
.field-slot-item-unavailable {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
}

.field-slot-item-unavailable .border {
    background-color: #fff7ed;
    border-color: #fdba74 !important;
    color: #9a3412;
}

.field-slot-item-unavailable .field-slot-item-time-disabled,
.field-slot-item-unavailable .field-slot-item-price-disabled {
    color: #9a3412;
}

.field-slot-item-unavailable .field-slot-item-price-disabled {
    font-weight: 600;
}

/* slot sudah lewat — abu gelap, teks tetap terbaca */
.field-slot-item-past {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
}

.field-slot-item-past .border {
    background-color: #e5e7eb;
    border-color: #9ca3af !important;
    color: #374151;
}

.field-slot-item-past .field-slot-item-time-disabled,
.field-slot-item-past .field-slot-item-price-disabled {
    color: #374151;
}

.field-slot-item-past .field-slot-item-price-disabled {
    font-weight: 600;
}

/* slot selected */
.field-slot-item-selected .border {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

/* Booking Saya */
.booking-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a1a;
}

.booking-page-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
}

.booking-filter .form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: #495057;
}

.booking-table {
    --bs-table-bg: transparent;
}

.booking-table thead th {
    background: #f4f6f8;
    border-bottom: 1px solid #e6eaef;
    color: #495057;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.9rem 1rem;
    white-space: nowrap;
}

.booking-table tbody td {
    border-color: #eef1f4;
    padding: 1rem;
    vertical-align: middle;
}

.booking-table tbody tr:hover {
    background: #fafbfc;
}

.booking-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #212529;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.booking-venue {
    font-weight: 600;
    color: #212529;
    line-height: 1.35;
}

.booking-meta {
    color: #6c757d;
    font-size: 0.8125rem;
}

.booking-status-badge {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.45rem 0.75rem;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    border: 1px solid transparent;
}

/*
 * Soft semantic status badges (customer booking).
 * Theme Fuzio: text-bg-warning hilang, --bs-info putih → status jadi tidak terbaca.
 */
.booking-status-badge.text-bg-secondary {
    color: #495057 !important;
    background-color: #e9ecef !important;
    border-color: #ced4da;
}

.booking-status-badge.text-bg-warning {
    color: #856404 !important;
    background-color: #fff3cd !important;
    border-color: #ffe69c;
}

.booking-status-badge.text-bg-info {
    color: #084298 !important;
    background-color: #cfe2ff !important;
    border-color: #9ec5fe;
}

.booking-status-badge.text-bg-danger {
    color: #842029 !important;
    background-color: #f8d7da !important;
    border-color: #f5c2c7;
}

.booking-status-badge.text-bg-success {
    color: #0f5132 !important;
    background-color: #d1e7dd !important;
    border-color: #a3cfbb;
}

/* Fallback utility yang hilang di theme (dipakai badge non-booking, mis. Outdoor) */
.bg-warning {
    background-color: #ffc107 !important;
}

.text-bg-warning {
    color: #212529 !important;
    background-color: #ffc107 !important;
}

/*
 * Primary theme = lime (#E0F465): outline-primary nyaris tak terbaca di latar putih.
 * Standar global: abu agak gelap agar kontras aman di semua halaman.
 */
.btn-outline-primary {
    --bs-btn-color: #495057;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #495057;
    --bs-btn-hover-border-color: #495057;
    --bs-btn-focus-shadow-rgb: 73, 80, 87;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #343a40;
    --bs-btn-active-border-color: #343a40;
    --bs-btn-disabled-color: #adb5bd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ced4da;
}

/* Spinner primary (lime) hampir tak terlihat di background putih */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: #6c757d !important;
}

/* text-warning tidak ada di theme Fuzio */
.text-warning {
    color: #997404 !important;
}

.booking-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

.booking-btn-ssrd {
    white-space: nowrap;
}

.ssrd-preview-thumb {
    display: block;
    width: 100%;
    max-width: 320px;
    height: 360px;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
    background: #fff;
}

.ssrd-preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.ssrd-modal-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
}

.ssrd-modal-dialog .modal-content {
    height: 100%;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

.ssrd-modal-dialog .modal-header,
.ssrd-modal-dialog .modal-footer {
    flex-shrink: 0;
}

.ssrd-modal-dialog .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #525659;
}

.ssrd-modal-iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    display: block;
    flex: 1 1 auto;
    background: #525659;
}

@media (max-width: 767.98px) {
    .ssrd-modal-dialog .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ssrd-modal-dialog .modal-footer .btn {
        flex: 1 1 auto;
    }
}

.booking-mobile-card {
    border-radius: 12px;
}

.booking-mobile-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #f0f2f5;
    font-size: 0.9rem;
}

.booking-mobile-row > span {
    color: #6c757d;
    flex-shrink: 0;
}

.booking-mobile-row > strong {
    text-align: right;
    font-weight: 600;
    color: #212529;
}

.booking-mobile-total {
    border-bottom: 0;
    margin-top: 0.25rem;
}

.booking-mobile-total strong {
    font-size: 1rem;
}

.booking-empty {
    border-radius: 12px;
}

.booking-table-card {
    border-radius: 12px;
    overflow: hidden;
}

/* Detail booking customer */
.booking-detail-card {
    border-radius: 12px;
}

.booking-detail-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 1rem;
}

.booking-detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.booking-detail-field > span {
    color: #6c757d;
    font-size: 0.8125rem;
}

.booking-detail-field > strong {
    font-weight: 600;
    color: #212529;
    word-break: break-word;
}

.booking-slot {
    padding: 0.25rem 0 1.25rem;
}

.booking-slot--divider {
    border-bottom: 1px solid #eef1f4;
    margin-bottom: 1.25rem;
}

.booking-slot-head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

@media (min-width: 576px) {
    .booking-slot-head {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
    }
}

.booking-slot-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    color: #495057;
    font-size: 0.875rem;
    margin-bottom: 0.85rem;
}

.booking-usage-badge {
    color: #495057 !important;
    background-color: #e9ecef !important;
    border: 1px solid #ced4da;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
}

.booking-slot-lines {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
}

.booking-slot-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    font-size: 0.9rem;
}

.booking-slot-line > span {
    color: #495057;
}

.booking-slot-line > strong {
    white-space: nowrap;
    font-weight: 600;
    color: #212529;
}

.booking-addons {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #dee2e6;
}

.booking-addons-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.booking-slot-line--addon {
    padding: 0.35rem 0;
}

.booking-slot-line--addon .booking-meta {
    display: block;
    margin-top: 0.15rem;
}

.booking-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.45rem 0;
    font-size: 0.925rem;
    border-bottom: 1px solid #f0f2f5;
}

.booking-summary-row > span {
    color: #6c757d;
}

.booking-summary-row > strong {
    font-weight: 600;
    color: #212529;
    white-space: nowrap;
}

.booking-summary-row--total {
    border-bottom: 0;
    padding-top: 0.85rem;
    margin-top: 0.25rem;
}

.booking-summary-row--total > span,
.booking-summary-row--total > strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: #212529;
}

.booking-proof-thumb {
    max-width: 100%;
    width: 220px;
    cursor: pointer;
}

.booking-detail-summary .ssrd-preview-thumb,
.booking-detail-card .ssrd-preview-thumb {
    max-width: 100%;
}

/* Checkout */
.checkout-page .checkout-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: #495057;
    margin-bottom: 0.35rem;
}

.checkout-billing-card .form-control {
    border-radius: 0.5rem;
    border-color: #dee2e6;
    padding: 0.65rem 0.85rem;
}

.checkout-billing-card .form-control:focus {
    border-color: #adb5bd;
    box-shadow: 0 0 0 0.2rem rgba(73, 80, 87, 0.12);
}

.checkout-summary-card {
    position: sticky;
    top: 1.25rem;
}

.checkout-slot--past {
    opacity: 0.92;
}

.checkout-slot--past .booking-slot-lines {
    background: #fdecec;
}

.checkout-past-warning {
    color: #842029;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.45rem 0.65rem;
}

.checkout-totals {
    border-top: 1px solid #eef1f4;
}

.checkout-edit-cart {
    color: #495057;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
}

.checkout-edit-cart:hover {
    color: #212529;
    text-decoration: underline;
}

.checkout-empty .booking-meta {
    font-size: 0.9rem;
}

@media (max-width: 991.98px) {
    .checkout-summary-card {
        position: static;
    }
}

/* Cart page */
.cart-slot-card .cart-slot-remove {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
}

.cart-slot-card .cart-slot-remove .feather-icon {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 0.95rem;
    width: auto;
    height: auto;
}

.cart-slot-card .cart-slot-remove .feather-icon::before {
    margin: 0;
    line-height: 1;
}

.cart-slot-card--past .booking-slot-lines {
    background: #fdecec;
}

.cart-addon-row {
    align-items: center;
}

.cart-addon-check {
    cursor: pointer;
    margin: 0;
}

.cart-addon-checkbox {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

.cart-addon-qty {
    width: 4.5rem;
    border-radius: 0.5rem;
}

.cart-summary-card {
    position: sticky;
    top: 1.25rem;
}

@media (max-width: 991.98px) {
    .cart-summary-card {
        position: static;
    }
}

/* Galeri beranda */
.home-gallery-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 10%, rgba(219, 253, 82, 0.12), transparent 28%),
        #fff;
}

.home-gallery-eyebrow {
    color: #35b968;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-gallery-carousel-wrap {
    position: relative;
    padding: 0 48px;
}

.home-gallery-carousel {
    padding: 10px 4px 28px;
}

.home-gallery-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    background: #eef1f3;
    box-shadow: 0 12px 30px rgba(14, 20, 34, 0.1);
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.home-gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    color: #fff;
    background: linear-gradient(to top, rgba(7, 11, 20, 0.78), rgba(7, 11, 20, 0) 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.home-gallery-caption {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-gallery-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #111;
    background: #dbfd52;
}

.home-gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(14, 20, 34, 0.17);
}

.home-gallery-card:hover img {
    transform: scale(1.055);
}

.home-gallery-card:hover .home-gallery-overlay,
.home-gallery-card:focus-visible .home-gallery-overlay {
    opacity: 1;
}

.home-gallery-prev,
.home-gallery-next {
    position: absolute;
    z-index: 3;
    top: calc(50% - 24px);
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #111;
    background: #dbfd52;
    box-shadow: 0 8px 22px rgba(14, 20, 34, 0.18);
    transform: translateY(-50%);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.home-gallery-prev {
    left: -2px;
}

.home-gallery-next {
    right: -2px;
}

.home-gallery-prev:hover,
.home-gallery-next:hover {
    background: #cdf13a;
    transform: translateY(-50%) scale(1.07);
}

.home-gallery-prev.swiper-button-disabled,
.home-gallery-next.swiper-button-disabled {
    cursor: default;
    opacity: 0.35;
}

.home-gallery-pagination {
    position: static;
    display: flex;
    justify-content: center;
    margin-top: 2px;
}

.home-gallery-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #adb5bd;
    opacity: 0.55;
}

.home-gallery-pagination .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 20px;
    background: #35b968;
    opacity: 1;
}

@media (max-width: 991.98px) {
    .home-gallery-overlay {
        opacity: 1;
    }
}

@media (max-width: 575.98px) {
    .home-gallery-carousel-wrap {
        padding: 0 34px;
    }

    .home-gallery-card {
        border-radius: 12px;
    }

    .home-gallery-prev,
    .home-gallery-next {
        width: 38px;
        height: 38px;
    }

    .home-gallery-prev {
        left: -4px;
    }

    .home-gallery-next {
        right: -4px;
    }
}