/**
 * shop-korak1-redizajn.css
 *
 * Stilovi za /shop/korak1 po marketing-dizajnu. Sva pravila su scoped
 * unutar .order-wrapper kako ne bi uticala na ostale stranice.
 */

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

.order-wrapper {
    width: 100%;
    background-color: #f2f5f5;
}

.order-wrapper * {
    box-sizing: border-box;
}

.order {
    display: flex;
    justify-self: center;
    align-items: center;
    flex-direction: column;
    padding: 80px 20px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    color: #333;
}

.order > h1 {
    text-align: left;
    width: 100%;
    font-size: 35px;
    font-weight: 400;
    color: #000;
    margin: 0 0 10px 0;
    padding: 0;
}

.order > h1 strong {
    font-weight: bold;
    color: #000;
}

.order > p {
    text-align: left;
    width: 100%;
    font-size: 15px;
    color: #555;
    padding-top: 0;
    padding-bottom: 50px;
    margin: 0;
}

/* --- Checkout steps --- */

.steps {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding-bottom: 50px;
}

.steps p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 12px;
    color: #838383;
}

.steps p span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #838383;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
}

.steps p.step-active,
.steps p.step-completed {
    color: #000;
}

.steps p.step-active span,
.steps p.step-completed span {
    background-color: #000;
}

.steps .step-line {
    width: 25px;
    height: 1px;
    background-color: #838383;
}

.steps .step-line.step-line-completed {
    background-color: #000;
}

@media (max-width: 480px) {
    .steps {
        gap: 8px;
        padding-bottom: 30px;
    }

    .steps p {
        font-size: 10px;
    }

    .steps p span {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .steps .step-line {
        width: 12px;
    }
}

/* --- Layout --- */
.order-boxes {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.order-domain {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    width: 70%;
}

.box {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    padding: 30px 15px;
    border-radius: 15px;
    border: none;
}

.flow {
    display: none;
    width: 100%;
}

.flow.active {
    display: block;
}

.flow.hidden { display: none; }

/* --- Tabovi --- */
.order-domain-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
}

.order-domain-button {
    background-color: #fff;
    color: #b7b7b7;
    border: 1px solid #b7b7b7;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.3s;
}

.order-domain-button.active,
.order-domain-button:hover {
    background-color: #fff6fc;
    color: #c6168d;
    border: 1px solid #c6168d;
}

/* --- Pretraga domena --- */
.order-domain-search,
#unos_domena {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-top: 10px;
}

#unos_domena {
    position: relative;
}

.order-domain-search > input,
#unos_domena > input,
#promo-code-area #kupon_sifra {
    border: 1px solid #b7b7b7;
    width: 80%;
    height: 45px;
    padding: 10px;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
}

#promo-code-area #kupon_sifra {
    /* Promo-kod input se nalazi u užem mini-panelu korpe, pa treba da bude
       pune širine sa istim stilom kao i glavno polje za unos domena. */
    width: 100%;
    margin-top: 10px;
}

.order-domain-search > button {
    width: 20%;
    background-color: #c6168d;
    border: 1px solid #c6168d;
    color: #fff;
    padding: 10px;
    height: 45px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.order-domain-search > button:hover {
    background-color: transparent;
    color: #c6168d;
}

.order-domain-search > button:disabled,
.order-domain-search > button:disabled:hover {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
    color: #777;
    cursor: wait;
}

.disclaimer {
    font-size: 12px;
    color: #8e8e8e;
    padding-top: 15px;
    padding-bottom: 50px;
    margin: 0;
}

/* --- Rezultati pretrage --- */
.domain-results-panel {
    width: 100%;
}

.domain-results-panel h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 15px 0;
    color: #333;
}

.domain-results-panel h3 input[type=radio] {
    margin-right: 8px;
}

#m_levi,
#m_desni {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.domain-results-panel li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 2px solid #d8d8d8;
    padding-bottom: 25px;
    margin-bottom: 25px;
    gap: 10px;
}

.domain-results-panel li:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.domain-results-panel li input[type=checkbox] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.domain-results-panel li label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    flex-grow: 1;
    flex-wrap: wrap;
}

.domain-results-panel li label::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #b7b7b7;
    border-radius: 3px;
    flex-shrink: 0;
    background: #fff;
    transition: all 0.2s;
}

