/* ==========================================================================
           1. ROOT & DESIGN SYSTEM
           ========================================================================= */
        :root {
            --sbhd-primary: #0F2D52;
            --sbhd-accent: #0F6A3A;
            --sbhd-gold: #D4A017;
            
            --bg-body: #F8FAFC;
            --bg-card: #FFFFFF;
            --bg-alt: #F1F5F9;
            --text-dark: #0F172A;
            --text-muted: #64748B;
            --border-light: #E2E8F0;
            
            --radius-compact: 12px;
            --radius-inner: 8px;
            --transition-fast: 0.2s ease;
            --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05);
            --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08);
        }

        /* Reset Base */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-body);
            color: var(--text-dark);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            padding-bottom: 80px;
            padding-top: 60px;
        }
        @media (min-width: 992px) {
            body { padding-bottom: 20px;
            padding-top: 80px;}
        }

        a { text-decoration: none; color: inherit; }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 16px;
        }

        /* Global Badges & Tags */
        .tour-meta-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            margin-top: 12px;
        }
        .tag-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 50px;
            background-color: var(--bg-alt);
            color: var(--text-dark);
        }
        .tag-badge.trip-type { background-color: #E6F4EA; color: #137333; }
        .tag-badge.trip-duration { background-color: #E8F0FE; color: #1A73E8; }
        .tag-badge.trip-rating { background-color: #FEF7E0; color: #B06000; }
        .tag-badge i { font-size: 13px; }


        /* ==========================================================================
   2. BREADCRUMBS
   ========================================================================== */

.breadcrumb-nav{
    padding:20px 0 12px;
    font-size:12px;
    color:var(--text-muted);

    display:flex;
    align-items:center;
    gap:8px;

    flex-wrap:nowrap;
    overflow:hidden;
    white-space:nowrap;
    position:relative;
}

.breadcrumb-nav a{
    color:var(--sbhd-accent);
    font-weight:500;
    transition:var(--transition-fast);

    flex-shrink:0;
}

.breadcrumb-nav a:hover{
    color:var(--sbhd-primary);
}

.breadcrumb-nav i{
    font-size:10px;
    color:#CBD5E1;
    flex-shrink:0;
}

.breadcrumb-nav span{
    font-weight:600;
    color:var(--text-dark);

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    min-width:0;
}

/* Fade kanan */
.breadcrumb-nav::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:48px;
    height:100%;
    pointer-events:none;
    background:linear-gradient(
        to right,
        rgba(248,250,252,0),
        var(--bg-body)
    );
}

        /* ==========================================================================
           3. HEADER & TITLE BLOCK
           ========================================================================= */
        .pkg-header-block {
            margin-bottom: 24px;
        }
        .pkg-main-title {
            font-size: 24px;
            font-weight: 800;
            color: var(--sbhd-primary);
            line-height: 1.3;
        }
        @media (min-width: 768px) {
            .pkg-main-title { font-size: 32px; }
        }

        /* ==========================================================================
           4. GALLERY SYSTEM (Premium Mosaic Grid Layout)
           ========================================================================= */
        .pkg-gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 160px);
            gap: 12px;
            margin-bottom: 32px;
        }
        
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-inner);
            background-color: var(--border-light);
            cursor: pointer;
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }
        
        /* Hover Effect Zoom-In */
        .gallery-item:hover img {
            transform: scale(1.04);
        }
        
        /* Foto Utama Sisi Kiri (Desktop) */
        .gallery-item.main-view {
            grid-column: span 2;
            grid-row: span 2;
            border-radius: var(--radius-compact);
        }
        
        /* Overlay & Badge Foto Terakhir */
        .gallery-item.last-item .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(15, 45, 82, 0.4); /* Biru tua semi-transparan */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
            z-index: 2;
        }
        
        .gallery-item.last-item .overlay-badge {
            color: #FFFFFF;
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            padding: 0 8px;
        }

        /* Responsive Media Query Gallery (Mobile) */
        @media (max-width: 768px) {
            .pkg-gallery-grid {
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows: 240px 65px;
                gap: 8px;
            }
            
            .gallery-item.main-view {
                grid-column: 1 / 5;
                grid-row: 1 / 2;
            }
            
            .gallery-item:not(.main-view) {
                grid-row: 2 / 3;
                grid-column: auto;
            }
            
            .gallery-item.last-item .gallery-overlay {
                background-color: rgba(0, 0, 0, 0.4); /* Hitam transparan di mobile */
            }
            
            .gallery-item.last-item .overlay-badge {
                font-size: 13px;
            }
        }

        /* ==========================================================================
           5. MAIN LAYOUT GRID (Kiri: Deskripsi & Detail, Kanan: Form)
           ========================================================================= */
        .single-pkg-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
            align-items: start;
        }
        @media (min-width: 992px) {
            .single-pkg-grid {
                grid-template-columns: 1.8fr 1.2fr;
                gap: 32px;
            }
        }

        /* Detail Cards (Left Column) */
