/* Rakhi Popup Styles - custom-popup.css */

/* --- Main Popup Styles --- */
#rakhi-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75); display: flex; justify-content: center;
    align-items: center; z-index: 99999; opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#rakhi-popup-overlay.active { opacity: 1; visibility: visible; }
#rakhi-popup-content {
    background: linear-gradient(135deg, #fff0f5, #ffe4e1);
    padding: 30px 40px; border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 2px solid #d63384; position: relative; max-width: 550px;
    width: 90%; text-align: center; transform: scale(0.9);
    transition: transform 0.4s ease;
}
#rakhi-popup-overlay.active #rakhi-popup-content { transform: scale(1); }
.close-popup {
    position: absolute; top: 10px; right: 15px; font-size: 30px;
    cursor: pointer; color: #aaa; line-height: 1;
    transition: color 0.3s, transform 0.3s;
}
.close-popup:hover { color: #d63384; transform: rotate(90deg); }
#rakhi-popup-content h2 {
    margin-top: 0; color: #c72c7a;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2.2em; margin-bottom: 10px;
}
#rakhi-popup-content p {
    color: #555; font-size: 1.1em;
    line-height: 1.6; margin-bottom: 20px;
}

/* --- Instruction Text Styling --- */
#rakhi-instructions {
    min-height: 24px;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: bold;
    color: #d63384;
    transition: opacity 0.3s ease;
}

/* --- Aspect Ratio Container --- */
#rakhi-game-container {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

#rakhi-game-container img {
    position: absolute;
    user-select: none;
    -webkit-user-drag: none;
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: auto;
    transform: translate(-50%, -50%);
}

/* --- Initial Positions --- */
#draggable-rakhi { width: 55%; top: 50%; left: 50%; cursor: pointer; z-index: 3; }
#main-hand { width: 75%; top: -50%; left: 150%; z-index: 1; opacity: 0; }
#left-hand { width: 85%; top: 150%; left: -50%; z-index: 2; opacity: 0; }
#right-hand { width: 40%; top: 150%; left: 150%; z-index: 2; opacity: 0; }

/* --- Animated Entry --- */
#rakhi-game-container.hands-active #main-hand { top: 23%; left: 88%; opacity: 1; }
#rakhi-game-container.hands-active #draggable-rakhi { top: 68%; left: 45%; cursor: grab; }
#rakhi-game-container.hands-active #left-hand { top: 75%; left: -18%; opacity: 1; }
#rakhi-game-container.hands-active #right-hand { top: 111%; left: 64%; opacity: 1; }

/* --- NEW: Countdown Timer Styling --- */
#rakhi-timer {
    margin-top: 20px;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    font-size: 0.95em;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
#rakhi-timer strong {
    color: #c72c7a;
}

/* --- Celebration + Form --- */
#rakhi-celebration-area, #rakhi-email-form { padding: 0 15px; }
#rakhi-celebration-area { font-size: 24px; font-weight: bold; color: #28a745; }
#rakhi-email-form h2 { font-size: 22px; margin-bottom: 10px; color: #c72c7a; }
#rakhi-email-form p { margin-top: 0; margin-bottom: 15px; }
#rakhi-email-form input[type="email"] { width: 80%; max-width: 300px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; }
#rakhi-email-form button { background-color: #d63384; color: white; border: none; padding: 12px 25px; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold; }
#rakhi-email-form button:hover { background-color: #b32a6d; }
#rakhi-email-form button:disabled { background-color: #ccc; cursor: not-allowed; }
.disclaimer { font-size: 12px; color: #888; margin-top: 15px; font-style: italic; }

.disclaimer strong {
    color: #c72c7a;
    font-weight: 900;
}

/* Media query for minor font adjustments */
@media (max-width: 400px) {
    #rakhi-popup-content { padding: 20px 15px; }
    #rakhi-popup-content h2 { font-size: 1.8em; }
}