/*Olive Green*/
/*#3d550c*/
/*Lime Green*/
/*#81b622*/
/*Yellow Green*/
/*#ecf87f*/
/*Green*/
/*#59981a*/

/* General Reset */
body, h2, input, button, footer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2, h3, .Marvelfont {
    font-family: 'Marvel', sans-serif; /* Apply Marvel font to tab text */
}

/* Body and General Styling */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
    font-size: 16px;
    padding: 20px;
}


.item-list {
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive, at least 250px width per item */
    gap: 20px; /* Space between product boxes */
    padding: 20px; /* Padding inside the grid container */
    margin-top: 20px; /* Space above the list */
    width: 100%; /* Ensure the grid container takes full width */
    box-sizing: border-box; /* Ensure padding doesn’t cause overflow */
}


/* Combined product styles */
.item {
    background-color: #fff; /* Default background color */
    border: 2px solid #ddd; /* Light border for separation */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Internal padding for the product box */
    display: flex;
    flex-direction: column; /* Stack content vertically inside the box */
    align-items: center; /* Center align content */
    justify-content: space-between; /* Space between child elements */
    text-align: center; /* Center the content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    cursor: pointer; /* Change cursor to pointer */
    position: relative; /* To position child elements like the "Added to Cart" text */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for hover effects */
    margin: 0; /* No extra margin */
}

.item-title {
    font-family: Marvel;/* Make title bold */
    font-size: 1.2rem; /* Slightly larger font size */
    font-weight: bold; /* Make title bold */
    color: #333; /* Dark color for the title */
    margin-bottom: 10px; /* Space below title */
}


/* Hidden checkboxes */
.item input[type="checkbox"] {
    display: none;
}

/* Image Styling inside product box */
.item img {
    width: 70%; /* Ensure responsive image */
    max-width: 70%; /* Max width for the image */
    height: auto; /* Keep the aspect ratio */
    margin-bottom: 10px; /* Space below the image */
    border-radius: 5px; /* Round corners of the image */
}

.item:hover {
    transform: translateY(-5px); /* Lift the box slightly */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Deeper shadow */
}

.item-price {
    font-size: 1rem; /* Standard font size for price */
    color: #555; /* Muted color for price */
    margin-bottom: 15px; /* Space below price */
}

.item-details {
    display: flex;
    flex-direction: column; /* Stack details vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Align horizontally */
    width: 100%; /* Full width of the container */
    max-width: 300px; /* Set a maximum width */
    box-sizing: border-box; /* Includes padding and border in the width */
    margin: 0 auto; /* Centers the details */
}

.item-quantity {
    display: flex;
    align-items: center; /* Align label and input vertically */
    gap: 10px; /* Space between label and input */
    margin-top: 10px; /* Space above quantity input */
}

.item-quantity input[type="number"] {
    width: 50px; /* Fixed width for quantity input */
    padding: 5px;
    text-align: center; /* Center the number inside the box */
    border: 1px solid #ddd; /* Light border */
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem; /* Standard font size */
}

/* Change background color of .product when checkbox inside it is checked */
.product:has(input[type="checkbox"]:checked) {
    background-color: #ffeeba; /* Highlight color */
    border-radius: 5px;
    padding: 10px;
}



/* "Added to Cart" text */
.item .added-to-cart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 1rem;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    display: none; /* Hidden by default */
}

/*[> Show the "Added to Cart" text when selected <]*/
/*.item.selected .added-to-cart {*/
    /*display: block;*/
/*}*/




/* Header Section */

.header {
    margin: 0;
    padding: 0;
    width: 100%; /* Ensure it takes up full width */
    max-width: 500px; /* Limit the header container to prevent excess width */
    margin: 0 auto;
    text-align: center;
}

.header img {
    width: 150px; /* Set a fixed width for the logo (half size) */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure it doesn't overflow the parent container */
    position:relative;
    top:10px;
}
.header h1 {
    margin: 10px 0 0;
    font-weight: bold;
    font-size: 2rem; /* Adjusts with global font size */
    font-family: 'Marvel', sans-serif; /* Use Marvel font */
}


