now draws the outline, and the bottom rule separates head from body. */
.pf-svcpanel[open] .pf-svcpanel__head {
padding: 14px 20px;
min-height: var(--pf-tap);
border: 0;
border-bottom: 2px solid var(--pf-p700);
border-radius: 0;
background: var(--pf-p50);
box-shadow: none;
}
.pf-svcpanel[open] .pf-svcpanel__head:hover {
box-shadow: none;
}
.pf-svcpanel[open] .pf-svccard__title {
font-size: 20px;
font-weight: 800;
}
/* One control, two labels, driven by the element's own state, so the label can never disagree with
whether the panel is open. `display: none` also removes the inactive one from the accessibility
tree, so the summary has exactly one accessible name at a time. */
.pf-svcpanel[open] .pf-svcpanel__closed,
.pf-svcpanel:not([open]) .pf-svcpanel__open {
display: none;
}
/* THE RING IS DRAWN INSIDE, and the negative offset is the whole point.
An outline is painted OUTSIDE the border box and IS clipped by an ancestor's `overflow`.
`.pf-svcpanel[open]` carries `overflow: hidden` for its radius and the head fills that padding
box exactly, so the default `outline-offset: 3px` from public-tokens.css survived as a single 3px
line under a header that already has a 2px bottom rule -- no readable focus indicator at all on
the primary control of the whole flow.
A negative offset is painted inside the border box, so nothing can clip it, and it still reads as
a ring because the head has a filled background. It is applied ONLY while open: closed, the tile
is not inside an overflow container and deserves the normal outset ring like its eight
neighbours.
THE TYPE SELECTOR AND THE `.pf` ARE LOAD-BEARING, for the same reason they are on
`.pf select.pf-lang__select:focus-visible` above. public-tokens.css's primitive is
`.pf summary:focus-visible`, i.e. (0,2,1); a bare `.pf-svcpanel__head:focus-visible` is (0,2,0)
and LOSES on specificity whatever the load order, so the 3px offset would have stayed and this
rule would have done nothing. This is (0,4,1). */
.pf .pf-svcpanel[open] summary.pf-svcpanel__head:focus-visible {
outline-offset: -3px;
}
.pf-svcpanel__body {
background: var(--pf-card);
/* The height animation writes an inline `height` here, so the content has to be clipped to it
while it runs. wireBookingPanel clears both when the transition ends. */
overflow: hidden;
}
/* FALLBACK GEOMETRY ONLY. The frame's real height is pushed in by the SPA over postMessage and
applied as an inline `height` by booking-iframe-autosize.js, which also adds
.pf-bookingframe--autosized below. Everything in this block and the media query under it is what
renders BEFORE that first message -- and permanently against a SPA build that sends none, which
is a live case because the two halves deploy on separate pipelines.
Height from WIDTH, because a cross-origin child cannot be measured from here. The design draws a
square; min-height keeps it usable on a phone, where a true 1:1 box would give a multi-step
third-party form ~375px of viewport. */
.pf-bookingframe {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
min-height: 700px;
border: 0;
}
/* DESKTOP'S FALLBACK CAPS THE FRAME AT 65% OF ITS SQUARE HEIGHT, by request. A cap only for as long
as the fallback is in force: once a height message arrives the rule above releases it, which is
the intent -- the cap existed to stop a width-derived guess from running away, and a measured
height needs no ceiling.
Expressed as an aspect-ratio rather than a `max-height`, because the height here is derived from
the width: a percentage `max-height` resolves against the containing block's height, which is
`auto`, so `max-height: 65%` computes to `none` and would do nothing at all.
20/13 is exactly 0.65, so the frame is 0.65x its own width -- 1086px wide inside the 1180px
shell gives 706px instead of 1086px.
`min-height` scales by the same factor (700 -> 455) so the floor cannot claw the reduction back
on a narrower desktop: at a 1024px viewport the panel is ~900px, 65% of which is 585px, and an
unscaled 700px floor would have made that a 78% reduction target instead of 65%.
Mobile and tablet keep the 1:1 square and the 700px floor -- the base rule's own note explains
why a phone needs that floor, and nothing below 1024px is "desktop". */
@media (min-width: 1024px) {
.pf-bookingframe {
aspect-ratio: 20 / 13;
/* 840px, not the 455px this used to be, because it is no longer an arbitrary floor: it is
the SPA's own `--hl-flow-min-height` -- the measured height of the reservation form, and
the height every step of the flow now reports from `sm` up. Matching it means the frame
is already the right size before the first postMessage arrives, so the panel does not
visibly resize once on open. The two repos deploy separately and cannot share a
constant; if one moves, move the other. */
min-height: 840px;
}
}
/* Added by booking-iframe-autosize.js on the first valid height message, and never removed.
Both declarations are load-bearing rather than tidy-up: `aspect-ratio` keeps deriving a height
from the width no matter what the inline `height` says, and the `min-height` floor wins outright
over any reported height below it -- which is exactly the short-step case the handoff exists to
fix (a confirmation screen is nowhere near 455px, let alone 700px).
IT MUST STAY BELOW THE MEDIA QUERY. This selector and `.pf-bookingframe` have the same
specificity (0,1,0) and a media query adds none, so source order is the whole of the tie-break:
placed above, the desktop rule re-applied the aspect-ratio and the 455px floor to an autosized
frame and only the phone breakpoint appeared to work. */
.pf-bookingframe--autosized {
aspect-ratio: auto;
min-height: 0;
}
/* ---------- Schedule + contact duo ---------- */
.pf-duo {
display: grid;
grid-template-columns: 1fr;
border: 2px solid var(--pf-line);
border-radius: 18px;
overflow: hidden;
}
.pf-duo__body {
padding: clamp(20px, 3vw, 30px);
display: flex;
flex-direction: column;
gap: 22px;
}
.pf-duo__group {
display: flex;
flex-direction: column;
gap: 10px;
}
.pf-duo__group + .pf-duo__group {
padding-top: 20px;
border-top: 2px solid var(--pf-line);
}
.pf-duo__head {
font-size: 22px;
font-weight: 800;
margin: 0;
}
@media (min-width: 1024px) {
.pf-duo {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
}
/* Styles the SHARED dispensary/_working_hours_table.html rather than forking it --
the doctor-side editor reads its data-* attributes, so the markup must not move. */
/* WRITTEN AGAINST WHAT dispensary/_working_hours_table.html ACTUALLY EMITS, which is not what
these rules first assumed:
* it emits NO `` -- every cell is a ` ` -- so the `.pf-hours th` rules matched nothing
and the weekday names picked up the times' `font-weight: 700; text-align: right` instead;
* it NESTS `` two and three deep inside the second cell, so descendant `td` rules hit
those inner cells too, doubling every row's padding and drawing a separator line inside a
row rather than between rows.
The weekday cell is addressed by `.padding-right-10`, which the partial puts on it (and which
had no effective rule anywhere, so the two columns had no separation either). */
.pf-hours table {
width: 100%;
border-collapse: collapse;
font-size: 18px;
}
.pf-hours td {
padding: 11px 0;
border-bottom: 1px solid var(--pf-line);
vertical-align: top;
font-weight: 700;
text-align: right;
}
.pf-hours tr:last-child > td {
border-bottom: 0;
}
/* The weekday label: the partial's own class, left, unemphasised, with real column separation. */
.pf-hours td.padding-right-10 {
font-weight: 400;
color: var(--pf-ink2);
text-align: left;
padding-right: 16px;
white-space: nowrap;
}
/* The inner tables are layout for one row's times -- no separators, no row padding of their own. */
.pf-hours table table td {
padding: 0;
border-bottom: 0;
}
.pf-hours__note {
font-size: 17px;
line-height: 1.55;
color: var(--pf-ink2);
}
.pf-addr {
margin: 0;
font-size: 18px;
line-height: 1.6;
color: var(--pf-ink2);
}
/* ---------- Utilities ---------- */
.pf-muted {
color: var(--pf-ink2);
}
/* A phone number is one token even though it is written with spaces. Slovenian numbers are spaced
("01 123 45 67"), and every one of those spaces was a break opportunity -- so a narrow "Pokličite:
01 123 45 67" button split the NUMBER across two lines. With this, the only break opportunity
left in the label is the space after the colon, so a tight button breaks before the number and
keeps it whole. */
.pf-phone {
white-space: nowrap;
}
/* ---------- Cookie notice ----------
* Replaces cookieCuttr, which needs jQuery + jquery.cookie. Built by
* public-portal.js and appended to , so it sits outside .pf-shell. */
.pf-cookiebar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px clamp(16px, 4vw, 44px);
background: var(--pf-p900);
color: #fff;
font-size: 17px;
line-height: 1.55;
}
.pf-cookiebar__text {
margin: 0;
max-width: 80ch;
}
.pf-cookiebar a,
.pf-cookiebar a:hover,
.pf-cookiebar a:focus {
color: #fff;
text-decoration: underline;
}
.pf-cookiebar__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.pf-cookiebar .pf-btn--muted {
background: transparent;
border-color: #fff;
color: #fff;
}
.pf-cookiebar .pf-btn--primary {
background: #fff;
color: var(--pf-p900);
}
@media (min-width: 640px) {
.pf-cookiebar {
flex-direction: row;
align-items: center;
}
.pf-cookiebar__actions {
margin-left: auto;
flex: none;
}
}
/* ---------- Prose (legal / notice pages) ---------- */
.pf-prose {
max-width: 72ch;
font-size: 18px;
line-height: 1.65;
}
.pf-prose h2 {
margin-top: 1.4em;
}
/* ---------- Anchor-component colour overrides ----------
* `.pf a { color }` is (0,1,1) and beats every single-class component rule, so an
* styled as a button or a card renders in the link colour -- which made the
* hero CTA dark-on-dark and invisible. Same cascade trap public-modern.css
* documents for `.rp-page a`, hit again here.
*
* These selectors are `a.pf-…`, i.e. (0,1,1) -- a TIE with `.pf a`, won by coming
* later in the file. Any new anchor component needs an entry here; a component that
* inherits its colour needs one too, because `inherit` at (0,1,0) also loses.
*/
/* The logo home link holds an image or an initial box, never text, so the only thing `.pf a:hover`
can do to it is draw an underline under a 44px graphic. (0,1,1), tying `.pf a:hover` and winning
on file order, exactly as the note above describes. */
.pf a.pf-header__home:hover {
text-decoration: none;
}
.pf a.pf-hero__cta,
.pf a.pf-promo__cta,
.pf a.pf-btn--primary {
color: var(--pf-onp);
}
.pf a.pf-hero__cta:hover,
.pf a.pf-promo__cta:hover,
.pf a.pf-btn--primary:hover {
color: var(--pf-onp);
}
.pf a.pf-btn--ghost,
.pf a.pf-btn--ghost:hover {
color: var(--pf-p700);
}
/* Cards cancel the global underline; the mockup's `.card:hover` does exactly this.
`.pf-sos` belongs here too: its own :hover sets text-decoration:none at (0,1,0) and
was losing, so the 112 button underlined on hover -- and `.pf-providercard` was
missing from this block entirely, being the last component added. */
.pf a.pf-loccard:hover,
.pf a.pf-cliniccard:hover,
.pf a.pf-svccard:hover,
.pf a.pf-providercard:hover,
.pf a.pf-sos:hover {
text-decoration: none;
}
.pf a.pf-btn--muted,
.pf a.pf-btn--muted:hover,
.pf a.pf-nav__link,
.pf a.pf-loccard,
.pf a.pf-loccard:hover,
.pf a.pf-cliniccard,
.pf a.pf-cliniccard:hover,
.pf a.pf-svccard,
.pf a.pf-svccard:hover,
.pf a.pf-providercard,
.pf a.pf-providercard:hover {
color: var(--pf-ink);
}
.pf a.pf-nav__link.is-current,
.pf a.pf-back,
.pf a.pf-meta__item {
color: var(--pf-p700);
}
/* The filled service card and the filled nav state carry their own text colour. */
.pf a.pf-svccard.is-active,
.pf a.pf-svccard.is-active:hover {
color: var(--pf-onp);
}
.pf a.pf-sos,
.pf a.pf-sos:hover {
color: #a3242b;
}
/* ---------- Forms ----------
* Vertical, not Bootstrap's col-sm-3 / col-sm-8 horizontal grid: the standalone
* shell loads no Bootstrap, and a label above its field is what reflows to 375px
* without a second layout. */
/* No max-width. The card used to stop at 760px inside an 1178px section while the clinic notice
directly above it spans the full width, so on a desktop the form read as a narrow column with
~400px of nothing beside it. The short identity fields use that width through .pf-field-row
below rather than by stretching each input to a metre. */
.pf-formcard {
background: var(--pf-card);
border: 2px solid var(--pf-line);
border-radius: var(--pf-radius-m);
padding: clamp(18px, 3vw, 28px);
}
.pf-formcard__title {
font-size: clamp(22px, 3.2vw, 26px);
font-weight: 800;
margin: 0 0 6px;
}
.pf-field {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0 0 18px;
border: 0;
padding: 0;
}
.pf-field__label {
font-size: 17px;
font-weight: 600;
color: var(--pf-ink);
/* defaults differ from ; normalise so a radio group's legend and a
text field's label sit identically. */
float: none;
width: auto;
padding: 0;
margin: 0;
line-height: 1.35;
}
.pf-field__req {
color: #a3242b;
font-weight: 700;
}
/* Bare inputs ARE identified by their border, so this is where --pf-line-strong
earns its 3:1 (see the token file). */
.pf-input {
width: 100%;
min-height: var(--pf-tap);
padding: 10px 14px;
border: 2px solid var(--pf-line-strong);
border-radius: var(--pf-radius-s);
background: var(--pf-card);
color: var(--pf-ink);
font: 400 18px/1.4 var(--pf-font);
}
/* `input.pf-input` / the type selector, for the same specificity reason as the language
select above: `.pf-input:focus` is (0,2,0) and the token file's `.pf input:focus-visible` is
(0,2,1), so the tighter 1px offset this rule asks for was being overridden by the primitive's
3px. Browsers match :focus-visible on a text input for both pointer and keyboard focus, so the
two rules really do compete on every click into a field. */
.pf input.pf-input:focus,
.pf textarea.pf-input:focus,
.pf select.pf-input:focus {
border-color: var(--pf-p700);
outline: 3px solid var(--pf-p700);
outline-offset: 1px;
}
textarea.pf-input {
min-height: 120px;
resize: vertical;
}
/* NO `appearance: none` here. It was written with the comment "native chevron only",
which is the opposite of what the property does: it removes the native chevron, and
with no background-image arrow to replace it a renders as a plain text box.
The provider directory's "Zdravstveno področje" and "Območna enota" were both
indistinguishable from text inputs. The native control is drawn by the platform, is
already 3:1 against the field, and needs no asset. */
select.pf-input {
padding-right: 10px;
/* The chevron is the browser's, so leave room for it and let the text truncate
rather than run under it. */
text-overflow: ellipsis;
}
.pf-field.has-error .pf-input {
border-color: #a3242b;
}
/* Date fields are native , so it
costs no JavaScript. The region above it is the primary control. */
.pf-mapselect {
margin-top: 16px;
}
.pf-mapselect__summary {
display: inline-flex;
align-items: center;
min-height: var(--pf-tap);
color: var(--pf-p700);
font: 700 17px/1.2 var(--pf-font);
cursor: pointer;
}
/* Same clip as .pf-svcpanel__head, from the `overflow-x: auto` below: `overflow-x` on its own
computes `overflow-y` to `auto` as well, so the summary's ring lost its top, bottom and left
edges and survived as a 3px tick at the far right of the control. Drawn inside instead.
(0,3,1), to beat public-tokens.css's `.pf summary:focus-visible` at (0,2,1) -- see the note on
.pf-svcpanel__head. */
.pf summary.pf-mapselect__summary:focus-visible {
outline-offset: -3px;
}
.pf-mapselect img {
display: block;
margin-top: 10px;
/* The ; its border is its only bounds. */
border: 2px solid var(--pf-line-strong);
border-radius: 14px;
background: var(--pf-card);
color: inherit;
transition: box-shadow 0.18s, border-color 0.18s;
}
.pf-providercard:hover {
border-color: var(--pf-p500);
box-shadow: var(--pf-shadow-hover);
text-decoration: none;
color: inherit;
}
.pf-providercard__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.pf-providercard__name {
font-size: 19px;
font-weight: 700;
}
.pf-providercard__city {
font-size: 17px;
color: var(--pf-ink2);
}
.pf-providercard__arrow {
flex: none;
font-size: 22px;
font-weight: 700;
color: var(--pf-p700);
}
.pf-pager {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.pf-pager__current {
font-size: 17px;
color: var(--pf-ink2);
}