/* Replaces the design's inline style="" attributes (Oxygen drops them). */
.dwe-s-02610d{--i:12 !important}
.dwe-s-0454c2{max-width:466px !important}
.dwe-s-097521{margin-inline:auto !important}
.dwe-s-0ac8d9{max-width:782px !important}
.dwe-s-0bd7f6{max-width:580px !important}
.dwe-s-1cdb0a{--i:1 !important}
.dwe-s-2b02b6{max-width:587px !important}
.dwe-s-2caa96{margin-top:1.75rem !important}
.dwe-s-31ee11{--i:4 !important}
.dwe-s-3aa23c{--i:3 !important}
.dwe-s-3d7898{max-width:575px !important}
.dwe-s-3f01ba{max-width:784px !important}
.dwe-s-403688{max-width:700px !important}
.dwe-s-40a2bc{max-width:595px !important}
.dwe-s-446a8e{--i:8 !important}
.dwe-s-46b35c{aspect-ratio:1400/1019 !important}
.dwe-s-48b58b{color:inherit !important;text-decoration:none !important}
.dwe-s-4b3ff0{max-width:795px !important}
.dwe-s-4d20c8{--i:9 !important}
.dwe-s-52d2fd{max-width:748px !important}
.dwe-s-550081{--x:60.5 !important}
.dwe-s-5e3b32{max-width:777px !important}
.dwe-s-5f30a6{--i:10 !important}
.dwe-s-642536{max-width:785px !important}
.dwe-s-697b72{aspect-ratio:1400/550 !important}
.dwe-s-6e3e4d{aspect-ratio:957/952 !important}
.dwe-s-754d84{margin-top:clamp(2rem,1.4rem + 2vw,3.5rem) !important}
.dwe-s-7e55d0{padding-top:calc(var(--h-glava) + clamp(2.5rem,2rem + 3vw,4.5rem)) !important}
.dwe-s-90c95b{color:var(--text-obratno) !important}
.dwe-s-95dce4{max-width:698px !important}
.dwe-s-9b294b{margin-top:clamp(1.75rem,1.2rem + 1.8vw,3rem) !important}
.dwe-s-9b54a3{justify-content:center !important}
.dwe-s-9fc7a3{max-width:730px !important}
.dwe-s-a0897c{max-width:624px !important}
.dwe-s-ada59b{max-width:779px !important}
.dwe-s-b228eb, .dwe-s-b228eb>svg{color:var(--oranj) !important;flex:none !important}
.dwe-s-b74e55{max-width:384px !important}
.dwe-s-b8148c{max-width:60ch !important}
.dwe-s-b8898f{--i:11 !important}
.dwe-s-b995c8{max-width:860px !important}
.dwe-s-bb14b0{--i:2 !important}
.dwe-s-bd9a23{max-width:780px !important}
.dwe-s-c6eb60{aspect-ratio:1400/776 !important}
.dwe-s-c7f5bf{--x:39.3 !important}
.dwe-s-d1f2c9{max-width:706px !important}
.dwe-s-df1af0{max-width:783px !important}
.dwe-s-e915eb{max-width:786px !important}
.dwe-s-e96e29{--i:7 !important}
.dwe-s-eba0c5{max-width:597px !important}
.dwe-s-ef0b7b{--i:5 !important}
.dwe-s-f0c548{max-width:510px !important}
.dwe-s-f2b100{--i:6 !important}
.dwe-s-f816ff{max-width:527px !important}
.dwe-s-f854d1{max-width:789px !important}
/* <p> with an icon became <div class="dwe-p">; the design's p-tag rules for them. */
.nzok__karta .dwe-p{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;font-size:var(--fs-malak);font-weight:300;color:rgba(244,240,234,.85)}
.nzok__karta .dwe-p svg{color:var(--oranj);margin-top:.3rem;flex:none}
@media (max-width:640px){.nzok__karta .dwe-p{text-align:left}}
/* --- Fixes to the design itself (not conversion issues) ----------------------------- */
/* Photos beside text were meant to be sticky (`.za__foto{position:sticky; top: header + 1.5rem}`),
   but a later `figure.za__foto{position:relative}` wins, so that `top` just pushes the photo
   ~90px down: out of its section and onto the next heading on phones, and 16px out on some
   desktop pages. Drop the leftover offset; the photo sits at the top of its column. */