/* Wrapper for input field with icon */
.input-icon {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 300px; /* Adjust input width */
}

.input-icon input {
    width: 100%;
    padding-right: 30px; /* Ensure space for the lock icon */
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.input-icon .green-lock {
    position: absolute;
    right: 10px; /* Position the lock to the right side */
    top: 50%;
    transform: translateY(-50%);
    color: green; /* Green color for the lock icon */
    font-size: 1rem;
}


/* Style for the selected items list container */
#selectedItemsList {
    border: 1px solid #ccc; /* Border around the list */
    border-radius: 5px; /* Rounded corners */
    overflow: hidden; /* Clean edges */
    padding: 0; /* Remove default padding */
}

/* Style for individual list items */
#selectedItemsList li {
    padding: 10px; /* Internal padding for each item */
    border-bottom: 1px solid #ddd; /* Separator between list items */
    display: flex; /* Flex layout for alignment */
    justify-content: space-between; /* Distribute content across the row */
    align-items: center; /* Vertically center-align content */
}

/* Alternate background colors for list items */
#selectedItemsList li:nth-child(odd) {
    background-color: #81B622; /* Green for odd rows */
}

#selectedItemsList li:nth-child(even) {
    background-color: #ecf87f; /* Yellow-green for even rows */
}

/* Style for the placeholder message when no items are selected */
#selectedItemsList li:only-child {
    background-color: transparent; /* Transparent background */
    text-align: center; /* Center-align the text */
    color: #555; /* Muted text color */
}

/* Style for the "X" (remove button) */
#selectedItemsList > li > span {
    color: red; /* Red color for the "X" */
    cursor: pointer; /* Pointer cursor for interactivity */
    font-weight: bold; /* Bold for emphasis */
    font-size: 1.2em; /* Slightly larger size */
    margin-left: 10px; /* Space between the "X" and the text */
}

/* Form Container Styling */
#cartForm > footer > div:nth-child(1) > div > form > input::placeholder {
    text-align: center;
}

.zip-form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Increase spacing between input and button */
    margin: 0 auto; /* Center the form horizontally */
    padding: 10px; /* Add padding for better spacing */
    box-sizing: border-box; /* Ensure padding doesn’t affect width */
}

.zip-form input {
    flex: 1; /* Allow the input to take up remaining space */
    min-width: 200px; /* Wider minimum width */
    padding: 12px; /* Increase padding for a larger input box */
    font-size: 1rem; /* Standard font size */
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.zip-form button {
    padding: 10px 12px; /* Adjust padding for smaller button */
    font-size: 0.9rem; /* Slightly smaller font */
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap; /* Prevent text wrapping */
    min-width: 140px; /* Ensure a minimum width for the button */
}

.zip-form button:hover {
    background-color: #0056b3;
}
.zip-form-container form{
    width: 100%; 
}
.zip-form input {
    width: 100%; /* Full width for mobile */
}
/*.zip-form {*/
    /*width: 100%; [> Full width for mobile <]*/
    /*padding: 10px; */
    /*font-size: 1rem; */
    /*border: 1px solid #ccc; */
    /*border-radius: 5px; */
    /*flex-grow: 1; */
    /*max-width: 300px;*/
/*}*/


/* Footer Styling */
.doapfooter {
    background-color: #f9f9f9;
    color: #333;
    padding: 20px 10px;
    text-align: center;
    font-family: Marvel, Arial, sans-serif;
    font-size: 0.9rem;
    border-top: 0px solid #ddd;
    margin-top: 0px;
}

.githublink,
.footer-link {
    color: #3d550c;
    text-decoration: none;
    font-weight: bold;
}

.githublink:hover,
.footer-link:hover {
    text-decoration: underline;
}

.footer-note {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #666;
}

/* Modal container */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Black background with opacity */
}

/* Modal image */
.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
}

/* Caption text */
#caption {
    margin: auto;
    text-align: center;
    color: #fff;
    padding: 10px 20px;
    height: 40px;
}

/* Close button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.large-image-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, 0.8); /* Dark overlay */
    padding: 20px;
    border-radius: 10px;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    text-align: center;
}

