/**
 * package-master.css
 * Tour Package Master / Listing Page
 * Aurelio Travels · aureliotravels.com
 *
 * ⚠️  ALL values reference CSS variables from main.css ONLY.
 * ⚠️  No hardcoded colours, font stacks, px sizes, or raw spacing.
 * ⚠️  Font stack  : --font-display · --font-primary · --font-elegant
 * ⚠️  Palette     : Navy bg · Sapphire CTA · Cyan glow · Gold premium
 * ⚠️  Hero section: handled by template-hero-section.css — NOT touched here.
 */

/* ============================================================
   1. SHARED SECTION TYPOGRAPHY
   ============================================================ */

.section-subtitle {
  font-family:    var(--font-elegant);
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color:          var(--color-gold);
  display:        block;
  margin-bottom:  var(--spacing-2);
}

.section-title {
  font-family:    var(--font-display);
  font-size:      var(--text-4xl);
  font-weight:    var(--font-weight-semibold);
  color:          var(--color-text-primary);
  line-height:    var(--leading-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom:  var(--spacing-3);
  position:       relative;
  padding-bottom: var(--spacing-5);
}

.section-title::after {
  content:       '';
  position:      absolute;
  bottom:        0;
  left:          50%;
  transform:     translateX(-50%);
  width:         64px;
  height:        2px;
  background:    var(--gradient-gold);
  border-radius: var(--radius-full);
  box-shadow:    var(--shadow-gold);
}

.section-description {
  font-family: var(--font-primary);
  font-size:   var(--text-base);
  color:       var(--color-text-muted);
  max-width:   680px;
  margin:      0 auto var(--spacing-8);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   2. TOUR CATEGORIES SECTION
   ============================================================ */

.tour-categories-section {
  padding:    var(--spacing-24) 0;
  background: var(--bg-secondary);
  position:   relative;
  overflow:   hidden;
}

.tour-categories-section::before {
  content:        '';
  position:       absolute;
  top:            -120px;
  left:           50%;
  transform:      translateX(-50%);
  width:          900px;
  height:         500px;
  background:     radial-gradient(ellipse at center, var(--color-sapphire-glow-sm) 0%, transparent 70%);
  pointer-events: none;
}

.category-card {
  padding:       var(--spacing-8) var(--spacing-6);
  border-radius: var(--radius-xl);
  background:    linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
  border:        1px solid var(--border-primary);
  text-align:    center;
  height:        100%;
  transition:    var(--transition-premium);
  box-shadow:    var(--shadow-md);
  position:      relative;
  overflow:      hidden;
}

.category-card::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     var(--gradient-glass);
  border-radius:  inherit;
  pointer-events: none;
  opacity:        0;
  transition:     var(--transition-base);
}

.category-card:hover {
  transform:    translateY(-10px);
  border-color: var(--border-gold);
  box-shadow:   var(--shadow-xl), var(--glow-gold);
}

.category-card:hover::before { opacity: 1; }

.category-icon {
  font-size:     2.4rem;
  color:         var(--color-gold);
  margin-bottom: var(--spacing-5);
  display:       block;
  transition:    var(--transition-base);
  filter:        drop-shadow(0 0 10px var(--color-gold-glow));
}

.category-card:hover .category-icon {
  transform: scale(1.15);
  filter:    drop-shadow(0 0 18px var(--color-gold-glow));
}

.category-title {
  font-family:    var(--font-display);
  font-size:      var(--text-xl);
  font-weight:    var(--font-weight-semibold);
  color:          var(--color-text-primary);
  margin-bottom:  var(--spacing-3);
  letter-spacing: var(--ls-tight);
}

.category-description {
  font-family:   var(--font-primary);
  color:         var(--color-text-secondary);
  font-size:     var(--text-sm);
  line-height:   var(--leading-relaxed);
  margin-bottom: var(--spacing-5);
}

.category-link {
  font-family:     var(--font-elegant);
  color:           var(--color-gold);
  text-decoration: none;
  font-weight:     var(--font-weight-semibold);
  font-size:       var(--text-xs);
  letter-spacing:  var(--ls-wider);
  text-transform:  uppercase;
  transition:      var(--transition-elegant);
  display:         inline-flex;
  align-items:     center;
  gap:             var(--spacing-1-5);
}

.category-link:hover {
  color:       var(--color-gold-light);
  gap:         var(--spacing-3);
  text-shadow: 0 0 12px var(--color-gold-glow-sm);
}

/* ============================================================
   3. TOUR PACKAGES SECTION — filter + cards
   ============================================================ */

.tour-packages-section {
  padding:    var(--spacing-24) 0;
  background: var(--bg-primary);
}

/* ── Filter Controls ── */
.filter-controls {
  border-radius:  var(--radius-xl);
  padding:        var(--spacing-4) var(--spacing-6);
  background:     linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
  border:         1px solid var(--border-primary);
  margin-bottom:  var(--spacing-8);
  box-shadow:     var(--shadow-sm);
}

.filter-controls .row    { align-items: center; }

.filter-controls .col-md-6,
.filter-controls .col-md-3 {
  display:     flex;
  align-items: center;
}

.filter-buttons {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--spacing-2);
  align-items: center;
}

