/* SkyLink polish layer — refines shared components without changing brand colors or layout.
   Loaded after skylink.css. Remove its <link> in includes/header.php to revert.
   Selectors start with `html` so they win over the Tailwind CDN styles injected later at runtime,
   while single Tailwind utility classes on an element still win over plain element rules. */

/* ---------- Global details ---------- */
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
html body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html ::selection { background: rgba(56, 197, 181, .28); color: var(--skylink-primary-dark); }

html h1, html h2, html h3, html h4 { letter-spacing: -0.012em; text-wrap: balance; }
html p { text-wrap: pretty; }

/* Prices and numbers line up neatly */
html [class*="price"], html [class*="amount"], html [class*="total"] { font-variant-numeric: tabular-nums; }

/* Slim brand scrollbars */
html { scrollbar-width: thin; scrollbar-color: rgba(0, 98, 114, .35) transparent; }
html ::-webkit-scrollbar { width: 10px; height: 10px; }
html ::-webkit-scrollbar-track { background: transparent; }
html ::-webkit-scrollbar-thumb { background: rgba(0, 98, 114, .28); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
html ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 98, 114, .5); }

/* Visible, consistent keyboard focus everywhere */
html :focus-visible { outline: 2px solid var(--skylink-teal); outline-offset: 2px; }
html .btn:focus-visible, html a:focus-visible, html button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 197, 181, .45);
}

/* ---------- Buttons ---------- */
html .btn {
  font-weight: 600;
  letter-spacing: .005em;
  transition: background-color var(--skylink-transition-fast), border-color var(--skylink-transition-fast),
              color var(--skylink-transition-fast), box-shadow var(--skylink-transition-normal),
              transform var(--skylink-transition-fast);
}
html .btn:not(.white):not(.light):not(.outline):not(.ghost):hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 98, 114, .22);
}
html .btn:active:not(:disabled) { transform: translateY(0) scale(.98); box-shadow: var(--skylink-shadow-sm); }
html .btn.white:hover:not(:disabled), html .btn.outline:hover:not(:disabled) {
  border-color: rgba(56, 197, 181, .6);
  color: var(--skylink-primary);
}
html .btn-accent:hover:not(:disabled) { box-shadow: 0 8px 20px rgba(240, 83, 74, .28); }

/* The dropdown button still used default Tailwind blue */
html .btn-dropdown:not(.outline) { background-color: var(--skylink-primary); }
html .btn-dropdown:not(.outline):hover { background-color: var(--skylink-primary-dark); }
html .btn-dropdown:focus-visible { box-shadow: 0 0 0 3px rgba(56, 197, 181, .45); }

/* ---------- Cards ---------- */
html .card, html .hotel-card, html .flight-card { border-color: var(--skylink-border); }
html .card { box-shadow: var(--skylink-shadow-sm); }

/* Result and featured cards lift slightly on hover (forms and booking boxes stay still) */
html .hotel-card-animate .card, html .tour-card-animate .card, html .umrah-card-animate .card,
html .car-card-animate .card, html .hotel-card, html .flight-card, html .card.hover\:shadow-lg {
  transition: transform var(--skylink-transition-normal), box-shadow var(--skylink-transition-normal), border-color var(--skylink-transition-normal);
}
html .hotel-card-animate .card:hover, html .tour-card-animate .card:hover, html .umrah-card-animate .card:hover,
html .car-card-animate .card:hover, html .hotel-card:hover, html .flight-card:hover, html .card.hover\:shadow-lg:hover {
  transform: translateY(-2px);
  box-shadow: var(--skylink-shadow-md);
  border-color: rgba(56, 197, 181, .55);
}

/* Gentle image zoom inside hoverable cards */
html .hotel-card-animate .card img, html .tour-card-animate .card img, html .umrah-card-animate .card img,
html .car-card-animate .card img, html .hotel-card img, html .card.hover\:shadow-lg img {
  transition: transform 600ms cubic-bezier(.2, .7, .2, 1);
}
html .hotel-card-animate .card:hover img, html .tour-card-animate .card:hover img, html .umrah-card-animate .card:hover img,
html .hotel-card:hover img, html .card.hover\:shadow-lg:hover img { transform: scale(1.04); }
html .car-card-animate .card:hover img { transform: scale(1.02); }

