body,html  
{
    height: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

/* this ensures padding and borders are included in element's total width and height */
*, *:before, *:after {
    box-sizing: inherit;
}

/* this removes default margin and padding on the home page */
#home-page, #home-page body {
    margin: 0 !important;
    padding: 0 !important;
}

/* this styles the hero section on the home page based on the ID */
#home-page .hero-section {
    margin-top: 0 !important;
    border-top: none;
    padding-top: 0;
    background-size: cover;
    width: 100%;
    height: calc(82vh - 120px);
    background-image: url('images/homepage.jpg');
    background-size: initial;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* this styles the carousel section on the home page */
#home-page #home-carousel-section {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* this makes the carousel background transparent */
#home-page .carousel-inner, 
#home-page .carousel-item {
    background-color: transparent !important;
}

/* this styles the navbar to be sticky at the top */
.navbar{
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: rgb(255, 247, 240);
    z-index: 9;
}

/* this styles the navigation bar */
.nav {
    display: flex;
    justify-content: space-between; 
    align-items: center;           
    padding: 10px 5% !important; /* Forces the 5% safe zone on all pages */
    background-color: #eccbe0; 
    box-sizing: border-box;
    width: 100%;
    min-height: 80px;
}

/* this styles the logo image in the navbar */
.logo-img {
    height: 60px;                  /* Set a consistent height */
    width: auto; 
    display:block;                  /* Keep proportions correct */
}

/* this styles the navigation icons */
.nav-items {
    display: flex;
    gap: 20px;                     /* Adds space between icons */
}

/* this styles the images within the navigation items */ 
.nav-items img {
    height: 30px;                  /* Makes icons a uniform size */
    width: auto;
}


/* this styles the pictures on the home page */
.pic {
    width: 100%;           /* Fills the width of the container */
    max-height: 550px;     /* Limits height on big screens so it's not 'weird' */
    object-fit: cover;     /* Crops the image perfectly to fit the height */
    object-position: center; /* Ensures the focus remains on the face/makeup */
    border-radius: 12px;
}

/* this styles the columns within a row */
.col {
    float: left;
    width: 33.33%;
    padding: 5px;
}

/* this styles the row to hold the columns */
.row {
    display: flex;
    display: flex;
    flex-wrap: nowrap; /* Change from wrap to nowrap to force one row */
    justify-content: center;
    gap: 15px;         /* Space between cards */
    padding: 20px;
    width: 100%;
}


/* this styles the icons space between them in the navigation bar */
.nav-items a{
    margin-left: 20px;
}

/* this the size of the icons on the navbar */
.nav-items a img{
    width: 30px;
}

/* .links-container{
    width: 100%;
    display: flex;
    padding: 10px 10vw;
    justify-content: center;
    list-style: none;
    border-top: 1px solid #0f0f0f;
} */

/* .link{
    text-transform: capitalize;
    padding: 0 10px;
    margin: 0 5px;
    text-decoration: none;
    color: #383838;
    opacity: 0.5;
    transition: .5s;
} */

/* this style the logo on the home page */
.hero-section .logo{
    height: 150px;
    display: block;
    margin: auto;
}
/* this styles the sub heading after the logo */
.hero-section .sub-heading{
    margin-top: 10px;
    text-align: center;
    color:  black;
    text-transform: capitalize;
    font-size: 35px;
    font-weight: 300;
}

