/* ==========================================
   贺卡模板样式 - 扁平化设计 · 30+ 款精美模板
   ========================================== */

/* ==========================================
   基础样式
   ========================================== */
.greeting-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.greeting-card:hover {
  transform: translateY(-6px);
}

.greeting-card-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 20px;
  width: 100%;
}

.greeting-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.greeting-card-subtitle {
  font-size: 0.875rem;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.greeting-card-message {
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-line;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 浅色背景模板 - 深色文字 */
.card-wedding-minimal,
.card-thanks-handwrite,
.card-thanks-line,
.card-business-minimal {
  background: #ffffff;
}

.card-wedding-minimal .greeting-card-title,
.card-wedding-minimal .greeting-card-subtitle,
.card-wedding-minimal .greeting-card-message,
.card-thanks-handwrite .greeting-card-title,
.card-thanks-handwrite .greeting-card-subtitle,
.card-thanks-handwrite .greeting-card-message,
.card-thanks-line .greeting-card-title,
.card-thanks-line .greeting-card-subtitle,
.card-thanks-line .greeting-card-message,
.card-business-minimal .greeting-card-title,
.card-business-minimal .greeting-card-subtitle,
.card-business-minimal .greeting-card-message {
  color: #1a1a1a;
  text-shadow: none;
}

.card-blessing-gold .greeting-card-title {
  color: #ffd700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.card-winter .greeting-card-title,
.card-winter .greeting-card-subtitle,
.card-winter .greeting-card-message {
  color: #1e4d6b;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* ==========================================
   扁平化设计 - 通用装饰元素
   ========================================== */

/* 圆形装饰 */
.card-deco-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
}

/* 矩形装饰 */
.card-deco-rect {
  position: absolute;
  opacity: 0.1;
}

/* 线条装饰 */
.card-deco-line {
  position: absolute;
  height: 2px;
  opacity: 0.2;
}

/* ==========================================
   生日类模板
   ========================================== */

/* 彩虹蛋糕 - 去掉白色蛋糕装饰，保持渐变背景 */
.card-birthday-rainbow {
  background: linear-gradient(180deg, #ff6b6b 0%, #feca57 25%, #48dbfb 50%, #ff9ff3 75%, #54a0ff 100%);
}
.card-birthday-rainbow::before {
  content: '🎂';
  position: absolute;
  top: 15%;
  right: 15%;
  font-size: 2.5rem;
  opacity: 0.6;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.card-birthday-rainbow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
}

/* 派对彩带 */
.card-birthday-party {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-birthday-party::before {
  content: '';
  position: absolute;
  top: 10%;
  left: -10%;
  width: 40%;
  height: 80%;
  background: repeating-linear-gradient(45deg, #ff6b6b, #ff6b6b 10px, transparent 10px, transparent 20px);
  opacity: 0.3;
}
.card-birthday-party::after {
  content: '';
  position: absolute;
  top: 10%;
  right: -10%;
  width: 40%;
  height: 80%;
  background: repeating-linear-gradient(-45deg, #feca57, #feca57 10px, transparent 10px, transparent 20px);
  opacity: 0.3;
}

/* 星空许愿 */
.card-birthday-star {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.card-birthday-star::before {
  content: '★';
  position: absolute;
  top: 15%;
  right: 15%;
  font-size: 1.5rem;
  color: #ffd700;
  opacity: 0.6;
  animation: twinkle 2s infinite;
}
.card-birthday-star::after {
  content: '☆';
  position: absolute;
  top: 25%;
  left: 20%;
  font-size: 1rem;
  color: #ffd700;
  opacity: 0.4;
  animation: twinkle 2s infinite 0.5s;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.2; transform: scale(0.8); }
}

/* 极简数字 */
.card-birthday-minimal {
  background: #fafafa;
}
.card-birthday-minimal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #1a1a1a;
}
.card-birthday-minimal::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #1a1a1a;
}
.card-birthday-minimal .greeting-card-title,
.card-birthday-minimal .greeting-card-subtitle,
.card-birthday-minimal .greeting-card-message {
  color: #1a1a1a;
}

/* 甜蜜粉红 */
.card-birthday-sweet {
  background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
}
.card-birthday-sweet::before {
  content: '♥';
  position: absolute;
  top: 10%;
  right: 10%;
  font-size: 3rem;
  color: #fff;
  opacity: 0.2;
}
.card-birthday-sweet::after {
  content: '♥';
  position: absolute;
  bottom: 15%;
  left: 10%;
  font-size: 2rem;
  color: #fff;
  opacity: 0.15;
}

/* ==========================================
   节日类模板
   ========================================== */

/* 圣诞红绿 */
.card-christmas {
  background: linear-gradient(180deg, #1e5128 0%, #4e9f3d 100%);
}
.card-christmas::before {
  content: '❄';
  position: absolute;
  top: 10%;
  right: 15%;
  font-size: 2rem;
  color: #fff;
  opacity: 0.4;
}
.card-christmas::after {
  content: '❄';
  position: absolute;
  top: 20%;
  left: 15%;
  font-size: 1.5rem;
  color: #fff;
  opacity: 0.3;
}

/* 冬日雪花 */
.card-winter {
  background: linear-gradient(180deg, #e8f4f8 0%, #b8d4e3 50%, #87ceeb 100%);
}
.card-winter::before {
  content: '❅';
  position: absolute;
  top: 10%;
  right: 10%;
  font-size: 3rem;
  color: #4a90a4;
  opacity: 0.3;
}
.card-winter::after {
  content: '❅';
  position: absolute;
  bottom: 15%;
  left: 10%;
  font-size: 2rem;
  color: #4a90a4;
  opacity: 0.25;
}
.card-winter .greeting-card-title,
.card-winter .greeting-card-subtitle,
.card-winter .greeting-card-message {
  color: #2c5f7c;
}

/* 新年红金 */
.card-newyear {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 50%, #f39c12 100%);
}
.card-newyear::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 30%;
  border: 3px solid rgba(255, 215, 0, 0.4);
  border-radius: 0 0 50% 50%;
}
.card-newyear::after {
  content: '龍';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  color: rgba(255, 215, 0, 0.5);
  font-weight: bold;
}

/* 中秋圆月 */
.card-midautumn {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.card-midautumn::before {
  content: '';
  position: absolute;
  top: 10%;
  right: 15%;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #f5f5dc 0%, #ffd700 100%);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}
.card-midautumn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
}

/* 万圣之夜 */
.card-halloween {
  background: linear-gradient(180deg, #2c1654 0%, #4a2c7a 50%, #6b3fa0 100%);
}
.card-halloween::before {
  content: '🎃';
  position: absolute;
  top: 10%;
  right: 15%;
  font-size: 2.5rem;
}
.card-halloween::after {
  content: '👻';
  position: absolute;
  bottom: 20%;
  left: 15%;
  font-size: 2rem;
  opacity: 0.5;
}

/* ==========================================
   婚礼类模板
   ========================================== */

/* 浪漫粉白 */
.card-wedding-romantic {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 50%, #f48fb1 100%);
}
.card-wedding-romantic::before {
  content: '💒';
  position: absolute;
  top: 10%;
  right: 15%;
  font-size: 2rem;
}
.card-wedding-romantic::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%);
}

/* 金色奢华 */
.card-wedding-gold {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #3d3d3d 100%);
}
.card-wedding-gold::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(212, 175, 55, 0.5);
  border-radius: 8px;
}
.card-wedding-gold::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
  border-radius: 50%;
}

/* 简约黑白 */
.card-wedding-minimal {
  background: #ffffff;
}
.card-wedding-minimal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #1a1a1a;
}
.card-wedding-minimal::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #1a1a1a;
}
.card-wedding-minimal .greeting-card-title,
.card-wedding-minimal .greeting-card-subtitle,
.card-wedding-minimal .greeting-card-message {
  color: #1a1a1a;
}

/* 紫色优雅 */
.card-wedding-purple {
  background: linear-gradient(135deg, #e8d5f2 0%, #c9a7d4 50%, #9b7bb8 100%);
}
.card-wedding-purple::before {
  content: '👑';
  position: absolute;
  top: 10%;
  right: 15%;
  font-size: 2rem;
  opacity: 0.6;
}
.card-wedding-purple::after {
  content: '✨';
  position: absolute;
  bottom: 20%;
  left: 15%;
  font-size: 1.5rem;
  opacity: 0.4;
}

/* ==========================================
   爱情类模板
   ========================================== */

/* 玫瑰红 */
.card-love-rose {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 50%, #ff6b6b 100%);
}
.card-love-rose::before {
  content: '🌹';
  position: absolute;
  top: 10%;
  right: 15%;
  font-size: 2rem;
  opacity: 0.6;
}
.card-love-rose::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
}

/* 心形图案 */
.card-love-heart {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
}
.card-love-heart::before {
  content: '♥';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6rem;
  color: #fff;
  opacity: 0.2;
}

/* 星空誓言 */
.card-love-starry {
  background: linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}
.card-love-starry::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20px 30px, white, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, white, transparent),
    radial-gradient(2px 2px at 130px 80px, rgba(255, 255, 255, 0.6), transparent);
  animation: twinkle 3s infinite;
}

