/*
 * assets/css/print-page.css
 * Страница печати / PDF — Врата Ци Мень
 * @package VrataCiMen
 */

/* ── Страница без сайдбара ──────────────────────────────────────────────── */

.vcmp-fullpage {
    min-height: 100vh;
}

/* ── Шапка страницы ─────────────────────────────────────────────────────── */

.vcmp-topbar {
    display      : flex;
    align-items  : center;
    gap          : 14px;
    padding      : 14px 24px;
    background   : var(--white);
    border-bottom: 1px solid var(--border);
    flex-wrap    : wrap;
    margin-bottom: 28px;
}

.vcmp-topbar__qi {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size  : 32px;
    color      : var(--gold);
    line-height: 1;
    flex-shrink: 0;
}

.vcmp-topbar__head { flex: 1; }

.vcmp-topbar__back {
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    font-size      : 13px;
    font-weight    : 500;
    color          : var(--ink-muted);
    text-decoration: none;
    margin-bottom  : 4px;
    transition     : color 0.2s;
}
.vcmp-topbar__back:hover { color: var(--gold-dark); }

.vcmp-topbar__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size  : 22px;
    font-weight: 600;
    color      : var(--ink);
    margin     : 0;
    line-height: 1.2;
}

/* ── Контент ────────────────────────────────────────────────────────────── */

.vcmp-content {
    max-width: 800px;
    margin   : 0 auto;
    padding  : 0 24px 40px;
}

/* ── Карточка-шаг ───────────────────────────────────────────────────────── */

.vcmp-card {
    background   : var(--white);
    border       : 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding      : 12px 24px;
    margin-bottom: 16px;
    box-shadow   : var(--shadow-sm);
}

.vcmp-step-title {
    font-size      : 11px;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : .7px;
    color          : var(--theme-brown);
    margin-bottom  : 4px;
}

.vcmp-step-hint {
    font-size    : 13px;
    color        : #0b0806;
    margin-bottom: 7px;
    line-height  : 1.5;
}

/* ── Нет доступа ────────────────────────────────────────────────────────── */

.vcmp-no-access {
    text-align: center;
    padding   : 40px 24px;
}

.vcmp-no-access__icon  { font-size: 48px; margin-bottom: 16px; }

.vcmp-no-access__title {
    font-family  : 'Cormorant Garamond', Georgia, serif;
    font-size    : 22px;
    font-weight  : 600;
    color        : var(--ink);
    margin-bottom: 10px;
}

.vcmp-no-access__text {
    font-size    : 14px;
    color        : var(--ink-muted);
    margin-bottom: 24px;
    line-height  : 1.6;
}

