/* ══════════════════════════════════
   COOKIE CONSENT (PDPA) — js/cookie-consent.js
   z-index สูงกว่า float widget / mobile bar (9999) และ festival popup (10000)
══════════════════════════════════ */
.cc-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:10001;
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;gap:24px;
  padding:20px 24px;border-radius:var(--r-lg);
  background:var(--dark);color:rgba(255,255,255,.82);
  border:1px solid rgba(0,181,200,.25);box-shadow:var(--sh-lg);
  font-size:.86rem;line-height:1.6;
  animation:cc-up .35s ease-out;
}
.cc-banner[hidden],.cc-overlay[hidden]{display:none}
.cc-banner-text{flex:1;min-width:0}
.cc-banner-text strong{display:block;color:var(--white);font-size:.98rem;margin-bottom:4px}
.cc-actions{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap}
@keyframes cc-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.cc-btn{
  font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
  padding:10px 18px;border-radius:100px;border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s;white-space:nowrap;
}
.cc-btn-primary{background:var(--teal);color:var(--white)}
.cc-btn-primary:hover{background:var(--teal-d)}
.cc-btn-outline{background:transparent;color:inherit;border-color:rgba(255,255,255,.3)}
.cc-btn-outline:hover{border-color:var(--teal);color:var(--teal)}
.cc-btn-ghost{background:transparent;color:inherit;text-decoration:underline;text-underline-offset:3px;padding-left:8px;padding-right:8px}
.cc-btn-ghost:hover{color:var(--teal)}
.cc-btn:focus-visible,.cc-x:focus-visible,.cc-footer-link:focus-visible,.cc-switch input:focus-visible+.cc-slider{
  outline:2px solid var(--teal);outline-offset:2px;
}

/* ─── settings dialog ─── */
.cc-overlay{
  position:fixed;inset:0;z-index:10002;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(17,19,24,.6);
}
.cc-panel{
  width:100%;max-width:560px;max-height:calc(100vh - 32px);overflow-y:auto;
  background:var(--white);color:var(--charcoal);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:24px;
  font-size:.88rem;line-height:1.6;
}
.cc-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.cc-panel-head h2{font-size:1.15rem;color:var(--dark)}
.cc-x{
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  background:var(--light);color:var(--charcoal);font-size:1.4rem;line-height:1;
}
.cc-x:hover{background:var(--teal-l);color:var(--teal-d)}
.cc-intro{color:var(--gray);margin-bottom:16px}
.cc-row{padding:14px 0;border-top:1px solid #E5E7EB}
.cc-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cc-row-title{font-weight:700;color:var(--dark)}
.cc-row-body{color:var(--gray);font-size:.82rem;margin-top:4px}
.cc-always{font-size:.78rem;font-weight:700;color:var(--teal-d);white-space:nowrap}
.cc-panel-actions{margin-top:18px;justify-content:flex-end}
.cc-panel .cc-btn-outline{color:var(--charcoal);border-color:#D1D5DB}
.cc-panel .cc-btn-outline:hover{border-color:var(--teal);color:var(--teal-d)}

.cc-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;cursor:pointer}
.cc-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cc-slider{position:absolute;inset:0;border-radius:24px;background:#D1D5DB;transition:background .2s;pointer-events:none}
.cc-slider::before{
  content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;
  background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s;
}
.cc-switch input:checked+.cc-slider{background:var(--teal)}
.cc-switch input:checked+.cc-slider::before{transform:translateX(20px)}

body.cc-lock{overflow:hidden}

/* ลิงก์ "ตั้งค่าคุกกี้" ในฟุตเตอร์ */
.cc-footer-link{
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;
}
.cc-footer-link:hover{color:var(--teal)}

@media (max-width:768px){
  .cc-banner{flex-direction:column;align-items:stretch;gap:14px;left:12px;right:12px;bottom:12px;padding:18px}
  .cc-actions{display:grid;grid-template-columns:1fr 1fr}
  .cc-banner .cc-btn-ghost{grid-column:1 / -1;order:3}
  .cc-panel-actions{grid-template-columns:1fr}
  .cc-panel{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  .cc-banner{animation:none}
  .cc-slider,.cc-slider::before{transition:none}
}