/* Chip погоды — единая SVG-система иконок для hero, шапок страниц и карточек */

.weather-chip {
    display: inline-block;
    max-width: 100%;
    /* Локальная палитра погоды (не выносить в tokens.css) */
    --weather-accent: #f59e0b;
    --weather-accent-soft: rgba(245, 158, 11, 0.18);
    --weather-cloud: rgba(255, 255, 255, 0.92);
    --weather-cloud-back: rgba(255, 255, 255, 0.62);
    --weather-line: rgba(255, 255, 255, 0.9);
    --weather-icon-bg: rgba(255, 255, 255, 0.18);
    --weather-icon-glow: rgba(245, 158, 11, 0.32);
    --weather-motion-cloud: 6.5s;
    --weather-motion-rain: 2.8s;
    --weather-motion-snow: 4.8s;
    --weather-motion-storm: 4.2s;
}

.weather-chip-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem 1rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--glass-bg-strong);
    border: var(--glass-border-subtle);
    box-shadow: var(--elev-1);
    color: var(--dark);
}

.weather-chip-icon-wrap {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.42), transparent 45%),
        var(--weather-icon-bg);
    box-shadow: 0 0 18px var(--weather-accent-soft);
}

.weather-chip-icon,
.weather-chip-svg {
    display: block;
    width: 2.1rem;
    height: 2.1rem;
}

.weather-chip-svg {
    overflow: visible;
}

.weather-icon-core,
.weather-icon-bolt {
    fill: var(--weather-accent);
}

.weather-icon-rays,
.weather-icon-lines,
.weather-icon-drops,
.weather-icon-snow {
    fill: none;
    stroke: var(--weather-accent);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.weather-icon-cloud {
    fill: var(--weather-cloud);
}

.weather-icon-cloud-back {
    fill: var(--weather-cloud-back);
}

.weather-icon-back {
    opacity: 0.72;
}

.weather-icon-lines {
    stroke: var(--weather-line);
    stroke-width: 3.5;
}

.weather-icon-drops {
    stroke: var(--weather-accent);
    stroke-width: 4.5;
}

.weather-icon-snow {
    stroke: var(--weather-line);
    stroke-width: 3.2;
}

.weather-chip-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.weather-chip-meta,
.weather-chip-values {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.weather-chip-meta {
    gap: 0.35rem 0.65rem;
}

.weather-chip-values {
    gap: 0.35rem 0.75rem;
}

.weather-chip-city {
    font-weight: var(--font-weight-medium);
    font-size: 0.95rem;
    color: var(--dark);
}

.weather-chip-now {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray);
}

.weather-chip-temp {
    font-weight: var(--font-weight-semibold);
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--dark);
}

.weather-chip-label {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--gray);
}

/* Палитры по типу погоды */
.weather-chip--kind-clear {
    --weather-accent: #f7a928;
    --weather-accent-soft: rgba(247, 169, 40, 0.18);
    --weather-icon-bg: linear-gradient(145deg, rgba(255, 246, 221, 0.42), rgba(247, 169, 40, 0.16));
    --weather-icon-glow: rgba(247, 169, 40, 0.36);
}

.weather-chip--kind-partly {
    --weather-accent: #f7a928;
    --weather-accent-soft: rgba(56, 189, 248, 0.18);
    --weather-cloud: rgba(232, 246, 255, 0.94);
    --weather-cloud-back: rgba(255, 236, 174, 0.78);
    --weather-icon-bg: linear-gradient(145deg, rgba(239, 249, 255, 0.36), rgba(56, 189, 248, 0.14));
    --weather-icon-glow: rgba(56, 189, 248, 0.3);
}

.weather-chip--kind-cloudy,
.weather-chip--kind-fog {
    --weather-accent: #90a4b8;
    --weather-accent-soft: rgba(148, 163, 184, 0.16);
    --weather-cloud: rgba(238, 244, 248, 0.92);
    --weather-cloud-back: rgba(201, 214, 225, 0.64);
    --weather-line: rgba(210, 222, 232, 0.88);
    --weather-icon-bg: linear-gradient(145deg, rgba(248, 250, 252, 0.28), rgba(148, 163, 184, 0.12));
    --weather-icon-glow: rgba(148, 163, 184, 0.24);
}

