/* =====================================================
   DRIVER.JS — OXL MODAL
   ===================================================== */

/* overlay */

.driver-overlay {
    background: rgba(0, 0, 0, .55) !important;
}


/* =====================================================
   POPOVER
   ===================================================== */

.driver-popover {

    background: #fff !important;

    border-radius: 18px !important;

    padding: 20px !important;

    border: 1px solid rgba(0, 0, 0, .06);

    box-shadow: 0 14px 36px rgba(0, 0, 0, .18),
    0 4px 10px rgba(0, 0, 0, .08) !important;

    font-family: 'Inter', system-ui, -apple-system, sans-serif;

    max-width: 340px;
}


/* =====================================================
   TITRE
   ===================================================== */

.driver-popover-title {

    font-size: 16px !important;
    font-weight: 800 !important;

    color: #1a1a1a !important;

    margin-bottom: 6px !important;
}


/* =====================================================
   TEXTE
   ===================================================== */

.driver-popover-description {

    font-size: 14px !important;

    line-height: 1.5 !important;

    color: rgba(0, 0, 0, .65) !important;
}


/* =====================================================
   CROIX (simple)
   ===================================================== */

.driver-popover-close-btn {

    position: absolute;

    top: 12px;
    right: 14px;

    font-size: 20px !important;

    font-weight: 600;

    background: none !important;

    border: none !important;

    color: #333;

    cursor: pointer;
}


/* =====================================================
   FOOTER
   ===================================================== */

.driver-popover-footer {

    margin-top: 18px !important;

    display: flex !important;

    align-items: center;

    justify-content: space-between;
}


/* progress */

.driver-popover-progress-text {

    font-size: 12px !important;

    font-weight: 700;

    color: rgba(0, 0, 0, .45) !important;
}


/* =====================================================
   BOUTONS
   ===================================================== */

.driver-popover-navigation-btns {
    display: flex;
    gap: 8px;
}


/* bouton commun */
/* =====================================================
   DRIVER.JS BUTTON FIX
   ===================================================== */

.driver-popover-footer button.driver-popover-prev-btn,
.driver-popover-footer button.driver-popover-next-btn {

    /* reset visuel propre */
    text-shadow: none !important;
    filter: none !important;

    font-family: 'Inter', system-ui, -apple-system, sans-serif;

    font-size: 14px !important;
    font-weight: 600 !important;

    padding: 6px 14px !important;

    border-radius: 14px !important;

    border: none;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    letter-spacing: 0.1px;

    -webkit-font-smoothing: antialiased;
}


/* bouton retour */

.driver-popover-prev-btn {

    background: rgba(0, 0, 0, .06) !important;
    color: #1a1a1a !important;
}


/* bouton suivant */

.driver-popover-next-btn {

    background: linear-gradient(
            135deg,
            #0f3d2e,
            #1b6a4b
    ) !important;

    color: #fff !important;
}


/* interaction propre */

.driver-popover-footer button:active {
    transform: scale(.98);
}

/* =====================================================
   FLECHE
   ===================================================== */

.driver-popover-arrow-side-bottom {
    border-bottom-color: #fff !important;
}

.driver-popover-arrow-side-top {
    border-top-color: #fff !important;
}

.driver-popover-arrow-side-left {
    border-left-color: #fff !important;
}

.driver-popover-arrow-side-right {
    border-right-color: #fff !important;
}