/* demo hint styling - unrelated to modal specificity */
        .demo-hint {
            text-align: center;
            padding: 30px;
            background: white;
            border-radius: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            max-width: 400px;
            margin: 20px;
        }
        .demo-hint i {
            font-size: 48px;
            color: #e84393;
            margin-bottom: 15px;
        }

        /* ============================================================ */
        /*  HIGHLY SPECIFIC MODAL STYLES - isolated via unique parent   */
        /*  All rules start with .exciting-modal or .exciting-modal .   */
        /*  to avoid leaking into other modals on the same page.        */
        /* ============================================================ */
        
        .exciting-modal .modal-content {
            border: none;
            border-radius: 60px;
            overflow: hidden;
            box-shadow: 0 40px 60px -20px rgba(0, 0, 0, 0.4);
            animation: modalFloatIn 0.5s cubic-bezier(0.21, 1.11, 0.35, 1.05);
            position: relative;
            /* Solid warm background - no gradient to keep it clean, just a subtle off-white */
            background: #fffaf3;
            transition: all 0.3s ease;
        }

        .exciting-modal .modal-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: radial-gradient(circle at 10% 20%, rgba(255, 107, 107, 0.05) 0%, transparent 40%),
                              radial-gradient(circle at 90% 70%, rgba(253, 203, 110, 0.08) 0%, transparent 50%);
            pointer-events: none;
            border-radius: 60px;
        }

        @keyframes modalFloatIn {
            0% {
                opacity: 0;
                transform: scale(0.85) translateY(40px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* decorative border (animated) */
        .exciting-modal .modal-content::after {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            background: linear-gradient(135deg, #f9ca24, #f0932b, #eb4d4b, #e84393, #f9ca24);
            border-radius: 63px;
            z-index: -2;
            opacity: 0.6;
            animation: borderPulse 2s infinite;
        }

        @keyframes borderPulse {
            0%, 100% { opacity: 0.4; transform: scale(0.98); }
            50% { opacity: 0.8; transform: scale(1); }
        }

        .exciting-modal .modal-header {
            border-bottom: none;
            padding: 25px 30px 0 30px;
            position: relative;
            z-index: 2;
        }

        .exciting-modal .celebration-badge {
            background: linear-gradient(135deg, #ff6b6b, #feca57, #ff9ff3);
            background-size: 200% auto;
            color: white;
            display: inline-block;
            padding: 10px 28px;
            border-radius: 60px;
            font-size: 0.9rem;
            font-weight: 800;
            margin-bottom: 10px;
            animation: gradientShift 3s ease infinite, pulse 1.8s infinite;
            box-shadow: 0 5px 20px rgba(255,107,107,0.3);
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.03); }
        }

        .exciting-modal .excited-title {
            font-size: 2.4rem;
            font-weight: 900;
            background: linear-gradient(135deg, #e84393, #fd79a8, #e17055, #fdcb6e);
            background-size: 300% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: rainbowText 4s linear infinite;
            margin-bottom: 15px;
            letter-spacing: -0.5px;
        }

        @keyframes rainbowText {
            0% { background-position: 0% 50%; }
            100% { background-position: 300% 50%; }
        }

        .exciting-modal .limited-seats {
            background: #ffeed9;  /* Solid warm tone instead of gradient */
            border-radius: 80px;
            padding: 12px 25px;
            display: inline-flex;
            align-items: center;
            gap: 15px;
            margin: 15px 0;
            font-weight: 800;
            color: #b33c1f;
            font-size: 1.2rem;
            box-shadow: 0 10px 25px rgba(253, 203, 110, 0.4);
            animation: shakeGlow 0.8s ease-in-out infinite alternate;
            border: 1px solid #ffce9e;
        }

        @keyframes shakeGlow {
            from {
                transform: translateX(0px);
                box-shadow: 0 5px 15px rgba(253, 203, 110, 0.4);
            }
            to {
                transform: translateX(6px);
                box-shadow: 0 15px 30px rgba(253, 203, 110, 0.7);
            }
        }

        .exciting-modal .seat-number {
            background: #d63031;
            color: white;
            border-radius: 60px;
            padding: 6px 18px;
            font-size: 1.3rem;
            font-weight: 900;
            animation: blinkRed 1s step-start infinite;
        }

        @keyframes blinkRed {
            0%, 100% { background-color: #d63031; }
            50% { background-color: #ff7675; }
        }

        .exciting-modal .number-one {
            background: #fad390; /* flat solid */
            color: #2d3436;
            border-radius: 50px;
            padding: 6px 20px;
            display: inline-block;
            font-weight: 900;
            font-size: 1rem;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .exciting-modal .btn-whatsapp-large {
            background: linear-gradient(135deg, #25D366, #075E54);
            border: none;
            border-radius: 70px;
            padding: 18px 22px;
            font-size: 1.2rem;
            font-weight: 800;
            color: white;
            transition: all 0.3s;
            box-shadow: 0 12px 25px rgba(37, 211, 102, 0.4);
        }

        .exciting-modal .btn-whatsapp-large:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 20px 35px rgba(37, 211, 102, 0.6);
            background: linear-gradient(135deg, #20b859, #064e44);
        }

        .exciting-modal .btn-phone-large {
            background: linear-gradient(135deg, #0984e3, #1e90ff, #74b9ff);
            background-size: 200% auto;
            border: none;
            border-radius: 70px;
            padding: 18px 22px;
            font-size: 1.2rem;
            font-weight: 800;
            color: white;
            transition: all 0.3s;
            box-shadow: 0 12px 25px rgba(9, 132, 227, 0.4);
        }

        .exciting-modal .btn-phone-large:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 20px 35px rgba(9, 132, 227, 0.6);
        }

        .exciting-modal .btn-secondary-outline {
            background: transparent;
            border: 2px solid #e84393;
            border-radius: 70px;
            padding: 12px 28px;
            color: #e84393;
            font-weight: 800;
            transition: all 0.3s;
        }

        .exciting-modal .btn-secondary-outline:hover {
            background: #e84393;
            color: white;
            border-color: #e84393;
            transform: scale(1.02);
        }

        .exciting-modal .btn-graduation {
            background: linear-gradient(135deg, #6c5ce7, #a29bfe);
            border: none;
            border-radius: 70px;
            padding: 14px 25px;
            font-size: 1rem;
            font-weight: 800;
            color: white;
            transition: all 0.3s;
            box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
            margin-top: 10px;
        }

        .exciting-modal .btn-graduation:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(108, 92, 231, 0.6);
        }

        /* Confetti canvas specific to this modal */
        .exciting-modal .confetti-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 15;
            overflow: hidden;
            border-radius: 60px;
        }

        .exciting-modal .confetti-piece {
            position: absolute;
            width: 12px;
            height: 24px;
            background: #feca57;
            opacity: 0.8;
            animation: fallRotate 4s linear forwards;
        }

        @keyframes fallRotate {
            0% { transform: translateY(-50px) rotate(0deg); opacity: 1; }
            100% { transform: translateY(600px) rotate(720deg); opacity: 0; }
        }

        .exciting-modal .star-rating i {
            text-shadow: 0 0 8px gold;
            animation: starTwinkle 1.2s infinite alternate;
        }

        @keyframes starTwinkle {
            from { text-shadow: 0 0 2px gold; }
            to { text-shadow: 0 0 12px #ff9f43; }
        }

        .exciting-modal .btn-close-custom {
            background: #ff6b6b;
            color: white;
            border-radius: 50%;
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
            position: relative;
            z-index: 20;
        }

        .exciting-modal .btn-close-custom:hover {
            transform: rotate(90deg) scale(1.1);
            background: #d63031;
        }

        /* backdrop blur only for our modal backdrop - it will apply to all but no conflict */
        .modal-backdrop.show {
            backdrop-filter: blur(8px);
            background: rgba(0, 0, 0, 0.6);
        }

        /* phone card */
        .exciting-modal .phone-card {
            background: #ffffff;
            border-radius: 50px;
            padding: 12px 20px;
            margin: 15px auto 5px;
            display: inline-flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            border: 1px solid rgba(232, 67, 147, 0.2);
            direction: ltr;
        }
        .exciting-modal .phone-card i {
            font-size: 1.8rem;
            color: #25D366;
        }
        .exciting-modal .phone-number-large {
            font-size: 1.6rem;
            font-weight: 800;
            color: #2d3436;
            letter-spacing: 1px;
            direction: ltr;
            display: inline-block;
        }
        .exciting-modal .phone-number-large a {
            text-decoration: none;
            color: #2d3436;
            transition: all 0.2s;
        }
        .exciting-modal .phone-number-large a:hover {
            color: #e84393;
        }
        .exciting-modal .phone-label {
            font-size: 0.8rem;
            color: #e84393;
            font-weight: bold;
        }

        /* image overlay view for graduation */
        .exciting-modal .image-overlay-view {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fffaf3;  /* solid background */
            z-index: 50;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px;
            border-radius: 60px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .exciting-modal .image-overlay-view.active {
            opacity: 1;
            visibility: visible;
        }

        .exciting-modal .graduation-image-container {
            max-width: 90%;
            max-height: 70%;
            text-align: center;
            animation: zoomInImage 0.5s ease-out;
        }

        @keyframes zoomInImage {
            from {
                transform: scale(0.8);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .exciting-modal .graduation-image-container img {
            max-width: 100%;
            max-height: 65vh;
            border-radius: 40px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
            border: 4px solid white;
        }

        .exciting-modal .close-image-btn {
            background: linear-gradient(135deg, #e84393, #fd79a8);
            border: none;
            border-radius: 60px;
            padding: 12px 35px;
            color: white;
            font-weight: bold;
            font-size: 1.1rem;
            margin-top: 25px;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(232, 67, 147, 0.4);
        }

        .exciting-modal .close-image-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 25px rgba(232, 67, 147, 0.6);
        }

        .exciting-modal .image-caption {
            margin-top: 15px;
            color: #e84393;
            font-weight: bold;
            font-size: 1rem;
        }

        /* Responsive adjustments */
        @media (max-width: 576px) {
            .exciting-modal .excited-title {
                font-size: 1.6rem;
            }
            .exciting-modal .limited-seats {
                font-size: 0.9rem;
                padding: 8px 15px;
                gap: 8px;
            }
            .exciting-modal .seat-number {
                font-size: 1rem;
                padding: 3px 12px;
            }
            .exciting-modal .btn-whatsapp-large, 
            .exciting-modal .btn-phone-large {
                font-size: 0.9rem;
                padding: 14px 15px;
            }
            .exciting-modal .btn-graduation {
                font-size: 0.85rem;
                padding: 10px 18px;
            }
            .exciting-modal .phone-number-large {
                font-size: 1.1rem;
            }
            .exciting-modal .phone-card {
                padding: 8px 15px;
                gap: 8px;
            }
        }

        .exciting-modal .modal-body {
            position: relative;
            z-index: 5;
            padding: 20px 30px 30px 30px;
            transition: all 0.3s;
        }
        
        /* NEW: Flat cards for features (no gradients) */
        .exciting-modal .feature-card-solid {
            background: #fff2e0;     /* solid light peach */
            border-radius: 1rem;
            padding: 10px 6px;
            transition: all 0.2s;
            border: 1px solid #ffe0b5;
        }
        .exciting-modal .feature-card-solid-gray {
            background: #f1f2f6;   /* solid grayish */
            border-radius: 1rem;
            padding: 10px 6px;
            border: 1px solid #e2e4e8;
        }
        .exciting-modal .alert-solid-warning {
            background: #fff3cd !important;   /* solid warning tone */
            border-radius: 2rem;
            padding: 8px 18px;
            font-weight: 500;
            color: #856404;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .exciting-modal .alert-solid-warning i {
            font-size: 1rem;
        }
        
        /* additional spacing */
        .exciting-modal .row-custom {
            margin-top: 1rem;
            margin-bottom: 0.5rem;
        }
        
        /* fix for footer buttons */
        .exciting-modal .modal-footer {
            border-top: none;
            background: transparent;
            position: relative;
            z-index: 5;
            flex-wrap: wrap;
        }

/***********************/

/* ===== MODAL READABILITY FIXES - WORKS ANYWHERE ===== */
/* Force high contrast on all modal text and backgrounds */

.exciting-modal .modal-content {
    background: #fff8f0 !important;
}

.exciting-modal .modal-body {
    color: #1a1a2e !important;
}

/* Make ALL cards and boxes solid with dark text */
.exciting-modal .feature-card-solid,
.exciting-modal .feature-card-solid-gray,
.exciting-modal .bg-white,
.exciting-modal [class*="rounded-4"] {
    background: #ffffff !important;
    color: #1a1a2e !important;
}

.exciting-modal .feature-card-solid i,
.exciting-modal .feature-card-solid-gray i {
    color: #e84393 !important;
}

.exciting-modal .feature-card-solid .fw-bold,
.exciting-modal .feature-card-solid-gray .fw-bold {
    color: #1a1a2e !important;
    font-weight: 800 !important;
}

.exciting-modal .feature-card-solid small,
.exciting-modal .feature-card-solid-gray small {
    color: #2d3436 !important;
    font-weight: 600 !important;
}

/* Fix "رعاية كاملة" and other small text in feature boxes */
.exciting-modal .row [class*="col-"] .p-2 {
    background: #ffffff !important;
    color: #1a1a2e !important;
    border: 1px solid #f0c4a0 !important;
}

.exciting-modal .row [class*="col-"] .p-2 small {
    color: #2d3436 !important;
    font-weight: 600 !important;
}

.exciting-modal .row [class*="col-"] .p-2 i {
    color: #e84393 !important;
}

/* Alert box - dark text on light background */
.exciting-modal .alert-solid-warning {
    background: #fee3b8 !important;
    color: #7b2c00 !important;
    font-weight: 700 !important;
}

.exciting-modal .alert-solid-warning span,
.exciting-modal .alert-solid-warning i {
    color: #7b2c00 !important;
}

/* Phone card - readable */
.exciting-modal .phone-card {
    background: #ffffff !important;
    border: 2px solid #e84393 !important;
}

.exciting-modal .phone-number-large a {
    color: #1a1a2e !important;
    font-weight: 900 !important;
}

/* Limited seats box */
.exciting-modal .limited-seats {
    background: #ffefd0 !important;
    color: #b33c1f !important;
    border: 1px solid #e6a567 !important;
}

/* Star rating text */
.exciting-modal .star-rating span {
    color: #2d3436 !important;
    font-weight: 600 !important;
}

/* All general text */
.exciting-modal p,
.exciting-modal small:not([class*="text-"]),
.exciting-modal div:not([class*="bg-"]) {
    color: #1a1a2e !important;
}

.exciting-modal .seat-number {
    background: #d63031;
    color: white !important;
    border-radius: 60px;
    padding: 6px 18px;
    font-size: 1.3rem;
    font-weight: 900;
    animation: blinkRed 1s step-start infinite;
}

.exciting-modal .seat-number i {
    color: white !important;
}

/* Force white text on seat counter - highest priority */
.exciting-modal .seat-number,
.exciting-modal .seat-number *,
#registrationModal .seat-number,
.modal .seat-number {
    color: white !important;
}

.exciting-modal .seat-number i,
#registrationModal .seat-number i {
    color: white !important;
}

.exciting-modal .seat-number span,
#registrationModal .seat-number span {
    color: white !important;
}