/* ============================================================================
   ZL TOURS — PREMIUM VISUAL REFINEMENT (overlay)
   File: css/zl-premium.css   |   Load AFTER css/style.css on every page.
   ----------------------------------------------------------------------------
   Pure CSS. No HTML/JS change. Reuses ONLY existing selectors + brand vars.
   Direction: calm minimal luxury / warm editorial — a tasteful refinement of
   spacing, shadows, radius, warm surfaces, section hierarchy and buttons.
   NOT a redesign, NOT loud.

   Safety contract (enforced throughout):
     • Logical properties only (padding-inline / margin-block / inset-inline /
       border-*-*-radius / text-align:start) so RTL default + [dir=ltr] both work.
     • min-width:0 on every flex/grid child that can receive long content.
     • clamp preserved: card title = 2 lines, desc = 3 lines (with reserved height).
     • Card footers pinned (margin-block-start:auto), price/action never overflow.
     • Provider/guide chip never stretches (align-self:flex-start; flex:0 0 auto).
     • Payment + social icons stay intact (only spacing/whitespace normalized).
     • No body horizontal scroll; no position:fixed left/right introduced.
     • No heavy animation: short transform/shadow transitions only.
   Brand vars are never redefined; overlay-only surfaces use --zl-* tokens.
   ============================================================================ */


/* ============================================================================
   0. OVERLAY TOKENS  (calmer elevation + warm-neutral surfaces)
   We refine the brand --shadow* values to soft, brand-tinted elevation, and add
   private --zl-* surfaces so brand colors are never overwritten.
   ============================================================================ */
:root {
  /* Softer, low-spread, brand-tinted shadows (were 0 4px 30px / 0 20px 60px). */
  --shadow:    0 1px 2px rgba(0,79,108,.05), 0 10px 30px rgba(0,79,108,.06);
  --shadow-lg: 0 2px 6px rgba(0,79,108,.06), 0 18px 44px rgba(0,79,108,.10);
  --shadow-xl: 0 6px 14px rgba(0,79,108,.07), 0 30px 70px rgba(0,79,108,.13);

  /* Private overlay surfaces (warm-neutral, within the cream family). */
  --zl-paper:      #FBF8F2;                  /* a touch warmer than --cream      */
  --zl-paper-2:    #F4EDE1;                  /* warm section band                */
  --zl-hair:       1px solid rgba(0,79,108,.08);   /* hairline on light          */
  --zl-hair-soft:  rgba(0,79,108,.07);       /* divider tint                     */
  --zl-line-warm:  rgba(153,98,48,.14);      /* warm hairline                    */
  --zl-ink-soft:   #5b5347;                  /* warm body text                   */
  --zl-ease:       cubic-bezier(.23,1,.32,1);
}

/* Warm the page background a hair (still cream family, not a color change). */
body { background-color: var(--zl-paper); }


/* ============================================================================
   1. SECTION HIERARCHY  (airier rhythm + refined eyebrow + thin gold rule)
   ============================================================================ */
.section-cream    { background: var(--zl-paper); padding-block: 64px; }
.section-deep     { padding-block: 64px; }
.packages-section { background: var(--zl-paper); padding-block-end: 72px; }

.section-header {
  padding-block: 64px 28px;
  padding-inline: 24px;
}

/* Eyebrow / label: quieter warm pill, brand-blue text, start-safe. */
.section-label {
  background: rgba(0,79,108,.05);
  border-color: rgba(0,79,108,.16);
  color: var(--deep-blue);
  letter-spacing: .04em;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}

/* Title: tighter editorial set + a centered thin gold rule for hierarchy. */
.section-title {
  letter-spacing: -.01em;
  text-wrap: balance;
}
.section-header .section-title::after {
  content: "";
  display: block;
  inline-size: 56px;
  block-size: 3px;
  margin-block-start: 16px;
  margin-inline: auto;                 /* centered, RTL/LTR safe */
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), rgba(230,181,99,.35));
}


/* ============================================================================
   2. EXPERIENCE / PRODUCT CARDS  (calm shell, hairline, gentle lift)
   ============================================================================ */
.packages-grid {
  gap: 30px;
}
/* SAFETY: grid children must be allowed to shrink (no overflow push). */
.packages-grid > * { min-width: 0; }

.package-card {
  border-radius: 20px;
  border: var(--zl-hair);
  box-shadow: var(--shadow);
  min-width: 0;
  transition: transform .4s var(--zl-ease),
              box-shadow .4s var(--zl-ease),
              border-color .4s ease;
}
.package-card:hover {
  transform: translateY(-6px);              /* gentle, was -10px */
  box-shadow: var(--shadow-lg);
  border-color: rgba(230,181,99,.30);
}

/* Image: calmer zoom (was scale 1.09). Aspect ratio left intact upstream. */
.package-card:hover .package-card-image img { transform: scale(1.05); }

