/* front-vendor.css — 前台 vendor 頁（原 layouts.app）整併到 layouts.mooc 的共用內容 CSS。
   來源：css/main.css（剝離舊 header/footer 用的 nav.css/wm.css 死碼，那兩支整支汰除）。
   只在 vendor 頁載入（mooc layout 依 @section("body-class","vendor-page") 條件式 link），
   故不影響 11 個新 mooc 頁、無需 scope。
   汰除：recorder.wav / aoba-virtual-keyboard-v3（死碼，0 頁使用）。 */

/* ------------------------- 字體設定 ------------------------- */
@font-face {
    font-family: "GenSekiGothic JP R";
    src: url('/hakka/fonts/GenSekiGothic-R.ttc');
}
/* 字體來源 https://oikasu.com/wp/?p=677 */
@font-face {
    font-family: 'twhei-s';
    src:
        url('/hakka/fonts/twhei-s/twhei-s.woff2') format("woff2"),
        url('/hakka/fonts/twhei-s/twhei-s.woff') format("woff"),
        url('/hakka/fonts/twhei-s/twhei-s.otf') format("opentype");
}
@font-face {
    font-family: 'CMEX客黑體';
    src: url('/hakka/fonts/CMEX.ttf') format("truetype");
}
/* 客語字體只套內容區（.content-wrapper），避免全域 * 洩漏到共用 header/footer 改變其字體 */
.content-wrapper,
.content-wrapper *,
.content-wrapper input[type="text"],
.content-wrapper select,
.content-wrapper textarea,
.hakka-text {
    font-family: "twhei-s", "CMEX客黑體", "Noto Sans TC", sans-serif;
}
:root {
	--elearning-primary: #04b291;
	--elearning-light-primary: #29BEA2;
	--elearning-lighten-primary: #CCF0E9;
	--elearning-secondary: #94CBD8;
	--elearning-light-secondary: #A9D5E0;
	--elearning-lighten-secondary: #EAF5F7;
	--elearning-danger-primary: #dc3545;
	--elearning-danger-lighten-primary: #f1aeb5;
}

/*------------------------- 仿 BS 自訂樣式類別 -------------------------*/
.border-elearning-primary { border: 1px solid var(--elearning-primary); }
.bg-elearning-primary { background-color: var(--elearning-primary); }
.bg-elearning-light-primary { background-color: var(--elearning-light-primary); }
.bg-elearning-lighten-primary { background-color: var(--elearning-lighten-primary); }
.bg-elearning-lighten-secondary { background-color: var(--elearning-lighten-secondary); }
.text-elearning-primary { color: var(--elearning-primary); }
.btn-elearning-primary {
	border: 1px solid var(--elearning-primary);
	color: var(--elearning-primary);
}
.btn-filled-elearning-primary,
.btn-05B292:hover, .btn-05B292.focus, .btn-05B292.checked {
	color: white !important;
    background-color: var(--elearning-primary);
}
.btn-elearning-primary.focus { background-color: var(--elearning-primary); color: white; }
.btn-elearning-primary:hover { background-color: var(--elearning-primary); color: white; }
.badge-elearning-light-primary {
	color: var(--elearning-primary);
	background-color: var(--elearning-lighten-primary);
}

/* ----------------------------------------------------------------- */

