/*
Theme Name: Correct Diving
Theme URI: https://correct-diving.com
Author: SimpleDev
Author URI: https://correct-diving.com
Description: Custom block theme reproducing the client-approved "Broadsheet" v6 mockup — editorial/print typography, real content and photos, hamburger mobile nav, course filter.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: correct-diving
*/

/* — page-level fixes ported verbatim from the tested static mockup — */
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  overflow-x: hidden;
}
body {
  margin: 0;
  text-wrap: pretty;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* — hairline rules (approved premium-refinement spec, literal color) — border only.
   Section-level top padding is a SEPARATE class (.section-pad) since .hairline
   alone is also reused for small inner dividers (e.g. the Adresa/Radno vrijeme
   block inside Rezervacija) that must NOT get the big section padding. — */
.hairline {
  border-top: 1px solid #c9c6bd;
}
.section-pad {
  padding-top: clamp(72px, 8vw, 120px);
  /* — horizontal gutter for every section's content (and its images) on
     viewports narrower than the 1280px wideSize, where alignwide's own
     margin:auto centering contributes nothing — matches the mockup's own
     "max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)"
     pattern used on every section. — */
  padding-inline: clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}
/* — same gutter for the full-bleed footer, which doesn't use .section-pad — */
.site-footer {
  padding-inline: clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}
.page-title-band,
.page-main {
  padding-inline: clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

/* — the divider right under the stats bar needs to sit flush against the
   stats bar's own background edge and match its content width, unlike
   the other full-bleed section hairlines — scoped to #onama only via a
   pseudo-element so the shared .hairline class stays untouched elsewhere. — */
.wp-block-template-part:has(.hero-cover),
.wp-block-template-part:has(#onama) {
  margin-block-start: 0;
}
#onama.hairline {
  border-top: none;
  position: relative;
}
#onama.hairline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px, 100%);
  border-top: 1px solid #c9c6bd;
}

/* — section kicker label, repeated identically across every section — */
.kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: 16px;
}

/* — subtle paper texture — */
body {
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--wp--preset--color--ink) 4.5%, transparent) 1px, transparent 0);
  background-size: 5px 5px;
}

/* — buttons (core/button already covers most of this via theme.json, this fills in secondary/hover states the block editor doesn't expose) — */
.wp-block-button__link.is-style-outline,
.btn-secondary {
  border-color: #c9c6bd;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--wp--preset--color--ink) 7%, transparent);
}

/* — servis grid: thin top border per item, matches the neutral-300 tone from the mockup — */
.service-item {
  border-top: 1px solid #d7d3d3;
  padding-top: 18px;
}
/* — !important needed: WP's own grid-layout support injects an
   auto-generated .wp-container-core-group-is-layout-XXXXXXXX class with
   the same specificity as this one, later in the cascade, so it silently
   wins the grid-template-columns declaration otherwise (same issue as
   .courses-grid above). — */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(28px, 3vw, 44px) clamp(32px, 4vw, 64px);
}
@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr !important; }
}

/* — dive locations grid: same 3-up card pattern as services-grid, plus a
   "Učitaj još" reveal — every card ships in the markup (good for SEO/
   no-JS), CSS hides everything past the first 3, JS (initLoadMoreLocations
   in theme.js) reveals 3 more per click by toggling .is-visible. — */
.location-item {
  border-top: 1px solid #d7d3d3;
  padding-top: 18px;
  display: none;
}
.location-item.is-visible {
  display: block;
}
.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(28px, 3vw, 44px) clamp(32px, 4vw, 64px);
}
@media (max-width: 900px) {
  .locations-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .locations-grid { grid-template-columns: 1fr !important; }
}

/* — small inner divider inside the reservation card (not a section-level hairline) — */
.contact-block {
  padding-top: 18px;
}

/* — reservation card labels (Adresa / Radno vrijeme) — */
.contact-label {
  font-size: 14px; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent);
  margin: 0 0 4px;
}