/* this styles the footer section */
.footer-section {
    background-color: #fdf6f9; /* Soft blush pink to match your theme */
    padding: 60px 10% 20px;
    border-top: 1px solid #eccbe0;
    color: #333;
    font-family: 'Roboto', sans-serif;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-column {
    flex: 1;
    min-width: 200px;
}

.footer-column h4 {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #d63384; /* Deep pink for headers */
}

.footer-logo {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.footer-column a, .info {
    display: block;
    text-decoration: none;
    color: #666;
    margin-bottom: 10px;
    font-size: 14px;
    transition: 0.3s;
}

.footer-column a:hover {
    color: #d63384;
    padding-left: 5px; /* Slight movement on hover */
}

.footer-link:hover{
    color: pink;
}

.footer-title{
    text-decoration: underline;
    font-weight: bolder;
    font-size: xx-large;
    text-align: center;
}
.copy-right {
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 20px;
    font-size: 13px;
    color: #999;
}

.category{
    width: 200px;
    color: #111;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    list-style: none;
    padding-bottom: 10%;
    
}

.category-title{
    grid-column: span 2;
    text-transform: capitalize;
    color:black;
    font-size: 20px;
    margin-bottom: 20px;
}

.category .footer-link{
    text-decoration: none;
    text-transform: capitalize;
    color:black;
}



.copy-right{
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

.list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.contact-form {
    width: 95%;               /* Takes up most of the screen on mobile */
    max-width: 500px;         /* Prevents it from getting too wide on desktop */
    margin: 40px auto !important; /* Centers it without needing fixed % margins */
    padding: 30px;            /* Reduced from 100px so it fits on phones */
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    background-color: #f2f2f2;
    box-sizing: border-box;
  }
  .contact-form label {
    display: block;
    margin: 8px 0;
  }
  
  .contact-form input,
  .contact-form textarea {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  .contact-form button[type="submit"] {
    background-color: pink;
    color: white;
    padding: 10px 25px; /* Smaller, cleaner padding */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: block; 
    margin-left: auto;  /* Pushes the button to the right side */
    width: auto;        /* Ensures it only takes up the space it needs */
    font-weight: bold;
  }
  
  .contact-form button[type="submit"]:hover {
    background-color: gray;
  }
  
  
  
  footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
  }
  
  .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px; /* Modern way to add spacing */
    padding: 40px 0;
    width: 95%;
    margin: 0 auto;
    }
  
    /* Define the styling for each card */
    .card {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        overflow: hidden;
        transition: transform 0.3s ease;
    }
    .card:hover {
      transform: translateY(-10px); /* Lifts card on hover */
      box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  }
  
    /* Define the styling for the image in each card */
    .card img {
      width: 100%;
      height: 220px;
      object-fit: contain; /* Shows the WHOLE product instead of cropping/cutting it */
      background-color: #f9f9f9; /* Adds a light background for products with white edges */
      padding: 10px;
    }
  
    /* Define the styling for the description in each card */
    .card .description {
      padding: 15px 20px 5px 20px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
      text-align: center;
    }
    .card p {
      padding: 0 20px 20px 20px;
      font-size: 14px;
      color: #666;
      line-height: 1.6;
  }
  
    /* Define the styling for the search button in each card */
    .card .search-btn {
      background-color: blue;
      color: white;
      padding: 10px 20px;
      border-radius: 20px;
      margin-top: 20px;
      text-decoration: none;
    }
    .topnav {
      overflow: hidden;
      background-color: rgb(223, 191, 177);
    }
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    .topnav a:hover {
      background-color: #ddd;
      color: white;
    }
    
    .topnav a:hover:not(.active) {
      background-color: rgb(211, 194, 194);
    }
    
    .active {
      background-color: #ecd1e0;
    }
   
      *, *:before, *:after {
        box-sizing: inherit;
      }
      .topnav {
        overflow: hidden;
        background-color: rgb(237, 200, 184);
      }
      .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      .topnav a:hover {
        background-color: #ddd;
        color: white;
      }
      
      .topnav a:hover:not(.active) {
        background-color: rgb(211, 194, 194);
      }
      
      .active {
        background-color: #ecd1e0;
      }
      
      .hero-image {
        background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
        height: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
      }
      
      .hero-text {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
      }
      
      .hero-text button {
        border: none;
        outline: 0;
        display: inline-block;
        padding: 10px 25px;
        color: black;
        background-color: #ddd;
        text-align: center;
        cursor: pointer;
      }
      .hero-text button:hover {
        background-color: #555;
        color: white;
      }
      .button a{
        text-decoration: none;
        color: white;
      }
      hr {
        width: 20%;
      }
      .about-img {
        width: 100%;
        margin-left: 1%;
        margin-right: 1%;
        height: 600px
      }
      #menu-page .row {
        display: flex;
        flex-wrap: nowrap;          /* Allow them to go to next line if needed */
        justify-content: center;  /* Center the cards horizontally */
        gap: 15px;                  /* Increased from 15px to 30px for breathing room */
        padding: 20px;              /* Space around the whole row */
        width: 100%;
        overflow-x: auto;           /* Adds a scrollbar ONLY if the screen is too narrow */
        scroll-behavior: smooth;
      }
      #menu-page .column {
        flex: 0 0 18%;         /* Flex-grow, flex-shrink, flex-basis */
        margin-bottom: 20px;
        min-width: 200px;
        max-width: 350px; /* prevents cards from gettignt too wide on desktop */ 
      }
      #items-page.card-container {
        display: flex;
        flex-wrap: wrap;           /* Allow them to go to next line */
        justify-content: center;
        gap: 25px;
        padding: 40px;
    }
    
    #items-page .card {
        width: 300px;              /* Different width for the description cards */
        margin-bottom: 20px;
    }
      .card {
        display: flex;
        flex-direction: column;
        height: 100%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        overflow: hidden;
      }
      .card:hover {
        transform: translateY(-10px); /* Lifts the card when hovered */
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
      }
      .card img {
        width: 100%;
        height: 180px;    /* Reduced from 250px to keep the row slim */
        object-fit: contain; 
        padding: 10px;
        background-color: #fff;
      }
      .product-img {
        width: 100%;
        height: 300px;       /* Set a fixed height that looks good for all products */
        object-fit: contain; /* THIS FIXES STRETCHING: it keeps the original proportions */
        padding: 15px;       /* Adds space so the product doesn't touch the card edges */
        background-color: #fff; /* Ensures a clean look behind transparent products */
    }
      
      .container {
        padding: 0 16px;
      }
      
      .container::after, .row::after {
        content: "";
        clear: both;
        display: table;
      }
      
      .title {
        color: rgb(196, 185, 185);
      }
      
      .button {
        border: none;
        outline: 0;
        display: inline-block;
        padding: 8px;
        color: white;
        background-color: #000;
        text-align: center;
        cursor: pointer;
        width: 100%;
      }
      
      .button:hover {
        background-color: #555;
      }
      .footer {
        background-color: #f1f1f1;
        padding: 10px;
        text-align: center;
      }
      
      ul a {
        display: block;
        text-decoration: none;
      }
      
      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }
      
      td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
      }
      .contact-form {
        border-radius: 5px;
        background-color: #f2f2f2;
        padding: 20px;
        margin-left: 20%;
        margin-right: 20%;
      
      }
        .input[type=text], select, textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        margin-top: 6px;
        margin-bottom: 16px;
        resize: vertical;
      }
      
      .input[type=submit] {
        background-color:  #ff9900;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      
      .input[type=submit]:hover {
        background-color: #45a049;
      }
    
    #basketForm {
      width: 400px;
      padding: 20px;
      border: 1px solid #ccc;
      float: right;
    }
    
    
    .card-type-selector {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    
    .card-type-selector input[type="radio"] {
      margin-right: 10px;
    }
    
    .card-info {
      margin-bottom: 20px;
    }
    
    .card-info label {
      display: block;
      margin-bottom: 10px;
    }
    
    .card-info input[type="text"], .card-info input[type="month"] {
      width: 100%;
      padding: 12px 20px;
      margin-bottom: 20px;
      box-sizing: border-box;
    }
    
    #cardHolderName{
      width: 30%;
    }
    
    .product-price{
      width: 400px;
      padding: 20px;
      float:left;
    }
    
    #cost-container{
      width: 400px;
      padding: 20px;
    }
    
    #payForm{
      width: 500px;
      padding: 20px;
      border: 1px solid #ccc;
    }

    #payForm p {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    #items-totals{
      width: 400px;
      padding: 20px;
      border: 1px solid #ccc;
    }
    
    #pay-details-cont{
     width: 500px;
     float: right;
    }
    
    #cardnameN1, #cardnameN2,#cardnameN3{
      width: 70px;
    }

    /* Fix the small fixed-width inputs */
    #cardnameN1, #cardnameN2, #cardnameN3, #month, #year, #cvvf {
        flex: 1 1 80px; /* Grow to fill space, but don't shrink below 80px */
        width: auto !important; 
        min-width: 60px;    /* Overrides the fixed 70px/100px */
    }

    #month, #year{
      width: 100px;
    }
    .basket-wrapper {
      margin-top: 50px;
      padding-bottom: 100px;
    }
    
    .section-title {
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 30px;
    }
    
    .basket-layout {
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
    }
    
    .payment-section {
      flex: 2;
      min-width: 350px;
    }
    
    .summary-section {
      flex: 1;
      min-width: 300px;
    }
    
    /* Form Styling */
    .modern-form {
      background: #fff;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    
    .input-group label {
      display: block;
      font-size: 13px;
      color: #888;
      margin-bottom: 5px;
    }
    
    .card-name-inputs, .date-selects {
      display: flex;
      gap: 10px;
    }
    
    .modern-form input, .modern-form select {
      width: 100%;
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 8px;
      margin-bottom: 15px;
    }
    
    /* Summary Card */
    .summary-card {
      background: #fdf6f9; /* Soft blush background */
      padding: 25px;
      border-radius: 15px;
      position: sticky;
      top: 100px;
    }
    
    .summary-table {
      width: 100%;
      border-collapse: collapse;
    }
    
    .summary-table td {
      padding: 12px 0;
      border-bottom: 1px solid #eee;
    }
    
    .total-row {
      font-size: 18px;
      color: #d63384; /* Deep pink color */
    }
    
    /* Ensure tables inside the basket don't break the layout */
    #items-totals, #cost-container table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;       /* Forces table to stay inside its container */
    word-wrap: break-word;
    }
    /* Buttons */
    .btn-checkout {
      width: 100%;
      background: #333;
      color: white;
      padding: 15px;
      border: none;
      border-radius: 10px;
      margin-top: 20px;
      cursor: pointer;
      font-weight: bold;
      transition: 0.3s;
    }
    
    .btn-checkout:hover {
      background: #eccbe0;
      color: #333;
    }
    
    .btn-clear {
      width: 100%;
      background: none;
      border: 1px solid #ddd;
      margin-top: 10px;
      padding: 8px;
      border-radius: 10px;
      color: #999;
    }
    /* This forces the two sections to sit side-by-side */
    .basket-flex-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      padding: 40px 10%;
      background-color: #fdf6f9; /* Light blush background for the whole section */
    }
    
    /* Override your old fixed widths and floats */
    #pay-details-cont, #cost-container {
      float: none !important; /* Removes the old float: right */
      width: 100% !important;
      max-width: 500px !important; /* Limits size on big screens */
      background: white;
      padding: 30px !important;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
      border: none !important;
    }
    
    /* Make your inputs look more modern */
    #payForm input[type="text"], #month, #year, #cvvf, #payform select {
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 8px;
      margin-bottom: 10px;
      box-sizing: border-box;
     width: 100%;
    }
    
    /* Style the buttons to look like a real shop */
    #check-clear, button[onclick="validatePaymentForm()"] {
      padding: 12px 25px;
      border-radius: 25px;
      border: none;
      cursor: pointer;
      font-weight: bold;
      transition: 0.3s;
    }
    
    button[onclick="validatePaymentForm()"] {
      background-color: #333;
      color: white;
    }
    
    button[onclick="validatePaymentForm()"]:hover {
      background-color: #eccbe0;
      color: #333;
    }
    
    #check-clear {
      background-color: #eee;
      color: #777;
    }
    /* This is the magic fix to put them side-by-side */
    .side-by-side-container {
        display: flex !important;
        flex-wrap: wrap !important; /* This allows the boxes to drop below each other */
        justify-content: center !important;
        gap: 20px !important;
        width: 95% !important;
        max-width: 1200px;
        margin: 20px auto !important;
    }
    
    /* Remove fixed widths from the payment and cost boxes */
    #pay-details-cont, #cost-container, #payForm, #items-totals, .product-price {
    width: 100% !important; /* Allow them to take full width of their parent */
    max-width: 500px !important; /* But don't let them get too big on desktop */
    min-width: unset !important; /* Remove any restrictive minimums */
    float: none !important; /* Ensure no old floats are breaking the flexbox */
    }
    /* Ensure each section takes up equal width and stops floating */
    #pay-details-cont, #cost-container {
      flex: 1 !important; /* Makes both boxes equal width */
      float: none !important; /* Removes old float: right/left */
      margin: 0 !important;
      min-width: 350px !important; /* Prevents them from getting too squished */
      background: #ffffff !important;
      border-radius: 15px !important;
      padding: 30px !important;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    }
    
    /* Hide the 'BASKET' text if it's getting in the way of the alignment */
    .side-by-side-container h2 {
      width: 100%;
      text-align: center;
    }
