/* ========================================
   PRAYER HEADER WIDGET — Виджет в шапке
   Сворачиваемый: текущий намаз → все 5+1
   На мобильных: кружок → dropdown
   ======================================== */

/* --- Контейнер в шапке --- */
.phw-wrap {
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    z-index: 10;
    font-family: var(--font-primary);
}

/* --- Кружок (мобильный) — скрыт на десктопе --- */
.phw-circle {
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--phw-accent, #059669) 10%, var(--white, #fff));
    border: 1.5px solid color-mix(in srgb, var(--phw-accent, #059669) 25%, transparent);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all var(--transition-fast);
    user-select: none;
    flex-shrink: 0;
}
.phw-circle:hover {
    background: color-mix(in srgb, var(--phw-accent, #059669) 18%, var(--white, #fff));
    border-color: color-mix(in srgb, var(--phw-accent, #059669) 40%, transparent);
}
.phw-circle-icon {
    font-size: 18px;
    line-height: 1;
}
/* Мини-бейдж с обратным отсчётом под кружком */
.phw-circle-badge {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.58rem;
    font-weight: 700;
    color: #fff;
    background: var(--phw-accent, var(--emerald));
    padding: 1px 5px;
    border-radius: 6px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}
/* Пульсация когда < 15 мин до намаза */
.phw-circle.phw-soon {
    animation: phwPulse 2s ease-in-out infinite;
}
@keyframes phwPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--phw-accent, #059669) 30%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--phw-accent, #059669) 0%, transparent); }
}

/* --- Свёрнутое состояние (по умолчанию, десктоп) --- */
.phw-wrap { --phw-accent: var(--emerald, #059669); }
.phw-collapsed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--phw-accent) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--phw-accent) 20%, transparent);
    transition: all var(--transition-fast);
    user-select: none;
    white-space: nowrap;
    max-width: 360px;
}
.phw-collapsed:hover {
    background: color-mix(in srgb, var(--phw-accent) 18%, #fff);
    border-color: color-mix(in srgb, var(--phw-accent) 35%, transparent);
}

.phw-current-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--phw-accent) 80%, #000);
}
.phw-current-time {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--dark-gray);
    font-variant-numeric: tabular-nums;
}
.phw-separator {
    width: 1px;
    height: 14px;
    background: color-mix(in srgb, var(--phw-accent) 25%, transparent);
}
.phw-next-label {
    font-size: 0.75rem;
    color: var(--medium-gray);
}
.phw-next-countdown {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--phw-accent);
    font-variant-numeric: tabular-nums;
}
.phw-toggle {
    font-size: 0.7rem;
    color: var(--medium-gray);
    transition: transform var(--transition-fast);
    margin-inline-start: 2px;
}
.phw-wrap.phw-open .phw-toggle {
    transform: rotate(180deg);
}

/* --- Развёрнутое состояние --- */
.phw-expanded {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    width: 260px;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-gray);
    padding: 14px 16px;
    animation: phwSlideIn 0.2s ease;
    z-index: 100;
    box-sizing: border-box;
}
.phw-wrap.phw-open .phw-expanded {
    display: block;
}

