/* ==============================================
   GoodMood Pack Detail Modal
   Premium E-commerce Product Popup
   ============================================== */

/* Overlay */
.gm-pack-detail-overlay { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: rgba(17, 24, 39, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }
.gm-pack-detail-overlay.gm-pd-visible { opacity: 1; visibility: visible; }

/* Modal Card */
.gm-pd-modal { background: #ffffff; border-radius: 1rem; max-width: 440px; width: 92%; box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.1); border: 1px solid rgba(255,255,255,0.2); overflow: hidden; position: relative; transform: scale(0.9) translateY(20px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.gm-pd-visible .gm-pd-modal { transform: scale(1) translateY(0); }

/* Close Button */
.gm-pd-close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 10; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.3); color: white; font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; line-height: 1; padding: 0; }
.gm-pd-close:hover { background: rgba(255,255,255,0.4); }

/* Hero Header */
.gm-pd-hero { position: relative; padding: 2.5rem 2rem 2rem; display: flex; flex-direction: column; align-items: center; overflow: hidden; min-height: 140px; }
.gm-pd-hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--pd-color) 0%, color-mix(in srgb, var(--pd-color) 70%, #000) 100%); z-index: 0; }
.gm-pd-hero-bg::before, .gm-pd-hero-bg::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.08); }
.gm-pd-hero-bg::before { width: 200px; height: 200px; top: -80px; right: -60px; }
.gm-pd-hero-bg::after { width: 140px; height: 140px; bottom: -50px; left: -40px; }

/* Hero Icon */
.gm-pd-hero-icon { width: 72px; height: 72px; border-radius: 1.25rem; background: rgba(255,255,255,0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.gm-pd-hero-icon i { font-size: 1.75rem; color: white; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }

/* Status Badge */
.gm-pd-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; margin-top: 1rem; }
.gm-pd-badge.included { background: rgba(59, 130, 246, 0.2); color: #dbeafe; border: 1px solid rgba(59, 130, 246, 0.3); }
.gm-pd-badge.owned { background: rgba(16, 185, 129, 0.2); color: #d1fae5; border: 1px solid rgba(16, 185, 129, 0.3); }
.gm-pd-badge.coming { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.2); }
.gm-pd-badge.freemium { background: rgba(245, 158, 11, 0.2); color: #fef3c7; border: 1px solid rgba(245, 158, 11, 0.3); }

/* Content Area */
.gm-pd-content { padding: 1.75rem 2rem 2rem; }
.gm-pd-title { font-size: 1.25rem; font-weight: 700; color: #111827; margin: 0 0 0.75rem; line-height: 1.3; }
.gm-pd-description { font-size: 0.9rem; color: #4b5563; line-height: 1.7; margin: 0; }
.gm-pd-desc-intro { font-size: 0.875rem; color: #4b5563; line-height: 1.6; margin: 0 0 0.75rem; }
.gm-pd-features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.gm-pd-features-list li { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: #374151; background: #f3f4f6; padding: 0.3rem 0.625rem; border-radius: 0.375rem; line-height: 1.4; }
.gm-pd-features-list li i { font-size: 0.625rem; color: #9ca3af; }

/* Divider */
.gm-pd-divider { height: 1px; background: #e5e7eb; margin: 1.25rem 0; }

/* Price */
.gm-pd-price { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 1.25rem; }
.gm-pd-price-amount { font-size: 1.75rem; font-weight: 800; color: #111827; line-height: 1; }
.gm-pd-price-amount.free { color: #10b981; font-size: 1.25rem; }
.gm-pd-price-period { font-size: 0.9rem; color: #9ca3af; font-weight: 400; }

/* Actions */
.gm-pd-actions { display: flex; flex-direction: column; gap: 0.75rem; }

/* CTA Button */
.gm-pd-cta { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.75rem 1.5rem; border-radius: 0.625rem; font-size: 0.9375rem; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s ease; text-decoration: none; line-height: 1.4; background: #FFA44E; color: white; box-shadow: 0 2px 8px rgba(255, 164, 78, 0.3); }
.gm-pd-cta:hover { background: #e8922a; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255, 164, 78, 0.4); color: white; text-decoration: none; }
.gm-pd-cta:active { transform: translateY(0); }
.gm-pd-cta.disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; box-shadow: none; }
.gm-pd-cta.disabled:hover { transform: none; box-shadow: none; }

/* Responsive */
@media (max-width: 480px) {
    .gm-pd-modal { width: 96%; max-width: none; }
    .gm-pd-hero { padding: 2rem 1.5rem 1.5rem; }
    .gm-pd-content { padding: 1.5rem; }
}