/*
 * Styles for markup the CMS introduces on top of the original static design.
 * style.css is left as it shipped so the two stay comparable; everything new
 * — CMS-driven layouts, real forms, the popup — lives here and reuses the
 * same design tokens (--navy, --gold, --radius …).
 */

/* ── Hero video slides ─────────────────────────────────────────────────── */
.hero-bg { overflow: hidden; }

.hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keep copy and controls above the media and its overlay. */
.hero-overlay { z-index: 2; }
.hero-content { position: relative; z-index: 3; }
.hero-dots { z-index: 3; }

/* ── Shared section furniture ──────────────────────────────────────────── */
.section { padding: 84px 0; }
.section-soft { background: var(--soft); }

.section-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--navy);
  margin: 0 0 34px;
  text-align: center;
}

.container.narrow { width: min(820px, calc(100% - 40px)); }

.prose { color: var(--ink); line-height: 1.8; }
.prose h2 { font-family: "Playfair Display", serif; color: var(--navy); margin-top: 1.8em; }
.prose h3 { color: var(--navy-2); margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--blue); text-decoration: underline; }
.prose img { border-radius: var(--radius); margin: 1.5em 0; }

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 48px 0;
}

/* ── Filter button rows ────────────────────────────────────────────────── */
.tour-filters, .gallery-filters, .blog-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 32px;
}

.tour-filter-btn, .gallery-filter-btn, .blog-category-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: background .2s, color .2s, border-color .2s;
}

.tour-filter-btn:hover, .gallery-filter-btn:hover { border-color: var(--blue); color: var(--blue); }

.tour-filter-btn.active, .gallery-filter-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.tour-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--gold);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}

/* ── Card grids ────────────────────────────────────────────────────────── */
.country-grid, .visa-grid, .hospital-grid, .treatment-grid, .fare-grid, .unit-grid, .process-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.country-card, .visa-card, .hospital-card, .treatment-card, .fare-card, .unit-card, .process-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}

.country-card img, .hospital-card img, .unit-card img {
  height: 150px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 16px;
}

.unit-card img { height: 64px; object-fit: contain; }

.country-card h3, .visa-card h3, .hospital-card h3, .treatment-card h3, .fare-card h3, .unit-card h3, .process-step h3 {
  color: var(--navy);
  margin: 0 0 10px;
  font-size: 19px;
}

.country-card p, .visa-card p, .hospital-card p, .treatment-card p, .unit-card p, .process-step p {
  color: var(--muted);
  margin: 0 0 14px;
}

.treatment-card i, .unit-card i, .process-step i {
  font-size: 26px;
  color: var(--blue);
  margin-bottom: 12px;
  display: block;
}

.process-step { position: relative; }

.process-number {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: "Playfair Display", serif;
  font-size: 34px;
  color: var(--line);
  line-height: 1;
}

.treatment-price, .fare-price, .package-price {
  font-weight: 800;
  color: var(--navy);
  font-size: 22px;
  margin: 0 0 6px;
}

.treatment-price small, .fare-price small, .package-price small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.visa-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.visa-type { background: var(--soft); color: var(--navy-2); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.visa-meta, .package-meta, .tour-meta, .hospital-accreditations {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
}

.visa-meta i, .package-meta i, .tour-meta i { color: var(--blue); width: 18px; }

.hospital-accreditations { display: flex; flex-wrap: wrap; gap: 8px; }
.hospital-accreditations li { background: var(--soft); padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.hospital-location { color: var(--blue); font-weight: 600; font-size: 14px; margin: -4px 0 10px; }

.visa-requirements summary { cursor: pointer; font-weight: 600; color: var(--navy-2); margin-bottom: 8px; }
.visa-requirements ul { padding-left: 1.2em; color: var(--muted); font-size: 14px; }
.visa-note, .fare-disclaimer, .fare-validity, .fare-baggage, .package-disclaimer, .estimate-note {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 0;
}

.package-disclaimer {
  background: var(--soft);
  border-left: 3px solid var(--gold);
  padding: 14px 18px;
  border-radius: 10px;
  margin-top: 26px;
}

.fare-airline { height: 34px; width: auto; object-fit: contain; margin-bottom: 12px; }
.fare-class { color: var(--blue); font-weight: 600; font-size: 14px; margin: 0 0 8px; }
.package-tier, .package-type, .post-category {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.package-seats { color: var(--success); font-weight: 600; font-size: 14px; }

/* ── Package detail ────────────────────────────────────────────────────── */
.package-hero {
  position: relative;
  padding: 110px 0 80px;
  background: var(--navy) center/cover no-repeat;
  color: #fff;
}

.package-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 47, 82, .7), rgba(6, 47, 82, .9));
}

