:root
{
    /**COLORS***/
    --primary-color:#34a2ce;
    --secondady-color: #6247c5;
    --accent-color:#f0b240;
    --background-color:#e7e5e5  ;
    --text-color-light:#ffffff;
    --text-color-darklight:#807e7e;
    --text-color-dark:#000000;

     /**SPACING***/
    --spacing-mini: 0.8rem;
    --spacing-small: 1rem;
    --spacing-medium: 1.2rem;
    --spacing-large: 1.8rem;

     /**FONT-SIZE***/
    --font-size-small: 1rem;
    --font-size-medium:1.4rem;
    --font-size-large:1.8rem;

     /**FONT-FAMILY***/
     --font-family: 'roboto', Arial, Helvetica, sans-serif;

}
/**BODY***/
body
{
    font-family: var(--font-family);
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/***HEADERS**/
/* Main heading style */
h1 
{
    font-size: 2.5rem;                          /* Large and prominent */
    color: var(--text-color-dark);            /* Dark text for contrast */
    text-align: center;                        /* Centered heading */
    font-weight: 800;                          /* Bold for emphasis */
    margin-top: 4rem;                          /* Space from top */
    text-transform: uppercase;                 /* Modern uppercase style */
    letter-spacing: 2px;                       /* Slight spacing between letters */
    line-height: 1.2;                          /* Better vertical spacing */
    background: linear-gradient(90deg, #f2994a, #f2c94c); /* Gradient text effect */
    -webkit-background-clip: text;            /* Clip gradient to text */
    -webkit-text-fill-color: transparent;     /* Make text fill transparent for gradient effect */
    transition: all 0.3s ease-in-out;          /* Smooth transitions */
}

.myHeadings
{
    font-size: 1.5em;
    color: var(--text-color-darklight);
    text-align: center;
    font-weight: 500;  
    margin-top: 2rem; 
    margin-left: 1rem; 
}

/* Main container for the pizza order card */
.mainContainer
 {
    width: 400px;                              /* Fixed width */
    border-radius: 16px;                        /* Softer, modern corners */
    background-color: var(--text-color-light); /* Light background for contrast */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);   /* Softer, more modern shadow */
    margin: 5rem auto;                          /* Center horizontally with margin top */
    padding: 1.5rem;                            /* Inner spacing */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

/* Pizza picture section */
.pizzaPicture 
{
    display: flex;                             /* Flexbox for centering image */
    justify-content: center;                   /* Center horizontally */
    align-items: center;                       /* Center vertically */
    margin-bottom: 1rem;                       /* Space below picture */
    overflow: hidden;                          /* Hide anything overflowing */
    border-radius: 12px;                       /* Rounded corners for picture container */
    transition: transform 0.3s ease;           /* Smooth scaling effect */
}
/***PIZZA-SIZE-CONTAINER**/
.pizzaSizeContainer
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--text-color-light);
    padding: 1rem; 
}
.pizzaSize
{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    background-color: var(--background-color);
    font-size: var(--font-size-medium);
    font-weight: 500; 
}
.pizzaSize:hover
 {
    background-color: rgb(211, 203, 203);
    cursor: pointer;
    transform: scale(1.1);
}

/*  Active state when clicked */
.pizzaSize.active
 {
    background-color: var(--primary-color);
    color: white;
    transform: scale(1.15);
 }


 /***TOPPINGS-SECTION**/

.toppingsSection
 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: var(--text-color-light);
    padding: 0.4rem;
    gap: 1rem;
}

.toppings 
{
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-small);
}

/* Hide default checkbox */
.toppings input[type='checkbox'] 
{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 25px;
    height: 25px;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    background-color: var(--background-color);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease-in-out;
}

