.checkout{
    padding: 50px 0 80px;
}

.checkout-title{
    margin-bottom:40px;

    font-size:42px;
    font-weight:700;

    color:#202938;
}

.checkout-layout{
    display:grid;
    grid-template-columns:2fr 420px;
    gap:32px;
    align-items:start;
}
.checkout-right{
    position:sticky;
    top:30px;
}
.checkout-summary{
    position:sticky;
    top:110px;
}
/* ========================================
   CARD
======================================== */

.checkout-card{
    background:#fff;
    border:1px solid #e77b2c;
    border-radius:20px;
    padding:28px;
    margin-bottom:28px;
}
/* ========================================
   TITLE
======================================== */

.checkout-card__title{
    margin-bottom:28px;
    font-size:20px;
    font-weight:700;
    color:#202938;
}

/* ========================================
   FORM
======================================== */

.checkout-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px 24px;
}
.form-group{
    display:flex;
     flex-direction:column;
}
.form-group label{
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:#202938;
}
.form-group input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    font-size: 14px;
    transition: .25s;
    box-sizing: border-box;
}

.form-group input:hover,
.form-group input:focus {
    border-color: #e67e32;
    outline: none;
}
/* ========================================
   ORDER
======================================== */

.order-item{
    display:flex;
    gap:18px;
    margin-bottom:26px;
}

.order-item img {
    width: 160px;
    height: 110px;
    min-width: 160px;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center;
    display: block;
    border: 1px solid #e77b2c;
    border-radius: 14px;
    box-sizing: border-box;
}
.order-item h3{
    font-size:18px;
    margin-bottom:8px;
    color:#202938;
}
.order-item p{
    color:#6d7788;
}
.order-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:24px;
    border-top:1px solid #e77b2c;
    margin-bottom:26px;
}
.order-total span{
    font-size:18px;
}
.order-total strong{
    font-size:32px;
    color:#202938;
}
.checkout-button{
    width:100%;
    height:60px;
    border:none;
    border-radius:16px;
    background:#e77b2c;
    color:#fff;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}
.checkout-btn:hover{
    background:#e77b2c;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(231,123,44,.25);
}
.checkout-button + p {
    padding:  10px 10px;
    font-size: 14px;
    line-height: 1.4;
}

/* ========================================
   DELIVERY
======================================== */

.delivery-options{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.delivery-card{
    display:flex;
    position:relative;
    align-items:flex-start;
    gap:16px;
    padding:12px 16px;
    border:1px solid #dfe5ee;
    border-radius:14px;
    cursor:pointer;
    transition:.25s;
}
.delivery-card:hover{
    border-color:#e77b2c;
}
.delivery-card input{
    display:none;
}
.delivery-card input:checked ~ .card-check,
.payment-card input:checked ~ .card-check{

    opacity:1;
    transform:translateY(-50%) scale(1);

}

.delivery-card:has(input:checked),
.payment-card:has(input:checked){

    border-color:#e77b2c;
    background:#fff8f3;

}
.delivery-content{
    flex:1;
}
.delivery-content h3{
    margin-bottom:6px;
    font-size:18px;
    font-weight:700;
    color:#202938;
}
.delivery-content p{
    font-size:12px;
    color:#6d7788;
    line-height:1.4;
}
.delivery-field {
    margin-top: 24px;
}


/* Красивый список населённых пунктов */
.delivery-field .form-group > div {
    border-radius: 12px;
}

.delivery-field .form-group input {
    transition: border-color 0.25s ease;
}

.delivery-field .form-group input:hover,
.delivery-field .form-group input:focus {
    border-color: #e67e32;
    outline: none;
}


.receiver-checkbox{
    margin-bottom:28px;
}

.receiver-checkbox label{

    display:flex;
    align-items:center;
    gap:12px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    color:#202938;

}

.receiver-checkbox input{
    width:18px;
    height:18px;
    accent-color:#e77b2c;
}
.receiver-fields{
    margin-bottom:24px;
}
/* ========================================
   PAYMENT
======================================== */

.payment-options{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.payment-card{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:12px 16px;
    border:1px solid #dfe5ee;
    border-radius:14px;
    cursor:pointer;
    transition:.25s;
}

.payment-card:hover{
    border-color:#e77b2c;
}

.payment-card input{
    display:none;
}

.payment-content{
    flex:1;
}

.payment-content h3{
    margin-bottom:6px;
    font-size:18px;
    font-weight:700;
    color:#202938;
}
.payment-content p{
    margin:0;
    font-size:12px;
    line-height:1.4;
    color:#6d7788;
}

/* Выбранная карточка */

.payment-card:has(input:checked){

    border-color:#e77b2c;
    background:#fff8f3;
}

/* Галочка */

.payment-card input:checked ~ .card-check{

    opacity:1;
    transform:translateY(-50%) scale(1);

}
/* ========================================
   COMMENT
======================================== */

.checkout-textarea{
    width:100%;
    min-height:140px;
    padding:18px;
    resize:vertical;
    border:2px solid #dfe5ee;
    border-radius:14px;
    font-size:14px;
    font-family:inherit;
    line-height:1.6;
    transition:.25s;
}
.checkout-textarea:focus{
    outline:none;
    border-color:#e77b2c;
}
.payment-info{
    margin-top:10px;
    font-size:14px;
    line-height:1.6;
    color:#5f6b7a;
}
.card-check{
    position:absolute;
    top:50%;
    right:24px;
    transform:translateY(-50%) scale(.6);
    width:36px;
    height:36px;
    border-radius:50%;
    background:#e77b2c;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:700;
    opacity:0;
    transition:.25s;
    pointer-events:none;
}
/* =========================
   SUPON SUCCESS CHECK
========================= */

.order-success__check {
    width: 80x;
    height: 80px;
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-success__check svg {
    width: 80px;
    height: 80px;
    overflow: visible;
}

/* Оранжевый круг */

.order-success__check circle {
    fill: #e9822b;
    stroke: #e9822b;
    stroke-width: 2;
}

/* Белая галочка */

.order-success__check path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Анимация появления */

.order-success__check svg {
    animation: successCheckAppear 0.5s ease-out;
}

@keyframes successCheckAppear {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    70% {
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* =========================
   SUPON SUCCESS LAYOUT
========================= */

.order-success {
    padding: 40px 0 60px;
}

.order-success__container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}
/* =========================
   SUPON — BUTTON
========================= */

.order-success__actions {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.order-success__actions .checkout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 28px;

    background: #e77b2c;
    color: #ffffff;

    border: none;
    border-radius: 10px;

    font-size: 18px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.order-success__actions .checkout-button:hover {
    background: #d97120;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(233, 130, 43, 0.25);
}

.order-success__actions .checkout-button:active {
    transform: translateY(0);
    box-shadow: none;
}
@media (max-width: 600px) {
    .order-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 28px;
    }

    .order-item img {
        width: 100% !important;
        height: 100px !important;
        min-width: 0;
        object-fit: cover;
    }

    .order-item > div {
        width: 100%;
        min-width: 0;
    }

    .order-item h3 {
        overflow-wrap: anywhere;
    }
}