/* ════════════════════════════════════════════════════════════════════
   A7 Cards — Fanned Card Deck CSS (scoped to .a7deck)
   ─────────────────────────────────────────────────────────────────────
   Self-contained component styles. No rules leak outside `.a7deck`.
   Component spec: شدة-البطاقات-المكوّن.html (user-provided).
   ════════════════════════════════════════════════════════════════════ */

.a7deck {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  /* Cards are now 9:16 (185×329) — full-aspect to match the uploaded
     design files exactly. Deck height = card height + bottom offset +
     room for the front-card lift (-18px). */
  height: 380px;
  direction: rtl;
  font-family: inherit;  /* site font (font_ar/font_en) */
  user-select: none;
  touch-action: pan-y;
}
.a7deck__stage { position: absolute; inset: 0; }

.a7deck__card {
  position: absolute;
  left: 50%;
  bottom: 18px;
  /* 9:16 — matches the actual design image ratio (1080×1920), so
     `background-size: cover` shows the full image with no cropping. */
  width: 185px;
  height: 329px;
  margin-left: -92px;
  transform-origin: bottom center;
  cursor: pointer;
  transition: transform .45s cubic-bezier(.3,.8,.3,1), opacity .35s, filter .35s;
}
.a7deck__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #fff; /* fallback */
  border: 2px solid hsl(var(--base-100));   /* theme-aware frame (light/dark) */
  background: #2E2348;
}
/* Side cards: grayscale + slight blur */
.a7deck__card:not(.is-front) .a7deck__inner { filter: grayscale(1) brightness(1.02) contrast(.96); }
.a7deck__card:not(.is-front) { filter: blur(2px); }
.a7deck__card.is-front .a7deck__inner { box-shadow: 0 26px 50px -16px var(--cc, #7B4DD3); }
.a7deck__card:not(.is-front) .a7deck__inner { box-shadow: 0 10px 22px -14px rgba(46,35,72,.45); }

.a7deck__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }

.a7deck__arrows {
  position: absolute;
  inset-inline: 8px;
  bottom: -6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.a7deck__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #fff; /* fallback */
  background: hsl(var(--base-100));        /* theme-aware (light/dark) */
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.35);
  color: #2E2348; /* fallback */
  color: hsl(var(--base-content));         /* theme-aware icon */
}
.a7deck__dots {
  position: absolute;
  inset-inline: 0;
  bottom: -36px;
  display: flex;
  /* Reverse the visual order so the active indicator moves in the same
     direction as the card stack on each swipe / arrow press. */
  flex-direction: row-reverse;
  gap: 5px;
  justify-content: center;
}
.a7deck__dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(46,35,72,.18); /* fallback */
  /* Theme-aware: visible in BOTH light and dark (follows the site theme). */
  background: color-mix(in oklch, hsl(var(--base-content)) 28%, transparent);
  transition: all .25s;
}
.a7deck__dot.is-on { width: 18px; background: hsl(var(--primary)); }

/* ════════════════════════════════════════════════════════════════════
   Sections Explorer — appears BELOW the fanned deck.
   ─────────────────────────────────────────────────────────────────────
   Theme-aware: pulls colors from DaisyUI CSS variables on a7.ae so the
   whole block automatically follows the site's chosen theme.
   ════════════════════════════════════════════════════════════════════ */

.a7sections {
  width: 100%;
  max-width: 720px;
  /* The deck's dots row sits at `bottom: -36px` plus the dot height
     (6px) — so it extends ~42px below `.a7deck`. We need at LEAST that
     much gap to keep the dots clear of the title, plus breathing room
     so the title doesn't look crammed against them. 160px gives a
     comfortable visual separation (was 110 — the active dot was
     drifting up into the title text). */
  margin: 160px auto 0;
  direction: rtl;
  font-family: inherit;  /* site font (font_ar/font_en) */
  color: hsl(var(--base-content));
}

/* ─── Title row with fading hairlines on both sides ─── */
.a7sections__title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  margin-bottom: 18px;
}
/* Hairlines beside the "الأقسام" title. The gradient is INVERTED so the
   line is solid AT the title and fades OUTWARD toward the page edges —
   anchors the title rather than drifting in from nothing. */
