:root {
    --primary-color: #0054A1;
}

body {
    height: 100%;
    position: relative;
}

section {
    min-width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
}

@media only screen and (max-width: 1050px) {
    section {
        min-width: 100%;
    }
}

.image-displaying-part {
    height: 100vh;
}

.segment-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 70vh;
    width: 100%;
}

@media only screen and (max-width: 1050px) {
    section {
        min-width: 100%;
    }

    .image-displaying-part {
        height: 100vh;
    }
    
    .segment-wrapper {
        height: 60vh;
    }
}


.base-options-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    border-radius: 15px;
}

.base-option-box {
    margin-top: 20px;
    width: 100%;
}

.base-option-wrapper {
    margin-top: 15px;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
}

.base-option-label {
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-width: 2px;
    border-radius: 10px;
    overflow: hidden;
}

.base-option-wrapper input[type="radio"]:checked+label {
    border-color: #0054A1;
    border-style: solid;
}

.base-option-box {
    margin-bottom: 2rem;
}


.image-upload-label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.image-viewer {
    width: 30%;
}

.section1 {
    height: 100%;
    width: 100%;
}


/* Second Section */
.section2 {
    width: 100%;
    position: relative;
    padding: 20px;
    bottom: 0px;
    margin: auto;
}



.category-content-wrapper {
    width: 30%;
}

@media only screen and (max-width: 1050px) {
    .category-content-wrapper {
        width: 100%;
    }
}

#category-section {
    position: fixed;
    bottom: 0;
    display: none;
    width: inherit;
}

#add-circle-button {
    fill: var(--primary-color);
}

.remove-segment-btn {
    margin-top: 10px;
    cursor: pointer;
}

.category-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.radio-buttons {
    display: none;
}

.option-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 5px;
}

@media only screen and (max-width: 650px) {
    .option-icon {
        width: 25px;
        height: 25px;
        margin-bottom: 5px;
    }
}

.base-option-label > .option-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 5px;
}

.option-label {
    cursor: pointer;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: small;
}

.option-label i {
    margin-right: 5px;
}

.checkout-button {
    display: block;
    margin-top: 20px;
    padding: 20px 20px;
    background-color: var(--primary-color);
    color: #fff;
    text-align: center;
    cursor: pointer;
    border: none;
    width: 100%;
    border-radius: 6px;
}

.secondary-button {
    display: block;
    margin-top: 20px;
    padding: 20px 20px;
    background-color: #fff;
    color: var(--primary-color);
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
    border: 2px solid var(--primary-color);
}

.options {
    position: fixed;
    bottom: 0;
    /* Add bottom: 0 to position the box at the bottom */
    left: 0;
    /* Add left: 0 to align the box to the left */
    right: 0;
    /* Add right: 0 to align the box to the right */
    z-index: -1;
    /* Add z-index: -1 to place the box behind the bottom div initially */
    max-width: 650px;
    display: none;
    flex-direction: column;
    background-color: white;
    padding: 20px;
    margin: auto;
    border-radius: 1px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.header-bar {
    display: flex;
    justify-content: space-between;
}

.option-slider-wrapper {
    display: flex;
    margin-top: 20px;
    position: relative;
}

.option-slider {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    /* Hide scrollbar in Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbar in IE and Edge */
    padding: 10px 0px;
}

.option-slider::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar in Chrome, Safari, and Opera */
}

.option-slider label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border: 0.3px solid rgb(207, 207, 207);
    margin-left: 10px;
    border-radius: 6px;
}

.option-slider input[type="radio"] {
    display: none;
}

.option-slider label:hover {
    background-color: #f5f5f5;
}

.option-slider input[type="radio"]:checked+label {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}


.option-slider.no-overflow {

}

.dropin-option-name {
    font-weight: bold;
}

.dropin-option-price-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

.dropin-discounted-price {
    font-weight: 600;
    color: rgb(255, 70, 70);
}

.dropin-price {
    font-size: small;
    text-decoration: line-through;
}

.dropin-option-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.dropin-option-image {
    width: 70px;
}