.large-image-modal img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.large-image-modal[style*="visibility: visible"] {
    pointer-events: auto;
}


.thumbnail-container {
    position: relative;
}

.thumbnail {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.thumbnail-container:hover .thumbnail {
    transform: scale(1.1); /* Slight zoom */
}

.category-content {
    display: block; /* Initially open */
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.category-content.hidden {
    display: none; /* Hidden when collapsed */
}

.category-heading {
    cursor: pointer;
    background-color: #000;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;

    font-size: 1.1rem;
    font-weight: bold;
    color: #2e2e2e; /* Deeper dark grey */
    font-family: 'Marvel', sans-serif;
}

.category-heading {
    background-color: #007BFF; /* Blue background */
    color: white; /* White text */
    text-align: center; /* Center the text */
    padding: 20px; /* Add space around the text */
    margin-bottom: 20px; /* Add space below the heading */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

.category-heading h1 {
    font-family: 'Marvel', sans-serif; /* Marvel font */
    font-size: 2.5rem; /* Large font size */
    margin: 0; /* Remove margin */
    text-transform: uppercase; /* Make the text uppercase */
    letter-spacing: 1.5px; /* Add letter spacing for effect */
}





/* Tab Container */
.tab-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px; /* Space below the tab container */
}

/* Tab Button Styles */
.tab {
    padding: 10px 20px;
    cursor: pointer;
    background: #f9f9f9; /* Light background for tabs */
    border: 1px solid #ccc;
    border-bottom: none; /* Remove bottom border for seamless design */
    margin: 0 5px;
    font-size: 1.1rem;
    font-family: 'Marvel', sans-serif; /* Apply Marvel font to tab text */
}

/* Active Tab Styles */
.tab.active {
    background: #fff; /* White background for active tab */
    font-weight: bold; /* Bold text for active tab */
    color: darkgreen; /* Dark green text for active tab */
    text-shadow: 0 0 4px rgba(0, 100, 0, 0.5); /* Soft green glow effect */
    border-bottom: 2px solid #007bff; /* Optional: Add a blue bottom border for active tab */
}

/* Tab Content */
.tab-content {
    display: none; /* Hide tab content by default */
}

.tab-content.active {
    display: block; /* Show active tab content */
}




/* Smaller text for crypto wallet addresses */
.small-text {
    font-size: 0.65rem; /* Reduce font size */
    line-height: 1.2;   /* Adjust line spacing */
    color: #444;        /* Slightly darker color for better readability */
}










.cardbits input {
    width:50px;
}

.golden-lock {
    background: linear-gradient(135deg, #ffd700, #daa520, #ffd700); /* gold gradient */
    -webkit-background-clip: text; /* apply gradient to text */
    -webkit-text-fill-color: transparent; /* make the text transparent to show gradient */
    font-size: .9rem; /* adjust icon size */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* add a subtle shadow for realism */
}

/* Wrapper for input field with icon */
.input-icon {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 300px; /* Adjust input width */
}

.input-icon input {
    width: 100%;
    padding-right: 30px; /* Ensure space for the lock icon */
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.input-icon .green-lock {
    position: absolute;
    right: 10px; /* Position the lock to the right side */
    top: 50%;
    transform: translateY(-50%);
    color: green; /* Green color for the lock icon */
    font-size: 1rem;
}


#cartForm > div.payment-section > label > i, .alignright {
    position:relative;
    float:right;
}



h3 i.fa-phone-alt {
    color: #000; /* Icon color */
    margin-right: 8px; /* Space between icon and text */
    font-size: 1.2rem; /* Adjust icon size */
    vertical-align: middle; /* Align icon with text */
}



















/* Form Container */
form {
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Center alignment for the header */
.logo-title-container {
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between the logo and text */
    margin: 20px 0; /* Optional: Add some margin to separate from other elements */
}




/* Text container for CityName and phone */
.text-container {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
}

/* Style for CityName Doap */
#cityName {
    font-family: 'Marvel', sans-serif;
    font-size: 2rem;
    margin: 0;
    line-height: 1;
}



/* Style for the phone number */
.phone-number {
    text-align: center; /* Center-align the phone number */
    font-size: 0.8rem; /* Consistent smaller font size */
    margin: 5px 0 0; /* Small margin above the text */
    color: #333; /* Default text color */
    text-decoration: none; /* Remove underline */
    font-weight: normal; /* Standard font weight */
}

.phone-number a {
    color: #333; /* Default text color for links */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make the number stand out */
}

.phone-number a:hover,
.phone-number:hover {
    color: #007BFF; /* Change color to blue for better UX */
    text-decoration: underline; /* Add underline on hover */
}






/* Tab Container and Tabs */
.tab-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px; /* Space below the tab container */
}

.tab {
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 1.1rem;
    font-family: 'Marvel', sans-serif; /* Apply Marvel font to tab text */
    background: #f9f9f9; /* Light background for tabs */
    border: 1px solid #ccc;
    border-bottom: none; /* Remove bottom border for seamless design */
}

/* Active Tab Styles */
.tab.active {
    background: #fff; /* White background for active tab */
    font-weight: bold; /* Bold text for active tab */
    color: darkgreen; /* Dark green text for active tab */
    text-shadow: 0 0 4px rgba(0, 100, 0, 0.5); /* Soft green glow effect */
    border-bottom: 2px solid #007bff; /* Optional: Add a blue bottom border for active tab */
}

/* Tab Content */
.tab-content {
    display: none; /* Hide tab content by default */
}

.tab-content.active {
    display: block; /* Show active tab content */
}




/* Phone number styling */
.phone-number {
    text-align: center; /* Center-align the phone number */
    font-size: 0.9rem; /* Smaller font size */
    margin-top: 5px; /* Space between the header and the phone number */
}

.phone-number a {
    color: #333; /* Default text color */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make the number stand out */
}

.phone-number a:hover {
    color: #007BFF; /* Change color on hover for better UX */
    text-decoration:none;
}




.accordion-section {
    border: 1px solid #ddd;
    padding: 15px;
    margin-top: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.accordion-section h3 {
    margin-top: 0;
}




/* General Popup Styling */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 1000;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Success Message Styling */
.popup.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Error Message Styling */
.popup.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Fade In and Out Visibility */
.popup.visible {
    opacity: 1;
    visibility: visible;
}

/* Optional: Add dim background */
.popup-dim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.popup-dim.visible {
    opacity: 1;
    visibility: visible;
}




/* Customer Information */
.customer-info {
    display: flex;
    flex-direction: column;  /* Stack fields vertically */
    gap: 15px;  /* Space between form rows */
    margin-bottom: 20px;
}

/* Row structure for each form field */
.info-row {
    display: flex;
    flex-direction: column;  /* Stack label and input vertically */
    gap: 5px;  /* Space between label and input */
}

/* Label styles */
.customer-info label {
    font-size: 1rem;
    font-weight: bold;
}

/* Input fields and textarea */
.customer-info input,
.customer-info textarea {
    width: 100%;  /* Ensure inputs take up full width */
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Make Address input (textarea) the same height as City input */
.customer-info textarea {
    resize: vertical; /* Allow vertical resizing */
    height: 40px;  /* Match the height of the city input */
}


#specialInstructions {
    width: 100%;
    height: 80px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
}

#cartForm > div.payment-section > label > i, .alignright {
    position:relative;
    float:right;
}
.nodec, .nodec:hover, #cartForm > div.header > div.logo-title-container > div > a.phone-number.nodec {
    text-decoration: none;
    color:#000;
}


h3 i.fa-phone-alt {
    color: #000; /* Icon color */
    margin-right: 8px; /* Space between icon and text */
    font-size: 1.2rem; /* Adjust icon size */
    vertical-align: middle; /* Align icon with text */
}

/* Text container for CityName and phone */
.text-container {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
}

/* Style for CityName Doap */
#cityName {
    font-family: 'Marvel', sans-serif;
    font-size: 2rem;
    margin: 0;
    line-height: 1;
}










