/* =================================
基礎設定
================================= */

body{
margin:0;
font-family:Arial;
background:#f5f5f5;
}


/* =================================
HEADER（桌機版）
================================= */

header{
background:#0078d7;
color:white;
display:grid;
grid-template-columns:250px auto 1fr;  /* ★ 三欄：logo / 漢堡按鈕 / nav */
max-width:1200px;
margin:0 auto;
height:60px;
align-items:center;
}

header h1{
margin:0;
font-size:22px;
display:flex;
align-items:center;
justify-content:center;
}

/* 桌機漢堡按鈕隱藏 */
.hamburger{
display:none;
}

nav{
display:flex;
gap:30px;
padding-left:20px;
}

nav a{
color:white;
text-decoration:none;
font-weight:bold;
}

nav a.active{
border-bottom:3px solid #fff;
padding-bottom:4px;
}

.nav-preorder{
color: #ff8c00;
font-weight: 600;
animation: glowPulseOrange 2s ease-in-out infinite;
transition: text-shadow .3s ease, color .3s ease;
}

.nav-preorder:hover {
    color: #ffaa33;
    animation: none;
    text-shadow:
        0 0 8px rgba(255, 140, 0, 1),
        0 0 18px rgba(255, 140, 0, 0.85),
        0 0 35px rgba(255, 140, 0, 0.6),
        0 0 60px rgba(255, 140, 0, 0.3);
}

@keyframes glowPulseOrange {
    0%, 100% {
        text-shadow:
            0 0 6px rgba(255, 140, 0, 0.7),
            0 0 12px rgba(255, 140, 0, 0.35);
    }
    50% {
        text-shadow:
            0 0 10px rgba(255, 140, 0, 1),
            0 0 20px rgba(255, 140, 0, 0.6),
            0 0 32px rgba(255, 140, 0, 0.3);
    }
}

.preorder-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ripple-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: rippleOrange 2.6s ease-out infinite;
}
.ripple-ring:nth-child(1) { animation-delay: 0s; }
.ripple-ring:nth-child(2) { animation-delay: 0.87s; }
.ripple-ring:nth-child(3) { animation-delay: 1.73s; }

.preorder-wrap:hover .ripple-ring {
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes rippleOrange {
  0% {
    width: 32px; height: 32px; opacity: 1;
    box-shadow:
      0 0 0 1.5px rgba(255,140,0,0.9),
      0 0 6px 2px rgba(255,140,0,0.65),
      0 0 14px 5px rgba(255,140,0,0.25);
  }
  50% {
    opacity: 0.5;
    box-shadow:
      0 0 0 1px rgba(255,170,51,0.6),
      0 0 10px 4px rgba(255,170,51,0.3),
      0 0 22px 9px rgba(255,170,51,0.1);
  }
  100% {
    width: 100px; height: 100px; opacity: 0;
    box-shadow: 0 0 0 0.5px rgba(255,200,100,0.05);
  }
}

.nav-preorder.active{
color:#ff8c42;
border-bottom:3px solid #ff8c42;
}

/* =================================
主版面
================================= */

.layout{
display:grid;
grid-template-columns:250px 1fr;
max-width:1200px;
margin:20px auto;
gap:20px;
align-items:stretch;
}

.middle{
width:250px;
position:sticky;
top:20px;
}

.sidebar-box{
background:#fff;
padding:20px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

.content{
background:#fff;
padding:20px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
overflow:auto;
min-height:500px;
}

/* =================================
Sidebar
================================= */

.sidebar-product{
    display:block;
    padding:4px 8px;
    border-radius:4px;
    color:#333;
    text-decoration:none;
    transition:all 0.2s ease;
    font-size:13px;
}

.logout-btn{
display:block;
margin-top:40px;
margin: 40px auto 0 auto;
padding:8px 20px;
border:none;
color:#fff;
font-weight:bold;
border-radius:8px;
text-align:center;
text-decoration:none;
width:fit-content;
background:#dc3545;
cursor:pointer;
box-shadow:0 4px 12px rgba(220,53,69,0.45);
transition:all 0.2s ease;
}

.logout-btn:hover {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,120,215,0.2);
}

.logout-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}

.sidebar-product:hover{
    background:#e3f2fd;
    color:#1565c0;
}

