@charset "utf-8";

/*
* Title                   : DOP Select (jQuery Plugin)
* Version                 : 1.2.1
* File                    : jquery.dop.Select.css
* File Version            : 1.2.1
* Created / Last Modified : 14 December 2015
* Copyright               : © 2014 Dot on Paper
* Website                 : http://www.dotonpaper.net
* Description             : DOP Select stylesheet.
*/
/*
 * ***************************************************************************** Begin single select.
 */
.DOPSelect.dopselect-single{
    height: 30px;
    margin: 0;
    width: 170px;
}


@media (max-width: 800px) {
    .binding_extras_rwd {
        width: 100% !important;
        height: 85vh !important;
        right: 0 !important;
        left: 0 !important;
        top: 15dvh !important;
        transform: translate(0%, 0%) !important; /* 使用轉換居中 */
    }

    .binding_extras_contents {
/*        height: 75vh !important;*/
    }

    .binding_extras_stock{
        font-size: 13px !important;
    }
}
/*
.extraList {
    cursor: pointer;
}*/

.infoButton {
    font-size: 13px;
    color: rgb(101, 178, 232);
    background-color: transparent;
    padding: 4px 6px;
}

.infoButton:hover {
    background-color: rgba(101, 178, 232, .4);
    color: rgb(101, 178, 232);
    border-radius: 3px;
}

.extraList .togglePicture {
    height: 90px !important;
    width: 115px !important;
    min-width: 115px !important;
    min-height: 90px !important;
}

.circle-icon-container {
    cursor: pointer;
    font-size: 14px; /* 控制圖標大小 */
    background: white; /* 背景顏色 */
    width: 24px; /* 寬度 */
    height: 24px; /* 高度 */
    border-radius: 50%; /* 圓角的半徑，50% 產生圓形 */
    display: flex; /* 用flex布局讓內容居中 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 24px 0px; /* 陰影效果 */
    position: absolute; /* 絕對定位 */
    right: 3px; /* 右側位置 */
    bottom: 3px; /* 底部位置 */
    z-index: 1001; /* z-index確保元素在頂層 */
}

.info-btn-container {
    cursor: pointer;
    font-size: 14px; /* 控制圖標大小 */
    background: white; /* 背景顏色 */
    width: 24px; /* 寬度 */
    height: 24px; /* 高度 */
    border-radius: 50%; /* 圓角的半徑，50% 產生圓形 */
    display: flex; /* 用flex布局讓內容居中 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 24px 0px; /* 陰影效果 */
    position: absolute; /* 絕對定位 */
    right: 3px; /* 右側位置 */
    top: 3px; /* 底部位置 */
    z-index: 1001; /* z-index確保元素在頂層 */
}

.tags_li_btn {
    align-items: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0;
    padding: 12px;
    position: relative;
    width: fit-content;
}

.tags_li.active {
    color: #c21760;
    border-bottom: 3px solid #c21760;
/*    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;*/
}

.tags_li {
    color: unset;
}

.tags_ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: fit-content;
}

.tags_li {
    white-space: nowrap;
}

.introBtn {
    color: var(--ast-global-color-3) !important;
}

.binding_extras_height {
    height: 75vh;
}

.binding_extras_stock{
    text-align: right;
    font-size: 14px;
}

.binding_extras_contents {
    background-color: var(--ast-global-color-4); border-radius: 0px; overflow-y: scroll;  z-index: 999;
/*    height: 75vh;*/
}

.binding_extras_rwd {
    width: 600px; /* 設定寬度為 600px */
    position: fixed;
    z-index: 1000002;
    left: 50%; /* 設置左邊距為 50% */
    top: 50%; /* 設置頂部距離為 50% */
    transform: translate(-50%, -50%); /* 使用轉換居中 */
}

.binding_extras_item {
    margin: 6px 0 !important;
/*    border-bottom: 1px solid #dcdcdc;*/
}

.binding_extras_item:last-child {
    border-bottom: none; /* 移除最後一個元素的底部邊框 */
}

.dp__action_button {
    width: 50px;
    justify-content: center;
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
/*  transition: opacity 0.5s ease;*/
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}


/* 从下往上进入的关键帧 */
@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 从上往下离开的关键帧 */
@keyframes slideOutDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* 应用到进入和离开的类 */
.upDown-enter-active {
  animation: slideInUp 0.5s ease;
}
.upDown-leave-active {
  animation: slideOutDown 0.5s ease;
}

.quantity-btn {
    outline: none;
    cursor: pointer;
    border: 0;
    font-size: .875rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    align-items: center;
    justify-content: center;
    transition: background-color .1s cubic-bezier(.4,0,.6,1);
    border: 1px solid rgba(0,0,0,.09);
    border-radius: 2px;
    background: transparent;
    color: rgba(0,0,0,.8);
    width: 33% !important;
    height: 30px !important;
    min-width: 33% !important;
    min-height: 30px !important;
    padding: 1px 6px;
}

