/* ============================================
   LUXBUS - Clean Semantic CSS
   ============================================ */

/* --- Design Tokens --- */
:root {
   --font-main: "Cairo", sans-serif;
   --color-white: #ffffff;
   --color-black: #000000;
   --color-primary: #50aa66;
   --color-primary-hover: #44975a;
   --color-brand-navy: #062963;
   --color-brand-navy-hover: #041f4c;
   --color-gray-light: #f3f3f3;
   --color-gray-border: #e2e2e2;
   --color-gray-text: #5e5e5e;
   --color-zinc-50: #fafafa;
   --color-zinc-100: #f4f4f5;
   --color-zinc-200: #e4e4e7;
   --color-zinc-800: #27272a;
   --color-zinc-900: #18181b;
   --color-blue-600: #2563eb;
   --color-orange-600: #ea580c;
   --color-purple-600: #9333ea;
   --color-green-bg: #f0fdf4;
   --color-green-text: #166534;
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
   --radius-2xl: 1rem;
   --radius-full: 9999px;
   --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);
   --transition: all .15s cubic-bezier(.4, 0, .2, 1);
}

/* --- Reset --- */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   border: 0 solid
}

html {
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
   font-family: var(--font-main);
   -webkit-tap-highlight-color: transparent
}

body {
   font-family: var(--font-main);
   background: var(--color-white);
   color: var(--color-black);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 0;
   line-height: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-size: inherit;
   font-weight: inherit
}

a {
   color: inherit;
   text-decoration: inherit
}

b,
strong {
   font-weight: bolder
}

img,
svg,
video {
   display: block;
   vertical-align: middle
}

img,
video {
   max-width: 100%;
   height: auto
}

button,
input,
select,
textarea {
   font: inherit;
   color: inherit;
   background: transparent;
   border-radius: 0
}

ol,
ul,
menu {
   list-style: none
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
   appearance: button
}

::placeholder {
   opacity: .5
}

textarea {
   resize: vertical
}

[hidden] {
   display: none !important
}

::selection {
   background: var(--color-black);
   color: var(--color-white)
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
   width: 4px
}

::-webkit-scrollbar-track {
   background: var(--color-gray-light)
}

::-webkit-scrollbar-thumb {
   background: var(--color-black);
   border-radius: 0
}

/* ============================================
   PAGE LAYOUT
   ============================================ */
.page {
   min-height: 100vh;
   background: var(--color-white);
   display: flex;
   flex-direction: column;
   color: var(--color-black);
   font-size: 0;
   line-height: 0
}

.page__main {
   flex: 1
}

.page > * {
   font-size: 1rem;
   line-height: 1.5
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
   height: 4rem;
   border-bottom: 1px solid var(--color-gray-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 1rem;
   position: sticky;
   top: 0;
   background: var(--color-white);
   z-index: 50
}

.site-header__left {
   display: flex;
   align-items: center;
   gap: 1rem
}

.site-header__right {
   display: flex;
   align-items: center;
   gap: .5rem
}

.logo {
   display: flex;
   align-items: center;
   gap: .5rem;
   cursor: pointer
}

.logo__icon {
   width: 2rem;
   height: 2rem;
   background: var(--color-black);
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center
}

.logo__icon svg {
   color: var(--color-white);
   width: 1rem;
   height: 1rem
}

.logo__img {
   height: 2.25rem;
   width: auto;
   max-width: 11rem;
   object-fit: contain
}

.logo__text {
   font-family: var(--font-main);
   font-weight: 700;
   font-size: 1.25rem;
   letter-spacing: -.025em
}

.main-nav {
   display: none;
   align-items: center;
   gap: 2rem;
   font-size: 15px;
   font-weight: 600
}

.nav-link {
   transition: color .15s;
   position: relative;
   cursor: pointer
}

.nav-link:hover {
   color: var(--color-gray-text)
}

.nav-link.active::after {
   content: '';
   position: absolute;
   bottom: -1.25rem;
   right: 0;
   width: 100%;
   height: 2px;
   background: var(--color-black)
}

.lang-switcher {
   display: none;
   align-items: center;
   gap: .5rem;
   font-size: .875rem;
   font-weight: 600;
   margin-right: 1.5rem;
   cursor: pointer;
   padding: .5rem .75rem;
   border-radius: var(--radius-full);
   transition: var(--transition)
}

.lang-switcher:hover {
   background: var(--color-gray-light)
}

.lang-switcher svg {
   width: 1rem;
   height: 1rem
}

.btn {
   transition: var(--transition);
   display: flex;
   align-items: center;
   gap: .5rem;
   cursor: pointer;
   font-weight: 700
}

.btn--login {
   padding: .5rem;
   border-radius: var(--radius-full)
}

.btn--login:hover {
   background: var(--color-gray-light)
}

.btn--login svg {
   width: 1.25rem;
   height: 1.25rem
}

.btn--login span {
   display: none;
   font-size: 15px;
   font-weight: 600
}

.btn--signup {
   background: var(--color-primary);
   color: var(--color-white);
   padding: .5rem;
   border-radius: var(--radius-full);
   box-shadow: var(--shadow-lg)
}

.btn--signup:hover {
   background: var(--color-primary-hover)
}

.btn--signup:active {
   scale: .95
}

.btn--signup .mobile-icon {
   display: block
}

.btn--signup .mobile-icon svg {
   width: 1.25rem;
   height: 1.25rem
}

.btn--signup .desktop-icon {
   display: none
}

.btn--signup .desktop-icon svg {
   width: 1rem;
   height: 1rem
}

.btn--signup span {
   display: none;
   font-size: 15px
}

.menu-toggle {
   display: block;
   width: 1.5rem;
   height: 1.5rem;
   cursor: pointer;
   margin-right: .25rem
}

/* ============================================
   MOBILE MENU
   ============================================ */
.mobile-menu {
   position: fixed;
   inset: 0;
   z-index: 100;
   display: none
}

.mobile-menu__overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .6);
   backdrop-filter: blur(8px)
}

.mobile-menu__sidebar {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 260px;
   background: var(--color-white);
   box-shadow: var(--shadow-2xl);
   display: flex;
   flex-direction: column
}

.mobile-menu__header {
   padding: 1.25rem;
   border-bottom: 1px solid var(--color-gray-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: var(--color-zinc-50)
}

.mobile-menu__header .logo__icon {
   width: 2rem;
   height: 2rem;
   border-radius: var(--radius-md)
}

.mobile-menu__header .logo__text {
   font-size: 1.125rem
}

.mobile-menu__close {
   padding: .5rem;
   border-radius: var(--radius-full);
   transition: var(--transition);
   cursor: pointer
}

.mobile-menu__close:hover {
   background: var(--color-gray-light)
}

.mobile-menu__close svg {
   width: 1.25rem;
   height: 1.25rem
}

.mobile-menu__body {
   flex: 1;
   overflow-y: auto;
   padding: 1rem .75rem
}

.mobile-menu__nav {
   display: flex;
   flex-direction: column;
   gap: .25rem
}

.mobile-nav-link {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: .875rem;
   border-radius: var(--radius-xl);
   font-weight: 700;
   font-size: 15px;
   transition: var(--transition);
   cursor: pointer;
   color: var(--color-black)
}

.mobile-nav-link:hover {
   background: var(--color-gray-light)
}

.mobile-nav-link:active {
   scale: .98
}

.mobile-nav-link svg {
   width: 1.25rem;
   height: 1.25rem;
   color: var(--color-gray-text)
}

.mobile-nav-link.active {
   background: var(--color-black);
   color: var(--color-white);
   box-shadow: var(--shadow-lg)
}

.mobile-nav-link.active svg {
   color: var(--color-white)
}

.mobile-menu__account {
   margin-top: 1.5rem;
   padding-top: 1.5rem;
   border-top: 1px solid var(--color-gray-border)
}

.mobile-menu__account-label {
   padding: 0 1rem;
   font-size: 11px;
   font-weight: 700;
   color: var(--color-gray-text);
   text-transform: uppercase;
   letter-spacing: .1em;
   margin-bottom: 1rem
}

.mobile-menu__account-links {
   display: flex;
   flex-direction: column;
   gap: .5rem
}

.mobile-account-link {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: .875rem;
   border-radius: var(--radius-xl);
   font-weight: 700;
   font-size: 15px;
   transition: var(--transition);
   cursor: pointer
}

.mobile-account-link:hover {
   background: var(--color-gray-light)
}

.mobile-account-link svg {
   width: 1.25rem;
   height: 1.25rem;
   color: var(--color-gray-text)
}

.mobile-account-link--filled {
   background: var(--color-zinc-100);
   color: var(--color-black)
}

.mobile-account-link--filled:hover {
   background: var(--color-zinc-200)
}

.mobile-menu__footer {
   padding: 1.25rem;
   border-top: 1px solid var(--color-gray-border);
   background: var(--color-zinc-50)
}

.mobile-menu__lang {
   display: flex;
   align-items: center;
   gap: .75rem;
   font-size: .875rem;
   font-weight: 700;
   transition: var(--transition);
   cursor: pointer
}

.mobile-menu__lang:hover {
   color: var(--color-gray-text)
}

.mobile-menu__lang svg {
   width: 1rem;
   height: 1rem
}

/* ============================================
   HERO / SEARCH SECTION
   ============================================ */
.hero-section {
   position: relative;
   padding: 1.5rem 1rem 2rem;
   border-bottom: 1px solid var(--color-gray-border);
   background: radial-gradient(1500px 500px at 100% -10%, rgb(98 229 133 / 15%), transparent), radial-gradient(1000px 400px at 0% -10%, rgba(0, 184, 169, .12), transparent), linear-gradient(180deg, #fff 0%, #f8fbff 100%)
}

.hero-section__inner {
   max-width: 64rem;
   margin: 0 auto
}

.hero-header {
   margin-bottom: 1.25rem
}

.hero-title {
   font-size: 1.25rem;
   font-weight: 700;
   margin-bottom: .25rem
}

.hero-subtitle {
   color: var(--color-gray-text);
   font-size: .75rem;
   font-weight: 500
}

.hero-bus-image {
   display: block;
   width: min(100%, 34rem);
   height: auto;
   margin: 1rem auto 0
}

/* Search Form (index page) */
.search-form {
   display: grid;
   padding: 15px;
   grid-template-columns: 1fr;
   background: var(--color-white);
   border-radius: var(--radius-xl);
   border: 1px solid var(--color-gray-border);
   box-shadow: var(--shadow-2xl), 0 0 0 0 rgba(0, 0, 0, .05);
   transition: var(--transition)
}

.search-form__field {
   position: relative;
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--color-gray-border)
}

.search-form__field:focus-within {
   border-color: var(--color-black);
   background: var(--color-white)
}

.search-form__dot-hollow {
   position: absolute;
   right: 1rem;
   width: .625rem;
   height: .625rem;
   border-radius: var(--radius-full);
   border: 2px solid var(--color-black);
   background: var(--color-white)
}

.search-form__dot-filled {
   position: absolute;
   right: 1rem;
   width: .625rem;
   height: .625rem;
   background: var(--color-black)
}

.search-form__input {
   width: 100%;
   background: transparent;
   padding: .75rem 2.5rem;
   font-size: 14px;
   font-weight: 600;
   outline: none
}

.search-form__input::placeholder {
   color: var(--color-gray-text)
}

.search-form__chevron {
   position: absolute;
   left: 1rem;
   width: 1rem;
   height: 1rem;
   color: var(--color-gray-text);
   pointer-events: none;
   transition: color .15s
}

.search-form__field:focus-within .search-form__chevron {
   color: var(--color-black)
}

.search-form__date-icon {
   position: absolute;
   right: 1rem;
   width: 1rem;
   height: 1rem;
   color: var(--color-gray-text);
   transition: color .15s;
   z-index: 2;
   pointer-events: none
}

.search-form__field:focus-within .search-form__date-icon {
   color: var(--color-black)
}

.search-form__date-input {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   outline: none;
   opacity: 0;
   pointer-events: none
}

.search-form__date-label {
   position: relative;
   z-index: 1;
   display: block;
   width: 100%;
   padding: .75rem 2.5rem .75rem 1rem;
   font-size: 14px;
   font-weight: 600;
   color: var(--color-gray-text);
   line-height: 1.5;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   pointer-events: none
}

.search-form__date-label.has-value {
   color: var(--color-black)
}

.search-form__submit-wrap {
   padding: .375rem;
   background: var(--color-white)
}

.search-form__submit {
   width: 100%;
   height: 100%;
   background: var(--color-black);
   color: var(--color-white);
   padding: .625rem 0;
   border-radius: var(--radius-md);
   font-weight: 700;
   font-size: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   cursor: pointer;
   transition: var(--transition)
}

.search-form__submit:hover {
   background: var(--color-zinc-800)
}

.search-form__submit:active {
   scale: .98
}

.search-form__submit svg {
   width: 1rem;
   height: 1rem
}

/* ============================================
   GALLERY
   ============================================ */
.gallery-section {
   padding: 1rem;
   overflow: hidden
}

.gallery-section__inner {
   max-width: 80rem;
   margin: 0 auto
}

.gallery {
   display: none;
   gap: 1.5rem;
   align-items: start
}

.gallery__card {
   position: relative;
   aspect-ratio: 2 / 1;
   height: auto;
   border-radius: var(--radius-xl);
   overflow: hidden;
   border: 1px solid var(--color-gray-border);
   background: var(--color-white);
   box-shadow: var(--shadow-md);
   transition: box-shadow .15s
}

.gallery__card:hover {
   box-shadow: var(--shadow-lg)
}

.gallery__card img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block
}

