/* --- 1. 全域基礎設定 --- */
html {
  min-height: 100%;
}

/* 全新 Banner 容器樣式 */
.banner-img-perfect {
    width: 100%;       /* 寬度撐滿 */
    height: auto;      /* 高度根據比例自動計算，絕對不裁切 */
    display: block;
    object-fit: contain; /* 確保內容完整 */
}

/* 為了防止圖片切換時頁面閃爍，可以設定一個最大高度（可選） */
#homeBanner {
    max-height: 80vh; /* 防止在超寬螢幕上圖片變得太巨大 */
    overflow: hidden;
    background-color: #fff; /* 如果圖片比例不一，底色設為白色 */
}

/* 響應式調整：手機端高度縮減，避免太突兀 */
@media (max-width: 768px) {
    .banner-wrapper {
        height: 450px;
    }
    .banner-content {
        padding: 1.5rem;
    }
    .banner-content h1 {
        font-size: 2rem;
    }
}

/* 輪播切換淡入效果 (如果你想要更高級的感覺) */
.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: 0.8s;
    transition-property: opacity;
}
.carousel-fade .carousel-item.active {
    opacity: 1;
}.banner-image-container

/* 會員姓名樣式 */
.member-name {
    font-size: 0.9rem;
    color: #5a5a5a;
    letter-spacing: 0.5px; /* 增加一點點字距更有質感 */
}
/* ==========================================================================
   Register Page (註冊頁面樣式)
   ========================================================================== */
   /* 延續登入頁面的色調與風格 */
   body {
       background-color: #fcf9f7; /* 極淺奶油色背景 */
       color: #4a4a4a;
   }

   .register-card {
       border: none;
       border-radius: 20px;
       background-color: #ffffff;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
   }

   .card-title {
       color: #5D4037;
       font-weight: 700;
       letter-spacing: 1px;
   }

   /* 輸入框風格 */
   .form-control {
       border: 1px solid #eee;
       padding: 0.75rem 1.25rem;
       background-color: #f8f9fa;
       transition: all 0.3s ease;
   }

   .form-control:focus {
       background-color: #fff;
       border-color: #d7ccc8;
       box-shadow: 0 0 0 0.25rem rgba(215, 204, 200, 0.25);
   }

   /* 標籤字體 */
   .form-label {
       color: #8d6e63;
       font-size: 0.9rem;
       margin-left: 10px;
   }

   /* 按鈕風格優化 */
   .btn-primary {
       background-color: #ffffff;
       border: 1.5px solid #5D4037;
       color: #5D4037;
       transition: all 0.3s ease;
   }

   .btn-primary:hover {
       background-color: #5D4037;
       border-color: #5D4037;
       color: #ffffff;
       transform: translateY(-1px);
   }

   .form-text {
       font-size: 0.8rem;
       color: #9e9e9e;
   }
   
/* ==========================================================================
   Register Page (登入頁面樣式)
   ========================================================================== */
.login-page-wrapper {
    background-color: #fdf8f5; /* 淡淡的暖咖啡色/米色 */
    min-height: calc(100vh - 56px); /* 扣除導覽列高度，確保背景撐到底 */
    display: flex;
    align-items: center;
}

/* 確保卡片是純白色的，這樣在淡淡背景上才會有層次感 */
.login-page-wrapper .card {
    background-color: #ffffff;
}

/* 如果你想要更貼近圖片中的陰影感 */
.login-page-wrapper .card.shadow-sm {
    box-shadow: 0 0.5rem 1.5rem rgba(111, 78, 55, 0.08) !important;
}

body {
	margin: 0;
	padding: 0;
}

a {
  color: #0077cc;
  text-decoration: none;
}

