/**
 * Service Center Page — Styles
 * Naked Technologies
 *
 * Наследует дизайн-систему через .nt-homepage (homepage-v3.css).
 * Стили для: hero (тёмная тема), price list, serial check, SEO text, modal.
 *
 * @version 3.0.0
 */

/* ==========================================================================
   0. SCOPED VARIABLES — тема "ремонт/сервис"
   ========================================================================== */

.nt-service-page {
    --sc-hero-accent: #FCD34D;
    --sc-hero-dark: #0F1629;
    --sc-green: #10B981;
    --sc-red: #EF4444;
}

/* ==========================================================================
   1a. MINI HEADER — compact title replacing hero
   ========================================================================== */

.sc-breadcrumbs {
    padding: 16px 0 0 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}

.sc-breadcrumbs a {
    color: #6b7280 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.sc-breadcrumbs a:hover {
    color: #2C3DF5 !important;
}

.sc-breadcrumbs > span:last-child {
    color: #1a1a2e !important;
    font-weight: 600 !important;
}

.sc-mini-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 20px 0 16px !important;
}

.sc-mini-header h1 {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.sc-mini-subtitle {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 6px 0 0 !important;
    line-height: 1.5 !important;
}

.sc-mini-cta {
    display: flex !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
}

.sc-mini-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 24px !important;
    border: 2px solid #000000 !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,1) !important;
    transition: all 0.15s ease !important;
}

.sc-mini-btn:hover {
    transform: translate(3px, 3px) !important;
    box-shadow: none !important;
}

.sc-mini-btn-primary {
    background: #FCD34D !important;
    color: #000000 !important;
}

.sc-mini-btn-primary:hover {
    background: #FBBF24 !important;
}

.sc-mini-btn-secondary {
    background: #FFFFFF !important;
    color: #000000 !important;
}

.sc-mini-btn-secondary:hover {
    background: #F3F4F6 !important;
}

/* ==========================================================================
   1b. HERO — тёмная профессиональная тема (legacy, kept for reference)
   ========================================================================== */

/* Светлый фон в стиле остальных hero-слайдов на главной */
.nt-service-page .neo-service {
    background-color: #EEF1F8 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* H1 — чёрный, уменьшен под 420px контейнер (2 строки вместо 3) */
/* Specificity 0-4-1 чтобы перебить .nt-homepage .nt-hero-slide.neo-hero h1 (0-3-1) */
.nt-service-page .nt-hero-slide.neo-hero.neo-service h1 {
    color: #000000 !important;
    font-size: 44px !important;
    line-height: 1.1 !important;
}

/* Жёлтый акцент — как Соцконтракт/цены на главной */
.nt-service-page .neo-service .neo-accent-text {
    color: #D4A017 !important;
}

/* Подзаголовок */
.nt-service-page .neo-service .nt-hero-subtitle {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* Hero — тот же размер, что и на главной (420px, padding 0 64px, flex-center) */
.nt-service-page .nt-hero-slide.neo-hero.neo-service {
    height: 420px !important;
    min-height: 420px !important;
}

.nt-service-page .nt-hero-slide.neo-hero.neo-service .nt-hero-slide-content {
    padding: 0px 64px !important;
}

/* CTA-группа: два действия рядом */
.sc-hero-cta-group {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 28px !important;
    flex-wrap: wrap !important;
}

/* Основная кнопка — жёлтый neo-brutalism (как на главной) */
.nt-service-page .neo-service .nt-hero-cta.sc-btn-primary {
    background: #FCD34D !important;
    color: #000000 !important;
}

.nt-service-page .neo-service .nt-hero-cta.sc-btn-primary:hover {
    background: #FBBF24 !important;
}

/* Вторичная кнопка — белый neo-brutalism */
.nt-service-page .neo-service .nt-hero-cta.sc-btn-secondary {
    background: #FFFFFF !important;
    color: #000000 !important;
    gap: 8px !important;
}

.nt-service-page .neo-service .nt-hero-cta.sc-btn-secondary:hover {
    background: #F3F4F6 !important;
}

/* Иллюстрация справа */
.sc-hero-visual {
    position: absolute !important;
    right: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 340px !important;
    height: 300px !important;
    opacity: 0.85 !important;
    pointer-events: none !important;
}

.sc-hero-visual svg {
    width: 100% !important;
    height: 100% !important;
}

/* ==========================================================================
   2. PRICE LIST
   ========================================================================== */

.sc-price-list {
    padding: 40px 0 !important;
}

/* --- Filter bar (sticky) --- */
.sp-filter-bar {
    background: white !important;
    border: 2px solid #000000 !important;
    border-radius: 14px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    position: sticky !important;
    top: 140px !important;
    z-index: 50 !important;
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,1) !important;
}

/* Search */
.sp-search {
    position: relative !important;
    margin-bottom: 14px !important;
}

.sp-search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    color: #9CA3AF !important;
    pointer-events: none !important;
}

