/* Order page styles */
.top-nav--solid { background: rgba(0,0,0,.9); position: sticky; top: 0; left: 0; right: 0; z-index: 50; }
.nav-right { position: absolute; right: 20px; top: 20px; display: flex; align-items: center; gap: 12px; }

/* Включаем слой декора для всей страницы */
.order-page { position: relative; }

.breadcrumbs { max-width: 1250px; margin: 0 auto; padding: 12px 20px 0; font-family: 'Oswald', sans-serif; opacity: .85; position: relative; z-index: 3; }
.breadcrumbs a { color: #fff; text-decoration: none; }
.breadcrumbs span { color: #00e5b8; }

/* Переопределяем header из index.css: нам не нужен absolute */
.order-page .header-background { display: none !important; }
.order-page header { position: relative !important; top: 0 !important; left: 0 !important; padding-top: 20px; z-index: 3; }


.order-hero h1 { font-family: 'Cormorant', serif; font-weight: 300; font-size: 120px; line-height: 1.1; letter-spacing: 8px; text-transform: uppercase; }
.order-nadpis { position: fixed; top: 100px; left: 50%; transform: translateX(-50%); width: 520px; pointer-events: none; opacity: 0.9; z-index: 2; }
/* Старые классы больше не используются для картинок */
.order-flower-left, .order-flower-right { display: none; }



.order-container { 
    padding-bottom: 60px; 
    position: relative; 
    z-index: 3; 
    min-height: 100vh;
}
.order-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; max-width: 1250px; margin: 0 auto; padding: 0 20px; }
.order-section-title { font-family: 'Oswald', sans-serif; letter-spacing: 2px; margin-bottom: 20px; }
.order-subtitle { font-family: 'Oswald', sans-serif; color: #00e5b8; margin: 20px 0 12px; letter-spacing: 1px; }

.form-group-block { margin-bottom: 24px; }
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fields-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field span { font-family: 'Oswald', sans-serif; font-size: 12px; opacity: .9; }
.field input, .field select, .field textarea { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 12px 14px; color: #fff; }
.inline-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.delivery-options, .payment-options { display: grid; gap: 8px; margin-bottom: 12px; }
.radio { font-family: 'Oswald', sans-serif; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }

.promo-row { display: grid; grid-template-columns: 1fr 160px; gap: 12px; align-items: end; }
.apply-promo { padding: 12px 14px; background: #00e5b8; color: #000; text-transform: uppercase; border: 0; cursor: pointer; font-family: 'Oswald', sans-serif; }

.order-summary { position: sticky; top: 100px; height: fit-content; }
.summary-title { font-family: 'Oswald', sans-serif; letter-spacing: 1px; margin-bottom: 12px; }
.summary-items { display: grid; gap: 12px; }
.summary-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px; }
.summary-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.summary-name { font-family: 'Oswald', sans-serif; text-transform: uppercase; }
.summary-qty { display: inline-flex; align-items: center; gap: 8px; }
.qty-btn { width: 24px; height: 24px; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 0; color: #fff; cursor: pointer; }
.summary-price { font-family: 'Oswald', sans-serif; }
.summary-total { margin: 12px 0; opacity: .9; }
.summary-line { display: flex; justify-content: space-between; font-family: 'Oswald', sans-serif; }
.place-order { width: 100%; padding: 14px 16px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; text-transform: uppercase; cursor: pointer; font-family: 'Oswald', sans-serif; }
.place-order.wide { width: 100%; }

.order-total-mobile { display: none; }

/* === HEADER FULL-BACKGROUND === */
.header-background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('../img/order-flowers.png') center/cover no-repeat;
    z-index: -2;
    pointer-events: none;
}
.header-wrapper {
    min-height: 600px;
    position: relative;
    z-index: 1;
}
.order-hero{padding-top:160px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
.order-decor{display:none !important;}

/* === ЭКРАННЫЕ ГРАДИЕНТЫ === */
:root{ --order-blur-hero: 110px; --order-blur-footer: 125px; }
.screen-gradients { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; 
    z-index: -1; 
    overflow: hidden;
}
.gradient-purple { 
    position: absolute; 
    width: 120vw; 
    height: 100vh; 
    left: -30vw; 
    top: 0; 
    background: radial-gradient(circle at center, rgba(125,34,83,0.65) 0%, rgba(125,34,83,0.35) 35%, rgba(125,34,83,0.12) 60%, rgba(125,34,83,0.0) 78%); 
    filter: blur(var(--order-blur-hero)); 
    border-radius: 50%; 
}
.gradient-green { 
    position: absolute; 
    width: 120vw; 
    height: 100vh; 
    right: -30vw; 
    top: 0; 
    background: radial-gradient(circle at center, rgba(67,255,210,0.55) 0%, rgba(67,255,210,0.28) 35%, rgba(67,255,210,0.10) 60%, rgba(67,255,210,0.0) 80%); 
    filter: blur(var(--order-blur-hero)); 
    border-radius: 50%; 
}

/* === ГРАДИЕНТЫ ФУТЕРА === */
.footer-gradients { left: 0; right: 0; top: 0; bottom: 0; width: 100%; pointer-events: none; z-index: -1; overflow: hidden; height: 100%; }
.footer-gradient-1 { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 19.37vw; 
    height: 86.125vh; 
    background: radial-gradient(ellipse at 1.94vw 43.75vh, #43FFD2 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(var(--order-blur-footer));
    transform: rotate(21.0974deg);
    opacity: 0.6;
}
.footer-gradient-2 { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%) rotate(21.0974deg); 
    width: 75.28vw; 
    height: 79.375vh; 
    background: radial-gradient(ellipse at 45.97vw 54.5vh, #43FFD2 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(var(--order-blur-footer));
    opacity: 0.4;
}
.footer-gradient-3 { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 30.56vw; 
    height: 102.25vh; 
    background: radial-gradient(ellipse at 35.125vw 61.375vh, #7D2253 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(var(--order-blur-footer));
    opacity: 0.5;
}

@media (max-width: 1024px){
    :root{ --order-blur-hero: 100px; --order-blur-footer: 115px; }
    .gradient-purple{ width: 120vw; height: 100vh; left: -30vw; top: 0; }
    .gradient-green{ width: 120vw; height: 100vh; right: -30vw; top: 0; }
}
@media (max-width: 768px){
    :root{ --order-blur-hero: 92px; --order-blur-footer: 108px; }
    .gradient-purple{ width: 120vw; height: 100vh; left: -30vw; top: 0; }
    .gradient-green{ width: 120vw; height: 100vh; right: -30vw; top: 0; }
}
@media (max-width: 425px){
    :root{ --order-blur-hero: 85px; --order-blur-footer: 100px; }
    .gradient-purple{ width: 120vw; height: 100vh; left: -30vw; top: 0; }
    .gradient-green{ width: 120vw; height: 100vh; right: -30vw; top: 0; }
}

@media (max-width: 1200px) {
	.order-nadpis { width: 420px; top: 110px; }
	.order-flower-left, .order-flower-right { width: 26%; }
}
@media (max-width: 1000px) {
	.order-layout { grid-template-columns: 1fr; }
	.order-summary { position: static; }
	.order-total-mobile { display: grid; gap: 12px; margin-top: 20px; }
}