/* ==========================================================================
 * MOTION — scale la hover + apăsare la click, unitar pe tot site-ul.
 *
 * REGULA DE AUR: folosim proprietatea `scale`, NU `transform: scale()`.
 * Motiv: multe elemente au deja `transform` pe starea de bază — ex. pastila de
 * telefon din header are `translateX(-50%)` (verificat live: matrix(1,0,0,1,-98,0)).
 * `transform: scale()` i-ar șterge centrarea și ar sări din poziție;
 * proprietatea `scale` se compune peste `transform`.
 *
 * TREPTE DE SCALE — dozate după lățime, fiindcă scale-ul creste PROPORTIONAL:
 *   btn  1.03  — butoane/pastile mici (60-150px) → creste ~3px, se simte
 *   row  1.02  — rânduri de dropdown (~200px, panoul are doar 6px padding)
 *   card 1.015 — carduri (320-450px) → creste ~5px
 *   wide 1.008 — bare late, ex. FAQ (890px) → creste 7px.
 *                La 1.03 ar creste cu 27px si ar iesi din container
 *                (verificat live: spatiu lateral disponibil = 0px).
 *
 * Se încarcă ULTIMUL (vezi class-sweb-assets.php), fiindcă `transition` e o
 * singură proprietate și nu se poate „adăuga" la ea — o relistăm aici, cu tot
 * ce animau deja fișierele de componentă + `scale`.
 *
 * EXCLUSE INTENȚIONAT:
 *  - .sweb-carousel__arrow / .sweb-promo__arrow — decizie existentă în cod:
 *    „aspectul de hover făcut permanent, ZERO animație" (landing.css).
 *  - .sweb-order__qtybtn--minus — cerut explicit fără animație pe hover.
 *  - .sweb-navbar__logo — logoul nu se mișcă.
 *
 * @package SWEB
 * ========================================================================== */

:root {
	--sweb-scale-btn: 1.03;
	--sweb-scale-row: 1.02;
	--sweb-scale-card: 1.015;
	--sweb-scale-wide: 1.008;
	--sweb-scale-press: 0.97;
	--sweb-motion: 0.15s ease;
}

/* --------------------------------------------------------------------------
 * A. BUTOANE ȘI CONTROALE MICI
 * -------------------------------------------------------------------------- */
.sweb-btn,
.sweb-card__add,
.sweb-pp__add,
.sweb-order__btn,
.sweb-order__next,
.sweb-sidecart__btn,
.sweb-addpop__btn,
.sweb-authpop__btn,
.sweb-pay__vouchbtn,
.sweb-success__btn,
.sweb-forgot__btn,
.sweb-acc-details__btn,
.sweb-addr-form__save,
.sweb-logout__btn,
.sweb-rw__btn,
.sweb-actionbtn,
.sweb-pay #place_order,
/* header */
.sweb-navbar__account,
.sweb-navbar__cart,
.sweb-navbar__lang-btn,
.sweb-navbar__phone,
/* navigare rapidă prin meniu */
.sweb-quicknav__item,
.sweb-offers__pill,
.sweb-forgot__tile {
	transition:
		filter var(--sweb-motion),
		background var(--sweb-motion),
		opacity var(--sweb-motion),
		color var(--sweb-motion),
		border-color var(--sweb-motion),
		scale var(--sweb-motion);
}

/* --------------------------------------------------------------------------
 * B. RÂNDURI DE DROPDOWN (limbă, telefon, restaurante)
 * -------------------------------------------------------------------------- */
.sweb-navbar__lang-opt,
.sweb-navbar__phone-opt,
.sweb-dropdown__menu a,
.sweb-rsw__item {
	transition:
		background var(--sweb-motion),
		color var(--sweb-motion),
		scale var(--sweb-motion);
}

/* --------------------------------------------------------------------------
 * C. CARDURI
 * -------------------------------------------------------------------------- */
