/* =========================================================
   Halaman Paket Wisata (tours.php) — mengikuti tema putih / cyan / hijau neon
   ========================================================= */

/* ---------- Filter durasi ---------- */
.tr-filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.75rem; }
.tr-filter a {
  padding: .5rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .92rem; text-decoration: none;
  color: var(--pt-navy); background: #fff; border: 1.5px solid #CFE3F1; transition: all .15s;
}
.tr-filter a:hover { border-color: var(--pt-primary); color: var(--pt-primary-ink); }
.tr-filter a.active { background: var(--pt-primary); border-color: var(--pt-primary); color: var(--pt-navy); }

/* ---------- Kartu paket ---------- */
.tr-card { background: #fff; border: 1.5px solid #CFE3F1; border-radius: 18px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; }
.tr-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,92,153,.14); border-color: var(--pt-green); }
.tr-card-img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #E8F6FF, #BFE8FF); color: #7FCBFF; font-size: 3rem; overflow: hidden; }
.tr-card-img img { width: 100%; height: 100%; object-fit: cover; }
.tr-dur { position: absolute; left: .75rem; top: .75rem; background: var(--pt-navy); color: #fff; font-size: .76rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; display: inline-flex; gap: .35rem; align-items: center; }
.tr-card-body { padding: 1.1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.tr-card-title { font-size: 1.08rem; font-weight: 700; margin: 0; line-height: 1.35; }
.tr-card-title a { color: var(--pt-navy); text-decoration: none; }
.tr-card-sum { margin: 0; font-size: .88rem; color: var(--pt-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tr-card-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .8rem; color: var(--pt-muted); }
.tr-card-meta i { color: var(--pt-primary-ink); margin-right: .25rem; }
.tr-card-price { margin-top: auto; padding: .6rem .8rem; background: var(--pt-soft); border: 1.5px solid #9ED8FF; border-radius: 12px; display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; }
.tr-card-price small { flex-basis: 100%; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pt-primary-ink); }
.tr-card-price .dh-price-val { font-family: 'Poppins', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--pt-navy); line-height: 1.1; }
.tr-unit { font-size: .8rem; font-weight: 600; color: var(--pt-muted); }

/* ---------- Detail ---------- */
.tr-cover { width: 100%; max-height: 420px; object-fit: cover; border-radius: 18px; margin-bottom: 1rem; }
.tr-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.tr-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--pt-soft); color: var(--pt-navy); border: 1px solid #BFE8FF; border-radius: 999px; padding: .35rem .85rem; font-size: .84rem; font-weight: 600; }
.tr-chip i { color: var(--pt-primary-ink); }

.tr-block { margin-bottom: 2.2rem; }
.tr-h { font-size: 1.3rem; font-weight: 700; color: var(--pt-navy); margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem; }
.tr-h i { width: 36px; height: 36px; border-radius: 10px; background: var(--pt-green); color: var(--pt-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }

/* Harga */
.tr-price-card { background: #fff; border: 1.5px solid #CFE3F1; border-top: 3px solid var(--pt-green); border-radius: 16px; padding: 1.1rem 1.25rem; box-shadow: 0 8px 20px rgba(0,92,153,.06); }
.tr-group-amount { font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 800; color: var(--pt-navy); line-height: 1.1; }
.tr-group-amount small { font-size: .95rem; font-weight: 600; color: var(--pt-muted); }
.tr-group-note { color: var(--pt-muted); font-size: .9rem; margin: .35rem 0 .9rem; }
.tr-price-table { width: 100%; border-collapse: collapse; }
.tr-price-table th { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pt-muted); font-weight: 700; padding: .5rem .25rem; border-bottom: 2px solid #CFE3F1; }
.tr-price-table td { padding: .75rem .25rem; border-bottom: 1px dashed #D8E8F3; font-size: 1rem; color: var(--pt-text); }
.tr-price-table tr:last-child td { border-bottom: 0; }
.tr-price-table td i { color: var(--pt-primary-ink); margin-right: .4rem; }
.tr-price-val { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--pt-navy); }
.tr-min-note { margin: .9rem 0 0; font-size: .86rem; color: var(--pt-primary-ink); background: var(--pt-soft); border-radius: 10px; padding: .55rem .8rem; }
.tr-price-card .dh-btn { margin-top: .9rem; }

/* Highlights */
.tr-hl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 576px) { .tr-hl { grid-template-columns: 1fr 1fr; } }
.tr-hl li { display: flex; gap: .65rem; align-items: flex-start; background: #fff; border: 1px solid #D8E8F3; border-radius: 12px; padding: .7rem .9rem; font-weight: 600; color: var(--pt-navy); font-size: .93rem; }
.tr-hl li i { color: var(--pt-primary); font-size: 1.1rem; margin-top: .1rem; }

.tr-desc { line-height: 1.85; color: var(--pt-text); font-size: 1.02rem; }

/* Itinerary */
.tr-day { margin-bottom: 1.5rem; }
.tr-day-head { display: inline-block; background: var(--pt-navy); color: #fff; font-weight: 700; padding: .4rem 1rem; border-radius: 10px; margin-bottom: .9rem; border-left: 5px solid var(--pt-green); }
.tr-timeline { list-style: none; margin: 0; padding: 0 0 0 .25rem; position: relative; }
.tr-timeline::before { content: ''; position: absolute; left: 3.9rem; top: .5rem; bottom: .5rem; width: 2px; background: #CFE3F1; }
.tr-timeline li { display: flex; gap: 1.1rem; position: relative; padding: .55rem 0; }
.tr-time { flex: 0 0 3.6rem; text-align: right; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .92rem; color: var(--pt-primary-ink); padding-top: .1rem; }
.tr-timeline li::before { content: ''; position: absolute; left: 3.55rem; top: .85rem; width: 12px; height: 12px; border-radius: 50%; background: var(--pt-green); border: 2px solid #fff; box-shadow: 0 0 0 2px #9ED8FF; }
.tr-act { padding-left: .6rem; }
.tr-act b { color: var(--pt-navy); font-size: .98rem; }
.tr-act p { margin: .2rem 0 0; font-size: .88rem; color: var(--pt-muted); }

/* Included / Excluded */
.tr-ie { height: 100%; border-radius: 16px; padding: 1.1rem 1.25rem; border: 1.5px solid; }
.tr-ie h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem; }
.tr-ie ul { list-style: none; margin: 0; padding: 0; }
.tr-ie li { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem 0; font-size: .92rem; color: var(--pt-text); }
.tr-ie li i { margin-top: .2rem; font-size: .9rem; }
.tr-in { background: rgba(57,255,20,.08); border-color: #39FF14; }
.tr-in h3, .tr-in li i { color: #0A6A00; }
.tr-ex { background: #FFF5F5; border-color: #F1B8B8; }
.tr-ex h3, .tr-ex li i { color: #C23B3B; }

/* Form booking */
.tr-book { background: #fff; border: 1.5px solid #CFE3F1; border-top: 4px solid var(--pt-green); border-radius: 18px; padding: 1.3rem; box-shadow: 0 12px 30px rgba(0,92,153,.1); }
@media (min-width: 992px) { .tr-book { position: sticky; top: 92px; } }
.tr-book-title { font-size: 1.15rem; font-weight: 700; color: var(--pt-navy); margin: 0 0 1rem; display: flex; gap: .55rem; align-items: center; }
.tr-book-title i { color: var(--pt-primary-ink); }
.tr-sum { background: linear-gradient(135deg, #0A2540, #12365F); color: #fff; border-radius: 14px; padding: .8rem 1rem; margin-bottom: 1rem; }
.tr-sum > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; padding: .15rem 0; }
.tr-sum span { color: #7FD3FF; }
.tr-sum b { font-family: 'Poppins', sans-serif; }
.tr-sum-total { border-top: 1px solid rgba(255,255,255,.2); margin-top: .3rem; padding-top: .45rem !important; }
.tr-sum-total b { font-size: 1.2rem; color: var(--pt-green); }
.tr-stepper { display: flex; align-items: stretch; border: 1px solid #ced4da; border-radius: .5rem; overflow: hidden; }
.tr-stepper button { width: 46px; border: 0; background: var(--pt-soft); color: var(--pt-navy); font-size: 1rem; }
.tr-stepper button:active { background: #BFE8FF; }
.tr-stepper input { flex: 1; min-width: 0; border: 0; text-align: center; font-weight: 700; font-size: 1.05rem; padding: .5rem 0; -moz-appearance: textfield; }
.tr-stepper input::-webkit-outer-spin-button, .tr-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tr-stepper input:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(0,163,255,.35); }

.tr-reco { margin-top: 3rem; }

@media (max-width: 575.98px) {
  .tr-timeline::before { left: 3.4rem; }
  .tr-timeline li::before { left: 3.05rem; }
  .tr-time { flex-basis: 3.1rem; font-size: .85rem; }
  .tr-group-amount { font-size: 1.6rem; }
}