.arrow-wrapper {
    z-index: 10;
    height: 100%;
    background-color: #f5f5f5;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

#left-arrow-wrapper {
    display: none;
    left: 0%;
    background: linear-gradient(to left, transparent, #999494);
    opacity: 0.8;
}

#right-arrow-wrapper {
    right: 0%;
    background: linear-gradient(to right, transparent, #999494);
    opacity: 0.8;
}

.left-arrow,
.right-arrow {
    color: rgb(53, 53, 53);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 20px;
    margin-top: 10px;
}



.options.show {
    display: flex;
    animation: slideIn 0.3s ease-in;
    z-index: 10;
}

.options.hide {
    animation: slideOut 0.3s ease-in;
}

.options.hidden {
    display: none;
}


/* CSS for the animation */
@keyframes slideIn {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* CSS for the animation */
@keyframes slideOut {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 9;
    display: none;
}



.poster-category {
    display: none;
}


/* SPLIDE.JS */

.splide--slide,.splide__track--slide, .splide-list, .splide__slide {
    height: 100%;
}


.splide__add-slide-btn {
    display: none;
    position: fixed;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    padding: 5px;
}

@media screen and (max-width: 768px) {
    .splide__add-slide-btn {
        top: 67%;
    }
}

.splide__slide {
    transform: scale(1);
    transition: transform 0.3s;
}
  
.splide__slide.is-active {
    transform: scale(1);
}

    


  
.hidden {
    display: none;
}

.spinner {
    animation: spin 1s linear infinite;
}


@keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

#product-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #eaeaea;
    z-index: 999;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 999;
    display: flex;
    cursor: pointer;
}

#close-button-overlay {
    position: absolute;
    bottom: 2%;
    /* center horizontally */
    left: 50%;
    transform: translateX(-50%);
    margin: 10px;
    cursor: pointer;
}



.instruction {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.902);
    border-radius: 10px;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;  /* so that the user can interact with the content behind */
    z-index: 10999;
}

.zoom-instruction, .drag-instruction {
    display: none;  /* initially hide both instructions */
}

.pinch-icon, .drag-icon {
    width: 50px;
    animation: animate 2s infinite;
}

.instruction-text {
    margin-left: 10px;
    color: var(--primary-color);
    font-size: 16px;
}

@keyframes animate {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}


#image-field-options-wrapper {
    display: none;
    flex-direction: column;
    margin-top: 0px;
    margin-bottom: 25px;
}

.image-field-options {
    /* Increase the font size and padding to make the select box bigger */
    font-size: 16px;
    padding: 10px;
  
    /* Customize the appearance of the select box */
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #333;
}
  
.image-field-options:hover {
    /* Highlight the select box on hover */
    border-color: #999;
}
  
.image-field-options:focus {
    /* Highlight the select box when focused */
    border-color: #555;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    outline: none;
}


#price-tag {
    position: fixed;
    padding: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    top: 65%;
    left: 0%;
    background: var(--primary-color);
    color: white;
    border: 2px solid var(--secondary-color);
    border-left: none;
    border-radius: 5px;
}

#price-tag-value {
    font-weight: bold;
}

@media only screen and (max-width: 650px) {
    #price-tag {
        font-size: 0.7rem;
    }
}

@keyframes priceTagAnimation {
    0% {
        font-size: 0.7rem;
    }
    50% {
        font-size: 1rem;
    }
    100% {
        font-size: 0.7rem;
    }
}

@media only screen and (max-width: 650px) {
    .animate-price-tag {
        animation: priceTagAnimation 1s ease-in-out;
    }
}


.image-information-container {
    position: fixed;
    top: 0%;
    width: 50%;
    z-index: 999;
    display: flex; /* Use flexbox to align the bar and the info icon */
    flex-direction: column;
    align-items: center; /* Align items vertically in the center */
}


.quality-bar {
    width: 0%;
    height: 100%;
    transition: width 1s;
    background: white;
    position: absolute;
    right: 0;
}

.quality-bar-container {
    width: 100%;
    display: flex; /* Use flexbox to align the bar and the info icon */
    align-items: center; /* Align items vertically in the center */
}

.quality-bar-wrapper {
    top: 0%;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, red, orange, green);
    overflow: hidden;
}

.info-icon {
    margin-left: 10px; /* Space between the bar and the info icon */
    position: relative; /* Relative positioning for the tooltip */
    cursor: pointer; /* Change cursor to indicate clickable element */
}

.tooltip-quality-bar {
    display: none; /* Initially hide the tooltip */
    position: absolute;
    left: 50%; /* Center the tooltip */
    transform: translateX(-50%); /* Centering adjustment */
    padding: 5px;
    background-color: #333;
    color: white;
    border-radius: 5px;
    z-index: 1000; /* Ensure tooltip is on top */
}


.chosen-image-description-wrapper {
    width: 100%;
}

.chosen-image-description {
    position: fixed;
    left: 50%;
    color: black;
    font-weight: 100;
    transform: translateX(-50%);
}