.detail-block-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-compact);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.detail-block-card:last-child {
    margin-bottom: 0;
}

.detail-block-card h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--sbhd-primary);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.detail-block-card h2 i {
    color: var(--sbhd-accent);
    font-size: 18px;
}

.detail-card-body {
    font-size: 14.5px;
    color: #334155;
    line-height: 1.7;
}

.detail-card-body p {
    margin-bottom: 14px;
}

.detail-card-body p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   READ MORE
   ========================================================================== */

.read-more-trigger {
    display: none;
}

.read-more-content {
    position: relative;
    max-height: 180px;
    overflow: hidden;
    transition: max-height .4s ease;
}

.read-more-content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        var(--bg-card) 100%
    );
    transition: opacity .3s ease;
}

.btn-read-more-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;

    color: var(--sbhd-accent);
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
    user-select: none;
    transition: var(--transition-fast);
}

.btn-read-more-label:hover {
    color: var(--sbhd-primary);
}

.btn-read-more-label i {
    font-size: 11px;
}

.btn-read-more-label .collapse-text {
    display: none;
}

.read-more-trigger:checked ~ .read-more-content {
    max-height: 5000px;
}

.read-more-trigger:checked ~ .read-more-content::after {
    opacity: 0;
    visibility: hidden;
}

.read-more-trigger:checked ~ .btn-read-more-label .expand-text {
    display: none;
}