.btn-filter {
  font-family:    var(--font-elegant);
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  background:     var(--bg-sapphire-subtle);
  color:          var(--color-text-secondary);
  border:         1px solid var(--border-sapphire);
  border-radius:  var(--radius-full);
  padding:        var(--spacing-2) var(--spacing-5);
  transition:     var(--transition-elegant);
  cursor:         pointer;
}

.btn-filter:hover,
.btn-filter.active {
  background:   var(--gradient-gold);
  color:        var(--color-navy-deepest);
  border-color: transparent;
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-gold);
}

.form-select {
  font-family:      var(--font-primary);
  font-size:        var(--text-sm);
  background-color: var(--bg-tertiary);
  color:            var(--color-text-secondary);
  border:           1px solid var(--border-primary);
  border-radius:    var(--radius-md);
  height:           38px;
  padding-top:      0;
  padding-bottom:   0;
  line-height:      1;
  transition:       var(--transition-base);
}

.form-select:focus {
  border-color: var(--color-sapphire);
  box-shadow:   0 0 0 3px var(--color-sapphire-glow-sm);
  outline:      none;
}

/* ── Package Card ── */
.package-card {
  border-radius:  var(--radius-xl);
  overflow:       hidden;
  background:     linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
  border:         1px solid var(--border-primary);
  transition:     var(--transition-premium);
  margin-bottom:  var(--spacing-8);
  box-shadow:     var(--shadow-md);
  display:        flex;
  flex-direction: column;
}

.package-card:hover {
  transform:    translateY(-12px);
  border-color: var(--border-cyan);
  box-shadow:   var(--shadow-xl), var(--glow-cyan);
}

.package-image {
  position:    relative;
  height:      220px;
  overflow:    hidden;
  flex-shrink: 0;
}

.package-image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display:    block;
}

.package-card:hover .package-image img { transform: scale(1.08); }

.package-overlay {
  position:   absolute;
  inset:      0;
  background: var(--gradient-overlay);
  /* no flex — both children are absolutely positioned */
}

.package-category {
  position:       absolute;
  top:            var(--spacing-4);
  right:          var(--spacing-4);
  padding:        var(--spacing-1) var(--spacing-3);
  background:     var(--gradient-gold);
  color:          var(--color-navy-deepest);
  font-family:    var(--font-elegant);
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  border-radius:  var(--radius-sm);
  box-shadow:     var(--shadow-gold);
  z-index:        var(--z-index-10);
}

.package-info {
  padding:        var(--spacing-6);
  display:        flex;
  flex-direction: column;
  flex:           1;
}

