/* ============================================================
   new.css ·  Fast & Anonymous Exchange (CSS‑only)
   ============================================================ */

/* 1) Шрифты */
@font-face{font-family:'Onest';src:url('../css/fonts/OnestRegular.woff2') format('woff2'),url('../css/fonts/OnestRegular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Onest';src:url('../css/fonts/OnestBold.woff2') format('woff2'),url('../css/fonts/OnestBold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}

/* 2) Переменные темы */
:root{
  --bg-image:url('../css/img/background.webp') top center/cover no-repeat;
  --bg-color:#fafafa;--fg:#222;--card:#fff;--accent:#f7931a;--shadow:rgba(0,0,0,.1);
  --grey-100:#f4f4f4;--grey-200:#e8e8e8;--grey-500:#7e7e7e;
}

/* 3) Обёртка */
.wrapper{min-height:100vh;background:var(--bg-color) var(--bg-image);color:var(--fg);transition:background .3s,color .3s}

/* 4) Reset / base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%;font-family:'Onest',sans-serif;overflow-x:hidden}
.container{width:90%;max-width:1000px;margin:0 auto}
a{text-decoration:none;color:inherit}

/* ================================================= HEADER */
.site-header{background:var(--card);box-shadow:0 2px 6px var(--shadow);position:sticky;top:0;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.desktop-only{display:block}@media(max-width:768px){.desktop-only{display:none}}
.logo{display:flex;align-items:center;gap:.75rem}.logo img{height:32px}.logo-text{font:600 24px 'Raleway',sans-serif;color:var(--fg)}
.main-nav{display:flex;gap:2.5rem !important;flex-wrap:wrap}.main-nav a{font:16px 'Onest';color:var(--fg);transition:color .2s}.main-nav a:hover,.main-nav a.active{color:var(--accent)}
.theme-switch{display:flex;align-items:center;gap:.75rem;cursor:pointer}.theme-label{font:16px 'Onest';color:var(--fg)}
.switch{width:48px;height:24px;background:var(--grey-100);border-radius:32px;position:relative;transition:background .3s}.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .3s}

/* burger */
.burger{display:none;width:28px;height:22px;position:relative;cursor:pointer}
.burger span{position:absolute;left:50%;width:24px;height:3px;background:var(--fg);border-radius:2px;transform:translateX(-50%);transition:.3s}
.burger span:nth-child(2){top:9px}.burger span:nth-child(3){top:18px}@media(max-width:768px){.burger{display:block}}
#burgerToggle:checked ~ .wrapper .burger span:nth-child(1){transform:translate(-50%,9px) rotate(45deg)}
#burgerToggle:checked ~ .wrapper .burger span:nth-child(2){opacity:0}
#burgerToggle:checked ~ .wrapper .burger span:nth-child(3){transform:translate(-50%,-9px) rotate(-45deg)}
body.dark .burger span{background:#fff}

/* off‑canvas */
.offcanvas{position:fixed;top:0;left:-260px;width:260px;height:100vh;background:var(--card);box-shadow:4px 0 12px rgba(0,0,0,.3);padding:1.5rem;display:flex;flex-direction:column;gap:2rem;transition:left .35s ease;z-index:20}
.offcanvas .main-nav{flex-direction:column;gap:1.25rem}.offcanvas .main-nav a{font-size:18px}.offcanvas .theme-label{font-size:18px}
#burgerToggle:checked ~ .wrapper .offcanvas{left:0}

/* ================================================= HERO */
.hero{text-align:center;padding:6rem 0 1rem !important;}
.hero h1{font:600 clamp(1.5rem,5vw,2.5rem) 'Onest';background:linear-gradient(90deg,var(--fg) 50%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subhead{display:inline-flex;align-items:center;gap:.75rem;margin-top:.5rem}.subpair{display:inline-flex;align-items:center;gap:.35rem}.subhead-text{font-size:28px}.subhead-arrow{font-size:18px;color:var(--fg)}
.logo-bitcoin,.logo-monero{width:24px;height:24px;background:center/contain no-repeat}.logo-bitcoin{background-image:url('../css/img/bitcoin.png')}.logo-monero{background-image:url('../css/img/monero.png')}

/* ================================================= EXCHANGE */
.exchange{margin-top:-2rem;padding:3rem 0}
.exchange-card{background:var(--card);box-shadow:0 0 64px var(--shadow);border-radius:16px;padding:2rem}
.exchange-fields{display:grid;gap:1.5rem}
.exchange-side-form{display:flex;flex-direction:column}
.exchange-side-form .btn-start{margin:1rem auto 0;padding:12px 48px}
.exchange-or{text-align:center;margin:.5rem 0;font:500 14px 'Onest';color:var(--grey-500);text-transform:uppercase;letter-spacing:.04em}
.field label{display:block;margin-bottom:.5rem;font:600 16px 'Onest';color:var(--fg)}

/* input‑группа с аккуратной рамкой */
.input-group{
  display:flex;align-items:center;
  background:var(--grey-100);
  border:1.5px solid var(--grey-200);
  border-radius:8px;overflow:hidden;transition:border-color .2s
}
.input-group:focus-within{border-color:var(--accent)}
.input-group input{
  flex:1;border:none;padding:.75rem;font-size:16px;background:transparent;color:var(--fg);
  outline:none;                       /* убираем системную рамку */
}
.input-group input::placeholder{color:var(--grey-500)}

.currency{display:flex;align-items:center;gap:.4rem;padding:.75rem 1rem;background:var(--grey-200);font:600 16px 'Onest';color:var(--fg)}
.currency-icon{width:20px;height:20px;background-size:contain;background-position:center;background-repeat:no-repeat}.currency-icon.btc{background-image:url('../css/img/bitcoin.png')}.currency-icon.xmr{background-image:url('../css/img/monero.png')}
.swap-btn{width:28px;height:28px;background:var(--grey-200) url('../css/img/swap_button.png') center/16px no-repeat;border:none;border-radius:50%;cursor:pointer;align-self:center}
.btn-start {
  display: block;
  margin: 1.5rem auto 0;
  padding: 16px 64px;
  background: linear-gradient(88.24deg,#FFB761 -15.12%,#FA6800 138.53%);
  box-shadow: 0 0 26.6px rgba(254,167,77,.7);
  border: none;
  border-radius: 8px;
  font: 600 20px 'Onest';
  color: #fff;
  cursor: pointer;
}

.note{grid-column:1/-1;text-align:center;margin-top:.5rem;font:14px 'Onest';color:var(--grey-500)}

/* ================================================= INFO */
.info{padding:4rem 0;text-align:center}
.info h2{margin-bottom:.5rem;font:600 clamp(1.25rem,4vw,2rem) 'Onest';color:var(--fg)}
.lead{margin:.5rem auto 2rem;max-width:600px;font:500 16px/1.4 'Onest';color:var(--fg)}
.features{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2rem;max-width:978px;margin:2rem auto 0}
.feature{flex:0 1 30%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem}
.feature-top{display:flex;align-items:center;gap:.5rem;justify-content:center}
.feature-icon{width:24px;height:24px;background:center/contain no-repeat}.feature-icon.untraceable{background-image:url('../css/img/info1.png')}.feature-icon.privacy{background-image:url('../css/img/info2.png')}.feature-icon.fungible{background-image:url('../css/img/info3.png')}
.feature h3{font:600 24px 'Onest';color:var(--fg)}.feature p{font:16px/1.35 'Onest';color:var(--fg)}

/* ================================================= FAQ */
.faq{padding-bottom:5rem;text-align:center}
.faq h2{font:600 clamp(1.25rem,4vw,2rem) 'Onest';color:var(--fg)}
.caption{font:500 16px 'Onest';color:var(--grey-500);margin-bottom:2rem}
.accordion{margin-top:1rem}
.accordion details{background:var(--card);border-radius:8px;box-shadow:0 2px 6px var(--shadow);margin-bottom:1rem;overflow:hidden}
.accordion summary{list-style:none;padding:1rem;background:var(--grey-100);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font:18px 'Onest';color:var(--fg);transition:background .2s}
.accordion summary:hover{background:var(--grey-200)}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary i{width:24px;height:24px;background:url('../css/img/chevron_down.png') center/contain no-repeat}
.accordion details[open] summary i{background-image:url('../css/img/chevron_up.png')}
.accordion .answer{max-height:0;overflow:hidden;padding:0 1rem;transition:max-height .3s ease;background:var(--card)}
.accordion details[open] .answer{padding:1rem;max-height:500px}
.accordion .answer p{font:16px/1.4 'Onest';color:var(--fg)}

/* ================================================= Responsive */
@media(max-width:900px){.exchange-card{grid-template-columns:1fr}.swap-btn{margin:1rem auto}}
@media(max-width:768px){.desktop-nav,.site-header .theme-switch:not(.offcanvas .theme-switch){display:none}}
@media(max-width:600px){.faq .container{width:100%;padding:0 1rem}.header-inner{flex-direction:row;justify-content:space-between}.hero{padding:4rem 0 2rem}.exchange-card{padding:1.5rem;row-gap:.75rem}.btn-start{width:100%;padding:14px}}
@media(max-width:480px){.features .feature{flex:1 1 100%}}

/* ================================================= Toggles */
#themeToggle:checked ~ .wrapper{--bg-color:#0e0e0e;--bg-image:none;--fg:#e6e6e6;--card:#1d1d1d;--shadow:rgba(0,0,0,.55);--grey-100:#2f2f2f;--grey-200:#3a3a3a;--grey-500:#b5b5b5}
#themeToggle:checked ~ .wrapper .switch{background:var(--accent)}
#themeToggle:checked ~ .wrapper .switch::after{transform:translateX(24px)}
#themeToggle:checked ~ .wrapper .feature-icon.untraceable{background-image:url('../css/img/info_dark1.png')}
#themeToggle:checked ~ .wrapper .feature-icon.privacy{background-image:url('../css/img/info_dark2.png')}
#themeToggle:checked ~ .wrapper .feature-icon.fungible{background-image:url('../css/img/info_dark3.png')}

/* ================================================= FOOTER */
.footer{
    background:var(--card);
    box-shadow:0 -2px 6px var(--shadow);
    padding:1rem 0;
}
.footer .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.footer p{
    color: var(--fg);
    font: 16px 'Onest';
}
.footer nav{
    display: flex;
    gap: 1.5rem;
}
.footer nav a{
    font: 16px 'Onest';
    color: var(--fg);
    transition: color .2s;
}
.footer nav a:hover{
    color: var(--accent);
}

.direction-toggle {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.direction-btn {
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    background: var(--grey-100);
    color: var(--grey-500);
    font: 600 16px 'Onest';
    transition: all 0.2s;
    text-decoration: none;
}

.direction-btn.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 0 26.6px rgba(254,167,77,.4);
}

.direction-btn:not(.active):hover {
    background: var(--grey-200);
    color: var(--fg);
}

#themeToggle:checked ~ .wrapper .direction-btn {
    background: var(--grey-200);
}

#themeToggle:checked ~ .wrapper .direction-btn.active {
    background: var(--accent);
}

.maintenance-message {
    text-align: center;
    padding: 2rem;
    background: #fff5f5;
    border-radius: 8px;
    margin: 1rem 0;
}

.maintenance-message p {
    color: #e53e3e;
    margin-bottom: 0.5rem;
}

.maintenance-message small {
    color: #718096;
}

/* Alert styles */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: center;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.btn-pgp {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 10px 18px;
    border: 1.5px solid var(--accent, #f7931a);
    background: transparent;
    color: var(--accent, #f7931a);
    border-radius: 8px;
    font: 600 15px 'Onest', sans-serif;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.btn-pgp:hover {
    background: var(--accent, #f7931a);
    color: #fff;
}
.btn-pgp::after {
    content: '\2197';
    font-size: 14px;
    opacity: .8;
}

.alert-critical {
    color: #fff;
    background-color: #b91c1c;
    border: 2px solid #7f1d1d;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    font: 600 16px 'Onest', sans-serif;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 0 16px rgba(185, 28, 28, .35);
}
.alert-critical strong { font-size: 18px; display: block; margin-bottom: .4rem; letter-spacing: .02em; }
.alert-critical .alert-amount { color: #fff; background: rgba(0,0,0,.25); padding: 2px 8px; border-radius: 4px; font-family: monospace; }

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/* Animation for alerts */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.alert {
    animation: fadeIn 0.3s ease-in-out;
}

.alert-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
}

.step ul {
    list-style: none;
    padding-left: 0;
}