/* ОПТИКА — оформлення текстових сторінок westelecom.ua, редакція 2026.
   Назву дав Кирило 16.09.2026. Еталон, з якого знято значення, — /home/internet-test.

   Підключається ТІЛЬКИ там, де ми це явно ввімкнули (по слагу сторінки або у
   конкретній вьюсі), тому решта сайту лишається як була.

   Скоуп — клас .optyka на секції сторінки. Всередині прози заголовки менші,
   ніж на лендингах: H1 54, H2 36, H3 22. На лендингу секційний заголовок 46 —
   там він один на екран, а в статті такий розмір розриває текст. */

.optyka {
    --op-navy: #0B1F3A;
    --op-ink: #1E293B;
    --op-text: #475569;
    --op-muted: #64748B;
    --op-soft: #7C8CA3;
    --op-line: #E2E8F0;
    --op-ice: #F8FAFC;
    --op-card: #F1F5F9;
    --op-blue: #0A66B0;
    --op-blue-bg: #EAF7FE;
    --op-blue-line: #CDE9F8;
    --op-pink: #C4149B;
    --op-pink-bg: #FBD9F3;

    background: #FFFFFF !important;
    background-image: none !important;
    color: var(--op-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    padding: 56px 0 88px;
}

/* сторінка більше не на бузковому тлі */
body.optyka-page { background: #FFFFFF !important; }

.optyka > *,
.optyka .container,
.optyka .wrap { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }

.optyka h1, .optyka h2, .optyka h3, .optyka h4 {
    font-family: 'Onest', system-ui, sans-serif;
    color: var(--op-navy);
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.optyka h1 { font-size: 54px; line-height: 1.08; font-weight: 800; margin: 0 0 18px; }
.optyka h2 { font-size: 36px; line-height: 1.18; font-weight: 800; margin: 48px 0 14px; }
.optyka h3 { font-size: 22px; line-height: 1.3; font-weight: 700; margin: 32px 0 10px; }
.optyka h4 { font-size: 19px; font-weight: 700; margin: 24px 0 8px; }

.optyka p { margin: 0 0 16px; color: var(--op-text); }
.optyka b, .optyka strong { color: var(--op-navy); font-weight: 600; }
.optyka a { color: var(--op-blue); text-decoration: none; }
.optyka a:hover { text-decoration: underline; }

.optyka ul, .optyka ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.optyka ul li, .optyka ol li { position: relative; padding-left: 28px; margin: 0 0 10px; }
.optyka ul li::before {
    content: "\2713"; position: absolute; left: 0; top: 2px;
    width: 18px; height: 18px; border-radius: 5px;
    background: var(--op-pink-bg); color: var(--op-pink);
    font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.optyka ol { counter-reset: op; }
.optyka ol li::before {
    counter-increment: op; content: counter(op);
    position: absolute; left: 0; top: 0;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--op-blue-bg); border: 1px solid var(--op-blue-line);
    color: var(--op-blue); font-family: 'Onest', system-ui, sans-serif;
    font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}

.optyka img { max-width: 100%; height: auto; border-radius: 18px; display: block; }
.optyka figure { margin: 24px 0; }
.optyka figcaption { margin-top: 8px; font-size: 14px; color: var(--op-muted); }

.optyka blockquote, .optyka .note, .optyka .callout {
    background: var(--op-blue-bg); border: 1px solid var(--op-blue-line);
    border-radius: 18px; padding: 20px 22px; margin: 24px 0; color: var(--op-text);
}

.optyka table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.optyka table th, .optyka table td { padding: 14px 16px; border-bottom: 1px solid var(--op-line); text-align: left; }
.optyka table th {
    background: var(--op-ice); color: var(--op-muted);
    font-family: 'Onest', system-ui, sans-serif; font-size: 13px;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}

.optyka .btn, .optyka .button, .optyka a.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--op-pink); color: #FFFFFF !important; text-decoration: none;
    border: none; border-radius: 12px; padding: 13px 28px;
    font-family: 'Onest', system-ui, sans-serif; font-size: 17px; font-weight: 600;
    box-shadow: none;
}
.optyka .btn:hover { filter: brightness(1.05); text-decoration: none; }

/* плитки й картки всередині контенту — один вигляд */
.optyka .card, .optyka .box, .optyka .tile {
    background: #FFFFFF; border: 1px solid var(--op-line); border-radius: 18px;
    padding: 24px; box-shadow: none;
}

@media (max-width: 640px) {
    .optyka { padding: 32px 0 56px; font-size: 16px; }
    .optyka h1 { font-size: 34px; }
    .optyka h2 { font-size: 26px; }
    .optyka h3 { font-size: 20px; }
}


/* ==========================================================================
   Сторінки, які принесли власне оформлення у вмісті (класи .wl-*).
   ========================================================================== */
.optyka .wl-page {
    background: #FFFFFF !important; background-image: none !important;
    border-radius: 0 !important; width: auto !important;
    left: auto !important; transform: none !important;
    color: var(--op-text) !important; padding: 0 !important; margin: 0 auto !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
.optyka .wl-blobs, .optyka .wl-blob { display: none !important; }
.optyka .wl-in { max-width: 1120px !important; padding-inline: 24px !important; }

.optyka .wl-glass, .optyka .wl-c, .optyka .wl-stat, .optyka .wl-rev,
.optyka .wl-note, .optyka .wl-crit, .optyka .wl-price, .optyka .wl-q {
    background: #FFFFFF !important; background-image: none !important;
    border: 1px solid var(--op-line) !important; border-radius: 18px !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: none !important; color: var(--op-text) !important;
}
.optyka .wl-hero { padding-block: 56px !important; }
.optyka .wl-hero h1, .optyka .wl-sec h2, .optyka .wl-c h3, .optyka .wl-q strong {
    color: var(--op-navy) !important; font-family: 'Onest', system-ui, sans-serif !important;
    -webkit-text-fill-color: currentColor !important; background: none !important;
}
.optyka .wl-eyebrow { color: var(--op-pink) !important; letter-spacing: .08em !important; }
.optyka .wl-badge {
    background: var(--op-blue-bg) !important; border: 1px solid var(--op-blue-line) !important;
    color: var(--op-blue) !important; border-radius: 999px !important;
}
.optyka .wl-sub, .optyka .wl-lead, .optyka .wl-note { color: var(--op-text) !important; }
.optyka .wl-count, .optyka .wl-price { color: var(--op-navy) !important; }
.optyka .wl-yes { color: #067A45 !important; }
.optyka .wl-btn {
    background: var(--op-pink) !important; background-image: none !important;
    color: #FFFFFF !important; border: none !important; border-radius: 12px !important;
    box-shadow: none !important; font-family: 'Onest', system-ui, sans-serif !important;
    font-weight: 600 !important;
}
.optyka .wl-btn:nth-of-type(2), .optyka .wl-cta .wl-btn + .wl-btn {
    background: #FFFFFF !important; color: var(--op-navy) !important;
    border: 1px solid var(--op-pink) !important;
}


/* ==========================================================================
   Спільні блоки шаблону на сторінках «Оптики»: світле тло замість темного.
   ========================================================================== */
#referral-section, .ref-section {
    background: #F8FAFC !important; background-image: none !important;
    color: #475569 !important; border-top: 1px solid #E2E8F0;
}
#referral-section h2, #referral-section h3, .ref-section h2, .ref-section h3 { color: #0B1F3A !important; }
#referral-section p, .ref-section p, #referral-section li { color: #475569 !important; }
#referral-section .ref-card, #referral-section .ref-step, #referral-section .ref-box,
#referral-section [class*="card"] {
    background: #FFFFFF !important; background-image: none !important;
    border: 1px solid #E2E8F0 !important; border-radius: 18px !important;
    box-shadow: none !important; backdrop-filter: none !important;
}
#referral-section .ref-badge, #referral-section .ref-eyebrow,
#referral-section .ref-step-num, #referral-section .ref-num {
    background: #EAF7FE !important; border: 1px solid #CDE9F8 !important;
    color: #0A66B0 !important; background-image: none !important;
}
#referral-section .ref-btn, #referral-section button, #referral-section .btn {
    background: #C4149B !important; background-image: none !important;
    color: #FFFFFF !important; border: none !important; border-radius: 12px !important;
    box-shadow: none !important;
}
#referral-section input, #referral-section select {
    background: #FFFFFF !important; color: #1E293B !important;
    border: 1px solid #E2E8F0 !important; border-radius: 12px !important;
}
#referral-section b, #referral-section strong, #referral-section .ref-accent { color: #0A66B0 !important; }

