/*
Theme Name: OnlTrip Travel Theme
Description: Modern travel/tours theme with tile tour cards and single-tour layout.
Author: OnlTrip
Version: 1.2.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codecanvas
Tags: travel, tours, booking, responsive, modern
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 7.4
*/

/* ========== Brand Tokens ========== */
:root{
  --brand-primary: #213f52;     /* main brand */
  --brand-primary-600: #1b3143; /* hover/darker */
  --brand-primary-50:  #e8eef2; /* light tint for chips/hover */
  --brand-bg:      #faf9f6;     /* site background */
  --brand-text:    #0f1f2a;     /* default body text */
  --brand-muted:   #6b7a86;     /* secondary text */
  --brand-card:    #ffffff;     /* card bg */
  --brand-border:  #e5eaee;     /* light borders */

  /* Chips (pill style) - tuned for no gap */
  --chip-gap: 12px;
  --chip-icon: 18px;
  --chip-text: #0f172a;
  --chip-bg: #f1f5f9;
  --chip-border: #e2e8f0;

  --chip-active-shadow: 0 4px 10px rgba(33, 63, 82, 0.2);
}

/* ========== Base Reset ========== */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: #111827;
  background: var(--brand-bg);
}
img { max-width:100%; height:auto; display:block; }

/* Accessibility helpers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Skip link (needs <a href="#main-content" class="skip-link">Skip to content</a> near top) */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  left: 12px; top: 12px; width: auto; height: auto;
  background: #fff; color: #111;
  padding: 10px 14px; border-radius: 6px; z-index: 10000;
}