.accordion-section {
    border: 1px solid #ddd;
    padding: 15px;
    margin-top: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.accordion-section h3 {
    margin-top: 0;
}




/* General Popup Styling */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 1000;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Success Message Styling */
.popup.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Error Message Styling */
.popup.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Fade In and Out Visibility */
.popup.visible {
    opacity: 1;
    visibility: visible;
}

/* Optional: Add dim background */
.popup-dim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-dim.visible {
    opacity: 1;
    visibility: visible;
}






/* Form Container */
form {
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}





/* Cart Section */
.cart-section {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ccc;
    background: #f9f9f9;
}

.cart-section h3 {
    margin: 0 0 10px;
}

.cart-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cart-section li {
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Payment Section */
.payment-section {
    margin: 20px 0;
}

.payment-section label {
    font-size: 1.2em;
    font-weight: bold;
}

.payment-section select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

/* Buttons */
button {
    width: 100%;
    padding: 10px;
    background-color: #ff6600;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
}

button:hover {
    background-color: #e65a00;
}

/* Style for the Total Price row */
#totalPriceRow {
    background-color: black; /* Black background */
    color: white; /* White text */
    font-weight: bold; /* Bold text */
    padding: 10px; /* Add some padding for better spacing */
    border-radius: 5px; /* Optional: rounded corners */
    text-align: center; /* Center-align the text */
}











/* special effects section */
#flying-text-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire viewport */
    pointer-events: none; /* Prevent interaction */
}


