/* ================================================================
   CONTACTS PAGE — chemodan-kupit.ru / /contacts/
   Префикс: contacts-
   Грузится ТОЛЬКО на странице контактов через AddHeadString.
   Не влияет на header/footer/каталог.
   Mobile-first. Breakpoints: 480 / 768 / 1024 / 1280px
   ================================================================ */

/* ----------------------------------------------------------------
   Сброс стандартной Aspro-обвязки только на странице контактов.
   :has(.contacts-page) нужен, потому что old layout расположен выше контента:
   left_block/right_block/wrapper_inner создаются в общем header.php.
   ---------------------------------------------------------------- */

body:has(.contacts-page) #content {
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.contacts-page) #content > .wrapper_inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
}

body:has(.contacts-page) #content > .wrapper_inner > .left_block {
    display: none !important;
}

body:has(.contacts-page) #content > .wrapper_inner > .right_block {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.contacts-page) #content > .wrapper_inner > .right_block > .middle,
body:has(.contacts-page) #content > .wrapper_inner > .middle {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.contacts-page) #content > .wrapper_inner > .right_block > .middle > .container,
body:has(.contacts-page) #content > .wrapper_inner > .middle > .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.contacts-page) #navigation,
body:has(.contacts-page) #pagetitle {
    display: none !important;
}

/* ----------------------------------------------------------------
   КОНТЕЙНЕР И БАЗА
   ---------------------------------------------------------------- */

.contacts-page {
    background: #FFFFFF;
    color: #1A1A1A;
    font-family: inherit;
    padding: 18px 0 36px;
    box-sizing: border-box;
}

.contacts-page,
.contacts-page * {
    box-sizing: border-box;
}

.contacts-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ----------------------------------------------------------------
   HERO
   ---------------------------------------------------------------- */

.contacts-hero {
    padding: 0 0 20px;
}

.contacts-hero__title {
    font-size: 24px;
    font-weight: 800;
    color: #111827;
    line-height: 1.22;
    letter-spacing: -.3px;
    margin: 0 0 10px;
    padding: 0;
}

.contacts-hero__lead {
    font-size: 15px;
    color: #4B5563;
    line-height: 1.55;
    margin: 0 0 18px;
    max-width: 720px;
}

/* Quick action grid: телефон / WhatsApp / маршрут */

.contacts-quick {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.contacts-quick__btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    text-decoration: none !important;
    color: #1A1A1A !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    min-height: 64px;
}

.contacts-quick__btn:hover {
    border-color: #008642;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    color: #1A1A1A !important;
}

.contacts-quick__btn svg {
    flex-shrink: 0;
    color: #6B7280;
}

.contacts-quick__btn--primary {
    background: #008642;
    border-color: #008642;
    color: #FFFFFF !important;
}
.contacts-quick__btn--primary:hover {
    background: #219c63;
    border-color: #219c63;
    color: #FFFFFF !important;
    box-shadow: 0 2px 12px rgba(0, 134, 66, .18);
}
.contacts-quick__btn--primary svg { color: #FFFFFF; }

.contacts-quick__btn--wa {
    background: #25D366;
    border-color: #25D366;
    color: #FFFFFF !important;
}
.contacts-quick__btn--wa:hover {
    background: #1DAE53;
    border-color: #1DAE53;
    color: #FFFFFF !important;
    box-shadow: 0 2px 12px rgba(37, 211, 102, .22);
}
.contacts-quick__btn--wa svg { color: #FFFFFF; }

.contacts-quick__col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contacts-quick__label {
    font-size: 12px;
    font-weight: 500;
    opacity: .82;
    line-height: 1.2;
}

.contacts-quick__value {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------------------------------
   ОБЩИЕ — section title
   ---------------------------------------------------------------- */

.contacts-section__title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    margin: 0 0 14px;
    padding: 0;
    letter-spacing: -.2px;
}

/* ----------------------------------------------------------------
   ГДЕ НАС НАЙТИ + КАРТА
   ---------------------------------------------------------------- */

.contacts-where {
    margin: 28px 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: stretch;
}

.contacts-where__info {
    background: #F7F8FA;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 20px;
}

.contacts-address {
    margin: 0 0 8px;
}

.contacts-address__line {
    font-size: 16px;
    color: #1A1A1A;
    line-height: 1.4;
}

.contacts-address__line strong {
    font-weight: 700;
    color: #111827;
}

.contacts-address__line--muted {
    color: #6B7280;
    font-size: 14px;
    margin-top: 2px;
}

.contacts-metro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 5px 12px 5px 9px;
    font-size: 13px;
    font-weight: 600;
    color: #1A1A1A;
    margin: 8px 0 14px;
}

.contacts-metro__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #E10E0E; /* классический цвет Авиамоторной — Калининская линия */
    flex-shrink: 0;
}

.contacts-note {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.55;
    margin: 0 0 18px;
}

.contacts-where__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contacts-btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    line-height: 1.2;
    width: 100%;
    box-sizing: border-box;
}

.contacts-btn--primary {
    background: #008642;
    border-color: #008642;
    color: #FFFFFF !important;
}
.contacts-btn--primary:hover {
    background: #219c63;
    border-color: #219c63;
    color: #FFFFFF !important;
}

.contacts-btn--ghost {
    background: transparent;
    border-color: #D1D5DB;
    color: #374151 !important;
}
.contacts-btn--ghost:hover {
    border-color: #374151;
    color: #1A1A1A !important;
}

/* Карта */
.contacts-where__map {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    background: #F7F8FA;
}

