@property --angle {
  syntax: '<angle>'; 
  initial-value: 0deg;
  inherits: false;
}

.hidden-by-js { display: none !important; }

.rando {
  display: flex;
  justify-content: space-between; /* pushes first child left, last child right */
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 8px; /* optional */
}

.prevPageBtn,
.nextPageBtn {
  padding: 8px 12px;
  background: #d36a6a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.nextPageBtn { margin-left: auto; }

.no-margin-bottom { margin-bottom: 0 !important; }

.scroll-indicator {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    color: black;
    font-size: 24px;
    opacity: 0;
    z-index: 10;
    visibility: hidden;
animation: none;
    }

    @keyframes flashing {
        0%, 100% { opacity: 0; }
        50% { opacity: 1; }
    }
.scroll-indicator {
    background: rgba(255, 0, 0, 0.5); /* Temporary background for debugging */
    border: 1px solid red; /* Temporary border for debugging */
}


.button-list {
            display: flex;
            flex-direction: column;
            gap: 10px; /* Space between buttons */
        }
        .button-item {
            display: flex;
            align-items: center; /* Center items vertically */
            gap: 10px; /* Space between button and input */
            padding: 10px;
            border: 1px solid #007BFF;
            background-color: white;
            color: #007BFF;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.5s ease;
        }
        .button-item:hover {
            background-color: #007BFF;
            color: white;
        transition: background-color 0.5s ease;
        }
        .quantity-input {
            width: 50px; /* Set a fixed width for the input */
            padding: 5px;
            border: 1px solid #007BFF;
            border-radius: 5px;
        }

form#emailForm {
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 400px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}
button#submitEmail
{
width: 80%;
}
label {
    color: #333;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: left;
    width: 100%;
    text-align: center;
}
input[type="email"],
input[type="datetime-local"],
input[type="text"] {
    width: 75%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}.orderMainClass
{
    position: relative;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    height: 60vh !important;
    background-color: hsla(0, 0%, 100%, .3);
    left: 0;
    margin: 0 !important;
    font-size: 4vw;
    text-align: center;
}
.orderDetails
{
overflow-y: hidden;
overflow-x: auto;
width: 100%;
display: flex;
    flex-direction: row;
height: 60vh !important;
border-style:solid;
6px 0px 0px 0px;
box-sizing: border-box;
flex-wrap: nowrap;
}.detailedOrder {
    width: 100%;
    height: 100%;
    background-color: lightblue;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
.itemsFound
{
visibility: hidden;
display: none;
}
.imagesFound
{
visibility: hidden;
display: none;
}

.highlightOrderImage
{
width: 100%;
    height: 100%;
    position: relative;
    bottom: 0;
    border-style: solid;
    border-width: 6px 6px 6px;
}
.imageTextClass {
height: 100%;
    max-height: 100%;
overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--wp--preset--font-size--large) !important;
}

@media (max-width: 480px) {
.imageTextClass {
font-size: var(--wp--preset--font-size--small) !important;
}
}
.orderImageContainer {
    min-width: 50%;
    height: 100%;
    display: flex;
position: relative;
    justify-content: center;
    align-items: center;
}
.updateQuantity
{
width: 15%;
height: 15%;
align-items: center;
text-align: center;
}
.removeItemBtn
{
background-color: white;
border: 1px solid #007BFF;
width: 5%;
    height: 5%;
    font-size: 1vw !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    border-radius: 5px;
    cursor: pointer;
    box-sizing: border-box;
        transition: background-color 0.5s ease;

}
.removeItemBtn:hover
{
background-color: #FFA500;
            color: white;
        transition: background-color 0.5s ease;
}

@media (max-width: 1200px) {
    .removeItemBtn {
        font-size: 2vw !important; /* Decrease font size for larger screens */
    }
}
@media (max-width: 768px) {
    .removeItemBtn {
        font-size: 3vw !important; /* Decrease font size for larger screens */
    }
}
div#OrderSelector
{
width: 100% !important;
height: 40% !important;
}
.orderedImageClass {
width: 100%;
    height: 60%;
    object-fit: contain;
}
.orderBtnDiv {
    height: 30% !important;
}
.bookingSiteMainContent
{
position: fixed;
width: 100% !important;
max-width: none !important;
max-height: none !important;
height: 90vh !important;
background-color: hsla(0, 0%, 100%, .3);
left: 0;
top: 10%;
margin: 0 !important;
padding: 0 !important;

display: flex;
justify-content: center;
align-items: center;
font-size: 13vw;
}

h1.ResourceTxt{
color: black;
font-weight: 700;
text-decoration: underline;
}