.package-hero .container { position: relative; z-index: 1; }
.package-hero h1 { font-family: "Playfair Display", serif; font-size: clamp(28px, 4vw, 44px); margin: 0 0 12px; }
.package-hero p { max-width: 700px; color: rgba(255, 255, 255, .9); }

.package-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }

.package-facts {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.package-facts li {
  background: var(--soft);
  border-radius: 14px;
  padding: 16px 18px;
  display: grid;
  gap: 2px;
  font-size: 15px;
}

.package-facts strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.package-facts i { color: var(--blue); margin-bottom: 6px; }

.package-list { margin-top: 30px; }
.package-list h2, .package-itinerary h2 { font-size: 21px; color: var(--navy); margin-bottom: 14px; }
.package-list ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.package-inclusions i { color: var(--success); }
.package-exclusions i { color: #c05252; }
.package-itinerary { margin-top: 30px; }
.package-itinerary ol { padding-left: 1.2em; display: grid; gap: 10px; }

.package-sidebar { position: sticky; top: 100px; }

.package-booking {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
}

/* ── Blog ──────────────────────────────────────────────────────────────── */
.blog-card-media img { height: 190px; object-fit: cover; }
.blog-card-category { color: var(--blue); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.blog-card-meta { color: var(--muted); font-size: 13px; margin: 10px 0 0; }

.post-hero {
  position: relative;
  padding: 110px 0 70px;
  background: var(--navy) center/cover no-repeat;
  color: #fff;
  text-align: center;
}

.post-hero::after { content: ""; position: absolute; inset: 0; background: rgba(6, 47, 82, .82); }
.post-hero .container { position: relative; z-index: 1; }
.post-hero h1 { font-family: "Playfair Display", serif; font-size: clamp(28px, 4vw, 44px); margin: 0 0 10px; }
.post-meta { color: rgba(255, 255, 255, .82); font-size: 14px; }

.post-tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.post-tags li { background: var(--soft); color: var(--navy-2); padding: 5px 13px; border-radius: 999px; font-size: 13px; }

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.contact-map { margin-top: 24px; border-radius: var(--radius); overflow: hidden; }
.contact-map iframe { width: 100%; min-height: 300px; border: 0; display: block; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.page-form { display: grid; gap: 16px; }

.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.page-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--navy-2); }
.page-form label > span { font-weight: 600; }

.page-form input[type="text"],
.page-form input[type="tel"],
.page-form input[type="email"],
.page-form input[type="date"],
.page-form input[type="number"],
.page-form textarea,
.page-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  color: var(--ink);
  font-weight: 500;
}

.page-form textarea { resize: vertical; }

.page-form input:focus, .page-form textarea:focus, .page-form select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8, 120, 189, .14);
}

.form-full { grid-column: 1 / -1; }

/* `.page-form label` sets display:grid and outranks a bare .form-consent, so
   the checkbox stacked above its text instead of sitting beside it. */
.page-form label.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  color: var(--muted);
  font-size: 14px;
}

.page-form .form-consent input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin-top: 3px;
}

.form-heading span { color: var(--blue); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }

.form-message {
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0;
  font-size: 14px;
  list-style: none;
}

.form-message-success { background: rgba(21, 154, 99, .1); color: var(--success); border: 1px solid rgba(21, 154, 99, .3); }
.form-message-error { background: rgba(192, 82, 82, .08); color: #a83b3b; border: 1px solid rgba(192, 82, 82, .28); padding-left: 34px; }
.form-message-error li { margin: 2px 0; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Popup ─────────────────────────────────────────────────────────────── */
.popup {
  position: fixed;
  inset: 0;
  background: rgba(6, 47, 82, .62);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.popup.show { display: flex; }

.popup-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow);
}

.popup-box h2 { font-family: "Playfair Display", serif; color: var(--navy); margin: 0 0 10px; }
.popup-image { border-radius: 14px; margin-bottom: 18px; }

.popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: 0;
  font-size: 30px;
  line-height: 1;
  color: var(--muted);
}

/* ── Language switcher (now real links) ────────────────────────────────── */
.lang-option {
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .8);
}

.lang-option.is-active { background: var(--gold); color: var(--navy); }