/* 粉色泡泡 */
.card-love-bubble {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}
.card-love-bubble::before {
  content: '○';
  position: absolute;
  top: 10%;
  left: 10%;
  font-size: 2rem;
  color: #fff;
  opacity: 0.4;
}
.card-love-bubble::after {
  content: '○';
  position: absolute;
  bottom: 20%;
  right: 15%;
  font-size: 1.5rem;
  color: #fff;
  opacity: 0.3;
}

/* ==========================================
   祝福类模板
   ========================================== */

/* 祥云图案 */
.card-blessing-cloud {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}
.card-blessing-cloud::before {
  content: '☁';
  position: absolute;
  top: 10%;
  right: 15%;
  font-size: 3rem;
  color: #fff;
  opacity: 0.4;
}
.card-blessing-cloud::after {
  content: '☁';
  position: absolute;
  bottom: 15%;
  left: 10%;
  font-size: 2rem;
  color: #fff;
  opacity: 0.3;
}

/* 金色福字 */
.card-blessing-gold {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
}
.card-blessing-gold::before {
  content: '福';
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4rem;
  color: rgba(255, 215, 0, 0.8);
  font-weight: bold;
}
.card-blessing-gold::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 215, 0, 0.2) 100%);
}

/* 绿色希望 */
.card-blessing-hope {
  background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
}
.card-blessing-hope::before {
  content: '🌱';
  position: absolute;
  top: 10%;
  right: 15%;
  font-size: 2rem;
}
.card-blessing-hope::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
}

