/*storage專用css*/
/* custom.css */

:root {
    /* 1. 將顏色轉換為 RGB 數值 (用於支援透明度變化) */
    --bs-light-coffee-rgb: 240, 236, 228;
    /* #F0ECE4 */
    --bs-dark-coffee-rgb: 230, 225, 214;
    /* #E6E1D6 */
    --bs-blue-rgb: 47, 146, 197;
    /* #2F92C5 */
    --bs-lg-red-rgb: 165, 0, 52;
    /* #A50034 */
    --bs-bright-red-rgb: 234, 25, 23;
    /* #EA1917 */
    --bs-deep-black-rgb: 81, 81, 81;
    /* #515151 */
    --bs-light-black-rgb: 112, 112, 112;
    /* #707070 */
    --bs-light-gray-rgb: 193, 193, 193;
    /* #C1C1C1 */

    --bs-primary-rgb: var(--bs-blue-rgb);
    --bs-danger-rgb: var(--bs-bright-red-rgb);
    --bs-dark-rgb: var(--bs-deep-black-rgb);
    --bs-secondary-rgb: var(--bs-light-gray-rgb);
}


/* 底色類別 */
.bg-light-coffee {
    background-color: rgb(var(--bs-light-coffee-rgb)) !important;
}

.bg-dark-coffee {
    background-color: rgb(var(--bs-dark-coffee-rgb)) !important;
}

.bg-lg-red {
    background-color: rgb(var(--bs-lg-red-rgb)) !important;
}

.bg-light-black {
    background-color: rgb(var(--bs-light-black-rgb)) !important;
}

.bg-bright-red {
    background-color: rgb(var(--bs-bright-red-rgb)) !important;
}

.bg-blue {
    background-color: rgb(var(--bs-blue-rgb)) !important;
}

/* 文字顏色類別 */
.text-lg-red {
    color: rgb(var(--bs-lg-red-rgb)) !important;
}

.text-light-black {
    color: rgb(var(--bs-light-black-rgb)) !important;
}

.text-deep-black {
    color: rgb(var(--bs-deep-black-rgb)) !important;
}

.text-blue {
    color: rgb(var(--bs-blue-rgb)) !important;
}


/* 4. 支援透明度的進階用法 (這能解決您之前問的 --bs-bg-opacity 問題) */
.bg-blue {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-blue-rgb), var(--bs-bg-opacity)) !important;
    border-color: rgba(var(--bs-blue-rgb), var(--bs-bg-opacity)) !important;
}

/* 圓角規範 */
:root {
    --radius-bg-img: 20px;
    /* 底圖圓角 */
    --radius-btn: 23px;
    /* 按鈕圓角 */
    --radius-btn-sm: 16px;
    /* 驗證碼圓角 */
    --radius-table: 10px;
    /* 表格圓角 */
}

/* 建立對應的 CSS Class */

/* 底圖/容器使用 */
.rounded-20 {
    border-radius: var(--radius-bg-img) !important;
    overflow: hidden;
}

/* 按鈕使用 (通用與驗證碼) */
.rounded-btn {
    border-radius: var(--radius-btn) !important;
}

.rounded-otp {
    border-radius: var(--radius-btn-sm) !important;
}

/* 表格/卡片使用 */
.rounded-table {
    border-radius: var(--radius-table) !important;
    overflow: hidden;
}

/* 如果是表格，通常需要針對 table 標籤本身或其容器設定 */
.table-custom-wrapper {
    border-radius: var(--radius-table);
    overflow: hidden;
    border: 1px solid var(--bs-light-gray-rgb);
}

