@tailwind base;
@tailwind components;
@tailwind utilities;

.navbar-collapse {
    margin-top: 10px;
}

.nav-link:hover {
    color: #ae9c9c !important; 
}



html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

  @media screen and (max-width: 480px) {
    .contactdetails-part1 {
      width: 100%; 
    }
  }

.instafacebook{
    display: flex;
    justify-content: left;  
}

.instafacebook a {
    color: white;
  }
  .instafacebook a:hover {
    filter: brightness(80%);
  }

  #whatsapp-btn {
    position: fixed;
    bottom: 5%; 
    right: -3%;
    z-index: 9999;
  }
  
  #whatsapp-btn img {
    max-width: 173px;
    width: 30%;
    height: auto; 
  }

  @media (max-width: 768px) {
    #whatsapp-btn img {
      max-width: 150px;
    }
  }


  .foterlast-p p{
    margin-bottom: 2px;
    margin-top: 10px;
  }

.footerlast {
  margin-top: 100px;
  background-color:#4c2a40;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start; 
  color: #f5efe4;
  min-height: 450px;
  flex-wrap: wrap;
  padding: 20px 100px;
}

.foterlast-p {
  flex: 1 1 250px;
  margin: 20px;
}

.contactuslastpart {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.contactuslastpart i {
  margin-right: 10px;
}

@media (max-width: 768px) {
  
  .footerlast {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0px;
    justify-content: center;
  }

  .foterlast-p {
    flex-basis: auto;
    margin: 30px 0; 
  }
  .contactuslastpart{
    justify-content: center;
  }
  .instafacebook{
    justify-content: center;
    display: flex;
  }

}
.foterlast-p a {
  color: white;
  text-decoration: none; 
}
.foterlast-p a:hover {
  text-decoration: underline; 
  color: #ea9d9d; 
}
.text-container {
  text-align: center;
  color: #f5efe4;
  background-color: #4c2a40;
  padding: 10px 10px;
  font-weight: 500;
  font-size: 13px;
}

.text {
  animation: slideUp 0.3s ease-in-out forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(-30px);
  }
  to {
    transform: translateY(0);
  }
}

@media (max-width: 613px) {
  
  .text-container {
    padding: 10px 3px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
  z-index: 50000;
  background-color: rgb(227 209 209);
  color: rgb(12, 12, 12);
  position: sticky;
  top:0
}
.logo {
  margin-left: 20px; 
}
.logo img {
  max-width: 167px; 
  height: 102px;
}
.navbar {
  background-color: #4c2a40;
}
.navbar-nav .nav-link {
  color: #f5efe4 !important;
  font-weight: 600;
  margin: 0 15px;
}
.navbar-nav .nav-link:hover {
  color: #877a63 !important;
}


.dropdown-content a:hover {
  text-decoration: underline; 
  color: #474775; 
} */
.navigation ul li:hover {
  border-bottom: 2px solid #333; 
}

.side-menu {
  position: fixed;
  top: 65px;
  right: -250px; 
  width: 250px;
  height: 100%;
  background-color: rgb(227 209 209);
  color: rgb(16, 16, 16);
  box-shadow: 0px 0 0px rgba(0,0,0,0.5); 
  transition: right 0.3s ease; 
  z-index: 100000;
  opacity: 1;
  display: none;
} */

.side-menu.show {
  right: 0; 
}




@media (max-width: 768px) {
  .navigation {
      display: none;
  }

  .menu-toggle {
      display: block;
  }
}

.side-menu.show {
  display: block;
}

.image-box {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  transition: transform 0.3s ease;
}

.image-box img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 15px;
  transition: transform 0.3s ease;
}

.image-box:hover img {
  transform: scale(1.05);
}