.domain-results-panel li input[type=checkbox]:checked + label::before {
    background: #c6168d url('/images/icons/secure.svg') no-repeat center center;
    background-size: 12px 12px;
    border-color: #c6168d;
}

.domain-results-panel li input[type=checkbox]:disabled + label {
    opacity: 0.6;
    cursor: not-allowed;
}

.domain-results-panel li input[type=checkbox].domaincbb + label::before {
    border-color: #88201B;
    background-color: #f5e5e5;
}

.other-domains {
    display: inline-block;
    background-color: transparent;
    border: none;
    font-size: 15px;
    text-decoration: underline;
    color: #c6168d;
    text-align: center;
    margin-top: 40px;
    cursor: pointer;
    width: 100%;
}

.other-domains.hidden { display: none; }

/* --- Dodatne usluge u korak1 (#DodatneUslugeZaDomenDiv i #DodatneUslugeZaPaketDiv) ---
   Markup u korak1.phtml prati redove sa korak2 stranice (.order-domain-list
   unutar .box), pa su i pravila ispod ista kao u shop-korak23-redizajn.css
   (sekcija "Lista dodatnih usluga"), samo scoped na zajedničku klasu
   .dodatne-usluge kako ne bi dirala #opcije_levo listu predloženih domena.
   Klasu nose oba bloka: #DodatneUslugeZaDomenDiv (domen-only flow) i
   #DodatneUslugeZaPaketDiv (paketni flow), pa styling radi za oba.

   GASENO (08/2026): dok se ne odluci da se korak2 izbači iz flowa i da se
   dodatne usluge biraju direktno iz korak1, blokovi ostaju u markup-u, ali
   su namerno sakriveni. JS na stranici (prikaziDodatneUsluge/osveziDodatneUsluge)
   bi ih inače pokazao čim korisnik doda domen u korpu, zato pravila ispod
   koriste !important i pobedjuju i inline style koje postavi jQuery .show().

   ZA PONOVNO UKLJUČIVANJE: obrisati odgovarajuće isključivo jedno od dva
   pravila ispod (svaki blok se uključuje nezavisno): */
#DodatneUslugeZaDomenDiv {
    display: none !important;
}

#DodatneUslugeZaPaketDiv {
    display: none !important;
}

/* Redovi usluga — isto kao na korak2 (vertikalni raspored na <=1300px radi
   u medija upitu ispod, u zajedničkoj grupi sa ostalim listama). */
.dodatne-usluge .order-domain-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #d8d8d8;
}

.dodatne-usluge .order-domain-list:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dodatne-usluge .order-domain-list-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.dodatne-usluge .order-domain-list-name > p {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #000;
}

.dodatne-usluge .order-domain-list-price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.dodatne-usluge .order-domain-list-price > p {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #000;
}

/* Čekaboks je nevidljiv; klikom na label se menja stanje, a delegirani
   .DodatneCheck handler u korak1.phtml dodaje/uklanja proizvod iz korpe.
   Redosled (input ispred labela) je namenjen :checked + label pravilu ispod. */
.dodatne-usluge input[type=checkbox].DodatneCheck {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    border: 0;
    pointer-events: none;
}

/* Dugme "Dodaj" — ista vizuelna obrada kao korak2
   (.order-domain-list-price-button iz shop-korak23-redizajn.css). */
.dodatne-usluge label.order-domain-list-price-button {
    display: inline-block;
    background-color: transparent;
    color: #c6168d;
    border: 1px solid #c6168d;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.5s;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.dodatne-usluge label.order-domain-list-price-button:hover {
    background-color: #c6168d;
    color: #fff;
}

/* Stanje "već u korpi" — isto sivo kao in-cart dugme na korak2.
   Razlika: label ostaje klikabilan (bez pointer-events:none) da korisnik
   može jednostavno da odstavi čekaboks, umesto da briše uslugu iz korpe. */
.dodatne-usluge input[type=checkbox]:checked + label.order-domain-list-price-button {
    background-color: transparent;
    color: #b7b7b7;
    border: 1px solid #b7b7b7;
    cursor: default;
}

/* --- Postojeci domen --- */
.order-existing-domain {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order-existing-domain-search {
    display: flex;
    gap: 10px;
    width: 100%;
}

.order-existing-domain-search > input[type=text] {
    flex: 1;
    border: 1px solid #b7b7b7;
    height: 45px;
    padding: 10px;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
}

.order-existing-domain > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-existing-domain > div input[type=checkbox] {
    accent-color: #c6168d;
    cursor: pointer;
}

.order-existing-domain > div label {
    font-size: 14px;
    cursor: pointer;
}

.order-existing-domain > p {
    font-size: 13px;
    color: #666;
    margin: 0;
    padding: 0;
}

/* --- Dugmad --- */
.two-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 0;
}

