/* Drobne dopocty stylu pro /Kosik.aspx, ktere nejsou v default.css.
   Zakladni vzhled (cart, cart-row, amount-change, client-details ...) bere
   default theme - tady jen overujeme validacni stavy a notifikace. */

/* Validacni chyby u povinnych poli - zobrazeji se jen kdyz JS oznaci
   form-item jako .invalid. Default.css ma form-error vzdy viditelny. */
.form-item .form-error                              {display: none;}
.form-item.invalid .form-error                      {display: block;}
.form-item.invalid .form-item-element               {border-color: var(--color-error, #ee3405);}

/* Chybova hlaska pod tlacitkem "Objednat a zaplatit". */
.kosik-chyba                                        {color: var(--color-error, #ee3405); font-weight: 600; margin-top: 0.8em; text-align: right;}

/* Tabulka platebnich udaju na potvrzovaci strance. */
.kosik-platba-udaje                                 {display: grid; grid-template-columns: max-content 1fr; gap: 0.4em 1.2em; margin: 0.8em 0 0; padding: 0;}
.kosik-platba-udaje dt                              {color: var(--white-60); font-weight: 500;}
.kosik-platba-udaje dd                              {margin: 0; font-weight: 600;}

/* Vyber zeme doruceni nad seznamem doprav (krok 2). Pri zmene vola JS
   `/Eshop.ashx?akce=ciselniky-checkout&stat=XX` a prerenderuje volby. */
.kosik-zeme                                         {display: flex; flex-wrap: wrap; gap: 0.6em 0.8em; align-items: center; margin: 0 0 0.8em;}
.kosik-zeme label                                   {font-weight: 600;}
.kosik-zeme select                                  {min-width: 16em; padding: 0.4em 0.6em;}

/* Prazdny seznam doprav/plateb (po filtru zeme). */
.kosik-volby-prazdne                                {margin: 0.6em 0 1em; color: var(--color-error, #ee3405); font-weight: 600;}

/* Hlaska "v kosiku jde jen osobni odber" (placeholder {KOSIK_OSOBNI_ODBER_HLASKA}).
   Server/klient prepina viditelnost atributem hidden -> [hidden] musi prebit zobrazeni. */
.kosik-osobni-odber-hlaska                          {margin: 0.6em 0 1em; padding: 0.7em 0.9em; border-radius: 6px; background: var(--color-warning-bg, #fff4e0); border: 1px solid var(--color-warning, #e8a000); color: var(--color-warning-text, #6b4a00); font-weight: 600;}
.kosik-osobni-odber-hlaska[hidden]                  {display: none;}

/* Migrace 022/023+: Tlacitko vyberu vydejniho mista (Balikovna / Zasilkovna
   / ONE / WEDO). Vzhled je inspirovan radkem dopravy (.delivery .cart-row),
   jen tenci na vysku - tmavy obly box, kruhova ikonka s markerem vlevo,
   nadpis + (po vyberu) info o pobocce uprostred, akce "Vybrat" vpravo.
   Hover zesvetli pozadi.
   Dve varianty:
     1) hlavni tlacitko v panelu Doruceni  - .vm-tlacitko
     2) inline tlacitko pod radem dopravy  - .vm-tlacitko.vm-inline
        (Migrace 028: oranzovy ramecek - vypada jako "prilepena bublina"
        pod vybranym radkem dopravy, zrcadli ramecek vybraneho .cart-row.) */
.eshop-vydejni-misto                                {margin: 0.6em 0 1.2em;}
.eshop-vydejni-misto-inline                         {margin: 0.4em 0 0.6em; width:95%; margin:0px auto; position:relative; top:-8px; }
.eshop-vydejni-misto-inline button                  { border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:20px; border-bottom-right-radius:20px; }

.vm-tlacitko                                        {display: flex; width: 100%; align-items: center; gap: 0.9em; background: var(--black-45, rgba(0,0,0,.45)); color: white; padding: 0.7em 1em; border: 0.12em solid transparent; border-radius: var(--border-radius1, 1rem); box-sizing: border-box; text-align: left; font: inherit; cursor: pointer; transition: .15s ease-in-out;}
.vm-tlacitko:hover                                  {background: var(--black-30, rgba(0,0,0,.3));}
.vm-tlacitko:focus-visible                          {outline: 2px solid var(--color1, #f36122); outline-offset: 2px;}

.vm-tlacitko .vm-ikona                              {flex-shrink: 0; display: flex; width: 2.4em; height: 2.4em; justify-content: center; align-items: center; background: var(--black-70, rgba(0,0,0,.7)); border-radius: 100%; overflow: hidden;}
.vm-tlacitko .vm-ikona img                          {display: block; width: 1.2em; height: 1.2em;}

/* Migrace 028: Pokud nam dopravce vratil URL fotky pobocky, vykreslime ji
   misto defaultniho marker SVG. Kontejner se promeni z kruhove ikonky se
   znackou na ctvercovy thumbnail s prekryvem (object-fit: cover). Bez fotky
   ZADNY placeholder neresime - zustava puvodni marker. */
.vm-tlacitko .vm-ikona.vm-ikona-foto                {background: transparent; width: 3.2em; height: 3.2em; border-radius: calc(0.4 * var(--border-radius1, 1rem));}
/* Fotka pobocky vyplnuje kontejner i v inline variante - vyssi specificita
   prepise generický pravidlo .vm-tlacitko.vm-inline .vm-ikona img {1em x 1em}. */
.vm-tlacitko .vm-ikona.vm-ikona-foto img.vm-ikona-img {display: block; width: 100%; height: 100%; object-fit: cover;}

.vm-tlacitko .vm-info                               {flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15em;}
.vm-tlacitko .vm-info .vm-title                     {font-size: 0.95em; font-weight: 600;}
.vm-tlacitko .vm-info .vm-bublina                   {font-size: 0.85em; color: var(--white-80, rgba(255,255,255,.85)); line-height: 1.3;}
.vm-tlacitko .vm-info .vm-bublina:empty             {display: none;}
.vm-tlacitko .vm-info .vm-bublina br                {display: none;}
.vm-tlacitko .vm-info .vm-bublina strong            {display: block; font-weight: 600; color: white;}
.vm-tlacitko .vm-info .vm-bublina .evm-bublina-adresa {display: block; font-weight: 400; color: var(--white-60, rgba(255,255,255,.6));}

.vm-tlacitko .vm-akce                               {flex-shrink: 0; display: flex; align-items: center; gap: 0.35em; color: var(--color1, #f36122); font-size: 0.85em; font-weight: 600;}
.vm-tlacitko .vm-akce-sipka                         {font-size: 1.5em; line-height: 0.8;}

/* Inline (pod radem dopravy) - "prilepena bublina" s oranzovym ramečkem,
   zrcadli vzhled vybraneho .delivery .cart-row nahore. Mensi padding nez
   hlavni tlacitko, ale shodny radius i tloustka ramecku, aby vizualne
   tvorily dvojici. */
.vm-tlacitko.vm-inline                              {padding: 0.55em 0.9em; gap: 0.7em; border-color: var(--color1, #f36122);}
.vm-tlacitko.vm-inline .vm-ikona                    {width: 2.2em; height: 2.2em;}
.vm-tlacitko.vm-inline .vm-ikona img                {width: 1em; height: 1em;}
.vm-tlacitko.vm-inline .vm-ikona.vm-ikona-foto      {width: 2.8em; height: 2.8em;}
.vm-tlacitko.vm-inline .vm-title                    {font-size: 0.9em;}
.vm-tlacitko.vm-inline .vm-info .vm-bublina         {font-size: 0.8em;}

@media screen and (max-width: 600px) {
    .vm-tlacitko .vm-akce-text                      {display: none;}
    .vm-tlacitko .vm-akce                           {font-size: 1em;}
}

/* Pickup rezim: pole doruceni jsou zamykla (predvyplneni z widgetu).
   Pro spravnou indikaci ze sou disabled davame jim tlumenou opacity. */
.form-item.disabled-pickup .form-item-element       {opacity: 0.6;}
.form-item.disabled-pickup input,
.form-item.disabled-pickup textarea                 {background: rgba(0, 0, 0, 0.04); cursor: not-allowed;}