.overlay-text {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-size: 28px;
  font-weight: bold;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

@media (max-width: 768px) {
  .image-box img {
    height: 300px;
  }
}

   .shirt-main {
      font-family: Arial, sans-serif;
      margin: 40px auto;
      max-width: 1100px;
      padding: 0 15px;
    }

    .product-container {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
    }

    .image-gallery {
      flex: 1 1 40%;
      display: flex;
      gap: 10px;
    }

    .thumbnail-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .thumbnail-list img {
      width: 80px;
      height: 100px;
      object-fit: cover;
      border-radius: 8px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: 0.2s;
    }

    .thumbnail-list img.active {
      border: 2px solid black;
    }

    .main-image img {
      width: 400px;
      height: 500px;
      object-fit: cover;
      border-radius: 10px;
    }

    .product-details {
      flex: 1 1 45%;
    }

    .price {
      color: red;
      font-size: 22px;
      font-weight: bold;
    }

    .old-price {
      text-decoration: line-through;
      color: gray;
      margin-left: 10px;
    }

    .size-buttons button {
      border: 1px solid #ccc;
      margin: 5px;
      padding: 8px 14px;
      background: white;
      border-radius: 5px;
      cursor: pointer;
    }

    .size-buttons button.active {
      background: black;
      color: white;
    }

    .add-btn {
      background-color: black;
      color: white;
      padding: 10px 20px;
      border: none;
      margin-top: 20px;
      border-radius: 5px;
      cursor: pointer;
    }

    @media (max-width: 768px) {
      .shirt-main {
        margin: 20px auto;
    }
      .product-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
      }
      .main-image img {
        width: 100%;
        height: auto;
        max-width: 400px;
      }
      .main-image {
        order: 1; /* Move main image to the top */
        width: 100%;
        text-align: center;
    }
      .image-gallery {
        /* Make the image section take full width */
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }
    .thumbnail-list {
        /* Adjust thumbnails to display horizontally on mobile for better use of space */
        flex-direction: row;
        gap: 5px;
        order: 2; /* Move thumbnails below the main image */
        justify-content: center;
    }

    .thumbnail-list img {
        width: 60px; /* Smaller, tappable thumbnails */
        height: 75px;
    }
    .product-details {
        /* Make product details take full width */
        flex: 1 1 100%;
        padding: 0 15px; /* Add internal padding */
    }
    .size-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    .size-buttons button {
        margin: 0;
        padding: 10px 14px; /* Slightly larger tap area */
    }
    }
    /* --- HEADER AND LOGO RESPONSIVENESS --- */
/* Target screens smaller than 768px (standard tablet/mobile breakpoint) */
@media (max-width: 768px) {
    .header {
        padding: 5px 10px; /* Reduce padding */
    }
    .logo {
        margin-left: 0; /* Remove left margin on small screens */
    }
    .logo img {
        /* Scale down the logo image */
        max-width: 120px;
        height: auto; /* Maintain aspect ratio */
    }
}
/* --- COLLECTION SECTION RESPONSIVENESS --- */

/* This targets screens smaller than a tablet */
@media (max-width: 768px) {
    .collection-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Make the image boxes stack vertically on mobile */
    .collection-section .col-md-4 {
        margin-bottom: 20px; /* Add space between stacked boxes */
        flex: 0 0 100%; /* Make each column take full width */
        max-width: 100%;
    }

    .image-box img {
        /* Reduce the height of the images on mobile */
        height: 250px; 
    }

    .overlay-text {
        font-size: 24px; /* Slightly smaller text */
    }
}
/* --- GLOBAL RESET & TYPOGRAPHY --- */
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; /* Keep this to prevent horizontal scrolling */
}

/* --- HEADER AND LOGO RESPONSIVENESS --- */
.header {
    /* ... existing styles ... */
    position: sticky;
    top: 0;
}
.logo img {
    max-width: 167px; 
    height: 102px;
}

@media (max-width: 768px) {
    .header {
        padding: 5px 10px; 
    }
    .logo {
        margin-left: 0;
    }
    .logo img {
        max-width: 120px; /* Smaller logo on tablet/mobile */
        height: auto; 
    }
}

/* --- TEXT CONTAINER RESPONSIVENESS --- */
@media (max-width: 613px) {
    .text-container {
        padding: 10px 3px;
        font-size: 11px; /* Smaller text on small phones */
    }
}

/* --- COLLECTION SECTION RESPONSIVENESS (Crucial for the image boxes) --- */
.image-box img {
    width: 100%;
    height: 400px; /* Default height for desktop */
    /* ... other styles ... */
}

@media (max-width: 768px) {
    .collection-section .col-md-4 {
        margin-bottom: 20px; 
        flex: 0 0 100%; /* Full width for image boxes on mobile */
        max-width: 100%;
    }
    .image-box img {
        height: 250px; /* Reduced height on mobile */
    }
    .overlay-text {
        font-size: 24px;
    }
}

/* --- WHATSAPP BUTTON ADJUSTMENTS --- */
#whatsapp-btn {
    position: fixed;
    bottom: 5%; 
    right: 15px; /* Fixed distance from the edge */
    z-index: 9999;
}
#whatsapp-btn img {
    width: 60px; /* Set a specific size for better control */
    max-width: 100%; 
    height: auto; 
}

@media (max-width: 768px) {
    #whatsapp-btn img {
        width: 50px;
    }
}


/* --- FOOTER RESPONSIVENESS --- */
/* You already have a good setup for the footer, 
   but ensuring the padding is better on mobile: */
@media (max-width: 768px) {
    .footerlast {
        /* ... existing styles ... */
        padding: 20px 0; /* Remove large horizontal padding */
    }
    /* ... rest of your existing footer media query ... */
}
.accordion-content p, .accordion-content ul {
            margin: 0;
            padding-right: 20px;
            font-size: 13px;
            line-height: 1.6;
            color: #666;
            /* === START: CHANGE HERE === */
            text-align: justify; 
            /* === END: CHANGE HERE === */ }

            .header-icons {
    display: flex;
    align-items: center;
    margin-right: 20px; /* Adjust as needed for spacing from the edge */
}