/* — course cards (Tečajevi grid) — */
.course-card {
  background: var(--wp--preset--color--surface);
  border-radius: 14px;
  padding: 26px 26px 28px;
}
.course-duration {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wp--preset--color--accent); margin: 0 0 8px;
}
/* — !important needed: WP's own grid-layout support outputs an
   auto-generated .wp-container-core-group-is-layout-XXXXXXXX class with
   the same specificity as this one, injected after the theme stylesheet,
   so it silently wins the grid-template-columns declaration otherwise. — */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 900px) {
  .courses-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .courses-grid { grid-template-columns: 1fr !important; }
}

/* — Morska biologija catalog grid: reuses courses-grid's 3-up card layout,
   but with image+label+title cards (taller than plain text course cards)
   the default row gap read as too tight to tell which title belongs to
   which card above it — widen just the row gap, same column gap. — */
.courses-grid.mb-grid {
  row-gap: clamp(40px, 5vw, 60px);
}

/* — course filter tags — */
.course-filters .wp-block-button__link {
  font-size: 13.5px; padding: 8px 16px; border-radius: 99px;
}
.course-filters .filter-active .wp-block-button__link {
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--bg); border-color: transparent;
}
.course-filters .wp-block-button:not(.filter-active) .wp-block-button__link {
  background: transparent; color: var(--wp--preset--color--ink); border: 1px solid #c9c6bd;
}

/* — bullet list with a small dot marker (Probni uron benefits) — */
.dot-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.dot-list li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; font-size: 15.5px; line-height: 1.6; }
.dot-list li::before {
  content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--wp--preset--color--accent);
  transform: translateY(-2px);
}

/* — equal-height cards in a row (per wordpress-block-theming.md) — */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.equal-cards .cta-bottom {
  margin-top: auto;
  justify-content: center;
}

/* — footer margin reset — */
.wp-site-blocks > footer {
  margin-block-start: 0;
}
.footer-label {
  margin: 0;
  color: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent);
}

/* — horizontal scroll-snap carousel (Ronjenje section) — */
.h-scroll {
  display: flex;
  gap: clamp(16px, 2vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
}
/* — two of the five source photos (wall.jpg, safari.jpg) were uploaded
   at a smaller native resolution (300x400) than the rest (1200x1600+),
   so without an explicit width they rendered at their own natural size
   instead of filling the 320px card — force every card image to fill
   its container so all five end up the same rendered size. — */
.h-scroll img {
  width: 100%;
  height: 100%;
}

/* — extra breathing room between photo and text column: same treatment
   as onama, applied wherever the text is short relative to the image
   (default 20px column gap reads as cramped in those cases). — */
#onama .wp-block-columns,
#tim .wp-block-columns {
  column-gap: clamp(32px, 5vw, 72px);
}
/* — smjestaj's image sits on the right on desktop, so in markup the image
   column comes FIRST (text second) — the opposite of onama/probni/tim.
   That's exactly backwards on mobile: WP's stacking breakpoint only wraps
   columns (flex-direction stays "row"), so DOM order is what determines
   stacking order, and every other image+text section already puts its
   image first for that reason. row-reverse restores the desktop-only
   visual order without touching DOM order, so mobile now matches the
   rest of the site (image on top) while desktop is unchanged (image
   right). Scoped to the same 782px breakpoint WP itself uses to switch
   columns out of stacking mode. — */
@media (min-width: 782px) {
  #smjestaj .wp-block-columns {
    flex-direction: row-reverse;
  }
}
.h-scroll > * {
  flex: 0 0 clamp(240px, 26vw, 320px);
  scroll-snap-align: start;
  /* WP's flow-layout block-gap adds margin-block-start to every child
     except the first, which otherwise leaves the first card sitting
     20px higher than the rest — spacing already comes from the flex gap. */
  margin-block-start: 0 !important;
}

