/* wizard/assets/wizard.css */

/* Лёгкая настройка позиционирования */
:root{
    --wiz-logo-w:130px;
    --wiz-logo-h:38px;
    --wiz-logo-mt:50px;
    --wiz-logo-mb:50px;
    --wiz-logo-align:center; /* center | flex-start | flex-end */
    --wiz-max-w: 720px;

    --wiz-black:#000;
    --wiz-text:#333;
    --wiz-muted:#6c757d;
    --wiz-border:#d8d8d8;
    --wiz-card-bg: rgba(255,255,255,.92);

    /* фон задаётся inline: --wiz-bg-url: url(...) */
    --wiz-bg-url: none;
}

/* фикс проблемы мобильного viewport */
.wizard-body{
    margin:0;
    min-height: 100vh;
    min-height: 100svh;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--wiz-text);
    position: relative;
    overflow-x: hidden;
}

/* слой фона отдельно (чтобы не “сыпался” при масштабировании) */
.wizard-bg{
    position: fixed;
    inset: 0;
    background-image: var(--wiz-bg-url);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: translateZ(0);
    will-change: transform;
    z-index: -2;
}

/* лёгкое затемнение, чтобы карточка читалась */
.wizard-body::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.18);
    z-index: -1;
}

/* общий контейнер */
.wizard-wrap{
    min-height: 100vh;
    min-height: 100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding: 0 12px 40px;
}

/* header */
.wizard-header{
    width: 100%;
    max-width: var(--wiz-max-w);
    display:flex;
    justify-content: var(--wiz-logo-align);
    padding-top: var(--wiz-logo-mt);
    padding-bottom: var(--wiz-logo-mb);
}

.wizard-logo-link{ display:inline-flex; }
.wizard-logo{
    width: var(--wiz-logo-w);
    height: var(--wiz-logo-h);
    object-fit: contain;
}

/* card */
.wizard-card{
    max-width: var(--wiz-max-w);
}

.wizard-inner{
    background: var(--wiz-card-bg);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(0,0,0,.18);
    padding: 22px;
}

/* topics */
.topic-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px){
    .topic-grid{ grid-template-columns: 1fr 1fr; }
    .topic-card:last-child{ grid-column: 1 / -1; }
}

.topic-card{
    appearance:none;
    -webkit-appearance:none;
    border:1px solid var(--wiz-border);
    background:#fff;
    border-radius:14px;
    padding:16px 18px;
    text-align:left;
    width:100%;
    cursor:pointer;
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
    color: var(--wiz-text);
}

.topic-card:hover{
    border-color: var(--wiz-black);
    color: var(--wiz-black);
}

.topic-card:active{ transform: translateY(1px); }

.topic-card.is-selected{
    border-color: var(--wiz-black);
    box-shadow: 0 0 0 .18rem rgba(0,0,0,.12);
    color: var(--wiz-black);
}

.topic-title{
    font-weight:600;
    line-height:1.25;
}

/* week nav */
.week-nav{
    display:flex;
    align-items:center;
    gap:10px;
}
.week-label{
    min-width: 210px;
    text-align:center;
    font-weight: 600;
}

/* calendar */
.calendar-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px){
    .calendar-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px){
    .calendar-grid{
        grid-template-columns: repeat(3, 1fr);
    }
}

/* FIX: одинаковая высота day-card + контент не сжимает карточку */
.day-card{
    border:1px solid var(--wiz-border);
    background:#fff;
    border-radius: 14px;
    padding: 12px;

    display:flex;              /* FIX */
    flex-direction:column;     /* FIX */
    min-height: 177px;         /* FIX: подбери 200-260 как нравится */
}

.day-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    margin-bottom: 10px;
}

.day-title{
    font-weight: 700;
}

.day-date{
    color: var(--wiz-muted);
    font-size: 13px;
}

/* FIX: прибиваем список слотов/пустышку вниз, чтобы высота была одинаковой */
.slot-list{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start; /* FIX */
}

.slot-btn{
    border:1px solid var(--wiz-border);
    background:#fff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    cursor:pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
    color: var(--wiz-text);
}

.slot-btn:hover{
    border-color: var(--wiz-black);
    color: var(--wiz-black);
}

.slot-btn.is-selected{
    border-color: var(--wiz-black);
    background: var(--wiz-black);
    color:#fff;
}

.slot-empty{
    color: var(--wiz-muted);
    font-size: 13px;
    padding: 4px 0;
}

/* picked */
.picked-label{
    font-weight: 700;
}

/* consent */
.consent-box{
    max-width: 520px;
}
.consent-error{
    color: #dc3545;
    font-size: 13px;
    margin-top: 6px;
}

/* buttons */
.btn-wizard-primary{
    --bs-btn-color:#fff;
    --bs-btn-bg:#111;
    --bs-btn-border-color:#111;

    /* FIX: чтобы текст не пропадал на hover */
    --bs-btn-hover-color:#fff;           /* FIX */
    --bs-btn-hover-bg:#000;
    --bs-btn-hover-border-color:#000;

    --bs-btn-active-color:#fff;          /* FIX */
    --bs-btn-active-bg:#000;
    --bs-btn-active-border-color:#000;

    --bs-btn-disabled-bg:#bdbdbd;
    --bs-btn-disabled-border-color:#bdbdbd;
}

.btn-wizard-outline{
    --bs-btn-color:#111;
    --bs-btn-border-color:#111;
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:#000;
    --bs-btn-hover-border-color:#000;
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:#000;
    --bs-btn-active-border-color:#000;
}

/* FIX: страховка для ссылок-кнопок (шаг 4 “перейти на сайт” и вообще все) */
a.btn.btn-wizard-primary,
button.btn.btn-wizard-primary{
    color: var(--bs-btn-color) !important;
    text-decoration: none !important;
}
a.btn.btn-wizard-primary:hover,
button.btn.btn-wizard-primary:hover,
a.btn.btn-wizard-primary:focus,
button.btn.btn-wizard-primary:focus{
    color: var(--bs-btn-hover-color) !important; /* белый */
    text-decoration: none !important;
}

.form-check-label a {
    color: inherit;
}

.btn.is-soft-disabled {
    opacity: .55;
    cursor: not-allowed;
}

#bookForm .form-text {
    margin-left: 25px;
}