/* --- Global Styles (Adapted for Django context) --- */
:root {
    --primary-color: #1e1e2f;
    --secondary-color: #6c757d;
    --background-color: #f9f9f9;
    --card-background: #ffffff;
    --text-color: #333;
    --light-text-color: #777;
    --border-color: #eee;
    --accent-color: #0d6efd; /* Example accent */
    --success-color: #2ecc71; /* Green for quote/success */
    --danger-color: #e74c3c;
    --discount-color: #ff6b6b;
    --badge-bg-color: #eef2f9;
    --badge-text-color: #5a78a0;
    --wishlist-color: #e74c3c; /* Red for wishlist */
}

/* Apply only within the mobile product detail container */
.mobile-product-detail-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.6;
    font-size: 14px;
    /* Removed body-level overscroll-behavior */
    position: relative; /* Added for positioning context if needed */
    padding-top: 56px; /* Account for sticky header */
    padding-bottom: 70px; /* Account for sticky footer */
}

/* Common UI Elements */
.mobile-product-detail-wrapper .price {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}
.mobile-product-detail-wrapper .original-price {
    font-size: 14px;
    text-decoration: line-through;
    color: var(--light-text-color);
    margin-left: 8px;
}
.mobile-product-detail-wrapper .discount-badge {
    background-color: var(--discount-color);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}