img.wp-image-32
{

padding: 10px;
/*
background-image: conic-gradient(from var(--angle), transparent 70%, blue);
animation: 3s spin linear infinite;
*/
}
.leftSideSearchExtension
{
display: flex;
justify-content: center; /* Center horizontally */
    align-items: center;
position: fixed;
left:0;
max-width: none !important;
max-height: none !important;

    width: 50% !important;
height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.rightSideSearchExtension
{
    align-items: center;
position: fixed;
right:0;
max-width: none !important;
max-height: none !important;

    width: 50% !important;
height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

}
div#orderSpacer
{
height: 5vh !important;
}
.spaceSearch
{
max-width: none !important;
max-height: none !important;
    width: 100% !important;
height:20vh !important;
    margin: 0 !important;
    padding: 0 !important;
 text-align: center;

}
header.wp-block-template-part
{
height:10%;
}

@media (max-width: 600px) {

.imNotSure
{
width: 100% !important;
}
.searchResultsClass
{
width: 100% !important;
}
.detailedProductImageImageClass
{
width: 100% !important;
}
.detailedProductHolder
{
width: 100% !important;
}

.detailedProductName
{
font-size: 5vw !important;
}
.detailedProductDesc
{
font-size: 5vw !important;
}

}

.quantityToAdd
{
width: 10%;
height:10%;
font-size: 4vw;
}
.hidden {
    display: none; /* Hides the elements */
}

input#inputQuantityID
{
height:30%;
}

.detailedProductAllDetails
{
height: 70%;
word-break: break-word;
overflow-y: auto;
overflow-x: none;
}

button#addToBasket
{
width:90%;
height: 50%;
}

button#addToBasket:hover
{

}

.Basket
{
position: absolute;
width: 100%;
height:30%;
    bottom: 0; /* Position the footer at the bottom */
    left: 0; /* Align to the left */
    right: 0;

}

.detailedProductHolder
{
pointer-events: auto;
max-width: none !important;
max-height: none !important;
position: relative;

    width: 80%;
height:80vh;
    margin: 0 !important;
    padding: 0 !important;
 text-align: center;
color: black;
background-color:hsla(0,0%,100%,.3);
border-style:solid;
border-width: 6px 6px 6px;
box-sizing: border-box;
}
.detailedProductHolder:hover .scroll-indicator {
opacity: 1;
    visibility: visible;
    animation: flashing 1s infinite;
transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.37, 0.74);
    }

.detailedProductHolder .scroll-indicator {
    visibility: hidden; /* Ensure it's hidden quickly */
    transition: visibility 0s, opacity 0.5s cubic-bezier(0.25, 0.1, 0.37, 0.74); /* Immediate visibility */
    animation: none;
}

/* Optional: You can also set a fast ready state here */
.detailedProductHolder:not(:hover) .scroll-indicator {
    opacity: 0; /* Fade out on hover end */
}

.detailedProductImage
{
width:100%;
height:100vh;
margin: 0 auto;
 text-align: center;

}
.detailedProductImageImageClass
{
object-fit: contain;
    width: 80%;
height:80vh;
color: black;

background-color:hsla(0,0%,100%,.3);
border-style:solid;
border-width: 6px 6px 6px;
box-sizing: border-box;
    position: sticky;
}
.detailedProductName
{
text-align: center;
width: 100%;
font-size:4vw;
font-weight: bold;
}
.detailedProductDesc
{
text-align: center;
width: 100%;
font-size:2vw;
}

.lastPage
{
visibility: hidden;
}
.successfulSearch
{
visibility: hidden;
display: none;
}
.userInput
{
visibility: hidden;
}
.getNumberOfPages
{
visibility: hidden;
}
.currentInput
{
visibility: hidden;
}
.userInput
{
visibility: hidden;
}

.pageNumber,
.currentPageNumber
{
visibility: hidden;
display: none;

}

.FirstSearch
{
visibility: hidden;
}

@keyframes spin
{
from
{
--angle: 0deg;
}
to
{
--angle: 360deg;
}
}
button
{
position: relative;
}
/*
button::after
{
content: '';
position: absolute;
height:110%;
width:110%;
background-image: conic-gradient(from var(--angle),#038543, #00FF7F);
filter: blur(8px);
right:-4.5%;
top:-5%;
z-index:-1;
border-radius: 100px;
animation: 3s spin linear infinite;
}
*/

.itemsForUseInDropDown
{
visibility: hidden;
display: none;
}

.suggestions-container {
    position: relative;
    z-index: 1000; /* Ensure it appears above other elements */
    width: 100%;
    background-color: #fff; /* Background color for better visibility */
    color: black;
    max-height: 300px; /* Limit height to prevent overflow */
    overflow-y: auto; /* Enable scrolling if content exceeds max height */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-radius: 4px; /* Rounded corners for a softer look */
}

.suggestion-item {
    padding: 10px; /* Space around each suggestion */
    cursor: pointer; /* Indicate that items are clickable */
    transition: background-color 0.2s; /* Smooth background transition */
}

.suggestion-item:hover {
    background-color: #f0f0f0; /* Highlight on hover */
}

.suggestion-item.selected {
    background-color: #e0e0e0; /* Highlight for selected item */
}