.gallery__badge {
   position: absolute;
   top: .75rem;
   right: .75rem;
   background: rgba(255, 255, 255, .9);
   backdrop-filter: blur(8px);
   color: var(--color-black);
   font-size: 9px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .1em;
   padding: .25rem .625rem;
   border-radius: var(--radius-full);
   box-shadow: var(--shadow-sm)
}

.gallery__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent, transparent);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 1.25rem
}

.gallery__overlay h3 {
   font-size: 1.125rem;
   font-weight: 700;
   color: var(--color-white)
}

.gallery-mobile {
   position: relative;
   display: flex;
   align-items: flex-start;
   gap: .75rem;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   padding-bottom: 1.75rem;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch
}

.gallery-mobile::-webkit-scrollbar {
   display: none
}

.gallery-mobile__slide {
   position: relative;
   flex: 0 0 84%;
   scroll-snap-align: start
}

.gallery-mobile__slide .gallery__card {
   box-shadow: var(--shadow-lg)
}

.gallery-mobile__slide .gallery__badge {
   top: 1rem;
   right: 1rem;
   font-size: 10px;
   padding: .375rem .75rem
}

.gallery-mobile__slide .gallery__overlay {
   padding: 1.5rem
}

.gallery-mobile__slide .gallery__overlay h3 {
   font-size: 1.125rem;
   margin-bottom: .25rem
}

.gallery-mobile__dots {
   position: absolute;
   bottom: .5rem;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: .5rem;
   z-index: 10
}

.gallery-dot {
   height: .25rem;
   border-radius: var(--radius-full);
   transition: all .3s
}

.gallery-dot.active {
   width: 1.5rem;
   background: var(--color-white)
}

.gallery-dot.inactive {
   width: .5rem;
   background: rgba(255, 255, 255, .4)
}

/* ============================================
   RECOMMENDED TRIPS
   ============================================ */
.recommended-section {
   position: relative;
   padding: 2.75rem 1rem 3rem;
   overflow: hidden;
   background:
      radial-gradient(circle at 8% 10%, rgba(80, 170, 102, .12), transparent 24rem),
      linear-gradient(180deg, #f7fbf8 0%, #ffffff 100%);
   border-top: 1px solid rgba(80, 170, 102, .14);
   border-bottom: 1px solid rgba(6, 41, 99, .08)
}

.recommended-section::before {
   content: "";
   position: absolute;
   width: 15rem;
   height: 15rem;
   left: -8rem;
   bottom: -9rem;
   border: 2.5rem solid rgba(6, 41, 99, .025);
   border-radius: var(--radius-full);
   pointer-events: none
}

.recommended-section__inner {
   position: relative;
   z-index: 1;
   max-width: 64rem;
   margin: 0 auto;
   width: 100%
}

.recommended-section__header {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: .35rem;
   margin-bottom: 1.75rem
}

.recommended-section__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: .45rem;
   color: var(--color-primary-hover);
   font-size: .72rem;
   font-weight: 800
}

.recommended-section__eyebrow::before {
   content: "";
   width: 1.5rem;
   height: 3px;
   border-radius: var(--radius-full);
   background: var(--color-primary)
}

.recommended-section__title {
   color: var(--color-brand-navy);
   font-size: 1.45rem;
   font-weight: 800;
   line-height: 1.35;
   letter-spacing: -.035em
}

.recommended-section__subtitle {
   max-width: 32rem;
   font-size: .78rem;
   line-height: 1.8;
   font-weight: 500;
   color: var(--color-gray-text);
}

.trips-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem
}

.trip-card {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   background: var(--color-white);
   border: 1px solid rgba(6, 41, 99, .1);
   border-radius: var(--radius-2xl);
   padding: 1.1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   cursor: pointer;
   box-shadow: 0 10px 30px rgba(6, 41, 99, .055);
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.trip-card::after {
   content: "";
   position: absolute;
   inset: 0 auto 0 0;
   z-index: -1;
   width: 4px;
   background: var(--color-primary);
   transform: scaleY(0);
   transform-origin: bottom;
   transition: transform .25s ease
}

.trip-card:hover {
   border-color: rgba(80, 170, 102, .45);
   box-shadow: 0 16px 36px rgba(6, 41, 99, .1);
   transform: translateY(-3px)
}

.trip-card:hover::after {
   transform: scaleY(1)
}

.trip-card__left {
   min-width: 0;
   display: flex;
   align-items: center;
   gap: .9rem
}

.trip-card__icon {
   flex: 0 0 auto;
   width: 2.75rem;
   height: 2.75rem;
   border-radius: .9rem;
   background: rgba(80, 170, 102, .12);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background .25s ease, color .25s ease
}

.trip-card__icon svg {
   width: 1.25rem;
   height: 1.25rem;
   color: var(--color-primary-hover)
}

.trip-card:hover .trip-card__icon {
   background: var(--color-primary)
}

.trip-card:hover .trip-card__icon svg {
   color: var(--color-white)
}

.trip-card__info {
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: .3rem
}

.trip-card__route {
   display: flex;
   align-items: center;
   gap: .55rem;
   min-width: 0
}

.trip-card__city {
   flex: 1 1 auto;
   min-width: 0;
   color: var(--color-brand-navy);
   font-weight: 800;
   font-size: 14px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.trip-card__route-line {
   flex: 0 0 2rem;
   height: 1px;
   position: relative;
   background: rgba(6, 41, 99, .22)
}

.trip-card__route-line::before,
.trip-card__route-line::after {
   content: "";
   position: absolute;
   top: 50%;
   width: 5px;
   height: 5px;
   border-radius: var(--radius-full);
   transform: translateY(-50%)
}

.trip-card__route-line::before {
   right: 0;
   background: var(--color-primary)
}

.trip-card__route-line::after {
   left: 0;
   border: 1.5px solid var(--color-brand-navy);
   background: var(--color-white)
}

.trip-card__class {
   font-size: 10px;
   color: var(--color-gray-text);
   font-weight: 600
}

.trip-card__right {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   gap: .75rem
}

.trip-card__price {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   text-align: left;
   line-height: 1.25
}

.trip-card__price-label {
   font-size: 9px;
   font-weight: 600;
   color: var(--color-gray-text)
}

.trip-card__amount {
   color: var(--color-brand-navy);
   font-size: 1.05rem;
   font-weight: 800
}

.trip-card__currency {
   font-size: 9px;
   font-weight: 700;
   color: var(--color-primary-hover);
   margin-right: .25rem
}

.trip-card__chevron {
   width: 1.9rem;
   height: 1.9rem;
   padding: .48rem;
   border-radius: var(--radius-full);
   color: var(--color-white);
   background: var(--color-brand-navy);
   transition: transform .2s ease, background .2s ease
}

.trip-card:hover .trip-card__chevron {
   background: var(--color-primary);
   transform: translateX(-3px)
}

@media(max-width:30rem) {
   .trip-card {
      padding: .9rem;
      gap: .6rem
   }

   .trip-card__left {
      gap: .65rem
   }

   .trip-card__icon {
      width: 2.35rem;
      height: 2.35rem;
      border-radius: .75rem
   }

   .trip-card__route {
      gap: .35rem
   }

   .trip-card__route-line {
      flex-basis: 1.25rem
   }

   .trip-card__city {
      font-size: 12px
   }

   .trip-card__right {
      gap: .4rem
   }

   .trip-card__chevron {
      width: 1.7rem;
      height: 1.7rem;
      padding: .42rem
   }
}

/* ============================================
   STEPS
   ============================================ */
.steps-section {
   position: relative;
   padding: 3rem 1rem;
   overflow: hidden;
   background:
      linear-gradient(135deg, rgba(6, 41, 99, .025), transparent 45%),
      var(--color-white);
   border-bottom: 1px solid rgba(6, 41, 99, .08)
}

.steps-section__inner {
   max-width: 64rem;
   margin: 0 auto
}

.steps-section__header {
   max-width: 34rem;
   margin: 0 auto 2rem;
   text-align: center
}

.steps-section__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   margin-bottom: .4rem;
   color: var(--color-primary-hover);
   font-size: .72rem;
   font-weight: 800
}

.steps-section__eyebrow::before,
.steps-section__eyebrow::after {
   content: "";
   width: 1.15rem;
   height: 2px;
   border-radius: var(--radius-full);
   background: rgba(80, 170, 102, .55)
}

.steps-section__title {
   margin-bottom: .35rem;
   color: var(--color-brand-navy);
   font-size: 1.45rem;
   line-height: 1.4;
   font-weight: 800;
   letter-spacing: -.035em
}

.steps-section__subtitle {
   color: var(--color-gray-text);
   font-size: .76rem;
   line-height: 1.8;
   font-weight: 500
}

.steps-grid {
   position: relative;
   display: grid;
   grid-template-columns: 1fr;
   gap: .9rem
}

.step-item {
   position: relative;
   z-index: 1;
   overflow: hidden;
   display: flex;
   align-items: center;
   gap: 1rem;
   min-height: 6.5rem;
   padding: 1.15rem;
   border-radius: var(--radius-2xl);
   border: 1px solid rgba(6, 41, 99, .1);
   background: var(--color-white);
   box-shadow: 0 10px 28px rgba(6, 41, 99, .055);
   transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease
}

.step-item::after {
   content: attr(data-step);
   position: absolute;
   left: .65rem;
   bottom: -1.2rem;
   z-index: -1;
   color: rgba(6, 41, 99, .035);
   font-size: 5rem;
   line-height: 1;
   font-weight: 900;
   pointer-events: none
}

.step-item--search::after {
   content: "1"
}

.step-item--details::after {
   content: "2"
}

.step-item--confirm::after {
   content: "3"
}

.step-item:hover {
   border-color: rgba(80, 170, 102, .4);
   box-shadow: 0 16px 34px rgba(6, 41, 99, .09);
   transform: translateY(-3px)
}

.step-item__icon {
   flex: 0 0 auto;
   width: 3.25rem;
   height: 3.25rem;
   border-radius: 1rem;
   background: rgba(80, 170, 102, .12);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   transition: background .25s ease, transform .25s ease
}

.step-item__number {
   position: absolute;
   top: -.4rem;
   right: -.4rem;
   width: 1.35rem;
   height: 1.35rem;
   border: 2px solid var(--color-white);
   background: var(--color-brand-navy);
   color: var(--color-white);
   font-size: 9px;
   border-radius: var(--radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   box-shadow: 0 3px 8px rgba(6, 41, 99, .2)
}

.step-item__icon svg {
   width: 1.35rem;
   height: 1.35rem;
   color: var(--color-primary-hover);
   transition: color .25s ease
}

.step-item:hover .step-item__icon {
   background: var(--color-primary);
   transform: scale(1.04)
}

.step-item:hover .step-item__icon svg {
   color: var(--color-white)
}

.step-item__text {
   min-width: 0;
   text-align: right
}

.step-item__title {
   margin-bottom: .3rem;
   color: var(--color-brand-navy);
   font-size: .9rem;
   font-weight: 800;
   line-height: 1.45
}

.step-item__desc {
   color: var(--color-gray-text);
   font-size: .7rem;
   font-weight: 500;
   line-height: 1.7
}

/* ============================================
   FEATURES
   ============================================ */
.features-section {
   padding: 2.5rem 1rem;
   max-width: 64rem;
   margin: 0 auto
}

.features-header {
   margin-bottom: 2rem
}

.features-title {
   font-size: 1.25rem;
   font-weight: 700;
   margin-bottom: .5rem
}

.features-subtitle {
   color: var(--color-gray-text);
   font-size: .75rem;
   font-weight: 500
}

.features-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem
}

.feature-card {
   padding: 1.25rem;
   border-radius: var(--radius-2xl);
   border: 1px solid var(--color-gray-border);
   background: var(--color-white);
   transition: var(--transition)
}

.feature-card:hover {
   border-color: var(--color-black)
}

.feature-card__header {
   display: flex;
   align-items: center;
   gap: .75rem;
   margin-bottom: .75rem
}

.feature-card__header svg {
   width: 1.25rem;
   height: 1.25rem
}

.feature-card__header h4 {
   font-weight: 700;
   font-size: 1rem
}

.feature-card__desc {
   color: var(--color-gray-text);
   font-size: 13px;
   line-height: 1.625;
   font-weight: 500
}

.icon-blue {
   color: var(--color-blue-600)
}

.icon-orange {
   color: var(--color-orange-600)
}

.icon-purple {
   color: var(--color-purple-600)
}

/* ============================================
   FAQ
   ============================================ */
.faq-section {
   position: relative;
   padding: 3.5rem 1rem;
   overflow: hidden;
   background:
      radial-gradient(circle at 10% 0, rgba(80, 170, 102, .1), transparent 24rem),
      linear-gradient(180deg, #f8fcf9 0%, #ffffff 100%);
   border-top: 1px solid rgba(80, 170, 102, .14);
   border-bottom: 1px solid rgba(6, 41, 99, .08)
}

.faq-section::before {
   content: "?";
   position: absolute;
   left: 3%;
   bottom: -5rem;
   color: rgba(6, 41, 99, .025);
   font-size: 19rem;
   line-height: 1;
   font-weight: 900;
   pointer-events: none
}

.faq-section__inner {
   position: relative;
   z-index: 1;
   max-width: 64rem;
   margin: 0 auto
}

.faq-header {
   display: flex;
   align-items: center;
   gap: 1rem;
   max-width: 40rem;
   margin-bottom: 2rem
}

.faq-header__icon {
   flex: 0 0 auto;
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 1rem;
   background: var(--color-brand-navy);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 10px 22px rgba(6, 41, 99, .16)
}

.faq-header__icon svg {
   width: 1.5rem;
   height: 1.5rem;
   color: var(--color-white)
}

.faq-header__text {
   min-width: 0
}

.faq-header__eyebrow {
   display: block;
   margin-bottom: .15rem;
   color: var(--color-primary-hover);
   font-size: .7rem;
   font-weight: 800
}

.faq-header h2 {
   color: var(--color-brand-navy);
   font-size: 1.45rem;
   line-height: 1.4;
   font-weight: 800;
   letter-spacing: -.035em
}

.faq-header p {
   margin-top: .2rem;
   color: var(--color-gray-text);
   font-size: .75rem;
   line-height: 1.7;
   font-weight: 500
}

.faq-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: .85rem
}

.faq-item {
   position: relative;
   background: var(--color-white);
   border-radius: var(--radius-2xl);
   border: 1px solid rgba(6, 41, 99, .1);
   box-shadow: 0 8px 24px rgba(6, 41, 99, .05);
   transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
   overflow: hidden
}

.faq-item:hover {
   border-color: rgba(80, 170, 102, .4);
   box-shadow: 0 13px 30px rgba(6, 41, 99, .08);
   transform: translateY(-2px)
}

.faq-item[open] {
   border-color: rgba(80, 170, 102, .5);
   box-shadow: 0 15px 34px rgba(6, 41, 99, .09)
}

.faq-item[open]::before {
   content: "";
   position: absolute;
   inset: 0 0 0 auto;
   width: 4px;
   background: var(--color-primary)
}

.faq-item__question {
   display: flex;
   align-items: center;
   gap: .85rem;
   width: 100%;
   min-height: 4rem;
   padding: 1rem 1.1rem;
   color: var(--color-brand-navy);
   font-weight: 800;
   font-size: .875rem;
   line-height: 1.6;
   cursor: pointer;
   list-style: none;
   transition: background .2s ease
}

.faq-item[open] .faq-item__question {
   background: rgba(80, 170, 102, .045)
}

.faq-item__question::-webkit-details-marker {
   display: none
}

.faq-item__question::after {
   content: "+";
   display: flex;
   align-items: center;
   justify-content: center;
   width: 1.75rem;
   height: 1.75rem;
   margin-right: auto;
   border-radius: var(--radius-full);
   border: 1px solid rgba(80, 170, 102, .25);
   background: rgba(80, 170, 102, .1);
   color: var(--color-primary-hover);
   font-size: 1rem;
   font-weight: 900;
   line-height: 1;
   transition: var(--transition);
   flex-shrink: 0
}

.faq-item[open] .faq-item__question::after {
   content: "−";
   transform: rotate(180deg);
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-white)
}

