/* Isolated Reset Container */
.aml-isolated-scope {
    direction: rtl !important;
    text-align: right !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.aml-isolated-scope * {
    box-sizing: border-box !important;
}

/* 🔒 FULLSCREEN TAKEOVER WRAPPER */
.aml-isolated-scope .aml-campaign-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    overflow: hidden !important;
}

/* 🎂 1. BIRTHDAY VIBE STYLES */
.aml-isolated-scope .aml-vibe-birthday {
    background: radial-gradient(circle at center, #3b0764 0%, #0f021e 100%) !important;
}

.aml-isolated-scope .aml-vibe-birthday .aml-card-container {
    border: 2px solid #a855f7 !important;
    box-shadow: 0 0 60px rgba(168, 85, 247, 0.4) !important;
}

/* 🌙 2. RAMADAN VIBE STYLES */
.aml-isolated-scope .aml-vibe-ramadan {
    background: radial-gradient(circle at center, #261a02 0%, #0a0600 100%) !important;
}

.aml-isolated-scope .aml-vibe-ramadan .aml-card-container {
    border: 2px solid #f7d070 !important;
    box-shadow: 0 0 60px rgba(247, 208, 112, 0.3) !important;
}

/* 🛍️ 3. BLACK FRIDAY VIBE STYLES */
.aml-isolated-scope .aml-vibe-black_friday {
    background: #030303 !important;
}

.aml-isolated-scope .aml-vibe-black_friday .aml-card-container {
    border: 2px solid #ff0055 !important;
    box-shadow: 0 0 60px rgba(255, 0, 85, 0.5) !important;
}

/* 🎈 🌙 ANIMATED DECORATIONS */
.aml-vibe-decorations .aml-decor {
    position: absolute !important;
    z-index: 2 !important;
    pointer-events: none !important;
    user-select: none !important;
}

.aml-vibe-decorations .balloon {
    font-size: 3.5rem !important;
    animation: floatUp 7s infinite ease-in-out !important;
}

.aml-vibe-decorations .b1 { left: 8%; bottom: -10%; animation-duration: 8s !important; }
.aml-vibe-decorations .b2 { left: 20%; bottom: -10%; animation-duration: 6s !important; animation-delay: 2s !important; }
.aml-vibe-decorations .b3 { right: 10%; bottom: -10%; animation-duration: 9s !important; animation-delay: 1s !important; }
.aml-vibe-decorations .b4 { right: 25%; bottom: -10%; animation-duration: 7s !important; animation-delay: 3s !important; }
.aml-vibe-decorations .b5 { left: 45%; bottom: -10%; animation-duration: 10s !important; }

@keyframes floatUp {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.2; }
    50% { opacity: 0.9; }
    100% { transform: translateY(-1000px) rotate(20deg); opacity: 0; }
}

.aml-vibe-decorations .lantern {
    font-size: 3rem !important;
    top: 5% !important;
    transform-origin: top center !important;
    animation: swingLantern 4s infinite alternate ease-in-out !important;
}

.aml-vibe-decorations .l1 { left: 10%; font-size: 4rem !important; }
.aml-vibe-decorations .l2 { left: 25%; animation-delay: -1s !important; }
.aml-vibe-decorations .l3 { right: 12%; font-size: 4rem !important; animation-delay: -2s !important; }
.aml-vibe-decorations .l4 { right: 28%; animation-delay: -0.5s !important; }
.aml-vibe-decorations .l5 { left: 48%; font-size: 2.5rem !important; }

@keyframes swingLantern {
    0% { transform: rotate(-12deg); }
    100% { transform: rotate(12deg); }
}

.aml-vibe-decorations .neon {
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    color: #ff0055 !important;
    text-shadow: 0 0 20px #ff0055, 0 0 40px #ff0055 !important;
    animation: neonBlink 1.5s infinite alternate !important;
}

.aml-vibe-decorations .n1 { top: 15%; left: 8%; transform: rotate(-15deg); }
.aml-vibe-decorations .n2 { bottom: 15%; right: 8%; transform: rotate(12deg); }

@keyframes neonBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Card Container */
.aml-isolated-scope .aml-card-container {
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 40px 30px !important;
    background: rgba(18, 21, 30, 0.92) !important;
    backdrop-filter: blur(25px) !important;
    border-radius: 24px !important;
    text-align: center !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Badge */
.aml-isolated-scope .aml-vibe-badge {
    display: inline-block !important;
    padding: 6px 18px !important;
    background: rgba(247, 208, 112, 0.12) !important;
    border: 1px solid rgba(247, 208, 112, 0.3) !important;
    border-radius: 30px !important;
    color: #f7d070 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

/* Headings */
.aml-isolated-scope .aml-campaign-title {
    font-size: 2rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.aml-isolated-scope .aml-campaign-subtitle {
    color: #9aa4bf !important;
    font-size: 1rem !important;
    margin: 0 0 25px 0 !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

/* Inputs */
.aml-isolated-scope .aml-registration-form .aml-field {
    margin-bottom: 16px !important;
}

.aml-isolated-scope .aml-input {
    width: 100% !important;
    height: 52px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    border: 1px solid #2a3147 !important;
    background: #0a0c12 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    outline: none !important;
    text-align: right !important;
}

.aml-isolated-scope .aml-input:focus {
    border-color: #a855f7 !important;
}

/* Submit Button */
.aml-isolated-scope .aml-submit-btn {
    width: 100% !important;
    height: 54px !important;
    border-radius: 12px !important;
    border: none !important;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4) !important;
    transition: transform 0.2s ease !important;
}

.aml-isolated-scope .aml-submit-btn:hover {
    transform: translateY(-2px) !important;
}

/* 🃏 SHUFFLING CARDS ANIMATION STAGE */
.aml-isolated-scope .aml-shuffling-title {
    color: #ffffff !important;
    font-size: 1.4rem !important;
    margin: 0 0 10px 0 !important;
}

.aml-isolated-scope .aml-cards-deck {
    position: relative !important;
    height: 140px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 20px 0 !important;
}

.aml-isolated-scope .aml-deck-card {
    position: absolute !important;
    width: 90px !important;
    height: 120px !important;
    background: #1e2433 !important;
    border: 2px solid #a855f7 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2.5rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
    animation: shuffleDeck 1.2s infinite ease-in-out alternate !important;
}

.aml-isolated-scope .c-back {
    transform: rotate(-15deg) translateX(-30px);
    animation-delay: 0.1s !important;
}

.aml-isolated-scope .c-mid {
    transform: rotate(0deg);
    animation-delay: 0.3s !important;
}

.aml-isolated-scope .c-front {
    transform: rotate(15deg) translateX(30px);
    animation-delay: 0.5s !important;
}

@keyframes shuffleDeck {
    0% { transform: translateY(0) rotate(0deg) scale(1); }
    50% { transform: translateY(-25px) rotate(15deg) scale(1.1); }
    100% { transform: translateY(0) rotate(-15deg) scale(1); }
}

/* POP-UP STYLES */
.aml-isolated-scope .aml-popup-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.88) !important;
    backdrop-filter: blur(10px) !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999999 !important;
    padding: 20px !important;
}

.aml-isolated-scope .aml-popup-card {
    max-width: 440px !important;
    width: 100% !important;
    background: #12151e !important;
    border: 1px solid #262b3d !important;
    border-radius: 24px !important;
    padding: 35px 25px !important;
    text-align: center !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8) !important;
}

.aml-isolated-scope .aml-success-icon {
    font-size: 3.5rem !important;
    margin-bottom: 15px !important;
}

.aml-isolated-scope .aml-success-msg {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    margin: 0 0 10px 0 !important;
}

.aml-isolated-scope .aml-popup-desc {
    color: #9aa4bf !important;
    font-size: 1rem !important;
    margin-bottom: 20px !important;
}

.aml-isolated-scope .aml-coupon-box {
    background: #0a0c12 !important;
    border: 2px dashed #f7d070 !important;
    padding: 16px !important;
    border-radius: 14px !important;
    margin: 20px 0 !important;
}

.aml-isolated-scope .aml-coupon-label {
    color: #8391b5 !important;
    font-size: 0.85rem !important;
    display: block !important;
    margin-bottom: 5px !important;
}

.aml-isolated-scope .aml-coupon-code {
    font-size: 2rem !important;
    font-weight: 900 !important;
    color: #f7d070 !important;
    letter-spacing: 3px !important;
}

.aml-isolated-scope .aml-wa-claim-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 54px !important;
    background: #25d366 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3) !important;
}