.sidebar-product.active{
    border:1px solid #64b5f6;
    background:#e3f2fd;
    color:#1565c0;
    position:relative;
}

.preorder-mode .sidebar-product:hover{
    background:#fff3e0;
    color:#e65100;
}

.preorder-mode .sidebar-product.active{
    border:1px solid #fb8c00;
    background:#fff3e0;
    color:#e65100;
}

.sidebar-product.active::before{
    content:"";
    position:absolute;
    left:-6px;
    top:4px;
    bottom:4px;
    width:3px;
    background:#64b5f6;
    border-radius:2px;
}

.preorder-mode .sidebar-product.active::before{
    background:#fb8c00;
}

.sidebar-title{
color:#0078d7;
font-size:18px;
font-weight:bold;
}

.sidebar-link{
color:#0078d7;
font-weight:bold;
text-decoration:none;
display:block;
padding:6px;
border-radius:4px;
}

.sidebar-link.active{
background:#0078d7;
color:white;
font-weight:bold;
box-shadow:0 2px 4px rgba(0,0,0,0.12);
}

.wrapper{
display:grid;
grid-template-columns:220px 1fr;
height:100vh;
}

.wrapper.collapsed .sidebar{
    width:70px;
    padding:10px;
}

.wrapper.collapsed .content{
    margin-left:70px;
}

.wrapper.collapsed .sidebar a,
.wrapper.collapsed .menu-group-title{
    font-size:0;
}

.wrapper.collapsed .menu-group-title::before,
.wrapper.collapsed .sidebar a::before{
    font-size:18px;
    display:inline-block;
}

.wrapper.collapsed .menu-group-title{
    text-align:center;
}

.wrapper.collapsed .sidebar a{
    text-align:center;
}

.sidebar-toggle{
    width:100%;
    margin-bottom:10px;
    background:#005fa3;
    color:white;
    border:none;
    padding:6px;
    cursor:pointer;
}

.wrapper.collapsed .sidebar a:hover::after{
    content: attr(data-title);
    position:absolute;
    left:70px;
    background:#333;
    color:#fff;
    padding:4px 8px;
    border-radius:4px;
    white-space:nowrap;
}

.sidebar{
background:#0078d7;
color:white;
padding:20px;
overflow-y:auto;
margin-right:8px;
text-align: center;
}

.sidebar h2{
margin-top:0;
}

.sidebar a{
display:block;
color:white;
text-decoration:none;
padding:10px 12px;
border-radius:4px;
}

.sidebar a:hover{
background:rgba(255,255,255,0.2);
transform: scale(1.1);
}

.sidebar a.active{
background:white;
color:#0078d7;
font-weight:bold;
}

/* =================================
商品卡片
================================= */

.card{
background:#fafafa;
border-radius:8px;
padding:15px;
box-shadow:0 2px 10px rgba(0,120,215,0.1);
margin-bottom:20px;
display:block;
flex-direction:column;
transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.card img{
width:100%;
height:160px;
object-fit:contain;
border-radius:6px;
transition:transform 0.3s ease;
}

.card:hover img {
    transform: scale(1.04);
}

.card:hover{
transform:translateY(-4px);
box-shadow:0 8px 24px rgba(0,120,215,0.18);
transition:all 0.2s ease;
}

/* =================================
商品詳細頁
================================= */

.product-detail{
display:flex;
grid-template-columns: 1.6fr 1fr;
gap:20px;
margin-top:15px;
align-items:flex-start;
}

.product-left{
flex:0 0 75%;
width:100%
}

.product-right{
flex:0 0 25%;
padding-left:0px;
min-width:280px;
display:flex;
flex-direction:column;
gap:12px;
}

.product-thumbs {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 70px;
}

.product-thumbs img,
.product-thumb {
    width: 70px;
    height: 70px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}

.product-thumb.active,
.product-thumbs img.active {
    border: 2px solid #0078d7;
    box-shadow: 0 0 6px rgba(0, 120, 215, 0.3);
}

.product-thumb:hover,
.product-thumbs img:hover {
    border: 2px solid #0078d7;
    transform: scale(1.05);
}

.product-img{
    width:100%;
    height:180px;
    object-fit:contain;
    background:#fff;
    border-bottom:1px solid #eee;
}

.product-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:20px;
margin-top:20px;
}