.a7sections__fade-line {
  flex: 1;
  height: 1px;
  /* Fallback for browsers without color-mix() (Safari < 16.2, FF < 113). */
  background: linear-gradient(to right, rgba(0,0,0,.22) 0%, transparent 100%);
  background: linear-gradient(
    to right,
    color-mix(in oklch, hsl(var(--base-content)) 22%, transparent) 0%,
    transparent 100%
  );
}
.a7sections__fade-line:last-child {
  background: linear-gradient(to left, rgba(0,0,0,.22) 0%, transparent 100%);
  background: linear-gradient(
    to left,
    color-mix(in oklch, hsl(var(--base-content)) 22%, transparent) 0%,
    transparent 100%
  );
}
.a7sections__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: hsl(var(--base-content));
}

/* ─── Horizontal scrollable text chips ─── */
.a7sections__chips {
  display: flex;
  gap: 8px;
  padding: 4px 16px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE */
}
.a7sections__chips::-webkit-scrollbar { display: none; }

.a7sections__chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 8px 18px;
  border-radius: 14px;
  background: hsl(var(--base-100));
  border: 1.5px solid rgba(0,0,0,.14); /* fallback */
  border: 1.5px solid color-mix(in oklch, hsl(var(--base-content)) 14%, transparent);
  color: hsl(var(--base-content));
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  /* Chips are <a> elements — kill the default underline so they read
     as buttons. */
  text-decoration: none;
  transition: background .18s, transform .12s, border-color .18s;
}
.a7sections__chip:hover {
  background: hsl(var(--base-200));
  border-color: rgba(0,0,0,.28); /* fallback */
  border-color: color-mix(in oklch, hsl(var(--base-content)) 28%, transparent);
}
.a7sections__chip:active { transform: scale(.96); }
.a7sections__chip.is-active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-content));
  border-color: hsl(var(--primary));
}

/* ─── Horizontal divider between chips and square grid ─── */
.a7sections__divider {
  margin: 18px auto 14px;
  width: min(440px, calc(100% - 32px));
  height: 1px;
  border: 0;
  background: rgba(0,0,0,.14); /* fallback */
  background: color-mix(in oklch, hsl(var(--base-content)) 14%, transparent);
  /* Dissolve into the page at BOTH ends (outer-fade divider standard). */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}

/* ─── Square section cards grid ─── */
.a7sections__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 0 16px 24px;
}
@media (min-width: 540px) {
  .a7sections__grid { grid-template-columns: repeat(3, 1fr); }
}
/* Small phones: give the 2-col occasion banners more height so the title +
   arrow aren't cramped (16:9 ≈ 92px was too short at 375px). */
@media (max-width: 400px) {
  .a7sections__card { aspect-ratio: 3 / 2; }
}

.a7sections__card {
  position: relative;
  /* Occasion banners are wide (~2.5:1). 16:9 (1.78:1) gives them
     enough room to read without losing the grid's rectangular rhythm.
     `background-size: cover` then clips only the small remainder. */
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: hsl(var(--base-200));
  /* Soft drop-shadow under the card — gives a "lift" without being heavy */
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 12px 24px -8px rgba(0,0,0,0.18);
  transition: transform .25s cubic-bezier(.3,.8,.3,1), box-shadow .25s;
  display: block;
}
.a7sections__card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 18px 32px -10px rgba(0,0,0,0.24);
}
.a7sections__card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: hsl(var(--base-300));
}
/* Gradient overlay — strong dark veil from the bottom that fades out
   around the middle of the card. Keeps the white title legible on any
   image while leaving the upper half clean. */
.a7sections__card-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.72) 18%,
    rgba(0,0,0,.40) 38%,
    rgba(0,0,0,.12) 55%,
    transparent 70%);
}
.a7sections__card-name {
  position: absolute;
  inset-inline: 14px;
  bottom: 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
  max-width: calc(100% - 56px); /* leave room for the arrow */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Glass-effect arrow button — sits opposite to the name */
.a7sections__card-arrow {
  position: absolute;
  bottom: 12px;
  inset-inline-end: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,.32);
  color: #fff;
  transition: background .2s, transform .2s;
}
.a7sections__card:hover .a7sections__card-arrow {
  background: rgba(255,255,255,.28);
  transform: scale(1.06);
}