.flying-text:not(.removed) {
    background-color: #28a745; /* Green for added */
}

.flying-text.added {
    color: green;  /* Green for "Added to Cart" */
}

.flying-text.removed {
    color: red;  /* Red for "Removed from Cart" */
}

.flying-text {
    padding: 15px 25px;
    animation: flyUp 2s ease-out forwards;
}
.flying-text {
    font-family: Marvel;
    background-color: #eee!important; /* Green for added */
    #border: none !important;  /* Remove borders */
    border: 1px solid #000;  /* Remove borders */
    #border-radius: 0 !important;  /* Remove rounded corners */
    border-radius: 15px;  /* Remove rounded corners */
    padding: 5;  /* Remove padding */
    #font-size: 2rem;  /* Consistent font size */
    font-size: 1.2rem;  /* Consistent font size */
    color: inherit;  /* Inherit color set via JavaScript */
}

@keyframes flyUp {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0%);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-40px); /* Float upward */
    }
}


/* responsive rules here */




/* For smaller screens */
@media (max-width: 768px) {
    .flying-text {
        font-size: 1.2rem;  /* Smaller size for mobile */
        padding: 10px 20px;
    }
    .zip-form-container {
        flex-direction: column; /* Stack elements vertically */
        align-items: stretch; /* Allow full width for child elements */
        justify-content: center;
        align-items: center;
    }
    .zip-form input {
        width: 100%; /* Full width for mobile */
    }
    .zip-form button {
        width: 100%; /* Full width for mobile */
    }
    .fromElsewhere {
        position:relative;top:10px;
        font-size:1.2em;
        font-family: Marvel;
    }
}



/* Two columns for medium screens */
@media (min-width: 768px) {
    .item-list {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row on medium screens and up */
        padding: 30px 20px; /* Add extra padding for spacing */
    }

    .item {
        max-width: 100%; /* Let the items take full width of their grid cell */
        margin: 0; /* Ensure no margin between items */
    }
    .item-details { 
        max-width: 100%;
    }
    .fromElsewhere {
        position:relative;top:30px;
        font-size:1.2em;
        font-family: Marvel;
    }
}

/* For large screens, 2 items per row */
@media (min-width: 1024px) {
    .item-list {
        grid-template-columns: repeat(2, 1fr); /* Still 2 items per row for large screens */
        padding: 40px 20px; /* Adjust padding for larger screens */
    }

    .item {
        max-width: 100%; /* Let each item take the full width of its grid cell */
        margin: 0; /* Ensure no margin */
    }
    .fromElsewhere {
        position:relative;top:40px;
        font-size:1.2em;
        font-family: Marvel;
    }
}

/* Extra-large screens */
@media (min-width: 1200px) {
    .item-list {
        grid-template-columns: repeat(2, 1fr); /* Keep 2 items per row */
        padding: 50px 20px; /* More padding for very large screens */
    }

    .item {
        max-width: 100%; /* Ensure no width restriction */
        margin: 0; /* No margin */
    }
}