/* 紫色神秘 */
.card-blessing-mystic {
  background: linear-gradient(135deg, #412a4a 0%, #6b3fa0 50%, #9b59b6 100%);
}
.card-blessing-mystic::before {
  content: '◆';
  position: absolute;
  top: 15%;
  right: 15%;
  font-size: 2rem;
  color: #fff;
  opacity: 0.2;
  transform: rotate(45deg);
}
.card-blessing-mystic::after {
  content: '◆';
  position: absolute;
  bottom: 25%;
  left: 15%;
  font-size: 1.5rem;
  color: #fff;
  opacity: 0.15;
  transform: rotate(45deg);
}

/* ==========================================
   感谢类模板
   ========================================== */

/* 温暖阳光 */
.card-thanks-sunshine {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
}
.card-thanks-sunshine::before {
  content: '☀';
  position: absolute;
  top: 10%;
  right: 15%;
  font-size: 2.5rem;
  color: #fff;
  opacity: 0.4;
}
.card-thanks-sunshine::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25%;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.2) 100%);
}

/* 手写风格 */
.card-thanks-handwrite {
  background: #fffaf0;
}
.card-thanks-handwrite::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border: 2px dashed #d4a574;
  border-radius: 8px;
  opacity: 0.3;
}
.card-thanks-handwrite .greeting-card-title,
.card-thanks-handwrite .greeting-card-subtitle,
.card-thanks-handwrite .greeting-card-message {
  color: #8b5a2b;
  font-style: italic;
}

/* 简洁线条 */
.card-thanks-line {
  background: #f8f9fa;
}
.card-thanks-line::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 2px;
  background: #dee2e6;
}
.card-thanks-line::after {
  content: '';
  position: absolute;
  bottom: 25%;
  left: 20%;
  width: 60%;
  height: 2px;
  background: #dee2e6;
}
.card-thanks-line .greeting-card-title,
.card-thanks-line .greeting-card-subtitle,
.card-thanks-line .greeting-card-message {
  color: #495057;
}

/* ==========================================
   鼓励类模板
   ========================================== */

/* 火焰橙 */
.card-encourage-fire {
  background: linear-gradient(135deg, #f97316 0%, #ef4444 50%, #dc2626 100%);
}
.card-encourage-fire::before {
  content: '🔥';
  position: absolute;
  top: 10%;
  right: 15%;
  font-size: 2.5rem;
}
.card-encourage-fire::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* 蓝色希望 */
.card-encourage-blue {
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #2563eb 100%);
}
.card-encourage-blue::before {
  content: '💪';
  position: absolute;
  top: 10%;
  right: 15%;
  font-size: 2rem;
}
.card-encourage-blue::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
}

/* 彩虹励志 */
.card-encourage-rainbow {
  background: linear-gradient(180deg, #ff6b6b 0%, #feca57 20%, #48dbfb 40%, #ff9ff3 60%, #54a0ff 80%, #5f27cd 100%);
}
.card-encourage-rainbow::before {
  content: '🌈';
  position: absolute;
  top: 10%;
  right: 15%;
  font-size: 2.5rem;
}
.card-encourage-rainbow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
}

/* ==========================================
   商务类模板
   ========================================== */

/* 深蓝专业 */
.card-business-blue {
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 50%, #3182ce 100%);
}
.card-business-blue::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #63b3ed;
}
.card-business-blue::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* 金棕商务 */
.card-business-gold {
  background: linear-gradient(135deg, #292524 0%, #78716c 50%, #a8a29e 100%);
}
.card-business-gold::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 30%;
  height: 4px;
  background: #d97706;
}
.card-business-gold::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 4px;
  height: 30%;
  background: #d97706;
}

