@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');



button{
    cursor: pointer;
}

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

.text-theme{
    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;
}


/*--------*/
/* carousel */
/*--------*/
.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
}

.carousel-item {
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
    display: block;
}

.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
    color: #000;
    /*Set to match the Tailwind colour you want the active one to be */
}



.cartBtn{
    align-items: center;
    background: #efefef;
    border-radius: 50%;
    color: #121212;
    cursor: pointer;
    display: flex;
    justify-content: center;
    transition: .4s;
}

.cartBtn svg{
    fill: #121212;
}

.cartBtn:hover{
    opacity: .8;
}

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


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