/* ============================================================
   MirAmi Trading — Consent Manager UI (dark glass)
   ============================================================ */

.cc-root *{ box-sizing:border-box; }
.cc-root{ font-family:var(--sans, system-ui, sans-serif); }

.cc-banner,
.cc-modal{ display:none; }
.cc-root.is-active .cc-banner{ display:block; }
.cc-root.is-modal .cc-banner{ display:none; }
.cc-root.is-modal .cc-modal{ display:flex; }

/* ---------- Banner ---------- */
.cc-banner{
  position:fixed; left:50%; bottom:clamp(12px,3vw,28px); transform:translateX(-50%);
  z-index:10000; width:min(720px, calc(100vw - 24px));
  background:linear-gradient(160deg, rgba(16,30,48,.92), rgba(9,18,30,.94));
  color:#eaf1f8; border:1px solid rgba(120,160,200,.22);
  border-radius:18px; box-shadow:0 30px 80px -28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  padding:clamp(20px,3vw,30px);
  animation:cc-in .6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cc-in{ from{ opacity:0; transform:translate(-50%,20px); } to{ opacity:1; transform:translate(-50%,0); } }

.cc-banner__title{ font-family:var(--serif, Georgia, serif); font-size:1.4rem; line-height:1.2; margin:0 0 .5rem; font-weight:500; }
.cc-banner__text{ font-size:.92rem; line-height:1.6; color:#aec2d6; margin:0 0 1.3rem; }
.cc-banner__text a{ color:#8fc1de; text-decoration:underline; text-underline-offset:2px; }

.cc-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.cc-actions .cc-btn{ flex:1 1 auto; }

.cc-btn{
  appearance:none; cursor:pointer; font-family:inherit; font-size:.92rem; font-weight:600;
  padding:.9em 1.4em; border-radius:999px; border:1px solid transparent;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.cc-btn:hover{ transform:translateY(-2px); }
.cc-btn--accept{ background:linear-gradient(120deg,#17718a,#5aa7bd); color:#fff; border-color:transparent; box-shadow:0 12px 30px -12px rgba(23,113,138,.7); }
.cc-btn--accept:hover{ box-shadow:0 16px 40px -12px rgba(23,113,138,.9); }
.cc-btn--reject{ background:rgba(255,255,255,.04); color:#eaf1f8; border-color:rgba(150,180,210,.35); }
.cc-btn--reject:hover{ border-color:rgba(150,180,210,.7); }
.cc-btn--settings{ background:transparent; color:#aec2d6; border-color:transparent; text-decoration:underline; text-underline-offset:3px; flex:0 0 auto; }
.cc-btn--settings:hover{ color:#fff; transform:none; }

/* ---------- Modal ---------- */
.cc-modal{
  position:fixed; inset:0; z-index:10001; display:none;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(4,10,18,.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.cc-modal__box{
  background:linear-gradient(160deg, rgba(16,30,48,.96), rgba(9,18,30,.98));
  color:#eaf1f8; border:1px solid rgba(120,160,200,.22); border-radius:20px; width:min(660px,100%);
  max-height:90vh; overflow:auto; padding:clamp(22px,3vw,38px);
  box-shadow:0 40px 100px -28px rgba(0,0,0,.85);
}
.cc-modal__title{ font-family:var(--serif, Georgia, serif); font-size:1.8rem; margin:0 0 .4rem; font-weight:500; }
.cc-modal__lead{ font-size:.92rem; color:#aec2d6; line-height:1.6; margin:0 0 1.4rem; }

.cc-cat{ border-top:1px solid rgba(120,160,200,.16); padding:1.15rem 0; display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:start; }
.cc-cat__name{ font-weight:600; font-size:1rem; color:#fff; }
.cc-cat__desc{ grid-column:1 / -1; font-size:.86rem; color:#9fb4c8; line-height:1.55; margin-top:.2rem; }

/* toggle */
.cc-switch{ position:relative; width:48px; height:27px; flex:0 0 auto; }
.cc-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.cc-switch__track{ position:absolute; inset:0; background:rgba(150,180,210,.3); border-radius:999px; transition:background .25s ease; pointer-events:none; }
.cc-switch__track::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; background:#eaf1f8; border-radius:50%; transition:transform .25s ease; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.cc-switch input:checked + .cc-switch__track{ background:linear-gradient(120deg,#17718a,#5aa7bd); }
.cc-switch input:checked + .cc-switch__track::after{ transform:translateX(21px); }
.cc-switch input:disabled + .cc-switch__track{ background:rgba(150,180,210,.18); }

.cc-modal__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.6rem; }
.cc-modal__actions .cc-btn{ flex:1 1 auto; }

@media (max-width:520px){
  .cc-actions{ flex-direction:column; }
  .cc-btn--settings{ order:3; }
}

@media (prefers-reduced-motion: reduce){
  .cc-banner{ animation:none; }
  .cc-btn:hover{ transform:none; }
  .cc-switch__track, .cc-switch__track::after{ transition:none; }
}