/*!
 * Loc pe Loc — assets/css/woocommerce.css
 *
 * Puntea dintre blocurile WooCommerce si design-ul temei.
 *
 * Cosul, checkout-ul si Contul meu sunt randate de blocurile WooCommerce, care
 * isi aduc propria foaie de stil (wc-blocks-style). Aceea nu stie nimic despre
 * jetoanele temei, pentru ca tema nu e block theme si nu are theme.json — deci
 * butonul de plata iesea cu colturi mici si culoarea implicita WooCommerce, in
 * loc de pastila verde de pe restul sitului.
 *
 * Aici mapam componentele blocurilor pe aceleasi variabile ca restul temei:
 * --primary, --border, --radius, --ring. Nimic hardcodat, deci si modul
 * intunecat merge singur.
 *
 * Scris de mana — build-css.mjs nu atinge acest fisier.
 */

/* --------------------------------------------------------------------------
 * Butoane.
 *
 * Aceleasi valori ca lpl_clase_buton(): fundal --primary, text
 * --primary-foreground, hover la 90% opacitate. Raza e cea de pe site, unde
 * aproape toate butoanele sunt "rounded-full".
 *
 * Regulile WooCommerce sunt scrise ca
 * "body:not(.woocommerce-block-theme-has-button-styles) ...", deci se retrag
 * singure cand adaugam clasa pe body — o face lpl_clasa_butoane_woo() din
 * inc/woo-abonament.php. Fara ea ar fi trebuit !important peste tot.
 * ----------------------------------------------------------------------- */

.wc-block-components-button:not(.is-link),
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.625rem 1.5rem;
	border: 0;
	border-radius: 9999px;
	background: var(--primary);
	color: var(--primary-foreground);
	font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.wc-block-components-button:not(.is-link):hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: color-mix(in oklab, var(--primary) 90%, transparent);
	color: var(--primary-foreground);
}

.wc-block-components-button:not(.is-link):focus,
.wc-block-components-button:not(.is-link):focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
	box-shadow: none;
}

.wc-block-components-button:not(.is-link):disabled,
.wc-block-components-button:not(.is-link)[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

/* Butonul de finalizare ocupa toata latimea coloanei, ca in blocul original. */
.wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 3rem;
	font-size: 0.9375rem;
}

/* Varianta conturata — echivalentul lui "outline" din lpl_clase_buton(). */
.wc-block-components-button:not(.is-link).is-style-outline,
.wc-block-components-button:not(.is-link).outlined,
.woocommerce a.button.alt--outline {
	border: 1px solid var(--border);
	background: transparent;
	color: var(--foreground);
}

.wc-block-components-button:not(.is-link).is-style-outline:hover,
.wc-block-components-button:not(.is-link).outlined:hover {
	background: var(--secondary);
	color: var(--foreground);
	opacity: 1;
}

/* Butoanele-link (Editeaza, Aplica cupon, X de pe notificari). */
.wc-block-components-button.is-link,
.wc-block-components-totals-coupon-link,
.woocommerce-privacy-policy-link {
	color: var(--primary);
	text-underline-offset: 4px;
}

/* Butonul de inchidere al notificarilor nu trebuie sa devina pastila verde. */
.wc-block-components-notice-banner > .wc-block-components-button {
	min-height: auto;
	padding: 0;
	border-radius: 0;
	background: transparent;
}

/* --------------------------------------------------------------------------
 * Latimea coloanei de continut din Contul meu.
 *
 * WooCommerce imparte pagina de cont in doua: navigatia lui la 30% si
 * continutul la 68%, ambele pe float (woocommerce-layout.css). Noi randam
 * navigatia in bara laterala a portalului si am golit sablonul lui, deci acele
 * 32% ramaneau goale — panoul din dreapta iesea vizibil mai ingust decat
 * inainte de mutare.
 * ----------------------------------------------------------------------- */

.woocommerce-account .woocommerce .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	display: none;
}

/* --------------------------------------------------------------------------
 * Campuri de formular.
 *
 * Aceleasi valori ca lpl_clase_input(): inaltime 2.5rem, raza --radius minus
 * 2px, chenar --input, inel de focus --ring.
 * ----------------------------------------------------------------------- */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-textarea,
.wc-block-components-select .wc-block-components-select__select,
.wc-block-components-combobox-control input.components-combobox-control__input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
	width: 100%;
	min-height: 2.5rem;
	border: 1px solid var(--input);
	border-radius: calc(var(--radius) - 2px);
	background-color: var(--background);
	color: var(--foreground);
	font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.25rem;
	padding: 0.5rem 0.75rem;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select .wc-block-components-select__select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-MyAccount-content input.input-text:focus {
	border-color: var(--ring);
	outline: none;
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 30%, transparent);
}

/* Etichetele: aceleasi ca lpl_clase_label() — text normal, nu estompat. */
.woocommerce form .form-row label,
.woocommerce-MyAccount-content form label,
.wc-block-components-text-input label {
	display: block;
	color: var(--foreground);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
}

/*
 * Spatiul dintre eticheta si camp il pune aici doar pentru formularele ramase
 * ale WooCommerce. Cele pe care le-am rescris in woocommerce/myaccount/ folosesc
 * "mt-2" pe input, exact ca formularul de autentificare — daca ar primi si
 * marginea asta, distanta ar fi dubla.
 */
.woocommerce form:not(.woocommerce-ResetPassword) .form-row label,
.woocommerce-MyAccount-content form:not(.woocommerce-ResetPassword) label {
	margin-bottom: 0.375rem;
}

.woocommerce form .form-row {
	padding: 0;
	margin: 0 0 1rem;
}

