@import url('./reset.css');
@import url('./preloader.css');
@import url('./custom.css');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&display=swap');



.border-radius-50{
    border-radius: 50%;
}

.text-theme{
    color: var(--main-color) !important;
}
.bg-theme{
    background: var(--main-color) !important;
}
.border-theme {
    border-color: var(--main-color) !important;
}


/*--------*/
/* header */
/*--------*/

/* 基礎樣式 (取代 Tailwind 的 absolute z-50 bg-white shadow-lg border... 等) */
.dropdown-submenu {
    position: absolute;
    z-index: 50;
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    border: 1px solid #e5e7eb; /* border border-gray-100 */
    margin-top: 0; /* mt-0 */
    
    transition: all 0.3s ease-in-out;

    background: rgba(255, 255, 255, 0.7098039216);
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px;
    padding: 0 0.75rem;
    border-radius: 10px;
}

/* 隱藏狀態 (預設狀態) */
.dropdown-submenu-hidden {
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px); /* 相當於 translate-y-2 */
}

/* 顯示狀態 (JS 會切換到這個狀態) */
.dropdown-submenu-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

   
#menu-toggle:checked + #menu {
    display: block;
}


.hover\:grow {
    transition: all 0.3s;
    transform: scale(1);
}

.hover\:grow:hover {
    transform: scale(1.02);
}

.dropdown-submenu ul li:not(:last-child){
    border-bottom: #b7b7b7 1px solid;
}

.dropdown-submenu ul li a{
    min-height: 48px;
    padding: 8px 16px;
    color: #4f473c;
    transition: color 0.3s, background-color 0.3s;
    white-space: nowrap;
}



.cartBtn{
    align-items: center;
    color: #FFF;
    cursor: pointer;
    display: flex;
    justify-content: center;
    transition: .4s;
    border-right: #FFF 1px solid;
    padding: 0 .75rem;
    white-space: nowrap;
}

.cartBtn svg{
    fill: #FFF;
    min-width: 24px;
}

.cartBtn:hover{
    opacity: .8;
}

.cartBtn:hover svg{
    fill: #FFF;
}


button:disabled{
    opacity: .2 !important;
    cursor: default !important;
}


/* ---------------------------------- */
/*  swiper viewer */
/* ---------------------------------- */
img[zoom], [zoom-group] img {
    cursor: pointer !important;
    transition: opacity 0.2s;
}
img[zoom]:hover, [zoom-group] img:hover {
    opacity: 0.8;
}

/* 1. 隱藏預設按鈕圖示與多餘元素 */
.viewer-navbar, 
.viewer-toolbar > ul > li::before {
    display: none !important;
}

.viewer-footer {
    background: none !important;
    bottom: 30px !important;
}

/* 2. 定義左右按鈕外框 */
.viewer-toolbar > ul > li.viewer-prev,
.viewer-toolbar > ul > li.viewer-next {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 60px !important;
    height: 60px !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
    z-index: 9999;
}

.viewer-toolbar > ul > li.viewer-prev:hover,
.viewer-toolbar > ul > li.viewer-next:hover {
    background-color: rgba(0, 0, 0, 0.7) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* 3. 繪製白色箭頭 (左箭頭) */
.viewer-prev {
    left: 30px !important;
}
.viewer-prev::after {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border-left: 3px solid white;
    border-bottom: 3px solid white;
    transform: rotate(45deg); /* 旋轉成左箭頭 */
    margin-left: 5px; /* 微調居中感 */
}

/* 4. 繪製白色箭頭 (右箭頭) */
.viewer-next {
    right: 30px !important;
}
.viewer-next::after {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border-right: 3px solid white;
    border-top: 3px solid white;
    transform: rotate(45deg); /* 旋轉成右箭頭 */
    margin-right: 5px; /* 微調居中感 */
}

/* 5. 標題樣式優化 */
.viewer-title {
    font-size: 1.1rem !important;
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    opacity: 1 !important;
}




/* 捲動條整體軌道 */
.custom-scrollbar {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #CBD5E1 transparent; /* Firefox */
}

.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #E2E8F0; /* 非常淡的灰色 */
    border-radius: 10px;
}