.icon-login {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*註冊登入未啟用*/
.btn-white:focus,
.btn-white:hover {
    background-color: rgb(var(--bs-blue-rgb)) !important;
    border-color: rgb(var(--bs-blue-rgb)) !important;
    color: rgb(var(--bs-white-rgb)) !important
}

/* 原本的寫法會直接偵測 invalid，造成一進站就亮紅字。
  現在加上 .was-validated 限定：只有在表單送出後，才啟用這個檢查。
*/
.was-validated .input-group:has(.form-control:invalid)+.invalid-feedback {
    display: block !important;
    width: 100%;
    margin-top: 0.25rem;
    padding-left: 3.2rem;
    color: #EA1917;
    /* 您的鮮紅色 */
}

/* 針對不支援 :has 的舊瀏覽器備案 (雖然現代瀏覽器大多支援了) */
.was-validated .form-control:invalid~.invalid-feedback {
    display: block !important;
}

/*驗證碼*/
.btn-verify {
    padding: 0 1rem !important;
    margin-bottom: 0.5rem !important
}

/*註冊同意條款checkbox*/
.form-check-input:checked {
    background-color: rgb(var(--bs-lg-red-rgb)) !important;
    border-color: rgb(var(--bs-lg-red-rgb)) !important
}

/*圈選範圍變色*/
/*::selection {color: #A50034; background-color: rgba(230, 225, 214, .1);}*/
/* --- 修正紅色背景區域的文字選取顏色 --- */

.bg-deep *::selection {
    background-color: #ffffff !important; /* 選取範圍的背景改成純白 */
    color: #A50034 !important;            /* 文字改成 LG 紅 */
    
    /* 針對 Webkit 瀏覽器 (Chrome/Safari) 的額外設定確保生效 */
    -webkit-text-fill-color: #A50034 !important;
}

/* 為了相容 Firefox，需重複寫一次 */
.bg-deep *::-moz-selection {
    background-color: #ffffff !important;
    color: #A50034 !important;
}

/*註冊接受條款*/
.invalid-feedback {
    color: #EA1917 !important;
}

.was-validated .form-check-input:invalid~.form-check-label {
    color: #51596c !important;
}

/* 錯誤訊息加上icon */
/* 1. 設定 invalid-feedback 在顯示時改為 flex 佈局 (為了讓 icon 與文字垂直置中) */
.was-validated .form-control:invalid~.invalid-feedback,
.was-validated .input-group:has(.form-control:invalid)+.invalid-feedback,
.form-control.is-invalid~.invalid-feedback,
.d-block.invalid-feedback {
    /* 包含手動顯示的情況 */
    display: flex !important;
    /* 蓋過 BS5 預設的 block */
    align-items: center;
    /* 垂直置中 */
}

/* 2. 使用 ::before 偽元素加入 Icon */
.invalid-feedback::before {
    /* 核心設定 */
    font-family: "bootstrap-icons";
    /* 指定使用 Bootstrap Icons 字體 */
    content: "\f33b";
    /* 這是驚嘆號三角形的 Unicode */

    /* 外觀設定 */
    margin-right: 0.5rem;
    /* Icon 與文字的距離 */
    font-size: 1.1em;
    /* 稍微放大一點點比較明顯 */
    line-height: 1;
}

/*每一頁在END HEADER下面的div設定p-頁面名稱*/
/*輸入序號的空格*/
.p-sn .invalid-feedback {
    padding-left: 1.2rem !important;
}

/*輸入框變色*/
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: #EA1917 !important;
}

.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: #EA1917 !important;
}

.form-control#ServiceNumber,
.form-control#info-PhoneNumber,
.form-control#info-Name,
.form-control#info-Address,
.form-select#info-county,
.form-select#info-district,
.form-select#info-street,
.form-control#info-floor {
    border-radius: 1rem !important;
}

.form-select {
    color: #51596c !important;
}

