/**
Theme Name: Komodo Fantastico Tour
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: komodo-fantastico-tour
Template: astra
*/

/* ==========================================================================
   BSO PRO AUTOMATIC CATALOG STYLING
   ========================================================================== */

/* 1. Kontainer Utama Katalog */
.bsopro-catalog-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 40px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header Judul Katalog */
.bsopro-catalog-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.bsopro-catalog-header p {
    color: #4b5563;
    font-size: 15px;
    margin: 0;
}

/* 2. Sistem Grid Responsif (Otomatis menyesuaikan layar HP/Tablet/PC) */
.bsopro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

/* 3. Desain Kartu Produk Premium */
.bsopro-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px; /* Sudut lengkung lebih halus dan modern */
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Efek transisi animasi yang super smooth */
    position: relative;
}

/* INTERAKSI: Efek Kartu Terangkat (Hover Lift Effect) saat kursor mendekat */
.bsopro-card:hover {
    transform: translateY(-8px); /* Kartu terangkat ke atas sedikit */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Bayangan melebar lembut */
    border-color: #d1d5db;
}

/* 4. Area Gambar & Transisi Zoom */
.bsopro-card-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 65%; /* Rasio gambar proporsional pariwisata */
    background: #f3f4f6;
    overflow: hidden;
}

.bsopro-card-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease; /* Animasi zoom gambar */
}

/* INTERAKSI: Gambar sedikit membesar saat kartu di-hover */
.bsopro-card:hover .bsopro-card-image-wrapper img {
    transform: scale(1.06);
}

/* Badge Kilat / Penanda Terpopuler */
.bsopro-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #ff4d4d;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 2px 4px rgba(255, 77, 77, 0.3);
    z-index: 2;
}

/* 5. Area Konten & Teks */
.bsopro-card-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bsopro-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px 0;
    line-height: 1.4;
    min-height: 50px;
}

.bsopro-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* INTERAKSI: Judul berubah warna mengikuti brand saat di-hover */
.bsopro-card:hover .bsopro-card-title a {
    color: #2563eb; /* Silakan ganti sesuai warna brand agen nanti */
}