.sp-search input {
    width: 100% !important;
    padding: 12px 16px 12px 44px !important;
    border: 2px solid #000000 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    color: var(--text-dark) !important;
    background: #FAFBFE !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
    transition: border-color 0.2s !important;
    outline: none !important;
}

.sp-search input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(44, 61, 245, 0.08) !important;
}

.sp-search input::placeholder {
    color: #9CA3AF !important;
}

/* Unified filter row (pills + brand + count) */
.sp-filter-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.sp-filter-right {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Legacy — keep for backward compat */
.sp-filters {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin-bottom: 14px !important;
}

.sp-filter-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.sp-filter-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6B7280 !important;
    white-space: nowrap !important;
}

/* Brand select — NB style */
.sp-filter-group select {
    padding: 6px 12px !important;
    border: 1.5px solid #000000 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    color: var(--text-dark) !important;
    background: white !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,1) !important;
    transition: all 0.15s ease !important;
}

.sp-filter-group select:focus {
    border-color: var(--primary) !important;
}

/* Meta row */
.sp-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    color: #6B7280 !important;
}

.sp-meta strong {
    color: var(--text-dark) !important;
    font-weight: 700 !important;
}

.sp-print-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border: 1px solid #E6E6FF !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    color: #6B7280 !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.sp-print-btn:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.sp-print-btn svg {
    width: 16px !important;
    height: 16px !important;
}

/* --- Category pills (NB micro-shadow) --- */
.sp-category-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
}

.sp-cat-pill {
    padding: 5px 12px !important;
    border: 1.5px solid #000000 !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #1a1a2e !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,1) !important;
}

.sp-cat-pill:hover {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0px 0px rgba(0,0,0,1) !important;
    background: #F5F9FF !important;
}

.sp-cat-pill.active {
    background: #FCD34D !important;
    border-color: #000000 !important;
    color: #000000 !important;
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,1) !important;
}

.sp-cat-pill:focus,
.sp-cat-pill:focus-visible {
    outline: none !important;
}

.sp-pill-more {
    display: none !important;
    color: #FFFFFF !important;
    background: #38BDF8 !important;
    border-color: #000000 !important;
}

.sp-pill-hidden {
    display: inline-flex !important;
}

/* --- Accordion groups --- */
.sp-group {
    background: white !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
    border-left: 4px solid transparent !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.sp-group.expanded {
    border-left: 4px solid #2C3DF5 !important;
    box-shadow: 0 4px 12px -2px rgba(44, 61, 245, 0.12) !important;
}

.sp-group.expanded .sp-group-header {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%) !important;
    border-bottom: 1px solid #E6E6FF !important;
}

.sp-group.expanded .sp-group-count {
    background: var(--primary) !important;
    color: #ffffff !important;
}

.sp-group.expanded .sp-group-chevron {
    color: var(--primary) !important;
}

.sp-group.hidden {
    display: none !important;
}

/* Override Elementor Kit global button styles (.elementor-kit-6 button) */
.nt-service-page .sp-group-header,
.sp-group-header {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 16px 20px !important;
    border: none !important;
    background: none !important;
    color: inherit !important;
    cursor: pointer !important;
    font-family: inherit !important;
    text-align: left !important;
    gap: 12px !important;
    transition: background 0.2s !important;
    box-shadow: none !important;
}

