/* ==========================================================================
  浮動選單與快捷按鈕
  ========================================================================== */

.floating-menu {
   position: fixed;
   left: 25px;
   /* 調整：從 31vh 改為 51vh，往下移動20vh (約20%螢幕高度) */
   bottom: calc(51vh + 25px);
   z-index: 1000;
}

.floating-menu-list {
   list-style: none;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: 15px;
}

.floating-btn {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   border: none;
   background: linear-gradient(135deg, #8b7355, #a08654); /* IE fallback */
   background: linear-gradient(135deg, var(--secondary-color), var(--secondary-hover));
   color: white;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   box-shadow: 0 6px 20px rgba(139, 115, 85, 0.3);
   transition: all 0.3s ease; /* IE fallback */
   transition: var(--transition);
   cursor: pointer;
   text-decoration: none;
}

.floating-btn:hover {
   background: linear-gradient(135deg, #a08654, #8b7355); /* IE fallback */
   background: linear-gradient(135deg, var(--secondary-hover), var(--secondary-color));
   -webkit-transform: translateY(-3px);
   transform: translateY(-3px);
   box-shadow: 0 8px 25px rgba(139, 115, 85, 0.4);
   color: white;
}

.floating-btn i {
   font-size: 20px;
   color: white;
}

.line-icon {
   width: 24px;
   height: 24px;
}

/* 特殊按鈕樣式 */
.floating-btn.whatsapp {
   background: linear-gradient(135deg, #25D366, #128C7E);
}

.floating-btn.whatsapp:hover {
   background: linear-gradient(135deg, #128C7E, #25D366);
}

.floating-btn.facebook {
   background: linear-gradient(135deg, #4267B2, #365899);
}

.floating-btn.facebook:hover {
   background: linear-gradient(135deg, #365899, #4267B2);
}

.floating-btn.email {
   background: linear-gradient(135deg, #EA4335, #DB4437);
}

.floating-btn.email:hover {
   background: linear-gradient(135deg, #DB4437, #EA4335);
}

.floating-btn.phone {
   background: linear-gradient(135deg, #34A853, #0F9D58);
}

.floating-btn.phone:hover {
   background: linear-gradient(135deg, #0F9D58, #34A853);
}

/* 回到頂部按鈕 */
.back-to-top {
   position: fixed;
   left: 25px;
   bottom: 90px;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   border: none;
   background: linear-gradient(135deg, #2c3e50, #34495e);
   color: white;
   display: none;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: 0 6px 20px rgba(44, 62, 80, 0.25);
   transition: all 0.3s ease; /* IE fallback */
   transition: var(--transition);
   z-index: 1000;
   text-decoration: none;
}

.back-to-top.show {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
}

.back-to-top:hover {
   background: linear-gradient(135deg, #34495e, #2c3e50);
   -webkit-transform: translateY(-3px);
   transform: translateY(-3px);
   box-shadow: 0 8px 25px rgba(44, 62, 80, 0.35);
   color: white;
}

.back-to-top i {
   font-size: 18px;
   color: white;
}

.back-to-top-text {
   font-size: 8px;
   margin-top: 2px;
   font-weight: 700;
   color: white;
}

/* 浮動購物車 */
.floating-cart {
   position: fixed;
   left: 25px;
   bottom: 160px;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   border: none;
   background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
   color: white;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: 0 6px 20px rgba(245, 87, 108, 0.3);
   transition: all 0.3s ease;
   z-index: 1000;
   text-decoration: none;
   position: relative;
}

.floating-cart:hover {
   -webkit-transform: translateY(-3px) scale(1.05);
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 8px 25px rgba(245, 87, 108, 0.4);
   color: white;
}

.floating-cart i {
   font-size: 20px;
   color: white;
}

.floating-cart-badge {
   position: absolute;
   top: -5px;
   right: -5px;
   background: #ff4757;
   color: white;
   border-radius: 50%;
   padding: 2px 6px;
   font-size: 10px;
   font-weight: 700;
   min-width: 18px;
   height: 18px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
   -webkit-animation: badge-bounce 2s infinite;
   animation: badge-bounce 2s infinite;
   border: 2px solid white;
}

/* 浮動選單工具提示 */
.floating-btn-tooltip {
   position: absolute;
   left: 70px;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.8);
   color: white;
   padding: 8px 12px;
   border-radius: 6px;
   font-size: 12px;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
   pointer-events: none;
   z-index: 1001;
}

.floating-btn-tooltip::after {
   content: '';
   position: absolute;
   right: 100%;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   width: 0;
   height: 0;
   border-right: 6px solid rgba(0, 0, 0, 0.8);
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
}

.floating-btn:hover .floating-btn-tooltip {
   opacity: 1;
   visibility: visible;
   -webkit-transform: translateY(-50%) translateX(5px);
   transform: translateY(-50%) translateX(5px);
}

/* 浮動選單展開/收合效果 */
.floating-menu.collapsed .floating-btn:not(:first-child) {
   opacity: 0;
   visibility: hidden;
   -webkit-transform: translateY(20px);
   transform: translateY(20px);
}

.floating-menu.expanded .floating-btn {
   opacity: 1;
   visibility: visible;
   -webkit-transform: translateY(0);
   transform: translateY(0);
}

.floating-menu-toggle {
   position: relative;
}

.floating-menu-toggle i {
   transition: transform 0.3s ease;
}

.floating-menu.expanded .floating-menu-toggle i {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

/* ==========================================================================
  動畫效果
  ========================================================================== */

@-webkit-keyframes badge-bounce {
   0%, 100% {
       -webkit-transform: scale(1);
       transform: scale(1);
   }
   50% {
       -webkit-transform: scale(1.2);
       transform: scale(1.2);
   }
}

@keyframes badge-bounce {
   0%, 100% {
       -webkit-transform: scale(1);
       transform: scale(1);
   }
   50% {
       -webkit-transform: scale(1.2);
       transform: scale(1.2);
   }
}

@-webkit-keyframes float-animation {
   0%, 100% {
       -webkit-transform: translateY(0);
       transform: translateY(0);
   }
   50% {
       -webkit-transform: translateY(-5px);
       transform: translateY(-5px);
   }
}

@keyframes float-animation {
   0%, 100% {
       -webkit-transform: translateY(0);
       transform: translateY(0);
   }
   50% {
       -webkit-transform: translateY(-5px);
       transform: translateY(-5px);
   }
}

.floating-btn.animate-float {
   -webkit-animation: float-animation 3s ease-in-out infinite;
   animation: float-animation 3s ease-in-out infinite;
}

/* ==========================================================================
  響應式設計
  ========================================================================== */

/* 桌面版位置 */
@media (min-width: 1025px) {
   .floating-menu {
       left: 25px;
       /* 調整：桌面版也同步調整為 51vh */
       bottom: calc(51vh + 25px);
   }
   
   .back-to-top {
       left: 25px;
       bottom: 90px;
   }
   
   .floating-cart {
       left: 25px;
       bottom: 160px;
   }
}

/* 手機版調整 */
@media (max-width: 768px) {
   .floating-menu {
       left: 15px;
       /* 調整：手機版往上移動20px (從 59vh + 15px 改為 59vh + 35px) */
       bottom: calc(59vh + 35px);
   }

   .floating-btn {
       width: 48px;
       height: 48px;
   }

   .floating-btn i {
       font-size: 16px;
   }

   .back-to-top {
       left: 15px;
       bottom: 87px;
       width: 48px;
       height: 48px;
   }

   .back-to-top i {
       font-size: 14px;
   }
   
   .back-to-top-text {
       font-size: 7px;
   }
   
   .floating-cart {
       left: 15px;
       bottom: 140px;
       width: 48px;
       height: 48px;
   }
   
   .floating-cart i {
       font-size: 16px;
   }
   
   .floating-cart-badge {
       font-size: 9px;
       min-width: 16px;
       height: 16px;
       padding: 1px 5px;
   }
   
   .floating-btn-tooltip {
       left: 60px;
       font-size: 11px;
       padding: 6px 10px;
   }
}

/* 小屏手機調整 */
@media (max-width: 480px) {
   .floating-menu {
       left: 10px;
       /* 調整：小屏手機版也往上移動20px (從 62vh + 10px 改為 62vh + 30px) */
       bottom: calc(62vh + 30px);
   }

   .floating-btn {
       width: 44px;
       height: 44px;
       gap: 12px;
   }

   .floating-btn i {
       font-size: 14px;
   }

   .back-to-top {
       left: 10px;
       bottom: 85px;
       width: 44px;
       height: 44px;
   }

   .back-to-top i {
       font-size: 12px;
   }
   
   .back-to-top-text {
       font-size: 6px;
   }
   
   .floating-cart {
       left: 10px;
       bottom: 135px;
       width: 44px;
       height: 44px;
   }
   
   .floating-cart i {
       font-size: 14px;
   }
   
   .floating-cart-badge {
       font-size: 8px;
       min-width: 14px;
       height: 14px;
       padding: 1px 4px;
       top: -3px;
       right: -3px;
   }
   
   .floating-btn-tooltip {
       display: none; /* 小屏幕隱藏工具提示 */
   }
}

/* 超小屏調整 */
@media (max-width: 360px) {
   .floating-menu {
       left: 8px;
   }

   .back-to-top {
       left: 8px;
   }
   
   .floating-cart {
       left: 8px;
   }
}

/* 高對比度模式支援 */
@media (prefers-contrast: high) {
   .floating-btn,
   .back-to-top,
   .floating-cart {
       border: 2px solid white;
   }
   
   .floating-btn-tooltip {
       border: 1px solid white;
   }
}

/* 聚焦狀態增強 */
.floating-btn:focus,
.back-to-top:focus,
.floating-cart:focus {
   outline: 2px solid #3b82f6; /* IE fallback */
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
}

/* 減少動畫設定 */
@media (prefers-reduced-motion: reduce) {
   .floating-btn,
   .back-to-top,
   .floating-cart,
   .floating-cart-badge {
       -webkit-animation: none !important;
       animation: none !important;
       transition-duration: 0.01ms !important;
   }
}

/* 列印時隱藏 */
@media print {
   .floating-menu,
   .back-to-top,
   .floating-cart {
       display: none !important;
   }
}

/* 深色模式支援 */
@media (prefers-color-scheme: dark) {
   .floating-btn-tooltip {
       background: rgba(255, 255, 255, 0.9);
       color: #1f2937;
   }
   
   .floating-btn-tooltip::after {
       border-right-color: rgba(255, 255, 255, 0.9);
   }
}