/* ================================
   PHOTO-BASED CARDS (10 designs)
   Each card uses one of the 10 inspiration photos as background.
   Text positioning + color tuned to image content.
   ================================ */

/* Shared card content defaults — sized to complement the photo, not overpower it.
   --text-scale is set by the font-size +/- control (range 0.75 to 1.6, default 1) */
#card-preview .card-content {
  --text-scale: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 50px 28px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.15s ease-out;
  will-change: transform;
}

#card-preview .card-content.dragging {
  cursor: grabbing;
  transition: none;
}

/* Watermark wrapper handles centering (html2canvas-friendly — no transform tricks).
   The actual pill is just an inline-block inside, so it renders correctly when exported. */
#card-preview .card-watermark-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 4;
  text-align: center;
  pointer-events: none;
  line-height: 1;
}

#card-preview .card-watermark {
  display: inline-block;
  padding: 4px 11px;
  background: rgba(0, 0, 0, 0.34);
  color: rgba(255, 255, 255, 0.77);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  /* No letter-spacing — html2canvas misreads spacing as word breaks ("sale hb uilds") */
  letter-spacing: 0;
  word-spacing: normal;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
  border-radius: 30px;
  pointer-events: auto;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  direction: ltr;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  vertical-align: middle;
}

#card-preview .card-watermark-wrap.hidden {
  display: none;
}

/* Backwards compat in case .hidden is on the watermark itself */
#card-preview .card-watermark.hidden {
  display: none;
}

#card-preview .card-greeting {
  font-size: calc(clamp(1.4rem, 5.5vw, 2.1rem) * var(--text-scale));
  font-weight: 700;
  line-height: 1.3;
  direction: rtl;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

#card-preview .card-name {
  font-size: calc(clamp(0.85rem, 3vw, 1.05rem) * var(--text-scale));
  font-weight: 500;
  margin: 6px 0 0;
  opacity: 0.95;
  direction: rtl;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

#card-preview .card-wishes {
  font-size: calc(clamp(0.62rem, 2vw, 0.75rem) * var(--text-scale));
  font-weight: 400;
  opacity: 0.8;
  margin: 4px 0 0;
  line-height: 1.6;
  direction: rtl;
  max-width: 80%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* ================================
   CARD BACKGROUNDS — all use real photos
   ================================ */
