/* Стили страницы "Контакты" */

h1{
    font-family: "Ony One";
    font-weight: 500;
    line-height: 100%;
    font-size: 30px;
    color: #313332;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 3.5vw;
}

.wrapper-contacts {
    width: 100%;
    margin: 0 auto;
}

/* Типографика*/
.wrapper-contacts h2,
.wrapper-contacts h3 {
    font-family: "Ony One";
    font-weight: 500;
    line-height: 100%;
    font-size: 24px;
    color: #30333A;
}

.wrapper-contacts * {
    font-family: "Ony One";
    font-weight: 400;
    font-size: 18px; 
    /*font-size: clamp(16px, 1vw, 40px);*/
    line-height: 115%;
    color: #313332;
}

.wrapper-contacts>.map {
    width: 100%;
    aspect-ratio: 3 / 2;
}

.wrapper-contacts>.map>iframe {
    width: 100%;
    height: 100%;
}

.block-info {
    margin-top: 20px;
}

.block-info h2, 
.block-info p{
    margin: 10px 0;
}

.block-info p{
    font-size: 18px;
}

.block-info-grid {
    display: grid;
    grid-template-columns: 9fr 6fr 7fr;
    gap: clamp(10px, 1vw, 60px);
    grid-template-areas: 
        "adresses schedule contacts"
        "adresses scheule contacts";
}

.schedule {grid-area: schedule;}

.adresses-col{
    grid-area: adresses;
    display: grid;
    /*gap: 24px;*/
    align-content: start;
}

.contacts-col {
  grid-area: contacts;
  display: grid;
  /*gap: 24px;*/
  align-content: start;
}

.big-addresses h3:nth-of-type(2) {
    margin-top: 2vw;
}

.instuctions-pdf {
    margin-top: 3.4vw;
}

.routes {
    margin-top: clamp(40px, 7vw, 250px);
}

.routes>h2{
    text-align: center;
    margin: 3vw 0;
}
.route>p {
    text-align: center;
    margin-bottom: 1.4vw;
}

.route-content {
    transition: opacity 0.3s ease;
}


.route-buttons {
    display: flex;
    gap: max(1.4vw, 24px);
    margin: 0 auto 1.4vw;
    justify-content: center;
}

.route-btn {
    font-family: "Ony One";
    font-weight: 400;
    /* font-size: 18px; */
    /*font-size: clamp(18px, 1vw, 50px);*/
    background-color: #F2F2F2;
    color: #313332;
    width: clamp(249px, 16vw, 500px);
    height: clamp(48px, 3.3vw, 140px);
    border: none;
    cursor: pointer;
}

.route-btn-active {
    background-color: #AD83FF;
    color: #ffffff;
}

.route:first-of-type {
    margin-top: 0;
}