figure.za__foto{top:auto}
/* The info cards style every span inside them (`.karta-info span{display:block; color:…}`),
   and the icon badge is a span too: its icon ended up 11px off-centre and grey instead of
   orange. Give the badge its own layout and colour back (the hover rule still overrides it). */
.karta-info .karta-info__ikona{display:grid;place-items:center;margin-bottom:0;color:var(--oranj)}
/* --- Changes the client asked for --------------------------------------------------- */
/* The service circles and the "Виж всички услуги" button no longer bob up and down. */
.usluga__krug,.btn--pil{animation:none}
/* The FAQ runs the full width of the content column, questions and answers alike: the design
   capped the list at 78ch (the right third of each row stayed empty on desktop) and the
   answer paragraphs at 64ch. */
.vyprosi,.vypros__telo p{max-width:none}
/* "Всички услуги" on phones and tablets. The design put it bottom-left, a dark pill resting
   on the call bar: it disappeared on the dark sections and jumped with the bar whenever the
   browser's own toolbar slid in or out. It is now an orange tab on the left edge at mid-height,
   upright like the desktop one and no wider than the page gutter, and the list opens beside it. */
@media (max-width:1199px){
  .strana-uslugi{top:50%;bottom:auto}
  .strana-uslugi__tab{position:relative;writing-mode:vertical-rl;padding:.95rem .3rem;border:1px solid rgba(255,246,239,.3);border-left:0;border-radius:0 var(--r-lg) var(--r-lg) 0;background:var(--oranj);color:#FFF6EF;font-size:.62rem;line-height:1;letter-spacing:.18em;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);transform:translateY(-50%)}
  .strana-uslugi__tab::before{content:none}
  /* the tab is narrow: this widens the area that takes the tap */
  .strana-uslugi__tab::after{content:'';position:absolute;inset:-.5rem -.75rem -.5rem 0}
  .strana-uslugi__tab:hover,.strana-uslugi__tab:focus-visible{padding:.95rem .3rem}
  .strana-uslugi__panel{left:2.1rem;top:50%;bottom:auto;transform:translate(-10px,-50%)}
  .strana-uslugi:hover .strana-uslugi__panel,.strana-uslugi:focus-within .strana-uslugi__panel,.strana-uslugi[data-otvoren="1"] .strana-uslugi__panel{transform:translate(0,-50%)}
}
/* --- Fixes to the design itself, continued ------------------------------------------ */
/* Gallery masonry as a grid instead of CSS columns (Safari mis-paints animated boxes inside
   columns; see doc3-wp.js, which adds `.dwe-zid` and sets each frame's row span). Same number
   of columns at the same widths as the design's `column-count`. */
.mozaika.dwe-zid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:2px;align-items:start}
@media (max-width:1180px){.mozaika.dwe-zid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.mozaika.dwe-zid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mozaika--usluga.dwe-zid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.mozaika--usluga.dwe-zid{grid-template-columns:minmax(0,1fr)}}
.mozaika.dwe-zid .kadar{margin:0}
.mozaika.dwe-zid .kadar--shiroko{grid-column:1/-1;width:100%;margin-inline:auto}
/* --- Changes the client asked for, continued ---------------------------------------- */
/* "Къде се намираме": a map is visible before Google's is loaded. The design showed a made-up
   street pattern there; this is a drawing of the real streets around the clinic (karta.svg,
   from OpenStreetMap data, made by tools/make-map.py — hence the credit). The clinic is at
   66% / 46% of the drawing, the point the design's pin is anchored to, and that position keeps
   it there at every size; the tip of the pin is 11px above its anchor, hence the offset.
   Google's map still loads only on "Покажи картата". */