.sweb-cat,
.sweb-card,
.sweb-flyer,
.sweb-pp__testi-card,
.sweb-pp__menupop-item,
.sweb-pp__size {
	transition:
		box-shadow var(--sweb-motion),
		border-color var(--sweb-motion),
		scale var(--sweb-motion);
}

/* --------------------------------------------------------------------------
 * D. BARE LATE (FAQ)
 * -------------------------------------------------------------------------- */
.sweb-faq__q {
	transition:
		background-color var(--sweb-motion),
		color var(--sweb-motion),
		border-color var(--sweb-motion),
		scale var(--sweb-motion);
}

/* --------------------------------------------------------------------------
 * E. ELEMENTOR (homepage-ul e construit integral în Elementor — nu conține
 * niciun component din plugin). `a.e-con` = container care e link (cardurile
 * de restaurant); `.e-button-base` = butoanele din widget-urile atomice.
 * Excludem editorul, ca să nu-i sară elementele clientului când editează.
 * -------------------------------------------------------------------------- */
body:not(.elementor-editor-active) a.e-con {
	transition: box-shadow var(--sweb-motion), scale var(--sweb-motion);
}

body:not(.elementor-editor-active) .e-button-base,
body:not(.elementor-editor-active) .elementor-button {
	transition: background var(--sweb-motion), color var(--sweb-motion), scale var(--sweb-motion);
}

/* --------------------------------------------------------------------------
 * F. BARA DE COMANDĂ (Comanda ta: Follies/Jerry's/Americana, Livrare/La local/Ridicare).
 * `order-bar.css` are `.sweb-orderbar, .sweb-orderbar * { transition: none !important }`
 * — neutralizarea completă a temei. `scale` NU e blocat de `transform: none !important`
 * (sunt proprietăți diferite), dar TRANZIȚIA e blocată => fără !important aici,
 * scale-ul ar sări instant, fără animație. Aceeași specificitate (0,1,0), dar
 * motion.css se încarcă după order-bar.css => câștigă.
 * -------------------------------------------------------------------------- */
.sweb-orderbar__chip,
.sweb-orderbar__segbtn,
.sweb-orderbar__tab,
.sweb-orderbar__close {
	transition:
		background var(--sweb-motion),
		color var(--sweb-motion),
		border-color var(--sweb-motion),
		scale var(--sweb-motion) !important;
}

/* --------------------------------------------------------------------------
 * G. CLASE UTILITARE PENTRU ELEMENTOR
 *
 * Homepage-ul e construit în Elementor, iar containerele lui n-au clase stabile —
 * doar ID-uri generate (ex. `elementor-element-286679c`), care se schimbă dacă
 * secțiunea e refăcută sau duplicată. Ca să nu depindem de ele, pui clasa direct
 * din Elementor: selectezi elementul → tab **Advanced** → **CSS Classes**.
 *
 *   sweb-anim-btn   → buton/pastilă mică (1.03) + apăsare la click
 *   sweb-anim-card  → card / banner (1.015)
 *   sweb-anim-wide  → bară lată, peste ~700px (1.008)
 *
 * Ex.: banner-ul „Oferte speciale" de pe homepage → `sweb-anim-card`.
 * -------------------------------------------------------------------------- */
.sweb-anim-btn,
.sweb-anim-card,
.sweb-anim-wide {
	transition:
		background var(--sweb-motion),
		box-shadow var(--sweb-motion),
		color var(--sweb-motion),
		scale var(--sweb-motion);
}