.addresses-nav{
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.address-btn{
    font-family: "Ony One";
    font-weight: 400;
    /* font-size: 18px; */
    /*font-size: clamp(18px, 1vw, 50px);*/
    background-color: #F2F2F2;
    color: #313332;
    width: calc(32% - 10px);
    min-height: clamp(48px, 3.3vw, 140px);
    border: none;
    cursor: pointer;
    padding: 10px;
}

.address-btn.address-btn-active {
    background-color: #AD83FF;
    color: #ffffff;
}

.details {
    width: 54.5%;
    min-width: 785px;
    margin: clamp(40px, 7vw, 250px) auto 0;
    text-align: center;
    font-family: "Ony One";
    font-weight: 400;
    /* font-size: 18px; */
    font-size: clamp(16px, 1.2vw, 32px);
    line-height: 115%;
    color: #313332;
}

.details_info {
    display: grid;
    text-align: left;
    gap: min(2vw, 40px);
    grid-template-columns: 3fr 4fr 7fr;
}

.di-double {
    grid-column: span 2;
}

.di-triple {
    grid-column: span 3;
}

.feedback {
    text-align: center;
    width: 57%;
    min-width: 828px;
    margin: 100px auto 20px;
}

.feedback-form-row {
    display: flex;
    align-items: stretch;
    gap: clamp(20px, 8vw, 150px);
    margin-top: 30px;
}

.ffr-image {
    width: 40%;
    flex-shrink: 0;
}

.ffr-image>img {
    width: 100%;
    display: block;
}

/* Колонка полей — flex-контейнер */
.ffr-fields {
    text-align: left;
    flex: 1;
    width: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* Каждая пара label+input */
.field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.4vw;
}

.field label {
    margin-bottom: .7vw;
}

.field input {
    height: clamp(40px, 3vw, 70px);
}

.field input,
.field textarea {
    width: 100%;
    padding: 0 max(0.8vw, 14px);
    background-color: #F2F2F2;
    border: none;
    box-sizing: border-box;
    font-family: inherit;
    color: #656973;
    /*font-size: clamp(16px, 1.1vw, 26px);*/
}

.field input::placeholder,
.field textarea::placeholder {
    color: #656973;
}

/* Textarea занимает всё оставшееся пространство */
.field--textarea {
    flex: 1;
    /* ← растягивается на остаток */
    margin-bottom: 0;
    min-height: 0;
    /* ← обязательно для корректного сжатия */
}

.field--textarea textarea {
    flex: 1;
    /* ← растягивается внутри своего блока */
    height: 100%;
    resize: none;
    /* убираем ручное изменение размера */
    padding-top: 13px;
    /* имитируем вертикальный padding как у input */
    box-sizing: border-box;
}


.policy-row {
    display: flex;
    align-items: center;
    gap: 1vw;
    justify-content: center;
    margin-top: 2vw;
}

/* Скрываем стандартный чекбокс и рисуем свой */
.policy-row input[type="checkbox"] {
    appearance: none;
    width: clamp(20px, 1.6vw, 36px);
    height: clamp(20px, 1.6vw, 36px);
    margin-top: 0.15em;
    border: 0;
    background-color: #F2F2F2;
    cursor: pointer;
    position: relative;
    display: grid;
    place-content: center;
    flex-shrink: 0;
}

/* Галочка через псевдоэлемент */
.policy-row input[type="checkbox"]::before {
    content: "";
    width: clamp(8px, 1vw, 24px);
    height: clamp(5px, .7vw, 12px);
    border-left: clamp(1.5px, 0.23vw, 4px) solid #ffffff;
    border-bottom: clamp(1.5px, 0.23vw, 4px) solid #ffffff;

    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform 0.15s ease;
}

/* Состояние "отмечено" */
.policy-row input[type="checkbox"]:checked {
    background-color: #AD83FF;
    border-color: none;
}

.policy-row input[type="checkbox"]:checked::before {
    transform: rotate(-45deg) scale(1) translateY(-.2vw) translateX(.2vw);
}

.policy-row label {
    text-align: left;
    font-size: 16px;
    cursor: pointer;
}

.policy-row label a {
    font-size: inherit;
    color: #AD83FF;
    text-decoration: underline;
}

.policy-row label a:hover {
    text-decoration: none;
}

.feedback>form>button {
    background-color: #422223;
    color: #ffffff;
    width: clamp(140px, 12vw, 280px);
    height: clamp(50px, 4.1vw, 90px);
    border: none;
    font-family: "Ony One";
    font-weight: 500;
    font-size: clamp(16px, 1.2vw, 24px);
    margin-top: 1.8vw;
    cursor: pointer;
}

@media(min-width:2500px){
    .policy-row input[type="checkbox"]:checked::before {
        transform: rotate(-45deg) scale(1) translateY(-.05vw) translateX(.05vw);
    }
}

@media(max-width: 1000px) {
    .details {
        width: 80%;
    }
    .feedback{
        width: 82%;
    }
}

@media(max-width:800px) {
    .details {
        width: 100%;
        min-width: 0;
    }
    .feedback{
        width: 100%;
        min-width: 0;
    }
        
    .addresses-nav{
        flex-direction: column;
    }
    
    .address-btn{
        width: 100%;
    }
    
    .route-btn {
        width: 38%;
    }
    
    .block-info-grid {
        gap: 30px;
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "fact fact fact legal legal legal"
            "phone phone email email schedule schedule";
    }
    .contacts-col { display: contents; }
    .adresses-col {display: contents;}
    

    .fact {grid-area: fact;}
    .legal {grid-area: legal;}
    .phone {grid-area: phone;}
    .email {grid-area: email;}
    
    .block-info h2{
        margin: 0;
    }
    .block-info p{
        margin: 10px 0;
    }
    .docs_cards {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .feedback-form-row{
        gap: 4%;
    }
    .ffr-image{
        width: 48%;
    }
    .feedback{
        margin-bottom: 0;
    }
}

@media(max-width:700px) {
    .block-info-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "fact" "legal" "phone" "email" "schedule";
        gap: 10px
    }
    
    .addresses-content{
        margin-bottom: 20vw;
    }
    
     .route-buttons{
        flex-direction: column;
        margin-top: 20px;
        gap: 10px
    }
    
    .route-btn {
        width: 100%;
    }

    
    .routes .slider-outer-container { 
        margin-top: 5vw;
    } 
    
    .feedback{
        text-align: left;
        margin: 40px 0;
    }
    
    .feedback-form-row {
        flex-direction: column;
        gap: 6px;
    }
    
    .ffr-image {
        width: 100%;
    }
    
    .field input {
        padding: 0 20px;
        height: 52px;
    }
    
    .field--textarea {
        flex: none;
        min-height: auto;
    }
    
    .field--textarea textarea {
        flex: none;          
        height: 184px !important;
        padding: 20px;
    }
    
    .field label {
        flex: none;
        margin: 14px 0 6px;
    }
    
    .feedback>form>button{
        display: block;
        margin: 20px auto 0;
    }
    
    .details_info {
        grid-template-columns: 1fr 1fr;
        gap: 24px
    }

    .di-text {
        grid-column: span 2;
    }

    .di-double {
        grid-column: span 2;
    }

    .di-triple {
        grid-column: span 2;
    }

    .di-text:nth-of-type(-n+4) {
        grid-column: span 1;
    }
    .routes>h2 {
        text-align: left;
        margin-top: 10vw;
        margin-bottom: 5vw;
    }
}

@media(max-width:500px) {
    .docs_cards {
        grid-template-columns: 1fr;
    }
    h1{
        font-size: 20px;
        text-align: left !important;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 30px;
    }
    
    .wrapper-contacts h2,
    .wrapper-contacts h3,
    .wrapper-contacts p{
        text-align: left;
    }
    
    .wrapper-contacts h2,
    .wrapper-contacts h3,
    .wrapper-contacts p,
    .wrapper-contacts button{
        font-size: 16px;
    }
    
    .block-info h3{
        margin: 0;
    }
    
    .block-info p{
        margin: 10px 0 16px;
    }
    
    .instuctions-pdf{
        margin: 12vw 0;
    }
    
    .policy-row{
        margin-top: 20px;
    }
}