/* ================================================================== */
/* Transport page (transport.php) + booking components shared with     */
/* the Ziyarat page (steps, fields, stepper, summary card, hero card). */
/* Ziyarat-only styles live in ziyarat.css.                            */
/* Builds on umrah.css (hero, highlights, included, CTA). Colors mirror */
/* tailwind.config.js (ink / cream / gold / sun / lagoon).             */
/* ================================================================== */

/* ---------- Vehicle photos (assets/images/vehicles/) ---------- */
/* A photo that fails to load falls back to a plain name panel (no icons). */
.tz-vehicle-art.is-missing { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef2f6, #dbe4ec); }
.tz-vehicle-art.is-missing::after { content: attr(data-name); font-family: Fraunces, Georgia, serif; font-size: 1.6rem; font-weight: 600; color: rgba(11, 31, 51, 0.35); }

/* ---------- Hero route card ---------- */
.tz-hero-route {
  position: relative;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 1.4rem;
  border-radius: 1.75rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.tz-hero-route::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border-radius: 1.35rem;
  border: 1px dashed rgba(255, 183, 3, 0.35);
  pointer-events: none;
}
.tz-hr-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #5eead4; }
.tz-hr-head b { font-family: Fraunces, Georgia, serif; font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: #ffd166; }
.tz-hr-stops { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 1.4rem 0 0; padding: 0; list-style: none; text-align: center; }
.tz-hr-stops::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0.45rem; border-top: 2px dashed rgba(255, 183, 3, 0.55); }
.tz-hr-stops li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.tz-hr-stops i { width: 0.95rem; height: 0.95rem; border-radius: 50%; background: #071827; border: 3px solid #ffb703; box-shadow: 0 0 0 5px rgba(255, 183, 3, 0.15); animation: tz-ping 3s ease-in-out infinite; }
.tz-hr-stops li:nth-child(2) i { animation-delay: 0.6s; }
.tz-hr-stops li:nth-child(3) i { animation-delay: 1.2s; border-color: #14a394; }
.tz-hr-stops li:nth-child(4) i { animation-delay: 1.8s; }
.tz-hr-stops li:nth-child(5) i { animation-delay: 2.4s; }
@keyframes tz-ping { 0%, 100% { box-shadow: 0 0 0 5px rgba(255, 183, 3, 0.15); } 50% { box-shadow: 0 0 0 9px rgba(255, 183, 3, 0.04); } }
.tz-hr-stops strong { margin-top: 0.35rem; font-family: Fraunces, Georgia, serif; font-size: 1.15rem; color: #fff; }
.tz-hr-stops small { font-size: 0.66rem; color: rgba(255, 255, 255, 0.6); }
.tz-hr-road {
  position: relative;
  height: 4.5rem;
  margin-top: 1.1rem;
  border-radius: 1rem;
  overflow: hidden;
  background:
    linear-gradient(to bottom, transparent 70%, rgba(255, 255, 255, 0.08) 70%),
    repeating-linear-gradient(90deg, rgba(255, 183, 3, 0.65) 0 18px, transparent 18px 34px) 0 calc(100% - 0.55rem) / 100% 2px no-repeat;
  animation: tz-road 1.1s linear infinite;
}
@keyframes tz-road { to { background-position: 0 0, -34px calc(100% - 0.55rem); } }
/* Animated vehicle driving left to right (inline SVG in transport.php) */
.tz-hr-car { position: absolute; bottom: 0.65rem; left: 0; width: 7.5rem; color: #f47c0b; animation: tz-drive 7s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.tz-hr-car svg { display: block; width: 100%; height: auto; overflow: visible; }
.tz-hr-car .vb { fill: currentColor; }
.tz-hr-car .vw { fill: #bfe7e2; opacity: 0.95; }
.tz-hr-car .vh { fill: #071827; }
.tz-hr-car .vhc { fill: #cbd5e1; }
.tz-hr-car .vgr { fill: rgba(0, 0, 0, 0.35); }
@keyframes tz-drive { 0% { transform: translateX(-8rem); } 50% { transform: translateX(calc(15rem - 50%)); } 100% { transform: translateX(32rem); } }
.tz-hr-foot { margin-top: 0.9rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.72); }
.tz-hr-foot span { display: inline-flex; align-items: center; gap: 0.4rem; }
.tz-hr-foot svg { width: 1rem; height: 1rem; color: #ffb703; }

/* ---------- Transport builder ---------- */
.tz-transport { padding-top: 5.5rem; padding-bottom: 5.5rem; scroll-margin-top: 5rem; }
.tz-builder { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1100px) { .tz-builder { grid-template-columns: minmax(0, 1fr) 23rem; gap: 2rem; } }
.tz-steps { display: grid; gap: 1.5rem; min-width: 0; }

.tz-step {
  margin: 0;
  min-width: 0;
  padding: 1.5rem 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 1.75rem;
  background: #fff;
  box-shadow: 0 24px 50px -36px rgba(11, 31, 51, 0.45);
}
@media (min-width: 640px) { .tz-step { padding: 1.9rem 2rem; } }
.tz-step-head { display: flex; align-items: center; gap: 0.9rem; float: left; width: 100%; margin-bottom: 1.4rem; padding: 0; }
.tz-step-head + * { clear: both; }
.tz-step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.9rem;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #ff9433, #d95f02);
  box-shadow: 0 10px 22px -10px rgba(244, 124, 11, 0.9);
}
.tz-step-head strong { display: block; font-size: 1.4rem; font-weight: 600; line-height: 1.2; color: #0b1f33; }
.tz-step-head small { display: block; margin-top: 0.15rem; font-size: 0.85rem; color: #64748b; }

/* Presets */
.tz-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; padding: 0.9rem; border-radius: 1.2rem; background: linear-gradient(135deg, #fff3e0, #fff6d9); }
.tz-presets-label { width: 100%; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #b04c02; }
@media (min-width: 640px) { .tz-presets-label { width: auto; margin-right: 0.3rem; } }
.tz-preset {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid #ffc98a;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s, background-color 0.25s;
}
.tz-preset b { font-size: 0.82rem; letter-spacing: 0.04em; color: #0b1f33; }
.tz-preset small { font-size: 0.7rem; color: #64748b; }
.tz-preset:hover { transform: translateY(-2px); border-color: #f47c0b; box-shadow: 0 12px 24px -14px rgba(244, 124, 11, 0.8); }
.tz-preset.is-active { border-color: #f47c0b; background: #f47c0b; }
.tz-preset.is-active b, .tz-preset.is-active small { color: #fff; }

/* Routes */
.tz-route-group + .tz-route-group { margin-top: 1.4rem; }
.tz-group-title { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.75rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #0f766e; }
.tz-group-title svg { width: 1.05rem; height: 1.05rem; }
.tz-routes { display: grid; gap: 0.7rem; }
@media (min-width: 560px) { .tz-routes { grid-template-columns: repeat(2, 1fr); } }

.tz-route {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.75rem;
  padding: 0.95rem 1rem 0.9rem;
  border-radius: 1.15rem;
  border: 1.5px solid #e2e8f0;
  background: #fafaf7;
  cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.3s, transform 0.3s;
}
.tz-route:hover { border-color: #ffc98a; transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgba(11, 31, 51, 0.5); }
.tz-route input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tz-route-codes { grid-column: 1; display: flex; align-items: center; gap: 0.55rem; }
.tz-route-codes b { font-family: Fraunces, Georgia, serif; font-size: 1.15rem; font-weight: 600; color: #0b1f33; }
.tz-route-line { position: relative; flex: 1; max-width: 5rem; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, #cbd5e1 0 5px, transparent 5px 9px); }
.tz-route-line span { position: absolute; right: -2px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-top: 2px solid #94a3b8; border-right: 2px solid #94a3b8; transform: rotate(45deg); }
.tz-route-names { grid-column: 1 / -1; font-size: 0.85rem; font-weight: 600; color: #17202a; }
.tz-route-names em { font-style: normal; color: #f47c0b; }
.tz-route-meta { grid-column: 1 / -1; font-size: 0.74rem; color: #64748b; }
.tz-route-tick {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.55rem;
  border: 1.5px solid #cbd5e1;
  color: transparent;
  background: #fff;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.3s;
}
.tz-route-tick svg { width: 0.85rem; height: 0.85rem; }
.tz-route-order {
  position: absolute;
  top: -0.6rem;
  left: 0.9rem;
  display: none;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: #0b1f33;
}
.tz-route:has(input:checked) { border-color: #f47c0b; background: #fff; box-shadow: 0 0 0 3px rgba(244, 124, 11, 0.14), 0 16px 30px -20px rgba(244, 124, 11, 0.7); }
.tz-route:has(input:checked) .tz-route-tick { border-color: #f47c0b; background: #f47c0b; color: #fff; transform: scale(1.08); }
.tz-route:has(input:checked) .tz-route-order { display: inline-block; }
.tz-route:has(input:checked) .tz-route-line { background: repeating-linear-gradient(90deg, #f47c0b 0 5px, transparent 5px 9px); animation: tz-dash 0.8s linear infinite; }
.tz-route:has(input:checked) .tz-route-line span { border-color: #f47c0b; }
.tz-route:has(input:focus-visible) { outline: 2px solid #f47c0b; outline-offset: 2px; }
@keyframes tz-dash { to { background-position: 9px 0; } }

/* Vehicles */
.tz-vehicles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
@media (min-width: 760px) { .tz-vehicles { grid-template-columns: repeat(3, 1fr); } }
.tz-vehicle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem 1rem 1.1rem;
  border-radius: 1.25rem;
  border: 1.5px solid #e2e8f0;
  background: #fafaf7;
  cursor: pointer;
  color: #0b1f33;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
}
.tz-vehicle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tz-vehicle:hover { transform: translateY(-3px); border-color: #ffc98a; box-shadow: 0 16px 30px -22px rgba(11, 31, 51, 0.55); }
.tz-vehicle-art {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 0.75rem;
  border-radius: 0.9rem;
  overflow: hidden;
  background: #e2e8f0;
}
.tz-vehicle-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.tz-vehicle:hover .tz-vehicle-art img { transform: scale(1.06); }
.tz-vehicle strong { font-size: 1.25rem; font-weight: 600; }
.tz-vehicle-model { margin-top: 0.1rem; font-size: 0.72rem; line-height: 1.4; color: #64748b; }
.tz-vehicle-specs { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; margin-top: 0.6rem; font-size: 0.74rem; font-weight: 700; color: #16324f; }
.tz-vehicle-specs span { display: inline-flex; align-items: center; gap: 0.3rem; }
.tz-vehicle-specs svg { width: 0.95rem; height: 0.95rem; color: #0f766e; }
.tz-vehicle-tag { margin-top: 0.6rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #0b5e58; background: #ecf8f6; }
.tz-fit {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 1;
  display: none;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: #0f766e;
}
.tz-vehicle.is-fit .tz-fit { display: inline-block; }
.tz-vehicle.is-small { opacity: 0.55; }
.tz-vehicle.is-small:hover { opacity: 0.85; }
.tz-vehicle:has(input:checked) { opacity: 1; border-color: #f47c0b; background: #fff; box-shadow: 0 0 0 3px rgba(244, 124, 11, 0.14), 0 18px 34px -22px rgba(244, 124, 11, 0.8); }
.tz-vehicle:has(input:checked) .tz-vehicle-art { box-shadow: 0 0 0 2px #f47c0b; }
.tz-vehicle:has(input:focus-visible) { outline: 2px solid #f47c0b; outline-offset: 2px; }

/* Details fields */
.tz-fields { display: grid; gap: 1rem; }
@media (min-width: 640px) { .tz-fields { grid-template-columns: 1fr 1fr; } .tz-field.is-wide { grid-column: 1 / -1; } }
.tz-label { display: block; margin-bottom: 0.4rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.tz-label span { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.8; }
.tz-input {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid #e2e8f0;
  background: #f2f4f6;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: #17202a;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.tz-input:focus { outline: none; background: #fff; border-color: #ff9433; box-shadow: 0 0 0 3px rgba(244, 124, 11, 0.18); }
textarea.tz-input { resize: vertical; min-height: 5.5rem; }
.tz-input.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.tz-stepper { display: flex; align-items: stretch; height: 3.1rem; border-radius: 0.85rem; border: 1px solid #e2e8f0; background: #f2f4f6; overflow: hidden; }
.tz-stepper button { width: 3.1rem; border: 0; background: none; font-size: 1.4rem; font-weight: 500; color: #0b1f33; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.tz-stepper button:hover { background: #0b1f33; color: #fff; }
.tz-stepper input { flex: 1; min-width: 0; border: 0; background: #fff; text-align: center; font-family: Fraunces, Georgia, serif; font-size: 1.35rem; font-weight: 600; color: #0b1f33; -moz-appearance: textfield; }
.tz-stepper input::-webkit-outer-spin-button, .tz-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tz-stepper input:focus { outline: none; box-shadow: inset 0 0 0 2px #ff9433; }

/* Summary */
.tz-summary { min-width: 0; }
@media (min-width: 1100px) { .tz-summary { position: sticky; top: 6.5rem; } }
.tz-summary-card {
  position: relative;
  overflow: hidden;
  padding: 1.7rem 1.5rem 1.5rem;
  border-radius: 1.75rem;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 183, 3, 0.22), transparent 50%),
    radial-gradient(circle at 0 100%, rgba(15, 118, 110, 0.35), transparent 50%),
    linear-gradient(160deg, #0b1f33, #071827);
  box-shadow: 0 30px 60px -30px rgba(7, 24, 39, 0.8);
}
.tz-summary-card > :not(.ud-hero-pattern) { position: relative; }
.tz-sum-eyebrow { margin: 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #ffb703; }
.tz-summary-card h3 { margin: 0.3rem 0 1.1rem; font-size: 1.6rem; }
.tz-sum-routes { position: relative; margin: 0; padding: 0 0 0 1.4rem; list-style: none; display: grid; gap: 0.85rem; }
.tz-sum-routes::before { content: ""; position: absolute; left: 0.42rem; top: 0.4rem; bottom: 0.4rem; border-left: 2px dashed rgba(255, 183, 3, 0.45); }
.tz-sum-routes li { position: relative; font-size: 0.88rem; font-weight: 600; line-height: 1.35; animation: tz-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.tz-sum-routes li::before { content: ""; position: absolute; left: -1.33rem; top: 0.22rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #071827; border: 2.5px solid #ffb703; }
.tz-sum-routes li small { display: block; font-size: 0.72rem; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.tz-sum-routes li button { position: absolute; right: 0; top: 0; padding: 0 0.3rem; border: 0; background: none; font-size: 1.1rem; line-height: 1; color: rgba(255, 255, 255, 0.45); cursor: pointer; }
.tz-sum-routes li button:hover { color: #ffb703; }
.tz-sum-routes li { padding-right: 1.5rem; }
.tz-sum-routes .tz-sum-empty { padding-right: 0; font-weight: 500; color: rgba(255, 255, 255, 0.62); }
.tz-sum-routes .tz-sum-empty::before { border-color: rgba(255, 255, 255, 0.3); }
@keyframes tz-pop { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.tz-sum-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 1.4rem 0 0; }
.tz-sum-facts div { padding: 0.7rem 0.6rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); }
.tz-sum-facts dt { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.tz-sum-facts dd { margin: 0.2rem 0 0; font-size: 0.9rem; font-weight: 700; color: #fff; word-break: break-word; }
.tz-sum-warn, .tz-error { margin: 1rem 0 0; padding: 0.65rem 0.8rem; border-radius: 0.8rem; font-size: 0.8rem; line-height: 1.45; }
.tz-sum-warn { color: #ffe4c2; background: rgba(244, 124, 11, 0.16); border: 1px solid rgba(244, 124, 11, 0.4); }
.tz-error { color: #fecaca; background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(239, 68, 68, 0.45); }
.tz-sum-warn.hidden, .tz-error.hidden { display: none; }
.tz-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  margin-top: 1.25rem;
  padding: 1rem 1.2rem;
  border: 0;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: #f47c0b;
  box-shadow: 0 16px 30px -12px rgba(244, 124, 11, 0.9);
  transition: background-color 0.2s, transform 0.2s;
}
.tz-submit svg { width: 1.25rem; height: 1.25rem; }
.tz-submit:hover { background: #d95f02; }
.tz-submit:disabled { opacity: 0.7; cursor: wait; }
.tz-sum-note { margin: 0.75rem 0 0; text-align: center; font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); }

@media (prefers-reduced-motion: reduce) {
  .tz-hr-car, .tz-hr-road, .tz-hr-stops i, .tz-route-line { animation: none !important; }
}

/* ---------- Transport page: link banner to /ziyarat ---------- */
.tz-zy-teaser { padding-bottom: 5.5rem; }
.tz-zy-banner {
  position: relative;
  display: block;
  min-height: 19rem;
  border-radius: 1.9rem;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #0b1f33;
  box-shadow: 0 30px 60px -34px rgba(11, 31, 51, 0.6);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s;
}
.tz-zy-banner:hover { transform: translateY(-5px); box-shadow: 0 0 0 2px #f47c0b, 0 40px 70px -34px rgba(11, 31, 51, 0.7); }
.tz-zy-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.tz-zy-banner:hover img { transform: scale(1.06); }
.tz-zy-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 24, 39, 0.95) 20%, rgba(7, 24, 39, 0.45) 70%, rgba(7, 24, 39, 0.25)); }
.tz-zy-banner-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; max-width: 40rem; padding: 2rem 1.6rem; }
@media (min-width: 640px) { .tz-zy-banner-body { padding: 2.6rem 2.4rem; } }
.tz-zy-banner-body strong { font-size: 1.9rem; font-weight: 600; line-height: 1.15; }
.tz-zy-banner-text { font-size: 0.98rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.tz-zy-banner:hover .tz-teaser-cta svg { transform: translateX(4px); }

/* ================================================================== */
/* Homepage teaser (index.php)                                         */
/* ================================================================== */
.tz-teaser { padding-top: 1rem; padding-bottom: 5.5rem; }
.tz-teaser-grid { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .tz-teaser-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.tz-teaser-tile {
  position: relative;
  display: block;
  min-height: 22rem;
  border-radius: 1.9rem;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #0b1f33;
  box-shadow: 0 30px 60px -34px rgba(11, 31, 51, 0.6);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s;
}
.tz-teaser-tile:hover { transform: translateY(-6px); box-shadow: 0 0 0 2px #f47c0b, 0 40px 70px -34px rgba(11, 31, 51, 0.7); }
.tz-teaser-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.tz-teaser-tile:hover img { transform: scale(1.07); }
.tz-teaser-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 24, 39, 0.95) 15%, rgba(7, 24, 39, 0.25) 65%, rgba(7, 24, 39, 0.1)); }
.tz-teaser-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.6rem; }
@media (min-width: 640px) { .tz-teaser-body { padding: 2rem; } }
.tz-teaser-kicker { align-self: flex-start; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #0b1f33; background: #ffb703; }
.tz-teaser-kicker[lang="ar"] { font-family: "Amiri", "Traditional Arabic", serif; font-size: 1rem; letter-spacing: 0; text-transform: none; }
.tz-teaser-body strong { font-size: 1.75rem; font-weight: 600; line-height: 1.15; }
@media (min-width: 640px) { .tz-teaser-body strong { font-size: 2.1rem; } }
.tz-teaser-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tz-teaser-chips i { padding: 0.3rem 0.7rem; border-radius: 999px; font-style: normal; font-size: 0.75rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tz-teaser-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; font-size: 0.92rem; font-weight: 700; color: #ffd166; }
.tz-teaser-cta svg { width: 1.05rem; height: 1.05rem; transition: transform 0.25s; }
.tz-teaser-tile:hover .tz-teaser-cta svg { transform: translateX(4px); }