/**/
/* 設定服務說明文字區塊的樣式 */
.termsText {
    /* 1. 高度限制 */
    max-height: 40vh;
    /* 設定最大高度為螢幕高度的 50%，您可以依需求調整數值 (例如 40vh 或 300px) */

    /* 2. 卷軸設定 */
    overflow-y: auto;
    /* 當內容超過高度時，自動出現垂直卷軸 */

    /* 3. 版面保護 */
    width: 100%;
    /* 寬度佔滿容器 */
    overflow-x: hidden;
    /* 禁止水平卷軸，防止版面被撐寬 */
    word-wrap: break-word;
    /* 強制長單字換行，防止網址撐爆版面 */

    /* 4. 美化 (選用) */
    /*background-color: #f8f9fa; /* 加上淺灰底色，讓區域更明顯 */
    padding-right: 1rem;
    /* 內距，讓文字不要貼邊 */
    /*border-radius: 8px;/* 圓角 */
    /*border: 1px solid #dee2e6; /* 淺灰邊框 */
    font-size: 0.9rem;
    /*稍微縮小字體讓閱讀更舒適*/
    line-height: 1.6;
    /* 增加行高，提升閱讀性 */
    /*color: #333;       /* 文字顏色 */
}

/* 自定義卷軸樣式 (選用，讓卷軸在 Webkit 瀏覽器如 Chrome/Safari 更好看) */
.termsText::-webkit-scrollbar {
    width: 8px;
}

.termsText::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.termsText::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.termsText::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/**/
.p-info .input-group-lg>.form-select {
    padding-right: 0 !important;
}

/* space.html 寄存空間選擇 */
.p-space .card-body {
    padding: 1.75rem !important;
}

.space-main-title {
    line-height: 1.35;
}

.space-subtitle {
    font-size: 1rem;
    line-height: 1.35;
}

.space-note {
    border: 1px solid #2f92c5;
    border-radius: 15px;
    background-color: #e8f2ff;
    padding: 1rem 1.2rem;
}

.space-note p {
    color: #61748c;
    font-size: .875rem;
    line-height: 1.6;
}

.space-section-title {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
}

.space-option-row {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.3rem;
    margin-bottom: 1.5rem;
}

.space-option-label {
    color: #707070;
    font-size: .875rem;
    min-width: 3.6rem;
}

.space-option-group {
    display: flex;
    gap: 0.7rem;
}