.header-icon {
    color: #4c2a40; /* Match the header text/logo color */
    font-size: 20px; /* Standard icon size */
    margin-left: 20px; /* Spacing between icons */
    transition: color 0.2s ease;
}

.header-icon:hover {
    color: #bc2587; /* Hover color for feedback */
    text-decoration: none; /* Remove underline on hover for links */
}
@media (max-width: 768px) {
    /* ... existing mobile styles ... */
    
    .header-icons {
        margin-right: 10px; /* Reduced margin on mobile */
    }
    
    .header-icon {
        font-size: 18px; /* Slightly smaller icons on mobile */
        margin-left: 15px; /* Reduced spacing between icons on mobile */
    }

    /* You can make them even smaller for very small screens if needed: */
    @media (max-width: 480px) {
        .header-icon {
            font-size: 16px; 
            margin-left: 10px;
        }
    }
}



.size-chart-link {
    background: none;
    border: none;
    color: #4c2a40; /* Your brand color for the link */
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    margin-left: 10px; /* Add a small space after the colon */
}

.size-chart-link:hover {
    color: #ae9c9c;
}

/* Modal Overlay */
.size-chart-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000000; /* Ensure it's on top of everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
    backdrop-filter: blur(3px);
}

/* Modal Content Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 5% from top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Default width */
    max-width: 700px; /* Maximum width */
    position: relative;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-content h3 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* Close Button */
.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
}

.close-btn:hover,
.close-btn:focus {
    color: #4c2a40;
    text-decoration: none;
}

/* Size Chart Image Styling */
.size-chart-image {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 15px;
}

/* Responsive Adjustments for Modal */
@media (max-width: 768px) {
    .modal-content {
        width: 90%; /* Larger width on smaller screens */
        margin: 10% auto; /* Move down slightly */
    }
}

@media (max-width: 480px) {
    .modal-content {
        margin: 15% auto; 
        padding: 15px;
    }
    .close-btn {
        font-size: 24px;
        top: 5px;
        right: 15px;
    }
}

/* Custom CSS for the Simple Purple Header */
.simple-header-bar {
    background-color: #4c2a40; /* Purple color */
    padding: 7px 20px;
    display: flex;
    justify-content: flex-end; /* Pushes content (the cart icon) to the right */
    align-items: center;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: Adds a slight shadow */
    position: sticky; /* Optional: Keep it visible at the top */
    top: 0;
    z-index: 1000;
    margin-bottom: 20px;
}


.simple-header-bar .header-icon {
    color: #e3d1d1 !important; 
    font-size: 0.8rem;      /* Set a proper size */
    margin: 0;
    padding: 0;
    transition: color 0.2s;
}
.simple-header-bar .header-icon:hover {
    color: #e8d66f !important; /* Use !important if other CSS is overriding */
    cursor: pointer;
}
/* --- Custom Side Cart Styling --- */

/* 1. Ensure the modal-dialog is flush right and short */
.modal-slide-right {
    position: fixed; /* Make it stay in place */
    right: 0;        /* Push to the far right edge */
    top: 0;          /* Start from the top */
    margin: 0;       /* Remove any default centering margin */
    height: 100vh;   /* Make it take the full height of the viewport */
    width: 100%;     /* Full width on small screens */
    max-width: 380px; /* Max width on desktop screens for the slide effect */
    transform: translate(100%, 0); /* CRITICAL: Hide it off-screen to the right */
    transition: transform 0.3s ease-out; /* Smooth slide-in animation */
}

/* 2. When the modal is active (showing), slide it back into view */
.modal.show .modal-slide-right {
    transform: translate(0, 0); /* Slide back to the origin (visible) */
}

/* 3. Style the content inside the dialog */
.modal-slide-right .modal-content {
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); /* Add depth */
}

/* 4. Ensure background doesn't interfere */
/* This makes the main modal background (the fade) darker for focus */
#cartModal.fade:not(.show) .modal-slide-right {
    transform: translate(100%, 0); /* Ensure it's hidden when not showing */
}
/* --- Custom Styling for Cart Modal Footer Button --- */
.custom-cart-btn {
    border-radius: 8px !important; /* Adds significant rounded corners */
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 15px; /* Slightly larger padding for a single button */
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
}

/* Styling for the SHOP NOW button (Dark) */
.btn-dark.custom-cart-btn {
    background-color: #4c2a40 !important; /* Black background */
    border-color: #4c2a40 !important;
    color: #e3d1d1 !important;
}

/* Make sure the modal footer handles the single button display */
#cartModal .modal-footer {
    display: flex;
    justify-content: center; /* Center the single button */
    padding: 15px;
}