/* ============================================================
   Custom Datepicker / Price Calendar for Hotel Booking
   Dark theme with gold accents (CSS variables)
   ============================================================ */

:root {
    /* ===== Палитра календаря ===== */
    --dp-bg: #15151a;
    --dp-bg-light: #262630;
    --dp-bg-darker: #1a1a21;
    --dp-bg-hover: #30303c;
    --dp-border: rgba(212, 175, 55, 0.35);
    --dp-border-light: rgba(212, 175, 55, 0.55);
    --dp-border-strong: rgba(212, 175, 55, 0.9);
    --dp-shadow: 0 40px 90px rgba(0, 0, 0, 0.75), 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.06);
    --dp-shadow-soft: 0 6px 18px rgba(212, 175, 55, 0.4);

    /* ===== Текст ===== */
    --dp-text: #eceadf;
    --dp-text-title: #f7f2e3;
    --dp-text-muted: #a8a394;
    --dp-text-dim: #7a7668;
    --dp-text-selected: #15151a;
    --dp-text-on-gold: #1a1200;

    /* ===== Акценты ===== */
    --dp-accent: #e0b94a;
    --dp-accent-strong: #d4af37;
    --dp-accent-hover: #f0ce6f;
    --dp-accent-gradient: linear-gradient(135deg, #e8c766, #b8912a);
    --dp-accent-soft-bg: rgba(224, 185, 74, 0.16);
    --dp-accent-soft-border: rgba(224, 185, 74, 0.65);
    --dp-accent-range-bg: rgba(224, 185, 74, 0.18);
    --dp-accent-range-day: rgba(224, 185, 74, 0.12);
    --dp-accent-hover-bg: rgba(224, 185, 74, 0.1);

    /* ===== Выходные ===== */
    --dp-weekend: #e0a48e;

    /* ===== Закрытые дни / ошибки ===== */
    --dp-closed-bg: repeating-linear-gradient(135deg, #2b2b36 0, #2b2b36 4px, #1e1e25 4px, #1e1e25 8px);
    --dp-closed-icon-bg: #a02b2b;
    --dp-closed-icon-color: #f8d7da;
    --dp-closed-icon-disabled: #5a1717;
    --dp-clear-hover-bg: rgba(200, 60, 60, 0.15);
    --dp-clear-hover-color: #f0a0a0;
    --dp-clear-hover-border: rgba(200, 60, 60, 0.45);
}

/* ===== Обёртка полей дат (из шаблона) ===== */
.datepicker-wrap {
    position: relative;
    flex: 1;
}

.datepicker-wrap input[type="date"],
.datepicker-wrap input[data-date-in],
.datepicker-wrap input[data-date-out] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 42px;
    caret-color: transparent;
    cursor: pointer;
}

/* Скрыть нативную стрелку браузера у date-полей */
.datepicker-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.datepicker-wrap input[data-date-in]::-webkit-calendar-picker-indicator,
.datepicker-wrap input[data-date-out]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.datepicker-wrap .datepicker-icon {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    color: var(--gold, var(--dp-accent, #d4af37));
    font-size: 15px;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.3s;
}

.datepicker-wrap:hover .datepicker-icon {
    opacity: 1;
}

/* ===== Основной контейнер календаря ===== */
.dp-calendar {
    position: fixed;
    z-index: 10000;
    display: none;
    width: min(800px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    background: var(--dp-bg);
    border: 1px solid var(--dp-border);
    border-radius: 18px;
    box-shadow: var(--dp-shadow);
    padding: 16px;
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--dp-text);
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

.dp-calendar.dp-open {
    display: block;
}

/* ===== Header: навигация и заголовок ===== */
.dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.dp-nav {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    background: var(--dp-accent-gradient);
    color: var(--dp-text-on-gold);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    padding: 0;
}

.dp-nav:hover {
    background: linear-gradient(135deg, var(--dp-accent-hover), #c9a032);
    color: var(--dp-text-on-gold);
    box-shadow: 0 8px 22px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.dp-nav:active {
    transform: scale(0.94);
}

.dp-header-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--dp-text-title);
    text-align: center;
    padding: 0 6px;
}

/* ===== Легенда ===== */
.dp-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dp-border);
}

.dp-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--dp-text-muted);
    white-space: nowrap;
}

.dp-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 4px;
    display: inline-block;
    flex: 0 0 11px;
}

.dp-legend-available {
    background: var(--dp-bg-light);
    border: 1.5px solid var(--dp-border-light);
}

.dp-legend-closed {
    background: var(--dp-closed-bg);
    opacity: 0.85;
}

.dp-legend-price {
    background: var(--dp-accent-gradient);
}

/* ===== Два месяца ===== */
.dp-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.dp-month {
    min-width: 0;
}

.dp-month-title {
    text-align: center;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--dp-accent);
    margin-bottom: 8px;
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

/* ===== Дни недели ===== */
.dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 4px;
    border-bottom: 1px solid #272727;
}

.dp-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--dp-text-dim);
    text-transform: uppercase;
    padding: 4px 0 6px;
    letter-spacing: 0.3px;
}

.dp-weekday.dp-weekend {
    color: var(--dp-weekend);
}

/* ===== Сетка дат ===== */
.dp-dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.dp-cell {
    position: relative;
}

.dp-cell.dp-empty {
    pointer-events: none;
}