.read-more-trigger:checked ~ .btn-read-more-label .collapse-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

        /* Facilities Specification Grid */
        .fac-split-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
        }
        @media (min-width: 768px) {
            .fac-split-grid { grid-template-columns: repeat(2, 1fr); }
        }
        .fac-sub-list { display: flex; flex-direction: column; gap: 12px; }
        .fac-sub-list h4 {
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .fac-sub-list.included h4 { color: var(--sbhd-accent); }
        .fac-sub-list.excluded h4 { color: #DC2626; }

        .fac-bullet { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #334155; }
        .fac-bullet i { margin-top: 4px; font-size: 14px; flex-shrink: 0; }
        .fac-sub-list.included i { color: var(--sbhd-accent); }
        .fac-sub-list.excluded i { color: #EF4444; }

        /* Itinerary Timeline Components */
        .itinerary-timeline { position: relative; padding-left: 24px; margin-left: 8px; }
        .itinerary-timeline::before {
            content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--border-light);
        }
        .itinerary-step { position: relative; margin-bottom: 24px; }
        .itinerary-step:last-child { margin-bottom: 0; }
        .itinerary-step::before {
            content: ''; position: absolute; left: -28px; top: 5px; width: 10px; height: 10px;
            border-radius: 50%; background: var(--sbhd-gold); border: 2px solid var(--bg-card); box-shadow: 0 0 0 2px var(--sbhd-gold);
        }
        .itinerary-day { font-size: 11px; font-weight: 700; color: var(--sbhd-accent); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 2px; }
        .itinerary-title { font-size: 15px; font-weight: 700; color: var(--sbhd-primary); margin-bottom: 6px; }
        .itinerary-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

.map-frame-holder{
    width:100%;
    aspect-ratio:16 / 9;

    overflow:hidden;
    border-radius:var(--radius-inner);
    border:1px solid var(--border-light);

    position:relative;
}

/* Google Maps */
.map-frame-holder iframe{
    position:absolute;
    inset:0;

    width:100% !important;
    height:100% !important;
}

        /* ==========================================================================
           6. RIGHT SIDEBAR - BOOKING FORM (Sticky Layout)
           ========================================================================= */
        .sticky-sidebar-holder {
            position: sticky;
            top: 88px;
            z-index: 10;
            display: none;
        }
        @media (min-width: 992px) {
            .sticky-sidebar-holder { display: block; }
        }
        
        .booking-conversion-card {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-compact);
            padding: 24px;
            box-shadow: var(--shadow-lg);
        }
        .price-showcase-box {
            background: var(--bg-alt);
            border-radius: var(--radius-inner);
            padding: 16px;
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .price-showcase-box .price-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
        .price-showcase-box .price-amount { font-size: 24px; font-weight: 800; color: var(--sbhd-primary); }
        .price-showcase-box .price-amount span { font-size: 13px; font-weight: 500; color: var(--text-muted); }

        /* Form Styling */
        .conversion-form .form-group { margin-bottom: 16px; }
        .conversion-form label { display: block; font-size: 12px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
        .conversion-form .input-with-icon { position: relative; }
        .conversion-form .input-with-icon i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; }
        .conversion-form .form-control {
            width: 100%; height: 44px; border: 1px solid var(--border-light); border-radius: var(--radius-inner);
            padding: 0 14px 0 38px; font-size: 13.5px; font-family: inherit; background-color: var(--bg-body); color: var(--text-dark); transition: var(--transition-fast); outline: none;
        }
        .conversion-form .form-control:focus { border-color: var(--sbhd-accent); background-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(15, 106, 58, 0.08); }
        
        .btn-submit-booking {
            width: 100%; height: 46px; background-color: var(--sbhd-accent); color: #FFFFFF; border: none; border-radius: var(--radius-inner);
            font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 4px 12px rgba(15, 106, 58, 0.2);
            display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: var(--transition-fast); margin-top: 8px;
        }
        .btn-submit-booking:hover { background-color: #0b522d; transform: translateY(-1px); }

        .urgency-notifier {
            margin-top: 16px; background-color: #FFF5F5; border: 1px dashed #FEB2B2; border-radius: var(--radius-inner); padding: 12px;
            font-size: 12px; color: #C53030; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5;
        }
        .urgency-notifier i { margin-top: 2px; }

        /* ==========================================================================
           7. RELATED PACKAGES SECTION
           ========================================================================= */
        .related-section { padding: 56px 0; background-color: var(--bg-alt); border-top: 1px solid var(--border-light); margin-top: 56px; }
        .section-header-row { margin-bottom: 24px; }
        .section-title-area h2 { font-size: 20px; font-weight: 800; color: var(--sbhd-primary); }
        .section-title-area p { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }
        
        .related-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
        @media (min-width: 576px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 992px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }

        .pkg-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-compact); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition-fast); display: flex; flex-direction: column; height: 100%; }
        .pkg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
        .pkg-card-header { position: relative; height: 180px; background-color: var(--border-light); }
        .pkg-card-header img { width: 100%; height: 100%; object-fit: cover; }
        /* Badge Paket Wisata */
.pkg-card-badge{
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 10px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    border-radius: 999px;

    color: #fff;

    text-transform: uppercase;
    letter-spacing: .3px;

    box-shadow: var(--shadow-sm);
}
.pkg-card-badge.rekomendasi{
    background: #2563EB;
}

.pkg-card-badge.terlaris{
    background: #EA580C;
}

.pkg-card-badge.populer{
    background: var(--sbhd-accent);
}
        .pkg-card-content { padding: 16px; display: flex; flex-direction: column; flex-grow: 1; }
        .pkg-card-title { font-size: 14.5px; font-weight: 700; color: var(--sbhd-primary); line-height: 1.4; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 40px; }
        .pkg-meta-info { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--border-light); }
        .pkg-meta-info span { display: inline-flex; align-items: center; gap: 4px; }
        .pkg-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
        .pkg-card-price { display: flex; flex-direction: column; }
        .pkg-card-price .lbl { font-size: 11px; color: var(--text-muted); }
        .pkg-card-price .val { font-size: 15px; font-weight: 800; color: var(--sbhd-accent); }
        .pkg-card-price .val span { font-size: 11px; font-weight: 400; color: var(--text-muted); }
        
        .pkg-card-btn { height: 34px; padding: 0 12px; background-color: var(--bg-alt); color: var(--sbhd-primary); font-size: 12px; font-weight: 600; border-radius: var(--radius-inner); display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-fast); }
        .pkg-card:hover .pkg-card-btn { background-color: var(--sbhd-accent); color: #FFFFFF; }

        /* ==========================================================================
           8. MOBILE STICKY BOTTOM ACTION BAR
           ========================================================================= */
        .mobile-sticky-action-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #FFFFFF; border-top: 1px solid var(--border-light); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 -4px 16px rgba(15, 45, 82, 0.06); z-index: 90; }
        @media (min-width: 992px) { .mobile-sticky-action-bar { display: none !important; } }
        .ms-price-layout { display: flex; flex-direction: column; }
        .ms-price-layout .lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
        .ms-price-layout .val { font-size: 16px; font-weight: 800; color: var(--sbhd-primary); }
        .ms-price-layout .val span { font-size: 11px; font-weight: 500; color: var(--text-muted); }
        .ms-btn-action { height: 42px; padding: 0 20px; background-color: var(--sbhd-accent); color: #FFFFFF; border: none; border-radius: var(--radius-inner); font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 10px rgba(15, 106, 58, 0.15); }

        /* ==========================================================================
           9. MOBILE SLIDE UP BOTTOM SHEET FORM
           ========================================================================= */
        .sheet-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 45, 82, 0.5); backdrop-filter: blur(2px); z-index: 95; display: none; opacity: 0; transition: opacity 0.3s ease; }
        .sheet-overlay.active { display: block; opacity: 1; }
        
        .mobile-bottom-sheet-modal { position: fixed; bottom: -100%; left: 0; right: 0; background: #FFFFFF; border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0 -10px 30px rgba(0,0,0,0.1); z-index: 100; padding: 24px; max-height: 85vh; overflow-y: auto; transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
        .mobile-bottom-sheet-modal.active { bottom: 0; }
        .sheet-close-btn { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; background: var(--bg-alt); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dark); cursor: pointer; font-size: 14px; }
        .sheet-header-title { font-size: 16px; font-weight: 700; color: var(--sbhd-primary); margin-bottom: 20px; padding-right: 30px; }

        /* Footer */
        .site-footer { background-color: var(--sbhd-primary); color: #FFFFFF; padding: 24px 0; text-align: center; font-size: 13px; }
        .site-footer p { opacity: 0.8; }

        /* ==========================================================================
           10. PREMIUM LIGHTBOX OVERLAY SYSTEM
           ========================================================================= */
        .lightbox-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(15, 23, 42, 0.95); /* Slate 900 semi-transparan premium */
            backdrop-filter: blur(6px);
            z-index: 200;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .lightbox-overlay.active {
            display: flex;
            opacity: 1;
        }
        .lightbox-wrapper {
            position: relative;
            max-width: 85%;
            max-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .lightbox-img {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
            border-radius: var(--radius-inner);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            user-select: none;
            animation: fadeInLightbox 0.25s ease-out;
        }
        @keyframes fadeInLightbox {
            from { opacity: 0; transform: scale(0.97); }
            to { opacity: 1; transform: scale(1); }
        }
        .lightbox-close-btn {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            cursor: pointer;
            font-size: 18px;
            transition: var(--transition-fast);
            z-index: 220;
        }
        .lightbox-close-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            color: #FFFFFF;
        }
        .lightbox-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #FFFFFF;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 16px;
            transition: var(--transition-fast);
            z-index: 210;
        }
        .lightbox-nav-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        .lightbox-nav-btn.prev-btn { left: -64px; }
        .lightbox-nav-btn.next-btn { right: -64px; }

        /* Responsive Lightbox di Ponsel */
        @media (max-width: 992px) {
            .lightbox-wrapper { max-width: 95%; }
            .lightbox-nav-btn.prev-btn { left: 4px; background: rgba(15, 23, 42, 0.6); }
            .lightbox-nav-btn.next-btn { right: 4px; background: rgba(15, 23, 42, 0.6); }
        }