/* ========================================== */
/* Popup Styling                              */
/* ========================================== */
.leaflet-popup-pane { z-index: 1002 !important; } /* Ensure popups are above controls and sheets */
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); border: none; background-color: #fff; }
.leaflet-popup-content { margin: 20px 24px; font-size: 14px; line-height: 1.6; color: #4A5568; width: auto !important; min-width: 270px; font-family: 'Inter', system-ui, sans-serif; }

/* Styling for the "You are here" popup content */
.you-are-here-popup .leaflet-popup-content {
    text-align: center;
    font-weight: bold;
}

.popup-image-container { text-align: center; margin: -20px -24px 18px -24px; padding: 18px 0; border-bottom: 1px solid #E2E8F0; background-color: #F8FAFC; border-radius: 12px 12px 0 0; }
.popup-image { max-width: 110px; height: auto; border-radius: 8px; border: 1px solid #E2E8F0; display: inline-block; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; background-color: #fff; }
.popup-image:hover { transform: scale(1.04); box-shadow: 0 4px 10px rgba(0,0,0,0.12); }
.popup-details { margin-bottom: 20px; padding-top: 4px; }
.popup-details .product-name { font-size: 1.3em; font-weight: 600; color: #1A202C; margin-bottom: 6px; display: block; line-height: 1.35; word-break: break-word; }
.popup-details .price { font-size: 1.55em !important; font-weight: 900; color: #43619c !important; margin-top: 8px; margin-bottom: 18px; display: block; line-height: 1.4; padding-left: 0; }
.popup-details .price strong { font-weight: inherit; color: inherit; margin-right: 4px; }
.popup-details .detail-line { font-size: 1em; color: #374151; margin-bottom: 8px; display: block; line-height: 1.5; }
.popup-details .detail-line strong { display: inline-block; color: #6B7280; font-weight: 500; margin-right: 6px; font-size: 0.8em; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.06em; width: 75px; }
.popup-details .detail-line.detail-secondary { font-size: 0.85em; color: #6b7280; display: block; }
.popup-details .detail-line.quantity-info { font-size: 0.85em; color:rgb(197, 46, 46); margin-top: 4px; } /* Smaller font for quantity info */
.popup-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #E2E8F0; flex-wrap: wrap; }
.popup-actions .quantity-control { display: flex; align-items: center; gap: 6px; font-size: 0.9em; color: #4A5568; flex-basis: auto; margin-bottom: 0; flex-grow: 1; }
.popup-actions .button-group { display: flex; gap: 10px; flex-grow: 1; justify-content: flex-end; }
.add-to-cart-button, .directions-button { color: white; border: none; padding: 9px 18px; border-radius: 8px; cursor: pointer; font-size: 0.9em; font-weight: 600; transition: background-color 0.2s ease, transform 0.1s ease; text-align: center; }
.add-to-cart-button:active, .directions-button:active { transform: scale(0.98); }
.add-to-cart-button { background-color: #10B981; }
.add-to-cart-button:hover { background-color: #059669; }
.directions-button { background-color: #3B82F6; }
.directions-button:hover { background-color: #2563EB; }
.directions-button:disabled { background-color: #9CA3AF; cursor: not-allowed; }
.quantity-input { width: 60px; padding: 7px 8px; border: 1px solid #D1D5DB; border-radius: 8px; font-size: 0.95em; color: #1F2937; text-align: center; background-color: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
.quantity-input:focus { outline: none; border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }
/* ========================================== */
/* END: Popup Styling                         */

/* ========================================== */
/* START: Popup Accordion Styling             */
/* ========================================== */
.popup-accordion {
    margin-top: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden; /* Ensures rounded corners apply to content */
}

.accordion-item {
    border-bottom: 1px solid #e2e8f0;
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    background-color: #f9fafb; /* Light background */
    color: #374151; /* Darker text */
    cursor: pointer;
    padding: 10px 15px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1em;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    /* Added styles for rating display in header */
    gap: 10px; /* Space between title, rating, and icon */
}

.accordion-header:hover {
    background-color: #f3f4f6; /* Slightly darker on hover */
}

/* Style for the rating display within the header */
.accordion-header .popup-rating-display {
    display: flex;
    align-items: center;
    gap: 4px; /* Space between stars and count */
    font-size: 0.9em; /* Slightly smaller than header text */
    color: #6b7280; /* Match detail line color */
    flex-grow: 1; /* Allow rating to take up space */
    justify-content: flex-end; /* Push rating towards the right */
    margin-bottom: 0; /* Override the default margin */
}

.accordion-header .popup-rating-display .stars-display {
    font-size: 2.0em; /* Adjust size */
    color: #facc15; /* Yellow for stars */
    line-height: 1;
    letter-spacing: 1px; /* Space out stars */
}

.accordion-header .popup-rating-display .rating-count {
    font-size: 1.5em;
    color: #6b7280; /* gray-500 */
}


.accordion-icon {
    font-size: 0.8em;
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    background-color: #fff;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    max-height: 0; /* Hidden by default */
    padding: 0 15px; /* Horizontal padding */
}

.accordion-header[aria-expanded="true"] + .accordion-content {
    max-height: 1000px; /* Increased value for content */
    padding: 15px; /* Padding when expanded */
}

/* Specific styling for content within accordion panels */
.accordion-content .popup-rating-container {
    margin-top: 0; /* Remove top margin as padding is on content */
    margin-bottom: 0; /* Remove bottom margin */
    border-top: none; /* Remove border as it's on the accordion item */
    padding-top: 0; /* Remove padding as it's on the accordion content */
}

.accordion-content .popup-chart-container {
     margin-top: 0; /* Remove top margin */
     margin-bottom: 0; /* Remove bottom margin */
     padding: 0; /* Remove padding if any */
     border: none; /* Remove border */
}

.accordion-content .detail-line {
    margin-bottom: 8px; /* Keep spacing between detail lines */
}

.accordion-content .detail-line:last-child {
    margin-bottom: 0; /* No bottom margin on the last detail line */
}

#item-detail-secondary-details-content {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Space between items */
  padding: 8px 0; /* Some vertical padding */
}

/* ========================================== */
/* END: Popup Accordion Styling               */
/* ========================================== */

/* ========================================== */
/* START: Popup Rating System Styles          */
/* ========================================== */
.popup-rating-container {
    /* margin-top: 15px; */ /* Space above ratings */
    /* margin-bottom: 10px; */ /* Space below ratings */
    /* border-top: 1px solid #f3f4f6; */ /* Subtle separator */
    /* padding-top: 15px; */
}

.popup-rating-display {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px; /* Space between display and input */
    min-height: 24px; /* Ensure consistent height even if count is hidden */
}

.stars-display {
    font-size: 1.2em; /* Adjust size */
    color: #facc15; /* Yellow for stars */
    line-height: 1;
    letter-spacing: 2px; /* Space out stars */
}
/* Style for empty stars in display */
.stars-display .empty-star {
    color: #e5e7eb; /* Light gray */
}

.rating-count {
    font-size: 0.85em;
    color: #6b7280; /* gray-500 */
}

/* Container for user input stars */
.popup-rating-input {
    /* display: flex; */ /* Initially hidden by inline style, shown by JS */
    align-items: center;
    gap: 8px;
    padding: 8px;
    background-color: #f9fafb; /* Light bg for input area */
    border-radius: 6px;
    margin-top: 5px;
}

.popup-rating-input .input-label {
    font-size: 0.9em;
    color: #4b5563;
    font-weight: 500;
    margin-right: 4px;
}

.stars-input {
    line-height: 1;
    display: inline-block; /* Or flex */
}

/* Individual star buttons */
.star-button {
    background: none;
    border: none;
    padding: 1px 1px; /* Fine-tune spacing */
    margin: 0;
    font-size: 1.7em; /* Larger for easier clicking */
    color: #d1d5db; /* Default empty star color (gray-300) */
    cursor: pointer;
    transition: color 0.1s ease, transform 0.1s ease;
}

.star-button:hover {
    /* Color handled by JS hover effect for filling */
    transform: scale(1.15); /* Slightly larger hover effect */
}

/* Class added by JS for highlighting stars up to hovered/selected */
.star-button.highlighted {
    color: #facc15; /* Solid yellow for hover/selection */
}

/* Class added by JS to indicate the user's current saved rating */
.star-button.user-rated {
    color: #fbbf24; /* Slightly different yellow/amber for saved rating */
}

/* Status message area within the rating input */
.rating-input-status {
    font-size: 0.8em;
    margin-left: auto; /* Push status to the right */
    display: flex;
    align-items: center;
    min-height: 16px; /* Ensure space even when empty */
}
.rating-input-status .spinner.small { width: 14px; height: 14px; border-width: 2px; margin-right: 4px; }
.rating-input-status .success { color: #10b981; }
.rating-input-status .error { color: #ef4444; }

/* Hide rating input if user is not logged in (controlled by JS) */
.popup-rating-input.hidden {
    display: none;
}
/* ========================================== */
/* END: Popup Rating System Styles            */
/* ========================================== */

/* Style for the fix error button in the popup */
.fix-error-button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    transition: background-color 0.2s ease;
    background-color: #dc3545; /* Red color */
    color: white;
    margin-left: 0px; /* Space from other buttons */
    font-weight: 600;
}

.fix-error-button:hover {
    background-color: #c82333; /* Darker red on hover */
}

/* ========================================== */
/* START: Cluster Pin Styles (Green Map Pin)  */
/* ========================================== */
.cluster-pin-container {
    width: 16px; /* New width */
    height: 22px; /* New height (16 head + 6 stem) */
    position: relative;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5)); /* Adjusted drop shadow */
    cursor: pointer;
}

.cluster-pin-head {
    width: 16px; /* New width */
    height: 16px; /* New height */
    background-color: #28a745; /* Green color */
    border-radius: 50% 50% 50% 0; /* Teardrop top */
    transform: rotate(-45deg);
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #1c7430; /* Darker green border */
    box-sizing: border-box;
    /* No text inside anymore */
}

/* Optional: Add a subtle highlight */
.cluster-pin-head::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 5px;
    height: 5px;
    background-color: rgba(80, 200, 100, 0.7); /* Lighter green highlight */
    border-radius: 50%;
    transform: rotate(45deg); /* Counter-rotate */
}

.cluster-pin-stem {
    width: 3px; /* Slightly thinner stem */
    height: 8px; /* Adjusted stem height */
    background-color: #5a636b; /* Slightly lighter gray stem */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 1px 1px;
}

.cluster-pin-container:hover .cluster-pin-head {
    background-color: #218838; /* Darker green on hover */
}

/* Keep popup styles */
.cluster-popup h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.1em;
    color: #333;
}

.cluster-popup p {
    margin: 0;
    color: #555;
}
/* ========================================== */
/* END: Cluster Pin Styles                    */
/* ========================================== */