.package-title {
  font-family:     var(--font-display);
  font-size:       var(--text-2xl);
  font-weight:     var(--font-weight-semibold);
  line-height:     var(--leading-snug);
  letter-spacing:  var(--ls-tight);
  color:           var(--color-text-primary);
  display:         block;
  text-decoration: none;
  margin-bottom:   var(--spacing-3);
  transition:      var(--transition-base);
}

.package-title:hover { color: var(--color-gold); }

.package-meta {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   var(--spacing-4);
  gap:             var(--spacing-2);
  flex-wrap:       wrap;
}

.package-duration {
  font-family: var(--font-primary);
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  display:     flex;
  align-items: center;
  gap:         var(--spacing-1-5);
}

/* Price — gold rounded pill badge */
.package-price {
  font-family:    var(--font-elegant);
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background:     var(--gradient-gold);
  color:          var(--color-navy-deepest);
  padding:        var(--spacing-1) var(--spacing-3);
  border-radius:  var(--radius-full);
  display:        inline-flex;
  align-items:    center;
  white-space:    nowrap;
  box-shadow:     var(--shadow-gold);
  text-shadow:    none;
  line-height:    1.4;
}

.package-description {
  font-family:   var(--font-primary);
  color:         var(--color-text-secondary);
  font-size:     var(--text-sm);
  line-height:   var(--leading-relaxed);
  margin-bottom: var(--spacing-5);
  flex:          1;
}

.package-features {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--spacing-3);
  margin-bottom: var(--spacing-5);
}

.package-feature {
  font-family: var(--font-primary);
  font-size:   var(--text-xs);
  color:       var(--color-text-secondary);
  display:     flex;
  align-items: center;
  gap:         var(--spacing-1-5);
}

.package-feature i {
  color:     var(--color-cyan);
  font-size: 0.8rem;
}

.package-actions {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--spacing-3);
  margin-top:      auto;
  padding-top:     var(--spacing-4);
}

.btn-view-details {
  font-family:     var(--font-elegant);
  font-size:       var(--text-xs);
  font-weight:     var(--font-weight-semibold);
  letter-spacing:  var(--ls-wider);
  text-transform:  uppercase;
  color:           var(--color-cyan);
  background:      transparent;
  border:          1px solid var(--border-cyan);
  border-radius:   var(--radius-full);
  padding:         var(--spacing-2-5) var(--spacing-5);
  transition:      var(--transition-elegant);
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             var(--spacing-1-5);
}

.btn-view-details:hover {
  background: var(--color-cyan-bg);
  color:      var(--color-cyan-light);
  box-shadow: var(--shadow-cyan);
  transform:  translateY(-2px);
}

.btn-book-package {
  font-family:    var(--font-elegant);
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  background:     var(--gradient-gold);
  color:          var(--color-navy-deepest);
  border:         none;
  border-radius:  var(--radius-full);
  padding:        var(--spacing-2-5) var(--spacing-5);
  transition:     var(--transition-elegant);
  cursor:         pointer;
  display:        inline-flex;
  align-items:    center;
  gap:            var(--spacing-1-5);
}

.btn-book-package:hover {
  background: var(--gradient-gold-hover);
  transform:  translateY(-2px);
  box-shadow: var(--shadow-gold-lg);
}

.package-code {
  font-family:    var(--font-primary);
  font-size:      var(--text-xs);
  color:          var(--color-text-light);
  display:        inline-block;
  margin-top:     var(--spacing-3);
  letter-spacing: var(--ls-wide);
}

/* No-results */
#noResultsMessage {
  padding:       var(--spacing-16) var(--spacing-6);
  background:    linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
  border:        1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  margin-top:    var(--spacing-6);
  text-align:    center;
}

#noResultsMessage i {
  color:         var(--color-gold);
  font-size:     3rem;
  margin-bottom: var(--spacing-4);
  display:       block;
}

