/* ==========================================================
   活動報名表單卡（ActivityUsers/Create、ActivityUsers/Edit、Shared/_CreateUser）
   與活動詳情（Content/ActivityDetail.css）同一套視覺語彙：白底卡片、主色側條標題、12／16px 圓角。
   只調整呈現；欄位、v-model、驗證與同意邏輯都在各 partial 與 JS.cshtml，不在這裡。
   斷點：< 576 標籤在欄位上方、欄位全寬、儲存鈕全寬；>= 992 桌機卡片加大內距。類別一律 af- 前綴
   ========================================================== */

/* 色彩值與 ActivityDetail.css 的 --ad-* 相同；表單卡可能在沒有 .act-page 的情況下輸出，故自行定義 */
.af-col,
.af-card {
    --af-primary: #03857D;
    --af-dark: #0A5652;
    --af-text: #1F2933;
    --af-muted: #5B6770;
    --af-line: #DCE5E4;
    --af-divider: #EDF1F1;
    --af-bg: #F6F9F9;
    --af-tint: #E6F2F1;
    --af-focus: #0B6E79;
    --af-danger: #B42318;
}

.af-col {
    min-width: 0;
}

.af-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--af-line);
    border-radius: 12px;
    background: #fff;
    color: var(--af-text);
    box-shadow: 0 4px 12px rgba(10, 86, 82, .06);
    /* 「立即報名」與報名檢查失敗的導回以 #register／#edit 錨點定位到本卡，頂端留白 */
    scroll-margin-top: 16px;
}

/* 標題：與 .act-card-title 相同的主色側條 */
.af-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--af-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.af-title::before {
    content: "";
    flex: none;
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--af-primary);
}

/* 校外人士：校內人士登入提示 */
.af-login {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--af-tint);
}

.af-login-text {
    margin: 0;
    color: var(--af-danger);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.af-login-btn {
    min-height: 40px;
    padding: 6px 20px;
}

/* ---------- 欄位列（v-row／vlabel 產生的 Bootstrap .form-group.row） ---------- */
.af-card .form-group {
    margin-bottom: 14px;
}

.af-card .col-form-label {
    color: var(--af-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.af-card .form-control-plaintext {
    color: var(--af-text);
    overflow-wrap: anywhere;
}

/* 欄位下方的提示與必填訊息（原本是 inline 的 a.text-danger／p.text-danger） */
.af-card .form-group.row a.text-danger,
.af-card .form-group.row p.text-danger {
    display: block;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.6;
}

/* 選項膠囊（v-option／moption）換行時保持間距 */
.af-card .form-group.row .rounded-pill {
    margin: 0 6px 6px 0;
}

.af-card .form-control:focus {
    border-color: var(--af-primary);
    box-shadow: 0 0 0 .2rem rgba(3, 133, 125, .2);
}

/* 手機：標籤在上、欄位全寬（v-row 範本的內容欄是 col-9，沒有 col-12） */
@media (max-width: 575.98px) {
    .af-card .form-group.row > .col-form-label {
        padding-bottom: 2px;
    }

    .af-card .form-group.row > .col-9,
    .af-card .form-group.row > label + .col-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 576px) {
    /* 現場報名證號欄（輸入框＋人員查詢鈕）在卡片內給一半寬度 */
    .af-card .form-group.row > label + .col-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* 投保出生日期的三個下拉選單：與其他欄位同寬，避免在卡片內被擠窄 */
    .af-card .form-group.row > .col-sm-8.col-lg-4 {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

/* ---------- 個資保留聲明＋同意事項：限高捲動框，同意／不同意固定在框外 ---------- */
.af-consent-sum {
    margin: 0 0 8px;
    padding-top: calc(.375rem + 1px);
    color: var(--af-muted);
    font-size: 14px;
    line-height: 1.6;
}

.af-consent-box {
    max-height: 200px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--af-line);
    border-radius: 10px;
    background: var(--af-bg);
    color: var(--af-text);
    font-size: 14px;
    line-height: 1.75;
    overflow-wrap: anywhere;
    overscroll-behavior: contain;
}

.af-consent-box:focus {
    outline: 2px solid var(--af-focus);
    outline-offset: 2px;
}

.af-consent-box:focus:not(:focus-visible) {
    outline: none;
}

.af-consent-h {
    margin: 0 0 4px;
    color: var(--af-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.af-consent-box p {
    margin: 0 0 8px;
}

.af-consent-stmt {
    color: var(--af-danger);
}

.af-consent-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.af-consent-ins {
    margin: 8px 0 0;
    color: var(--af-danger);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.af-consent-choice {
    margin-top: 10px;
}

/* ---------- 儲存：主色大按鈕（只調外觀，不改 variant／事件） ---------- */
.af-card #app > .text-center {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--af-divider);
}

.af-card #app > .text-center > .btn {
    min-width: 200px;
    min-height: 48px;
    padding: 8px 32px;
    border-color: var(--af-primary);
    border-radius: 10px;
    background: var(--af-primary);
    box-shadow: 0 4px 10px rgba(3, 133, 125, .28);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .1em;
}

.af-card #app > .text-center > .btn:hover,
.af-card #app > .text-center > .btn:active {
    border-color: var(--af-dark);
    background: var(--af-dark);
    color: #fff;
}

.af-card #app > .text-center > .btn:focus {
    outline: 2px solid var(--af-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.af-card #app > .text-center > p {
    margin: 0;
    color: var(--af-muted);
}

/* 回到活動等返回連結 */
.af-back,
.af-back:visited {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 8px;
    color: var(--af-dark);
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .af-card #app > .text-center > .btn {
        display: block;
        width: 100%;
    }
}

@media (min-width: 992px) {
    .af-card {
        padding: 24px 28px;
        border-radius: 16px;
    }

    .af-title {
        margin-bottom: 20px;
        font-size: 20px;
    }
}