/* Defaults for the two runtime-filled markers. Loaded before the page's own
   CSS, so anything the page (or the AI that wrote it) says wins. Cards and the
   form take their colours from the page (currentColor), so they read on a dark
   theme as well as a light one; only the inputs are always light. */

:root {
  --sf-accent: #16a34a;
  --sf-accent-ink: #fff;
  --sf-radius: 14px;
  --sf-border: #e5e7eb;
  --sf-muted: #6b7280;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
}

.sf-muted {
  color: var(--sf-muted);
}

.sf-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.sf-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: var(--sf-radius);
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: inherit;
}

.sf-card img,
.sf-noimg {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--sf-radius) - 4px);
  background: color-mix(in srgb, currentColor 8%, transparent);
  display: grid;
  place-items: center;
  font-size: 3rem;
}

.sf-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.sf-price {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.sf-price s {
  opacity: 0.6;
}

.sf-button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 700;
  background: var(--sf-accent);
  color: var(--sf-accent-ink);
  cursor: pointer;
}

.sf-button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.sf-order {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: var(--sf-radius);
  background: color-mix(in srgb, currentColor 4%, transparent);
  color: inherit;
}

.sf-field {
  display: grid;
  gap: 4px;
  font-size: 0.95rem;
}

.sf-field input,
.sf-field select,
.sf-field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: #111827;
}

.sf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .sf-row {
    grid-template-columns: 1fr;
  }
}

.sf-delivery {
  display: grid;
  gap: 6px;
}

.sf-delivery label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 10px;
}

.sf-summary {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.sf-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sf-total {
  border-top: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
  padding-top: 6px;
  font-size: 1.1rem;
}

.sf-submit {
  width: 100%;
  font-size: 1.1rem;
}

.sf-message:empty {
  display: none;
}

.sf-error {
  color: #b91c1c;
}

.sf-ok {
  color: #15803d;
  font-weight: 600;
}

.sf-thanks {
  text-align: center;
  font-size: 1.15rem;
}

/* The honeypot. Hidden by clipping, never by offset: `left: -9999px` in an
   Arabic (right-to-left) page widens the document by ten thousand pixels and a
   phone opens on empty space. */
.sf-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* In the builder, before the runtime has filled them. */
[data-sf-products]:empty,
[data-sf-order]:empty {
  min-height: 120px;
  border: 2px dashed #a3a3a3;
  border-radius: var(--sf-radius);
  display: grid;
  place-items: center;
  color: #737373;
}

[data-sf-products]:empty::before {
  content: "🛍️ Products · المنتجات · Produits";
}

[data-sf-order]:empty::before {
  content: "🧾 Order form · استمارة الطلب · Formulaire de commande";
}