/* ========== Pac Pack – STYLE (safe full file) ========== */

/* Base */
.pp-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.pp-wrap label { display:block; font-size:14px; margin:0 0 6px; color:#222; }
.pp-wrap input, .pp-wrap select {
  width:100%; padding:10px 12px; font-size:14px; line-height:1.3;
  border:1px solid #d7d7d7; border-radius:8px; background:#fff;
}
.pp-wrap input:focus, .pp-wrap select:focus { outline:none; border-color:#7b61ff; box-shadow:0 0 0 2px rgba(123,97,255,.15); }

.pp-row { display:flex; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
.pp-col { flex:1 1 100%; min-width:0; }
.pp-col.half { flex:1 1 calc(50% - 6px); }
.pp-col.sixty { flex:1 1 60%; }
.pp-col.forty { flex:1 1 40%; display:flex; align-items:flex-end; }

.pp-btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:10px; border:1px solid transparent; cursor:pointer; font-weight:600; }
.pp-btn.primary { background:#5a2380; color:#fff; }
.pp-btn.primary:hover { filter:brightness(.95); }
.pp-btn.ghost { background:#fff; border-color:#cfd3d8; color:#1a1f36; }

.pp-card { background:#fff; border:1px solid #e7e7e7; border-radius:14px; padding:14px; }
.pp-flex { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.pp-left { display:flex; flex-direction:column; gap:2px; }
.pp-carrier-name { font-size:15px; }
.pp-eta { font-size:13px; color:#6b7280; }

.pp-grid-2 { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width: 768px){
  .pp-grid-2 { grid-template-columns:1fr 1fr; }
}

.pp-wrap h3 { margin:8px 0 12px; }
.pp-wrap h4 { margin:0 0 12px; font-size:16px; }

/* ---------- PASUL 1: un singur rând pe desktop/tabletă, două rânduri pe mobil ---------- */
/* Mobil (default): două rânduri – rând 1: țările, rând 2: greutate + buton */
.pp-step-1 .pp-row + .pp-row .pp-col.forty button { width:100%; }

/* Desktop & tabletă: toate cele 4 controale pe UN SINGUR RÂND */
@media (min-width: 768px){
  .pp-step-1 { display:grid; grid-template-columns: 1fr 1fr 0.6fr auto; column-gap:12px; align-items:end; }
  .pp-step-1 .pp-row { display:contents; }
  .pp-step-1 .pp-col { margin:0; }
  .pp-step-1 #pp-quote { width:100%; white-space:nowrap; }
}

/* ---------- PASUL 2: repoziționare buton Înapoi pentru UX ---------- */
/* Desktop/Tabletă: butonul la stânga, pe același rând cu titlul; lista pe rândul următor */
@media (min-width: 768px){
  .pp-step-2 { 
    display:grid; 
    grid-template-columns: auto 1fr; 
    grid-template-areas: "back title" "list list"; 
    align-items:center; 
    column-gap:12px; 
    row-gap:12px;
  }
  .pp-step-2 h3 { grid-area:title; margin:8px 0; }
  .pp-step-2 #pp-carriers { grid-area:list; }
  #pp-back { grid-area:back; justify-self:start; }
}

/* Mobil: titlu -> listă -> buton full-width jos (ușor de atins) */
@media (max-width: 767.98px){
  .pp-step-2 { display:grid; grid-template-columns:1fr; grid-template-areas:"title" "list" "back"; row-gap:12px; }
  .pp-step-2 h3 { grid-area:title; }
  .pp-step-2 #pp-carriers { grid-area:list; }
  #pp-back { grid-area:back; width:100%; }
}

/* ---------- PASUL 3 ---------- */
#pp-carriers { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 768px){
  #pp-carriers { grid-template-columns:1fr; }
}
.pp-step-3 .pp-row .pp-col.half input { width:100%; }