/* css new  */
textarea::placeholder{
    padding: 5px
}
textarea {
    border: 0.5px solid rgb(213, 213, 213);
}
.sub-title2 {
    font-weight: 500;
    margin: 8px 0px;
}
.title-lg{
    font-weight: 700;
    font-size: 17px;
}
.title-sm {
    font-weight: 600;
    font-size: 15px;
}
.note {
    font-style: italic;
    font-size: 13px;
    color: #b28163;
}
.button-save {
    border: none;
    padding: 10px 20px;
    color: white;
    background-color: #ad7755;
    margin: 20px 0px;
    font-weight: 600;
    cursor: pointer;
}
.img-op-select {
    max-width: 70%;
    border: 1px solid rgb(192, 192, 192);
}
.img-apron {
    max-width: 100%;
    border: 1px solid rgb(192, 192, 192);
}   
.img-gilded {
    border: 1px solid rgb(192, 192, 192);
}
.img-finish-decor {
    border: 1px solid rgb(192, 192, 192);
}
.finish-decor-highlight .hightlight {
    border: 1px solid rgb(192, 192, 192);
}
.distressing-content {
    border: 1px solid rgb(192, 192, 192);
}
.select-corner .corner-option {
    width: 100%;
}
.select-corner .corner-option .img-corner{
    border: 1px solid rgb(192, 192, 192);
    text-align: center;
}

.zoom {
    display:inline-block;
    position: relative;
}

.zoom img {
    display: block;
}


@media (max-width: 768px) {
    .select-base .base-option .img-base {
        max-width: 90%;
    }
    .right-sidebar {
        margin-top: 20px;
    }
   
}
@media (max-width: 576px) {
    .option-select .title_style{
        display: flex;
    }
    .option-select .title_style .img-style{
        max-width: 30%;
    }
    .option-select .title_style .input-style{
        max-width: 70%;
        align-content: center;
    }
    .img-op-select {
        max-width: 100%;
    }
    .highlight-radio {
        margin: 8px 0px;
    }
}

/* Sidebar right page step  */
.right-sidebar .pick-box {
    background-color: #e6e6e6;
}
.right-sidebar .pick-box hr{
    opacity: 1;
    color: black;
    margin: 15px 0 0 0;
}
.right-sidebar .price-approx h4 {
    font-weight: 700;
}
.right-sidebar .price-approx .price {
    font-size: 26px;
}
.right-sidebar .price-approx span {
    color: #b28163;
}
.right-sidebar .price-approx {
    background-color: #e6e6e6;
}
.right-sidebar p {
    margin-bottom: 10px;
}
/* END sidebar right page step  */
/* MAIN sidebar page step d-none*/
.main-sidebar .accordion-button {
    background-color: #00263E;
    color: white;
}
.main-sidebar .accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* END MAIN sidebar page step  */
.alert-error {
    background-color: rgba(156, 26, 52, 0.2);
    border-color: rgba(143, 24, 67, 0.2);
}

/* Custom behavior*/
.disabled-step {
    color: #979797;
}
.done-step {
    background-color: #1b4f6e;
    color: white;
}
.show-step {
    background-color: #AD7755;
    color: white;
}
.title-yourpick {
    color: #AD7755;
    font-weight: 500;
}


/* css input radio checkbox */
textarea{
    /* font-style: italic; */
    font-weight: bold;
    background-color: #E6E6E6;
  }
textarea::placeholder {
    font-style: italic;
    font-weight: bold;
  }
input[type="radio"]:checked ~ .option-checked {
    color: #ad7755;
    font-weight: 600;
  }
  
  input[type="checkbox"]:checked ~ .name-chair {
  color: #00263E  ;
  font-weight: 600;
  }

  
input[type="radio"] {
    appearance: none; 
    width: 1rem; 
    height: 1rem; 
    border: 1.5px solid #00263E; 
    border-radius: 50%; 
    outline: none;
    margin-right: 0.5rem;
    position: relative;
    cursor: pointer;
}

input[type="radio"]:checked::before {
    content: "";
    width: 0.5rem; 
    height: 0.5rem; 
    border-radius: 50%;
    background: #00263E;    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Ẩn native appearance của checkbox */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.2rem;
    height: 1.2rem;
    border: 1px solid #00263E;
    outline: none;
    position: relative;
    cursor: pointer;
}
input[type="checkbox"]:checked {
    background-color: #00263E;
}

/* Tạo dấu tích bằng cách sử dụng ::after */
input[type="checkbox"]:checked::after {
    content: "\2713"; /* Unicode của dấu tích */
    font-size: 1rem; /* Kích thước font */
    font-weight: 800;
    color: white; /* Màu sắc của dấu tích */
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.custom-table .accordion .accordion-button {
    font-weight: 600;
    padding: 25px 20px;
}
.custom-table .accordion-button::after {
    content: ''; /* Đảm bảo phần tử có nội dung để có thể hiển thị pseudo-element */
    display: block;
    width: 30px;
    height: 30px; 
    background-color: #ffffff; 
    border: 1px solid #ced4da; 
    border-radius: 50%; 
    text-align: center; 
    line-height: 35px; 
}

/* Đổi hình khi accordion mở rộng */
 .accordion-button.collapsed::after {
    background-image: none;
    content: url(../assets/svg/chevron-down.svg);
}

 .accordion-button:not(.collapsed)::after {
    content: url(../assets/svg/chevron-down.svg);
    background-image: none;
}

.disabled {
    color: #979797;
}

.right-sidebar {
    position: sticky !important;
    top: 0;
    max-height: 100vh;
    overflow: hidden;
}

.sidebar-pick {
    max-height: 70vh; /* Điều chỉnh giá trị này theo ý muốn */
    overflow-y: auto;
}

#file-upload-buttons .btn-file, #file-upload-buttons .fileupload-exists {
    background-color: rgb(245, 245, 245);
    background-image: linear-gradient(rgb(255, 255, 255), rgb(230, 230, 230));
    border-color: #979797;
}

/* Description for each step */
.accordion-item .description-step {
    background-color: #783414; color: #ffffff; margin: 0; padding-left: 20px; justify-content: space-between;
}
.accordion-item .description-text {
    padding: 15px 0px;
}
.accordion-item .description-button {
    display: flex; align-items: center; justify-content: end; padding: 20px;
}
.accordion-item .description-audio {
    background-color: #ffffff; border-radius: 8px; padding: 5px; width: fit-content; text-align: center; cursor: pointer; width: 75px;height: 60px;
}
@media screen and (max-width: 768px){
    .accordion-item .description-button {
        padding: 10px;
    }
    .accordion-item .description-text {
        padding: 10px 0px;
        font-size: 13px;
    }
}
@media screen and (max-width: 576px){
    .accordion-item .description-button {
        padding: 8px;
    }
    .accordion-item .description-button p{
        display: none;
    }
    .accordion-item .description-audio {
        align-content: center;
    }
    
}