/* ==========================================================================
   Nokande — Landing (Liquid Glass)
   Layout follows the reference airline homepage; surfaces are liquid glass:
   saturated blur, specular rim, pointer-following glint, and (Chromium)
   true refraction through an SVG displacement map.
   ========================================================================== */

:root {
  --lg-tint: rgba(255, 255, 255, .16);
  --lg-tint-strong: rgba(255, 255, 255, .62);
  --lg-rim: rgba(255, 255, 255, .55);
  --lg-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Glass material ---------- */
.lg {
  --mx: 30%; --my: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .08) 55%, rgba(255, 255, 255, .14));
  -webkit-backdrop-filter: blur(20px) saturate(185%);
  backdrop-filter: blur(20px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    inset 0 -1px 0 rgba(255, 255, 255, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    0 18px 40px -18px rgba(5, 20, 14, .45);
  color: #fff;
}
/* Chromium: real refraction. Other engines ignore this declaration and keep the blur above. */
@supports (backdrop-filter: url(#lg-refract)) {
  .lg.is-refract { backdrop-filter: blur(8px) saturate(185%) url(#lg-refract); }
}
/* Specular glint that follows the pointer (driven by --mx / --my). */
.lg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 45%);
  opacity: .9; transition: opacity .4s;
}
/* Rim light: brighter at the top edge, like curved glass catching light. */
.lg::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; padding: 1px;
  background: linear-gradient(170deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, .25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Light glass for surfaces over the page background. */
.lg-light { color: var(--nk-ink); background: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .58)); }
.lg-light::after { background: linear-gradient(170deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .2) 45%, rgba(255, 255, 255, .6)); }

/* ---------- Floating glass capsule header (site-wide) ---------- */
.nk-topbar { display: none; }
.nk-header {
  position: fixed; top: 12px; inset-inline: 0; margin-inline: auto; width: min(1240px, calc(100% - 24px));
  border-radius: 999px; border: 0; z-index: 60; color: var(--nk-ink);
  background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .62));
  -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 12px 32px -14px rgba(5, 20, 14, .3);
  transition: background .5s var(--lg-ease), box-shadow .5s var(--lg-ease), color .3s, top .4s var(--lg-ease);
}
.nk-header > .nk-container { height: 64px; padding-inline: 20px 12px; max-width: none; }
.nk-header .nk-nav-link { height: 64px; color: inherit; }
.nk-header .nk-nav-link::after { background: currentColor; height: 2px; bottom: 14px; }
.nk-header .nk-icon-btn { color: inherit; }
.nk-header .nk-btn { border-radius: 999px; }
.nk-header.is-scrolled { top: 8px; }
/* Pages without a full-bleed hero reserve room for the fixed capsule. */
body:not(.has-hero):has(.nk-header) #main { padding-top: 92px; }

/* Home: transparent over the hero photo until the page scrolls. */
.has-hero .nk-header:not(.is-scrolled) {
  color: #fff; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.has-hero .nk-header:not(.is-scrolled) [data-brand] span { color: #fff !important; }
.has-hero .nk-header:not(.is-scrolled) .nk-icon-btn:hover { background: rgba(255, 255, 255, .16); }
.has-hero .nk-header:not(.is-scrolled) [data-logo] circle { stroke: #fff; }
.has-hero .nk-header:not(.is-scrolled) [data-logo] path[fill] { fill: #fff; }
.has-hero .nk-header:not(.is-scrolled) .nk-btn { background: #fff; color: var(--nk-ink); }

/* ---------- Hero ---------- */
.l-hero { position: relative; min-height: max(680px, 100svh); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #0B2A20; color: #fff; }
.l-hero-media { position: absolute; inset: 0; }
.l-hero-media img, .l-hero-media video { width: 100%; height: 100%; object-fit: cover; }
.l-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 18, 12, .42) 0%, rgba(4, 18, 12, 0) 26%, rgba(4, 18, 12, 0) 45%, rgba(4, 18, 12, .62) 100%); }
.l-hero-inner { position: relative; padding-top: 140px; padding-bottom: 40px; }
.l-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.25; font-weight: 500; letter-spacing: -.015em; max-width: 15em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.l-hero-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 16px; border-radius: 999px; font-size: 15px; }

/* ---------- Glass booking panel ---------- */
.l-book { margin-top: 36px; border-radius: 28px; padding: 10px; }
.l-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 5px; border-radius: 999px; background: rgba(8, 22, 15, .34); }
.l-seg-thumb {
  position: absolute; top: 5px; bottom: 5px; inset-inline-start: 5px; width: calc((100% - 10px) / var(--n, 3)); border-radius: 999px;
  background: rgba(255, 255, 255, .95); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .35);
  transform: translateX(calc(var(--i, 0) * -100%)); transition: transform .55s var(--lg-ease);
}
.l-seg button { position: relative; z-index: 1; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; font-size: 15px; color: rgba(255, 255, 255, .92); transition: color .35s; white-space: nowrap; }
.l-seg button.is-active { color: var(--nk-ink); font-weight: 500; text-shadow: none; }
.l-book-body { margin-top: 10px; padding: 8px; border-radius: 20px; background: rgba(255, 255, 255, .92); color: var(--nk-ink); }
.l-book-body .nk-float { border-color: transparent; background: #F1F3F1; border-radius: 14px; }
.l-book-body .nk-float:hover { border-color: #CBD2CE; }
.l-book-body .nk-float:focus-within { background: #fff; }
.l-book-body .nk-btn { border-radius: 14px; }

/* ---------- Section scaffolding ---------- */
.l-section { margin-top: 96px; }
@media (min-width: 1024px) { .l-section { margin-top: 128px; } }
.l-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.l-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 500; line-height: 1.35; }
.l-head p { margin-top: 6px; color: var(--nk-ink-2); max-width: 38em; }

/* Glass pill buttons on light backgrounds */
.l-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--nk-ink); }
.l-arrows { display: flex; gap: 8px; }
.l-round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--nk-ink); transition: transform .35s var(--lg-ease); }
.l-round:hover { transform: scale(1.06); }