.two-buttons > a,
.two-buttons > button {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s;
    border: none;
    background: none;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

/* -mobile varijante su CTA dugmad ispod korpe na uskim ekranima (<=1300px);
   isti izgled kao desktop #nazad/#napred, ali drugačiji ID-jevi da JS
   handler-i ostanu odvojeni. */
#nazad,
#nazad-mobile {
    background-color: transparent;
    color: #c6168d;
    border: 1px solid #c6168d;
}

#nazad:hover,
#nazad-mobile:hover {
    background-color: #c6168d;
    color: #fff;
}

#napred,
#napred-mobile {
    background-color: #c6168d;
    color: #fff;
    border: 1px solid #c6168d;
}

#napred:hover,
#napred-mobile:hover {
    background-color: transparent;
    color: #c6168d;
}


/* --- Korpa --- */
.order-shopping-cart {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    /* Širina se kontroliše preko .order-boxes > .order-shopping-cart (flex-basis 30%).
       Osnovna vrednost mora biti 100% da bi se sprečilo "raspadanje" layouta kada
       se korpa prikaže van flex konteksta ili na vrlo malim ekranima. */
    width: 100%;
}

.order-shopping-cart .box {
    padding: 30px 15px;
}

/* Uklapamo postojuci korpa-markup iz pricelist.phtml u novi dizajn */
.order-shopping-cart .cart_title {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-bottom: 15px;
    border-bottom: 2px solid #d8d8d8;
    margin-bottom: 15px;
}

.order-shopping-cart .cart_title i {
    color: #c6168d;
    font-size: 18px;
}

.order-shopping-cart .cart_title h1 {
    font-size: 16px;
    margin: 0;
    padding: 0;
    color: #222;
}

.order-shopping-cart .cart_content {
    width: 100%;
}

.order-shopping-cart .cart_item_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.order-shopping-cart .cart_item_left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.order-shopping-cart .item_grupa {
    font-size: 12px;
    color: #888;
}

.order-shopping-cart .item_naziv {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.order-shopping-cart .item_cena {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    white-space: nowrap;
}

/* Cena i ikonica za brisanje u istom redu — isto kao u marketing maketu. */
.order-shopping-cart .cart-price-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.order-shopping-cart .cart-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Prikaz cena sa složenim valutama: primarna (RSD/EUR) u zasebnom redu,
   sekundarna valuta ispod nje sitnijim fontom. */
.price-primary,
.price-secondary {
    display: block;
    line-height: 1.25;
}

.price-secondary {
    font-size: 0.85em;
    color: #666;
    font-weight: 400;
}

/* Raskladanje cene u korpi: osnovna cena (bez PDV) + PDV + ukupno.
   Zahtev marketinga; blok se moze obrisati bez uticaja na ostatak korpe.

   VAZNO: .shopping-cart je flex kolona sa align-items:flex-start (redizajn/order.css),
   pa direktne kcerke KOJE NEMAJU width:100% skupljaju se na sirinu sadrzaja.
   Zbog toga je ranije space-between na .cart-tax-row delovao kao da ne radi
   (labela i cena su bile "lepljene" jedno za drugo). Redovi moraju imati
   width:100% — isto kao .shopping-cart-package / .shopping-cart-summary. */
.order-shopping-cart .shopping-cart-taxes {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Isti metrice kao redovi stavki korpe (.shopping-cart-package):
   16px, naziv rednog stila levo, bold cena desno sa sekundarnom valutom ispod. */
.order-shopping-cart .shopping-cart-taxes .cart-tax-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 16px;
}

.order-shopping-cart .shopping-cart-taxes .cart-tax-row h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

.order-shopping-cart .shopping-cart-taxes .cart-tax-row b {
    font-size: 16px;
    font-weight: 700;
    text-align: right;
}

.order-shopping-cart .ukupnaCena {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    border-top: 2px solid #d8d8d8;
    padding-top: 15px;
    margin-top: 10px;
}

.order-shopping-cart .ukupnaCena > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.order-shopping-cart .ukupnaCena .total_price {
    font-size: 16px;
    font-weight: 700;
}

.order-shopping-cart .ukupnaCena .price_number {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.order-shopping-cart #kuponi h1 {
    font-size: 14px;
    margin: 15px 0 8px 0;
    color: #333;
}

.order-shopping-cart #kuponi input[type=text] {
    width: 100%;
    padding: 10px;
    border: 1px solid #b7b7b7;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
}