/* ── Testimonials ──────────────────────────────────────────────────────── */
.testimonial-slider { position: relative; min-height: 220px; }
.testimonial { display: none; text-align: center; max-width: 720px; margin: 0 auto; }
.testimonial.active { display: block; }
.testimonial-rating { color: var(--gold); margin-bottom: 14px; }
.testimonial p { font-size: 19px; line-height: 1.7; color: var(--ink); }
.testimonial footer { display: grid; justify-items: center; gap: 4px; margin-top: 18px; }
.testimonial footer img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.testimonial cite { font-style: normal; font-weight: 700; color: var(--navy); }
.testimonial footer span { color: var(--muted); font-size: 14px; }
.testimonial-controls { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }

.testimonial-controls button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
}

.testimonial-controls button:hover { background: var(--navy); color: #fff; }

/* ── Card media links ──────────────────────────────────────────────────────
   style.css sizes card images with `.tour-card > img` and `.package-image`.
   The CMS wraps each card image in a link so the whole picture is clickable,
   which puts the image one level deeper than either selector reaches — the
   image then falls back to its natural size and stretches the card to the
   height of the source file. These rules pin the media box back to the
   heights the original design used. */
.tour-card-media,
.package-card-media,
.blog-card-media {
  position: relative;
  display: block;
  overflow: hidden;
}

.tour-card-media { height: 235px; }
.package-card-media { height: 245px; }
.blog-card-media { height: 190px; }

.tour-card-media img,
.tour-card-media video,
.package-card-media img,
.package-card-media video,
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s;
}

.package-card:hover .package-card-media img,
.tour-card:hover .tour-card-media img { transform: scale(1.06); }

/* The package grid block mirrors .package-body from style.css. */
.package-card-body { padding: 24px; }
.package-card-body h3 { margin: 13px 0 9px; font-size: 21px; color: var(--navy); }
.package-card-body h3 a { color: inherit; }
.package-card-body p { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.package-card-body .btn { margin-top: 4px; }

.blog-card-body h3 a { color: inherit; }
.tour-card-body h3 a { color: inherit; }

.tour-price { color: var(--navy); font-weight: 800; }
.tour-price small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }

.package-main { min-width: 0; }

/* main.js animates .faq-answer by max-height, so the padding has to sit on an
   inner element — otherwise it is counted in the collapsed height. */
.faq-answer-inner { padding: 0 20px 20px; color: var(--muted); font-size: 13px; line-height: 1.7; }

.contact-details { min-width: 0; }

.contact-form-wrap {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.contact-form-wrap h2 { margin: 0 0 20px; color: var(--navy); font-size: 26px; }

/* A CTA band with an optional background image behind the gradient. */
.cta-banner {
  position: relative;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13, 42, 74, .92), rgba(0, 122, 189, .82));
}

.cta-banner > .container { position: relative; }
.cta-banner h2 { color: #fff; margin: 0 0 14px; font-size: clamp(28px, 4vw, 42px); }
.cta-banner p { color: rgba(255, 255, 255, .88); max-width: 640px; margin: 0 auto 26px; }

/* ── Buttons inside content cards ──────────────────────────────────────────
   style.css colours links by their container (.tour-card-footer a,
   .blog-card a, .package-footer a …). Those rules outrank .btn-primary,
   so a button placed in one of those cards came out blue-on-blue and the
   label all but disappeared. Re-assert the button's own colours. */
.tour-card .btn,
.tour-card-footer .btn,
.package-card .btn,
.blog-card .btn,
.contact-info-card .btn,
.country-card .btn,
.visa-card .btn,
.treatment-card .btn,
.unit-card .btn { font-size: 14px; }

.tour-card .btn-primary,
.tour-card-footer .btn-primary,
.package-card .btn-primary,
.blog-card .btn-primary,
.contact-info-card .btn-primary,
.country-card .btn-primary,
.visa-card .btn-primary,
.treatment-card .btn-primary,
.unit-card .btn-primary { color: #fff; }

.tour-card .btn-ghost,
.package-card .btn-ghost,
.visa-card .btn-ghost,
.unit-card .btn-ghost { color: var(--navy); border-color: var(--line); background: #fff; }

/* A card footer button does not need the full 52px hero height. */
.tour-card-footer .btn,
.package-card-body .btn { min-height: 44px; padding: 0 18px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .package-layout, .contact-grid { grid-template-columns: 1fr; }
  .package-sidebar { position: static; }
  .section { padding: 60px 0; }
  .contact-form-wrap { padding: 24px; }
  .tour-card-media { height: 200px; }
  .package-card-media { height: 210px; }
}