@media (max-width: 400px) {
    #zipFormContainer > form {
        transform: scale(0.8); /* Scale down the form */
        transform-origin: center; /* Center the scaling */
        max-width: 100%; /* Prevent overflow */
        margin: 0 auto; /* Center the form */
    }

    /* Adjust input box size */
    #zipFormContainer input {
        width: 100%; /* Make the input take full width */
        padding: 6px; /* Reduce padding */
        font-size: 0.8rem; /* Smaller font size */
    }

    /* Adjust button size and font */
    #zipFormContainer button {
        padding: 8px 12px; /* Smaller padding for the button */
        font-size: 0.8rem; /* Reduce font size */
    }
    .fromElsewhere {
        position:relative;top:0px;
        font-size:1em;
        font-family: Marvel;
    }
}
/* For mobile and small screens (less than 768px) */
@media (max-width: 767px) {
    body {
        margin: 0; /* Remove extra margin */
        padding: 0; /* Remove padding */
        font-size: 14px; /* Slightly larger default fonts for better readability */
    }

    form {
        max-width: 100%; /* Make the form take the full width */
        margin: 0; /* Remove automatic centering margin */
        padding: 10px; /* Add padding inside the form */
        box-sizing: border-box; /* Ensure padding doesn't overflow */
    }

    .header {
        width: 100%; /* Make the header take full width */
        max-width: 100%; /* Prevent restricting the width */
        margin: 0 auto; /* Center the header content */
        padding: 10px; /* Add some padding */
        text-align: center; /* Align content centrally */
    }

    .tab-container {
        flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
        padding: 10px; /* Add padding */
        justify-content: space-between; /* Spread tabs out evenly */
    }

    .tab {
        flex: 1; /* Make each tab take equal space */
        text-align: center; /* Center text in each tab */
        margin: 5px; /* Add space between tabs */
    }

    .cart-section,
    .payment-section {
        width: 100%; /* Ensure sections stretch to full width */
        padding: 10px; /* Add internal padding */
        box-sizing: border-box; /* Prevent overflow */
    }

    .info-row {
        width: 100%; /* Ensure each row takes full width */
    }

    .customer-info {
        gap: 10px; /* Reduce gap for smaller screens */
    }
}


/* Move only the border-bottom up by 10px on screens <= 768px */
@media (max-width: 768px) {
    #cartForm > div.tab-container {
        position: relative;
        top:-20px;
        margin-bottom: 10px; /* Optional: Adjust spacing below */
    }

    #cartForm > div.tab-container::after {
        content: "";
        position: absolute;
        bottom: -10px; /* Moves the border 20px up */
        left: 0;
        width: 100%;
        border-bottom: 0px solid #ccc; /* The border line */
    }
}



/* Mobile portrait view */
@media (max-width: 767px) {
    #cityName {
        font-size: 1.2em!important; /* Shrinks text to half its normal size */
        text-align: center; /* Ensures the text stays centered */
        margin: 0;
    }

    .phone-number {
        display: visible; /* Hides the "Call us at" text */
        font-size: 80%!important; /* Shrinks text to half its normal size */
    }
    .tab-container {
        position:relative;
        top:10px;
    }
    .item-price {
        position:relative;
        top:10px!important;
    }
}



/* For mobile and small screens (less than 768px) */
@media (max-width: 767px) {
    .customer-info {
        flex-direction: column;  /* Stack fields vertically */
    }

    .info-row {
        width: 100%;  /* Ensure full-width on mobile */
    }
}

/* Adjust for tablets and larger screens (768px and up) */
@media (min-width: 768px) {
    .customer-info {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;  /* Three columns */
        gap: 15px;
    }

    .info-row {
        display: flex;
        flex-direction: column;  /* Ensure the label and input stay stacked */
    }
}



/* Responsive Design */
@media (min-width: 1025px) { /* Desktop */
    body {
        font-size: 20px; /* Larger fonts on desktops */
    }
    form {
        max-width: 800px; /* Larger width for desktops */
        margin: 50px auto; /* Large margins */
    }
}