/* ---------- Inputs, selects, search fields ---------- */
html .input, html .select, html .textarea,
html input[type="text"], html input[type="email"], html input[type="tel"], html input[type="number"],
html input[type="password"], html input[type="search"], html input[type="date"], html select, html textarea {
  transition: border-color var(--skylink-transition-fast), box-shadow var(--skylink-transition-fast), background-color var(--skylink-transition-fast);
}
html .input:focus, html .select:focus, html .textarea:focus,
html input[type="text"]:focus, html input[type="email"]:focus, html input[type="tel"]:focus, html input[type="number"]:focus,
html input[type="password"]:focus, html input[type="search"]:focus, html input[type="date"]:focus, html select:focus, html textarea:focus {
  border-color: var(--skylink-teal);
  box-shadow: 0 0 0 3px rgba(56, 197, 181, .22);
  outline: none;
}
html ::placeholder { color: #7f9296; opacity: 1; }

html .field-box { transition: border-color var(--skylink-transition-fast), box-shadow var(--skylink-transition-fast), background-color var(--skylink-transition-fast); }
html .field-box:hover { border-color: rgba(56, 197, 181, .55); }
html .field-box:focus-within { border-color: var(--skylink-teal); box-shadow: 0 0 0 3px rgba(56, 197, 181, .2); }

/* Checkboxes and radios in brand color */
html input[type="checkbox"], html input[type="radio"] { accent-color: var(--skylink-primary); }

/* ---------- Badges & alerts ---------- */
html [class*="badge-"] { border-radius: 999px; font-weight: 600; letter-spacing: .01em; }
html .alert-success, html .alert-error, html .alert-warning, html .alert-info { border-radius: var(--skylink-radius-md); }

/* ---------- Section rhythm ---------- */
html .section-header { margin-bottom: 1.5rem; }
html .section-header h2 { color: var(--skylink-text); font-weight: 700; }
html .section-header p { color: var(--skylink-text-secondary); }

/* ---------- Skeleton loaders: soft shimmer instead of a plain pulse ---------- */
@keyframes skylink-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
html .animate-pulse [class*="bg-gray-200"], html .animate-pulse[class*="bg-gray-200"],
html .animate-pulse [class*="bg-gray-100"], html .animate-pulse[class*="bg-gray-100"],
html .animate-pulse [class*="bg-slate-200"], html .animate-pulse[class*="bg-slate-200"] {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 800px 100%;
  background-repeat: no-repeat;
  animation: skylink-shimmer 1.4s linear infinite;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html *, html *::before, html *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html .animate-spin { animation-duration: 1s !important; animation-iteration-count: infinite !important; }
  html .btn:hover, html .card:hover, html .hotel-card:hover, html .flight-card:hover, html .card:hover img { transform: none !important; }
}

/* =====================================================================
   HOMEPAGE SEARCH CARD — glassy panel, clearer tabs, friendlier fields.
   Keeps the existing dark-teal card, orange active tab and orange button.
   ===================================================================== */

/* Hero intro: eyebrow becomes a small glass pill */
html .hero .skylink-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .32rem .8rem;
  border: 1px solid rgba(188, 232, 228, .28);
  border-radius: 999px;
  background: rgba(0, 45, 56, .38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html .hero .skylink-slogan { text-shadow: 0 2px 14px rgba(0, 0, 0, .25); }

/* Card: frosted glass. The blur sits on a pseudo-element so fixed-position
   dropdowns inside the card keep positioning against the viewport. */
html .hero .skylink-search-card {
  background: linear-gradient(180deg, rgba(10, 70, 79, .86) 0%, rgba(6, 50, 58, .90) 100%);
  border-color: rgba(120, 190, 182, .32);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0, 20, 26, .38), inset 0 1px 0 rgba(255, 255, 255, .09);
}
html .hero .skylink-search-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  pointer-events: none;
}

