/* ===========================================================================
   Naplata, prijava i korisnički nalog
   =========================================================================== */

/* --- Raspored naplate ------------------------------------------------------ */
.checkout { display: grid; gap: var(--dg-6); align-items: start; }
@media (min-width: 60rem) {
    .checkout { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--dg-7); }
    .checkout__aside { position: sticky; top: calc(var(--dg-header-h) + var(--dg-4)); }
}
.checkout__main { display: grid; gap: var(--dg-5); }

.form-row { display: grid; gap: var(--dg-4); }
@media (min-width: 34rem) {
    .form-row { grid-template-columns: 1fr 1fr; }
    .form-row--street { grid-template-columns: 3fr 1fr; }
}

.fieldset.card { gap: var(--dg-4); }
.fieldset > legend {
    font-family: var(--dg-font-display);
    font-size: var(--dg-fs-lg);
    font-weight: 600;
    letter-spacing: var(--dg-track-tight);
}

.company-fields { display: grid; gap: var(--dg-4); }

/* Red sa radio dugmetom koji se ponaša kao kartica izbora */
.option-row {
    padding: var(--dg-3);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    transition: border-color var(--dg-dur-fast) var(--dg-ease),
                background var(--dg-dur-fast) var(--dg-ease);
}
.option-row:hover { border-color: var(--dg-primary); }
.option-row:has(input:checked) { border-color: var(--dg-primary); background: var(--dg-primary-tint); }
.option-row > span { display: grid; gap: 2px; }
.option-row__desc { font-size: var(--dg-fs-xs); color: var(--dg-ink-muted); }
.option-row__price { font-size: var(--dg-fs-sm); font-weight: 600; }

/* Rezerva za browsere bez :has() — obeležje postavlja skripta */
.option-row[data-selected="true"] { border-color: var(--dg-primary); background: var(--dg-primary-tint); }

.summary-list {
    display: grid;
    gap: var(--dg-3);
    list-style: none;
    margin: 0 0 var(--dg-4);
    padding: 0 0 var(--dg-4);
    border-bottom: 1px solid var(--dg-border);
    font-size: var(--dg-fs-sm);
}
.summary-list li { display: flex; justify-content: space-between; gap: var(--dg-3); }
.summary-list .label { display: block; }

.coupon-form { margin-top: var(--dg-6); max-width: 26rem; }
.coupon-form .cluster { margin-top: var(--dg-2); }

/* --- Nalog ---------------------------------------------------------------- */
.account-layout { display: grid; gap: var(--dg-6); align-items: start; }
@media (min-width: 56rem) {
    .account-layout { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--dg-7); }
    .account-nav { position: sticky; top: calc(var(--dg-header-h) + var(--dg-4)); }
}

.account-nav ul { display: grid; gap: var(--dg-1); list-style: none; margin: 0 0 var(--dg-4); padding: 0; }
.account-nav a {
    display: block;
    padding: var(--dg-2) var(--dg-3);
    border-radius: var(--dg-radius);
    text-decoration: none;
    color: var(--dg-ink);
    font-size: var(--dg-fs-sm);
    font-weight: 500;
}
.account-nav a:hover { background: var(--dg-surface); }
.account-nav a[aria-current="page"] { background: var(--dg-primary-tint); color: var(--dg-primary); }

/* --- Praćenje statusa ------------------------------------------------------ */
.timeline { display: grid; gap: var(--dg-4); list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: auto 1fr; gap: var(--dg-3); position: relative; }
.timeline li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: calc(-1 * var(--dg-4));
    width: 2px;
    background: var(--dg-border);
}
.timeline__dot {
    width: 12px;
    height: 12px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--dg-primary);
    position: relative;
    z-index: 1;
}
.timeline__title { font-weight: 600; margin: 0; }

/* --- Broj pošiljke -------------------------------------------------------- */
.tracking-box {
    padding: var(--dg-5);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius-lg);
    background: var(--dg-primary-tint);
}
.tracking-box__number {
    font-size: var(--dg-fs-xl);
    font-weight: 800;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    margin: var(--dg-1) 0 var(--dg-2);
    /* Broj se najčešće kopira — neka se lako označi */
    user-select: all;
    word-break: break-all;
}