/* [cc] site26 · sx-aplicatia.css: portat din site-sectiuni/sectiuni/aplicatia-a.css (01.10), doar tema deschisa, tokenii din sx.css, totul sub .sx-aplicatia, doar px; 5 placi cu capturi reale + placa „Si tot din aplicatie”, insignele negre aprobate de pe pagina 1 */
.sx-aplicatia { --sxa-mode: spine; --sxa-spine: 12px; --sxa-indent: 26px; --sxa-pw: 112px; --sxa-well-w: calc(var(--sxa-pw) + 20px); --sxa-ptop: 16px; --sxa-show: .7; --sxa-min: calc(var(--sxa-pw) * 2.0943 * var(--sxa-show) + var(--sxa-ptop) + 2px); --sxa-pad: 14px; --sxa-gap: 12px; --sxa-line: rgba(26,116,162,.45); --sxa-port: rgba(26,116,162,.85); --sxa-well: hsl(40 22% 95.5%); --sxa-well-edge: rgba(23,32,43,.08); --sxa-hub-bg: hsl(42 15% 13%); --sxa-hub-ink: #f3f0e8; --sxa-hub-ink2: #bdb8ac; --sxa-hub-hair: rgba(255,255,255,.14); --sxa-hub-accent: #8ab8e0; --sxa-phone-out: 0 0 0 1px var(--sx-phone-outline); --sxa-phone-drop: 0 14px 26px -14px rgba(30,45,60,.42); --sxa-fade: linear-gradient(to bottom, #000 0, #000 70%, rgba(0,0,0,.9) 78%, rgba(0,0,0,.7) 85%, rgba(0,0,0,.42) 91%, rgba(0,0,0,.16) 96%, transparent 100%); font-variant-numeric: tabular-nums; }
.sx-aplicatia .sxa-wrap { max-width: 1264px; }
.sx-aplicatia .sxa-nw { white-space: nowrap; }
.sx-aplicatia .sxa-head { max-width: 660px; gap: var(--sx-gap-head); }
.sx-aplicatia .sxa-head .sx-lede { max-width: 23em; text-wrap: balance; }

/* [cc] scena: nodul + 6 placi; liniile sub placi, mufele peste */
.sx-aplicatia .sxa-ring { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto repeat(6, minmax(var(--sxa-min), 1fr)); row-gap: var(--sxa-gap); }
.sx-aplicatia .sxa-lines, .sx-aplicatia .sxa-ports { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sx-aplicatia .sxa-lines { z-index: 0; }
.sx-aplicatia .sxa-ports { z-index: 2; }
.sx-aplicatia .sxa-lines path { fill: none; stroke-linecap: butt; stroke-linejoin: round; }
.sx-aplicatia .sxa-ln { stroke: var(--sxa-line); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.sx-aplicatia .sxa-ring.is-wait .sxa-ln { stroke-dashoffset: 1; }
.sx-aplicatia .sxa-ring.is-drawing .sxa-ln { transition: stroke-dashoffset var(--t, .6s) linear var(--w, 0s); }
.sx-aplicatia .sxa-ring.is-drawing .sxa-lines[data-mode="ring"] .sxa-ln { transition-timing-function: cubic-bezier(.25, 1, .5, 1); }
.sx-aplicatia .sxa-ring.is-drawn .sxa-ln { stroke-dasharray: none; }
.sx-aplicatia .sxa-hl { stroke: var(--sx-accent); stroke-width: 1.5; stroke-dasharray: 5 7; opacity: 0; transition: opacity var(--sx-t-fast) ease; }
.sx-aplicatia .sxa-hl.is-on { opacity: 1; animation: sxa-flow .9s linear infinite; }
@keyframes sxa-flow { to { stroke-dashoffset: -24; } }
.sx-aplicatia .sxa-dot { fill: var(--sx-panel); stroke: var(--sxa-port); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: fill var(--sx-t-fast) ease, stroke var(--sx-t-fast) ease; }
.sx-aplicatia .sxa-dot--hub { fill: var(--sx-accent); stroke: none; }
.sx-aplicatia .sxa-dot.is-on { fill: var(--sx-accent); stroke: var(--sx-accent); }
.sx-aplicatia .sxa-dot--hub.is-on { fill: var(--sxa-hub-accent); stroke: var(--sx-accent); stroke-width: 2; }
.sx-aplicatia .sxa-ring.is-wait .sxa-dot { opacity: 0; transform: scale(.3); }
.sx-aplicatia .sxa-ring.is-drawing .sxa-dot { transition: opacity .2s ease var(--d, 0s), transform .45s var(--sx-ease) var(--d, 0s), fill var(--sx-t-fast) ease, stroke var(--sx-t-fast) ease; }

/* [cc] nodul „Aplicatia de telefon” */
.sx-aplicatia .sxa-hub { position: relative; z-index: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center; margin-bottom: 14px; padding: 18px; border: 1px solid transparent; border-radius: 16px; background: var(--sxa-hub-bg); color: var(--sxa-hub-ink); box-shadow: var(--sx-shadow-lift), inset 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.08); }
.sx-aplicatia .sxa-icon { width: 48px; height: 48px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 10px 20px -10px rgba(0,0,0,.6); }
html.hv-light .sx-aplicatia .sxa-hub h3 { font-size: 19px; line-height: 1.2; letter-spacing: -0.012em; color: var(--sxa-hub-ink) !important; }
.sx-aplicatia .sxa-hub-txt p { margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--sxa-hub-ink2); text-wrap: balance; }
.sx-aplicatia .sxa-hub-txt .sxa-langs { margin-top: 8px; font-size: 13px; color: var(--sxa-hub-ink2); }
.sx-aplicatia .sxa-hero { display: none; }

/* [cc] insignele magazinelor = cele negre aprobate pe pagina 1 (.hv-store-badge): 54 px, r12, iconita 27 px, numele 19 px */
.sx-aplicatia .sxa-stores { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.sx-aplicatia .sxa-store { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; height: 48px; padding: 0 12px 0 10px; border-radius: 10px; background: linear-gradient(180deg, #1d1d1f 0%, #050505 100%); border: 1px solid hsl(0 0% 100% / .16); color: #fff; text-decoration: none; white-space: nowrap; box-shadow: inset 0 1px 0 hsl(0 0% 100% / .10), 0 1px 2px hsl(0 0% 0% / .25), 0 8px 20px -6px hsl(0 0% 0% / .35); transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, border-color .18s; }
.sx-aplicatia .sxa-store:hover, .sx-aplicatia .sxa-store:focus-visible { background: linear-gradient(180deg, #242426 0%, #0a0a0a 100%); border-color: hsl(0 0% 100% / .28); color: #fff; transform: translateY(-1px); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .14), 0 2px 4px hsl(0 0% 0% / .25), 0 14px 28px -8px hsl(0 0% 0% / .45); }
.sx-aplicatia .sxa-store:focus-visible { outline: 2px solid var(--sxa-hub-accent); outline-offset: 3px; }
.sx-aplicatia .sxa-store svg { width: 22px; height: 22px; flex: none; }
.sx-aplicatia .sxa-store-t { display: grid; gap: 1px; text-align: left; }
.sx-aplicatia .sxa-store-t small { font-size: 10px; font-weight: 400; line-height: 1.1; letter-spacing: .02em; word-spacing: 0; color: hsl(0 0% 100% / .78); }
.sx-aplicatia .sxa-store-t b { font-size: 16px; font-weight: 600; line-height: 1.05; letter-spacing: -0.015em; word-spacing: 0; color: #fff; }

/* [cc] placa: fantana cu telefonul taiat + textul (eticheta, titlul pe 2 randuri, fraza) */
.sx-aplicatia .sxa-tile { position: relative; z-index: 1; margin: 0 0 0 var(--sxa-indent); display: grid; grid-template-columns: var(--sxa-well-w) minmax(0, 1fr); grid-template-areas: "well txt"; background: var(--sx-panel); border: 1px solid var(--sx-hair-strong); border-radius: var(--sx-r-lg); box-shadow: var(--sx-shadow-card); overflow: clip; transition: border-color var(--sx-t-fast) ease; }
.sx-aplicatia .sxa-tile:hover { border-color: var(--sx-accent-border); }
.sx-aplicatia .sxa-txt { grid-area: txt; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--sxa-ptop) - 3px) var(--sxa-pad); }
.sx-aplicatia .sxa-tile h3 { display: grid; justify-items: start; gap: 5px; font-size: 16px; line-height: 1.28; letter-spacing: -0.01em; }
.sx-aplicatia .sxa-label { font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: .01em; word-spacing: 0; color: var(--sx-accent-text); }
.sx-aplicatia .sxa-title { max-width: 11em; min-height: var(--sxa-title-h, 2.56em); letter-spacing: inherit; word-spacing: inherit; text-wrap: balance; }
.sx-aplicatia .sxa-title .sxa-nw { letter-spacing: inherit; word-spacing: inherit; }
.sx-aplicatia .sxa-txt p { min-height: var(--sxa-body-h, 0px); margin-top: 6px; font-size: 14px; line-height: 1.5; word-spacing: -0.03em; color: var(--sx-ink2); text-wrap: pretty; }
.sx-aplicatia .sxa-well { grid-area: well; position: relative; background: var(--sxa-well); box-shadow: inset -1px 0 0 var(--sxa-well-edge); }
.sx-aplicatia .sxa-shot { position: absolute; inset: var(--sxa-ptop) 0 0 0; margin: 0; padding: 0 calc((var(--sxa-well-w) - var(--sxa-pw)) / 2); overflow: clip; -webkit-mask-image: var(--sxa-fade); mask: var(--sxa-fade); }
.sx-aplicatia .sxa-phone { --sxa-b: calc(var(--sxa-pw) * .034); --sxa-r: calc(var(--sxa-pw) * .158); padding: var(--sxa-b); border-radius: var(--sxa-r); background: var(--sx-phone-frame); box-shadow: inset 0 0 0 1px var(--sx-phone-edge), inset 0 1px 0 rgba(255,255,255,.14), var(--sxa-phone-out), var(--sxa-phone-drop); }
.sx-aplicatia .sxa-screen { position: relative; overflow: hidden; aspect-ratio: 1080 / 2348; border-radius: calc(var(--sxa-r) - var(--sxa-b)); background: #15171b; }
.sx-aplicatia .sxa-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* [cc] placa fara captura: ce mai face soferul din aplicatie (F1 2.20), lista scurta cu bife */
.sx-aplicatia .sxa-tile--more { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt"; background: var(--sx-bg1); }
.sx-aplicatia .sxa-tile--more .sxa-txt { justify-content: center; }
.sx-aplicatia .sxa-more-list { margin-top: 10px; gap: 7px; }
.sx-aplicatia .sxa-more-list li { padding-left: 24px; font-size: 14px; line-height: 1.45; }
.sx-aplicatia .sxa-more-list li::before { width: 14px; height: 14px; top: .25em; }
.sx-aplicatia .sxa-foot { margin-top: 28px; font-size: 13px; line-height: 1.45; color: var(--sx-ink2); }

@media (max-width: 379.98px) {
  .sx-aplicatia { --sxa-pw: 104px; --sxa-well-w: calc(var(--sxa-pw) + 16px); --sxa-pad: 12px; }
  .sx-aplicatia .sxa-store { padding: 0 8px; gap: 6px; }
  .sx-aplicatia .sxa-store-t b { font-size: 14.5px; }
}
@media (min-width: 600px) {
  .sx-aplicatia { --sxa-spine: 14px; --sxa-indent: 30px; --sxa-pw: 128px; --sxa-well-w: calc(var(--sxa-pw) + 28px); --sxa-ptop: 20px; --sxa-pad: 20px; --sxa-gap: 14px; }
  .sx-aplicatia .sxa-tile h3 { font-size: 17px; gap: 6px; }
  .sx-aplicatia .sxa-label { font-size: 12.5px; }
  .sx-aplicatia .sxa-txt p { font-size: 14.5px; line-height: 1.55; }
  .sx-aplicatia .sxa-more-list li { font-size: 14.5px; }
  .sx-aplicatia .sxa-store { height: 54px; padding: 0 20px 0 15px; gap: 11px; border-radius: 12px; }
  .sx-aplicatia .sxa-store svg { width: 27px; height: 27px; }
  .sx-aplicatia .sxa-store-t small { font-size: 11px; }
  .sx-aplicatia .sxa-store-t b { font-size: 19px; }
}
@media (max-width: 879.98px) {
  .sx-aplicatia .sxa-head { text-align: left; justify-items: start; max-width: 640px; margin-inline: auto; }
  .sx-aplicatia .sxa-ring { max-width: 640px; margin-inline: auto; }
  .sx-aplicatia .sxa-foot { max-width: 640px; margin-inline: auto; padding-left: var(--sxa-indent); }
}
@media (min-width: 880px) {
  .sx-aplicatia { --sxa-mode: tree; --sxa-pw: 136px; --sxa-well-w: calc(var(--sxa-pw) + 36px); }
  .sx-aplicatia .sxa-ring { max-width: 1040px; margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; grid-template-rows: auto repeat(3, minmax(var(--sxa-min), 1fr)); grid-template-areas: "hub hub" "comanda alimentari" "cmr gps" "mesagerie mai"; }
  .sx-aplicatia .sxa-hub { grid-area: hub; }
  .sx-aplicatia .sxa-tile { margin: 0; }
  .sx-aplicatia .sxa-tile[data-k="comanda"] { grid-area: comanda; }
  .sx-aplicatia .sxa-tile[data-k="cmr"] { grid-area: cmr; }
  .sx-aplicatia .sxa-tile[data-k="mesagerie"] { grid-area: mesagerie; }
  .sx-aplicatia .sxa-tile[data-k="alimentari"] { grid-area: alimentari; }
  .sx-aplicatia .sxa-tile[data-k="gps"] { grid-area: gps; }
  .sx-aplicatia .sxa-tile[data-k="mai"] { grid-area: mai; }
  .sx-aplicatia .sxa-tile[data-side="l"] { grid-template-columns: minmax(0, 1fr) var(--sxa-well-w); grid-template-areas: "txt well"; }
  .sx-aplicatia .sxa-tile[data-side="l"] .sxa-well { box-shadow: inset 1px 0 0 var(--sxa-well-edge); }
  .sx-aplicatia .sxa-tile--more { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt"; }
  .sx-aplicatia .sxa-tile--more .sxa-txt { padding-inline: 28px; }
  .sx-aplicatia .sxa-foot { text-align: center; }
}
@media (min-width: 880px) and (max-width: 1279.98px) {
  .sx-aplicatia .sxa-hub { justify-self: center; width: min(100%, 820px); margin-bottom: 36px; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 20px; padding: 18px 20px; border-radius: 20px; }
  .sx-aplicatia .sxa-icon { width: 56px; height: 56px; border-radius: 13px; }
  .sx-aplicatia .sxa-stores { grid-column: auto; grid-template-columns: minmax(0, 1fr); margin: 0; }
}
@media (min-width: 1280px) {
  .sx-aplicatia { --sxa-mode: ring; --sxa-pw: 152px; --sxa-well-w: calc(var(--sxa-pw) + 28px); }
  .sx-aplicatia .sxa-ring { max-width: none; grid-template-columns: minmax(0, 1fr) 288px minmax(0, 1fr); column-gap: 36px; grid-template-rows: repeat(3, minmax(var(--sxa-min), 1fr)); grid-template-areas: "comanda hub alimentari" "cmr hub gps" "mesagerie hub mai"; }
  .sx-aplicatia .sxa-hub { align-self: stretch; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sxa-ptop) 20px 20px; border-radius: 22px; background: radial-gradient(120% 46% at 50% 50%, hsl(42 12% 18%), transparent 72%), var(--sxa-hub-bg); }
  .sx-aplicatia .sxa-icon { width: 56px; height: 56px; border-radius: 13px; }
  .sx-aplicatia .sxa-hub-txt { margin-top: 14px; }
  html.hv-light .sx-aplicatia .sxa-hub h3 { font-size: var(--sx-fs-h3-lg); }
  .sx-aplicatia .sxa-hero { --sxa-pw: 196px; flex: 1 1 auto; width: 100%; margin: 0; padding: 20px 0; display: grid; place-items: center; }
  .sx-aplicatia .sxa-hero .sxa-phone { width: var(--sxa-pw); box-shadow: inset 0 0 0 1px var(--sx-phone-edge), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.07), 0 34px 48px -24px rgba(0,0,0,.8); }
  .sx-aplicatia .sxa-stores { grid-template-columns: minmax(0, 1fr); width: 100%; margin-top: 4px; }
  .sx-aplicatia .sxa-store { justify-content: center; }
  .sx-aplicatia .sxa-txt p { line-height: 1.55; }
}
/* [cc 2026-10-04 module] telefon: eticheta ramurii la 13 px, „Descarca din” la 11 px ca insignele de pe pagina 1 */
@media (max-width: 900px) {
  html[data-mobil="l"] .sx-aplicatia .sxa-label { font-size: 13px; }
  html[data-mobil="l"] .sx-aplicatia .sxa-store-t small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-aplicatia .sxa-ln { stroke-dashoffset: 0 !important; transition: none !important; }
  .sx-aplicatia .sxa-dot { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sx-aplicatia .sxa-hl.is-on { animation: none !important; }
  .sx-aplicatia .sxa-tile, .sx-aplicatia .sxa-store { transition: none; }
}