/* ════════════════════════════════════════════════════════════════════
   Global navbar replica — Phase 1.
   ─────────────────────────────────────────────────────────────────────
   Replaces the binary's subpage header on /services/cards/create with a
   navbar matching the main site's look. Will be made admin-managed in a
   future iteration (config stored in PocketBase, served by cards-service).
   ════════════════════════════════════════════════════════════════════ */

/* Hide the binary's own subpage header so we own the top of the page. */
@media (min-width: 720px) {
  }
/* Tiny mobile menu toggle visible only below the desktop breakpoint */
@media (min-width: 720px) {
  }
/* Collapsed mobile drawer — opens below the navbar */
/* ════════════════════════════════════════════════════════════════════
   Loader — simple spinning ring (restored at user request).
   ════════════════════════════════════════════════════════════════════ */
.a7-loader {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 16px;
  min-height: 340px;
}
@keyframes a7-spin {
  to { transform: rotate(360deg); }
}

.a7designs__title-skel {
  display: inline-block;
  width: 140px;
  height: 18px;
  border-radius: 14px;
  background: linear-gradient(90deg,
    hsl(var(--base-200)) 25%,
    hsl(var(--base-300)) 50%,
    hsl(var(--base-200)) 75%);
  background-size: 200% 100%;
  animation: a7deck-shimmer 1.4s infinite;
}

/* ─── Stagger reveal animations for the real content ─── */
/* Deck cards "deal in" one by one. Transform is owned by deck.js so we
   only animate opacity + a small scale offset that wraps the transform. */
