/* =========================================================
   合信計算機前端樣式
   ========================================================= */

#hesin-calculator *,
#hesin-calculator *::before,
#hesin-calculator *::after {
    box-sizing: border-box;
}

#hesin-calculator {
    background: transparent;
    font-family: inherit;
    width: 100%;
}

.hesin-hidden {
    display: none !important;
}

/* ---------------------------------------------------------
   Tab 切換列
   --------------------------------------------------------- */

.hesin-tabs {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 16px;
}

.hesin-tab-btn {
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0.05em;
    background: rgba(218, 218, 218, 0.855);
    color: #898989;
    transition: background 0.2s, color 0.2s;
}

.hesin-tab-btn.active {
    background: linear-gradient(to right, #164D9A 0%, #2099CD 100%);
    color: #fff;
}

.hesin-tab-btn:active,
.hesin-tab-btn:focus,
.hesin-tab-btn:focus-visible {
    color: #898989;
}

.hesin-tab-btn.active:active,
.hesin-tab-btn.active:focus,
.hesin-tab-btn.active:focus-visible {
    color: #fff;
}

@keyframes hesin-tab-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.hesin-tabs.is-pristine .hesin-tab-btn:not(.active) {
    animation: hesin-tab-pulse 1.4s ease-in-out infinite;
}

.hesin-tab-content {
    display: block;
}

/* ---------------------------------------------------------
   卡片容器
   --------------------------------------------------------- */

.hesin-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 5px 5px 18px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

.hesin-card-body {
    padding: 20px;
}

/* ---------------------------------------------------------
   宣傳橫幅
   --------------------------------------------------------- */

.hesin-banner {
    background: linear-gradient(
        to right,
        #AED1FF 0%,
        #BCD8FF 9%,
        #D1DCF3 37%,
        #FFF2D4 57%,
        #C7DDFF 100%
    );
    padding: 40px 30px;
    font-size: 16px;
    font-family: "GenSenRounded2 TW", Sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    color: #333;
    margin-bottom: 0;
    line-height: 1.6;
    min-height: 20px;
}

/* ---------------------------------------------------------
   欄位群組
   --------------------------------------------------------- */

.hesin-section {
    margin-bottom: 0;
}

.hesin-section-label {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ---------------------------------------------------------
   下拉選單 / 輸入欄位
   --------------------------------------------------------- */

.hesin-select {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border: 1px solid #164D9A;
    border-radius: 5px;
    font-size: 15px;
    color: #333;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238C8C8C' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    appearance: none;
    -webkit-appearance: none;
}

.hesin-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #8C8C8C;
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
}

.hesin-select:disabled {
    border: 1px solid #E6E6E6;
    color: #8C8C8C;
    cursor: not-allowed;
}

/* ---------------------------------------------------------
   欄位容器區塊（帶底部間距）
   --------------------------------------------------------- */

.hesin-section-block {
    margin-bottom: 12px;
}

/* ---------------------------------------------------------
   Grid 佈局
   --------------------------------------------------------- */

.hesin-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hesin-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

/* 期望金額 + 分期期數並排包裝層
   內含 3 個子 div，JS 確保同時只有 2 個可見（total-group 或 monthly-group + periods-group）
   display:none 的子元素不佔 grid 格，故恆為 2 欄 */
.hesin-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

/* ---------------------------------------------------------
   範圍提示文字
   --------------------------------------------------------- */

.hesin-range-hint {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

#hesin-moto-loan-range {
    display: none;
}

/* ---------------------------------------------------------
   按鈕
   --------------------------------------------------------- */

.hesin-btn-primary {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(to right, #F2B544 0%, #FFDD9E 77%);
    color: #333;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.3s, transform 0.3s;
}
.hesin-btn-primary:hover {
    background: linear-gradient(90deg, #FFDD9E 0%, #F2B544 100%);
    transform: scale(0.8);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
.hesin-btn-primary:active,
.hesin-btn-primary:focus,
.hesin-btn-primary:focus-visible {
    color: #333;
}

.hesin-btn-apply {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(to right, #F2B544 0%, #FFDD9E 77%);
    color: #333;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background 0.3s, transform 0.3s;
}
.hesin-btn-apply:hover {
    background: linear-gradient(90deg, #FFDD9E 0%, #F2B544 100%);
    transform: scale(0.8);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
.hesin-btn-apply:active,
.hesin-btn-apply:focus,
.hesin-btn-apply:focus-visible {
    color: #333;
}

#hesin-quick-calculator .hesin-btn-line,
#hesin-calculator .hesin-btn-line,
#hesin-apply-wrap .hesin-btn-line {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(to right, #164D9A 0%, #2099CD 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    outline: none;
    transition: background 0.3s, transform 0.3s;
}
.hesin-btn-line br { display: none; }
.hesin-qs-br { display: none; }
#hesin-quick-calculator .hesin-btn-line:hover,
#hesin-calculator .hesin-btn-line:hover,
#hesin-apply-wrap .hesin-btn-line:hover {
    background: linear-gradient(90deg, rgb(32, 153, 205) 0%, rgb(22, 77, 154) 100%);
    color: #fff;
    text-decoration: none;
    transform: scale(0.8);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
#hesin-quick-calculator .hesin-btn-line:active,
#hesin-quick-calculator .hesin-btn-line:focus,
#hesin-quick-calculator .hesin-btn-line:focus-visible,
#hesin-calculator .hesin-btn-line:active,
#hesin-calculator .hesin-btn-line:focus,
#hesin-calculator .hesin-btn-line:focus-visible,
#hesin-apply-wrap .hesin-btn-line:active,
#hesin-apply-wrap .hesin-btn-line:focus,
#hesin-apply-wrap .hesin-btn-line:focus-visible {
    color: #fff;
    text-decoration: none;
    box-shadow: none;
    outline: none;
}

/* ---------------------------------------------------------
   結果區塊
   --------------------------------------------------------- */

#hesin-result {
    padding: 16px 20px 20px;
}

.hesin-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 10px;
    border-radius: 8px;
    margin-bottom: 12px;
    justify-items: center;
}

.hesin-result-item {
    min-width: 0;
}

.hesin-result-label {
    font-size: 16px;
    color: #2D2D2D;
    margin-bottom: 6px;
}

.hesin-result-amount {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 20px;
    font-weight: 500;
    color: #2D2D2D;
}

.hesin-result-unit {
    font-size: 16px;
    font-weight: 500;
    color: #2D2D2D;
}

.hesin-result-number {
    font-size: 32px;
    font-weight: 700;
    color: #E53E3E;
    display: inline-block;
    text-align: center;
}

#hesin-loan-amount .hesin-result-number {
    min-width: 7ch;
}

#hesin-monthly-payment .hesin-result-number {
    min-width: 6ch;
}

.hesin-result-amount.hesin-result-placeholder .hesin-result-unit,
.hesin-result-amount.hesin-result-placeholder .hesin-result-number {
    color: #CCCCCC;
}

.hesin-result-suggestion {
    background: #FFF6DC;
    color: #0d3a78;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    line-height: 1.5;
}

.hesin-suggestion-highlight {
    font-weight: 600;
}

/* ---------------------------------------------------------
   RWD — 手機（≤ 551px）
   --------------------------------------------------------- */

@media (max-width: 551px) {
    .hesin-btn-line br { display: inline; }
    .hesin-qs-comma { display: none; }
    .hesin-qs-br { display: inline; }
    .hesin-grid-2,
    .hesin-grid-3 {
        grid-template-columns: 1fr;
    }
    .hesin-result-grid {
        grid-template-columns: 1fr;
        justify-items: start;
    }
    .hesin-row-2 {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .hesin-tab-btn {
        font-size: 14px;
    }
    .hesin-section-label {
        font-size: 14px;
    }
    .hesin-select {
        font-size: 13px;
    }
    .hesin-input {
        font-size: 13px;
    }
    .hesin-range-hint {
        font-size: 11px;
    }
    .hesin-btn-primary,
    .hesin-btn-apply,
    .hesin-btn-line {
        font-size: 15px;
    }
    .hesin-result-label {
        font-size: 13px;
    }
    .hesin-result-amount,
    .hesin-result-unit {
        font-size: 16px;
    }
    .hesin-result-number {
        font-size: 30px;
    }
}

/* ---------------------------------------------------------
   RWD — 大螢幕（≥ 1440px）快速計算機
   --------------------------------------------------------- */

@media (min-width: 1440px) {
    #hesin-quick-calculator .hesin-result-unit {
        font-size: 18px;
    }
    #hesin-quick-calculator .hesin-result-number {
        font-size: 42px;
    }
}