/* --- AUTH MODAL ARCHITECTURE (ISOLATED) --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); 
    backdrop-filter: blur(10px);
    display: none; /* Controlled via .active class */
    align-items: center;    
    justify-content: center; 
    z-index: 9999;
}

.modal-overlay.active {
    display: flex;
}

.modal-card {
    background: #ffffff;
    width: 380px; 
    padding: 25px; /* Changed from 35px */
    border-radius: 25px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    text-align: center;
    box-sizing: border-box; 
    transition: width 0.4s ease-in-out;
}

/* Notification Popup Style (For Error Handling) */
.auth-alert {
    background: #fff0f0;
    color: #d8000c;
    border: 1px solid #ffbaba;
    border-left: 5px solid #d8000c;
    padding: 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    display: none;
    /* Added animation for smoother feel */
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 20px;
    color: #ccc;
    cursor: pointer;
}

.user-icon-circle {
    width: 50px;  /* Changed from 60px */
    height: 50px; /* Changed from 60px */
    background: linear-gradient(135deg, #fceabb 0%, #fccd4d 50%, #f8b500 100%);
    border-radius: 50%;
    margin: 0 auto 10px; /* Changed bottom margin from 15px to 10px */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px; /* Changed from 22px */
}

.input-group {
    text-align: left;
    margin-bottom: 12px; /* Changed from 18px */
    width: 100%; 
}

.input-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%; 
}

.input-wrapper i:first-child {
    position: absolute;
    left: 12px;
    color: #999;
    font-size: 14px;
    pointer-events: none; 
}

.toggle-password {
    position: absolute;
    right: 12px; 
    color: #999;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
}

.input-wrapper input {
    width: 100%; 
    height: 38px; /* Changed from 42px */
    padding: 0 40px; 
    border: 1px solid #ffd700; 
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box; 
}

.btn-signin-gold {
    width: 100%;
    height: 42px; /* Changed from 48px */
    background: linear-gradient(to bottom, #f7d06a, #eebc1d);
    border: 1px solid #d4af37;
    border-radius: 12px;
    color: #333;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    margin-top: 5px; /* Changed from 10px */
    box-shadow: 0 4px 10px rgba(238, 188, 29, 0.2);
    box-sizing: border-box;
}

.modal-footer {
    margin-top: 15px; /* Changed from 25px */
    font-size: 13px;
    color: #666;
    text-align: center; /* Forces the text to the middle */
    width: 100%;        /* Ensures it spans the whole card */
}

.modal-footer a {
    color: #d48806;
    font-weight: 700;
    text-decoration: none;
}
/* --- TWO-COLUMN GRID FOR REGISTRATION --- */
.form-row {
    display: flex;
    gap: 15px;
    width: 100%;
}

.form-row .input-group {
    flex: 1;
}

/* Responsive adjustment: Stack columns on small screens */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    .modal-card {
        width: 95% !important;
        padding: 20px;
    }
}

/* Ensure modal width accommodates the new layout */
.modal-card {
    width: 550px !important; 
    max-width: 95vw;
    transition: width 0.4s ease-in-out;
}
.btn-signin-gold.btn-disabled {
    background: #cccccc !important;
    border-color: #999999 !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* If the screen/iframe is shorter than 600px, shrink the modal proportionally */
@media (max-height: 600px) {
    .modal-card {
        transform: scale(0.85); /* Shrinks the entire card by 15% */
        transform-origin: center center; /* Keeps it perfectly centered */
    }
}

/* If the iframe is extremely short (like 500px), shrink it even more */
@media (max-height: 500px) {
    .modal-card {
        transform: scale(0.75); /* Shrinks the entire card by 25% */
    }
}

/* --- TOOLTIP & INFO ICON STYLES --- */
.info-icon {
    position: relative; /* Changed from absolute so it flows with text */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d48806;
    font-size: 14px;
    cursor: help;
    z-index: 50; /* Boosted z-index */
    margin-left: 5px; /* Adds space between the title and the icon */
}

.tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: rgba(0, 0, 0, 0.95);
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 10px;
    position: absolute;
    z-index: 1000; /* Ensures it pops over everything else */
    bottom: 150%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%); /* Perfectly centers it */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 11px;
    line-height: 1.5;
    pointer-events: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border: 1px solid #d48806;
    white-space: normal;
}

/* Tooltip Arrow */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #d48806 transparent transparent transparent;
}

.info-icon:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}