/* Meta Informasi (Lokasi & Durasi) */
.bsopro-card-meta {
    font-size: 13.5px;
    color: #6b7280;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bsopro-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 6. Bagian Bawah: Harga & Tombol Aksi */
.bsopro-card-footer {
    border-top: 1px solid #f3f4f6;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bsopro-price-label {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.bsopro-price-value {
    font-size: 17px;
    font-weight: 750;
    color: #059669; /* Hijau Emerald khas harga aman */
}

/* Tombol Aksi Keren */
.bsopro-btn-action {
    background: #2563eb; /* Biru default—bisa disesuaikan selera agen */
    color: #ffffff !important;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* INTERAKSI: Tombol sedikit menggelap saat diarahkan kursor */
.bsopro-btn-action:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 6px -1px rgba(29, 78, 216, 0.3);
}

/* 7. Pengaturan Khusus Layar Kecil (Mobile Optimization) */
@media (max-width: 480px) {
    .bsopro-grid {
        grid-template-columns: 1fr; /* Di HP kartu menjadi susunan 1 kolom penuh */
        gap: 20px;
    }
    
    .bsopro-catalog-header h2 {
        font-size: 24px;
    }
    
    .bsopro-card-content {
        padding: 18px;
    }
}

/* ==========================================================================
   🔍 STYLING DYNAMIC SEARCH BAR PREMIUM BSO PRO
   ========================================================================== */
.bsopro-search-input-group {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    width: 320px;
    max-width: 100%;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Interaksi saat kotak pencarian di-klik aktif oleh pengunjung */
.bsopro-search-input-group:focus-within {
    border-color: #2563eb; /* Berubah warna mengikuti brand utama */
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.1), 0 4px 6px -4px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.bsopro-search-input {
    border: none !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #1f2937 !important;
    width: 100% !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.bsopro-search-input::placeholder {
    color: #9ca3af;
}

.bsopro-search-button {
    background: transparent !important;
    border: none !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    color: #4b5563 !important;
    transition: transform 0.2s ease !important;
    outline: none !important;
}

.bsopro-search-button:hover {
    transform: scale(1.15);
}

/* Optimasi responsif untuk layar HP agar layout-nya tidak patah */
@media (max-width: 640px) {
    .bsopro-catalog-header-grid {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .bsopro-catalog-search-wrapper,
    .bsopro-search-form,
    .bsopro-search-input-group {
        width: 100%;
    }
}




/* ==========================================================================
   BSO PRO AUTOMATIC DETAIL PAGE VISUAL STYLING
   ========================================================================== */
.bsopro-detail-page-wrapper { background: #f9fafb; padding: 40px 0; font-family: system-ui, -apple-system, sans-serif; }
.bsopro-detail-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.bsopro-back-link { color: #2563eb; text-decoration: none; font-size: 14px; font-weight: 600; display: inline-block; margin-bottom: 12px; }
.bsopro-detail-main-title { font-size: 32px; font-weight: 800; color: #111827; margin: 0 0 10px 0; line-height: 1.2; }
.bsopro-detail-quick-meta { display: flex; gap: 15px; color: #6b7280; font-size: 14px; }
.bsopro-detail-hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-top: 25px; align-items: start; }
.bsopro-detail-image-box { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.bsopro-detail-image-box img { width: 100%; height: auto; display: block; object-fit: cover; max-height: 480px; }
.bsopro-detail-price-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 30px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); position: sticky; top: 30px; }
.bsopro-detail-price-label { font-size: 11px; color: #9ca3af; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; display: block; margin-bottom: 4px; }
.bsopro-detail-price-amount { font-size: 28px; font-weight: 850; color: #059669; margin-bottom: 15px; }
.bsopro-detail-short-desc { font-size: 14px; color: #4b5563; line-height: 1.6; margin: 0 0 25px 0; }
.bsopro-detail-btn-book { display: block; width: 100%; background: #2563eb; color: #ffffff !important; text-align: center; padding: 14px; border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2); transition: all 0.2s; }
.bsopro-detail-btn-book:hover { background: #1d4ed8; transform: translateY(-1px); }
.bsopro-detail-btn-notice { font-size: 11.5px; color: #9ca3af; text-align: center; margin-top: 8px; font-style: italic; }
.bsopro-detail-section-card { background: #ffffff; padding: 30px; border: 1px solid #e5e7eb; border-radius: 16px; margin-bottom: 25px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.bsopro-detail-section-title { font-size: 20px; font-weight: 700; color: #111827; margin: 0 0 15px 0; border-bottom: 2px solid #f3f4f6; padding-bottom: 10px; }
.bsopro-detail-rich-text { color: #4b5563; line-height: 1.7; font-size: 14.5px; }
.bsopro-detail-bullet-list { margin: 15px 0 0 0; padding-left: 20px; color: #4b5563; line-height: 1.6; }
.bsopro-detail-bullet-list li { margin-bottom: 6px; }
.bsopro-detail-sub-section-title { font-size: 16px; font-weight: 700; color: #111827; margin: 25px 0 12px 0; }
.bsopro-detail-timeline-wrapper { display: flex; flex-direction: column; gap: 20px; position: relative; padding-left: 20px; border-left: 2px solid #e5e7eb; margin-left: 10px; }
.bsopro-timeline-node { position: relative; }
.bsopro-timeline-bullet { position: absolute; left: -27px; top: 4px; background: #2563eb; color: #fff; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px #2563eb; }
.bsopro-timeline-day-title { font-size: 15.5px; font-weight: 700; color: #111827; margin: 0 0 6px 0; }
.bsopro-timeline-day-title .day-badge { color: #2563eb; }
.bsopro-timeline-day-desc { color: #4b5563; margin: 0; font-size: 14px; line-height: 1.6; }
.bsopro-detail-split-grid-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-bottom: 25px; }
.bsopro-detail-section-card.inc-box { border-left: 4px solid #10b981; }
.bsopro-detail-section-title.inc-title { color: #059669; border-bottom-color: #ecfdf5; }
.bsopro-detail-check-list { list-style: none; padding: 0; margin: 0; line-height: 1.6; font-size: 14px; }
.bsopro-detail-check-list li { margin-bottom: 8px; color: #4b5563; }
.bsopro-detail-check-list li span { color: #10b981; font-weight: 700; margin-right: 6px; }
.bsopro-detail-section-card.exc-box { border-left: 4px solid #ef4444; }
.bsopro-detail-section-title.exc-title { color: #dc2626; border-bottom-color: #fef2f2; }
.bsopro-detail-cross-list { list-style: none; padding: 0; margin: 0; line-height: 1.6; font-size: 14px; }
.bsopro-detail-cross-list li { margin-bottom: 8px; color: #4b5563; }
.bsopro-detail-cross-list li span { color: #ef4444; font-weight: 700; margin-right: 6px; }
.bsopro-detail-section-card.policy-box { border-left: 4px solid #6b7280; }
.bsopro-detail-section-title.policy-title { color: #374151; border-bottom-color: #f3f4f6; }
.bsopro-faq-item-row { border: 1px solid #f3f4f6; padding: 15px; border-radius: 8px; background: #fafafa; margin-bottom: 12px; }
.bsopro-faq-question-label { font-size: 14.5px; font-weight: 700; color: #1f2937; margin: 0 0 6px 0; }
.bsopro-faq-answer-block { color: #4b5563; margin: 0; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 768px) { .bsopro-detail-hero-grid { grid-template-columns: 1fr; } .bsopro-detail-price-card { position: static; } }

/* ==========================================================================
   PATCH STYLING PENYEMPURNAAN GALERI & DISKON BSO PRO (ANTI-KENTANG)
   ========================================================================== */
.bsopro-detail-media-gallery-wrapper { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.bsopro-detail-gallery-grid-thumbnails { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; margin-top: 5px; }
.bsopro-thumb-item { border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 1/1; background: #f3f4f6; transition: all 0.2s ease; }
.bsopro-thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsopro-thumb-item:hover { border-color: #9ca3af; transform: scale(1.03); }
.bsopro-thumb-item.active-thumb { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); }
.bsopro-detail-price-amount-block { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.bsopro-actual-price { font-size: 28px; font-weight: 850; color: #059669; display: block; }
.bsopro-detail-discount-tag { display: inline-block; }
.bsopro-detail-discount-tag .discount-label { background: #fef2f2; color: #dc2626; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; border: 1px solid #fee2e2; display: inline-block; }
.rating-badge { background: #fffbeb !important; color: #b45309 !important; border: 1px solid #fef3c7; }
.bsopro-detail-bullet-list.bring-type li { list-style: none; padding-left: 0; }
.bsopro-detail-bullet-list.info-type li { list-style: none; padding-left: 0; }
.bsopro-detail-bullet-list.feature-type li { list-style: none; padding-left: 0; font-weight: 600; color: #1f2937; }

/* ==========================================================================
   🔢 STYLING NAVIGATION PAGINASI PREMIUM BSO PRO
   ========================================================================== */
.bsopro-pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 45px;
    margin-bottom: 20px;
    width: 100%;
}

.bsopro-page-nav {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #4b5563 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* Interaksi saat tombol angka disorot kursor mouse */
.bsopro-page-nav:hover {
    border-color: #2563eb;
    color: #2563eb !important;
    background: #f8fafc;
    transform: translateY(-1px);
}

/* Penanda halaman aktif yang sedang dibuka oleh pengunjung (Active Page) */
.bsopro-page-nav.active-page {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.25);
    cursor: default;
    transform: none !important;
}

/* Gaya khusus untuk tombol teks Prev dan Next */
.bsopro-page-nav.btn-prev-next {
    padding: 0 16px;
}

/* ==========================================================================
   🌐 STYLING DROPDOWN MULTI-BAHASA PREMIUM BSO PRO
   ========================================================================== */
.bsopro-lang-dropdown-wrapper {
    position: relative;
    display: inline-block;
    font-family: system-ui, -apple-system, sans-serif;
    z-index: 9999;
}

.bsopro-lang-dropdown-btn {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #4b5563 !important;
    padding: 8px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}

.bsopro-lang-dropdown-btn:hover {
    border-color: #2563eb;
    color: #2563eb !important;
    background: #f8fafc !important;
}

.bsopro-lang-dropdown-btn .arrow-down {
    font-size: 9px;
    color: #9ca3af;
    transition: transform 0.2s;
}

/* Memunculkan Menu Dropdown secara Elegan saat Kursor Mouse Didekatkan (Hover) */
.bsopro-lang-dropdown-wrapper:hover .bsopro-lang-dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bsopro-lang-dropdown-wrapper:hover .bsopro-lang-dropdown-btn .arrow-down {
    transform: rotate(180deg);
    color: #2563eb;
}

.bsopro-lang-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    min-width: 140px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 0;
    margin: 4px 0 0 0;
    list-style: none !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsopro-lang-dropdown-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

.bsopro-lang-dropdown-menu li a {
    color: #4b5563 !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: background 0.15s ease !important;
}

.bsopro-lang-dropdown-menu li a:hover {
    background-color: #f3f4f6;
    color: #2563eb !important;
}

/* Penanda Bahasa yang Sedang Aktif Dipakai */
.bsopro-lang-dropdown-menu li.active-lang a {
    background-color: #eff6ff;
    color: #2563eb !important;
    font-weight: 700 !important;
}


/* ==========================================================================
   🧱 PENYEMPURNAAN VISUAL DROPDOWN 13 BAHASA MASTER BSO PRO
   ========================================================================== */
.bsopro-lang-dropdown-menu.modern-scroll {
    max-height: 280px !important; /* Batasi tinggi menu agar tidak jebol ke bawah monitor */
    overflow-y: auto !important; /* Aktifkan scroll vertikal otomatis */
    min-width: 150px !important;
}

/* Kustomisasi batang scroll agar terlihat minimalis dan rapi di browser Chrome/Safari */
.bsopro-lang-dropdown-menu.modern-scroll::-webkit-scrollbar {
    width: 6px;
}
.bsopro-lang-dropdown-menu.modern-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 8px 8px 0;
}
.bsopro-lang-dropdown-menu.modern-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.bsopro-lang-dropdown-menu.modern-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.bsopro-lang-dropdown-menu li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* ==========================================================================
   📸 PROPORSIONAL UKURAN BENDERA PNG FLAGCDN BSO PRO
   ========================================================================== */
.bsopro-header-flag-img {
    width: 22px !important;
    height: auto !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    display: inline-block !important;
}

.bsopro-menu-flag-img {
    width: 20px !important;
    height: auto !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.bsopro-lang-dropdown-menu li a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
}

.bsopro-menu-lang-name {
    font-size: 13px !important;
}