.quantity-input {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.09);
    width: 33% !important;
    height: 30px !important;
    min-width: 33% !important;
    min-height: 30px !important;
    border-left: 0;
    border-right: 0;
    font-size: 16px;
    font-weight: 400;
    box-sizing: border-box;
    text-align: center;
    cursor: text;
    border-radius: 0;
    -webkit-appearance: none;
}

.DOPSelect.dopselect-single .dopselect-select{
    background: #ffffff;
    border: 1px solid #c9c9c9;
     -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    cursor: pointer;
    overflow: hidden;
    height: 28px;
}

.DOPSelect.dopselect-single .dopselect-select .dopselect-selection{
    color: #acacac;
    float: left;
    font-size: 13px;
    font-weight: 300;
    height: 28px;
    line-height: 28px;
    overflow: hidden;
    padding: 0 0 0 10px;
    width: 130px;
    word-break: break-all;
    -webkit-transition: color 300ms linear;
    -moz-transition: color 300ms linear;
    -o-transition: color 300ms linear;
    transition: color 300ms linear;
}

.DOPSelect.dopselect-single .dopselect-select .dopselect-icon{
    color: #c9c9c9;
    float: right;
    line-height: 28px;
    height: 28px;
    text-align: center;
    width: 28px;
    -webkit-transition: color 300ms linear;
    -moz-transition: color 300ms linear;
    -o-transition: color 300ms linear;
    transition: color 300ms linear;
}

.DOPSelect.dopselect-single .dopselect-select:hover .dopselect-icon{
    color: #464646;
}

/*
 * Options.
 */
.DOPSelect.dopselect-single ul{
    background: #ffffff;
    border: 1px solid #464646;
     -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: none;
    list-style: none;
    margin: 2px 0 0 0 !important;
    max-height: 218px;
    padding: 8px 0;
    position: absolute;
    overflow-y: scroll !important;
    overflow-x: hidden;
    width: 168px;
    z-index: 10000;
}

.DOPSelect.dopselect-single ul li{
    background: #ffffff;
    color: #acacac;
    cursor: pointer;
    font-size: 12px;
    font-weight: 300;
    height: 30px;
    line-height: 30px;
    list-style: none;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 9px;
    width: 150px;
    word-break: break-all;
    -webkit-transition: background-color 300ms linear, color 300ms linear;
    -moz-transition: background-color 300ms linear, color 300ms linear;
    -o-transition: background-color 300ms linear, color 300ms linear;
    transition: background-color 300ms linear, color 300ms linear;
}

.DOPSelect.dopselect-single ul li:hover,
.DOPSelect.dopselect-single ul li.dopselect-selected{
    background: #464646;
    color: #ffffff;
}
/*
 * ***************************************************************************** End single select.
 */

/*
 * ***************************************************************************** Begin multiple select.
 */
.DOPSelect.dopselect-multiple{
    margin: 0;
    overflow: hidden;
    width: 170px;
}

/*
 * Options.
 */
.DOPSelect.dopselect-multiple ul{
    background: #ffffff;
    border: 1px solid #c9c9c9;
    list-style: none;
    margin: 0 !important;
/*    max-height: 200px;*/
    overflow-y: scroll !important;
    padding: 4.5 0px;
}

.DOPSelect.dopselect-multiple ul li{
    list-style: none;
    margin: 0;
    overflow: hidden;
}

/*
 * Begin checkbox.
 */
.DOPSelect.dopselect-multiple ul li input[type=checkbox]{
    -webkit-appearance: none !important;
    background: #ffffff;
    border: 1px solid #acacac;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    float: left;
    height: auto;
    margin: 1px 5px 1px 0;
    outline: none !important;
    padding: 8px !important;
    position: relative;
    width: auto;
}

.DOPSelect.dopselect-multiple ul li input[type=checkbox]:hover{
    border: 1px solid #464646;
    color: #464646;
}

.DOPSelect.dopselect-multiple ul li input[type=checkbox]:checked:before,
.DOPSelect.dopselect-multiple ul li input[type=checkbox]:checked:after{
    background: #464646;
    border: 1px solid #464646;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color: #464646;
    content: ' ' !important;
    font-size: 16px !important;
    left: -1px !important;
    height: 16px !important;
    line-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: -1px !important;
    width: 16px !important;
}

.DOPSelect.dopselect-multiple ul li input[type=checkbox]:disabled{
    opacity: 0.5;
}
/*
 * End checkbox.
 */

/*
 * Begin label.
 */
