@charset "utf-8";
/* =========================================
   信用卡服務區塊卡片 (Bank Service Cards)
========================================= */

/* 外層網格佈局：自動適應寬度，最小寬度 320px */
.bank-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bank-card-grid li {
    margin: 0;
    padding: 0;
}

/* 卡片本體 */
.bank-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background-color: #ffffff;
    border: 1px solid #F3F4F6; /* 非常淡的淺灰邊框 */
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); /* 預設極淡陰影 */
}

/* 滑鼠懸浮特效：陰影加深、邊框微亮 */
.bank-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    border-color: #E5E7EB;
    transform: translateY(-2px);
}

/* --- 上半部：圖示 + 標題 + 按鈕 --- */
.bank-card__header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

/* 左側粉紅色信用卡圖示 */
.bank-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: #FFF1F2; /* 淡粉紅底色 */
    border: 1px solid #FECDD3; /* 粉紅邊框 */
    border-radius: 10px; /* 微圓角矩形 */
    color: #E11D48; /* 深桃紅色 Icon */
    margin-right: 16px;
}

.bank-card__icon svg {
    width: 20px;
    height: 20px;
}

/* 中間標題 */
.bank-card__title {
    flex-grow: 1;
    font-size: 1.125rem;
    font-weight: 700;
    color: #374151; /* 深灰近黑 */
    letter-spacing: 0.5px;
}

/* 右側「前往預約」幽靈按鈕 */
.bank-card__btn {
    flex-shrink: 0;
    font-size: 0.8125rem; /* 約 13px */
    color: #9CA3AF; /* 灰色字體 */
    border: 1px solid #E5E7EB; /* 灰色邊框 */
    padding: 4px 12px;
    border-radius: 99px; /* 膠囊狀 */
    transition: all 0.3s ease;
}

/* 懸浮卡片時，「前往預約」按鈕亮起暗示可點擊 */
.bank-card:hover .bank-card__btn {
    color: #E11D48;
    border-color: #FECDD3;
    background-color: #FFF1F2;
}

/* --- 下半部：標籤 --- */
.bank-card__footer {
    display: flex;
}

/* 左下角「快速入口」標籤 */
.bank-card__tag {
    font-size: 0.8125rem; /* 約 13px */
    color: #6B7280; /* 灰藍色字體 */
    background-color: #F3F4F6; /* 淺灰底色 */
    padding: 4px 12px;
    border-radius: 99px; /* 膠囊狀 */
}