.toggler {

}
.toggler .statuses {

}
.toggler .statuses > * {
	border-radius: 1.5em;
}
.toggler .statuses > *:first-child {
}
.toggler .statuses > *:last-child {

}
.bg-05B292 { background-color: #05B292; }
.bg-7DEBD7 { background-color: #7DEBD7; }
.bg-EBF9FA { background-color: #EBF9FA; }
.bg-elearning-primary { background-color: var(--elearning-primary); }

.text-elearning-primary { color: var(--elearning-primary); }

.btn-elearning-primary {
    border: 1px solid var(--elearning-primary);
    color: var(--elearning-primary);
}
.btn-elearning-primary.focus { background-color: var(--elearning-primary); color: white; }
.btn-elearning-primary:hover { background-color: var(--elearning-primary); color: white; }
.btn-05B292:hover, .btn-05B292.focus, .btn-05B292.checked {
    color: white;
    background-color: var(--elearning-primary);
}

@media (min-width: 576px) {
    .fs-sm-1 {
        font-size: calc(1.375rem + 1.5vw) !important;
    }

    .fs-sm-2 {
        font-size: calc(1.325rem + 0.9vw) !important;
    }

    .fs-sm-3 {
        font-size: calc(1.3rem + 0.6vw) !important;
    }

    .fs-sm-4 {
        font-size: calc(1.275rem + 0.3vw) !important;
    }

    .fs-sm-5 {
        font-size: 1.25rem !important;
    }

    .fs-sm-6 {
        font-size: 1rem !important;
    }
}

.mw-75 {
    max-width: 75%;
}

/* ------------------------- 仿 BS 自訂樣式類別 -------------------------*/

.toggler .statuses > * {
    border-radius: 1.5em;
}

/* 連結色只套內容區，避免洩漏到共用 header/footer 把其連結染藍 */
.content-wrapper a {
    color: #337ab7;
    text-decoration: none;
}

#navbarSupportedContent {
    z-index: 1;
}

.audio-player {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--elearning-primary);
}
.audio-player .btn-play.text-elearning-primary:hover {
    color: var(--elearning-primary);
    filter:brightness(120%);
}
.audio-player .btn-play .replay-icon {
    width: 42px;
    height: auto;
    margin-right: 6px;
    display: none;
}
.audio-player .btn-play.show-replay-icon .replay-icon {
    display: block;
}
.audio-player .btn-play.show-replay-icon::before {
    display: none;
}
.audio-player .replay-icon.practice-play-icon-big {
    width: 128px;
}

.content-wrapper {
    max-width: 1023px;
    margin: auto;
    padding-right: 20px;
    padding-left: 20px;
    min-height: calc(100vh - 380px);
}
h1.main-title {
    text-align: center;
    margin-top: 50px;
    font-family: "GenRyuMin-B", serif;
}
.box-1 {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 15px;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
    padding: 20px;
}
.sentence {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 15px;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
    position: relative;
    padding: 20px;
}
.sentence .favorite{
    /*position: absolute;*/
    /*top: 10px;*/
    /*right: 10px;*/
    /*width: 200px;*/
}
.hakka-text, .chinese-text, .hakka-pinyin {
    font-size: 1.5rem;
    font-weight: 300;
}
.hakka-text, .chinese-text, .hakka-pinyin {
    padding-bottom: 0;
}
.tag-hakka {
    /*background-image: url(../images/img_bg-1.png);*/
    background-position: center;
    font-size: 18px;
    color: #fff;
    background-color: #cc816b;
    padding: 2px 10px 5px 10px;
    margin-right: 7px;
    border-radius: 3px;
    position: relative;
    top: -3px;
}
.tag-chinese {
    font-size: 18px;
    color: #fff;
    background-color: #aaa;
    padding: 2px 10px 5px 10px;
    margin-right: 10px;
    border-radius: 3px;
    position: relative;
    top: -3px;
}
.hakka-pinyin_box {
    background-color: #f6f6f6;
    border-radius: 3px;
    padding-left: 15px !important;
    padding: 7px;
    margin-top: 10px;
}
.hakka-pinyin {
    font-family: 'Times New Roman', serif;
    margin-left: 16px;
    word-spacing: 0.2em;
}
.float-left {
    float: left;
}
.nav-tabs {
    border: #fff !important;
}
.nav-tabs .nav-item {
    background-image: url(../images/tab_bg-2.png);
    border-radius: 7px 7px 0px 0px !important;
    margin-right: 5px;
}
.nav-tabs .nav-link {
    color: #fff !important;
}
.nav-tabs .nav-link:hover {
    border-radius: 7px 7px 0px 0px;
    border-bottom: solid 1px #fff !important;
    border-top: solid 1px #fff !important;
    border-left: solid 1px #fff !important;
    border-right: solid 1px #fff !important;
}
.nav-tabs .nav-link.active {
    background-image: url(../images/img_bg-1.png);
    background-position: center !important;
    border-radius: 7px 7px 0px 0px;
    border-bottom: solid 1px rgb(230, 199, 114) !important;
    border-top: solid 1px #fff !important;
    border-left: solid 1px #fff !important;
    border-right: solid 1px #fff !important;
    position: relative;
    top: -1px;
}
.r_menu {
    font-family: "GenRyuMin-B", serif;
    font-size: 1.8rem;
    line-height: 2rem;
    color: rgb(49, 49, 49);
    height: 150px;
    width: 150px;
    background-image: url(../images/img_hole.png) !important;
    background-repeat: no-repeat !important;
    background-position: center 12px;
    background-color: #f2f2f2;
    border-radius:50%;
    border: none;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    margin-top: 30px;
    padding: 20px 10px 10px 12px;
}
.r_menu:hover {
    background-image: url(../images/img_menu_o.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top;
    background-color: #fff;
}
.r_menu-s {
    font-family: "GenRyuMin-B", serif;
    font-size: 1.4rem;
    line-height: 2rem;
    color: rgb(49, 49, 49);
    height: 140px;
    width: 140px;
    background-image: url(../images/img_hole.png) !important;
    background-repeat: no-repeat !important;
    background-position: center 12px;
    background-color: #fff;
    border-radius:50%;
    border: none;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    margin-top: 30px;
    padding: 20px 10px 10px 12px;
}
.r_menu-s:hover {
    background-image: url(../images/img_menu_o.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top;
    background-color: #fff;
}
.th {
    font-size: 1.3rem;
    padding-top: 2px;
}
.form-select {
    color: #dd9700 !important;
    font-size: 1.2rem !important;
    padding: 3px 40px 3px 10px !important;
}
.bc-01 {
    background-color: #f2f0e7;
}
.sound-1 {
    background-image: url(../images/icon_sound-1.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 38px;
    width: 38px;
    position: relative;
    top: 2px;
}
.sound-1:hover {
    background-image: url(../images/icon_sound-4.png);
}
.sound-1.playing {
    filter: grayscale(100%);
}
.words {
    font-size: 1.1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 2px;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.0);
    padding: 5px 1px 3px 1px;
    position: relative;
    left: 12px;
    align-items: center;
}
.sound-2 {
    background-image: url(../images/icon_sound-2.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 36px;
    width: 36px;
}
.sound-2 {
    background-image: url(../images/icon_sound-1.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 36px;
    width: 36px;
}
.sound-2.playing:hover,
.sound-2.playing {
    background-image: url(../images/icon_sound-c2.png);
}
.sound-2:hover {
    background-image: url(../images/icon_sound-2.png);
}
.sound-2.disabled {
    background-image: url(../images/icon_sound-5.png);
}
.box-1 {
    font-size: 1.1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 2px;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.0);
    padding: 5px 1px 3px 1px;
    position: relative;
    left: 12px;
    align-items: center;
}
.question {
    border-radius: 5px;
    /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);*/
    padding: 10px 5px 12px 5px;
    min-height: 80px;
    margin-bottom: 5px;
}
.question-judge {
    font-size: 1.6rem;
    font-weight: 900;
    color: #e40000;
    text-align: center;
    float: left;
    width: 50px;
    height: 50px;
    display: block !important;
    position: relative;
    top: -4px;
}
.question-no {
    font-size: 1.6rem;
    float: left;
    width: 5%;
    position: relative;
    top: -4px;
}
.question-answer {
    float: left;
    width: 12%;
}
.question-player {
    float: left;
    width: 5%;
}
.question-text {
    float: left;
    font-size: 1.3rem;
    width: 70%;
}
.answer_yes {
    font-size: 1.6rem;
}
.question-answer-2 {
    margin-top: 50px;
    margin-bottom: 10px;
    margin-left: auto;
    float: none;
    clear: both;
    width: 70%;
}
.question-answer-2 .btn {
    font-size: 1.2rem;
    margin-right: 10px;
}
.question-answer-2 .btn-check:checked+.btn-outline-secondary {
    font-size: 1.2rem;
    margin-right: 10px;
    background-color: #008a45 !important;
}

.question .option {
    font-size: 1.2rem;
    line-height: 2.8rem;
    /*margin-left: 5px;*/
    /*margin-right: 10px;*/
    margin-top: 10px;
    padding: 0;
}
.question .option input[type="radio"]{
    display: none;
}
.question .option:has(input[type="radio"]:checked) .option-inner,
.question .option:has(input[type="radio"]:checked):not(:has(.option-inner)) {
    border: 2px solid #CCCCCC;
    background-color: #CCCCCC;
}
.question .option img {
    width: 100%;
    height: auto;
    /*border-top: #fff solid 1px;*/
}
.question .option input[type="radio"] + * .btn-outline-secondary,
.question .option input[type="radio"] + * .btn-danger ,
.question .option input[type="radio"] + * .btn-success {
    border-radius: 8px;
    user-select: auto;
}
.question .option input[type="radio"] + * .btn-outline-secondary {
	border: 2px solid #CCCCCC;
}
.question .option input[type="radio"] + *.btn-outline-danger {
	border: 3px solid #dc3545;
}
.question .option input[type="radio"] + *.btn-outline-success {
	border: 3px solid #198754;
}
.question .option input[type="radio"]:checked:not(:disabled) + * {
    border: 3px solid #04b291;
    border: none;
}
.question .option input[type="radio"] + * .btn-success {
  background-color: #6ab19d;
}


.question .custom-recorder {
    background-color: #474140;
}
.question .custom-recorder .btn {
    width: 50px;
    height: 50px;
    cursor: pointer;
}
.question .custom-recorder .btn-audio-share {
    width: 97px;
}
.question .custom-recorder:has(.start-record:not(.d-none)) .btn-audio-record,
.question .custom-recorder:has(.start-record.d-none) .btn-audio-stop,
.question .custom-recorder:has(.pause-play:not(.d-none)) .btn-audio-pause,
.question .custom-recorder:has(.pause-play.d-none) .btn-audio-play,
.question .custom-recorder:has(.share-file:not(.d-none)) .btn-audio-share {
    display: block;
}
.question .custom-recorder:has(.media-manager[data-file-src="null"]) .btn-audio-play,
.question .custom-recorder:has(.start-record.d-none) .btn-audio-record,
.question .custom-recorder:has(.start-record:not(.d-none)) .btn-audio-stop,
.question .custom-recorder:has(.stop-record:not(.d-none)) .btn-audio-play,
.question .custom-recorder:has(.stop-record:not(.d-none)) .btn-audio-pause,
.question .custom-recorder:has(.pause-play.d-none) .btn-audio-pause,
.question .custom-recorder:has(.pause-play:not(.d-none)) .btn-audio-play,
.question .custom-recorder:has(.share-file.d-none) .btn-audio-share {
    display: none;
}

.menu .part.focus {
	border-bottom: 3px solid var(--elearning-primary);
}

/**
 * 項目分隔條
 */
.divider-bar {
	display: flex;
	align-items: center;
}
.divider-bar .title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--elearning-primary);
	border-radius: 5px;
	padding: 5px 10px;
	color: var(--elearning-primary);
	white-space: nowrap;
}
.divider-bar .line {
	border-bottom: 1px solid var(--elearning-primary);
}
.divider-bar .no {
	padding: 5px 11px;
	color: var(--elearning-primary);
	border-radius: 50%;
	background-color: var(--elearning-lighten-primary);
}

.border-main {
    border-color: var(--elearning-primary) !important;
}

.text-main{
    color: var(--elearning-primary) !important;
}

.basic-top-menu .form-select {
    color: #000000 !important;
	font-size: inherit !important;
}

.basic-top-menu .input-group .btn {
    z-index: 0;
}

.practice .audio-player .btn {
    cursor: url(../images/basic/tip_hand.png) 50 50, auto !important;
}
.practice .option .option-inner {
    background-color: #fff;
    border: 2px solid #e2e2e2;
    cursor: url(../images/basic/tip_hand.png), auto;
}

.practice .question-audio .hover-show {
    display: none;
    right: -100px;
    bottom: -80px;
}
.practice .question-audio:hover .hover-show {
    display: block;
}

.practice .option .option-inner:hover {
    border: 2px solid var(--elearning-lighten-primary);
}
.practice .option.selected .option-inner {
    border: 2px solid var(--elearning-primary);
}
.practice .option.judge-correct .option-inner {
    border: 2px solid var(--elearning-primary) !important;
    background-color: var(--elearning-lighten-primary);
    color: var(--elearning-primary);
}
.practice .option.selected.judge-wrong .option-inner {
    border: 2px solid var(--elearning-danger-primary);
    background-color: var(--elearning-danger-lighten-primary);
    color: var(--elearning-danger-primary);
}
.practice .option.selected.judge-wrong .option-inner .btn-play::before {
    color: var(--elearning-danger-primary);
}
.practice .option .icon-checked,
.practice .option .icon-cross {
    display: none;
    width: 30px;
    height: 30px;
    top: -15px;
    right: -15px;
}
.practice .option.selected .icon-checked,
.practice .option.selected.judge-wrong .icon-cross,
.practice .option.judge-correct .icon-checked {
    display: block;
}

.chinese-toggler .btn:hover,
.chinese-toggler.show .on,
.chinese-toggler:not(.show) .off,
.content-toggler .btn:hover,
.content-toggler.show .on,
/* 無圖片時切換底色，有圖片時直接切換不同 icon，底色維持原樣 */
.content-toggler:not(.show):not(:has(img)) .off {
	background-color: var(--elearning-primary);
	color: white;
}

#loading-container {
    z-index: 99;
}

