/* Culori, fonturi și elemente comune pentru magazin și panoul Dariei */
:root {
  --bg: #f7e9eb;
  --frame: #fdf3f2;
  --panel: #fffaf8;
  --side: #f9e0e4;
  --ink: #3b2a2d;
  --soft: #74595e;
  --rose: #c33a64;
  --rose-bg: #fbd8e0;
  --butter: #7e510b;
  --butter-bg: #fde9c0;
  --sky: #285689;
  --sky-bg: #d9e8f8;
  --sage: #2a6634;
  --sage-bg: #d4ebd2;
  --line: #efd2d7;
  --tile: #f8e8e4;
  --shadow: 0 6px 22px rgba(150, 80, 95, .10);
  --f-display: "Patrick Hand", "Comic Sans MS", "Chalkboard SE", cursive;
  --f-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-script: "Caveat", "Patrick Hand", cursive;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1517; --frame: #271c20; --panel: #31252a; --side: #382830; --ink: #f8e9eb; --soft: #c9adb3;
    --rose: #f590ad; --rose-bg: #552d3a; --butter: #f6d48c; --butter-bg: #4b3b1c; --sky: #aed0f5; --sky-bg: #1f354f;
    --sage: #acdfb1; --sage-bg: #22402a; --line: #46353b; --tile: #3d2e33; --shadow: 0 6px 22px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1d1517; --frame: #271c20; --panel: #31252a; --side: #382830; --ink: #f8e9eb; --soft: #c9adb3;
  --rose: #f590ad; --rose-bg: #552d3a; --butter: #f6d48c; --butter-bg: #4b3b1c; --sky: #aed0f5; --sky-bg: #1f354f;
  --sage: #acdfb1; --sage-bg: #22402a; --line: #46353b; --tile: #3d2e33; --shadow: 0 6px 22px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: var(--rose); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.1; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--panel); padding: 8px 14px; border-radius: 10px; z-index: 50; }
.skip:focus { left: 8px; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pot { color: var(--ink); }
.pot svg { width: 100%; height: auto; display: block; }

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }

/* Butoane */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; padding: 12px 20px; font-weight: 800; font-size: 16px; cursor: pointer; text-decoration: none; transition: transform .15s, filter .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); filter: brightness(.98); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-rose { background: var(--rose); color: var(--panel); }
.btn-butter { background: var(--butter-bg); color: var(--butter); }
.btn-sky { background: var(--sky-bg); color: var(--sky); }
.btn-sage { background: var(--sage-bg); color: var(--sage); }
.btn-ghost { background: var(--panel); border: 1.5px dashed var(--rose); color: var(--rose); padding: 9px 16px; font-size: 15px; }
.btn-small { padding: 7px 12px; font-size: 14px; border-radius: 11px; }
.link-btn { border: 0; background: none; color: var(--soft); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 8px; text-decoration: none; }
.link-btn svg.i { width: 16px; height: 16px; }
.link-btn:hover { color: var(--rose); }

/* Etichete de stare */
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px; border-radius: 999px; font-weight: 800; font-size: 14px; white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st-noua { background: var(--rose-bg); color: var(--rose); }
.st-pregatire { background: var(--butter-bg); color: var(--butter); }
.st-expediata { background: var(--sky-bg); color: var(--sky); }
.st-finalizata { background: var(--sage-bg); color: var(--sage); }
.st-anulata { background: var(--tile); color: var(--soft); }

/* Formulare */
.field { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 700; color: var(--soft); min-width: 0; }
.field input, .field select, .field textarea { border: 1.5px solid var(--line); background: var(--frame); border-radius: 12px; padding: 10px 12px; font-size: 16px; font-weight: 600; color: var(--ink); width: 100%; }
.field textarea { resize: vertical; font-weight: 400; }
.field .hint { font-weight: 400; font-size: 13px; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--rose); }
.field .msg { color: var(--rose); font-size: 13px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--rose); flex: none; }
.err { color: var(--rose); font-weight: 700; font-size: 14px; }

.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--frame); padding: 11px 20px; border-radius: 999px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: calc(100% - 32px); text-align: center; z-index: 60; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}