/* ==========================================
   婚礼类新增
   ========================================== */

/* 静谧蓝调 */
.card-wedding-blue {
  background: linear-gradient(135deg, #e0f2fe 0%, #7dd3fc 50%, #38bdf8 100%);
}
.card-wedding-blue::before {
  content: '💙';
  position: absolute;
  top: 10%;
  right: 15%;
  font-size: 2rem;
  opacity: 0.6;
}
.card-wedding-blue::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25%;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%);
}

/* ==========================================
   爱情类新增
   ========================================== */

/* 落日余晖 */
.card-love-sunset {
  background: linear-gradient(180deg, #ff9a56 0%, #ff6a88 50%, #ee0952 100%);
}
.card-love-sunset::before {
  content: '';
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  background: linear-gradient(180deg, #ffd89b 0%, #ff9a56 100%);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}
.card-love-sunset::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* ==========================================
   祝福类新增
   ========================================== */

/* 日出朝霞 */
.card-blessing-sunrise {
  background: linear-gradient(180deg, #ff6b6b 0%, #feca57 50%, #fff9db 100%);
}
.card-blessing-sunrise::before {
  content: '';
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 50px;
  background: linear-gradient(180deg, #ffd89b 0%, #fff 100%);
  border-radius: 50% 50% 0 0;
}
.card-blessing-sunrise::after {
  content: '☀';
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem;
  color: #f97316;
  opacity: 0.8;
}

/* ==========================================
   感谢类新增
   ========================================== */

/* 花开时节 */
.card-thanks-flower {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
}
.card-thanks-flower::before {
  content: '🌸';
  position: absolute;
  top: 10%;
  right: 15%;
  font-size: 2rem;
  opacity: 0.6;
}
.card-thanks-flower::after {
  content: '🌼';
  position: absolute;
  bottom: 20%;
  left: 15%;
  font-size: 1.5rem;
  opacity: 0.4;
}

/* 暖心相伴 */
.card-thanks-warm {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 50%, #fca5a5 100%);
}
.card-thanks-warm::before {
  content: '🤍';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: #fff;
  opacity: 0.2;
}
.card-thanks-warm::after {
  content: '💝';
  position: absolute;
  bottom: 15%;
  right: 15%;
  font-size: 1.5rem;
  opacity: 0.5;
}

/* ==========================================
   鼓励类新增
   ========================================== */

/* 日出力量 */
.card-encourage-sunrise {
  background: linear-gradient(180deg, #1e3a5f 0%, #3b82f6 30%, #fbbf24 100%);
}
.card-encourage-sunrise::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 40px;
  background: linear-gradient(180deg, #fbbf24 0%, #fff 100%);
  border-radius: 50%;
  opacity: 0.8;
}
.card-encourage-sunrise::after {
  content: '✦';
  position: absolute;
  top: 15%;
  right: 15%;
  font-size: 1.5rem;
  color: #fbbf24;
  opacity: 0.6;
}

/* 星光闪耀 */
.card-encourage-star {
  background: linear-gradient(180deg, #1a1a2e 0%, #4c1d95 50%, #7c3aed 100%);
}
.card-encourage-star::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #ffd700, transparent),
    radial-gradient(2px 2px at 40px 70px, #ffd700, transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  animation: twinkle 2s infinite;
}
.card-encourage-star::after {
  content: '★';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #ffd700;
  opacity: 0.3;
}

/* ==========================================
   商务类新增
   ========================================== */

/* 极简商务 */
.card-business-minimal {
  background: #f8fafc;
}
.card-business-minimal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #1e293b;
}
.card-business-minimal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: #1e293b;
}
.card-business-minimal .greeting-card-title,
.card-business-minimal .greeting-card-subtitle,
.card-business-minimal .greeting-card-message {
  color: #1e293b;
}

/* 优雅灰调 */
.card-business-elegant {
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #9ca3af 100%);
}
.card-business-elegant::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 15%;
  right: 15%;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
}
.card-business-elegant::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: 15%;
  right: 15%;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
}

/* 藏蓝稳重 */
.card-business-navy {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}
.card-business-navy::before {
  content: '◆';
  position: absolute;
  top: 15%;
  right: 15%;
  font-size: 2rem;
  color: #94a3b8;
  opacity: 0.3;
}
.card-business-navy::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, rgba(148, 163, 184, 0.1) 100%);
}

/* ==========================================
   响应式调整
   ========================================== */
@media (max-width: 768px) {
  .greeting-card {
    border-radius: 12px;
  }

  .greeting-card-title {
    font-size: 1.25rem;
  }

  .greeting-card-subtitle {
    font-size: 0.75rem;
  }

  .greeting-card-message {
    font-size: 0.625rem;
  }
}