:root{--bg:#0b0c0d;--panel:#111214;--text:#e6e6e6;--soft:#b7b7b7;--ecolor:#20B2AA;--line:#222328;--trans: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1)}
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;width:100%;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-weight:800;letter-spacing:-0.02em;margin:0} .hidden{display:none!important}

/* LAYOUT */
.split-layout{display:grid;grid-template-columns:50vw 50vw;min-height:100vh}
.visual-pane{position:sticky;top:0;height:100vh;overflow:hidden;background:#000;z-index:1}
/* АНИМАЦИЯ КАРТИНКИ (Базовая) */
.visual-pane picture,.visual-pane img{display:block;transition:opacity .5s ease, transform 10s ease-out; opacity:1; transform: scale(1.05);}
.visual-pane img.is-changing{opacity:0;transform:scale(1.0);transition:none}
.visual-overlay{position:absolute;bottom:0;left:0;width:100%;height:50%;background:linear-gradient(to top,rgba(0,0,0,0.9),transparent);pointer-events:none;z-index:2}

/* INFO DESKTOP */
.info-overlay{position:absolute;bottom:3rem;right:4rem;z-index:3;text-align:right;transition:opacity .5s ease;pointer-events:none} .info-overlay *{pointer-events:auto}
.price-val{font-size:3.5rem;font-weight:800;line-height:1;color:#fff;text-shadow:0 4px 20px #000}
.shipping-info{color:rgba(255,255,255,0.7);font-size:1rem;margin-top:.5rem;font-family:monospace;text-shadow:0 2px 10px #000}
.summary-list{margin-top:1.5rem;display:flex;flex-direction:column;gap:.3rem;align-items:flex-end}
.summary-item{color:var(--ecolor);font-size:1.1rem;cursor:pointer;font-weight:600;text-shadow:0 2px 5px #000;transition:.3s;pointer-events:auto;position:relative;z-index:10} .summary-item:hover{color:#fff}

/* CONTROLS */
.controls-pane{background:var(--bg);min-height:100vh;display:flex;flex-direction:column;border-left:1px solid var(--line);position:relative;z-index:2}

/* ОБНОВЛЕНО: Десктопная шапка с градиентом, прилипает к верху и не имеет жесткой границы */
.controls-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 4rem 3rem;gap:2rem;position:sticky;top:0;z-index:9999;pointer-events:auto;background:linear-gradient(to bottom, rgba(11,12,13,1) 40%, rgba(11,12,13,0.8) 75%, transparent);border-bottom:none}
.lang-wrapper{position:relative;z-index:10000}

.logo-container{width:100%;max-width:280px}
.header-logo-img{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))}
.lang-select{background:transparent;border:1px solid var(--line);color:var(--soft);padding:.5rem 2rem .5rem 1rem;font-size:.85rem;border-radius:4px;cursor:pointer;text-transform:uppercase;font-weight:600;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7b7b7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .5rem center;background-size:1rem;appearance:none;-webkit-appearance:none;transition:.3s;outline:none;min-width:80px;flex-shrink:0}
.lang-select:hover{border-color:var(--text);color:#fff} 

/* ОБНОВЛЕНО: Четкие цвета для опций языкового селектора, чтобы текст не сливался */
.lang-select option{background:#111214;color:#ffffff}

.controls-content{max-width:650px;width:100%;margin:0 auto;display:flex;flex-direction:column;min-height:100vh;box-sizing:border-box;padding-left:4rem;padding-right:4rem}
#order-form-container h2 {margin-bottom: 1.5rem;}
.req {color: var(--ecolor);}

/* UI COMPONENTS */
.control-group{margin-bottom:2rem;transition:var(--trans)}
.control-group label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--soft);margin-bottom:.8rem}
.toggle-switch{display:flex;gap:10px;flex-wrap:wrap}
.toggle-switch label{flex:1;padding:1.2rem;background:var(--panel);border:1px solid var(--line);color:var(--soft);text-align:center;cursor:pointer;font-weight:600;transition:.3s;min-width:140px}
.toggle-switch input{display:none} .toggle-switch input:checked+label{border-color:var(--ecolor);background:rgba(32,178,170,0.1);color:var(--ecolor)}
.cta-button{width:100%;padding:1.8rem;background:var(--ecolor);color:#fff;font-size:1.2rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;border:none;cursor:pointer;margin-top:3rem;transition:.3s;outline:none}
.country-search-wrapper{position:relative;width:100%}
.text-input{width:100%;background:var(--panel);border:1px solid var(--line);color:#fff;padding:1rem;font-size:1rem;border-radius:4px;outline:none;transition:.3s;font-family:inherit;margin-bottom:.5rem; scroll-margin-top: 130px;}
.text-input:focus{border-color:var(--ecolor);background:rgba(32,178,170,0.05)}
.country-dropdown{position:absolute;top:100%;left:0;right:0;max-height:250px;overflow-y:auto;background:#111214;border:1px solid var(--line);border-top:none;z-index:100;list-style:none;padding:0;margin:0;box-shadow:0 10px 20px rgba(0,0,0,0.5)}
.country-dropdown li{padding:12px 15px;cursor:pointer;color:#fff;border-bottom:1px solid rgba(255,255,255,0.05);transition:.2s}
.country-dropdown li:hover, .country-dropdown li.active{background:var(--ecolor);color:#000;font-weight:bold} .country-dropdown.hidden{display:none}

.error-panel {border-color: #ff5555; background: rgba(255,85,85,0.1); margin-top: 1rem;}
.error-panel h3 {color: #ff5555; margin-bottom: 0.5rem; font-size: 1rem;}
.error-panel p {font-size: 0.9rem; margin-bottom: 1rem; color: #fff;}
.ebay-btn {background: #0064D2; text-decoration: none; display: block; text-align: center; font-size: 1rem; padding: 1rem;}

/* PAYMENTS */
.payment-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1.5rem} .pay-option input{display:none}
.pay-card{background:rgba(255,255,255,0.05);border:1px solid var(--line);padding:1.5rem 1rem;border-radius:8px;cursor:pointer;transition:.3s;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;min-height:100px}
.pay-logo{display:flex;align-items:center;justify-content:center;margin-bottom:.5rem;width:100%}
.pay-logo-img{display:block;height:auto} .pay-logo-img.wide{width:100px;max-width:80%} .pay-logo-img.square{width:32px;margin-right:8px}
.alipay-img, .sbp-img {max-height: 32px; object-fit: contain;}
.usdt-text{font-weight:600;color:#fff;font-size:.9rem}
.pay-fee{font-size:.8rem;color:#ff6b6b;font-weight:600;margin-top:5px}
.pay-option input:checked+.pay-card{background:rgba(32,178,170,0.15);border-color:var(--ecolor);box-shadow:0 0 15px rgba(32,178,170,0.2)}
.pay-card.highlight .pay-fee{color:var(--ecolor); font-weight:600;}
.price-summary{text-align:right;font-size:1.4rem;font-weight:800;margin:0 0 2rem;border-top:1px solid var(--line);padding-top:1rem} .price-summary.hidden{display:none} .price-summary span{color:var(--ecolor)}
.payment-info{background:rgba(0,0,0,0.3);border:1px dashed var(--soft);padding:1rem;border-radius:8px;margin-bottom:2rem;font-size:.9rem}
.instruction-header{color:var(--ecolor);font-weight:800;margin-bottom:.5rem;text-transform:uppercase}
.payment-info ol{padding-left:1.2rem;margin:0} .payment-info li{margin-bottom:.5rem}
.copy-box{background:#000;display:flex;justify-content:space-between;align-items:center;padding:.5rem;margin-top:.5rem;border-radius:4px;border:1px solid var(--line);gap:10px} .copy-box span{word-break:break-all}
.copy-btn{background:var(--line);border:none;color:#fff;padding:.2rem .6rem;border-radius:4px;cursor:pointer;font-size:.8rem;flex-shrink:0}
.confirm-checkbox{margin-top:1rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,0.1);display:flex;gap:10px;align-items:flex-start} .confirm-checkbox input{margin-top:4px}
.mobile-summary-bar{display:none}
.pp-note {font-size: 0.85rem; color: #ffcc00; margin-bottom: 1rem; line-height: 1.4; border-left: 2px solid #ffcc00; padding-left: 10px;}
.pp-warning {background: rgba(255,100,100,0.1); border: 1px solid #ff5555; padding: 10px; border-radius: 4px; margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.4; color: #fff;}
.pvz-group {margin-top:1.5rem;}
.pvz-box {margin-bottom: 1rem; display: none; text-align: left; background: rgba(32,178,170,0.15); border: 1px solid var(--ecolor);}
.pvz-region {color: rgba(255,255,255,0.7); font-size: 0.8rem; margin-bottom: 4px;}
.pvz-address {color: #fff; font-weight: 600; font-size: 0.95rem;}
.btn-pvz {margin-top: 0; padding: 1rem; background: #FFCC00; color: #000; box-shadow: 0 4px 15px rgba(255,204,0,0.3);}
.qr-code-container {margin: 1.5rem auto; text-align: center; background: #fff; padding: 10px; max-width: 220px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.qr-code-container img {display: block; width: 100%; height: auto; border-radius: 4px;}
.alipay-group {margin-top:1.5rem;}
.alipay-verify {color:var(--soft); font-size: 0.75rem;}
.pay-placeholder {text-align:center; color: var(--soft); margin-top: 1rem; font-style: italic;}
.back-btn {text-align:center; margin-top:1rem; cursor:pointer; color:var(--soft); font-size:0.9rem;}

/* FLOATING CONTACT WIDGET */
@keyframes popUp {
    from { opacity: 0; transform: scale(0.8) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.floating-contact { position: fixed; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; bottom: 30px; right: 30px; }
.contact-flyout { display: none; margin-bottom: 15px; padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(15, 15, 15, 0.85); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,0.6); transform-origin: bottom right; animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.contact-title { text-transform: uppercase; letter-spacing: 1px; font-weight: 800; font-size: 0.8rem; margin-bottom: 1rem; color: #fff; text-align: center; }
.contact-links-wrapper { display: flex; flex-direction: column; gap: 0.8rem; }
.contact-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; padding: 0.8rem 1.5rem; border-radius: 50px; font-weight: 600; font-size: 0.95rem; transition: transform 0.2s, box-shadow 0.2s; }
.contact-link:hover { transform: scale(1.04); box-shadow: 0 4px 15px rgba(255,255,255,0.1); }
.tg-link { background: #229ED9; }
.wa-link { background: #25D366; }
.wc-link { background: #07C160; }
.contact-trigger-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--ecolor, #FFCC00); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.5); transition: transform 0.3s; z-index: 10000; outline: none; }
.contact-trigger-btn:hover { transform: scale(1.05); }
#chat-icon, #close-icon { transition: opacity 0.2s; }

/* MAP MODAL */
.map-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); z-index: 99999; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.map-modal-content { position: relative; width: 95vw; max-width: 1400px; height: 90vh; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.close-map-btn { position: absolute; top: 15px; right: 15px; z-index: 100000; background: #ff5555; color: white; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }

/* DESKTOP ANIMATIONS & VISUALS */
@media(min-width:901px){
 .visual-pane { display: block; background: #000; }
 .visual-pane picture, .visual-pane img { height: 100vh; width: 100%; object-fit: cover; object-position: right center; transform-origin: right center; }
 #wizard-container{justify-content:flex-start;padding-top:15vh;padding-bottom:4rem;transition:padding .6s cubic-bezier(.22,1,.36,1)} 
 #wizard-container.wizard-started{padding-top:4rem}
 #order-form-container{justify-content:flex-start;padding-top:4rem;padding-bottom:4rem}
 .locked-step{display:none;opacity:0;transform:translateY(30px)} .locked-step.unlocked{display:block;animation:fadeInUp .5s ease forwards}
 @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
 .mobile-breadcrumbs { display: none !important; }
}

/* MOBILE STYLES */
@media(max-width:900px){
 .split-layout{display:block} .info-overlay{display:none}
 .visual-pane{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;z-index:0}
 .visual-pane picture, .visual-pane img { width: 100%; height: 100%; object-fit: cover; object-position: right center; transform-origin: right bottom; }
 .visual-overlay{height:100%;background:linear-gradient(to bottom,rgba(0,0,0,0.1),rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.95))}
 .controls-pane{background:transparent;border:none;min-height:100vh;min-height:100dvh;pointer-events:none;z-index:20;position:relative}

 /* ОБНОВЛЕНО: Шапка мобильная с градиентом */
 .controls-header{position:fixed;top:0;left:0;width:100%;padding:1.5rem 1.5rem 3rem;justify-content:space-between;pointer-events:auto;z-index:1000;align-items:flex-start;gap:1rem;background:linear-gradient(to bottom, rgba(11,12,13,1) 40%, rgba(11,12,13,0.8) 75%, transparent); border-bottom: none;}

 .logo-container{flex-shrink:0;width:auto} .header-logo-img{width:55vw;min-width:210px;max-width:300px;height:auto} .lang-wrapper{flex-shrink:0}
 .controls-content{padding-left:1.5rem;padding-right:1.5rem}
 .lang-select{background-color:rgba(20,20,20,0.6);border:1px solid rgba(255,255,255,0.4);color:#fff;backdrop-filter:blur(5px);background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")}

 #wizard-container{position:absolute;top:0;left:0;width:100%;height:100vh;padding:8.5rem 1.5rem 8rem;pointer-events:auto;display:flex;flex-direction:column;z-index:30;justify-content:flex-start;overflow-y:auto}
 #wizard-container.wizard-started{padding-top:8.5rem}
 
 .control-group{display:none!important;animation:slideUp .3s ease-out} .control-group.active-step{display:block!important}
 .locked-step,.locked-step.unlocked{display:initial;animation:none;opacity:1;transform:none} .locked-step{display:none} .locked-step.active-step{display:block}
 @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

 /* ОБНОВЛЕНО: Крошки формируются аккуратно без сплошного черного фона, выровнены слева и растут вверх */
 .mobile-breadcrumbs { 
     position: fixed; 
     bottom: 110px; 
     left: 1.5rem; 
     display: flex; 
     flex-direction: column-reverse; 
     gap: 8px; 
     z-index: 950; 
     align-items: flex-start;
     pointer-events: none; 
     margin: 0;
     padding: 0;
 }
 .mobile-breadcrumbs:empty { display: none; }
 .mob-crumb { 
     pointer-events: auto; 
     background: rgba(11, 12, 13, 0.85); 
     backdrop-filter: blur(8px);
     color: var(--ecolor); 
     border: 1px solid var(--ecolor); 
     padding: 8px 14px; 
     border-radius: 20px; 
     font-size: 0.85rem; 
     cursor: pointer; 
     font-weight: 600; 
     transition: 0.2s; 
     box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
     animation: slideInLeft 0.3s ease-out forwards; 
 }
 .mob-crumb:hover { background: var(--ecolor); color: #000; }
 
 @keyframes slideInLeft {
     from { opacity: 0; transform: translateX(-20px); }
     to { opacity: 1; transform: translateX(0); }
 }

 .mobile-summary-bar{display:flex;flex-direction:column;justify-content:center;position:fixed;bottom:0;left:0;right:0;background:rgba(11,12,13,0.95);backdrop-filter:blur(10px);border-top:1px solid var(--ecolor);padding:1rem 1.5rem;z-index:100;box-shadow:0 -5px 20px rgba(0,0,0,0.5);animation:slideUp .4s ease}
 .mob-sum-row{display:flex;justify-content:space-between;align-items:baseline} .mob-sum-label{font-size:.9rem;text-transform:uppercase;letter-spacing:1px;color:var(--soft)}
 .mob-sum-val{font-size:1.5rem;font-weight:800;color:#fff} .mob-sum-val span{color:var(--ecolor)}
 .mob-sum-ship{text-align:right;font-size:.8rem;color:var(--soft);font-family:monospace}

 .country-dropdown{background:rgba(20,20,20,0.95);backdrop-filter:blur(10px)}
 .toggle-switch{flex-direction:column;gap:.8rem} .toggle-switch label{background:rgba(20,20,20,0.6);border:3px solid #fff!important;border-radius:.8rem;color:#fff;backdrop-filter:blur(10px);padding:1.2rem;box-shadow:0 0 10px rgba(0,0,0,0.5)}
 .toggle-switch input:checked+label{background:rgba(32,178,170,0.2)!important;border-color:var(--ecolor)!important;color:var(--ecolor)}
 .cta-button{margin-top:0;background:var(--ecolor);box-shadow:0 0 20px rgba(32,178,170,0.4);border-radius:.8rem}
 
 #order-form-container{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;overflow-y:auto;padding:8.5rem 1.5rem 6rem;background:rgba(11,12,13,0.95);z-index:50;animation:slideUpForm .4s ease-out;justify-content:flex-start;pointer-events:auto;backdrop-filter:blur(5px)}
 @keyframes slideUpForm{from{transform:translateY(100%)}to{transform:translateY(0)}}
 
 .text-input{background:rgba(20,20,20,0.6);border:2px solid #fff;border-radius:.8rem} .pay-card{border:2px solid #fff;border-radius:.8rem;background:rgba(20,20,20,0.6)} .pay-option input:checked+.pay-card{border-color:var(--ecolor)}
 
 /* Адаптив для мобилок: поднимаем кнопку над панелью с ценой */
 .floating-contact { bottom: 110px; right: 20px; }
}

/* АНИМАЦИИ И ВАЛИДАЦИЯ */
@keyframes errorBlink {
    0% { border-color: #ff5555; box-shadow: 0 0 5px rgba(255, 85, 85, 0.5); }
    50% { border-color: #ff0000; box-shadow: 0 0 15px rgba(255, 0, 0, 0.8); }
    100% { border-color: #ff5555; box-shadow: 0 0 5px rgba(255, 85, 85, 0.5); }
}
.input-error {
    animation: errorBlink 0.5s ease-in-out 3 !important;
    border-color: #ff5555 !important;
}

@keyframes chatPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
#chat-icon { animation: chatPulse 2.5s infinite ease-in-out; }
/* Возвращаем фокус для клавиатуры, скрываем для кликов мышью/пальцем */
:focus-visible {
    outline: 2px solid var(--ecolor);
    outline-offset: 2px;
}