.a7deck__card {
  animation: a7-card-in 0.55s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes a7-card-in {
  from { opacity: 0; filter: blur(6px); }
  to   { opacity: 1; filter: blur(0); }
}

/* Sections chips fade in left-to-right (right-to-left in RTL). */
.a7sections__chip {
  animation: a7-rise-in 0.45s cubic-bezier(.2,.8,.2,1) both;
}
.a7sections__chip:nth-child(1) { animation-delay: 40ms; }
.a7sections__chip:nth-child(2) { animation-delay: 80ms; }
.a7sections__chip:nth-child(3) { animation-delay: 120ms; }
.a7sections__chip:nth-child(4) { animation-delay: 160ms; }
.a7sections__chip:nth-child(5) { animation-delay: 200ms; }
.a7sections__chip:nth-child(n+6) { animation-delay: 240ms; }

/* Sections square grid cards rise + fade in. */
.a7sections__card,
.a7designs__card {
  animation: a7-rise-in 0.5s cubic-bezier(.2,.8,.2,1) both;
}
.a7sections__card:nth-child(1),
.a7designs__card:nth-child(1) { animation-delay: 60ms; }
.a7sections__card:nth-child(2),
.a7designs__card:nth-child(2) { animation-delay: 120ms; }
.a7sections__card:nth-child(3),
.a7designs__card:nth-child(3) { animation-delay: 180ms; }
.a7sections__card:nth-child(4),
.a7designs__card:nth-child(4) { animation-delay: 240ms; }
.a7sections__card:nth-child(5),
.a7designs__card:nth-child(5) { animation-delay: 300ms; }
.a7sections__card:nth-child(6),
.a7designs__card:nth-child(6) { animation-delay: 360ms; }
.a7sections__card:nth-child(n+7),
.a7designs__card:nth-child(n+7) { animation-delay: 420ms; }

@keyframes a7-rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .a7deck__card,
  .a7sections__chip,
  .a7sections__card,
  .a7designs__card { animation: none; }
  .a7designs__title-skel { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Phase C — Designs grid view for a single occasion
   ─────────────────────────────────────────────────────────────────────
   Shown when the URL is `/services/cards/create?occasion=ID`.
   Replaces the home view entirely (binary's content is hidden by JS).
   ════════════════════════════════════════════════════════════════════ */

/* breadcrumb (deck/home + designs views, below the nav) */
.a7cd-bc {
  width: 100%;
  max-width: 1024px;
  margin: 12px auto 4px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-family: inherit;
  color: hsl(var(--base-content));
}
.a7cd-bc__a { color: hsl(var(--base-content)); opacity: .6; text-decoration: none; transition: opacity .15s; }
.a7cd-bc__a:hover { opacity: 1; }
.a7cd-bc__sep { opacity: .35; }
.a7cd-bc__cur { font-weight: 700; opacity: .9; }

.a7designs {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 12px 16px 32px;
  direction: rtl;
  font-family: inherit;  /* site font (font_ar/font_en) */
  color: hsl(var(--base-content));
}

.a7designs__head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.a7designs__back {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  border: 1px solid color-mix(in oklch, hsl(var(--base-content)) 10%, transparent);
  background: hsl(var(--base-100));
  color: hsl(var(--base-content));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.a7designs__back:hover { background: hsl(var(--base-200)); }
.a7designs__back:active { transform: scale(.94); }
/* Mirror the arrow icon: in RTL, "back" should point right. */
.a7designs__back svg { transform: scaleX(-1); }

.a7designs__title {
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a7designs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 540px) { .a7designs__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .a7designs__grid { grid-template-columns: repeat(4, 1fr); } }

.a7designs__card {
  position: relative;
  display: block;
  /* 9:16 — matches the real design image ratio (1080×1920) exactly,
     so no cropping at any thumbnail size. */
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: hsl(var(--base-200));
  text-decoration: none;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 10px 22px -10px rgba(0,0,0,0.16);
  transition: transform .22s cubic-bezier(.3,.8,.3,1), box-shadow .22s;
}
.a7designs__card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 18px 30px -12px rgba(0,0,0,0.22);
}
.a7designs__card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* "مميّز" pin badge — small star pill in the top-right (RTL start) corner.
   Visible above the image without blocking the centerpiece. Uses the
   site's --primary so it inherits theme color in both light + dark. */
.a7designs__badge {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;  /* RTL: right edge; LTR: left edge */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-content, var(--base-100)));
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
  z-index: 2;
  pointer-events: none;
}
.a7designs__badge svg { display: block; }

/* Subtle ring on featured cards so they pop in a long grid. */
.a7designs__card.is-featured {
  outline: 2px solid color-mix(in oklch, hsl(var(--primary)) 60%, transparent);
  outline-offset: -2px;
}

/* Per-image loader — overlay on top of the colored fallback, shown
   while the real image preloads. Removed by JS once `<img>.onload`
   fires (or on error). The dark veil keeps the spinner readable
   against light backgrounds without dominating dark ones. */
/* Soft fade-in once the real image is in place, so the swap from
   colored fallback → image doesn't pop harshly. */
.a7designs__card-img.is-loaded {
  animation: a7-img-fade 220ms ease-out;
}
@keyframes a7-img-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .a7designs__card-img.is-loaded { animation: none; }
}

/* Skeleton placeholders while the grid loads — match the real card
   ratio so the layout doesn't shift when real designs land. */
.a7designs__skel {
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: linear-gradient(90deg,
    hsl(var(--base-200)) 25%,
    hsl(var(--base-300)) 50%,
    hsl(var(--base-200)) 75%);
  background-size: 200% 100%;
  animation: a7deck-shimmer 1.4s infinite;
}

.a7designs__empty {
  text-align: center;
  padding: 48px 16px;
  color: hsl(var(--base-content));
  opacity: .6;
  font-size: 15px;
  font-weight: 600;
}

/* Loading skeleton + error state (extensions beyond the user's component).
   Height matches `.a7deck` so the layout doesn't jump when the deck mounts. */
/* Home skeleton — content-shaped placeholders for the deck + sections
   explorer (deck card, title, chips, square section grid). */
