/* Admin TMN — custom styles (без @apply, работает с Tailwind CDN) */

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.card {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.dark .card {
    background: #1e293b;
    border-color: #334155;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .section-title { font-size: 1.875rem; }
}

.page-header {
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.dark .page-header {
    background: rgba(30,41,59,.5);
    border-color: #334155;
}

.hero-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #0369a1 50%, #0ea5e9 100%);
}

.stat-card {
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(255,255,255,.2);
}

.cta-section {
    background: linear-gradient(135deg, #0284c7, #0369a1);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .625rem 1.25rem;
    border-radius: .75rem;
    background: #0284c7;
    color: #fff;
    font-weight: 600;
    transition: background .2s;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary:hover { background: #0369a1; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .625rem 1.25rem;
    border-radius: .75rem;
    border: 1px solid #cbd5e1;
    font-weight: 600;
    transition: background .2s;
    text-decoration: none;
    color: inherit;
}

.dark .btn-secondary { border-color: #475569; }
.btn-secondary:hover { background: #f1f5f9; }
.dark .btn-secondary:hover { background: #334155; }

.btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .625rem 1.25rem;
    border-radius: .75rem;
    background: #fff;
    color: #0369a1;
    font-weight: 600;
    transition: background .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-white:hover { background: #f1f5f9; }

.btn-outline-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .625rem 1.25rem;
    border-radius: .75rem;
    border: 2px solid rgba(255,255,255,.6);
    color: #fff;
    font-weight: 600;
    transition: background .2s;
    text-decoration: none;
}

.btn-outline-white:hover { background: rgba(255,255,255,.1); }

.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.dark .btn-icon { border-color: #475569; }
.btn-icon:hover { background: #f1f5f9; }
.dark .btn-icon:hover { background: #1e293b; }

.form-label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: .375rem;
    color: #334155;
}

.dark .form-label { color: #cbd5e1; }

.form-input {
    width: 100%;
    padding: .625rem 1rem;
    border-radius: .75rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    color: inherit;
    font: inherit;
}

.dark .form-input {
    background: #1e293b;
    border-color: #475569;
}

.form-input:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 2px rgba(14,165,233,.3);
}

.form-textarea { resize: vertical; min-height: 80px; }

.filter-btn {
    padding: .5rem 1rem;
    border-radius: 9999px;
    font-size: .875rem;
    font-weight: 500;
    border: 1px solid #cbd5e1;
    transition: all .2s;
    text-decoration: none;
    color: inherit;
}

.dark .filter-btn { border-color: #475569; }
.filter-btn:hover { border-color: #0ea5e9; }
.filter-btn.active {
    background: #0284c7;
    color: #fff;
    border-color: #0284c7;
}

.calc-radio { cursor: pointer; }
.calc-radio input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.calc-radio span {
    display: block;
    text-align: center;
    padding: .75rem 1rem;
    border-radius: .75rem;
    border: 2px solid #e2e8f0;
    font-weight: 500;
    transition: all .2s;
}

.dark .calc-radio span { border-color: #475569; }
.calc-radio input:checked + span {
    border-color: #0284c7;
    background: #e0f2fe;
    color: #0369a1;
}

.dark .calc-radio input:checked + span {
    background: rgba(14,165,233,.15);
    color: #7dd3fc;
}

.calc-check {
    display: flex;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
    padding: .75rem;
    border-radius: .75rem;
    border: 1px solid #e2e8f0;
    transition: border-color .2s;
}

.dark .calc-check { border-color: #475569; }
.calc-check:hover { border-color: #38bdf8; }
.calc-check input { width: 1.25rem; height: 1.25rem; accent-color: #0284c7; }

/* Каталог услуг в калькуляторе */
.calc-services-list {
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    padding: .75rem;
    background: #f8fafc;
}

.dark .calc-services-list {
    border-color: #475569;
    background: #0f172a;
}

.calc-service-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .5rem .75rem;
    align-items: start;
    padding: .75rem;
    border-radius: .75rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

.dark .calc-service-item {
    background: #1e293b;
    border-color: #334155;
}

.calc-service-item:has(input:checked) {
    border-color: #0284c7;
    box-shadow: 0 0 0 1px #0284c7;
}

.calc-service-item input[type="checkbox"] {
    margin-top: .25rem;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #0284c7;
}

.calc-service-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.calc-service-title {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.3;
}

.calc-service-desc {
    font-size: .75rem;
    color: #64748b;
    line-height: 1.4;
}

.dark .calc-service-desc { color: #94a3b8; }

.calc-service-price {
    font-size: .75rem;
    font-weight: 600;
    color: #0284c7;
    white-space: nowrap;
}

.calc-service-qty {
    grid-column: 2 / 4;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.calc-service-qty .calc-qty-input {
    width: 5rem;
    padding: .35rem .5rem;
    font-size: .875rem;
}

.calc-service-qty-label {
    font-size: .75rem;
    color: #64748b;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: .25rem .75rem;
    border-radius: 9999px;
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge--active {
    background: #fef3c7;
    color: #92400e;
}

.dark .status-badge--active {
    background: rgba(245,158,11,.2);
    color: #fcd34d;
}

.status-badge--done {
    background: #dcfce7;
    color: #166534;
}

.dark .status-badge--done {
    background: rgba(34,197,94,.2);
    color: #86efac;
}

.alert {
    padding: .75rem 1rem;
    border-radius: .75rem;
    font-size: .875rem;
    font-weight: 500;
}

.alert--success, .alert-success {
    background: #dcfce7;
    color: #166534;
}

.dark .alert--success, .dark .alert-success {
    background: rgba(34,197,94,.2);
    color: #86efac;
}

.alert--error, .alert-error {
    background: #fee2e2;
    color: #991b1b;
}

.dark .alert--error, .dark .alert-error {
    background: rgba(239,68,68,.2);
    color: #fca5a5;
}

.reviews-slider { overflow: hidden; }

.reviews-track {
    display: flex;
    gap: 1rem;
    transition: transform .4s ease;
}

.review-card {
    min-width: 100%;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .review-card { min-width: calc(50% - .5rem); }
}

@media (min-width: 1024px) {
    .review-card { min-width: calc(33.333% - .667rem); }
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal.hidden { display: none; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    width: 100%;
    max-width: 28rem;
    box-shadow: 0 25px 50px rgba(0,0,0,.25);
    z-index: 10;
}

.dark .modal-content { background: #1e293b; }

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.modal-close:hover { background: #f1f5f9; }
.dark .modal-close:hover { background: #334155; }

.consultant-widget {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
}

.consultant-toggle {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: #0284c7;
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 10px 15px rgba(0,0,0,.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.consultant-toggle:hover { background: #0369a1; }

.consultant-panel {
    position: absolute;
    bottom: 4rem;
    right: 0;
    width: 14rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    border: 1px solid #e2e8f0;
    padding: 1rem;
}

.dark .consultant-panel {
    background: #1e293b;
    border-color: #334155;
}

.consultant-panel.hidden { display: none; }

.consultant-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s;
}

.consultant-link.telegram {
    background: #e0f2fe;
    color: #0369a1;
}

.consultant-link.whatsapp {
    background: #dcfce7;
    color: #166534;
}

.consultant-link.phone {
    background: #f1f5f9;
    color: inherit;
}

.prose h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: .75rem;
}

.prose p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.prose ul, .prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .5rem; }
.prose li strong { font-weight: 600; }