/* Cosul de cumparaturi pe Bootstrap 5 (views/view_cos_v2.php). Peste ae-lista.css
   (culorile --l*, .l-price, .l-add, .l-box, .l-crumbs). Mobil intai: o coloana,
   cu bara de jos (total + finalizare); de la lg sumarul sta in dreapta, lipit.
   Clase proprii: prefix c-. */

.c .ico { width: 1em; height: 1em; flex: none; fill: currentColor; vertical-align: -.125em; }
.c { padding-bottom: 96px; }
@media (min-width: 992px) { .c { padding-bottom: 40px; } }

.c-h1 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); font-weight: 750; margin: 0 0 16px; }
.c-h1 .c-n { font-size: .6em; font-weight: 600; color: var(--lm); }

.c-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) {
  .c-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
  .c-sum { position: sticky; top: calc(var(--aes-h, 108px) + 16px); }
}

/* livrarea gratuita: cat mai trebuie */
.c-free { background: var(--ls); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.c-free p { display: flex; align-items: center; gap: 8px; margin: 0; }
.c-free .ico { color: var(--lb); font-size: 18px; }
.c-free-bar { height: 6px; background: #fff; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.c-free-bar span { display: block; height: 100%; background: var(--lb); border-radius: 3px; transition: width .3s; }
.c-free-ok { display: flex; align-items: center; gap: 8px; background: #e8f6ee; color: #146c43; font-weight: 600; }
.c-free-ok .ico { color: #146c43; }

/* randul de produs: poza | informatii | cantitate | total | sterge.
   Pe telefon informatiile ocupa randul de sus, cantitatea si totalul pe al doilea. */
.c-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img info del" "img qty tot";
  gap: 8px 12px; align-items: center; background: #fff; border: 1px solid var(--ll); border-radius: 14px; padding: 12px; margin-bottom: 10px;
  transition: opacity .2s; }
.c-line[aria-busy="true"] { opacity: .55; pointer-events: none; }
.c-img { grid-area: img; align-self: start; width: 72px; height: 72px; border: 1px solid var(--ll); border-radius: 10px; padding: 4px; background: #fff; display: block; }
.c-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.c-info { grid-area: info; min-width: 0; }
.c-brand { font-size: 12px; font-weight: 650; color: var(--lm); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 2px; }
.c-name { display: block; font-weight: 650; color: var(--ln); line-height: 1.3; margin-bottom: 4px; }
a.c-name:hover { color: var(--lb); }
.c-car { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #146c43; margin: 0 0 2px; }
.c-gift { font-size: 13px; margin: 0 0 2px; color: #b4231a; }
.c-unit { font-size: 13px; color: var(--lm); margin: 0; }
.c-qty { grid-area: qty; display: inline-flex; align-items: center; border: 1px solid var(--ll); border-radius: 10px; overflow: hidden; width: max-content; }
.c-step { width: 36px; height: 36px; border: 0; background: var(--ls); color: var(--ln); display: grid; place-items: center; font-size: 16px; }
.c-step:hover:not(:disabled) { background: #dfe8f1; }
.c-step:disabled { color: #a9b6c4; }
.c-in { width: 46px; height: 36px; border: 0; text-align: center; font-weight: 650; -moz-appearance: textfield; appearance: textfield; }
.c-in::-webkit-outer-spin-button, .c-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.c-tot { grid-area: tot; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.c-tot .l-price { font-size: 22px; }
.c-del { grid-area: del; align-self: start; justify-self: end; border: 0; background: none; color: var(--lm); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px; border-radius: 6px; }
.c-del:hover { color: #d92d20; background: #fdecea; }
.c-del span { display: none; }
.c-off { grid-template-areas: "img info del" "img info del"; background: var(--ls); }
/* pe un rand doar cand COLOANA are loc, nu ecranul: langa sumar, la 1000px,
   coloana are sub 600px si randul lat strivea numele */
.c-lines { container-type: inline-size; }
@container (min-width: 620px) {
  .c-line { grid-template-columns: 88px minmax(0, 1fr) auto 120px auto; grid-template-areas: "img info qty tot del"; padding: 14px 16px; gap: 16px; }
  .c-img { width: 88px; height: 88px; align-self: center; }
  .c-del { align-self: center; }
  .c-off { grid-template-areas: "img info info info del"; }
}
@container (min-width: 760px) { .c-del span { display: inline; } }
.c-off .c-name { color: var(--lm); }

.c-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; }

/* sumarul */
.c-rows { margin: 0; font-size: 15px; }
.c-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.c-rows dt { font-weight: 400; color: #34475a; }
.c-rows dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-disc dd { color: #146c43; }
.c-total { border-top: 1px solid var(--ll); margin-top: 6px; padding-top: 12px !important; }
.c-total dt { font-weight: 750; color: var(--ln); font-size: 17px; }
.c-total dd { font-size: 24px; font-weight: 750; }
.c-vat { font-size: 12px; color: var(--lm); margin: 4px 0 14px; }
.c-go { height: 52px; font-size: 17px; }

.c-vou-l { display: flex; align-items: center; gap: 8px; font-weight: 650; margin-bottom: 8px; }
.c-vou-l .ico, .c-vou-f p .ico { color: var(--lb); }
.c-vou-r { display: flex; gap: 8px; }
.c-vou-r .form-control { min-width: 0; text-transform: uppercase; }
.c-vou-f p { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.c-vou-err { color: #d92d20; font-size: 13px; margin: 8px 0 0 !important; }

.c-usp { list-style: none; padding: 0 4px; margin: 0; font-size: 13px; color: #34475a; }
.c-usp li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.c-usp .ico { color: var(--lb); font-size: 16px; }

/* cosul gol */
.c-gol { text-align: center; padding: 40px 16px; max-width: 520px; margin: 0 auto; }
.c-gol-i { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ls); color: var(--lb); font-size: 32px; margin-bottom: 12px; }
.c-gol h2 { font-size: 1.3rem; font-weight: 750; }
.c-gol p { color: var(--lm); }
.c-gol-b { width: auto; padding: 0 28px; }

/* bara de jos, doar pe telefon si tableta */
.c-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025; display: flex; align-items: center; gap: 12px; background: #fff; border-top: 1px solid var(--ll);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px -16px rgba(12,29,46,.4); }
.c-bar-t { display: flex; flex-direction: column; line-height: 1.1; }
.c-bar-t small { font-size: 12px; color: var(--lm); }
.c-bar-t b { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-bar .l-add { flex: 1; height: 46px; }
/* cat butonul principal (.c-go) e pe ecran, bara de jos ar fi o dublura: se
   ascunde (ae-cos.js / ae-finalizare.js pun .off) */
.c-bar { transition: transform .2s; }
.c-bar.off { transform: translateY(110%); }
@media (min-width: 992px) { .c-bar { display: none; } }
@media (max-width: 991.98px) { body:has(.c-bar:not(.off):not([hidden])) .aes-wa { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* --- finalizarea comenzii (views/view_cos_finalizare_v2.php), prefix f- --- */
.f [hidden] { display: none !important; }  /* .f-row2 e grid: fara asta `hidden` nu ascunde */
.f-err ul { margin: 0; padding-left: 18px; }
.f-err:focus { outline: none; }
.f-main { min-width: 0; }
.f-sec { padding: 18px; margin-bottom: 14px; }
@media (min-width: 768px) { .f-sec { padding: 22px 24px; } }
.f-h { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 750; margin: 0 0 14px; }
.f-h small { font-size: 13px; font-weight: 400; color: var(--lm); }
.f-nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lb); color: #fff; font-size: 14px; flex: none; }
.f .form-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.f .form-label small { font-weight: 400; color: var(--lm); }
.f .form-control, .f .form-select { height: 46px; border-radius: 10px; }
.f textarea.form-control { height: auto; }
.f-main > form > .l-box > div, .f-panel > div, .f-sub > div { margin-bottom: 12px; }
.f-row2, .f-row3 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.f-row2 > div, .f-row3 > div { margin: 0 !important; }
@media (min-width: 576px) { .f-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .f-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.f-small { font-size: 13px; color: var(--lm); }
.f-note { display: flex; gap: 8px; align-items: flex-start; background: var(--ls); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.f-note .ico { color: var(--lb); font-size: 18px; margin-top: 2px; }
.f-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.f-btn { width: auto; padding: 0 28px; }
.f-btn[aria-busy="true"], .c-go[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* tab-uri */
.f-tabs { display: flex; gap: 4px; background: var(--ls); border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.f-tab { flex: 1; border: 0; background: none; border-radius: 9px; padding: 10px 8px; font-weight: 650; font-size: 14px; color: var(--lm); }
.f-tab[aria-selected="true"] { background: #fff; color: var(--ln); box-shadow: 0 1px 3px rgba(12,29,46,.15); }
.f-or { display: flex; align-items: center; gap: 12px; color: var(--lm); font-size: 13px; margin: 18px 0 12px; }
.f-or::before, .f-or::after { content: ""; flex: 1; height: 1px; background: var(--ll); }
.f-social { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .f-social { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.f-soc { height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; font-weight: 650; font-size: 15px; text-decoration: none; transition: background-color .15s, box-shadow .15s; }
.f-soc svg { width: 20px; height: 20px; flex: none; }
.f-soc-g { background: #fff; color: #1f1f1f; border: 1px solid #747775; }
.f-soc-g:hover { background: #f2f6fc; color: #1f1f1f; box-shadow: 0 1px 3px rgba(60,64,67,.3); }
.f-soc-f { background: #1877f2; color: #fff; border: 1px solid #1877f2; }
.f-soc-f:hover { background: #166fe5; color: #fff; }

/* optiunile pe card: radio + text, cu sub-panoul lor dedesubt */
.f-opts { display: flex; flex-direction: column; gap: 8px; }
.f-opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ll); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 600; }
.f-opt:has(input:checked) { border-color: var(--lb); box-shadow: 0 0 0 1px var(--lb); background: #f5faff; }
.f-opt input, .f-addr input { width: 18px; height: 18px; flex: none; accent-color: var(--lb); margin: 0; }
.f-opt-t { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.f-opt-t img { height: 20px; width: auto; }
.f-free { font-style: normal; font-size: 12px; font-weight: 650; color: #146c43; background: #e8f6ee; border-radius: 4px; padding: 1px 6px; }
.f-cards { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-left: 4px; }
.f-cards img { height: 22px; width: auto; }   /* logo-urile din img/plati/, ca in cos */
.f-cards img[alt="Visa"] { height: 14px; }       /* Visa si Apple Pay n-au spatiu in jur: la aceeasi */
.f-cards img[alt="Apple Pay"] { height: 19px; }  /* inaltime ar parea mai mari decat celelalte doua */
/* "detalii" de la rate: buton cu aspect de link, care deschide fereastra cu
   bancile -- aceleasi mesaje si insigne ca pe pagina de produs */
.f-opt-t .f-klarna { height: 22px; width: auto; }   /* logo-ul oficial, pastila roz cu numele */
.f-det { border: 0; background: none; padding: 0; font-size: 13px; color: var(--lb); text-decoration: underline; cursor: pointer; }
.f-dlg { border: 0; border-radius: 14px; padding: 20px; width: min(92vw, 460px); box-shadow: 0 20px 50px rgba(12,29,46,.3); }
.f-dlg::backdrop { background: rgba(12,29,46,.55); }
.f-dlg-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.f-dlg-h h3 { font-size: 18px; font-weight: 750; margin: 0; }
.f-dlg-x { border: 0; background: var(--ls); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; color: var(--ln); }
.f-dlg-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; margin: 12px 0 6px; }
.f-dlg-t .ico { color: var(--lb); }
.f-dlg-l { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 650; font-size: 14px; }
.f-banci { display: flex; flex-wrap: wrap; gap: 6px; }
.f-banca { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e3e8ee; border-radius: 6px; padding: 3px 7px; font-size: 12px; font-weight: 500; background: #fff; color: var(--ln); }
.f-banca img { width: auto; height: 16px; }
.f-sub { padding: 4px 4px 8px 32px; }
.f-sub-0 { padding-left: 0; }  /* fara date salvate nu exista optiunea-parinte */
.f-sub-t { font-weight: 650; margin: 8px 0; }
.f-addr { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; cursor: pointer; border-bottom: 1px solid var(--ls); }
.f-addr:last-child { border-bottom: 0; }
.f-addr span { display: flex; flex-direction: column; line-height: 1.3; }
.f-addr small { color: var(--lm); }
.f-seg { display: inline-flex; background: var(--ls); border-radius: 10px; padding: 3px; margin-bottom: 12px; }
.f-seg label { border-radius: 8px; padding: 7px 14px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--lm); }
.f-seg input { position: absolute; opacity: 0; pointer-events: none; }
.f-seg label:has(input:checked) { background: #fff; color: var(--ln); box-shadow: 0 1px 3px rgba(12,29,46,.15); }
.f-seg label:has(input:focus-visible) { outline: 2px solid var(--lb); }
.f-chk { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0 10px; cursor: pointer; }
.f-chk .form-check-input { margin: 0; flex: none; }
.f-locker { background: #e8f6ee; color: #146c43; border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.f-car { border-top: 1px solid var(--ls); padding-top: 10px; margin-top: 10px; }
.f-car-t { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.f-vin { text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.f-terms { font-size: 12px; color: var(--lm); margin: 6px 0 12px; }

/* sumarul din finalizare */
.f-edit { margin-left: auto; font-size: 13px; font-weight: 600; }
.f-items { list-style: none; padding: 0; margin: 0 0 8px; font-size: 14px; border-bottom: 1px solid var(--ll); }
.f-items li { display: flex; gap: 8px; padding: 6px 0; }
.f-items-q { color: var(--lm); flex: none; }
.f-items-n { flex: 1; min-width: 0; line-height: 1.3; }
.f-items b { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* /cos-cumparaturi/succes/: multumirea dupa comanda (prefix cs-) */
.cs .container { max-width: 820px; }
.cs-hero { text-align: center; padding: 16px 0 8px; }
.cs-ok { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #e3f6ea; color: #17944a; font-size: 40px; margin-bottom: 12px; }
.cs-hero .c-h1 { margin-bottom: 8px; }
.cs-nr { font-size: 17px; margin: 0 0 4px; color: var(--ln); }
.cs-nr b { font-variant-numeric: tabular-nums; }
.cs-p { color: #34475a; margin: 0; overflow-wrap: anywhere; }
.cs-pasi { list-style: none; padding: 0; margin: 20px 0 14px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); counter-reset: p; }
@media (min-width: 768px) { .cs-pasi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.cs-pasi li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.cs-pasi li > span { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ls); color: var(--lb); font-size: 20px; }
.cs-pasi div { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.cs-pasi b { font-size: 15px; }
.cs-pasi small { font-size: 13px; color: var(--lm); }
.cs-prod { list-style: none; padding: 0; margin: 0 0 8px; }
.cs-prod li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ll); }
.cs-prod img, .cs-img { flex: none; width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--ll); border-radius: 8px; background: #fff; }
.cs-img { display: grid; place-items: center; color: #a9b7c6; font-size: 24px; }
.cs-den { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.cs-den a { color: var(--ln); text-decoration: none; }
.cs-den a:hover { color: var(--lb); }
.cs-den small { font-weight: 400; color: var(--lm); }
.cs-sum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-info { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--ll); font-size: 14px; display: grid; gap: 4px; }
.cs-info div { display: flex; gap: 12px; }
.cs-info dt { width: 80px; flex: none; font-weight: 400; color: var(--lm); }
.cs-info dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cs-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 12px; }
.cs-sec { border: 1px solid var(--ll); background: #fff; color: var(--ln); font-weight: 650; border-radius: 10px; padding: 10px 18px; }
.cs-sec:hover { border-color: var(--lb); color: var(--lb); }
.cs-help { text-align: center; color: var(--lm); font-size: 14px; }
.cs-rez { padding: 18px; }
@media (min-width: 768px) { .cs-rez { padding: 22px 24px; } }
.cs-asteapta { background: var(--ls); color: var(--lb); }
.cs-eroare { background: #fdecea; color: #c62828; font-size: 32px; }
.cs-banca { font-size: 14px; color: var(--lm); margin-top: 6px; }
.cs-retry { margin: 14px 0 0; }