.a7-loader--skel { align-items: flex-start; min-height: auto; padding: 16px 16px 40px; }
.a7-skelhome { width: 100%; max-width: 720px; margin: 0 auto; direction: rtl; }
.a7-skel {
  border-radius: 14px;
  background: linear-gradient(90deg,
    hsl(var(--base-200)) 25%, hsl(var(--base-300)) 50%, hsl(var(--base-200)) 75%);
  background-size: 200% 100%;
  animation: a7deck-shimmer 1.4s infinite;
}
.a7-skeldeck { display: flex; justify-content: center; margin: 18px 0 40px; }
.a7-skeldeck .a7-skel { width: 185px; height: 329px; }            /* 9:16 deck card */
.a7-skeltitle { display: flex; justify-content: center; margin-bottom: 16px; }
.a7-skeltitle .a7-skel { width: 120px; height: 20px; }
.a7-skelchips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.a7-skelchips .a7-skel { width: 78px; height: 34px; }
.a7-skelgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 16px; }
.a7-skelgrid .a7-skel { aspect-ratio: 1 / 1; }
@media (min-width: 540px) { .a7-skelgrid { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .a7-skel { animation: none; } }

/* Per-card loading shine sweeping over the colored design card (no spinner). */
.a7designs__card-shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: a7deck-shimmer 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .a7designs__card-shine { animation: none; } }

@keyframes a7deck-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .a7deck__card { transition: none; }
  }

/* ════════════════════════════════════════════════════════════════════
   "Section closed / coming soon" screen — rendered by renderMaintenance()
   when maintenance_mode is on. Theme-aware: colors come from the host
   DaisyUI vars (--base-content / --base-100/200 / --primary), so it
   follows the site's light/dark automatically. All classes are a7cs-*.
   ════════════════════════════════════════════════════════════════════ */
.a7cs-wrap {
  /* map the site theme → local tokens (one place to retune) */
  --cs-accent:        hsl(var(--primary));
  --cs-accent-press:  color-mix(in oklch, hsl(var(--primary)) 82%, #000);
  --cs-accent-soft:   color-mix(in oklch, hsl(var(--primary)) 12%, transparent);
  --cs-text:          hsl(var(--base-content));
  --cs-muted:         color-mix(in oklch, hsl(var(--base-content)) 62%, transparent);
  --cs-faint:         color-mix(in oklch, hsl(var(--base-content)) 60%, transparent);   /* was 42% — failed AA on the 12.5px .a7cs-lbl */
  --cs-surface-2:     hsl(var(--base-200));
  --cs-border:        color-mix(in oklch, hsl(var(--base-content)) 12%, transparent);
  --cs-border-strong: color-mix(in oklch, hsl(var(--base-content)) 18%, transparent);

  min-height: 74vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 22px;
  font-family: inherit;          /* use the site's font */
  color: var(--cs-text);
  background: radial-gradient(120% 80% at 50% -10%,
    color-mix(in oklch, hsl(var(--base-content)) 5%, transparent), transparent 60%);
}
.a7cs-card { width: 100%; max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; }

.a7cs-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: var(--cs-accent-soft); color: var(--cs-accent); font-size: 13px; font-weight: 700;
  margin-bottom: 30px; border: 1px solid color-mix(in oklch, hsl(var(--primary)) 22%, transparent);
}
.a7cs-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cs-accent); position: relative; }
.a7cs-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cs-accent);
  animation: a7cs-pulse 1.8s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes a7cs-pulse { 0% { transform: scale(1); opacity: .6 } 70% { transform: scale(3); opacity: 0 } 100% { opacity: 0 } }

.a7cs-iconwrap { position: relative; width: 128px; height: 128px; margin-bottom: 34px; display: flex; align-items: center; justify-content: center; }
.a7cs-ring { position: absolute; inset: 0; border-radius: 34px; border: 1.5px solid var(--cs-border-strong); animation: a7cs-floaty 5s ease-in-out infinite; }
.a7cs-ring--b { inset: -14px; border-radius: 42px; opacity: .5; animation-delay: .4s; }
.a7cs-iconbox {
  width: 96px; height: 96px; border-radius: 28px;
  background: linear-gradient(155deg, hsl(var(--primary)), var(--cs-accent-press));
  display: flex; align-items: center; justify-content: center; color: hsl(var(--primary-content));
  box-shadow: 0 14px 34px -10px color-mix(in oklch, hsl(var(--primary)) 45%, transparent);
  animation: a7cs-floaty 5s ease-in-out infinite;
}
.a7cs-iconbox svg { width: 48px; height: 48px; }
@keyframes a7cs-floaty { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }

.a7cs-title {
  font-family: inherit; font-weight: 800; font-size: clamp(22px, 3.8vw, 28px);
  line-height: 1.3; margin: 0 0 14px; letter-spacing: -.3px; color: var(--cs-text);
  text-wrap: balance;
}
.a7cs-sub { font-size: clamp(15px, 2.4vw, 18px); color: var(--cs-muted); line-height: 1.7; margin: 0 0 34px; max-width: 430px; }

.a7cs-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.a7cs-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 24px; border-radius: 14px;
  font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; border: none; font-family: inherit;
  transition: transform .08s, background .14s;
}
.a7cs-btn svg { width: 18px; height: 18px; }
/* Back-arrow points toward "home" per reading direction (flips in RTL). */
.a7cs-wrap[dir="rtl"] .a7cs-btn svg { transform: scaleX(-1); }
.a7cs-btn:active { transform: scale(.97); }
.a7cs-btn--primary {
  background: hsl(var(--primary)); color: hsl(var(--primary-content));
  box-shadow: 0 6px 18px -4px color-mix(in oklch, hsl(var(--primary)) 55%, transparent);
}
.a7cs-btn--primary:hover { background: var(--cs-accent-press); }

.a7cs-progress { margin-top: 40px; width: 100%; max-width: 300px; }
.a7cs-bar { height: 6px; border-radius: 999px; background: var(--cs-surface-2); overflow: hidden; border: 1px solid var(--cs-border); }
.a7cs-fill { height: 100%; width: var(--cs-progress, 68%); border-radius: 999px; background: linear-gradient(90deg, hsl(var(--primary)), var(--cs-accent-press)); animation: a7cs-grow 2.4s cubic-bezier(.22,.61,.36,1) both; }
@keyframes a7cs-grow { from { width: 0 } to { width: var(--cs-progress, 68%) } }
.a7cs-lbl { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--cs-faint); }

/* Visible keyboard focus on every interactive control (a11y). Deck cards + arrows,
   the occasion chips/cards, and the designs pager were previously focus-ring-less. */
.a7deck__card:focus-visible, .a7deck__arrow:focus-visible, .a7deck__dot:focus-visible,
.a7sections__chip:focus-visible, .a7sections__card:focus-visible,
.a7designs__pager-btn:focus-visible {
  outline: 2px solid hsl(var(--primary)); outline-offset: 2px;
}

/* Recoverable load-failure state (home + designs grid) — replaces a blank page. */
.a7-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 60px 18px; }
.a7-state__ic { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 16px;
  color: hsl(var(--primary)); background: color-mix(in oklch, hsl(var(--primary)) 12%, transparent);
  border: 1px solid color-mix(in oklch, hsl(var(--primary)) 22%, transparent); }
.a7-state__ic svg { width: 28px; height: 28px; }
.a7-state__h { margin: 4px 0 0; font-size: 17px; font-weight: 800; color: hsl(var(--base-content)); }
.a7-state__p { margin: 0; font-size: 14px; color: color-mix(in oklch, hsl(var(--base-content)) 62%, transparent); max-width: 34ch; }
.a7-state__btn { margin-top: 6px; border: 0; background: hsl(var(--primary)); color: hsl(var(--primary-content));
  font: inherit; font-weight: 800; padding: 10px 24px; border-radius: 999px; cursor: pointer; min-height: 44px;
  transition: background .15s, transform .12s; }