.nt-service-page .sp-group-header:hover,
.sp-group-header:hover {
    background: #F5F9FF !important;
}

.nt-service-page .sp-group-header:focus,
.nt-service-page .sp-group-header:focus-visible,
.sp-group-header:focus,
.sp-group-header:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.sp-group-header h3 {
    flex: 1 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
}

.sp-group-count {
    background: #EEF0FF !important;
    color: var(--primary) !important;
    padding: 2px 10px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.sp-group-chevron {
    width: 20px !important;
    height: 20px !important;
    color: #9CA3AF !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
}

.sp-group.expanded .sp-group-chevron {
    transform: rotate(180deg) !important;
}

/* Group body */
.sp-group-body {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease !important;
}

.sp-group.expanded .sp-group-body {
    max-height: 5000px !important;
}

/* --- Price rows (без колонки типа — все строки "услуги") --- */
.sp-row {
    display: grid !important;
    grid-template-columns: 1fr auto 120px auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    border-top: 1px solid #F0F0FF !important;
    transition: background 0.2s !important;
}

.sp-row:hover {
    background: #FAFBFF !important;
}

.sp-row.hidden {
    display: none !important;
}

/* Row columns */
.sp-row-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-dark) !important;
}

.sp-row-brand {
    font-size: 12px !important;
    color: #9CA3AF !important;
    white-space: nowrap !important;
}

.sp-row-price {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.sp-price-call {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
}

/* Action button — "Заявка" (works as <a> and <button>) */
.sp-request-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    border: 1.5px solid var(--primary) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    color: var(--primary) !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.sp-request-btn:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Empty state */
.sp-empty {
    text-align: center !important;
    padding: 48px 20px !important;
}

.sp-empty svg {
    width: 48px !important;
    height: 48px !important;
    color: #9CA3AF !important;
    margin-bottom: 16px !important;
}

.sp-empty p {
    font-size: 16px !important;
    color: #6B7280 !important;
    margin-bottom: 16px !important;
}

.sp-reset-btn {
    display: inline-flex !important;
    padding: 10px 24px !important;
    border: 1.5px solid var(--primary) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    color: var(--primary) !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.sp-reset-btn:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Fallback CTA */
.sp-fallback-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: white !important;
    border-radius: 14px !important;
    padding: 20px 24px !important;
    margin-top: 16px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.sp-fallback-cta p {
    font-size: 15px !important;
    color: #6B7280 !important;
}

.sp-fallback-cta strong {
    color: var(--text-dark) !important;
}

.sp-fallback-btn {
    display: inline-flex !important;
    padding: 12px 24px !important;
    border: 2px solid #000 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: #FCD34D !important;
    color: #000 !important;
    box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 1) !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

.sp-fallback-btn:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: none !important;
}

/* Ссылка на каталог запчастей */
.sp-parts-catalog-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 24px !important;
    margin-top: 12px !important;
    background: #F5F9FF !important;
    border-radius: 12px !important;
    border: 1px solid #E6E6FF !important;
}

.sp-parts-catalog-link svg {
    color: var(--primary) !important;
}

.sp-parts-catalog-link p {
    font-size: 14px !important;
    color: #6B7280 !important;
    margin: 0 !important;
}

