/*
Theme Name: Народный уголь
Theme URI: https://народныйуголь.рф
Author: Development Team
Description: Кастомная тема для сайта по продаже угля.
Version: 1.0.4
License: GNU General Public License v2 or later
Text Domain: coal-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════ */
:root {
    /* Colors */
    --bg:           #0d0f11;
    --surf:         #141720;
    --card:         #1a1e28;
    --card2:        #1f2330;
    --brd:          #272d3b;
    --brd2:         #343c4e;
    --amber:        #f5a623;
    --amb-d:        #d98b18;
    --lt:           #f3f0ea;
    --mid:          #c3bfb5;
    --dim:          #7e8696;
    --on-amber:     #110900;
    --tg:           #229ED9;
    --tg-bg:        #172534;
    --tg-brd:       #1e3d57;
    --tg-lt:        #ddf0fa;
    --tg-mid:       #5ea8cb;
    --error:        #f87171;
    --success:      #4ade80;
    --green:        #4dde6e;

    /* Radius */
    --r-sm: 8px;
    --r:    10px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-2xl: 28px;
    --r-pill: 100px;

    /* Transitions */
    --t: 0.2s ease;

    /* Layout */
    --container: 1160px;
    --section-y: 88px;

    /* Compat aliases (used in front-page inline styles) */
    --color-accent: var(--amber);
    --color-accent-hover: var(--amb-d);
    --color-text: var(--lt);
    --color-text-dark: #1b1b1b;
    --color-available: #84cc16;
    --color-background-alt: #f6f3ee;
    --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Manrope', sans-serif;
    --shadow-lg: 0 20px 56px rgba(17,17,17,0.18);
}

/* ═══════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--lt);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

a {
    color: var(--amber);
    text-decoration: none;
    transition: color var(--t);
}
a:hover { color: var(--amb-d); }

h1,h2,h3,h4,h5,h6 {
    font-family: 'Manrope', sans-serif;
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -0.04em;
    color: var(--lt);
}

h1 { font-size: clamp(32px,5vw,62px); }
h2 { font-size: clamp(26px,3.5vw,44px); }
h3 { font-size: clamp(22px,2.5vw,30px); }
h4 { font-size: 22px; }

p { margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 20px; }

/* ═══════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════ */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px;
}

.section {
    padding: var(--section-y) 0;
}

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    padding: 0 28px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 900;
    border: 2px solid transparent;
    border-radius: var(--r-lg);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t), border-color var(--t), box-shadow var(--t), transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--on-amber);
}
.btn-primary:hover {
    background: var(--amb-d);
    border-color: var(--amb-d);
    color: var(--on-amber);
    box-shadow: 0 6px 24px rgba(245,166,35,.42);
    transform: translateY(-1px);
}
.btn-primary:disabled,
.btn-primary.disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-secondary {
    background: transparent;
    border-color: rgba(243,240,234,.28);
    color: var(--lt);
}
.btn-secondary:hover {
    background: rgba(243,240,234,.09);
    border-color: rgba(243,240,234,.65);
    color: var(--lt);
    transform: translateY(-1px);
}

.btn-large {
    min-height: 60px;
    padding: 0 36px;
    font-size: 17px;
}

/* Lead form submit — disabled state */
.lead-form-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ═══════════════════════════════════════════════
   FORMS (global)
═══════════════════════════════════════════════ */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea,
select {
    width: 100%;
    min-height: 54px;
    padding: 13px 18px;
    font-size: 16px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    background: rgba(255,255,255,.06);
    border: 1.5px solid var(--brd);
    border-radius: var(--r-lg);
    color: var(--lt);
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
    outline: none;
}
input::placeholder,
textarea::placeholder { color: var(--dim); font-weight: 500; }
input:focus,
textarea:focus,
select:focus {
    border-color: var(--amber);
    background: rgba(255,255,255,.09);
    box-shadow: 0 0 0 3px rgba(245,166,35,.15);
}

label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--lt);
    margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════════ */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.honeypot-field { position: absolute; left: -9999px; }
.text-center { text-align: center; }

/* Loading spinner */
.loading { position: relative; pointer-events: none; opacity: 0.7; }
.loading::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 20px; height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }