/* =========================================================
   RESPONZÍVNY LAYOUT – mobil a malé tablety
   Namiesto position:absolute + pevné top/margin hacky
   používame prirodzené stackovanie pod seba (flex column).
   To zaručí, že sa nič nikdy neprekryje, nech je obsah
   akokoľvek vysoký na akomkoľvek telefóne.
   ========================================================= */

@media (max-width: 768px) {

    .container {
        flex-direction: column;   /* formulár a košík pod sebou, nie vedľa seba */
        flex-wrap: wrap;
        padding: 15px;
    }

    .form-container {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        box-sizing: border-box;
        order: 2;                /* formulár až za náhľadom košíka */
    }

    .cart-preview {
        width: 100%;
        position: static;        /* zrušený absolute + top:1030px hack */
        margin-bottom: 20px;
        order: 1;                /* náhľad košíka + doprava hore */
    }

    .header {
        margin-left: 0;
        margin-bottom: 15px;
        padding: 15px;
    }

    .header img {
        height: 90px;            /* menšie logo, nech sa zmestí na mobil */
    }

    .progress {
        flex-wrap: wrap;
        font-size: 13px;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"] {
        width: 100%;
        box-sizing: border-box;
    }

    #poznamka {
        width: 100%;
        box-sizing: border-box;
    }

    /* Tlačidlá pod sebou, na celú šírku, žiadne záporné margin hacky */
    .button-group {
        flex-direction: column-reverse; /* Pokračovať navrchu, Späť dole */
        align-items: stretch;
        margin-top: 0;
    }

    .button-back,
    .button-submit {
        width: 100%;
        margin-top: 0;
        text-align: center;
        box-sizing: border-box;
    }

    /* Doprava výber - aby ikony (Packeta/Comgate logo) nepretekali cez text */
    .doprava_container {
        max-width: 100%;
        padding: 15px 0;
        margin: 10px 0;
    }

    .doprava {
        flex-wrap: wrap;
    }

    .doprava img {
        width: 40px !important;
    }

    .doprava span {
        font-size: 14px;
        word-break: break-word;
    }

    .packeta-selector-value {
        display: block;
        margin-top: 8px;
        font-size: 13px;
        word-break: break-word;
    }

    /* Logo platobnej brány - aby nezasahovalo do dopravy/tlačidiel */
    .payment-logo-wrapper {
        position: static;
        margin-top: 20px;
        padding: 15px 0;
    }

    .payment-logo {
        max-width: 280px;
    }

    .cart-item {
        flex-wrap: wrap;
    }

    .cart-item img {
        width: 40px;
        height: 40px;
    }
}

/* Veľmi malé telefóny (do 359px) – len doladenie veľkostí písma/odsadenia,
   layout dedí pravidlá vyššie (max-width:768px) */
@media (max-width: 359px) {
    .header img {
        height: 70px;
    }

    .button-back,
    .button-submit {
        font-size: 13px;
        padding: 12px 16px;
    }

    .doprava img {
        width: 34px !important;
    }
}

/* Stredne malé zariadenia (veľké telefóny a malé tablety) */
@media (max-width: 768px) {
  /* hlavné pravidlá už definované vyššie v tomto súbore */
}

/* Stredné zariadenia (tablety na šírku, menšie notebooky) */
@media (min-width: 769px) and (max-width: 992px) {
    .container {
        flex-wrap: wrap;
    }

    .form-container {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .cart-preview {
        width: 100%;
    }
}

/* Veľké zariadenia (štandardné notebooky a menšie desktopy) */
@media (min-width: 993px) and (max-width: 1200px) {
  /* CSS pre klasické desktopy a väčšie notebooky */
}

/* Extra veľké zariadenia (4K monitory a pod.) */
@media (min-width: 1201px) {
  /* CSS pre veľmi veľké obrazovky – nie vždy nutné */
}