.weather-chip--kind-drizzle,
.weather-chip--kind-rain {
    --weather-accent: #60a5fa;
    --weather-accent-soft: rgba(96, 165, 250, 0.18);
    --weather-cloud: rgba(231, 241, 255, 0.94);
    --weather-cloud-back: rgba(172, 204, 246, 0.58);
    --weather-icon-bg: linear-gradient(145deg, rgba(239, 246, 255, 0.32), rgba(96, 165, 250, 0.14));
    --weather-icon-glow: rgba(96, 165, 250, 0.32);
}

.weather-chip--kind-snow {
    --weather-accent: #93c5fd;
    --weather-accent-soft: rgba(147, 197, 253, 0.18);
    --weather-cloud: rgba(248, 252, 255, 0.96);
    --weather-cloud-back: rgba(210, 225, 240, 0.58);
    --weather-line: rgba(240, 248, 255, 0.94);
    --weather-icon-bg: linear-gradient(145deg, rgba(248, 250, 252, 0.32), rgba(147, 197, 253, 0.14));
    --weather-icon-glow: rgba(147, 197, 253, 0.28);
}

.weather-chip--kind-storm {
    --weather-accent: #facc15;
    --weather-accent-soft: rgba(250, 204, 21, 0.2);
    --weather-cloud: rgba(232, 235, 242, 0.92);
    --weather-cloud-back: rgba(154, 162, 178, 0.58);
    --weather-icon-bg: linear-gradient(145deg, rgba(254, 249, 195, 0.28), rgba(250, 204, 21, 0.13));
    --weather-icon-glow: rgba(250, 204, 21, 0.36);
}

/* Мягкие анимации: одинаковая база, разные акценты по погоде */
@keyframes weather-icon-breathe {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 12px var(--weather-accent-soft);
    }
    45%, 55% {
        transform: scale(1.025);
        box-shadow: 0 0 22px var(--weather-icon-glow);
    }
}

@keyframes weather-symbol-breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 0.94;
        filter: brightness(1);
    }
    50% {
        transform: scale(1.045);
        opacity: 1;
        filter: brightness(1.08) drop-shadow(0 0 6px var(--weather-icon-glow));
    }
}

@keyframes weather-rays-breathe {
    0%, 100% {
        opacity: 0.62;
        transform: scale(0.96);
    }
    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

@keyframes weather-cloud-drift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(1.5px, -1px, 0); }
}

@keyframes weather-rain-fall {
    0%, 100% {
        transform: translateY(-1px);
        opacity: 0.7;
    }
    50% {
        transform: translateY(2px);
        opacity: 1;
    }
}

@keyframes weather-snow-drift {
    0%, 100% {
        transform: translateY(-1px) rotate(0deg);
        opacity: 0.72;
    }
    50% {
        transform: translateY(1.5px) rotate(5deg);
        opacity: 1;
    }
}

@keyframes weather-storm-pulse {
    0%, 100% {
        opacity: 0.92;
        filter: brightness(1);
    }
    46% {
        opacity: 0.72;
        filter: brightness(1.1);
    }
    52% {
        opacity: 1;
        filter: brightness(1.35) drop-shadow(0 0 7px var(--weather-icon-glow));
    }
}

