/*
 * Taxi Modern — Customer booking flow (modern UI v2)
 *
 * Design language:
 *  - Dark hero on top with bold typography
 *  - Soft surface card containing the primary CTA
 *  - Pickup "chip" with icon-bubble + zone label + address + change action
 *  - Routes list as rich rows: icon-bubble, name, time/desc, price
 *  - Selected route has a thick accent border (no fill change)
 *  - Bottom CTA is dark with arrow icon (mirrors hero header)
 */

/* ============================================================
   Theme variables (overridden by inline style on .txm-app)
   ============================================================ */
:root {
    --txm-accent:        #FFC107;
    --txm-accent-dark:   #FFA000;
    --txm-bg:            #F4F5F7;
    --txm-surface:       #FFFFFF;
    --txm-text:          #111111;
    --txm-text-soft:     #5A5C66;
    --txm-text-faint:    #8A8D96;
    --txm-border:        #E5E7EB;
    --txm-hero-bg:       #161618;
    --txm-hero-bg-soft:  #1F2024;
    --txm-radius-sm:     10px;
    --txm-radius:        14px;
    --txm-radius-lg:     18px;
    --txm-shadow-sm:     0 1px 2px rgba( 0, 0, 0, 0.04 );
    --txm-shadow:        0 4px 14px rgba( 0, 0, 0, 0.06 );
    --txm-shadow-lg:     0 10px 30px rgba( 0, 0, 0, 0.08 );
    --txm-ease:          cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* ============================================================
   App shell
   ============================================================ */
.txm-app {
    box-sizing: border-box;
    max-width: 480px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
    color: var(--txm-text);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.txm-app *,
.txm-app *::before,
.txm-app *::after {
    box-sizing: border-box;
}

/* Steps slide in/out smoothly */
.txm-app-step {
    opacity: 0;
    transform: translateY( 8px );
    transition: opacity 0.28s var(--txm-ease), transform 0.28s var(--txm-ease);
}
.txm-app-step.is-active {
    opacity: 1;
    transform: translateY( 0 );
}

/* ============================================================
   STEP 1: Hero + locate card
   ============================================================ */

.txm-hero {
    background: var(--txm-hero-bg);
    color: #fff;
    border-radius: var(--txm-radius-lg) var(--txm-radius-lg) 0 0;
    padding: 28px 22px 36px;
    position: relative;
    overflow: hidden;
}

/* Subtle radial accent in the hero corner */
.txm-hero::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient( circle at center, rgba( 255, 193, 7, 0.18 ), transparent 70% );
    pointer-events: none;
}

.txm-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: rgba( 255, 255, 255, 0.72 );
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.txm-hero-eyebrow-icon {
    display: inline-flex;
    color: var(--txm-accent);
}

.txm-hero-title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #fff;
}

.txm-hero-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba( 255, 255, 255, 0.62 );
    max-width: 36ch;
}

/* The locate card sits below the hero, attached but visually a "card" */
.txm-hero-card {
    background: var(--txm-surface);
    border-radius: 0 0 var(--txm-radius-lg) var(--txm-radius-lg);
    padding: 22px 22px 24px;
    box-shadow: var(--txm-shadow);
    margin-bottom: 16px;
}

/* ============================================================
   Primary CTA buttons
   ============================================================ */

.txm-cta-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    background: var(--txm-accent);
    color: #1A1A1A;
    border: 0;
    border-radius: var(--txm-radius);
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.12s var(--txm-ease), background 0.15s var(--txm-ease), box-shadow 0.15s var(--txm-ease);
    box-shadow: 0 2px 0 0 rgba( 0, 0, 0, 0.04 );
    -webkit-tap-highlight-color: transparent;
}

.txm-cta-primary:hover:not([disabled]) {
    background: var(--txm-accent-dark);
}

.txm-cta-primary:active:not([disabled]) {
    transform: scale( 0.985 );
}

.txm-cta-primary[disabled] {
    opacity: 0.42;
    cursor: not-allowed;
}

.txm-cta-primary.is-loading {
    cursor: wait;
}

.txm-cta-primary.is-loading .txm-cta-icon {
    animation: txm-spin 0.9s linear infinite;
}

@keyframes txm-spin {
    to { transform: rotate( 360deg ); }
}

.txm-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.txm-cta-icon svg {
    width: 100%;
    height: 100%;
}

.txm-cta-label {
    line-height: 1.2;
}

/* Dark variant for the bottom "Book" CTA */
.txm-cta-dark {
    background: var(--txm-hero-bg);
    color: #fff;
    font-weight: 600;
}

.txm-cta-dark:hover:not([disabled]) {
    background: var(--txm-hero-bg-soft);
}

/* Privacy / hint note below the CTA */
.txm-privacy-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--txm-text-faint);
}

.txm-privacy-icon {
    display: inline-flex;
    flex-shrink: 0;
}