/* — price table: header weight fix (matches the real-device micro-label fix),
   and right-align the price column — inline text-align on individual <th>/<td>
   gets stripped by the block serializer like any other non-schema attribute,
   so this is done via CSS instead (only one table in the whole theme, so a
   plain :last-child selector is safe and simple). — */
/* — price table: replaces WordPress's default is-style-regular chrome
   (heavier all-around cell borders, larger padding) with the mockup's
   own minimal styling — hairline bottom-only borders, small uppercase
   headers, subtle row hover. min-width matches the original so columns
   don't get squished before the figure's overflow-x:auto (WP core
   default) kicks in on narrow viewports. — */
.wp-block-table.is-style-regular table {
  border-collapse: collapse;
  min-width: 560px;
  font-size: 14px;
}
.wp-block-table.is-style-regular th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent);
  padding: 10px;
  border: none !important;
  border-bottom: 1px solid var(--wp--preset--color--divider) !important;
}
.wp-block-table.is-style-regular td {
  padding: 10px;
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent) !important;
}
.wp-block-table.is-style-regular tbody tr:hover {
  background: color-mix(in srgb, var(--wp--preset--color--ink) 4%, transparent);
}
.wp-block-table th:last-child,
.wp-block-table td:last-child {
  text-align: right;
}

/* — hero slideshow: a plain core/group standing in for core/cover, since
   cover only supports a single background image. Each slide is an
   absolutely-positioned core/image; JS (theme.js) toggles "is-active" on
   an interval. Building it this way (rather than fighting core/cover's
   single-image model) also sidesteps the !important battles the old
   cover-block version needed against WP's own content-position CSS. */
.hero-cover {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 60vh;
}
.hero-cover .hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.hero-cover .hero-slide.is-active {
  opacity: 1;
}
.hero-cover .hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-cover .hero-gradient-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, color-mix(in srgb, #06212b 30%, transparent) 0%, color-mix(in srgb, #06212b 62%, transparent) 72%, color-mix(in srgb, #06212b 78%, transparent) 100%);
}
.hero-cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(40px, 5vw, 72px) max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2));
  box-sizing: border-box;
}
.hero-cover .is-style-outline .wp-block-button__link { border-color: transparent; }

/* — stats bar under the hero — */
/* — border sits on the 1280px content column itself, not the full-bleed
   bar, so its length matches the rest of the page's content width. — */
.stats-bar > .wp-block-columns {
  padding: 26px clamp(20px, 4vw, 56px);
  box-sizing: border-box;
  border-bottom: 1px solid #e8e6e5;
  margin-bottom: 0;
}
/* — 2-up instead of WP's default single-column stack below 781px
   (".wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
   {flex-basis:100% !important}"), which read as lopsided/left-hung with
   only 4 short items — !important needed to beat that core rule. — */
@media (max-width: 781px) {
  .stats-bar > .wp-block-columns > .wp-block-column {
    /* — half the 20px column gap subtracted from each item, else
       50% + 50% + gap overflows the row and each item wraps alone,
       growing to fill the whole line via flex-grow:1. — */
    flex-basis: calc(50% - 10px) !important;
  }
}
.stat-sub { color: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent); font-size: 14px; }