/* ===== Кнопка дня ===== */
.dp-day {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.18;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--dp-bg-light);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    padding: 3px 2px;
    font-family: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.dp-day:hover:not(:disabled) {
    background: var(--dp-bg-hover);
    border-color: var(--dp-accent-soft-border);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    z-index: 2;
}

.dp-day-num {
    font-size: 14px;
    font-weight: 600;
    color: var(--dp-text);
    line-height: 1;
}

.dp-day-price {
    font-size: 10px;
    font-weight: 600;
    color: var(--dp-accent);
    line-height: 1;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Выходные */
.dp-day.dp-weekend .dp-day-num {
    color: var(--dp-weekend);
    font-weight: 700;
}

/* Сегодня */
.dp-day.dp-today {
    border-color: var(--dp-accent-strong);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.25);
}

.dp-day.dp-today .dp-day-num {
    color: var(--dp-accent-hover);
    position: relative;
    font-weight: 800;
}

.dp-day.dp-today .dp-day-num::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dp-accent-hover);
}

/* ===== Недоступные дни ===== */
.dp-day.dp-disabled {
    cursor: not-allowed;
    background: var(--dp-bg-darker);
    border-color: transparent;
    opacity: 0.45;
}

.dp-day.dp-disabled .dp-day-num {
    color: var(--dp-text-dim);
    font-weight: 500;
}

/* Закрытые дни (нет номеров) */
.dp-cell.dp-closed {
    background: var(--dp-closed-bg);
    border-radius: 12px;
}

.dp-closed-icon {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dp-closed-icon-bg);
    color: var(--dp-closed-icon-color);
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.dp-day.dp-disabled .dp-closed-icon {
    top: 3px;
    right: 3px;
    background: var(--dp-closed-icon-disabled);
    opacity: 0.9;
}

/* ===== Выбранный диапазон ===== */
.dp-cell.dp-in-range {
    background: var(--dp-accent-range-bg);
}

.dp-cell.dp-in-range .dp-day {
    background: var(--dp-accent-range-day);
    border-color: transparent;
    border-radius: 0;
}

.dp-cell.dp-in-range .dp-day .dp-day-num {
    color: var(--dp-accent-hover);
}

/* Края диапазона — скругления */
.dp-cell.dp-range-start .dp-day {
    border-radius: 12px 0 0 12px;
}

.dp-cell.dp-range-end .dp-day {
    border-radius: 0 12px 12px 0;
}

/* Заезд / выезд */
.dp-cell.dp-selected-in .dp-day,
.dp-cell.dp-selected-out .dp-day {
    background: var(--dp-accent-gradient);
    border-color: transparent;
    box-shadow: var(--dp-shadow-soft);
    z-index: 3;
}

.dp-cell.dp-selected-in .dp-day-num,
.dp-cell.dp-selected-out .dp-day-num {
    color: var(--dp-text-selected);
    font-weight: 800;
}

.dp-cell.dp-selected-in .dp-day-price,
.dp-cell.dp-selected-out .dp-day-price {
    color: var(--dp-text-selected);
    opacity: 0.85;
}

/* Скругление краёв у заезда/выезда */
.dp-cell.dp-selected-in.dp-range-start .dp-day {
    border-radius: 12px 0 0 12px;
}

.dp-cell.dp-selected-out.dp-range-end .dp-day {
    border-radius: 0 12px 12px 0;
}

/* ===== Предпросмотр диапазона при наведении ===== */
.dp-cell.dp-hover-range {
    background: var(--dp-accent-soft-bg);
}

.dp-cell.dp-hover-range .dp-day,
.dp-cell.dp-hover-range .dp-day:hover {
    background: var(--dp-accent-hover-bg);
    border-color: transparent;
    border-radius: 0;
    transform: none;
    box-shadow: none;
}

/* ===== Footer ===== */
.dp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--dp-border);
    flex-wrap: wrap;
}

.dp-hint {
    font-size: 12.5px;
    color: var(--dp-text-dim);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dp-hint i {
    color: var(--dp-accent);
    opacity: 0.7;
}

.dp-clear {
    background: var(--dp-bg-light);
    border: 1px solid var(--dp-border-light);
    color: var(--dp-text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 7px 12px;
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.dp-clear:hover {
    background: var(--dp-clear-hover-bg);
    color: var(--dp-clear-hover-color);
    border-color: var(--dp-clear-hover-border);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ===== Позиционирование ===== */
.dp-calendar.dp-below {
    animation: dpFadeInDown 0.28s ease;
}

.dp-calendar.dp-above {
    animation: dpFadeInUp 0.28s ease;
}

.dp-calendar.dp-centered {
    animation: dpFadeInCenter 0.28s ease;
}

@keyframes dpFadeInDown {
    from { opacity: 0; transform: translateY(-10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dpFadeInUp {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dpFadeInCenter {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Responsive ===== */
/* Блокировка скролла страницы при открытом календаре (на всех устройствах) */
body.dp-calendar-open {
    overflow: hidden;
}

@media (max-width: 720px) {
    .dp-calendar {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        padding: 14px 12px 12px;
        left: 12px !important;
        top: 12px !important;
    }

    .dp-months {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dp-month + .dp-month {
        padding-top: 12px;
        border-top: 1px solid var(--dp-border);
    }

    .dp-header-title {
        font-size: 14.5px;
    }

    .dp-legend {
        gap: 10px;
    }
}