.order-shopping-cart .napred1 {
    color: #c6168d;
    text-decoration: none;
    font-weight: 600;
}

/* --- Trust blok --- */
/* Skrivanje trust bloka uklonjeno jer su slike sada dostupne u /images/icons/ */
.order > #korak1_trust {
    display: flex;
}

.trust {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    padding-top: 10px;
}

.trust > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.trust > div img {
    width: 24px;
    height: 24px;
}

.trust > div p {
    font-size: 14px;
    color: #555;
    margin: 0;
}

/* --- Kompatibilnost sa starim markup-om --- */
.hidden-compat { display: none !important; }

/* --- Greska --- */
#unos_domena_greska,
#unos_domena_ok {
    width: 100%;
    padding: 10px 12px;
    margin-top: 10px;
    border-radius: 8px;
    font-size: 13px;
}

#unos_domena_greska {
    background: #f5e5e5;
    color: #7a1717;
}

#unos_domena_ok {
    background: #e5f5ee;
    color: #177a3d;
}

/* --- Dostupnost domena --- */
.domain-availability {
    font-size: 12px;
    padding: 5px;
    border-radius: 20px;
    font-weight: 600;
}

.domain-availability.yes {
    background-color: #e5f5ee;
    color: #177a3d;
}

.domain-availability.no {
    background-color: #f5e5e5;
    color: #7a1717;
}


/* --- Rezultati pretrage domena (dinamicki HTML iz shop.js) --- */
#opcije_levo {
    width: 100%;
    margin-top: 20px;
}

#opcije_levo h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 15px 0 10px;
}

#m_levi,
#m_desni {
    list-style: none;
    padding: 0;
    margin: 0 0 15px;
    width: 100%;
}

#m_levi li,
#m_desni li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

#m_levi li:last-child,
#m_desni li:last-child {
    border-bottom: none;
}

#m_levi label,
#m_desni label {
    cursor: pointer;
}

/* --- Rezultati pretrage domena u novom dizajnu --- */
#opcije_levo .order-domain-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 2px solid #d8d8d8;
    padding-bottom: 25px;
    margin-bottom: 25px;
    gap: 10px;
}

#opcije_levo .order-domain-list:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

#opcije_levo .order-domain-list-name {
    /* Zauzima preostali prostor u redu kako bi dugme uvek bilo u desnoj ravni. */
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

#opcije_levo .order-domain-list-name p {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #333;
    /* Sprecava duge nazive domena da raskinu raspored. */
    overflow-wrap: break-word;
}

#opcije_levo .order-domain-list-price {
    /* Ostaje na svojoj prirodnoj sirini i ne sme se skupljati. */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Cena ekstenzije na dinamičkim redovima domena (levo od dugmeta za
   dodavanje). <p> sadrži izlaz formatPrice() — span.price-primary i
   opciono span.price-secondary (vidi .price-primary/.price-secondary
   na vrhu ovog fajla). Ako mapa ne poznaje ekstenziju, <p> ne postoji
   i red izgleda kao pre (samo dugme). */
#opcije_levo .order-domain-list-price p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    /* Cena se poravnava uz dugme, desno. */
    text-align: right;
}

#opcije_levo .add-domain-btn,
#opcije_levo .order-domain-list-price-button {
    display: inline-block;
    background-color: #c6168d;
    color: #fff;
    border: 1px solid #c6168d;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

#opcije_levo .add-domain-btn:hover,
#opcije_levo .order-domain-list-price-button:hover {
    background-color: #fff;
    color: #c6168d;
}

#opcije_levo .add-domain-btn.disabled,
#opcije_levo .add-domain-btn.added,
#opcije_levo .order-domain-list-price-button.disabled,
#opcije_levo .order-domain-list-price-button.added,
#opcije_levo .order-domain-list-price-button.in-cart {
    background-color: #e0e0e0;
    color: #777;
    border-color: #e0e0e0;
    cursor: not-allowed;
}

#opcije_levo .secondary.hidden {
    display: none;
}

