/* Shopius — paginile: Oferte, Ajutor, pagini obișnuite, formularele Contact Form 7, urmărirea comenzii. */

/* --- banda galbenă (Oferte) ----------------------------------------------------------- */
.sp-erou-galben { position: relative; overflow: hidden; background: var(--sp-galben); }
.sp-erou-galben::before { content: ""; position: absolute; width: 300px; height: 300px; left: -150px; bottom: -170px; border-radius: 50%; background: var(--sp-albastru); }
.sp-erou-galben__in { position: relative; display: grid; gap: 14px; padding-block: 18px 26px; align-items: center; }
.sp-erou-galben .sp-firimituri a, .sp-erou-galben .sp-firimituri { color: var(--sp-albastru); }
.sp-erou-galben__titlu { margin: 4px 0 8px; font-size: clamp(40px, 9vw, 72px); font-weight: 900; line-height: .98; color: var(--sp-albastru); letter-spacing: -.02em; }
.sp-erou-galben__sub { margin: 0; font-size: 19px; font-weight: 700; color: var(--sp-text); }
.sp-erou-galben__cerc { position: absolute; right: 0; top: 4%; z-index: 4; display: grid; place-items: center; width: 132px; height: 132px; padding: 16px; border-radius: 50%; background: var(--sp-albastru); color: var(--sp-galben); font-size: 17px; font-weight: 900; line-height: 1.1; text-align: center; transform: rotate(-6deg); }
.sp-oferte__nota { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--sp-gri); }
/* filele pe categorii (.sp-file) stau în shopius.css: le folosește și prima pagină („Preferatele clienților") */
.sp-banda-lich { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 22px; border-radius: 18px; background: var(--sp-albastru); color: var(--sp-alb); text-decoration: none; }
.sp-banda-lich span:first-child { display: flex; flex-direction: column; font-size: 15px; opacity: .95; }
.sp-banda-lich b { font-size: 26px; font-weight: 900; color: var(--sp-galben); }

