/* まぁーるバス画面の土台クラス。
   テーマ hagi-nonta の共通部品（.c-btn / .stay-select / .page-section__lead）のうち、
   移植した bus-route.css が前提にしている分だけを用意する。
   この画面はテーマと同じ濃紺の背景で組まれているため、文字は白を基調にする。 */

/* 共通CSS（sns.css）はこのファイルより後に読み込まれるため、#app.page と同じ強さでは負ける。
   クラスを2つ重ねて強さを上げる */
#app.page.page--bus-route {
    background: #001727;
    color: #fff;
}

.page--bus-route .page-hdr h1 {
    color: #fff;
}

.page--bus-route .page-back {
    color: rgba(255, 255, 255, .7);
}

.page--bus-route .page-section__lead {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .8);
    text-align: left;
}

.page--bus-route .page-section__lead a {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, .5);
}

/* ボタン（テーマの .c-btn 相当） */
.page--bus-route .c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}

.page--bus-route .c-btn--sm {
    min-height: 36px;
    padding: 7px 14px;
    font-size: 12px;
}

.page--bus-route .c-btn:disabled {
    opacity: .45;
    cursor: default;
}

.page--bus-route .c-btn:active {
    background: rgba(255, 255, 255, .12);
}

/* 停留所を選ぶ入力欄（白地に濃い文字。候補一覧の見た目は bus-route.css 側） */
.page--bus-route .stay-select {
    position: relative;
}

.page--bus-route .stay-select__control {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    background: #fff;
    color: #23303c;
    font-family: inherit;
    font-size: 14px;
}

/* ---------- 地図の上に出す小さなシート用（横並び・最小限） ---------- */
/* 1rem = 10px（sns.css で基準を合わせている）。テーマ側の指定と同じ感覚で書ける。
   初期状態（検索前）は画面の 1/8 ほどの高さに収め、地図を広く見せる */

/* 移植元のフォームは枠と 20px の余白を持つ。シートでは枠ごと外す */
.sheet--bus .bus-route-form {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.sheet--bus .bus-route-form > * + * {
    margin-top: 6px;
}

/* 読み上げ用に残すラベル（見た目は入力欄の案内文で示す） */
.sheet--bus .bus-sheet__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 現在地ボタンは記号だけの正方形にする */
.sheet--bus .bus-sheet__geo {
    flex: 0 0 auto;
    width: 38px;
    padding: 0;
    font-size: 1.6rem;
}

/* 保存ボタンは出発・目的地がそろうまで出さない（初期状態の高さを抑えるため） */
.sheet--bus .bus-route-save-btn:disabled {
    display: none;
}

.sheet--bus .bus-route-form__geo-status:empty {
    display: none;
}

/* 注意書きは検索結果が出てから見せる */
.sheet--bus .bus-route-results:empty ~ .bus-route-disclaimer {
    display: none;
}

.sheet--bus .bus-route-results {
    gap: 10px;
    margin: 10px 0 0;
}

.sheet--bus .bus-route-form__pair {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
}

.sheet--bus .bus-route-form__pair > * {
    margin: 0;
}

/* 移植元の `.bus-route-form__pair .bus-route-form__row` は最小幅 200px で折り返すため、
   同じ強さでは勝てない。クラスを3つ重ねて横並びを保つ */
.sheet--bus .bus-route-form__pair .bus-route-form__row {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

/* 移植元は `.page--bus-route .stay-select { min-width: 200px }`。同じ強さでは負けるので3つ重ねる */
.sheet--bus .page--bus-route .stay-select {
    min-width: 0;
    width: auto;
}

.sheet--bus .page--bus-route .stay-select__control {
    width: 100%;
    min-width: 0;
}

/* 空のときに余白を作らない */
.sheet--bus .bus-route-saved:empty,
.sheet--bus .bus-route-results:empty {
    display: none;
}

.sheet--bus .btn.ghost {
    height: 40px;
    font-size: 1.3rem;
}

.sheet--bus .bus-route-form__label {
    display: block;
    margin: 0 0 3px;
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .75);
}

.sheet--bus .stay-select__control {
    height: 38px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 1.4rem;
}

.sheet--bus .c-btn {
    min-height: 38px;
    padding: 6px 12px;
    font-size: 1.3rem;
}

.sheet--bus .bus-sheet__search {
    flex: 0 0 auto;
}

/* 現在地・保存は補助なので一段小さく、1行にまとめる */
.sheet--bus .bus-sheet__sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.sheet--bus .bus-sheet__sub .c-btn {
    min-height: 30px;
    padding: 3px 10px;
    font-size: 1.2rem;
}

.sheet--bus .bus-route-save-btn {
    font-size: 1.2rem;
}

.sheet--bus .bus-route-form__geo-status {
    margin: 0;
    font-size: 1.1rem;
}

.sheet--bus .bus-route-results {
    font-size: 1.3rem;
}

.sheet--bus .bus-route-disclaimer {
    margin: 10px 0 0;
    font-size: 1rem;
    line-height: 1.6;
}

/* 通知は画面下メニューの上に出す（元は画面の一番下に固定） */
.page--bus-route .bus-route-notice {
    bottom: var(--tabbar-space);
    padding-bottom: 12px;
}