/* --------------------------------------------------------------------------
 * H. PANOUL BĂRII DE COMANDĂ — deschidere / închidere
 *
 * Panoul e `display: none` → `display: block`. NU-l putem ține în layout cu
 * visibility/opacity: wrapper-ul `.sweb-orderbar` are lățime shrink-to-fit, deci
 * ar deveni permanent 320px lat, iar bula (poziționată la `left: calc(100% + 10px)`)
 * ar sări de lângă tab la 330px de margine. Deci animăm CHIAR din `display: none`,
 * cu `transition-behavior: allow-discrete` + `@starting-style`.
 * Browserele vechi ignoră ambele → apariție instantă, exact ca acum (degradare curată).
 *
 * `translate`, NU `transform: translateX()` — `.sweb-orderbar *` are
 * `transform: none !important` din neutralizarea temei. Aceeași poveste ca la `scale`.
 * `transition` are nevoie de `!important`, fiind și ea blocată acolo.
 *
 * Easing identic cu sidecart-ul (`cubic-bezier(0.22, 0.61, 0.36, 1)`), ca cele două
 * panouri care ies de pe margine să se simtă la fel.
 * -------------------------------------------------------------------------- */
.sweb-orderbar .sweb-orderbar__panel {
	opacity: 0;
	translate: -100% 0;
	transition:
		opacity 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
		translate 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
		display 0.28s allow-discrete !important;
}

.sweb-orderbar.is-open .sweb-orderbar__panel {
	opacity: 1;
	translate: 0 0;
}

@starting-style {
	.sweb-orderbar.is-open .sweb-orderbar__panel {
		opacity: 0;
		translate: -100% 0;
	}
}

/* Tab-ul se stinge când panoul iese peste el și revine când panoul pleacă. */
.sweb-orderbar .sweb-orderbar__tab {
	opacity: 1;
	transition:
		background var(--sweb-motion),
		color var(--sweb-motion),
		border-color var(--sweb-motion),
		scale var(--sweb-motion),
		opacity 0.18s ease !important;
}

/* Bula se stinge în loc să dispară brusc: altfel, cât timp panoul e încă în
 * afara ecranului, ar fi un moment în care nu se vede nici bula, nici panoul. */
.sweb-orderbar .sweb-orderbar__hint {
	opacity: 1;
	transition:
		opacity 0.18s ease,
		display 0.18s allow-discrete !important;
}

.sweb-orderbar.is-open .sweb-orderbar__hint {
	opacity: 0;
}

/* --------------------------------------------------------------------------
 * HOVER — doar pe dispozitive cu mouse. Pe touch, `:hover` rămâne „lipit"
 * după tap și elementul ar sta umflat până la următorul tap în altă parte.
 * -------------------------------------------------------------------------- */
@media (hover: hover) {
	.sweb-btn:hover,
	.sweb-card__add:hover,
	.sweb-pp__add:hover,
	.sweb-order__btn:hover,
	.sweb-order__next:hover,
	.sweb-sidecart__btn:hover,
	.sweb-addpop__btn:hover,
	.sweb-authpop__btn:hover,
	.sweb-pay__vouchbtn:hover,
	.sweb-success__btn:hover,
	.sweb-forgot__btn:hover,
	.sweb-acc-details__btn:hover,
	.sweb-addr-form__save:hover,
	.sweb-logout__btn:hover,
	.sweb-rw__btn:hover,
	.sweb-actionbtn:hover,
	.sweb-pay #place_order:hover,
	.sweb-navbar__account:hover,
	.sweb-navbar__cart:hover,
	.sweb-navbar__lang-btn:hover,
	.sweb-navbar__phone:hover,
	.sweb-quicknav__item:hover,
	.sweb-offers__pill:hover,
	.sweb-forgot__tile:hover,
	body:not(.elementor-editor-active) .e-button-base:hover,
	body:not(.elementor-editor-active) .elementor-button:hover {
		scale: var(--sweb-scale-btn);
	}

	.sweb-navbar__lang-opt:hover,
	.sweb-navbar__phone-opt:hover,
	.sweb-dropdown__menu a:hover,
	.sweb-rsw__item:hover {
		scale: var(--sweb-scale-row);
	}

	.sweb-cat:hover,
	.sweb-card:hover,
	.sweb-flyer:hover,
	.sweb-pp__testi-card:hover,
	.sweb-pp__menupop-item:hover,
	.sweb-pp__size:hover,
	body:not(.elementor-editor-active) a.e-con:hover {
		scale: var(--sweb-scale-card);
	}

	.sweb-orderbar__chip:hover,
	.sweb-orderbar__segbtn:hover,
	.sweb-orderbar__tab:hover,
	.sweb-orderbar__close:hover,
	.sweb-anim-btn:hover {
		scale: var(--sweb-scale-btn);
	}

	.sweb-anim-card:hover {
		scale: var(--sweb-scale-card);
	}

	.sweb-faq__q:hover,
	.sweb-anim-wide:hover {
		scale: var(--sweb-scale-wide);
	}
}