.faq-item__dot {
   position: relative;
   width: 1.7rem;
   height: 1.7rem;
   border-radius: .55rem;
   background: rgba(80, 170, 102, .1);
   border: 1px solid rgba(80, 170, 102, .25);
   flex-shrink: 0;
   transition: background .2s ease, border-color .2s ease
}

.faq-item__dot::before {
   content: "?";
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-primary-hover);
   font-size: .75rem;
   font-weight: 900
}

.faq-item[open] .faq-item__dot {
   border-color: var(--color-brand-navy);
   background: var(--color-brand-navy)
}

.faq-item[open] .faq-item__dot::before {
   color: var(--color-white)
}

.faq-item__answer {
   color: var(--color-gray-text);
   font-size: 13px;
   font-weight: 500;
   line-height: 1.9;
   padding: .1rem 3.65rem 1.25rem 3.5rem
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
   background: var(--color-white);
   color: var(--color-black);
   padding: 2rem 1rem 1rem;
   border-top: 1px solid var(--color-gray-border)
}

.site-footer__inner {
   max-width: 80rem;
   margin: 0 auto
}

.footer-top {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-bottom: 1.5rem;
   padding-bottom: 1.5rem;
   border-bottom: 1px solid var(--color-gray-border)
}

.footer-brand {
   display: flex;
   flex-direction: column;
   gap: .25rem
}

.footer-brand .logo__icon {
   width: 1.75rem;
   height: 1.75rem;
   border-radius: var(--radius-md)
}

.footer-brand .logo__text {
   font-size: 1.125rem
}

.footer-brand__desc {
   color: var(--color-gray-text);
   font-size: 11px;
   max-width: 20rem;
   line-height: 1.625
}

.footer-social {
   display: flex;
   flex-direction: column;
   gap: .5rem
}

.footer-social__label {
   font-weight: 700;
   font-size: 10px;
   color: rgba(0, 0, 0, .8);
   text-transform: uppercase;
   letter-spacing: .05em
}

.footer-social__links {
   display: flex;
   gap: .375rem
}

.social-link {
   width: 1.75rem;
   height: 1.75rem;
   border-radius: var(--radius-full);
   background: var(--color-gray-light);
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--color-gray-border);
   transition: var(--transition)
}

.social-link:hover {
   background: var(--color-gray-border)
}

.social-link svg {
   width: .875rem;
   height: .875rem;
   color: rgba(0, 0, 0, .7)
}

.footer-links {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
   margin-bottom: 2rem
}

.footer-links__title {
   font-weight: 700;
   font-size: .75rem;
   margin-bottom: .75rem
}

.footer-links__list {
   display: flex;
   flex-direction: column;
   gap: .375rem
}

.footer-links__list li {
   font-size: 11px;
   color: var(--color-gray-text)
}

.footer-links__list a {
   transition: color .15s
}

.footer-links__list a:hover {
   color: var(--color-black)
}

.footer-contact-item {
   display: flex;
   align-items: center;
   gap: .5rem
}

.footer-contact-item svg {
   width: .75rem;
   height: .75rem;
   color: rgba(94, 94, 94, .6)
}

.footer-apps {
   display: flex;
   flex-direction: row;
   gap: .5rem
}

.app-link {
   flex: 1;
   display: flex;
   align-items: center;
   gap: .5rem;
   background: var(--color-gray-light);
   border: 1px solid var(--color-gray-border);
   border-radius: var(--radius-sm);
   padding: .375rem;
   transition: var(--transition)
}

.app-link:hover {
   background: var(--color-gray-border)
}

.app-link svg {
   width: 1rem;
   height: 1rem
}

.app-link__label {
   font-size: 8px;
   color: var(--color-gray-text);
   line-height: 1
}

.app-link__store {
   font-size: 10px;
   font-weight: 700
}

.footer-bottom {
   padding-top: 1rem;
   border-top: 1px solid var(--color-gray-border);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem
}

.payment-methods {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: .5rem;
   opacity: .5;
   transition: var(--transition)
}

.payment-methods:hover {
   opacity: 1
}

.payment-badge {
   background: var(--color-gray-light);
   padding: .125rem .375rem;
   border-radius: var(--radius-sm);
   border: 1px solid var(--color-gray-border);
   display: flex;
   align-items: center;
   justify-content: center;
   height: 1rem
}

.payment-badge span {
   color: var(--color-black);
   font-weight: 700;
   font-size: 8px
}

.footer-legal {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: .125rem
}

.footer-copyright {
   font-size: 9px;
   color: var(--color-gray-text)
}

.footer-legal-links {
   display: flex;
   gap: .5rem
}

.footer-legal-links a {
   font-size: 8px;
   color: rgba(94, 94, 94, .6);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .1em;
   transition: color .15s
}

.footer-legal-links a:hover {
   color: var(--color-black)
}

/* ============================================
   PROMO BANNER
   ============================================ */
.promo-banner {
   position: fixed;
   bottom: 1.5rem;
   left: 1rem;
   right: 1rem;
   z-index: 100
}

.promo-banner__card {
   background: var(--color-black);
   color: var(--color-white);
   padding: 1rem;
   border-radius: 24px;
   box-shadow: var(--shadow-2xl);
   border: 1px solid rgba(255, 255, 255, .1);
   position: relative;
   overflow: hidden
}

.promo-banner__glow {
   position: absolute;
   top: 0;
   right: 0;
   width: 8rem;
   height: 8rem;
   background: rgba(255, 255, 255, .05);
   border-radius: var(--radius-full);
   margin-right: -4rem;
   margin-top: -4rem;
   filter: blur(40px);
   transition: var(--transition)
}

.promo-banner__card:hover .promo-banner__glow {
   background: rgba(255, 255, 255, .1)
}

.promo-banner__close {
   position: absolute;
   top: .75rem;
   left: .75rem;
   padding: .25rem;
   border-radius: var(--radius-full);
   transition: var(--transition);
   cursor: pointer
}

.promo-banner__close:hover {
   background: rgba(255, 255, 255, .1)
}

.promo-banner__close svg {
   width: 1rem;
   height: 1rem;
   color: rgba(255, 255, 255, .6)
}

.promo-banner__content {
   display: flex;
   align-items: center;
   gap: 1rem
}

.promo-banner__code {
   width: 3rem;
   height: 3rem;
   background: var(--color-white);
   color: var(--color-black);
   border-radius: var(--radius-2xl);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 1.125rem;
   box-shadow: var(--shadow-lg)
}

.promo-banner__text {
   flex: 1
}

.promo-banner__title {
   font-size: 13px;
   font-weight: 700;
   margin-bottom: .125rem
}