/* --- Prepisivanje nasledjenih stilova iz shop.css --- */
.order-boxes > .order-shopping-cart {
    flex: 0 0 30%;
}

.order-shopping-cart #trenutno_stanje {
    position: static;
    width: 100%;
    top: auto;
}

.order-shopping-cart .cart_content {
    border: none;
    background: transparent;
}

/* --- Responzivnost --- */
@media (max-width: 1300px) {
    .order-boxes {
        flex-direction: column;
        width: 100%;
    }

    .order-domain,
    .order-shopping-cart {
        width: 100%;
    }

    .trust {
        padding-top: 30px;
    }
}

@media (max-width: 700px) {
    .order {
        padding: 20px 15px;
    }

    .order > h1 {
        font-size: 22px;
    }

    .order > p {
        font-size: 14px;
    }


    .order-domain-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .order-domain-button {
        width: 100%;
    }

    .order-domain-search,
    .order-existing-domain-search {
        flex-direction: column;
    }

    .order-domain-search > input,
    .order-domain-search > button,
    .order-existing-domain-search > input {
        width: 100%;
    }

    .domain-results-panel li,
    #opcije_levo .order-domain-list,
    .dodatne-usluge .order-domain-list {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
    }

    /* Kada su redovi dodatnih usluga vertikalni, cena i dugme se
       raspoređuju preko cele širine (isto kao korak2 na <700px). */
    .dodatne-usluge .order-domain-list-price {
        width: 100%;
        justify-content: space-between;
    }

    /* Isto za redove domena iz provere: cena levo, dugme desno.
       Kada red nema cenu, tu je samo dugme — ostaje na levom rubu,
       kao i pre promene. */
    #opcije_levo .order-domain-list-price {
        width: 100%;
        justify-content: space-between;
    }

    #opcije_levo .order-domain-list-price p {
        text-align: left;
    }

    .dodatne-usluge label.order-domain-list-price-button {
        padding: 10px 20px;
    }

    .two-buttons {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .two-buttons > a,
    .two-buttons > button {
        width: 100%;
    }
}

/* Steps collapse into a vertical list below 600px, matching reference.
   width: fit-content + margin auto: ceo blok se horizontalno centriruje na
   strani, a unutar bloka svaki korak ostaje poredjan levo (flex-start). */
@media (max-width: 600px) {
    .steps {
        flex-direction: column;
        align-items: flex-start;
        width: fit-content;
        margin: 0 auto;
    }

    .steps .step-line {
        height: 25px;
        width: 1px;
        margin-left: 12px;
    }
}

/* Reference breakpoint for very small screens. */
@media (max-width: 500px) {
    .order-domain-buttons {
        width: 100%;
        flex-direction: column;
    }

    .order-domain-button {
        width: 100%;
    }

    .order-domain-search,
    .order-existing-domain-search {
        flex-direction: column;
    }

    .order-domain-search > input,
    .order-domain-search > button,
    .order-existing-domain-search > input {
        width: 100%;
    }

    .two-buttons {
        flex-direction: column;
        gap: 20px;
    }

    .two-buttons > a,
    .two-buttons > button {
        width: 100%;
    }

    /* Stavke korpe i "UKUPNO" se ispod 500px NE prelamaju u kolonu (stara
       praksa): ostaju horizontalne kao na desktopu — naziv levo, cena i
       trash desno. Ako na veoma uskom ekranu ne stanu u jedan red,
       flex-wrap iz baznog pravila prebacuje cenu na drugu liniju umesto da
       sadrzaj izadje preko ivice; tada izgled gotovo isti kao stari
       mobilni prikaz (cena levo ispod naziva). */
}

/* Helper: hidden CTA block used inside the cart on narrow viewports. */
.two-buttons.hidden {
    display: none;
}

/* ==========================================================================
   Cart remove icon (trash can) in the redesigned korak1 sidebar
   ========================================================================== */
.delete-item-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #999;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.15s ease;
    border-radius: 4px;
}

.delete-item-link:hover,
.delete-item-link:focus {
    color: #c6168d;
    background-color: rgba(198, 22, 141, 0.08);
    transform: scale(1.05);
    outline: none;
}

.delete-item-link svg,
.delete-item-link img {
    display: block;
    width: 20px;
    height: 20px;
}