/* Status messages (errors etc) under the locate flow */
.txm-locate-status {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--txm-radius-sm);
    font-size: 13px;
    text-align: center;
    line-height: 1.4;
    background: transparent;
    color: var(--txm-text-soft);
    min-height: 0;
}

.txm-locate-status:empty {
    display: none;
}

.txm-locate-status.is-error {
    background: #FFF1F1;
    color: #B33636;
    border: 1px solid #FFDADA;
}

/* ============================================================
   Closed-hours banner (when taxi service not accepting rides)
   ============================================================ */

.txm-closed-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #2C2D32;
    color: #fff;
    border-radius: var(--txm-radius);
}

.txm-closed-banner-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--txm-accent);
}

.txm-closed-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}

.txm-closed-banner-text strong {
    font-size: 14px;
    font-weight: 600;
}

.txm-closed-banner-text span {
    font-size: 12.5px;
    opacity: 0.78;
}

/* ============================================================
   STEP 2: Pickup chip + routes list + bottom CTA
   ============================================================ */

.txm-app-step-routes {
    background: var(--txm-surface);
    border-radius: var(--txm-radius-lg);
    box-shadow: var(--txm-shadow);
    padding: 16px;
    margin-bottom: 16px;
}

/* Pickup chip: icon, label + address, change action */
.txm-pickup-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #FAFAFB;
    border: 1px solid var(--txm-border);
    border-radius: var(--txm-radius);
    margin-bottom: 16px;
}

.txm-pickup-chip-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FFF7DB;
    color: #8A6D1F;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.txm-pickup-chip-icon svg {
    width: 20px;
    height: 20px;
}

.txm-pickup-chip-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.txm-pickup-chip-zone {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--txm-text-faint);
    margin-bottom: 2px;
    line-height: 1.2;
}

.txm-pickup-chip-address {
    font-size: 14px;
    font-weight: 600;
    color: var(--txm-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.txm-pickup-chip-change {
    background: transparent;
    border: 0;
    padding: 8px;
    color: var(--txm-text-faint);
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s var(--txm-ease), background 0.15s var(--txm-ease);
    flex-shrink: 0;
}

.txm-pickup-chip-change:hover {
    color: var(--txm-text);
    background: #EFF0F2;
}

.txm-pickup-chip-change svg {
    width: 16px;
    height: 16px;
}

/* Section label above the route list */
.txm-section-label {
    margin: 6px 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--txm-text-faint);
}

/* Routes list */
.txm-routes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.txm-route {
    margin: 0;
    padding: 0;
}

.txm-route-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: var(--txm-radius);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: var(--txm-text);
    transition: border-color 0.15s var(--txm-ease), background 0.15s var(--txm-ease), transform 0.12s var(--txm-ease);
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 0 0 1px var(--txm-border);
}

.txm-route-btn:hover {
    background: #FAFAFB;
}

.txm-route-btn:active {
    transform: scale( 0.99 );
}

.txm-route.is-selected .txm-route-btn {
    border-color: var(--txm-accent);
    background: #FFFBEF;
    box-shadow: inset 0 0 0 1px transparent;
}

.txm-route-btn.is-loading {
    opacity: 0.6;
    cursor: wait;
}

.txm-route-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--txm-bg);
    color: var(--txm-text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s var(--txm-ease), color 0.15s var(--txm-ease);
}

.txm-route.is-selected .txm-route-icon {
    background: #FFF7DB;
    color: #8A6D1F;
}

.txm-route-icon svg {
    width: 20px;
    height: 20px;
}

.txm-route-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.txm-route-name {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--txm-text);
}

.txm-route-desc {
    font-size: 12.5px;
    color: var(--txm-text-soft);
    line-height: 1.35;
}

.txm-route-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--txm-text);
    flex-shrink: 0;
    margin-left: 4px;
}

.txm-empty {
    list-style: none;
    text-align: center;
    padding: 28px 16px;
    color: var(--txm-text-faint);
    font-size: 14px;
}

/* ============================================================
   Continue CTA (after route selected)
   ============================================================ */

.txm-continue-cta {
    margin-top: 14px;
    animation: txm-cta-fade-in 0.25s var(--txm-ease);
}

@keyframes txm-cta-fade-in {
    from { opacity: 0; transform: translateY( 6px ); }
    to   { opacity: 1; transform: translateY( 0 ); }
}

.txm-continue-status {
    margin-top: 10px;
    font-size: 13px;
    text-align: center;
    color: var(--txm-text-soft);
    min-height: 0;
}

.txm-continue-status:empty {
    display: none;
}

.txm-continue-status.is-error {
    color: #B33636;
}

/* ============================================================
   Mobile niceties
   ============================================================ */

@media ( max-width: 380px ) {
    .txm-hero {
        padding: 24px 18px 32px;
    }
    .txm-hero-card {
        padding: 18px 18px 20px;
    }
    .txm-hero-title {
        font-size: 22px;
    }
    .txm-app-step-routes {
        padding: 12px;
    }
}

