/* Approved popup geometry and icons, adapted to the site's typefaces.
   Scoped component tokens never override the surrounding website. */
.sail-preferences, dialog.sp-dialog {font:14px/1.5 var(--sans,Montserrat,Arial,sans-serif);text-align:left;font-style:normal;letter-spacing:normal}
:is(.sail-preferences,.sp-dialog), :is(.sail-preferences,.sp-dialog) *, :is(.sail-preferences,.sp-dialog) *::before, :is(.sail-preferences,.sp-dialog) *::after {box-sizing:border-box}
:where(.sp-dialog) :where(p,h2,h3){margin:0;font:inherit;color:inherit;letter-spacing:normal}
.sp-dialog svg,.sail-preferences svg{display:inline-block;vertical-align:middle}
.sp-dialog button,.sail-preferences button{margin:0;letter-spacing:normal;line-height:1.5;text-transform:none}
dialog.sp-dialog{position:fixed;inset:0;display:none}
html:has(dialog.sp-dialog[open]),body:has(dialog.sp-dialog[open]){overflow:hidden}
.sail-preferences, .sp-dialog {
  --sp-ink: #011c22;
  --sp-coral: #f37a54;
  --sp-paper: #fff;
  --sp-muted: #667479;
  --sp-line: #e5e9e8;
  --sp-soft: #f5f7f6;
  --sp-selected: #fff3ed;
}
:where(.sail-preferences, .sp-dialog) :where(button, input) { font: inherit; }
:is(.sail-preferences, .sp-dialog) button { cursor: pointer; }
:where(.sail-preferences, .sp-dialog) :where(button, input) { -webkit-tap-highlight-color: transparent; }
:is(.sail-preferences, .sp-dialog) :is(button, input):focus-visible { outline: 3px solid var(--sp-coral); outline-offset: 4px; }
:is(.sail-preferences, .sp-dialog) [hidden] { display: none !important; }
.sp-footer-preference-fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* Original button styling, with currency and globe icons for the two preferences. */
.sp-preference-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 172px; min-height: 44px; padding: 9px 12px 9px 13px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: rgba(1,45,55,.84); color: white; font-size: 13px; text-align: left; }
.sp-preference-button:hover { border-color: rgba(255,255,255,.55); }
.sp-preference-button svg { width: 18px; height: 18px; flex: none; color: rgba(255,255,255,.85); }
.sp-preference-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog.sp-dialog { width: min(392px, calc(100vw - 48px)); max-height: min(720px, calc(100dvh - 48px)); margin: auto; padding: 0; border: 0; border-radius: 24px; background: var(--sp-paper); color: var(--sp-ink); box-shadow: 0 28px 100px #0005; overflow: hidden; }
dialog.sp-dialog[open] { display: flex; flex-direction: column; animation: sp-arrive 180ms ease-out; }
dialog.sp-dialog::backdrop { background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,0) 55%), rgba(0,18,23,.74); -webkit-backdrop-filter: blur(10px) saturate(.7); backdrop-filter: blur(10px) saturate(.7); }
.sp-dialog-header { flex: none; padding: 29px 28px 22px; position: relative; }
.sp-eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 13px; font-size: 11px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; color: #627474; }
.sp-eyebrow svg { width: 15px; height: 15px; }
.sp-title { margin: 0 42px 7px 0; font-size: 26px; letter-spacing: -.035em; font-weight: 650; line-height: 1.2; }
.sp-close-button { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; padding: 10px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--sp-coral); color: white; }
.sp-close-button:hover { background: #fa8b67; }
.sp-close-button svg { width: 18px; height: 18px; }
.sp-search-wrap { flex: none; padding: 0 28px 19px; }
.sp-search-field { display: flex; align-items: center; gap: 10px; padding: 0 13px; height: 48px; border: 1px solid #f3c4b3; border-radius: 12px; background: #fff3ed; }
.sp-search-field:focus-within { border-color: var(--sp-coral); box-shadow: 0 0 0 3px #f37a5424; }
.sp-search-field > svg { width: 18px; height: 18px; flex: none; color: #a95c40; }
.sp-search-field input { width: 100%; min-width: 0; height: 100%; padding: 0; outline: 0; border: 0; background: transparent; color: var(--sp-ink); font-size: 14px; }
.sp-search-field input::placeholder { color: #956b5b; }
.sp-clear-search { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-right: -6px; padding: 7px; border: 0; border-radius: 50%; color: #9a4527; background: #f9ded0; }
.sp-clear-search svg { width: 14px; height: 14px; }
.sp-choices-scroll { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; padding: 0 20px 17px; scrollbar-width: thin; scrollbar-color: #cbd5cf transparent; }
.sp-choice-group + .sp-choice-group { margin-top: 23px; }
.sp-section-title { margin: 0 8px 9px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: #738078; }
.sp-choice { display: block; position: relative; cursor: pointer; margin-top: 5px; }
.sp-choice input { appearance: none; position: absolute; width: 1px; height: 1px; opacity: 0; }
.sp-choice-surface { min-height: 65px; display: flex; align-items: center; gap: 13px; padding: 10px 13px; border: 1px solid transparent; border-radius: 12px; transition: background-color 120ms ease, border-color 120ms ease; }
.sp-choice:hover .sp-choice-surface { background: var(--sp-soft); }
.sp-choice input:checked + .sp-choice-surface { background: var(--sp-selected); border-color: #f3a78b; }
.sp-choice input:focus-visible + .sp-choice-surface { outline: 3px solid var(--sp-coral); outline-offset: 2px; }
.sp-currency-flag { display: grid; place-items: center; width: 37px; height: 37px; flex: none; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 28px; line-height: 1; }
.sp-choice-copy { display: grid; min-width: 0; gap: 2px; flex: 1; }
.sp-choice-name { font-size: 14px; font-weight: 550; letter-spacing: -.01em; }
.sp-choice-detail { font-size: 12px; color: var(--sp-muted); }
.sp-language-code { margin-right: 9px; font-size: 11px; font-weight: 600; letter-spacing: .055em; color: #7c8781; }
.sp-radio-mark { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1.4px solid #c5cfc9; border-radius: 50%; }
.sp-choice input:checked + .sp-choice-surface .sp-radio-mark { border: 6px solid var(--sp-coral); background: white; }
.sp-dialog-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex: none; padding: 18px 28px 22px; border-top: 1px solid var(--sp-line); background: white; }
.sp-cancel { min-height: 46px; padding: 10px 4px; border: 0; background: transparent; color: #465b54; font-size: 14px; font-weight: 550; text-decoration: underline; text-underline-offset: 4px; }
.sp-save { display: flex; justify-content: center; align-items: center; gap: 22px; min-height: 46px; min-width: 170px; padding: 11px 19px; border: 0; border-radius: 10px; background: var(--sp-coral); color: white; font-size: 14px; font-weight: 650; }
.sp-save:hover { background: #fa8b67; }
.sp-save svg { width: 17px; height: 17px; }
.sp-empty { padding: 45px 20px 55px; text-align: center; }
.sp-empty strong { display: block; margin-bottom: 6px; font-size: 16px; }
.sp-empty p { margin: 0; color: var(--sp-muted); font-size: 13px; }
.sp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes sp-arrive { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media(max-width:600px) {
  .sp-preference-button { width: min(172px, calc((100vw - 44px) / 2)); font-size: 14px; }
  dialog.sp-dialog { width: min(392px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); border-radius: 21px; }
  .sp-dialog-header { padding: 24px 20px 20px; }
  .sp-title { font-size: 23px; }
  .sp-close-button { right: 14px; top: 16px; }
  .sp-search-wrap { padding: 0 20px 17px; }
  .sp-search-field input { font-size: 16px; }
  .sp-choices-scroll { padding-inline: 12px; }
  .sp-dialog-footer { padding: 16px 20px 20px; }
}
/* Seven language options stay visible instead of using a scrolling list.
   Short viewports reduce spacing; landscape uses columns. Outer overflow is
   only an accessibility safeguard for extreme zoom or future longer copy. */
dialog.sp-dialog[data-mode="language"] { max-width: calc(100vw - 24px); overflow: auto; }
dialog.sp-dialog[data-mode="language"] .sp-choices-scroll { overflow: visible; flex: none; min-height: 0; padding-bottom: 12px; }
dialog.sp-dialog[data-mode="language"] .sp-choice { margin-top: 3px; }
dialog.sp-dialog[data-mode="language"] .sp-choice-surface { min-height: 54px; padding-block: 5px; }
dialog.sp-dialog[data-mode="language"] .sp-choice-copy { gap: 0; }
dialog.sp-dialog[data-mode="language"] .sp-dialog-footer { padding-block: 16px; }
@media(max-height:680px) {
  dialog.sp-dialog[data-mode="language"] { max-height: calc(100dvh - 24px); }
  dialog.sp-dialog[data-mode="language"] .sp-dialog-header { padding: 18px 20px 14px; }
  dialog.sp-dialog[data-mode="language"] .sp-eyebrow { margin-bottom: 8px; }
  dialog.sp-dialog[data-mode="language"] .sp-title { font-size: clamp(20px,4.8vw,22px); margin-bottom: 0; }
  dialog.sp-dialog[data-mode="language"] .sp-choice-surface { min-height: 46px; padding-block: 2px; }
  dialog.sp-dialog[data-mode="language"] .sp-choices-scroll { padding-bottom: 8px; }
  dialog.sp-dialog[data-mode="language"] .sp-section-title { margin-bottom: 6px; }
  dialog.sp-dialog[data-mode="language"] .sp-dialog-footer { padding: 12px 20px; }
  dialog.sp-dialog[data-mode="language"] .sp-save, dialog.sp-dialog[data-mode="language"] .sp-cancel { min-height: 44px; }
}
@media(min-width:540px) and (max-height:640px) {
  dialog.sp-dialog[data-mode="language"] { width: min(504px,calc(100vw - 24px)); }
  dialog.sp-dialog[data-mode="language"] .sp-choice-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 8px; }
  dialog.sp-dialog[data-mode="language"] .sp-section-title { grid-column: 1 / -1; }
  dialog.sp-dialog[data-mode="language"] .sp-choice { margin: 0; }
  dialog.sp-dialog[data-mode="language"] .sp-choice-surface { gap: 8px; padding-inline: 10px; }
  dialog.sp-dialog[data-mode="language"] .sp-language-code { margin-right: 0; }
}
@media(max-height:480px) {
  dialog.sp-dialog[data-mode="currency"] .sp-eyebrow { display: none; }
  dialog.sp-dialog[data-mode="currency"] .sp-dialog-header { padding-block: 16px 12px; }
  dialog.sp-dialog[data-mode="currency"] .sp-close-button { top: 10px; }
  dialog.sp-dialog[data-mode="currency"] .sp-search-wrap { padding-bottom: 12px; }
  dialog.sp-dialog[data-mode="currency"] .sp-search-field { height: 44px; }
  dialog.sp-dialog[data-mode="currency"] .sp-dialog-footer { padding-block: 12px; }
  dialog.sp-dialog[data-mode="language"] .sp-eyebrow { display: none; }
  dialog.sp-dialog[data-mode="language"] .sp-dialog-header { padding-block: 14px; }
  dialog.sp-dialog[data-mode="language"] .sp-close-button { top: 7px; }
}
@media(min-width:540px) and (max-height:380px) {
  dialog.sp-dialog[data-mode="language"] .sp-dialog-header { padding-block: 10px; }
  dialog.sp-dialog[data-mode="language"] .sp-title { font-size: 20px; }
  dialog.sp-dialog[data-mode="language"] .sp-close-button { top: 7px; }
  dialog.sp-dialog[data-mode="language"] .sp-section-title { display: none; }
  dialog.sp-dialog[data-mode="language"] .sp-choice-surface { min-height: 44px; padding-block: 1px; }
  dialog.sp-dialog[data-mode="language"] .sp-choices-scroll { padding-bottom: 0; }
  dialog.sp-dialog[data-mode="language"] .sp-dialog-footer { padding-block: 6px; }
}
@media(prefers-reduced-motion:reduce) { dialog.sp-dialog[open] { animation: none; } .sp-choice-surface { transition:none; } }

.sp-dialog .sp-title{font-family:var(--serif,"El Messiri",sans-serif);font-weight:500}
.sp-dialog .sp-section-title{font-family:var(--sans,Montserrat,Arial,sans-serif);line-height:1.5}

/* Footer placement is independent of the reusable popup components. */
.original-footer .footer-legal{grid-template-columns:minmax(0,1fr) 356px;column-gap:40px;text-align:left}
.original-footer .footer-legal>p{grid-column:1;min-width:0}
.original-footer .footer-legal>p:last-of-type{font-style:italic}
.original-footer .sail-preferences{grid-column:2;grid-row:1/span 3;align-self:end;min-width:0;width:100%;margin:0}
@media(max-width:850px){.original-footer .footer-legal{grid-template-columns:minmax(0,1fr)}.original-footer .sail-preferences{grid-column:1;grid-row:auto;justify-self:end;width:min(100%,356px);margin-top:7px}}
@media(max-width:600px){.sail-preferences .sp-footer-preference-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.sail-preferences .sp-preference-button{width:100%;min-width:0}}

/* Horizon keeps the existing modal buttons, IDs and preference state. */
.original-footer.horizon-footer .sail-preferences{position:relative;grid-column:auto;grid-row:auto;align-self:auto;width:auto;min-width:0;margin:0;flex:none}
.horizon-footer .sp-footer-preference-fields{display:flex;flex-wrap:nowrap;gap:10px}
.horizon-footer .sp-preference-button{position:relative;appearance:none;width:auto;min-width:106px;height:44px;padding:0 38px 0 14px;border:var(--footer-line);border-radius:4px;background:transparent;color:var(--footer-text);font:500 13px/1.5 var(--sans)}
.horizon-footer .sp-preference-button svg{position:absolute;right:14px;width:14px;height:14px;color:var(--footer-muted)}
.horizon-footer .sp-preference-button:hover{border-color:rgba(242,237,230,.4)}
.horizon-footer .sp-preference-button:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
@media(min-width:1100px){
 .horizon-footer [data-label="currency"]{font-size:0}
 .horizon-footer [data-label="currency"]::after{content:attr(data-short);font-size:13px}
}
@media(max-width:767px){
 .original-footer.horizon-footer .sail-preferences{order:5;width:100%;margin-top:28px}
 .horizon-footer .sp-footer-preference-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .horizon-footer .sp-preference-button{width:100%;min-width:0;height:48px;font-size:14px}
}

/* Montserrat is wider than the reference font: keep Save on one line at 320px. */
.sp-save-label{white-space:nowrap}
@media(max-width:360px){.sp-dialog .sp-save{gap:12px;padding-inline:15px}}

.sp-currency-feedback { margin: 10px 0 0; font: 12px/1.5 Montserrat, sans-serif; color: #02323b; }
.sp-currency-retry { margin-top: 8px; border: 0; background: transparent; color: #02323b; text-decoration: underline; cursor: pointer; }
.sp-save:disabled { opacity: .55; cursor: wait; }

.sp-preference-notice { display: block; max-width: 320px; margin-top: 8px; color: inherit; font-size: 12px; }