/* amo-constanta — component classes (ported from the design canvas's amo-* classes) */

/* ---- buttons ---- */
.amo-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font: 400 var(--text-base)/1 var(--font-heading);
  border: 0;
  cursor: pointer;
  background: var(--color-accent);
  color: var(--color-white-warm);
  transition: background .15s var(--ease-standard);
  text-decoration: none;
}
.amo-btn:hover{ background: var(--color-accent-hover); color: var(--color-white-warm); }
.amo-btn:disabled,
.amo-btn[aria-disabled="true"]{
  background: var(--color-border-stronger);
  color: var(--color-ink-softer);
  cursor: not-allowed;
}
.amo-btn-line{
  background: transparent;
  color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}
.amo-btn-line:hover{ background: var(--color-accent-tint-2); color: var(--color-accent-hover); }
.amo-btn-sm{ padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.amo-btn-block{ width: 100%; justify-content: space-between; }
.amo-btn-loading{ opacity: .6; pointer-events: none; }

/* ---- pills / badges ---- */
.amo-pill{
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font: 400 var(--text-xs)/1 var(--font-body);
}
.amo-pill-accent{ background: var(--color-accent-tint); color: var(--color-pill-text); }

.amo-hours-badge{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.amo-hours-badge .amo-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-success);
  flex: none;
}
.amo-hours-badge.is-closed .amo-dot{ background: var(--color-danger); }
.amo-hours-badge.is-closed{ color: var(--color-danger); }
.amo-hours-badge.is-open{ color: var(--color-success); }