@keyframes phwSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Город */
.phw-city {
    font-size: 0.78rem;
    color: var(--medium-gray);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.phw-city a {
    color: var(--emerald);
    text-decoration: none;
    font-weight: 500;
}
.phw-city a:hover {
    text-decoration: underline;
}

/* Список времён */
.phw-times {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.phw-time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 0.85rem;
    transition: background var(--transition-fast);
}
.phw-time-row:hover {
    background: var(--light-gray);
}
.phw-time-row.phw-active {
    background: var(--emerald-50);
    font-weight: 600;
}
.phw-time-row.phw-sunrise-row {
    opacity: 0.55;
    font-size: 0.8rem;
}

.phw-time-name {
    color: var(--dark-gray);
}
.phw-time-val {
    color: var(--dark-gray);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Ссылка на полную страницу */
.phw-link {
    display: block;
    text-align: center;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-gray);
    font-size: 0.78rem;
    color: var(--emerald);
    text-decoration: none;
    font-weight: 500;
}
.phw-link:hover {
    color: var(--emerald-dark);
}

/* --- Встраивание в правую часть шапки --- */
/* Когда виджет в *-header-right / header-controls — снимаем абсолют */
.quran-header-right .phw-wrap,
.hadith-header-right .phw-wrap,
.ifta-header-right .phw-wrap,
.halal-header-right .phw-wrap,
.maliya-header-right .phw-wrap,
.cal-header-right .phw-wrap,
.cabinet-header-right .phw-wrap,
.atlas-header-right .phw-wrap,
.header-controls .phw-wrap {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}
/* Dropdown выравниваем вправо, чтобы не вылезал за экран */
.quran-header-right .phw-expanded,
.hadith-header-right .phw-expanded,
.ifta-header-right .phw-expanded,
.halal-header-right .phw-expanded,
.maliya-header-right .phw-expanded,
.cal-header-right .phw-expanded,
.cabinet-header-right .phw-expanded,
.atlas-header-right .phw-expanded,
.header-controls .phw-expanded {
    left: auto;
    right: 0;
}

/* ===========================================
   RESPONSIVE: Кружок на мобильных
   =========================================== */

@media (max-width: 900px) {
    /* Скрываем полный виджет, показываем кружок */
    .phw-collapsed {
        display: none !important;
    }
    .phw-circle {
        display: flex;
    }

    /* Позиционирование — вписываем в правую часть шапки */
    .phw-wrap {
        position: static;
        transform: none;
    }

    /* Dropdown от кружка — выравниваем вправо */
    .phw-expanded {
        left: auto;
        right: 0;
        transform: none;
    }
}

@media (max-width: 480px) {
    .phw-circle {
        width: 34px;
        height: 34px;
    }
    .phw-circle-icon {
        font-size: 16px;
    }
    .phw-circle-badge {
        font-size: 0.55rem;
        padding: 0px 3px;
    }
}

/* --- Dark mode (поддержка .night-mode и [data-theme="dark"]) --- */
.night-mode .phw-collapsed,
[data-theme="dark"] .phw-collapsed {
    background: color-mix(in srgb, var(--phw-accent, #059669) 12%, var(--white, #111827));
    border-color: color-mix(in srgb, var(--phw-accent, #059669) 25%, transparent);
}
.night-mode .phw-collapsed:hover,
[data-theme="dark"] .phw-collapsed:hover {
    background: color-mix(in srgb, var(--phw-accent, #059669) 20%, var(--white, #111827));
}
.night-mode .phw-current-name,
[data-theme="dark"] .phw-current-name {
    color: color-mix(in srgb, var(--phw-accent, #059669) 80%, #fff);
}
.night-mode .phw-current-time,
.night-mode .phw-time-name,
.night-mode .phw-time-val,
[data-theme="dark"] .phw-current-time,
[data-theme="dark"] .phw-time-name,
[data-theme="dark"] .phw-time-val {
    color: var(--dark-gray, #e0e0e0);
}
.night-mode .phw-circle,
[data-theme="dark"] .phw-circle {
    background: color-mix(in srgb, var(--phw-accent, #059669) 14%, var(--white, #111827));
    border-color: color-mix(in srgb, var(--phw-accent, #059669) 30%, transparent);
}
.night-mode .phw-circle:hover,
[data-theme="dark"] .phw-circle:hover {
    background: color-mix(in srgb, var(--phw-accent, #059669) 22%, var(--white, #111827));
}
.night-mode .phw-expanded,
[data-theme="dark"] .phw-expanded {
    background: var(--white, #1e293b);
    border-color: color-mix(in srgb, var(--white, #1e293b) 80%, #fff);
}
.night-mode .phw-time-row:hover,
[data-theme="dark"] .phw-time-row:hover {
    background: color-mix(in srgb, var(--white, #1e293b) 80%, #fff);
}
.night-mode .phw-time-row.phw-active,
[data-theme="dark"] .phw-time-row.phw-active {
    background: color-mix(in srgb, var(--phw-accent, #059669) 15%, transparent);
}
.night-mode .phw-city,
.night-mode .phw-next-label,
[data-theme="dark"] .phw-city,
[data-theme="dark"] .phw-next-label {
    color: color-mix(in srgb, var(--dark-gray, #e0e0e0) 60%, transparent);
}
.night-mode .phw-link,
[data-theme="dark"] .phw-link {
    border-top-color: color-mix(in srgb, var(--white, #1e293b) 80%, #fff);
}