.woocommerce .required,
.wc-block-components-validation-error {
	color: var(--destructive);
	text-decoration: none;
}

.woocommerce-checkbox,
.woocommerce form .form-row label.checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* --------------------------------------------------------------------------
 * Formularele de parola.
 *
 * Sabloanele proprii din woocommerce/myaccount/ nu mai folosesc "form-row-first",
 * clasa care in woocommerce-layout.css inseamna coloana de 47%. Regula ramane ca
 * plasa de siguranta, pentru orice formular WooCommerce pe care nu l-am rescris.
 * ----------------------------------------------------------------------- */

.woocommerce form.woocommerce-ResetPassword .form-row,
.woocommerce form.lost_reset_password .form-row {
	width: 100%;
	float: none;
	clear: both;
}


/* --------------------------------------------------------------------------
 * Casete: rezumatul comenzii, metodele de plata, notificarile.
 * ----------------------------------------------------------------------- */

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option,
.wc-block-components-panel,
.woocommerce table.shop_table,
.woocommerce-order-details,
.woocommerce-customer-details {
	border-color: var(--border);
}

.wc-block-components-radio-control-accordion-option,
.woocommerce table.shop_table {
	border-radius: var(--radius);
	overflow: hidden;
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has(input:checked) {
	border-color: var(--primary);
	background: color-mix(in oklab, var(--primary-soft) 45%, transparent);
}


/* Titlurile de sectiune folosesc fontul de afisare, ca pe restul sitului. */
.wc-block-components-title,
.woocommerce-order-details h2,
.woocommerce-customer-details h2,
.woocommerce-MyAccount-content h2 {
	font-family: "Fraunces", Georgia, serif;
	color: var(--foreground);
}

/* --------------------------------------------------------------------------
 * Notificari.
 *
 * Sunt doua sisteme, cu marcaje diferite: bannerele blocurilor (checkout, cos)
 * si notificarile clasice (Contul meu, resetare parola). Le aducem la aceeasi
 * forma — chenar subtire, fundal foarte usor colorat, raza temei — si la
 * jetoanele noastre, in loc de albastrul si verdele WooCommerce.
 *
 * Cele clasice au bara colorata sus si o pictograma din fontul WooCommerce
 * pozitionata absolut. Pastram pictograma, dar mutam culoarea pe o bara din
 * stanga: pe un card ingust, o linie de 3px sus se pierde.
 * ----------------------------------------------------------------------- */

.wc-block-components-notice-banner,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	border-radius: var(--radius);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* ------------------------------------------------- bannerele blocurilor */

.wc-block-components-notice-banner {
	border-color: var(--border);
	background-color: var(--secondary);
	color: var(--foreground);
}

.wc-block-components-notice-banner.is-success {
	border-color: var(--success);
	background-color: color-mix(in oklab, var(--success) 10%, var(--background));
}

.wc-block-components-notice-banner.is-success > svg {
	background-color: var(--success);
}

.wc-block-components-notice-banner.is-error {
	border-color: var(--destructive);
	background-color: color-mix(in oklab, var(--destructive) 8%, var(--background));
}

.wc-block-components-notice-banner.is-error > svg {
	background-color: var(--destructive);
}

.wc-block-components-notice-banner.is-warning {
	border-color: var(--warning);
	background-color: color-mix(in oklab, var(--warning) 14%, var(--background));
}

.wc-block-components-notice-banner.is-warning > svg {
	background-color: var(--warning);
}

.wc-block-components-notice-banner.is-info {
	border-color: var(--primary);
	background-color: var(--primary-soft);
}

.wc-block-components-notice-banner.is-info > svg {
	background-color: var(--primary);
}

.wc-block-components-notice-banner > svg {
	fill: var(--background);
}

/* -------------------------------------------------- notificarile clasice */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--border);
	padding: 1rem 1.25rem 1rem 3rem;
	margin: 0 0 1.5rem;
	background-color: var(--secondary);
	color: var(--foreground);
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	top: 1rem;
	left: 1.125rem;
}

.woocommerce-message {
	border-left-color: var(--success);
	background-color: color-mix(in oklab, var(--success) 10%, var(--background));
}

.woocommerce-message::before {
	color: var(--success);
}

.woocommerce-info {
	border-left-color: var(--primary);
	background-color: var(--primary-soft);
}

.woocommerce-info::before {
	color: var(--primary);
}

.woocommerce-error {
	border-left-color: var(--destructive);
	background-color: color-mix(in oklab, var(--destructive) 8%, var(--background));
}

.woocommerce-error::before {
	color: var(--destructive);
}

/* Butonul din notificare ("Vezi cosul") nu trebuie sa fie o pastila mare. */
.woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-error .button {
	min-height: 2.25rem;
	padding: 0.375rem 1rem;
	font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
 * Totaluri.
 * ----------------------------------------------------------------------- */

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: var(--foreground);
}

.wc-block-components-totals-item__description,
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description {
	color: var(--muted-foreground);
}

.wc-block-components-totals-footer-item {
	font-size: 1rem;
}

.wc-block-components-panel__button {
	color: var(--foreground);
}

/* --------------------------------------------------------------------------
 * Contul meu — meniul lateral WooCommerce, cand se ajunge pe el.
 *
 * Portalul propriu (/cont) are navigatia lui; astea sunt pentru paginile
 * WooCommerce ramase: comenzi, adrese, metode de plata.
 * ----------------------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 0.625rem 1rem;
	border-radius: 0.75rem;
	color: var(--muted-foreground);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--secondary);
	color: var(--foreground);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--primary);
	color: var(--primary-foreground);
}