/* Welcome popup + guided-tour spotlight. Built by assets/js/modules/dd-onboarding.js.
   Visually matches the existing .inf-modal-* framework (style.css) without depending on its
   ID-scoped selectors, since this modal lives outside #inf-modal-overlay. */

.dd-ob-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.dd-ob-overlay * {
    box-sizing: border-box;
}

.dd-ob-box {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fdfdfd;
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    font-family: inherit;
}

/* !important throughout: Elementor's global Kit CSS styles bare <button> elements
   site-wide (background/border/padding/min-height), which otherwise overrides this —
   .dd-ob-close needs to win regardless of what page/kit it's injected into. */
button.dd-ob-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 28px !important;
    height: 28px !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    padding: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: #8c8f94 !important;
}

button.dd-ob-close svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

button.dd-ob-close:hover,
button.dd-ob-close:focus {
    background: #f1f1f1 !important;
    color: #333 !important;
    outline: none !important;
}

.dd-ob-title.dd-ob-title {
    margin: 0 0 10px;
    font-size: 3rem;
    font-weight: 600;
    color: #1a1a1a;
}

.dd-ob-body {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.55;
    color: #4b4b4b;
}

.dd-ob-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* !important on background/border/padding/width: Elementor's active Kit (post-16.css) styles
   every bare <button>, input[type=button|submit], and .elementor-button site-wide —
   `.elementor-kit-{id} button { background-color: var(--e-global-color-primary);
   border: 1px solid var(--e-global-color-accent); border-radius: 5px; padding: 23px 30px; }`,
   plus a :hover/:focus variant swapping background/border to a different global color — via a
   class+element selector. `.dd-ob-btn-secondary` and the tour tooltip's Skip/Back/Next/Done are
   real <button> elements (the popup's primary CTA is an <a>, which the kit selector doesn't
   touch), so every property the kit rule sets must be forced here, on both states, exactly like
   .dd-ob-close above. */
.dd-ob-btn.dd-ob-btn.dd-ob-btn {
    display: block;
    width: 100% !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none !important;
    box-sizing: border-box;
    font-family: "Work Sans", sans-serif !important;
}

.dd-ob-btn-primary {
    background: var(--e-global-color-primary, #034146) !important;
    color: #fff !important;
}

.dd-ob-btn-primary:hover,
.dd-ob-btn-primary:focus {
    background: var(--e-global-color-primary, #034146) !important;
    color: #fff !important;
    opacity: 0.9;
}

.dd-ob-btn-secondary.dd-ob-btn-secondary.dd-ob-btn-secondary {
    background: transparent !important;
    color: #4b4b4b !important;
    border: 1px solid #e2e2e2 !important;
}

.dd-ob-btn-secondary.dd-ob-btn-secondary.dd-ob-btn-secondary:hover,
.dd-ob-btn-secondary.dd-ob-btn-secondary.dd-ob-btn-secondary:focus {
    background: #f3f3f3 !important;
    border-color: #e2e2e2 !important;
}

@media (max-width: 767px) {
    .dd-ob-title.dd-ob-title {
        font-size: 2rem !important;
    }
}
@media (max-width: 575px) {
    .dd-ob-title.dd-ob-title {
        font-size: 1.5rem !important;
    }
}

/* Guided tour ------------------------------------------------------------- */

.dd-ob-spotlight {
    position: fixed;
    z-index: 100000;
    border-radius: 6px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    transition:
        top 0.25s ease,
        left 0.25s ease,
        width 0.25s ease,
        height 0.25s ease;
}

.dd-ob-tooltip {
    position: fixed;
    z-index: 100001;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: #fdfdfd;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    padding: 18px 20px;
    font-family: inherit;
    box-sizing: border-box;
}

.dd-ob-tooltip__step {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgb(102, 112, 133);
}

.dd-ob-tooltip__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.dd-ob-tooltip__body {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #4b4b4b;
}

.dd-ob-tooltip__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dd-ob-tooltip__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Skip/Back are real <button>s too — same Elementor Kit interference as .dd-ob-btn above (see
   that comment), so background/border/padding need the same !important guard here. */
.dd-ob-link-btn {
    background: transparent !important;
    border: none !important;
    padding: 6px 4px !important;
    border-radius: 0 !important;
    font-size: 13px;
    font-family: "Work Sans", sans-serif !important;
    color: #6b7280;
    cursor: pointer;
}

.dd-ob-link-btn:hover,
.dd-ob-link-btn:focus {
    background: transparent !important;
    border: none !important;
    color: #1a1a1a;
}

/* Also !important: without it this loses on specificity to .dd-ob-btn.dd-ob-btn.dd-ob-btn's own
   width/padding (three classes beats one-descendant-plus-one-class), so the Next/Done button
   would render full-width at the popup's larger padding instead of sized for the tooltip. */
.dd-ob-tooltip .dd-ob-btn {
    width: auto !important;
    padding: 8px 16px !important;
}

.dd-start-tour {
    cursor: pointer;
}

@media (max-width: 480px) {
    .dd-ob-box {
        padding: 22px 20px;
    }
    .dd-ob-title {
        font-size: 17px;
    }
}

/* Start Guided Tour button — [onboarding_tour_button] shortcode / Widget_Onboarding_Tour_Button
   (modules/frontend-utilities/elementor-widgets/class-widget-onboarding-tour-button.php). This
   is the default look before any Style-tab override: the widget's controls target
   {{WRAPPER}} .dd-onboarding-tour-btn, which is strictly higher specificity than the bare class
   below, so admin styling always wins with no !important needed — unlike .dd-ob-close above,
   which has to fight Elementor's global bare-<button> kit rules; this is an <a> with its own
   class, so that problem doesn't arise here. */

.dd-onboarding-tour-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--e-global-color-primary, #034146);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: "Work Sans", sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
}

.dd-onboarding-tour-btn:hover,
.dd-onboarding-tour-btn:focus {
    opacity: 0.9;
    color: #fff;
}

.dd-onboarding-tour-btn__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.dd-onboarding-tour-btn__label {
    line-height: 1;
}