/* текст блоку писався під темне тло — на світлому його треба перефарбувати весь */
#referral-section *:not(.ref-btn):not(button):not(.btn):not(svg):not(path):not(circle) {
    color: #475569 !important;
}
#referral-section h1, #referral-section h2, #referral-section h3, #referral-section h4,
#referral-section label, #referral-section .ref-title { color: #0B1F3A !important; }
#referral-section .ref-btn, #referral-section .ref-btn *,
#referral-section button, #referral-section button * { color: #FFFFFF !important; }
#referral-section .ref-step-num, #referral-section .ref-num,
#referral-section .ref-badge, #referral-section .ref-eyebrow { color: #0A66B0 !important; }
#referral-section hr, #referral-section .ref-divider { border-color: #E2E8F0 !important; background: #E2E8F0 !important; }

/* липка кнопка перевірки адреси: рожевий = «можна натиснути» */
.cw-fab { background: #C4149B !important; background-image: none !important;
    box-shadow: none !important; border-radius: 999px !important; color: #FFFFFF !important; }
/* помаранчеві залишки старої палітри в спільному блоці */
#referral-section [style*="#f59e0b"], #referral-section [style*="#f97316"],
#referral-section .ref-progress, #referral-section .ref-progress-bar,
#referral-section hr { background: #E2E8F0 !important; border-color: #E2E8F0 !important; }


/* ==========================================================================
   Коли клас .optyka стоїть на <body> (сторінки зі своїми вьюхами), правила
   вище діють на всю сторінку. Тут знімаю те, що має лишатись у шаблоні:
   ширину шапки й підвалу та власні відступи body.
   ========================================================================== */
body.optyka { padding: 0 !important; background: #FFFFFF !important; }
body.optyka > * { max-width: none !important; padding-inline: 0 !important; margin-inline: 0 !important; }
body.optyka header, body.optyka footer, body.optyka .ft26, body.optyka .hdr26 { font-size: initial; }
body.optyka footer *, body.optyka header * { border-radius: unset; }
body.optyka .ft26 a, body.optyka .hdr26 a { text-decoration: none; }


/* ---- захист шапки, підвалу і навігації від оформлення прози -------------- */
body.optyka header ul li::before, body.optyka footer ul li::before,
body.optyka nav ul li::before, body.optyka .ft26 li::before,
body.optyka .hdr26 li::before, body.optyka .cw-fab li::before,
body.optyka #referral-section ul li::before, body.optyka .breadcrumb li::before {
    content: none !important; display: none !important;
}
body.optyka header li, body.optyka footer li, body.optyka nav li,
body.optyka .ft26 li, body.optyka .hdr26 li, body.optyka .breadcrumb li {
    padding-left: 0 !important; margin-bottom: revert !important;
}
body.optyka header ul, body.optyka footer ul, body.optyka nav ul,
body.optyka .ft26 ul, body.optyka .hdr26 ul { margin: revert; }
body.optyka header a, body.optyka footer a, body.optyka .ft26 a { color: inherit; }
body.optyka header img, body.optyka footer img, body.optyka .ft26 img { border-radius: 0 !important; }

body.optyka .breadcrumbs-list li::before, body.optyka .breadcrumbs-nav li::before,
body.optyka [class*="breadcrumb"] li::before, body.optyka .pagination li::before,
body.optyka .tabs li::before, body.optyka .menu li::before, body.optyka .nav li::before {
    content: none !important; display: none !important;
}
body.optyka .breadcrumbs-list li, body.optyka [class*="breadcrumb"] li,
body.optyka .pagination li, body.optyka .tabs li, body.optyka .menu li, body.optyka .nav li {
    padding-left: 0 !important;
}


/* ==========================================================================
   /vidguky-kompanij — рекомендаційні листи (класи cert-*).
   ========================================================================== */
body.optyka .cert-hero, body.optyka .cert-kszi, body.optyka .cert-final-cta {
    background: #F8FAFC !important; background-image: none !important;
    color: #475569 !important; border-top: 1px solid #E2E8F0;
}
body.optyka .cert-hero h1, body.optyka .cert-hero h2,
body.optyka .cert-kszi h2, body.optyka .cert-kszi h3,
body.optyka .cert-final-cta h2 {
    color: #0B1F3A !important; -webkit-text-fill-color: currentColor !important;
    background: none !important;
}
body.optyka .cert-hero p, body.optyka .cert-kszi p, body.optyka .cert-final-cta p,
body.optyka .cert-hero li, body.optyka .cert-kszi li { color: #475569 !important; }
body.optyka .cert-hero *:not(.btn):not(button):not(svg):not(path),
body.optyka .cert-kszi *:not(.btn):not(button):not(svg):not(path) { color: #475569 !important; }
body.optyka .cert-hero h1, body.optyka .cert-hero .cert-hero-num,
body.optyka .cert-kszi h2, body.optyka .cert-kszi h3 { color: #0B1F3A !important; }
body.optyka .cert-hero .btn, body.optyka .cert-final-cta .btn,
body.optyka .cert-kszi .btn, body.optyka .cert-sticky .btn {
    background: #C4149B !important; background-image: none !important;
    color: #FFFFFF !important; border: none !important; border-radius: 12px !important;
    box-shadow: none !important;
}
body.optyka .cert-sticky {
    background: #FFFFFF !important; background-image: none !important;
    border-top: 1px solid #E2E8F0 !important; color: #475569 !important;
    box-shadow: none !important;
}
body.optyka .cert-sticky * { color: #475569 !important; }
body.optyka .cert-sticky .btn, body.optyka .cert-sticky .btn * { color: #FFFFFF !important; }
body.optyka .cert-category-cta {
    background: #EAF7FE !important; background-image: none !important;
    border: 1px solid #CDE9F8 !important; border-radius: 18px !important;
}
body.optyka .ref-glow, body.optyka .cw-bg { display: none !important; }


/* ==========================================================================
   /speedtest — перевірка швидкості.
   ========================================================================== */
body.optyka .speedtest-page, body.optyka .coverage-section {
    background: #FFFFFF !important; background-image: none !important;
    color: #475569 !important;
}
body.optyka .speedtest-page h1, body.optyka .speedtest-page h2,
body.optyka .speedtest-page h3, body.optyka .coverage-section h2 {
    color: #0B1F3A !important; -webkit-text-fill-color: currentColor !important;
    background: none !important;
}
body.optyka .speedtest-page p, body.optyka .coverage-section p,
body.optyka .speedtest-page li { color: #475569 !important; }
/* помаранчеві заклики — у дію бренду */
body.optyka .speedtest-cta, body.optyka .big-cta-box {
    background: #EAF7FE !important; background-image: none !important;
    border: 1px solid #CDE9F8 !important; border-radius: 18px !important;
    color: #475569 !important;
}
body.optyka .speedtest-cta h2, body.optyka .speedtest-cta h3,
body.optyka .big-cta-box h2, body.optyka .big-cta-box h3,
body.optyka .speedtest-cta *, body.optyka .big-cta-box * { color: #0B1F3A !important; }
body.optyka .speedtest-cta .btn, body.optyka .big-cta-box .btn,
body.optyka .speedtest-cta a.btn, body.optyka .big-cta-box a.btn,
body.optyka .speedtest-cta button, body.optyka .big-cta-box button {
    background: #C4149B !important; background-image: none !important;
    color: #FFFFFF !important; border: none !important; border-radius: 12px !important;
    box-shadow: none !important;
}
body.optyka .speedtest-cta .btn *, body.optyka .big-cta-box .btn * { color: #FFFFFF !important; }
body.optyka .faq-section { background: #F8FAFC !important; background-image: none !important; }
body.optyka .seo-section { background: #FFFFFF !important; background-image: none !important; }
body.optyka .cw-banner {
    background: #EAF7FE !important; border: 1px solid #CDE9F8 !important;
    border-radius: 18px !important; color: #475569 !important;
}
body.optyka .cw-banner * { color: #475569 !important; }
body.optyka .cw-banner .btn, body.optyka .cw-banner button {
    background: #C4149B !important; color: #FFFFFF !important; border-radius: 12px !important;
}


/* ==========================================================================
   /pages/dokumenty — сертифікати й ліцензії (класи docs-*).
   ========================================================================== */
body.optyka .docs-hero, body.optyka .docs-audit, body.optyka .docs-seo-cta-box,
body.optyka .docs-cta-section, body.optyka .docs-final-cta {
    background: #FFFFFF !important; background-image: none !important;
    border: 1px solid #E2E8F0 !important; border-radius: 18px !important;
    color: #475569 !important; box-shadow: none !important;
}
body.optyka .docs-hero { border: none !important; border-radius: 0 !important;
    background: #F8FAFC !important; border-bottom: 1px solid #E2E8F0 !important; }
body.optyka .docs-cta-section, body.optyka .docs-final-cta {
    background: #EAF7FE !important; border-color: #CDE9F8 !important;
}
body.optyka .docs-hero *:not(.btn):not(button):not(svg):not(path),
body.optyka .docs-audit *:not(.btn):not(button):not(svg):not(path),
body.optyka .docs-seo-cta-box *:not(.btn):not(button):not(svg):not(path),
body.optyka .docs-cta-section *:not(.btn):not(button):not(svg):not(path),
body.optyka .docs-final-cta *:not(.btn):not(button):not(svg):not(path) {
    color: #475569 !important; -webkit-text-fill-color: currentColor !important;
}
body.optyka .docs-hero h1, body.optyka .docs-hero h2, body.optyka .docs-audit h2,
body.optyka .docs-audit h3, body.optyka .docs-seo-cta-box h2,
body.optyka .docs-cta-section h2, body.optyka .docs-final-cta h2,
body.optyka .docs-final-cta h3 { color: #0B1F3A !important; background: none !important; }
body.optyka .docs-hero .btn, body.optyka .docs-audit .btn, body.optyka .docs-cta-section .btn,
body.optyka .docs-final-cta .btn, body.optyka .docs-seo-cta-box .btn,
body.optyka .docs-hero a.btn, body.optyka .docs-final-cta a.btn,
body.optyka .docs-cta-section a.btn, body.optyka .docs-seo-cta-box a.btn {
    background: #C4149B !important; background-image: none !important;
    color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
    border: none !important; border-radius: 12px !important; box-shadow: none !important;
}
body.optyka .docs-hero .btn *, body.optyka .docs-final-cta .btn *,
body.optyka .docs-cta-section .btn * { color: #FFFFFF !important; }
body.optyka .docs-seo { background: #FFFFFF !important; background-image: none !important; }

/* вага: подвоєний id б'є широке правило з :not() вище */
#referral-section#referral-section h2, #referral-section#referral-section h3,
#referral-section#referral-section label { color: #0B1F3A !important; }
#referral-section#referral-section .ref-btn,
#referral-section#referral-section button { color: #FFFFFF !important; }