/* ================================
   CARD CONTENT DEFAULTS
   All text inherits the user-selected font (via JS)
   ================================ */

#card-preview .card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

#card-preview .card-greeting {
  font-size: clamp(2.6rem, 9.5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.3;
  direction: rtl;
  margin: 0;
}

#card-preview .card-name {
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  font-weight: 500;
  margin: 8px 0 0;
  opacity: 0.95;
  direction: rtl;
}

#card-preview .card-wishes {
  font-size: clamp(0.75rem, 2.4vw, 0.95rem);
  font-weight: 400;
  opacity: 0.75;
  margin: 6px 0 0;
  line-height: 1.7;
  direction: rtl;
  max-width: 88%;
}

#card-preview .card-date {
  font-size: clamp(0.65rem, 2vw, 0.78rem);
  letter-spacing: 0.05em;
  font-weight: 500;
  opacity: 0.7;
  margin: 8px 0 0;
  direction: rtl;
}

/* ================================
   CARD 1: ROYAL EMERALD (existing — refined)
   ================================ */
.card-1-bg {
  background: linear-gradient(140deg, #0d2e22 0%, #1f4a3a 50%, #0d2e22 100%);
}
.card-1-overlay {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L34 22L52 25L38 36L42 54L30 44L18 54L22 36L8 25L26 22Z' fill='none' stroke='%23d4ae6d' stroke-width='0.4'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  opacity: 0.18;
}
#card-preview[data-active="1"] .card-content { padding: 50px 32px; }
#card-preview[data-active="1"] .card-greeting { color: #f5e6c8; text-shadow: 0 2px 16px rgba(184, 146, 74, 0.3); }
#card-preview[data-active="1"] .card-name { color: #faf5eb; }
#card-preview[data-active="1"] .card-wishes { color: #faf5eb; opacity: 0.7; }
#card-preview[data-active="1"] .card-date { color: #d4ae6d; }

/* ================================
   CARD 2: DESERT CREAM
   ================================ */
.card-2-bg {
  background: radial-gradient(ellipse at 50% 20%, #fbf4e1 0%, #f0e2c1 60%, #ddc99a 100%);
}
.card-2-overlay {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='0.4' fill='%237a5a3a' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  opacity: 0.5;
}
#card-preview[data-active="2"] .card-content { padding: 50px 28px 40px; justify-content: flex-start; padding-top: 60px; }
#card-preview[data-active="2"] .card-greeting { color: #6b4a2a; }
#card-preview[data-active="2"] .card-name { color: #4a3520; }
#card-preview[data-active="2"] .card-wishes { color: #8a6b48; }
#card-preview[data-active="2"] .card-date { color: #8a6b48; }

/* ================================
   CARD 3: HERITAGE SEPIA
   ================================ */
.card-3-bg {
  background: radial-gradient(ellipse at 50% 30%, #e8d4b0 0%, #c9a878 50%, #8b6638 100%);
}
.card-3-overlay {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%235a3a1f' stroke-width='0.3' opacity='0.3'%3E%3Cpath d='M40 10L48 26L65 28L52 41L55 58L40 50L25 58L28 41L15 28L32 26Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  opacity: 0.4;
}
#card-preview[data-active="3"] .card-content { padding: 60px 28px 30px; justify-content: flex-start; }
#card-preview[data-active="3"] .card-greeting { color: #3a2010; text-shadow: 0 1px 3px rgba(255,255,255,0.3); }
#card-preview[data-active="3"] .card-name { color: #faf5eb; text-shadow: 0 1px 4px rgba(58, 32, 16, 0.4); }
#card-preview[data-active="3"] .card-wishes { color: #5a3f22; }
#card-preview[data-active="3"] .card-date { color: #5a3f22; }

/* ================================
   CARD 4: GOLD LANTERN LUXE
   ================================ */
.card-4-bg {
  background: linear-gradient(180deg, #fdfaf2 0%, #f5e8c8 100%);
}
.card-4-overlay {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='0.4' fill='%23c9a14f' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  opacity: 0.6;
}
#card-preview[data-active="4"] .card-content { padding: 130px 28px 70px; }
#card-preview[data-active="4"] .card-greeting { color: #2a1f10; font-size: clamp(2.2rem, 8vw, 3rem); }
#card-preview[data-active="4"] .card-name { color: #c9a14f; font-weight: 700; }
#card-preview[data-active="4"] .card-wishes { color: #5a4520; }
#card-preview[data-active="4"] .card-date { color: #8a6a30; }

/* ================================
   CARD 5: ROSE GOLD MINIMAL
   ================================ */
.card-5-bg {
  background: radial-gradient(ellipse at 50% 20%, #d4a8a8 0%, #b88080 60%, #8a5252 100%);
}
.card-5-overlay {
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='0.3' fill='%23ffffff' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 50px 50px;
  opacity: 0.5;
}
#card-preview[data-active="5"] .card-content { padding: 80px 28px; }
#card-preview[data-active="5"] .card-greeting { color: #faf0e8; text-shadow: 0 2px 12px rgba(58, 20, 20, 0.25); }
#card-preview[data-active="5"] .card-name { color: #f5d8b8; }
#card-preview[data-active="5"] .card-wishes { color: #faf0e8; opacity: 0.85; }
#card-preview[data-active="5"] .card-date { color: #f5d8b8; }

/* ================================
   CARD 6: CLASSIC NAVY CORAL
   ================================ */
.card-6-bg {
  background: radial-gradient(ellipse at 50% 30%, #3a5a8a 0%, #2a3f6f 60%, #1e2f55 100%);
}
.card-6-overlay {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='0.5' fill='%23d4a563' opacity='0.4'/%3E%3Ccircle cx='75' cy='40' r='0.4' fill='%23d4a563' opacity='0.3'/%3E%3Ccircle cx='50' cy='80' r='0.6' fill='%23d4a563' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  opacity: 0.7;
}
#card-preview[data-active="6"] .card-content { padding: 60px 28px; }
#card-preview[data-active="6"] .card-greeting { color: #e8654a; text-shadow: 0 4px 24px rgba(232, 101, 74, 0.25); }
#card-preview[data-active="6"] .card-name { color: #faf5eb; }
#card-preview[data-active="6"] .card-wishes { color: #d4a563; }
#card-preview[data-active="6"] .card-date { color: #d4a563; }

/* ================================
   CARD 7: MIDNIGHT STARS
   ================================ */
.card-7-bg {
  background: linear-gradient(180deg, #0a0e2a 0%, #1a1e4a 100%);
}
.card-7-overlay {
  opacity: 0;
}
#card-preview[data-active="7"] .card-content { padding: 160px 28px 50px; }
#card-preview[data-active="7"] .card-greeting { color: #e8c97a; text-shadow: 0 2px 16px rgba(184, 146, 74, 0.4); }
#card-preview[data-active="7"] .card-name { color: #faf5eb; }
#card-preview[data-active="7"] .card-wishes { color: #faf5eb; opacity: 0.65; }
#card-preview[data-active="7"] .card-date { color: #d4ae6d; }

/* ================================
   CARD 8: SOFT PEARL MINIMAL
   ================================ */
.card-8-bg {
  background: linear-gradient(180deg, #fefcf7 0%, #f8f3e8 100%);
}
.card-8-overlay {
  opacity: 0;
}
#card-preview[data-active="8"] .card-content { padding: 80px 28px; }
#card-preview[data-active="8"] .card-greeting { color: #1f4a3a; }
#card-preview[data-active="8"] .card-name { color: #c9a14f; font-weight: 600; }
#card-preview[data-active="8"] .card-wishes { color: #5c544a; }
#card-preview[data-active="8"] .card-date { color: #8a8174; }

/* ================================
   CARD 9: SUNSET SKY
   ================================ */
.card-9-bg {
  background: linear-gradient(180deg, #2a1a4e 0%, #6b3d6e 30%, #c97a5e 65%, #f4c267 100%);
}
.card-9-overlay {
  opacity: 0;
}
#card-preview[data-active="9"] .card-content { padding: 40px 28px 50px; justify-content: flex-start; padding-top: 50px; }
#card-preview[data-active="9"] .card-greeting { color: #faf5eb; text-shadow: 0 2px 16px rgba(0,0,0,0.25); }
#card-preview[data-active="9"] .card-name { color: #faf5eb; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
#card-preview[data-active="9"] .card-wishes { color: #faf5eb; opacity: 0.85; text-shadow: 0 1px 4px rgba(0,0,0,0.2); }
#card-preview[data-active="9"] .card-date { color: #faf5eb; opacity: 0.8; }

/* ================================
   CARD 10: FOREST NIGHT
   ================================ */
.card-10-bg {
  background: radial-gradient(ellipse at 50% 30%, #1a4a3a 0%, #0a3028 60%, #061a14 100%);
}
.card-10-overlay {
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 8L29 18L40 19L32 26L34 37L25 32L16 37L18 26L10 19L21 18Z' fill='none' stroke='%23d4ae6d' stroke-width='0.3'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  opacity: 0.12;
}
#card-preview[data-active="10"] .card-content { padding: 140px 28px 60px; }
#card-preview[data-active="10"] .card-greeting { color: #e8c97a; text-shadow: 0 2px 16px rgba(184, 146, 74, 0.35); }
#card-preview[data-active="10"] .card-name { color: #faf5eb; }
#card-preview[data-active="10"] .card-wishes { color: #faf5eb; opacity: 0.7; }
#card-preview[data-active="10"] .card-date { color: #d4ae6d; }

/* ================================
   CARD 11: BURGUNDY LUXE
   ================================ */
.card-11-bg {
  background: linear-gradient(160deg, #6a1a2a 0%, #4a1020 50%, #2a0810 100%);
}
.card-11-overlay {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 8L35 22L50 24L40 35L43 50L30 42L17 50L20 35L10 24L25 22Z' fill='none' stroke='%23e8c97a' stroke-width='0.3'/%3E%3C/svg%3E");
  background-size: 70px 70px;
  opacity: 0.15;
}
#card-preview[data-active="11"] .card-content { padding: 60px 32px; }
#card-preview[data-active="11"] .card-greeting { color: #f5d98a; text-shadow: 0 2px 16px rgba(232, 201, 122, 0.3); }
#card-preview[data-active="11"] .card-name { color: #faf0e8; }
#card-preview[data-active="11"] .card-wishes { color: #f5d98a; opacity: 0.75; }
#card-preview[data-active="11"] .card-date { color: #c9a14f; }

/* ================================
   CARD 12: BLACK & GOLD LUXURY
   ================================ */
.card-12-bg {
  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
}
.card-12-overlay {
  opacity: 0;
}
#card-preview[data-active="12"] .card-content { padding: 90px 32px 60px; }
#card-preview[data-active="12"] .card-greeting { color: #f5d98a; text-shadow: 0 2px 24px rgba(245, 217, 138, 0.4); }
#card-preview[data-active="12"] .card-name { color: #faf5eb; }
#card-preview[data-active="12"] .card-wishes { color: #c9a14f; opacity: 0.85; }
#card-preview[data-active="12"] .card-date { color: #8a6a30; }

/* ================================
   DECORATION VISIBILITY
   ================================ */
.card-decor {
  display: none;
}
#card-preview[data-active="1"] .card-1-decor,
#card-preview[data-active="2"] .card-2-decor,
#card-preview[data-active="3"] .card-3-decor,
#card-preview[data-active="4"] .card-4-decor,
#card-preview[data-active="5"] .card-5-decor,
#card-preview[data-active="6"] .card-6-decor,
#card-preview[data-active="7"] .card-7-decor,
#card-preview[data-active="8"] .card-8-decor,
#card-preview[data-active="9"] .card-9-decor,
#card-preview[data-active="10"] .card-10-decor,
#card-preview[data-active="11"] .card-11-decor,
#card-preview[data-active="12"] .card-12-decor {
  display: block;
}

/* ================================
   CUSTOM UPLOADED BG
   When user uploads, this class hides overlays/decor
   ================================ */
#card-preview.has-custom-bg .card-overlay,
#card-preview.has-custom-bg .card-decor {
  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.6) !important;
}