html, body {
    width: 100%; /* Ensure the width is 100% of the viewport */
    margin: 0; /* Remove default margin */
    padding: 20; /* Add padding */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    /*overflow-x: hidden; /* Prevent horizontal scrolling */
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 1.0); /* Set background color */
    text-align: center; /* Center align text */
    background-image: url("images/Big-Sands-Sunset-5-edit.jpg"); /* Set background image */
    background-size: cover; /* Cover the entire background */
    background-repeat: no-repeat; /* Do not repeat the background image */
    background-position: center; /* Center the image on the screen */
}

header {
    color: rgb(0, 0, 0);
    padding: 20px;
    text-align: center;
}
#view-basket-button {
    background-color: #008080;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    display: inline-block; /* Align the button inline with the header text */
    font-size: 16px; /* Set font size */
    padding: 10px 20px; /* Padding inside button */
    text-align: center; /* Center text inside the button */
    text-decoration: none; /* Remove underline from text */
    border-radius: 5px; /* Rounded corners */
    margin: 10px; /* Margin around button */
    width: 150px; /* Set a fixed width for all buttons */
}
.basket button{
margin: 10px; /* Margin around button */
width: 150px; /* Set a fixed width for all buttons */
display: block; /* Ensure the button behaves as a block element, i.e. stack vertically */
}
.remove-from-basket {/*refers to JS function removeFromBasket()*/
    margin: 10px auto; /* Add vertical spacing */
    display: block; /* Ensure the button behaves as a block element */
    text-align: center; /* Center the text inside the button */
    background-color: #fc6d6d; /* Red background for remove button */
}
#view-basket-button:hover {
    background-color: #005f5f;
}
.view-basket {
    margin-right: 20px;
    margin-top: -10px;
    margin-bottom: 10px; /* Add some space below the button */
        float: none; /* Remove the float property */
        display: block; /* Ensure the button behaves as a block element */
        text-align: center; /* Center the text inside the button */
}
/* Center the Remove buttons inside the basket */
.basket {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: flex-start; /* Align items to the top */
    gap: 20px; /* Add space between items */
    margin: 20px auto; /* Center the basket container itself */
    padding: 20px; /* Add padding inside the basket */
    border: 1px solid #ccc; /* Add a border */
    border-radius: 8px; /* Add rounded corners */
    background-color: #f9f9f9; /* Add a light background color */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    min-height: 150px; /* Ensure the basket has a minimum height */
    max-width: 600px; /* Limit the width of the basket */
    width: auto; /* Ensure it doesn't exceed the parent container */
}
section {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    text-align: center; /* Center align child-elements */
    margin: 20px auto; /* Center the section itself */
}
.basket-wrapper {
    display: flex;
    justify-content: center; /* Center the basket horizontally */
    align-items: flex-start; /* Align the basket to the top */
    width: 100%; /* Ensure the wrapper spans the full width */
}
#empty-basket-message {
    font-size: 0.9em;
    color: gray;
    margin-top: 10px;
    text-align: center;
}
.basket ul li {
    text-align: left; /* Align the text inside each list item */
    margin: 10px 0; /* Add vertical spacing between items */
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space out the item name and the "Remove" button */
    align-items: center; /* Align items vertically */
    padding: 5px 10px; /* Add padding for better spacing */
    border-bottom: 1px solid #ccc; /* Optional: Add a separator between items */
    gap: 20px; /* Add space between item name and button */
}
.basket ul {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: inline-block; /* Use flexbox for layout */
}
.basket ul li button {
    margin: 10px auto; /* Add vertical spacing and center the button */
    display: inline-block; /* Ensure the button doesn't stretch */
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: black; /* Set text color */
    text-align: center; /* Center align text */
    font-size: 40px; /* Set font size */
    display: block; /* Ensure the h1 behaves as a block element */
    text-overflow: ellipsis; /* Optional: Add ellipsis if the text overflows */
}
.header-container {
    background-color: rgba(249, 249, 249, 0.5); /* Set the background color */
    width: 100%; /* Ensure it spans the full width of the page */
    padding-top: 20px; /* Add padding above and below the content */
    text-align: center; /* Center align the text */
    box-sizing: border-box; /* Include padding in the element's total width */
    position: relative; /* Ensure it is positioned above the body background */
    z-index: 1; /* Set a higher stacking context */
}
.header-container::before {
    content: ""; /* Create a pseudo-element */
    position: absolute; /* Position it relative to the container */
    top: 0;
    left: 0;
    width: 100%; /* Cover the full width of the container */
    height: 100%; /* Cover the full height of the container */
    background-color: rgba(249, 249, 249, 0.5); /* Set the background color */
    z-index: -1; /* Place it behind the content of the header */
}
.header-container h1 {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

.title-divider {
    border: none; /* Remove default border */
    border-top: 5px solid black; /* Add a 5px black line */
    margin: 20px auto; /* Center the divider and add spacing */
    width: 100%; /* Optional: Limit the width of the divider */
}
h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: black; /* Set text color */
    text-align: center; /* Center align text */
    font-size: 30px; /* Set font size */
    display: block; /* Ensure the h2 behaves as a block element */
    text-overflow: ellipsis; /* Optional: Add ellipsis if the text overflows */
}
h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: black; /* Set text color */
    text-align: justify; /* Justify align text */
    font-size: 20px; /* Set font size */
    display: block; /* Ensure the h3 behaves as a block element */
    text-overflow: ellipsis; /* Optional: Add ellipsis if the text overflows */
}
.products, .basket {
    margin: 20px;
    padding: 20px;
   /* background-color: rgb(255, 255, 255, 0.1);*/
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.product {
    display:inline-block; /* Makes the container shrink to fit content */
    border: 1px solid black; /* Thin black border */
    padding: 30px; /* Add padding for better readability */
    margin: 20px auto; /* Add spacing between containers and center them */
    max-width: 850px; /* Limit the width for better readability */
    background-color: #f9f9f9; /* Optional: Light background for contrast */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow for depth */
    gap: 20px; /* Space between flex items */
    border-radius: 10px; /* Rounded corners */
}
.product img {
    max-width: 100px;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
    cursor: pointer; 
}
.checkout-container { /* Container for the checkout (Proceed to Payment) button */
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center the button horizontally */
    margin-top: 20px; /* Add some space above the button */
}
#checkout-button {
    padding: 10px 20px;
    background-color: #008080;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}
#checkout-button:hover {
    background-color: #005f5f;
}
/*button {
    background-color: #008080;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #005f5f;
}*/
.video-preview {
    cursor: pointer; /* Change cursor to pointer on hover */
}
/* Social icons container */
.social-icons {
    display: flex;
    justify-content: center; /* Center the icons horizontally */
    gap: 10px; /* Add space between icons */
      align-items: center; /* Center icons vertically */
    margin-bottom: 20px; /* Add margin at the bottom to separate from the text */
}
.facebook-social-icon {
  background-color: #1877f3;    /* Facebook blue */
  color: #fff;                  /* White "f" */
  border: 2px solid #000;       /* Black border */
  border-radius: 8px;
}
.facebook-social-icon i {
    color: #fff !important; /* Force white f */
}
.facebook-social-icon:hover {
  background-color: #145db2;    /* Slightly darker blue on hover */
  color: #fff;
  border-color: #222;
}
.youtube-social-icon {
  background-color: #ff0000;    /* YouTube red */
  color: #fff;                  /* White icon */
  border: 2px solid #000;       /* Black border (optional, for consistency) */
  border-radius: 8px;           /* Rounded corners */
}
.youtube-social-icon i {
  color: #fff !important;       /* Force white arrow */
}
.youtube-social-icon:hover {
  background-color: #cc0000;    /* Darker red on hover */
  color: #fff;
  border-color: #222;
}
.instagram-social-icon {
  background-color: #fff;           /* White background */
  color: #e1306c;                   /* Pink icon color */
  border: 2px solid #e1306c;        /* Pink border */
  border-radius: 50%;               /* Make it a circle */
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.instagram-social-icon i {
  color: #e1306c !important;        /* Pink icon */
  font-size: 36px;
}
.instagram-social-icon:hover {
  background-color: #e1306c;        /* Pink background on hover */
  color: #fff;
  border-color: #e1306c;
}
.instagram-social-icon:hover i {
  color: #fff !important;           /* White icon on hover */
}
/* General Social icon styling */
.social-icon {
  color: black; /* Set icon color */
  font-size: 24px; /* Set icon size */
  text-decoration: none; /* Remove underline from icons */
  border: 2px solid black; /* Add a black border */
  border-radius: 15%; /* Make the border circular */
  padding: 5px; /* Add padding inside the border */
  display: inline-flex; /* Ensure proper alignment */
  align-items: center; /* Center the icon vertically */
  justify-content: center; /* Center the icon horizontally */
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s, border 0.2s;
   border: none; /* Remove default border for all icons */
}
.social-icon:hover {
  color: #008080; /* Change icon color on hover */
  border-color: #008080; /* Change border color on hover */
}
footer {
    align-self: flex-end; /* Align footer to the end */
    padding: 10px; /* Add padding */
    width: 100vw; /* Set width to 100% */
    text-align: center; 
    background-color: rgba(247, 187, 58, 0.8); /* Set background color */
    box-sizing: border-box;/* Include padding in the element's total width and height */
    border: 1px solid black; /* Add a thin black border */
    margin: 0, 20, 0, 20; /* Remove default margin */
    max-height: 20%; /* Set maximum height to 20% of the viewport */
}
/* Footer buttons container */
.footer-buttons {
    display: block;
    justify-content: center; /* Center the buttons horizontally */
    flex-wrap: wrap; /* Allow buttons to wrap to the next line if needed */
    gap: 10px; /* Add space between buttons */
    margin-bottom: 20px; /* Add margin at the bottom */
}
.footer-buttons .button {
    font-family: Arial, Helvetica, sans-serif;
}
.bottom-buttons {
    text-align: center; /* Center align buttons */
    margin-top: 50px;
    margin-bottom: 50px; /* Add margin to create space above the buttons */
}
.button-link {
    display: inline-block; /* Display buttons inline */
    padding: 10px 20px; /* Padding inside button */
    font-size: 16px; /* Font size */
    color: white; /* Text color */
    background-color: #008080; /* Background color */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline from text */
    border-radius: 5px; /* Rounded corners */
    margin: 5px 0; /* Margin around button */
    width: 300px; /* Set a fixed width for all buttons */
}
/*payment page buttons*/
.button-container {
    display: flex; /* Use flexbox to align buttons horizontally */
    justify-content: center; /* Center the buttons */
    gap: 10px; /* Add space between the buttons */
    margin-top: 20px; /* Add some space above the buttons */
}
.button-container button {
    padding: 10px 20px;
    background-color: #008080;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}
.button-container button:hover {
    background-color: #005f5f;
}
.payment-container {
    text-align: center;
    margin: 50px auto;
    padding: 20px;
    border: 2px solid #008080;
    border-radius: 10px;
    max-width: 600px;
    background-color: #f4f4f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.payment-container h1 {
    color: #008080;
    font-size: 36px;
}
.payment-container h2 {
    color: #333;
    font-size: 24px;
}
.payment-container h3 {
    color: #555;
    font-size: 20px;
}
.payment-container p {
    font-size: 18px;
    color: #333;
}
.payment-container form {
    margin-top: 20px;
    text-align: left;
}
.payment-container label {
    display: block;
    margin: 10px 0 5px;
    font-size: 16px;
    color: #333;
}
.payment-container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
.payment-container button {
    padding: 10px 20px;
    background-color: #008080;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}
.payment-container button:hover {
    background-color: #005f5f;
}
.payment-container .note {
    font-size: 16px;
    text-align: center;
    color: #555;
    margin-top: 10px;
}
/* Address Form container styling */
.form-container {
    max-width: 600px; /* Limit the width of the form */
    margin: 0 auto; /* Center the form on the page */
    padding: 20px; /* Add padding inside the container */
    background-color: #f9f9f9; /* Light background color */
    border: 1px solid #ccc; /* Light border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Form label styling */
.form-container label {
    display: block; /* Ensure labels are on their own line */
    margin-bottom: 5px; /* Add spacing below labels */
    font-weight: bold; /* Make labels bold */
    font-family: Arial, sans-serif; /* Use consistent font */
    font-size: 14px; /* Set font size */
}

/* Form input styling */
.form-container input {
    width: 100%; /* Make inputs span the full width of the container */
    padding: 10px; /* Add padding inside inputs */
    margin-bottom: 15px; /* Add spacing between inputs */
    border: 1px solid #ccc; /* Light border */
    border-radius: 5px; /* Rounded corners */
    font-size: 14px; /* Set font size */
    font-family: Arial, sans-serif; /* Use consistent font */
    box-sizing: border-box; /* Include padding and border in width */
}

/* Input focus styling */
.form-container input:focus {
    border-color: #6200ff; /* Highlight border on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 5px rgba(98, 0, 255, 0.5); /* Add subtle glow */
}

/* Button container styling */
.button-container {
        display: flex; /* Use Flexbox for layout */
        justify-content: center; /* Center the buttons horizontally */
        align-items: center; /* Align the buttons vertically */
        gap: 10px; /* Add spacing between the buttons */
        margin-top: 20px; /* Add some spacing above the buttons */
        text-align: center; /* Center-align the buttons */
        flex-wrap: wrap; /* Allow buttons to wrap to the next line if needed */
    }
/* Cancel button styling */
.button-container button {
    background-color: #6200ff; /* Button background color */
    color: white; /* Button text color */
    padding: 10px 20px; /* Add padding inside the button */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    font-size: 14px; /* Set font size */
    cursor: pointer; /* Change cursor to pointer on hover */
    font-family: Arial, sans-serif; /* Use consistent font */
}

/* Cancel button hover effect */
.button-container button:hover {
    background-color: #0056b3; /* Darken background color on hover */
}
#paypal-button-container {
    margin-top: 20px; /* Add spacing above the PayPal buttons */
    text-align: center; /* Center-align the PayPal buttons */
}
#cancel-button {
    padding: 6px 16px;      /* Less vertical and horizontal padding */
    font-size: 15px;        /* Slightly smaller font */
    width: auto;            /* Let the button size to its content */
    min-width: 80px;        /* Optional: set a minimum width */
    border-radius: 5px;     /* Keep rounded corners */
    background-color: #fc6d6d; /* Optional: red background for cancel */
    color: white;
    border: none;
    cursor: pointer;
    margin-left: 10px;      /* Space from PayPal button */
}

#cancel-button:hover {
    background-color: #f82e27; /* Slightly darker on hover */
}