/* ==========================================================================
   DŘEVO KALKULÁTOR – CSS (SCOPED)
   --------------------------------------------------------------------------
   Všechny selektory jsou omezené na #drevo-kalkulator, takže se styly
   NEPROJEVÍ mimo kalkulačku (nepřepíšou tlačítka ani vzhled webu).
   ========================================================================== */

/* --- Základní obal kalkulačky (okraje, odsazení od okolí stránky) --- */
#drevo-kalkulator.dk-wrap-left{
  padding:16px; /* upravte pro více/méně prostoru kolem kalkulačky */
}

/* --- Layout formuláře: sekce pod sebou, rozestupy --- */
#drevo-kalkulator .dk-form{
  display:flex;
  flex-direction:column;
  gap:16px; /* mezery mezi kartami/sekcemi */
}

/* ==========================================================================
   KARTY (sekce s bílým pozadím)
   --------------------------------------------------------------------------
   Vzhled „bloků“ (sekcí) kalkulačky: bílé pozadí, okraj, zaoblení, stín.
   ========================================================================== */

/* Základní karta (sekce) */
#drevo-kalkulator .dk-card{
  width: 100%;
  max-width: 980px;               /* změňte, pokud chcete širší/užší kalkulačku */
  margin-left: auto;
  margin-right: auto;             /* vycentrování karty v rámci rodiče */
  background: #fff;

  border: 1px solid #e5e7eb;      /* barva okraje karty */
  border-radius: 16px;            /* zakulacení rohů karty */
  padding: 18px;                  /* vnitřní odsazení karty */
  box-sizing: border-box;

  box-shadow: 0 4px 12px rgba(0,0,0,.05); /* jemný stín */
}

/* Hlavička karty: nadpis vlevo + prvky vpravo (např. select) */
#drevo-kalkulator .dk-header{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

/* Nadpis sekce */
#drevo-kalkulator .dk-card h2{
  margin: 0;
  font-size: 1.2rem;              /* velikost nadpisu sekce */
  font-weight: 500;               /* upravte, pokud chcete méně tučné (např. 600) */
  line-height: 1.2;
}

/* Pomocný text pod nadpisem */
#drevo-kalkulator .dk-hint{
  margin: 2px 0 10px;
  color: #475569;
  font-size: .95rem;
}

/* ==========================================================================
   POLE, INPUTY, SELECTY
   ========================================================================== */

/* Skupina polí v hlavičce souhrnu (např. výběr režimu DPH) */
#drevo-kalkulator .dk-card-sum-fields{
  display:flex;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}

/* Minimální šířka jednotlivého pole (aby se select nezmenšil moc) */
#drevo-kalkulator .dk-card-sum-fields .dk-field{
  min-width:160px;
}

/* Label + input/select ve sloupci */
#drevo-kalkulator .dk-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Vzhled inputů a selectů */
#drevo-kalkulator .dk-field input,
#drevo-kalkulator .dk-field select{
  padding:10px 12px;          /* výška/komfort pro klikání */
  border:1px solid #cbd5e1;
  border-radius:12px;
  font-size:1rem;
  outline:none;
}

/* Focus (kliknutí do pole) */
#drevo-kalkulator .dk-field input:focus,
#drevo-kalkulator .dk-field select:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

/* Checkbox v řádku impregnace (jen malý spacing) */
#drevo-kalkulator .dk-field input[type="checkbox"]{
  margin-right:8px;
}

/* Typografie ve vstupních polích – ať to sedí s webem */
#drevo-kalkulator .dk-field input,
#drevo-kalkulator .dk-field select,
#drevo-kalkulator textarea{
  color: #334155; /* hlavní barva textu – upravte podle šablony */
}

/* Textarea (poznámka) – sjednocení s inputy/selecty */
#drevo-kalkulator textarea{
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  font-size:1rem;
  outline:none;
  width:100%;
  resize:vertical;
  font-family: inherit;
}

#drevo-kalkulator textarea:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

/* Placeholder (např. "např. 10") – aby nebyl moc tmavý */
#drevo-kalkulator .dk-field input::placeholder,
#drevo-kalkulator textarea::placeholder{
  color: #94a3b8;
}

/* Některé prohlížeče barví placeholder jinak – pojistka */
#drevo-kalkulator .dk-field input::-webkit-input-placeholder,
#drevo-kalkulator textarea::-webkit-input-placeholder{
  color: #94a3b8;
}

/* ==========================================================================
   KONTAKTNÍ POLE – 3 SLOUPCE (jméno / email / telefon)
   ========================================================================== */
#drevo-kalkulator .dk-contact-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

/* Tablet: 2 sloupce */
@media (max-width: 920px){
  #drevo-kalkulator .dk-contact-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobil: 1 sloupec */
@media (max-width: 560px){
  #drevo-kalkulator .dk-contact-grid{
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   TLAČÍTKA (jen uvnitř kalkulačky)
   --------------------------------------------------------------------------
   Tady upravujete barvy/rádius/hover efekt tlačítek.
   ========================================================================== */
#drevo-kalkulator .dk-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

/* Základní styl pro všechna tlačítka v kalkulačce */
#drevo-kalkulator button{
  border:none;
  padding:10px 16px;
  border-radius:12px;
  background:#2563eb; /* primární barva tlačítka */
  color:#fff;
  font-weight:400;
  cursor:pointer;
}

/* Sekundární tlačítko (tmavé) */
#drevo-kalkulator button.secondary{
  background:#0f172a;
  color:#e5e7eb;
}