/* Checked state */
.toppings input[type='checkbox']:checked 
{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Custom checkmark */
.toppings input[type='checkbox']:checked::after 
{
    content: "✔";
    color: white;
    font-size: 15px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 3px;
}

/* Hover effect */
.toppings input[type='checkbox']:hover 
{
    transform: scale(1.1);
    border-color: var(--secondary-color);
}

  /***PARAGRAPH**/
p
{
    text-align: center;
    padding: 10px;
}

/* Outer container holding input area */
.textSection 
{
    display: flex;                  /* Flexbox for layout */
    flex-direction: row;            /* Arrange items horizontally */
    background-color: var(--text-color-light); /* Background matches theme */
    padding: 1.5rem;                /* Spacing around inside */
}

/* Wrapper around input + label */
.inputGroup 
{
    position: relative;             /* Needed so label can be positioned inside */
    width: 100%;                    /* Full width */
    max-width: 300px;               /* Prevents textbox from being too wide */
}

/* The textbox itself */
.inputtextbox 
{
    width: 100%;                    /* Take full width of container */
    padding: 0.8rem 1rem;           /* Inner spacing for typing comfort */
    background-color: #f9f9f9;      /* Light flat background */
    border: 2px solid #ccc;         /* Subtle border */
    border-radius: 8px;             /* Rounded corners for modern look */
    font-size: 1rem;                /* Normal readable text */
    color: #333;                    /* Dark text color */
    outline: none;                  /* Remove blue default outline */
    transition: all 0.3s ease-in-out; /* Smooth animation on focus/hover */
}

/* The floating label */
.inputlabel 
{
    position: absolute;             /* Positioned inside inputGroup */
    top: 50%;                       /* Vertically center it */
    left: 1rem;                     /* Small padding from left */
    transform: translateY(-50%);    /* Perfect vertical centering */
    font-size: 3rem;                /* Same size as input text initially */
    color: #777;                    /* Gray color for placeholder feel */
    pointer-events: none;           /* Clicking won’t affect label */
    transition: all 0.3s ease-in-out; /* Smooth animation for floating effect */
}

/* When input is focused */
.inputtextbox:focus
 {
    border-color: var(--primary-color); /* Highlight border */
    box-shadow: 0 0 8px #007bff4d; /* Subtle glow */
    background-color: #fff;           /* White background when typing */
}

/* When input is focused OR not empty */
.inputtextbox:focus + .inputlabel,
.inputtextbox:not(:placeholder-shown) + .inputlabel 
{
    top: 0.2rem;                     /* Move label up */
    left: 0.8rem;                    /* Adjust spacing */
    font-size: 1.2rem;               /* Make label smaller */
    color: var(--primary-color);     /* Highlight label with theme color */
    background-color: var(--text-color-light); /* Add background under label */
    padding: 0 0.2rem;               /* Tiny padding for readability */
    border-radius: 4px;              /* Soft rounded edges */
}

 /***BUTTON-SECTION**/
 /* Container for the buttons */
.buttonSection 
{
    display: flex;                  /* Flex layout */
    justify-content: center;        /* Center horizontally */
    align-items: center;            /* Center vertically */
    padding: 2rem;                  /* Space around buttons */
    gap: 1rem;                      /* Space between multiple buttons */
}

/* Base button style */
.btn 
{
    padding: 0.8rem 3rem;           /* Comfortable padding */
    border-radius: 12px;            /* Rounded corners for modern look */
    font-size: var(--font-size-medium); 
    background-color: var(--accent-color); /* Theme accent */
    color: var(--text-color-light); 
    font-weight: 600;               /* Slightly bolder for emphasis */
    border: none;                   /* Remove default border */
    cursor: pointer;                /* Pointer on hover */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Soft shadow for depth */
    transition: all 0.3s ease;     /* Smooth hover/focus effects */
    text-transform: uppercase;      /* Modern uppercase text */
    letter-spacing: 0.5px;          /* Slightly spaced letters */
}

/* Hover effect */
.btn:hover 
{
    background-color: #ca9431;      /* Slightly darker accent color */
    transform: translateY(-2px);    /* Subtle lift effect */
    box-shadow: 0 6px 10px rgba(0,0,0,0.15); /* Stronger shadow on hover */
}

/* Active/Click effect */
.btn:active
 {
    transform: translateY(0px);     /* Reset lift when clicked */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Original shadow */
 }



#summaryDisplay {
  background-color: #fff8e1;
  color: #333;
  border-radius: 10px;
  padding: 1.5rem;
  margin-top: 1rem;
  font-size: 1.1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  line-height: 1.6;
  text-align: left;
}
/* Modal Background */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4); /* Dark background */
  justify-content: center;
  align-items: center;
}

/* Modal Content */
.modal-content {
  background-color: #fff;
  padding: 2rem;
  border-radius: 10px;
  max-width: 400px;
  width: 80%;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: slideDown 0.3s ease;
}

/* Modal Buttons */
.modal-buttons {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-around;
}

.modal .btn {
  padding: 0.7rem 2rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 8px;
  border: none;
  font-weight: 600;
}

.modal .btn.cancel {
  background-color: #ccc;
  color: #333;
}

.modal .btn.cancel:hover {
  background-color: #aaa;
}

.modal .btn.confirm {
  background-color: #34a853;
  color: #fff;
}

.modal .btn.confirm:hover {
  background-color: #2c8c46;
}.next-order-btn {
  background-color: #1e90ff;
  margin-top: 1.5rem;
}

.next-order-btn {
  background-color: #1e90ff;
  margin-top: 1.5rem;
}

.next-order-btn:hover {
  background-color: #0c6ac1;
}



/* Modal animation */
@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}