/* --------------------------------------------------------------------------
 * CLICK — apăsare în jos (ca pe iOS/Android). În afara media query-ului de
 * hover, ca să meargă și pe touch. Barele late și cardurile nu se apasă —
 * pe 890px, un 0.97 ar însemna 27px de contracție, prea mult.
 * -------------------------------------------------------------------------- */
.sweb-btn:active,
.sweb-card__add:active,
.sweb-pp__add:active,
.sweb-order__btn:active,
.sweb-order__next:active,
.sweb-sidecart__btn:active,
.sweb-addpop__btn:active,
.sweb-authpop__btn:active,
.sweb-pay__vouchbtn:active,
.sweb-success__btn:active,
.sweb-forgot__btn:active,
.sweb-acc-details__btn:active,
.sweb-addr-form__save:active,
.sweb-logout__btn:active,
.sweb-rw__btn:active,
.sweb-actionbtn:active,
.sweb-pay #place_order:active,
.sweb-navbar__account:active,
.sweb-navbar__cart:active,
.sweb-navbar__lang-btn:active,
.sweb-navbar__phone:active,
.sweb-quicknav__item:active,
.sweb-offers__pill:active,
.sweb-forgot__tile:active,
.sweb-navbar__lang-opt:active,
.sweb-navbar__phone-opt:active,
.sweb-dropdown__menu a:active,
.sweb-rsw__item:active,
body:not(.elementor-editor-active) .e-button-base:active,
body:not(.elementor-editor-active) .elementor-button:active,
.sweb-orderbar__chip:active,
.sweb-orderbar__segbtn:active,
.sweb-orderbar__tab:active,
.sweb-orderbar__close:active,
.sweb-anim-btn:active {
	scale: var(--sweb-scale-press);
}

/* Butoanele dezactivate nu reacționează. */
.sweb-btn:disabled,
.sweb-btn:disabled:hover,
.sweb-btn:disabled:active,
.sweb-btn.is-disabled:hover,
.sweb-btn.is-disabled:active,
.sweb-card__add:disabled:hover,
.sweb-card__add:disabled:active,
.sweb-pp__add:disabled:hover,
.sweb-pp__add:disabled:active,
.sweb-order__btn:disabled:hover,
.sweb-order__btn:disabled:active,
.sweb-pay #place_order:disabled:hover,
.sweb-pay #place_order:disabled:active {
	scale: 1;
}

/* --------------------------------------------------------------------------
 * POP — doar pe „Adaugă în coș", ca feedback de succes.
 * Pornește de la starea apăsată și se termină la scara de hover (cursorul e
 * încă deasupra), ca să nu sară la final. JS-ul scoate clasa la animationend.
 * -------------------------------------------------------------------------- */
/* Vârful și finalul sunt variabile: pop-ul creste PROPORTIONAL, deci pe un card
 * de ~230x290 un varf de 1.12 ar insemna +27px (prea mult). Butoanele mici duc
 * 1.12; cardurile de marime duc 1.05. Finalul = scara de hover a elementului,
 * fiindca la sfarsitul animatiei cursorul e inca deasupra. */
@keyframes sweb-pop {
	0%   { scale: var(--sweb-scale-press); }
	45%  { scale: var(--sweb-pop-peak, 1.12); }
	100% { scale: var(--sweb-pop-end, var(--sweb-scale-btn)); }
}