.promo-banner__desc {
   font-size: 11px;
   color: rgba(255, 255, 255, .6);
   font-weight: 500;
   line-height: 1.25
}

/* ============================================
   MAKKAH-RIYADH PAGE
   ============================================ */
.route-picker {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: .75rem;
   background: var(--color-white);
   padding: .5rem;
   border-radius: 24px;
   border: 1px solid var(--color-gray-border);
   box-shadow: var(--shadow-xl)
}

.route-picker__cities {
   flex: 1;
   width: 100%;
   display: flex;
   align-items: center;
   background: var(--color-gray-light);
   border-radius: var(--radius-full);
   border: 1px solid var(--color-gray-border);
   padding: .25rem;
   position: relative
}

.route-picker__city {
   flex: 1;
   padding: .5rem 2.5rem .5rem .5rem;
   display: flex;
   flex-direction: column
}

.route-picker__city--to {
   padding: .5rem .5rem .5rem 2.5rem;
   text-align: left
}

.route-picker__city-dot-hollow {
   position: absolute;
   right: 1rem;
   top: 50%;
   transform: translateY(-50%);
   width: .625rem;
   height: .625rem;
   border-radius: var(--radius-full);
   border: 2px solid var(--color-black);
   background: var(--color-white)
}

.route-picker__city-dot-filled {
   position: absolute;
   left: 1rem;
   top: 50%;
   transform: translateY(-50%);
   width: .625rem;
   height: .625rem;
   border-radius: var(--radius-full);
   background: var(--color-black)
}

.route-picker__city-name {
   font-size: 14px;
   font-weight: 700;
   color: var(--color-black)
}

.route-picker__city-address {
   font-size: 10px;
   color: var(--color-gray-text);
   font-weight: 500
}

.route-picker__swap {
   z-index: 10;
   background: var(--color-white);
   width: 2.25rem;
   height: 2.25rem;
   border-radius: var(--radius-full);
   border: 1px solid var(--color-gray-border);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-md);
   margin: 0 -.25rem
}

.route-picker__swap svg {
   width: 1rem;
   height: 1rem;
   color: var(--color-black)
}

.route-picker__actions {
   display: flex;
   width: 100%;
   align-items: center;
   gap: .5rem
}

.route-picker__date {
   position: relative;
   flex: 1;
   display: flex;
   align-items: center;
   background: var(--color-gray-light);
   border-radius: var(--radius-full);
   border: 1px solid var(--color-gray-border);
   padding: .875rem 1rem;
   cursor: pointer
}

.route-picker__date svg {
   width: 1rem;
   height: 1rem;
   color: var(--color-black);
   margin-left: .5rem;
   position: relative;
   z-index: 2
}

.route-picker__date input {
   position: absolute;
   width: 0;
   height: 0;
   opacity: 0;
   pointer-events: none
}

.route-picker__date-label {
   font-size: 13px;
   font-weight: 700;
   color: var(--color-black);
   position: relative;
   z-index: 1;
   pointer-events: none;
   white-space: nowrap
}

.route-picker__date-label--placeholder {
   color: var(--color-gray-text)
}

.route-picker__search {
   background: var(--color-black);
   color: var(--color-white);
   padding: .875rem 2.5rem;
   border-radius: var(--radius-full);
   font-weight: 700;
   font-size: 15px;
   cursor: pointer;
   transition: var(--transition);
   box-shadow: var(--shadow-lg)
}

.route-picker__search:hover {
   background: var(--color-zinc-800)
}

.route-picker__search:active {
   scale: .95
}

.search-results {
   display: flex;
   flex-direction: column;
   gap: 1.5rem
}

.search-results__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1rem
}

.search-results__title {
   font-size: 1.25rem;
   font-weight: 700
}

.result-card {
   background: var(--color-white);
   border-radius: 16px;
   border: 1px solid var(--color-gray-border);
   box-shadow: var(--shadow-sm);
   overflow: hidden
}

.result-card__body {
   padding: 1.25rem
}

.result-card__header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 1.5rem
}

.result-card__time-group {
   display: flex;
   align-items: center;
   gap: .75rem
}

.result-card__time-info {
   display: flex;
   flex-direction: column
}

.result-card__time-row {
   display: flex;
   align-items: center;
   gap: .5rem
}

.result-card__date-row {
   display: flex;
   align-items: center;
   gap: .5rem
}

.result-card__date {
   font-size: .85rem;
   font-weight: 600;
   color: var(--color-primary)
}

.result-card__time {
   font-size: 1.25rem;
   font-weight: 700
}

.result-card__time svg {
   width: 1.25rem;
   height: 1.25rem
}

.result-card__route-label {
   color: var(--color-gray-text);
   font-size: 10px;
   font-weight: 700;
   margin-top: .125rem
}

.result-card__price {
   background: var(--color-green-bg);
   color: var(--color-green-text);
   padding: .25rem .75rem;
   border-radius: var(--radius-lg);
   font-weight: 700;
   font-size: 1rem
}

.route-timeline {
   position: relative;
   padding-right: 1.25rem;
   margin-bottom: 2rem
}

.route-timeline__line {
   position: absolute;
   right: 5px;
   top: .5rem;
   bottom: .5rem;
   width: 1px;
   border-right: 1px dashed var(--color-gray-border)
}

.route-timeline__stop {
   position: relative;
   display: flex;
   align-items: center;
   gap: .75rem
}

.route-timeline__stop--from {
   margin-bottom: 1.5rem
}

.route-timeline__dot-hollow {
   position: absolute;
   right: -20px;
   width: .625rem;
   height: .625rem;
   border-radius: var(--radius-full);
   border: 2px solid var(--color-black);
   background: var(--color-white);
   z-index: 10
}

.route-timeline__dot-filled {
   position: absolute;
   right: -20px;
   width: .625rem;
   height: .625rem;
   border-radius: var(--radius-full);
   background: var(--color-black);
   z-index: 10
}

.route-timeline h4 {
   font-weight: 700;
   font-size: .75rem
}

.route-timeline p {
   color: var(--color-gray-text);
   font-size: 10px
}

.result-card__actions {
   display: flex;
   align-items: stretch;
   gap: .5rem
}

.btn--book {
   flex: 1 1 auto;
   min-height: 2.75rem;
   background: var(--color-primary);
   color: var(--color-white);
   padding: .625rem 1rem;
   border-radius: var(--radius-lg);
   font-weight: 700;
   font-size: .875rem;
   line-height: 1.2;
   text-align: center;
   cursor: pointer;
   transition: var(--transition);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   box-shadow: var(--shadow-sm)
}

.btn--book svg {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0
}

.btn--book:hover {
   background: var(--color-primary-hover)
}

.btn--book:active {
   scale: .98
}

.btn--photos {
   flex: 0 0 auto;
   min-height: 2.75rem;
   background: var(--color-white);
   color: var(--color-gray-text);
   border: 1px solid var(--color-gray-border);
   padding: .5rem .75rem;
   border-radius: var(--radius-lg);
   font-weight: 700;
   font-size: .8125rem;
   line-height: 1.2;
   text-align: center;
   cursor: pointer;
   transition: var(--transition);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .375rem
}

.btn--photos svg {
   width: .9375rem;
   height: .9375rem;
   flex-shrink: 0
}

.btn--photos:hover {
   background: var(--color-zinc-50);
   color: var(--color-black);
   border-color: var(--color-zinc-200)
}

.btn--photos:active {
   scale: .98
}

@media(max-width:29.9375rem) {
   .result-card__actions {
      gap: .375rem
   }

   .btn--book {
      min-height: 2.625rem;
      padding: .5625rem .875rem;
      font-size: .8125rem
   }

   .btn--photos {
      min-height: 2.625rem;
      padding: .5625rem .625rem;
      font-size: .75rem;
      gap: .25rem
   }
}

.search-placeholder {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 5rem 0;
   text-align: center
}

.search-placeholder__icon {
   width: 5rem;
   height: 5rem;
   background: var(--color-white);
   border-radius: var(--radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--color-gray-border);
   margin-bottom: 1.5rem
}

.search-placeholder__icon svg {
   width: 2rem;
   height: 2rem;
   color: rgba(94, 94, 94, .4)
}

.search-placeholder h3 {
   font-size: 1.125rem;
   font-weight: 700;
   margin-bottom: .5rem
}

.search-placeholder p {
   color: var(--color-gray-text);
   font-size: .875rem;
   max-width: 20rem
}

.search-placeholder__btn {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   margin-top: 1.25rem;
   padding: .625rem 1.5rem;
   background: var(--color-primary);
   color: var(--color-white);
   border-radius: var(--radius-full);
   font-weight: 700;
   font-size: .875rem;
   cursor: pointer;
   transition: var(--transition);
   box-shadow: var(--shadow-lg)
}

.search-placeholder__btn:hover {
   background: var(--color-primary-hover);
   transform: translateY(-1px);
   box-shadow: var(--shadow-xl)
}

.search-placeholder__btn:active {
   transform: translateY(0);
   scale: .97
}

.search-placeholder__btn svg {
   width: 1.125rem;
   height: 1.125rem
}

.booking-modal {
   position: fixed;
   inset: 0;
   z-index: 200;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 1rem
}

.booking-modal__overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .6);
   backdrop-filter: blur(8px)
}

.booking-modal__card {
   position: relative;
   background: var(--color-white);
   width: 100%;
   max-width: 28rem;
   border-radius: 32px;
   overflow: hidden;
   box-shadow: var(--shadow-2xl)
}

.booking-modal__body {
   padding: 1.5rem
}

.booking-modal__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 2rem
}

.booking-modal__header h3 {
   font-size: 1.25rem;
   font-weight: 700
}

.booking-modal__close {
   padding: .5rem;
   border-radius: var(--radius-full);
   transition: var(--transition);
   cursor: pointer
}

.booking-modal__close:hover {
   background: var(--color-gray-light)
}

.booking-modal__close svg {
   width: 1.25rem;
   height: 1.25rem
}

.booking-modal__form {
   display: flex;
   flex-direction: column;
   gap: 2rem
}

.form-label {
   display: block;
   font-size: .75rem;
   font-weight: 700;
   color: var(--color-gray-text);
   text-transform: uppercase;
   letter-spacing: .05em;
   margin-bottom: 1rem
}

.seat-counter {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: var(--color-gray-light);
   padding: .5rem;
   border-radius: var(--radius-2xl);
   border: 1px solid var(--color-gray-border)
}

.seat-counter__btn {
   width: 3rem;
   height: 3rem;
   background: var(--color-white);
   border-radius: var(--radius-xl);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-sm);
   cursor: pointer;
   transition: var(--transition)
}

.seat-counter__btn:hover {
   background: var(--color-zinc-50)
}

.seat-counter__btn svg {
   width: 1.25rem;
   height: 1.25rem
}

.seat-counter__value {
   font-size: 1.25rem;
   font-weight: 700
}

.passenger-types {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: .75rem
}

.passenger-type {
   padding: 1rem;
   border-radius: var(--radius-2xl);
   border: 2px solid var(--color-gray-border);
   font-weight: 700;
   font-size: .875rem;
   text-align: center;
   cursor: pointer;
   transition: var(--transition);
   background: var(--color-white);
   color: var(--color-gray-text)
}

.passenger-type:hover {
   border-color: rgba(0, 0, 0, .2)
}

.passenger-type.active {
   border-color: var(--color-black);
   background: var(--color-black);
   color: var(--color-white);
   box-shadow: var(--shadow-lg)
}

.booking-modal__total {
   padding-top: 1rem
}

.booking-modal__total-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1.5rem;
   padding: 0 .5rem
}

.booking-modal__total-label {
   color: var(--color-gray-text);
   font-weight: 700
}

.booking-modal__total-value {
   font-size: 1.5rem;
   font-weight: 700
}

.btn--confirm {
   width: 100%;
   background: var(--color-primary);
   color: var(--color-white);
   padding: 1rem;
   border-radius: var(--radius-2xl);
   font-weight: 700;
   font-size: 1.125rem;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .2);
   cursor: pointer;
   transition: var(--transition)
}