.karta-motiv{background:#EAE4D9 url(../img/karta.svg) 66% calc(46% - 11px)/cover no-repeat}
.karta-motiv::before{content:none}
.karta-motiv::after{content:'© OpenStreetMap';inset:.55rem .6rem auto auto;padding:.12rem .5rem;border-radius:999px;background:rgba(250,248,245,.86);font-size:.6rem;line-height:1.5;letter-spacing:.02em;color:var(--text-mek)}
@media (max-width:820px){.karta-motiv{background-size:auto 210%}}
/* Later the client asked for Google's map itself to be there all the time; doc3-wp.js now adds
   it without the click. The design hides the placeholder the moment the iframe is added and the
   box stays empty until Google answers; here the drawn map and the pin stay behind the iframe
   and the live map simply covers them. On wide screens the info panel is hidden once the map
   is in, as in the design (Google's own card carries the name, address and directions). On
   phones Google shows no such card, so the panel stays under a square map, without the
   "Покажи картата" button: the address, hours, phone and "Упътвания" remain one tap away.
   Tablets up to 1023px get the same arrangement: at those widths the design's 21:8 box makes
   a short map and Google's card covers much of it. The panel rules repeat the design's own
   ones for phones, which stop at 820px. */
.mestopolojenie.karta-zaredena .mestopolojenie__rezerva{display:block;position:absolute;inset:0;aspect-ratio:auto}
.mestopolojenie.karta-zaredena .karta-pin{display:block}
.mestopolojenie.karta-zaredena .mestopolojenie__nadpis,.mestopolojenie.karta-zaredena .karta-start{display:none}
@media (max-width:1023px){
  .mestopolojenie.karta-zaredena{aspect-ratio:auto}
  .mestopolojenie.karta-zaredena .mestopolojenie__rezerva{position:relative;inset:auto;aspect-ratio:1/1;max-height:440px}
  .mestopolojenie.karta-zaredena .mestopolojenie__map{bottom:auto;height:auto;aspect-ratio:1/1;max-height:440px}
  .mestopolojenie.karta-zaredena .panel{display:grid;position:static;width:auto;transform:none;border:0;border-top:1px solid var(--kant-tumen);border-radius:0;backdrop-filter:none;background:var(--mastilo)}
}
/* --- Forms ----------------------------------------------------------------------------- */
/* The field people never see (doc3-wp.js, section 6): bots fill it, and such a form is dropped. */
.dwe-med{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
/* Booking: the day and hour buttons set no text colour of their own, so iPhone drew their
   text in its system blue (desktop browsers default to black, which hid it). */
.zap-den,.zap-chas{color:var(--text)}
/* Booking connected to the clinic's system (doc3-chas.js): days and tiles that cannot be picked,
   and the step where the visitor types the code from the e-mail. */
.zap-den:disabled,.zap-plochka:disabled{opacity:.38;cursor:default}
.zap-den:disabled:hover,.zap-plochka:disabled:hover{border-color:var(--kant)}
.zap-forma[hidden],.zap-kod[hidden],.zap-vryzka[hidden]{display:none}
.zap-kod__forma{display:grid;gap:1rem;margin-top:1.1rem}
.zap-kod__forma .btn{justify-self:start}
.zap-kod .pole input{max-width:13rem;font-size:1.3rem;font-weight:500;letter-spacing:.28em}
.zap-kod__oshte{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:0;font-size:var(--fs-malak)}
.zap-vryzka{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;font:inherit;color:var(--text);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.zap-vryzka:disabled{color:var(--text-mek);text-decoration:none;cursor:default}
/* Tablets in portrait (641–820px; iPad mini 744, iPad 768/810/820). The design's "phone" rules
   start at 820px, but two of its home-page galleries only become a calm grid at 640px. In between,
   the desktop collage's spans (4–12 of 12 columns) land in a 2- or 6-column grid: the clinic photos
   overlap and the X-ray photos turn into a stack of huge frames and 24px slivers. Here both get the
   phone's calm grid with three columns, and two blocks the phone rules stack or stretch use the
   width a tablet has: the welcome text beside its contact cards, and a bottom call bar that is not
   as wide as the screen. */
@media (min-width:641px) and (max-width:820px){
  .klinika .galeria{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:.7rem}
  .klinika .galeria__kadyr:nth-child(n){grid-column:auto;grid-row:auto;aspect-ratio:4/3;transform:none}
  .klinika .galeria__kadyr:last-child:nth-child(3n+1){grid-column:1/-1;aspect-ratio:21/9}
  .klinika .galeria__kadyr img{transform:none}
  .snimki .aparatura{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto}
  .snimki .aparatura__kadyr:nth-child(n){grid-column:auto;grid-row:auto;aspect-ratio:1}
  .pokana .obvivka{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .mobilna{left:max(.7rem,calc(50% - 16rem));right:max(.7rem,calc(50% - 16rem))}
}
/* The team's grid fits its 286px cards by count, so up to ~910px only two fit and the third doctor
   sits alone on a second row. Three equal columns instead, from portrait tablets up to there. */
@media (min-width:641px) and (max-width:920px){
  .ekip__reshetka{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Booking with the clinic's system: the days as a month calendar (whole weeks, Monday first)
   instead of the design's sideways strip, so every date is on screen without scrolling.
   doc3-chas.js adds .zap-dni--mreja; the design's own demo keeps the strip. */
.zap-dni.zap-dni--mreja{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem;max-width:34rem;overflow:visible;padding-bottom:0;-webkit-mask-image:none;mask-image:none}
.zap-dni__mesec{grid-column:1/-1;margin:0 0 .15rem;font-size:.86rem;font-weight:600;color:var(--text)}
.zap-dni__mesec::first-letter{text-transform:uppercase}
.zap-dni__den{padding-bottom:.1rem;text-align:center;font-size:.62rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mek)}
.zap-dni--mreja .zap-den{min-width:0;gap:0;padding:.5rem .15rem .4rem}
.zap-dni--mreja .zap-den i{min-height:1.2em;line-height:1.2em;font-size:.58rem}
.zap-dni--mreja .zap-den--minal{border-color:transparent;background:none;opacity:.28;cursor:default}
/* The doctors' page (/moyat-grafik/, printed by doc3-site.php): room around the plugin's own
   layout, and the site's colours in place of the plugin's pink and teal. */
.doc3-grafik{padding-block:clamp(2.2rem,1.4rem + 3vw,4.5rem) clamp(3rem,2rem + 4vw,6rem)}
.doc3-grafik .cdp-portal{--cdp-primary:var(--oranj);--cdp-teal:var(--oranj);--cdp-dark:var(--text);--cdp-muted:var(--text-mek);--cdp-border:var(--kant);--cdp-bg-soft:var(--vtori)}
/* Like the booking page, it has no dark hero, and the header is written for one (light text on a
   transparent bar): the same rules the design gives `body:has(.zap)` make the header solid here. */
body:has(.doc3-grafik) .lenta,body:has(.doc3-grafik) .lenta__rabotno{color:var(--text-mek)}
body:has(.doc3-grafik) .glava{background:rgba(250,248,245,.92);backdrop-filter:blur(12px);border-bottom-color:var(--kant)}
body:has(.doc3-grafik) .glava:not(.plutna) .logo,body:has(.doc3-grafik) .glava:not(.plutna) .navigacia a,body:has(.doc3-grafik) .glava:not(.plutna) .glava__tel,body:has(.doc3-grafik) .glava:not(.plutna) .menu-btn,body:has(.doc3-grafik) .glava:not(.plutna) .menu-grupa__btn{color:var(--text)}
body:has(.doc3-grafik) .glava:not(.plutna) .logo__pod{color:var(--text-mek)}
body:has(.doc3-grafik) .glava:not(.plutna) .logo__znak{filter:none}
body:has(.doc3-grafik) .glava:not(.plutna) .btn--mastilo{background:var(--mastilo);border-color:var(--mastilo);backdrop-filter:none}