.vcmp-btn-pay {
    display        : inline-flex;
    align-items    : center;
    padding        : 12px 32px;
    background     : linear-gradient(135deg, #C9A96E 0%, #9A7840 100%);
    border-radius  : var(--radius-sm);
    font-family    : inherit;
    font-size      : 15px;
    font-weight    : 600;
    color          : #fff;
    text-decoration: none;
    box-shadow     : 0 3px 14px rgba(154,120,64,.30);
    transition     : var(--transition);
}
.vcmp-btn-pay:hover {
    background: linear-gradient(135deg, #D8B880 0%, #AA8850 100%);
    transform : translateY(-1px);
    color     : #fff;
}

/* ── Город ──────────────────────────────────────────────────────────────── */

.vcmp-city-row {
    display    : flex;
    align-items: flex-start;
    gap        : 12px;
    flex-wrap  : wrap;
    position   : relative;
}

.vcmp-city-input-wrap {
    flex     : 1;
    min-width: 220px;
    position : relative;
}

.vcmp-city-input {
    width        : 100%;
    padding      : 4px 14px;
    border       : 1px solid var(--border-gold);
    border-radius: var(--radius-sm);
    font-family  : inherit;
    font-size    : 13px;
    color        : var(--ink);
    outline      : none;
    transition   : border-color 0.2s, box-shadow 0.2s;
}
.vcmp-city-input:focus {
    border-color: var(--gold);
    box-shadow  : 0 0 0 3px rgba(201,169,110,.15);
}

.vcmp-city-suggestions {
    position     : absolute;
    top          : 100%;
    left         : 0;
    right        : 0;
    z-index      : 200;
    background   : var(--white);
    border       : 1px solid var(--border-gold);
    border-top   : none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow   : var(--shadow-md);
    max-height   : 220px;
    overflow-y   : auto;
}

.vcmp-city-list  { list-style: none; margin: 0; padding: 0; }

.vcmp-city-item {
    padding      : 9px 14px;
    cursor       : pointer;
    font-size    : 13px;
    color        : var(--ink);
    transition   : background 0.15s;
    border-bottom: 1px solid var(--border);
}
.vcmp-city-item:last-child { border-bottom: none; }
.vcmp-city-item:hover      { background: var(--cream); }

.vcmp-city-loading,
.vcmp-city-noresult { padding: 10px 14px; font-size: 13px; color: var(--ink-muted); }

.vcmp-city-saved {
    font-size  : 12px;
    color      : #2E8B57;
    font-weight: 600;
    align-self : center;
    display    : none;
}

.vcmp-solar-label {
    display    : inline-flex;
    align-items: center;
    gap        : 6px;
    font-size  : 13px;
    color      : var(--ink);
    cursor     : pointer;
    user-select: none;
    align-self : center;
    white-space: nowrap;
}
.vcmp-solar-label--disabled { opacity: .45; cursor: not-allowed; }
.vcmp-solar-label input[type="checkbox"] { accent-color: var(--gold); width: 15px; height: 15px; }

/* ── Кнопки месяц / дни ─────────────────────────────────────────────────── */

.vcmp-months-wrap,
.vcmp-days-ctrl {
    display  : flex;
    flex-wrap: wrap;
    gap      : 8px;
}

.vcmp-month-btn {
    padding      : 4px 16px;
    border       : 1px solid var(--border-gold);
    border-radius: 20px;
    background   : var(--cream);
    font-family  : inherit;
    font-size    : 13px;
    font-weight  : 500;
    color        : var(--ink);
    cursor       : pointer;
    transition   : var(--transition);
    white-space  : nowrap;
}
.vcmp-month-btn:hover     { background: var(--gold-pale); border-color: var(--gold); }
.vcmp-month-btn.is-active { background: var(--gold); border-color: var(--gold-dark); color: var(--white); font-weight: 700; }

.vcmp-empty-note { font-size: 13px; color: var(--ink-muted); }

/* ── Сетка дней ─────────────────────────────────────────────────────────── */

.vcmp-daygrid         { margin-top: 10px; }
.vcmp-daygrid__header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
.vcmp-daygrid__dow    { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-muted); padding: 3px 0; }
.vcmp-daygrid__cells  { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.vcmp-daygrid__empty  { height: 32px; }

.vcmp-daygrid__day {
    height       : 32px;
    border       : 1px solid var(--border);
    border-radius: 6px;
    background   : var(--cream);
    font-family  : inherit;
    font-size    : 12px;
    color        : var(--ink-muted);
    cursor       : pointer;
    transition   : var(--transition);
    text-align   : center;
}
.vcmp-daygrid__day:hover      { border-color: var(--gold); color: var(--ink); }
.vcmp-daygrid__day.is-selected { background: var(--gold-pale); border-color: var(--gold); color: var(--ink); font-weight: 600; }

/* ── Фильтры ────────────────────────────────────────────────────────────── */

.vcmp-filter-wrap { display: flex; flex-wrap: wrap; gap: 6px; }

.vcmp-filter__option { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.vcmp-filter__option input[type="checkbox"] { opacity: 0; width: 0; height: 0; margin: 0; flex-shrink: 0; }

.vcmp-filter__label {
    display      : inline-flex;
    align-items  : center;
    gap          : 5px;
    padding      : 5px 12px;
    border       : 1px solid var(--border);
    border-radius: 20px;
    font-size    : 13px;
    color        : var(--ink);
    background   : #ffffff;
    cursor       : pointer;
    transition   : var(--transition);
    white-space  : nowrap;
    line-height  : 1.3;
}
.vcmp-filter__label:hover { border-color: var(--gold); background: var(--gold-pale); }

.vcmp-filter__char {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size  : 16px;
    font-weight: 600;
    line-height: 1;
}

/* ── Кнопка «Готово →» ──────────────────────────────────────────────────── */

.vcmp-done-btn {
    display      : inline-flex;
    align-items  : center;
    margin-top   : 12px;
    padding      : 7px 18px;
    background   : var(--gold-pale);
    border       : 1px solid var(--gold);
    border-radius: 20px;
    font-family  : inherit;
    font-size    : 13px;
    font-weight  : 600;
    color        : var(--theme-brown);
    cursor       : pointer;
    transition   : var(--transition);
}
.vcmp-done-btn:hover { background: var(--gold); color: var(--white); }

/* ── Кнопка «Сформировать» ──────────────────────────────────────────────── */

.vcmp-btn-preview {
    display      : inline-flex;
    align-items  : center;
    gap          : 8px;
    padding      : 11px 28px;
    background   : linear-gradient(135deg, #C9A96E 0%, #9A7840 100%);
    border       : none;
    border-radius: var(--radius-sm);
    font-family  : inherit;
    font-size    : 15px;
    font-weight  : 600;
    color        : #fff;
    cursor       : pointer;
    box-shadow   : 0 3px 14px rgba(154,120,64,.30);
    transition   : var(--transition);
}
.vcmp-btn-preview:hover:not(:disabled) {
    background: linear-gradient(135deg, #D8B880 0%, #AA8850 100%);
    box-shadow: 0 5px 20px rgba(154,120,64,.42);
    transform : translateY(-1px);
}
.vcmp-btn-preview:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.vcmp-btn-icon { font-size: 16px; }

/* ── Статус ─────────────────────────────────────────────────────────────── */

.vcmp-status { display: none; font-size: 13px; padding: 9px 14px; border-radius: 8px; margin-top: 10px; }
.vcmp-status--err { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.vcmp-status--ok  { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }

/* ── Предпросмотр — на всю ширину ───────────────────────────────────────── */

.vcmp-preview-wrap {
    background   : var(--white);
    border-top   : 1px solid var(--border);
    margin-top   : 8px;
    overflow     : hidden;
}

.vcmp-preview-head {
    display        : flex;
    justify-content: flex-end;
    padding        : 14px 24px;
    border-bottom  : 1px solid var(--border);
    background     : var(--cream);
}

.vcmp-btn-print {
    display      : inline-flex;
    align-items  : center;
    gap          : 7px;
    padding      : 9px 22px;
    background   : linear-gradient(135deg, #5B8DB8 0%, #2A5A8A 100%);
    border       : none;
    border-radius: var(--radius-sm);
    font-family  : inherit;
    font-size    : 14px;
    font-weight  : 600;
    color        : #fff;
    cursor       : pointer;
    box-shadow   : 0 3px 12px rgba(42,90,138,.28);
    transition   : var(--transition);
}
.vcmp-btn-print:hover { background: linear-gradient(135deg, #6A9CC8 0%, #3A6A9A 100%); transform: translateY(-1px); }

/* ── Документ внутри предпросмотра ──────────────────────────────────────── */

.vcmp-preview {
    padding    : 24px;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size  : 13px;
    color      : #2C1F1A;
}

.vcmp-preview__title {
    font-family  : 'Cormorant Garamond', Georgia, serif;
    font-size    : 22px;
    font-weight  : 700;
    color        : #2C1F1A;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #C9A96E;
}

/* ── Блок одного дня ────────────────────────────────────────────────────── */

.vcmp-pday { margin-bottom: 22px; break-inside: avoid; page-break-inside: avoid; }

.vcmp-pday__header {
    font-family  : 'Montserrat', sans-serif;
    font-size    : 13px;
    font-weight  : 700;
    color        : #8B6F47;
    padding      : 7px 12px;
    background   : #F5EDD8;
    border-left  : 4px solid #C9A96E;
    border-radius: 0 6px 6px 0;
    margin-bottom: 6px;
    display      : flex;
    align-items  : center;
    gap          : 10px;
    flex-wrap    : wrap;
}

.vcmp-pday__restriction {
    font-size    : 11px;
    font-weight  : 500;
    color        : #9B6A00;
    background   : #fff;
    border       : 1px solid #F0C040;
    border-radius: 4px;
    padding      : 2px 8px;
    white-space  : nowrap;
}
.vcmp-pday__restriction--user { color: #B91C1C; border-color: #FECACA; background: #FEF2F2; }

/* ── Таблица врат ───────────────────────────────────────────────────────── */

.vcmp-ptable { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }

.vcmp-ptable thead tr { background: #FAF6F0; }

.vcmp-ptable th {
    padding      : 6px 3px;
    text-align   : center;
    font-weight  : 500;
    font-size    : 9px;
    color        : #0b0806;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 2px solid #E8DDD5;
    border-right : 1px solid #e0d8d4;
}
.vcmp-ptable th:last-child { border-right: none; }

.vcmp-th-hour   { width: 110px; white-space: nowrap; }
.vcmp-th-dir    { width: 90px; }
.vcmp-th-apply  { width: 120px; font-size: 15px; }
.vcmp-th-struct { width: auto; }

.vcmp-ptable tbody tr    { border-bottom: 1px solid #ede8e4; }
.vcmp-ptable tbody tr:last-child { border-bottom: none; }

.vcmp-ptable td {
    padding       : 7px 10px;
    vertical-align: top;
    border-right  : 1px solid #ede8e4;
    line-height   : 1.5;
}
.vcmp-ptable td:last-child { border-right: none; }

.vcmp-td-hour   { font-size: 11px; color: #0b0806; white-space: normal; }
.vcmp-td-dir    { font-size: 12px; color: #0b0806; line-height: 1.5; text-align: center; }
.vcmp-td-apply  { font-size: 15px; line-height: 1.6; letter-spacing: 2px; text-align: center; }
.vcmp-td-struct { font-size: 12px; color: #0b0806; line-height: 1.6; }
.vcmp-td-hour--unusable { background: #F3F3F3 !important; }

.vcmp-hour-sign { display: block; font-weight: 600; color: #2C1F1A; font-size: 12px; line-height: 1.3; }
.vcmp-hour-time { display: block; font-weight: 400; color: #8B7060; font-size: 11px; line-height: 1.3; }

.vcmp-dot {
    display      : inline-block;
    width        : 8px;
    height       : 8px;
    border-radius: 50%;
    margin-right : 6px;
    vertical-align: middle;
    margin-top   : -1px;
}

.vcmp-struct-desc { font-size: 13px; color: #0b0806; margin-top: 4px; line-height: 1.4; font-weight: 500; }

.vcmp-row--unusable-hour td { background: #F3F3F3 !important; }
.vcmp-cell--unusable-dir   { background: #F3F3F3 !important; }

/* ── Адаптив ────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .vcmp-content  { padding: 0 12px 30px; }
    .vcmp-card     { padding: 8px 14px; }
    .vcmp-topbar   { padding: 10px 14px; margin-bottom: 16px; }
    .vcmp-city-row { flex-direction: column; }
    .vcmp-th-dir   { width: 60px; }
    .vcmp-th-hour  { width: 80px; }
    .vcmp-th-apply { width: 70px; }
    .vcmp-preview-head { padding: 10px 14px; }
    .vcmp-preview  { padding: 14px; }
}
/* ── Кнопка «Новые фильтры» ─────────────────────────────────────────────── */

.vcmp-btn-reset {
    display      : inline-flex;
    align-items  : center;
    gap          : 7px;
    padding      : 9px 22px;
    background   : var(--cream);
    border       : 1px solid var(--border-gold);
    border-radius: var(--radius-sm);
    font-family  : inherit;
    font-size    : 14px;
    font-weight  : 600;
    color        : var(--theme-brown);
    cursor       : pointer;
    transition   : var(--transition);
    margin-left  : 10px;
}
.vcmp-btn-reset:hover {
    background  : var(--gold-pale);
    border-color: var(--gold);
}
/* ── Легенда ─────────────────────────────────────────────────────────────── */

.vcmp-legend {
    margin: 20px 20px 5px 20px;
    padding      : 12px 16px;
    background   : #FAF6F0;
    border       : 1px solid #E8DDD5;
    border-radius: var(--radius-sm);
    display      : flex;
    flex-direction: column;
    gap          : 8px;
}

.vcmp-legend__item {
    display    : flex;
    align-items: flex-start;
    gap        : 10px;
    font-size  : 12px;
    color      : #0b0806;
    line-height: 1.5;
}

.vcmp-legend__swatch {
    display      : inline-block;
    width        : 28px;
    height       : 16px;
    border-radius: 3px;
    flex-shrink  : 0;
    margin-top   : 2px;
}

.vcmp-legend__swatch--grey { background: #F3F3F3; border: 1px solid #ddd; }

/* ── Неиспользуемый час ──────────────────────────────────────────────────── */

.vcmp-td-hour--unusable { background: #F3F3F3 !important; }