.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); z-index: 2000; justify-content: center; align-items: center; backdrop-filter: blur(8px); animation: fadeIn 0.2s; }
.modal-box { background: white; width: 90%; max-width: 600px; padding: 35px; border-radius: 24px; box-shadow: var(--shadow-lg); text-align: center; position: relative; animation: popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.modal-close { position: absolute; top: 20px; right: 20px; font-size: 24px; cursor: pointer; color: #CBD5E1; transition: 0.2s; z-index: 100; }
.modal-close:hover { color: var(--dark); }
.modal-title { font-size: 24px; font-weight: 800; margin-bottom: 24px; color: var(--dark); }

.form-row { display: flex; gap: 15px; }
.input-group-auth { position: relative; margin-bottom: 16px; width: 100%; }
.modal-input { width: 100%; padding: 14px 16px; border: 2px solid #F1F5F9; border-radius: 12px; font-size: 14px; outline: none; transition: 0.3s; color: var(--dark); }
.modal-input:focus { border-color: var(--primary); background: white; }
.password-toggle { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #94A3B8; cursor: pointer; z-index: 10; font-size: 16px; }
.password-toggle:hover { color: var(--primary); }
.modal-btn { width: 100%; background: var(--primary); color: white; padding: 14px; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 10px; transition: 0.3s; }
.modal-btn:hover { background: var(--primary-dark); transform: translateY(-2px); }

#g_id_onload { display: none; }
.google-btn-wrapper { display: flex; justify-content: center; margin-bottom: 20px; width: 100%; }
.separator { display: flex; align-items: center; gap: 10px; margin: 20px 0; color: #94A3B8; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.separator::before, .separator::after { content: ""; flex: 1; height: 1px; background: #E2E8F0; }

.req-details { background: #F8FAFC; padding: 20px; border-radius: 16px; margin-bottom: 20px; border: 1px solid #E2E8F0; text-align: left; }
.req-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.req-label { color: var(--secondary); }
.req-val { font-weight: 700; color: var(--dark); }
.modal-actions { display: flex; gap: 15px; margin-top: 30px; }

.verify-input-group { margin-bottom: 25px; text-align: center; }
.verify-input { width: 80%; padding: 15px; font-size: 24px; text-align: center; letter-spacing: 8px; font-weight: 800; border: 2px solid #E2E8F0; border-radius: 16px; outline: none; transition: 0.3s; color: var(--dark); }
.verify-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1); }
.verify-input.error { border-color: var(--danger); animation: shake 0.3s ease-in-out; }
.verify-label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--secondary); font-size: 14px; }

.otp-display-container { background: linear-gradient(135deg, #10B981 0%, #059669 100%); color: white; padding: 20px; border-radius: 16px; text-align: center; margin: 20px 0; box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3); animation: popIn 0.5s ease; }
.otp-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; margin-bottom: 5px; }
.otp-code { font-size: 36px; font-weight: 800; letter-spacing: 5px; line-height: 1; }
.otp-info { font-size: 11px; margin-top: 5px; opacity: 0.8; }

.genuine-icon { width: 100px; height: 100px; background: #10B981; border-radius: 50%; color: white; font-size: 50px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.1); animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.genuine-title { color: #10B981; font-size: 24px; font-weight: 800; margin-bottom: 5px; }
.genuine-sub { color: #64748B; font-size: 14px; margin-bottom: 20px; }

@media screen and (max-width: 768px) {
    .modal-box { padding: 25px 20px; width: 95%; max-height: 85vh; overflow-y: auto; }
}
/* --- STAR RATING STYLES --- */
.star-rating { display: flex; justify-content: center; gap: 10px; margin: 20px 0; }
.star-rating i { font-size: 35px; color: #CBD5E1; cursor: pointer; transition: 0.2s; }
.star-rating i.active { color: #F59E0B; }
.star-rating i:hover { transform: scale(1.1); }
/* =========================================
   🟢 PUBLIC DRIVER PROFILE POPUP STYLES
========================================= */

/* Creates the premium blurred glass effect behind the popup */
#publicDriverProfileModal {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Safari support */
    background-color: rgba(15, 23, 42, 0.5); /* Semi-transparent dark slate */
}

/* Adds a smooth animation when the modal appears */
#publicDriverProfileModal .modal-box {
    animation: slideUpFade 0.3s ease-out forwards;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
}

@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 📱 MOBILE RESPONSIVE: Converts it to a modern "Bottom Sheet" */
@media screen and (max-width: 768px) {
    #publicDriverProfileModal {
        align-items: flex-end; /* Pushes the modal to the very bottom of the screen */
        padding: 0; 
    }
    
    #publicDriverProfileModal .modal-box {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 30px 30px 0 0; /* Rounds only the top corners */
        padding: 40px 25px 25px;
        padding-bottom: env(safe-area-inset-bottom, 25px); /* Respects iPhone home bar */
    }
    
    /* Adds a little pull-tab visual at the top of the bottom sheet */
    #publicDriverProfileModal .modal-box::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        background-color: #E2E8F0;
        border-radius: 10px;
    }
}