/* Shared integration components for Ocean King Distillers.
   Used by the homepage and every generated page. Styles the consent panel,
   form status, stockist directory and consent-gated media frames built by
   /assets/js/integrations.js. Brand palette only: navy #050a30, deep #070b18,
   yellow #ffeb00, gold #c8a96a, cream #f6f2e9. */

/* Reopening the consent panel is the in-flow [data-consent-open] footer button, so
   no fixed "Cookie preferences" widget ships (it overlapped footer and nav controls). */

.okd-consent{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:70;width:min(420px,calc(100vw - 36px));max-height:min(78dvh,640px);overflow:auto;overscroll-behavior:contain;padding:26px;background:var(--surface,#0e1426);color:var(--cream,#f6f2e9);border:1px solid var(--gold,#c8a96a);box-shadow:0 26px 40px rgba(3,6,18,.5)}
.okd-consent[hidden]{display:none!important}
.okd-consent h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:26px;line-height:1.1;letter-spacing:-.02em;margin:0 0 12px;color:var(--cream,#f6f2e9)}
.okd-consent h2:focus{outline:2px solid var(--yellow,#ffeb00);outline-offset:4px}
.okd-consent>p{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--muted,#b9bdcc)}
.okd-consent-settings{border-top:1px solid var(--line,#30354b);border-bottom:1px solid var(--line,#30354b);margin-bottom:18px}
.okd-consent-settings summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-size:13px;letter-spacing:.02em;color:var(--gold,#c8a96a)}
.okd-consent-settings summary::-webkit-details-marker{display:none}
.okd-consent-settings summary:after{content:'+';font-size:18px;color:var(--gold,#c8a96a)}
.okd-consent-settings[open] summary:after{content:'\2013'}
.okd-consent-option{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:13px;line-height:1.5;color:var(--muted,#b9bdcc)}
.okd-consent-option input{accent-color:var(--yellow,#ffeb00);width:18px;height:18px;flex-shrink:0;margin:2px 0}
.okd-consent-actions{display:flex;flex-wrap:wrap;gap:8px}
.okd-button{min-height:44px;padding:11px 15px;background:transparent;color:var(--cream,#f6f2e9);border:1px solid var(--line,#30354b);font:500 13px/1 Archivo,Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.okd-button:hover{border-color:var(--cream,#f6f2e9)}
.okd-button:first-child,.okd-button:last-child{background:var(--yellow,#ffeb00);color:var(--navy,#050a30);border-color:var(--yellow,#ffeb00)}
.okd-button:first-child:hover,.okd-button:last-child:hover{background:var(--cream,#f6f2e9);border-color:var(--cream,#f6f2e9)}
.okd-consent-status{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--gold,#c8a96a);min-height:20px}
.okd-consent-status[hidden]{display:none!important}
.okd-consent-status:focus{outline:2px solid var(--yellow,#ffeb00);outline-offset:4px}

.okd-form-status,[data-form-status]{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--gold,#c8a96a);min-height:22px}
.okd-form-status:focus,[data-form-status]:focus{outline:2px solid var(--yellow,#ffeb00);outline-offset:4px}

.okd-stockist{padding:20px 0;border-bottom:1px solid var(--line,#30354b)}
.okd-stockist h3{font-family:Archivo,Arial,sans-serif;font-size:17px;font-weight:600;margin:0 0 6px;color:var(--cream,#f6f2e9)}
.okd-stockist p{margin:0;font-size:15px;line-height:1.6;color:var(--muted,#b9bdcc)}
.okd-text-link{display:inline-block;margin-top:10px;padding:8px 0;color:var(--gold,#c8a96a);text-decoration:none;border-bottom:1px solid var(--gold,#c8a96a);font-size:14px;min-height:44px}
.okd-text-link:hover{color:var(--cream,#f6f2e9);border-color:var(--cream,#f6f2e9)}

.okd-media-frame{width:100%;aspect-ratio:16/10;border:1px solid var(--line,#30354b);background:var(--deep,#070b18);margin-top:18px}
.okd-media-status{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--muted,#b9bdcc)}

@media(max-width:600px){
  .okd-consent{left:0;right:0;bottom:0;width:100%;max-height:82dvh;border-left:0;border-right:0;border-bottom:0;padding:22px 20px calc(22px + env(safe-area-inset-bottom))}
}
/* The homepage shows a fixed bottom navigation at ≤1100px (and on coarse-pointer
   tablets up to 1366px). The consent surfaces must sit above it so the bar stays
   usable before and after a privacy choice. */
@media (max-width:1100px), (max-width:1366px) and (hover:none) and (pointer:coarse){
  .okd-consent{bottom:calc(78px + env(safe-area-inset-bottom));max-height:calc(100dvh - 78px - env(safe-area-inset-bottom) - 20px)}
}
@media(prefers-reduced-motion:reduce){
  .okd-consent,.okd-button,.okd-text-link{transition:none}
}