/*
 * Theme Name:  Deliace centrum (Bricks Child)
 * Template:    bricks
 * Version:     1.0.0
 * Description: Child téma pre Bricks Builder — web 1. Deliace centrum.
 * Text Domain: bricks-child
 */

/* ==========================================================================
   Prvky mimo Bricks — markup vypisuje child téma (inc/modaly.php) alebo app.js.
   Zdroj: dizajn/assets/css/style.css sekcia 15 (modal, lightbox) a značka „Nové“.
   Premenné --dc-* sú z palety a Global Variables Bricks.
   ========================================================================== */

/* --- Modal a lightbox ---------------------------------------------------- */
.dc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000; /* nad sticky hlavičkou Bricks */
  display: grid;
  place-items: center;
  padding: var(--dc-pad-x);
  background: rgb(var(--dc-ink-rgb) / 92%);
  opacity: 0;
  visibility: hidden;
  /* visibility skokom, nie s trvaním — inak focus() na obsah modalu prepadne */
  transition: opacity 0.35s, visibility 0s linear 0.35s;
}
.dc-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s, visibility 0s;
}
.dc-modal__box {
  position: relative;
  width: min(1100px, 100%);
  transform: scale(0.97);
  transition: transform 0.35s var(--dc-ease);
}
.dc-modal.is-open .dc-modal__box { transform: scale(1); }
/* Na nízkej obrazovke (napr. notebook 1440 × 900) by zatváracie tlačidlo (58 px nad boxom) vyšlo
   nad okraj okna — chyba aj v statickom dizajne. Box sa preto zúži podľa výšky okna:
   lightbox = fotka 3:2 + lišta 70 px, video = 16:9; nad aj pod boxom ostane ≥ 70 px. */
#lightbox .dc-modal__box { width: min(1100px, 100%, calc((100svh - 210px) * 1.5)); }
#videoModal .dc-modal__box { width: min(1100px, 100%, calc((100svh - 140px) * 16 / 9)); }
.dc-modal__box video {
  display: block;
  width: 100%;
  border-radius: var(--dc-radius);
  background: #000;
}
.dc-modal__close {
  position: absolute;
  top: -58px;
  right: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--dc-line-dark);
  border-radius: 50%;
  background: transparent;
  color: var(--dc-white);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.dc-modal__close:hover { background: var(--dc-orange); color: var(--dc-ink); border-color: var(--dc-orange); }

.dc-lb__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--dc-radius);
  overflow: hidden;
  background: #000;
}
.dc-lb__stage img { width: 100%; height: 100%; object-fit: contain; }
.dc-lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  color: var(--dc-white);
}
.dc-lb__title { font-size: var(--dc-h6); font-weight: 700; }
.dc-lb__title .dc-new { margin-left: 8px; }
.dc-lb__nav { display: flex; gap: 12px; }
.dc-lb__count { font-variant-numeric: tabular-nums; font-size: var(--dc-small); color: var(--dc-sky); }

.dc-round {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--dc-line-dark);
  border-radius: 50%;
  background: transparent;
  color: var(--dc-white);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.dc-round:hover { background: var(--dc-orange); color: var(--dc-ink); border-color: var(--dc-orange); }

body.dc-locked { overflow: hidden; }

/* --- Značka „Nové“ pri fotkách, ktoré pribudli -------------------------- */
/* Tmavý text na oranžovej má 8,3 : 1 — oranžový text na bielej by nestačil. */
.dc-new {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--dc-btn-radius);
  background: var(--dc-orange);
  color: var(--dc-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.dc-new-text { color: var(--dc-ink); white-space: nowrap; }
.dc-new-text::before { content: "✦ "; color: var(--dc-orange-dark); }

/* --- Animácia „DC odhalenie“ pre Bricks interakcie ----------------------- */
/* Registrovaná v functions.php (bricks/setup/control_options). Bricks pridá prvku triedu
   brx-animate-dcRevealIn a trvanie/oneskorenie z interakcie; pred štartom ho skryje
   (data-interaction-hidden-on-load). Pohyb = dizajn (style.css sekcia 16). */
.brx-animate-dcRevealIn {
  animation-name: dc-reveal;
  animation-timing-function: var(--dc-ease);
  animation-fill-mode: both;
}
@keyframes dc-reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brx-animate-dcRevealIn { animation-name: none; }
  [data-interaction-hidden-on-load] { opacity: 1; }
}

/* --- Potvrdenie po odoslaní dopytu (app.js initFormPotvrdenie, 2026-11-02) --------------------------
   Bricks pripája hlášku na KONIEC formulára (pod tlačidlo) a polia vynuluje → zákazník ju nevidel.
   Po úspechu sa polia skryjú a na ich mieste je panel s potvrdením + „Odoslať ďalší dopyt“.
   Zelená = farby stavu „ok“ z dizajnu (dizajn/assets/css/style.css .dc-form__status). */
.brxe-form.dc-form--odoslane > :not(.dc-form-done) { display: none !important; }
.dc-form-done {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px;
  border-radius: var(--dc-radius);
  background: #e8f6ec;
  color: #1c6b32;
}
.dc-form-done:focus { outline: none; }
.dc-form-done__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1c6b32;
  color: #fff;
}
.dc-form-done__title { margin: 0; font-size: var(--dc-h5); font-weight: 700; line-height: var(--dc-lh-head); color: inherit; }
.dc-form-done__text { margin: 0; font-size: var(--dc-body); line-height: var(--dc-lh-body); color: var(--dc-ink); }
.dc-form-done .dc-btn { margin-top: 6px; }
/* svetlý formulár (popupy, úvod): polia majú vodorovný odstup 10 px (Bricks .form-group) → panel zarovno s nimi */
.dc-form .dc-form-done { margin-inline: 10px; width: calc(100% - 20px); }
/* tmavý formulár (Kontakt, úvod) */
.dc-form-dark .dc-form-done { background: rgb(255 255 255 / 6%); border: 1px solid var(--dc-line-dark); color: var(--dc-white); }
.dc-form-dark .dc-form-done__icon { background: var(--dc-orange); color: var(--dc-ink); }
.dc-form-dark .dc-form-done__text { color: var(--dc-sky); }
@media (max-width: 767px) { .dc-form-done { padding: 24px; } }