/* --- Ajutor ---------------------------------------------------------------------------- */
.sp-erou-ajutor { position: relative; overflow: hidden; background: var(--sp-bleu-2); border-bottom: 1px solid var(--sp-linie); }
.sp-erou-ajutor::after { content: ""; position: absolute; right: -120px; top: -120px; width: 300px; height: 300px; border-radius: 50%; background: var(--sp-galben); opacity: .9; }
.sp-erou-ajutor__in { position: relative; z-index: 1; display: grid; gap: 16px; padding-block: 18px 26px; align-items: center; }
.sp-erou-ajutor__titlu { margin: 4px 0 8px; font-size: clamp(34px, 7vw, 56px); font-weight: 900; line-height: 1.05; color: var(--sp-albastru); }
.sp-erou-ajutor p { margin: 0 0 16px; max-width: 46ch; font-size: 17px; }
.sp-erou-ajutor__cauta { display: flex; align-items: center; gap: 10px; max-width: 560px; padding: 0 6px 0 16px; border-radius: 999px; background: var(--sp-alb); border: 1.5px solid var(--sp-linie); color: var(--sp-albastru); }
.sp-erou-ajutor__cauta input { border: 0 !important; box-shadow: none !important; padding-left: 0 !important; min-height: 54px !important; }
.sp-erou-ajutor__ilustratie { display: none; position: relative; justify-self: center; }
.sp-erou-ajutor__ilustratie img { border-radius: 48px; transform: rotate(-4deg); box-shadow: var(--sp-umbra-mare); }
.sp-erou-ajutor__ilustratie .sp-erou-galben__cerc { right: -40px; top: -20px; background: var(--sp-galben); color: var(--sp-albastru); }
.sp-teme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.sp-tema { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px; border: 1px solid var(--sp-linie); border-radius: 16px; background: var(--sp-alb); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.sp-tema:hover { box-shadow: var(--sp-umbra); transform: translateY(-2px); }
.sp-tema__ico { color: var(--sp-albastru); margin-bottom: 6px; }
.sp-tema b { font-size: 17px; font-weight: 900; color: var(--sp-albastru); }
.sp-tema small { font-size: 13px; color: var(--sp-gri); padding-right: 18px; }
.sp-tema__sag { position: absolute; right: 12px; bottom: 16px; color: var(--sp-albastru); }
.sp-ajutor-grila { display: grid; gap: 16px; margin-bottom: 30px; }
.sp-ajutor-grila .sp-titlu { font-size: 26px; margin-bottom: 12px; }
.sp-faq__el { border-bottom: 1px solid var(--sp-linie); }
.sp-faq__el summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; font-weight: 800; cursor: pointer; list-style: none; }
.sp-faq__el summary::-webkit-details-marker { display: none; }
.sp-faq__el summary .sp-i { color: var(--sp-albastru); transition: transform .15s; flex: none; }
.sp-faq__el[open] summary .sp-i { transform: rotate(180deg); }
.sp-faq__el p { margin: 0 0 14px; color: var(--sp-gri); line-height: 1.6; }
.sp-faq__nimic { color: var(--sp-gri); }
.sp-urmareste { background: var(--sp-bleu-2); }
.sp-urmareste p { margin: 0 0 12px; color: var(--sp-gri); }
.sp-urmareste .track_order .form-row { width: 100% !important; float: none !important; }
.sp-urmareste .track_order button, .sp-pagina .track_order button { width: 100%; padding: 14px; border: 0; border-radius: 12px; background: var(--sp-galben); color: var(--sp-albastru); font-weight: 900; cursor: pointer; }
.sp-urmareste__nota { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; margin-top: 10px !important; }
.sp-contact-cut__date { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.sp-contact-cut__date li { display: flex; align-items: center; gap: 10px; color: var(--sp-albastru); }
.sp-contact-cut__date a { color: var(--sp-albastru); text-decoration: none; }
.sp-contact-cut__date span { color: var(--sp-gri); font-size: 14px; }
.sp-contact-cut h3 { margin: 0 0 10px; font-size: 18px; font-weight: 900; color: var(--sp-albastru); }

/* --- Contact Form 7 (contact, retur, ajutor) -------------------------------------------- */
.sp .wpcf7 form p { margin: 0 0 12px; }
.sp .wpcf7 label { display: block; font-size: 14px; font-weight: 800; }
.sp .wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.sp .wpcf7 input[type="submit"] { width: 100%; padding: 14px; border: 0; border-radius: 12px; background: var(--sp-galben); color: var(--sp-albastru); font-weight: 900; cursor: pointer; }
.sp .wpcf7 .wpcf7-not-valid-tip { font-size: 13px; color: var(--sp-rosu); }
.sp .wpcf7 .wpcf7-response-output { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; }
.sp .wpcf7 .wpcf7-list-item { margin: 0 12px 0 0; }

/* --- pagini obișnuite: tabele din editor ------------------------------------------------- */
.sp-text table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.sp-text th, .sp-text td { padding: 8px 10px; border: 1px solid var(--sp-linie); text-align: left; }

/* --- Magazinele noastre (pluginul shopius-magazine pe staging / blocul lipit pe live) ---------------------------
   Pluginul are culorile și logoul temei vechi și își scrie stilul DUPĂ foile temei, cu „.smf .x" ⇒ aici „.sp .smf …"
   (o clasă în plus). Pluginul nu se schimbă: din el se generează blocul de pe live, unde e încă tema veche. */
.sp .smf {
	--smf-albastru: var(--sp-albastru); --smf-albastru-f: var(--sp-bleu); --smf-albastru-t: var(--sp-albastru-2); --smf-teal: var(--sp-albastru);
	--smf-ink: var(--sp-text); --smf-gri: var(--sp-gri); --smf-linie: var(--sp-linie); --smf-fond: var(--sp-fond); --smf-umbra: var(--sp-umbra);
	--smf-deschis: var(--sp-verde); --smf-inchis: var(--sp-rosu);
	--smf-sus: 16px; /* antetul temei noi nu stă fix ⇒ harta se lipește la 16px, ca celelalte coloane lipicioase */
}
.sp .smf .smf-lead { font-size: 17px; }
.sp .smf .smf-chip { padding: 9px 15px; border: 1.5px solid transparent; border-radius: 12px; background: var(--sp-bleu-2); color: var(--sp-albastru); font-weight: 800; }
.sp .smf .smf-chip .n { color: inherit; opacity: .7; }
.sp .smf .smf-chip:hover { border-color: var(--sp-albastru); }
.sp .smf .smf-chip[aria-pressed="true"] { background: var(--sp-albastru); border-color: var(--sp-albastru); color: var(--sp-alb); }
.sp .smf .smf-chip.angro { background: var(--smf-angro-f); color: var(--smf-angro-t); border-style: dashed; border-color: var(--smf-angro); }
.sp .smf .smf-chip.angro[aria-pressed="true"] { background: var(--smf-angro-t); border-color: var(--smf-angro-t); border-style: solid; color: var(--sp-alb); }
.sp .smf .smf-mag, .sp .smf .smf-hartabox { border-radius: var(--sp-raza); }
.sp .smf .smf-loc, .sp .smf .smf-program-tit { font-weight: 800; }
.sp .smf .smf-nume { font-size: 21px; font-weight: 900; color: var(--sp-albastru); }
/* fără poză: logoul NOU pe bleu. Cel vechi e o <img> în plugin și în blocul lipit ⇒ ascunsă; logoul nou vine ca fundal */
.sp .smf .smf-foto-gol {
	background: url(../img/logo.png) center / min(56%, 230px) auto no-repeat,
		radial-gradient(60% 70% at 50% 50%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 72%),
		linear-gradient(150deg, var(--sp-bleu-2), var(--sp-bleu));
}
.sp .smf .smf-foto.smf-foto-gol img { display: none; }
/* „Vezi traseul" = butonul galben al temei (ca „Adaugă în coș"), cu semnul de traseu în cercul albastru */
.sp .smf .smf-btn { background: var(--sp-galben); color: var(--sp-albastru); font-weight: 800; }
.sp .smf .smf-btn .ic, .sp .smf .smf-btn:hover .ic, .sp .smf .smf-btn:focus-visible .ic { background: var(--sp-albastru); color: var(--sp-alb); }
.sp .smf .smf-btn:hover, .sp .smf .smf-btn:focus-visible { background: var(--sp-galben-2); color: var(--sp-albastru); box-shadow: 0 8px 18px -8px rgba(11, 27, 77, .35); }
.sp .smf .smf-tel svg { color: var(--sp-albastru); }
.sp .smf .smf-harta-tit { font-size: 17px; font-weight: 900; color: var(--sp-albastru); }
.sp .smf .smf-legenda i.mag { background: var(--sp-albastru); }
/* bulinele de pe hartă: Leaflet pune culoarea din plugin în atributul `fill`, iar CSS-ul bate atributul */
.sp .smf path.leaflet-interactive[fill="#019cc6"] { fill: var(--sp-albastru); }

@media (min-width: 768px) {
	.sp-erou-galben__in { grid-template-columns: minmax(0, 1fr) 460px; padding-block: 26px 36px; }
	.sp-erou-ajutor__in { grid-template-columns: minmax(0, 1fr) 320px; padding-block: 26px 40px; }
	.sp-erou-ajutor__ilustratie { display: block; }
	.sp-teme { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.sp-teme { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
	.sp-ajutor-grila { grid-template-columns: 1.2fr 1fr 1.1fr; align-items: start; }
	.sp-erou-galben__cerc { width: 150px; height: 150px; font-size: 19px; }
}

.sp-paginare-oferte { margin-top: 20px; display: flex; justify-content: center; }

/* Paginile de newsletter ale temei vechi (template-parts/pagina-newsletter.php): banda cu poza din ACF, apoi formularul
   Noptin în stânga și textul în dreapta, ca înainte (col 5 / col 7). */
.sp-pagina-nl__poza { text-align: center; }
.sp-pagina-nl__poza img { display: block; margin-inline: auto; max-width: 100%; height: auto; }
.sp-pagina-nl__corp { display: grid; gap: 24px; }
@media (min-width: 768px) {
	.sp-pagina-nl__corp { grid-template-columns: 5fr 7fr; align-items: start; }
	.sp-pagina-nl__corp--fara-formular { grid-template-columns: 1fr; }
}