.card-1-bg  { background: #e8e8e8 url('../assets/cards/1.jpg')  center/cover no-repeat; }
.card-2-bg  { background: #d4cfc2 url('../assets/cards/2.jpg')  center/cover no-repeat; }
.card-3-bg  { background: #ffffff url('../assets/cards/3.jpg')  center/cover no-repeat; }
.card-4-bg  { background: #1a1a1a url('../assets/cards/4.jpg')  center/cover no-repeat; }
.card-5-bg  { background: #efeae0 url('../assets/cards/5.jpg')  center/cover no-repeat; }
.card-6-bg  { background: #f3ede0 url('../assets/cards/6.jpg')  center/cover no-repeat; }
.card-7-bg  { background: #f0d8cc url('../assets/cards/7.jpg')  center/cover no-repeat; }
.card-8-bg  { background: #fafafa url('../assets/cards/8.jpg')  center/cover no-repeat; }
.card-9-bg  { background: #faf5eb url('../assets/cards/9.jpg')  center/cover no-repeat; }
.card-10-bg { background: #e8c9b6 url('../assets/cards/10.jpg') center/cover no-repeat; }
.card-12-bg { background: #ececec url('../assets/cards/12.jpg') center/cover no-repeat; }
.card-13-bg { background: #faf6ef url('../assets/cards/13.jpg') center/cover no-repeat; }
.card-14-bg { background: #f5ead4 url('../assets/cards/14.jpg') center/cover no-repeat; }

/* ================================
   PER-CARD TEXT POSITIONING & COLOR
   Tuned to avoid the photo's visual elements.
   ================================ */

/* CARD 1 — White mosque minarets + orange sun + calligraphy bg.
   Text at the very TOP (empty sky area). Dark text. */
#card-preview[data-active="1"] .card-content {
  justify-content: flex-start;
  padding-top: 32px;
}
#card-preview[data-active="1"] .card-greeting { color: #2a2418; text-shadow: 0 1px 2px rgba(255,255,255,0.4); }
#card-preview[data-active="1"] .card-name { color: #c9682e; }
#card-preview[data-active="1"] .card-wishes { color: #4a4030; }
#card-preview[data-active="1"] .card-date { color: #5a5040; }

/* CARD 2 — Stone mosque dome under arch, sky empty at top.
   Text TOP-CENTER (sky area). Darker stone-color text. */
#card-preview[data-active="2"] .card-content {
  justify-content: flex-start;
  padding-top: 42px;
}
#card-preview[data-active="2"] .card-greeting { color: #3a2f1f; text-shadow: 0 1px 2px rgba(255,255,255,0.5); }
#card-preview[data-active="2"] .card-name { color: #6a5230; }
#card-preview[data-active="2"] .card-wishes { color: #5a4830; }
#card-preview[data-active="2"] .card-date { color: #6a5840; }

/* CARD 3 — Minimalist B&W camels in desert. Big empty white top.
   Text TOP-CENTER. Very dark text for crisp contrast. */
#card-preview[data-active="3"] .card-content {
  justify-content: flex-start;
  padding-top: 50px;
}
#card-preview[data-active="3"] .card-greeting { color: #1a1a1a; }
#card-preview[data-active="3"] .card-name { color: #3a3a3a; }
#card-preview[data-active="3"] .card-wishes { color: #5a5a5a; }
#card-preview[data-active="3"] .card-date { color: #7a7a7a; }

/* CARD 4 — Dark mosque ceiling with calligraphy overlay.
   Text CENTERED. WHITE text with shadow. */
#card-preview[data-active="4"] .card-content {
  justify-content: center;
}
#card-preview[data-active="4"] .card-greeting { color: #f5e6c8; text-shadow: 0 2px 16px rgba(0,0,0,0.7); }
#card-preview[data-active="4"] .card-name { color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,0.7); }
#card-preview[data-active="4"] .card-wishes { color: #f5f5f5; text-shadow: 0 1px 8px rgba(0,0,0,0.7); }
#card-preview[data-active="4"] .card-date { color: #e8c97a; text-shadow: 0 1px 8px rgba(0,0,0,0.7); }

/* CARD 5 — White arch with geometric inset at bottom. Top empty.
   Text TOP. Dark elegant. */
#card-preview[data-active="5"] .card-content {
  justify-content: flex-start;
  padding-top: 50px;
}
#card-preview[data-active="5"] .card-greeting { color: #2a2418; }
#card-preview[data-active="5"] .card-name { color: #8a6a3a; }
#card-preview[data-active="5"] .card-wishes { color: #5c544a; }
#card-preview[data-active="5"] .card-date { color: #8a8174; }

/* CARD 6 — Cream geometric pattern with ornate scalloped frame, gold "رمضان" at top.
   Text in the EMPTY MIDDLE area inside the frame. */
#card-preview[data-active="6"] .card-content {
  justify-content: center;
  padding: 130px 50px 90px;
}
#card-preview[data-active="6"] .card-greeting { color: #6a4a2a; font-size: calc(clamp(1.2rem, 4.5vw, 1.7rem) * var(--text-scale)); }
#card-preview[data-active="6"] .card-name { color: #c9a14f; }
#card-preview[data-active="6"] .card-wishes { color: #5a4830; }
#card-preview[data-active="6"] .card-date { color: #8a6a3a; }

/* CARD 7 — Pink with hanging ketupat + soft "عيد سعيد" calligraphy bottom-right.
   Text TOP-CENTER (away from the calligraphy). */
#card-preview[data-active="7"] .card-content {
  justify-content: flex-start;
  padding-top: 110px;
}
#card-preview[data-active="7"] .card-greeting { color: #6a3a2a; font-size: calc(clamp(1.3rem, 5vw, 1.9rem) * var(--text-scale)); }
#card-preview[data-active="7"] .card-name { color: #c97a5a; }
#card-preview[data-active="7"] .card-wishes { color: #6a4a3a; }
#card-preview[data-active="7"] .card-date { color: #8a5a4a; }

/* CARD 8 — White + gold geometric ornaments at top + bottom. Center empty.
   Text CENTERED. */
#card-preview[data-active="8"] .card-content {
  justify-content: center;
}
#card-preview[data-active="8"] .card-greeting { color: #2a2010; }
#card-preview[data-active="8"] .card-name { color: #c9a14f; }
#card-preview[data-active="8"] .card-wishes { color: #5a4a30; }
#card-preview[data-active="8"] .card-date { color: #8a6a3a; }

/* CARD 9 — White with sheep + mosque silhouettes at bottom, lanterns at top.
   Text in MIDDLE empty area. */
#card-preview[data-active="9"] .card-content {
  justify-content: center;
  padding: 130px 32px 130px;
}
#card-preview[data-active="9"] .card-greeting { color: #3a2a1a; font-size: calc(clamp(1.2rem, 4.5vw, 1.7rem) * var(--text-scale)); }
#card-preview[data-active="9"] .card-name { color: #6a4a2a; }
#card-preview[data-active="9"] .card-wishes { color: #5a4a3a; }
#card-preview[data-active="9"] .card-date { color: #6a5a4a; }

/* CARD 10 — Soft pink with arch + crescents top, mosque + cattle bottom.
   Text CENTERED in mid-area. */
#card-preview[data-active="10"] .card-content {
  justify-content: center;
  padding-top: 200px;
  padding-bottom: 120px;
}
#card-preview[data-active="10"] .card-greeting { color: #4a2a18; font-size: calc(clamp(1.2rem, 4.5vw, 1.7rem) * var(--text-scale)); }
#card-preview[data-active="10"] .card-name { color: #8a4a3a; }
#card-preview[data-active="10"] .card-wishes { color: #5a3a2a; }
#card-preview[data-active="10"] .card-date { color: #6a4a3a; }

/* CARD 11 — Cream ornate frame with subtle pattern. Text centered. */
#card-preview[data-active="11"] .card-content {
  justify-content: center;
  padding: 70px 40px;
}
#card-preview[data-active="11"] .card-greeting { color: #4a3520; font-size: calc(clamp(1.4rem, 5vw, 2rem) * var(--text-scale)); }
#card-preview[data-active="11"] .card-name { color: #7a5840; }
#card-preview[data-active="11"] .card-wishes { color: #6a5238; }
#card-preview[data-active="11"] .card-date { color: #8a6a48; }

/* CARD 12 — Minimalist grey with tiny sparkles in corners. Center text. */
#card-preview[data-active="12"] .card-content {
  justify-content: center;
}
#card-preview[data-active="12"] .card-greeting { color: #2a2a2a; }
#card-preview[data-active="12"] .card-name { color: #5a5a5a; }
#card-preview[data-active="12"] .card-wishes { color: #6a6a6a; }
#card-preview[data-active="12"] .card-date { color: #8a8a8a; }

/* CARD 13 — Watercolor flowers at bottom. Text TOP. */
#card-preview[data-active="13"] .card-content {
  justify-content: flex-start;
  padding-top: 55px;
}
#card-preview[data-active="13"] .card-greeting { color: #3a2a3a; }
#card-preview[data-active="13"] .card-name { color: #8a4a6a; }
#card-preview[data-active="13"] .card-wishes { color: #5a4858; }
#card-preview[data-active="13"] .card-date { color: #7a6878; }

/* CARD 14 — Warm beige with Quran + lantern at bottom. Text TOP-CENTER. */
#card-preview[data-active="14"] .card-content {
  justify-content: flex-start;
  padding-top: 65px;
}
#card-preview[data-active="14"] .card-greeting { color: #5a3018; }
#card-preview[data-active="14"] .card-name { color: #8a5028; }
#card-preview[data-active="14"] .card-wishes { color: #6a4828; }
#card-preview[data-active="14"] .card-date { color: #8a6840; }

/* ================================
   CUSTOM UPLOADED BG
   When user uploads, hide overlays and use dark text shadow for readability
   ================================ */
#card-preview.has-custom-bg .card-overlay {
  display: none !important;
}

#card-preview.has-custom-bg .card-content {
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 100%);
}

#card-preview.has-custom-bg .card-greeting,
#card-preview.has-custom-bg .card-name,
#card-preview.has-custom-bg .card-wishes,
#card-preview.has-custom-bg .card-date {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7) !important;
}