/* ══════════════ COOKIE CONSENT — banner + preference modal ══════════════ */

/* Slim, content-sized bottom bar — explicitly isolated from the modal's
   full-screen treatment below, and !important-guarded on the hidden state
   so a stray specificity conflict can never leave it (or the modal) stuck
   full-height/full-screen when only the banner should be showing. */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:2000;height:auto;max-height:none;width:auto;background:#fff;border-top:1px solid #EDE6E5;box-shadow:0 -8px 30px rgba(0,0,0,0.10);padding:16px var(--px);display:none;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;box-sizing:border-box;}
.cc-banner:not(.cc-visible){display:none !important;}
.cc-banner.cc-visible{display:flex;}
.cc-banner-text{flex:1 1 320px;font-size:13px;line-height:1.5;color:var(--black);margin:0;}
.cc-banner-text a{color:var(--black);text-decoration:underline;}
.cc-banner-actions{display:flex;gap:10px;flex-wrap:wrap;}
.cc-btn{border:1px solid var(--black);border-radius:8px;padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;background:#fff;color:var(--black);}
.cc-btn-accept{background:var(--black);color:#fff;border-color:var(--black);}
.cc-btn-accept:hover{opacity:0.85;}
.cc-btn-reject,.cc-btn-customize{background:#fff;color:var(--black);border-color:var(--black);}
.cc-btn-reject:hover,.cc-btn-customize:hover{background:#F3F3F3;}

/* Only the Customize modal is allowed a full-screen/full-height treatment. */
.cc-modal{position:fixed;inset:0;z-index:2100;display:none;align-items:center;justify-content:center;padding:20px;}
.cc-modal:not(.cc-open){display:none !important;}
.cc-modal.cc-open{display:flex;}
.cc-modal-backdrop{position:absolute;inset:0;background:rgba(24,24,24,0.55);}
.cc-modal-card{position:relative;background:#fff;border-radius:14px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,0.25);}
.cc-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.cc-modal-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:600;color:var(--black);margin:0;}
.cc-modal-close{background:none;border:none;cursor:pointer;color:var(--gray);padding:4px;}
.cc-modal-sub{font-size:13px;color:var(--gray);margin:4px 0 20px;}
.cc-toggle-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid #EFEFEF;}
.cc-toggle-row:first-of-type{border-top:none;}
.cc-toggle-label{font-size:14px;font-weight:600;color:var(--black);margin:0 0 4px;}
.cc-toggle-desc{font-size:12.5px;color:var(--gray);margin:0;line-height:1.5;}
.cc-switch{position:relative;flex-shrink:0;width:40px;height:22px;}
.cc-switch input{opacity:0;width:0;height:0;}
.cc-switch-track{position:absolute;inset:0;background:#D9D9D9;border-radius:22px;transition:background 0.2s;cursor:pointer;}
.cc-switch-track::before{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
.cc-switch input:checked+.cc-switch-track{background:var(--red);}
.cc-switch input:checked+.cc-switch-track::before{transform:translateX(18px);}
.cc-switch input:disabled+.cc-switch-track{opacity:0.5;cursor:not-allowed;}
.cc-modal-actions{display:flex;gap:10px;margin-top:20px;}
.cc-modal-actions .cc-btn{flex:1;}

@media (max-width:600px){
  .cc-banner{padding:14px 16px;flex-direction:column;align-items:stretch;}
  /* .cc-banner-text's flex:1 1 320px was written for the row layout, where
     flex-basis maps to width. In this column layout flex-basis maps to
     height instead, so without this reset the text block claims ~320px of
     vertical space before shrinking — that's the empty-gap bug. */
  .cc-banner-text{flex:0 1 auto;}
  .cc-banner-actions{justify-content:stretch;}
  .cc-banner-actions .cc-btn{flex:1;}
}

/* Keep the idle-scroll WhatsApp prompt clear of the cookie banner. The offset
   is set by cookie-consent.js from the banner's actual rendered height (via
   --cc-banner-offset), not a hardcoded guess, so it stays correct regardless
   of how many lines the banner text wraps to on a given viewport. */
body.cc-banner-open .idle-wa-prompt{bottom:calc(var(--cc-banner-offset, 72px) + 16px);}