/* Страница заказа и «спасибо» — в стиле Esbelita «Mercado Cítrico» */
.order-page header.site{position:relative;}
.back-link{font-weight:700; font-size:14.5px; text-decoration:none; color:var(--leaf-deep);}
.back-link:hover{color:var(--orange-deep);}
.order{padding:48px 0 80px; background:
  radial-gradient(circle at 0% 0%, var(--mango-50) 0, transparent 40%), var(--cream);}
.order-grid{display:grid; grid-template-columns:360px minmax(0,1fr); gap:32px; align-items:start;}

/* summary */
.summary{position:sticky; top:24px; background:var(--leaf-deep); color:#E9F2E6; border-radius:var(--r); padding:26px; box-shadow:var(--sh);}
.sum-kicker{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--mango);}
.sum-prod{display:flex; gap:18px; align-items:center; margin:16px 0 20px; padding-bottom:20px; border-bottom:1px dashed rgba(255,255,255,.25);}
.sum-prod img{width:78px; flex:none; filter:drop-shadow(0 10px 14px rgba(0,0,0,.3));}
.sum-prod h2{color:#fff; font-size:28px; margin:0 0 2px; max-width:none;}
.sum-prod p{font-size:14px; margin:0 0 10px; color:#C7DCC3;}
.sum-price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.sum-price s{color:#A9C2A5; font-size:15px;}
.sum-price strong{font-family:var(--head); font-size:30px; color:var(--mango); line-height:1;}
.sum-price span{background:var(--grape); color:#fff; font-weight:800; font-size:12px; padding:3px 9px; border-radius:20px;}
.sum-list{list-style:none; margin:0; padding:0;}
.sum-list li{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:14.5px;}
.sum-list li span{color:#A9C2A5;}
.sum-list li b{text-align:right; color:#fff; font-weight:700;}
.sum-steps{margin:20px 0 0; padding:0; list-style:none; counter-reset:s;}
.sum-steps li{counter-increment:s; display:flex; gap:12px; align-items:center; font-size:14.5px; padding:6px 0;}
.sum-steps li::before{content:counter(s); width:28px; height:28px; flex:none; border-radius:50%; background:var(--orange); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:13px;}

/* form */
.form-card{background:#FFFDF8; border:1px solid var(--line); border-radius:var(--r); padding:34px 36px 30px; box-shadow:var(--sh);}
.form-card h1{font-size:clamp(28px,3.4vw,38px); margin-bottom:8px;}
.form-sub{color:var(--ink-soft); margin-bottom:20px;}
.pay-box{background:var(--cream-2); border-radius:16px; padding:16px 20px; margin-bottom:26px;}
.form-alert{background:var(--grape-50); color:#8E2418; border:1px solid #F3BDB3; border-radius:14px; padding:12px 18px; margin-bottom:16px; font-weight:600; font-size:15px;}
.form-h{font-size:24px; color:var(--leaf-deep); margin:0 0 14px; max-width:none;}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;}
.f{display:flex; flex-direction:column; min-width:0;}
.f.full{grid-column:1 / -1;}
.grid.one{grid-template-columns:1fr; max-width:520px;}
.f label{font-size:14.5px; color:var(--leaf-deep); margin-bottom:6px; font-weight:500;}
.f input,.f select{width:100%; font:inherit; font-size:16px; color:var(--ink); background:#fff; border:1.5px solid #EADBC4; border-radius:12px; padding:12px 14px; height:50px; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none;}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232B1D12' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px;}
.f input::placeholder{color:#A6978A;}
.f input:focus,.f select:focus{outline:none; border-color:var(--leaf); box-shadow:0 0 0 4px var(--leaf-50);}
.err{display:none; color:#B4301F; font-size:13px; margin-top:4px; font-weight:600;}
.f.bad input,.f.bad select{border-color:#D9483B; background:#FFF8F6;}
.f.bad .err,.err.show{display:block;}
.agree{display:flex; gap:12px; align-items:flex-start; margin:22px 0 4px; font-size:14.5px; color:var(--ink-soft); cursor:pointer;}
.agree input{width:22px; height:22px; flex:none; margin:1px 0 0; accent-color:var(--leaf);}
.agree a{color:var(--leaf-deep);}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.btn.submit{border:0; margin-top:20px; padding:17px 44px; background:var(--leaf); box-shadow:0 6px 0 var(--leaf-deep), 0 16px 30px rgba(30,74,39,.28);}
.btn.submit:hover{background:#357A41;}
.btn.submit:disabled{opacity:.7; cursor:wait; transform:none;}
.safe{font-size:13.5px; color:var(--ink-soft); margin:16px 0 0;}

/* thanks */
.thanks{padding:64px 0 90px; background:radial-gradient(circle at 50% 0%, var(--mango-50) 0, transparent 55%), var(--cream);}
.thanks-card{max-width:640px; margin:0 auto; background:#FFFDF8; border:1px solid var(--line); border-radius:28px; padding:44px 40px; text-align:center; box-shadow:var(--sh);}
.tick{width:84px; height:84px; margin:0 auto 22px; border-radius:50%; background:var(--leaf); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 10px var(--leaf-50);}
.thanks-card h1{font-size:clamp(28px,4vw,40px); margin:0;}
.thanks-card .lead{margin:0 auto 24px;}
.thanks-card .sum-list{background:var(--leaf-deep); border-radius:18px; padding:8px 22px; text-align:left; margin-bottom:20px;}
.thanks-card .sum-list li:last-child{border-bottom:0;}
.thanks-card .sum-list li span{color:#A9C2A5;}
.hint{font-size:14.5px; color:var(--ink-soft); margin-bottom:26px;}

.order-foot{background:var(--ink); color:#C9B9A6; padding:26px 0; font-size:13.5px; text-align:center;}
.order-foot a{color:#FFE2C8;}
.order-foot p{margin:8px 0 0;}

@media (max-width:900px){
  .order-grid{grid-template-columns:1fr;}
  .summary{position:relative; top:0; padding:20px 22px;}
  .sum-steps{display:none;}
  .sum-prod{margin:10px 0 12px; padding-bottom:14px;}
  .sum-list li{padding:7px 0;}
}
@media (max-width:560px){
  .order{padding:24px 0 60px;}
  .form-card{padding:24px 18px;}
  .grid{grid-template-columns:1fr;}
  .btn.submit{width:100%;}
  .thanks-card{padding:32px 20px;}
  .back-link{font-size:13px;}
}

/* футер всегда внизу экрана */
body.order-page{min-height:100vh; display:flex; flex-direction:column;}
body.order-page main{flex:1;}
.thanks{display:flex; align-items:center;}
.thanks .wrap{width:100%;}