:root {
  --cc-bg:#ffffff;            /* фон баннера и модалки */
  --cc-fg:#222;               /* основной текст */
  --cc-muted:#555;            /* второстепенный текст */
  --cc-panel:#fff;
  --cc-border:#ddd;
  --cc-accent:#3291d5;        /* фирменный акцент */
  --cc-shadow:0 8px 30px rgba(0,0,0,.15);
  --cc-radius:14px;
}

.cc-root {
  position:fixed; inset:0; pointer-events:none;
  z-index:2147483000;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}

/* Banner */
.cc-banner {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  max-width:740px; width:calc(100% - 32px);
  background:var(--cc-bg); color:var(--cc-fg);
  border-radius:4px;
  box-shadow:var(--cc-shadow);
  padding:18px;
  display:flex; gap:16px; align-items:center;
  pointer-events:auto;
}
.cc-title{font-weight:700; font-size:16px; margin-bottom:6px}
.cc-desc{color:var(--cc-muted); font-size:14px}
.cc-text{flex:1; min-width:0;}
.cc-actions{
  margin-left:auto;
  display:flex; gap:10px;
  flex-wrap:nowrap;             /* в ряд */
  flex:0 0 auto;
}
.cc-btn{
  background:#f9f9f9;
  color:var(--cc-fg);
  border:1px solid var(--cc-border);
  padding:10px 12px;
  border-radius:4px;
  cursor:pointer;
  font-weight:600;
  max-width:100%;
  transition:.2s;
  white-space:nowrap;           /* не переносить текст */
  line-height:1;
}
.cc-btn-primary{
  background:var(--cc-accent);
  color:#fff;
  border-color:var(--cc-accent);
}
.cc-btn:hover{filter:brightness(1.05)}

/* Modal */
.cc-modal{position:fixed; inset:0; display:none;}
.cc-modal.is-open{display:grid; place-items:center; pointer-events:auto;}
.cc-modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.4)}
.cc-modal__panel{
  position:relative; width:min(560px, calc(100% - 24px)); max-height:90vh; overflow:auto;
  background:var(--cc-panel); color:var(--cc-fg);
  border-radius:4px; box-shadow:var(--cc-shadow);
  padding:18px 18px 14px; outline:none;
}
.cc-modal__header{display:flex; align-items:center; gap:8px; padding:6px 6px 12px}
.cc-modal__title{font-size:22px; font-weight:800; color:var(--cc-accent);}
.cc-back{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; background:#f0f0f0; color:var(--cc-fg);
  border:1px solid var(--cc-border); cursor:pointer}
.cc-lead{color:var(--cc-muted); margin:0 0 10px}

.cc-group{border-top:1px solid var(--cc-border)}

/* Аккордеон с иконкой + / – */
.cc-accordion{
  position:relative;
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:transparent; color:var(--cc-fg);
  border:0; padding:14px 4px; font-size:16px; cursor:pointer;
  line-height:1.2; min-height:32px;
}
.cc-accordion > span:first-child{
  position:relative;
  padding-left:22px;                  /* место под значок */
}
/* базовый «плюс»: горизонтальная и вертикальная линии */
.cc-accordion > span:first-child:before,
.cc-accordion > span:first-child:after{
  content:"";
  position:absolute; left:0; top:50%;
  background:var(--cc-muted);
  transition:all .2s ease;
}
.cc-accordion > span:first-child:before{ /* горизонтальная — минус */
  width:12px; height:2px; transform:translateY(-50%);
}
.cc-accordion > span:first-child:after{  /* вертикальная — к ней добавляется плюс */
  width:2px; height:12px; left:5px; transform:translateY(-50%);
}
/* при раскрытии оставляем только «минус» и подкрашиваем его */
.cc-accordion[aria-expanded="true"] > span:first-child:after{ opacity:0; }
.cc-accordion[aria-expanded="true"] > span:first-child:before{ background:var(--cc-accent); }

.cc-badge{font-size:12px; color:var(--cc-muted)}
.cc-panel{color:var(--cc-muted); font-size:14px; padding:0 4px 14px}

/* Switch (тумблер) — выравнивание по центру */
.cc-switch{
  position:relative;
  display:inline-flex;          /* вертикальное центрирование контейнера */
  align-items:center;
  justify-content:flex-end;
  width:45px; height:28px;
  vertical-align:middle;
}
.cc-switch input{display:none}
.cc-switch label{
  position:absolute; inset:0;
  display:block;
  background:#ccc; border-radius:16px; cursor:pointer; transition:.2s;
}
.cc-switch label:after{
  content:""; position:absolute; left:3px; top:50%;
  width:20px; height:20px; border-radius:50%;
  background:#fff; transition:.2s;
  transform:translate(0,-48%);  /* строго по центру */
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.cc-switch input:checked + label{background:var(--cc-accent);}
.cc-switch input:checked + label:after{transform:translate(20px,-50%); background:#fff}

.cc-modal__footer{
  position:sticky; bottom:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0, #fff 30%);
  padding-top:18px;
  display:flex; justify-content:flex-end; gap:10px;
}

/* Мобильная адаптация: кнопки в столбик, НО надпись не переносим */
@media (max-width:520px){
  .cc-banner{flex-direction:column; align-items:stretch}
  .cc-actions{
    width:100%;
    flex-wrap:wrap;             /* переносим сами кнопки, не текст */
    gap:8px;
  }
  .cc-btn{
    flex:1 0 100%;              /* каждая на всю ширину */
    text-align:center;
  }
}


/* Очень маленькие экраны: уменьшаем текст, чтобы не ломался */
@media (max-width: 376px) {
  .cc-modal__title {
    font-size: 18px;
  }
  .cc-accordion {
    font-size: 14px;
  }
  .cc-panel,
  .cc-lead {
    font-size: 12px;
  }
  .cc-btn {
    font-size: 13px;
    padding: 8px 10px;
  }
}


/* Экраны ≤ 321px */
@media (max-width: 321px) {
  .cc-modal__body,
  .cc-panel,
  .cc-lead,
  .cc-accordion,
  .cc-modal__title {
    text-align: left;   /* весь текст по левому краю */
  }
  .cc-btn {
    text-align: left;   /* кнопки тоже встают по левому */
  }
}


/* Мобильная версия: кнопки в столбик */
@media (max-width: 520px) {
  .cc-modal__footer {
    flex-direction: column-reverse;   /* кнопки друг под другом */
    align-items: stretch;     /* на всю ширину */
  }
  .cc-modal__footer .cc-btn {
    width: 100%;
    text-align: center;
  }
}