/* === ORDER PAGE — Variant C Design System === */
.order-page,.order-faq,.order-cta{overflow-x:clip}

/* Hide template default title+breadcrumbs — hero has its own h1 */
.box-title{display:none!important}

/* === UNIFIED HERO+MAIN === */
.order-page{position:relative;padding:50px 0;background:#fff}
.order-page::before{content:'';position:absolute;top:0;left:0;right:0;height:380px;background:linear-gradient(180deg,#e8f4fd 0%,#fff 100%);z-index:0;pointer-events:none}
.order-page::after{content:'';position:absolute;top:-80px;right:-60px;width:350px;height:350px;background:radial-gradient(circle,rgba(30,135,240,.07) 0%,transparent 70%);border-radius:50%;z-index:0;pointer-events:none}
.order-unified{position:relative;z-index:1;display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
.order-col-main{min-width:0}
.order-col-side{min-width:0}

/* === HERO TEXT === */
.order-hero-inner{margin-bottom:40px}
.order-hero-inner .order-sub{font-size:16px;color:#555;margin:0 0 24px;line-height:1.65;max-width:600px}
.order-hero-badges{display:flex;gap:10px;flex-wrap:wrap}
.order-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:rgba(255,255,255,.45);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.6);border-radius:16px;font-size:13px;font-weight:600;color:#0a2e4d}
.order-badge i{color:#1e87f0;font-size:13px}

/* === TIMELINE === */
.order-section-title{font-size:24px;font-weight:700;color:#0a2e4d;margin:0 0 28px}
.order-timeline{position:relative}
.order-timeline::before{content:'';position:absolute;left:24px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#1e87f0 0%,rgba(30,135,240,.1) 100%);border-radius:2px}
.order-step{display:flex;gap:24px;margin-bottom:36px;position:relative}
.order-step:last-child{margin-bottom:0}
.order-step-num{width:50px;height:50px;background:#1e87f0;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;flex-shrink:0;position:relative;z-index:1;box-shadow:0 3px 12px rgba(30,135,240,.25)}
.order-step-body{flex:1;padding-top:4px;min-width:0}
.order-step-body h3{font-size:17px;font-weight:700;color:#0a2e4d;margin:0 0 6px}
.order-step-body p{font-size:14px;color:#555;line-height:1.65;margin:0 0 10px}

/* === SIDE COLUMN === */
.order-sb-cta{background:linear-gradient(135deg,#0a2e4d,#1a5276);border:none;border-radius:16px;padding:28px 22px;text-align:center;color:#fff;margin-bottom:16px;box-sizing:border-box}
.order-sb-cta h3{font-size:16px;font-weight:700;color:#fff;margin:0 0 14px;display:flex;align-items:center;justify-content:center;gap:8px}
.order-sb-cta h3 i{color:rgba(255,255,255,.6)}
.order-sb-cta .sb-phones{margin-bottom:14px}
.order-sb-cta .sb-phone{display:block;text-decoration:none;margin-bottom:4px}
.order-sb-cta .sb-phone-main{font-size:18px;font-weight:700;color:#fff}
.order-sb-cta .sb-phone-sec{font-size:14px;font-weight:600;color:rgba(255,255,255,.6)}
.order-sb-cta .sb-phone:hover .sb-phone-main,.order-sb-cta .sb-phone:hover .sb-phone-sec{color:rgba(255,255,255,.85)}
.order-sb-cta .sb-email{display:block;font-size:13px;color:rgba(255,255,255,.7);text-decoration:none;margin-bottom:16px}
.order-sb-cta .sb-email:hover{color:#fff}

.order-sb-block{background:#f8fbff;border:1px solid #e8f0f8;border-radius:12px;padding:22px;margin-bottom:16px}
.order-sb-block:last-child{margin-bottom:0}
.order-sb-block h3{font-size:14px;font-weight:700;color:#0a2e4d;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.order-sb-block h3 i{color:#1e87f0;font-size:15px}
.order-sb-block ul{list-style:none;padding:0;margin:0}
.order-sb-block li{font-size:13px;color:#555;padding:4px 0 4px 20px;position:relative;line-height:1.5}
.order-sb-block li::before{content:'';position:absolute;left:0;top:5px;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2332d296'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center/contain}

/* === FAQ === */
.order-faq{padding:40px 0 50px;background:#f8fbff}
.order-faq-title{text-align:center;font-size:24px;font-weight:700;color:#0a2e4d;margin:0 0 32px}
.order-faq-grid{max-width:800px;margin:0 auto}
.order-faq-item{background:#fff;border-radius:12px;padding:20px 24px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.order-faq-q{font-size:15px;font-weight:600;color:#0a2e4d;margin:0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none}
.order-faq-q::after{content:'';width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .3s;margin-left:8px;flex-shrink:0;transform:rotate(-90deg)}
.order-faq-q.open::after{transform:rotate(0deg)}
.order-faq-a{font-size:14px;color:#555;line-height:1.7;margin:12px 0 0;display:none}
.order-faq-a.open{display:block}

/* === CTA === */
.order-cta{padding:50px 0;background:linear-gradient(180deg,#e8f4fd 0%,#fff 100%);text-align:center}
.order-cta h2{font-size:24px;font-weight:700;color:#0a2e4d;margin:0 0 8px}
.order-cta p{font-size:14px;color:#555;margin:0 0 24px}
.order-cta-msg{max-width:700px;margin:0 auto}
.order-cta-msg .msg-buttons{flex-wrap:nowrap!important;justify-content:center!important}
@media(max-width:768px){.order-cta-msg .msg-buttons{flex-wrap:wrap!important}}

/* === RESPONSIVE === */
@media(max-width:1024px){
  .order-unified{grid-template-columns:1fr;gap:32px}
  .order-col-side{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .order-sb-cta{grid-column:1/-1;margin-bottom:0}
  .order-sb-block{margin-bottom:0}
}
@media(max-width:768px){
  .order-hero-inner p[role="presentation"]{font-size:30px!important}
  .order-col-side{grid-template-columns:1fr}
  .order-timeline::before{left:17px}
  .order-step-num{width:36px;height:36px;font-size:15px}
  .order-step{gap:16px}
}