#noResultsMessage h3 {
  font-family:   var(--font-display);
  font-size:     var(--text-2xl);
  color:         var(--color-text-primary);
  margin-bottom: var(--spacing-3);
}

#noResultsMessage p {
  font-family: var(--font-primary);
  color:       var(--color-text-muted);
  font-size:   var(--text-sm);
}

/* Spinner */
.spinner {
  width:         48px;
  height:        48px;
  border:        3px solid var(--color-sapphire-glow-sm);
  border-top:    3px solid var(--color-gold);
  border-radius: var(--radius-full);
  animation:     pmSpin 0.9s linear infinite;
  margin:        0 auto;
}

@keyframes pmSpin {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-family:    var(--font-elegant);
  font-size:      var(--text-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          var(--color-text-muted);
  text-align:     center;
  margin-top:     var(--spacing-4);
}

/* ============================================================
   4. CUSTOM TOUR PLANNING SECTION
   ============================================================ */

.tour-planning-section {
  padding:    var(--spacing-24) 0;
  background: var(--bg-secondary);
  position:   relative;
  overflow:   hidden;
}

.tour-planning-section::after {
  content:        '';
  position:       absolute;
  bottom:         -100px;
  right:          -100px;
  width:          500px;
  height:         500px;
  background:     radial-gradient(ellipse at center, var(--color-gold-glow-sm) 0%, transparent 65%);
  pointer-events: none;
}

.tour-planning-section .section-title          { text-align: left; }
.tour-planning-section .section-title::after   { left: 0; transform: none; }

.custom-tour-features {
  list-style: none;
  padding:    0;
  margin:     var(--spacing-5) 0;
}

.custom-tour-features li {
  font-family:   var(--font-primary);
  font-size:     var(--text-sm);
  color:         var(--color-text-secondary);
  padding:       var(--spacing-2) 0;
  display:       flex;
  align-items:   center;
  gap:           var(--spacing-3);
  border-bottom: 1px solid var(--border-secondary);
  line-height:   var(--leading-normal);
}

.custom-tour-features li:last-child { border-bottom: none; }

.custom-tour-features li i {
  color:       var(--color-gold);
  font-size:   0.9rem;
  flex-shrink: 0;
}

.custom-tour-image {
  position:      relative;
  border-radius: var(--radius-2xl);
  overflow:      hidden;
  box-shadow:    var(--shadow-luxury);
  border:        1px solid var(--border-gold);
  min-height:    320px;
}

.custom-tour-image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  position:   absolute;
  inset:      0;
}

.tour-planning-overlay {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      linear-gradient(to bottom right, var(--color-dark-50) 0%, var(--color-dark-30) 100%);
  z-index:         var(--z-index-10);
}

.tour-planning-badge {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  width:           130px;
  height:          130px;
  border-radius:   var(--radius-full);
  background:      var(--gradient-gold);
  color:           var(--color-navy-deepest);
  font-family:     var(--font-elegant);
  font-weight:     var(--font-weight-bold);
  box-shadow:      var(--glow-gold);
  animation:       badgePulse 2.6s ease-in-out infinite;
  z-index:         var(--z-index-10);
}

.tour-planning-badge span:first-child {
  font-family:  var(--font-display);
  font-size:    var(--text-3xl);
  line-height:  1;
  font-weight:  var(--font-weight-bold);
}

.tour-planning-badge span:last-child {
  font-family:    var(--font-elegant);
  font-size:      var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-top:     var(--spacing-1);
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1);    box-shadow: var(--glow-gold);      }
  50%       { transform: scale(1.06); box-shadow: var(--shadow-gold-lg); }
}

/* ============================================================
   5. FAQ / ACCORDION
   ============================================================ */

.faq-section {
  padding:    var(--spacing-24) 0;
  background: var(--bg-secondary);
}

.accordion-item {
  background:    transparent;
  border:        1px solid var(--border-primary);
  margin-bottom: var(--spacing-3);
  border-radius: var(--radius-lg) !important;
  overflow:      hidden;
  transition:    var(--transition-base);
}