/* Tabs */
html .hero .skylink-search-card nav[role="tablist"] { padding: 12px 14px 10px; }
html .hero .skylink-search-card .skylink-service-tabs { gap: 6px; }
html .hero .skylink-search-card [role="tab"] {
  position: relative;
  border-radius: 12px;
  color: #CFE6E3;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 220ms ease, transform 180ms ease;
}
html .hero .skylink-search-card [role="tab"]:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .09);
}
html .hero .skylink-search-card [role="tab"][aria-selected="true"],
html .hero .skylink-search-card [role="tab"].active {
  background: var(--skylink-orange);
  color: var(--skylink-primary-dark) !important;
  box-shadow: 0 8px 18px rgba(255, 159, 28, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html .hero .skylink-search-card [role="tab"][aria-selected="true"] > span:last-child { font-weight: 700; }
html .hero .skylink-search-card [role="tab"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #073B43, 0 0 0 4px var(--skylink-teal);
}

/* Inner form area */
html .hero .skylink-search-card > [x-ref="panels"] {
  border-color: rgba(120, 190, 182, .28);
  border-radius: 14px;
  background: rgba(16, 70, 77, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
@media (min-width: 768px) {
  html .hero .skylink-search-card [role="tabpanel"] > .w-full { padding: 16px; }
}

/* Fields: clear label, brand-colored icon, white + teal ring while in use */
html .hero .skylink-search-card .field-box,
html .hero .skylink-search-card [id$="_trigger"] {
  border-radius: 12px;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 200ms ease;
}
html .hero .skylink-search-card .field-box:hover,
html .hero .skylink-search-card [id$="_trigger"]:hover {
  box-shadow: 0 4px 14px rgba(0, 25, 30, .18);
}
html .hero .skylink-search-card .field-box:focus-within,
html .hero .skylink-search-card [id$="_trigger"]:focus-within,
html .hero .skylink-search-card [id$="_trigger"][class*="border-[#1570ef]"] {
  background: #FFFFFF;
  border-color: var(--skylink-teal) !important;
  box-shadow: 0 0 0 3px rgba(56, 197, 181, .35);
}
html .hero .skylink-search-card [id$="_trigger"] > svg:first-child,
html .hero .skylink-search-card .field-box-icon { color: var(--skylink-primary); }
html .hero .skylink-search-card [id$="_trigger"] [class~="text-[11px]"],
html .hero .skylink-search-card .field-box-label {
  font-weight: 600;
  letter-spacing: .01em;
  color: #3B5A61;
}

/* Search button: the hover state was missing */
html .hero .skylink-search-card button[type="submit"],
html .hero .skylink-search-card input[type="submit"],
html .hero .skylink-search-card form button.btn:not([type]) {
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(255, 159, 28, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: background-color 160ms ease, box-shadow 220ms ease, transform 160ms ease;
}
html .hero .skylink-search-card button[type="submit"]:hover:not(:disabled),
html .hero .skylink-search-card input[type="submit"]:hover:not(:disabled),
html .hero .skylink-search-card form button.btn:not([type]):hover:not(:disabled) {
  background: #FFB347 !important;
  border-color: #FFB347 !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(255, 159, 28, .40), inset 0 1px 0 rgba(255, 255, 255, .4);
}
html .hero .skylink-search-card button[type="submit"]:active:not(:disabled),
html .hero .skylink-search-card input[type="submit"]:active:not(:disabled) {
  transform: translateY(0) scale(.98);
}
html .hero .skylink-search-card button[type="submit"]:focus-visible,
html .hero .skylink-search-card input[type="submit"]:focus-visible {
  box-shadow: 0 0 0 2px #073B43, 0 0 0 4px #FFD08A;
}

/* Supplier logos under the form */
html .hero .skylink-search-card .skylink-supplier-strip {
  padding: 8px 14px 10px;
  border-top: 1px solid rgba(120, 190, 182, .18);
}
/* Transparent logos in brand colors (dark text made white for the dark card), fully bright */
html .skylink-search-card .skylink-supplier-track { gap: 22px; }
html .skylink-search-card .skylink-supplier-item {
  flex: 0 0 auto;
  height: 30px;
  padding: 0;
  background: transparent;
  transition: transform 180ms ease;
}
html .skylink-search-card .skylink-supplier-item:hover { transform: translateY(-1px); }
html .skylink-search-card .skylink-supplier-logo {
  width: auto;
  max-width: 104px;
  height: 20px;
  opacity: 1;
  filter: none;
}

/* Search dropdowns and forms (home + listing pages): default blue -> brand teal */
html .border-\[\#1570ef\], html .hover\:border-\[\#1570ef\]:hover,
html .focus\:border-\[\#1570ef\]:focus, html .focus-within\:border-\[\#1570ef\]:focus-within { border-color: var(--skylink-teal); }
html .text-\[\#1570ef\], html .text-\[\#175cd3\] { color: var(--skylink-primary); }
html .ring-\[\#1570ef\], html .focus\:ring-\[\#1570ef\]:focus { --tw-ring-color: var(--skylink-teal); }
html .bg-\[\#eff8ff\] { background-color: rgba(56, 197, 181, .12); }
html .hover\:bg-\[\#d1e9ff\]:hover { background-color: rgba(56, 197, 181, .2); }
@media (min-width: 1024px) {
  html [id$="_panel"][class*="rounded-b-lg"] { border-radius: 0 0 14px 14px; }
  html [id$="_panel"].shadow-xl[class*="rounded-b-lg"] { box-shadow: 0 22px 48px rgba(0, 45, 56, .2); }
}

@media (max-width: 767px) {
  html .hero .skylink-search-card { border-radius: 18px; }
  html .hero .skylink-search-card nav[role="tablist"] { padding: 10px 10px 8px; }
}

/* skylink.qa teal: #38C5B5, hover #2DA194 */
html a.text-secondary:hover, html a.text-skylink-teal:hover, html a.text-brand-light:hover { color: var(--skylink-teal-hover); }
html .bg-secondary:hover:is(a, button), html .bg-skylink-teal:hover:is(a, button) { background-color: var(--skylink-teal-hover); }

/* =====================================================================
   SEARCH BOXES v2 — white fields on the dark card, clear labels,
   light placeholders, translucent option controls, tidy swap button.
   ===================================================================== */
html .hero .skylink-search-card {
  --skylink-search-field: #FFFFFF;
  --skylink-search-field-hover: #F3FAF9;
  --sl-field-label: #5F777C;
  --sl-field-value: #0E2D34;
  --sl-field-placeholder: #8A9CA0;
}

/* Panel: no empty band under the fields once a form has loaded */
@media (min-width: 768px) {
  html .hero .skylink-search-card [role="tabpanel"] > .w-full { min-height: 88px; }
}

/* Field boxes */
html .hero .skylink-search-card .field-box,
html .hero .skylink-search-card [id$="_trigger"],
html .hero .skylink-search-card [role="tabpanel"] [class~="h-[58px]"].cursor-pointer {
  background: #FFFFFF;
  border: 1px solid transparent !important;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 20, 26, .18);
}
html .hero .skylink-search-card .field-box:hover,
html .hero .skylink-search-card [id$="_trigger"]:hover,
html .hero .skylink-search-card [role="tabpanel"] [class~="h-[58px]"].cursor-pointer:hover {
  background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(56, 197, 181, .55), 0 6px 16px rgba(0, 20, 26, .22);
}
html .hero .skylink-search-card .field-box:focus-within,
html .hero .skylink-search-card [id$="_trigger"]:focus-within,
html .hero .skylink-search-card [id$="_trigger"][class*="border-[#1570ef]"] {
  border-color: var(--skylink-teal) !important;
  box-shadow: 0 0 0 3px rgba(56, 197, 181, .55);
}
/* Disabled field (e.g. ferry arrival before a departure is chosen) */
html .hero .skylink-search-card [id$="_trigger"][class*="opacity-"],
html .hero .skylink-search-card [id$="_trigger"][class*="cursor-not-allowed"] {
  background: rgba(255, 255, 255, .55);
  box-shadow: none;
}

/* Label / value / placeholder */
html .hero .skylink-search-card .field-box-label,
html .hero .skylink-search-card [id$="_trigger"] [class~="text-[11px]"],
html .hero .skylink-search-card [class~="h-[58px]"] [class~="text-[11px]"] {
  color: var(--sl-field-label) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
html[dir="rtl"] .hero .skylink-search-card .field-box-label,
html[dir="rtl"] .hero .skylink-search-card [class~="text-[11px]"] { letter-spacing: 0; }
html .hero .skylink-search-card .field-box-input,
html .hero .skylink-search-card .field-box-value,
html .hero .skylink-search-card [id$="_trigger"] [class~="text-[14px]"],
html .hero .skylink-search-card [class~="h-[58px]"] [class~="text-[14px]"] {
  color: var(--sl-field-value);
  font-size: 15px;
  font-weight: 600;
}
html .hero .skylink-search-card input::placeholder { color: var(--sl-field-placeholder) !important; font-weight: 500; }
html .hero .skylink-search-card .field-box [class~="text-[#98a2b3]"],
html .hero .skylink-search-card .field-box [class~="text-gray-400"],
html .hero .skylink-search-card [id$="_trigger"] [class~="text-[#98a2b3]"],
html .hero .skylink-search-card [id$="_trigger"] [class~="text-gray-400"],
html .hero .skylink-search-card [class~="h-[58px]"] [class~="text-[#98a2b3]"] {
  color: var(--sl-field-placeholder) !important;
  font-weight: 500;
}

/* Leading icons in brand teal, chevrons soft */
html .hero .skylink-search-card [id$="_trigger"] > .material-symbols-outlined:first-child,
html .hero .skylink-search-card [id$="_trigger"] > svg:first-child,
html .hero .skylink-search-card [class~="h-[58px]"] > .material-symbols-outlined:first-child,
html .hero .skylink-search-card [class~="h-[58px]"] > svg:first-child,
html .hero .skylink-search-card .field-box-icon,
html .hero .skylink-search-card .field-box .material-symbols-outlined:first-child {
  color: var(--skylink-primary) !important;
}
html .hero .skylink-search-card [id$="_trigger"] > .material-symbols-outlined:last-child,
html .hero .skylink-search-card [class~="h-[58px]"] > .material-symbols-outlined:last-child { color: #8A9CA0 !important; }

/* Swap button between two fields: white circle, sits cleanly in the gap */
html .hero .skylink-search-card button[class*="-right-5"] {
  width: 34px;
  height: 34px;
  border: 2px solid var(--skylink-teal) !important;
  background: #FFFFFF !important;
  color: var(--skylink-primary);
  box-shadow: 0 4px 10px rgba(0, 20, 26, .25);
  transition: transform 250ms ease, background-color 160ms ease;
}
html .hero .skylink-search-card button[class*="-right-5"]:hover { transform: rotate(180deg); background: #F3FAF9 !important; }
@media (min-width: 1024px) {
html .hero .skylink-search-card .relative:has(> button[class*="-right-5"]) > [id$="_trigger"],
html .hero .skylink-search-card .relative:has(> button[class*="-right-5"]) > [class~="h-[58px]"] { padding-inline-end: 30px; }
html .hero .skylink-search-card .relative:has(> button[class*="-right-5"]) + .relative [id$="_trigger"],
html .hero .skylink-search-card .relative:has(> button[class*="-right-5"]) + .relative [class~="h-[58px]"] { padding-inline-start: 3.4rem; }
html .hero .skylink-search-card .relative:has(> button[class*="-right-5"]) + .relative [id$="_trigger"] > :first-child,
html .hero .skylink-search-card .relative:has(> button[class*="-right-5"]) + .relative [class~="h-[58px]"] > :first-child { inset-inline-start: 1.45rem; }
}

/* Trip-type switch (One Way / Round Trip / …): translucent pill, white active option */
html .hero .skylink-search-card .bg-\[\#f2f4f7\].rounded-md.p-1 {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 4px;
}
html .hero .skylink-search-card .bg-\[\#f2f4f7\].rounded-md.p-1 > button {
  border-radius: 9px;
  color: #CFE6E3 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
}
html .hero .skylink-search-card .bg-\[\#f2f4f7\].rounded-md.p-1 > button:hover { color: #FFFFFF !important; background: rgba(255, 255, 255, .08) !important; }
html .hero .skylink-search-card .bg-\[\#f2f4f7\].rounded-md.p-1 > button.bg-white {
  background: #FFFFFF !important;
  color: var(--skylink-primary-dark) !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 20, 26, .25);
}

/* Option buttons (Economy, Vehicles, Pets, Bonus, …): same translucent look */
html .hero .skylink-search-card .skylink-ferry-option,
html .hero .skylink-search-card .skylink-search-option,
html .hero .skylink-search-card button[class~="h-[42px]"][class~="bg-white"] {
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08) !important;
  color: #E3F1EF !important;
  box-shadow: none;
}
html .hero .skylink-search-card .skylink-ferry-option:hover,
html .hero .skylink-search-card .skylink-search-option:hover,
html .hero .skylink-search-card button[class~="h-[42px]"][class~="bg-white"]:hover {
  background: rgba(255, 255, 255, .14) !important;
  border-color: rgba(255, 255, 255, .3) !important;
}
html .hero .skylink-search-card .skylink-ferry-option *,
html .hero .skylink-search-card .skylink-search-option *,
html .hero .skylink-search-card button[class~="h-[42px]"][class~="bg-white"] * { color: inherit !important; }

/* Search button keeps its size with the taller white fields */
html .hero .skylink-search-card button[type="submit"],
html .hero .skylink-search-card form button.btn:not([type]) { border-radius: 12px; }

/* Supplier strip: logos fade in and out at the edges instead of being cut */
html .hero .skylink-search-card .skylink-supplier-track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
html .hero .skylink-search-card .field-box-label,
html .hero .skylink-search-card [id$="_trigger"] [class~="text-[11px]"],
html .hero .skylink-search-card [class~="h-[58px]"] [class~="text-[11px]"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Header "Support" link: follows the header's link color (dark on the white header,
   white on the transparent header over the hero) instead of always white. */
html header .skylink-support-link { color: var(--header-link-color, var(--skylink-primary-dark)); }
html header .skylink-support-link:hover { color: var(--header-link-hover-color, var(--skylink-primary)); background: rgba(0, 98, 114, .08); }
html header .skylink-support-sep { color: var(--header-link-color, var(--skylink-primary-dark)); opacity: .35; }
/* Mobile menu panel is always light */
html header .skylink-support-link--mobile { color: var(--skylink-primary-dark); border-color: var(--skylink-border); }
html header .skylink-support-link--mobile:hover { color: var(--skylink-primary); background: rgba(0, 98, 114, .06); }
html header [x-show="mobileMenuOpen"] .skylink-support-sep { color: var(--skylink-primary-dark); }

/* RTL: header dropdowns that open "to the right" would hang off the left edge
   (buttons sit on the left in Arabic) and make the page scroll sideways. */
html[dir="rtl"] header .absolute.top-full.right-0 { right: auto; left: 0; }

/* ---------- Search box alignment fixes ---------- */
/* Grid boxes may shrink below their text width, so a row never pushes the
   search button outside the panel (e.g. Tours at 1024px). Text ellipsizes instead. */
html .hero .skylink-search-card [id^="search-panel-"] form .grid > * { min-width: 0; }

/* RTL: icons sit on the right (start) of every trigger box, padding mirrored */
html[dir="rtl"] form [class~="pl-11"] { padding-left: 1rem; padding-right: 2.75rem; }
html[dir="rtl"] form [class~="pl-11"] > [class~="left-3"].absolute { left: auto; right: .75rem; }

/* RTL: swap button sits between "From" and "To" (the From box's left edge) */
html[dir="rtl"] form button[class*="-right-5"] { right: auto; left: -1.25rem; }

/* RTL: dropdowns anchored "right-0" would hang off the left edge and make the
   panel/page scroll sideways (ferry Vehicles / Pets / Bonus pills) */
html[dir="rtl"] .input-dropdown-content.right-0 { right: auto; left: 0; }

/* RTL: dates/times are left-to-right text; keep them whole and right-aligned instead of
   truncated at the start ("…7, 2026") */
html[dir="rtl"] form input.field-box-input { direction: ltr; text-align: right; unicode-bidi: plaintext; }
/* RTL: the generic "[dir=rtl] .field-box" padding must not apply to split date/time boxes
   (their segments carry their own padding) — it squeezed dates into "…7, 2026" */
html[dir="rtl"] .field-box.field-box-split { padding-left: 0; padding-right: 0; }

/* Phones: trip-type switch fills the row, one line per option */
@media (max-width: 640px) {
  html .hero .skylink-search-card .bg-\[\#f2f4f7\].rounded-md.p-1 { display: flex; width: 100%; }
  html .hero .skylink-search-card .bg-\[\#f2f4f7\].rounded-md.p-1 > button {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
    padding-inline: 6px;
    font-size: 13px;
  }
  html .hero .skylink-search-card .bg-\[\#f2f4f7\].rounded-md.p-1 > button .material-symbols-outlined { display: none; }
}

/* ---------- Arabic (RTL) on result / booking / invoice pages ---------- */
/* Times, prices, codes and other Latin/number text keep their own reading order
   ("03:15 pm" not "pm 03:15", "5:20" not "0:520"); alignment still follows the page. */
html[dir="rtl"] body :is(span, p, div, td, th, li, label, strong, b, small, a, h1, h2, h3, h4, h5, h6, dt, dd):not(:has(*)) {
  unicode-bidi: plaintext;
}
/* Arrows and chevrons that point "forward" should point left in Arabic */
html[dir="rtl"] .material-symbols-outlined:is(.rtl-flip),
html[dir="rtl"] :is(svg, .material-symbols-outlined)[data-rtl-flip] { transform: scaleX(-1); }
/* Tailwind space-x-* (and checkbox/radio rows) put the gap on the left; flip it in Arabic */
html[dir="rtl"] :is([class*="space-x-"], .checkbox-item, .radio-item) > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; }
/* RTL: small split selects (day / month / year) keep the same compact padding as in English */
html[dir="rtl"] select.select[class*="w-["] { padding-left: 1.25rem; padding-right: .875rem; }
/* RTL: direction arrows are mirrored (tagged by the small script in header.php) */
html[dir="rtl"] .rtl-mirror { display: inline-block; transform: scaleX(-1); }

/* =====================================================================
   BOOKING / CHECKOUT PAGES — one centered layout instead of a 50/50 split
   (form + sticky summary inside the 1440px site width, one page background)
   ===================================================================== */
html .skylink-tick { font-size: 16px; vertical-align: -3px; color: var(--skylink-teal); }

@media (min-width: 1024px) {
  html .skylink-checkout.grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    gap: 28px;
    max-width: 1440px;
    margin-inline: auto;
    padding: 28px 24px 48px;
    min-height: 0;
    align-items: start;
  }
  /* Form column: no half-page white panel, the sections are already cards */
  html .skylink-checkout > .order-2 {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 0;
  }
  html .skylink-checkout > .order-2 > div { max-width: none; margin: 0; padding: 0; }
  /* Summary column: sticky card beside the form */
  html .skylink-checkout > .order-1 {
    background: transparent;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  html .skylink-checkout > .order-1 > div { max-width: none; margin: 0; padding: 0; }
}
@media (min-width: 1536px) {
  html .skylink-checkout.grid { padding-inline: 32px; gap: 32px; grid-template-columns: minmax(0, 1fr) 440px; }
}
/* Below desktop: summary first, then the form, both full width with even gutters */
@media (max-width: 1023px) {
  html .skylink-checkout > .order-2 { box-shadow: none; border: 0; min-height: 0; background: transparent; }
}

/* =====================================================================
   BRAND TEXT COLORS — one teal-tinted neutral scale instead of plain gray/slate,
   leftover blues/indigo mapped to the brand. Contrast matches the old shades.
   ===================================================================== */
:root {
  --sl-ink-900: #0F2A30;
  --sl-ink-800: #1C3A41;
  --sl-ink-700: #2C4A51;
  --sl-ink-600: #456066;
  --sl-ink-500: #5E777C;
  --sl-ink-400: #869A9E;
  --sl-ink-300: #B4C4C7;
  --sl-ink-200: #D3DFE1;
  --sl-ink-100: #EAF1F2;
}
html .text-gray-900, html .hover\:text-gray-900:hover, html .group:hover .group-hover\:text-gray-900 { color: var(--sl-ink-900); }
html .text-gray-800, html .hover\:text-gray-800:hover, html .group:hover .group-hover\:text-gray-800 { color: var(--sl-ink-800); }
html .text-gray-700, html .hover\:text-gray-700:hover, html .group:hover .group-hover\:text-gray-700 { color: var(--sl-ink-700); }
html .text-gray-600, html .hover\:text-gray-600:hover, html .group:hover .group-hover\:text-gray-600 { color: var(--sl-ink-600); }
html .text-gray-500, html .hover\:text-gray-500:hover, html .group:hover .group-hover\:text-gray-500 { color: var(--sl-ink-500); }
html .text-gray-400, html .hover\:text-gray-400:hover, html .group:hover .group-hover\:text-gray-400 { color: var(--sl-ink-400); }
html .text-gray-300, html .hover\:text-gray-300:hover, html .group:hover .group-hover\:text-gray-300 { color: var(--sl-ink-300); }
html .text-gray-200, html .hover\:text-gray-200:hover, html .group:hover .group-hover\:text-gray-200 { color: var(--sl-ink-200); }
html .text-gray-100, html .hover\:text-gray-100:hover, html .group:hover .group-hover\:text-gray-100 { color: var(--sl-ink-100); }
html .text-slate-900, html .hover\:text-slate-900:hover, html .group:hover .group-hover\:text-slate-900 { color: var(--sl-ink-900); }
html .text-slate-800, html .hover\:text-slate-800:hover, html .group:hover .group-hover\:text-slate-800 { color: var(--sl-ink-800); }
html .text-slate-700, html .hover\:text-slate-700:hover, html .group:hover .group-hover\:text-slate-700 { color: var(--sl-ink-700); }
html .text-slate-600, html .hover\:text-slate-600:hover, html .group:hover .group-hover\:text-slate-600 { color: var(--sl-ink-600); }
html .text-slate-500, html .hover\:text-slate-500:hover, html .group:hover .group-hover\:text-slate-500 { color: var(--sl-ink-500); }
html .text-slate-400, html .hover\:text-slate-400:hover, html .group:hover .group-hover\:text-slate-400 { color: var(--sl-ink-400); }
html .text-slate-300, html .hover\:text-slate-300:hover, html .group:hover .group-hover\:text-slate-300 { color: var(--sl-ink-300); }
html .text-slate-200, html .hover\:text-slate-200:hover, html .group:hover .group-hover\:text-slate-200 { color: var(--sl-ink-200); }
html .text-slate-100, html .hover\:text-slate-100:hover, html .group:hover .group-hover\:text-slate-100 { color: var(--sl-ink-100); }
html .text-zinc-900, html .hover\:text-zinc-900:hover, html .group:hover .group-hover\:text-zinc-900 { color: var(--sl-ink-900); }
html .text-zinc-800, html .hover\:text-zinc-800:hover, html .group:hover .group-hover\:text-zinc-800 { color: var(--sl-ink-800); }
html .text-zinc-700, html .hover\:text-zinc-700:hover, html .group:hover .group-hover\:text-zinc-700 { color: var(--sl-ink-700); }
html .text-zinc-600, html .hover\:text-zinc-600:hover, html .group:hover .group-hover\:text-zinc-600 { color: var(--sl-ink-600); }
html .text-zinc-500, html .hover\:text-zinc-500:hover, html .group:hover .group-hover\:text-zinc-500 { color: var(--sl-ink-500); }
html .text-zinc-400, html .hover\:text-zinc-400:hover, html .group:hover .group-hover\:text-zinc-400 { color: var(--sl-ink-400); }
html .text-zinc-300, html .hover\:text-zinc-300:hover, html .group:hover .group-hover\:text-zinc-300 { color: var(--sl-ink-300); }
html .text-zinc-200, html .hover\:text-zinc-200:hover, html .group:hover .group-hover\:text-zinc-200 { color: var(--sl-ink-200); }
html .text-zinc-100, html .hover\:text-zinc-100:hover, html .group:hover .group-hover\:text-zinc-100 { color: var(--sl-ink-100); }
html .text-neutral-900, html .hover\:text-neutral-900:hover, html .group:hover .group-hover\:text-neutral-900 { color: var(--sl-ink-900); }
html .text-neutral-800, html .hover\:text-neutral-800:hover, html .group:hover .group-hover\:text-neutral-800 { color: var(--sl-ink-800); }
html .text-neutral-700, html .hover\:text-neutral-700:hover, html .group:hover .group-hover\:text-neutral-700 { color: var(--sl-ink-700); }
html .text-neutral-600, html .hover\:text-neutral-600:hover, html .group:hover .group-hover\:text-neutral-600 { color: var(--sl-ink-600); }
html .text-neutral-500, html .hover\:text-neutral-500:hover, html .group:hover .group-hover\:text-neutral-500 { color: var(--sl-ink-500); }
html .text-neutral-400, html .hover\:text-neutral-400:hover, html .group:hover .group-hover\:text-neutral-400 { color: var(--sl-ink-400); }
html .text-neutral-300, html .hover\:text-neutral-300:hover, html .group:hover .group-hover\:text-neutral-300 { color: var(--sl-ink-300); }
html .text-neutral-200, html .hover\:text-neutral-200:hover, html .group:hover .group-hover\:text-neutral-200 { color: var(--sl-ink-200); }
html .text-neutral-100, html .hover\:text-neutral-100:hover, html .group:hover .group-hover\:text-neutral-100 { color: var(--sl-ink-100); }
html .text-\[\#101828\], html .hover\:text-\[\#101828\]:hover { color: var(--sl-ink-900); }
html .text-\[\#19191a\], html .hover\:text-\[\#19191a\]:hover { color: var(--sl-ink-900); }
html .text-\[\#373737\], html .hover\:text-\[\#373737\]:hover { color: var(--sl-ink-800); }
html .text-\[\#344054\], html .hover\:text-\[\#344054\]:hover { color: var(--sl-ink-700); }
html .text-\[\#475467\], html .hover\:text-\[\#475467\]:hover { color: var(--sl-ink-600); }
html .text-\[\#667085\], html .hover\:text-\[\#667085\]:hover { color: var(--sl-ink-500); }
html .text-\[\#7f759e\], html .hover\:text-\[\#7f759e\]:hover { color: var(--sl-ink-500); }
html .text-\[\#98a2b3\], html .hover\:text-\[\#98a2b3\]:hover { color: var(--sl-ink-400); }
/* Blues / indigo -> brand (blue 400-800 are already brand in skylink.css) */
html .text-blue-900, html .text-indigo-800, html .text-indigo-900, html .text-\[\#1E2358\], html .text-\[\#1e2358\] { color: var(--skylink-primary-dark); }
html .text-indigo-500, html .text-indigo-600, html .text-indigo-700, html .text-\[\#1570ef\], html .text-\[\#0058E6\], html .text-\[\#0058e6\],
html .hover\:text-blue-600:hover, html .hover\:text-blue-700:hover, html .hover\:text-indigo-600:hover { color: var(--skylink-primary); }
html .text-blue-300, html .text-blue-200 { color: #8EDDD3; }
html .text-blue-100 { color: #D6F2EE; }
/* Headings default to brand ink; links to brand primary */
html :is(h1, h2, h3, h4, h5, h6):not([class*="text-"]) { color: var(--sl-ink-900); }

/* ---------- Card headers: solid brand teal, light text and icons ----------
   Titles are forced light here; every other child (spans, icons, links) is checked against its
   real background by assets/js/icon-contrast.js, so badges and inputs with light fills keep
   their own colors. */
html :is(.card-header, .card-header-responsive, .card > [class*="border-b"]:is([class*="bg-gray-50"], [class*="bg-slate-50"], [class*="bg-gray-100"]):first-child) {
  background: var(--skylink-primary) !important;
  border-bottom: 1px solid var(--skylink-primary-dark) !important;
  color: #fff;
}
html :is(.card-header, .card-header-responsive, .card > [class*="border-b"]:is([class*="bg-gray-50"], [class*="bg-slate-50"], [class*="bg-gray-100"]):first-child) :is(h1, h2, h3, h4, h5, h6) { color: #fff !important; font-weight: 650; }
/* Text and icons in the header are light too, without waiting for icon-contrast.js; anything sitting
   on its own fill (badges, buttons, inputs, light chips) or directly inside one keeps its colors. */
html :is(.card-header, .card-header-responsive, .card > [class*="border-b"]:is([class*="bg-gray-50"], [class*="bg-slate-50"], [class*="bg-gray-100"]):first-child) :is(p, span, small, a, label, div, strong, b, em, li, .material-symbols-outlined, .lucide, svg):not(:is([class*="bg-"]:not([class*="/"], .card-header, .card-header-responsive, .card > *), .badge, .btn, input, select, textarea), :is([class*="bg-"]:not([class*="/"], .card-header, .card-header-responsive, .card > *), .badge, .btn, input, select, textarea) > *) { color: #fff !important; }
html :is(.card-header, .card-header-responsive, .card > [class*="border-b"]:is([class*="bg-gray-50"], [class*="bg-slate-50"], [class*="bg-gray-100"]):first-child) :is([class*="border"]:not([class*="bg-"]), .border) { border-color: rgba(255, 255, 255, .55) !important; }
/* Template leftovers: purple / violet accents -> brand */
html .text-purple-500, html .text-purple-600, html .text-violet-600, html .text-violet-700,
html .hover\:text-purple-600:hover, html .hover\:text-purple-700:hover { color: var(--skylink-primary); }
html .text-purple-700, html .text-purple-800, html .text-purple-900, html .text-violet-800 { color: var(--skylink-primary-dark); }
html .text-purple-300, html .text-purple-400 { color: #8EDDD3; }
html .text-purple-100 { color: #D6F2EE; }
/* Blue / indigo / purple gradients (price sliders, banners) -> brand teal gradients.
   Exact class tokens only, so dark-mode variants (dark:from-blue-900/20) never match. */
html [class~="from-blue-300"], html [class~="from-blue-400"], html [class~="from-blue-500"], html [class~="from-blue-600"], html [class~="from-blue-700"], html [class~="from-indigo-500"], html [class~="from-indigo-600"], html [class~="from-purple-500"], html [class~="from-purple-600"] { --sl-grad-a: var(--skylink-primary); --sl-grad-b: var(--skylink-teal); }
html [class~="from-blue-800"], html [class~="from-blue-900"], html [class~="from-indigo-800"], html [class~="from-indigo-900"] { --sl-grad-a: var(--skylink-primary-dark); --sl-grad-b: var(--skylink-primary); }
html [class~="from-blue-50"], html [class~="from-blue-100"], html [class~="from-blue-200"], html [class~="from-indigo-50"], html [class~="from-indigo-100"], html [class~="from-purple-50"], html [class~="from-purple-100"] { --sl-grad-a: #EEF8F7; --sl-grad-b: #DDF1EE; }
html [class~="bg-gradient-to-r"] { --sl-grad-dir: 90deg; }
html [class~="bg-gradient-to-br"] { --sl-grad-dir: 135deg; }
html [class~="bg-gradient-to-b"] { --sl-grad-dir: 180deg; }
:is([class~="from-blue-300"], [class~="from-blue-400"], [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-blue-700"], [class~="from-indigo-500"], [class~="from-indigo-600"], [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-blue-800"], [class~="from-blue-900"], [class~="from-indigo-800"], [class~="from-indigo-900"], [class~="from-blue-50"], [class~="from-blue-100"], [class~="from-blue-200"], [class~="from-indigo-50"], [class~="from-indigo-100"], [class~="from-purple-50"], [class~="from-purple-100"]):is([class~="bg-gradient-to-r"], [class~="bg-gradient-to-br"], [class~="bg-gradient-to-b"]) {
  background-image: linear-gradient(var(--sl-grad-dir, 90deg), var(--sl-grad-a), var(--sl-grad-b)) !important;
}

/* Brand-colored icons, site-wide.
   Neutral (gray/slate/uncolored) icons take the brand teal; icons that already carry a
   semantic color (white, green, red, orange, ...) are left alone, as are icons placed on
   dark or solid-colored surfaces where they must stay light. */
html .material-symbols-outlined:is(.text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700, .text-slate-300, .text-slate-400, .text-slate-500, .text-slate-600, .text-neutral-400, .text-neutral-500, .text-zinc-400, .text-zinc-500):not(:is(footer, .skylink-contact-bar, .skylink-header-auth, .hero, .btn:not(.white), button[type="submit"],
  [class*="bg-primary"], [class*="bg-black"], [class*="bg-gray-8"], [class*="bg-gray-9"], [class*="bg-slate-8"], [class*="bg-slate-9"],
  [class*="bg-blue-5"], [class*="bg-blue-6"], [class*="bg-blue-7"], [class*="bg-green-5"], [class*="bg-green-6"], [class*="bg-red-5"], [class*="bg-red-6"],
  [class*="bg-orange-5"], [class*="bg-orange-6"], [class*="bg-gradient"], [class*="from-"], [class*="skylink-gradient"], [class*="text-white"]) *),
:where(html .material-symbols-outlined:not([class*="text-white"], [class*="text-primary"], [class*="text-green"], [class*="text-red"], [class*="text-orange"], [class*="text-amber"], [class*="text-yellow"], [class*="text-blue"], [class*="text-purple"], [class*="text-indigo"], [class*="text-teal"], [class*="text-emerald"], [class*="text-rose"], [class*="text-pink"], [class*="text-sky"], [class*="text-cyan"], [class*="text-success"], [class*="text-danger"], [class*="text-warning"], [class*="text-inherit"], [class*="text-gray"], [class*="text-slate"], [class*="text-neutral"], [class*="text-zinc"]):not(:is(footer, .skylink-contact-bar, .skylink-header-auth, .hero, .btn:not(.white), button[type="submit"],
  [class*="bg-primary"], [class*="bg-black"], [class*="bg-gray-8"], [class*="bg-gray-9"], [class*="bg-slate-8"], [class*="bg-slate-9"],
  [class*="bg-blue-5"], [class*="bg-blue-6"], [class*="bg-blue-7"], [class*="bg-green-5"], [class*="bg-green-6"], [class*="bg-red-5"], [class*="bg-red-6"],
  [class*="bg-orange-5"], [class*="bg-orange-6"], [class*="bg-gradient"], [class*="from-"], [class*="skylink-gradient"], [class*="text-white"]) *)),
html .lucide:not([class*="text-white"], [class*="text-primary"], [class*="text-green"], [class*="text-red"], [class*="text-orange"], [class*="text-amber"], [class*="text-blue"]):not(:is(footer, .skylink-contact-bar, .skylink-header-auth, .hero, .btn:not(.white), button[type="submit"],
  [class*="bg-primary"], [class*="bg-black"], [class*="bg-gray-8"], [class*="bg-gray-9"], [class*="bg-slate-8"], [class*="bg-slate-9"],
  [class*="bg-blue-5"], [class*="bg-blue-6"], [class*="bg-blue-7"], [class*="bg-green-5"], [class*="bg-green-6"], [class*="bg-red-5"], [class*="bg-red-6"],
  [class*="bg-orange-5"], [class*="bg-orange-6"], [class*="bg-gradient"], [class*="from-"], [class*="skylink-gradient"], [class*="text-white"]) *) {
  color: var(--skylink-primary);
}
/* Icons on dark surfaces (flagged by assets/js/icon-contrast.js) use the light brand teal.
   A data attribute is used instead of a class so the Tailwind CDN does not rebuild its CSS
   every time an element is flagged. */
html [data-sl-contrast="icon-dark"][data-sl-contrast="icon-dark"][data-sl-contrast="icon-dark"] { color: var(--skylink-teal) !important; }
html [data-sl-contrast="icon-mid"][data-sl-contrast="icon-mid"][data-sl-contrast="icon-mid"] { color: #fff !important; }
/* Text with too little contrast on a dark surface (flagged by assets/js/icon-contrast.js). */
html [data-sl-contrast="text-dark"][data-sl-contrast="text-dark"][data-sl-contrast="text-dark"] { color: #E7F1F1 !important; }

/* ---------- Homepage search tabs: larger, polished labels and icons ---------- */
html .hero .skylink-search-card [role="tab"] {
  height: 52px;
  min-height: 52px;
  padding: 10px 16px;
  gap: 8px;
}
html .hero .skylink-search-card [role="tab"] .material-symbols-outlined,
html .hero .skylink-search-card [role="tab"] .hgi {
  font-size: 22px !important;
  line-height: 1 !important;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--skylink-teal);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  transition: color 180ms ease;
}
html .hero .skylink-search-card [role="tab"]:hover .material-symbols-outlined,
html .hero .skylink-search-card [role="tab"]:hover .hgi { color: #FFFFFF; }
html .hero .skylink-search-card [role="tab"][aria-selected="true"] .material-symbols-outlined,
html .hero .skylink-search-card [role="tab"][aria-selected="true"] .hgi,
html .hero .skylink-search-card [role="tab"].active .material-symbols-outlined {
  color: var(--skylink-primary-dark);
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
html .hero .skylink-search-card [role="tab"] > span:last-child {
  font-size: 14px !important;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}
html .hero .skylink-search-card [role="tab"][aria-selected="true"] > span:last-child { font-weight: 700; }
@media (max-width: 767px) {
  html .hero .skylink-search-card [role="tab"] { height: 48px; min-height: 48px; padding: 8px 12px; gap: 6px; }
  html .hero .skylink-search-card [role="tab"] .material-symbols-outlined,
  html .hero .skylink-search-card [role="tab"] .hgi { font-size: 20px !important; width: 20px; height: 20px; }
  html .hero .skylink-search-card [role="tab"] > span:last-child { font-size: 13px !important; }
}