/* ---- segmented control (size / category / delivery-pickup) ---- */
.amo-seg{
  display: inline-flex;
  gap: var(--space-1);
  background: var(--color-accent-tint-2);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  flex-wrap: wrap;
}
.amo-seg-btn{
  background: transparent;
  color: var(--color-ink);
  border: 0;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font: 400 var(--text-base)/1 var(--font-heading);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.amo-seg-btn:hover{ color: var(--color-accent-hover); }
.amo-seg-btn.is-active,
.amo-seg-btn[aria-current="true"]{
  background: var(--color-accent);
  color: var(--color-white-warm);
}
.amo-seg-btn.is-active:hover{ color: var(--color-white-warm); }

/* ---- cards (top-4, location) ---- */
.amo-card{
  background: var(--color-white-warm);
  border: 2px solid var(--color-border-soft);
  overflow: hidden;
}
.amo-card-pad{ padding: var(--space-5); }
.amo-card:hover{ transform: translateY(-3px); }
.amo-card{ transition: transform .18s var(--ease-standard); }

.amo-photo-slot{
  aspect-ratio: 1;
  background: var(--color-cream);
  background-image: linear-gradient(var(--color-cream) 0%, #fdf1dc 55%, #f9d9b4 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
  font: var(--text-xs) var(--font-mono-label);
  color: var(--color-ink-faint);
}
.amo-photo-slot.amo-photo-slot--wide{ aspect-ratio: 16/9; }
.amo-photo-slot.amo-photo-slot--row{
  aspect-ratio: auto;
  width: 62px; height: 62px;
  flex: none;
  padding: 0;
  align-items: center;
  justify-content: center;
}

/* ---- checker strip (marquee / footer) ---- */
.amo-check{
  background-color: var(--color-accent);
  background-image: repeating-conic-gradient(#f2795a 0% 25%, var(--color-accent) 0% 50%);
  background-size: 88px 88px;
}

.amo-marquee-wrap{ padding: var(--space-4) 0; overflow: hidden; }
.amo-marquee{
  display: inline-flex;
  white-space: nowrap;
  animation: amo-marquee var(--marquee-duration) linear infinite;
  font: 400 var(--text-lg)/1 var(--font-body);
  color: var(--color-white-warm);
  letter-spacing: .02em;
}
.amo-marquee span{ padding-right: var(--space-11); }
@keyframes amo-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .amo-marquee{ animation: none; }
}

/* ---- forms ---- */
.amo-in{
  font: 400 var(--text-base)/1 var(--font-body);
  padding: var(--space-4);
  border: 2px solid var(--color-border-input);
  background: var(--color-white-warm);
  color: var(--color-ink);
  min-width: 220px;
  width: 100%;
}
.amo-in::placeholder{ color: rgba(74,50,39,.45); }
.amo-in:focus-visible{ outline: 2px solid var(--color-accent); outline-offset: 0; }
label.amo-label{ display: block; font-size: var(--text-sm); margin-bottom: var(--space-2); color: var(--color-ink-soft); }

/*
 * .form-row is also defined in woocommerce.css for the checkout page (same
 * rules) — kept here too since this is the base, site-wide version, needed
 * on pages like Contact that don't load woocommerce.css at all
 * (amo_enqueue_assets() only enqueues it on shop/cart/checkout/account —
 * see inc/theme-setup.php). Harmless duplication where both apply.
 */
.form-row{ margin: 0 0 var(--space-4); }
.form-row label{ display: block; font-size: var(--text-sm); color: var(--color-ink-soft); margin-bottom: var(--space-2); }
textarea.amo-in{ resize: vertical; }

/* ---- generic form success/error notice — used by the newsletter signup
   (footer.php / inc/newsletter.php); was also used by the contact form,
   removed 2026-09-16 (owner report: "the contact page doesn't work" —
   see page-contact.php's doc comment for the root cause). ---- */
.amo-form-notice{
  padding: var(--space-4); margin-bottom: var(--space-5); font-size: var(--text-sm);
}
.amo-form-notice.is-success{ background: rgba(46,125,70,.1); color: var(--color-success); border: 1px solid var(--color-success); }
.amo-form-notice.is-error{ background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger); }

/* ---- nav ---- */
.amo-nav{
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--container-pad);
  background: var(--color-white-warm);
  border-bottom: 2px solid var(--color-border);
}
.amo-nav-logo img{ height: 34px; width: auto; }
.amo-nav-links{
  display: flex;
  gap: var(--space-6);
  margin-left: var(--space-5);
  font: 400 var(--text-base)/1 var(--font-heading);
  list-style: none;
  padding: 0; margin-top: 0; margin-bottom: 0;
}
.amo-nav-links a{ color: var(--color-ink); }
.amo-nav-links a:hover,
.amo-nav-links a[aria-current="page"]{ color: var(--color-accent); }
.amo-nav-right{ margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.amo-nav-phone{ font: 400 var(--text-base)/1 var(--font-heading); color: var(--color-accent); text-decoration: none; }

.amo-nav-icon-link{
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-ink);
  padding: var(--space-2);
  line-height: 1;
}
.amo-nav-icon-link:hover{ color: var(--color-accent); }

.amo-nav-toggle{
  display: none;
  background: transparent; border: 0; cursor: pointer;
  padding: var(--space-2);
  color: var(--color-ink);
}
@media (max-width: 1023px){
  .amo-nav-links{ display: none; }
  .amo-nav-toggle{ display: inline-flex; }
  body.amo-menu-open .amo-nav-links{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--color-white-warm);
    border-bottom: 2px solid var(--color-border);
    padding: var(--space-4) var(--container-pad);
    margin: 0;
    gap: var(--space-3);
    z-index: 40;
  }
}
/*
 * Mobile responsiveness review (2026-09-16, Phase 5 item 19, code-level —
 * no live browser available in this environment; flagging that plainly
 * rather than claiming a device test that didn't happen). .amo-nav-right
 * had no mobile handling at all: hours badge + phone number text + account
 * icon + cart button (with count) + "Comandă acum" button, all in one
 * non-wrapping flex row alongside the logo and hamburger, had nowhere to
 * go below ~500px — real overflow, not a hypothetical. Hours/phone are
 * conveniences (both are also on the Contact page and in the footer), so
 * they're dropped first on narrow screens; flex-wrap is a safety net in
 * case the remaining icons + CTA still don't fit on the smallest phones.
 */
@media (max-width: 599px){
  .amo-hours-badge,
  .amo-nav-phone{ display: none; }
  .amo-nav{ flex-wrap: wrap; gap: var(--space-3); }
  .amo-nav-right{ gap: var(--space-2); }
}

