/* Lux Romae — Journey Planner shared styles
   Extracted from get-here/index.html (lines 123-182, 2026-06-13).
   Used by /get-here/, /get-here/zh/, /get-here/it/.
   Depends on global :root tokens (--amber, --amber-dk, --grey-brd, --gold-dk,
   --black, --text, --text-2, --pill, --radius-sm, --ff-sans, --t) and the
   shared .tag-best / .tag-fast / .tag-budget badge palette. */

/* Map route buttons */
.route-btns{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.route-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:var(--pill);border:1.5px solid var(--grey-brd);background:#fff;font-size:.7rem;font-weight:700;color:#555;cursor:pointer;transition:all .2s;font-family:inherit;white-space:nowrap}
.route-btn:hover{border-color:var(--amber);color:var(--amber-dk)}
.route-btn.active{background:var(--black);color:#fff;border-color:var(--black)}
.route-btn i{font-size:.65rem;color:var(--amber)}
.route-btn.active i{color:var(--amber)}

/* Route option cards */
.route-options{display:flex;flex-direction:column;gap:8px}
.route-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border-radius:var(--radius-sm);border:1.5px solid var(--grey-brd);cursor:pointer;transition:all .2s}
.route-opt:hover{border-color:var(--amber);box-shadow:0 2px 8px rgba(245,158,11,.15)}
.route-opt.active{border-color:var(--amber);background:#fffdf0;box-shadow:0 2px 10px rgba(245,158,11,.2)}
.route-opt-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.route-opt-info{flex:1;min-width:0}
.route-opt-title{font-size:.82rem;font-weight:800;color:var(--text)}
.route-opt-detail{font-size:.68rem;color:var(--text-2);margin-top:1px;line-height:1.3}
.route-opt-steps{font-size:.65rem;color:#888;margin-top:3px}
.route-opt-steps span{display:inline-flex;align-items:center;gap:2px}
.route-opt-right{text-align:right;flex-shrink:0}
.route-opt-time{font-size:1rem;font-weight:800;color:var(--amber-dk)}
.route-opt-dist{font-size:.65rem;color:var(--text-2)}
.route-opt-cost{font-size:.72rem;font-weight:700;color:#15803d;margin-top:2px}
.route-opt-tag{display:inline-block;margin-top:3px;padding:1px 6px;border-radius:var(--pill);font-size:.55rem;font-weight:700}
.route-opt-warn{font-size:.65rem;color:#b91c1c;margin-top:3px}
.route-opt-warn i{margin-right:2px}

/* Departure time picker */
.depart-picker{margin:10px 0;padding:10px;background:#f8f7f2;border-radius:var(--radius-sm);border:1px solid var(--grey-brd)}
.depart-btn{padding:5px 12px;border-radius:var(--pill);border:1.5px solid var(--grey-brd);background:#fff;font-size:.7rem;font-weight:700;color:#555;cursor:pointer;font-family:inherit;transition:all .2s}
.depart-btn.active{background:var(--amber);color:#fff;border-color:var(--amber)}
.depart-input{padding:5px 10px;border-radius:var(--radius-sm);border:1.5px solid var(--grey-brd);font-size:.72rem;font-family:inherit;color:var(--text)}

/* Direction toggle pill */
.trip-toggle{display:flex;gap:0;margin-bottom:14px;background:#f0ebe0;border-radius:var(--pill);padding:3px}
.trip-pill{flex:1;padding:9px 12px;border:none;border-radius:var(--pill);font-size:.78rem;font-weight:700;cursor:pointer;background:transparent;color:#888;transition:all .25s;font-family:inherit;text-align:center}
.trip-pill.active{background:var(--amber);color:#fff;box-shadow:0 2px 8px rgba(245,158,11,.3)}

/* Plan button in each card */
.btn-plan{background:linear-gradient(135deg,#1a237e,#283593);box-shadow:0 4px 12px rgba(26,35,126,.28);margin-top:4px;width:100%!important;justify-content:center}

/* Plan Your Trip — premium section styling */
.card--planner{border:2px solid var(--amber);background:linear-gradient(160deg,#fffdf5,#fff8e1);box-shadow:0 4px 20px rgba(245,158,11,.15)}
.card--planner .card-head{background:linear-gradient(135deg,#1a1400,#2a2000)}
.card--planner .card-head:hover{background:linear-gradient(135deg,#2a2000,#3a3000)}
.card--planner .card-title{color:var(--amber)}
.card--planner .card-sub{color:rgba(255,255,255,.6)}
.card--planner .card-chev{color:var(--amber)}
.card--planner .card-icon{background:rgba(245,158,11,.2);border:1.5px solid rgba(245,158,11,.4)}
.card--planner-badge{display:inline-block;background:var(--amber);color:#1a1400;padding:2px 8px;border-radius:var(--pill);font-size:.55rem;font-weight:800;letter-spacing:.05em;margin-left:8px;vertical-align:middle}

/* Custom origin search */
.custom-origin{margin-bottom:10px}
.origin-search{flex:1;padding:8px 12px;border-radius:var(--pill);border:1.5px solid var(--grey-brd);font-size:.78rem;font-family:inherit;color:var(--text);width:100%;background:#fff;transition:border-color .2s}
.origin-search:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,158,11,.15)}
.origin-search::placeholder{color:#999}

/* Google Places dropdown styling */
.pac-container{border-radius:10px;border:1.5px solid var(--grey-brd);box-shadow:0 4px 16px rgba(0,0,0,.12);font-family:var(--ff-sans);font-size:.78rem;margin-top:4px}
.pac-item{padding:8px 12px;cursor:pointer}
.pac-item:hover{background:#fffdf0}