.mobile-product-detail-wrapper .stock-status {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}
.mobile-product-detail-wrapper .stock-status.in-stock { background-color: #e3f4e4; color: var(--success-color); }
.mobile-product-detail-wrapper .stock-status.out-of-stock { background-color: #fde8e8; color: var(--danger-color); }

.mobile-product-detail-wrapper .btn {
    display: block;
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease;
    text-decoration: none;
}
.mobile-product-detail-wrapper .btn-primary { background-color: var(--primary-color); color: white; }
.mobile-product-detail-wrapper .btn-primary:active { background-color: #333; }
.mobile-product-detail-wrapper .btn-secondary { background-color: var(--border-color); color: var(--primary-color); }
.mobile-product-detail-wrapper .btn-secondary:active { background-color: #ddd; }
.mobile-product-detail-wrapper .btn-quote { background-color: var(--primary-color); color: white; } /* Changed background to primary color */
.mobile-product-detail-wrapper .btn-quote:active { background-color: #333; } /* Adjusted active state to match btn-primary */

/* --- Combined Design Styles --- */
.mobile-product-detail-wrapper .product-detail-scrollable {
    /* Removed flex-grow, overflow-y: auto; handled by parent */
    padding-bottom: 75px; /* Space for sticky footer */
    height: 100vh;
}

/* Sticky Header */
.mobile-product-detail-wrapper .sticky-header {
    position: fixed; /* Use fixed positioning relative to viewport */
    top: 0; /* Adjust if there's a global header above */
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1035; /* Ensure it's above content, below modals */
    height: 55px;
}
.mobile-product-detail-wrapper .sticky-header .back-btn { background: none; border: none; font-size: 18px; color: var(--primary-color); margin-right: 10px; padding: 5px; cursor: pointer; }
.mobile-product-detail-wrapper .sticky-header .title { font-weight: 600; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.mobile-product-detail-wrapper .sticky-header .actions { display: flex; gap: 15px; }
.mobile-product-detail-wrapper .sticky-header .action-btn { background: none; border: none; font-size: 18px; color: var(--primary-color); padding: 5px; cursor: pointer; position: relative; /* Needed for badge positioning */ text-decoration: none; /* Ensure links look like buttons */ }

/* Cart Button Specific Styles (if needed, otherwise action-btn is fine) */
.mobile-product-detail-wrapper .sticky-header .cart-action-btn {
    /* Add specific styles if different from other action buttons */
}

/* Mobile Cart Badge in Header */
.mobile-product-detail-wrapper .sticky-header .mobile-cart-badge {
    position: absolute;
    top: -2px;    /* Adjust position */
    right: -5px;  /* Adjust position */
    background-color: var(--danger-color); /* Or your preferred badge color */
    color: white;
    border-radius: 50%;
    width: 16px;  /* Adjust size */
    height: 16px; /* Adjust size */
    font-size: 10px; /* Adjust font size */
    font-weight: bold;
    display: flex; /* Use flex to center content */
    align-items: center;
    justify-content: center;
    line-height: 1; /* Ensure text is centered vertically */
    pointer-events: none; /* Prevent badge from interfering with clicks */
}

/* Image Swiper */
.mobile-product-detail-wrapper .image-swiper {
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    background-color: #eeebeb82;
    padding-bottom: 25px;
    position: relative;
    padding-top: 48px;
}
.mobile-product-detail-wrapper .image-swiper::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.mobile-product-detail-wrapper .image-slide {
    display: inline-block;
    width: 100%;
    height: 300px; /* Adjust height */
    scroll-snap-align: start;
}
.mobile-product-detail-wrapper .image-slide img { width: 100%; height: 100%; object-fit: contain; }
/* Updated Swiper Dots Positioning & Colors */
.mobile-product-detail-wrapper .swiper-dots {
    position: absolute;
    top: 356px; /* As requested */
    left: 48%;     /* As requested */
    transform: translateX(-54%); /* As requested */
    display: flex;
    gap: 6px;
    z-index: 5; /* Ensure dots are above image */
}
.mobile-product-detail-wrapper .dot { /* Renamed from .swiper-dots .dot for consistency */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #cccccc; /* Light gray for inactive */
    transition: background-color 0.3s ease;
}
.mobile-product-detail-wrapper .dot.active {
    background-color: #000000; /* Black for active */
}
.mobile-product-detail-wrapper .swiper-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #000; /* Semi-transparent white */
  transition: background-color 0.3s ease;
}
.mobile-product-detail-wrapper .swiper-dots .dot.active {
  background-color: #ffffff; /* Solid white for active dot */
}

/* Content Area */
.mobile-product-detail-wrapper .content-area { padding: 15px; background-color: var(--background-color); }
.mobile-product-detail-wrapper .brand { font-size: 13px; color: var(--light-text-color); margin-bottom: 5px; }
.mobile-product-detail-wrapper .brand a { color: inherit; text-decoration: none; }
.mobile-product-detail-wrapper .brand a:hover { color: var(--primary-color); }
.mobile-product-detail-wrapper .product-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; line-height: 1.3; }
.mobile-product-detail-wrapper .price-stock-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 5px; }

/* Highlight Badges */
.mobile-product-detail-wrapper .highlight-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding-top: 5px;
}
.mobile-product-detail-wrapper .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: var(--badge-bg-color);
    color: var(--badge-text-color);
    padding: 5px 10px;
    border-radius: 15px; /* Pill shape */
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border-color);
}
.mobile-product-detail-wrapper .badge i { font-size: 13px; }
/* Example badge specific colors (optional - can be added via model/template) */
.mobile-product-detail-wrapper .badge.warranty { background-color: #e3f4e4; color: var(--success-color); border-color: #c1e6c2; }
.mobile-product-detail-wrapper .badge.installation { background-color: #d1ecf1; color: #0c5460; border-color: #bee5eb; }

/* Collapsible Details */
.mobile-product-detail-wrapper .details-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-top: 1px solid var(--border-color);
    cursor: pointer;
    background-color: transparent;
}
.mobile-product-detail-wrapper .details-toggle:last-of-type {
     border-bottom: 1px solid var(--border-color);
}
.mobile-product-detail-wrapper .details-toggle span { font-weight: 600; font-size: 15px; color: var(--primary-color); }
.mobile-product-detail-wrapper .details-toggle i { transition: transform 0.3s ease-out; color: var(--secondary-color); }
.mobile-product-detail-wrapper .details-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0;
    background-color: transparent;
}
.mobile-product-detail-wrapper .details-content.open {
    max-height: 1000px; /* Large enough */
    padding: 10px 0 15px; /* Padding when open */
}
.mobile-product-detail-wrapper .details-content p,
.mobile-product-detail-wrapper .details-content ul,
.mobile-product-detail-wrapper .details-content table {
     font-size: 14px; color: var(--secondary-color); margin-bottom: 10px;
}
.mobile-product-detail-wrapper .details-content ul { padding-left: 20px; }
.mobile-product-detail-wrapper .details-content table { width: 100%; border-collapse: collapse; }
.mobile-product-detail-wrapper .details-content th,
.mobile-product-detail-wrapper .details-content td {
    padding: 8px 5px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
.mobile-product-detail-wrapper .details-content th { font-weight: 600; color: var(--text-color); width: 40%; }
.mobile-product-detail-wrapper .details-toggle i.fa-chevron-up { transform: rotate(180deg); }

/* Key Features List */
.mobile-product-detail-wrapper .key-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mobile-product-detail-wrapper .key-features-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--secondary-color);
}
.mobile-product-detail-wrapper .key-features-list li i {
    color: var(--primary-color);
    font-size: 16px;
    width: 20px; /* Ensure alignment */
    text-align: center;
}