.DOPSelect.dopselect-multiple ul li label{
    color: #acacac;
    display: block;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 20px;
    margin: 0;
    width: auto;
    text-decoration: none !important;
    -webkit-transition: color 300ms linear;
    -moz-transition: color 300ms linear;
    -o-transition: color 300ms linear;
    transition: color 300ms linear;
}

.DOPSelect.dopselect-multiple ul li label:hover{
    color: #464646;
}
/*
 * End label.
 */
/*
 * ***************************************************************************** End multiple select.
 */

/*
 * ***************************************************************************** Begin disabled.
 */
.DOPSelect.dopselect-disabled{
    opacity: 0.5;
}

.DOPSelect.dopselect-single.dopselect-disabled .dopselect-select{
    cursor: default;
}

.DOPSelect.dopselect-multiple.dopselect-disabled ul{
    overflow: hidden;
}

.DOPSelect.dopselect-multiple.dopselect-disabled ul li input[type=checkbox]:hover{
    border: 1px solid #acacac;
    color: #acacac;
    cursor: default;
}

.DOPSelect.dopselect-multiple.dopselect-disabled ul li label{
    cursor: default;
}

.DOPSelect.dopselect-multiple.dopselect-disabled ul li label:hover{
    color: #acacac;
}

.DOPBSPCalendar > .woocommerce-Price-amount {
    display: none;
}


@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
/* VARS */
/* MIXINS */
/* STYLE THE HTML ELEMENTS (INCLUDES RESETS FOR THE DEFAULT FIELDSET AND LEGEND STYLES) */
 fieldset {
     margin: 0;
     padding: 2rem;
     box-sizing: border-box;
     display: block;
     border: none;
     border: solid 1px #ccc;
     min-width: 0;
     background-color: #fff;
     flex-wrap: wrap;
}
 body:not(:-moz-handler-blocked) fieldset {
     display: table-cell;
}
/* TOGGLE STYLING */
 .toggle {
     box-sizing: border-box;
     font-size: 0;
     display: flex;
     flex-flow: row nowrap;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: stretch;
}
 .toggle input {
     width: 0;
     height: 0;
     position: absolute;
     left: -9999px;
}
 .toggle input + label {
     width: 100%;
     border: solid 1px #ffbc37;
     border-radius: 1rem;
     color: #ffbc37;
     margin-right: 1rem;
     padding: .5rem;
     box-sizing: border-box;
     position: relative;
     display: inline-block;
     /*border: solid 1px #ddd;*/
     background-color: #fff;
     font-size: 1rem;
     line-height: 140%;
     font-weight: 600;
     text-align: center;
     box-shadow: 0 0 0 rgba(255, 255, 255, 0);
     transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
    /* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
    /*flex: 0 0 50%;
     display: flex;
     justify-content: center;
     align-items: center;
    */
    /* ----- */
}
 .toggle input + label:first-of-type {
/*     border-radius: 6px 0 0 6px;
}
 .toggle input + label:last-of-type {
     /*border-radius: 0 6px 6px 0;*/
}
 .toggle input:hover + label {
     border-color: #ffbc37;
}
 .toggle input:checked + label {
     background-color: #ffbc37;
     color: #fff;
     box-shadow: 0 0 10px rgba(102, 179, 251, .5);
     border-color: #ffbc37;
     z-index: 1;
}

 .toggle input:checked + label::before {
    /*content: '✔';*/
}

 .toggle input:focus + label {
     outline: dotted 1px #ccc;
     outline-offset: 0.45rem;
}
 @media (max-width: 800px) {
     .toggle input + label {
         padding: 0.75rem 0.25rem;
         flex: 0 0 50%;
         display: flex;
         justify-content: center;
         align-items: center;
    }
}
 @media (max-width: 800px) {
     .status span:first-of-type {
         display: none;
    }
     .status span:last-of-type {
         display: inline;
    }
}

.shipping_method_li {
    /*min-width: 168px; */
} 

@media only screen and (min-width: 321px) and (max-width: 768px) {
    .shipping_method_li {
        min-width: 140px;
        margin-bottom: 1rem;
    } 
} 

.btnToggle {
    border-radius: 1rem !important;
    color: #A9A9A9 !important;
    padding: 1px 6px !important;
    margin-right: 6px !important ;
    margin-bottom: .35rem !important ;
    background-color: #EEEEEE !important;
    border: 1px solid rgba(0,0,0,.4) !important;
}

.toggleDiv {
    /*text-align: center;*/
}

.btnToggle.toggled {
    border-radius: 1rem !important;
    color: #fff !important;
    padding: 1px 6px !important;
    margin-right: 6px !important ;
    background-color: #ffbc37 !important;
    border: 1px solid transparent !important;
}

@media only screen and (min-width: 1000px) {
    .dopbsp-row1 .dopbsp-input-wrapper:first-child {
        width: 50%;
        border-right: 1px solid #cccccc;
    }
} 

