/* ========================================== */
/* 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: var(--color-bg-surface); }
.leaflet-popup-content { margin: 20px 24px; font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); width: auto !important; min-width: 270px; font-family: var(--font-primary); }

/* 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 var(--color-border); background-color: var(--color-bg-surface-alt); border-radius: 12px 12px 0 0; }
.popup-image { max-width: 110px; height: auto; border-radius: 8px; border: 1px solid var(--color-border); display: inline-block; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; background-color: var(--color-bg-surface); }
.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: var(--color-text-primary); 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: var(--color-primary) !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: var(--color-text-secondary); margin-bottom: 8px; display: block; line-height: 1.5; }
.popup-details .detail-line strong { display: inline-block; color: var(--color-text-muted); 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: var(--color-text-muted); 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 var(--color-border); flex-wrap: wrap; }
.popup-actions .quantity-control { display: flex; align-items: center; gap: 6px; font-size: 0.9em; color: var(--color-text-secondary); 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, .recipes-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; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.add-to-cart-button:active, .directions-button:active, .recipes-button:active { transform: scale(0.98); }
.add-to-cart-button { background-color: var(--color-success); }
.add-to-cart-button:hover { background-color: var(--color-success-dark); }
.directions-button { background-color: #3B82F6; }
.directions-button:hover { background-color: #2563EB; }
.directions-button:disabled { background-color: #9CA3AF; cursor: not-allowed; }
.recipes-button { background-color: #ff9800; }
.recipes-button:hover { background-color: #f57c00; }
.quantity-input { width: 60px; padding: 7px 8px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.95em; color: var(--color-text-primary); text-align: center; background-color: var(--color-bg-surface); box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
.quantity-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-focus-ring); }
/* ========================================== */
/* END: Popup Styling                         */

/* ========================================== */
/* START: Popup Accordion Styling             */
/* ========================================== */
.popup-accordion {
    margin-top: 0px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden; /* Ensures rounded corners apply to content */
}

.accordion-item {
    border-bottom: 1px solid var(--color-border);
}

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

.accordion-header {
    background-color: var(--color-bg-surface-alt); /* Light background */
    color: var(--color-text-secondary); /* 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: var(--color-bg-surface); /* 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: var(--color-text-muted); /* 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: var(--color-text-muted); /* 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: var(--color-bg-surface);
    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: var(--color-gray-200); /* Light gray */
}

.rating-count {
    font-size: 0.85em;
    color: var(--color-text-muted); /* 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: var(--color-bg-surface-alt); /* Light bg for input area */
    border-radius: 6px;
    margin-top: 5px;
}

.popup-rating-input .input-label {
    font-size: 0.9em;
    color: var(--color-text-secondary);
    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: var(--color-success); }
.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 */
}

/* ========================================== */
/* Enhanced Details Section Styling           */
/* ========================================== */
.item-detail-store-address-section {
    margin-bottom: 12px;
    padding-bottom: 8px;
}

.store-display-name {
    margin: 0 0 4px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-text-primary); /* Gray-900 */
}

.store-address-text {
    margin: 0;
    font-size: 0.9em;
    color: var(--color-text-muted); /* Gray-500 */
    line-height: 1.4;
}

.details-hr {
    border: 0;
    border-top: 1px solid var(--color-border); /* Gray-200 */
    margin: 8px 0 16px 0;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* Responsive columns */
    gap: 16px 20px; /* Row gap, Column gap */
    margin-bottom: 16px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-size: 0.75em;
    color: var(--color-text-muted); /* Gray-500 */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-value {
    font-size: 0.95em;
    color: var(--color-text-primary); /* Gray-900 */
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.quantity-info-text {
    margin-top: 12px;
    font-size: 0.85em;
    color: var(--color-text-muted);
    background-color: var(--color-bg-surface-alt);
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid var(--color-border);
    font-weight: 500;
}