.a7-state__btn:hover { background: color-mix(in oklch, hsl(var(--primary)) 82%, #000); }
.a7-state__btn:active { transform: scale(.96); }
.a7-state__btn:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .a7cs-ring, .a7cs-iconbox, .a7cs-pulse::after, .a7cs-fill { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   Smooth home reveal — the loader spins until the deck's front image is
   ready, then the content fades/rises in (no abrupt pop-in).
   ════════════════════════════════════════════════════════════════════ */
.a7-home-pending { opacity: 0; transform: translateY(10px); }
.a7-home-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.a7-loader--out { opacity: 0 !important; transition: opacity .34s ease; }
@media (prefers-reduced-motion: reduce) {
  .a7-home-pending { transform: none; }
  .a7-home-in { transition: opacity .25s ease; }
}

/* ════════════════════════════════════════════════════════════════════
   Designs sub-section tabs (name cards / photo cards) — theme-aware.
   ════════════════════════════════════════════════════════════════════ */
.a7designs__tabs {
  display: flex; gap: 8px; justify-content: center;
  margin: 0 16px 18px; flex-wrap: wrap; direction: rtl;
}
.a7designs__tab {
  padding: 8px 18px; border-radius: 14px; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  background: hsl(var(--base-100));
  color: hsl(var(--base-content));
  border: 1.5px solid color-mix(in oklch, hsl(var(--base-content)) 14%, transparent);
  transition: background .18s, color .18s, border-color .18s, transform .12s;
}
.a7designs__tab:hover { background: hsl(var(--base-200)); }
.a7designs__tab:active { transform: scale(.96); }
.a7designs__tab.is-active {
  background: hsl(var(--primary)); color: hsl(var(--primary-content));
  border-color: hsl(var(--primary));
}

/* ════════════════════════════════════════════════════════════════════
   Designs grid pagination — infinite-scroll sentinel + numbered pager.
   Driven by the global "خيارات إضافية" setting (latest_limit + infinite).
   ════════════════════════════════════════════════════════════════════ */
.a7designs__sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0 30px;
}
.a7designs__sentinel::after {
  content: '';
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in oklch, hsl(var(--base-content)) 15%, transparent);
  border-top-color: hsl(var(--primary));
  animation: a7-spin 0.8s linear infinite;
}
.a7designs__sentinel.is-done { display: none; }

.a7designs__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Balanced spacing (A7 convention): equal gap above (from the grid) and
     below (to the footer, which adds the matching 44px on its side). */
  padding: 44px 16px 0;
  direction: rtl;
}
.a7designs__pager-btn {
  padding: 8px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  background: hsl(var(--base-100));
  color: hsl(var(--base-content));
  border: 1.5px solid color-mix(in oklch, hsl(var(--base-content)) 14%, transparent);
  transition: background .18s, opacity .18s, transform .12s;
}
.a7designs__pager-btn:hover:not(:disabled) { background: hsl(var(--base-200)); }
.a7designs__pager-btn:active:not(:disabled) { transform: scale(.96); }
.a7designs__pager-btn:disabled { opacity: .4; cursor: default; }
.a7designs__pager-info {
  min-width: 54px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: hsl(var(--base-content));
}

/* ════════════════════════════════════════════════════════════════════
   Site footer (rebuilt for the cards landing + designs views; not editor).
   Theme-aware + inherits the site font. Matches the host footer design.
   ════════════════════════════════════════════════════════════════════ */