@media (min-width: 768px) and (max-width: 1024px) { /* Tablets */
    body {
        font-size: 18px; /* Medium-sized fonts on tablets */
    }
    form {
        max-width: 600px; /* Medium width for tablets */
        margin: 30px auto; /* Medium margins */
    }
}

@media (max-width: 767px) { /* Mobile */
    body {
        font-size: 14px; /* Slightly larger default fonts for mobile */
    }
    form {
        max-width: 100%; /* Full width for mobile */
        margin: 10px; /* Tiny margins on mobile */
    }
}

@media (max-width: 400px) {
    #zipFormContainer > form {
        transform: scale(0.8); /* Scale down the form */
        transform-origin: center; /* Center the scaling */
        max-width: 100%; /* Prevent overflow */
        margin: 0 auto; /* Center the form */
    }

    /* Adjust input box size */
    #zipFormContainer input {
        width: 100%; /* Make the input take full width */
        padding: 6px; /* Reduce padding */
        font-size: 0.8rem; /* Smaller font size */
    }

    /* Adjust button size and font */
    #zipFormContainer button {
        padding: 8px 12px; /* Smaller padding for the button */
        font-size: 0.8rem; /* Reduce font size */
    }
}



/* For mobile and small screens (less than 768px) */
@media (max-width: 767px) {
    body {
        margin: 0; /* Remove extra margin */
        padding: 0; /* Remove padding */
        font-size: 14px; /* Slightly larger default fonts for better readability */
    }

    form {
        max-width: 100%; /* Make the form take the full width */
        margin: 0; /* Remove automatic centering margin */
        padding: 10px; /* Add padding inside the form */
        box-sizing: border-box; /* Ensure padding doesn't overflow */
    }

    .header {
        width: 100%; /* Make the header take full width */
        max-width: 100%; /* Prevent restricting the width */
        margin: 0 auto; /* Center the header content */
        padding: 10px; /* Add some padding */
        text-align: center; /* Align content centrally */
    }

    .tab-container {
        flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
        padding: 10px; /* Add padding */
        justify-content: space-between; /* Spread tabs out evenly */
    }

    .tab {
        flex: 1; /* Make each tab take equal space */
        text-align: center; /* Center text in each tab */
        margin: 5px; /* Add space between tabs */
    }

    .cart-section,
    .payment-section {
        width: 100%; /* Ensure sections stretch to full width */
        padding: 10px; /* Add internal padding */
        box-sizing: border-box; /* Prevent overflow */
    }

    .info-row {
        width: 100%; /* Ensure each row takes full width */
    }

    .customer-info {
        gap: 10px; /* Reduce gap for smaller screens */
    }
}


/* Move only the border-bottom up by 10px on screens <= 768px */
@media (max-width: 768px) {
    #cartForm > div.tab-container {
        position: relative;
        top:-20px;
        margin-bottom: 10px; /* Optional: Adjust spacing below */
    }

    #cartForm > div.tab-container::after {
        content: "";
        position: absolute;
        bottom: -10px; /* Moves the border 20px up */
        left: 0;
        width: 100%;
        border-bottom: 0px solid #ccc; /* The border line */
    }
}



/* Mobile portrait view */
@media (max-width: 767px) {
    #cityName {
        font-size: 1.2em!important; /* Shrinks text to half its normal size */
        text-align: center; /* Ensures the text stays centered */
        margin: 0;
    }

    .phone-number {
        display: visible; /* Hides the "Call us at" text */
        font-size: 80%!important; /* Shrinks text to half its normal size */
    }
    .tab-container {
        position:relative;
        top:10px;
    }
    .item-price {
        position:relative;
        top:10px!important;
    }
}



/* For mobile and small screens (less than 768px) */
@media (max-width: 767px) {
    .customer-info {
        flex-direction: column;  /* Stack fields vertically */
    }

    .info-row {
        width: 100%;  /* Ensure full-width on mobile */
    }
}

