:root{
    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;
    --primarycolor: #c9262c;
    --backgroundcolor: hsl(358, 68%, 12%);
    --bodybackgroundcolor: #FFE5DD;
    --headertextcolor: lavender;
    --unitcolor: hsl(250, 16%, 92%);
    --display-if-user: none;
    --display-if-guest: block;
    --unknown-answer: silver;
}


/* Utility classes */

.xs{
	max-width: var(--xs);
}
.sm{
	max-width: var(--sm);
}
.md{
	max-width: var(--md);
}
.lg{
	max-width: var(--lg);
}
.d-grid{
    display: grid;
}
.d-grid-cols {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}
.d-grid-cols > * {
  overflow: hidden;
}


dialog{
	background-color: var(--wp--preset--color--base);
	border: 2px solid #808080;
	border-radius: 1rem;
}
dialog::backdrop{
	background: rgb(0 0 0 / 0.4);
	backdrop-filter: blur(4px);
}


[data-block-name="woocommerce/customer-account"]{display:none}
[data-block-name="woocommerce/mini-cart"]{display:none} /* Το εικονίδιο με το καλάθι και την ποσότητα πάνω δεξιά */

form.woocommerce-ordering {display: none}
.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--oc-custom-fields{display:none}


input:placeholder-shown {
  text-overflow: ellipsis;
}

input.is-valid, .was-validated input:valid {
    border: 3px solid #18bf62;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .9rem) calc(.75em + .9rem);
}
button:disabled{
    color:gray;
}


.loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 5px solid #854343;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 
    
    

/* View transition between pages */
@view-transition {
    navigation: auto;
}