/* ---- cart flyout ----
   z-index above WP core's #wpadminbar (z-index: 99999, position: fixed) —
   it was previously below the admin bar, so the bar visibly bled through
   the open flyout for any logged-in user (owner-reported bug, 2026-09-07).
   The flyout is a modal-style overlay while open, so covering the admin
   bar for that moment is the correct fix, not just a lower/equal value. */
.amo-cart-overlay{
  position: fixed; inset: 0;
  background: var(--color-overlay);
  z-index: 100000;
  display: none;
}
body.amo-cart-open .amo-cart-overlay{ display: block; }

.amo-cart-aside{
  position: fixed; top: 0; right: 0;
  width: 420px; max-width: 100%;
  height: 100%;
  background: var(--color-white-warm);
  border-left: 2px solid var(--color-border-strong);
  box-shadow: var(--shadow-cart);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .22s var(--ease-standard);
  z-index: 100001;
}
body.amo-cart-open .amo-cart-aside{ transform: translateX(0); }

.amo-cart-head{
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-strong);
}
.amo-cart-close{
  margin-left: auto; background: transparent; border: 0; cursor: pointer;
  color: var(--color-ink-softer); font: 400 22px/1 var(--font-heading);
}
/* Design fix (2026-09-16, reference screenshot): item-count next to the
   flyout's own "Coșul tău" heading, e.g. "Coșul tău · 3 produse". */
.amo-cart-head-count{ font-size: var(--text-lg); color: var(--color-ink-softer); }
/*
 * .amo-cart-flyout-content (added 2026-09-16, see footer.php + the fragment
 * fix in inc/woocommerce-hooks.php's amo_cart_flyout_fragments()) sits
 * between .amo-cart-aside and .amo-cart-body/.amo-cart-foot. It has to be a
 * flex column itself and take the remaining height below .amo-cart-head —
 * otherwise .amo-cart-body's `flex: 1` below has no flex parent to size
 * against, the scroll region collapses to its content height, and
 * .amo-cart-foot (the totals + "Finalizează comanda" button) gets pushed
 * down/off-screen again by a long item list — the exact bug this whole
 * restructure exists to fix.
 */
.amo-cart-flyout-content{ flex: 1; min-height: 0; display: flex; flex-direction: column; }
.amo-cart-body{ flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-1) var(--space-6); }
.amo-cart-foot{
  padding: var(--space-5) var(--space-6);
  border-top: 2px solid var(--color-border-strong);
  background: var(--color-cream);
}
.amo-cart-row{
  display: flex; justify-content: space-between;
  font-size: var(--text-base); color: var(--color-ink);
  padding: var(--space-1) 0;
}
.amo-cart-total{
  display: flex; justify-content: space-between;
  font-size: var(--text-xl); color: var(--color-ink);
  padding: var(--space-3) 0 var(--space-4);
  border-top: 1px solid var(--color-border-strong);
  margin-top: var(--space-2);
}
.amo-cart-total span:last-child{ color: var(--color-accent); }

.amo-hours-notice{
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  padding: var(--space-4);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-4);
}

/* ---- menu row (dotted price line) ----
   Two lines: line1 (name + dots + price + add button) is its own flex row
   so it stays aligned regardless of whether line2 (description) exists —
   previously price/button were centered against the whole (1- or 2-line)
   row, so they visually floated off-line whenever a description was
   present. Row itself top-aligns thumb against the body block. */
.amo-menu-row{
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border-strong);
}
.amo-menu-row-body{ flex: 1; min-width: 0; }
.amo-menu-row-line1{ display: flex; align-items: center; gap: var(--space-3); }
.amo-menu-row-name{ display: flex; align-items: baseline; gap: var(--space-2); }
.amo-menu-row-name span:first-child{ font-size: var(--text-xl); color: var(--color-ink); }
.amo-menu-row-mark{ font-size: var(--text-xs); color: var(--color-pill-text); }
.amo-menu-row-desc{ font-size: var(--text-sm); color: var(--color-ink-softer); margin-top: var(--space-1); }
.amo-menu-row-dots{ flex: 1; border-bottom: 1px dotted var(--color-border-input); align-self: center; }
.amo-menu-row-price{ font-size: var(--text-xl); color: var(--color-accent); white-space: nowrap; }

