/* ============================================
   芳境購物商城 - 自訂樣式 (對齊官網風格)
   Primary Green: #54AE56
   Dark Green: #033403
   Teal Accent: #02A4AF
   ============================================ */

/* ---- 基礎設定 ---- */
body {
    font-family: "Noto Sans TC", "Open Sans", sans-serif !important;
    color: #555;
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6, [class^=heading-] {
    font-family: "Noto Sans TC", "Poppins", sans-serif !important;
    color: #333;
}

/* ---- 導航列 ---- */
.navbar.navbar-light.bg-light {
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 8px 0;
}

.navbar .navbar-brand,
.navbar a.text-start {
    color: #54AE56 !important;
    font-weight: 600;
    font-size: 1.3rem;
    text-decoration: none;
}

.navbar .navbar-brand img,
.navbar a.text-start img {
    max-height: 55px;
    width: auto !important;
    margin-right: 8px;
}

.navbar .nav-link {
    color: #54AE56 !important;
    font-weight: 500;
    font-size: 15px;
    padding: 8px 15px !important;
    transition: all 0.3s ease;
    position: relative;
}

.navbar .nav-link:hover {
    color: #033403 !important;
}

.navbar .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: #54AE56;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar .nav-link:hover::after {
    width: 80%;
}

.navbar .dropdown-toggle::after {
    display: inline-block;
}

.navbar .nav-link.link-secondary {
    color: #54AE56 !important;
}

.navbar .nav-link i {
    color: #54AE56;
}

.navbar .cart-count {
    color: #ff0000 !important;
    font-weight: bold;
}

/* 下拉選單 */
.navbar .dropdown-menu {
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 8px 0;
}

.navbar .dropdown-item:hover {
    background-color: #54AE561a;
    color: #54AE56;
}

/* 側邊畫布 */
.offcanvas-header {
    background-color: #54AE56;
    color: #fff;
}

.offcanvas-header h5 {
    color: #fff !important;
}

.offcanvas-header .btn-close {
    filter: brightness(0) invert(1);
}

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

.offcanvas-body .dropdown-item {
    padding: 10px 20px;
    color: #333;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
}

.offcanvas-body .dropdown-item:hover {
    background-color: #54AE561a;
    color: #54AE56;
}

/* ---- Footer 深色主題 (對齊官網) ---- */
.footer-fangjing {
    background-color: #343a40;
    color: #fff;
    padding: 50px 0 0;
}

.footer-fangjing h2 {
    color: #fff !important;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.footer-fangjing h5 {
    color: #fff !important;
    font-size: 1.1rem;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.footer-fangjing p {
    color: #ccc;
    margin-bottom: 5px;
}

.footer-fangjing .footer-slogan {
    color: #aaa;
    font-size: 0.95rem;
}

.footer-fangjing .footer-info-list {
    list-style: none;
    padding: 0;
}

.footer-fangjing .footer-info-list li {
    margin-bottom: 12px;
    color: #ccc;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-fangjing .footer-info-list li i {
    color: #54AE56;
    width: 20px;
    text-align: center;
}

.footer-fangjing .social-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    margin-right: 8px;
    font-size: 18px;
    transition: all 0.3s ease;
}

.footer-fangjing .social-buttons a:hover {
    background-color: #54AE56;
    transform: translateY(-3px);
}

.footer-fangjing .footer-service-table {
    width: 100%;
    color: #ccc;
}

.footer-fangjing .footer-service-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-copyright-bar {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 15px 0;
    text-align: center;
    color: #aaa;
    font-size: 14px;
}

.footer-copyright-bar a {
    color: #fff !important;
    text-decoration: none;
}

.footer-copyright-bar a:hover {
    color: #54AE56 !important;
}

/* ---- 浮動按鈕 (購物車 + LINE) ---- */
.floating-buttons {
    position: fixed;
    right: 0;
    top: 85%;
    transform: translateY(-50%);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.floating-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 10px 0 0 10px;
    text-decoration: none;
    font-size: 22px;
    color: #fff;
    filter: drop-shadow(-2px 2px 6px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.floating-buttons a:hover {
    width: 60px;
}

.floating-buttons .float-cart {
    background: linear-gradient(135deg, #54AE56, #3d8c3f);
}

.floating-buttons .float-line {
    background: linear-gradient(135deg, #06C755, #04a847);
}

@media screen and (max-width: 768px) {
    .floating-buttons a {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}

/* ---- 按鈕樣式優化 ---- */
.btn-primary,
.button-primary {
    background-color: #54AE56 !important;
    border-color: #54AE56 !important;
    color: #fff !important;
}

.btn-primary:hover,
.button-primary:hover {
    background-color: #3d8c3f !important;
    border-color: #3d8c3f !important;
}

.btn-outline-primary {
    color: #54AE56 !important;
    border-color: #54AE56 !important;
}

.btn-outline-primary:hover {
    background-color: #54AE56 !important;
    color: #fff !important;
}

/* ---- 商品卡片增強 ---- */
.product {
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.product-title a {
    color: #333 !important;
    font-family: "Noto Sans TC", sans-serif !important;
}

.product-title a:hover {
    color: #54AE56 !important;
}

.product-price {
    color: #e74c3c !important;
    font-weight: 700;
}

/* ---- 麵包屑導航 ---- */
.breadcrumbs-custom {
    background: linear-gradient(135deg, #54AE56, #3d8c3f) !important;
}

/* ---- 表單元素 ---- */
.form-control:focus,
.form-select:focus {
    border-color: #54AE56;
    box-shadow: 0 0 0 0.2rem rgba(84, 174, 86, 0.25);
}

/* ---- 頁面內容區域 ---- */
.section-md {
    padding: 50px 0;
}

/* ---- AOS 動畫微調 ---- */
[data-aos] {
    transition-duration: 800ms !important;
}

/* ---- 首頁介紹區域 ---- */
.section-intro {
    background-color: #f8f9fa;
}

/* ---- 分頁器 ---- */
.page-item.active .page-link {
    background-color: #54AE56;
    border-color: #54AE56;
}

.page-link {
    color: #54AE56;
}

.page-link:hover {
    color: #3d8c3f;
}

/* ---- 滾動到頂部按鈕 ---- */
.ui-to-top {
    background-color: #54AE56 !important;
}

.ui-to-top:hover {
    background-color: #3d8c3f !important;
}

/* ---- SweetAlert 主題色覆蓋 ---- */
.swal2-confirm.swal2-styled {
    background-color: #54AE56 !important;
}

/* ---- 連結顏色統一 ---- */
a {
    color: #54AE56;
}

a:hover {
    color: #3d8c3f;
}

/* ---- 選取文字顏色 ---- */
::selection {
    background: #54AE56;
    color: #fff;
}

::-moz-selection {
    background: #54AE56;
    color: #fff;
}