.icon {
    width: auto;
    height: 30px;
}

.icon-light {
    height: 36px;
    background: transparent;
}

.back-to-top > button {
    width: 70px;
    height: 70px;
}

.word-search-result {
    word-break: keep-all;
    max-height: 70vh;
    z-index: 1025;
}
.word-search-result div:has(.result) {
    overflow-y: auto;
}
.word-search-result .meaning:not(:last-child) {
    border-bottom: 1px solid #b4b4b4;
}

/* 詞彙查詢 */
@media (min-width: 768px) {
    .search-form .search-result {
        height: 75vh;
        overflow-y: scroll;
    }
}

/* mod */

.mod-question .description {
    font-size: 1.5rem;
    line-height: 2rem;
    color: #666;
}
.mod-question .question-area {
    border: 1px solid #CCC;
    padding: 10px;
    margin: 15px 0;
    text-align: center;
}
.mod-question .audio-player i {
    font-size: 5rem;
}

/* 選項組合 */
.mod-option {
    display: flex;
    margin: 10px 0;
}
.mod-option input {
    display: none;
}
.mod-option .content {
    border: 3px solid #FFFFFF;
}
.mod-option .content .text {
    font-size: 2rem;
    padding: 15px;
    background: linear-gradient(135deg, #f4f5fa, #ced4e8);
    border-radius: 5px;
    width: 100%;
}
.mod-option.i-dont-know .content {
    width: 100%;
    text-align: center;
}
.mod-option.i-dont-know .content .text {
    font-weight: bold;
    background: linear-gradient(135deg, #cfd4ec, #8797c7);
}
.mod-option input:checked + .content {
    border: 3px solid #0c4128;
}
.mod-option .content img {
    width: 320px;
    object-fit: contain;
}
.mod-option .no {
    font-size: 2rem;
}

.word-info .word {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: bold;
    display: inline-block;
}

/* ------------------------- RWD 手機補丁（2026/07/06，vendor 頁反代新機後補齊） -------------------------
   全域地基修在 layouts/mooc.blade.php：body grid-template-columns: minmax(0,1fr)（防 max-content 撐爆）。
   本段只處理 vendor 頁內容元件在 <768px 的收縮/換行。 */
@media (max-width: 767.98px) {
    /* cert/vocabulary 級別圓鈕列：換行置中，不撐出畫面（.col 改 auto 寬 → 一列可並排兩顆） */
    .level-buttons { flex-wrap: wrap; justify-content: center; }
    .level-buttons .col { flex: 0 0 auto; width: auto; padding: .5rem !important; }

    /* 拼音長句（living-sentence / daily-hakka）：允許 flex item 收縮讓文字換行；
       拼音音節間常無空格（loiˇngaˊvugˋ…）→ overflow-wrap:anywhere 才斷得開 */
    .hakka-pinyin { min-width: 0; overflow-wrap: anywhere; }
    .hakka-pinyin > * { min-width: 0; }
    .hakka-pinyin_box { flex-wrap: wrap; }

    /* BS5 分頁列（cca 等）：換行 */
    .pagination { flex-wrap: wrap; row-gap: .25rem; }
}