/* ============================================================
   VSTT Location Route — Directions Box Styles
   Fully isolated — only affects .visitapp-dirbox
============================================================ */

.visitapp-dirbox {
    --va-accent: var(--wdt-color-primary, var(--awb-color5, #2563eb));
    --va-accent-hover: var(--wdt-color-primary-hover, var(--awb-color5, #1d4ed8));
    --va-ink: #111827;
    --va-muted: #4b5563;
    --va-border: #e5e7eb;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;

    width: 100% !important;
    padding: 16px 20px !important;
    border: 1px solid var(--va-border) !important;
    border-radius: 12px !important;
    background: #ffffff !important;

    font-family: inherit !important;
    font-size: 15px !important;
    color: var(--va-ink) !important;

    gap: 14px !important;
    box-sizing: border-box !important;
}

.visitapp-dirbox * {
    box-sizing: border-box !important;
}

/* --- Title + Meta --- */
.visitapp-dirbox__titlemeta {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.visitapp-dirbox__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--va-ink) !important;
}

.visitapp-dirbox__meta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: var(--va-muted) !important;
}

.visitapp-dirbox__meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.visitapp-dirbox__sep {
    opacity: .5 !important;
}

/* --- Button --- */
.visitapp-dirbox__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;
    padding: 8px 12px !important;
    background: var(--va-accent) !important;
    color: #fff !important;

    border-radius: 8px !important;
    text-decoration: none !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;

    transition: background .2s, transform .2s !important;
}

.visitapp-dirbox__btn:hover {
    background: var(--va-accent-hover) !important;
    transform: translateY(-1px) !important;
}

.visitapp-dirbox__btn:focus-visible {
    outline: 2px solid var(--va-accent) !important;
    outline-offset: 2px !important;
}

.visitapp-dirbox__input:focus-visible {
    outline: 2px solid var(--va-accent) !important;
    outline-offset: 2px !important;
}

.visitapp-dirbox__btn::after {
    content: "\2197";
    margin-left: 6px;
    font-size: 14px;
}

/* Button is always functional — links to Google Maps destination-only as baseline. */

/* --- Manual Location Input --- */
.visitapp-dirbox__fallback {
    width: 100% !important;
    margin-top: 10px !important;

    padding-top: 12px !important;
    border-top: 1px dashed var(--va-border) !important;
}

.visitapp-dirbox__fallback-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--va-muted) !important;
    margin-bottom: 6px !important;
}

.visitapp-dirbox__row {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.visitapp-dirbox__input {
    flex: 1 1 260px !important;
    border: 1px solid var(--va-border) !important;
    border-radius: 8px !important;

    padding: 10px 12px !important;
    min-height: 44px !important;

    background: #fafafa !important;
    font-size: 14px !important;
}

/* --- Screen Reader Only --- */
.visitapp-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Mobile --- */
@media (max-width: 640px) {
    .visitapp-dirbox {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    .visitapp-dirbox__title {
        font-size: 14px !important;
    }

    .visitapp-dirbox__meta {
        font-size: 13px !important;
    }

    .visitapp-dirbox__btn {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
}