.sp-parts-catalog-link a {
    color: var(--primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-left: 4px !important;
}

.sp-parts-catalog-link a:hover {
    text-decoration: underline !important;
}

/* ==========================================================================
   3. SERIAL CHECK
   ========================================================================== */

.sc-serial-wrapper {
    max-width: 720px !important;
    margin: 0 auto !important;
}

.sc-serial-header {
    text-align: center !important;
    margin-bottom: 32px !important;
}

.sc-serial-subtitle {
    font-size: 15px !important;
    color: #6B7280 !important;
    margin-top: 8px !important;
}

/* Form */
.sc-serial-form {
    margin-bottom: 24px !important;
}

.sc-serial-input-group {
    display: flex !important;
    position: relative !important;
    border: 2px solid #000 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1) !important;
    background: white !important;
    margin-bottom: 6px !important;
}

.sc-serial-input-icon {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    color: #9CA3AF !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.sc-serial-input {
    flex: 1 !important;
    padding: 16px 16px 16px 48px !important;
    border: none !important;
    font-size: 16px !important;
    font-family: inherit !important;
    color: var(--text-dark) !important;
    outline: none !important;
    background: transparent !important;
}

.sc-serial-input::placeholder {
    color: #9CA3AF !important;
}

.sc-serial-btn {
    padding: 16px 28px !important;
    border: none !important;
    border-left: 2px solid #000 !important;
    background: var(--primary) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    white-space: nowrap !important;
}

.sc-serial-btn:hover {
    background: #1E2FD9 !important;
}

.sc-serial-btn-loader svg {
    width: 20px !important;
    height: 20px !important;
    animation: sc-spin 1s linear infinite !important;
}

@keyframes sc-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* FIXED: увеличенный отступ подсказки от поля с тенью */
.sc-serial-hint {
    font-size: 12px !important;
    color: #9CA3AF !important;
    margin-top: 20px !important;
    text-align: center !important;
}

/* Error — display toggled by JS, no !important on display */
.sc-serial-error {
    align-items: flex-start !important;
    gap: 12px !important;
    background: #FEF2F2 !important;
    border: 1px solid #FCA5A5 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
}

.sc-serial-error svg {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    color: #EF4444 !important;
}

.sc-serial-error p {
    font-size: 14px !important;
    color: #DC2626 !important;
    font-weight: 500 !important;
}

/* Results */
.sc-serial-results {
    border-radius: 16px !important;
    overflow: hidden !important;
    background: white !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.sc-serial-product {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    background: #F5F9FF !important;
    border-bottom: 1px solid #E6E6FF !important;
}

.sc-serial-product-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
}

.sc-serial-product-brand {
    font-size: 13px !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
    display: block !important;
}

.sc-serial-product-serial {
    font-size: 14px !important;
    color: #6B7280 !important;
}

.sc-serial-label {
    font-weight: 600 !important;
}

/* Status grid */
.sc-serial-status-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
}

.sc-serial-status-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 20px 24px !important;
    border-right: 1px solid #E6E6FF !important;
}

.sc-serial-status-card:last-child {
    border-right: none !important;
}

.sc-serial-status-icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: #EEF0FF !important;
    color: var(--primary) !important;
}

.sc-serial-status-icon svg {
    width: 22px !important;
    height: 22px !important;
}

.sc-serial-status-icon.warranty-active {
    background: #ECFDF5 !important;
    color: #10B981 !important;
}

.sc-serial-status-icon.warranty-expired {
    background: #FEF2F2 !important;
    color: #EF4444 !important;
}

.sc-serial-status-text {
    display: flex !important;
    flex-direction: column !important;
}

.sc-serial-status-label {
    font-size: 12px !important;
    color: #9CA3AF !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.sc-serial-status-value {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-top: 2px !important;
}

.sc-serial-status-date {
    font-size: 12px !important;
    color: #9CA3AF !important;
    margin-top: 2px !important;
}

/* Service history timeline */
.sc-serial-history {
    padding: 20px 24px !important;
    border-top: 1px solid #E6E6FF !important;
}

.sc-serial-history h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-bottom: 16px !important;
}

.sc-serial-timeline {
    position: relative !important;
    padding-left: 24px !important;
}

.sc-serial-timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: #E6E6FF !important;
}

.sc-timeline-item {
    position: relative !important;
    padding-bottom: 16px !important;
}

.sc-timeline-item:last-child {
    padding-bottom: 0 !important;
}

.sc-timeline-item::before {
    content: '' !important;
    position: absolute !important;
    left: -23px !important;
    top: 4px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--primary) !important;
    border: 2px solid white !important;
}

.sc-timeline-date {
    font-size: 12px !important;
    color: #9CA3AF !important;
    font-weight: 600 !important;
}

.sc-timeline-text {
    font-size: 14px !important;
    color: var(--text-dark) !important;
    margin-top: 2px !important;
}

/* Serial CTA */
.sc-serial-cta {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px 24px !important;
    border-top: 1px solid #E6E6FF !important;
}

