.egypt-checkout-page {
    background: #efe1c9;
    color: #321810;
}

.egypt-checkout-hero {
    min-height: 290px;
    display: grid;
    align-items: end;
    padding: 38px max(5vw, 24px);
    background-color: #3a1b13;
    background-image: var(--egypt-checkout-image);
    background-position: center;
    background-size: cover;
}

.egypt-checkout-hero > div {
    max-width: 590px;
    padding: 20px 24px;
    color: #fff1d3;
    background: rgba(47, 19, 13, .86);
}

.egypt-checkout-hero p,
.egypt-checkout-form__heading p {
    margin: 0 0 8px;
    color: #e6b563;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.egypt-checkout-hero h1 {
    margin: 0 0 10px;
    color: #fff1d3;
    font-family: 'Cinzel', serif;
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

.egypt-checkout-hero span {
    color: #ffe4ae;
    font-family: 'EB Garamond', serif;
    font-size: 19px;
    font-style: italic;
}

.egypt-checkout-steps {
    width: min(1120px, calc(100% - 36px));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 14px auto;
    border-bottom: 1px solid #c99a59;
}

.egypt-checkout-steps span {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 10px;
    color: #8a6a4e;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    text-align: center;
}

.egypt-checkout-steps span.active { color: #5c2418; }
.egypt-checkout-steps b { font-size: 10px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }

.egypt-checkout-layout {
    width: min(1120px, calc(100% - 36px));
    display: grid;
    grid-template-columns: minmax(210px, .75fr) minmax(340px, 1.35fr) minmax(210px, .75fr);
    gap: 12px;
    margin: 0 auto 32px;
}

.egypt-checkout-summary,
.egypt-checkout-form,
.egypt-checkout-benefits {
    padding: 15px;
    border: 1px solid #d7b47e;
    background: rgba(255, 249, 237, .78);
}

.egypt-checkout-summary img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid #c18a43;
}

.egypt-checkout-summary h2,
.egypt-checkout-benefits h2,
.egypt-checkout-payment h3 {
    margin: 18px 0 8px;
    color: #542316;
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
}

.egypt-checkout-summary p,
.egypt-checkout-benefits p,
.egypt-checkout-payment p,
.egypt-checkout-note {
    color: #684333;
    font-family: 'EB Garamond', serif;
    font-size: 16px;
    line-height: 1.25;
}

.egypt-checkout-summary hr { margin: 16px 0; border: 0; border-top: 1px solid #ddc39d; }
.egypt-checkout-summary dl { display: grid; gap: 14px; margin: 0; }
.egypt-checkout-summary dl div { display: grid; gap: 3px; }
.egypt-checkout-summary dt { color: #98652f; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.egypt-checkout-summary dd { margin: 0; color: #542316; font-family: 'EB Garamond', serif; font-size: 17px; }
.egypt-checkout-note { margin: 18px 0 0; font-style: italic; }

.egypt-checkout-form__heading { margin-bottom: 16px; }
.egypt-checkout-form__heading h2 { margin: 0 0 6px; color: #542316; font-family: 'Cinzel', serif; font-size: 25px; font-weight: 500; text-transform: uppercase; }
.egypt-checkout-form__heading span { color: #684333; font-family: 'EB Garamond', serif; font-size: 16px; }
.egypt-checkout-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.egypt-checkout-fields label, .egypt-checkout-message { display: grid; gap: 6px; }
.egypt-checkout-fields label.wide { grid-column: 1 / -1; }
.egypt-checkout-fields label span, .egypt-checkout-message span { color: #6f3a26; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.egypt-checkout-fields input, .egypt-checkout-message textarea { width: 100%; min-height: 42px; padding: 10px; border: 1px solid #d8bf9e; border-radius: 2px; color: #3e2117; background: #fffaf0; font: 16px 'EB Garamond', serif; }
.egypt-checkout-message { margin-top: 16px; }
.egypt-checkout-message textarea { min-height: 100px; resize: vertical; }
.egypt-checkout-payment { margin: 16px 0 0; padding: 14px; border: 1px solid #d8bf9e; background: #fffaf0; }
.egypt-checkout-payment h3 { margin-top: 0; }
.egypt-checkout-payment div { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #c18a43; color: #542316; font-family: 'Cinzel', serif; font-size: 11px; }
.egypt-checkout-payment strong { color: #98652f; font-weight: 400; text-align: right; }
.egypt-checkout-payment p { margin: 10px 0 0; font-size: 14px; }
.egypt-checkout-form button { width: 100%; margin-top: 18px; padding: 13px 18px; border: 1px solid #b87931; border-radius: 2px; color: #fff1d3; background: #681b16; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.egypt-checkout-form > small { display: block; margin-top: 12px; color: #80634c; font-family: 'EB Garamond', serif; font-size: 13px; text-align: center; }
.egypt-checkout-benefits p { padding: 12px 0; border-bottom: 1px solid #ddc39d; }
.egypt-checkout-benefits p strong { display: block; margin-bottom: 3px; color: #542316; font-family: 'Cinzel', serif; font-size: 11px; text-transform: uppercase; }
.egypt-checkout-benefits ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: #684333; font: 16px/1.2 'EB Garamond', serif; }

@media (max-width: 880px) {
    .egypt-checkout-layout { grid-template-columns: 1fr 1fr; }
    .egypt-checkout-form { grid-column: 1 / -1; grid-row: 1; }
}

@media (max-width: 620px) {
    .egypt-checkout-hero { min-height: 300px; padding: 20px 12px 24px; }
    .egypt-checkout-hero > div { padding: 16px; }
    .egypt-checkout-hero h1 { font-size: 31px; }
    .egypt-checkout-hero span { font-size: 17px; }
    .egypt-checkout-steps, .egypt-checkout-layout { width: calc(100% - 20px); }
    .egypt-checkout-steps span { padding: 7px 2px; font-size: 10px; }
    .egypt-checkout-steps b { font-size: 8px; }
    .egypt-checkout-layout { grid-template-columns: 1fr; }
    .egypt-checkout-form { grid-column: auto; }
    .egypt-checkout-fields { grid-template-columns: 1fr; }
    .egypt-checkout-fields label.wide { grid-column: auto; }
    .egypt-checkout-payment div { display: grid; }
    .egypt-checkout-summary dl { gap: 10px; }
    .egypt-checkout-summary p,
    .egypt-checkout-benefits p,
    .egypt-checkout-payment p,
    .egypt-checkout-note { font-size: 15px; }
}