/* Approved “Čistý rám”. This scope intentionally includes the checkout ID:
   its self-contained stylesheet otherwise outranks the shared public frame.
   Existing content classes and editorial visual IDs remain unchanged. */
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) {
  --modal-surface:#f9fbfa; --modal-soft:#eef3f3; --modal-ink:#173b43;
  --modal-muted:#536b71; --modal-line:#cedcdd; --modal-accent:#087783; --modal-on-accent:#fff;
  --modal-width:920px;
  box-sizing:border-box; position:fixed; inset:0; margin:auto; padding:0;
  width:min(var(--modal-width),calc(100vw - 48px)); max-width:none;
  height:fit-content; min-height:0; max-height:calc(100dvh - 48px);
  border:1px solid var(--modal-line); border-radius:14px;
  background:var(--modal-surface); color:var(--modal-ink);
  box-shadow:0 28px 100px #00151f55; overflow:hidden; overscroll-behavior:contain;
  font:15px/1.6 Arial,Helvetica,sans-serif; text-align:left;
  transform:none; translate:none;
}
:is(html[data-divers-appearance],html:has([data-my-shark-modals]))[data-theme=dark] :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) {
  --modal-surface:#102b37; --modal-soft:#183743; --modal-ink:#edf5f7;
  --modal-muted:#b0c7d0; --modal-line:#35515e; --modal-accent:#9adfe5; --modal-on-accent:#0b3039;
}
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame])::backdrop { background:#00151cb5; backdrop-filter:blur(7px); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])):has(dialog[data-modal-frame][open]) { overflow:hidden; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame=compact],#divers-group-checkout[data-modal-frame=compact]) { --modal-width:570px; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame=offers],#divers-group-checkout[data-modal-frame=offers]) { --modal-width:780px; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame=search],#divers-group-checkout[data-modal-frame=search]) { --modal-width:780px; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame=portrait],#divers-group-checkout[data-modal-frame=portrait]) { --modal-width:620px; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame=map],#divers-group-checkout[data-modal-frame=map]) { --modal-width:1280px; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) .divers-modal-shell,
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-modal-shell[data-modal-frame][open] {
  display:flex; flex-direction:column; min-height:0; max-height:calc(100dvh - 50px);
  padding:0; gap:0; border-radius:0; background:var(--modal-surface); color:var(--modal-ink);
}
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-modal-shell[data-modal-frame][open] { border-radius:14px; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) .divers-modal-head {
  position:relative; inset:auto; z-index:2; flex:0 0 auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 24px;
  margin:0; padding:20px 26px; width:100%; min-height:0;
  background:var(--modal-surface); color:var(--modal-ink); border:0; border-bottom:1px solid var(--modal-line);
}
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) .divers-modal-head>div { min-width:0; flex:1; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) .divers-modal-title {
  flex:1; min-width:0; margin:0; padding:0; color:var(--modal-ink); opacity:1;
  font:700 23px/1.25 Arial,Helvetica,sans-serif; text-transform:none; letter-spacing:normal;
  text-shadow:none; overflow-wrap:anywhere;
}
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) .divers-modal-title:focus { outline:none; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) .divers-modal-head :is(p,span.divers-modal-eyebrow) {
  position:static; flex-basis:100%; margin:0; padding:0; color:var(--modal-muted); font:600 10px/1.5 Arial,Helvetica,sans-serif; letter-spacing:.12em;
}
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) button.divers-modal-close {
  appearance:none; position:static; inset:auto; display:grid; place-items:center;
  flex:0 0 44px; width:44px; height:44px; min-width:44px; min-height:44px; max-width:44px; max-height:44px;
  margin:0; padding:0; gap:0; border:1px solid var(--modal-line); border-radius:9px;
  background:transparent; color:var(--modal-ink); opacity:1;
  box-shadow:none; text-shadow:none; transform:none; translate:none; backdrop-filter:none;
  cursor:pointer; transition:background-color .16s,border-color .16s;
}
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) button.divers-modal-close::before,
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) button.divers-modal-close::after { content:none; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) .divers-modal-close svg { display:block; width:20px; height:20px; margin:0; transform:none; }
@media(hover:hover) and (pointer:fine) {
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) button.divers-modal-close:hover:not(:disabled) { background:var(--modal-soft); }
}
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) button.divers-modal-close:active:not(:disabled) { background:color-mix(in srgb,var(--modal-soft),var(--modal-ink) 10%); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) button.divers-modal-close:disabled { opacity:.5; cursor:default; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) button.divers-modal-close:focus-visible { outline:3px solid var(--modal-accent); outline-offset:3px; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) .divers-modal-body {
  display:block; position:static; flex:1 1 auto; width:auto; height:auto; margin:0; gap:0; min-height:0; min-width:0; overflow:auto; overscroll-behavior:contain;
  padding:26px; scrollbar-width:thin; scrollbar-color:var(--modal-line) transparent;
}
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) [data-modal-title-source] { display:none; }
/* Keep each feature's semantics, but remove its duplicate outer padding and
   nested scroll container now that the shared body owns scrolling. */
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) :is(.dialog-content,.course-person-dialog-content,.school-person-detail,.about-dialog-layout,.divers-login-content,.gc-content,.divers-search-scroll,.rental-booking-photo-body) {
  padding:0; max-height:none; overflow:visible; color:var(--modal-ink);
}
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) :is(.school-person-reading,.about-dialog-story) { color:var(--modal-ink); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame] :is(.school-person-reading,.about-dialog-story,.course-person-dialog-content) p { color:var(--modal-muted); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame] .divers-login-top>img { display:none; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame] .divers-search-inner { height:auto; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame] :is(.divers-search-form,.divers-search-status,.divers-search-filters,.divers-search-footer) { padding-inline:0; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame] .borek-map-dialog-content { height:65dvh; min-height:300px; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame] .borek-map-dialog-shell { height:auto; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame] .borek-map-dialog-content iframe { width:100%; height:100%; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame] :is(.school-person-detail,.about-dialog-layout) { background:transparent; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame] .school-badge-dialog { color:var(--modal-ink); }
/* Gallery media never stretches or crops. Controls and captions stay in the body. */
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=media] :is(.divers-modal-body>img,.divers-modal-body>figure img,.dialog-content>img,.dialog-content>picture>img),
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=portrait] .divers-modal-body>video {
  display:block; width:100%; height:auto; max-height:62dvh; object-fit:contain; margin:0 auto;
}
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame] .divers-modal-body>figure { margin:0; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame] .divers-modal-body>video { display:block; width:100%; max-height:62dvh; object-fit:contain; margin:0 auto; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=media] .divers-modal-body :is(figcaption,[data-award-caption]) { color:var(--modal-muted); font:13px/1.5 Arial,Helvetica,sans-serif; margin-top:16px; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=media] .divers-modal-body>div:not([class]) { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=media] .divers-modal-body>div:not([class]) p { margin:0; color:var(--modal-muted); font:13px/1.5 Arial,Helvetica,sans-serif; }
/* Forms use the same surfaces in both modes; important for the formerly
   permanently white offer dialog. */
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=offers] :is(h3,strong,span,label,p) { color:var(--modal-ink); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=offers] .divers-offer-control {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px 24px; margin:0; padding:24px 0;
  border:0; border-bottom:1px solid var(--modal-line); border-radius:0; background:transparent;
  color:var(--modal-ink); font:15px/1.5 Arial,Helvetica,sans-serif;
}
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=offers] .divers-offer-control:first-child { padding-top:0; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=offers] .divers-offer-control:last-child { border-bottom:0; padding-bottom:0; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=offers] .divers-offer-control>span { grid-column:1; min-width:0; font-size:22px; font-weight:700; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=offers] .divers-owned-badge { grid-column:1; justify-self:start; border:1px solid #53968e70; background:#56968e12; color:var(--modal-ink); border-radius:99px; padding:3px 10px; font-size:12px; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=offers] .divers-offer-control>button { grid-column:2; grid-row:1 / span 2; margin-left:0; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=offers] button:not(.divers-modal-close),
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=gear] .rental-booking-detail-actions :is(button,a),
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame] .rental-booking-primary {
  min-height:44px; padding:10px 16px; border:1px solid transparent; border-radius:8px;
  background:var(--modal-accent); color:var(--modal-on-accent); font:600 15px/1.5 Arial,Helvetica,sans-serif;
}
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=gear] #dialog-content>img { width:100%; max-width:360px; max-height:360px; object-fit:contain; margin:0 auto 24px; background:white; border-radius:8px; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=gear] #dialog-content :is(p,li) { color:var(--modal-muted); font:15px/1.6 Arial,Helvetica,sans-serif; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=gear] #dialog-content :is(h2,h3) { color:var(--modal-ink); font:700 18px/1.35 Arial,Helvetica,sans-serif; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame].rental-booking { --appearance-panel:var(--modal-surface); --appearance-ink:var(--modal-ink); --appearance-line:var(--modal-line); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame].rental-booking :is(form,.rental-booking-success) { padding:0; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame].rental-booking :is(select,input:not([type=checkbox]),textarea,.rental-booking-preset) { background:var(--modal-soft); border-color:var(--modal-line); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) #divers-group-checkout[data-modal-frame] { --gc-bg:var(--modal-surface); --gc-panel:var(--modal-surface); --gc-ink:var(--modal-ink); --gc-muted:var(--modal-muted); --gc-line:var(--modal-line); --gc-soft:var(--modal-soft); --gc-accent:var(--modal-accent); --gc-on-accent:var(--modal-on-accent); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) #divers-group-checkout[data-modal-frame] .gc-status { padding-inline:0; }
@media(max-width:700px) {
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) .divers-modal-shell,
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-modal-shell[data-modal-frame][open] { max-height:calc(100dvh - 18px); }
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) .divers-modal-head { padding:16px; gap:4px 12px; }
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) .divers-modal-title { font-size:21px; }
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) .divers-modal-body { padding:18px 16px; }
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=offers] .divers-offer-control { grid-template-columns:minmax(0,1fr); }
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=offers] .divers-offer-control>button { grid-column:1; grid-row:auto; justify-self:start; margin-left:0; }
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=offers] .divers-owned-badge { flex-basis:auto; }
}
@media(prefers-reduced-motion:reduce) {
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) button.divers-modal-close { transition:none; }
}
/* The approved equipment detail places the product beside its description. */
@media(min-width:701px) {
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=gear] #dialog-content:has(>img) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px 32px; align-items:center; }
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=gear] #dialog-content:has(>img)>img { grid-column:1; grid-row:1 / span 2; margin:0; max-width:100%; }
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=gear] #dialog-content:has(>img)>:not(img) { grid-column:2; min-width:0; }
}

:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog[data-modal-frame=offers] .divers-offer-price { display:block; margin-top:4px; color:var(--modal-muted); font:400 16px/1.5 Arial,Helvetica,sans-serif; }
/* Hidden application states must beat feature layout selectors (providers,
   validation, loading and reservation actions are controlled by their scripts). */
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) :is(dialog[data-modal-frame],#divers-group-checkout[data-modal-frame]) [hidden] { display:none; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-login[data-modal-frame] { color-scheme:light; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals]))[data-theme=dark] dialog.divers-login[data-modal-frame] { color-scheme:dark; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-login[data-modal-frame] :is(label,.divers-login-password button) { color:var(--modal-ink); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-login[data-modal-frame] p { color:var(--modal-muted); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-login[data-modal-frame] a { color:var(--modal-accent); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-login[data-modal-frame] :is(input:not([type=hidden]),.divers-login-provider) { background:var(--modal-soft); color:var(--modal-ink); border-color:var(--modal-line); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-login[data-modal-frame] input::placeholder { color:var(--modal-muted); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-login[data-modal-frame] .divers-login-submit { background:var(--modal-accent); color:var(--modal-on-accent); border-color:transparent; border-radius:8px; }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-login[data-modal-frame] .divers-login-register { border-color:var(--modal-line); }
:is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-login[data-modal-frame] .divers-login-feedback { color:#96313e; }
@media(hover:hover) and (pointer:fine) {
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-login[data-modal-frame] :is(.divers-login-provider,.divers-login-password button):hover { background:color-mix(in srgb,var(--modal-soft),var(--modal-ink) 8%); }
  :is(html[data-divers-appearance],html:has([data-my-shark-modals])) dialog.divers-login[data-modal-frame] .divers-login-submit:not(:disabled):hover { background:color-mix(in srgb,var(--modal-accent),var(--modal-on-accent) 10%); }
}