/* Adjust for tablets and larger screens (768px and up) */
@media (min-width: 768px) {
    .customer-info {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;  /* Three columns */
        gap: 15px;
    }

    .info-row {
        display: flex;
        flex-direction: column;  /* Ensure the label and input stay stacked */
    }
}


/* Responsive Design */
@media (min-width: 1025px) { /* Desktop */
    body {
        font-size: 20px; /* Larger fonts on desktops */
    }
    form {
        max-width: 800px; /* Larger width for desktops */
        margin: 50px auto; /* Large margins */
    }
}

@media (min-width: 768px) and (max-width: 1024px) { /* Tablets */
    body {
        font-size: 18px; /* Medium-sized fonts on tablets */
    }
    form {
        max-width: 600px; /* Medium width for tablets */
        margin: 30px auto; /* Medium margins */
    }
}

@media (max-width: 767px) { /* Mobile */
    body {
        font-size: 14px; /* Slightly larger default fonts for mobile */
    }
    form {
        max-width: 100%; /* Full width for mobile */
        margin: 10px; /* Tiny margins on mobile */
    }
}

@media (max-width: 400px) {
    #zipFormContainer > form {
        transform: scale(0.8); /* Scale down the form */
        transform-origin: center; /* Center the scaling */
        max-width: 100%; /* Prevent overflow */
        margin: 0 auto; /* Center the form */
    }

    /* Adjust input box size */
    #zipFormContainer input {
        width: 100%; /* Make the input take full width */
        padding: 6px; /* Reduce padding */
        font-size: 0.8rem; /* Smaller font size */
    }

    /* Adjust button size and font */
    #zipFormContainer button {
        padding: 8px 12px; /* Smaller padding for the button */
        font-size: 0.8rem; /* Reduce font size */
    }
}







/* For mobile and small screens (less than 768px) */
@media (max-width: 767px) {
    body {
        margin: 0; /* Remove extra margin */
        padding: 0; /* Remove padding */
        font-size: 14px; /* Slightly larger default fonts for better readability */
    }

    form {
        max-width: 100%; /* Make the form take the full width */
        margin: 0; /* Remove automatic centering margin */
        padding: 10px; /* Add padding inside the form */
        box-sizing: border-box; /* Ensure padding doesn't overflow */
    }

    .header {
        width: 100%; /* Make the header take full width */
        max-width: 100%; /* Prevent restricting the width */
        margin: 0 auto; /* Center the header content */
        padding: 10px; /* Add some padding */
        text-align: center; /* Align content centrally */
    }

    .tab-container {
        flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
        padding: 10px; /* Add padding */
        justify-content: space-between; /* Spread tabs out evenly */
    }

    .tab {
        flex: 1; /* Make each tab take equal space */
        text-align: center; /* Center text in each tab */
        margin: 5px; /* Add space between tabs */
    }

    .cart-section,
    .payment-section {
        width: 100%; /* Ensure sections stretch to full width */
        padding: 10px; /* Add internal padding */
        box-sizing: border-box; /* Prevent overflow */
    }

    .info-row {
        width: 100%; /* Ensure each row takes full width */
    }

    .customer-info {
        gap: 10px; /* Reduce gap for smaller screens */
    }
}





/* Move only the border-bottom up by 10px on screens <= 768px */
@media (max-width: 768px) {
    #cartForm > div.tab-container {
        position: relative;
        top:-20px;
        margin-bottom: 10px; /* Optional: Adjust spacing below */
    }

    #cartForm > div.tab-container::after {
        content: "";
        position: absolute;
        bottom: -10px; /* Moves the border 20px up */
        left: 0;
        width: 100%;
        border-bottom: 0px solid #ccc; /* The border line */
    }
}







/* Mobile portrait view */
@media (max-width: 767px) {
    #cityName {
        font-size: 1.2em!important; /* Shrinks text to half its normal size */
        text-align: center; /* Ensures the text stays centered */
        margin: 0;
    }

    .phone-number {
        display: visible; /* Hides the "Call us at" text */
        font-size: 80%!important; /* Shrinks text to half its normal size */
    }
    .tab-container {
        position:relative;
        top:10px;
    }
    .item-price {
        position:relative;
        top:10px!important;
    }
}

/* end responsive rules here */