@import "global.css";
@import "index.css";

/* ===================================================
   НАСТРАИВАЕМЫЕ ПЕРЕМЕННЫЕ (регулируешь размеры тут)
=================================================== */
:root {
    --qr-size: 220px;           /* размер QR-кода */
    --qr-padding: 16px;         /* внутренний отступ белой карточки */
    --qr-radius: 16px;

    --store-padding: 32px 40px; /* кнопки магазинов */
    --store-radius: 12px;
    --store-icon-size: 20px;

    --qr-gap: 48px;             /* расстояние между QR-блоками */
}



/* ===================================================
   ОСНОВА
=================================================== */
.main {
    display: flex;
    align-items: center;
}

.main__contacts {
    flex-grow: 1;
    background: var(--background-color-light-gray);
}

.contacts {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: var(--color-dark-gray);
    padding: 40px 15px;
}


/* ===================================================
   ЛЕВАЯ КОЛОНКА
=================================================== */
.contacts__info {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contacts__title {
    font-weight: var(--font-bold);
    font-size: var(--h1-size);
}

.contacts__list p {
    margin-bottom: 15px;
    font-size: var(--big-text);
}

.contacts__list a {
    color: var(--color-dark-gray);
}

.address {
    line-height: 1.5;
}



/* ===================================================
   ПРАВАЯ КОЛОНКА — QR + КНОПКИ
=================================================== */
.contacts__qrblock {
    display: flex;
    gap: var(--qr-gap);
    align-items: flex-start;
}

.qr__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 160px;
}

.qr__label {
    font-size: var(--big-text);
    font-weight: 700;
    margin: 0;
}

/* Белая карточка под QR */
.qr__img_wrapper {
    background: #fff;
    border-radius: var(--qr-radius);
    padding: var(--qr-padding);
    box-shadow: 0 6px 0 rgba(0,0,0,0.12);
}

.qr__img_wrapper img {
    width: var(--qr-size);
    height: var(--qr-size);
}



/* ===================================================
   КНОПКИ МАГАЗИНОВ
=================================================== */
.store {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #151617;
    padding: var(--store-padding);
    border-radius: var(--store-radius);
    text-decoration: none;
    color: #fff;
    min-width: 180px;
    justify-content: center;
}

.store__icon {
    width: 26px;
    height: 26px;
}

.store__text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1;
}

.store__caption {
    font-size: 11px;
    opacity: 0.75;
}

.store__name {
    font-size: 15px;
    font-weight: 600;
}



/* ===================================================
   АДАПТИВ
=================================================== */

/* ===== планшеты ≤1024px ===== */
@media (max-width: 1024px) {
    .contacts {
        flex-direction: column;
        gap: 40px;
        align-items: flex-start;
    }

    .contacts__qrblock {
        align-self: center;
    }
}

/* ===== мобильные ≤768px ===== */
@media (max-width: 768px) {

    /* скрываем QR, оставляем кнопки */
    .qr__img_wrapper,
    .qr__label {
        display: none;
    }

    .contacts__qrblock {
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
    }

    .qr__item {
        align-items: stretch;
    }

    .store {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: var(--store-padding);
    }

    .store__icon {
        width: var(--store-icon-size);
        height: auto;
    }

    .store__text {
        flex: 1;
        align-items: center;
    }

    .store__caption {
        font-size: 12px;
    }

    .store__name {
        font-size: 16px;
    }
}

/* ===== маленькие ≤425px ===== */
@media (max-width: 425px) {
    .contacts__title {
        font-size: 30px !important;
    }
}