/* Blagajna: na namizju podatke naročnika in računa zloži levo,
   podatke za dostavo pa postavi na vrh desnega stolpca. */
@media (min-width: 1024px) {
  html body .animate-fadeIn > .max-w-5xl:has(> form) > form {
    row-gap: 0 !important;
  }

  html body .animate-fadeIn > .max-w-5xl:has(> form) > form > section:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* Drugo section ovojnico odstranimo iz grid postavitve, da lahko račun in
     dostavni naslov razporedimo kot samostojni kartici brez podvajanja logike. */
  html body .animate-fadeIn > .max-w-5xl:has(> form) > form > section:nth-of-type(2) {
    display: contents !important;
  }

  html body .animate-fadeIn > .max-w-5xl:has(> form) > form > section:nth-of-type(2) > div:first-child {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 16px 0 0 !important;
    padding: 16px 16px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  }

  html body .animate-fadeIn > .max-w-5xl:has(> form) > form > section:nth-of-type(2) > div:first-child h2 {
    margin-bottom: 0 !important;
  }

  html body .animate-fadeIn > .max-w-5xl:has(> form) > form > section:nth-of-type(2) > .grid {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin: 0 !important;
    padding: 4px 16px 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
    background: rgba(255, 249, 238, 0.45) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  }

  /* Ko račun na podjetje ni izbran, ostane glava računa samostojna kartica. */
  html body .animate-fadeIn > .max-w-5xl:has(> form) > form > section:nth-of-type(2):not(:has(> .grid)) > div:first-child {
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
  }

  html body .animate-fadeIn > .max-w-5xl:has(> form) > form > section:nth-of-type(2) > div:last-child {
    grid-column: 2 !important;
    /* Dostava naj zajame celoten zgornji sklop. Tako njena višina ne raztegne
       samo prve vrstice in ne potisne podatkov za podjetje navzdol. */
    grid-row: 1 / 4 !important;
    margin: 0 !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
    align-self: start !important;
  }

  html body .animate-fadeIn > .max-w-5xl:has(> form) > form > section:nth-of-type(2) > div:last-child h3 {
    margin-bottom: 12px !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  html body .animate-fadeIn > .max-w-5xl:has(> form) > form > section:nth-of-type(3) {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    margin-top: 16px !important;
  }

  html body .animate-fadeIn > .max-w-5xl:has(> form) > form > section:nth-of-type(4) {
    grid-column: 1 !important;
    grid-row: 5 !important;
    margin-top: 16px !important;
  }

  html body .animate-fadeIn > .max-w-5xl:has(> form) > form > section:nth-of-type(5) {
    grid-column: 2 !important;
    grid-row: 5 !important;
    margin-top: 16px !important;
  }

  /* Trenutna blagajna uporablja max-w-7xl. Dostavni sklop na namizju vrnemo
     v prejšnji kompaktni razpored: leva polovica vsebuje dan, pogostost in
     termin, desna polovica pa odpiralni čas in odsotnost. Opombe ostanejo spodaj. */
  html body .animate-fadeIn > .max-w-7xl:has(> form) > form > section:first-of-type > div.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
  }

  html body .animate-fadeIn > .max-w-7xl:has(> form) > form > section:first-of-type > div.grid > :nth-child(1) {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }

  html body .animate-fadeIn > .max-w-7xl:has(> form) > form > section:first-of-type > div.grid > :nth-child(2) {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
  }

  html body .animate-fadeIn > .max-w-7xl:has(> form) > form > section:first-of-type > div.grid > :nth-child(3) {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
  }

  html body .animate-fadeIn > .max-w-7xl:has(> form) > form > section:first-of-type > div.grid > :nth-child(4) {
    grid-column: 3 / 5 !important;
    grid-row: 1 !important;
  }

  html body .animate-fadeIn > .max-w-7xl:has(> form) > form > section:first-of-type > div.grid > :nth-child(5) {
    grid-column: 3 / 5 !important;
    grid-row: 2 !important;
  }

  html body .animate-fadeIn > .max-w-7xl:has(> form) > form > section:first-of-type > div.grid > :nth-child(6) {
    grid-column: 1 / 5 !important;
    grid-row: 3 !important;
  }
}