/* ---- footer ----
   Trimmed 2026-09-18 (owner instruction) — the two-column .amo-footer-cols
   grid and .amo-footer-links (the "Meniu"/"amo." nav-link columns) are
   gone along with the markup that used them; the newsletter block no
   longer uses an actual <h2> (nothing in the footer does — the cart
   flyout's own "Coșul tău" heading is styled inline, unrelated to this
   rule), but .amo-footer-signup-label below still needs real visual
   weight — restored the same round, see footer.php's own comment — since
   it's promotional text ("Prima pizza cu 20% reducere"), not a plain
   utility label like the "Abonează-te" text it briefly replaced. */
.amo-footer{ color: var(--color-footer-text); padding: var(--space-9) var(--container-pad) var(--space-6); }
.amo-footer a{ color: var(--color-footer-text); }
.amo-footer a:hover{ color: var(--color-footer-text-soft); }
.amo-footer-signup-block{ max-width: 480px; }
.amo-footer-signup-label{
  display: block;
  font: 400 var(--text-3xl)/1.05 var(--font-heading);
  color: var(--color-footer-text);
  margin-bottom: var(--space-4);
}
/* v18: account call-to-action text under the label (replaced the signup form). */
.amo-footer-signup-text{ margin: 0 0 var(--space-4); font-size: var(--text-base); line-height: 1.5; color: var(--color-footer-text); }
.amo-footer-legal{
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  border-top: 1px solid rgba(255,250,240,.4);
  margin-top: var(--space-7); padding-top: var(--space-3);
  font-size: var(--text-sm); color: var(--color-footer-text-soft);
}
.amo-footer-legal-links{ display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); }
/*
 * v10: the legal links are what Netopia's reviewer has to find, so each is a
 * >=44px-tall tap target and is underlined + medium weight (colour alone is
 * weak on the orange checker background — footer text is ~3:1 there, a
 * palette limit; underline/weight is the in-brand way to keep it legible).
 */
.amo-footer-legal-links a{
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--space-1);
  font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
/*
 * Badges row (2026-09-18: SAL/SOL added alongside the existing Netopia
 * script badge — see footer.php's own comment for sizing rationale).
 * align-items:center keeps the fixed-size SAL/SOL <img>s vertically
 * centered against whatever height Netopia's own script renders at,
 * since that's injected at runtime and can't be measured from here.
 */
.amo-footer-payment-badges{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-3); flex-basis: 100%; }
.amo-footer-sal-badge{ display: inline-block; line-height: 0; }
.amo-footer-sal-badge img{ display: block; width: 130px; height: 32px; }
@media (max-width: 767px){
  .amo-footer-legal{ justify-content: flex-start; }
  .amo-footer-legal-links{ flex-basis: 100%; }
}

/* ---- quantity stepper ---- */
.amo-qty{
  display: flex; align-items: center;
  box-shadow: inset 0 0 0 2px var(--color-border-stronger);
  border-radius: var(--radius-pill);
}
.amo-qty button{
  background: transparent; border: 0; cursor: pointer;
  color: var(--color-accent); font: 400 18px/1 var(--font-heading);
  padding: var(--space-2) var(--space-3);
}
.amo-qty span{ min-width: 16px; text-align: center; font-size: var(--text-base); }

/* ---- generic responsive grids ---- */
.amo-grid-4{ display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }
.amo-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
.amo-grid-3{ display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-9); }
@media (max-width: 1023px){
  .amo-grid-4{ grid-template-columns: repeat(2,1fr); }
  .amo-grid-3{ grid-template-columns: 1fr; gap: var(--space-7); }
}
@media (max-width: 767px){
  .amo-grid-4{ grid-template-columns: 1fr; }
  .amo-grid-2{ grid-template-columns: 1fr; }
}

