/*
 * 下部タブバー(ブラウザのスマホ表示・アプリ共通)。
 * Common.css より後に読み込むこと。
 */
/*----------------------------------
= フッターナビ(下部タブバー)
  デザインは前アプリ(React Native版)準拠。ブラウザのスマホ表示とアプリで共通。
----------------------------------*/
:root {
    --naviBottom-primary: #f24822;
    --naviBottom-inactive: #999999;
    --naviBottom-border: #e0e0e0;
    --naviBottom-height: 56px;
}
.navigationBottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    padding-top: 8px;
    /* iPhone のホームバーに重ならないよう、下に安全領域ぶんの余白を取る(viewport-fit=cover が必要) */
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--naviBottom-border);
}
.naviBottom-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: calc(var(--naviBottom-height) - 8px);
    padding: 0;
    border: 0;
    background: none;
    color: var(--naviBottom-inactive);
    text-decoration: none;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}
.naviBottom-box.is-active {
    color: var(--naviBottom-primary);
}
.naviBottom-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
}
.naviBottom-label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}
/* マイページの通知バッジ(Common.css の .noti-icon をタブバー内だけ上書き) */
.navigationBottom .noti-icon {
    min-width: 0;
    line-height: normal;
    box-sizing: content-box;
    position: absolute;
    top: -2px;
    right: -6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--naviBottom-primary);
    border: 1.5px solid #fff;
}
/* 中央の QR ボタン(直径70px・赤・浮き上がり・影) */
.naviBottom-centerButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 70px;
    height: 70px;
    margin-top: -28px;
    border-radius: 50%;
    background: var(--naviBottom-primary);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}
.naviBottom-box--center.is-active .naviBottom-centerButton,
.naviBottom-box--center:active .naviBottom-centerButton {
    transform: scale(1.05);
}
.naviBottom-centerLabel {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
@media (max-width: 480px) {
    /* 画面下に固定するボタンを、浮き上がった QR ボタンより上に出す */
    .fixed-btn {
        bottom: calc(96px + env(safe-area-inset-bottom));
    }
    /* タブバーの下にページの末尾が隠れないようにする。
       中央の QR ボタンがタブバーより 28px 上に飛び出すので、その分(+少しの余白)も空ける */
    body {
        padding-bottom: calc(var(--naviBottom-height) + 36px + env(safe-area-inset-bottom));
    }
}
@media (min-width: 481px) {
    .navigationBottom {
        display: none;
    }
}

/*----------------------------------
= ページ見出し(左に丸い戻るボタン、中央にタイトル)。前アプリの ScreenHeader 準拠
  使い方:
    <div class="pageHeader">
        <a href="/mypage" class="pageHeader-back" aria-label="戻る"></a>
        <h1 class="pageHeader-title">アカウントを削除</h1>
    </div>
----------------------------------*/
.pageHeader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 6px 56px;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}
.pageHeader-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: center;
}
.pageHeader-back {
    position: absolute;
    left: 0;
    top: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pageHeader-back::before {
    content: "";
    width: 10px;
    height: 10px;
    border-left: 1.5px solid #333;
    border-bottom: 1.5px solid #333;
    transform: rotate(45deg) translateX(2px);
}

/* ----------------------------------
   上部に固定する「戻るボタン + タイトル」の帯(include/app_page_header.blade.php 用)。
   今は見出しの左に戻るボタンを置く形(下の .backButton)を使っているので、帯を使わないなら不要
----------------------------------*/
.appPageHeader {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0 16px;
    background: #fff;
}
.appPageHeader .pageHeader {
    margin-bottom: 0;
}
/* PC 表示では出さない(ヘッダーとパンくずを使う) */
@media (min-width: 481px) {
    .appPageHeader { display: none; }
}

/* ----------------------------------
   戻るボタン(矢印のみ。ページの見出しの左に置く): <div class="見出し withBack">@include('include.back_button')見出し</div>
   スマホ表示でだけ出す
----------------------------------*/
.backButton {
    display: none;
}
@media (max-width: 480px) {
    .backButton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        margin-right: 10px;
        vertical-align: middle;
    }
    /* 矢印だけ(丸の枠なし)。押せる範囲は 32px 四方 */
    .backButton::before {
        content: "";
        width: 11px;
        height: 11px;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        transform: rotate(45deg) translateX(2px);
    }
    /* 見出しの左端に置く: 見出しに class="withBack" を付ける(文字の位置はそのまま、ボタンだけ左端に重ねる) */
    .withBack {
        position: relative;
        padding-left: 44px;
        padding-right: 44px;
    }
    .withBack .backButton {
        position: absolute;
        left: 0;
        top: 50%;
        margin: -25px 0 0 0;
    }
}