.btn--confirm:hover {
   scale: 1.02
}

.btn--confirm:active {
   scale: .98
}

.makkah-page-content {
   min-height: 100vh;
   background: var(--color-gray-light);
   padding-bottom: 5rem
}

.results-section {
   padding: 3rem 1rem;
   max-width: 64rem;
   margin: 0 auto
}

.gallery-section--route {
   padding: 1rem;
   overflow: hidden;
   background: var(--color-white);
   border-bottom: 1px solid var(--color-gray-border)
}

.gallery--small {
   align-items: start
}

.gallery-mobile--small {
   display: flex
}

.page-content-section {
   padding: 1.25rem 1rem;
   background: var(--color-white);
   border-top: 1px solid var(--color-gray-border);
   border-bottom: 1px solid var(--color-gray-border)
}

.page-content-rich {
   font-size: .8rem;
   line-height: 1.6;
   color: var(--color-gray-text)
}

.page-content-rich h1,
.page-content-rich h2,
.page-content-rich h3,
.page-content-rich h4 {
   color: var(--color-gray-dark);
   margin: .75em 0 .35em;
   font-weight: 700
}

.page-content-rich h1 { font-size: 1.35rem }
.page-content-rich h2 { font-size: 1.15rem }
.page-content-rich h3 { font-size: 1rem }
.page-content-rich h4 { font-size: .9rem }

.page-content-rich p {
   margin: .35em 0
}

.page-content-rich ul,
.page-content-rich ol {
   padding-right: 1.5em;
   margin: .5em 0
}

.route-seo-section {
   padding: 2rem 1rem;
   background: var(--color-white);
   border-top: 1px solid var(--color-gray-border)
}

.route-seo-section__inner {
   max-width: 64rem;
   margin: 0 auto
}

.route-seo-header {
   margin-bottom: 1.25rem
}

.route-seo-header__eyebrow {
   display: inline-flex;
   align-items: center;
   margin-bottom: .5rem;
   color: var(--color-primary);
   font-size: .8125rem;
   font-weight: 800
}

.route-seo-header h2 {
   color: var(--color-zinc-900);
   font-size: 1.25rem;
   font-weight: 800;
   line-height: 1.4;
   margin-bottom: .5rem
}

.route-seo-header p {
   color: var(--color-gray-text);
   font-size: .875rem;
   line-height: 1.8;
   max-width: 48rem
}

.route-seo-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: .875rem
}

.route-seo-card {
   display: flex;
   gap: .875rem;
   align-items: flex-start;
   padding: 1rem;
   background: var(--color-zinc-50);
   border: 1px solid var(--color-gray-border);
   border-radius: var(--radius-lg)
}

.route-seo-card__icon {
   width: 2.5rem;
   height: 2.5rem;
   min-width: 2.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-primary);
   background: var(--color-green-bg);
   border-radius: var(--radius-lg)
}

.route-seo-card h3 {
   color: var(--color-zinc-900);
   font-size: .9875rem;
   font-weight: 800;
   line-height: 1.45;
   margin-bottom: .375rem
}

.route-seo-card p,
.route-seo-list li,
.route-schedule-item__meta {
   color: var(--color-gray-text);
   font-size: .8375rem;
   line-height: 1.75
}

.route-seo-card__value {
   color: var(--color-zinc-900) !important;
   font-size: 1.25rem !important;
   font-weight: 900;
   line-height: 1.3 !important;
   margin-bottom: .25rem
}

.route-schedule-list {
   display: grid;
   gap: .5rem
}

.route-schedule-item {
   display: flex;
   flex-wrap: wrap;
   gap: .375rem .75rem;
   align-items: center;
   padding: .625rem .75rem;
   background: var(--color-white);
   border: 1px solid var(--color-gray-border);
   border-radius: var(--radius-md)
}

.route-schedule-item__time {
   color: var(--color-zinc-900);
   font-size: .95rem;
   font-weight: 900
}

.route-seo-list {
   list-style: decimal;
   padding-right: 1.15rem
}

.route-seo-list li {
   margin-bottom: .25rem
}

.route-seo-card__link {
   display: inline-flex;
   margin-top: .5rem;
   color: var(--color-primary);
   font-size: .875rem;
   font-weight: 800
}

.route-seo-card__link:hover {
   color: var(--color-primary-hover)
}

@media (min-width: 768px) {
   .route-seo-section {
      padding: 2.5rem 1.5rem
   }

   .route-seo-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .route-seo-card--wide {
      grid-column: 1 / -1
   }
}

/* ============================================
   RESPONSIVE - Tablet (md: 768px+)
   ============================================ */
@media(min-width:48rem) {
   .site-header {
      height: 4.5rem;
      padding: 0 3rem
   }

   .site-header__left {
      gap: 2.5rem
   }

   .site-header__right {
      gap: 1rem
   }

   .logo__icon {
      width: 2.25rem;
      height: 2.25rem
   }

   .logo__img {
      height: 2.9rem;
      max-width: 14rem
   }

   .logo__text {
      font-size: 1.5rem
   }

   .lang-switcher {
      display: flex
   }

   .btn--login {
      padding: .5rem 1rem
   }

   .btn--login svg {
      width: 1rem;
      height: 1rem
   }

   .btn--login span {
      display: block
   }

   .btn--signup {
      padding: .5rem 1.5rem .625rem
   }

   .btn--signup .mobile-icon {
      display: none
   }

   .btn--signup .desktop-icon {
      display: block
   }

   .btn--signup span {
      display: block
   }

   .hero-section {
      padding: 2rem 3rem 2.5rem
   }

   .hero-title {
      font-size: 1.875rem
   }

   .hero-subtitle {
      font-size: .875rem
   }

   .hero-header {
      margin-bottom: 1.5rem
   }

   .search-form__input {
      padding-top: .875rem;
      padding-bottom: .875rem
   }

   .search-form__date-input {
      padding-top: .875rem;
      padding-bottom: .875rem
   }

   .gallery-section {
      padding: 2rem 3rem
   }

   .gallery-mobile__slide .gallery__overlay {
      padding: 2rem
   }

   .gallery-mobile__slide .gallery__overlay h3 {
      font-size: 1.5rem
   }

   .recommended-section {
      padding: 3.5rem 3rem 4rem
   }

   .recommended-section__title {
      font-size: 1.85rem
   }

   .recommended-section__subtitle {
      font-size: .85rem
   }

   .trips-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.15rem
   }

   .trip-card {
      padding: 1.25rem
   }

   .trip-card__city {
      font-size: 15px
   }

   .steps-section {
      padding: 4rem 3rem
   }

   .steps-section__header {
      margin-bottom: 2.5rem
   }

   .steps-section__title {
      font-size: 1.85rem
   }

   .steps-section__subtitle {
      font-size: .85rem
   }

   .steps-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem
   }

   .steps-grid::before {
      content: "";
      position: absolute;
      top: 50%;
      right: 12%;
      left: 12%;
      height: 2px;
      background: repeating-linear-gradient(
         to left,
         rgba(80, 170, 102, .35) 0,
         rgba(80, 170, 102, .35) 7px,
         transparent 7px,
         transparent 14px
      );
      transform: translateY(-50%)
   }

   .step-item {
      flex-direction: column;
      justify-content: center;
      min-height: 12rem;
      padding: 1.5rem 1.25rem;
      text-align: center
   }

   .step-item__icon {
      width: 3.75rem;
      height: 3.75rem
   }

   .step-item__text {
      text-align: center
   }

   .step-item__title {
      font-size: 1rem
   }

   .step-item__desc {
      font-size: .75rem
   }

   .features-section {
      padding: 3.5rem 3rem
   }

   .features-title {
      font-size: 1.5rem
   }

   .features-subtitle {
      font-size: .875rem
   }

   .features-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem
   }

   .feature-card__header h4 {
      font-size: 1.125rem
   }

   .faq-section {
      padding: 4rem 3rem
   }

   .faq-header h2 {
      font-size: 1.85rem
   }

   .faq-header p {
      font-size: .85rem
   }

   .faq-item__question {
      font-size: 1rem
   }

   .faq-item__answer {
      font-size: 13px
   }

   .site-footer {
      padding: 2rem 3rem 1rem
   }

   .footer-top {
      flex-direction: row;
      align-items: center
   }

   .footer-bottom {
      flex-direction: row;
      justify-content: space-between
   }

   .footer-legal {
      align-items: flex-end
   }

   .promo-banner {
      left: auto;
      right: 3rem;
      width: 20rem
   }

   .gallery-section--route {
      padding: 2rem 3rem
   }

   .result-card__body {
      padding: 1.5rem
   }

   .result-card__time {
      font-size: 1.5rem
   }

   .route-timeline h4 {
      font-size: .875rem
   }

   .route-timeline p {
      font-size: .75rem
   }

   .booking-modal__body {
      padding: 2rem
   }

   .gallery-mobile--small {
      display: flex
   }
}

/* Final primary action override */
.btn--signup,
.search-form__submit,
.route-picker__search,
.btn--book,
.search-placeholder__btn,
.btn--confirm,
.help-form__submit,
.policy-cta__btn--primary {
   background: var(--color-primary);
}

.btn--signup:hover,
.search-form__submit:hover,
.route-picker__search:hover,
.btn--book:hover,
.search-placeholder__btn:hover,
.help-form__submit:hover,
.policy-cta__btn--primary:hover {
   background: var(--color-primary-hover);
}

/* Primary site actions */
.btn--signup,
.search-form__submit,
.route-picker__search,
.btn--book,
.search-placeholder__btn,
.btn--confirm,
.help-form__submit,
.policy-cta__btn--primary {
   background: var(--color-primary);
}

.btn--signup:hover,
.search-form__submit:hover,
.route-picker__search:hover,
.btn--book:hover,
.search-placeholder__btn:hover,
.help-form__submit:hover,
.policy-cta__btn--primary:hover {
   background: var(--color-primary-hover);
}

/* ============================================
   RESPONSIVE - Desktop (lg: 1024px+)
   ============================================ */
@media(min-width:64rem) {
   .main-nav {
      display: flex
   }

   .menu-toggle {
      display: none
   }

   .mobile-lang-btn {
      display: none
   }

   .search-form {
      grid-template-columns: repeat(12, 1fr)
   }

   .search-form__field {
      grid-column: span 3;
      border-bottom: none;
      border-left: 1px solid var(--color-gray-border)
   }

   .search-form__submit-wrap {
      grid-column: span 3
   }

   .search-form__input {
      padding-top: 1.25rem;
      padding-bottom: 1.25rem
   }

   .search-form__date-input {
      padding-top: 1.25rem;
      padding-bottom: 1.25rem
   }

   .search-form__submit {
      padding: 1.25rem 0
   }

   .gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr)
   }

   .gallery-mobile {
      display: none
   }

   .footer-links {
      grid-template-columns: repeat(4, 1fr)
   }

   .footer-apps {
      flex-direction: column
   }

   .route-picker {
      flex-direction: row
   }

   .route-picker__actions {
      width: auto
   }

   .route-picker__date {
      width: 12rem
   }

   .gallery--small {
      display: grid;
      grid-template-columns: repeat(3, 1fr)
   }

   .gallery-mobile--small {
      display: none
   }

   .gallery--small .gallery__overlay h3 {
      font-size: 1rem
   }
}

/* ============================================
   MOBILE LANGUAGE BUTTON (Fix #1)
   ============================================ */
.mobile-lang-btn {
   display: flex;
   align-items: center;
   gap: .25rem;
   padding: .375rem .5rem;
   border-radius: var(--radius-full);
   font-size: .625rem;
   font-weight: 700;
   color: var(--color-black);
   transition: var(--transition);
   text-decoration: none;
   background: var(--color-gray-light);
   border: 1px solid var(--color-gray-border)
}

.mobile-lang-btn:hover {
   background: var(--color-gray-border)
}

.mobile-lang-btn svg {
   width: .875rem;
   height: .875rem
}

/* ============================================
   NAV DROPDOWN (Fix #8)
   ============================================ */
.nav-dropdown {
   position: relative
}

.nav-dropdown__trigger {
   display: flex;
   align-items: center;
   gap: .375rem;
   cursor: pointer;
   background: none;
   border: none
}

