/* ==========================================================================
   Stelaran Holidays — Premium Design Polish Layer
   Loaded after style.css. Extends the existing gold/dark palette with
   consistent tokens (radius, shadow, spacing) and refines the components
   that appear across the site (buttons, cards, headings, forms, header,
   footer) for a more premium, editorial travel-brand feel — without
   touching page structure or existing class names.
   ========================================================================== */

:root {
  /* Deep navy/charcoal already used ad-hoc (e.g. button hover fill) —
     formalized here as the site's premium contrast tone. */
  --deep-navy: #0A1019;
  --deep-navy-soft: #131B2C;

  /* Warm neutral for premium section backgrounds (replaces flat white
     in alternating sections for a softer, boutique feel). */
  --cream: #FBF8F3;

  /* Consistent radius scale — replaces the mix of 2px / 5px / 20px /
     30px / 35px used ad hoc throughout style.css. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Colour-tinted shadow scale reads more premium than flat black. */
  --shadow-sm: 0 4px 16px rgba(10, 16, 25, 0.08);
  --shadow-md: 0 12px 32px rgba(10, 16, 25, 0.12);
  --shadow-lg: 0 24px 60px rgba(10, 16, 25, 0.16);
  --shadow-gold: 0 10px 28px rgba(251, 176, 59, 0.28);

  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------
   Typography rhythm
   -------------------------------------------------------------------- */
h1, h2, h3 {
  letter-spacing: -0.01em;
}

.section-title span,
.section-title2 .eg-section-tag,
.special_title {
  letter-spacing: 0.06em;
}

.section-title h2,
.section-title2 h2 {
  position: relative;
}

/* Thin gold accent rule under section eyebrow labels for a refined,
   editorial travel-brand look. */
.section-title span::after,
.section-title2 .eg-section-tag span::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--primary-color1);
  border-radius: var(--radius-pill);
}

p {
  color: rgba(16, 12, 8, 0.72);
}

/* --------------------------------------------------------------------
   Buttons — consistent pill shape, smoother easing, subtle gold glow
   on hover instead of the flat skew-fill effect alone.
   -------------------------------------------------------------------- */
.primary-btn1,
.primary-btn2,
.primary-btn3 {
  border-radius: var(--radius-pill);
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium), color 0.35s var(--ease-premium);
  box-shadow: var(--shadow-sm);
}

.primary-btn1:hover,
.primary-btn2:hover,
.primary-btn3:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.primary-btn2 {
  font-weight: 600;
}

/* --------------------------------------------------------------------
   Cards — consistent radius + elevation + gentle hover lift and image
   zoom across every card type actually used in the live templates
   (destination, package, activity, feature, category, transport,
   visa, login, info, trust-badge, testimonial).
   -------------------------------------------------------------------- */
.destination-card,
.destination-card2,
.package-card,
.activity-card,
.feature-card,
.banner2-card,
.cat-card,
.lux-card,
.transport-card,
.visa-card,
.login-card,
.info-card,
.trust-badge-card,
.tesimonial-card,
.booking-form-wrap {
  border-radius: var(--radius-md);
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

.destination-card:hover,
.destination-card2:hover,
.package-card:hover,
.activity-card:hover,
.feature-card:hover,
.banner2-card:hover,
.cat-card:hover,
.lux-card:hover,
.transport-card:hover,
.visa-card:hover,
.tesimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.destination-card img,
.destination-card2 img,
.package-card img,
.activity-card img,
.feature-card img {
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.6s var(--ease-premium);
}

.destination-card:hover img,
.destination-card2:hover img,
.package-card:hover img,
.activity-card:hover img,
.feature-card:hover img {
  transform: scale(1.06);
}

/* .cat-card has its own dedicated overlay + zoom system directly in
   style.css (always-visible count badge, tuned 1.12 zoom) — excluded
   here so this generic rule doesn't fight that tuning. */

/* Card image containers need overflow hidden for the zoom effect to
   read as a crop rather than the image spilling out of the card. */
.destination-banner,
.package-card-img-wrap,
.activity-img-wrap,
.card-img {
  overflow: hidden;
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------
   Sidebar summary / booking widgets (Tour Days Summary, booking forms)
   -------------------------------------------------------------------- */
.booking-form-wrap {
  background: var(--white-color);
  box-shadow: var(--shadow-sm);
  padding: 28px;
  border: 1px solid rgba(10, 16, 25, 0.06);
}

.booking-form-wrap h4 {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(10, 16, 25, 0.08);
}

.tour-days-summary li {
  transition: background 0.3s var(--ease-premium);
  border-radius: var(--radius-sm);
}

.tour-days-summary li:hover {
  background: var(--cream);
}

.tour-days-summary-cta .primary-btn2 {
  width: 100%;
  justify-content: center;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* --------------------------------------------------------------------
   Header — subtle premium elevation
   -------------------------------------------------------------------- */
header.style-1 {
  box-shadow: 0 1px 0 rgba(10, 16, 25, 0.06);
}

header.style-1.sticky {
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------
   Forms / inputs — gold focus ring on the site's real form fields
   (.form-control, used across booking/contact/search forms). Left
   third-party widgets (select2, nice-select, daterangepicker) alone
   since they manage their own internal markup and radius.
   -------------------------------------------------------------------- */
.form-control {
  border-radius: var(--radius-sm);
  transition: box-shadow 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium);
}

.form-control:focus {
  border-color: var(--primary-color1);
  box-shadow: 0 0 0 3px rgba(251, 176, 59, 0.25);
}

/* --------------------------------------------------------------------
   Accordion (Itinerary) — soften the default template look. Matches
   the existing selector specificity so it actually takes effect
   instead of being silently overridden by the more specific rules
   already in style.css.
   -------------------------------------------------------------------- */
.package-details-area .tour-plan .accordion-item {
  margin-bottom: 10px;
  transition: box-shadow 0.3s var(--ease-premium);
}

.package-details-area .tour-plan .accordion-item .accordion-header .accordion-button {
  border-radius: var(--radius-sm);
  transition: background-color 0.3s var(--ease-premium);
}

.package-details-area .tour-plan .accordion-item .accordion-header .accordion-button span {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.package-details-area .tour-plan .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: var(--cream);
}

/* Footer already uses a matching deep navy (#0b1120) with its own tuned
   palette (.cta-inner-card etc.) — left untouched to avoid clashing with
   colours already coordinated together. */