.dopbsp-row1 .dopbsp-input-wrapper {
    align-items: center;
/*    display: flex;*/
}

@media only screen and (min-width: 1000px) {
    .dopbsp-row-mix {
        display: flex;
        flex-wrap: wrap;
    }

    .dopbsp-flex {
        display: flex;
        flex-wrap: wrap;
    }

    .DOPBSPCalendar-row-shipping {
        width: 49% !important; 
    }

    .dopbsp-row-left {
        width: 49.5%; 
        margin-right: 1%;
    }

    .dopbsp-row-right {
        width: 49.5%;
    }

    .dopbsp-row4 {
        //width: 49.5%; 
    }
}

.dopbsp-row8 {
    display: none;
}

.toggle-control {
     display: inline-block;
     position: relative;
     padding-left: 50px;
     margin-bottom: 14px;
     cursor: pointer;
     font-size: 22px;
     user-select: none;
}
 .toggle-control input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
}
 .toggle-control input:checked ~ .control {
     background-color: dodgerblue;
}
 .toggle-control input:checked ~ .control:after {
     left: 32.5px;
}
 .toggle-control .control {
     position: absolute;
     top: 0;
     left: 0;
     height:18px;
     width: 50px;
     border-radius: 25px;
     background-color: darkgray;
     transition: background-color 0.15s ease-in;
}
 .toggle-control .control:after {
     content: "";
     position: absolute;
     left: 1.25px;
     top: 1.25px;
     width: 16px;
     height: 16px;
     border-radius: 25px;
     background: white;
     transition: left 0.15s ease-in;
}

.toggleList {
    border: solid 0px #D9D9D9;
    /*height: 90px;*/
/*    margin: 5px 0px !important;*/
    padding: 9px 0px !important;
/*    padding-left: 5px;*/
}

.toggleList.clicked {
    background-color: #ffa465;
}

.toggleList.disabled {
    background-color: #D9D9D9;
}

.toggleList.clicked label {
    color: #fff !important;
}

/*
 * ***************************************************************************** End disabled.
 */


.lmask {
     position: fixed;
     height: 100%;
     width: 100%;
     background-color: #000;
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
     z-index: 9999;
     opacity: 0.4;
}
 .lmask.fixed {
     position: fixed;
}
 .lmask:before {
     content: '';
     background-color: rgba(0, 0, 0, 0);
     border: 5px solid rgba(0, 183, 229, 0.9);
     opacity: 0.9;
     border-right: 5px solid rgba(0, 0, 0, 0);
     border-left: 5px solid rgba(0, 0, 0, 0);
     border-radius: 50px;
     box-shadow: 0 0 35px #2187e7;
     width: 50px;
     height: 50px;
     -moz-animation: spinPulse 1s infinite ease-in-out;
     -webkit-animation: spinPulse 1s infinite linear;
     margin: -25px 0 0 -25px;
     position: absolute;
     top: 50%;
     left: 50%;
}
 .lmask:after {
     content: '';
     background-color: rgba(0, 0, 0, 0);
     border: 5px solid rgba(0, 183, 229, 0.9);
     opacity: 0.9;
     border-left: 5px solid rgba(0, 0, 0, 0);
     border-right: 5px solid rgba(0, 0, 0, 0);
     border-radius: 50px;
     box-shadow: 0 0 15px #2187e7;
     width: 30px;
     height: 30px;
     -moz-animation: spinoffPulse 1s infinite linear;
     -webkit-animation: spinoffPulse 1s infinite linear;
     margin: -15px 0 0 -15px;
     position: absolute;
     top: 50%;
     left: 50%;
}
 @-moz-keyframes spinPulse {
     0% {
         -moz-transform: rotate(160deg);
         opacity: 0;
         box-shadow: 0 0 1px #2187e7;
    }
     50% {
         -moz-transform: rotate(145deg);
         opacity: 1;
    }
     100% {
         -moz-transform: rotate(-320deg);
         opacity: 0;
    }
}
 @-moz-keyframes spinoffPulse {
     0% {
         -moz-transform: rotate(0deg);
    }
     100% {
         -moz-transform: rotate(360deg);
    }
}
 @-webkit-keyframes spinPulse {
     0% {
         -webkit-transform: rotate(160deg);
         opacity: 0;
         box-shadow: 0 0 1px #2187e7;
    }
     50% {
         -webkit-transform: rotate(145deg);
         opacity: 1;
    }
     100% {
         -webkit-transform: rotate(-320deg);
         opacity: 0;
    }
}
 @-webkit-keyframes spinoffPulse {
     0% {
         -webkit-transform: rotate(0deg);
    }
     100% {
         -webkit-transform: rotate(360deg);
    }
}