/* ---- cookie consent (2026-09-16 rebuild — accept/reject/customize) ---- */
.amo-cookie-notice{
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  z-index: 90000; /* below the cart flyout (100000+) but above everything else */
  max-width: 480px;
  background: var(--color-ink);
  color: var(--color-white-warm);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
.amo-cookie-notice-main{ display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.amo-cookie-notice p{ margin: 0 0 var(--space-3); font-size: var(--text-sm); flex: 1 1 100%; color: var(--color-footer-text-soft); }
.amo-cookie-notice a{ color: var(--color-white-warm); text-decoration: underline; }
.amo-cookie-notice-actions{ display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.amo-cookie-notice-btn-ghost{
  background: transparent; border: 0; cursor: pointer; padding: 0;
  color: var(--color-footer-text-soft); text-decoration: underline;
  font: 400 var(--text-sm)/1 var(--font-body);
}
.amo-cookie-notice-btn-ghost:hover{ color: var(--color-white-warm); }

.amo-cookie-prefs{ display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px solid rgba(255,250,240,.2); }
.amo-cookie-prefs[hidden]{ display: none; }
.amo-cookie-pref-row{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.amo-cookie-pref-row strong{ display: block; font: 400 var(--text-base)/1 var(--font-heading); }
.amo-cookie-pref-row span{ display: block; margin-top: 2px; font-size: 12.5px; color: var(--color-footer-text-faint); }
.amo-cookie-prefs .amo-btn{ align-self: flex-start; }

/* Toggle switch, shared look for the three consent categories. */
.amo-switch{ position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.amo-switch input{ position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.amo-switch-track{ position: absolute; inset: 0; background: rgba(255,250,240,.25); border-radius: var(--radius-pill); transition: background .15s var(--ease-standard); pointer-events: none; }
.amo-switch-track::before{
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: var(--color-white-warm); border-radius: 50%;
  transition: transform .15s var(--ease-standard);
}
.amo-switch input:checked + .amo-switch-track{ background: var(--color-accent); }
.amo-switch input:checked + .amo-switch-track::before{ transform: translateX(18px); }
.amo-switch input:disabled{ cursor: not-allowed; }
.amo-switch input:disabled + .amo-switch-track{ opacity: .5; }

@media (max-width: 599px){
  .amo-cookie-notice{ left: var(--space-3); right: var(--space-3); bottom: var(--space-3); max-width: none; }
}

.amo-section{ padding: var(--space-12) 0 0; }
.amo-section:last-of-type{ padding-bottom: var(--space-12); }
@media (max-width: 767px){
  .amo-section{ padding-top: var(--space-9); }
}

/* ---- legal pages: key-facts callout + HTML site map (v10) ---- */
.amo-key-facts{
  border: 2px solid var(--color-accent);
  background: var(--color-accent-tint);
  padding: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-8);
}
.amo-key-facts h2{ margin: 0 0 var(--space-3); font-size: var(--text-2xl); }
.amo-key-facts dl{ margin: 0; }
.amo-key-facts dt{ font: 400 var(--text-lg)/1.1 var(--font-heading); color: var(--color-ink); margin-top: var(--space-3); }
.amo-key-facts dt:first-child{ margin-top: 0; }
.amo-key-facts dd{ margin: var(--space-1) 0 0; color: var(--color-ink-soft); }

.amo-sitemap-section{ margin-bottom: var(--space-8); }
.amo-sitemap-section h2{ margin-top: 0; }
.amo-sitemap ul{ list-style: none; margin: 0; padding: 0; }
.amo-sitemap li ul{ padding-left: var(--space-5); }
.amo-sitemap a{ display: inline-flex; align-items: center; min-height: 44px; }

/* v18: guest note "Fă-ți cont și primești 20% reducere la prima comandă."
   (inc/first-order-discount.php) — cart page, cart flyout, checkout. */
.amo-fod-note{
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink);
  background: var(--color-cream); border-left: 3px solid var(--color-accent);
}
.amo-fod-note a{ color: var(--color-accent); text-decoration: underline; white-space: nowrap; }