/* ==============================================
   SINGLE TOUR PLAN — single-tour-plan.css
   Only enqueued on single tour_plan pages.
   ============================================== */

/* ---------- Hero ---------- */
.tx-tour-hero {
    position:            relative;
    background-size:     cover;
    background-position: center;
    padding:             28px 0 100px;
}

.tx-tour-hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(180deg, rgba(0,20,50,0.55) 0%, rgba(0,20,50,0.75) 100%);
}

.tx-tour-hero .bc-trail { position: relative; z-index: 2; margin-bottom: 14px; }

.tx-tour-hero-title {
    position:     relative;
    z-index:      2;
    color:        #fff;
    font-family:  'Oswald', sans-serif;
    font-size:    clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight:  800;
    line-height:  1.25;
    margin-bottom: 12px;
    max-width: 720px;
}

.tx-tour-hero-meta {
    position: relative;
    z-index:  2;
    display:  flex;
    flex-wrap: wrap;
    gap:      18px;
    color:    rgba(255,255,255,0.85);
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.tx-tour-hero-meta i { color: var(--ts-gold, #f5a623); margin-right: 4px; }

.tx-tour-hero-excerpt {
    position: relative;
    z-index:  2;
    color:    rgba(255,255,255,0.8);
    font-size: 0.88rem;
    max-width: 600px;
    margin-bottom: 20px;
}

.tx-tour-hero-photos {
    position: relative;
    z-index:  2;
    display:  grid;
    grid-template-columns: repeat(4, 90px);
    gap:      10px;
}

.tx-tour-hero-photo-item {
    display:       block;
    width:         90px;
    height:        70px;
    border-radius: 8px;
    overflow:      hidden;
    border:        2px solid rgba(255,255,255,0.5);
}

.tx-tour-hero-photo-item img { width: 100%; height: 100%; object-fit: cover; }

.tx-tour-hero-photo-more {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0,0,0,0.6);
    color:           #fff;
    font-size:       0.7rem;
    font-weight:     700;
    text-align:      center;
    line-height:     1.3;
}

/* ---------- Tab nav ---------- */
.tx-tour-tabs {
    display:       flex;
    flex-wrap:     wrap;
    gap:           4px;
    background:    #fff;
    border-radius: 12px;
    box-shadow:    0 16px 40px rgba(0,0,0,0.1);
    padding:       8px;
    margin-top:    -46px;
    position:      relative;
    z-index:       3;
}

.tx-tour-tab {
    display:          inline-flex;
    align-items:      center;
    gap:              7px;
    padding:          12px 20px;
    border-radius:    8px;
    color:            var(--color-muted, #6c757d);
    text-decoration:  none;
    font-family:      'Nunito Sans', sans-serif;
    font-size:        0.85rem;
    font-weight:      700;
    transition:       color 0.2s ease, background 0.2s ease;
}

.tx-tour-tab:hover { color: var(--color-primary, #015285); background: var(--color-light-bg, #f7f9fb); }

.tx-tour-tab.is-active {
    color:      var(--color-primary, #015285);
    background: var(--color-light-bg, #f7f9fb);
}

/* ---------- Body ---------- */
#singleTourPlan { padding: 40px 0 60px; }

.tx-tour-tabpanel {
    scroll-margin-top: 130px; /* keeps a jumped-to section visible below the sticky tab bar */
    padding-top:    36px;
    padding-bottom: 36px;
    border-bottom:  1px solid var(--color-border, #e9ecef);
}

.tx-tour-tabpanel:first-child { padding-top: 0; }
.tx-tour-tabpanel:last-of-type { border-bottom: none; padding-bottom: 0; }

.tx-tour-h2 {
    font-family: 'Oswald', sans-serif;
    font-size:   1.35rem;
    font-weight: 800;
    color:       var(--color-navy, #00406B);
    margin-bottom: 14px;
}

.tx-tour-about-content p {
    color: #444;
    font-size: 0.93rem;
    line-height: 1.8;
    margin-bottom: 14px;
}

/* Info grid */
.tx-tour-info-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap:                   14px;
    background:            var(--color-light-bg, #f7f9fb);
    border-radius:         12px;
    padding:               20px;
    margin-top:            24px;
}

.tx-tour-info-item {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
}

.tx-tour-info-item i {
    width:            34px;
    height:           34px;
    flex-shrink:      0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    border-radius:    50%;
    background:       #fff;
    color:            var(--color-primary, #015285);
    font-size:        0.9rem;
}

.tx-tour-info-item span { display: block; font-size: 0.68rem; color: var(--color-muted, #6c757d); text-transform: uppercase; }
.tx-tour-info-item strong { display: block; font-size: 0.85rem; color: var(--color-navy, #00406B); margin-top: 2px; }

/* ---------- Itinerary ---------- */
.tx-tour-itinerary { position: relative; padding-left: 30px; margin-top: 20px; }
.tx-tour-itinerary::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--color-border, #e9ecef);
}

.tx-itinerary-day { position: relative; margin-bottom: 30px; }
.tx-itinerary-day:last-child { margin-bottom: 0; }

.tx-itinerary-day-marker {
    position:         absolute;
    left:             -30px;
    top:              0;
    width:            32px;
    height:           32px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    border-radius:    50%;
    background:       var(--color-navy, #00406B);
    color:            #fff;
    font-size:        0.8rem;
    z-index:          1;
}

.tx-itinerary-day-body {
    background:    #fff;
    border:        1px solid var(--color-border, #e9ecef);
    border-radius: 10px;
    padding:       18px 20px;
}

.tx-itinerary-day-label {
    display:        inline-block;
    background:     var(--color-light-bg, #f7f9fb);
    color:          var(--color-primary, #015285);
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    padding:        3px 10px;
    border-radius:  20px;
    margin-bottom:  8px;
}

.tx-itinerary-day-body h3 {
    font-family: 'Oswald', sans-serif;
    font-size:   1rem;
    font-weight: 700;
    color:       var(--color-navy, #00406B);
    margin-bottom: 10px;
}

.tx-itinerary-day-content { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.tx-itinerary-day-text { flex: 1 1 220px; }

.tx-itinerary-day-text p { font-size: 0.85rem; color: #555; line-height: 1.7; margin-bottom: 10px; }

.tx-itinerary-day-tags { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.76rem; color: var(--color-muted, #6c757d); }
.tx-itinerary-day-tags i { color: var(--color-primary, #015285); margin-right: 3px; }

.tx-itinerary-day-img { flex: 0 0 160px; width: 160px; height: 110px; border-radius: 8px; overflow: hidden; }
.tx-itinerary-day-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Inclusion / Exclusion (now each its own full-width tab panel) ---------- */
.tx-tour-inc-exc-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   20px;
}

.tx-inc-exc-col { scroll-margin-top: 130px; }

.tx-inc-exc-box { border-radius: 12px; padding: 20px; }
.tx-inc-exc-box--include { background: #eef8ee; border: 1px solid #cdeccd; }
.tx-inc-exc-box--exclude { background: #fdecee; border: 1px solid #f5c6cb; }

.tx-inc-exc-list { font-size: 0.85rem; color: #444; line-height: 1.8; }
.tx-inc-exc-list ul { list-style: none; margin: 0; padding: 0; }
.tx-inc-exc-list li { position: relative; padding-left: 22px; margin-bottom: 6px; }

.tx-inc-exc-box--include .tx-inc-exc-list li::before { content: '\f00c'; font-family: FontAwesome; position: absolute; left: 0; color: #2e7d32; font-size: 0.75rem; top: 3px; }
.tx-inc-exc-box--exclude .tx-inc-exc-list li::before { content: '\f00d'; font-family: FontAwesome; position: absolute; left: 0; color: #c62828; font-size: 0.75rem; top: 3px; }

/* ---------- Gallery ---------- */
.tx-tour-gallery-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   12px;
}

.tx-tour-gallery-item { display: block; height: 130px; border-radius: 10px; overflow: hidden; border: none; padding: 0; cursor: pointer; width: 100%; }
.tx-tour-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.tx-tour-gallery-item:hover img { transform: scale(1.08); }

/* ---------- Lightbox ---------- */
.tx-lightbox {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.88);
    z-index:         9999;
    align-items:     center;
    justify-content: center;
    padding:         30px;
}

.tx-lightbox.is-open { display: flex; }

.tx-lightbox-img {
    max-width:  100%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.tx-lightbox-close {
    position:         absolute;
    top:              24px;
    right:            30px;
    width:            44px;
    height:           44px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    border-radius:    50%;
    background:       rgba(255,255,255,0.12);
    color:            #fff;
    border:           none;
    font-size:        1.2rem;
    cursor:           pointer;
    transition:       background 0.2s ease;
}

.tx-lightbox-close:hover { background: rgba(255,255,255,0.25); }

/* ---------- Tags ---------- */
.tx-tour-tags { margin-top: 30px; font-size: 0.85rem; color: var(--color-muted, #6c757d); }
.tx-tour-tags i { color: var(--color-primary, #015285); margin-right: 6px; }
.tx-tour-tags a { color: var(--color-navy, #00406B); text-decoration: none; }
.tx-tour-tags a:hover { color: var(--color-primary, #015285); }

/* ---------- Sidebar ---------- */
.tx-tour-sidebar { display: flex; flex-direction: column; gap: 24px; }

.tx-tour-book-box {
    background:    linear-gradient(135deg, var(--color-navy, #00406B) 0%, var(--color-primary, #015285) 100%);
    border-radius: 12px;
    padding:       24px 22px;
}

.tx-tour-book-box h4 {
    font-family: 'Oswald', sans-serif;
    font-size:   1rem;
    font-weight: 700;
    color:       #fff;
    margin-bottom: 10px;
}

.tx-tour-book-price {
    font-family: 'Oswald', sans-serif;
    font-size:   1.6rem;
    font-weight: 800;
    color:       var(--ts-gold, #f5a623);
    margin-bottom: 4px;
}

.tx-tour-book-price span { font-size: 0.75rem; font-weight: 400; color: rgba(255,255,255,0.7); }

.tx-tour-book-note { font-size: 0.76rem; color: rgba(255,255,255,0.65); margin-bottom: 16px; }

.tx-tour-book-facts { list-style: none; margin: 0 0 18px; padding: 4px 0 0; border-top: 1px solid rgba(255,255,255,0.15); }

.tx-tour-book-facts li {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    font-size:       0.82rem;
    color:           rgba(255,255,255,0.85);
    padding:         10px 0;
    border-bottom:   1px solid rgba(255,255,255,0.1);
}

.tx-tour-book-facts li:last-child { border-bottom: none; }

.tx-fact-label { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.75); }
.tx-fact-label i { color: #fff; width: 16px; text-align: center; }
.tx-fact-value { color: #fff; font-weight: 600; text-align: right; }

.tx-tour-book-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    width:            100%;
    background:       #e63946;
    color:            #fff;
    border:           none;
    font-family:      'Oswald', sans-serif;
    font-size:        0.85rem;
    font-weight:      700;
    text-transform:   uppercase;
    padding:          13px;
    border-radius:    30px;
    cursor:           pointer;
    margin-bottom:    10px;
    transition:       background 0.2s ease;
}

.tx-tour-book-btn:hover { background: #c9303d; }

.tx-tour-inquiry-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    width:            100%;
    background:       transparent;
    color:            #fff;
    border:           1px solid rgba(255,255,255,0.4);
    font-family:      'Oswald', sans-serif;
    font-size:        0.85rem;
    font-weight:      700;
    text-transform:   uppercase;
    padding:          12px;
    border-radius:    30px;
    cursor:           pointer;
    transition:       background 0.2s ease;
}

.tx-tour-inquiry-btn:hover { background: rgba(255,255,255,0.1); }

/* Tour Highlights */
.tx-tour-highlights-box {
    background:    #fff;
    border:        1px solid var(--color-border, #e9ecef);
    border-radius: 12px;
    padding:       22px;
}

.tx-tour-highlights-box h4 {
    font-family: 'Oswald', sans-serif;
    font-size:   0.95rem;
    font-weight: 700;
    color:       var(--color-navy, #00406B);
    margin-bottom: 14px;
}

.tx-tour-highlights-box ul { list-style: none; margin: 0; padding: 0; }
.tx-tour-highlights-box li {
    display:       flex;
    align-items:   flex-start;
    gap:           8px;
    font-size:     0.85rem;
    color:         #444;
    margin-bottom: 10px;
    line-height:   1.5;
}
.tx-tour-highlights-box li i { color: var(--color-primary, #015285); margin-top: 2px; }

/* Need Help */
.tx-tour-help-box {
    background:    var(--color-light-bg, #f7f9fb);
    border:        1px solid var(--color-border, #e9ecef);
    border-radius: 12px;
    padding:       22px;
    text-align:    center;
}

.tx-tour-help-icon {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            42px;
    height:           42px;
    border-radius:    50%;
    background:       #fff;
    color:            var(--color-primary, #015285);
    font-size:        1.1rem;
    margin-bottom:    10px;
}

.tx-tour-help-box h5 { font-family: 'Oswald', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--color-navy, #00406B); margin-bottom: 6px; }
.tx-tour-help-box p { font-size: 0.8rem; color: var(--color-muted, #6c757d); margin-bottom: 12px; }
.tx-tour-help-box a { display: block; font-size: 0.82rem; color: var(--color-navy, #00406B); text-decoration: none; margin-bottom: 4px; }
.tx-tour-help-box a:hover { color: var(--color-primary, #015285); }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .tx-tour-inc-exc-row { grid-template-columns: 1fr; }
    .tx-tour-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .tx-itinerary-day-img { flex-basis: 100%; width: 100%; }
    .tx-tour-hero-photos { grid-template-columns: repeat(4, 70px); }
    .tx-tour-hero-photo-item { width: 70px; height: 55px; }
}