.space-option-btn {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #bfc1c4;
    border-radius: 10px;
    background-color: #f5f5f5;
    color: #707070;
    font-size: 1rem;
    display: grid;
    place-items: center;
    padding: 0 !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.space-option-btn:hover {
    background-color: #f01414;
    border-color: #f01414;
    color: #fff;
    /* border-color: #bfc1c4;
    color: #707070; */
}

.space-option-btn.is-active {
    background-color: #f01414;
    border-color: #f01414;
    color: #fff;
}

.space-total {
    color: #707070;
    font-size: .875rem;
    line-height: 1.4;
}


/*nav*/
.navbar.navbar-scrolled.navbar-light {
    background-color: rgb(var(--bs-light-coffee-rgb)) !important;
}

.navbar-expand-lg .navbar-collapse {
    background-color: rgb(var(--bs-light-coffee-rgb)) !important;
}

/* Offcanvas 背景模糊效果 */
.offcanvas-backdrop.show {
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    /* 支援 Safari */
    background-color: rgba(63, 47, 15, 0.5);
    /* 調整遮罩透明度 */
}

.offcanvas {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.offcanvas-body {
    background-color: #F0ECE4;
}

.logo-edti {
    width: 80%;
    min-width: 4rem;
    max-width: 4rem;
}

.footer-txt {
    font-size: 0.9rem;
}

.card-login .card-body {
    padding: 2rem !important;
    border-radius: 20px !important;
}

.card-login .timeline-body {
    padding: 1rem !important;
    border-radius: 20px !important;
}

.card {
    border-radius: 20px !important; border: none !important;
}

.navbar-light .navbar-toggler {
    border: none;
}

.navbar-light .navbar-brand {
    padding: 10px 0px;
}

.navbar-light .navbar-brand img {
    height: 2rem;
}

.container {
    max-width: 400px;
}

/* --- 統一提示文字顏色設定 --- */
/* 1. 設定 Input 的 placeholder 顏色 */
.form-control::placeholder {
    color: #8c98a4 !important;
    opacity: 1;
    /* 修正 Firefox 透明度問題 */
}

/* 2. 設定 Select 在「未選擇」時的顏色 */
select.form-select:required:invalid {
    color: #8c98a4 !important;
}

/* 3. 點開選單後的選項恢復深色 */
option {
    color: #51596c !important;
    /* 恢復成您原本設定的深色 */
}

/* --- 圓形修改按鈕樣式 --- */

/* 設定顏色為 LG 紅 */
.custom-edit-btn {
    background-color: #A50034 !important;
    /* 使用您指定的顏色 */
    border-color: #A50034 !important;
}

/* 滑鼠移過去時的顏色變化 (稍微變深) */
.custom-edit-btn:hover {
    background-color: #8a002b !important;
    border-color: #8a002b !important;
}

/* 定位設定 (將按鈕浮動在卡片右下角) */
/* 請確保外層的 card 有 position: relative (Unify 模板預設通常有) */
.card-body {
    position: relative;
    /* 確保父層是定位基準點 */
}

.custom-edit-btn {

    z-index: 10;
    /* 確保浮在其他內容上面 */
}

.custom-edit-btn .bi {
    font-size: 1.2rem !important;
    /* 圖示縮小 */
}

/* 設定內層清單樣式 */
.custom-sub-list {
    list-style-type: disc;
    /* 確保顯示圓形小點 */
    list-style-position: outside;
    /* 符號在文字框外，這是對齊關鍵 */
    padding-left: 1.2rem;
    /* 這裡控制「內文層次感」的縮排距離，可依喜好調整 */
    margin-left: 0;
    /* 確保容器不額外推開距離 */
}

.custom-sub-list li {
    margin-bottom: 2px;
    /* 調整小點之間的間距 */
}

/* --- 設定同意按鈕 Disabled 狀態為指定灰色 --- */
#agree-btn.disabled,
#agree-btn:disabled {
    background-color: rgb(var(--bs-light-gray-rgb)) !important;
    border-color: rgb(var(--bs-light-gray-rgb)) !important;
    opacity: 1 !important;
    color: #fff !important;
}

/* 步驟數字圓圈樣式 */
.step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    /* 圓圈寬度 */
    height: 25px;
    /* 圓圈高度 */
    background-color: rgb(var(--bs-blue-rgb));
    /* 使用您的藍色變數 */
    color: #fff;
    /* 數字顏色 */
    font-weight: 600;
    /* 數字粗細 */
    border-radius: 50%;
    /* 變成圓形 */
    font-size: 0.9rem;
    /* 數字大小 */
    margin-top: 2px;
    /* 微調對齊第一行文字 */
}

.title-header {
    background-color: rgb(var(--bs-blue-rgb)) !important;
    border-color: rgb(var(--bs-blue-rgb)) !important;
    color: rgb(var(--bs-white-rgb)) !important
}

.p-guide-steps .card-body {
    padding: 1.75rem !important;
}

.rounded-guide {
    border-radius: 3rem !important;
}

.rounded-guide .card-body {
    padding: 1rem 1.75rem !important;
}

/* guide-steps 寄件編號區塊 */
/* .ship-code-card h5 {
    font-size: 2rem;
    letter-spacing: 0.08em;
} */

.ship-code-qr {
    width: min(68vw, 250px);
    background-color: #fff;
    padding: 0.8rem;
    border-radius: 20px !important;
    border: none !important;
}

.ship-code-qr img {
    display: block;
    width: 100%;
    height: auto;
}

.ship-code-note {
    line-height: 1.8;
}

.ship-code-flow p {
    font-size: 1.05rem;
    line-height: 1.85;
}

.ship-code-list-header {
    background-color: #7f7f7f;
    padding: 0.75rem 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2;
}

.ship-code-list-body {
    background-color: #dfddd5;
    padding: 1rem 1rem 1.25rem;
}