/* ---------- Moment cards (carousel) ---------- */
.l-moment { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 26px; overflow: hidden; background: #0B2A20; }
.l-moment img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--lg-ease); }
.l-moment:hover img { transform: scale(1.06); }
.l-moment-cap { position: absolute; inset-inline: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; }
.l-moment-cap h3 { font-size: 1.1rem; font-weight: 500; line-height: 1.5; }
.l-moment-cap p { font-size: 13px; opacity: .85; }
.l-moment-go { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--nk-ink); transition: transform .45s var(--lg-ease); }
.l-moment:hover .l-moment-go { transform: translateX(-4px) rotate(-8deg); }
.l-moment-kind { position: absolute; top: 12px; right: 12px; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 500; }

/* ---------- Feature (tabbed full-bleed) ---------- */
.l-feature { position: relative; height: clamp(520px, 78vh, 720px); border-radius: 32px; overflow: hidden; background: #0B2A20; }
.l-feature-slide { position: absolute; inset: 0; }
.l-feature-slide img { width: 100%; height: 100%; object-fit: cover; }
.l-feature-tabs { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 2; }
.l-feature-cap { position: absolute; bottom: 24px; inset-inline-start: 24px; inset-inline-end: 24px; max-width: 460px; padding: 28px; border-radius: 24px; }
.l-feature-cap h3 { font-size: 1.6rem; font-weight: 500; line-height: 1.45; }
.l-feature-cap p { margin-top: 10px; line-height: 1.95; opacity: .92; }
.l-feature-cap .nk-btn { margin-top: 20px; border-radius: 999px; background: #fff; color: var(--nk-ink); }
.l-feature-cap .nk-btn:hover { background: #EDF4F0; }
@media (min-width: 1024px) { .l-feature-cap { bottom: 40px; inset-inline-start: 40px; } }

/* ---------- Tour cards ---------- */
.l-tour { position: relative; display: block; height: 500px; border-radius: 26px; overflow: hidden; background: #0B2A20; color: #fff; }
.l-tour > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--lg-ease); }
.l-tour:hover > img { transform: scale(1.05); }
.l-tour-chips { position: absolute; top: 14px; inset-inline: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.l-chip { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.l-chip.lg, .l-moment-kind.lg, .l-product-tag.lg { background: linear-gradient(160deg, rgba(20, 35, 28, .42), rgba(20, 35, 28, .26)); }
.l-tour-panel { position: absolute; inset-inline: 12px; bottom: 12px; padding: 18px; border-radius: 20px; }
.l-tour-panel h3 { font-size: 1.15rem; font-weight: 500; line-height: 1.6; }
.l-tour-meta { margin-top: 4px; font-size: 13px; opacity: .88; }
.l-tour-foot { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.l-tour-price small { display: block; font-size: 12px; opacity: .8; }
.l-tour-price strong { font-size: 1.15rem; font-weight: 600; }
.l-tour-cta { height: 42px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--nk-ink); font-size: 14px; font-weight: 500; transition: background .2s; }
.l-tour:hover .l-tour-cta { background: #EDF4F0; }

/* ---------- Product card ---------- */
.l-product {
  position: relative; display: flex; flex-direction: column; padding: 8px; border-radius: 26px; background: #fff;
  box-shadow: 0 1px 2px rgba(10, 30, 20, .04), 0 10px 30px -18px rgba(10, 30, 20, .25);
  transition: transform .5s var(--lg-ease), box-shadow .5s var(--lg-ease);
}
.l-product:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(10, 30, 20, .04), 0 24px 44px -20px rgba(10, 30, 20, .35); }
.l-product-media { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: #EEF1EC; }
.l-product-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--lg-ease); }
.l-product:hover .l-product-media img { transform: scale(1.05); }
.l-product-top { position: absolute; top: 10px; inset-inline: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 1; }
.l-product-tag { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 600; }
.l-product-fav .nk-fav { width: 34px; height: 34px; box-shadow: none; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.l-product-add {
  position: absolute; bottom: 10px; inset-inline-end: 10px; z-index: 1; height: 42px; padding: 0 12px;
  display: inline-grid; grid-template-columns: auto 0fr; align-items: center; border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: grid-template-columns .45s var(--lg-ease), background .25s, color .25s;
}
.l-product-add span { min-width: 0; overflow: hidden; white-space: nowrap; }
.l-product-add span::before { content: ""; display: inline-block; width: 6px; }
.l-product:hover .l-product-add, .l-product-add:focus-visible { grid-template-columns: auto 1fr; }
.l-product-add:hover { background: var(--nk-primary); color: #fff; }
.l-product-out { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-weight: 500; }
.l-product-body { padding: 12px 8px 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.l-product-seller { font-size: 12px; color: var(--nk-muted); }
.l-product-name { font-size: 15px; font-weight: 500; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.4em; }
.l-product-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.l-product-price { font-size: 16px; font-weight: 600; }
.l-product-price small { font-size: 12px; font-weight: 400; color: var(--nk-muted); }
.l-product-price s { display: block; font-size: 12px; font-weight: 400; color: var(--nk-muted); }
.l-product-rate { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--nk-ink-2); }
.l-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 768px) { .l-products { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1200px) { .l-products { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/* Category chips on light background */
.l-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; }
.l-cats::-webkit-scrollbar { display: none; }
.l-cat { flex-shrink: 0; height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 14px; background: #fff; color: var(--nk-ink-2); box-shadow: inset 0 0 0 1px rgba(10, 30, 20, .08); transition: background .2s, color .2s; }
.l-cat:hover { color: var(--nk-ink); background: #EDF4F0; }

/* ---------- Newsletter over image ---------- */
.l-letter { position: relative; min-height: 440px; border-radius: 32px; overflow: hidden; display: flex; align-items: center; background: #0B2A20; }
.l-letter > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.l-letter-panel { position: relative; margin: 20px; max-width: 580px; padding: 32px; border-radius: 26px; }
.l-letter-panel h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; }
.l-letter-panel p { margin-top: 8px; opacity: .92; line-height: 1.9; }
.l-letter-panel .nk-float { border-color: transparent; background: rgba(255, 255, 255, .92); border-radius: 14px; }
.l-letter-panel .nk-btn { border-radius: 14px; background: #fff; color: var(--nk-ink); }
.l-letter-panel .nk-btn:hover { background: #EDF4F0; }
@media (min-width: 1024px) { .l-letter-panel { margin-inline-start: 56px; padding: 40px; } }

/* ---------- Citizen band ---------- */
.l-citizen { position: relative; border-radius: 32px; overflow: hidden; min-height: 420px; display: grid; align-items: end; background: #0B2A20; color: #fff; }
.l-citizen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.l-citizen-inner { position: relative; padding: 20px; display: grid; gap: 12px; }
@media (min-width: 1024px) { .l-citizen-inner { grid-template-columns: 1.1fr 1fr 1fr 1fr; align-items: stretch; padding: 32px; } }
.l-citizen-card { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px; border-radius: 22px; min-height: 150px; transition: transform .45s var(--lg-ease); }
a.l-citizen-card:hover { transform: translateY(-4px); }
.l-citizen-card h3 { font-size: 1.1rem; font-weight: 500; }

/* Scroll-in (script applies the start state; content is visible without JS) */
@media (prefers-reduced-motion: reduce) {
  .l-seg-thumb, .l-product, .l-moment img, .l-tour > img { transition: none !important; }
}

/* Text-bearing glass over photos gets a deeper tint so white copy keeps ≥4.5:1 contrast on bright skies. */
.l-feature-cap.lg, .l-letter-panel.lg, .l-tour-panel.lg, .l-moment-cap.lg, .l-citizen-card.lg, .l-book.lg {
  background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(12, 28, 20, .30) 60%, rgba(12, 28, 20, .38));
}
.l-feature-cap h3, .l-letter-panel h2, .l-tour-panel h3, .l-moment-cap h3, .l-citizen-card h2, .l-citizen-card h3 { text-shadow: 0 1px 12px rgba(0, 0, 0, .28); }


/* ==========================================================================
   Site-wide alignment with the landing page
   ========================================================================== */
.nk-btn { border-radius: 14px; }
.nk-btn-sm { border-radius: 12px; }
.nk-input { border-radius: 14px; background: #F4F6F3; border-color: transparent; }
.nk-input:hover { border-color: #CBD2CE; }
.nk-input:focus { background: #fff; }
.nk-float { border-radius: 14px; background: #F4F6F3; border-color: transparent; }
.nk-card { border-radius: 24px; box-shadow: 0 1px 2px rgba(10, 30, 20, .04), 0 10px 30px -18px rgba(10, 30, 20, .25); }
.nk-card-flat { border-radius: 20px; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(10, 30, 20, .07); }
.nk-media { border-radius: 18px; }
.nk-pill {
  height: 40px; border: 0; background: #fff; color: var(--nk-ink-2);
  box-shadow: inset 0 0 0 1px rgba(10, 30, 20, .08); transition: background .2s, color .2s, box-shadow .2s;
}
.nk-pill:hover { background: #EDF4F0; color: var(--nk-ink); }
.nk-pill.is-active { background: var(--nk-primary); color: #fff; box-shadow: 0 6px 16px -8px rgba(14, 90, 67, .6); }
.nk-badge { border-radius: 999px; padding: 0 10px; }
.nk-tabs { border-bottom: 0; gap: 8px; }
.nk-tabs a, .nk-tabs button { padding: 8px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(10, 30, 20, .08); }
.nk-tabs .is-active { background: var(--nk-primary); color: #fff; box-shadow: none; }
.nk-tabs .is-active::after { display: none; }
.nk-table th { background: #F7F9F6; }
.nk-toast { border-radius: 16px; }

/* Page hero: the landing's rounded photo with a glass title card */
.l-pagehero { position: relative; height: clamp(320px, 46vw, 460px); border-radius: 32px; overflow: hidden; background: #0B2A20; }
.l-pagehero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.l-pagehero-cap { position: absolute; bottom: 20px; inset-inline-start: 20px; inset-inline-end: 20px; max-width: 560px; padding: 24px 26px; border-radius: 24px; }
.l-pagehero-cap h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; line-height: 1.35; }
.l-pagehero-cap p { margin-top: 8px; line-height: 1.9; opacity: .92; }
@media (min-width: 1024px) { .l-pagehero-cap { bottom: 32px; inset-inline-start: 32px; } }
.l-pagehero-cap.lg { background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(12, 28, 20, .30) 60%, rgba(12, 28, 20, .38)); }

/* Jalali date picker, themed to the site */
html jdp-container {
  --jdp-primary: #0E5A43; --jdp-red: #B42318; --jdp-color-5: #16201B; --jdp-color-2: #E3E7E2; --jdp-day-size: 40px;
  font-family: inherit; border-radius: 18px !important; padding: .6rem 0 !important;
  box-shadow: 0 24px 48px -20px rgba(10, 30, 20, .35), inset 0 0 0 1px rgba(10, 30, 20, .06) !important;
}
html jdp-container .jdp-day:not(.disabled-day) { border-radius: 10px; }
html jdp-container .jdp-day.today { border-color: #0E5A43; }
html jdp-container .jdp-btn-today, html jdp-container .jdp-btn-empty, html jdp-container .jdp-btn-close { border-radius: 999px; padding: .35em .9em; }
html jdp-container select { font-family: inherit; }

.l-hero-sub { margin-top: 10px; max-width: 36em; font-size: 1.1rem; line-height: 1.9; opacity: .92; text-shadow: 0 1px 16px rgba(0, 0, 0, .3); }