.sc-serial-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: var(--primary) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(44, 61, 245, 0.3) !important;
}

.sc-serial-cta-btn:hover {
    background: #1E2FD9 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.sc-serial-cta-btn svg {
    width: 18px !important;
    height: 18px !important;
}

.sc-serial-cta-link {
    font-size: 14px !important;
    color: #6B7280 !important;
    text-decoration: none !important;
}

.sc-serial-cta-link:hover {
    color: var(--primary) !important;
}

/* Not found */
.sc-serial-not-found {
    text-align: center !important;
    padding: 40px 24px !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.sc-serial-not-found svg {
    width: 48px !important;
    height: 48px !important;
    color: #9CA3AF !important;
    margin-bottom: 16px !important;
}

.sc-serial-not-found h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-bottom: 8px !important;
}

.sc-serial-not-found p {
    font-size: 14px !important;
    color: #6B7280 !important;
    max-width: 480px !important;
    margin: 0 auto 20px !important;
}

.sc-serial-not-found .sc-serial-cta-btn {
    display: inline-flex !important;
}

/* ==========================================================================
   4. SEO SECTION — оверрайд .seo-section под стиль .nt-product-description
   Эталон: /product/adss-fg2000d-plus-2/ → border-left #2C3DF5, gradient blue
   ========================================================================== */

.nt-service-page .seo-section .seo-text h2 {
    border-left: 4px solid #2C3DF5 !important;
    background: linear-gradient(135deg, #f5f7ff 0%, #e8ecff 100%) !important;
    padding: 16px 24px !important;
    margin-top: 40px !important;
    margin-bottom: 16px !important;
}

/* ==========================================================================
   5. REQUEST MODAL
   ========================================================================== */

.sp-request-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

.sp-request-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.sp-request-modal-inner {
    background: white !important;
    border: 2px solid #000 !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1) !important;
    padding: 32px !important;
    max-width: 480px !important;
    width: 90% !important;
    position: relative !important;
    transform: scale(0.95) !important;
    transition: transform 0.3s ease !important;
}

.sp-request-modal.active .sp-request-modal-inner {
    transform: scale(1) !important;
}

.sp-request-modal-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    color: #9CA3AF !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sp-request-modal h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-bottom: 4px !important;
}

.sp-request-modal-service {
    font-size: 14px !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}

.sp-request-modal-price {
    font-size: 14px !important;
    color: #6B7280 !important;
    margin-bottom: 20px !important;
}

.sp-request-form input,
.sp-request-form textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #E6E6FF !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: var(--text-dark) !important;
    margin-bottom: 10px !important;
    outline: none !important;
    transition: border-color 0.2s !important;
}

.sp-request-form input:focus,
.sp-request-form textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(44, 61, 245, 0.08) !important;
}

.sp-request-form textarea {
    resize: vertical !important;
    min-height: 80px !important;
}

.sp-request-submit {
    width: 100% !important;
    padding: 14px !important;
    border: 2px solid #000 !important;
    border-radius: 10px !important;
    background: #FCD34D !important;
    color: #000 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 1) !important;
    transition: all 0.15s ease !important;
}

.sp-request-submit:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: none !important;
}

.sp-request-submit:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.sp-request-success {
    text-align: center !important;
    padding: 20px 0 !important;
}

.sp-request-success svg {
    width: 48px !important;
    height: 48px !important;
    color: #10B981 !important;
    margin-bottom: 12px !important;
}

