/* SvitPC — main CSS entrypoint.
   Layer order: reset → tokens → base → layout → components → pages → utilities
   All cascade layers declared here so import order = specificity order. */

@layer reset, tokens, base, layout, components, pages, utilities;

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap");

/* ── Layers ──────────────────────────────────────────────────────────────── */
@import url("base/_reset.75fd2b2e6899.css")        layer(reset);
@import url("base/_tokens.cb7792b50100.css")       layer(tokens);
@import url("base/_typography.7d68592e456d.css")   layer(base);

@import url("layouts/_container.afc2a1e70c7d.css") layer(layout);
@import url("layouts/_grid.95bbde26ddb2.css")      layer(layout);

@import url("components/_header.5201ec4727b4.css")            layer(components);
@import url("components/_footer.70aac0e51311.css")            layer(components);
@import url("components/_card.6fad01a6d046.css")             layer(components);
@import url("components/_forms.f9a4ab0232ac.css")            layer(components);
@import url("components/_filters.df767e7b253c.css")          layer(components);
@import url("components/_misc.f19b340bb484.css")             layer(components);
@import url("components/_chat.d5af1d14119a.css")             layer(components);
@import url("components/_svitik.bdaec19286b3.css")           layer(components);
@import url("components/_timer.5b0407d0a3e6.css")            layer(components);
@import url("components/_mobile-bottom-nav.6d9c4613e17c.css") layer(components);

@import url("pages/_home.dbc23e30e503.css")     layer(pages);
@import url("pages/_catalog.cb81f1466afb.css")  layer(pages);
@import url("pages/_product.c5793594b202.css")  layer(pages);
@import url("pages/_checkout.7a1863c4cba6.css") layer(pages);
@import url("pages/_ai.be3acbfded88.css")       layer(pages);
@import url("pages/_pages.e1299025dc7c.css")    layer(pages);
@import url("pages/_returns.cce3c914113a.css")  layer(pages);
@import url("pages/_services.31f710f27c23.css") layer(pages);
@import url("pages/_contact.afa6a9686355.css")  layer(pages);
@import url("pages/_delivery.dbeb0f6a3159.css") layer(pages);
@import url("pages/_payment.00e81fafdf74.css")  layer(pages);
@import url("pages/_promotions.2a29b91a86e1.css") layer(pages);

/* ── Utilities ────────────────────────────────────────────────────────────── */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }

  .text-center { text-align: center; }
  .text-muted  { color: var(--clr-text-muted); }

  .mt-auto { margin-top: auto; }
  .flex    { display: flex; }
  /* Native [hidden] attribute — in utilities layer so it wins over components/pages without !important */
  [hidden] { display: none; }
  .hidden  { display: none; }

  /* HTMX loading indicator */
  .htmx-indicator { opacity: 0; transition: opacity 200ms ease; }
  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator { opacity: 1; }
}

/* Password toggle — outside @layer so it always wins (modals, HTMX partials) */
.form-password {
  position: relative;
  width: 100%;
}

.form-password__input {
  width: 100%;
  padding-right: 2.75rem;
}

.form-password__suffix {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-right: 0.5rem;
  pointer-events: none;
}

.form-password__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--clr-text-subtle);
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.form-password__toggle:hover {
  color: var(--clr-text);
  background: var(--clr-neutral-100);
}

.form-password__toggle:focus-visible {
  outline: 2px solid var(--clr-primary-500);
  outline-offset: 2px;
}

.form-password__icon {
  width: 20px;
  height: 20px;
  max-width: none;
  flex-shrink: 0;
}

.form-password__icon--hide {
  display: none;
}

.form-password__toggle.is-visible .form-password__icon--show {
  display: none;
}

.form-password__toggle.is-visible .form-password__icon--hide {
  display: block;
}

.auth-form--modal .form-password__input {
  padding-right: 3rem;
}