/* Badge: quieter premium chip; logical placement, fixed L/R neutralized. */
.package-badge {
  inset-block-start: 12px;
  inset-inline-end: 12px;
  right: auto;                              /* neutralize legacy fixed right */
  background: rgba(255,255,255,.92);
  color: var(--deep-blue);
  font-weight: 700;
  border: 1px solid rgba(0,79,108,.08);
  box-shadow: 0 2px 8px rgba(0,39,54,.10);
  backdrop-filter: blur(4px);
}
.package-badge.vip       { background: linear-gradient(135deg,#E6B563,#996230); color:#fff; border-color:transparent; }
.package-badge.new       { background: var(--teal); color:#fff; border-color:transparent; }
.package-badge.exclusive { background: var(--black); color:#fff; border-color:transparent; }

/* Category tag: logical placement, fixed L/R neutralized. */
.package-category-tag {
  inset-block-end: 12px;
  inset-inline-start: 14px;
  left: auto;                               /* neutralize legacy fixed left */
}

/* Body: comfortable padding, start-aligned, safe shrink. */
.package-card-body {
  padding-block: 20px 16px;
  padding-inline: 20px;
  min-width: 0;
  text-align: start;
}
.package-card-name {
  color: var(--deep-blue);
  letter-spacing: -.005em;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;                    /* SAFETY: title max 2 lines */
}
.package-card-desc {
  color: var(--zl-ink-soft);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 3;                    /* SAFETY: desc max 3 lines */
  min-height: calc(1.65em * 3);
}
.package-card-meta { min-width: 0; }
.package-card-meta > * { min-width: 0; }
.meta-item i { color: var(--gold); }

/* Highlight chips: warm, tidy, never overflow. */
.highlight-tag {
  background: rgba(153,98,48,.07);
  color: var(--brown);
  border-radius: 999px;
  overflow-wrap: anywhere;
}
.highlight-tag:hover { background: rgba(153,98,48,.13); }

/* Provider / guide chip: NEVER stretch; start-anchored; clip-safe. */
.pkg-guide-chip {
  align-self: flex-start;
  flex: 0 0 auto;
  max-inline-size: 100%;
  min-width: 0;
  background: rgba(0,79,108,.04);
  border-color: rgba(0,79,108,.10);
}
.pkg-guide-chip:hover {
  background: rgba(230,181,99,.10);
  border-color: rgba(230,181,99,.34);
}
.pkg-guide-chip-text { min-width: 0; }
.pkg-guide-chip-name { overflow-wrap: anywhere; }

/* Footer: pinned to bottom, warm band, hairline divider, safe shrink. */
.package-card-footer {
  margin-block-start: auto;                 /* pin to bottom */
  padding-block: 15px;
  padding-inline: 20px;
  border-top: 1px solid var(--zl-hair-soft);
  background: var(--zl-paper);
  gap: 12px;
  min-width: 0;
}
.package-price { min-width: 0; }
.price-amount  { color: var(--deep-blue); letter-spacing: -.01em; }

/* Book button: calm vertical lift instead of horizontal shake (keeps tokens). */
.btn-book {
  box-shadow: 0 2px 8px rgba(0,79,108,.10);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.btn-book:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(230,181,99,.30);
}

/* Product-card + skeleton adopt the same calm radius. */
.zl-product-card { border-radius: 20px; }
.zl-skel-card    { border-radius: 20px; }


/* ============================================================================
   3. DESTINATION + CATEGORY CARDS  (same calm language; off-home pages)
   ============================================================================ */
.dest-grid > *,
.destinations-grid > *,
.categories-container > * { min-width: 0; }

.dest-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  min-width: 0;
  transition: transform .4s var(--zl-ease), box-shadow .4s ease;
}
.dest-card:hover { box-shadow: var(--shadow-lg); }
.dest-card-content { text-align: start; }   /* RTL/LTR safe */

.category-card {
  border-radius: var(--radius-lg);
  min-width: 0;
  box-shadow: var(--shadow);
  transition: transform .35s var(--zl-ease), box-shadow .35s ease;
}
.category-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}


/* ============================================================================
   4. MARKETPLACE FILTER BAR  (softened to match cards; layout untouched)
   NOTE: the WINNING .zl-mall-kind / .zl-mk-opt rules live at style.css:6341
   (appended last). We only refine chrome here; we do NOT relayout the bar.
   The .zl-mall-label ellipsis caps are left fully intact (do not override).
   ============================================================================ */
.zl-mall-bar {
  border: var(--zl-hair);
  border-radius: 22px;                       /* calmer than 60px, still rounded */
  box-shadow: var(--shadow);
  padding-block: 12px;
  padding-inline: 16px;
  gap: 10px;
  min-width: 0;
}
/* SAFETY: every bar child may shrink. */
.zl-mall-bar > * { min-width: 0; }

.zl-mall-search input,
#zlDiscSearch {
  background: var(--zl-paper);
  border-color: rgba(0,79,108,.14);
}
.zl-mall-search input:focus,
#zlDiscSearch:focus {
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(0,171,199,.10);
}