.nav-dropdown__trigger svg {
   transition: transform .2s
}

.nav-dropdown.open .nav-dropdown__trigger svg {
   transform: rotate(180deg)
}

.nav-dropdown__menu {
   position: absolute;
   top: calc(100% + 1.25rem);
   right: 0;
   min-width: 14rem;
   background: var(--color-white);
   border: 1px solid var(--color-gray-border);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-xl);
   padding: .5rem;
   display: none;
   z-index: 60
}

.nav-dropdown.open .nav-dropdown__menu {
   display: block
}

.nav-dropdown__item {
   display: block;
   padding: .75rem 1rem;
   border-radius: var(--radius-lg);
   font-size: 14px;
   font-weight: 600;
   color: var(--color-black);
   transition: var(--transition);
   text-decoration: none
}

.nav-dropdown__item:hover {
   background: var(--color-gray-light)
}

.nav-dropdown__item.active {
   background: var(--color-black);
   color: var(--color-white)
}

/* Mobile Nav Dropdown */
.mobile-nav-dropdown__trigger {
   display: flex;
   width: 100%
}

.mobile-nav-dropdown__trigger .mobile-nav-dropdown__arrow {
   transition: transform .2s;
   margin-inline-start: auto
}

.mobile-nav-dropdown__trigger.open .mobile-nav-dropdown__arrow {
   transform: rotate(180deg)
}

.mobile-nav-dropdown__menu {
   display: none;
   padding-inline-start: 2.75rem;
   padding-top: .25rem;
   padding-bottom: .25rem
}

.mobile-nav-dropdown__item {
   display: block;
   padding: .625rem 1rem;
   border-radius: var(--radius-lg);
   font-size: 13px;
   font-weight: 600;
   color: var(--color-gray-text);
   transition: var(--transition);
   text-decoration: none
}

.mobile-nav-dropdown__item:hover {
   background: var(--color-gray-light);
   color: var(--color-black)
}

.mobile-nav-dropdown__item.active {
   color: var(--color-black);
   font-weight: 700;
   background: var(--color-gray-light)
}

/* ============================================
   MODAL SELECT DROPDOWN (Fix #9)
   ============================================ */
.modal-select {
   width: 100%;
   padding: 1rem;
   background: var(--color-gray-light);
   border: 1px solid var(--color-gray-border);
   border-radius: var(--radius-2xl);
   font-size: .875rem;
   font-weight: 700;
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e5e5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: left 1rem center;
   outline: none;
   transition: border-color .15s
}

[dir="rtl"] .modal-select {
   background-position: left 1rem center
}

[dir="ltr"] .modal-select {
   background-position: right 1rem center
}

.modal-select:focus {
   border-color: var(--color-black);
   background-color: var(--color-white)
}

/* ============================================
   TOAST NOTIFICATION (Fix #3)
   ============================================ */
.toast-notification {
   position: fixed;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%) translateY(100%);
   background: var(--color-black);
   color: var(--color-white);
   padding: .875rem 1.5rem;
   border-radius: var(--radius-full);
   font-size: .875rem;
   font-weight: 700;
   box-shadow: var(--shadow-2xl);
   z-index: 1000;
   opacity: 0;
   transition: all .3s cubic-bezier(.4, 0, .2, 1);
   white-space: nowrap
}

.toast-notification.show {
   opacity: 1;
   transform: translateX(-50%) translateY(0)
}

/* ============================================
   LTR OVERRIDES (Fix #5)
   ============================================ */
[dir="ltr"] .search-form__dot-hollow {
   right: auto;
   left: 1rem
}

[dir="ltr"] .search-form__dot-filled {
   right: auto;
   left: 1rem
}

[dir="ltr"] .search-form__chevron {
   left: auto;
   right: 1rem
}

[dir="ltr"] .search-form__date-icon {
   right: auto;
   left: 1rem
}

[dir="ltr"] .search-form__input {
   padding: 0.75rem 1rem 0.75rem 2.5rem
}

[dir="ltr"] .search-form__date-input {
   padding: 0.75rem 1rem 0.75rem 2.5rem
}

[dir="ltr"] .promo-banner__close {
   left: auto;
   right: .75rem
}

[dir="ltr"] .promo-banner__glow {
   right: auto;
   left: 0
}

[dir="ltr"] .route-picker__city {
   padding: .5rem .5rem .5rem 2.5rem
}

[dir="ltr"] .route-picker__city--to {
   padding: .5rem 2.5rem .5rem .5rem
}

[dir="ltr"] .route-picker__city-dot-hollow {
   right: auto;
   left: 1rem
}

[dir="ltr"] .route-picker__city-dot-filled {
   left: auto;
   right: 1rem
}

[dir="ltr"] .nav-link.active::after {
   right: auto;
   left: 0
}

[dir="ltr"] .step-item__text {
   text-align: left
}

[dir="ltr"] .step-item__number {
   right: auto;
   left: -.25rem
}

[dir="ltr"] .faq-item__answer {
   padding: .1rem 3.5rem 1.25rem 3.65rem
}

[dir="ltr"] .faq-item__question::after {
   margin-right: 0;
   margin-left: auto
}

[dir="ltr"] .trip-card__arrow {
   transform: none
}

[dir="ltr"] .trip-card:hover .trip-card__chevron {
   transform: translateX(4px)
}

[dir="ltr"] .route-timeline {
   padding-right: 0;
   padding-left: 1.25rem
}

[dir="ltr"] .route-timeline__line {
   right: auto;
   left: 5px
}

[dir="ltr"] .route-timeline__dot-hollow {
   right: auto;
   left: -20px
}

[dir="ltr"] .route-timeline__dot-filled {
   right: auto;
   left: -20px
}

[dir="ltr"] .mobile-menu__sidebar {
   right: auto;
   left: 0
}

/* ============================================
   USER MENU (Logged-in Header)
   ============================================ */
.user-menu {
   display: flex;
   align-items: center;
   gap: 8px
}

.user-menu__avatar {
   width: 36px;
   height: 36px;
   border-radius: var(--radius-full);
   background: var(--color-black);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-white);
   font-weight: 700;
   font-size: .85rem;
   flex-shrink: 0
}

.user-menu__info {
   display: flex;
   flex-direction: column
}

.user-menu__name {
   font-size: .85rem;
   font-weight: 700;
   color: var(--color-black);
   line-height: 1.2
}

.user-menu__links {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: .75rem
}

.user-menu__link {
   color: var(--color-gray-text);
   font-weight: 600;
   transition: color .15s
}

.user-menu__link:hover {
   color: var(--color-black)
}

.user-menu__link--danger {
   color: #ef4444
}

.user-menu__link--danger:hover {
   color: #dc2626
}

.user-menu__sep {
   width: 1px;
   height: 12px;
   background: var(--color-gray-border)
}

@media(max-width:47.9375rem) {
   .user-menu {
      display: none
   }
}

/* ============================================
   INFO PAGES (Cancel Policy, Help, About)
   ============================================ */
.info-page {
   padding: 2rem 1rem 4rem;
   background: linear-gradient(180deg, #fafbff 0%, #fff 40%)
}

.info-page__inner {
   max-width: 48rem;
   margin: 0 auto
}

.info-page__header {
   text-align: center;
   margin-bottom: 2.5rem
}

.info-page__icon {
   width: 4rem;
   height: 4rem;
   border-radius: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1rem
}

.info-page__icon--red {
   background: linear-gradient(135deg, #fef2f2, #fee2e2);
   color: #ef4444
}

.info-page__icon--blue {
   background: linear-gradient(135deg, #eff6ff, #dbeafe);
   color: #2563eb
}

.info-page__icon--purple {
   background: linear-gradient(135deg, #faf5ff, #f3e8ff);
   color: #9333ea
}

.info-page__icon svg {
   width: 2rem;
   height: 2rem
}

.info-page__title {
   font-size: 1.75rem;
   font-weight: 800;
   color: var(--color-black);
   margin-bottom: .5rem
}

.info-page__subtitle {
   color: var(--color-gray-text);
   font-size: .95rem;
   font-weight: 500;
   max-width: 32rem;
   margin: 0 auto
}

/* --- Cancel Policy Styles --- */
.policy-card {
   display: flex;
   align-items: flex-start;
   gap: 1.25rem;
   padding: 1.5rem;
   border-radius: 1rem;
   margin-bottom: 2rem
}

.policy-card--highlight {
   background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
   border: 1px solid #bbf7d0
}

.policy-card__icon-wrap {
   width: 3.5rem;
   height: 3.5rem;
   flex-shrink: 0;
   border-radius: .875rem;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #16a34a;
   box-shadow: 0 2px 8px rgba(22, 163, 74, .15)
}

.policy-card__title {
   font-size: 1.1rem;
   font-weight: 700;
   color: #15803d;
   margin-bottom: .375rem
}

.policy-card__desc {
   color: #166534;
   font-size: .9rem;
   line-height: 1.7;
   font-weight: 500
}

.policy-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
   margin-bottom: 2.5rem
}

.policy-item {
   background: var(--color-white);
   border: 1px solid var(--color-gray-border);
   border-radius: 1rem;
   padding: 1.5rem 1.25rem;
   text-align: center;
   transition: var(--transition)
}

.policy-item:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-2px)
}

.policy-item__icon {
   width: 3rem;
   height: 3rem;
   border-radius: .75rem;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1rem
}

.policy-item__icon svg {
   width: 1.5rem;
   height: 1.5rem
}

.policy-item__icon--green {
   background: #f0fdf4;
   color: #16a34a
}

.policy-item__icon--orange {
   background: #fff7ed;
   color: #ea580c
}

.policy-item__icon--red {
   background: #fef2f2;
   color: #ef4444
}

.policy-item__title {
   font-size: 1rem;
   font-weight: 700;
   color: var(--color-black);
   margin-bottom: .5rem
}

.policy-item__desc {
   font-size: .82rem;
   color: var(--color-gray-text);
   line-height: 1.7;
   font-weight: 500
}

/* Timeline */
.policy-timeline {
   background: var(--color-white);
   border: 1px solid var(--color-gray-border);
   border-radius: 1rem;
   padding: 2rem 1.5rem;
   margin-bottom: 2rem
}

.policy-timeline__title {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--color-black);
   margin-bottom: 2rem;
   text-align: center
}

.policy-timeline__track {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   position: relative;
   padding: 0 1rem
}