.weather-chip-icon-wrap {
    animation: weather-icon-breathe var(--motion-ambient) cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.weather-icon-core,
.weather-icon-cloud,
.weather-icon-cloud-back,
.weather-icon-bolt {
    transform-box: fill-box;
    transform-origin: center;
}

.weather-icon-rays,
.weather-icon-drops,
.weather-icon-snow,
.weather-icon-lines {
    transform-box: fill-box;
    transform-origin: center;
}

.weather-chip--kind-clear .weather-icon-core,
.weather-chip--kind-partly .weather-icon-core {
    animation: weather-symbol-breathe var(--motion-ambient) cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.weather-chip--kind-clear .weather-icon-rays,
.weather-chip--kind-partly .weather-icon-rays {
    animation: weather-rays-breathe var(--motion-ambient) cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.weather-chip--kind-partly .weather-icon-cloud,
.weather-chip--kind-cloudy .weather-icon-cloud,
.weather-chip--kind-cloudy .weather-icon-cloud-back,
.weather-chip--kind-fog .weather-icon-cloud {
    animation: weather-cloud-drift var(--weather-motion-cloud) var(--ease-standard) infinite;
}

.weather-chip--kind-drizzle .weather-icon-drops,
.weather-chip--kind-rain .weather-icon-drops {
    animation: weather-rain-fall var(--weather-motion-rain) var(--ease-standard) infinite;
}

.weather-chip--kind-snow .weather-icon-snow {
    animation: weather-snow-drift var(--weather-motion-snow) var(--ease-standard) infinite;
}

.weather-chip--kind-storm .weather-icon-bolt {
    animation: weather-storm-pulse var(--weather-motion-storm) var(--ease-standard) infinite;
}

/* Hero (главная) */
.weather-chip--hero {
    display: block;
    margin: 0;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
}

.hero-actions--with-weather .weather-chip--hero {
    max-width: 17rem;
}

.weather-chip--hero .weather-chip-inner {
    height: 100%;
    padding: 0.5rem 0.85rem 0.5rem 0.55rem;
    border-radius: calc(var(--radius-lg) + 2px);
    background: var(--white-alpha-10);
    border: 1px solid var(--white-alpha-20);
    box-shadow: none;
    color: var(--white);
}

.hero-actions--with-weather .weather-chip--hero .weather-chip-inner {
    background: transparent;
    border: none;
    padding: 0.45rem 0.75rem 0.45rem 0.5rem;
}

.weather-chip--hero .weather-chip-city,
.weather-chip--hero .weather-chip-temp,
.weather-chip--page-header .weather-chip-city,
.weather-chip--page-header .weather-chip-temp {
    color: var(--white);
}

.weather-chip--hero .weather-chip-now,
.weather-chip--hero .weather-chip-label {
    color: var(--white-alpha-82);
}

.weather-chip--hero .weather-chip-icon-wrap,
.weather-chip--page-header .weather-chip-icon-wrap {
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.34), transparent 45%),
        var(--weather-icon-bg);
}

/* Шапка страницы отеля (вне .page-header-actions-row — запасной отступ) */
.weather-chip--page-header {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin-top: 1rem;
    max-width: 20rem;
    vertical-align: middle;
}

.page-header-actions-row .weather-chip--page-header {
    margin-top: 0;
}

.weather-chip--page-header .weather-chip-inner {
    background: var(--white-alpha-15);
    border: 1px solid var(--white-alpha-35);
    backdrop-filter: var(--glass-blur-md);
    -webkit-backdrop-filter: var(--glass-blur-md);
    box-shadow: var(--elev-3);
    color: var(--white);
}

.weather-chip--page-header .weather-chip-now,
.weather-chip--page-header .weather-chip-label {
    color: var(--white-alpha-85);
}

/* Карточка в сайдбаре (если подключена) */
.weather-chip--card {
    margin-bottom: 1rem;
}

.footer-weather-attribution {
    font-size: var(--text-xs);
    opacity: 0.75;
    margin-top: var(--space-2);
}

.footer-weather-attribution a {
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    /* Только chip вне actions-row (запасной вариант в шаблоне) */
    .page-header-trust-cluster > .weather-chip--page-header,
    .page-header-content > .weather-chip--page-header {
        margin-top: 0.75rem;
        max-width: min(20rem, 100%);
    }

    .page-header-actions-row .weather-chip--page-header {
        margin-top: 0;
        max-width: none;
    }

    .page-header-actions-row .weather-chip--page-header .weather-chip-inner {
        padding: 0.5rem 0.85rem;
        gap: 0.65rem 0.85rem;
        min-height: 3.35rem;
    }

    .hero-actions--with-weather .weather-chip--hero {
        width: 100%;
        max-width: none;
    }

    .hero-actions--with-weather .weather-chip--hero .weather-chip-inner {
        justify-content: center;
        padding: 0.55rem 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .weather-chip-icon-wrap {
        width: 2.85rem;
        height: 2.85rem;
    }

    .weather-chip-icon,
    .weather-chip-svg {
        width: 1.9rem;
        height: 1.9rem;
    }

    .weather-chip-temp {
        font-size: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .weather-chip-icon-wrap,
    .weather-icon-core,
    .weather-icon-rays,
    .weather-icon-cloud,
    .weather-icon-cloud-back,
    .weather-icon-drops,
    .weather-icon-snow,
    .weather-icon-bolt {
        animation: none;
    }
}