/* Ghost tlačítka – základ (světlé pozadí, bez rámečku) */
#drevo-kalkulator button.ghost{
  background: #EFEDDF;
  color: #10182C;
  border: none;
}

/* Ghost tlačítka – hover (tmavé) */
#drevo-kalkulator button.ghost:hover:not([disabled]){
  background: #10182C;
  color: #e5e7eb;
}

/* Disabled stav */
#drevo-kalkulator button[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

/* Hover efekt (mimo disabled) */
#drevo-kalkulator button:hover:not([disabled]){
  filter:brightness(1.05);
}

/* SUBMIT řádek – tlačítko doprava */
#drevo-kalkulator .dk-actions.dk-submit-row{
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 980px;      /* stejné jako karty, můžeš upravit */
  margin: 12px auto 0;
}

/* SUBMIT tlačítko – nikdy ne na 100% */
#drevo-kalkulator .dk-actions.dk-submit-row #submit-hoblovani{
  width: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
}

/* ==========================================================================
   CHYBY A INFO BOXÍKY
   ========================================================================== */

/* Chybová hláška (červený box) */
#drevo-kalkulator .dk-error{
  display:block;
  margin-top:10px;
  color:#b91c1c;
  background:#fef2f2;
  border:1px solid #fecaca;
  padding:8px 10px;
  border-radius:12px;
}

/* Pokud je hidden, tak to opravdu nezobrazuj */
#drevo-kalkulator .dk-error[hidden]{
  display:none !important;
}

/* Text "košík je prázdný" */
#drevo-kalkulator .dk-empty{
  padding:14px;
  border:1px dashed #e5e7eb;
  border-radius:12px;
  color:#475569;
  background:#f8fafc;
}

/* ==========================================================================
   KOŠÍK + TABULKA
   ========================================================================== */
#drevo-kalkulator .dk-basket{
  margin-top:12px;
}

/* Tabulka košíku */
#drevo-kalkulator .dk-table{
  width:100%;
  border-collapse:collapse;
}

#drevo-kalkulator .dk-table th,
#drevo-kalkulator .dk-table td{
  border-bottom:1px solid #e5e7eb;
  padding:8px 6px;
  text-align:left;
}

/* Součty dole (2 sloupce) */
#drevo-kalkulator .dk-total{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}

/* ==========================================================================
   SEZNAM ŘÁDKŮ / VÝPOČTŮ
   ========================================================================== */

/* Kontejner s položkami výpočtů (řádky nad košíkem) */
#drevo-kalkulator .dk-items-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Jedna “položka” (řádek výpočtu) */
#drevo-kalkulator .dk-item{
  border:1px dashed #e5e7eb;
  border-radius:12px;
  padding:12px;
}

/* Grid uvnitř položky */
#drevo-kalkulator .dk-row{
  display:grid;
  grid-template-columns:repeat(8, minmax(0,1fr));
  gap:10px;
}

/* Pomocné třídy pro roztažení */
#drevo-kalkulator .dk-row .span-2{ grid-column:span 2; }
#drevo-kalkulator .dk-row .span-3{ grid-column:span 3; }

/* Mobil/tablet – grid se zjednoduší na 4 sloupce */
@media (max-width: 920px){
  #drevo-kalkulator .dk-row{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }
  #drevo-kalkulator .dk-row .span-2{ grid-column:span 2; }
  #drevo-kalkulator .dk-row .span-3{ grid-column:span 4; }
}

/* Spodní část položky: chip + checkbox + tlačítka */
#drevo-kalkulator .dk-item-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}

/* Malé skupiny prvků */
#drevo-kalkulator .dk-mini{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Výstupy v řádku (kubatura / cena) */
#drevo-kalkulator .dk-out{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

/* “Chip” – účtovaná délka */
#drevo-kalkulator .dk-chip{
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:6px 10px;
  font-weight:500;
}

/* FIX: některé WP šablony/pluginy převlékají <select> (nice-select/select2)
   a původní selecty schovávají. V kalkulačce chceme nativní select vždy vidět. */
#drevo-kalkulator select[data-species]{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  pointer-events: auto !important;

  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
}

/* Když select2 schová select jako "hidden-accessible", vrátíme ho zpět */
#drevo-kalkulator select[data-species].select2-hidden-accessible{
  position: static !important;
  width: 100% !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
}

/* Schovej náhradní UI (nice-select / select2) uvnitř kalkulačky,
   aby nebyly duplicity a hlavně aby nové řádky fungovaly stejně */
#drevo-kalkulator .nice-select,
#drevo-kalkulator .select2,
#drevo-kalkulator .select2-container{
  display: none !important;
}

/* GDPR text – stejné jako .dk-hint (barva + velikost) */
#drevo-kalkulator .dk-privacy{
  margin-top: 14px;
  color: #475569;
  font-size: .95rem;
  line-height: 1.6;
}