/* Transforma theming for the in-app product tour.
   Layout/behavior comes from the vendored driver.css (Driver.js, MIT
   licensed) -- this file only restyles Driver.js's own classes to match
   the app's look (Motiva Sans, terracotta accent, card radius/shadow used
   elsewhere in Settings/Profile/SuperAdmin). Nothing here is Blazor- or
   route-specific. */

.driver-overlay {
    background: rgba(31, 28, 26, 0.55);
}

.driver-popover {
    font-family: "Motiva Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #FFFFFF;
    color: #2A292C;
    border: 1px solid #ECE7E3;
    border-radius: 10px;
    padding: 20px;
    min-width: 280px;
    max-width: 340px;
    box-shadow: 0 12px 32px rgba(42, 41, 44, 0.18);
}

.driver-popover * {
    font-family: "Motiva Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.driver-popover-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: #2A292C;
}

.driver-popover-description {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: #5D5C62;
}

.driver-popover-close-btn {
    color: #949398;
    font-size: 16px;
}

.driver-popover-close-btn:hover,
.driver-popover-close-btn:focus {
    color: #2A292C;
}

.driver-popover-footer {
    margin-top: 18px;
}

.driver-popover-progress-text {
    font-size: 12px;
    font-weight: 500;
    color: #949398;
}

.driver-popover-footer button {
    font-family: "Motiva Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border: 1px solid #D8D5D1;
    border-radius: 6px;
    background-color: #FFFFFF;
    color: #5D5C62;
    text-shadow: none;
}

.driver-popover-footer button:hover,
.driver-popover-footer button:focus {
    background-color: #F6F3F1;
}

/* .driver-popover-footer button above is a class + an element selector,
   which is MORE specific than a bare .driver-popover-next-btn class alone
   -- meaning that generic gray/white rule was silently winning over this
   one the whole time (confirmed live: the Next button never actually
   turned orange, at rest or on hover). Scoping these to
   .driver-popover-footer too keeps the override unambiguous rather than
   relying on source order or !important. */
.driver-popover-footer .driver-popover-next-btn {
    background-color: #D46D3F;
    border-color: #D46D3F;
    color: #FFFFFF;
}

.driver-popover-footer .driver-popover-next-btn:hover,
.driver-popover-footer .driver-popover-next-btn:focus {
    background-color: #C26030;
    border-color: #C26030;
    color: #FFFFFF;
}