.weather-wrapper {
    text-align: center;
    padding-top: 15%;
    
    min-height: 60vh;
}

.search-container input {
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #eccbe0;
    width: 250px;
}

.search-container button {
    padding: 10px 20px;
    border-radius: 20px;
    border: none;
    background-color: #333;
    color: white;
    cursor: pointer;
}

.weather-card {
    background: white;
    max-width: 300px;
    margin: 30px auto;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.weather-card h1 {
    color: #d63384; /* Your brand's deep pink */
    font-size: 48px;
    margin: 10px 0;
}
.suggestion-box {
    margin-top: 20px;
    padding: 15px;
    background-color: #fdf6f9; /* Blush background */
    border-left: 5px solid #d63384; /* Deep pink accent */
    border-radius: 5px;
}

#suggestionText {
    font-weight: bold;
    color: #333;
    font-style: italic;
    line-height: 1.4;
}
img {
    max-width: 100%;
    height: auto;
}

/* Responsive Styles for each screen size */
/* Optional: Adjust height for mobile devices */
@media (max-width: 768px) {
    .pic {
        height: 350px;
    }
}
/* For tablets and smaller (under 768px) */
@media (max-width: 768px) {
    .nav {
        flex-direction: column; /* Stacks logo and icons */
        gap: 15px;
        padding: 20px;
    }

    .hero-section {
        height: 50vh; /* Make hero smaller on mobile */
    }

    .sub-heading {
        font-size: 24px; /* Smaller text for smaller screens */
    }

    .card {
        width: 100%; /* Product cards take full width on phones */
    }
}