.product-price-row{
display:flex;
justify-content:space-between;
align-items:center;
margin-left:auto;
margin-top:4px;
background:#fff;
border-radius:10px;
border:1px solid #eee;
padding:14px 16px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.product-price-row > div:last-child{
    display:flex;
    align-items:center;
    gap:8px;
}

.product-3d-box + .product-price-row{
    margin-top: 12px;
}

.product-3d-box{
    background:#000;
    border-radius:10px;
    overflow:hidden;
    margin-bottom:14px;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.product-image-box{
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* =================================
按鈕
================================= */

.btn{
padding:6px 12px;
background:#0078d7;
color:white;
border-radius:4px;
cursor:pointer;
border:none;
transition:all .2s;
}

.btn:hover{
transform:translateY(-1px);
}

.btn-confirm{
background:#0078d7;
color:white;
border:none;
padding:8px 16px;
border-radius:5px;
cursor:pointer;
}

.btn-cancel{
background:#888;
color:white;
border:none;
padding:8px 16px;
border-radius:5px;
cursor:pointer;
}

.btn-cancel:hover{
    background:#777;
}

/* =================================
購物車 Toast
================================= */

.cart-toast{
position:fixed;
top:80px;
right:30px;
background:#0078d7;
color:white;
padding:10px 16px;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
font-size:14px;
z-index:999;
display:none;
}

.cart-area{
margin-top:12px;
padding:12px;
border:1px solid #cfd8e3;
border-radius:6px;
background:#f3f8ff;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.cart-title{
font-weight:bold;
margin-bottom:8px;
color:#2a4d7a;
}

.cart-box{
max-height:200px;
overflow-y:auto;
min-height:40px;
border:2px solid #0078d7;
border-radius:8px;
padding:10px;
box-shadow:0 2px 6px rgba(0,120,215,0.15);
}

.cart-box button{
    border:none;
    background:#eee;
    border-radius:4px;
    cursor:pointer;
}

.cart-box button:hover{
    background:#ddd;
}

.cart-box button:first-child{
    color:#e53935;
    font-weight:bold;
}

/* =================================
Modal 系統
================================= */

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
justify-content:center;
align-items:center;
opacity:0;
pointer-events:none;
z-index:3000;
}

.modal-content{
    background:#fff;
    width:500px;
    margin:80px auto;
    padding:20px;
    border-radius:8px;
    position:relative;
}

.modal.show{
opacity:1;
pointer-events:auto;
}

.modal-box{
background:white;
border-radius:10px;
padding:25px;
max-height:80vh;
overflow:auto;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
}

/* =================================
確認訂單
================================= */

.confirm-box{
width:420px;
max-width:90%;
}

.confirm-product{
display:flex;
justify-content:space-between;
margin-bottom:6px;
}

.confirm-buttons{
display:flex;
gap:10px;
justify-content:flex-end;
margin-top:15px;
}

button:disabled{
cursor:not-allowed;
}

/* =================================
手機版
================================= */

@media (max-width:768px){

/* ★ 漢堡按鈕顯示 */
.hamburger{
    display:block;
    background:none;
    border:2px solid rgba(255,255,255,0.6);
    color:white;
    font-size:22px;
    cursor:pointer;
    padding:4px 12px;
    border-radius:6px;
    line-height:1.4;
}

/* ★ header：兩欄（logo + 漢堡），nav 收到下面 */
header{
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    height:auto;
    padding:10px 14px;
    background: linear-gradient(90deg, #004fa8 0%, #0078d7 100%);
}

header h1{
    justify-content:flex-start;
}

/* ★ nav 預設隱藏，展開後橫跨整排 */
nav{
    display:none;
    flex-direction:column;
    width:100%;
    gap:10px;
    padding:12px 0 6px 0;
    grid-column:1 / -1;
    border-top:1px solid rgba(255,255,255,0.25);
    margin-top:8px;
}

nav.open{
    display:flex;
}

/* nav 裡的連結在手機版加大點擊區域 */
nav a{
    padding:8px 4px;
    font-size:15px;
}

/* 版面改成單欄 */
.layout{
    grid-template-columns:1fr;
    margin:10px;
    gap:12px;
}

/* ★ sidebar 預設隱藏 */
.middle{
    position:static;
    width:auto;
    display:none;
}

/* ★ sidebar 展開時顯示 */
.middle.open{
    display:block;
}

.card img{
    height:120px;
}

.product-main-img{
    max-width:100%;
}

.product-thumbs{
    flex-wrap:wrap;
}

input,
select{
    width:100%;
    box-sizing:border-box;
    margin-top:6px;
}

.card{
    margin-bottom:15px;
}

.price-row{
    flex-direction:column;
    align-items:flex-start;
}

.buy-inline{
    width:100%;
    justify-content:flex-start;
}

#mainContent{
    padding:12px;
}

.product-3d-box{
    height:220px !important;
}

.product-3d-box iframe{
    height:220px !important;
}

.product-price-row{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
}

.price-text{
    text-align:center;
    font-size:22px;
}

.product-price-row > div:last-child{
    width:100%;
    display:flex;
    gap:8px;
}

.qty-input{
    width:70px;
    height:42px;
    font-size:16px;
}

.add-cart-btn,
.preorder-btn{
    flex:1;
    height:42px;
    font-size:14px;
    padding:0;
}

.product-detail {
    grid-template-columns: 1fr !important;
    flex-direction: column;
}

.product-left,
.product-right {
    width: 100% !important;
    min-width:0 !important;
}

.img-zoom-box {
    width: 100% !important;
    height: 260px !important;
}

.product-main-img{
    width:100%;
    height:auto;
}

.product-thumbs{
    overflow-x:auto;
    display:flex;
    gap:6px;
}

.product-thumb{
    width:60px;
    height:60px;
}

.patent-content{
    flex-direction:column;
}

.patent-img{
    max-width:100%;
}

}

/* =================================
專利圖片 viewer
================================= */

.patent-viewer{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.8);
display:none;
justify-content:center;
align-items:center;
z-index:4000;
}

.patent-box-large{
position:relative;
background:white;
padding:20px;
border-radius:10px;
}

.patent-close{
position:absolute;
top:10px;
right:10px;
border:none;
background:#e53935;
color:white;
font-size:16px;
cursor:pointer;
border-radius:4px;
padding:4px 8px;
}

.patent-big-img{
max-width:90vw;
max-height:80vh;
}

.patent-badge{
background: linear-gradient(135deg, #00a84f, #00c853);
box-shadow: 0 2px 6px rgba(0, 168, 79, 0.35);
letter-spacing: 0.5px;
color:white;
padding:3px 8px;
font-size:12px;
border-radius:4px;
margin-left:8px;
}

/* =========================
預購進度條
========================= */

.single-progress{
position:relative;
width:100%;
margin:40px 0 70px 0;
}

.single-line{
height:18px;
background:#ddd;
border-radius:10px;
overflow:hidden;
position:relative;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.single-fill{
height:100%;
background:#00e676;
border-radius: 10px;
background-image:
linear-gradient(
45deg,
rgba(255,255,255,.35) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,.35) 50%,
rgba(255,255,255,.35) 75%,
transparent 75%
);
background-size:40px 40px;
animation:flow 1s linear infinite;
}

@keyframes flow{
0%{background-position:0 0;}
100%{background-position:40px 0;}
}

.milestone{
position:absolute;
top:0;
transform:translateX(-50%);
text-align:center;
}

.milestone-line{
width:3px;
height:18px;
background:#444;
}

.milestone.done .milestone-line{
background:#00e676;
}

.milestone-text{
margin-top:6px;
font-size:13px;
white-space:nowrap;
}

.milestone.done .milestone-text{
color:#00a84f;
font-weight:bold;
}

.milestone-check{
font-size:12px;
color:#00a84f;
margin-right:3px;
}

.progress-arrow{
position:absolute;
top:-32px;
transform:translateX(-50%);
text-align:center;
}

.progress-count{
font-size:13px;
font-weight:bold;
color:#00a84f;
}

.progress-triangle{
font-size:16px;
color:#00b35a;
margin-top:-2px;
}

.preorder-badge{
background: linear-gradient(135deg, #ff5722, #ff8a65);
box-shadow: 0 2px 6px rgba(255, 87, 34, 0.3);
color:white;
padding:2px 6px;
font-size:12px;
border-radius:4px;
margin-left:6px;
}

#termsScroll{
max-height:400px;
overflow-y:auto;
}

.btn-preorder{
background:#ff8a65;
color:white;
border:none;
border-radius:6px;
padding:8px 16px;
font-weight:bold;
cursor:pointer;
transition:0.2s;
box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.btn-preorder:hover{
background:#ff7043;
}

.btn-preorder:active{
background:#f4511e;
}

.btn-preorder:disabled{
background:#ffd0c2;
cursor:not-allowed;
box-shadow:none;
}

.patent-box{
margin-left:40px;
}

.patent-thumb-box{
margin-top:15px;
text-align:center;
}

.patent-thumb{
width:120px;
height:90px;
object-fit:contain;
border:1px solid #ccc;
border-radius:6px;
background:white;
cursor:pointer;
transition:0.2s;
}

.patent-thumb:hover{
transform:scale(1.05);
box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

.patent-thumb-label{
font-size:12px;
color:#666;
margin-top:4px;
}

.patent-box-bottom{
margin-top:25px;
padding-top:20px;
border-top:1px solid #eee;
}

.patent-content{
display:flex;
flex-direction:column;
gap:10px;
align-items:flex-start;
}

.patent-img{
width:160px;
border:1px solid #ccc;
border-radius:6px;
cursor:pointer;
transition:0.2s;
}

.patent-img:hover{
transform:scale(1.03);
box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

.pantet-hint{
font-size:12px;
color:#888;
}

.pantent-info{
font-size:14px;
line-height:1.6;
}

.buy-box{
margin-top:auto;
display:flex;
justify-content:flex-end;
gap:10px;
align-items:center;
border-top:1px solid #eee;
padding-top:15px;
}

.price-row{
justify-content: flex-start;
display:flex;
align-items:center;
margin-bottom:20px;
border-bottom:1px solid #eee;
padding-bottom:10px;
gap:10px;
flex-wrap:wrap;
}

.price-text{
font-size:22px;
font-weight:bold;
color:#e53935;
}

.price-normal{
color:#0078d7;
font-weight:bold;
margin:6px 0;
}

.buy-inline{
display:flex;
align-items:center;
gap:6px;
background:#fff3e0;
padding:6px 10px;
border-radius:6px;
margin-left:auto;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.buy-inline .btn{
padding:6px 10px;
font-size:14px;
white-space:nowrap;
}

.qty-input{
width:35px;
height:20px;
padding:2px 4px;
font-size:14px;
text-align:center;
border:1px solid #ccc;
border-radius:6px;
}

.product-desc{
font-size:14px;
line-height:1.6;
color:#444;
}

.feature-list{
margin:0;
padding-left:18px;
line-height:1.7;
}

.feature-list li{
margin-bottom:4px;
}

.content h2{
font-size:24px;
margin-bottom:10px;
display:flex;
align-items:center;
gap:10px;
}

.img-zoom-box{
overflow:hidden;
width:100%;
height:500px;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
}

.product-main-img{
max-width:100%;
height:auto;
max-height:500px;
object-fit:contain;
display:block;
transition:transform 0.2s ease;
cursor:zoom-in;
border-radius:8px;
box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

/* =========================
圖片 viewer
========================= */

.viewer{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
justify-content:center;
align-items:center;
z-index:9999;
}

.viewer img{
max-width:90%;
max-height:90%;
}

.viewer-close{
position:absolute;
top:20px;
right:20px;
z-index:10000;
background:rgba(0,0,0,0.6);
color:#fff;
border:none;
font-size:22px;
padding:8px 12px;
cursor:pointer;
border-radius:6px;
pointer-events:auto;
}

.viewer-prev,
.viewer-next{
position:absolute;
top:50%;
font-size:40px;
color:white;
cursor:pointer;
padding:10px;
}

.viewer-prev{
left:30px;
}

.viewer-next{
right:30px;
}

.viewer-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
z-index:9999;
display:none;
}

.viewer-modal iframe{
width:100%;
height:100%;
border:none;
position:relative;
z-index:1;
}

.search-box{
text-align:right;
}

#productSearch{
padding:6px 10px;
border:1px solid #ccc;
border-radius:4px;
width:180px;
}

.price-text{
font-size:20px;
font-weight:bold;
color:#0078d7;
}

.add-cart-btn{
background:#0078d7;
color:white;
border:none;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
}

.add-cart-btn:hover{
background:#2893ff;
}

.preorder-btn{
background:#f57c00;
color:white;
border:none;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
}

.preorder-btn:hover{
background:#fb8c00;
}

.preorder-btn.loading{
opacity:0.6;
pointer-events:none;
cursor:wait;
}

.preorder-btn.loading::after{
content:"";
display:inline-block;
width:14px;
height:14px;
margin-left:8px;
border:2px solid #fff;
border-top:2px solid transparent;
border-radius:50%;
animation:spin 0.6s linear infinite;
}

@keyframes spin{
to{ transform:rotate(360deg); }
}

.btn-disabled{
background:#ddd !important;
color:#888 !important;
cursor:not-allowed;
opacity: 0.5;
pointer-events: none;
}

.price-original{
color:#999;
text-decoration:line-through;
margin-right:8px;
font-size:14px;
}

.price-sale{
color:#e53935;
font-weight:bold;
font-size:18px;
}

.price-normal{
color:#0078d7;
font-weight:bold;
font-size:16px;
}

body.preorder-mode .sidebar-link.active{
background:#ef6c00;
color:#ffffff;
border-radius:4px;
padding:6px 8px;
font-weight:bold;
box-shadow:0 2px 4px rgba(0,0,0,0.15)
}

body.preorder-mode .sidebar-product:hover{
background:linear-gradient(90deg,#fff3e0,#ffffff);
color:#e65100;
border-left:4px solid #ff9800;
font-weight:500;
cursor:pointer;
}

.buy-inline .btn{
padding:6px 10px !important;
font-size:14px !important;
white-space:nowrap;
}

.btn-detail:hover{
background:#666;
}

.order-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.order-row .custom-select{
    flex:1;
}

.order-row .qty-box{
    width:60px;
    height:25px;
    text-align:center;
}

.qty-box{
    width:60px;
    height:25px;
    font-size:14px;
    text-align:center;
    padding:2px 6px;
    border:1px solid #ccc;
    border-radius:6px;
}

.order-row button{
    height:30px;
    padding:0 12px;
    background:#0078d7;
    color:#fff;
    border:none;
    border-radius:6px;
}

#productSelect{
    border-radius:6px;
    border:1px solid #ccc;
    padding:4px;
}

#orderBtn{
    font-size:18px;
    padding:10px 20px;
    background:#ff9800;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

#orderBtn:hover{
    background:#f57c00;
}

#orderBtn:disabled{
    background:#ccc;
    cursor:not-allowed;
}

.address-suggest{
    position:absolute;
    background:#fff;
    border:1px solid #ccc;
    width:300px;
    max-height:200px;
    overflow-y:auto;
    z-index:1000;
}

.address-item{
    padding:8px;
    cursor:pointer;
}

.address-item:hover{
    background:#f5f5f5;
}

.address-item.active{
    background:#0078d7;
    color:#fff;
}

input[type="checkbox"]{
    transform:scale(1.3);
    margin-right:6px;
}

table tr:hover{
    background:#f9f9f9;
}

.supplier-select{
    padding:4px;
    border-radius:4px;
}

.supplier-select:focus{
    outline:none;
    border:1px solid #0078d7;
}

.btn-edit,
.btn-delete{
display:inline-block;
padding:6px 10px;
font-size:16px;
border-radius:6px;
text-decoration:none;
margin-right:6px;
background:#0078d7;
color:#fff;
}

.btn-delete{
background:#dc3545;
color:#fff;
border:none;
padding:5px 10px;
cursor:pointer;
}

.btn-edit:hover{
background:#005fa3;
}

.btn-delete:hover{
background:#b02a37;
}

.btn-secondary{
background:#6c757d;
color:#fff;
border:none;
padding:8px 14px;
border-radius:4px;
cursor:pointer;
margin-left:8px;
}

.btn-secondary:hover{
background:#5a6268;
}

.select-style{
    padding:6px 10px;
    border:1px solid #0078d7;
    border-radius:4px;
    background:#fff;
    min-width:200px;
}

.select-style:hover{
    border-color:#005fa3;
}

.select-style:focus{
    outline:none;
    border-color:#005fa3;
    box-shadow:0 0 3px rgba(0,120,215,0.5);
}

select,
input{
    padding:6px 10px;
    border:1px solid #ccc;
    border-radius:4px;
}

select:focus,
input:focus{
    border-color:#0078d7;
    box-shadow:0 0 3px rgba(0,120,215,0.3);
}

.table-header{
    background:linear-gradient(to bottom,#0078d7,#005fa3);
    color:#fff;
}

.table-header th{
    padding:10px;
    font-weight:bold;
}

.btn-primary{
    display:inline-block;
    width: auto;
    padding:8px 14px;
    background:#0078d7;
    color:#fff;
    text-decoration:none;
    border-radius:4px;
    border:none;
    cursor:pointer;
}

.btn-primary:hover{
    background:#005fa3;
}

.main-table{
    width:100%;
    border-collapse:collapse;
    background:white;
    display:block;
    max-height:500px;
    overflow:auto;
    margin-top:15px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.main-table th,
.main-table td{
    border:1px solid #ddd;
    padding:10px;
    text-align:left;
}

.main-table td:last-child{
    white-space:nowrap;
}

.main-table thead th{
    position:sticky;
    top:0;
    z-index:2;
    background:#0078d7;
    color:#fff;
}

.main-table th{
    background:#0078d7;
    color:white;
    padding: 10px;
    text-align: left;
    font-weight: 600;
}

.main-table td{
    padding:10px
}

.main-table tr:hover{
    background:#f5faff;
}

.mt-10{
    margin-top:10px;
    display:inline-block;
}

.mt-15{
    margin-top:15px;
    display:inline-block;
}

.action-bar{
    position:sticky;
    top:0;
    background:#fff;
    padding:10px;
    z-index:5;
    border-bottom:1px solid #ddd;
}

.search-bar{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:10px 0;
}

.search-input{
    width:260px;
    padding:8px 10px;
    border:1px solid #ccc;
    border-radius:4px;
}

.search-btn{
    background:#0078d7;
    color:#fff;
    border:none;
    padding:8px 16px;
    border-radius:4px;
    cursor:pointer;
    font-size: 14px;
    line-height: 1.2;
}

.search-btn:hover{
    background:#005fa3;
}

.clear-btn{
    display:inline-block;
    background:#6c757d;
    color:#fff;
    padding:8px 16px;
    border-radius:4px;
    text-decoration:none;
    line-height: 1.2;
    font-size: 14px;
}

.clear-btn:hover{
    background:#5a6268;
}

.search-btn,
.clear-btn{
    display:inline-block;
    padding:8px 16px;
    font-size:14px;
    line-height:20px;
    border-radius:4px;
    height:auto;
    box-sizing:border-box;
}

.search-btn:active,
.clear-btn:active{
    transform:translateY(1px);
}

.status{
    padding:4px 8px;
    border-radius:4px;
    font-size:13px;
}

.status.paid{
    background:#e6f7ee;
    color:green;
    font-weight:bold;
}

.status.unpaid{
    color:#999;
    background:#f5f5f5;
}

.status-badge{
    padding:4px 8px;
    border-radius:12px;
    color:white;
    font-size:12px;
    display:inline-block;
}

.menu-group{
padding-left:6px;
display:none;
max-height:0;
transition:all 0.3s ease;
margin-left:5px;
overflow:hidden;
}

.menu-group.show{
display:block;
max-height:500px;
}

.menu-group-title{
background: #006ac1;
color:#fff;
padding:10px 8px;
margin-top:12px;
border-radius:6px;
font-size:15px;
font-weight:600;
box-shadow:0 2px 4px rgba(0,0,0,0.15);
cursor:pointer;
transition:0.2s;
}

.menu-group-title:hover{
transform:translateX(3px);
transition:0.2s;
color:#fff;
background:#005aa3;
border-radius:4px;
box-shadow:0 3px 8px rgba(0,0,0,0.12)
}

.menu-group-title.active-parent{
    background:#004f91;
    border-radius:4px;
    font-weight:bold;
    box-shadow:0 2px 6px rgba(0,120,215,0.2)
}

.menu-group a{
    background:#dbeeff;
    color:#003366;
    margin:4px 0;
    border-left:4px solid transparent;
    padding:8px 10px;
    padding-left:14px;
    border-radius:4px;
    transition:0.2s;
}

.menu-group a i{
    color:#005aa3
}

.menu-group a:hover{
    background:#b7dbff;
}

.menu-group a.active{
    background:#99ccff;
    color:#002244;
    font-weight:bold;
    border-left:4px solid #0078d7;
}

.sidebar-controls{
margin-top:20px;
padding-top:10px;
border-top:1px solid rgba(255,255,255,0.3);
font-size:13px;
}

.sidebar-controls label{
display:block;
margin-bottom:6px;
cursor:pointer;
}

label{
display:inline-block;
margin-right:10px;
}

.btn-convert{
    background:#28a745;
    color:white;
    border:none;
    padding:6px 12px;
    border-radius:4px;
    cursor:pointer;
}

.btn-convert:hover{
    background:#218838;
}

.btn-convert.disabled{
    background:#ccc;
    cursor:not-allowed;
}

.converted-badge{
    color:#28a745;
    font-weight:bold;
    background:#e6f7ec;
    padding:4px 8px;
    border-radius:4px;
    display:inline-block;
}

.has-tooltip{
    position:relative;
    cursor:pointer;
}

.tooltip{
    display:none;
    position:absolute;
    bottom:120%;
    left:0;
    background:#333;
    color:#fff;
    padding:6px 10px;
    border-radius:4px;
    font-size:12px;
    white-space:nowrap;
}

.has-tooltip:hover .tooltip{
    display:block;
}

.order-status{
padding:4px 8px;
border-radius:4px;
cursor:pointer;
font-size:13px;
}

.order-status.pending{
background:#eee;
color:#666;
}

.order-status.paid{
background:#fff3cd;
color:#856404;
}

.order-status.shipping{
background:#007bff;
color:#fff;
font-weight:bold;
}

.order-status.done{
background:#d4edda;
color:#155724;
}

.badge{
padding:4px 8px;
border-radius:6px;
font-size:12px;
color:#fff;
}

.badge.red{ background:#e53935; }
.badge.green{ background:#43a047; }
.badge.yellow{ background:#fbc02d; color:#000; }

.form-row{
margin-bottom:12px;
display:flex;
flex-direction:column;
}

.form-row + button,
.form-row + button + button{
    margin-top:10px;
}

td button{
    margin-right:6px;
}

.image-item{
    position:relative;
}

#loginBtn{
    color:#999;
    transition:0.2s;
}

#loginBtn:hover{
    color:#fff;
}

#userName{
    color:#333;
    margin-right:4px;
    font-weight:500;
}

.btn-danger{
    background:#d9534f;
    color:#fff;
}

.btn-danger:hover{
    background:#c9302c;
}

.hidden{
    display:none;
}

::placeholder {
    color: #aaa;
    font-size: 13px;
    font-style: italic;
}

#floatCart {
    opacity: 1;
    transition: all 0.25s ease;
}

::-webkit-input-placeholder { color: #aaa; font-size: 13px; font-style: italic; }
::-moz-placeholder          { color: #aaa; font-size: 13px; font-style: italic; }

html{ overflow-y:scroll;}

/* ===== CMS 富文本內容還原區 ===== */
.cms-content {
    line-height: 1.95;
    font-size: 15px;
    color: #333;
}
.cms-content h1,
.cms-content h2,
.cms-content h3,
.cms-content h4 {
    font-weight: normal;
    margin: 0.6em 0;
    line-height: 1.6;
}
.content .cms-content h2 {
    display: block !important;
    font-size: 17px;
    font-weight: normal;
    color: #222;
    margin: 0.6em 0;
    line-height: 1.6;
}
.cms-content ul {
    list-style: disc;
    padding-left: 1.6em;
    margin: 0.4em 0;
}
.cms-content li {
    margin-bottom: 0.4em;
}
.cms-content strong {
    font-weight: bold;
}
.cms-content p {
    margin: 0.5em 0;
}
.cms-content .marker {
    background: #fff176;
    padding: 0 4px;
    border-radius: 3px;
}

#quill-editor {
    position: relative;
    z-index: 1;
    margin-top: 5px;
    margin-bottom: 20px;
}

.ql-toolbar {
    position: relative !important;
    z-index: 1 !important;
    background: #fff;
    border-radius: 4px 4px 0 0;
}

.ql-container {
    position: relative !important;
    z-index: 1 !important;
    background: #fff;
    border-radius: 0 0 4px 4px;
    font-size: 14px;
}

.ql-editor {
    min-height: 50px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    line-height: 1.8;
}

.ql-toolbar .ql-picker-options {
    position: absolute;
    z-index: 9 !important;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    z-index: 9 !important;
}