/* ==========================================================================
Home Medica — site.css (v2: clean medical system)
Mobile-first. Flex layouts only (maps 1:1 to Elementor flex containers).
Breakpoints match Elementor: tablet ≥768px, desktop ≥1025px.
One typeface: Manrope. White pages, light-blue tint for highlighted
sections, navy for the two big breaks (process + final CTA/footer).
Cyan is reserved for the "Sună acum" call button.
1. Font 7. Hero 13. Reviews
2. Tokens 8. Service cards 14. FAQ
3. Base 9. Price cards 15. (removed)
4. Layout 10. Info cards, prose 16. CTA + footer
5. Type 11. Features ("De ce") 17. Sticky call bar
6. Buttons/chips 12. Related services 18. Placeholders, utilities
(Header & mobile menu sit between 6 and 7.)
========================================================================== */
/* 1. Font ----------------------------------------------------------------- */
@font-face {
font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 2. Tokens --------------------------------------------------------------- */
:root {
/* Brand */
--c-ink: #0B2545; /* dark navy: headings, navy sections */
--c-navy: #1D4E89; /* Home Medica blue: links, icons, accents */
--c-cyan: #19B5E6; /* RESERVED for "Sună acum" */
--c-cyan-600: #0EA2D1;
/* Surfaces */
--c-bg: #FFFFFF;
--c-tint: #F3F8FC; /* highlighted sections */
--c-line: #E5EAF0; /* 1px borders, dividers */
--c-line-strong: #CFD8E3;
--c-icon-bg: #EAF2FA; /* soft blue behind icons */
/* Text */
--c-text: #2A3A4F;
--c-muted: #5B6B80;
--c-on-dark: #FFFFFF;
--c-on-dark-muted: #B9C7D8;
--c-on-dark-line: rgba(255, 255, 255, .14);
/* Functional */
--c-star: #F5A524; /* rating stars only */
--c-wa: #1DA851; /* WhatsApp icon only */
--c-ok: #1E7F55;
--c-ok-bg: #E8F5EE;
--c-ph: #3D5A80; /* placeholder text */
--c-ph-bg: #EDF1F6;
--c-ph-line: #8FA3BA;
/* Typography — Manrope only */
--f-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--fs-h1: clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem); /* 34 → 56 */
--fs-h1-sub: clamp(1.125rem, 1.03rem + .45vw, 1.375rem); /* 18 → 22 */
--fs-h2: clamp(1.625rem, 1.35rem + 1.15vw, 2.375rem); /* 26 → 38 */
--fs-h3: clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem); /* 17 → 19 */
--fs-lead: clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem); /* 17 → 19 */
--fs-body: 1rem; /* 16 */
--fs-sm: .9375rem; /* 15 */
--fs-xs: .8125rem; /* 13 */
--fs-label: .75rem; /* 12 · uppercase labels */
--fs-price: 1.25rem; /* 20 · price rows */
--fs-value: 1.125rem; /* 18 · trust-card values (rating, hours, price); 16 when the card row is <360px wide, 20 desktop */
--fs-btn: 1rem; /* 16 · all buttons */
--fs-stat: clamp(1.1875rem, .1rem + 5.43vw, 2rem); /* 19 (320px) → 22 (375px) → 24 (412px) → 32 · stats numbers */
/* Spacing (4px base) */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
--s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
/* Shape & depth */
--r-sm: 10px; /* buttons, inputs */
--r-md: 12px; /* cards */
--r-lg: 16px; /* images */
--r-pill: 999px;
--r-tile: 12px; /* icon tiles */
/* Shadows: only these three, nowhere else. Photography never gets a shadow. */
--shadow-card: 0 1px 2px rgba(11, 37, 69, .04), 0 4px 16px rgba(11, 37, 69, .04); /* card hover, trust cards */
--shadow-bar: 0 -6px 20px rgba(11, 37, 69, .08); /* sticky call bar */
--shadow-pop: 0 16px 40px rgba(11, 37, 69, .12); /* dropdowns */
/* Components */
--btn-h: 54px; /* every Call / WhatsApp button, incl. sticky bar */
--btn-h-sm: 44px;
--card-pad: 20px; /* 28px on desktop */
--tile-sm: 36px; /* icon tiles: trust rows */
--tile-md: 44px; /* features, info cards */
--tile-lg: 48px; /* service cards */
/* Layout */
--container: 1200px;
--container-text: 720px;
--gutter: 20px;
--section-y: 2.5rem; /* 40px on phone: compact page, less scrolling */
--header-h: 64px;
--callbar-h: 76px;
--ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 768px) { :root { --gutter: 32px; --section-y: 4rem; } }
@media (min-width: 1025px) { :root { --gutter: 40px; --section-y: 5.5rem; --header-h: 76px; --callbar-h: 0px; --card-pad: 28px; } }
@media (max-width: 359px) { :root { --gutter: 16px; } }
/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (max-width: 1024px) { html { scroll-padding-top: 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
font-family: var(--f-sans);
font-size: var(--fs-body);
line-height: 1.6;
color: var(--c-text);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px));
}
img { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }
/* Fixed-size icon holders never shrink inside flex rows */
.feature-icon, .service-card-icon, .review-avatar, .faq-icon, .icon-btn, .related-thumb, .process-node { flex-shrink: 0; }
.icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: middle; }
a { color: var(--c-navy); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-ink); }
h1, h2, h3, h4 { margin: 0; color: var(--c-ink); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--c-navy); outline-offset: 3px; border-radius: 4px; }
.section--ink :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible { outline-color: #fff; }
::selection { background: var(--c-icon-bg); color: var(--c-ink); }
.skip-link {
position: absolute; left: var(--gutter); top: -100px; z-index: 100;
padding: 12px 16px; border-radius: var(--r-sm);
background: var(--c-ink); color: #fff; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 4. Layout ---------------------------------------------------------------- */
.container {
width: 100%;
max-width: calc(var(--container) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--text { max-width: calc(var(--container-text) + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--c-tint); }
.section--ink { background: var(--c-ink); color: var(--c-on-dark-muted); }
.section--ink h2, .section--ink h3 { color: var(--c-on-dark); }
.section--ink a:not(.btn) { color: #fff; }
.section--tight { padding-block: calc(var(--section-y) * .75); }
/* Two consecutive white sections share one gap, divided by a hairline */
.section:not(.section--tint):not(.section--ink) + .section:not(.section--tint):not(.section--ink) { padding-top: 0; }
.section:not(.section--tint):not(.section--ink) + .section:not(.section--tint):not(.section--ink) > .container::before {
content: ""; display: block; height: 1px; background: var(--c-line); margin-bottom: var(--section-y);
}
.section-head { display: flex; flex-direction: column; gap: var(--s-3); max-width: 760px; margin-bottom: var(--s-5); }
.section-head--center { margin-inline: auto; text-align: center; align-items: center; }
.section-head-row { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.section-head-row .section-head { margin-bottom: 0; }
@media (min-width: 1025px) {
.section-head { margin-bottom: var(--s-6); }
.section-head-row { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: var(--s-6); }
}
.split { display: flex; flex-direction: column; gap: var(--s-4); }
.split > .section-head { margin-bottom: 0; }
@media (min-width: 1025px) {
.split { flex-direction: row; gap: var(--s-8); align-items: flex-start; }
.split > .split-aside { flex: 0 0 34%; position: sticky; top: calc(var(--header-h) + 32px); }
.split > .split-main { flex: 1 1 0; min-width: 0; }
}
/* 5. Type ----------------------------------------------------------------- */
.section-title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
.section-intro { font-size: var(--fs-body); color: var(--c-muted); text-wrap: pretty; }
@media (min-width: 1025px) { .section-intro { font-size: var(--fs-lead); max-width: 62ch; } }
.section--ink .section-intro { color: var(--c-on-dark-muted); }
.lead { font-size: var(--fs-lead); color: var(--c-ink); }
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); }
.tnum { font-variant-numeric: tabular-nums; }
.check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.check-list li > .icon { width: 22px; height: 22px; color: var(--c-navy); margin-top: 1px; flex-shrink: 0; }
.section--ink .check-list li > .icon { color: #fff; }
/* 6. Buttons & chips ------------------------------------------------------ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: var(--btn-h); padding: 0 22px;
border: 1.5px solid transparent; border-radius: var(--r-sm);
font-family: var(--f-sans); font-size: var(--fs-btn); font-weight: 700; line-height: 1.1;
text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer;
transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn .icon { width: 20px; height: 20px; }
.btn:active { transform: translateY(1px); }
/* Primary: phone call. The only element that uses cyan. */
.btn-call { background: var(--c-cyan); color: var(--c-ink); }
.btn-call:hover { background: var(--c-cyan-600); color: var(--c-ink); }
.btn-call .btn-label { text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.btn-call .btn-meta { font-weight: 600; padding-left: 10px; border-left: 1px solid rgba(11, 37, 69, .25); }
/* Secondary: WhatsApp */
.btn-whatsapp { background: var(--c-bg); border-color: var(--c-line-strong); color: var(--c-ink); }
.btn-whatsapp .icon { color: var(--c-wa); }
.btn-whatsapp:hover { border-color: var(--c-ink); color: var(--c-ink); }
.btn-whatsapp.btn-on-dark { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-whatsapp.btn-on-dark:hover { border-color: #fff; color: #fff; }
.btn-whatsapp.btn-on-dark .icon { color: #fff; }
/* Neutral, non-conversion (e.g. "Vezi serviciile") */
.btn-outline { background: transparent; border-color: var(--c-line-strong); color: var(--c-ink); }
.btn-outline:hover { border-color: var(--c-ink); color: var(--c-ink); }
.btn-block { width: 100%; }
.btn-sm { min-height: var(--btn-h-sm); padding: 0 16px; font-size: var(--fs-sm); }
/* Call + WhatsApp pair — the ONE conversion pattern (hero, process, price cards, final CTA, sticky bar).
Call takes the spare width, WhatsApp stays compact. If the pair can't fit on one line
(very narrow phones), it wraps and both buttons go full width instead of overflowing. */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row .btn-call { flex: 999 1 auto; padding: 0 18px; }
.btn-row .btn-whatsapp { flex: 1 0 auto; padding: 0 16px; }
/* The number inside the call button is shown only where there is room for it */
.btn-call .btn-meta { display: none; }
@media (min-width: 768px) {
.btn-call .btn-meta { display: inline; }
.btn-row .btn-call, .btn-row .btn-whatsapp { flex: 0 0 auto; padding: 0 26px; }
}
.btn-group { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 480px) { .btn-group { flex-direction: row; flex-wrap: wrap; } }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--c-navy); text-decoration: none; }
.link-arrow .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }
.chip {
display: inline-flex; align-items: center; gap: 8px;
min-height: 40px; padding: 8px 14px;
border: 1px solid var(--c-line); border-radius: var(--r-pill);
background: var(--c-bg); color: var(--c-ink);
font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; text-decoration: none;
}
a.chip:hover { border-color: var(--c-navy); color: var(--c-ink); }
.chip .icon { width: 16px; height: 16px; color: var(--c-navy); }
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list .chip { font-size: .875rem; padding: 7px 12px 7px 10px; gap: 6px; }
/* Star rating — fill width driven by --rating-fill (0–100%) */
.stars { position: relative; display: inline-flex; line-height: 0; }
.stars-row { display: inline-flex; gap: 2px; }
.stars-row .icon { width: 17px; height: 17px; }
.stars-base { color: #D5DCE5; }
.stars-fill { position: absolute; inset: 0 auto 0 0; width: var(--rating-fill, 0%); overflow: hidden; color: var(--c-star); }
.stars--sm .stars-row .icon { width: 16px; height: 16px; }
.stars--lg .stars-row .icon { width: 22px; height: 22px; }
/* Trust cards — the reusable "key fact" block: Google rating, opening hours, starting price.
Same markup everywhere (hero, service hero, final CTA): a bold value line + a small label line.
Partials: trust-rating.html, trust-hours.html. Elementor: Container + Star Rating / Icon + Text. */
.trust-cards { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.trust-cards > li { display: flex; flex: 1 1 148px; min-width: 0; }
.trust-card {
flex: 1 1 auto; min-width: 0;
display: flex; flex-direction: column; justify-content: center; gap: 3px;
padding: 11px 12px; border: 1px solid var(--c-line); border-radius: var(--r-md);
background: var(--c-bg); box-shadow: var(--shadow-card); color: var(--c-muted); text-decoration: none;
}
/* Value size follows the room the cards actually have (not the screen), so the component fits in any column */
.trust-cards { container-type: inline-size; }
@container (max-width: 359px) { .trust-cards .trust-card-value { font-size: 1rem; } }
@media (min-width: 1025px) { :root { --fs-value: 1.25rem; } .trust-card { padding: 14px 18px; } .trust-cards { gap: 12px; } }
.trust-card-value { display: flex; align-items: center; gap: 6px; font-size: var(--fs-value); font-weight: 800; line-height: 1.25; color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trust-card-value > .icon { width: 18px; height: 18px; color: var(--c-navy); }
.trust-card-label { font-size: var(--fs-xs); font-weight: 700; line-height: 1.35; color: var(--c-text); }
/* Google rating badge: multicolour "G" in a white circle, then 5,0 + stars / review count.
Elementor: Container (row) → Icon (SVG upload of i-google, white circle) + Heading "5,0" + Star Rating + Text. */
.trust-card--rating { flex-direction: row; align-items: center; gap: 10px; }
.g-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--c-line); }
.g-badge .icon { width: 18px; height: 18px; }
.g-body { display: flex; flex-direction: column; min-width: 0; }
.trust-card--rating .trust-card-value { gap: 5px; }
.trust-card--rating .stars-row { gap: 1px; }
.trust-card--rating .stars--sm .stars-row .icon { width: 12px; height: 12px; }
@media (min-width: 1025px) {
.g-badge { width: 38px; height: 38px; }
.g-badge .icon { width: 20px; height: 20px; }
.trust-card--rating .stars--sm .stars-row .icon { width: 14px; height: 14px; }
}
.trust-cards--on-dark .g-badge { border-color: transparent; }
.trust-card-prefix { font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); margin-right: -2px; }
a.trust-card { transition: border-color .2s var(--ease); }
a.trust-card .trust-card-label { text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 3px; }
a.trust-card:hover { border-color: var(--c-line-strong); color: var(--c-muted); }
a.trust-card:hover .trust-card-label { text-decoration-color: currentColor; color: var(--c-ink); }
/* On navy (final CTA) */
.trust-cards--on-dark .trust-card { background: rgba(255, 255, 255, .06); border-color: var(--c-on-dark-line); box-shadow: none; }
.trust-cards--on-dark .trust-card-value { color: #fff; }
.trust-cards--on-dark .trust-card-value > .icon { color: #fff; }
.trust-cards--on-dark .trust-card-label { color: var(--c-on-dark-muted); }
.trust-cards--on-dark a.trust-card:hover { border-color: rgba(255, 255, 255, .4); }
.trust-cards--on-dark a.trust-card:hover .trust-card-label { color: #fff; }
.trust-cards--on-dark .stars-base { color: rgba(255, 255, 255, .25); }
/* Opening hours: static by default; hero.js swaps the clock for a status dot only when data-live="true" */
.hero-status-dot { display: none; width: 8px; height: 8px; margin: 0 5px; border-radius: 50%; background: var(--c-line-strong); }
.hero-status[data-state] .trust-card-value > .icon { display: none; }
.hero-status[data-state] .hero-status-dot { display: inline-block; }
.hero-status[data-state="open"] .hero-status-dot { background: var(--c-ok); box-shadow: 0 0 0 4px var(--c-ok-bg); }
/* Icon tiles — ONE treatment for every icon that sits in a soft square:
service cards (lg 48), features & info cards (md 44), trust rows (sm 36). Bare inline icons
(buttons, meta lines, check lists) never get a tile. */
.service-card-icon, .feature-icon, .info-card-title .icon, .stat-icon {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
border-radius: var(--r-tile); background: var(--c-icon-bg); color: var(--c-navy);
}
/* Header & navigation ------------------------------------------------------ */
.site-header { position: relative; z-index: 50; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
@media (min-width: 1025px) { .site-header { position: sticky; top: 0; background: rgba(255, 255, 255, .97); } }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--header-h); }
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { width: 148px; height: auto; }
@media (min-width: 1025px) { .site-logo img { width: 172px; } }
.primary-nav { display: none; }
@media (min-width: 1025px) { .primary-nav { display: flex; } }
.nav-list { list-style: none; display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link {
display: inline-flex; align-items: center; gap: 4px;
min-height: 44px; padding: 0 12px; border-radius: var(--r-sm);
font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); text-decoration: none;
background: none; border: 0; cursor: pointer;
}
.nav-link:hover { background: var(--c-tint); color: var(--c-ink); }
.nav-link[aria-current="page"] { color: var(--c-navy); box-shadow: inset 0 -2px 0 var(--c-navy); border-radius: 0; }
.nav-link .icon { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.nav-link--has-sub { padding-right: 2px; }
.nav-sub-toggle { padding: 0 8px 0 4px; }
.nav-sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-sub {
position: absolute; top: calc(100% + 8px); left: -12px; z-index: 5;
display: none; flex-wrap: wrap; gap: 2px 8px; width: 520px; padding: 12px;
background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--shadow-pop);
list-style: none;
}
.nav-sub.is-open { display: flex; }
/* Invisible bridge over the 8px gap, so moving the mouse from "Servicii" to the panel keeps it open */
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; }
.nav-sub li { flex: 0 0 calc(50% - 4px); }
.nav-sub a {
display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: var(--r-sm);
font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); text-decoration: none;
}
.nav-sub a:hover { background: var(--c-tint); }
.nav-sub a .icon { width: 20px; height: 20px; color: var(--c-navy); }
.nav-sub .nav-sub-all { flex-basis: 100%; border-top: 1px solid var(--c-line); margin-top: 6px; padding-top: 6px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-phone {
display: none; align-items: center; font-weight: 800; color: var(--c-ink); white-space: nowrap;
text-decoration: underline 2px transparent; text-underline-offset: 5px;
transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.header-phone:hover, .header-phone:focus-visible { color: var(--c-navy); text-decoration-color: currentColor; }
.header-call { display: none; }
@media (min-width: 1025px) { .header-phone { display: inline-flex; margin-right: 8px; } .header-call { display: inline-flex; } }
.icon-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-width: 44px; height: 44px; padding: 0 12px;
border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-bg);
color: var(--c-ink); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; cursor: pointer;
}
.icon-btn .icon { width: 20px; height: 20px; }
.icon-btn--phone { padding: 0; width: 44px; color: var(--c-navy); }
@media (min-width: 1025px) { .menu-toggle, .icon-btn--phone { display: none; } }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--fs-xs); color: var(--c-muted); }
.breadcrumb li + li::before { content: "›"; margin-right: 4px; color: var(--c-muted); }
.breadcrumb a { color: var(--c-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--c-ink); font-weight: 600; }
/* Mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: var(--c-bg); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu[hidden] { display: none; }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); padding-inline: var(--gutter); border-bottom: 1px solid var(--c-line); }
.mobile-menu-body { flex: 1 0 auto; padding: 8px var(--gutter) 24px; }
.mm-list { list-style: none; }
.mm-list > li { border-bottom: 1px solid var(--c-line); }
.mm-link, .mm-group > summary {
display: flex; align-items: center; justify-content: space-between;
min-height: 58px; font-size: 1.125rem; font-weight: 700; color: var(--c-ink); text-decoration: none;
cursor: pointer; list-style: none;
}
.mm-group > summary::-webkit-details-marker { display: none; }
.mm-group > summary .icon { width: 20px; height: 20px; transition: transform .2s var(--ease); }
.mm-group[open] > summary .icon { transform: rotate(180deg); }
.mm-sub { list-style: none; display: flex; flex-direction: column; padding-bottom: 12px; }
.mm-sub a { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 600; color: var(--c-text); text-decoration: none; }
.mm-sub a .icon { width: 20px; height: 20px; color: var(--c-navy); }
.mobile-menu-foot { display: flex; flex-direction: column; gap: 12px; padding: 16px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--c-tint); border-top: 1px solid var(--c-line); }
.mobile-menu-foot .small { text-align: center; color: var(--c-muted); }
body.menu-open { overflow: hidden; }
/* 7. Hero ----------------------------------------------------------------- */
/* One hero system, three variants sharing the same type, spacing, trust cards and CTA pair:
.hero--reveal (homepage, animated) · .hero--service (service landing pages) · .hero--page (internal pages: breadcrumb + title + lead).
Order inside .hero-content = visual hierarchy: [breadcrumb] → H1 (what + where) → trust cards → Call/WhatsApp → supporting facts.
Home and service heroes have NO lead paragraph (client decision): the location line goes straight to the trust cards. .hero-lead is for .hero--page only. */
.hero { background: var(--c-tint); padding-block: var(--s-5) var(--s-6); }
.hero-inner { display: flex; flex-direction: column; gap: var(--s-5); }
.hero-content { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Phone: no visible breadcrumb in the hero, so the stats stay above the fold even with a 2-line H1
(Google still gets the BreadcrumbList from the JSON-LD). Elementor: Breadcrumbs widget hidden on mobile. */
@media (max-width: 767px) { .hero .breadcrumb { display: none; } }
.hero-headline { font-size: var(--fs-h1); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; color: var(--c-ink); }
.hero-headline-main { display: block; text-wrap: balance; }
/* "la domiciliu" highlight: hand-drawn swoosh under the phrase, drawn in on load.
Markup: la domiciliu
Elementor: Animated Headline → Highlighted, shape "Underline", color #19B5E6 at ~55% opacity. */
.hl { position: relative; isolation: isolate; white-space: nowrap; }
.hero-headline-main:has(.hl) { padding-bottom: .16em; } /* room for the swoosh above the location line */
.hl-mark { position: absolute; z-index: -1; left: -2%; bottom: -.2em; width: 104%; height: .3em; overflow: visible; pointer-events: none; }
.hl-mark path {
fill: none; stroke: var(--c-cyan); stroke-opacity: .6; stroke-width: 7; stroke-linecap: round;
stroke-dasharray: 1; stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
.hl-mark path { stroke-dashoffset: 1; animation: hm-draw .9s var(--ease) .55s forwards; }
}
@keyframes hm-draw { to { stroke-dashoffset: 0; } }
.hero-headline-sub { display: flex; align-items: center; gap: .3em; margin-top: .4em; font-size: var(--fs-h1-sub); font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--c-navy); }
.hero-headline-sub > .icon { width: 1em; height: 1em; }
.hero-lead { font-size: var(--fs-body); color: var(--c-text); text-wrap: pretty; }
@media (min-width: 1025px) { .hero-lead { font-size: var(--fs-lead); max-width: 52ch; } }
.hero-content > .trust-cards { margin-top: 4px; max-width: 520px; }
/* Supporting facts under the buttons: hours first, in bold */
.hero-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.hero-meta li { display: inline-flex; align-items: flex-start; gap: 7px; line-height: 1.45; }
.hero-meta .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--c-navy); }
.hero-meta strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.hero-meta a { font-weight: 700; color: var(--c-ink); text-decoration-color: var(--c-line-strong); }
.hero-media { position: relative; display: flex; flex-direction: column; gap: var(--s-4); }
/* No shadow on photography: the image sits flat, rounded 16px */
.hero-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 72% 40%; border-radius: var(--r-lg); background: var(--c-line); }
.hero--service .hero-image { aspect-ratio: 1 / 1; object-position: 50% 40%; }
/* Internal pages: no image, no trust cards — same type and spacing */
.hero--page .hero-content { max-width: 760px; }
/* Stats — "Home Medica în cifre" (partial stats.html), under the hero image on home + service pages
(and About, when built). Confirmed figures only. Three equal columns, number dominant,
hairline dividers; one row at every width. The stat icon is the small icon tile, white on the tinted hero. */
.stats { list-style: none; display: flex; }
.stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0; text-align: center; }
.stat + .stat { border-left: 1px solid var(--c-line-strong); }
.stat-icon { width: 40px; height: 40px; padding: 9px; margin-bottom: 6px; border-radius: 10px; background: var(--c-bg); color: var(--c-navy); }
.stat-value { font-size: var(--fs-stat); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--c-ink); white-space: nowrap; }
.stat-num { display: inline-block; text-align: center; font-variant-numeric: tabular-nums; }
.stat-plus { font-size: .72em; margin-left: 1px; vertical-align: .22em; color: var(--c-navy); }
.stat-label { font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; color: var(--c-muted); }
/* Phone + tablet: stats move above the photo and the hero tightens so rating, price, buttons and stats
all fit on a real phone screen (Safari ≈ 375×640 incl. the sticky call bar).
.hero-media dissolves (display: contents) and its image/stats are ordered inside .hero-inner.
Elementor: two copies of the stats container, one "hide on desktop" above the image, one "hide on mobile/tablet" under it. */
@media (max-width: 1024px) {
.hero-inner { gap: 16px; }
.hero-media { display: contents; }
.hero-content { order: 1; }
.hero-media .stats { order: 2; }
.hero-image { order: 3; }
.hero--service .hero-image { aspect-ratio: 4 / 3; }
.stat-icon { width: 32px; height: 32px; padding: 7px; margin-bottom: 4px; border-radius: 9px; }
}
@media (min-width: 1025px) {
.hero { padding-block: var(--s-8); }
.hero-inner { flex-direction: row; align-items: center; gap: var(--s-8); }
.hero-content { flex: 0 0 48%; gap: var(--s-4); }
.hero-media { flex: 1 1 0; min-width: 0; gap: var(--s-5); }
.hero-image { aspect-ratio: 5 / 4.6; object-position: 78% 50%; }
.hero--service .hero-image { aspect-ratio: 1 / 1; }
}
/* Authority band (partial authority.html) — DSP, Ministerul Sănătății, "Nu lucrăm cu" CNAS.
Home: right under the hero. Service pages: right after the prices.
Three equal columns with hairline dividers (like .stats); logo on top on phone, logo left from tablet up.
Logos are 3x PNGs (144px high). Elementor: Container (row) → 3 × Container: Image + Text (label + name). */
.authority { background: var(--c-bg); border-block: 1px solid var(--c-line); padding-block: var(--s-4); }
.authority-list { list-style: none; display: flex; }
.authority-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding-inline: 6px; }
.authority-item + .authority-item { border-left: 1px solid var(--c-line); }
.authority-logo-box { position: relative; flex: none; height: 44px; display: flex; align-items: center; justify-content: center; }
.authority-logo { height: 44px; width: auto; }
.authority-logo--wide { height: 30px; }
.authority-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.authority-label { font-size: .6875rem; font-weight: 600; color: var(--c-muted); }
.authority-name { font-size: var(--fs-xs); font-weight: 800; color: var(--c-ink); }
/* CNAS: logo greyed out + small red "×" badge — reads as "we don't work with" */
.authority-item--no .authority-logo { filter: grayscale(1); opacity: .45; }
.authority-x { position: absolute; top: -2px; right: -10px; width: 18px; height: 18px; border-radius: 50%; background: #D6453D; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--c-bg); }
.authority-x svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 3; fill: none; }
@media (min-width: 768px) {
.authority { padding-block: var(--s-5); }
.authority-list { justify-content: center; }
.authority-item { flex: 0 1 300px; flex-direction: row; justify-content: center; text-align: left; gap: var(--s-3); padding-inline: var(--s-5); }
.authority-logo-box, .authority-logo { height: 56px; }
.authority-logo--wide { height: 38px; }
.authority-label { font-size: var(--fs-label); }
.authority-name { font-size: var(--fs-sm); }
}
/* Shared card look — every card on the site: white, 1px border, 12px radius, --card-pad.
Link cards (service, related) get border-strong + --shadow-card on hover. */
.card, .service-card-link, .price-card, .info-card, .review-card, .reviews-summary {
background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md);
}
/* 8. Service cards -------------------------------------------------------- */
.service-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.service-card { display: flex; }
.service-card-link {
display: flex; align-items: center; gap: 14px; width: 100%;
padding: 16px; color: var(--c-text); text-decoration: none;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.service-card-link:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-card); color: var(--c-text); }
.service-card-icon { width: var(--tile-lg); height: var(--tile-lg); }
/* Service cards (home + all-services page): photo instead of the icon tile (64px phone · 72px tablet · 80px desktop) */
.service-card-thumb { flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--r-md); object-fit: cover; background: var(--c-line); }
@media (min-width: 768px) { .service-card-thumb { width: 72px; height: 72px; } }
@media (min-width: 1025px) { .service-card-thumb { width: 80px; height: 80px; } }
.service-card-icon .icon { width: 24px; height: 24px; }
.service-card-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.service-card-badge {
align-self: flex-start; margin-bottom: 4px; padding: 3px 10px; border-radius: var(--r-pill);
background: var(--c-icon-bg); color: var(--c-navy); font-size: var(--fs-xs); font-weight: 800; line-height: 1.4;
}
.service-card-title { font-size: 1.0625rem; font-weight: 800; color: var(--c-ink); line-height: 1.3; }
.service-card-text { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.45; }
.service-card-price { margin-top: 4px; font-size: var(--fs-sm); color: var(--c-muted); }
.service-card-price b { font-weight: 800; color: var(--c-ink); white-space: nowrap; }
.service-card-arrow { width: 20px; height: 20px; color: var(--c-navy); }
@media (min-width: 768px) {
.service-list { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.service-card { flex: 0 0 calc(50% - 8px); }
}
@media (min-width: 1025px) {
.service-list { gap: 20px; }
.service-card { flex: 0 0 calc((100% - 40px) / 3); }
.service-card-link { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px; }
.service-card-body { gap: 6px; }
.service-card-title { font-size: var(--fs-h3); }
.service-card-arrow { margin-top: auto; }
}
.service-more { display: flex; flex-direction: column; gap: 12px; margin-top: var(--s-6); }
.service-more-title { font-size: var(--fs-sm); font-weight: 800; color: var(--c-ink); }
/* 9. Price cards (TRUMED-style compact rows) ------------------------------ */
.price-grid { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1025px) {
.price-grid { flex-direction: row; align-items: stretch; gap: 20px; }
.price-grid > .price-card { flex: 1 1 0; min-width: 0; }
}
/* A single price card keeps a readable row length on desktop */
.price-grid--single { max-width: 620px; }
.price-card { display: flex; flex-direction: column; gap: 14px; padding: var(--card-pad); }
.price-card-title { font-size: var(--fs-h3); font-weight: 800; }
.price-card-desc { margin-top: 4px; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; }
.price-rows { list-style: none; display: flex; flex-direction: column; }
.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--c-line); }
.price-row:first-child { border-top: 0; padding-top: 4px; }
/* Long names wrap without leaving one word alone on the last line; "250 ml" never splits (markup) */
.price-row-name { color: var(--c-text); line-height: 1.4; text-wrap: pretty; }
.price-row-name small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--c-muted); }
.price-value { font-size: var(--fs-price); font-weight: 800; letter-spacing: -.01em; color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.3; }
.price-unit { font-weight: 700; margin-left: 3px; }
.price-from { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); margin-right: 4px; letter-spacing: 0; }
.price-card-foot { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; padding-top: 12px; border-top: 1px solid var(--c-line); }
.price-card .btn { margin-top: auto; }
/* Phone/tablet: the sticky call bar is always on screen, so the per-card button goes (shorter page).
Elementor: hide the Button widget on tablet + mobile. */
@media (max-width: 1024px) { .price-card > .btn-call { display: none; } }
.note { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.5; color: var(--c-text); }
.note .icon { width: 20px; height: 20px; color: var(--c-navy); margin-top: 1px; }
/* 10. Info cards, prose ----------------------------------------------------- */
.info-grid { display: flex; flex-direction: column; gap: 16px; }
.info-card { display: flex; flex-direction: column; gap: 14px; padding: var(--card-pad); }
.info-card-title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-h3); font-weight: 800; }
.info-card-title { gap: 12px; }
.info-card-title .icon { width: var(--tile-md); height: var(--tile-md); padding: 11px; }
.info-card p { line-height: 1.55; }
/* Phone/tablet: the info cards join into one card split by hairlines (no gaps, smaller icon tiles)
so "Cine vine / Ce include / Ce pregătești" reads as one compact block. */
@media (max-width: 1024px) {
.info-grid { gap: 0; }
.info-grid > .info-card { gap: 12px; }
.info-grid > .info-card + .info-card { border-top: 0; }
.info-grid > .info-card:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; }
.info-grid > .info-card:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 20px; }
.info-grid > .info-card:not(:first-child) { padding-top: 20px; }
.info-grid .info-card-title .icon { width: 36px; height: 36px; padding: 8px; }
.info-grid .check-list { gap: 8px; }
}
@media (min-width: 1025px) {
.info-grid { flex-direction: row; gap: 20px; }
.info-card { flex: 1 1 0; min-width: 0; }
}
.prose { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1025px) { .prose { max-width: 66ch; } }
.prose-subtitle { font-size: 1.0625rem; font-weight: 800; color: var(--c-ink); margin-top: 6px; }
/* Legal pages (privacy policy): one readable column, numbered H2s, plain bullet lists.
Elementor: one Container (max 760px) with Heading + Text Editor widgets. */
.legal { max-width: var(--container-text); }
.legal h2 { font-size: var(--fs-h3); font-weight: 800; color: var(--c-ink); margin-top: var(--s-5); scroll-margin-top: calc(var(--header-h) + 16px); }
.legal h2:first-child { margin-top: 0; }
.legal ul { display: flex; flex-direction: column; gap: 8px; padding-left: 1.2em; list-style: disc; }
.legal li { line-height: 1.6; }
.legal p, .legal li { color: var(--c-text); }
.legal-updated { font-size: var(--fs-sm); color: var(--c-muted); }
/* 11. Features ("De ce Home Medica") ------------------------------------ */
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 22px; }
.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature-icon { width: var(--tile-md); height: var(--tile-md); }
.feature-icon .icon { width: 22px; height: 22px; }
.feature-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.feature-title { font-size: 1.0625rem; font-weight: 800; line-height: 1.35; }
.feature-text { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.55; }
@media (min-width: 768px) {
.feature-list { flex-direction: row; flex-wrap: wrap; gap: 28px 24px; }
.feature { flex: 0 0 calc(50% - 12px); }
}
.why-layout { display: flex; flex-direction: column; gap: var(--s-5); }
.why-media { display: none; }
@media (min-width: 1025px) {
.why-layout { flex-direction: row; align-items: center; gap: var(--s-8); }
.why-media { display: block; flex: 0 0 40%; }
.why-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); }
.why-body { flex: 1 1 0; }
.why-body .feature-list { flex-direction: column; gap: 24px; }
.why-body .feature { flex: 1 1 auto; }
}
/* 12. Related services (thumbnail rows) ------------------------------------ */
.related-list { list-style: none; display: flex; flex-direction: column; }
.related-item { border-top: 1px solid var(--c-line); }
.related-item:last-child { border-bottom: 1px solid var(--c-line); }
.related-link { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 0; color: var(--c-ink); text-decoration: none; }
.related-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--c-line); }
.related-thumb--icon { display: inline-flex; align-items: center; justify-content: center; background: var(--c-icon-bg); color: var(--c-navy); }
.related-thumb--icon .icon { width: 26px; height: 26px; }
.related-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.related-name { font-weight: 800; line-height: 1.3; }
.related-price { font-size: var(--fs-sm); color: var(--c-muted); }
.related-more { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); font-weight: 700; color: var(--c-navy); white-space: nowrap; }
.related-more .icon { width: 16px; height: 16px; }
.related-link:hover .related-name { color: var(--c-navy); }
@media (min-width: 1025px) {
.related-list { flex-direction: row; gap: 20px; }
.related-item { flex: 1 1 0; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); }
.related-item:last-child { border-bottom: 1px solid var(--c-line); }
.related-link { padding: 16px 20px; }
}
/* --grid: any number of items, 2 per row on phone/tablet (compact: 44px thumb, no "Vezi"),
3 per row on desktop (same cards as above). Elementor: Loop Grid / Image Box, 2 / 2 / 3 columns. */
.related-list--grid { flex-direction: row; flex-wrap: wrap; column-gap: 12px; }
.related-list--grid .related-item { flex: 0 0 calc(50% - 6px); min-width: 0; }
.related-list--grid .related-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-line); }
.related-list--grid .related-link { gap: 10px; min-height: 72px; padding: 10px 0; }
.related-list--grid .related-thumb { width: 44px; height: 44px; }
.related-list--grid .related-name { font-size: .875rem; }
.related-list--grid .related-price { font-size: var(--fs-xs); }
/* Very small phones (320px): long single words ("Monitorizare", "Intramusculară") must not spill out */
.related-list--grid .related-name, .related-list--grid .related-price { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 359px) {
.related-list--grid .related-link { gap: 8px; }
.related-list--grid .related-thumb { width: 36px; height: 36px; }
}
/* --text: secondary services on the home page, name + price only (compact) */
.related-list--text .related-link { min-height: 58px; padding-block: 8px; }
.related-list--grid .related-more { display: none; }
@media (min-width: 768px) {
.related-list--grid { column-gap: 24px; }
.related-list--grid .related-item { flex-basis: calc(50% - 12px); }
.related-list--grid .related-link { gap: 14px; min-height: 76px; padding: 12px 0; }
.related-list--grid .related-thumb { width: 56px; height: 56px; }
.related-list--grid .related-name { font-size: 1rem; }
.related-list--grid .related-price { font-size: var(--fs-sm); }
.related-list--grid .related-more { display: inline-flex; }
.related-list--text .related-link { min-height: 60px; padding-block: 10px; }
}
@media (min-width: 1025px) {
.related-list--grid { gap: 16px 20px; }
.related-list--grid .related-item { flex: 0 0 calc((100% - 40px) / 3); }
.related-list--grid .related-link { padding: 14px 18px; }
.related-list--text .related-link { min-height: 0; }
}
/* 13. Reviews ---------------------------------------------------------------- */
/* Rating summary + review slider. Phone/tablet: summary card under the heading. Desktop: the summary
becomes a slim row next to the heading, so the slider gets the full width. Slider shows whole cards
only (1 phone · 2 tablet · 3 desktop), never a half-visible card; arrows + dots appear only when
there are more cards than fit. Without JS the cards simply stack.
Elementor: Testimonial Carousel (slides per view 1 / 2 / 3). */
.reviews-layout { display: flex; flex-direction: column; gap: 16px; }
.reviews-layout > .slider { min-width: 0; }
.reviews-summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--card-pad); text-align: center; }
.reviews-summary-label { font-size: var(--fs-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-navy); }
.reviews-score { font-size: 3rem; font-weight: 800; line-height: 1.05; color: var(--c-ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.reviews-summary .link-arrow { margin-top: 6px; }
.reviews-g { display: none; }
@media (min-width: 1025px) {
.reviews-head { align-items: center; }
.reviews-summary { flex: 0 0 auto; flex-direction: row; gap: 10px; padding: 10px 20px 10px 12px; border-radius: var(--r-pill); }
.reviews-g { display: inline-flex; }
.reviews-summary-label { display: none; }
.reviews-score { font-size: 1.75rem; }
.reviews-summary .stars--lg .stars-row .icon { width: 18px; height: 18px; }
.reviews-summary .link-arrow { margin: 0 0 0 6px; padding-left: 16px; border-left: 1px solid var(--c-line); }
}
.review-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
/* Recenzii page: every review visible, no slider — 1 / 2 / 3 columns (Elementor: the reviews plugin in grid mode) */
@media (min-width: 768px) {
.review-list--grid { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.review-list--grid > .review-card { flex: 1 1 calc(50% - 8px); }
}
@media (min-width: 1025px) {
.review-list--grid { gap: 20px; }
.review-list--grid > .review-card { flex: 0 1 calc((100% - 40px) / 3); }
}
/* Contact page: phone / e-mail as the main value of a card */
.contact-value { font-size: var(--fs-price); font-weight: 800; color: var(--c-ink); text-decoration: none; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.contact-value:hover { text-decoration: underline; }
.info-card .link-arrow { font-size: var(--fs-sm); }
.review-card { display: flex; flex-direction: column; gap: 12px; padding: var(--card-pad); min-width: 0; }
.review-meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); }
.review-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-icon-bg); color: var(--c-navy); font-weight: 800; }
/* Reviewer's Google profile photo + small Google "G" badge in the corner */
.review-avatar--photo { position: relative; width: 44px; height: 44px; background: var(--c-line); }
.review-avatar--photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.review-g { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--c-bg); box-shadow: 0 0 0 1px var(--c-line); }
.review-author { display: block; font-weight: 800; color: var(--c-ink); }
.review-source { color: var(--c-muted); font-size: var(--fs-xs); }
.review-text { font-size: var(--fs-body); line-height: 1.6; color: var(--c-text); flex: 1 1 auto; }
/* Tablet + desktop slider: long reviews stop after 5 lines; "Citește tot" (added by site.js only
when the text is cut) opens the rest. Phone keeps full text. Elementor: reviews plugin "read more". */
.review-more { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--c-navy); cursor: pointer; }
.review-more:hover { text-decoration: underline; }
@media (min-width: 768px) {
.slider .review-text p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.slider .review-card.is-expanded .review-text p { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
}
/* Slider — generic, reusable ([data-slider] > .slider-track + .slider-controls). Behaviour in site.js. */
.slider { --per-view: 1; --slide-gap: 12px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .slider { --per-view: 2; --slide-gap: 16px; } }
@media (min-width: 1025px) { .slider { --per-view: 3; --slide-gap: 20px; } }
.slider.is-ready .slider-track {
flex-direction: row; gap: var(--slide-gap);
overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slider.is-ready .slider-track::-webkit-scrollbar { display: none; }
.slider.is-ready .slider-track > * {
flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--slide-gap)) / var(--per-view));
scroll-snap-align: start;
}
/* One card per view: each card keeps its own height (no empty card when another review is longer) */
@media (max-width: 767px) { .slider.is-ready .slider-track { align-items: flex-start; } }
.slider-track:focus-visible { outline-offset: 4px; border-radius: var(--r-md); }
.slider-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.slider-controls[hidden] { display: none; }
.slider-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border: 1px solid var(--c-line-strong); border-radius: 50%;
background: var(--c-bg); color: var(--c-ink); cursor: pointer;
transition: border-color .2s var(--ease), opacity .2s var(--ease);
}
.slider-btn .icon { width: 20px; height: 20px; }
.slider-btn:hover:not(:disabled) { border-color: var(--c-ink); }
.slider-btn:disabled { opacity: .35; cursor: default; }
.slider-dots { display: flex; align-items: center; gap: 2px; }
.slider-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.slider-dot::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--c-line-strong); transition: width .25s var(--ease), background-color .25s var(--ease); }
.slider-dot[aria-current="true"]::before { width: 20px; background: var(--c-navy); }
@media (prefers-reduced-motion: reduce) { .slider-dot::before, .slider-btn { transition: none; } }
/* 14. FAQ — native , matches Elementor's nested Accordion ------- */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-question {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
min-height: 60px; padding: 16px 0; cursor: pointer; list-style: none;
font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: var(--c-ink);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--c-navy); }
.faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-icon-bg); color: var(--c-navy); transition: transform .25s var(--ease); }
.faq-icon .icon { width: 16px; height: 16px; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 0 20px; color: var(--c-text); }
@media (min-width: 1025px) { .faq-answer { padding-right: 48px; max-width: 72ch; } }
.faq-answer p + p { margin-top: 10px; }
/* 16. CTA band + footer (one continuous navy block) ------------------------ */
.cta-band { background: var(--c-ink); color: var(--c-on-dark-muted); padding-block: var(--section-y) var(--s-6); }
.cta-band-inner { display: flex; flex-direction: column; gap: var(--s-5); }
.cta-band-copy, .cta-band-actions { display: flex; flex-direction: column; gap: var(--s-4); }
.cta-band-title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.cta-band-text { font-size: var(--fs-body); }
.cta-band-copy > .trust-cards { max-width: 440px; }
.cta-band-phone { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.375rem); font-weight: 800; color: #fff; text-decoration: none; letter-spacing: -.01em; }
.cta-band-phone:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; }
.cta-band-phone .icon { width: .75em; height: .75em; color: var(--c-cyan); }
.cta-band-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-sm); }
.cta-band-meta span { display: inline-flex; align-items: center; gap: 8px; }
.cta-band-meta .icon { width: 18px; height: 18px; color: #fff; }
@media (min-width: 1025px) {
.cta-band-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-8); }
.cta-band-copy { flex: 1 1 0; }
.cta-band-actions { flex: 0 0 auto; align-items: flex-start; }
}
.site-footer { background: var(--c-ink); color: var(--c-on-dark-muted); padding-block: 0 var(--s-6); font-size: var(--fs-sm); }
.site-footer > .container { border-top: 1px solid var(--c-on-dark-line); padding-top: var(--s-6); }
.footer-top { display: flex; flex-direction: column; gap: var(--s-6); }
.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
.footer-brand img { width: 164px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-5); }
.footer-col { flex: 1 1 calc(50% - 12px); min-width: 150px; display: flex; flex-direction: column; gap: 12px; }
.footer-title { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { color: var(--c-on-dark-muted); text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact .icon { width: 18px; height: 18px; color: #fff; margin-top: 3px; }
.footer-legal { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-on-dark-line); display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-xs); color: var(--c-on-dark-muted); }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; }
.footer-legal-links a { color: var(--c-on-dark-muted); }
/* ANPC SAL pictogram: shown at its official size, never scaled */
.footer-sal { display: inline-flex; align-self: flex-start; margin-top: 6px; border-radius: 6px; overflow: hidden; }
.footer-sal img { display: block; width: 201px; height: 50px; }
.footer-disclaimer { display: flex; gap: 8px; align-items: flex-start; color: #fff; font-weight: 600; }
.footer-disclaimer .icon { width: 16px; height: 16px; margin-top: 2px; color: #fff; }
@media (min-width: 1025px) {
.footer-top { flex-direction: row; justify-content: space-between; gap: var(--s-8); }
.footer-cols { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: var(--s-8); }
.footer-col { flex: 0 1 auto; }
}
/* 17. Sticky call bar (mobile & tablet) ------------------------------------ */
.call-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
display: flex; gap: 10px;
padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255, 255, 255, .98); border-top: 1px solid var(--c-line); box-shadow: var(--shadow-bar);
}
.call-bar .btn { min-height: var(--btn-h); }
.call-bar .btn-call { flex: 1 1 auto; padding: 0 16px; }
.call-bar .btn-whatsapp { flex: 0 0 auto; padding: 0 16px; }
/* Smallest phones: WhatsApp keeps its icon, the word goes (aria-label stays) — never overflows */
@media (max-width: 359px) { .call-bar .btn-whatsapp { width: var(--btn-h); padding: 0; } .call-bar .btn-text { display: none; } }
@media (min-width: 1025px) { .call-bar { display: none; } }
body.menu-open .call-bar { display: none; }
/* After hours (data-state="closed", set by site.js): the phone shrinks to an outline icon button and
WhatsApp becomes the main, navy button — "Scrie-ne, te sunăm la 7:00".
Elementor: two copies of the bar, switched by a small script, or the same class toggle in an HTML widget. */
.call-bar .btn-text-closed { display: none; }
.call-bar[data-state="closed"] .btn-call { flex: 0 0 var(--btn-h); padding: 0; background: var(--c-bg); border-color: var(--c-line-strong); }
.call-bar[data-state="closed"] .btn-call .btn-label { display: none; }
.call-bar[data-state="closed"] .btn-whatsapp { flex: 1 1 auto; width: auto; padding: 0 14px; background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.call-bar[data-state="closed"] .btn-text { display: none; }
.call-bar[data-state="closed"] .btn-text-closed { display: inline; }
/* Smallest phones (320px): the after-hours text is ~200px at 16px and pushed the bar 21px off screen.
Slightly smaller type and padding make it fit; min-width 0 + ellipsis is only a safety net. */
@media (max-width: 359px) {
.call-bar[data-state="closed"] .btn-whatsapp { min-width: 0; padding: 0 10px; gap: 6px; font-size: .875rem; }
.call-bar[data-state="closed"] .btn-text-closed { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* 18. Placeholders & utilities ------------------------------------------- */
/* Anything in .ph / .ph-block / .ph-photo is NOT verified and must be replaced before launch. */
.ph {
background: var(--c-ph-bg); color: var(--c-ph);
border: 1px dashed var(--c-ph-line); border-radius: 4px;
padding: 0 .3em; font-style: normal;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.section--ink .ph, .cta-band .ph, .site-footer .ph { background: rgba(255, 255, 255, .08); color: #D6E2F0; border-color: rgba(255, 255, 255, .4); }
.ph-block {
display: flex; flex-direction: column; gap: 6px;
padding: 12px 14px; border: 1px dashed var(--c-ph-line); border-radius: var(--r-sm);
background: var(--c-ph-bg); color: var(--c-ph); font-size: var(--fs-sm); line-height: 1.5;
}
.ph-label { align-self: flex-start; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ph); }
.ph-photo {
width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
border: 1px dashed var(--c-ph-line); border-radius: var(--r-md); background: var(--c-ph-bg);
color: var(--c-ph); font-size: var(--fs-xs); font-weight: 700; text-align: center; padding: 16px;
}
.ph-photo .icon { width: 34px; height: 34px; }
.check-list li.ph-item { color: var(--c-ph); }
.check-list li.ph-item > .icon { color: var(--c-ph-line); }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.text-center { text-align: center; }
/* 16. Brand signatures ---------------------------------------------------------
The details that make Home Medica recognisable: the "Tu rămâi acasă. Noi venim." line,
the house from the logo, the live arrival time, the WhatsApp message builder and the fridge card. Elementor: Custom CSS on the site (Site Settings → Custom CSS). */
/* Dark "ink" button: secondary action where cyan (reserved for calls) is not right */
.btn-ink { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.btn-ink:hover { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.btn-ink .icon { color: #fff; }
/* Small label above a section title */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-navy); }
.eyebrow .icon { width: 16px; height: 16px; }
/* Live arrival time in the hero meta row */
.arrival strong { padding: 1px 7px; border-radius: 6px; background: var(--c-icon-bg); color: var(--c-ink); }
/* Signature line: final band + footer */
.brand-signature span { color: var(--c-cyan); }
.footer-signature { font-size: 1.0625rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.cta-band { position: relative; overflow: hidden; }
.cta-band-inner { position: relative; }
.brand-house { position: absolute; right: -40px; bottom: -30px; width: 260px; height: auto; fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
@media (min-width: 1025px) { .brand-house { width: 440px; right: 2%; bottom: -60px; } }
/* "Sună acum" phone icon rings briefly every few seconds (hero, final band, sticky bar) */
@keyframes hm-ring {
0%, 14%, 100% { transform: rotate(0); }
2%, 6%, 10% { transform: rotate(-14deg); }
4%, 8%, 12% { transform: rotate(14deg); }
}
.hero-actions .btn-call .icon, .cta-band .btn-call .icon, .call-bar .btn-call .icon { animation: hm-ring 5s var(--ease) 2s infinite; transform-origin: 50% 60%; }
@media (prefers-reduced-motion: reduce) { .hero-actions .btn-call .icon, .cta-band .btn-call .icon, .call-bar .btn-call .icon { animation: none; } }
/* WhatsApp message builder ("Scrie-ne în 10 secunde") */
.wa-builder { display: flex; flex-direction: column; gap: var(--s-5); }
.wa-builder-head .section-title { margin-bottom: var(--s-2); }
.wa-steps { display: flex; flex-direction: column; gap: var(--s-5); }
.wa-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.wa-legend { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 800; color: var(--c-ink); }
.wa-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-ink); color: #fff; font-size: .8125rem; }
.wa-options { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-opt { position: relative; cursor: pointer; }
.wa-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wa-opt span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-ink); font-size: var(--fs-sm); font-weight: 700; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.wa-opt:hover span { border-color: var(--c-ink); }
.wa-opt input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.wa-opt input:focus-visible + span { outline: 2px solid var(--c-navy); outline-offset: 2px; }
.wa-result { display: flex; flex-direction: column; gap: 12px; padding: var(--card-pad); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); }
.wa-result-label { font-size: var(--fs-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.wa-bubble { position: relative; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: var(--c-tint); color: var(--c-ink); font-size: var(--fs-sm); line-height: 1.55; }
.wa-result .btn-row .btn { flex: 1 1 auto; }
.wa-note { margin-top: 8px; font-size: var(--fs-xs); color: var(--c-muted); }
@media (min-width: 1025px) {
.wa-builder { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: var(--s-5) var(--s-7); }
.wa-builder-head { flex: 0 0 100%; }
.wa-steps { flex: 1 1 0; min-width: 0; }
.wa-result { flex: 0 0 380px; position: sticky; top: calc(var(--header-h) + 24px); }
}
/* Fridge card: teaser on the home page + printable page */
.fridge-layout { display: flex; flex-direction: column; gap: var(--s-6); }
.fridge-body { display: flex; flex-direction: column; gap: var(--s-4); }
.fridge-text { font-size: var(--fs-lead); text-wrap: pretty; }
.fridge-stage { position: relative; display: flex; justify-content: center; padding-top: 14px; }
.fridge-stage .fridge-card { transform: rotate(-2deg); box-shadow: var(--shadow-pop); }
.fridge-magnet { position: absolute; top: 2px; left: 50%; z-index: 1; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7FD6F2, var(--c-cyan) 55%, var(--c-cyan-600)); box-shadow: 0 2px 4px rgba(11, 37, 69, .25); }
.fridge-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; max-width: 440px; padding: 24px 26px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; }
.fridge-logo { width: 170px; margin-bottom: 6px; }
.fridge-kicker { font-size: var(--fs-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-navy); }
.fridge-phone { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem); font-weight: 800; line-height: 1.1; color: var(--c-ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fridge-phone .icon { width: .7em; height: .7em; color: var(--c-cyan); }
.fridge-sub { font-size: var(--fs-sm); color: var(--c-text); }
.fridge-services { padding-block: 8px; margin-block: 4px; border-block: 1px solid var(--c-line); width: 100%; font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); }
.fridge-signature { font-size: 1.125rem; font-weight: 800; color: var(--c-ink); }
.fridge-signature span { color: var(--c-navy); }
.fridge-foot { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; }
@media (min-width: 1025px) {
.fridge-layout { flex-direction: row; align-items: center; gap: var(--s-8); }
.fridge-stage { flex: 0 0 44%; }
.fridge-body { flex: 1 1 0; }
}
.print-sheet { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
.cut-line { width: 100%; max-width: 560px; border-top: 2px dashed var(--c-line-strong); text-align: center; line-height: 0; }
.cut-line span { display: inline-block; padding: 0 10px; background: var(--c-bg); font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); line-height: 1; transform: translateY(-50%); }
.fridge-print-note { margin-top: var(--s-5); text-align: center; }
@media print {
@page { size: A4; margin: 12mm; }
.page-fridge .site-header, .page-fridge .site-footer, .page-fridge .call-bar, .page-fridge .hero,
.page-fridge .cta-band, .page-fridge .fridge-print-note, .page-fridge .skip-link { display: none !important; }
.page-fridge { padding: 0; }
.page-fridge .section { padding: 0; }
.page-fridge .print-sheet { gap: 10mm; }
.page-fridge .fridge-card { max-width: none; width: 170mm; padding: 9mm 11mm; border: 1.5px solid #9AA9BA; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.page-fridge .fridge-logo { width: 55mm; }
.page-fridge .fridge-phone { font-size: 30pt; }
.page-fridge .cut-line { max-width: none; }
}
/* 404: the house with a question mark */
.nf-house { width: 88px; height: auto; margin-bottom: var(--s-4); fill: none; stroke: var(--c-navy); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.nf-house .nf-q { stroke: var(--c-cyan); }
/* 19. Contact form (Contact page only) ------------------------------------- */
.contact-form { display: flex; flex-direction: column; gap: 18px; padding: var(--card-pad); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); }
.form-row { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 768px) { .form-row { flex-direction: row; } .form-row > .form-field { flex: 1 1 0; min-width: 0; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); }
.form-field .optional { font-weight: 500; color: var(--c-muted); }
.req { color: #B42318; }
.form-field input[type="text"], .form-field input[type="tel"], .form-field input[type="email"], .form-field textarea {
width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
background: var(--c-bg); color: var(--c-text); font: inherit; font-size: 1rem; line-height: 1.4;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #7A8799; }
.form-field input:hover, .form-field textarea:hover { border-color: var(--c-ph-line); }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--c-navy); box-shadow: 0 0 0 3px rgba(29, 78, 137, .18); }
.form-field [aria-invalid="true"] { border-color: #B42318; }
.form-error { font-size: var(--fs-xs); font-weight: 600; color: #B42318; }
.form-check { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 6px; align-items: start; }
.form-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--c-ink); }
.form-check label { font-weight: 500; line-height: 1.5; color: var(--c-text); }
.form-check .form-error { grid-column: 2; }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit { align-self: flex-start; }
@media (max-width: 767px) { .form-submit { width: 100%; } }
.form-submit[disabled] { opacity: .6; cursor: progress; }
.form-note, .form-aside-note { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; }
.form-aside-note { margin-top: var(--s-3); font-size: var(--fs-sm); }
.form-status:empty { display: none; }
.form-status { padding: 14px 16px; border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: 1.5; }
.form-status.is-ok { background: var(--c-ok-bg); color: var(--c-ok); border: 1px solid rgba(30, 127, 85, .25); }
.form-status.is-error { background: #FEF3F2; color: #912018; border: 1px solid rgba(180, 35, 24, .25); }
.form-status a { color: inherit; font-weight: 700; }