/* ============================================================
   LUNA · оформление заказа (checkout) — в стиле главной
   ============================================================ */

dialog.luna-checkout{
  border:1px solid rgba(var(--rgb),.18) !important;
  border-radius:32px !important;
  background:
    radial-gradient(ellipse at 88% -10%, rgba(var(--rgb),.16), transparent 52%),
    radial-gradient(ellipse at 10% 110%, rgba(var(--rgb),.10), transparent 55%),
    #05070c !important;
  color:#e8ecf4 !important;
  box-shadow:0 60px 160px -60px rgba(0,0,0,.95) !important;
}
dialog.luna-checkout::backdrop{
  background:rgba(1,2,4,.78) !important;
  backdrop-filter:blur(8px) !important;
}
.luna-checkout :focus-visible{outline:2px solid var(--accent) !important;outline-offset:4px !important}

/* ---------- шапка ---------- */
.co-header{
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  background:rgba(6,9,15,.85) !important;
  backdrop-filter:blur(18px) saturate(130%) !important;
  padding:20px 34px !important;
}
.co-brand{
  font-size:20px !important;
  font-weight:800 !important;
  letter-spacing:-.055em !important;
  gap:10px !important;
}
.co-brand .moon-logo{
  width:31px !important;
  height:31px !important;
  border-radius:10px !important;
  background:var(--accent) !important;
  background-image:none !important;
  transform:none !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}