/* Make the touch target comfortable on small screens */
@media (max-width: 768px) {
    .delete-item-link {
        width: 40px;
        height: 40px;
    }

    .delete-item-link svg,
    .delete-item-link img {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   Subscription period selector — unified across korak1/korak2/korak3
   ========================================================================== */

.order-wrapper .subscription_period {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 15px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 10px;
}

.order-wrapper .subscription_label {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}

.order-wrapper .subscription_select select.pretplata,
.order-wrapper .subscription_select select#pretplata_select,
.order-wrapper select.pretplata,
.order-wrapper #pretplata_select {
    width: 100%;
    max-width: 320px;
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .order-wrapper .subscription_select select.pretplata,
    .order-wrapper .subscription_select select#pretplata_select,
    .order-wrapper select.pretplata,
    .order-wrapper #pretplata_select {
        max-width: none;
    }
}

/* ==========================================================================
   Marketing cart redesign — align pricelist.phtml cart with order.css reference
   ========================================================================== */

/* Vertikalni raspored unutar .shopping-cart odgovara referentnom maketu. */
.order-wrapper .shopping-cart {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.order-wrapper .shopping-cart > h2 {
    font-size: 16px;
    margin: 0;
}

/* Glavni proizvod (hosting paket) i dodatne stavke koriste isti red sa
   nazivom levo i cenom/desno, bez podloge i donje ivice iz nasledjenog
   .cart_item_row stila. */
.order-wrapper .shopping-cart-package,
.order-wrapper .shopping-cart-other {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Obezbedjuje da redovi ostanu horizontalni i na mobilnim ekranima:
       ako naziv + cena + trash ne stanu u jedan red, prebacuju se na drugu
       liniju umesto da sadrzaj izadje preko ivice (row-gap drzi razmak
       izmedju linija; bez wrap-a nema nikakvog uticaja). */
    flex-wrap: wrap;
    row-gap: 5px;
    width: 100%;
    font-size: 16px;
    padding: 0;
    border-bottom: none;
}

.order-wrapper .shopping-cart-package > b {
    font-weight: 700;
}

/* Cena i ikonica za brisanje dodatnih stavki u istom redu, kao u maketu. */
.order-wrapper .shopping-cart-other > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.order-wrapper .shopping-cart-other > div > .delete-item-link {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
}

/* Ukupno — ista gornja ivica i velicina kao u referentnom dizajnu. */
.order-wrapper .shopping-cart-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Isto kao kod stavki korpe: ostaje horizontalno i na mobilnom,
       a na veoma uskom ekranu cena prelazi na drugu liniju. */
    flex-wrap: wrap;
    row-gap: 5px;
    width: 100%;
    border-top: 2px solid #d8d8d8;
    padding-top: 20px;
}

.order-wrapper .shopping-cart-summary > h3,
.order-wrapper .shopping-cart-summary > b {
    font-size: 22px;
    margin: 0;
}

/* Napomena o obnovi nakon prve godine. */
.order-wrapper .cart-renewal-note {
    font-size: 12px;
    color: #8e8e8e;
    width: 100%;
    border-bottom: 2px solid #d8d8d8;
    padding-bottom: 20px;
    margin: 0;
}

/* Link za unos promo koda. */
.order-wrapper .cart-coupon > a {
    font-size: 14px;
    color: #c6168d;
    text-decoration: none;
}

/* Period pretplate — funkcionalno obavezan element koji u marketing referenci
   nosi klasu .contract; prilagodjavamo ga da vizuelno odgovara ostatku korpe. */
.order-wrapper .subscription_period {
    gap: 5px;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: transparent;
    border: none;
    border-radius: 0;
}

.order-wrapper .subscription_period > p {
    font-size: 14px;
    margin: 0;
    color: #464646;
}

.order-wrapper .subscription_period select.pretplata,
.order-wrapper .subscription_period #pretplata_select {
    width: 100%;
    max-width: none;
    padding: 10px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    border: 1px solid #b7b7b7;
    border-radius: 10px;
    cursor: pointer;
}


/* ==========================================================================
   Sticky/floating korpa na desktop pregledu
   ========================================================================== */

/* Na širokim ekranima korpa ostaje vidljiva prilikom skrolovanja duge leve
   kolone (domene / podaci). Na mobilnim i tablet rezolucijama (max-width: 1300px)
   layout prelazi u jednu kolonu pa sticky nije potreban. */
@media (min-width: 1301px) {
    .order-wrapper .order-boxes > .order-shopping-cart {
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
}