.policy-timeline__line {
   position: absolute;
   top: .75rem;
   left: 10%;
   right: 10%;
   height: 3px;
   background: linear-gradient(90deg, #22c55e 0%, #eab308 50%, #ef4444 100%);
   border-radius: 2px;
   z-index: 0
}

[dir="rtl"] .policy-timeline__line {
   background: linear-gradient(270deg, #22c55e 0%, #eab308 50%, #ef4444 100%)
}

.policy-timeline__step {
   position: relative;
   z-index: 1;
   text-align: center;
   flex: 1
}

.policy-timeline__dot {
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 50%;
   margin: 0 auto .75rem;
   border: 3px solid #fff;
   box-shadow: var(--shadow-md)
}

.policy-timeline__step--green .policy-timeline__dot {
   background: #22c55e
}

.policy-timeline__step--orange .policy-timeline__dot {
   background: #eab308
}

.policy-timeline__step--red .policy-timeline__dot {
   background: #ef4444
}

.policy-timeline__label {
   font-size: .8rem;
   font-weight: 700;
   color: var(--color-black);
   margin-bottom: .25rem
}

.policy-timeline__info {
   font-size: .72rem;
   color: var(--color-gray-text);
   font-weight: 500
}

/* Policy Notes */
.policy-notes {
   background: #fefce8;
   border: 1px solid #fde68a;
   border-radius: 1rem;
   padding: 1.5rem;
   margin-bottom: 2rem
}

.policy-notes__title {
   display: flex;
   align-items: center;
   gap: .5rem;
   font-size: 1rem;
   font-weight: 700;
   color: #92400e;
   margin-bottom: 1rem
}

.policy-notes__title svg {
   color: #d97706;
   flex-shrink: 0
}

.policy-notes__list {
   display: flex;
   flex-direction: column;
   gap: .75rem;
   list-style: none
}

.policy-notes__list li {
   position: relative;
   padding-right: 1.25rem;
   font-size: .85rem;
   color: #78350f;
   line-height: 1.7;
   font-weight: 500
}

[dir="ltr"] .policy-notes__list li {
   padding-right: 0;
   padding-left: 1.25rem
}

.policy-notes__list li::before {
   content: '';
   position: absolute;
   right: 0;
   top: .55rem;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #d97706
}

[dir="ltr"] .policy-notes__list li::before {
   right: auto;
   left: 0
}

/* Policy CTA */
.policy-cta {
   text-align: center;
   padding: 2rem 1.5rem;
   background: var(--color-white);
   border: 1px solid var(--color-gray-border);
   border-radius: 1rem
}

.policy-cta__text {
   font-size: 1rem;
   font-weight: 600;
   color: var(--color-black);
   margin-bottom: 1.25rem
}

.policy-cta__buttons {
   display: flex;
   gap: .75rem;
   justify-content: center;
   flex-wrap: wrap
}

.policy-cta__btn {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   padding: .75rem 1.5rem;
   border-radius: var(--radius-full);
   font-weight: 700;
   font-size: .9rem;
   transition: var(--transition);
   cursor: pointer
}

.policy-cta__btn--primary {
   background: var(--color-primary);
   color: var(--color-white);
   box-shadow: var(--shadow-lg)
}

.policy-cta__btn--primary:hover {
   background: var(--color-primary-hover);
   transform: translateY(-1px)
}

.policy-cta__btn--secondary {
   background: var(--color-gray-light);
   color: var(--color-black);
   border: 1px solid var(--color-gray-border)
}

.policy-cta__btn--secondary:hover {
   background: var(--color-zinc-200)
}

/* --- Help Page Styles --- */
.help-contacts {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
   margin-bottom: 2.5rem
}

.help-contact-card {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1.5rem;
   border-radius: 1rem;
   transition: var(--transition);
   cursor: pointer;
   text-decoration: none
}

.help-contact-card:hover {
   transform: translateY(-3px)
}

.help-contact-card--whatsapp {
   background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
   border: 1px solid #86efac
}

.help-contact-card--whatsapp:hover {
   box-shadow: 0 8px 24px rgba(34, 197, 94, .2)
}

.help-contact-card--whatsapp .help-contact-card__icon {
   color: #25d366
}

.help-contact-card--phone {
   background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
   border: 1px solid #93c5fd
}

.help-contact-card--phone:hover {
   box-shadow: 0 8px 24px rgba(37, 99, 235, .2)
}

.help-contact-card--phone .help-contact-card__icon {
   color: #2563eb
}

.help-contact-card__icon {
   width: 3.5rem;
   height: 3.5rem;
   flex-shrink: 0;
   border-radius: 1rem;
   background: rgba(255, 255, 255, .8);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-sm)
}

.help-contact-card__icon svg {
   width: 1.75rem;
   height: 1.75rem
}

.help-contact-card__info {
   display: flex;
   flex-direction: column;
   gap: .125rem
}

.help-contact-card__label {
   font-size: .8rem;
   font-weight: 600;
   color: var(--color-gray-text)
}

.help-contact-card__value {
   font-size: 1.1rem;
   font-weight: 800;
   color: var(--color-black);
   letter-spacing: .02em
}

.help-contact-card__action {
   font-size: .78rem;
   font-weight: 600;
   opacity: .7
}

/* Help Form */
.help-form-section {
   background: var(--color-white);
   border: 1px solid var(--color-gray-border);
   border-radius: 1rem;
   padding: 2rem 1.5rem;
   box-shadow: var(--shadow-sm)
}

.help-form-header {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   margin-bottom: 1.5rem
}

.help-form-header__icon {
   width: 2.75rem;
   height: 2.75rem;
   flex-shrink: 0;
   border-radius: .75rem;
   background: var(--color-zinc-100);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-black)
}

.help-form-header__icon svg {
   width: 1.25rem;
   height: 1.25rem
}

.help-form-header__title {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--color-black);
   margin-bottom: .25rem
}

.help-form-header__desc {
   font-size: .85rem;
   color: var(--color-gray-text);
   font-weight: 500
}

.help-message {
   display: flex;
   align-items: center;
   gap: .75rem;
   padding: 1rem 1.25rem;
   border-radius: .75rem;
   font-size: .9rem;
   font-weight: 600;
   margin-bottom: 1.5rem
}

.help-message--success {
   background: #f0fdf4;
   color: #166534;
   border: 1px solid #bbf7d0
}

.help-message--error {
   background: #fef2f2;
   color: #991b1b;
   border: 1px solid #fecaca
}

.help-message svg {
   flex-shrink: 0
}

.help-form {
   display: flex;
   flex-direction: column;
   gap: 1.25rem
}

.help-form__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem
}

.help-form__group {
   display: flex;
   flex-direction: column;
   gap: .5rem
}

.help-form__label {
   font-size: .85rem;
   font-weight: 700;
   color: var(--color-black)
}

.help-form__required {
   color: #ef4444
}

.help-form__input {
   width: 100%;
   padding: .75rem 1rem;
   border: 1px solid var(--color-gray-border);
   border-radius: .625rem;
   font-size: .9rem;
   font-weight: 500;
   background: var(--color-white);
   transition: var(--transition);
   outline: none
}

.help-form__input:focus {
   border-color: var(--color-black);
   box-shadow: 0 0 0 3px rgba(0, 0, 0, .08)
}

.help-form__select {
   cursor: pointer;
   appearance: auto
}

.help-form__textarea {
   resize: vertical;
   min-height: 120px;
   line-height: 1.7
}

.help-form__submit {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   padding: .875rem 1.5rem;
   background: var(--color-black);
   color: var(--color-white);
   border-radius: var(--radius-full);
   font-weight: 700;
   font-size: .95rem;
   cursor: pointer;
   transition: var(--transition);
   box-shadow: var(--shadow-lg)
}

.help-form__submit:hover {
   background: var(--color-zinc-800);
   transform: translateY(-1px)
}

.help-form__submit:active {
   scale: .98
}

/* --- About Page Styles --- */
.about-intro {
   background: var(--color-white);
   border: 1px solid var(--color-gray-border);
   border-radius: 1rem;
   padding: 2rem 1.5rem;
   margin-bottom: 2.5rem
}

.about-intro__heading {
   font-size: 1.2rem;
   font-weight: 700;
   color: var(--color-black);
   margin-bottom: .75rem
}

.about-intro__text {
   font-size: .95rem;
   color: var(--color-gray-text);
   line-height: 1.9;
   font-weight: 500
}

/* Services Grid */
.about-services {
   margin-bottom: 2.5rem
}

.about-services__title {
   font-size: 1.2rem;
   font-weight: 800;
   color: var(--color-black);
   text-align: center;
   margin-bottom: 1.5rem
}

.about-services__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem
}

.about-service-card {
   background: var(--color-white);
   border: 1px solid var(--color-gray-border);
   border-radius: 1rem;
   padding: 1.5rem 1.25rem;
   text-align: center;
   position: relative;
   transition: var(--transition)
}

.about-service-card:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-md)
}

.about-service-card__icon {
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1rem
}

.about-service-card__icon svg {
   width: 1.75rem;
   height: 1.75rem
}

.about-service-card__icon--blue {
   background: linear-gradient(135deg, #eff6ff, #dbeafe);
   color: #2563eb
}

.about-service-card__icon--green {
   background: linear-gradient(135deg, #f0fdf4, #dcfce7);
   color: #16a34a
}

.about-service-card__icon--purple {
   background: linear-gradient(135deg, #faf5ff, #f3e8ff);
   color: #9333ea
}

.about-service-card__title {
   font-size: 1rem;
   font-weight: 700;
   color: var(--color-black);
   margin-bottom: .5rem
}

.about-service-card__desc {
   font-size: .82rem;
   color: var(--color-gray-text);
   line-height: 1.7;
   font-weight: 500
}

.about-service-card__badge {
   position: absolute;
   top: .75rem;
   left: .75rem;
   background: var(--color-zinc-900);
   color: var(--color-white);
   font-size: .65rem;
   font-weight: 700;
   padding: .25rem .625rem;
   border-radius: var(--radius-full);
   letter-spacing: .05em
}

[dir="rtl"] .about-service-card__badge {
   left: auto;
   right: .75rem
}

/* Stats */
.about-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: .75rem;
   margin-bottom: 2.5rem
}

.about-stat {
   background: var(--color-black);
   color: var(--color-white);
   border-radius: 1rem;
   padding: 1.5rem 1rem;
   text-align: center;
   transition: var(--transition)
}

.about-stat:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-xl)
}

.about-stat__number {
   display: block;
   font-size: 1.75rem;
   font-weight: 900;
   letter-spacing: -.02em;
   margin-bottom: .25rem;
   background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, .7) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.about-stat__label {
   font-size: .78rem;
   font-weight: 600;
   opacity: .7
}

/* Why Section */
.about-why {
   margin-bottom: 2.5rem
}

.about-why__title {
   font-size: 1.2rem;
   font-weight: 800;
   color: var(--color-black);
   text-align: center;
   margin-bottom: 1.5rem
}

.about-why__grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem
}

.about-why-item {
   background: var(--color-white);
   border: 1px solid var(--color-gray-border);
   border-radius: 1rem;
   padding: 1.5rem;
   transition: var(--transition)
}

.about-why-item:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-2px)
}

.about-why-item__icon {
   width: 2.75rem;
   height: 2.75rem;
   border-radius: .75rem;
   background: var(--color-zinc-100);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: .875rem;
   color: var(--color-black)
}

.about-why-item__icon svg {
   width: 1.25rem;
   height: 1.25rem
}

.about-why-item__title {
   font-size: .95rem;
   font-weight: 700;
   color: var(--color-black);
   margin-bottom: .375rem
}

.about-why-item__desc {
   font-size: .82rem;
   color: var(--color-gray-text);
   line-height: 1.7;
   font-weight: 500
}

/* About CTA */
.about-cta {
   text-align: center;
   background: linear-gradient(135deg, var(--color-zinc-900) 0%, #1f2937 100%);
   color: var(--color-white);
   border-radius: 1.25rem;
   padding: 3rem 2rem;
   position: relative;
   overflow: hidden
}

.about-cta::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -25%;
   width: 50%;
   height: 200%;
   background: radial-gradient(circle, rgba(255, 255, 255, .05) 0%, transparent 70%);
   pointer-events: none
}

.about-cta__title {
   font-size: 1.5rem;
   font-weight: 800;
   margin-bottom: .5rem
}

.about-cta__desc {
   font-size: .9rem;
   font-weight: 500;
   opacity: .8;
   margin-bottom: 1.5rem
}

.about-cta__btn {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   padding: .875rem 2rem;
   background: var(--color-white);
   color: var(--color-black);
   border-radius: var(--radius-full);
   font-weight: 700;
   font-size: .95rem;
   transition: var(--transition);
   box-shadow: var(--shadow-lg)
}

.about-cta__btn:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-2xl)
}

.about-cta__btn:active {
   scale: .97
}

/* --- Info Pages Responsive --- */
@media(max-width:47.9375rem) {
   .info-page {
      padding: 1.5rem 1rem 3rem
   }

   .info-page__title {
      font-size: 1.35rem
   }

   .policy-grid {
      grid-template-columns: 1fr;
      gap: .75rem
   }

   .policy-timeline__track {
      flex-direction: column;
      align-items: stretch;
      padding: 0
   }

   .policy-timeline__line {
      top: 0;
      bottom: 0;
      left: .6875rem;
      right: auto;
      width: 3px;
      height: auto
   }

   [dir="rtl"] .policy-timeline__line {
      left: auto;
      right: .6875rem
   }

   .policy-timeline__step {
      display: flex;
      align-items: center;
      gap: 1rem;
      text-align: start;
      padding: .75rem 0
   }

   .policy-timeline__dot {
      margin: 0;
      flex-shrink: 0
   }

   .policy-timeline__label {
      font-size: .85rem
   }

   .policy-timeline__info {
      font-size: .78rem
   }

   .help-contacts {
      grid-template-columns: 1fr
   }

   .help-form__row {
      grid-template-columns: 1fr
   }

   .about-services__grid {
      grid-template-columns: 1fr
   }

   .about-stats {
      grid-template-columns: repeat(2, 1fr)
   }

   .about-why__grid {
      grid-template-columns: 1fr
   }

   .about-cta {
      padding: 2rem 1.5rem
   }

   .about-cta__title {
      font-size: 1.2rem
   }

   .policy-card {
      flex-direction: column;
      text-align: center
   }

   .policy-card__icon-wrap {
      margin: 0 auto
   }

   .help-contact-card {
      padding: 1.25rem
   }
}

