/* ==============================================
   TOUR PLAN ARCHIVE — tour-archive.css
   Only enqueued on the tour_plan archive
   (archive-tour_plan.php).
   ============================================== */

/* ---------- Hero ---------- */
.tx-tours-hero { padding-bottom: 90px; }

.tx-tours-eyebrow {
    display:       block;
    position:      relative;
    z-index:       2;
    color:         var(--ts-gold, #f5a623);
    font-family:   'Nunito Sans', sans-serif;
    font-style:    italic;
    font-weight:   700;
    font-size:     1.05rem;
    margin-bottom: 8px;
}

.tx-tours-hero .bc-page-title { text-transform: uppercase; }

/* ---------- Search bar (overlaps hero) ---------- */
.tx-tours-searchbar {
    display:       flex;
    align-items:   center;
    flex-wrap:     wrap;
    gap:           0;
    background:    #fff;
    border-radius: 12px;
    box-shadow:    0 16px 40px rgba(0,0,0,0.12);
    padding:       8px 20px;
    margin-top:    -60px;
    position:      relative;
    z-index:       3;
}

.tx-tours-searchbar-field {
    flex: 1 1 180px;
    padding: 10px 16px;
}

.tx-tours-searchbar-field--text { flex: 1.4 1 220px; }

.tx-tours-searchbar-divider {
    width: 1px;
    align-self: stretch;
    background: var(--color-border, #e9ecef);
    margin: 10px 0;
}

.tx-tours-searchbar-field label {
    display:        block;
    font-size:      0.72rem;
    font-weight:    700;
    color:          var(--color-navy, #00406B);
    text-transform: uppercase;
    margin-bottom:  4px;
}

.tx-tours-searchbar-field label i { color: var(--color-primary, #015285); margin-right: 4px; }

.tx-tours-searchbar-field input,
.tx-tours-searchbar-field select {
    width:   100%;
    border:  none;
    padding: 0;
    font-size: 0.88rem;
    color: #444;
    background: none;
    appearance: none;
    -webkit-appearance: none;
}

.tx-tours-searchbar-field input:focus,
.tx-tours-searchbar-field select:focus { outline: none; }

.tx-tours-searchbar-field select {
    cursor: pointer;
    /* simple custom dropdown arrow so appearance:none doesn't leave it bare */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236c757d' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 10px;
    padding-right: 16px;
}

.tx-tours-searchbar-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              8px;
    background:       var(--color-navy, #00406B);
    color:            #fff;
    border:           none;
    font-family:      'Oswald', sans-serif;
    font-size:        0.85rem;
    font-weight:      700;
    text-transform:   uppercase;
    padding:          14px 26px;
    border-radius:    8px;
    cursor:           pointer;
    transition:       background 0.2s ease;
    margin:           6px;
    flex-shrink:      0;
}

.tx-tours-searchbar-btn:hover { background: var(--color-primary, #015285); }

/* ---------- Custom dropdown (replaces the native <select> panel) ---------- */
.tx-custom-select {
    position: relative;
}

.tx-custom-select-trigger {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              8px;
    width:            100%;
    background:       none;
    border:           none;
    padding:          0;
    font-family:      'Nunito Sans', sans-serif;
    font-size:        0.88rem;
    color:            #444;
    cursor:           pointer;
}

.tx-custom-select-trigger span {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.tx-custom-select-trigger i {
    font-size:  0.7rem;
    color:      var(--color-muted, #6c757d);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.tx-custom-select.is-open .tx-custom-select-trigger i { transform: rotate(180deg); }

.tx-custom-select-panel {
    display:       none;
    position:      absolute;
    top:           calc(100% + 12px);
    left:          -16px;
    min-width:     220px;
    background:    #fff;
    border-radius: 10px;
    box-shadow:    0 16px 36px rgba(0,0,0,0.16);
    padding:       8px;
    max-height:    260px;
    overflow-y:    auto;
    z-index:       20;
}

.tx-custom-select.is-open .tx-custom-select-panel { display: block; }

.tx-custom-select-option {
    padding:       9px 14px;
    border-radius: 6px;
    font-size:     0.86rem;
    color:         #444;
    cursor:        pointer;
    transition:    background 0.15s ease, color 0.15s ease;
}

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

.tx-custom-select-option.is-selected {
    background:  var(--color-navy, #00406B);
    color:       #fff;
    font-weight: 700;
}

/* ---------- Body layout ---------- */
.tx-tours-body { padding: 40px 0 60px; }

/* ---------- Sidebar: Filter box ---------- */
.tx-tours-filter-box {
    background:    #fff;
    border:        1px solid var(--color-border, #e9ecef);
    border-radius: 12px;
    overflow:      hidden;
    margin-bottom: 24px;
}

.tx-tours-filter-box h3 {
    background:     var(--color-navy, #00406B);
    color:          #fff;
    font-family:    'Oswald', sans-serif;
    font-size:      0.9rem;
    font-weight:    700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding:        16px 20px;
    margin:         0;
}

.tx-filter-group {
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-light-bg, #f7f9fb);
}

.tx-filter-group h4 {
    font-family:    'Oswald', sans-serif;
    font-size:      0.78rem;
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var(--color-navy, #00406B);
    margin-bottom:  12px;
}

.tx-filter-checklist { display: flex; flex-direction: column; gap: 9px; }

.tx-filter-checklist[data-collapsible] .tx-filter-checkbox:nth-child(n+7) { display: none; }
.tx-filter-checklist[data-collapsible].is-expanded .tx-filter-checkbox { display: flex !important; }

.tx-filter-checkbox {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   0.85rem;
    color:       #444;
    cursor:      pointer;
}

.tx-filter-checkbox input { accent-color: var(--color-primary, #015285); width: 15px; height: 15px; }

.tx-filter-checkbox em {
    font-style: normal;
    color: var(--color-muted, #6c757d);
    font-size: 0.78rem;
    margin-left: auto;
}

.tx-filter-show-more {
    background: none;
    border: none;
    color: var(--color-primary, #015285);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 10px 0 0;
    cursor: pointer;
}

.tx-filter-budget-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tx-filter-budget-inputs input {
    width: 100%;
    border: 1px solid var(--color-border, #e9ecef);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.82rem;
}

.tx-filter-budget-inputs span { color: var(--color-muted, #6c757d); }

.tx-filter-apply-btn {
    display:          block;
    width:            calc(100% - 40px);
    margin:           18px 20px 10px;
    background:       var(--color-navy, #00406B);
    color:            #fff;
    border:           none;
    font-family:      'Oswald', sans-serif;
    font-size:        0.85rem;
    font-weight:      700;
    text-transform:   uppercase;
    padding:          12px;
    border-radius:    8px;
    cursor:           pointer;
    transition:       background 0.2s ease;
}

.tx-filter-apply-btn:hover { background: var(--color-primary, #015285); }

.tx-filter-reset-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              6px;
    margin:           0 20px 18px;
    color:            var(--color-muted, #6c757d);
    text-decoration:  none;
    font-size:        0.8rem;
}

.tx-filter-reset-btn:hover { color: var(--color-primary, #015285); }

/* Need Help box */
.tx-tours-help-box {
    background:    linear-gradient(160deg, var(--color-navy, #00406B) 0%, var(--color-primary, #015285) 100%);
    border-radius: 12px;
    padding:       26px 22px;
    text-align:    center;
}

.tx-tours-help-box h5 {
    font-family: 'Oswald', sans-serif;
    font-size:   1.1rem;
    font-weight: 700;
    color:       #fff;
    margin-bottom: 6px;
}

.tx-tours-help-box p {
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    margin-bottom: 18px;
}

.tx-tours-help-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              8px;
    background:       var(--ts-gold, #f5a623);
    color:            var(--color-navy, #00406B);
    text-decoration:  none;
    font-family:      'Oswald', sans-serif;
    font-size:        0.82rem;
    font-weight:      700;
    text-transform:   uppercase;
    padding:          11px 22px;
    border-radius:    30px;
    transition:       background 0.2s ease;
}

.tx-tours-help-btn:hover { background: #fff; color: var(--color-navy, #00406B); }

/* ---------- Results header ---------- */
.tx-tours-results-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px;
    margin-bottom:   24px;
}

.tx-tours-count {
    font-size: 0.88rem;
    color: var(--color-muted, #6c757d);
}

.tx-tours-sort {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.tx-tours-sort label { font-size: 0.82rem; color: var(--color-muted, #6c757d); }

.tx-tours-sort select {
    border:        1px solid var(--color-border, #e9ecef);
    border-radius: 6px;
    padding:       7px 10px;
    font-size:     0.85rem;
    color:         var(--color-navy, #00406B);
}

/* ---------- Tour cards ---------- */
.tx-tour-card {
    background:    #fff;
    border:        1px solid var(--color-border, #e9ecef);
    border-radius: 12px;
    overflow:      hidden;
    height:        100%;
    transition:    transform 0.2s ease, box-shadow 0.2s ease;
}

.tx-tour-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,0.1); }

.tx-tour-card-img-wrap { position: relative; height: 175px; overflow: hidden; }

.tx-tour-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.tx-tour-card:hover .tx-tour-card-img { transform: scale(1.06); }

.tx-tour-card-badge {
    position:       absolute;
    top:            10px;
    left:           10px;
    color:          #fff;
    font-size:      0.65rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding:        4px 11px;
    border-radius:  4px;
}

.tx-tour-card-body { padding: 18px; }

.tx-tour-card-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--color-muted, #6c757d);
    margin-bottom: 10px;
}

.tx-tour-card-meta i { color: var(--color-primary, #015285); margin-right: 3px; }

.tx-tour-card-title {
    font-family: 'Oswald', sans-serif;
    font-size:   1rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
}

.tx-tour-card-title a { color: var(--color-navy, #00406B); text-decoration: none; }
.tx-tour-card-title a:hover { color: var(--color-primary, #015285); }

.tx-tour-card-excerpt {
    font-size: 0.83rem;
    color: var(--color-muted, #6c757d);
    line-height: 1.6;
    margin-bottom: 16px;
}

.tx-tour-card-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    padding-top:     14px;
    border-top:      1px solid var(--color-light-bg, #f7f9fb);
}

.tx-tour-card-price {
    font-family: 'Oswald', sans-serif;
    font-size:   1rem;
    font-weight: 700;
    color:       var(--color-primary, #015285);
}

.tx-tour-card-btn {
    display:          inline-flex;
    align-items:      center;
    border:           1px solid var(--color-navy, #00406B);
    color:            var(--color-navy, #00406B);
    text-decoration:  none;
    font-size:        0.75rem;
    font-weight:      700;
    text-transform:   uppercase;
    padding:          7px 14px;
    border-radius:    6px;
    white-space:      nowrap;
    transition:       background 0.2s ease, color 0.2s ease;
}

.tx-tour-card-btn:hover { background: var(--color-navy, #00406B); color: #fff; }

/* ---------- Pagination ---------- */
.tx-tours-pagination { margin-top: 40px; }

.tx-tours-pagination ul {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    list-style: none;
    padding:    0;
    margin:     0;
    background: none;
    border:     none;
}

.tx-tours-pagination li .page-numbers {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    min-width:        38px;
    height:           38px;
    padding:          0 8px;
    border-radius:    8px;
    border:           1px solid var(--color-border, #e9ecef);
    color:            var(--color-navy, #00406B);
    text-decoration:  none;
    font-size:        0.85rem;
    font-weight:      600;
    transition:       background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tx-tours-pagination li .page-numbers:hover { background: var(--color-light-bg, #f7f9fb); border-color: var(--color-primary, #015285); }

.tx-tours-pagination li .page-numbers.current {
    background:   var(--color-primary, #015285);
    border-color: var(--color-primary, #015285);
    color:        #fff;
}

.tx-tours-no-results { color: var(--color-muted, #6c757d); font-size: 0.95rem; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .tx-tours-searchbar { margin-top: -30px; padding: 12px; flex-direction: column; align-items: stretch; }
    .tx-tours-searchbar-divider { display: none; }
    .tx-tours-searchbar-field { padding: 10px 6px; border-bottom: 1px solid var(--color-border, #e9ecef); }
    .tx-tours-searchbar-btn { margin: 10px 6px 4px; justify-content: center; }
    .tx-tours-results-header { flex-direction: column; align-items: flex-start; }
}