/* — v6 mobile nav (hamburger) — ported verbatim from the tested static mockup, including the real-device fixes (visibility, z-index, overflow-x) — */
.nav-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nav-links-bottom { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* — !important needed: WP core injects an inline
   "body .is-layout-flex { display: flex; }" rule with specificity (0,1,1),
   tying a plain "body .nav-toggle" at the same specificity — and the
   enqueue order between the theme stylesheet and WP's global styles
   flips depending on template (front-page.html vs page.html), so
   source-order alone isn't reliable either. !important settles it for
   good regardless of template or enqueue order. — */
body .nav-toggle {
  display: none !important; cursor: pointer;
  width: 30px; height: 16px; padding: 0; margin-left: auto;
  flex-direction: column; justify-content: center; flex: none;
  position: relative; z-index: 2;
  /* — !important needed: WP's root blockGap (theme.json spacing.blockGap)
     injects ":root :where(.is-layout-flex){gap:20px}" at the same
     specificity as a plain class selector, spacing the 3 bars far enough
     apart to overflow this box entirely — which also broke the nav row's
     vertical centering, since align-items:center was centering the
     (falsely small) 16px box while the bars visually spilled well past
     it. Fixing the gap fixes both. — */
  gap: 5px !important;
}
/* — flex-shrink:0 + min-height needed: as an empty <p> flex item in a
   column flex container, its automatic min-height (flexbox default) is
   its content-based minimum — 0 for empty content — which was winning
   over the explicit height:2px and collapsing the bar to nothing. — */
.hamburger-bar { display: block; width: 100%; height: 2px; min-height: 2px; flex-shrink: 0; margin: 0; background: var(--wp--preset--color--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open .hamburger-bar:nth-child(2) { opacity: 0; }
.nav-toggle.open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* — primary nav rendered from a WP menu ([cd_primary_menu]) so Polylang
   can serve a different menu per language — flat <ul class="cd-nav-menu">
   inside #navLinks, styled to match the old link nav — */
.nav-links .cd-nav-menu {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.nav-links .cd-nav-menu li { margin: 0; padding: 0; }
/* — !important on color: menu <a>s from wp_nav_menu carry no
   .wp-element-button class, so theme.json's global link colour
   (a:where(:not(.wp-element-button)){color:accent}) applies to them and
   wins here regardless of selector specificity. The old nav dodged it
   because its links WERE .wp-element-button. No :current styling: every
   item is a custom link to the one-page front page, so WP flags them all
   current-menu-item — highlighting on that would light up the whole nav. — */
.nav-links .cd-nav-menu a {
  font-size: 14px; font-weight: 400; text-decoration: none;
  color: var(--wp--preset--color--ink) !important;
}
.nav-links .cd-nav-menu a:hover { color: var(--wp--preset--color--accent) !important; }

/* — legacy: old nav rendered links as is-style-link buttons (pre WP-menu) — */
.nav-links .wp-block-buttons.is-style-link { margin: 0; }
.nav-links .is-style-link .wp-block-button__link {
  background: none; padding: 0; border: none; font-weight: 400; font-size: 14px;
  color: var(--wp--preset--color--ink); text-decoration: none;
}
.nav-links .is-style-link .wp-block-button__link:hover { color: var(--wp--preset--color--accent); }
.nav-brand { align-items: center; }
.nav-brand figure { margin: 0; }
.nav-brand img { display: block; }

/* — language switcher pill, wired to Polylang via [cd_lang_switcher] — */
.seg { display: inline-flex; overflow: hidden; border: 1px solid #c9c6bd; border-radius: 2px; flex: none; }
.seg-opt { display: inline-flex; align-items: center; margin: 0; padding: 7px 12px; font-size: 13px; text-decoration: none; color: inherit; }
.seg-opt + .seg-opt { border-left: 1px solid #c9c6bd; }
.seg-opt.seg-active { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--bg); }

/* — 1500px, not 900px: the inline desktop nav needs ~1400px minimum to
   fit the longest current menu (DE, 7 items) + lang switcher + auth
   links + CTA button on one row without wrapping into a broken second
   row (verified 1390px wraps, 1400px doesn't) — 1500px keeps a safety
   margin since client freely edits menu item count/length per language
   and a future addition would silently reintroduce the wrap at a fixed
   lower breakpoint. — */
@media (max-width: 1500px) {
  body .nav-toggle { display: flex !important; }
  .nav-links {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(300px, 84vw);
    background: var(--wp--preset--color--bg); flex-direction: column; align-items: flex-start;
    padding: 88px 24px 24px; gap: 18px; flex-wrap: nowrap;
    transform: translateX(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s;
    box-shadow: -8px 0 24px rgba(0,0,0,0.14);
    overflow-y: auto;
    z-index: 1;
  }
  .nav-links.open { transform: translateX(0); visibility: visible; transition: transform 0.25s ease, visibility 0s linear 0s; }
  .nav-links .cd-nav-menu { flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; }
  .nav-links-bottom { flex-direction: column; align-items: flex-start; gap: 16px; margin-left: 0; margin-top: 8px; width: 100%; }
  .nav-links-bottom .wp-block-button { width: 100%; text-align: center; }
}

/* — back-to-top button, fixed bottom-right — hidden until the page is
   scrolled (theme.js toggles "is-visible"), CSS-drawn chevron (matches
   the hamburger icon's own line-based style, no icon font/SVG needed). */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.back-to-top-arrow {
  width: 10px;
  height: 10px;
  margin: 4px 0 0;
  border-top: 2px solid var(--wp--preset--color--bg);
  border-right: 2px solid var(--wp--preset--color--bg);
  transform: rotate(-45deg);
}
@media (max-width: 600px) {
  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* — registracija forma: card matches .reservation-card's surface/radius pattern — */
.cd-form-card {
  background: var(--wp--preset--color--surface);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 56px);
  max-width: 640px;
}
.cd-form-card > .kicker { margin-bottom: 8px; }

.cd-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
  margin-top: 22px;
}
.cd-field-full { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .cd-form-grid { grid-template-columns: 1fr; }
}

.cd-field { display: flex; flex-direction: column; gap: 8px; }
.cd-field label {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent);
}
.cd-field input[type="text"],
.cd-field input[type="email"],
.cd-field input[type="password"],
.cd-field textarea {
  font-family: var(--wp--preset--font-family--inter);
  /* 16px minimum — below this, iOS Safari auto-zooms the page on focus */
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid #c9c6bd;
  border-radius: 2px;
  background: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--ink);
  transition: border-color 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}
.cd-field input[type="text"]:focus,
.cd-field input[type="email"]:focus,
.cd-field input[type="password"]:focus,
.cd-field textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--accent);
}
.cd-field textarea { resize: vertical; min-height: 96px; line-height: 1.6; font-family: var(--wp--preset--font-family--inter); }

/* — role picker: segmented pills, same visual family as .seg and .course-filters — */
.cd-role-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.cd-role-picker input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cd-role-picker label {
  font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 99px;
  border: 1px solid #c9c6bd; cursor: pointer; text-transform: none; letter-spacing: normal;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cd-role-picker input:checked + label {
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--bg); border-color: transparent;
}
.cd-role-picker input:focus-visible + label {
  outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px;
}