.sp-request-success p {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .nt-service-page .sc-hero,
    .nt-service-page .nt-hero-section,
    .nt-service-page .nt-advantages-section,
    .nt-service-page .sc-serial-check,
    .nt-service-page .sp-filter-bar,
    .nt-service-page .sp-category-pills,
    .nt-service-page .sp-fallback-cta,
    .nt-service-page .sp-parts-catalog-link,
    .nt-service-page .sp-row-action,
    .sp-request-modal,
    header,
    footer {
        display: none !important;
    }

    .nt-service-page .sc-price-list {
        padding: 0 !important;
        background: #fff !important;
    }

    .sp-group {
        break-inside: avoid !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        margin-bottom: 8px !important;
    }

    .sp-group-body {
        max-height: none !important;
        overflow: visible !important;
    }

    .sp-row {
        grid-template-columns: 1fr auto 100px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================================
   RESPONSIVE: 900px — Tablet Portrait
   ========================================================================== */

@media (max-width: 900px) {
    /* Hero H1: 44px → 32px */
    .nt-service-page .nt-hero-slide.neo-hero.neo-service h1 {
        font-size: 32px !important;
        line-height: 1.15 !important;
    }

    /* Accent text */
    .nt-service-page .neo-service .neo-accent-text {
        font-size: 1.5rem !important;
    }

    /* Hero subtitle */
    .nt-service-page .neo-service .nt-hero-subtitle {
        font-size: 1rem !important;
    }

    /* Hero content padding */
    .nt-service-page .nt-hero-slide.neo-hero.neo-service .nt-hero-slide-content {
        padding: 0px 32px !important;
    }

    /* Neo-brutalism: reduce border + shadow */
    .nt-service-page .nt-hero-slider {
        border-width: 2px !important;
        box-shadow: 4px 4px 0px 0px rgba(0,0,0,1) !important;
    }

    /* Section titles */
    .nt-service-page .sc-price-list .nt-section-title,
    .nt-service-page .sc-serial-check .nt-section-title {
        font-size: 28px !important;
    }

    /* Price list group headers */
    .nt-service-page .sp-group-header h3 {
        font-size: 15px !important;
    }

    /* Reduce neo-shadows on interactive elements */
    .nt-service-page .sp-fallback-btn {
        box-shadow: 2px 2px 0px 0px rgba(0,0,0,1) !important;
    }

    .nt-service-page .sc-serial-input-group {
        box-shadow: 3px 3px 0px 0px rgba(0,0,0,1) !important;
    }

    /* Filter bar: slightly reduced NB shadow at tablet */
    .sp-filter-bar {
        box-shadow: 3px 3px 0px 0px rgba(0,0,0,1) !important;
    }
}

/* ==========================================================================
   RESPONSIVE: 768px
   ========================================================================== */

@media (max-width: 768px) {
    /* Mini header */
    .sc-mini-header {
        flex-direction: column !important;
        gap: 14px !important;
        padding: 16px 0 12px !important;
    }

    .sc-mini-header h1 {
        font-size: 24px !important;
    }

    .sc-mini-subtitle {
        font-size: 13px !important;
    }

    .sc-mini-cta {
        width: 100% !important;
    }

    .sc-mini-btn {
        flex: 1 !important;
        justify-content: center !important;
        padding: 12px 18px !important;
        font-size: 13px !important;
        box-shadow: 3px 3px 0px 0px rgba(0,0,0,1) !important;
    }

    .sc-breadcrumbs {
        font-size: 12px !important;
        padding-top: 12px !important;
    }

    /* Hero */
    .sc-hero-visual {
        display: none !important;
    }

    .sc-hero-cta-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .sc-btn-primary,
    .sc-btn-secondary {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Price list */
    .sp-filter-bar {
        padding: 14px !important;
        position: sticky !important;
        top: 60px !important;
        z-index: 50 !important;
        box-shadow: 3px 3px 0px 0px rgba(0,0,0,1) !important;
    }

    .sp-filter-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .sp-filter-right {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .sp-row {
        grid-template-columns: 1fr auto auto !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        align-items: center !important;
    }

    .sp-row-name {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    .sp-row-brand {
        display: none !important;
    }

    .sp-row-price {
        text-align: right !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    .sp-row-action {
        width: auto !important;
    }

    .sp-request-btn {
        width: auto !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }

    /* Category pills — wrap + collapse */
    .sp-category-pills {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        padding-bottom: 4px !important;
    }

    .sp-pill-hidden {
        display: none !important;
    }

    .sp-pill-more {
        display: inline-flex !important;
    }

    .sp-category-pills.expanded .sp-pill-hidden {
        display: inline-flex !important;
    }

    .sp-category-pills.expanded .sp-pill-more {
        display: inline-flex !important;
        background: #0EA5E9 !important;
        color: #FFFFFF !important;
    }

    /* Fallback */
    .sp-fallback-cta {
        flex-direction: column !important;
        gap: 14px !important;
        text-align: center !important;
    }

    .sp-parts-catalog-link {
        flex-direction: column !important;
        text-align: center !important;
    }

    /* Serial check */
    .sc-serial-input-group {
        flex-direction: column !important;
        box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 1) !important;
    }

    .sc-serial-input-icon {
        left: 12px !important;
        width: 18px !important;
        height: 18px !important;
        top: 15px !important;
        transform: none !important;
    }

    .sc-serial-input {
        padding: 14px 14px 14px 40px !important;
    }

    .sc-serial-btn {
        border-left: none !important;
        border-top: 2px solid #000 !important;
    }

    .sc-serial-product {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .sc-serial-status-grid {
        grid-template-columns: 1fr !important;
    }

    .sc-serial-status-card {
        border-right: none !important;
        border-bottom: 1px solid #E6E6FF !important;
    }

    .sc-serial-status-card:last-child {
        border-bottom: none !important;
    }

    .sc-serial-cta {
        flex-direction: column !important;
        text-align: center !important;
    }

    /* Hero H1 */
    .nt-service-page .nt-hero-slide.neo-hero.neo-service h1 {
        font-size: 2.5rem !important;
        line-height: 1.05 !important;
    }

    /* Accent text */
    .nt-service-page .neo-service .neo-accent-text {
        font-size: 1.5rem !important;
        margin-bottom: 12px !important;
    }

    /* Subtitle */
    .nt-service-page .neo-service .nt-hero-subtitle {
        font-size: 1.05rem !important;
        line-height: 1.5 !important;
    }

    /* Hero content: wider text on mobile, less side padding */
    .nt-service-page .nt-hero-slide.neo-hero.neo-service .nt-hero-slide-content {
        padding: 24px 16px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* CTA buttons */
    .nt-service-page .neo-service .nt-hero-cta {
        padding: 12px 18px !important;
        font-size: 13px !important;
    }

    /* Price row font adjustments */
    .nt-service-page .sp-row-name {
        font-size: 14px !important;
    }

    .nt-service-page .sp-row-price {
        font-size: 16px !important;
    }

    /* Serial check: product name + status values */
    .nt-service-page .sc-serial-product-name {
        font-size: 16px !important;
    }

    .nt-service-page .sc-serial-status-value {
        font-size: 14px !important;
    }

    /* Section titles at 768px */
    .nt-service-page .sc-price-list .nt-section-title,
    .nt-service-page .sc-serial-check .nt-section-title {
        font-size: 24px !important;
    }

    /* SEO text h2 padding override */
    .nt-service-page .seo-section .seo-text h2 {
        padding: 12px 16px !important;
        margin-top: 28px !important;
    }

}

/* ==========================================================================
   RESPONSIVE: 600px — Mobile
   ========================================================================== */

@media (max-width: 600px) {
    /* Hero: auto height on mobile */
    .nt-service-page .nt-hero-slide.neo-hero.neo-service {
        height: auto !important;
        min-height: 340px !important;
        padding: 16px 0 !important;
    }

    /* H1 */
    .nt-service-page .nt-hero-slide.neo-hero.neo-service h1 {
        font-size: 28px !important;
        line-height: 1.1 !important;
    }

    /* Accent text */
    .nt-service-page .neo-service .neo-accent-text {
        font-size: 1.25rem !important;
    }

    /* Section titles */
    .nt-service-page .sc-price-list .nt-section-title,
    .nt-service-page .sc-serial-check .nt-section-title {
        font-size: 22px !important;
    }

    /* Price list: group header */
    .nt-service-page .sp-group-header {
        padding: 14px 16px !important;
    }

    .nt-service-page .sp-group-header h3 {
        font-size: 14px !important;
    }

    /* Price row: tighter padding + fonts */
    .nt-service-page .sp-row {
        padding: 12px 14px !important;
    }

    .nt-service-page .sp-row-name {
        font-size: 13px !important;
    }

    .nt-service-page .sp-row-brand {
        font-size: 11px !important;
    }

    .nt-service-page .sp-row-price {
        font-size: 15px !important;
    }

    /* Serial check subtitle */
    .nt-service-page .sc-serial-subtitle {
        font-size: 14px !important;
    }

    /* Fallback CTA */
    .nt-service-page .sp-fallback-cta {
        padding: 16px !important;
    }

    .nt-service-page .sp-fallback-btn {
        font-size: 13px !important;
        padding: 10px 20px !important;
    }

    /* Serial check not found */
    .nt-service-page .sc-serial-not-found h3 {
        font-size: 18px !important;
    }

    .nt-service-page .sc-serial-not-found p {
        font-size: 13px !important;
    }

    /* Parts catalog link */
    .nt-service-page .sp-parts-catalog-link {
        padding: 14px 16px !important;
    }

    .nt-service-page .sp-parts-catalog-link p {
        font-size: 13px !important;
    }
}

/* ==========================================================================
   RESPONSIVE: 480px — Small Mobile
   ========================================================================== */

@media (max-width: 480px) {
    .sc-mini-header h1 {
        font-size: 20px !important;
    }

    .sc-mini-cta {
        flex-direction: row !important;
    }

    .sc-mini-btn {
        padding: 10px 14px !important;
        font-size: 12px !important;
    }

    .sp-request-modal-inner {
        padding: 24px 16px !important;
    }

    /* Hero: auto height to fit content on small screens */
    .nt-service-page .nt-hero-slide.neo-hero.neo-service {
        height: auto !important;
        min-height: 300px !important;
        padding: 20px 0 !important;
    }

    .nt-service-page .nt-hero-slide.neo-hero.neo-service .nt-hero-slide-content {
        padding: 20px 12px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* H1: smallest */
    .nt-service-page .nt-hero-slide.neo-hero.neo-service h1 {
        font-size: 24px !important;
    }

    /* Accent */
    .nt-service-page .neo-service .neo-accent-text {
        font-size: 1.1rem !important;
    }

    /* Subtitle: smaller but readable */
    .nt-service-page .neo-service .nt-hero-subtitle {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    /* CTA buttons: compact but maintain min 44px touch target */
    .nt-service-page .neo-service .nt-hero-cta {
        padding: 12px 18px !important;
        font-size: 13px !important;
        min-height: 44px !important;
    }

    /* Filter bar: reduce NB shadow */
    .sp-filter-bar {
        box-shadow: 2px 2px 0px 0px rgba(0,0,0,1) !important;
        padding: 12px !important;
    }

    /* Search: tighter spacing */
    .sp-search {
        margin-bottom: 10px !important;
    }

    .sp-search input {
        padding: 10px 14px 10px 40px !important;
        font-size: 16px !important;
    }

    /* Filter right: stack vertically */
    .sp-filter-right {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    /* Category pills: smaller NB shadow */
    .nt-service-page .sp-cat-pill {
        font-size: 11px !important;
        padding: 5px 10px !important;
        box-shadow: 1px 1px 0px 0px rgba(0,0,0,1) !important;
    }

    .nt-service-page .sp-cat-pill.active {
        box-shadow: 1px 1px 0px 0px rgba(0,0,0,1) !important;
    }

    .nt-service-page .sp-cat-pill:hover {
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,1) !important;
        transform: translate(1px, 1px) !important;
    }

    /* Brand select: smaller NB shadow */
    .sp-filter-group select {
        box-shadow: 1px 1px 0px 0px rgba(0,0,0,1) !important;
    }

    /* Mini-header buttons: smaller NB shadow */
    .sc-mini-btn {
        box-shadow: 2px 2px 0px 0px rgba(0,0,0,1) !important;
    }

    /* Section titles */
    .nt-service-page .sc-price-list .nt-section-title,
    .nt-service-page .sc-serial-check .nt-section-title {
        font-size: 20px !important;
    }

    /* Serial input */
    .nt-service-page .sc-serial-input {
        font-size: 14px !important;
        padding: 14px 14px 14px 44px !important;
    }

    .nt-service-page .sc-serial-btn {
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    /* Serial hint */
    .nt-service-page .sc-serial-hint {
        margin-top: 30px !important;
        font-size: 11px !important;
    }
}