/* ========== Header ========== */
.site-header {
  background-color: var(--brand-primary);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Admin bar offset for logged-in users */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-logo { color: #fff; font-size: 24px; font-weight: 800; text-decoration: none; }
.site-logo .logo-accent { color: #FF6B35; }

.header-search { flex: 1; max-width: 560px; position: relative; }
.search-input {
  width: 100%; height: 48px; padding: 12px 56px 12px 20px;
  border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc;
  font-size: 16px; color: var(--brand-text);
}
.search-input::placeholder { color: #98a2b3; }
.search-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(33,63,82,0.12); }
.search-button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; background: var(--brand-primary); border: 1px solid var(--brand-primary); border-radius: 50%;
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.search-button:hover { background: var(--brand-primary-600); border-color: var(--brand-primary-600); }
.search-button:focus-visible {
  outline: 3px solid var(--brand-primary-50);
  outline-offset: 2px;
}

.header-actions { display: flex; align-items: center; gap: 16px; }
.whatsapp-btn, .login-btn {
  color: #fff; text-decoration: none; padding: 8px 16px; border-radius: 20px;
  font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: .25s ease;
}
.whatsapp-btn { background: #25D366; }
.whatsapp-btn:hover { background: #1da954; }
.login-btn:hover { background: rgba(255,255,255,0.1); }
.whatsapp-btn:focus-visible,
.login-btn:focus-visible {
  outline: 3px solid var(--brand-primary-50);
  outline-offset: 2px;
}

.site-header.scrolled { box-shadow: 0 6px 18px rgba(0,0,0,0.12); backdrop-filter: blur(10px); }

/* ========== Category Tabs — Pill Style (fixed no gap, matches screenshot) ========== */
.tour-categories { background: transparent; padding: 0; box-shadow: none; border: 0; }
.categories-container {
  max-width: 1200px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: flex-start; gap: var(--chip-gap); overflow-x: auto;
  border-bottom: 0; /* No bottom border */
}

/* Base Pill Layout */
.category-tab {
  position: relative;
  display: inline-flex; flex-direction: row; /* Horizontal layout */
  align-items: center;
  gap: 0; /* No gap between icon and label */
  padding: 8px 14px; /* Tighter padding */
  text-decoration: none; color: var(--chip-text);
  font-weight: 700; font-size: 14px; white-space: nowrap; transition: .2s ease-in-out;
  background: var(--chip-bg) !important;
  border: 1px solid var(--chip-border) !important;
  border-radius: 999px !important;
}

/* Icon */
.category-tab .tab-icon {
  /* Reset old styles */
  width: auto; height: auto; border: 0; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 0; /* Tighten space */
}
.category-tab .tab-icon svg {
  width: var(--chip-icon); height: var(--chip-icon);
  stroke: currentColor; fill: none; opacity: 0.9;
}

/* No underline needed for this design */
.category-tab::after{ display: none !important; }

/* Hover State */
.category-tab:hover {
  background: var(--brand-primary-50) !important;
  border-color: var(--brand-border) !important;
}

/* Active State */
.category-tab.active {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-color: var(--brand-primary) !important;
  box-shadow: var(--chip-active-shadow);
}

/* Focus Ring */
.category-tab:focus-visible {
  outline: 3px solid var(--brand-primary-50);
  outline-offset: 2px;
}

/* ========== Main Wrapper ========== */
.main-content { max-width: 1200px; margin: 0 auto; padding: 32px 20px; }

/* ========== Tours Grid (Tile Cards) ========== */
.tours-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:28px; margin-bottom: 40px;
}

/* Base card reset (we use tile style, no white box) */
.tours-grid .tour-card {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Image wrapper — support both .img-wrap (new) and .tour-image (old) */
.tours-grid .tour-card .img-wrap,
.tours-grid .tour-card .tour-image {
  position: relative !important;
  height: 260px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background:#f1f5f9;
}
.tours-grid .tour-card .img-wrap a,
.tours-grid .tour-card .tour-image a { display:block; height:100%; color:transparent; text-indent:-9999px; }
.tours-grid .tour-card .img-wrap img,
.tours-grid .tour-card .tour-image img {
  width:100% !important; height:100% !important; object-fit:cover !important; display:block !important;
  transform:none; transition:transform .3s ease;
}
.tours-grid .tour-card:hover .img-wrap img,
.tours-grid .tour-card:hover .tour-image img { transform:scale(1.04); }

/* Badge + Heart overlay */
.tours-grid .tour-card .tour-type-badge{
  position:absolute !important; left:12px !important; bottom:12px !important; z-index:3 !important;
  background:rgba(255,255,255,.95) !important; color:#0f172a !important; border:1px solid #e2e8f0 !important;
  border-radius:999px !important; padding:6px 10px !important; font-size:12px !important; font-weight:700 !important;
  display:inline-flex !important; gap:6px !important; align-items:center !important
}
.tours-grid .tour-card .wishlist-btn{
  position:absolute !important; top:12px !important; right:12px !important; z-index:3 !important;
  width:36px !important; height:36px !important; border-radius:50% !important; background:#fff !important; border:1px solid #e2e8f0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important; box-shadow:0 6px 16px rgba(0,0,0,.08) !important; cursor:pointer !important
}
.tours-grid .tour-card .wishlist-btn.active svg{ fill:#ff6b6b !important; stroke:#ff6b6b !important; }
.tours-grid .tour-card .wishlist-btn:focus-visible {
  outline: 3px solid var(--brand-primary-50);
  outline-offset: 2px;
}

/* Body */
.tours-grid .tour-card .tour-content,
.tours-grid .tour-card .card-body { padding:10px 4px 0 !important; background:transparent !important; }

/* Title + rating row */
.tours-grid .tour-card .title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-top:8px; }
.tours-grid .tour-card .tour-title{ font-size:18px !important; font-weight:800 !important; margin:0 !important; line-height:1.35 !important; color:#0f172a !important; }
.tours-grid .tour-card .tour-title a{ color:#0f172a !important; text-decoration:none !important; }
.tours-grid .tour-card .tour-title a:visited{ color:#0f172a !important; }
.tours-grid .tour-card .mini-rating{ display:inline-flex; gap:6px; align-items:center; color:#0f172a; font-weight:800; }

/* Subtitle */
.tours-grid .tour-card .tour-subtitle{ color:#6b7280 !important; font-size:14px !important; margin:6px 0 6px !important; }

/* Info row (duration • max people) */
.tours-grid .tour-card .info-row{ color:#6b7280; font-size:14px; display:flex; gap:12px; }
.tours-grid .tour-card .info-row .dot + .dot::before{ content:"•"; color:#9aa3af; margin:0 12px; }

/* Old meta row compatibility */
.tours-grid .tour-card .tour-meta{
  display:flex !important; align-items:center !important; gap:12px !important;
  color:#6b7280 !important; font-size:14px !important; margin: 0 0 6px !important;
  justify-content:flex-start !important;
}
.tours-grid .tour-card .tour-duration svg{ display:none !important; }

/* Price row */
.tours-grid .tour-card .tour-price{ font-size:20px !important; font-weight:800 !important; color:#111827 !important; margin-top:6px !important; }
.tours-grid .tour-card .price-label{ font-size:12px !important; color:#6b7280 !important; }

/* Hide listing CTAs */
.tours-grid .tour-card-actions{ display:none !important; }

/* ========== Count text (hide) ========== */
.tour-count { display: none !important; }

/* ========== Search Page tweaks ========== */
.search-results { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:24px; }

/* ========== CTA band above footer ========== */
.cta-section { background: var(--brand-primary); color:#fff; text-align:center; padding:60px 20px; margin: 40px 0 0; }
.cta-title { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.cta-description { font-size: 16px; opacity:.95; max-width: 620px; margin: 0 auto 24px; }
.cta-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn-whatsapp { background:#25D366; color:#fff; padding:14px 28px; border-radius: 999px; text-decoration:none; display:inline-flex; gap:8px; font-weight:800; }
.btn-whatsapp:hover { background:#1da954; }
.btn-secondary { background:transparent; color:#fff; padding:14px 28px; border:2px solid #fff; border-radius: 999px; text-decoration:none; font-weight:800; }
.btn-secondary:hover { background:#fff; color:var(--brand-primary); }

/* ========== Footer ========== */
.site-footer { background: var(--brand-bg); padding: 40px 0 20px; border-top: 1px solid #e9ecef; }
.footer-container { max-width:1200px; margin:0 auto; padding:0 20px; }
.footer-content { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:38px; margin-bottom:40px; }
.footer-section h3 { font-size:16px; font-weight:800; margin-bottom:12px; color:#111827; }
.footer-section ul { list-style:none; }
.footer-section li { margin-bottom:8px; }
.footer-section a { color:#475569; text-decoration:none; font-size:14px; }
.footer-section a:hover { color: var(--brand-primary); }
.footer-bottom {
  border-top:1px solid #e9ecef; padding-top: 16px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:#6b7280; font-size:14px;
}
.footer-bottom a { color:#6b7280; text-decoration:none; }
.footer-bottom a:hover { color: var(--brand-primary); }

/* ========== UI Helpers (for JS) ========== */
.loading-overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,0.92);
  display:flex; align-items:center; justify-content:center; z-index: 9999;
}
.spinner { width:40px; height:40px; border:4px solid #f3f3f3; border-top:4px solid var(--brand-primary); border-radius:50%; animation: spin 1s linear infinite; }
@keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.notification {
  position: fixed; top:20px; right:20px; padding:12px 18px; border-radius:10px; color:#fff; font-weight:700; z-index:10000;
  transform: translateX(100%); transition: transform .3s ease; box-shadow: 0 8px 22px rgba(0,0,0,0.15);
}
.notification.show { transform: translateX(0); }
.notification-success { background:#28a745; }
.notification-error   { background:#dc3545; }
.notification-warning { background:#ffc107; color:#333; }
.notification-info    { background:#17a2b8; }

/* ========== Modals (Itinerary / Quick Book / Enquiry) ========== */
.ot-modal { position: fixed; inset:0; display:grid; place-items:center; z-index:10000; transition: opacity .2s ease; }
.ot-modal[aria-hidden="true"] { opacity:0; pointer-events:none; }
.ot-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
.ot-modal-dialog {
  position:relative; background:#fff; width:min(600px,92vw); max-height:85vh; overflow:auto;
  border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.2); padding:24px;
}
.ot-modal-title { font-size:20px; font-weight:800; margin:0 0 12px; }
.ot-modal-close { position:absolute; top:8px; right:10px; background:transparent; border:none; font-size:28px; color:#666; cursor:pointer; }
.ot-modal-close:focus-visible {
  outline: 3px solid var(--brand-primary-50);
  outline-offset: 2px;
}
.ot-form .ot-form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.ot-form label { font-weight:800; font-size:14px; }
.ot-form input, .ot-form textarea {
  padding:10px 12px; border:1px solid #e9ecef; border-radius:8px; font-size:14px; outline:none;
}
.ot-form input:focus, .ot-form textarea:focus { border-color: var(--brand-primary); }
.ot-form-actions { margin-top:8px; display:flex; justify-content:flex-end; }
.ot-btn-primary { background: var(--brand-primary); color:#fff; border:none; border-radius:8px; padding:10px 16px; font-weight:800; cursor:pointer; }
.ot-btn-primary:hover { background: var(--brand-primary-600); }
body.ot-modal-open { overflow:hidden; }

/* ========== Single Tour V2 (gallery + sticky booking) ========== */
.single-tour.v2 .tour-hero-grid{max-width:1200px;margin:24px auto 0;display:grid;grid-template-columns:2fr 1fr;gap:12px;padding:0 20px}
.single-tour.v2 .grid-left img{width:100%;height:340px;object-fit:cover;border-radius:12px}
.single-tour.v2 .grid-right{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:calc((340px - 12px)/2);gap:12px}
.single-tour.v2 .grid-right .thumb img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.single-tour.v2 .wishlist-fab,.single-tour.v2 .share-fab{position:absolute;top:10px;background:#fff;border:1px solid #e9ecef;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.08);cursor:pointer}
.single-tour.v2 .wishlist-fab{right:10px}
.single-tour.v2 .share-fab{right:56px}
.single-tour.v2 .wishlist-fab:focus-visible,
.single-tour.v2 .share-fab:focus-visible{
  outline: 3px solid var(--brand-primary-50);
  outline-offset: 2px;
}
.single-tour.v2 .tour-top{max-width:1200px;margin:24px auto;padding:0 20px;display:grid;grid-template-columns:2fr 360px;gap:32px}
.single-tour.v2 .tour-title{font-size:28px;font-weight:800;margin:0 0 8px}
.single-tour.v2 .tour-subinfo{color:#546;display:flex;gap:8px;align-items:center;margin-bottom:8px}
.single-tour.v2 .tour-subinfo .reviews{color:#6b7280}
.single-tour.v2 .pill-row{display:flex;gap:8px;margin:10px 0 18px;flex-wrap:wrap}
.pill{background:#eef3f2;border:1px solid #dfe7e6;color:#224;padding:6px 12px;border-radius:20px;font-weight:700;font-size:13px}
.box{background:#fff;border:1px solid #e9ecef;border-radius:12px;padding:20px;margin-bottom:16px}
.box h2{font-size:18px;margin:0 0 12px}
.itinerary-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.itinerary-list li{display:flex;gap:10px;align-items:flex-start}
.itinerary-list .day{min-width:54px;background: var(--brand-primary); color:#fff;border-radius:20px;padding:6px 10px;text-align:center;font-weight:800}
.itinerary-list .text{color:#334}
.date-pills{display:flex;gap:12px;flex-wrap:wrap}
.date-pill{border:1px solid #e9ecef;border-radius:12px;padding:10px 14px;background:#fff}
.date-pill em{color:#16a34a;margin-left:10px;font-style:normal}
.two-col{columns:2;column-gap:24px}
.tick-list,.cross-list{list-style:none;padding:0;margin:0}
.tick-list li,.cross-list li{break-inside:avoid;display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.tick{width:18px;height:18px;border-radius:50%;background:#e9f7ef;position:relative;flex:0 0 18px}
.tick:after{content:"";position:absolute;left:5px;top:1px;width:6px;height:12px;border:2px solid #16a34a;border-top:none;border-left:none;transform:rotate(45deg)}
.cross{width:18px;height:18px;border-radius:50%;background:#fdecec;position:relative;flex:0 0 18px}
.cross:before,.cross:after{content:"";position:absolute;left:5px;top:5px;width:8px;height:2px;background:#dc2626}
.cross:after{transform:rotate(90deg)}
.dot-list{padding-left:18px}
.dot-list li{margin-bottom:8px;color:#333}
.carry-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.note-box{border-left:4px solid #f5c84c}
.note-title{font-size:16px;margin:0 0 12px}
.note-list{padding-left:18px}
.note-list li{margin-bottom:8px}
.booking-card{position:sticky;top:100px;background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:18px;height:max-content}
.price-top .big{font-size:28px;font-weight:800;color: var(--brand-primary-600)}
.price-top .small{color:#6b7280;margin-top:-2px}
.breakdown{margin:12px 0 10px;display:flex;flex-direction:column;gap:8px}
.breakdown>div{display:flex;justify-content:space-between;color:#374151}
.breakdown .total{font-weight:800;border-top:1px solid #eef2f7;padding-top:8px}
.deposit{background: var(--brand-primary-50); border:1px solid var(--brand-border); border-radius:10px;padding:10px;margin-top:6px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.deposit em{display:block;color:#6b7280;width:100%;margin-top:4px}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background: var(--brand-primary); color:#fff;border:none;border-radius:10px;padding:12px 16px;font-weight:800;text-decoration:none}
.btn-primary:hover{background: var(--brand-primary-600)}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--brand-primary);background:#fff;color: var(--brand-primary);border-radius:10px;padding:12px 16px;text-decoration:none;margin-top:8px}
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-secondary:focus-visible {
  outline: 3px solid var(--brand-primary-50);
  outline-offset: 2px;
}
.hint{font-size:12px;color:#6b7280;margin:8px 0 0;text-align:center}
.w-100{width:100%}
@media (max-width: 1000px){
  .single-tour.v2 .tour-hero-grid{grid-template-columns:1fr}
  .two-col{columns:1}
  .carry-grid{grid-template-columns:1fr}
  .booking-card{position:static}
}

/* ========== Responsive header adjustments ========== */
@media (max-width: 768px) {
  .header-container { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 20px; }
  .header-actions { justify-content: flex-end; }
  .categories-container { padding: 0 12px; }
}

/* FINAL OVERRIDES: ensure chips bar has no white bg anywhere */
.main-content > nav.tour-categories,
nav.tour-categories,
.tour-categories,
.tour-categories .categories-container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}