/* =============================================
   ARABIC DATE PICKER
   ============================================= */
.adp {
   background: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 16px;
   box-shadow: 0 18px 50px rgba(0,0,0,.18);
   padding: 20px;
   width: 360px;
   max-width: calc(100vw - 2rem);
   font-family: inherit;
   user-select: none
}

.adp__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px
}

.adp__title {
   font-size: 18px;
   font-weight: 700;
   color: #111
}

.adp__nav {
   background: none;
   border: none;
   font-size: 22px;
   cursor: pointer;
   width: 36px;
   height: 36px;
   border-radius: 10px;
   color: #111;
   display: flex;
   align-items: center;
   justify-content: center
}

.adp__nav:hover {
   background: #f3f4f6
}

.adp__grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 6px;
   text-align: center
}

.adp__dayname {
   font-size: 13px;
   font-weight: 700;
   color: #9ca3af;
   padding: 8px 0
}

.adp__day {
   font-size: 16px;
   font-weight: 600;
   min-height: 40px;
   border-radius: 10px;
   cursor: pointer;
   color: #111;
   transition: background .1s;
   display: flex;
   align-items: center;
   justify-content: center
}

.adp__day:hover {
   background: #f3f4f6
}

.adp__day--other {
   color: #d1d5db;
   cursor: default
}

.adp__day--other:hover {
   background: transparent
}

.adp__day--disabled {
   color: #e5e7eb;
   cursor: default
}

.adp__day--disabled:hover {
   background: transparent
}

.adp__day--today {
   color: var(--color-black);
   border: 1px solid var(--color-black)
}

.adp__day--selected {
   background: var(--color-black) !important;
   color: #fff !important
}

@media (max-width: 480px) {
   .adp {
      width: calc(100vw - 1.5rem);
      padding: 16px
   }

   .adp__grid {
      gap: 4px
   }

   .adp__day {
      min-height: 38px;
      font-size: 15px
   }
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb {
   display: flex;
   align-items: center;
   gap: .375rem;
   font-size: .75rem;
   font-weight: 500;
   margin-bottom: .5rem;
   color: var(--color-gray-text)
}

.breadcrumb a {
   color: var(--color-gray-text);
   opacity: .7;
   transition: var(--transition)
}

.breadcrumb a:hover {
   opacity: 1;
   color: var(--color-black)
}

.breadcrumb__sep {
   opacity: .35;
   font-size: .625rem
}

.breadcrumb__current {
   color: var(--color-gray-text);
   opacity: .9
}

/* ============================================
   ROUTE - HOW TO BOOK STEPS
   ============================================ */
.route-steps-section {
   position: relative;
   padding: 3.5rem 1rem;
   overflow: hidden;
   background:
      radial-gradient(circle at 90% 0, rgba(80, 170, 102, .1), transparent 25rem),
      linear-gradient(180deg, #f8fcf9 0%, #ffffff 100%);
   border-top: 1px solid rgba(80, 170, 102, .14);
   border-bottom: 1px solid rgba(6, 41, 99, .08)
}

.route-steps-section::after {
   content: "";
   position: absolute;
   left: -7rem;
   bottom: -8rem;
   width: 15rem;
   height: 15rem;
   border: 2.5rem solid rgba(6, 41, 99, .025);
   border-radius: var(--radius-full);
   pointer-events: none
}

.route-steps-section__inner {
   position: relative;
   z-index: 1;
   max-width: 64rem;
   margin: 0 auto
}

.route-steps-layout {
   display: grid;
   gap: 2rem;
   align-items: stretch
}

.route-steps-content {
   min-width: 0
}

.route-steps-visual {
   overflow: hidden;
   min-height: 18rem;
   margin: 0;
   border-radius: var(--radius-2xl);
   border: 1px solid rgba(6, 41, 99, .1);
   background: var(--color-white);
   box-shadow: 0 16px 38px rgba(6, 41, 99, .1)
}

.route-steps-visual img {
   display: block;
   width: 100%;
   height: 100%;
   min-height: 18rem;
   object-fit: cover
}

.route-steps-header {
   display: flex;
   align-items: center;
   gap: 1rem;
   max-width: 38rem;
   margin-bottom: 2rem
}

.route-steps-header__icon {
   width: 3.5rem;
   height: 3.5rem;
   background: var(--color-brand-navy);
   border-radius: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   box-shadow: 0 10px 22px rgba(6, 41, 99, .16)
}

.route-steps-header__icon svg {
   width: 1.5rem;
   height: 1.5rem;
   color: var(--color-white)
}

.route-steps-header__text {
   min-width: 0
}

.route-steps-header__eyebrow {
   display: block;
   margin-bottom: .15rem;
   color: var(--color-primary-hover);
   font-size: .7rem;
   font-weight: 800
}

.route-steps-header h2 {
   color: var(--color-brand-navy);
   font-size: 1.45rem;
   line-height: 1.4;
   font-weight: 800;
   letter-spacing: -.035em
}

.route-steps-header p {
   margin-top: .25rem;
   color: var(--color-gray-text);
   font-size: .75rem;
   line-height: 1.7;
   font-weight: 500
}

.route-steps-grid {
   display: flex;
   flex-direction: column;
   gap: 0;
   position: relative
}

.route-step {
   position: relative;
   z-index: 1;
   overflow: hidden;
   display: flex;
   gap: 1rem;
   align-items: center;
   min-height: 7.5rem;
   padding: 1.25rem;
   background: var(--color-white);
   border: 1px solid rgba(6, 41, 99, .1);
   border-radius: var(--radius-2xl);
   transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
   box-shadow: 0 10px 28px rgba(6, 41, 99, .055)
}

.route-step::after {
   content: "";
   position: absolute;
   inset: 0 0 0 auto;
   width: 4px;
   background: var(--color-primary);
   transform: scaleY(0);
   transform-origin: bottom;
   transition: transform .25s ease
}

.route-step:hover {
   border-color: rgba(80, 170, 102, .42);
   box-shadow: 0 16px 34px rgba(6, 41, 99, .09);
   transform: translateY(-3px)
}

.route-step:hover::after {
   transform: scaleY(1)
}

.route-step__number {
   width: 2.25rem;
   height: 2.25rem;
   min-width: 2.25rem;
   background: var(--color-brand-navy);
   color: var(--color-white);
   border-radius: var(--radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   font-size: .875rem;
   box-shadow: 0 5px 12px rgba(6, 41, 99, .18)
}

.route-step__content {
   flex: 1;
   min-width: 0
}

.route-step__icon {
   display: none
}

.route-step__content h3 {
   margin-bottom: .25rem;
   color: var(--color-brand-navy);
   font-size: .95rem;
   font-weight: 800
}

.route-step__content p {
   font-size: .76rem;
   color: var(--color-gray-text);
   line-height: 1.75;
   font-weight: 500
}

.route-step__connector {
   display: flex;
   justify-content: center;
   padding: 0 2.1rem 0 0
}

.route-step__connector-line {
   width: 2px;
   height: 1.5rem;
   background: repeating-linear-gradient(
      to bottom,
      rgba(80, 170, 102, .5) 0,
      rgba(80, 170, 102, .5) 5px,
      transparent 5px,
      transparent 9px
   )
}

/* Desktop: horizontal layout */
@media (min-width: 768px) {
   .route-steps-grid {
      flex-direction: row;
      align-items: stretch;
      gap: 0
   }

   .route-step {
      flex: 1;
      flex-direction: column;
      align-items: center;
      text-align: center;
      min-height: 15rem;
      padding: 1.75rem 1.4rem
   }

   .route-step__number {
      width: 2.75rem;
      height: 2.75rem;
      min-width: 2.75rem;
      font-size: 1rem;
      margin-top: 0;
      margin-bottom: .9rem
   }

   .route-step__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3rem;
      height: 3rem;
      background: rgba(80, 170, 102, .12);
      border-radius: .9rem;
      margin: 0 auto .85rem;
      transition: background .25s ease, transform .25s ease
   }

   .route-step__icon svg {
      width: 1.35rem;
      height: 1.35rem;
      color: var(--color-primary-hover);
      transition: color .25s ease
   }

   .route-step:hover .route-step__icon {
      background: var(--color-primary);
      transform: scale(1.05)
   }

   .route-step:hover .route-step__icon svg {
      color: var(--color-white)
   }

   .route-step__connector {
      display: flex;
      align-items: center;
      padding: 0
   }

   .route-step__connector-line {
      width: 2.25rem;
      height: 2px;
      background: repeating-linear-gradient(
         to left,
         rgba(80, 170, 102, .5) 0,
         rgba(80, 170, 102, .5) 5px,
         transparent 5px,
         transparent 9px
      )
   }
}

@media (min-width: 1024px) {
   .route-steps-layout--with-image {
      grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
      gap: 2.25rem
   }

   .route-steps-layout--with-image .route-steps-header {
      margin-bottom: 1.5rem
   }

   .route-steps-layout--with-image .route-steps-grid {
      flex-direction: column
   }

   .route-steps-layout--with-image .route-step {
      flex-direction: row;
      align-items: center;
      text-align: right;
      min-height: 7rem;
      padding: 1.15rem
   }

   .route-steps-layout--with-image .route-step__number {
      width: 2.35rem;
      height: 2.35rem;
      min-width: 2.35rem;
      margin: 0
   }

   .route-steps-layout--with-image .route-step__icon {
      display: none
   }

   .route-steps-layout--with-image .route-step__connector {
      justify-content: center;
      padding: 0 2.1rem 0 0
   }

   .route-steps-layout--with-image .route-step__connector-line {
      width: 2px;
      height: 1.25rem;
      background: repeating-linear-gradient(
         to bottom,
         rgba(80, 170, 102, .5) 0,
         rgba(80, 170, 102, .5) 5px,
         transparent 5px,
         transparent 9px
      )
   }

   .route-steps-layout--with-image .route-steps-visual,
   .route-steps-layout--with-image .route-steps-visual img {
      min-height: 100%
   }
}

/* Final primary action override */
.btn--signup,
.search-form__submit,
.route-picker__search,
.btn--book,
.search-placeholder__btn,
.btn--confirm,
.help-form__submit,
.policy-cta__btn--primary {
   background: var(--color-primary);
}

.btn--signup:hover,
.search-form__submit:hover,
.route-picker__search:hover,
.btn--book:hover,
.search-placeholder__btn:hover,
.help-form__submit:hover,
.policy-cta__btn--primary:hover {
   background: var(--color-primary-hover);
}

/* Mobile header spacing fix */
@media (max-width: 767px) {
   .site-header {
      height: 64px;
      min-height: 48px;
      padding-top: 0;
      padding-bottom: 0;
      align-items: center;
      position: relative;
      top: auto;
   }

   .site-header__left,
   .site-header__right {
      height: 100%;
      align-items: center;
   }

   .site-header .logo,
   .site-header .btn,
   .site-header .menu-toggle {
      line-height: 1;
   }

   .site-header .logo__img {
      height: 31px;
      max-height: 31px;
      max-width: 11.5rem;
   }

   .site-header .btn--login,
   .site-header .btn--signup {
      padding: .35rem;
   }

   .site-header .btn--login svg,
   .site-header .btn--signup svg {
      width: 1.1rem;
      height: 1.1rem;
   }

   .site-header .menu-toggle {
      width: 1.25rem;
      height: 1.25rem;
      margin-right: 0;
   }

   .page__main > .hero-section:first-child {
      padding-top: .5rem;
   }
}