/*
 * @smartdoc/module — livrare/v1/widget/widget_livrare_v1.css
 *
 * Stilurile widgetului de livrare (§3.5 din PLAN_module_v1.md), conform
 * machetei APROBATE `macheta/macheta_widget_livrare_v2.html`. Consumă
 * EXCLUSIV variabilele --sd-* din `stil/v1/tokens.css` (importat SEPARAT
 * de aplicația gazdă) -- acest fișier NU redefinește valorile, doar
 * oferă fallback-uri `var(--sd-x, valoare)` pentru cazul în care
 * tokens.css nu e încărcat.
 *
 * Toate clasele sunt prefixate `.sdlw-` (SmartDoc Livrare Widget) ca să nu
 * ciocnească CSS-ul aplicației gazdă. Widgetul NU include antet/navigare
 * de pagină (acelea sunt ale aplicației) -- doar cele 4 carduri montabile.
 */

.sdlw-widget,
.sdlw-widget * ,
.sdlw-widget *::before,
.sdlw-widget *::after {
  box-sizing: border-box;
}

.sdlw-widget {
  font-family: var(--sd-font-family, Arial, Helvetica, sans-serif);
  font-size: var(--sd-font-size, 15px);
  color: var(--sd-text, #1c2b30);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  max-width: 640px;
}

.sdlw-widget a { color: var(--sd-navy, #1f4e5f); }

.sdlw-widget button:focus-visible,
.sdlw-widget .sdlw-btn:focus-visible,
.sdlw-widget a:focus-visible,
.sdlw-widget input:focus-visible,
.sdlw-widget input[type=checkbox]:focus-visible {
  outline: 2px solid var(--sd-navy-light, #2c6478);
  outline-offset: 2px;
}

/* --- titluri de secțiune: mici, majuscule, letter-spacing + linie fină --- */
.sdlw-titlu-card {
  font-size: var(--sd-font-size-xs, 12.5px);
  font-weight: 700;
  color: var(--sd-navy-dark, #163944);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 var(--sd-space-2, 16px);
  padding-bottom: var(--sd-space-1, 8px);
  border-bottom: 1px solid var(--sd-border, #dfe4e7);
}

/* --- card-uri: adâncime discretă --- */
.sdlw-card {
  background: var(--sd-card, #ffffff);
  border: 1px solid var(--sd-border, #dfe4e7);
  border-radius: var(--sd-radius, 12px);
  padding: var(--sd-space-3, 24px);
  margin-bottom: var(--sd-space-2, 16px);
  box-shadow: var(--sd-shadow-sm, 0 1px 3px rgba(22, 57, 68, .08));
  transition: box-shadow 150ms ease;
}
.sdlw-card:hover { box-shadow: var(--sd-shadow-md, 0 2px 8px rgba(22, 57, 68, .14)); }

/* --- butoane: convenție suită — full-width, ținte tactile 44px --- */
.sdlw-widget button,
.sdlw-widget .sdlw-btn {
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  font-size: var(--sd-font-size, 15px);
  font-weight: 700;
  padding: 12px var(--sd-space-2, 16px);
  border: 1px solid var(--sd-border, #dfe4e7);
  background: #fff;
  color: var(--sd-text, #1c2b30);
  min-height: 44px;
  min-width: 44px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sd-space-1, 8px);
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.sdlw-widget button:active, .sdlw-widget .sdlw-btn:active { transform: scale(0.98); }

.sdlw-btn-primar {
  width: 100%;
  background: var(--sd-amber, #c98a2c);
  color: var(--sd-navy-dark, #163944);
  border: none;
  font-weight: 800;
}
.sdlw-btn-primar:hover { background: var(--sd-amber-dark, #a8721f); color: #fff; }
.sdlw-btn-primar:disabled { background: var(--sd-muted, #62767d); color: #fff; cursor: default; }

.sdlw-btn-secundar {
  width: 100%;
  background: rgba(31, 78, 95, .06);
  border-color: var(--sd-border, #dfe4e7);
  color: var(--sd-navy-dark, #163944);
}
.sdlw-btn-secundar:hover { background: rgba(31, 78, 95, .1); }

.sdlw-btn-mic {
  padding: 8px 10px;
  min-height: 36px;
  font-size: var(--sd-font-size-xs, 12.5px);
}

.sdlw-btn-x {
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  background: #fff5f5;
  border-color: #e0b0b0;
  color: var(--sd-danger, #a02020);
}
.sdlw-btn-x:hover { background: #fde3e3; }

/* --- fișiere pachet --- */
.sdlw-rand-fisier {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--sd-space-1, 8px);
  border-bottom: 1px solid var(--sd-border, #dfe4e7);
  border-radius: 8px;
  transition: background 150ms ease;
  cursor: pointer;
}
.sdlw-rand-fisier:last-child { border-bottom: none; }
.sdlw-rand-fisier:hover { background: rgba(31, 78, 95, .04); }

.sdlw-icon-fisier {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(31, 78, 95, .07);
  color: var(--sd-navy, #1f4e5f);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.sdlw-rand-fisier input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border: 2px solid var(--sd-border, #dfe4e7);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 150ms ease, border-color 150ms ease;
}
.sdlw-rand-fisier input[type=checkbox]:hover { border-color: var(--sd-amber-light, #e6b866); }
.sdlw-rand-fisier input[type=checkbox]:checked {
  background: var(--sd-amber, #c98a2c);
  border-color: var(--sd-amber-dark, #a8721f);
}
.sdlw-rand-fisier input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sdlw-info-fisier { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sdlw-info-fisier .sdlw-nume-fisier { font-weight: 600; font-size: var(--sd-font-size-xl, 14.5px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdlw-info-fisier .sdlw-meta-fisier { font-size: var(--sd-font-size-xs, 12.5px); color: var(--sd-muted, #62767d); flex-shrink: 0; white-space: nowrap; }

/* --- previzualizare: panou "citat" cald --- */
.sdlw-mesaj-demo {
  background: rgba(201, 138, 44, .07);
  border: none;
  border-left: 3px solid var(--sd-amber, #c98a2c);
  border-radius: 0 8px 8px 0;
  padding: var(--sd-space-2, 16px);
  font-size: var(--sd-font-size-md, 13.5px);
  color: var(--sd-text, #1c2b30);
  line-height: 1.55;
  margin-bottom: var(--sd-space-2, 16px);
}
.sdlw-linie-rezumat {
  font-size: var(--sd-font-size-sm, 13px);
  color: var(--sd-muted, #62767d);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sdlw-linie-rezumat strong { color: var(--sd-navy-dark, #163944); }
.sdlw-punct { color: var(--sd-border, #dfe4e7); }

/* --- destinatari --- */
.sdlw-lista-destinatari { display: flex; flex-direction: column; gap: var(--sd-space-1, 8px); margin-bottom: var(--sd-space-2, 16px); }
.sdlw-rand-destinatar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--sd-border, #dfe4e7);
  border-radius: 10px;
  background: #fff;
  transition: background 150ms ease;
}
.sdlw-rand-destinatar:hover { background: rgba(31, 78, 95, .03); }

.sdlw-badge-canal {
  font-size: var(--sd-font-size-2xs, 10.5px);
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sdlw-badge-canal svg { flex-shrink: 0; }
.sdlw-badge-canal.email { background: rgba(31, 78, 95, .1);  color: var(--sd-navy-dark, #163944); }
.sdlw-badge-canal.wa    { background: rgba(42, 122, 42, .1); color: var(--sd-ok, #2a7a2a); }
.sdlw-badge-canal.sms   { background: rgba(201, 138, 44, .12); color: var(--sd-amber-dark, #a8721f); }

.sdlw-valoare-destinatar { flex: 1; min-width: 0; font-size: var(--sd-font-size-lg, 14px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sdlw-stare-destinatar {
  width: 100%; margin-top: 6px; font-size: var(--sd-font-size-xs, 12.5px);
  display: none; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sdlw-stare-destinatar.vizibil { display: flex; }
.sdlw-chip-stare {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 20px; font-weight: 700;
}
.sdlw-stare-destinatar.ok .sdlw-chip-stare { background: rgba(42, 122, 42, .1); color: var(--sd-ok, #2a7a2a); }
.sdlw-stare-destinatar.fallback .sdlw-chip-stare { background: rgba(201, 138, 44, .14); color: var(--sd-amber-dark, #a8721f); }
.sdlw-stare-destinatar.copiere .sdlw-chip-stare { background: rgba(31, 78, 95, .1); color: var(--sd-navy-dark, #163944); }
.sdlw-stare-destinatar.eroare .sdlw-chip-stare { background: rgba(160, 32, 32, .1); color: var(--sd-danger, #a02020); }
.sdlw-rand-destinatar-grup { display: flex; flex-direction: column; }

/* --- plasă de rezervă (patch 0.4.2, A7): pop-up blocat de browser -- buton/link
   REAL <a href target=_blank> + "Copiază linkul", la fel de vizibile/consecvente
   ca chip-ul + butonul de copiere existent la sms-link (§b). Culori DOAR din
   variabilele --sd-*, font-size DOAR din scara --sd-font-size-*. --- */
.sdlw-chip-plasa { background: rgba(201, 138, 44, .14); color: var(--sd-amber-dark, #a8721f); }
.sdlw-btn-plasa {
  background: var(--sd-navy, #1f4e5f);
  color: #fff;
  border-color: transparent;
  font-size: var(--sd-font-size-xs, 12.5px);
}
.sdlw-btn-plasa:hover { background: var(--sd-navy-light, #2c6478); }
.sdlw-copiaza-plasa { font-size: var(--sd-font-size-xs, 12.5px); }
.sdlw-copiaza-plasa.copiat { background: var(--sd-ok, #2a7a2a); color: #fff; border-color: transparent; }

.sdlw-adaugare-destinatari {
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-1, 8px);
}
.sdlw-adaugare-destinatari .sdlw-btn {
  width: 100%;
  background: rgba(31, 78, 95, .06);
  color: var(--sd-navy-dark, #163944);
  border-color: var(--sd-border, #dfe4e7);
}
.sdlw-adaugare-destinatari .sdlw-btn:hover { background: rgba(31, 78, 95, .1); }

/* --- formular inline de adăugare destinatar (extindere față de machetă:
   macheta doar "rula" valori demo; widgetul real cere o valoare tastată) --- */
.sdlw-camp-adaugare {
  display: flex;
  gap: var(--sd-space-1, 8px);
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px dashed var(--sd-border, #dfe4e7);
  border-radius: 10px;
  margin-bottom: var(--sd-space-1, 8px);
}
.sdlw-camp-adaugare input[type=text],
.sdlw-camp-adaugare input[type=email],
.sdlw-camp-adaugare input[type=tel] {
  flex: 1;
  min-width: 160px;
  min-height: 44px;
  font-size: var(--sd-font-size, 15px);
  font-family: inherit;
  padding: 8px 12px;
  border: 1px solid var(--sd-border, #dfe4e7);
  border-radius: 8px;
  color: var(--sd-text, #1c2b30);
}
.sdlw-camp-adaugare input:focus-visible {
  outline: 2px solid var(--sd-navy-light, #2c6478);
  outline-offset: 1px;
}
.sdlw-camp-adaugare .sdlw-eroare-camp {
  width: 100%;
  font-size: var(--sd-font-size-xs, 12.5px);
  color: var(--sd-danger, #a02020);
}

/* --- indicator "netrimis" (patch 0.4.1): text tastat, destinatar
   NECONFIRMAT încă -- distinct de starea "confirmat" (chips verzi/navy de
   mai sus), border chihlimbar + text-helper. Apare la tastare, dispare la
   confirmare sau câmp gol. --- */
.sdlw-camp-adaugare.sdlw-netrimis input[type=text],
.sdlw-camp-adaugare.sdlw-netrimis input[type=email],
.sdlw-camp-adaugare.sdlw-netrimis input[type=tel] {
  border-color: var(--sd-amber, #c98a2c);
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(201, 138, 44, .25);
}
.sdlw-netrimis-helper {
  width: 100%;
  font-size: var(--sd-font-size-xs, 12.5px);
  color: var(--sd-amber-dark, #a8721f);
  display: none;
}
.sdlw-camp-adaugare.sdlw-netrimis .sdlw-netrimis-helper {
  display: block;
}

/* --- eroare generală (mesajul serverului, nu "eroare necunoscută") --- */
.sdlw-eroare-generala {
  background: rgba(160, 32, 32, .08);
  border: 1px solid #e0b0b0;
  border-radius: 8px;
  padding: 10px var(--sd-space-2, 16px);
  color: var(--sd-danger, #a02020);
  font-size: var(--sd-font-size-sm, 13px);
  margin-bottom: var(--sd-space-2, 16px);
}
.sdlw-eroare-generala:empty { display: none; }

/* --- trimitere + link --- */
.sdlw-rezumat-trimitere {
  font-size: var(--sd-font-size-sm, 13px);
  color: var(--sd-muted, #62767d);
  margin-top: var(--sd-space-1, 8px);
  min-height: 18px;
}
.sdlw-bloc-link {
  margin-top: var(--sd-space-2, 16px);
  padding-top: var(--sd-space-2, 16px);
  border-top: 1px dashed var(--sd-border, #dfe4e7);
}
.sdlw-bloc-link:empty,
.sdlw-bloc-link.sdlw-ascuns { display: none; }

.sdlw-panou-link {
  background: rgba(31, 78, 95, .05);
  border-radius: var(--sd-radius, 12px);
  padding: var(--sd-space-2, 16px);
}
.sdlw-linie-link {
  display: flex;
  align-items: center;
  gap: var(--sd-space-1, 8px);
  margin-bottom: var(--sd-space-1, 8px);
}
.sdlw-url {
  flex: 1;
  min-width: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: var(--sd-font-size-sm, 13px);
  color: var(--sd-navy, #1f4e5f);
  background: #fff;
  border: 1px solid var(--sd-border, #dfe4e7);
  border-radius: 8px;
  padding: 10px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sdlw-url svg { flex-shrink: 0; color: var(--sd-navy, #1f4e5f); }
.sdlw-btn-copiaza {
  flex-shrink: 0;
  background: var(--sd-navy, #1f4e5f);
  color: #fff;
  border: none;
  min-width: 44px;
}
.sdlw-btn-copiaza:hover { background: var(--sd-navy-light, #2c6478); }
.sdlw-btn-copiaza.copiat { background: var(--sd-ok, #2a7a2a); border-color: transparent; }

.sdlw-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sd-font-size-xs, 12.5px);
  font-weight: 700;
  color: var(--sd-amber-dark, #a8721f);
  background: rgba(230, 184, 102, .22);
  border-radius: 20px;
  padding: 6px 12px;
}

/* ============================================================
   DESKTOP — breakpoint unic 640px
   ============================================================ */
@media (min-width: 640px) {
  .sdlw-adaugare-destinatari { flex-direction: row; gap: 10px; }
  .sdlw-adaugare-destinatari .sdlw-btn { width: auto; flex: 1; }

  .sdlw-btn-primar { max-width: 320px; margin: 0 auto; display: flex; }
}