.checkout-page { min-height: 100vh; background: radial-gradient(circle at 78% 8%, rgba(255,196,0,.07), transparent 24%), #070808; }
.checkout-header { border-bottom: 1px solid var(--color-border); background: rgba(3,4,4,.96); }
.checkout-header-inner { height: 82px; display: flex; align-items: center; justify-content: space-between; }
.secure-label { display: flex; align-items: center; gap: 8px; color: #b6b9b7; font-size: .8rem; }
.secure-label i { color: var(--color-primary); }
.checkout-main { padding: 27px 0 60px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: #989c9a; font-size: .8rem; }
.back-link:hover { color: var(--color-primary); }
.checkout-title { margin: 27px 0 25px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.checkout-title h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.04em; }
.checkout-title .eyebrow { margin-bottom: 4px; }
.checkout-steps { display: flex; align-items: center; gap: 10px; color: #767a78; font-size: .73rem; font-weight: 700; }
.checkout-steps span { display: flex; align-items: center; gap: 6px; }
.checkout-steps b { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #3a3e3c; border-radius: 50%; }
.checkout-steps .active { color: #e7e8e4; }
.checkout-steps .active b { color: #090909; border-color: var(--color-primary); background: var(--color-primary); }
.checkout-steps > i { font-size: .55rem; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; align-items: start; gap: 25px; }
.checkout-content { display: grid; gap: 17px; }
.checkout-card, .summary-card { border: 1px solid var(--color-border); border-radius: 14px; background: linear-gradient(145deg, #101313, #0a0c0c); box-shadow: 0 14px 40px rgba(0,0,0,.18); }
.checkout-card { padding: 25px; }
.card-title { margin-bottom: 22px; display: flex; align-items: flex-start; gap: 13px; }
.card-title > span { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; color: #0a0b0b; border-radius: 8px; background: var(--color-primary); font-size: .8rem; font-weight: 900; }
.card-title h2, .summary-card h2 { margin: 0 0 4px; font-size: 1.08rem; letter-spacing: -.01em; }
.card-title p { margin: 0; color: #858987; font-size: .74rem; }
.checkout-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.checkout-field { display: grid; gap: 6px; color: #d6d8d5; font-size: .76rem; font-weight: 700; }
.checkout-field small { color: #727674; font-weight: 400; }
.checkout-field input, .checkout-field select { width: 100%; min-height: 48px; padding: 0 13px; color: var(--color-light); border: 1px solid #303434; border-radius: 8px; outline: 0; background: #0c0f0f; font: inherit; font-weight: 400; }
.checkout-field select { color-scheme: dark; }
.checkout-field input:focus, .checkout-field select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(255,196,0,.09); }
.checkout-field input[readonly] { color: #a9adaa; background: #101313; }
.field-wide { grid-column: 1 / -1; }
.address-grid { grid-template-columns: .7fr 1.7fr .55fr; }
.address-field { grid-column: span 2; }
.shipping-calculator { margin-top: 18px; padding: 14px; color: #9da19f; border: 1px dashed #353a38; border-radius: 9px; background: #0b0e0e; font-size: .73rem; }
.shipping-calculator > div:first-child { display: flex; align-items: center; gap: 9px; }
.shipping-calculator i { color: var(--color-primary); }
.shipping-calculator.is-loading { opacity: .85; }
.shipping-title { margin: 0 0 10px; color: #d8dad7; font-weight: 800; }
.shipping-title i { margin-right: 6px; }
.shipping-options { display: grid; gap: 8px; }
.shipping-option { padding: 12px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; border: 1px solid #303434; border-radius: 8px; background: #0e1111; cursor: pointer; }
.shipping-option:has(input:checked) { border-color: var(--color-primary); background: rgba(255,196,0,.045); }
.shipping-option input { accent-color: var(--color-primary); }
.shipping-option strong, .shipping-option small { display: block; }
.shipping-option strong { color: #e1e2df; font-size: .75rem; }
.shipping-option small { margin-top: 2px; color: #7e8380; font-size: .66rem; }
.shipping-option b { color: var(--color-primary); font-size: .76rem; }
.payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.payment-options label { cursor: pointer; }
.payment-options input { position: absolute; opacity: 0; pointer-events: none; }
.payment-box { min-height: 85px; padding: 15px; position: relative; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 11px; border: 1px solid #303434; border-radius: 9px; background: #0c0f0f; }
.payment-box > i:first-child { grid-row: 1 / 3; color: var(--color-primary); font-size: 1.6rem; text-align: center; }
.payment-box strong { align-self: end; font-size: .82rem; }
.payment-box small { align-self: start; color: #7f8381; font-size: .68rem; }
.payment-box .check { position: absolute; top: 11px; right: 11px; display: none; color: var(--color-primary); }
.payment-options input:checked + .payment-box { border-color: var(--color-primary); background: rgba(255,196,0,.045); }
.payment-options input:checked + .payment-box .check { display: block; }
.payment-options input:focus-visible + .payment-box { box-shadow: 0 0 0 3px rgba(255,196,0,.15); }
.order-summary { position: sticky; top: 20px; }
.summary-card { padding: 23px; }
.summary-card > h2 { margin-bottom: 19px; }
.checkout-offer { margin: -3px 0 25px; padding: 23px 28px; overflow: hidden; position: relative; display: grid; grid-template-columns: minmax(250px, 1fr) auto auto; align-items: center; gap: 34px; border: 1px solid rgba(255,196,0,.6); border-radius: 14px; background: linear-gradient(120deg, rgba(255,196,0,.2), rgba(255,196,0,.055) 55%, rgba(255,196,0,.13)), #0d100c; box-shadow: 0 15px 42px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05); }
.checkout-offer::before { width: 5px; position: absolute; inset: 0 auto 0 0; content: ''; background: var(--color-primary); box-shadow: 0 0 24px rgba(255,196,0,.65); }
.checkout-offer::after { width: 190px; height: 190px; position: absolute; top: -120px; right: -70px; content: ''; border-radius: 50%; background: rgba(255,196,0,.14); filter: blur(2px); pointer-events: none; }
.offer-copy, .offer-prices, .offer-countdown { position: relative; z-index: 1; }
.offer-copy { display: grid; gap: 5px; }
.offer-badge { width: max-content; margin-bottom: 2px; display: inline-flex; align-items: center; gap: 7px; color: var(--color-primary); font-size: .74rem; font-weight: 950; letter-spacing: .075em; text-transform: uppercase; }
.offer-copy > strong { color: #f5f5ed; font-size: 1.14rem; line-height: 1.2; }
.offer-copy > small, .offer-prices small { color: #9b9f9c; font-size: .7rem; }
.offer-prices { min-width: 190px; padding-inline: 30px; display: grid; gap: 3px; border-inline: 1px solid rgba(255,196,0,.2); text-align: center; }
.offer-prices span { color: #afb3af; font-size: .78rem; }
.offer-prices s { color: #c0c3bf; }
.offer-prices strong { color: #fff4c8; font-size: 2.25rem; line-height: 1.05; letter-spacing: -.045em; }
.offer-countdown { min-width: 190px; display: grid; justify-items: center; gap: 8px; }
.offer-countdown > span { color: #dadcd8; font-size: .72rem; font-weight: 800; }
.offer-countdown i { margin-right: 4px; color: var(--color-primary); }
.offer-countdown time { min-width: 150px; padding: 9px 13px; color: #090b08; border-radius: 8px; background: var(--color-primary); box-shadow: 0 8px 24px rgba(255,196,0,.16); font-size: 2rem; font-variant-numeric: tabular-nums; font-weight: 950; letter-spacing: .075em; line-height: 1; text-align: center; }
.offer-status { min-height: 0; margin: 0; grid-column: 1 / -1; color: #e0b9b9; font-size: .72rem; text-align: center; }
.checkout-offer.is-expired { border-color: #343936; background: #0d100f; box-shadow: none; }
.checkout-offer.is-expired::before { background: #555b57; box-shadow: none; }
.checkout-offer.is-expired::after { display: none; }
.checkout-offer.is-expired .offer-badge, .checkout-offer.is-expired .offer-countdown i { color: #9da19e; }
.checkout-offer.is-expired .offer-prices span, .checkout-offer.is-expired .offer-prices small { display: none; }
.checkout-offer.is-expired .offer-prices strong { color: #d8dad7; }
.checkout-offer.is-expired .offer-countdown time { color: #aeb2af; background: #242826; }
.checkout-offer.is-expired .offer-status { margin-top: -15px; }
.summary-product { padding-bottom: 18px; display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px; border-bottom: 1px solid var(--color-border); }
.summary-image { height: 92px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: 10px; background: radial-gradient(circle, rgba(255,196,0,.12), transparent 67%), #080a0a; }
.summary-image img { width: 105px; transform: rotate(-5deg); }
.summary-product strong { display: block; font-size: .84rem; line-height: 1.25; }
.summary-product small { display: block; margin-top: 4px; color: #777b79; font-size: .67rem; }
.quantity { width: max-content; margin-top: 11px; display: flex; overflow: hidden; border: 1px solid #333737; border-radius: 6px; }
.quantity button, .quantity input { width: 30px; height: 29px; padding: 0; color: #e5e5e1; border: 0; background: #121515; text-align: center; }
.quantity button { color: var(--color-primary); cursor: pointer; }
.quantity input { width: 34px; outline: 0; appearance: textfield; }
.quantity input::-webkit-inner-spin-button { appearance: none; }
.summary-lines { padding: 15px 0; border-bottom: 1px solid var(--color-border); }
.summary-lines p { margin: 0 0 9px; display: flex; justify-content: space-between; gap: 20px; color: #929694; font-size: .73rem; }
.summary-lines p:last-child { margin: 0; }
.summary-lines strong { color: #d6d7d4; font-size: .7rem; text-align: right; }
.summary-total { padding: 17px 0; display: flex; justify-content: space-between; gap: 20px; font-size: .86rem; font-weight: 800; }
.summary-total div { text-align: right; }
.summary-total strong { display: block; color: var(--color-primary); font-size: 1.1rem; }
.summary-total small { max-width: 190px; display: block; margin-top: 3px; color: #747876; font-size: .62rem; font-weight: 400; }
.checkout-submit { width: 100%; padding-inline: 14px; cursor: pointer; }
.checkout-submit:disabled { cursor: wait; opacity: .65; }
.checkout-feedback { margin: 12px 0 0; padding: 11px; color: #ffcaca; border: 1px solid rgba(255,90,90,.3); border-radius: 7px; background: rgba(255,70,70,.06); font-size: .72rem; text-align: center; }
.checkout-feedback.is-loading { color: #e9d98f; border-color: rgba(255,196,0,.28); background: rgba(255,196,0,.06); }
.checkout-feedback.is-success { color: #b9f2d8; border-color: rgba(71,214,166,.28); background: rgba(71,214,166,.06); }
.summary-safety { margin-top: 15px; display: flex; justify-content: center; gap: 17px; color: #777b79; font-size: .65rem; }
.summary-safety i { margin-right: 4px; color: var(--color-primary); }
.monitoring-note { margin-top: 13px; padding: 13px; display: flex; align-items: flex-start; gap: 9px; color: #969a98; border: 1px solid rgba(255,196,0,.23); border-radius: 9px; background: rgba(255,196,0,.045); font-size: .68rem; }
.monitoring-note i { margin-top: 2px; color: var(--color-primary); }
.monitoring-note p { margin: 0; }
.monitoring-note strong { color: #d8d9d5; }
.checkout-footer { padding: 22px 0; border-top: 1px solid var(--color-border); background: #030404; }
.checkout-footer .container { display: flex; justify-content: space-between; color: #686c6a; font-size: .7rem; }
.checkout-footer i { margin-right: 5px; color: var(--color-primary); }
.checkout-return { min-height: calc(100vh - 83px); padding-block: 70px; display: grid; place-items: center; }
.return-card { width: min(100%, 560px); padding: 45px; text-align: center; }
.return-card h1 { margin: 8px 0 12px; font-size: clamp(2rem, 6vw, 3.3rem); }
.return-card > p:not(.eyebrow) { max-width: 420px; margin: 0 auto 25px; color: #989c99; line-height: 1.65; }
.return-icon { width: 70px; height: 70px; margin: 0 auto 22px; display: grid; place-items: center; color: #09100d; border-radius: 50%; background: #48d6a7; font-size: 1.7rem; }
.return-icon.is-warning { color: #191407; background: var(--color-primary); }
@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .checkout-title { align-items: flex-start; flex-direction: column; }
  .checkout-offer { grid-template-columns: 1fr 1fr; gap: 20px; }
  .offer-copy { grid-column: 1 / -1; text-align: center; }
  .offer-badge { margin-inline: auto; }
  .offer-prices { padding-left: 0; border-left: 0; }
}
@media (max-width: 590px) {
  .checkout-header-inner { height: 72px; }
  .secure-label span { display: none; }
  .checkout-main { padding-top: 20px; }
  .checkout-title { margin-top: 20px; }
  .checkout-offer { margin-top: -7px; padding: 21px 18px; grid-template-columns: 1fr; gap: 18px; }
  .offer-copy > strong { font-size: 1.05rem; }
  .offer-copy > small { max-width: 250px; margin-inline: auto; }
  .offer-prices { min-width: 0; padding: 0 0 18px; border: 0; border-bottom: 1px solid rgba(255,196,0,.22); }
  .offer-prices strong { font-size: 2.45rem; }
  .offer-countdown { min-width: 0; }
  .offer-countdown > span { font-size: .78rem; }
  .offer-countdown time { width: min(100%, 230px); padding-block: 12px; font-size: 2.65rem; }
  .checkout-offer.is-expired .offer-status { margin-top: -7px; }
  .checkout-steps { width: 100%; justify-content: space-between; }
  .checkout-steps span { font-size: 0; }
  .checkout-steps span::after { content: attr(data-label); font-size: .67rem; }
  .checkout-card, .summary-card { padding: 18px; }
  .checkout-form-grid, .address-grid, .payment-options { grid-template-columns: 1fr; }
  .field-wide, .address-field { grid-column: auto; }
  .checkout-footer .container { gap: 10px; flex-direction: column; align-items: center; }
}