.bariatr-bmi-page {
--bg: #f1f5fb;
--card: #ffffff;
--text: #244966;
--muted: #5f7f98;
--accent: #1ea95f;
--soft: #e9faef;
--danger: #c62d27;
--blue: #00adff;
--blue-soft: #7bd4ff;
--gray: #d1d1d4;
--yellow: #f5e23a;
--white: #ffffff;
--shadow-lg: 0 18px 40px rgba(67, 67, 67, 0.12);
--shadow-md: 0 10px 24px rgba(67, 67, 67, 0.1);
--r-xl: 30px;
--r-lg: 20px;
--r-md: 14px;
--container: 1240px;
color: var(--text);
font-family: Montserrat, Inter, "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.bariatr-bmi-page * {
box-sizing: border-box;
}
.bariatr-bmi-page button,
.bariatr-bmi-page input {
font: inherit;
}
.bariatr-bmi-page.page {
width: min(100% - 32px, var(--container));
margin: 24px auto;
display: grid;
gap: 50px;
}
.bariatr-bmi-page .section {
background: var(--white);
border-radius: var(--r-xl);
padding: 36px;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
html.anim-ready .bariatr-bmi-page .section {
opacity: 0;
transform: translateY(22px);
transition:
opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.anim-ready .bariatr-bmi-page .section.is-visible {
opacity: 1;
transform: translateY(0);
}
html.anim-ready .bariatr-bmi-page .section .reveal-item {
opacity: 0;
transform: translateY(12px);
transition:
opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
}
html.anim-ready .bariatr-bmi-page .section.is-visible .reveal-item {
opacity: 1;
transform: translateY(0);
}
.bariatr-bmi-page .section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 240px;
height: 6px;
border-radius: 0 0 8px 0;
background: linear-gradient(90deg, var(--blue), var(--yellow));
}
.bariatr-bmi-page .kicker {
margin: 0 0 8px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 12px;
font-weight: 700;
color: #648091;
}
.bariatr-bmi-page .title {
margin: 0;
text-align: center;
font-size: 44px;
line-height: 1.15;
font-weight: 800;
letter-spacing: 0;
color: #273f4f;
}
.bariatr-bmi-page .subtitle {
margin: 14px auto 0;
max-width: 940px;
text-align: center;
font-size: 16px;
line-height: 1.66;
color: #566068;
}
.bariatr-bmi-page .text-highlight {
background: var(--yellow);
color: #111111;
font-weight: 700;
padding: 0 5px;
}
.bariatr-bmi-page .about-text a,
.bariatr-bmi-page .card a,
.bariatr-bmi-page .bmi-copy-list a {
color: #007fbd;
font-weight: 800;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.bariatr-bmi-page .about-text a:hover,
.bariatr-bmi-page .about-text a:focus,
.bariatr-bmi-page .card a:hover,
.bariatr-bmi-page .card a:focus,
.bariatr-bmi-page .bmi-copy-list a:hover,
.bariatr-bmi-page .bmi-copy-list a:focus {
color: #005f8e;
}
.bariatr-bmi-page .about-block {
display: grid;
gap: 0;
align-items: center;
}
.bariatr-bmi-page .about-title {
margin: 0 0 20px;
font-size: 33px;
line-height: 1.05;
letter-spacing: 0;
font-weight: 800;
color: #273f4f;
}
.bariatr-bmi-page .about-text {
margin: 0;
font-size: 16px;
line-height: 1.75;
color: #4f5b64;
}
.bariatr-bmi-page .about-text + .about-text {
margin-top: 0;
}
.bariatr-bmi-page .about-grid {
margin-top: 22px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.bariatr-bmi-page .card {
background: #f8fcff;
border-radius: var(--r-lg);
padding: 24px;
box-shadow: var(--shadow-md);
}
.bariatr-bmi-page .card p {
margin: 0;
font-size: 16px;
line-height: 1.72;
color: #4f5d67;
}
.bariatr-bmi-page .card p + p {
margin-top: 0;
}
.bariatr-bmi-page .card p + .bmi-copy-list {
margin-top: 0;
}
.bariatr-bmi-page .bmi-copy-list {
margin: 12px 0 0;
padding-left: 22px;
color: #4f5d67;
font-size: 16px;
line-height: 1.72;
}
.bariatr-bmi-page .bmi-copy-list:first-child {
margin-top: 0;
}
.bariatr-bmi-page .bmi-copy-list li + li {
margin-top: 4px;
}
.bariatr-bmi-page .approach {
margin-top: 22px;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 18px;
align-items: stretch;
}
.bariatr-bmi-page .approach-copy {
background: linear-gradient(125deg, #eff9ff 0%, #ffffff 66%);
display: flex;
flex-direction: column;
justify-content: center;
}
.bariatr-bmi-page .approach-copy h3 {
margin: 0 0 12px;
font-size: 34px;
line-height: 1.1;
font-weight: 700;
color: #345465;
}
.bariatr-bmi-page .approach-copy p {
margin: 0;
font-size: 16px;
line-height: 1.67;
color: #4f5f69;
}
.bariatr-bmi-page .approach-visual {
min-height: 230px;
padding: 0;
overflow: hidden;
background: #e7eef3;
}
.bariatr-bmi-page .approach-visual img {
width: 100%;
height: 300px;
object-fit: cover;
object-position: center;
display: block;
}
.bariatr-bmi-page .adv-card {
background: #fff;
border-radius: var(--r-md);
box-shadow: var(--shadow-md);
min-height: 170px;
padding: 20px;
position: relative;
overflow: hidden;
}
.bariatr-bmi-page .adv-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--blue), var(--blue-soft));
}
.bariatr-bmi-page .adv-card h3 {
margin: 10px 0 10px;
font-size: 24px;
line-height: 1.15;
color: #365265;
font-weight: 700;
}
.bariatr-bmi-page .adv-card p {
margin: 0;
font-size: 15px;
line-height: 1.58;
color: #51606a;
}
.bariatr-bmi-page .bmi-table-grid {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
}
.bariatr-bmi-page .bmi-table-grid .adv-card {
--category-line: linear-gradient(90deg, var(--blue), var(--blue-soft));
border: 1px solid rgba(0, 173, 255, 0.12);
border-radius: 12px;
box-shadow: 0 8px 22px rgba(67, 67, 67, 0.07);
min-height: 0;
padding: 14px 14px 16px;
}
.bariatr-bmi-page .bmi-table-grid .adv-card::before {
background: var(--category-line);
height: 5px;
}
.bariatr-bmi-page .bmi-table-grid .adv-card:nth-child(1) {
--category-line: linear-gradient(90deg, #f5e23a, #d9a928);
}
.bariatr-bmi-page .bmi-table-grid .adv-card:nth-child(2) {
--category-line: linear-gradient(90deg, #35b96f, #8bd36f);
}
.bariatr-bmi-page .bmi-table-grid .adv-card:nth-child(3) {
--category-line: linear-gradient(90deg, #f5e23a, #e28c31);
}
.bariatr-bmi-page .bmi-table-grid .adv-card:nth-child(4) {
--category-line: linear-gradient(90deg, #f0a13f, #dd5a56);
}
.bariatr-bmi-page .bmi-table-grid .adv-card:nth-child(5) {
--category-line: linear-gradient(90deg, #dd5a56, #c62d27);
}
.bariatr-bmi-page .bmi-table-grid .adv-card:nth-child(6) {
--category-line: linear-gradient(90deg, #c62d27, #7f1712);
}
.bariatr-bmi-page .bmi-table-grid .adv-card h3 {
font-size: 20px;
line-height: 1.1;
margin: 6px 0 4px;
}
.bariatr-bmi-page .bmi-table-grid .adv-card p {
font-size: 14px;
line-height: 1.4;
}
.bariatr-bmi-page .bmi-table-grid + .about-block {
margin-top: 22px;
}
.bariatr-bmi-page .bmi-inline-visual {
margin: 24px 0 0;
border-radius: var(--r-lg);
background: #e8f8ff;
box-shadow: var(--shadow-md);
overflow: hidden;
}
.bariatr-bmi-page .bmi-inline-visual img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.bariatr-bmi-page .ops-grid {
margin-top: 22px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
gap: 20px;
}
.bariatr-bmi-page .ops-photo {
min-height: 340px;
padding: 0;
overflow: hidden;
background: #e7eef3;
}
.bariatr-bmi-page .ops-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.bariatr-bmi-page .ops-text {
font-size: 16px;
line-height: 1.72;
color: #4f5f67;
display: flex;
flex-direction: column;
justify-content: center;
}
.bariatr-bmi-page .ops-text-content {
margin: 0;
}
.bariatr-bmi-page .price {
margin-top: 22px;
border-radius: var(--r-lg);
background: linear-gradient(120deg, rgba(245, 226, 58, 0.58), rgba(255, 255, 255, 0.88));
box-shadow: var(--shadow-md);
padding: 28px;
font-size: 17px;
line-height: 1.7;
display: grid;
grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
gap: 28px;
align-items: center;
text-align: left;
color: #4e4e4e;
}
.bariatr-bmi-page .price-photo {
margin: 0;
border-radius: var(--r-md);
background: #ffffff;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.bariatr-bmi-page .price-photo img {
display: block;
width: 100%;
height: 360px;
object-fit: cover;
object-position: 50% 18%;
}
.bariatr-bmi-page .price-content {
min-width: 0;
}
.bariatr-bmi-page .price-copy {
margin: 0;
}
.bariatr-bmi-page .price-copy + .price-copy {
margin-top: 0;
}
.bariatr-bmi-page .price-btn {
margin-top: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 22px;
border: 0;
border-radius: 999px;
background: var(--blue);
color: #ffffff;
text-decoration: none;
font-size: 15px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
box-shadow: 0 8px 18px rgba(0, 173, 255, 0.25);
}
.bariatr-bmi-page .price-btn:hover,
.bariatr-bmi-page .price-btn:focus {
background: #0098e1;
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(0, 173, 255, 0.28);
}
.bariatr-bmi-page .price-btn:disabled {
cursor: not-allowed;
opacity: 0.65;
transform: none;
}
.bariatr-bmi-page .bmi-faq {
display: grid;
gap: 14px;
margin-top: 24px;
}
.bariatr-bmi-page .bmi-faq summary {
cursor: pointer;
font-size: 18px;
font-weight: 700;
color: #365265;
}
.bariatr-bmi-page .bmi-faq p {
margin-top: 12px;
}
.bariatr-bmi-page .bmi-calculator-section {
background:
radial-gradient(circle at 10% 0%, rgba(0, 173, 255, 0.16), transparent 28rem),
linear-gradient(180deg, #f8fcff 0%, var(--bg) 100%);
}
.bariatr-bmi-page .bmi-card {
background: var(--card);
border-radius: 20px;
box-shadow: 0 18px 44px rgba(33, 103, 156, 0.14), inset 0 0 0 1px rgba(0, 173, 255, 0.1);
max-width: none;
padding: 22px;
width: 100%;
margin: 0 auto;
}
.bariatr-bmi-page .header {
margin-bottom: 14px;
}
.bariatr-bmi-page .eyebrow {
color: #3579aa;
display: block;
font-size: 12px;
font-weight: 800;
letter-spacing: 0;
margin-bottom: 6px;
text-transform: uppercase;
}
.bariatr-bmi-page .header h1 {
font-size: 32px;
line-height: 1.14;
margin: 0;
color: var(--text);
font-weight: 800;
}
.bariatr-bmi-page .result-meter {
--shift: 0.36;
--ink: #11673b;
color: var(--ink);
height: 118px;
margin-bottom: 14px;
position: relative;
}
.bariatr-bmi-page .status {
font-size: 13px;
font-weight: 900;
left: 50%;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 0;
transform: translateX(-50%);
white-space: nowrap;
}
.bariatr-bmi-page .meter-window {
background: linear-gradient(180deg, #fffdfa 0%, #f7f7f4 100%);
border-radius: 12px;
box-shadow:
0 8px 18px rgba(58, 46, 13, 0.12),
inset 0 0 0 1px rgba(93, 73, 22, 0.24),
inset 0 0 0 4px rgba(255, 245, 205, 0.56);
height: 54px;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 32px;
}
.bariatr-bmi-page .meter-tape {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 58%),
linear-gradient(180deg, transparent 0 56%, rgba(246, 195, 13, 0.96) 56% 100%),
linear-gradient(90deg, #d0a208 0%, #ccb11d 24%, #8dc349 31.159%, #1ea95f 40.58%, #8fa341 46%, #c99600 50%, #d07d3a 54%, #dd5a56 59.42%, #cc423d 64.5%, #c62d27 68.841%, #a1211d 74.5%, #8f1713 100%);
bottom: 0;
left: calc(var(--shift) * -130%);
position: absolute;
top: 0;
transition: left 260ms ease;
width: 230%;
}
.bariatr-bmi-page .meter-tape::before,
.bariatr-bmi-page .meter-tape::after {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
}
.bariatr-bmi-page .meter-tape::before {
background: repeating-linear-gradient(90deg, rgba(35, 25, 9, 0.55) 0 1px, transparent 1px 8px);
height: 52%;
}
.bariatr-bmi-page .meter-tape::after {
background: repeating-linear-gradient(90deg, rgba(22, 15, 7, 0.86) 0 2px, transparent 2px 40px);
height: 82%;
}
.bariatr-bmi-page .meter-pointer {
background: var(--ink);
border-radius: 999px;
box-shadow: 0 0 0 1px #fff, 0 4px 10px rgba(0, 0, 0, 0.24);
height: 74px;
left: 50%;
position: absolute;
top: 22px;
transform: translateX(-50%);
width: 3px;
z-index: 2;
}
.bariatr-bmi-page .bmi-value {
align-items: center;
background: rgba(255, 255, 255, 0.88);
border-radius: 999px;
box-shadow: inset 0 0 0 1px currentColor, 0 6px 14px rgba(12, 33, 53, 0.18);
display: flex;
font-size: 50px;
font-weight: 900;
justify-content: center;
left: 50%;
line-height: 1;
min-width: 152px;
padding: 8px 22px;
position: absolute;
top: 58px;
transform: translate(-50%, -50%);
z-index: 3;
}
.bariatr-bmi-page .controls {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bariatr-bmi-page .control {
background: #fff;
border: 1px solid #e0f2ff;
border-radius: 20px;
box-shadow: 0 16px 34px rgba(0, 173, 255, 0.08);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px 18px;
padding: 16px 22px 18px;
position: relative;
align-items: center;
}
.bariatr-bmi-page .control span {
color: var(--muted);
font-size: 14px;
font-weight: 800;
}
.bariatr-bmi-page .control strong {
color: #2f6f9d;
font-size: 22px;
}
.bariatr-bmi-page .screen-reader-text,
.bariatr-bmi-page .bmi-native-input[type="number"] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
opacity: 0;
pointer-events: none;
}
.bariatr-bmi-page .wheel-control .screen-reader-text {
position: static !important;
display: block;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
white-space: normal !important;
border: 0 !important;
opacity: 1;
pointer-events: auto;
color: #2f78ad;
font-size: 32px;
font-weight: 900;
line-height: 1;
text-align: right;
}
.bariatr-bmi-page .wheel-control--weight .screen-reader-text {
color: #a82b2e;
}
.bariatr-bmi-page .wheel-control {
align-content: start;
}
.bariatr-bmi-page .wheel-control .wheel-title {
color: #4c86b8;
display: block;
font-size: 24px;
font-weight: 800;
line-height: 1.2;
text-align: left;
}
.bariatr-bmi-page .wheel-window {
--wheel-row-height: 78px;
display: none;
height: calc(var(--wheel-row-height) * 5);
border: 2px solid #e0f2ff;
border-radius: 22px;
background: #ffffff;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding-block: 0;
scroll-padding-block: 0;
scroll-snap-type: y mandatory;
box-shadow: inset 0 0 0 1px rgba(0, 173, 255, 0.03);
scrollbar-color: #9edcff #eef9ff;
scrollbar-width: thin;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}
.bariatr-bmi-page .wheel-window::-webkit-scrollbar {
width: 8px;
}
.bariatr-bmi-page .wheel-window::-webkit-scrollbar-track {
background: #eef9ff;
border-radius: 999px;
}
.bariatr-bmi-page .wheel-window::-webkit-scrollbar-thumb {
background: #9edcff;
border-radius: 999px;
}
.bariatr-bmi-page .wheel-window::-webkit-scrollbar-thumb:hover {
background: #6bcfff;
}
.bariatr-bmi-page .wheel-spacer {
height: calc(var(--wheel-row-height) * 2);
pointer-events: none;
}
.bariatr-bmi-page .wheel-value {
display: grid;
place-items: center;
width: 100%;
min-height: var(--wheel-row-height);
border: 0;
background: transparent;
color: #8ab3d6;
cursor: pointer;
font-size: 42px;
font-weight: 400;
line-height: 1;
padding: 0 12px;
scroll-snap-align: center;
transition: color 0.18s ease, font-weight 0.18s ease, transform 0.18s ease;
}
.bariatr-bmi-page .wheel-control--weight .wheel-value {
color: #e57979;
}
.bariatr-bmi-page .wheel-value:hover,
.bariatr-bmi-page .wheel-value:focus {
outline: none;
color: #2f78ad;
transform: scale(1.02);
}
.bariatr-bmi-page .wheel-control--weight .wheel-value:hover,
.bariatr-bmi-page .wheel-control--weight .wheel-value:focus {
color: #b52f32;
}
.bariatr-bmi-page .wheel-value.is-selected {
color: #2f78ad;
font-size: 43px;
font-weight: 900;
}
.bariatr-bmi-page .wheel-control--weight .wheel-value.is-selected {
color: #a82b2e;
}
.bariatr-bmi-page input[type="range"] {
--track: rgba(0, 173, 255, 0.24);
--thumb-ring: rgba(0, 173, 255, 0.36);
--thumb-shadow: rgba(0, 173, 255, 0.18);
appearance: none;
background: transparent;
cursor: pointer;
grid-column: 1 / -1;
height: 28px;
width: 100%;
}
.bariatr-bmi-page .wheel-control--weight input[type="range"] {
--track: rgba(211, 66, 61, 0.22);
--thumb-ring: rgba(211, 66, 61, 0.34);
--thumb-shadow: rgba(211, 66, 61, 0.16);
}
.bariatr-bmi-page input[type="range"]::-webkit-slider-runnable-track {
background: var(--track);
border-radius: 999px;
height: 10px;
}
.bariatr-bmi-page input[type="range"]::-webkit-slider-thumb {
appearance: none;
background: #fff;
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--thumb-ring), 0 8px 20px var(--thumb-shadow);
height: 24px;
margin-top: -7px;
width: 24px;
}
.bariatr-bmi-page input[type="range"]::-moz-range-track {
background: var(--track);
border: 0;
border-radius: 999px;
height: 10px;
}
.bariatr-bmi-page input[type="range"]::-moz-range-thumb {
background: #fff;
border: 0;
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--thumb-ring), 0 8px 20px var(--thumb-shadow);
height: 24px;
width: 24px;
}
.bariatr-bmi-page input[type="number"] {
border: 0;
border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(0, 173, 255, 0.18);
color: #2f6f9d;
font-weight: 800;
padding: 10px 12px;
width: 100%;
}
.bariatr-bmi-page input[type="number"]:focus {
box-shadow: inset 0 0 0 1px rgba(0, 173, 255, 0.35), 0 0 0 3px rgba(0, 173, 255, 0.18);
outline: none;
}
.bariatr-bmi-page .advice {
background: var(--soft);
border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(0, 173, 255, 0.1);
margin-top: 16px;
padding: 16px;
}
.bariatr-bmi-page .advice h2 {
color: var(--accent);
font-size: 13px;
font-weight: 900;
letter-spacing: 0;
margin: 0 0 8px;
text-transform: uppercase;
}
.bariatr-bmi-page .advice p {
color: #315f7f;
font-size: 15px;
line-height: 1.55;
margin: 0;
}
.bariatr-bmi-page .advice ul {
color: #315f7f;
font-size: 14px;
line-height: 1.5;
margin: 12px 0 0;
padding-left: 20px;
}
.bariatr-bmi-page .advice li + li {
margin-top: 6px;
}
.bariatr-bmi-page .bmi-result-action {
align-items: center;
background:
linear-gradient(90deg, rgba(0, 173, 255, 0.12), rgba(245, 226, 58, 0.18)),
#ffffff;
border: 1px solid rgba(0, 173, 255, 0.18);
border-radius: 18px;
box-shadow: 0 14px 34px rgba(33, 103, 156, 0.12);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
margin-top: 16px;
overflow: hidden;
padding: 18px 20px;
position: relative;
text-align: left;
}
.bariatr-bmi-page .bmi-result-action::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 6px;
background: linear-gradient(180deg, var(--blue), var(--yellow));
}
.bariatr-bmi-page .bmi-result-action[hidden] {
display: none;
}
.bariatr-bmi-page .bmi-result-action .price-btn {
margin: 0;
min-width: 230px;
order: 2;
padding: 15px 24px;
}
.bariatr-bmi-page .bmi-result-action p {
color: #435566;
font-size: 15px;
line-height: 1.55;
margin: 0;
order: 1;
padding-left: 14px;
}
.bariatr-bmi-page .bmi-result-action p::before {
color: #273f4f;
content: "Рекомендована консультація";
display: block;
font-size: 18px;
font-weight: 800;
line-height: 1.25;
margin-bottom: 4px;
}
body.bariatr-bmi-modal-open {
overflow: hidden;
}
.bariatr-bmi-page .bmi-modal {
position: fixed;
z-index: 99999;
inset: 0;
display: grid;
place-items: center;
padding: 20px;
}
.bariatr-bmi-page .bmi-modal[hidden] {
display: none;
}
.bariatr-bmi-page .bmi-modal-overlay {
position: absolute;
inset: 0;
background: rgba(15, 35, 48, 0.64);
backdrop-filter: blur(5px);
}
.bariatr-bmi-page .bmi-modal-panel {
position: relative;
z-index: 1;
width: min(100%, 560px);
max-height: calc(100vh - 40px);
overflow: auto;
border: 1px solid rgba(0, 173, 255, 0.16);
border-radius: 24px;
background:
linear-gradient(145deg, rgba(239, 249, 255, 0.95), rgba(255, 255, 255, 0.98) 52%, rgba(255, 251, 219, 0.66)),
#ffffff;
box-shadow: 0 28px 70px rgba(15, 35, 48, 0.34);
padding: 34px;
}
.bariatr-bmi-page .bmi-modal-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--blue), var(--yellow));
}
.bariatr-bmi-page .bmi-modal-panel .kicker,
.bariatr-bmi-page .bmi-modal-panel .title,
.bariatr-bmi-page .bmi-modal-panel .subtitle {
text-align: left;
}
.bariatr-bmi-page .bmi-modal-panel .title {
font-size: 32px;
line-height: 1.12;
padding-right: 44px;
}
.bariatr-bmi-page .bmi-modal-panel .subtitle {
margin-left: 0;
margin-right: 0;
max-width: 460px;
}
.bariatr-bmi-page .bmi-modal-close {
position: absolute;
top: 14px;
right: 14px;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: #ffffff;
color: #273f4f;
cursor: pointer;
font-size: 28px;
line-height: 1;
box-shadow: 0 8px 22px rgba(33, 103, 156, 0.12);
transition: transform 0.18s ease, background-color 0.18s ease;
}
.bariatr-bmi-page .bmi-modal-close:hover,
.bariatr-bmi-page .bmi-modal-close:focus {
background: #eaf8ff;
transform: translateY(-1px);
}
.bariatr-bmi-page .bmi-popup-form {
display: grid;
gap: 14px;
margin-top: 24px;
}
.bariatr-bmi-page .bmi-popup-form label {
display: grid;
gap: 8px;
color: #273f4f;
font-size: 14px;
font-weight: 800;
}
.bariatr-bmi-page .bmi-popup-form input {
width: 100%;
border: 1px solid rgba(0, 173, 255, 0.22);
border-radius: 14px;
background: rgba(255, 255, 255, 0.92);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 10px 22px rgba(33, 103, 156, 0.08);
color: #273f4f;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
padding: 14px 16px;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.bariatr-bmi-page .bmi-popup-form input:focus {
background: #ffffff;
border-color: rgba(0, 173, 255, 0.55);
box-shadow: 0 0 0 4px rgba(0, 173, 255, 0.14), 0 12px 24px rgba(33, 103, 156, 0.1);
outline: none;
}
.bariatr-bmi-page .bmi-popup-status {
background: rgba(255, 255, 255, 0.66);
border-radius: 12px;
margin: 0;
color: #566068;
font-size: 14px;
line-height: 1.45;
padding: 0;
}
.bariatr-bmi-page .bmi-popup-status:empty {
display: none;
}
.bariatr-bmi-page .bmi-popup-status:not(:empty) {
padding: 10px 12px;
}
.bariatr-bmi-page .bmi-popup-status[data-status="success"] {
color: #157347;
}
.bariatr-bmi-page .bmi-popup-status[data-status="error"] {
color: #aa0423;
}
.bariatr-bmi-page .bmi-popup-form .price-btn {
margin-top: 4px;
max-width: none;
padding: 15px 22px;
width: 100%;
}
@media (max-width: 1100px) {
.bariatr-bmi-page .about-grid,
.bariatr-bmi-page .approach,
.bariatr-bmi-page .ops-grid {
grid-template-columns: 1fr;
}
.bariatr-bmi-page .price {
grid-template-columns: 1fr;
text-align: center;
}
.bariatr-bmi-page .price-photo img {
height: 320px;
}
.bariatr-bmi-page .section {
padding: 30px 24px;
}
.bariatr-bmi-page .bmi-table-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.bariatr-bmi-page.page {
width: min(100% - 20px, var(--container));
margin: 14px auto;
padding-bottom: 30px;
gap: 34px;
}
.bariatr-bmi-page .section {
border-radius: 20px;
padding: 24px 16px;
}
.bariatr-bmi-page .title {
font-size: 32px;
}
.bariatr-bmi-page .about-title {
font-size: 30px;
line-height: 1.08;
}
.bariatr-bmi-page .header h1 {
font-size: 28px;
}
.bariatr-bmi-page .bmi-card {
padding: 18px 12px;
}
.bariatr-bmi-page .controls {
gap: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bariatr-bmi-page .control {
border-radius: 22px;
gap: 10px;
grid-template-columns: 1fr;
padding: 12px;
}
.bariatr-bmi-page .wheel-control .wheel-title {
font-size: 22px;
text-align: center;
}
.bariatr-bmi-page .wheel-control .screen-reader-text,
.bariatr-bmi-page .bmi-native-input[type="range"] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
opacity: 0;
pointer-events: none;
}
.bariatr-bmi-page .wheel-window {
display: block;
border-radius: 18px;
--wheel-row-height: 60px;
scrollbar-width: none;
}
.bariatr-bmi-page .wheel-window::-webkit-scrollbar {
display: none;
}
.bariatr-bmi-page .wheel-value {
font-size: 30px;
padding: 0 4px;
}
.bariatr-bmi-page .wheel-value.is-selected {
font-size: 32px;
}
.bariatr-bmi-page .status {
white-space: normal;
width: 100%;
}
.bariatr-bmi-page .bmi-value {
font-size: 44px;
}
.bariatr-bmi-page .bmi-table-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bariatr-bmi-page .approach-copy h3 {
font-size: 28px;
}
.bariatr-bmi-page .ops-photo {
min-height: 230px;
}
.bariatr-bmi-page .price {
padding: 22px 16px;
font-size: 16px;
}
.bariatr-bmi-page .price-btn {
width: 100%;
max-width: 300px;
}
.bariatr-bmi-page .bmi-result-action {
grid-template-columns: 1fr;
justify-items: stretch;
padding: 18px;
text-align: center;
}
.bariatr-bmi-page .bmi-result-action p {
padding-left: 0;
}
.bariatr-bmi-page .bmi-result-action .price-btn {
min-width: 0;
order: 1;
width: 100%;
}
.bariatr-bmi-page .bmi-result-action p {
order: 2;
}
.bariatr-bmi-page .bmi-modal {
padding: 12px;
}
.bariatr-bmi-page .bmi-modal-panel {
padding: 24px 18px;
}
.bariatr-bmi-page .bmi-modal-panel .title {
font-size: 28px;
}
}
@media (max-width: 480px) {
.bariatr-bmi-page.page {
width: min(100% - 16px, var(--container));
padding-bottom: 24px;
}
.bariatr-bmi-page .section {
padding: 18px 12px;
}
.bariatr-bmi-page .title {
font-size: 28px;
}
.bariatr-bmi-page .bmi-table-grid {
grid-template-columns: 1fr;
}
.bariatr-bmi-page .bmi-card {
border-radius: 18px;
padding: 14px 8px;
}
.bariatr-bmi-page .controls {
gap: 8px;
}
.bariatr-bmi-page .control {
border-radius: 18px;
padding: 8px;
}
.bariatr-bmi-page .wheel-control .wheel-title {
font-size: 18px;
}
.bariatr-bmi-page .wheel-window {
border-radius: 16px;
--wheel-row-height: 50px;
}
.bariatr-bmi-page .wheel-value {
font-size: 25px;
}
.bariatr-bmi-page .wheel-value.is-selected {
font-size: 27px;
}
}
@media (prefers-reduced-motion: reduce) {
html.anim-ready .bariatr-bmi-page .section,
html.anim-ready .bariatr-bmi-page .section .reveal-item {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}:root {
--cl-ink: #434343;
--cl-button-dark: #00adff;
--cl-button-dark-hover: #7bd4ff;
--cl-muted: #434343;
--cl-blue: #00adff;
--cl-blue-dark: #434343;
--cl-blue-soft: #7bd4ff;
--cl-blue-gradient: linear-gradient(135deg, #00adff 0%, #7bd4ff 100%);
--cl-yellow: #f5e23a;
--cl-cream: #fff;
--cl-line: rgba(67, 67, 67, 0.16);
--cl-shadow: 0 24px 60px rgba(67, 67, 67, 0.14);
}
html { scroll-behavior: smooth; }
body.bariatr-consultation-template { background: #fff; color: var(--cl-ink); }
.bariatr-consultation-page, .bariatr-consultation-page * { box-sizing: border-box; }
.bariatr-consultation-page {
margin: 0;
overflow: hidden;
font-family: "Montserrat", "Arial", sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--cl-ink);
background: #fff;
}
.bariatr-consultation-page h1,
.bariatr-consultation-page h2,
.bariatr-consultation-page h3,
.bariatr-consultation-page p,
.bariatr-consultation-page ul,
.bariatr-consultation-page ol,
.bariatr-consultation-page figure { margin-top: 0; }
.bariatr-consultation-page h1,
.bariatr-consultation-page h2,
.bariatr-consultation-page h3 {
color: inherit;
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.08;
}
.bariatr-consultation-page h1 { max-width: 720px; margin-bottom: 18px; font-size: clamp(38px, 4.4vw, 58px); }
.bariatr-consultation-page h2 { margin-bottom: 16px; font-size: clamp(30px, 3.2vw, 42px); }
.bariatr-consultation-page h3 { font-size: clamp(20px, 1.9vw, 26px); }
.bariatr-consultation-page a { color: inherit; }
.consultation-shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.consultation-section { padding: 64px 0; }
.consultation-kicker,
.consultation-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
color: var(--cl-blue-dark);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.14em;
line-height: 1.25;
text-transform: uppercase;
}
.consultation-kicker::before,
.consultation-eyebrow span,
.consultation-social-proof__pulse {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
flex: 0 0 auto;
background: var(--cl-yellow);
box-shadow: 0 0 0 7px rgba(245, 226, 58, 0.2);
}
.consultation-kicker::before { content: ""; }
.consultation-section--dark .consultation-kicker,
.consultation-section--bmi .consultation-kicker,
.consultation-doctor-card .consultation-kicker,
.consultation-app-card .consultation-kicker { color: #fff; }
.consultation-section-heading { max-width: 850px; margin: 0 auto 32px; text-align: center; }
.consultation-section-heading > p:last-child { max-width: 760px; margin: 0 auto; color: var(--cl-muted); }
.consultation-section-heading--left { margin-left: 0; text-align: left; }
.consultation-section-heading--left > p:last-child { margin-left: 0; }
.consultation-hero {
position: relative;
padding: 52px 0 60px;
background: radial-gradient(circle at 10% 0, rgba(0, 173, 255, 0.18), transparent 36%), linear-gradient(135deg, rgba(123, 212, 255, 0.28) 0%, #fff 56%, rgba(245, 226, 58, 0.24) 100%);
}
.consultation-hero::after {
position: absolute;
right: -130px;
bottom: -170px;
width: 380px;
height: 380px;
border: 80px solid rgba(0, 173, 255, 0.08);
border-radius: 50%;
content: "";
}
.consultation-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.7fr); gap: 38px; align-items: center; }
.consultation-hero__content, .consultation-hero__visual { position: relative; z-index: 1; }
.consultation-hero__visual { width: 100%; max-width: 410px; justify-self: end; }
.consultation-hero__lead { max-width: 760px; margin-bottom: 16px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; line-height: 1.42; }
.consultation-hero__copy { max-width: 760px; margin-bottom: 26px; color: var(--cl-muted); }
.consultation-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.consultation-button {
display: inline-flex;
min-height: 52px;
padding: 13px 21px;
border: 1px solid var(--cl-ink);
border-radius: 13px;
align-items: center;
justify-content: center;
gap: 14px;
font: inherit;
font-size: 15px;
font-weight: 800;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.consultation-button:hover { transform: translateY(-2px); text-decoration: none; }
.consultation-button:focus-visible { outline: 3px solid rgba(0, 173, 255, 0.38); outline-offset: 3px; }
.bariatr-consultation-page .consultation-button--primary { border-color: var(--cl-button-dark); color: #fff; background: var(--cl-button-dark); box-shadow: 0 12px 24px rgba(67, 67, 67, 0.2); }
.bariatr-consultation-page .consultation-button--primary:hover { border-color: var(--cl-button-dark-hover); color: var(--cl-ink); background: var(--cl-button-dark-hover); box-shadow: 0 16px 30px rgba(67, 67, 67, 0.26); }
.bariatr-consultation-page .consultation-button--ghost,
.bariatr-consultation-page .consultation-button--light { border-color: rgba(67, 67, 67, 0.22); color: var(--cl-ink); background: #fff; box-shadow: 0 10px 22px rgba(67, 67, 67, 0.08); }
.bariatr-consultation-page .consultation-button--ghost:hover,
.bariatr-consultation-page .consultation-button--light:hover { border-color: var(--cl-blue); color: var(--cl-ink); background: rgba(123, 212, 255, 0.28); box-shadow: 0 14px 28px rgba(67, 67, 67, 0.12); }
.consultation-media-placeholder {
display: flex;
position: relative;
width: 100%;
min-height: 280px;
margin: 0;
padding: 28px;
border: 1px dashed rgba(0, 173, 255, 0.5);
border-radius: 28px;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
color: var(--cl-ink);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(123, 212, 255, 0.38)), repeating-linear-gradient(45deg, transparent 0 24px, rgba(0, 173, 255, 0.08) 24px 26px);
text-align: center;
}
.consultation-media-placeholder--portrait { aspect-ratio: 4 / 5; }
.consultation-media-placeholder--video { min-height: 0; aspect-ratio: 16 / 9; }
.consultation-media-placeholder--square { min-height: 0; aspect-ratio: 1; }
.consultation-media-placeholder strong { margin-bottom: 8px; font-size: 19px; }
.consultation-media-placeholder small { max-width: 90%; font-size: 12px; line-height: 1.45; }
.consultation-media-placeholder__badge { position: absolute; top: 18px; left: 18px; padding: 6px 10px; border-radius: 99px; color: var(--cl-blue-dark); background: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.consultation-media-image { width: 100%; margin: 0; border-radius: 28px; overflow: hidden; background: var(--cl-blue-soft); }
.consultation-media-image--portrait { aspect-ratio: 4 / 5; }
.consultation-media-image--landscape { aspect-ratio: 16 / 9; }
.consultation-media-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.consultation-hero__visual .consultation-media-placeholder, .consultation-hero__visual .consultation-media-image { box-shadow: var(--cl-shadow); }
.consultation-floating-card { position: absolute; max-width: 230px; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 15px; background: rgba(255, 255, 255, 0.93); box-shadow: 0 16px 40px rgba(67, 67, 67, 0.15); backdrop-filter: blur(12px); }
.consultation-floating-card strong, .consultation-floating-card span { display: block; }
.consultation-floating-card strong { font-size: 14px; }
.consultation-floating-card span { color: var(--cl-muted); font-size: 12px; }
.consultation-floating-card--top { top: 50%; right: -18px; transform: translateY(-50%); }
.consultation-floating-card--bottom { bottom: 2%; left: -30px; }
.consultation-quick-section { position: relative; z-index: 3; margin: -24px 0 0; }
.consultation-quick-card { display: grid; padding: 24px; border: 1px solid rgba(0, 173, 255, 0.2); border-radius: 24px; grid-template-columns: minmax(250px, 0.65fr) minmax(0, 1.35fr); gap: 30px; align-items: center; background: #fff; box-shadow: var(--cl-shadow); }
.consultation-quick-card h2 { margin-bottom: 12px; font-size: clamp(27px, 2.7vw, 36px); }
.consultation-quick-card__intro p:not(.consultation-kicker) { margin-bottom: 12px; color: var(--cl-muted); }
.consultation-quick-card__intro a { color: var(--cl-blue-dark); font-size: 20px; font-weight: 800; text-decoration: none; }
.consultation-lead-form { position: relative; }
.consultation-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.consultation-form-grid--long { gap: 18px; }
.consultation-field { display: flex; min-width: 0; margin: 0; flex-direction: column; gap: 7px; }
.consultation-field--wide { grid-column: 1 / -1; }
.consultation-field > span { font-size: 13px; font-weight: 700; }
.consultation-field small { color: var(--cl-muted); font-size: 11px; font-weight: 500; }
.consultation-field input, .consultation-field select, .consultation-field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--cl-line); border-radius: 11px; outline: none; color: var(--cl-ink); background: #fff; font: inherit; font-size: 15px; transition: border-color 160ms ease, box-shadow 160ms ease; }
.consultation-field textarea { min-height: 110px; resize: vertical; }
.consultation-field input:focus, .consultation-field select:focus, .consultation-field textarea:focus { border-color: var(--cl-blue); box-shadow: 0 0 0 4px rgba(0, 173, 255, 0.16); }
.consultation-field input[aria-invalid="true"], .consultation-field select[aria-invalid="true"], .consultation-consent input[aria-invalid="true"] { border-color: #d94141; }
.consultation-consent { display: flex; margin: 14px 0 0; align-items: flex-start; gap: 9px; color: var(--cl-muted); font-size: 11px; line-height: 1.45; }
.consultation-consent input { width: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--cl-blue); }
.consultation-consent a { text-decoration: underline; }
.consultation-form-submit { width: 100%; margin-top: 14px; }
.consultation-form-submit:disabled { opacity: 0.65; cursor: wait; }
.consultation-form-status { display: none; margin: 13px 0 0; padding: 10px 12px; border-radius: 9px; font-size: 13px; line-height: 1.45; }
.consultation-form-status.is-visible { display: block; }
.consultation-form-status.is-success { color: #135f3b; background: #e6f7ed; }
.consultation-form-status.is-error { color: #8a2020; background: #fdecec; }
.consultation-form-note { margin: 10px 0 0; color: var(--cl-muted); font-size: 11px; line-height: 1.4; text-align: center; }
.consultation-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.consultation-social-proof { padding: 52px 0 0; }
.consultation-social-proof__inner { display: flex; padding-bottom: 22px; border-bottom: 1px solid var(--cl-line); align-items: center; justify-content: space-between; gap: 28px; }
.consultation-social-proof__inner > div { display: flex; max-width: 410px; align-items: center; gap: 14px; line-height: 1.4; }
.consultation-social-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.consultation-social-link { display: inline-flex; padding: 8px 12px; border: 1px solid var(--cl-line); border-radius: 99px; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-decoration: none; transition: transform 160ms ease, border-color 160ms ease; }
.consultation-social-link:hover { border-color: var(--cl-blue); transform: translateY(-2px); text-decoration: none; }
.consultation-social-link span { display: grid; width: 26px; height: 26px; border-radius: 50%; place-items: center; color: #fff; background: var(--cl-blue); }
.consultation-social-link svg { display: block; width: 15px; height: 15px; }
.consultation-social-link--youtube span { background: #ff0033; }
.consultation-social-link--instagram span { background: #d62976; }
.consultation-social-link--facebook span { background: #1877f2; }
.consultation-social-link--tiktok span { background: #151515; }
.consultation-social-link--telegram span { background: #229ed9; }
.consultation-social-link--viber span { background: #7360f2; }
.consultation-section--cost-guide { background: linear-gradient(180deg, #fff 0%, rgba(123, 212, 255, 0.24) 100%); }
.consultation-cost-intro { width: 100%; margin: 0 0 24px; padding: 36px 40px; border: 1px solid rgba(67, 67, 67, 0.1); border-radius: 26px; background: #fff; box-shadow: 0 20px 48px rgba(67, 67, 67, 0.08); }
.consultation-cost-intro p { margin-bottom: 18px; color: var(--cl-muted); font-size: 15px; line-height: 1.76; }
.consultation-cost-intro p:last-child { margin-bottom: 0; }
.consultation-cost-intro__lead { color: var(--cl-ink) !important; font-size: 18px !important; line-height: 1.65 !important; }
.consultation-cost-intro strong { color: var(--cl-ink); }
.consultation-cost-intro a { color: var(--cl-blue-dark); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.consultation-cost-intro__highlight { position: relative; margin: 24px -8px !important; padding: 24px 26px 24px 30px; border: 1px solid rgba(0, 173, 255, 0.2); border-radius: 18px; background: linear-gradient(135deg, rgba(123, 212, 255, 0.24) 0%, rgba(245, 226, 58, 0.18) 100%); }
.consultation-cost-intro__highlight::before { position: absolute; top: 20px; bottom: 20px; left: 0; width: 4px; border-radius: 0 4px 4px 0; content: ""; background: var(--cl-yellow); }
.consultation-cost-accordions { display: grid; width: 100%; gap: 12px; }
.consultation-cost-accordion { overflow: hidden; border: 1px solid var(--cl-line); border-radius: 18px; background: #fff; box-shadow: 0 10px 26px rgba(67, 67, 67, 0.07); }
.consultation-cost-accordion summary { display: flex; min-height: 76px; padding: 20px 24px; align-items: center; justify-content: space-between; gap: 20px; color: var(--cl-ink); font-size: 19px; font-weight: 800; line-height: 1.35; cursor: pointer; list-style: none; }
.consultation-cost-accordion summary::-webkit-details-marker { display: none; }
.consultation-cost-accordion summary::after { display: grid; width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; place-items: center; color: #fff; content: "+"; background: var(--cl-button-dark); font-size: 24px; font-weight: 500; transition: transform 180ms ease, background-color 180ms ease; }
.consultation-cost-accordion[open] summary { border-bottom: 1px solid var(--cl-line); }
.consultation-cost-accordion[open] summary::after { color: #fff; background: var(--cl-button-dark); transform: rotate(45deg); }
.consultation-cost-accordion__content { max-width: 980px; padding: 26px 30px 30px; }
.consultation-cost-accordion__content p { margin-bottom: 18px; color: var(--cl-muted); font-size: 15px; line-height: 1.72; }
.consultation-cost-accordion__content p:last-child { margin-bottom: 0; }
.consultation-longform { max-width: 780px; color: var(--cl-muted); font-size: 16px; line-height: 1.7; }
.consultation-longform p { margin-bottom: 18px; }
.consultation-longform p:last-child { margin-bottom: 0; }
.consultation-section--dark { position: relative; color: #fff; background: var(--cl-blue-gradient); }
.consultation-section--dark::before { position: absolute; top: 0; right: 5%; width: 420px; height: 100%; content: ""; background: radial-gradient(circle, rgba(0, 173, 255, 0.3), transparent 65%); }
.consultation-included-grid { display: grid; position: relative; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.consultation-included-intro { position: static; }
.consultation-included-intro h2 { max-width: none; }
.consultation-included-intro > p:not(.consultation-kicker) { max-width: none; margin-bottom: 0; color: #fff; font-weight: 600; }
.consultation-included-grid > div:last-child { display: grid; gap: 28px; }
.consultation-included-intro a:not(.consultation-button) { color: #fff; text-decoration: underline; }
.consultation-included-list { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; list-style: none; }
.consultation-included-list li { display: grid; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, 0.28); grid-template-columns: 46px 1fr; align-items: baseline; gap: 12px; }
.consultation-included-list li:last-child { grid-column: 1 / -1; }
.consultation-included-list li:last-child { border-bottom: 0; }
.consultation-included-list > li > span { color: var(--cl-yellow); font-size: 12px; font-weight: 800; line-height: 1.35; }
.consultation-included-list strong { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 900; line-height: 1.35; }
.consultation-included-list p { margin: 0; color: #fff; font-size: 14px; }
.consultation-included-note { margin: 0; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.7; }
.consultation-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.consultation-section--services .consultation-section-heading { display: block; max-width: none; }
.consultation-section--services .consultation-section-heading h2 { max-width: none; }
.consultation-section--services .consultation-section-heading > p:last-child { max-width: none; margin: 20px 0 0; }
.consultation-service-card { display: block; position: relative; min-height: 160px; padding: 22px; border: 1px solid var(--cl-line); border-radius: 18px; color: var(--cl-ink); background: #fff; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.consultation-service-card:hover { border-color: rgba(0, 173, 255, 0.55); transform: translateY(-6px); box-shadow: var(--cl-shadow); text-decoration: none; }
.consultation-service-card__number { display: block; margin-bottom: 22px; color: var(--cl-blue); font-size: 12px; font-weight: 800; }
.consultation-service-card h3 { margin: 0 30px 0 0; font-size: 20px; }
.consultation-service-card__arrow { position: absolute; right: 22px; bottom: 20px; font-size: 20px; }
.consultation-section--answer { padding-top: 10px; }
.consultation-answer-card { display: grid; padding: 34px; border: 1px solid var(--cl-line); border-radius: 24px; grid-template-columns: 1fr; gap: 22px; background: #fff; box-shadow: var(--cl-shadow); }
.consultation-answer-card__heading { max-width: none; }
.consultation-answer-card__heading h2 { margin-bottom: 0; }
.consultation-answer-card__body { display: grid; width: 100%; max-width: none; grid-template-columns: 1fr; gap: 22px; }
.consultation-check-list { display: grid; width: 100%; max-width: none; margin: 18px 0 0; padding: 0; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 24px; list-style: none; }
.consultation-check-list li { position: relative; padding-left: 25px; color: var(--cl-ink); font-size: 16px; font-weight: 600; white-space: nowrap; }
.consultation-check-list li::before { position: absolute; left: 0; color: var(--cl-blue); content: "✓"; }
.consultation-section--bmi { color: #fff; background: var(--cl-blue-gradient); }
.consultation-bmi-layout { display: grid; grid-template-columns: minmax(290px, 0.72fr) minmax(0, 1.28fr); gap: 38px; align-items: start; }
.consultation-bmi-copy > p:not(.consultation-kicker) { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.68; }
.consultation-bmi-copy a { color: #fff; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.consultation-bmi-copy li a { color: #fff; font-weight: 700; }
.consultation-bmi-copy ul, .consultation-final-copy ul { margin: 20px 0 0; padding: 0; list-style: none; }
.consultation-bmi-copy li, .consultation-final-copy li { position: relative; margin: 10px 0; padding-left: 29px; }
.consultation-bmi-copy li::before, .consultation-final-copy li::before { position: absolute; top: 0; left: 0; color: #fff; font-weight: 900; content: "✓"; }
.consultation-bmi-embed { min-width: 0; width: 100%; }
.consultation-bmi-embed .section { margin: 0; }
.bariatr-consultation-page .consultation-bmi-embed .header h3 { margin: 0; color: var(--text); font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.14; }
.consultation-bmi-embed .bmi-result-action .consultation-bmi-action { min-width: 230px; margin: 0; order: 2; }
.consultation-bmi-embed .bmi-result-action p { order: 1; }
.consultation-section--doctor .consultation-section-heading { display: block; max-width: none; margin-bottom: 30px; }
.consultation-section--doctor .consultation-section-heading h2 { max-width: none; }
.consultation-section--doctor .consultation-section-heading > p:last-child { max-width: none; margin: 20px 0 0; }
.consultation-doctor-card { display: grid; padding: 18px; border: 1px solid var(--cl-line); border-radius: 26px; grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr); gap: 38px; align-items: center; color: #fff; background: var(--cl-blue-gradient); }
.consultation-doctor-card__media { width: 100%; max-width: 340px; margin-top: 0; justify-self: center; }
.consultation-doctor-card__content { padding: 24px 30px 24px 0; }
.consultation-doctor-card__role { font-size: 16px; font-weight: 600; line-height: 1.55; }
.consultation-doctor-card__content > p:not(.consultation-kicker, .consultation-doctor-card__role) { color: #fff; }
.consultation-doctor-card__content > p a { color: #fff; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.consultation-section--stories { background: rgba(123, 212, 255, 0.24); }
.consultation-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.consultation-video-card { width: 100%; margin: 0; border-radius: 20px; overflow: hidden; background: #00adff; box-shadow: 0 14px 32px rgba(67, 67, 67, 0.16); aspect-ratio: 16 / 9; }
.consultation-video-card iframe { display: block; width: 100%; height: 100%; border: 0; }
.consultation-social-section-heading { max-width: none; margin-bottom: 30px; text-align: left; }
.consultation-social-section-heading h2 { max-width: 900px; }
.consultation-social-section-heading > p:last-child { max-width: 900px; margin-left: 0; }
.consultation-social-feed { min-width: 0; width: 100%; }
.consultation-social-feed iframe { max-width: 100%; }
.consultation-social-action { display: flex; margin-top: 28px; justify-content: flex-start; }
.consultation-social-action__button { display: inline-flex; min-height: 52px; padding: 13px 20px; border-radius: 13px; align-items: center; gap: 11px; color: #fff !important; font-size: 15px; font-weight: 800; line-height: 1.2; text-decoration: none; box-shadow: 0 12px 26px rgba(67, 67, 67, 0.15); transition: transform 180ms ease, box-shadow 180ms ease; }
.consultation-social-action__button:hover { color: #fff; transform: translateY(-2px); text-decoration: none; box-shadow: 0 16px 30px rgba(67, 67, 67, 0.2); }
.consultation-social-action__button:focus-visible { outline: 3px solid rgba(0, 173, 255, 0.38); outline-offset: 3px; }
.consultation-social-action__button svg { width: 23px; height: 23px; flex: 0 0 auto; }
.consultation-social-action__button--youtube { background: #ff0033; }
.consultation-social-action__button--instagram { background: linear-gradient(135deg, #833ab4 0%, #d62976 52%, #f77737 100%); }
.consultation-instagram-section { padding: 42px 0 54px; background: #fff; }
.consultation-instagram-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.consultation-instagram-card { min-width: 0; margin: 0; border: 1px solid #d1d1d4; border-radius: 14px; overflow: hidden; color: #434343; background: #fff; box-shadow: 0 10px 26px rgba(67, 67, 67, 0.1); }
.consultation-instagram-card__header { display: flex; min-height: 66px; padding: 10px 14px; align-items: center; justify-content: space-between; gap: 12px; }
.consultation-instagram-card__header > a { display: flex; min-width: 0; align-items: center; gap: 10px; color: #434343; text-decoration: none; }
.consultation-instagram-card__header > a > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.consultation-instagram-card__header strong { overflow: hidden; font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.consultation-instagram-card__header small { margin-top: 2px; color: #434343; font-size: 11px; line-height: 1.2; }
.consultation-instagram-card__avatar { display: block; width: 42px; height: 42px; padding: 2px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(145deg, #feda75, #d62976 55%, #4f5bd5); }
.consultation-instagram-card__avatar img { display: block; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }
.consultation-instagram-card__menu { color: #434343; font-size: 17px; font-weight: 800; letter-spacing: 1px; }
.consultation-instagram-card__media { display: block; position: relative; width: 100%; overflow: hidden; background: #7bd4ff; aspect-ratio: 4 / 5; isolation: isolate; }
.consultation-instagram-card__media > img { display: block; position: absolute; width: 100%; height: 100%; inset: 0; }
.consultation-instagram-card__backdrop { z-index: 0; object-fit: cover; filter: blur(18px); opacity: 0.48; transform: scale(1.12); }
.consultation-instagram-card__image { z-index: 1; object-fit: contain; }
.consultation-instagram-card__body { min-height: 172px; padding: 13px 14px 15px; }
.consultation-instagram-card__actions { display: flex; margin-bottom: 10px; align-items: center; gap: 14px; color: #434343; }
.consultation-instagram-card__actions span { display: block; width: 23px; height: 23px; }
.consultation-instagram-card__actions svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.consultation-instagram-card__actions .consultation-instagram-card__save { margin-left: auto; }
.consultation-instagram-card__likes { display: block; margin-bottom: 7px; font-size: 13px; line-height: 1.3; }
.consultation-instagram-card__caption { display: -webkit-box; min-height: 40px; margin: 0 0 6px; overflow: hidden; color: #434343; font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.consultation-instagram-card__caption strong { margin-right: 3px; }
.consultation-instagram-card__comments { color: #434343; font-size: 12px; text-decoration: none; }
.consultation-instagram-card__comments:hover { color: #00adff; text-decoration: none; }
.consultation-app-section { padding-top: 30px; }
.consultation-app-card { display: grid; padding: 36px 46px; border-radius: 28px; grid-template-columns: 1.05fr 0.95fr; gap: 46px; align-items: center; color: #fff; background: var(--cl-blue-gradient); }
.consultation-app-card__visual { max-width: 560px; }
.consultation-app-card__content > p:not(.consultation-kicker) { max-width: 650px; color: #fff; }
.consultation-app-links { display: flex; margin-top: 28px; flex-wrap: wrap; gap: 12px; }
.consultation-app-links a { display: grid; min-width: 190px; padding: 11px 16px; border: 1px solid rgba(67, 67, 67, 0.22); border-radius: 12px; grid-template-columns: 32px 1fr; gap: 11px; align-items: center; color: var(--cl-ink); text-decoration: none; background: rgba(255, 255, 255, 0.5); transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.consultation-app-links a:hover { border-color: var(--cl-ink); color: var(--cl-ink); background: rgba(255, 255, 255, 0.8); transform: translateY(-2px); text-decoration: none; }
.consultation-app-link__icon { display: grid; width: 32px; height: 32px; place-items: center; }
.consultation-app-link__icon svg { width: 30px; height: 30px; }
.consultation-app-link__copy { display: flex; min-width: 0; flex-direction: column; }
.consultation-app-link__copy > span { font-size: 10px; line-height: 1.2; text-transform: uppercase; }
.consultation-app-link__copy strong { font-size: 16px; line-height: 1.25; }
.consultation-section--faq { padding-top: 64px; background: rgba(123, 212, 255, 0.24); }
.consultation-faq-layout { display: grid; grid-template-columns: 0.65fr 1.35fr; gap: 52px; }
.consultation-faq-layout .consultation-section-heading { margin-bottom: 0; }
.consultation-faq-layout .consultation-section-heading > a { display: inline-block; margin-top: 18px; color: var(--cl-blue-dark); font-size: 21px; font-weight: 800; text-decoration: none; }
.consultation-faq-list details { border-bottom: 1px solid var(--cl-line); }
.consultation-faq-list summary { display: flex; padding: 22px 0; align-items: center; justify-content: space-between; gap: 18px; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; }
.consultation-faq-list summary::-webkit-details-marker { display: none; }
.consultation-faq-toggle { display: grid; width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; place-items: center; color: #fff; background: var(--cl-button-dark); font-size: 20px; transition: transform 180ms ease; }
.consultation-faq-list details[open] .consultation-faq-toggle { transform: rotate(45deg); }
.consultation-faq-list details p { max-width: 90%; margin: -4px 0 23px; color: var(--cl-muted); font-size: 15px; }
.consultation-final-section { padding: 68px 0; color: #fff; background: linear-gradient(135deg, #00adff 0%, #7bd4ff 100%); }
.consultation-final-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr); gap: 56px; align-items: center; }
.consultation-final-copy .consultation-eyebrow, .consultation-final-copy .consultation-final-contact span, .consultation-final-copy .consultation-final-contact small { color: rgba(255, 255, 255, 0.88); }
.consultation-final-copy > p:not(.consultation-eyebrow) { max-width: 610px; color: #fff; font-weight: 600; }
.consultation-final-copy li::before { color: var(--cl-yellow); }
.consultation-final-copy li,
.consultation-final-contact span,
.consultation-final-contact small { font-weight: 600; }
.consultation-final-copy h2,
.consultation-final-contact a,
.consultation-final-socials > strong { color: #fff; }
.consultation-final-contact { display: flex; margin-top: 34px; flex-direction: column; }
.consultation-final-contact a { font-size: clamp(24px, 3vw, 38px); font-weight: 800; text-decoration: none; }
.consultation-final-form { padding: 32px; border-radius: 24px; color: var(--cl-ink); background: #fff; box-shadow: 0 28px 70px rgba(67, 67, 67, 0.26); }
.consultation-final-socials { display: flex; margin-top: 38px; padding-top: 28px; border-top: 1px solid rgba(67, 67, 67, 0.26); align-items: center; justify-content: space-between; gap: 24px; }
.consultation-final-socials > strong { flex: 0 0 auto; font-size: 15px; }
.consultation-social-links--final { justify-content: flex-end; }
.consultation-social-links--final .consultation-social-link { border-color: transparent; color: var(--cl-ink); background: rgba(255, 255, 255, 0.4); }
.consultation-social-links--final .consultation-social-link:hover { border-color: transparent; color: var(--cl-ink); background: rgba(255, 255, 255, 0.7); }
.consultation-mobile-bar { display: none; }
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 550ms ease, transform 550ms ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 1100px) {
.consultation-section { padding: 58px 0; }
.consultation-hero__grid, .consultation-bmi-layout, .consultation-final-grid { gap: 34px; }
.consultation-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.consultation-check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: initial; }
.consultation-check-list li { white-space: normal; }
.consultation-app-card { padding: 34px; gap: 34px; }
}
@media (max-width: 860px) {
.consultation-hero { padding-top: 46px; }
.consultation-hero__grid, .consultation-bmi-layout, .consultation-doctor-card, .consultation-final-grid { grid-template-columns: 1fr; }
.consultation-hero__visual { max-width: 500px; margin: 0 auto; justify-self: center; }
.consultation-quick-card, .consultation-included-grid, .consultation-faq-layout, .consultation-answer-card { grid-template-columns: 1fr; gap: 28px; }
.consultation-answer-card__body { grid-template-columns: 1fr; gap: 24px; }
.consultation-check-list { grid-template-columns: 1fr; }
.consultation-included-intro { position: static; }
.consultation-social-proof__inner { align-items: flex-start; flex-direction: column; }
.consultation-social-links { justify-content: flex-start; }
.consultation-doctor-card__content { padding: 18px; }
.consultation-doctor-card__media { max-width: 390px; margin-top: 0; justify-self: center; }
.consultation-video-grid { grid-template-columns: 1fr; }
.consultation-video-card { max-width: 720px; }
.consultation-instagram-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.consultation-final-grid { max-width: 760px; }
.consultation-final-socials { max-width: 760px; align-items: flex-start; flex-direction: column; }
.consultation-social-links--final { justify-content: flex-start; }
.consultation-longform { max-width: none; }
}
@media (max-width: 680px) {
body.bariatr-consultation-template { padding-bottom: 72px; }
.consultation-shell { width: calc(100% - 28px); max-width: 1240px; }
.consultation-section { padding: 44px 0; }
.consultation-hero { padding: 34px 0 52px; }
.bariatr-consultation-page { font-size: 15px; }
.bariatr-consultation-page h1 { font-size: clamp(32px, 9.8vw, 42px); }
.bariatr-consultation-page h2 { font-size: clamp(27px, 8vw, 34px); }
.consultation-hero__grid { gap: 32px; }
.consultation-hero__actions, .consultation-hero__actions .consultation-button { width: 100%; }
.consultation-social-action__button { width: 100%; justify-content: center; }
.consultation-instagram-grid { grid-template-columns: 1fr; gap: 16px; }
.consultation-instagram-card__body { min-height: 0; }
.consultation-floating-card--top { right: -5px; }
.consultation-floating-card--bottom { left: -5px; }
.consultation-quick-section { margin-top: -18px; }
.consultation-quick-card, .consultation-final-form { padding: 20px; border-radius: 20px; }
.consultation-form-grid, .consultation-form-grid--long { grid-template-columns: 1fr; }
.consultation-social-proof { padding-top: 42px; }
.consultation-social-link { padding: 7px 10px; }
.consultation-services-grid { grid-template-columns: 1fr; }
.consultation-service-card { min-height: 0; }
.consultation-cost-intro { padding: 24px 20px; border-radius: 20px; }
.consultation-cost-intro__lead { font-size: 16px !important; }
.consultation-cost-intro__highlight { margin: 20px -4px !important; padding: 20px 18px 20px 22px; }
.consultation-cost-accordion summary { min-height: 68px; padding: 17px 18px; font-size: 16px; }
.consultation-cost-accordion summary::after { width: 32px; height: 32px; font-size: 21px; }
.consultation-cost-accordion__content { padding: 22px 20px 24px; }
.consultation-answer-card { padding: 24px 20px; gap: 20px; }
.consultation-check-list { grid-template-columns: 1fr; }
.consultation-included-grid { gap: 24px; }
.consultation-included-list { grid-template-columns: 1fr; }
.consultation-included-list li:last-child { grid-column: auto; }
.consultation-included-list li { grid-template-columns: 42px 1fr; }
.bariatr-consultation-page .consultation-bmi-embed .header h3 { font-size: 28px; }
.consultation-bmi-embed .bmi-result-action { grid-template-columns: 1fr; justify-items: stretch; text-align: center; }
.consultation-bmi-embed .bmi-result-action .consultation-bmi-action { width: 100%; min-width: 0; order: 1; }
.consultation-bmi-embed .bmi-result-action p { padding-left: 0; order: 2; }
.consultation-doctor-card { padding: 12px; border-radius: 22px; }
.consultation-app-card { padding: 26px; grid-template-columns: 1fr; gap: 32px; }
.consultation-app-card__visual { max-width: 100%; }
.consultation-app-links a { min-width: calc(50% - 6px); }
.consultation-faq-list details p { max-width: 100%; }
.consultation-final-section { padding: 50px 0; }
.consultation-mobile-bar { display: grid; position: fixed; z-index: 9999; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; padding: 7px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 18px; grid-template-columns: 52px 1fr; gap: 7px; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(calc(100% + 24px)); background: rgba(255, 255, 255, 0.94); box-shadow: 0 14px 40px rgba(67, 67, 67, 0.22); backdrop-filter: blur(16px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease; }
.consultation-mobile-bar.is-active { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
.consultation-mobile-bar a { display: grid; min-height: 48px; border-radius: 12px; place-items: center; font-size: 14px; font-weight: 800; text-decoration: none; }
.consultation-mobile-bar a:first-child { border: 1px solid var(--cl-line); color: var(--cl-ink); background: #fff; font-size: 20px; }
.consultation-mobile-bar a:first-child svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.consultation-mobile-bar a:last-child { color: #fff; background: var(--cl-button-dark); }
}
@media (max-width: 420px) {
.consultation-shell { width: calc(100% - 22px); max-width: 1240px; }
.consultation-floating-card { max-width: 175px; padding: 12px; }
.consultation-app-links { flex-direction: column; }
.consultation-app-links a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
[data-reveal] { opacity: 1; transform: none; transition: none; }
.consultation-button, .consultation-service-card, .consultation-social-link { transition: none; }
.consultation-cost-accordion summary::after { transition: none; }
}