/* CSS Variables */
:root {
    --saffron: #FF8C00;
    --saffron-light: #FFA500;
    --saffron-gold: #FFBF00;
    --green: #2E8B57;
    --green-light: #3CB371;
    --off-white: #FAF9F6;
    --dark-grey: #333333;
    --red: #FF4500;
    --alert-success: #d4edda;
    --alert-danger: #f8d7da;
    --alert-info: #d1ecf1;

    /* New Navbar Colors - Hindu devotional theme */
    --navbar-bg-start: #4A0E4E; /* Deep Plum */
    --navbar-bg-end: #7B1FA2;   /* Amethyst */
    --navbar-text-color: #F8F8F8; /* Near white */
    --navbar-hover-color: #FFD700; /* Gold */
    --navbar-border-color: #FFBF00; /* Golden Saffron */
}

/* Combined style for Bootstrap modal backdrop */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.4) !important; /* Adjust darkness */
    opacity: 0.4 !important; /* Ensure compatibility */
    height: 100% !important; /* Example: Make it half the height of the viewport */
    /* If you choose a fixed pixel height, use this instead: */
    /* height: 300px !important; */

    /* Optional: Adjust position if not 100% height to center or place as desired */
    /* For example, to center a 50% height backdrop: */
    /* top: 25% !important; */
}
/* General Body and Typography */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--off-white);
    color: var(--dark-grey);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
    display: flex; /* Make body a flex container */
    flex-direction: column; /* Stack children vertically */
    min-height: 100vh; /* Ensure body takes at least full viewport height */


}

/* Custom Alert Styling */
/* Custom Alert Styling - MODIFIED */
.custom-alert {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 9999;
    padding: 5px 9px;
    border-radius: 0.625rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideInRight 0.5s forwards, fadeOut 0.5s 4.5s forwards;
    
}
/* New responsive rule for mobile devices */
@media (max-width: 576px) {
    .custom-alert {
        top: 67px;
        right: 0px;
        left: 10px; /* Make it stretch across the screen */
        min-width: unset; /* Remove the fixed minimum width */
        padding: 4px 7px; /* Slightly reduced padding */
    }
}
.custom-alert-message {
    margin-right: 15px;
    font-weight: 500;
}

.custom-alert.alert-success {
    background-color: var(--alert-success);
    color: #155724;
    border: 0.125rem solid;
    /* border-image: linear-gradient(to right, #28a745, #218838) 1; */
    opacity: 0.9; /* Added opacity */
}

.custom-alert.alert-danger {
    background-color: var(--alert-danger);
    color: #721c24;
    border: 0.125rem solid;
    border-image: linear-gradient(to right, #dc3545, #c82333) 1;
    opacity: 0.9; /* Added opacity */
}

.custom-alert.alert-info {
    background-color: var(--alert-info);
    color: #0c5460;
    border: 2px solid;
    border-image: linear-gradient(to right, #17a2b8, #138496) 1;
    opacity: 0.9; /* Added opacity */
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Navbar Styling */
.navbar {
    background: linear-gradient(to right, var(--navbar-bg-start), var(--navbar-bg-end));
    border-bottom: 2px solid var(--navbar-border-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); /* Stronger shadow for depth */
    transition: top 0.4s ease-in-out, background 0.3s ease; /* Added top for floating effect */
    padding-top: 0.5rem; /* Compact padding for ~1.5cm height */
    padding-bottom: 0.5rem; /* Compact padding for ~1.5cm height */
    height: auto; /* Allow height to adjust with padding */
}

.navbar-brand {
    color: var(--navbar-text-color) !important;
    font-size: 1.5rem; /* Adjusted: Smaller brand font size */
    font-weight: 800; /* Bolder */
    letter-spacing: 0.05em; /* Slight letter spacing */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4); /* More pronounced shadow */
    transition: color 0.3s ease;
}

.navbar-brand:hover {
    color: var(--navbar-hover-color) !important; /* Gold on hover */
}

.navbar-nav .nav-link {
    color: var(--navbar-text-color) !important;
    font-weight: 600; /* Slightly bolder links */
    font-size: 0.95rem; /* Adjusted: Slightly smaller nav links */
    transition: color 0.3s ease, transform 0.2s ease, text-shadow 0.3s ease;
    padding: 0.4rem 0.8rem; /* Further compact padding for nav links */
    position: relative; /* For underline effect */
    /* Embossed text effect */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3), -1px -1px 2px rgba(255,255,255,0.1);
}

.navbar-nav .nav-link:hover {
    color: var(--navbar-hover-color) !important;
    transform: translateY(-2px);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); /* Glowing effect on hover */
}