.accordion-item:hover { border-color: var(--border-sapphire); }

.accordion-button {
  font-family: var(--font-primary);
  font-size:   var(--text-base);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-primary);
  background:  linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
  padding:     var(--spacing-5) var(--spacing-6);
  box-shadow:  none !important;
  line-height: var(--leading-snug);
}

.accordion-button:not(.collapsed) {
  color:      var(--color-gold);
  background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B0BEC5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F0C96B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
  font-family: var(--font-primary);
  font-size:   var(--text-sm);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
  padding:     var(--spacing-5) var(--spacing-6);
  background:  var(--bg-tertiary);
  border-top:  1px solid var(--border-secondary);
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {
  .section-title { font-size: var(--text-3xl); }
  .filter-buttons { margin-bottom: var(--spacing-4); }
  .btn-filter { padding: var(--spacing-1-5) var(--spacing-4); }
  .tour-planning-badge { width: 100px; height: 100px; }
  .tour-planning-badge span:first-child { font-size: var(--text-2xl); }
  .tour-planning-section .section-title { text-align: center; }
  .tour-planning-section .section-title::after { left: 50%; transform: translateX(-50%); }
}

@media (max-width: 767.98px) {
  .tour-categories-section,
  .tour-packages-section,
  .tour-planning-section,
  .faq-section { padding: var(--spacing-16) 0; }

  .filter-controls .col-md-6,
  .filter-controls .col-md-3 { width: 100%; }
  .filter-controls .form-select { width: 100%; }
  .filter-buttons { margin-bottom: var(--spacing-3); }
  .category-card { padding: var(--spacing-6) var(--spacing-4); }
  .package-card { margin-bottom: var(--spacing-5); }
  .package-image { height: 190px; }
  .accordion-button { padding: var(--spacing-4) var(--spacing-5); font-size: var(--text-sm); }
  .accordion-body   { padding: var(--spacing-4) var(--spacing-5); }
  .custom-tour-image { min-height: 240px; }
}

@media (max-width: 575.98px) {
  .section-title { font-size: var(--text-2xl); }
  .filter-buttons .btn-filter { font-size: var(--text-xs); padding: var(--spacing-1-5) var(--spacing-3); }
  .package-title { font-size: var(--text-xl); }
  .package-actions { flex-direction: column; gap: var(--spacing-2-5); }
  .btn-view-details,
  .btn-book-package { width: 100%; justify-content: center; }
  .package-meta { flex-direction: column; align-items: flex-start; gap: var(--spacing-1-5); }
}

/* ============================================================
   PATCH — price overlay pill + filter col flex fix
   ============================================================ */

/* "On Request" text shown on the image overlay — pill badge */
.package-price-overlay {
  position:        absolute;
  bottom:          var(--spacing-4);
  left:            var(--spacing-4);
  font-family:     var(--font-elegant);
  font-size:       var(--text-xs);
  font-weight:     var(--font-weight-bold);
  letter-spacing:  var(--ls-wide);
  text-transform:  uppercase;
  background:      var(--color-dark-80);
  color:           var(--color-gold);
  border:          1px solid var(--border-gold);
  padding:         var(--spacing-1) var(--spacing-3);
  border-radius:   var(--radius-full);
  display:         inline-flex;
  align-items:     center;
  backdrop-filter: blur(4px);
  z-index:         var(--z-index-10);
  white-space:     nowrap;
}

/* Bootstrap col-lg-2-5 equivalent — 5-column split for selects */
@media (min-width: 992px) {
  .col-lg-2-5 {
    flex:      0 0 auto;
    width:     20.8333%;
  }
  .col-lg-7 {
    flex:      0 0 auto;
    width:     58.3333%;
  }
}

/* Filter buttons: no-wrap on large screens */
@media (min-width: 992px) {
  .filter-buttons {
    flex-wrap: nowrap;
  }
}