/* The panels the prototypes restyle (HANDOFF section 4): cookie banner and preferences, language picker, and on home the experience quick view, photo credits and toast.
   Same ids and hooks: apollonaut-consent.js, the language plugin, GTranslate and app.js keep driving them. Loaded on home, the Majorelle page and the booking steps only. */
body.cv-home {--ui-bg:#fffefa;--ui-text:#19362f;--ui-muted:#5f6b66;--ui-line:#d9dcd2;--ui-field:#f9f7f1;--ui-hover:#f4f0e4;--ui-focus:#0736c9;--ui-on:#183c34;--ui-primary-bg:#f8e46c;--ui-primary-text:#183c34;--ui-h-family:var(--font-sans);--ui-h-weight:700;--ui-h-lh:1.04;--ui-h-ls:-.035em;--ui-size:16px;--ui-lh:1.5;--ui-x-family:var(--font-sans)}
body[class*="vm-page-"] {--ui-bg:#fdfcf8;--ui-text:#071b32;--ui-muted:#58606b;--ui-line:#ded8c9;--ui-field:#f9f7f1;--ui-hover:#f4f0e4;--ui-focus:#0736c9;--ui-on:#1f7a46;--ui-primary-bg:linear-gradient(115deg,#0731c2,#0826aa);--ui-primary-text:#fff;--ui-h-family:"Cormorant Garamond",Georgia,serif;--ui-h-weight:600;--ui-h-lh:1.02;--ui-h-ls:-.7px;--ui-size:15px;--ui-lh:1.55;--ui-x-family:Arial,sans-serif}
@media (min-width:900px) {
  body[class*="vm-page-"] {--ui-size:15.5px}
}

/* cookie banner: bottom sheet on phones, bottom-left card on desktop, above the following bar */
body #apo-consent-banner {position:fixed;inset:auto 0 0 0;z-index:60;box-sizing:border-box;width:auto;max-width:none;max-height:none;overflow:visible;margin:0;padding:18px max(16px,env(safe-area-inset-left),env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom,0px));background:var(--ui-bg);color:var(--ui-text);border:0;border-top:1px solid var(--ui-line);border-radius:0;box-shadow:0 -16px 40px rgba(7,27,50,.14);font:400 var(--ui-size)/var(--ui-lh) var(--font-sans);text-align:start}
body #apo-consent-banner[hidden] {display:none}
body #apo-consent-banner h2 {margin:0 0 6px;font:var(--ui-h-weight) 20px/var(--ui-h-lh) var(--ui-h-family);letter-spacing:var(--ui-h-ls);color:var(--ui-text);text-transform:none;text-wrap:balance}
body #apo-consent-banner p {margin:0;max-width:70ch;font:400 15px/var(--ui-lh) var(--font-sans);color:var(--ui-muted)}
body #apo-consent-banner p a {color:var(--ui-text);text-decoration:underline}
body :is(#apo-consent-banner,#apo-consent-preferences) .apo-consent-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
body #apo-consent-preferences .apo-consent-actions {margin-top:16px}
body :is(#apo-consent-banner,#apo-consent-preferences) .apo-consent-actions button {appearance:none;box-sizing:border-box;min-height:0;padding:13px 18px;border-radius:10px;font:700 15px/1 var(--font-sans);letter-spacing:normal;text-transform:none;text-align:center;cursor:pointer}
body :is(#apo-consent-banner,#apo-consent-preferences) .apo-consent-actions button:is([data-apo-choice="all"],[data-apo-save]) {background:var(--ui-primary-bg);color:var(--ui-primary-text);border:0}
body #apo-consent-banner .apo-consent-actions button[data-apo-choice="none"] {background:transparent;color:var(--ui-text);border:1px solid var(--ui-text)}
body :is(#apo-consent-banner,#apo-consent-preferences) .apo-consent-actions button:is([data-apo-open],[data-apo-close]) {background:none;color:var(--ui-text);border:0;padding-left:4px;padding-right:4px;text-decoration:underline;text-underline-offset:3px}
@media (min-width:900px) {
  body #apo-consent-banner {inset:auto auto 24px 24px;max-width:520px;padding:22px 24px;border:1px solid var(--ui-line);border-radius:18px}
}

/* one dialog look: bottom sheet on phones, centred on desktop */
body :is(#apo-consent-preferences,#lang-dialog,#experience-dialog,#info-dialog) {position:fixed;inset:0;box-sizing:border-box;width:100%;max-width:min(640px,calc(100vw - 32px));height:fit-content;max-height:calc(100% - 6px - 2em);margin:auto;padding:0;overflow:auto;background:var(--ui-bg);color:var(--ui-text);border:0;border-radius:20px;box-shadow:0 30px 80px rgba(7,27,50,.28);font:400 var(--ui-size)/var(--ui-lh) var(--font-sans);text-align:start}
body #apo-consent-preferences:not([open]),body #lang-dialog:not([open]),body.cv-home :is(#experience-dialog,#info-dialog):not([open]) {display:none}
body :is(#apo-consent-preferences,#lang-dialog,#experience-dialog,#info-dialog)::backdrop {background:rgba(7,27,50,.55);backdrop-filter:blur(2px)}
body #apo-consent-preferences {padding:18px 20px 20px}
body #info-content {padding:18px 20px 20px}
body :is(#apo-consent-preferences,#lang-dialog,#experience-dialog,#info-dialog) h2 {margin:0;font:var(--ui-h-weight) 24px/var(--ui-h-lh) var(--ui-h-family);letter-spacing:var(--ui-h-ls);color:var(--ui-text);text-transform:none;text-wrap:balance}
body :is(#apo-consent-preferences,#info-content) > h2 {display:flex;align-items:center;min-height:40px;padding-right:52px}
body :is(#apo-consent-preferences,#lang-dialog,#experience-dialog,#info-dialog) p {margin:8px 0 0;font:400 15px/var(--ui-lh) var(--font-sans);color:var(--ui-muted)}
body #apo-consent-preferences > .apocv-ui-x + p,body #info-content > h2 + p {margin-top:18px}
body :is(#apo-consent-preferences,#lang-dialog,#info-dialog) .apocv-ui-x,body #info-dialog .dialog-close {position:absolute;top:18px;right:20px;display:block;width:40px;height:40px;padding:0;border:1px solid var(--ui-line);border-radius:50%;background:transparent;box-shadow:none;color:var(--ui-text);font:400 24px/1 var(--ui-x-family);text-align:center;cursor:pointer}
@media (max-width:899px) {
  body :is(#apo-consent-preferences,#lang-dialog,#experience-dialog,#info-dialog) {width:100vw;max-width:none;max-height:88vh;margin:auto 0 0;border-radius:20px 20px 0 0}
}

/* cookie preferences */
body #apo-consent-preferences .apocv-essential {display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:14px 0 6px}
body #apo-consent-preferences .apocv-essential small {display:block;font-size:13px;color:var(--ui-muted)}
body #apo-consent-preferences .apocv-essential > span:last-child {align-self:center;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-muted)}
body #apo-consent-preferences .apo-consent-option {display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;padding:14px 0;border-top:1px solid var(--ui-line);color:inherit;font:inherit;cursor:pointer}
body #apo-consent-preferences .apo-consent-option > span {grid-column:1;grid-row:1}
body #apo-consent-preferences .apo-consent-option strong {font-size:15px;font-weight:700}
body #apo-consent-preferences .apo-consent-option small {display:block;font:400 13px/var(--ui-lh) var(--font-sans);color:var(--ui-muted)}
body #apo-consent-preferences .apo-consent-option input[type="checkbox"] {grid-column:2;grid-row:1 / span 2;appearance:none;-webkit-appearance:none;position:relative;display:block;width:46px;height:28px;margin:0;border-radius:14px;background:var(--ui-line);cursor:pointer;transition:background 160ms}
body #apo-consent-preferences .apo-consent-option input[type="checkbox"]::after {content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform 160ms}
body #apo-consent-preferences .apo-consent-option input[type="checkbox"]:checked {background:var(--ui-on)}
body #apo-consent-preferences .apo-consent-option input[type="checkbox"]:checked::after {transform:translateX(18px)}
body #apo-consent-preferences .apo-consent-option input[type="checkbox"]:focus-visible {outline:2px solid var(--ui-focus);outline-offset:2px}

/* language picker */
body #lang-dialog[open] {display:flex;flex-direction:column;overflow:hidden}
body #lang-dialog .ui-head {display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--ui-line)}
body #lang-dialog .apocv-ui-x {position:static;flex:none;width:auto;min-width:64px;height:44px;padding:0 14px;border-radius:10px;background:var(--ui-primary-bg);color:var(--ui-primary-text);font:700 15px/1 var(--font-sans)}
body #lang-dialog .ui-body {min-height:0;overflow:auto;overscroll-behavior-y:contain;padding:10px 20px 20px}
body #lang-dialog .ui-search {box-sizing:border-box;display:block;width:100%;margin-top:12px;padding:12px 14px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-field);color:var(--ui-text);font:400 16px/var(--ui-lh) var(--font-sans)}
body #lang-dialog .ui-search:focus {outline:2px solid var(--ui-focus);outline-offset:1px}
body #lang-dialog .ui-label {margin:16px 0 8px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ui-muted)}
body #lang-dialog .ui-label[hidden] {display:none}
body #lang-dialog .lang-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
body #lang-dialog .lang-grid button {display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:11px 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ui-text);font:400 15px/var(--ui-lh) var(--font-sans);letter-spacing:normal;text-align:left;text-transform:none;cursor:pointer}
body #lang-dialog .lang-grid button:hover {background:var(--ui-hover)}
body #lang-dialog .lang-grid button.on {border-color:var(--ui-text);font-weight:700}
body #lang-dialog .lang-grid button.on::after {content:"✓"}
body #lang-dialog .ui-empty {display:none}
body #lang-dialog .ui-empty.show {display:block}
@media (max-width:899px) {
  body #lang-dialog[open] {inset:auto 0 var(--picker-bottom,0px);height:88vh;height:88dvh;max-height:calc(var(--picker-visible-height,100dvh) - env(safe-area-inset-top,0px) - 8px);margin:0}
  body #lang-dialog .ui-head,body #lang-dialog .ui-body {padding-inline:max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
  body #lang-dialog .ui-body {padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:900px) {
  body #lang-dialog .lang-grid {grid-template-columns:repeat(3,1fr)}
  body #lang-dialog .ui-body {max-height:70vh;overflow:auto}
}

/* home: experience quick view */
body.cv-home #experience-dialog .dialog-close {position:absolute;top:14px;right:14px;z-index:1;display:block;width:40px;height:40px;padding:0;border:1px solid var(--ui-line);border-radius:50%;background:rgba(255,254,250,.92);box-shadow:none;color:var(--ui-text);font:400 24px/1 var(--font-sans);text-align:center;cursor:pointer}
body.cv-home :is(#experience-dialog,#info-dialog) .dialog-close svg {display:none}
body.cv-home :is(#experience-dialog,#info-dialog) .dialog-close::before {content:"×"}
body.cv-home #experience-dialog .dialog-photo {display:block;width:100%;height:auto;max-height:none;aspect-ratio:16 / 9;object-fit:cover;border-radius:20px 20px 0 0}
body.cv-home #experience-dialog .dialog-copy {padding:10px 20px 20px}
body.cv-home #experience-dialog .eyebrow {display:block;margin:8px 0 0;font:700 15px/var(--ui-lh) var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ui-muted)}
body.cv-home #experience-dialog h2 {margin-top:4px}
body.cv-home #experience-dialog .dialog-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding:0;border:0}
body.cv-home #experience-dialog .dialog-actions a.button {display:block;width:auto;min-height:0;height:auto;padding:13px 18px;border:0;border-radius:10px;background:var(--ui-primary-bg);color:var(--ui-primary-text);font:700 15px/1 var(--font-sans);letter-spacing:normal;text-decoration:underline;box-shadow:none}
body.cv-home #experience-dialog .dialog-actions button.button {display:block;width:auto;min-height:0;height:auto;margin-left:auto;padding:13px 4px;border:0;border-radius:10px;background:none;color:var(--ui-text);font:700 15px/1 var(--font-sans);letter-spacing:normal;text-decoration:underline;text-underline-offset:3px;box-shadow:none}
body.cv-home #experience-dialog .dialog-actions button.button svg {display:none}
body.cv-home #experience-dialog .dialog-actions button.button::before {content:"♡"}
body.cv-home #experience-dialog .dialog-actions button.button[aria-pressed="true"]::before {content:"♥"}
/* the theme sets this size and margin with !important */
body.cv-home #experience-dialog .dialog-note {border:0;padding:0;margin:8px 0 0!important;font:400 15px/var(--ui-lh) var(--font-sans)!important;color:var(--ui-muted)}

/* home: photography credits */
body.cv-home #info-dialog {padding:0}
body.cv-home #info-dialog .credit {padding:12px 0;margin:0;border-top:1px solid var(--ui-line);border-bottom:0}
body.cv-home #info-dialog .credit h3 {margin:0;font:700 15px/1.15 var(--font-sans);letter-spacing:-.3px;color:var(--ui-text)}
body.cv-home #info-dialog .credit p {margin:4px 0 0;font:400 13.5px/var(--ui-lh) var(--font-sans)}
body.cv-home #info-dialog .credit a {color:var(--ui-text);text-decoration:underline}

/* home: toast */
body.cv-home #toast {left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:70;max-width:calc(100% - 30px);padding:10px 16px;border-radius:21px;background:var(--ui-text);color:var(--ui-bg);box-shadow:none;font:600 14px/var(--ui-lh) var(--font-sans);opacity:0;pointer-events:none;transition:opacity 200ms,transform 200ms}
body.cv-home #toast.show {opacity:1;transform:translate(-50%,0)}
@media (min-width:900px) {
  body.cv-home #toast {bottom:32px}
}