/* Underline effect on hover */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--navbar-hover-color);
    transition: width 0.3s ease-out;
}

.navbar-nav .nav-link:hover::after {
    width: 80%;
}

.navbar-nav .nav-item .btn-primary {
    background-color: var(--saffron) !important; /* Saffron for buttons */
    border-color: var(--saffron) !important;
    color: white !important;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 0.4rem 0.8rem; /* Compact button padding */
    font-weight: 600;
    margin-left: 0.5rem; /* Reduced margin for closer buttons */
}

.navbar-nav .nav-item .btn-primary:hover {
    background-color: var(--saffron-gold) !important; /* Golden Saffron on hover */
    border-color: var(--saffron-gold) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.navbar-nav .dropdown-menu {
    background-color: var(--off-white); /* Off-white dropdown background */
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem; /* More rounded dropdown */
}

.navbar-nav .dropdown-item {
    color: var(--dark-grey);
    padding: 0.75rem 1.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar-nav .dropdown-item:hover {
    background-color: var(--saffron); /* Saffron on hover */
    color: white;
}

/* ADD THIS NEW RULE FOR THE HAMBURGER ICON BORDER COLOR */
.navbar-toggler {
    border-color: var(--navbar-hover-color) !important; /* Gold border for the button */
}

/* ADD THIS NEW RULE FOR THE HAMBURGER ICON COLOR */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFD700' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* Cart Badge */
#cart-count { /* Changed from #cart-total-quantity to #cart-count based on _base.html */
    background-color: var(--red); /* Orange-red for attention */
    font-size: 0.75em;
    padding: 0.3em 0.6em;
    border-radius: 50%;
    position: absolute;
    /* ADJUSTED: Bring the badge closer to the icon and above it */
    top: -8px;  /* Moved slightly higher */
    right: 40px; /* Crucially increased to pull it further left over the icon */
    transform: translate(50%, -50%); /* Still shifts it out by half its size from the new (top,right) point */
    display: none; /* Hidden by default, shown by JS */
    color: white;
    font-weight: bold;
    min-width: 20px; /* Ensure it's a circle even with single digit */
    text-align: center;
}
.nav-link.cart-icon-container {
    position: relative; /* Container for the badge */
    display: flex; /* Flex to center icon and badge */
    align-items: center;
    justify-content: center;
}

/* Search input styling */
.navbar .form-control {
    border-radius: 9999px; /* Pill shape */
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--navbar-text-color);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    transition: all 0.3s ease;
    height: auto; /* Let padding define height */
    flex-grow: 1; /* Allow it to shrink if needed but still look good */
    max-width: 250px; /* Limit width on larger screens */
}

.navbar .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.navbar .form-control:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--navbar-hover-color);
    box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25);
}

.navbar .btn-outline-light {
    border-color: var(--navbar-text-color);
    color: var(--navbar-text-color);
    border-radius: 9999px; /* Pill shape */
    transition: all 0.3s ease;
    padding: 0.4rem 1rem; /* Adjusted for better button size */
    height: auto; /* Let padding define height */
}

.navbar .btn-outline-light:hover {
    background-color: var(--navbar-hover-color);
    color: var(--navbar-bg-start);
    border-color: var(--navbar-hover-color);
}