.a7-site-footer {
  width: 100%;
  margin: 44px auto 0;
  padding: 36px 16px calc(40px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  border-top: 1px solid color-mix(in oklch, hsl(var(--base-content)) 9%, transparent);
  font-family: inherit;
  color: hsl(var(--base-content));
}
.a7-site-footer__logo {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.a7-site-footer__copy {
  font-size: 13.5px;
  font-weight: 600;
  opacity: .72;
}
.a7-site-footer__social {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 4px;
}
.a7-site-footer__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: hsl(var(--base-content));
  opacity: .75;
  text-decoration: none;
  transition: opacity .18s, transform .12s, background .18s;
}
.a7-site-footer__ico:hover {
  opacity: 1;
  transform: translateY(-2px);
  background: color-mix(in oklch, hsl(var(--base-content)) 8%, transparent);
}

/* ── Section ads (cards island) — slot styles shared by the designs grid
   (tall 9:16, matches .a7designs__card) and the sections grid (16:9,
   matches .a7sections__card). Same glassy-pill conventions as the rest
   of the system. ─────────────────────────────────────────────────── */
.a7cad {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(90deg,
    hsl(var(--base-200)) 25%, hsl(var(--base-300)) 50%, hsl(var(--base-200)) 75%);
  background-size: 200% 100%;
  animation: a7cad-skel 1.3s ease-in-out infinite;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 10px 22px -10px rgba(0,0,0,0.16);
}
@keyframes a7cad-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .a7cad { animation: none; } }
.a7cad--tall { aspect-ratio: 9 / 16; }
.a7cad--sq { aspect-ratio: 16 / 9; }
.a7cad .adsbygoogle { position: absolute; inset: 0; width: 100%; height: 100%; }
.a7cad__native { position: absolute; inset: 0; display: block; text-decoration: none; }
.a7cad__native img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Ad disclosure badge — native ad cards carry no AdSense auto-label. */
.a7cad__badge {
  position: absolute; top: 6px; inset-inline-start: 6px; z-index: 2;
  font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: .02em;
  padding: 3px 6px; border-radius: 5px; pointer-events: none;
  background: color-mix(in oklch, #000 55%, transparent); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.a7cad__cap {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
}
.a7cad__t {
  font-weight: 700; font-size: 13px; color: #fff;
  padding: 5px 16px; border-radius: 999px;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
          backdrop-filter: blur(6px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: transform .15s ease, background .15s, border-color .15s;
}
.a7cad__native:hover .a7cad__t {
  transform: scale(1.07);
  background: rgba(0,0,0,.62);
  border-color: rgba(255,255,255,.55);
}
.a7cad__ti {
  display: inline-block;
  width: 15px; height: 15px;
  vertical-align: -3px;
  margin-inline-end: 6px;
}

/* ============ A7 Featured — Gold Frame (generic, shared a7- classes) ============
   The frame is drawn OUTSIDE the card via ::before/::after so it bleeds into the
   grid gap (14px) — the featured card keeps the EXACT size + position of its
   siblings. --a7-radius = the section's visible-card radius; --a7-page-bg defaults
   to the live theme bg so the 4px gap auto-matches light/dark. */
.a7-featured{ position: relative; border-radius: var(--a7-radius); animation: a7-feat-bob 3.6s ease-in-out infinite; }
.a7-featured::before{                 /* animated gold ring (3px), bleeds 7px out */
  content:""; position:absolute; inset:-7px; z-index:0; pointer-events:none;
  border-radius: calc(var(--a7-radius) + 7px);
  background: linear-gradient(135deg,#ffe9a8,#f6b321,#d4881a,#ffe9a8);
  background-size: 300% 300%; animation: a7-goldflow 5s ease infinite;
  box-shadow: 0 16px 38px -14px rgba(214,150,20,.7);
}
.a7-featured::after{                  /* page-bg gap (4px) between ring and card */
  content:""; position:absolute; inset:-4px; z-index:1; pointer-events:none;
  border-radius: calc(var(--a7-radius) + 4px);
  background: var(--a7-page-bg, hsl(var(--base-100)));
}
.a7-featured__card{ position:relative; z-index:2; }
@keyframes a7-goldflow{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes a7-feat-bob{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.01) } }
.a7-featured__crown{
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  z-index: 8; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg,#ffe08a,#f6b321); color: #5a3c05;
  box-shadow: 0 6px 16px rgba(214,150,20,.55), inset 0 1px 0 rgba(255,255,255,.7);
  border: 3px solid var(--a7-page-bg, hsl(var(--base-100)));
}
.a7-featured__crown svg{ width: 28px; height: 28px; }
.a7-featured__ribbon{
  position: absolute; top: 0; left: 0; width: 128px; height: 128px;
  overflow: hidden; z-index: 6; pointer-events: none;
}
.a7-featured__ribbon span{
  position: absolute; top: 30px; left: -32px; width: 166px; text-align: center;
  transform: rotate(-45deg); white-space: nowrap;
  background: linear-gradient(90deg,#f6b321,#ffe08a,#f6b321); color: #5a3c05;
  font-weight: 800; font-size: 11px; padding: 7px 0; box-shadow: 0 4px 10px rgba(0,0,0,.28);
}
.a7-shine{ position: relative; overflow: hidden; }
.a7-shine::after{
  content: ""; position: absolute; top: -20%; left: -60%;
  width: 42%; height: 150%; z-index: 4; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); animation: a7-shimmer 3.6s ease-in-out infinite;
}
@keyframes a7-shimmer{ 0%{left:-60%} 55%,100%{left:135%} }
@media (prefers-reduced-motion: reduce){
  .a7-featured, .a7-featured::before, .a7-shine::after{ animation: none; }
}