/* =========================================================
   Bus Trip Planner — Stylesheet  (mobile-first)
   ========================================================= */

.btp-wrap *,
.btp-wrap *::before,
.btp-wrap *::after { box-sizing: border-box; }

.btp-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: #202124;
    max-width: 820px;
    margin: 0 auto;
    /* Tighter side padding on small screens; widened on desktop */
    padding: 16px 12px 32px;
}

.btp-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: #1a73e8;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Form card ── */
.btp-form {
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 12px;
    padding: 16px;          /* tighter on mobile */
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ── Field group: always stacked on mobile ── */
.btp-field-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    margin-bottom: 14px;
}

.btp-field { display: flex; flex-direction: column; gap: 6px; }

.btp-label {
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .4px;
    color: #5f6368;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btp-input-wrap { position: relative; display: flex; align-items: center; }

/* ── Inputs: tall enough for comfortable touch ── */
.btp-input {
    width: 100%;
    height: 52px;           /* slightly taller for thumb tap */
    padding: 0 44px 0 14px;
    border: 1.5px solid #dadce0;
    border-radius: 8px;
    font-size: 1rem;
    color: #202124;
    background: #f8f9fa;
    transition: border-color .2s, box-shadow .2s, background .2s;
    outline: none;
    /* Prevent iOS zoom on focus (requires font-size >= 16px) */
    font-size: 16px;
}
.btp-input:focus { border-color: #1a73e8; background: #fff; box-shadow: 0 0 0 3px rgba(26,115,232,.15); }
.btp-input::placeholder { color: #9aa0a6; }

/* ── Autocomplete dropdown ── */
.pac-container { border-radius: 8px !important; box-shadow: 0 4px 16px rgba(0,0,0,.15) !important; border: none !important; font-family: inherit !important; margin-top: 4px; z-index: 99999 !important; }
/* Larger tap targets in the suggestion list */
.pac-item { padding: 12px 14px !important; font-size: 1rem !important; cursor: pointer; }
.pac-item:hover, .pac-item-selected { background: #f1f3f4 !important; }

/* ── Clear button: bigger tap zone on mobile ── */
.btp-clear-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #9aa0a6;
    font-size: 1rem;
    /* Minimum 44×44 touch target */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.btp-clear-btn:hover { color: #202124; background: #f1f3f4; }

/* ── Swap button: centred between the two fields on mobile ── */
.btp-swap-btn {
    align-self: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #dadce0;
    background: #fff;
    cursor: pointer;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s, transform .2s;
    color: #5f6368;
    -webkit-tap-highlight-color: transparent;
    /* Rotate icon to horizontal ⇄ on mobile since fields are stacked */
    transform: rotate(90deg);
}
.btp-swap-btn:hover { background: #e8f0fe; border-color: #1a73e8; color: #1a73e8; }
.btp-swap-btn:active { transform: rotate(270deg); }

/* ── Departure row: stack label + input on very small screens ── */
.btp-options-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.btp-options-label { font-weight: 600; font-size: .82rem; color: #5f6368; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.btp-datetime {
    flex: 1;
    min-width: 0;
    padding: 10px 10px;
    border: 1.5px solid #dadce0;
    border-radius: 6px;
    font-size: 16px;        /* prevent iOS zoom */
    outline: none;
    transition: border-color .2s;
}
.btp-datetime:focus { border-color: #1a73e8; }
.btp-options-note { color: #9aa0a6; font-size: .8rem; width: 100%; margin-top: -4px; }

.btp-number {
    flex: 1;
    min-width: 0;
    padding: 10px 10px;
    border: 1.5px solid #dadce0;
    border-radius: 6px;
    font-size: 16px;        /* prevent iOS zoom */
    outline: none;
    transition: border-color .2s;
}
.btp-number:focus { border-color: #1a73e8; }

/* ── Route alternatives list ── */
.btp-route-options { margin: 4px 0 16px; }
.btp-route-options-label {
    font-weight: 600;
    font-size: .82rem;
    color: #5f6368;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 8px;
}
.btp-route-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.btp-route-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border: 1.5px solid #dadce0;
    border-radius: 8px;
    font-size: .92rem;
    color: #202124;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s;
}
.btp-route-option:hover { border-color: #1a73e8; background: #f8faff; }
.btp-route-option.is-active {
    border-color: #1a73e8;
    background: #e8f0fe;
    font-weight: 600;
}
.btp-route-option-time { font-weight: 600; }
.btp-route-option-arrive { color: #5f6368; font-size: .85rem; }
.btp-route-option.is-active .btp-route-option-arrive { color: #1a73e8; }

.btp-route-option-buses { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.btp-route-option-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
.btp-route-option-badge--walk { background: #f1f3f4; color: #5f6368; font-weight: 600; }
.btp-route-option-arrow { color: #9aa0a6; font-size: .8rem; }

/* ── Buttons: full-width & tall for easy tapping ── */
.btp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 52px;           /* generous tap target */
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .2s, box-shadow .2s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.btp-btn:active { transform: scale(.97); }
.btp-btn--primary { background: #1a73e8; color: #fff; width: 100%; justify-content: center; font-size: 1.05rem; }
.btp-btn--primary:hover { background: #1557b0; box-shadow: 0 2px 8px rgba(26,115,232,.35); }
.btp-btn--secondary { background: #f1f3f4; color: #202124; border: 1.5px solid #dadce0; margin-top: 14px; width: 100%; justify-content: center; }
.btp-btn--secondary:hover { background: #e8eaed; }

/* ── Loading state ── */
.btp-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 0; color: #5f6368; }
.btp-spinner { width: 44px; height: 44px; border: 4px solid #e8eaed; border-top-color: #1a73e8; border-radius: 50%; animation: btp-spin .75s linear infinite; }
@keyframes btp-spin { to { transform: rotate(360deg); } }

/* ── Error banner ── */
.btp-error { background: #fce8e6; color: #c5221f; border: 1px solid #f5c6c4; border-radius: 8px; padding: 14px 16px; margin-top: 16px; font-weight: 500; font-size: .95rem; }

/* ── Results section ── */
.btp-results { margin-top: 24px; }

.btp-results-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.btp-results-title { font-size: 1.15rem; font-weight: 700; margin: 0; color: #202124; }
.btp-results-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: #5f6368; font-size: .88rem; }
.btp-meta-item { white-space: nowrap; }
.btp-meta-sep { color: #dadce0; }

/* ── Map: shorter on mobile to leave room for directions ── */
.btp-map {
    width: 100%;
    height: 220px;
    border-radius: 12px;
    border: 1px solid #dadce0;
    overflow: hidden;
    margin-bottom: 18px;
}

/* ── Direction steps ── */
.btp-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }

.btp-step {
    display: flex;
    gap: 12px;
    padding: 14px 14px;
    background: #fff;
    position: relative;
    transition: background .15s;
    border: 1px solid #f1f3f4;
    border-left: 3px solid #e8eaed;
}
.btp-step + .btp-step { border-top: none; }
.btp-step:first-child { border-radius: 12px 12px 0 0; }
.btp-step:last-child { border-radius: 0 0 12px 12px; }
.btp-step:only-child { border-radius: 12px; }
.btp-step:active { background: #f8f9fa; } /* mobile: active instead of hover */

.btp-step--transit { border-left-color: #1a73e8; background: #f0f6ff; }
.btp-step--transit:active { background: #e3f0ff; }
.btp-step--walking { border-left-color: #34a853; }

.btp-step-body { flex: 1; min-width: 0; }

.btp-step-transit-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 1rem;      /* scaled down from 2rem */
    margin-bottom: 6px;
}
.btp-transit-badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .5px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Step text: readable but not oversized on small screens */
.btp-step-instruction { font-size: 1rem; line-height: 1.5; margin-bottom: 4px; }
.btp-step-instruction b, .btp-step-instruction strong { font-weight: 600; }

.btp-step-detail { font-size: .92rem; color: #5f6368; line-height: 1.5; }
.btp-step-detail strong { color: #202124; font-weight: 600; }

/* ── Desktop overrides (600 px +) ── */
@media (min-width: 600px) {
    .btp-wrap { padding: 24px 16px 40px; }

    .btp-form { padding: 24px; }

    .btp-field-group { flex-direction: row; align-items: flex-end; }
    .btp-field { flex: 1; }

    /* Restore vertical swap button orientation on desktop */
    .btp-swap-btn {
        align-self: flex-end;
        margin: 0 4px 4px;
        transform: none;
    }
    .btp-swap-btn:hover { transform: rotate(180deg); }
    .btp-swap-btn:active { transform: rotate(180deg); }

    .btp-map { height: 340px; }

    .btp-step-transit-header { font-size: 1.25rem; }
    .btp-step-instruction { font-size: 1.1rem; }
    .btp-step-detail { font-size: 1rem; }

    .btp-btn--secondary { width: auto; }

    .btp-title { font-size: 1.6rem; margin-bottom: 24px; }
}

/* ── Print ──
   Hide the entire page (theme header, nav, sidebar, footer, widgets, etc.)
   and print only the itinerary steps. We can't target the theme's markup
   directly (every theme is different), so we hide everything on the page
   and then re-reveal just the plugin wrapper — then, within the wrapper,
   hide everything except the step list itself. */
@media print {
    body * { visibility: hidden !important; }

    #btp-wrap, #btp-wrap * { visibility: visible !important; }

    #btp-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Only the step-by-step directions should print — everything else
       in the plugin (form, map, buttons, loading/error states, title)
       is suppressed. */
    .btp-title,
    .btp-form,
    .btp-btn,
    .btp-map,
    .btp-route-options,
    #btp-loading,
    #btp-error {
        display: none !important;
    }

    .btp-results { display: block !important; }

    /* Keep the trip summary (time/distance/depart/arrive) since it's
       useful context for printed directions; drop the "Your Trip" label. */
    .btp-results-title { display: none !important; }

    .btp-step { break-inside: avoid; }
}

/* ---- Suppress theme/browser validation icons on our inputs ---- */
.btp-wrap input.btp-input,
.btp-wrap input.btp-input:required,
.btp-wrap input.btp-input:invalid,
.btp-wrap input.btp-input:valid {
    /* Firefox shows a red/orange glow on :invalid — kill it */
    box-shadow: none !important;
    /* Some themes add a background-image icon for validation state */
    background-image: none !important;
    /* WooCommerce / Gravity Forms / Genesis all use this pattern */
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Hide the native browser validation bubble entirely for this form */
.btp-form:invalid input,
.btp-form input:invalid {
    outline: none !important;
    box-shadow: none !important;
}

/* Suppress any ::after / ::before pseudo validation icons themes inject */
.btp-input-wrap::after,
.btp-input-wrap::before,
.btp-field::after,
.btp-field::before {
    display: none !important;
    content: none !important;
}

/* Google Places autocomplete input — themes sometimes target [autocomplete] */
.btp-wrap input[autocomplete="off"] {
    background-image: none !important;
}

/* ---- Suppress theme/browser validation icons on inputs ---- */
.btp-wrap input.btp-input,
.btp-wrap input.btp-input:required,
.btp-wrap input.btp-input:invalid,
.btp-wrap input.btp-input:valid {
    box-shadow: none !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.btp-form:invalid input,
.btp-form input:invalid { outline: none !important; box-shadow: none !important; }
.btp-input-wrap::after, .btp-input-wrap::before,
.btp-field::after, .btp-field::before { display: none !important; content: none !important; }
.btp-wrap input[autocomplete="off"] { background-image: none !important; }