/* Related Products (Simple List for now) */
.mobile-product-detail-wrapper .related-product-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
}
.mobile-product-detail-wrapper .related-product-item:last-child {
    border-bottom: none;
}
.mobile-product-detail-wrapper .related-product-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 4px;
    background-color: white;
}
.mobile-product-detail-wrapper .related-product-item__info {
    flex-grow: 1;
}
.mobile-product-detail-wrapper .related-product-item__name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 2px;
}
.mobile-product-detail-wrapper .related-product-item__price {
    font-size: 13px;
    color: var(--primary-color);
    font-weight: 500;
}

/* Sticky Footer */
.mobile-product-detail-wrapper .sticky-footer {
    position: fixed; /* Use fixed positioning relative to viewport */
    bottom: 0; /* Adjust if there's a global mobile nav below */
    left: 0;
    right: 0;
    padding: 10px 15px;
    background-color: white;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    z-index: 1035; /* Ensure it's above content, below modals */
    height: 75px;
    align-items: center;
    display: flex;
    align-items: stretch; /* Make buttons fill height */
    padding: 8px;
    gap: 8px;
    background-color: #fff;
    border-top: 1px solid #eee;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}
.mobile-product-detail-wrapper .sticky-footer .footer-btn { flex: 1; }
.mobile-product-detail-wrapper .sticky-footer .wishlist-btn {
    flex: 0 0 auto; /* Don't grow */
    width: 50px; /* Fixed width */
    height: 50px;
    padding: 0;
    font-size: 20px;
    border-radius: 8px;
    background-color: var(--border-color);
    color: var(--wishlist-color); /* Default red */
    border: none;
    cursor: pointer;
}
.mobile-product-detail-wrapper .sticky-footer .wishlist-btn.active {
    background-color: #fde8e8; /* Light red background when active */
}
.mobile-product-detail-wrapper .sticky-footer .wishlist-btn i.fas { /* Style for filled heart */
    font-weight: 900;
}
.sticky-footer .whatsapp-inquiry-btn {
  flex: 0 0 50px; /* Fixed width for the icon button */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.4rem; /* Adjust icon size */
  background-color: #f0f0f0; /* Neutral background */
  color: #25D366; /* WhatsApp green */
  border: none;
  border-radius: 8px;
}
.sticky-footer .whatsapp-inquiry-btn:hover {
    background-color: #e9e9e9;
}
.sticky-footer .footer-btn {
  flex: 1; /* Allow main action button to take remaining space */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 8px;
}
.sticky-footer .footer-btn i {
    margin-right: 8px; /* Space between icon and text */
}
.sticky-footer form {
    display: flex; /* Ensure form takes up space */
}
/* Ensure quote button styling is consistent */
.btn-quote {
    background-color: var(--primary-color); /* Changed background to primary color */
    color: white;
}
.btn-quote:hover {
    background-color: #333; /* Adjusted hover state to match btn-primary */
    color: white;
}

/* Adjustments for when global mobile nav exists */
/* Assuming global nav has class .mobile-nav and height 60px */
body:has(.mobile-nav) .mobile-product-detail-wrapper .sticky-footer {
    bottom: 60px; /* Adjust based on actual mobile nav height */
}

/* Hide elements from base template using the body class */
/* Use more specific selectors if needed, e.g., #main-navbar, #main-footer */
/* The body class 'mobile-detail-active' is added via JS in product_detail.html */
body.mobile-detail-active .navbar, /* Try hiding the generic navbar class first */
body.mobile-detail-active header, /* Hide header tag if navbar is inside it */
body.mobile-detail-active #main-navbar, /* Add if your navbar has this ID */
body.mobile-detail-active footer, /* Hide the footer tag */
body.mobile-detail-active #main-footer /* Add if your footer has this ID */
{
  display: none !important; /* Use !important to override base styles */
}

/* RESTORE these rules to hide base elements on mobile */
body.mobile-detail-active .navbar.navbar-main, /* Target the main navbar */
body.mobile-detail-active footer.footer, /* Target the main footer */
body.mobile-detail-active header:not(.mobile-product-detail-wrapper .sticky-header) /* Hide base header, but not mobile sticky header */
{
  display: none !important; /* Use important to override base styles */
}

/* Styles for elements WITHIN .mobile-product-detail-wrapper */
/* ... existing mobile styles ... */