/* Respect reduced-motion preferences */
@media ( prefers-reduced-motion: reduce ) {
    .txm-app *,
    .txm-app *::before,
    .txm-app *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   v1.0.18: Custom destination picker (faza 2)
   ============================================================ */

.txm-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 4px;
    color: var(--txm-text-faint);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.txm-section-divider::before,
.txm-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--txm-border);
}

.txm-section-divider span {
    background: transparent;
    font-weight: 600;
}

.txm-custom-dest {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Address search input */
.txm-custom-dest-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: #FAFAFB;
    border: 1.5px solid var(--txm-border);
    border-radius: var(--txm-radius);
    transition: border-color 0.15s var(--txm-ease), background 0.15s var(--txm-ease), box-shadow 0.15s var(--txm-ease);
}

.txm-custom-dest-search:focus-within {
    background: #fff;
    border-color: var(--txm-accent);
    box-shadow: 0 0 0 3px rgba( 255, 193, 7, 0.18 );
}

.txm-custom-dest-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--txm-text-faint);
    flex-shrink: 0;
}

.txm-custom-dest-input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 6px;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 15px;
    color: var(--txm-text);
    font-family: inherit;
}

.txm-custom-dest-input::placeholder {
    color: var(--txm-text-faint);
}

.txm-custom-dest-clear {
    background: transparent;
    border: 0;
    padding: 0;
    width: 36px;
    height: 36px;
    margin-right: 4px;
    color: var(--txm-text-faint);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s var(--txm-ease), background 0.15s var(--txm-ease);
    flex-shrink: 0;
}

.txm-custom-dest-clear:hover {
    color: var(--txm-text);
    background: #EFF0F2;
}

/* Map container */
.txm-custom-dest-map {
    border-radius: var(--txm-radius);
    overflow: hidden;
    background: #EEE;
    box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.05 );
    animation: txm-cta-fade-in 0.25s var(--txm-ease);
}

.txm-custom-dest-map-canvas {
    width: 100%;
    height: 240px;
    background: #E8EBED;
}

.txm-custom-dest-map-hint {
    padding: 8px 14px;
    font-size: 12px;
    color: var(--txm-text-faint);
    background: #FAFAFB;
    border-top: 1px solid var(--txm-border);
    text-align: center;
}

/* Live quote panel */
.txm-custom-dest-quote {
    background: #fff;
    border-radius: var(--txm-radius);
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.05 );
    border: 1px solid var(--txm-border);
    animation: txm-cta-fade-in 0.25s var(--txm-ease);
}

.txm-custom-dest-quote-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: 14px;
}

.txm-custom-dest-quote-label {
    color: var(--txm-text-soft);
}

.txm-custom-dest-quote-value {
    font-weight: 600;
    color: var(--txm-text);
}

.txm-custom-dest-quote-total {
    border-top: 1.5px solid var(--txm-border);
    margin-top: 6px;
    padding-top: 12px;
}

.txm-custom-dest-quote-total .txm-custom-dest-quote-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: var(--txm-text-faint);
}

.txm-custom-dest-quote-total .txm-custom-dest-quote-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--txm-accent-dark);
}

.txm-custom-dest-quote-breakdown {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--txm-text-faint);
    font-style: italic;
    line-height: 1.4;
}

/* Error block (Directions API failure etc.) */
.txm-custom-dest-error {
    padding: 12px 14px;
    background: #FFF1F1;
    color: #B33636;
    border: 1px solid #FFDADA;
    border-radius: var(--txm-radius-sm);
    font-size: 13.5px;
    line-height: 1.45;
    animation: txm-cta-fade-in 0.25s var(--txm-ease);
}

/* Selected state on the custom destination block — mirrors the
   yellow border treatment used for selected fixed routes. */
.txm-custom-dest.is-selected .txm-custom-dest-search {
    border-color: var(--txm-accent);
    background: #FFFBEF;
}

.txm-custom-dest.is-selected .txm-custom-dest-quote {
    border-color: var(--txm-accent);
}

/* Loading state on quote panel while we wait for AJAX */
.txm-custom-dest-quote.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

/* Google Places autocomplete dropdown — make it match our look */
.pac-container {
    border-radius: var(--txm-radius-sm) !important;
    border: 1px solid var(--txm-border) !important;
    box-shadow: var(--txm-shadow-lg) !important;
    font-family: inherit !important;
    margin-top: 4px !important;
    overflow: hidden;
}

.pac-item {
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    border-top: 1px solid var(--txm-border) !important;
}

.pac-item:first-child {
    border-top: 0 !important;
}

.pac-item:hover,
.pac-item-selected {
    background: #FFFBEF !important;
}

.pac-item-query {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--txm-text) !important;
}