/* =====================================================================================================
   Hotely design system (aqua), 2026-10-14. Approved look: the "aqua" PDF Idan and Sigalit reviewed.

   Loaded LAST on every page (_Head, Search/Index, _BookingLayout). Tailwind comes from the Play CDN,
   which injects its <style> at runtime AFTER this file, so utility overrides here need !important.

   Palette rules (keep to them; Sigalit 2026-10-14: one aqua tint only, never a green/mint tint):
     teal   #087C8F  buttons, links, active states (white text on it is 4.9:1)
     teal-d #06717F  hover / pressed
     aqua   #13B5C9  accents only (thin lines, logo light end). Never under white text (2.5:1)
     icon   #0A8396  line icons
     tint   #E3F6F8  the ONE light aqua background (icon tiles, info boxes, badges)
     edge   #BFE7EC  border on tinted boxes
     ink    #111827 headings, #374151 body, #6B7280 muted, #E5E7EB lines, #F9FAFB surface
   Semantic colors stay as they are: red = error / unavailable, amber = caution, gold = rating stars.
   Shape: 10px on buttons, fields and chips; 14px on cards; circles only for true round controls.
   ===================================================================================================== */
:root {
  --hy-teal: #087C8F;
  --hy-teal-dark: #06717F;
  --hy-aqua: #13B5C9;
  --hy-icon: #0A8396;
  --hy-tint: #E3F6F8;
  --hy-tint-edge: #BFE7EC;
  --hy-ink: #111827;
  --hy-text: #374151;
  --hy-muted: #6B7280;
  --hy-line: #E5E7EB;
  --hy-surface: #F9FAFB;
  --hy-r: 10px;
  --hy-r-lg: 14px;
  --hy-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Buttons ---------- */
.ds-btn-primary, a.ds-btn-primary {
  background: var(--hy-teal) !important; color: #fff !important;
  border-radius: var(--hy-r) !important; padding: 12px 22px !important;
  font: 600 15px/1.2 var(--hy-font) !important;
  transition: background-color .15s ease;
}
.ds-btn-primary:hover { background: var(--hy-teal-dark) !important; }

/* ---------- Shape: pills become 10px; round controls stay round ----------
   Tailwind text pills always carry px- padding; round icon buttons (w-/h- sized, p-*) do not. */
[class*="rounded-full"][class*="px-"] { border-radius: var(--hy-r) !important; }
/* Pills defined in the site's own CSS files */
.hp-hdr__pill, .hp-bar, .hp-seg, .hp-go, .hp-card__act,
.hnav__pill, .hau-acct__btn,
.hau .btn, .hau .btn2, .hau .oauth, .hau .ident, .hau .tabs, .hau .tabs a, .hau .trigger, .hau .mbtn,
.htr .more, .htr .chip, .htr .go { border-radius: var(--hy-r) !important; }
.hp-hdr__menu-call-note, .hnav-m__call-note { border-radius: 6px !important; }
header a[class*="border"], header button[class*="border"] { border-radius: var(--hy-r) !important; }

/* ---------- Static page tops (About, Contact, FAQ): white, ink title, thin aqua line ---------- */
section.ds-hero { background: #fff !important; background-image: none !important; border-bottom: 3px solid var(--hy-aqua) !important; padding: 72px 0 56px !important; }
section.ds-hero h1 { color: var(--hy-ink) !important; font: 700 48px/1.08 var(--hy-font) !important; letter-spacing: -.035em; margin-bottom: 14px !important; }
section.ds-hero p { color: var(--hy-muted) !important; font-size: 19px !important; }
@media (max-width: 640px) { section.ds-hero { padding: 48px 0 36px !important; } section.ds-hero h1 { font-size: 36px !important; } }

/* Closing band (About): light surface, ink text, teal button */
section.ds-cta { background: var(--hy-surface) !important; background-image: none !important; border-top: 1px solid var(--hy-line); }
section.ds-cta p { color: var(--hy-ink) !important; }

/* Headings on content pages, matched to the homepage .hp-h2 */
main h2, section h2 { color: var(--hy-ink); letter-spacing: -.025em; }
section h3 { letter-spacing: -.01em; }

/* Cards: flat, 1px line, no hover lift */
section .bg-white.rounded-xl { border: 1px solid var(--hy-line); box-shadow: none !important; border-radius: var(--hy-r-lg) !important; }
section.bg-gray-50 { background: var(--hy-surface) !important; }

/* Icon tiles (one style instead of blue/green/orange circles) */
.ds-icon-tile { background: var(--hy-tint) !important; border-radius: var(--hy-r) !important; width: 48px !important; height: 48px !important; }

/* ---------- FAQ "Still Have Questions?" box: white card, teal primary button ---------- */
.ds-help-box { background: #fff !important; background-image: none !important; color: var(--hy-ink) !important; border: 1px solid var(--hy-line); border-radius: var(--hy-r-lg) !important;
  padding: 28px 32px !important; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; text-align: left !important; }
.ds-help-box h2 { margin: 0 !important; font-size: 24px !important; letter-spacing: -.02em; color: var(--hy-ink) !important; }
.ds-help-box > div { justify-content: flex-end !important; width: auto !important; }
.ds-help-box a { border-radius: var(--hy-r) !important; padding: 12px 20px !important; font-size: 15px !important; }
.ds-help-box a:first-of-type { background: var(--hy-teal) !important; color: #fff !important; }
.ds-help-box a + a { background: #fff !important; color: var(--hy-ink) !important; border: 1px solid #D1D5DB !important; }
.ds-help-box a:first-of-type img { filter: brightness(0) invert(1) !important; }
.ds-help-box a + a img { filter: none !important; }
@media (max-width: 640px) { .ds-help-box { padding: 22px !important; } .ds-help-box > div { width: 100% !important; } }

/* ---------- Old Tailwind blues and greens -> the one teal / aqua family ---------- */
.bg-blue-600, .bg-blue-700, .bg-blue-500, .bg-blue-primary, .bg-blue-secondary,
.bg-green-500, .bg-green-600, .bg-green-400, .bg-emerald-600 { background-color: var(--hy-teal) !important; }
.hover\:bg-blue-700:hover, .hover\:bg-blue-800:hover, .hover\:bg-blue-600:hover { background-color: var(--hy-teal-dark) !important; }
.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-primary, .text-blue-secondary,
.text-green-500, .text-green-600, .text-green-700, .text-green-800, .text-green-900,
.text-emerald-600, .text-emerald-700, .text-emerald-800 { color: var(--hy-teal) !important; }
.text-blue-800, .text-blue-900 { color: #06535F !important; }
.bg-blue-50, .bg-blue-100, .bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100, .bg-teal-50, .bg-lime-50,
[class*="from-green-50"], [class*="to-green-100"] { background-color: var(--hy-tint) !important; background-image: none !important; }
.border-blue-100, .border-blue-200, .border-blue-300, .border-green-100, .border-green-200, .border-green-300,
.border-emerald-100, .border-emerald-200 { border-color: var(--hy-tint-edge) !important; }
.border-blue-500, .border-blue-600, .border-green-500, .border-emerald-500 { border-color: var(--hy-teal) !important; }
.focus\:ring-blue-500:focus, .focus\:border-blue-500:focus { --tw-ring-color: var(--hy-teal) !important; border-color: var(--hy-teal) !important; }
/* Gradient buttons and bands (blue / yellow-to-orange) -> solid teal */
[class*="from-blue-"]:not([class*="from-blue-50"]), [class*="from-yellow-500"] { background-image: none !important; background-color: var(--hy-teal) !important; }
div.bg-gradient-to-r h2 { color: #fff; }

/* Round icon badges in any color -> one aqua tile */
/* Icon-only circles. Text badges (they always carry px- padding, e.g. "17% OFF") are excluded: this rule once
   turned the white-text discount badge into white on pale aqua (2026-10-14). */
.rounded-full:not([class*="px-"]):is(.bg-green-500,.bg-green-600,.bg-orange-500,.bg-yellow-500,.bg-yellow-400,.bg-blue-500,.bg-blue-600,.bg-teal-500,.bg-emerald-500,.bg-indigo-500),
.rounded-full:not([class*="px-"]):is(.bg-green-100,.bg-orange-100,.bg-yellow-100,.bg-blue-100,.bg-purple-100,.bg-teal-100,.bg-emerald-100) { background: var(--hy-tint) !important; color: var(--hy-teal) !important; }
.rounded-full:not([class*="px-"]):is(.bg-green-500,.bg-green-600,.bg-orange-500,.bg-yellow-500,.bg-yellow-400,.bg-blue-500,.bg-blue-600,.bg-teal-500,.bg-emerald-500,.bg-indigo-500,.bg-green-100,.bg-orange-100,.bg-yellow-100,.bg-blue-100,.bg-purple-100,.bg-teal-100,.bg-emerald-100) :is(.fa,.fas,.far,i,svg) { color: var(--hy-teal) !important; }
/* ...but dots and bar fills are not badges. They carry no icon, so the pale tile made them vanish: the hotel
   page review bars read as empty (Idan, 2026-10-15). Solid teal instead. */
.rounded-full:not([class*="px-"]):is(.bg-green-500,.bg-green-600,.bg-yellow-500,.bg-yellow-400,.bg-blue-400,.bg-blue-500,.bg-blue-600,.bg-emerald-500):is(.w-0\.5,.w-1,.w-1\.5,.w-2,.w-2\.5,.w-3),
.rounded-full[class*="bg-gray-"] > .rounded-full[class*="bg-"] { background: var(--hy-icon) !important; }

/* Decorative yellow tips (not warnings) -> aqua. Bordered yellow boxes are real cautions and stay. */
.bg-yellow-50.rounded-lg:not([class*="border"]) { background-color: var(--hy-tint) !important; }
.bg-yellow-100.text-yellow-700 { background-color: #fff !important; color: var(--hy-teal) !important; }

/* Font Awesome (confirmation page) */
.fa, .fas, .far, .fa-solid { color: var(--hy-icon); }
button .fa, button .fas, a .fa, a .fas, [class*="from-"] .fas, [class*="from-"] .fa,
.bg-yellow-50[class*="border"] .fas, .bg-red-50 .fas, .bg-red-100 .fas { color: inherit !important; }

/* ---------- Booking confirmation: calm header like the other pages, no bounce ---------- */
#statusBanner { background: #fff !important; background-image: none !important; color: var(--hy-ink) !important; border-bottom: 1px solid var(--hy-line); }
#statusBanner h1 { color: var(--hy-ink) !important; letter-spacing: -.03em; }
#statusBanner #statusSubtitle { color: #4B5563 !important; }
#statusIcon { background: var(--hy-tint) !important; color: var(--hy-teal) !important; animation: none !important; width: 64px !important; height: 64px !important; }
#statusIcon .fas { color: var(--hy-teal) !important; }
#confirmationNumber { background: var(--hy-surface) !important; border: 1px solid var(--hy-line); border-radius: var(--hy-r) !important; color: var(--hy-ink) !important; backdrop-filter: none !important; }
#confirmationNumber .text-white { color: #4B5563 !important; }
.animate-bounce-slow, .animate-bounce { animation: none !important; }

/* ---------- Homepage: carry the aqua beyond the Search button ---------- */
.hp-go, .hp-btn--ink, [class*="hp-card__act--ink"] { background: var(--hy-teal) !important; color: #fff !important; }
.hp-go:hover, .hp-btn--ink:hover, [class*="hp-card__act--ink"]:hover { background: var(--hy-teal-dark) !important; }
[class*="hp-card__act--ghost"] { background: var(--hy-tint) !important; color: #06535F !important; }
.hp-eyebrow { color: var(--hy-teal) !important; }
.hp-seg__icon, .hp-rail__tab svg { color: var(--hy-icon) !important; }
.hp-rail__tab:hover, .hp-rail__tab[aria-current="page"] { color: var(--hy-teal) !important; }
.hp-rail__tab[aria-current="page"] .hp-rail__label { border-bottom-color: var(--hy-aqua) !important; }
/* Destination rail: each destination is a bordered tile so it reads as tappable; the tile turns aqua with a
   teal edge on hover and keyboard focus. Labels darker than the old grey, which looked disabled
   (option A, chosen by Sigalit, 2026-10-15). */
.hp-rail { gap: 8px; padding: 12px 20px; }
.hp-rail__tab { color: var(--hy-text) !important; background: #fff !important; border: 1px solid var(--hy-line) !important;
  border-radius: var(--hy-r); padding: 12px 8px 10px; box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
  transition: border-color .15s ease, background-color .15s ease; }
.hp-rail__tab:hover, .hp-rail__tab:focus-visible { border-color: var(--hy-teal) !important; background: var(--hy-tint) !important; }
.hp-rail__tab .hp-rail__label { padding-bottom: 0; }
.hp-rail__arrow:hover { border-color: var(--hy-teal) !important; color: var(--hy-teal) !important; }
.hp-rail-wrap { border-bottom: 1px solid var(--hy-line); }

/* Focus ring: teal instead of the old #4a90e2 */
button:focus-visible, a:focus-visible, input:focus-visible { outline-color: var(--hy-teal) !important; }

/* ---------- Page tops and closing bands that carry pills, badges or a second button ---------- */
section.ds-hero .bg-white\/15 { background: var(--hy-tint) !important; color: #06535F !important; }
section.ds-hero a.bg-white, section.ds-cta a.bg-white { background: #fff !important; color: var(--hy-ink) !important; border: 1px solid #D1D5DB !important; border-radius: var(--hy-r) !important; }
section.ds-cta h2 { color: var(--hy-ink) !important; }
section.ds-cta a[class*="border-white"] { color: var(--hy-ink) !important; border-color: #D1D5DB !important; background: #fff !important; }
section.ds-hero a.bg-white, section.ds-cta a.bg-white { padding: 12px 22px !important; font-size: 15px !important; }