/* — org-only fields (Firma, Grad, Kontakt broj firme): smooth reveal instead of an abrupt display:none toggle, shown only for nastavnik/tour_operator — */
.cd-org-field {
  overflow: hidden; max-height: 0; opacity: 0; gap: 0 !important;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.cd-org-field.is-visible { max-height: 120px; opacity: 1; gap: 8px !important; }

.cd-form-submit { margin-top: 26px; }

.cd-form-msg {
  font-size: 15px; line-height: 1.6; padding: 14px 18px; border-radius: 2px;
  border-left: 3px solid var(--wp--preset--color--accent);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
}
.cd-form-msg.is-error {
  border-left-color: var(--wp--preset--color--title-orange);
  background: color-mix(in srgb, var(--wp--preset--color--title-orange) 8%, transparent);
  color: var(--wp--preset--color--title-orange);
}

/* — kontakt forma (rezervacija.html): reuses .cd-form-grid/.cd-field/.cd-form-msg/.cd-form-submit from the registracija form, no .cd-form-card wrapper since it sits inside .reservation-card already — */
.cd-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* — prijava forma: reuses .cd-form-card/.cd-form-grid/.cd-field from the registracija form — */
.cd-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; margin-top: 16px; cursor: pointer;
}
.cd-remember input { width: 16px; height: 16px; accent-color: var(--wp--preset--color--accent); }
.cd-form-footnote { margin-top: 18px; margin-bottom: 0; font-size: 14px; }