/* --- 2. 導覽列頁首 (Navbar) --- */
.navbar {
    background-color: white !important;
    border-bottom: 1px solid #eee;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* 麵包屑導航美化 */
.breadcrumb {
    font-size: 1.1rem; /* 稍微調大一點，預設通常是 1rem 或更小 */
    padding: 10px 0;   /* 增加上下間距，讓它不那麼擁擠 */
}

/* 針對麵包屑裡的連結（首頁） */
.breadcrumb-item a {
    color: #6F4E37; /* 改成你的巧克力主題色，比較統一 */
    text-decoration: none;
    font-weight: 500;
}

/* 針對最後一個項目（目前產品名稱，通常沒有連結） */
.breadcrumb-item.active {
    color: #8D6E63; /* 淺一點的咖啡色 */
    font-weight: bold; /* 加粗讓商品名更清楚 */
}



/* 購物車數量小紅/黑圈 */
.cart-badge {
    font-size: 0.6rem;
    padding: 0.25em 0.45em; /* 讓圈圈更圓潤一點 */
    font-weight: 500;
    line-height: 1;
    min-width: 1.2rem; /* 確保只有 1 個數字時也是圓的 */
}

/* 如果你希望數字圈圈稍微往圖示中心靠一點，可以調整這裡 */
.translate-middle {
    transform: translate(-30%, -30%) !important;
}

/* 隱藏下拉選單的小箭頭 */
.dropdown-toggle::after {
    display: none;
}

/* 下拉選單美化 */
.dropdown-menu {
    border-radius: 12px; /* 圓角 */
    padding: 0.5rem;
    margin-top: 15px !important; /* 讓選單跟 Navbar 保持一點距離 */
    box-shadow: 0 10px 25px rgba(191, 163, 126, 0) !important; /* 柔和陰影 */
}

.dropdown-item {
    border-radius: 8px; /* 選項也要圓角 */
    font-size: 0.9rem;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #bfa37e; /* 你的甜點主題色 */
}

/* --- 4. 產品卡片元件 (Product Cards) --- */
.product-card:hover {
    transform: translateY(-2px);
    transition: 0.3s;
}

.card-img-top {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

/* ==========================================================================
   🎯 CakeShop 購物車自訂視覺風格
   ========================================================================== */
   
   /* 🎯 自訂輕熟感刪除按鈕 */
.btn-cake-danger {
	background-color: #c96b6b; /* 柔和、降低飽和度的豆沙紅 */
	color: #ffffff !important;
	border: 1px solid #c96b6b;
	transition: all 0.2s ease-in-out;
}

   .btn-cake-danger:hover {
       background-color: #b35353; /* 滑鼠移入時優雅加深 */
       border-color: #b35353;
}

/* 1. 質感淡咖啡色【線條】按鈕（適用於：清空購物車、繼續購物） */
.btn-outline-cake {
    border: 1px solid #a38570;
    color: #a38570;
    background-color: transparent;
    transition: all 0.25s ease-in-out;
}
.btn-outline-cake:hover {
    background-color: #fcfaf7; /* 歐蕾白微醺漸變 */
    color: #8c6f5a;
    border-color: #8c6f5a;
}

/* 2. 濃郁烘焙咖啡色【實心】按鈕（適用於：前往結帳、加入購物車等核心主視覺） */
.btn-cake {
    background-color: #a38570; /* 經典拿鐵咖啡主色 */
    color: #ffffff !important;  /* 確保文字是清晰的純白 */
    border: 1px solid #a38570;
    transition: all 0.25s ease-in-out;
}
.btn-cake:hover {
    background-color: #8c6f5a; /* 滑鼠移入時加深為濃縮咖啡色，質感大加分 */
    border-color: #8c6f5a;
    box-shadow: 0 4px 12px rgba(163, 133, 112, 0.15) !important; /* 優雅的咖啡色系微陰影 */
}

/* 🎯 自訂淡咖啡色風格按鈕 */
.btn-outline-cake {
    border: 1px solid #a38570;
    color: #a38570;
    background-color: transparent;
    transition: all 0.2s ease-in-out; /* 讓滑鼠移入時的淡色漸變更平滑 */
}

/* 🎯 滑鼠移入（Hover）時的微醺歐蕾白效果 */
.btn-outline-cake:hover {
    background-color: #fcfaf7;
    color: #8c6f5a;         /* 滑鼠移入時文字稍微加深，增加視覺層次 */
    border-color: #8c6f5a;   /* 邊框同步加深 */
}

/* --- 5. 按鈕樣式：全站統一 --- */
/* [列表頁/詳情頁] 查看詳情：雙線圈空心咖啡色 */
.btn-outline-coffee {
    color: #6F4E37 !important;
    background-color: transparent !important;
    border-radius: 50px !important;
    font-weight: 500;
    /* 修正：合併 border 設定，使用 1px 作為內線 */
    border: 1px solid #6F4E37 !important; 
    /* 雙線圈核心：白色間隔 + 咖啡色外線 */
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #6F4E37 !important;
    /* 增加內距讓橢圓更精緻 */
    padding: 6px 20px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-outline-coffee:hover {
    background-color: #6F4E37 !important;
    color: #ffffff !important;
    box-shadow: none !important; /* 移入時取消雙線，變回實心 */
    transform: translateY(-2px);
}

/* [列表頁/詳情頁] 加入購物車：實心巧克力色 */
.btn-primary, 
.product-card .btn-primary {
    background-color: #6F4E37 !important;
    border-color: #6F4E37 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    font-weight: 500;
    padding: 8px 20px !important;
    transition: all 0.3s ease;
	}
	
	/* 限制描述高度，讓所有卡片起跳線一致 */
	.text-truncate-2 {
	    display: -webkit-box;
	    -webkit-line-clamp: 2; /* 限制兩行 */
	    -webkit-box-orient: vertical;  
	    overflow: hidden;
	    min-height: 3rem; /* 即使只有一行也佔兩行的空間 */
	}

	/* 確保咖啡色按鈕樣式 */
	.btn-outline-coffee {
	    color: #a67c52;
	    border-color: #a67c52;
	}

	.btn-outline-coffee:hover {
	    background-color: #a67c52;
	    color: white;
	}
	
.member-price-highlight {
	    font-family: 'Arial Black', 'Impact', 'Microsoft JhengHei', sans-serif;
	    font-size: 2.2rem;
	    font-weight: 900;
	    letter-spacing: -1px;
	    color: #dc3545;
	    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
	    display: inline-block;
	}
	
/* --- _關於我們_頁面 --- */
.about_top {
	width: 100%;
    height: 400px; /* 控制大圖高度 */
    background-size: cover; /* 圖片完整覆蓋區塊 */
    background-position: center; /* 圖片置中 */
    background-repeat: no-repeat;
    }
	
/* 手機版可以縮小高度 */
    @media (max-width: 768px) {
        .about_top {
            height: 250px;
    }

/* --- 導覽列頁尾 (Footer) --- */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}