/* CleverUp — Календарь онлайн-записи
   Брендовые токены из styles.css (с фолбэками для автономности). */

.cub-root{
  --cub-teal:      var(--teal, #5BBAB5);
  --cub-teal-dark: var(--teal-dark, #3A9590);
  --cub-teal-ultra:var(--teal-ultra, #F2FBFA);
  --cub-line:      var(--gray-light, #E8ECEE);
  --cub-muted:     var(--text-muted, #6B7C87);
  --cub-gold:      #E0A33E;
  --cub-gold-dark: #B8791F;
  --cub-r:         var(--r, 14px);
  font-family: inherit;
}

/* ── ЛЕНТА ДНЕЙ (горизонтальная прокрутка) ────────────────────── */
.cub-grid{
  display:flex; gap:12px;
  overflow-x:auto; overflow-y:hidden;
  padding:2px 2px 12px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.cub-grid::-webkit-scrollbar{ height:8px; }
.cub-grid::-webkit-scrollbar-track{ background:transparent; }
.cub-grid::-webkit-scrollbar-thumb{ background:#d6dde0; border-radius:8px; }
.cub-grid::-webkit-scrollbar-thumb:hover{ background:#c2cbcf; }

.cub-day{
  flex:0 0 auto; width:184px;
  scroll-snap-align:start;
  background:#fff; border:1px solid var(--cub-line);
  border-radius:var(--cub-r); padding:13px 11px;
  display:flex; flex-direction:column;
  box-shadow:0 2px 10px rgba(40,60,70,.04);
}
.cub-day-head{
  display:flex; align-items:baseline; gap:7px;
  padding-bottom:10px; margin-bottom:11px;
  border-bottom:1px solid var(--cub-line);
}
.cub-day-wd{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--cub-teal-dark); background:var(--cub-teal-ultra);
  padding:3px 8px; border-radius:20px;
}
.cub-day-date{ font-weight:600; font-size:.92rem; color:#28323a; }

/* окна — двухстрочные плитки с заливкой по состоянию */
.cub-slots{ display:flex; flex-direction:column; gap:7px; }
.cub-slot{
  font:inherit; width:100%; text-align:left;
  display:flex; flex-direction:column; gap:1px;
  padding:8px 11px; border-radius:10px; line-height:1.2;
  border:1.5px solid transparent; transition:.14s ease;
}
.cub-slot-time{ font-size:.86rem; font-weight:700; white-space:nowrap; }
.cub-slot-meta{ font-size:.74rem; font-weight:600; white-space:nowrap; }

/* свободно — сразу видно бирюзовой заливкой */
.cub-free{ cursor:pointer; background:#E7F5F3; border-color:#B8E2DD; }
.cub-free .cub-slot-time{ color:#1d2a31; }
.cub-free .cub-slot-meta{ color:var(--cub-teal-dark); }
.cub-free:hover{ background:var(--cub-teal); border-color:var(--cub-teal); transform:translateY(-1px); box-shadow:0 7px 18px rgba(91,186,181,.32); }
.cub-free:hover .cub-slot-time, .cub-free:hover .cub-slot-meta{ color:#fff; }

/* счастливые часы — золотая заливка */
.cub-happy{ background:#FCF3DD; border-color:#EFD9A6; }
.cub-happy .cub-slot-meta{ color:var(--cub-gold-dark); }
.cub-happy:hover{ background:var(--cub-gold); border-color:var(--cub-gold); box-shadow:0 7px 18px rgba(224,163,62,.32); }
.cub-happy:hover .cub-slot-time, .cub-happy:hover .cub-slot-meta{ color:#fff; }

/* занято — приглушённый серый */
.cub-busy{ background:#EEF1F2; border-color:#EEF1F2; cursor:default; }
.cub-busy .cub-slot-time{ color:#9aa7af; }
.cub-busy .cub-slot-meta{ color:#aeb8bf; }

/* легенда / подсказки */
.cub-legend{ margin:14px 0 0; font-size:.82rem; color:var(--cub-muted); display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.cub-dot{ display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:middle; }
.cub-dot-happy{ background:#FCF3DD; border:1.5px solid var(--cub-gold); }
.cub-dot-free{ background:#E7F5F3; border:1.5px solid var(--cub-teal); }
.cub-dot-busy{ background:#EEF1F2; border:1.5px solid #d3dadd; }
.cub-scrollhint{ margin:7px 0 0; font-size:.8rem; color:var(--cub-muted); }
.cub-demo{ display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  color:#9a6a00; background:#fdf2d6; padding:2px 8px; border-radius:6px; }
.cub-hint{ margin:8px 0 0; font-size:.82rem; color:var(--cub-muted); }
.cub-loading{ padding:30px 0; color:var(--cub-muted); font-size:.92rem; }

/* ── ПУСТО / ОШИБКА ───────────────────────────────────────────── */
.cub-empty{ text-align:center; padding:34px 18px; background:var(--cub-teal-ultra);
  border:1px solid var(--cub-line); border-radius:var(--cub-r); }
.cub-empty-ic{ font-size:2rem; margin-bottom:6px; }
.cub-empty p{ margin:4px 0; color:#28323a; }
.cub-empty-sub{ color:var(--cub-muted) !important; font-size:.9rem; }
.cub-empty-act{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px; }

.cub-btn{ display:inline-flex; align-items:center; justify-content:center; font-size:.88rem; font-weight:600;
  text-decoration:none; padding:10px 18px; border-radius:10px; cursor:pointer; border:none; }
.cub-btn-tg{ background:var(--cub-teal); color:#fff; }
.cub-btn-tg:hover{ background:var(--cub-teal-dark); }
.cub-btn-ghost{ background:#fff; color:var(--cub-teal-dark); border:1.5px solid var(--cub-line); }
.cub-btn-ghost:hover{ border-color:var(--cub-teal); }

/* ── МОДАЛКА ──────────────────────────────────────────────────── */
.cub-overlay{ position:fixed; inset:0; z-index:9999; display:none; align-items:flex-start; justify-content:center;
  background:rgba(20,32,38,.55); backdrop-filter:blur(3px); padding:24px 16px; overflow-y:auto; }
.cub-overlay.open{ display:flex; }
.cub-modal{ position:relative; width:100%; max-width:460px; margin:auto; background:#fff;
  border-radius:var(--r-lg, 22px); box-shadow:0 30px 80px rgba(20,32,38,.30); animation:cubIn .22s ease; }
@keyframes cubIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.cub-modal-close{ position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; border:none;
  border-radius:50%; background:#f0f3f4; color:#5a6b75; font-size:1rem; cursor:pointer; }
.cub-modal-close:hover{ background:#e4e9eb; }
.cub-modal-body{ padding:26px 24px 24px; }

.cub-when{ display:flex; gap:12px; align-items:center; background:var(--teal-ultra, #F2FBFA);
  border:1px solid var(--teal-light, #D8F0EE); border-radius:12px; padding:12px 14px; margin-bottom:18px; }
.cub-when-h{ background:#FCF6E9; border-color:#F1E2C0; }
.cub-when-ic{ font-size:1.5rem; }
.cub-when-lbl{ font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted,#6B7C87); }
.cub-when-val{ font-size:1.02rem; color:#1f2a31; }
.cub-when-val b{ color:var(--teal-dark, #3A9590); }
.cub-when-price{ font-size:.86rem; font-weight:700; color:var(--teal-dark,#3A9590); margin-top:3px; }
.cub-when-h .cub-when-price{ color:#B8791F; }
.cub-when-h .cub-when-val b{ color:#B8791F; }

.cub-form{ display:flex; flex-direction:column; gap:13px; }
.cub-row{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.cub-fi{ display:flex; flex-direction:column; gap:5px; }
.cub-fi > span{ font-size:.78rem; font-weight:600; color:var(--text-muted,#6B7C87); }
.cub-fi input, .cub-fi textarea{ font:inherit; font-size:.94rem; color:#1f2a31;
  border:1.5px solid var(--gray-light,#E8ECEE); border-radius:10px; padding:11px 13px; width:100%;
  box-sizing:border-box; background:#fff; transition:border-color .15s; }
.cub-fi input:focus, .cub-fi textarea:focus{ outline:none; border-color:var(--teal,#5BBAB5); }
.cub-fi textarea{ resize:vertical; min-height:48px; }

.cub-consent{ display:flex; align-items:flex-start; gap:9px; font-size:.82rem; color:var(--text-muted,#6B7C87); cursor:pointer; }
.cub-consent input{ margin-top:3px; flex-shrink:0; accent-color:var(--teal,#5BBAB5); width:16px; height:16px; }
.cub-consent a{ color:var(--teal-dark,#3A9590); }

.cub-submit{ font:inherit; font-size:1rem; font-weight:700; color:#fff; background:var(--teal,#5BBAB5);
  border:none; border-radius:12px; padding:14px; cursor:pointer; margin-top:4px; transition:.18s; }
.cub-submit:hover{ background:var(--teal-dark,#3A9590); transform:translateY(-1px); box-shadow:0 10px 28px rgba(91,186,181,.32); }
.cub-submit:disabled{ opacity:.7; cursor:default; transform:none; box-shadow:none; }
.cub-note{ margin:2px 0 0; font-size:.78rem; color:var(--text-muted,#6B7C87); text-align:center; }

/* ── РЕЗУЛЬТАТ ────────────────────────────────────────────────── */
.cub-result{ text-align:center; padding:14px 6px; }
.cub-result-ic{ width:62px; height:62px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:1.7rem; background:var(--teal-light,#D8F0EE); color:var(--teal-dark,#3A9590); }
.cub-result-taken .cub-result-ic{ background:#fdf2d6; color:#9a6a00; }
.cub-result-error .cub-result-ic{ background:#fde8e8; color:#c0392b; }
.cub-result h4{ margin:0 0 6px; font-size:1.18rem; color:#1f2a31; }
.cub-result p{ margin:0 auto 14px; font-size:.92rem; color:var(--text-muted,#6B7C87); max-width:330px; }
.cub-result .cub-empty-act{ margin-top:0; }

/* ── АДАПТИВ ──────────────────────────────────────────────────── */
@media (max-width:560px){
  .cub-day{ width:150px; padding:12px 9px; }
  .cub-slot{ padding:7px 9px; }
  .cub-row{ grid-template-columns:1fr; }
  .cub-modal-body{ padding:22px 18px 20px; }
}