/* Zadani izgled obrasca za rezervaciju. Prilagodi bojama stranice preko varijabli. */
.wb {
  --wb-accent: #5b3f8c;
  --wb-accent-text: #fff;
  --wb-line: #ddd5e8;
  --wb-muted: #6b6477;
  --wb-bg: #fff;
  --wb-radius: 12px;
  display: grid;
  gap: 1.5rem;
  max-width: 44rem;
}
.wb fieldset { border: 0; padding: 0; margin: 0; }
.wb legend { font-weight: 600; margin-bottom: 0.7rem; font-size: 1.05rem; }
.wb button { font: inherit; cursor: pointer; }
.wb button:disabled { cursor: default; }
.wb :focus-visible { outline: 3px solid var(--wb-accent); outline-offset: 2px; }
.wb-services { display: grid; gap: 0.5rem; }
.wb-service { display: flex; justify-content: space-between; gap: 1rem; text-align: left; padding: 0.9rem 1rem; border: 1.5px solid var(--wb-line); border-radius: var(--wb-radius); background: var(--wb-bg); color: inherit; }
.wb-service-meta { color: var(--wb-muted); white-space: nowrap; }
.wb-selected { border-color: var(--wb-accent) !important; box-shadow: inset 0 0 0 1px var(--wb-accent); }
.wb-staff, .wb-slots { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wb-chip { padding: 0.55rem 0.9rem; border: 1.5px solid var(--wb-line); border-radius: 999px; background: var(--wb-bg); color: inherit; }
.wb-chip.wb-selected { background: var(--wb-accent); color: var(--wb-accent-text); }
.wb-cal { max-width: 22rem; }
.wb-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.wb-month { text-transform: capitalize; }
.wb-nav { border: 0; background: none; font-size: 1.5rem; line-height: 1; padding: 0.2rem 0.6rem; color: inherit; }
.wb-nav:disabled { opacity: 0.25; }
.wb-week, .wb-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; text-align: center; }
.wb-week { font-size: 0.75rem; color: var(--wb-muted); margin-bottom: 0.25rem; }
.wb-day { aspect-ratio: 1; border: 0; border-radius: 50%; background: none; color: var(--wb-muted); opacity: 0.45; }
.wb-day.wb-free { opacity: 1; color: inherit; background: color-mix(in srgb, var(--wb-accent) 10%, transparent); font-weight: 600; }
.wb-day.wb-selected { background: var(--wb-accent); color: var(--wb-accent-text); }
.wb-form { display: grid; gap: 0.8rem; max-width: 30rem; }
.wb-form label { display: grid; gap: 0.3rem; font-size: 0.95rem; }
.wb-form input:not([type='checkbox']), .wb-form textarea, .wb-form select { font: inherit; padding: 0.7rem 0.8rem; border: 1.5px solid var(--wb-line); border-radius: 10px; background: var(--wb-bg); color: inherit; }
.wb-check { display: flex !important; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem !important; }
.wb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.wb-btn { justify-self: start; border: 0; border-radius: 999px; padding: 0.9rem 1.5rem; background: var(--wb-accent); color: var(--wb-accent-text); font-weight: 600; }
.wb-btn:disabled { opacity: 0.6; }
.wb-muted { color: var(--wb-muted); font-size: 0.9rem; margin: 0; }
.wb-status { min-height: 1.4em; margin: 0; }
.wb-status[data-state='error'] { color: #b3261e; }
.wb-done { padding: 1.5rem; border: 1.5px solid var(--wb-line); border-radius: var(--wb-radius); background: var(--wb-bg); }
.wb-done h3 { margin-top: 0; }
.wb-ref { font-variant-numeric: tabular-nums; color: var(--wb-muted); }
.wb-link { font-weight: 600; color: var(--wb-accent); }
@media (prefers-reduced-motion: no-preference) { .wb-chip, .wb-day, .wb-service { transition: background 0.15s, border-color 0.15s; } }
.wb-departures { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.wb-departure { border: 1.5px solid var(--wb-line); border-radius: var(--wb-radius); padding: 1rem; display: grid; gap: 0.7rem; background: var(--wb-bg); }
.wb-dep-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wb-departure .wb-chip { justify-self: start; }

.wb-group { border: 1.5px solid var(--wb-line); border-radius: var(--wb-radius); padding: 0.75rem 1rem 1rem; margin: 0; display: grid; gap: 0.6rem; }
.wb-group legend { padding: 0 0.3rem; font-weight: 600; }
.wb-qty { display: flex !important; justify-content: space-between; align-items: center; gap: 1rem; }
.wb-qty > span, .wb-check > span { display: grid; gap: 0.1rem; }
.wb-qty small, .wb-check small { color: var(--wb-muted); font-size: 0.82rem; }
.wb-qty select { width: 5rem; }
.wb-total { margin: 0; }
.wb-done .wb-btn { display: inline-block; text-decoration: none; margin: 0.25rem 0 0.75rem; }
/* Galerija (mountGallery / cms.gallery) – osnovni izgled je već na elementima, ovdje samo dorade. */
.wg-thumb:focus-visible, .wg-lightbox button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wg-thumb img { transition: transform 0.2s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .wg-thumb:hover img { transform: scale(1.03); } }
.wg-lightbox [hidden] { display: none; }
/* Ocjene majstora (mountProviderReviews) */
.wr-stars { color: #b45309; letter-spacing: 1px; }
.wr-summary { font-size: 1.1rem; margin: 0; }
.wr-list { display: grid; gap: 0.9rem; }
.wr-item { border-bottom: 1px solid var(--wb-line); padding-bottom: 0.8rem; }
.wr-head, .wr-text { margin: 0 0 0.3rem; }
.wr-text { white-space: pre-wrap; }
.wr-verified { color: #1f7a4d; font-size: 0.9rem; }
.wr-rate { display: flex; flex-wrap: wrap; gap: 0.15rem; border: 0; padding: 0; margin: 0; }
.wr-rate legend { width: 100%; }
.wr-star { cursor: pointer; font-size: 2rem; line-height: 1; color: var(--wb-line); }
.wr-star input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wr-star:has(input:checked), .wr-star:has(~ .wr-star input:checked) { color: #b45309; }
.wr-star:has(input:focus-visible) { outline: 3px solid var(--wb-accent); outline-offset: 2px; border-radius: 4px; }

/* Uspjeh (plaćeno, rezervirano, poslano): uvijek zeleno-neutralno, neovisno o boji brenda (crvenkasta boja brenda izgledala je kao greška). */
.wb-done.wb-success { background: var(--wb-success-bg, #eef7f0); border: 1.5px solid var(--wb-success-line, #9fd0ab); color: var(--wb-success-text, inherit); }
.wb-done.wb-success > :first-child::before { content: '✓'; display: inline-block; margin-right: 0.45rem; color: var(--wb-success, #1f7a3a); font-weight: 700; }
.wb-success-title { margin: 0 0 0.35rem; }

/* Webshop (mountShop) */
.ws { display: grid; gap: 1rem; max-width: none; }
.ws-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
.ws-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ws-filter .wb-chip, .ws-cart-btn { cursor: pointer; font: inherit; }
.ws-count { display: inline-block; min-width: 1.4em; padding: 0 0.35em; border-radius: 999px; background: var(--wb-accent); color: var(--wb-accent-text); font-size: 0.85em; text-align: center; }
.ws-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ws-card article { height: 100%; display: flex; flex-direction: column; border: 1.5px solid var(--wb-line); border-radius: var(--wb-radius); overflow: hidden; background: var(--wb-bg); }
.ws-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ws-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.ws-title { margin: 0; font-size: 1.1rem; }
.ws-link { all: unset; cursor: pointer; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; color: inherit; }
.ws-link:focus-visible { outline: 3px solid var(--wb-accent); outline-offset: 2px; border-radius: 4px; }
.ws-badge { margin: 0; font-size: 0.8rem; color: var(--wb-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ws-desc { margin: 0; color: var(--wb-muted); }
.ws-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
.ws-price { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-out { margin: 0; font-weight: 600; color: var(--wb-muted); }
.ws-add { cursor: pointer; }
.ws-add:disabled, .ws-pay:disabled { opacity: 0.55; cursor: not-allowed; }
.ws-soldout .ws-img { filter: grayscale(0.6); opacity: 0.8; }
.ws-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ws-overlay { position: fixed; inset: 0; z-index: 2147482000; background: rgba(15, 15, 20, 0.45); display: flex; justify-content: flex-end; }
.ws-overlay-center { justify-content: center; align-items: center; padding: 1rem; }
.ws-drawer, .ws-detail { background: var(--wb-bg); color: inherit; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.25rem; box-sizing: border-box; overflow: auto; }
.ws-drawer { width: min(420px, 100%); height: 100%; }
.ws-detail { width: min(720px, 100%); max-height: 100%; border-radius: var(--wb-radius); }
.ws-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ws-drawer-head h2 { margin: 0; font-size: 1.25rem; }
.ws-close { font: inherit; font-size: 1.6rem; line-height: 1; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.ws-close:hover { background: color-mix(in srgb, var(--wb-line) 50%, transparent); }
.ws-lines { display: grid; gap: 0.75rem; }
.ws-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 0.75rem; align-items: center; }
.ws-line img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.ws-line p { margin: 0; }
.ws-line-name { font-weight: 600; }
.ws-qty { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.ws-qty button { font: inherit; width: 44px; height: 44px; border: 1.5px solid var(--wb-line); border-radius: 999px; background: var(--wb-bg); color: inherit; cursor: pointer; }
.ws-delivery { border: 1px solid var(--wb-line); border-radius: var(--wb-radius); margin: 0; padding: 0.5rem 0.75rem; display: grid; gap: 0.25rem; }
.ws-delivery legend { font-weight: 600; padding: 0 0.25rem; }
.ws-choice { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer; }
.ws-choice input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--wb-accent); flex: none; }
.ws-drawer-foot { margin-top: auto; display: grid; gap: 0.6rem; border-top: 1px solid var(--wb-line); padding-top: 0.75rem; }
.ws-total { display: flex; justify-content: space-between; margin: 0; }
.ws-pay { justify-self: stretch; text-align: center; cursor: pointer; }
.ws-detail-img { width: 100%; height: auto; border-radius: var(--wb-radius); }
.ws-details > :first-child { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { .ws-drawer { animation: ws-in 0.18s ease-out; } }
@keyframes ws-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* R1 račun (tvrtka + OIB): kućica otkriva polja – i u košarici (izvan .wb-form). */
.wb-r1 { display: grid; gap: 0.5rem; }
.wb-r1-fields { display: grid; gap: 0.6rem; }
.wb-r1-fields[hidden] { display: none; }
.wb-r1-fields label { display: grid; gap: 0.3rem; font-size: 0.95rem; }
.wb-r1-fields input { font: inherit; padding: 0.7rem 0.8rem; border: 1.5px solid var(--wb-line); border-radius: 10px; background: var(--wb-bg); color: inherit; }