.co-brand .moon-logo::after{
  content:"L" !important;
  position:static !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  left:auto !important;
  top:auto !important;
  background:none !important;
  border-radius:0 !important;
  font:800 14px/1 Unbounded,Manrope,sans-serif !important;
  color:#fff !important;
  text-align:center !important;
}
:root[data-theme=amber] .co-brand .moon-logo::after{color:#231900 !important}
.co-brand small{
  font-size:8px !important;
  letter-spacing:.22em !important;
  color:#6f7789 !important;
  margin-left:6px !important;
}
.co-steps{font-size:8px !important;letter-spacing:.08em !important;color:#5f6778 !important;gap:14px !important}
.co-steps .current{color:#fff !important}
.co-steps .current i,.co-steps .current b{color:var(--accent) !important}
.co-steps .done{color:#8a92a4 !important}
.co-steps b{color:#4c5464 !important}
.co-close{
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.03) !important;
  color:#9aa2b3 !important;
  border-radius:11px !important;
  width:33px !important;
  height:33px !important;
  transition:border-color .3s, background .3s, color .3s, transform .3s !important;
}
.co-close:hover{
  border-color:rgba(var(--rgb),.5) !important;
  background:rgba(var(--rgb),.10) !important;
  color:#fff !important;
  transform:rotate(90deg) !important;
}

/* ---------- вступление ---------- */
.co-intro{padding:34px 34px 26px !important}
.co-kicker{
  font-size:8px !important;
  letter-spacing:.22em !important;
  color:#767e90 !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
}
.co-kicker::before{
  content:"" !important;
  width:5px !important;
  height:5px !important;
  border-radius:50% !important;
  background:var(--accent) !important;
  box-shadow:0 0 12px var(--accent) !important;
}
.luna-checkout h2{
  font-size:clamp(26px,3vw,38px) !important;
  font-weight:900 !important;
  letter-spacing:-.055em !important;
  line-height:1.14 !important;
  margin:16px 0 12px !important;
  color:#fff !important;
}
.luna-checkout h2>span{
  color:#fff !important;
  background-image:linear-gradient(90deg,#fff 0%,#fff 18%,var(--accent) 50%,#fff 82%,#fff 100%) !important;
  background-size:200% auto !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  animation:co-shimmer 6s linear infinite !important;
}
@keyframes co-shimmer{to{background-position:200% center}}
.luna-checkout .co-intro p{font-size:12px !important;color:#868d9f !important;line-height:1.75 !important}

/* аккаунт */
.co-account{
  border-left:1px solid rgba(255,255,255,.07) !important;
  padding-left:24px !important;
}
.co-account>span{
  font-size:7px !important;
  letter-spacing:.2em !important;
  color:#6f7789 !important;
}
.co-account>strong{font-size:16px !important;font-weight:700 !important;color:#fff !important;margin:10px 0 !important}
.co-account>small{font-size:9px !important;color:#767e90 !important;line-height:1.7 !important}
.co-account button{
  font-size:10px !important;
  color:#fff !important;
  border:1px solid rgba(var(--rgb),.45) !important;
  border-radius:10px !important;
  background:rgba(var(--rgb),.12) !important;
  padding:8px 11px !important;
  transition:background .3s, border-color .3s !important;
}
.co-account button:hover{border-color:rgba(var(--rgb),.8) !important;background:rgba(var(--rgb),.22) !important}

/* ---------- выбор тарифа ---------- */
.co-plan-row{gap:12px !important;margin-bottom:22px !important}
.co-plan{
  background:rgba(255,255,255,.02) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:20px !important;
  padding:18px 20px !important;
  color:#a3aabb !important;
  transition:border-color .45s, background .45s, transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s !important;
}
.co-plan>span{font-size:7px !important;letter-spacing:.18em !important;color:#6f7789 !important}
.co-plan strong{font-size:14px !important;font-weight:700 !important;color:#dfe5ef !important}
.co-plan b{font-size:15px !important;font-weight:800 !important;color:#fff !important}
.co-plan:hover{
  border-color:rgba(var(--rgb),.4) !important;
  background:rgba(var(--rgb),.05) !important;
  transform:translateY(-3px) !important;
}
.co-plan.selected{
  border-color:rgba(var(--rgb),.75) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--rgb),.20), transparent 70%),
    rgba(var(--rgb),.06) !important;
  box-shadow:0 20px 50px -28px rgba(var(--rgb),.95) !important;
  color:#fff !important;
}
.co-plan.selected>span{color:#cfd6e4 !important}

/* ---------- блоки ---------- */
.co-block{
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.02) !important;
  padding:24px !important;
  margin-bottom:16px !important;
}
.co-block-title{gap:11px !important;margin-bottom:18px !important}
.co-block-title>span{
  font-size:9px !important;
  color:var(--accent) !important;
  background:rgba(var(--rgb),.12) !important;
  border-radius:7px !important;
  padding:3px 7px !important;
  font-family:monospace !important;
}
.luna-checkout .co-block-title h3{font-size:14px !important;font-weight:700 !important;color:#fff !important}
.co-block-title>small{font-size:7px !important;letter-spacing:.18em !important;color:#6f7789 !important}

/* ---------- способы оплаты ---------- */
.co-method{
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.015) !important;
  padding:18px !important;
  transition:border-color .4s, background .4s, transform .4s !important;
}
.co-method:hover{border-color:rgba(var(--rgb),.4) !important;background:rgba(var(--rgb),.04) !important;transform:translateY(-2px) !important}
.co-method.selected{
  border-color:rgba(var(--rgb),.75) !important;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(var(--rgb),.16), transparent 70%),
    rgba(var(--rgb),.05) !important;
}
.co-method-icon{
  width:38px !important;
  height:38px !important;
  border-radius:12px !important;
  border:1px solid rgba(var(--rgb),.28) !important;
  background:rgba(var(--rgb),.12) !important;
  color:var(--accent) !important;
}
.co-method.selected .co-method-icon{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
}
:root[data-theme=amber] .co-method.selected .co-method-icon{color:#231900 !important}
.co-method strong{font-size:13px !important;font-weight:700 !important;color:#fff !important}
.co-method small{font-size:9.5px !important;color:#79818f !important}
.co-method i{border:1px solid rgba(255,255,255,.25) !important}
.co-method.selected i{border-color:var(--accent) !important;background:var(--accent) !important;box-shadow:inset 0 0 0 2px #05070c !important}
.luna-checkout .co-method-note{font-size:9.5px !important;color:#6f7789 !important;line-height:1.8 !important}

/* ---------- поля ---------- */
.co-field-label{font-size:10px !important;letter-spacing:.1em !important;color:#8a92a4 !important;text-transform:uppercase !important}
.luna-checkout .co-input,
#checkout-email.co-input,
.co-promo-row .co-input{
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:14px !important;
  background:#090d15 !important;
  color:#eef2f8 !important;
  font-size:12px !important;
  padding:15px !important;
  transition:border-color .3s, box-shadow .3s !important;
}
.luna-checkout .co-input::placeholder{color:#5b6374 !important}
.luna-checkout .co-input:focus,
#checkout-email.co-input:focus{
  border-color:rgba(var(--rgb),.75) !important;
  box-shadow:0 0 0 3px rgba(var(--rgb),.16) !important;
}
#checkout-email.co-input{
  background:#090d15 !important;
  color:#eef2f8 !important;
  border-color:rgba(255,255,255,.10) !important;
}
#checkout-email.co-input::placeholder{color:#5b6374 !important}
#checkout-email.co-input:-webkit-autofill,
#checkout-email.co-input:-webkit-autofill:hover,
#checkout-email.co-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#eef2f8 !important;
  -webkit-box-shadow:0 0 0 1000px #090d15 inset !important;
}
.co-input:-webkit-autofill,
.co-input:-webkit-autofill:hover,
.co-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#eef2f8 !important;
  -webkit-box-shadow:0 0 0 1000px #090d15 inset !important;
}
.luna-checkout .co-delivery-note p{font-size:9.5px !important;color:#6f7789 !important;line-height:1.8 !important}

/* ---------- итог ---------- */
.co-summary{
  border:1px solid rgba(var(--rgb),.20) !important;
  border-radius:26px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--rgb),.10), transparent 68%),
    rgba(255,255,255,.02) !important;
  padding:26px !important;
  box-shadow:0 30px 80px -50px rgba(var(--rgb),.9) !important;
}
.co-summary-title{margin:18px 0 22px !important;gap:13px !important}
.co-summary-title .moon-logo{
  width:40px !important;
  height:40px !important;
  border-radius:13px !important;
  background:var(--accent) !important;
  background-image:none !important;
  transform:none !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}
.co-summary-title .moon-logo::after{
  content:"L" !important;
  position:static !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  left:auto !important;
  top:auto !important;
  background:none !important;
  border-radius:0 !important;
  font:800 17px/1 Unbounded,Manrope,sans-serif !important;
  color:#fff !important;
}
:root[data-theme=amber] .co-summary-title .moon-logo::after{color:#231900 !important}
.luna-checkout .co-summary-title h3{
  font-size:17px !important;
  font-weight:800 !important;
  letter-spacing:-.04em !important;
  color:#fff !important;
}
.luna-checkout .co-summary-title p{font-size:10.5px !important;color:#8a92a4 !important}
.co-summary dl>div{
  border-top:1px solid rgba(255,255,255,.06) !important;
  font-size:10.5px !important;
  padding:13px 0 !important;
}
.co-summary dt{color:#767e90 !important}
.co-summary dd{color:#dfe5ef !important;font-weight:600 !important}
.co-total{
  border-top:1px solid rgba(255,255,255,.09) !important;
  padding:20px 0 !important;
}
.co-total>span{font-size:11px !important;letter-spacing:.12em !important;color:#8a92a4 !important;text-transform:uppercase !important}
.co-total>strong{
  font-family:Unbounded,Manrope,sans-serif !important;
  font-size:34px !important;
  font-weight:900 !important;
  letter-spacing:-.05em !important;
  background-image:linear-gradient(100deg,#fff 0%,var(--accent) 62%,#fff 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* ---------- промокод ---------- */
.co-promo,
.co-promo-row{
  border-top:1px solid rgba(255,255,255,.06) !important;
}
.co-promo label{font-size:9px !important;letter-spacing:.16em !important;color:#767e90 !important;text-transform:uppercase !important}
.co-promo-row .co-input{font-family:monospace !important;letter-spacing:.08em !important}
.co-promo-row button{
  border:1px solid rgba(var(--rgb),.35) !important;
  border-radius:14px !important;
  background:rgba(var(--rgb),.12) !important;
  color:#fff !important;
  font-size:10px !important;
  padding:0 14px !important;
  transition:background .3s, border-color .3s !important;
}
.co-promo-row button:hover{border-color:rgba(var(--rgb),.75) !important;background:rgba(var(--rgb),.22) !important}
.co-promo-note{font-size:9.5px !important;color:#8a92a4 !important}
.co-promo-clear{color:#8a92a4 !important;border-bottom:1px solid rgba(255,255,255,.25) !important}
.co-promo-clear:hover{color:#fff !important}

/* ---------- кнопки ---------- */
.co-main-action{
  border:1px solid rgba(var(--rgb),.9) !important;
  border-radius:15px !important;
  background:var(--accent) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  min-height:50px !important;
  box-shadow:0 16px 40px -16px rgba(var(--rgb),.9) !important;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, filter .3s !important;
}
.co-main-action:hover:not(:disabled){
  transform:translateY(-2px) !important;
  filter:brightness(1.08) !important;
  box-shadow:0 20px 46px -14px rgba(var(--rgb),1) !important;
}
:root[data-theme=amber] .co-main-action{color:#231900 !important}
.co-secondary{
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.03) !important;
  color:#c6ccd8 !important;
  font-size:10px !important;
  padding:12px 16px !important;
  transition:border-color .3s, background .3s, color .3s !important;
}
.co-secondary:hover{
  border-color:rgba(var(--rgb),.5) !important;
  background:rgba(var(--rgb),.10) !important;
  color:#fff !important;
}
.co-safe{font-size:9px !important;color:#6f7789 !important;gap:8px !important}
.co-safe svg{color:var(--accent) !important}
.luna-checkout .co-availability{
  font-size:9.5px !important;
  color:#a3aabb !important;
  background:rgba(var(--rgb),.06) !important;
  border-left:2px solid var(--accent) !important;
  border-radius:12px !important;
  padding:12px 14px !important;
}
.co-consent{font-size:9.5px !important;color:#8a92a4 !important}
.co-consent input{accent-color:var(--accent) !important}
.co-consent a{color:#dfe5ef !important;text-decoration-color:rgba(var(--rgb),.6) !important}
.luna-checkout .co-inline-status{font-size:10.5px !important;color:#dfe5ef !important}
.luna-checkout .co-error-panel p{color:#9aa2b3 !important}

/* ---------- чек / ключ ---------- */
.co-receipt-mark{
  border:1px solid rgba(var(--rgb),.4) !important;
  border-radius:16px !important;
  background:rgba(var(--rgb),.12) !important;
  color:var(--accent) !important;
}
.luna-checkout .co-receipt-intro{font-size:12px !important;color:#8a92a4 !important}
.co-receipt-facts{border-color:rgba(255,255,255,.07) !important}
.co-receipt-facts span{font-size:9px !important;letter-spacing:.14em !important;color:#6f7789 !important}
.co-receipt-facts strong{font-size:12.5px !important;color:#fff !important;font-weight:700 !important}
.co-key-panel{
  border:1px solid rgba(var(--rgb),.35) !important;
  border-radius:22px !important;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(var(--rgb),.16), transparent 70%),
    rgba(255,255,255,.02) !important;
  padding:26px !important;
}
.co-key-panel .co-key-input{
  font-family:monospace !important;
  font-size:16px !important;
  letter-spacing:.14em !important;
  color:#fff !important;
  background:#090d15 !important;
  border:1px solid rgba(var(--rgb),.35) !important;
}
.luna-checkout .co-key-panel p{font-size:10px !important;color:#8a92a4 !important}
.luna-checkout .co-email-note{font-size:9.5px !important;color:#6f7789 !important}

/* ---------- подвал ---------- */
.co-footer{
  border-top:1px solid rgba(255,255,255,.06) !important;
  padding:20px 34px !important;
}
.co-footer>span{font-size:8px !important;letter-spacing:.12em !important;color:#5f6778 !important}
.co-footer>a{font-size:10px !important;color:#8a92a4 !important}
.co-footer>a:hover{color:var(--accent) !important}

/* ---------- адаптив ---------- */
@media(max-width:820px){
  dialog.luna-checkout{border-radius:24px !important}
  .co-header,.co-intro,.co-footer{padding-inline:20px !important}
  .luna-checkout #checkout-form{padding-inline:20px !important}
  .co-plan{border-radius:16px !important}
  .co-block,.co-summary{border-radius:20px !important;padding:18px !important}
  .co-intro .co-kicker{font-size:7px !important}
}
@media(prefers-reduced-motion:reduce){
  .luna-checkout h2>span{animation:none !important}
  .co-plan:hover,.co-method:hover,.co-close:hover{transform:none !important}
}