.sweb-card__add.sweb-pop,
.sweb-pp__add.sweb-pop,
.sweb-pp__size.sweb-pop,
.sweb-forgot__tile.sweb-pop {
	animation: sweb-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sweb-pp__size.sweb-pop {
	--sweb-pop-peak: 1.05;
	--sweb-pop-end: var(--sweb-scale-card);
}

.sweb-pp__size:active {
	scale: var(--sweb-scale-press);
}

/* --------------------------------------------------------------------------
 * Accesibilitate — „reduce motion": rămâne tot feedbackul de culoare, dar
 * fără mișcare.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sweb-btn:hover, .sweb-btn:active,
	.sweb-card__add:hover, .sweb-card__add:active,
	.sweb-pp__add:hover, .sweb-pp__add:active,
	.sweb-order__btn:hover, .sweb-order__btn:active,
	.sweb-order__next:hover, .sweb-order__next:active,
	.sweb-sidecart__btn:hover, .sweb-sidecart__btn:active,
	.sweb-addpop__btn:hover, .sweb-addpop__btn:active,
	.sweb-authpop__btn:hover, .sweb-authpop__btn:active,
	.sweb-pay__vouchbtn:hover, .sweb-pay__vouchbtn:active,
	.sweb-success__btn:hover, .sweb-success__btn:active,
	.sweb-forgot__btn:hover, .sweb-forgot__btn:active,
	.sweb-acc-details__btn:hover, .sweb-acc-details__btn:active,
	.sweb-addr-form__save:hover, .sweb-addr-form__save:active,
	.sweb-logout__btn:hover, .sweb-logout__btn:active,
	.sweb-rw__btn:hover, .sweb-rw__btn:active,
	.sweb-actionbtn:hover, .sweb-actionbtn:active,
	.sweb-pay #place_order:hover, .sweb-pay #place_order:active,
	.sweb-navbar__account:hover, .sweb-navbar__account:active,
	.sweb-navbar__cart:hover, .sweb-navbar__cart:active,
	.sweb-navbar__lang-btn:hover, .sweb-navbar__lang-btn:active,
	.sweb-navbar__phone:hover, .sweb-navbar__phone:active,
	.sweb-quicknav__item:hover, .sweb-quicknav__item:active,
	.sweb-offers__pill:hover, .sweb-offers__pill:active,
	.sweb-navbar__lang-opt:hover, .sweb-navbar__lang-opt:active,
	.sweb-navbar__phone-opt:hover, .sweb-navbar__phone-opt:active,
	.sweb-dropdown__menu a:hover, .sweb-dropdown__menu a:active,
	.sweb-rsw__item:hover, .sweb-rsw__item:active,
	.sweb-cat:hover,
	.sweb-card:hover,
	.sweb-flyer:hover,
	.sweb-pp__testi-card:hover,
	.sweb-pp__menupop-item:hover,
	.sweb-faq__q:hover,
	.e-button-base:hover, .e-button-base:active,
	.elementor-button:hover, .elementor-button:active,
	a.e-con:hover,
	.sweb-orderbar__chip:hover, .sweb-orderbar__chip:active,
	.sweb-orderbar__segbtn:hover, .sweb-orderbar__segbtn:active,
	.sweb-orderbar__tab:hover, .sweb-orderbar__tab:active,
	.sweb-orderbar__close:hover, .sweb-orderbar__close:active,
	.sweb-anim-btn:hover, .sweb-anim-btn:active,
	.sweb-anim-card:hover,
	.sweb-anim-wide:hover,
	.sweb-card__add.sweb-pop,
	.sweb-pp__add.sweb-pop,
	.sweb-pp__size.sweb-pop,
	.sweb-pp__size:hover,
	.sweb-pp__size:active {
		scale: 1;
		animation: none;
	}

	.sweb-orderbar .sweb-orderbar__panel,
	.sweb-orderbar.is-open .sweb-orderbar__panel {
		transition: none !important;
		translate: none;
		opacity: 1;
	}
}