.zl-mall-trig {
  border: 1.5px solid rgba(0,79,108,.16);
  border-radius: 14px;                       /* harmonized with the bar */
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.zl-mall-trig:hover {
  border-color: var(--teal);
  background: var(--zl-paper);
  transform: translateY(-1px);
}
.zl-mall-trig[aria-expanded="true"] {
  border-color: var(--deep-blue);
  box-shadow: 0 6px 18px rgba(0,79,108,.14);
}

/* Selected-value pill keeps its ellipsis cap upstream; just tidy color. */
.zl-mall-val { background: var(--deep-blue); }

.zl-mall-panel {
  border: var(--zl-hair);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.zl-mall-opt { border-radius: 10px; text-align: start; }
.zl-mall-opt:hover  { background: var(--zl-paper); }
.zl-mall-opt.active { background: var(--deep-blue); color: #fff; }

/* Segmented kind tabs: refine the WINNING rule's CHROME only (no relayout). */
.zl-mall-kind {
  background: var(--zl-paper-2);
  border: 1px solid var(--zl-line-warm);
  box-shadow: none;
  flex-shrink: 0;
}
.zl-mk-opt.active {
  background: var(--deep-blue);
  box-shadow: 0 2px 6px rgba(0,79,108,.20);
}

.zl-mall-count { background: var(--zl-paper); border: 1px solid rgba(0,79,108,.06); }

/* Load-more: scope to the bar's button so other .btn-outline stay untouched. */
#zlPkgMore #zlPkgMoreBtn {
  box-shadow: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
#zlPkgMore #zlPkgMoreBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,79,108,.14);
}


/* ============================================================================
   5. PARTNERS BAND  (warm-premium chips on the deep section)
   ============================================================================ */
.partner-item {
  border-radius: 14px;
  border-color: rgba(230,181,99,.16);
  min-width: 140px;
  flex-shrink: 0;
  transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.partner-item:hover {
  background: rgba(230,181,99,.10);
  border-color: rgba(230,181,99,.40);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(230,181,99,.16);
}


/* ============================================================================
   6. FOOTER  (refined spacing, even social row, payment icons intact)
   ============================================================================ */
.footer {
  padding-block-start: 72px;
  box-shadow: inset 0 1px 0 rgba(230,181,99,.18);   /* thin gold seam at top */
}
.footer-container {
  gap: 44px;
  padding-block-end: 44px;
}
/* SAFETY: columns may shrink (long translated labels). */
.footer-container > * { min-width: 0; }

.footer-col h5 {
  border-bottom-color: rgba(230,181,99,.22);
  padding-bottom: 12px;
  letter-spacing: .6px;
}
.footer-col ul li a { overflow-wrap: anywhere; }

/* Social row: kill the literal-whitespace gap from the HTML string, keep icons.
   The footer-social div carries an inline margin-top:18px (cannot be removed by
   class) — we leave it; we only collapse the stray text nodes between anchors. */
.footer-social {
  font-size: 0;                              /* collapses inter-anchor whitespace */
  gap: 10px;
  flex-wrap: wrap;
}
.footer-social a {
  border-radius: 12px;
  font-size: 1rem;                           /* restore icon size after font-size:0 */
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.footer-social a i { font-size: 1rem; }      /* belt-and-braces icon size restore */
.footer-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #002B3D;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(230,181,99,.30);
}

.footer-bottom {
  padding-block: 22px;
  padding-inline: 24px;
  gap: 14px;
}

/* Payment row: even the rhythm; icons stay crisp + intact (sizes preserved).
   A subtle uniform light chip evens the raster-Tamara-vs-SVG mismatch without
   resizing any logo. */
.zl-pay-row { gap: 8px; align-items: center; flex-wrap: wrap; }
.payment-methods .zl-pay-logo {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.9);
  border-radius: 6px;
  padding-block: 4px;
  padding-inline: 7px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
/* Do NOT change img height here — upstream pins 22px (→18px @640) for a tidy row. */
.payment-methods .payment-label { color: rgba(238,232,213,.55); }


/* ============================================================================
   7. GLOBAL SAFETY NET  (no horizontal scroll, no overflow push)
   body already has overflow-x:hidden upstream; these keep children inside it.
   ============================================================================ */
.zl-mall-bar,
.packages-grid,
.footer-container,
.dest-grid,
.destinations-grid,
.categories-container { max-inline-size: 100%; }

img, svg { max-inline-size: 100%; }


/* ============================================================================
   8. RESPONSIVE  (preserve calm spacing on small screens; never relayout)
   ============================================================================ */
@media (max-width: 720px) {
  .section-header { padding-block: 44px 22px; }
  .section-header .section-title::after { margin-block-start: 14px; }
  .packages-grid { gap: 22px; }
  .zl-mall-bar  { border-radius: 18px; padding-inline: 12px; gap: 8px; }
}