.ship-code-list-body p {
    color: #666a72;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-size: 2rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    line-height: 1.2;
}

/* --- 3D Hover 效果 --- */
/* 1. 設定過渡動畫的平滑度 */
.transition-3d-hover {
    transition: all 0.3s ease-in-out;
    backface-visibility: hidden;
    /* 避免動畫閃爍 */
}

/* 2. 設定滑鼠移過去時的動作 */
.transition-3d-hover:hover,
.transition-3d-hover:focus {
    /* 往上浮起 5px */
    transform: translateY(-5px);

    /* 加深陰影，增加立體感 */
    /* !important 確保覆蓋原本的 card-shadow */
    box-shadow: 0 1rem 2.5rem rgba(140, 152, 164, 0.175) !important;

    /* 確保浮起來時在最上層 */
    z-index: 2;
}

.qrcode img {
    width: 150px;
    height: 150px;
    display: block;
}

.line-qr-edti img {
    width: 8rem !important;
    height: 8rem !important;
}

.lg-contact-icon img {
    width: 100% !important;
    height: 100% !important;
}

/*FAQ*/
.accordion-button {
    font-size: medium !important;
    padding: 1rem !important;
    background-color: #ffffff !important;
    box-shadow: none;
}

/* 2. 展開狀態 (Active)：設定您指定的顏色 */
.accordion-button:not(.collapsed) {
    background-color: #F5F7FA !important;
    /* 展開時的背景色 */
    box-shadow: none;
    /* 移除藍色陰影 */

}

.accordion-body {
    padding-left: 1rem;
}

.icon-copy-location {
    top: -0.8rem !important;
    right: -1.2rem !important;
}

.icon-copy-location button {
    font-size: 1.2rem !important;
    color: #FFF !important
}

.text-success {
    color: #FFF !important
}

/* --- 訂單進度條樣式 --- */

/* 1. 個別步驟項目的設定 */
.step-item {
    display: flex;
    flex-direction: column;
    /* 垂直排列：文字-圖-文字 */
    align-items: center;
    /* 水平置中 */
    width: 60px;
    /* 固定寬度確保置中對齊 */
    text-align: center;
}

/* 2. 上方標籤文字 */
.step-label-top {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    color: #8c98a4;
    /* 預設灰色 */
}

/* 3. 下方日期文字 */
.step-label-bottom {
    font-size: 0.875rem;
    margin-top: 0.5rem;
    color: #8c98a4;
    /* 預設灰色 */
}

/* 4. 圓圈容器 (如要白底遮住後面的灰線) */
.step-circle-wrapper {
    background-color: #fff;
    /* 重要：用白底遮住穿越的灰線 */
    padding: 0;
    /* 如要圓圈的左右留白，在此設定 */
}

/* 5. 外圈樣式 (空心圓) */
.step-circle-outer {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #C1C1C1;
    /* 預設淺灰框 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 6. 內圈樣式 (實心圓點) */
.step-circle-inner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #C1C1C1;
    /* 預設淺灰底 */
}

/* --- 啟用狀態 (Active) 的顏色變化 --- */
.step-item.active .step-label-top,
.step-item.active .step-label-bottom {
    color: #A50034 !important;
    /* LG 紅色文字 */
}

.step-item.active .step-circle-outer {
    border-color: #A50034 !important;
    /* LG 紅色外框 */
}

.step-item.active .step-circle-inner {
    background-color: #A50034 !important;
    /* LG 紅色實心圓 */
}

.timeline-line {
    height: 4px;
    background-color: #C1C1C1;
    top: 42px;
    z-index: 0;
    left: 30px;
    right: 30px;
}


.text-big-btn {text-align: justify; text-align-last: justify;}

.input-group-lg>.btn, .input-group-lg>.form-control, .input-group-lg>.form-select, .input-group-lg>.input-group-text
 {
    font-size: .875rem !important;
}