.contacts-map {
    width: 100%;
    height: 280px;
    background: #F0F1F4;
}

/* ----------------------------------------------------------------
   КАНАЛЫ СВЯЗИ
   ---------------------------------------------------------------- */

.contacts-channels {
    margin: 36px 0 0;
}

.contacts-channels__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.contacts-channel {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    text-decoration: none !important;
    color: #1A1A1A !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.contacts-channel:hover {
    border-color: #008642;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    color: #1A1A1A !important;
}

.contacts-channel__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contacts-channel__icon--green {
    background: #ECFDF5;
    color: #008642;
}

.contacts-channel__icon--wa {
    background: #DCFCE7;
    color: #1DAE53;
}

.contacts-channel__icon--gray {
    background: #F1F5F9;
    color: #475569;
}

.contacts-channel__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.contacts-channel__title {
    font-size: 13px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.2;
}

.contacts-channel__value {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    word-break: break-word;
}

.contacts-channel__hint {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.4;
    margin-top: 1px;
}

/* ----------------------------------------------------------------
   ДОСТАВКА И САМОВЫВОЗ
   ---------------------------------------------------------------- */

.contacts-services {
    margin: 36px 0 0;
}

.contacts-services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.contacts-service {
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}

.contacts-service__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #ECFDF5;
    color: #008642;
    margin-bottom: 12px;
}

.contacts-service__title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 6px;
    line-height: 1.3;
}

.contacts-service__text {
    font-size: 14.5px;
    color: #4B5563;
    line-height: 1.55;
    margin: 0;
}

/* ----------------------------------------------------------------
   FOOTER блока — короткое примечание + реквизиты
   ---------------------------------------------------------------- */

.contacts-foot {
    margin: 32px 0 0;
    padding: 18px 20px;
    background: #F7F8FA;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}

.contacts-foot__hint {
    font-size: 14.5px;
    color: #374151;
    line-height: 1.55;
    margin: 0 0 12px;
}

.contacts-foot__legal {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.5;
    padding-top: 12px;
    border-top: 1px solid #E5E7EB;
}

/* ----------------------------------------------------------------
   MOBILE STICKY BAR
   Отключён: на сайте уже есть Jivo-виджет, fixed-панель конфликтует с ним.
   Основные действия остаются крупными кнопками в первом экране.
   ---------------------------------------------------------------- */

.contacts-sticky {
    display: none;
}

.contacts-sticky__btn {
    flex: 1;
    text-align: center;
    padding: 12px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    line-height: 1.2;
    transition: background-color .15s ease;
    border: 2px solid transparent;
}

.contacts-sticky__btn--primary {
    background: #008642;
    color: #FFFFFF !important;
    border-color: #008642;
}
.contacts-sticky__btn--primary:hover {
    background: #219c63;
    border-color: #219c63;
}

.contacts-sticky__btn--wa {
    background: #25D366;
    color: #FFFFFF !important;
    border-color: #25D366;
}
.contacts-sticky__btn--wa:hover {
    background: #1DAE53;
    border-color: #1DAE53;
}

/* ----------------------------------------------------------------
   BREAKPOINT: 480px
   ---------------------------------------------------------------- */
@media (min-width: 480px) {
    .contacts-hero__title {
        font-size: 28px;
    }
    .contacts-quick {
        grid-template-columns: 1fr 1fr;
    }
    .contacts-quick__btn:first-child {
        grid-column: 1 / -1;
    }
    .contacts-services__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ----------------------------------------------------------------
   BREAKPOINT: 768px (tablet)
   ---------------------------------------------------------------- */
@media (min-width: 768px) {
    .contacts-page {
        padding: 28px 0 56px;
    }

    .contacts-container {
        padding: 0 24px;
    }

    .contacts-hero__title {
        font-size: 34px;
        letter-spacing: -.4px;
        margin-bottom: 12px;
    }

    .contacts-hero__lead {
        font-size: 16px;
        margin-bottom: 22px;
    }

    .contacts-section__title {
        font-size: 24px;
    }

    /* Quick — три кнопки в ряд */
    .contacts-quick {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
    }
    .contacts-quick__btn:first-child {
        grid-column: auto;
    }

    /* Where: текст слева, карта справа */
    .contacts-where {
        grid-template-columns: 1fr 1.15fr;
        gap: 22px;
        margin-top: 36px;
    }

    .contacts-where__actions {
        flex-direction: row;
    }

    .contacts-btn {
        width: auto;
    }

    .contacts-map {
        height: 100%;
        min-height: 360px;
    }

    /* Каналы — три карточки в ряд */
    .contacts-channels__grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 14px;
    }

    /* Доставка — три в ряд */
    .contacts-services__grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 14px;
    }

    .contacts-service {
        padding: 22px;
    }

    /* Sticky прячем на tablet+ */
    .contacts-sticky {
        display: none;
    }
}

/* ----------------------------------------------------------------
   BREAKPOINT: 1024px (desktop)
   ---------------------------------------------------------------- */
@media (min-width: 1024px) {
    .contacts-hero__title {
        font-size: 38px;
        letter-spacing: -.5px;
    }

    .contacts-where {
        grid-template-columns: 1fr 1.4fr;
        gap: 28px;
    }

    .contacts-where__info {
        padding: 26px 28px;
    }

    .contacts-map {
        min-height: 400px;
    }
}

/* ----------------------------------------------------------------
   BREAKPOINT: 1280px (wide)
   ---------------------------------------------------------------- */
@media (min-width: 1280px) {
    .contacts-hero__title {
        font-size: 42px;
    }
}