/* For very small phones (under 480px) */
@media (max-width: 480px) {
    .nav-items img {
        height: 25px; /* Smaller icons */
    }
}
@media (max-width: 768px) {
    /* Stack the checkout sections */
    .side-by-side-container {
        flex-direction: column;
        align-items: center;
    }

    /* Make the cards fill the screen on mobile */
    #menu-page .column {
        flex: 1 1 100%;
    }

    /* Fix the card number input on mobile */
    #cardNumber {
        width: 100%;
    }
    
    /* Ensure tables don't overflow */
    table {
        font-size: 14px;
    }
}
@media (max-width: 1024px) {
    /* On tablets, allow products to wrap to a 2nd row so they aren't squashed */
    #menu-page .row {
        flex-wrap: wrap;
    }
    #menu-page .column {
        flex: 1 1 30%; /* 3 items per row */
    }
}

@media (max-width: 768px) {
    /* Stack the checkout sections */
    .side-by-side-container {
        flex-direction: column !important;
        align-items: center;
        padding: 10px !important;
    }

    /* Cards fill the screen on mobile */
    #menu-page .column {
        flex: 1 1 100% !important;
        max-width: 100%;
    }

    /* Stack name inputs on very small screens */
    #payForm p {
        display: flex;
        flex-wrap: wrap; /* Stacks inputs if the screen gets very thin */
        gap: 10px;
        align-items: center;
    }

    #pay-details-cont, #cost-container {
        min-width: 100% !important;
    }
}
@media (max-width: 768px) {
    /* Stack everything in the basket section */
    .side-by-side-container {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Remove extra padding that might squash the form on mobile */
    #pay-details-cont, #cost-container {
        padding: 15px !important;
        margin: 10px 0 !important;
    }

    /* Make sure the "Basket" title is centered */
    .basket-flex-wrapper h2 {
        font-size: 24px;
    }

    /* Prevent tables from causing horizontal scroll */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
@media (max-width: 480px) {
    .contact-form button[type="submit"] {
        width: 100%;        /* Full width button on very small phones */
        margin-left: 0;
    }
}