/* Main Content Area */
/* Main Content Area */
.main-content-area {
    padding-top: 7rem; /* Let's revert to 7rem, as 11rem is excessive if it doesn't solve it */
    flex-grow: 1;
    background-color: rgba(255, 255, 255, 0.98);
    border-radius: 1.5rem;
    padding: 2rem; /* This sets 2rem for right, bottom, left. Top is overridden by padding-top */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* NEW: Styles for horizontally scrollable carousels */
#featured-artworks-carousel,
#all-products-carousel,
[id^="category-carousel-"] { /* This targets all category carousels */
    -webkit-overflow-scrolling: touch; /* Improves scrolling on iOS */
    touch-action: pan-x pan-y; /* Allow both horizontal and vertical panning for free-form scroll */
    overflow-x: auto; /* Ensures horizontal scrolling */
    white-space: nowrap; /* Keeps items in a single line */
    scroll-behavior: smooth; /* Already there, good for buttons */
    /* REMOVED: scroll-snap-type property entirely to allow free-flowing scroll */
}

/* If you use scroll-snap, ensure direct children also snap */


.thumbnail-wrapper {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.thumbnail-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
}

.thumbnail-wrapper:hover img {
    transform: scale(1.05);
}

/* NEW/MODIFIED RULE: Ensure headings inside main content are properly spaced */
.main-content-area h1,
.main-content-area h2,
.main-content-area h3,
.main-content-area h4,
.main-content-area h5,
.main-content-area h6 {
    margin-top: 0; /* Important: Removes any default top margin that might be collapsing or causing issues */
    padding-top: 2rem; /* Adds explicit space above the heading content */
    margin-bottom: 1rem; /* Ensures consistent spacing below the heading */
}

/* If "Our Divine Collection" is specifically an h1, you can be more precise */
.main-content-area h1 {
    font-size: 2.5rem; /* Example: adjust font size if needed */
    margin-top: 0;
    padding-top: 2rem;
    margin-bottom: 1rem;
}

/* ... rest of your style.css ... */

/* Footer Styling */
.footer {
    background: linear-gradient(to left, var(--saffron), var(--saffron-light));
    color: var(--off-white);
    padding: 3rem 0;
    border-top: 2px solid var(--saffron-gold);
}

.footer h5 {
    color: var(--off-white);
    margin-bottom: 1rem;
    font-weight: 600;
}

.footer p, .footer li {
    color: var(--off-white);
    font-size: 0.95rem;
}

.footer a {
    color: var(--off-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: var(--green);
}

.social-icons a {
    color: var(--off-white);
    font-size: 1.5rem;
    margin-right: 15px;
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-icons a:hover {
    color: var(--green);
    transform: scale(1.1);
}

/* General Button Styling */
.btn-primary {
    background-color: var(--saffron);
    border-color: var(--saffron);
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    background-color: var(--saffron-light);
    border-color: var(--saffron-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-success {
    background-color: var(--green);
    border-color: var(--green);
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-success:hover {
    background-color: var(--green-light);
    border-color: var(--green-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-info:hover {
    background-color: #138496;
    border-color: #138496;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Card Styling */
.card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.card-header {
    background-color: #F0F0F0;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    color: var(--dark-grey);
}

/* Form Controls */
.form-control, .form-select {
    border-radius: 0.5rem;
    border: 1px solid #ced4da;
    padding: 0.75rem 1rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--saffron);
    box-shadow: 0 0 0 0.25rem rgba(255, 140, 0, 0.25);
}

.form-control:disabled, .form-control[readonly] {
    background-color: #f5f5f5;
    opacity: 0.7;
}

/* Product Ratings */
.product-card .rating {
    color: var(--saffron-gold);
}
.product-card .final-price {
    color: var(--red);
}

/* Admin Dashboard Cards */
.card.bg-primary { background-color: var(--saffron) !important; }
.card.bg-success { background-color: var(--green) !important; }
.card.bg-info { background-color: #17a2b8 !important; }
.card.bg-warning { background-color: var(--saffron-gold) !important; color: var(--dark-grey) !important; }

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .navbar-nav {
        text-align: center;
        margin-top: 1rem;
        width: 100%; /* Ensure they take full width */
    }
    .navbar-nav .nav-item {
        margin-bottom: 0.5rem;
    }
    .navbar-nav .nav-item .btn-primary {
        width: 80%; /* Buttons take 80% width in mobile */
        margin: 0.5rem auto; /* Center buttons */
    }
    /* Adjust search form for small screens */
    .navbar form.d-flex {
        flex-direction: column; /* Stack vertically */
        align-items: center; /* Center items in the column */
        width: 100%; /* Take full width */
        margin-top: 1rem;
        margin-bottom: 1rem; /* Added bottom margin for spacing */
    }
    .navbar form.d-flex .form-control {
        width: 90%; /* Input takes 90% width */
        margin-bottom: 0.5rem;
    }
    .navbar form.d-flex .btn-outline-light {
        width: 90%; /* Button takes 90% width */
    }
    /* Ensure the collapse is correctly managed for the hamburger menu */
    .navbar-collapse {
        flex-grow: 1; /* Allow it to take up space when expanded */
        padding-left: 1rem; /* Add padding to the collapsed menu content */
        padding-right: 1rem;
    }
}
/* New Styles for larger screens to align search and buttons */
@media (min-width: 992px) {
    /* The .navbar-collapse should handle the main distribution */
    .navbar-collapse {
        display: flex !important; /* Ensure it's flex on large screens */
        flex-grow: 1;
        justify-content: flex-end; /* Pushes content to the right */
        align-items: center;
        width: auto;
    }
    /* The me-auto and ms-auto classes in HTML now handle alignment, no custom margin here */
}

/* Responsive adjustment for footer */
@media (max-width: 576px) {
    .footer .row > div {
        margin-bottom: 1.5rem;
    }
}

.scroll-arrow {
  position: absolute;
  top: 45%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  padding: 0.6rem;
  transition: all 0.3s ease;
  color: white;
}

.scroll-arrow:hover {
  box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
}

.scroll-left { left: 10px; }
.scroll-right { right: 10px; }

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}