/* /Styles/business-detail.css */

/* Optional: Import base variables */
@import url('/Styles/index.css'); 
:root { /* Define if not importing */
    --yelp-red: #d32323;
    --yelp-dark: #333;
    --yelp-light: #f5f5f5;
    --star-gold: #ffc107;
    --border-light: #eee;
    --border-medium: #ccc;
    --success-green: #2e7d32;
    --success-light: #e8f5e9;
    --error-red: #d32f2f;
    --error-light: #ffebee;
    --link-blue: #007bff;
}

/* --- Page Container --- */
.business-detail-container {
    max-width: 960px; /* Slightly narrower than listings */
    margin: 30px auto;
    padding: 0 15px;
}

/* --- Loading / Error States --- */
.loading-message, .error-message { /* General styles defined in index.css or here */
    text-align: center; padding: 40px 20px; color: #666; font-style: italic;
}
.error-message { color: var(--error-red); font-style: normal; font-weight: bold;}
.loading-spinner { /* Define if not in index.css */
    display: block; width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: var(--yelp-red); border-radius: 50%;
    animation: spin 1s linear infinite; margin: 0 auto 15px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Sections --- */
#business-detail-content section {
    background-color: #fff;
    padding: 25px 30px;
    margin-bottom: 25px;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.08);
    border: 1px solid var(--border-light);
}
#business-detail-content section h3 {
    font-size: 1.4rem;
    color: var(--yelp-dark);
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 8px;
}
#business-detail-content section h3 i {
    color: var(--yelp-red);
}

/* --- Header Section --- */
.business-header-section {
    text-align: center; /* Center align header content */
    border-bottom: none; /* Remove double border */
    padding-bottom: 20px;
}
#business-name-title {
    font-size: 2.2rem;
    color: var(--yelp-dark);
    margin-bottom: 10px;
}
.header-sub-info {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap; /* Allow wrapping */
}
.rating-display {
    color: var(--star-gold);
    font-size: 1.1rem;
}
.rating-display .review-count {
     margin-left: 5px;
     font-size: 0.9em;
     color: #777;
}
.category-display {
    background-color: var(--yelp-light);
    color: var(--yelp-dark);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.9rem;
    border: 1px solid var(--border-medium);
}
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.action-buttons .btn-small {
    /* Uses styles from index.css or define here */
    padding: 8px 15px;
    font-size: 0.9rem;
}
.action-buttons .btn-small i {
    margin-right: 5px;
}


/* --- Contact & Location --- */
.business-contact-location {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    gap: 20px;
}
.contact-info {
    flex: 1; /* Take available space */
    min-width: 280px; /* Minimum width */
}
.contact-info h3 { margin-bottom: 15px; font-size: 1.2rem;}
.contact-info p {
    margin-bottom: 10px;
    color: #333;
    line-height: 1.5;
}
.map-container {
    flex: 1;
    min-width: 280px;
    min-height: 250px; /* Ensure map has height */
    background-color: var(--yelp-light); /* Placeholder bg */
    border: 1px solid var(--border-medium);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}
/* Leaflet map style */
.leaflet-container { height: 100%; width: 100%; border-radius: 5px; }


/* --- Media Section --- */
.photo-display {
    text-align: center; /* Center single photo */
}
#business-main-photo {
    max-width: 100%;
    max-height: 400px; /* Limit height */
    border-radius: 5px;
    object-fit: cover;
    border: 1px solid var(--border-light);
}
/* Add styles for gallery later */


/* --- About Section --- */
#business-description-display {
    line-height: 1.7;
    color: #444;
    white-space: pre-wrap; /* Respect line breaks */
}


/* --- Reviews Section --- */
.business-reviews-section h3 {
     border-bottom: none; /* Remove double border */
}
#reviews-list {
    margin-top: 20px;
}
.review-item {
    border-bottom: 1px solid var(--border-light);
    padding: 15px 0;
    margin-bottom: 15px;
}
.review-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap; /* Wrap on small screens */
    gap: 10px;
}
.review-author {
    font-weight: bold;
    color: var(--yelp-dark);
}
/* Link author name later */
/* .review-author a { color: var(--link-blue); text-decoration: none; } */
/* .review-author a:hover { text-decoration: underline; } */
.review-date {
    font-size: 0.85rem;
    color: #777;
}
.review-rating {
    color: var(--star-gold);
    margin-bottom: 8px;
    font-size: 1rem;
}
.review-text {
    color: #333;
    line-height: 1.6;
    white-space: pre-wrap; /* Respect line breaks */
}
.loading-reviews {
     font-style: italic; color: #777; text-align: center; padding: 20px 0;
}


/* --- Add Review Section --- */
.add-review-section {
    background-color: var(--yelp-light);
    border-top: 2px solid var(--yelp-red);
}
.add-review-section h3 { border-bottom: none; margin-bottom: 15px;}

#review-login-prompt p {
    text-align: center;
    padding: 15px;
    background-color: #fff;
    border: 1px solid var(--border-medium);
    border-radius: 5px;
    color: #444;
}
.link-button {
    background: none; border: none; color: var(--yelp-red);
    text-decoration: underline; cursor: pointer; padding: 0;
    font-size: inherit; font-family: inherit;
}

#add-review-form .form-group { margin-bottom: 20px; } /* Increase spacing */
#add-review-form label { font-weight: bold; display: block; margin-bottom: 8px; }

/* --- Star Rating Input Styling (Main and Sub) --- */
.rating-group {
     display: flex;
     align-items: center;
     gap: 10px; /* Gap between label, stars, text */
     flex-wrap: wrap; /* Allow wrapping if needed */
}
.rating-group label {
     margin-bottom: 0; /* Remove bottom margin for inline alignment */
}

.star-rating-input {
    font-size: 1.8rem; /* Default star size */
    color: var(--border-medium); /* Default empty star color */
    cursor: pointer;
    white-space: nowrap; /* Prevent stars from wrapping */
}
.star-rating-input i {
    transition: color 0.1s ease-in-out; /* Smooth color transition */
    margin-right: 2px; /* Small space between stars */
}

/* Hover/Selected States - General (will be overridden by specific rating classes) */
.star-rating-input i:hover,
.star-rating-input i.hover, /* Class added by JS on hover */
.star-rating-input i.selected {
    color: var(--star-gold);
}

/* --- Yelp-Inspired Hover Colors & Text --- */
.rating-hover-text {
    font-weight: bold;
    font-size: 0.95rem;
    margin-left: 5px;
    min-width: 150px; /* Allocate space */
    text-align: left;
}

/* Define color classes for stars and text */
.star-rating-input.rating-1 i.hover, .star-rating-input.rating-1 i.selected { color: #FFAD6F; } /* Yelpy Orange-Yellow */
.rating-hover-text.rating-1 { color: #FFAD6F; }

.star-rating-input.rating-2 i.hover, .star-rating-input.rating-2 i.selected { color: #FF864A; } /* Yelpy Orange */
.rating-hover-text.rating-2 { color: #FF864A; }

.star-rating-input.rating-3 i.hover, .star-rating-input.rating-3 i.selected { color: #FF6C4F; } /* Yelpy Orange-Red */
.rating-hover-text.rating-3 { color: #FF6C4F; }

.star-rating-input.rating-4 i.hover, .star-rating-input.rating-4 i.selected { color: #F44E3B; } /* Yelpy Reddish */
.rating-hover-text.rating-4 { color: #F44E3B; }

.star-rating-input.rating-5 i.hover, .star-rating-input.rating-5 i.selected { color: #D32323; } /* Yelp Red */
.rating-hover-text.rating-5 { color: #D32323; }


/* Review Text Area */
#add-review-form textarea#review-text {
    min-height: 100px;
}

/* Photo Upload Styling */
.photo-upload-group label {
    margin-bottom: 10px;
}
#review-photo-upload {
    display: block;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #555;
}
/* Style the file input button itself if desired */
/* input[type="file"]::file-selector-button { ... } */

#review-photo-preview {
    display: none; /* Hidden initially */
    max-width: 150px;
    max-height: 150px;
    border: 1px solid var(--border-light);
    margin-top: 10px;
    object-fit: cover;
    border-radius: 4px;
}
.photo-upload-group small {
    display: block;
    margin-top: 5px;
    font-size: 0.85rem;
    color: #666;
}

/* Sub-Ratings Styling */
.sub-ratings-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}
.sub-ratings-section > label { /* Main label for the section */
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: var(--yelp-dark);
}
.sub-rating-group {
    margin-bottom: 10px; /* Space between sub-ratings */
    gap: 15px; /* More space for sub-ratings */
}
.sub-rating-label {
    min-width: 90px; /* Align labels */
    text-align: right;
    font-weight: normal !important; /* Override general label bold */
    color: #444;
}
.sub-rating-input {
    font-size: 1.4rem; /* Slightly smaller stars for sub-ratings */
}

/* Submit Button */
#add-review-form .btn { width: auto; padding: 10px 25px; }
#add-review-status, #add-review-error { margin-top: 15px; }

/* --- Responsive Adjustments for Review Form --- */
@media (max-width: 768px) {
     .main-rating-group {
         flex-direction: column; /* Stack main label and stars */
         align-items: flex-start;
         gap: 5px;
     }
     .rating-hover-text { margin-left: 0; margin-top: 5px; min-width: unset;}

     .sub-rating-group {
         gap: 10px;
     }
     .sub-rating-label {
         min-width: 80px; /* Adjust if needed */
         text-align: left;
     }
     .sub-rating-input { font-size: 1.3rem; }
}


/* --- Responsive --- */
@media (max-width: 768px) {
    .business-detail-container { margin: 15px auto; }
    #business-detail-content section { padding: 20px 15px; }
    #business-name-title { font-size: 1.8rem; }
    .header-sub-info { justify-content: center; }
    .action-buttons { justify-content: center; }

    .business-contact-location { flex-direction: column; } /* Stack contact & map */
    .map-container { min-height: 200px; }

    .review-header { flex-direction: column; align-items: flex-start; }
    .review-date { margin-top: 5px; }
}


/* /Styles/business-detail.css */

/* ... (Keep all existing styles) ... */

/* --- Styling for Photos within Reviews --- */
.review-photo {
    display: block; /* Or inline-block if preferred */
    max-width: 150px; /* Limit width on larger screens */
    max-height: 150px; /* Optional: Limit height */
    width: auto; /* Allow image to shrink */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Slightly rounded corners */
    margin-top: 10px; /* Space above the photo */
    border: 1px solid var(--border-light); /* Subtle border */
    object-fit: cover; /* Crop image nicely if max-height is set */
    cursor: pointer; /* Optional: indicate it might be clickable later for lightbox */
    transition: transform 0.2s ease; /* Optional: slight zoom on hover */
}
.review-photo:hover {
    /* transform: scale(1.03); */ /* Optional hover effect */
}

/* /Styles/business-detail.css */

/* ... (Keep other styles) ... */

/* Styling for sub-ratings within the review display (UPDATED) */
.review-sub-ratings {
    font-size: 0.9em; /* Overall size */
    color: #444; /* Label color */
    margin-top: 10px; /* Space above the sub-ratings block */
    padding-top: 10px; /* Space inside */
    border-top: 1px dashed var(--border-light); /* Optional separator */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 5px; /* Space between sub-rating items */
}

.sub-rating-item {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between label and stars */
}

.sub-rating-item-label {
    min-width: 80px; /* Align labels */
    font-weight: 500; /* Slightly bolder label */
}

.sub-rating-item .stars { /* Style the star container */
    color: var(--star-gold); /* Color for filled stars */
    font-size: 1em; /* Adjust star size relative to text */
    white-space: nowrap;
}
.sub-rating-item .stars span { /* Individual star characters */
     /* Potential for more specific styling if needed */
}

/* ... (Keep other styles including responsive) ... */


/* Responsive adjustments for review photo */
@media (max-width: 480px) {
    .review-photo {
        max-width: 100px; /* Make slightly smaller on very small screens */
        max-height: 100px;
    }
}

/* ... (Keep existing responsive rules) ... */

/* Add to your existing CSS */
.rating-display .stars {
    color: var(--star-gold);
    font-size: 1.2rem;
    margin-right: 5px;
}
.rating-display .average-rating {
    font-weight: bold;
    color: var(--yelp-dark);
    margin-right: 5px;
}
.rating-display .review-count {
    font-size: 0.9em;
    color: #777;
}

/* --- Review Author Styling --- */
.reviewer-avatar {
    width: 32px;          /* Reduced from 40px */
    height: 32px;         /* Reduced from 40px */
    border-radius: 50%;    /* Makes it perfectly round */
    object-fit: cover;     /* Ensures image fills circle without distortion */
    margin-right: 8px;     /* Reduced from 10px for tighter spacing */
    border: 1px solid var(--border-light); /* Thinner border */
}

/* For mobile view */
@media (max-width: 480px) {
    .reviewer-avatar {
        width: 28px;      /* Slightly smaller on mobile */
        height: 28px;
        margin-right: 6px;
    }
}

.reviewer-info {
    display: flex;
    align-items: center;
}

.reviewer-profile-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.reviewer-profile-link:hover {
    color: var(--yelp); }

/* Review Actions Styling */
.review-actions {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

.like-btn, .dislike-btn, .reply-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-size: 0.9rem;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.2s;
}

.like-btn:hover, .dislike-btn:hover {
    background: #f5f5f5;
}

.like-btn.active {
    color: var(--yelp-red);
}

.dislike-btn.active {
    color: #666;
}

.reply-btn {
    background-color: var(--yelp-red);
    color: white;
    margin-left: auto;
}

.reply-btn:hover {
    background-color: #c11f1f;
}

/* Reply Form Styling */
.reply-form {
    margin-top: 15px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 5px;
}

.reply-form textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    resize: vertical;
}

.submit-reply {
    background-color: var(--yelp-red);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
}

.submit-reply:hover {
    background-color: #c11f1f;
}

/* Business Replies Styling */
.replies-container {
    margin-top: 15px;
}

.business-reply {
    background: #f9f9f9;
    padding: 12px;
    border-radius: 5px;
    margin-top: 10px;
    border-left: 3px solid var(--yelp-red);
}

.reply-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.business-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.business-name {
    font-weight: bold;
    color: var(--yelp-red);
}

.reply-text {
    margin: 0;
    color: #333;
    line-height: 1.5;
}    

/* /Styles/business-detail.css */

/* ... (All previous styles up to .user-reply-form-actions .submit-user-reply-btn:hover) ... */


/* --- Existing Owner Reply Form Styles (Ensure they exist or add) --- */
.reply-form { /* Owner's reply form */
     margin-top: 10px;
     padding-left: 55px; /* Indent like replies */
     padding-bottom: 10px;
     /* border-top: 1px dashed #ddd; Optional separator */
 }
.reply-form textarea.reply-text-input { /* Style owner's textarea */
     width: 100%;
     padding: 8px 10px;
     border: 1px solid var(--border-medium);
     border-radius: 4px;
     font-family: inherit;
     font-size: 0.9rem;
     box-sizing: border-box;
     min-height: 60px;
     resize: vertical;
     margin-bottom: 8px;
 }
 .reply-form textarea.reply-text-input:focus {
     outline: none;
     border-color: var(--yelp-red); /* Red focus for owner */
     box-shadow: 0 0 0 2px rgba(211, 35, 35, 0.15);
 }

.reply-form-actions { /* Owner's reply form actions */
    display: flex;
    justify-content: flex-end; /* Align buttons right */
    align-items: center;
    gap: 8px;
}

.reply-form-actions .reply-status { /* Owner's reply status message */
    font-size: 0.8rem;
    color: var(--yelp-red);
    flex-grow: 1;
    text-align: left;
}
.reply-form-actions .submit-reply-btn { /* Owner's submit button */
    background-color: var(--yelp-red); /* Red for owner submit */
    color: white;
     padding: 6px 12px;
     font-size: 0.8rem;
}
.reply-form-actions .submit-reply-btn:hover {
    background-color: #b71c1c;
}

/* --- Responsive adjustments for replies/forms if needed --- */
@media (max-width: 600px) {
    .replies-container,
    .reply-form,
    .user-reply-form {
        padding-left: 15px; /* Reduce indent on small screens */
    }
    .reply-header {
        flex-wrap: wrap; /* Allow wrapping header items */
    }
    .reply-date {
        margin-left: 0; /* Reset margin */
        width: 100%;    /* Take full width */
        text-align: right; /* Align right */
        font-size: 0.75rem;
        margin-top: -5px; /* Pull up slightly */
        padding-bottom: 5px; /* Add space below */
    }
}

/* /Styles/business-detail.css */

/* ... (Existing styles) ... */

/* --- Styles for Review Replies --- */

/* ... (Existing .replies-container, .business-reply, .user-reply styles) ... */

.reply-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* Reviewer Avatar (Original Size) */
.reviewer-avatar {
    width: 40px;  /* Example size */
    height: 40px; /* Example size */
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-light);
    flex-shrink: 0; /* Prevent shrinking */
}


/* *** MODIFIED/ADDED: Make Reply Avatars Smaller *** */
.business-avatar,
.user-avatar {
    width: 30px;  /* Smaller size for replies */
    height: 30px; /* Smaller size for replies */
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-light);
    flex-shrink: 0;
}

/* ... (Rest of .reply-header styles: .business-name, .reply-author-name, .reply-date) ... */
.reply-author-name,
.business-name {
    font-weight: bold;
    color: var(--yelp-dark, #333);
    font-size: 0.9rem;
}
.business-name { color: var(--yelp-red); }
.reply-date { font-size: 0.8rem; color: #777; margin-left: auto; }


.reply-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #444;
    margin: 0;
    word-break: break-word;
    padding-left: 38px; /* Indent reply text relative to smaller avatar (30px + 8px gap) */
}

/* ... (Rest of existing CSS) ... */

/* /Styles/business-detail.css */

/* ... (Keep all existing styles) ... */


/* --- Star Rating Input Styles --- */
.star-rating-input {
    display: inline-flex;
    font-size: 1.8rem; /* Adjust size as needed */
    color: var(--border-medium); /* Default color for empty stars */
    cursor: pointer;
}
.star-rating-input i.fa-star { /* Target FontAwesome stars specifically */
    transition: color 0.1s ease-in-out;
    padding: 0 2px; /* Add some spacing between stars */
}

/* Default hover effect (optional, will be overridden by specific rating hover) */
/* .star-rating-input i.fa-star:hover {
    color: var(--star-gold);
} */


/* *** ADD THESE RULES FOR COLOR CHANGE ON HOVER/SELECT *** */

/* Make ALL stars up to the hovered/selected one GOLD by default */
.star-rating-input i.fas {
    color: var(--star-gold); /* Default filled color */
}

/* Override star color based on the highest hovered/selected rating */
/* Rating 1: Orange-Yellow */
.star-rating-input.rating-1 i.fas { color: #FFAD6F; }
.rating-hover-text.rating-1 { color: #FFAD6F; }

/* Rating 2: Orange */
.star-rating-input.rating-2 i.fas { color: #FF864A; }
.rating-hover-text.rating-2 { color: #FF864A; }

/* Rating 3: Orange-Red */
.star-rating-input.rating-3 i.fas { color: #FF6C4F; }
.rating-hover-text.rating-3 { color: #FF6C4F; }

/* Rating 4: Reddish */
.star-rating-input.rating-4 i.fas { color: #F44E3B; }
.rating-hover-text.rating-4 { color: #F44E3B; }

/* Rating 5: Yelp Red */
.star-rating-input.rating-5 i.fas { color: var(--yelp-red, #D32323); }
.rating-hover-text.rating-5 { color: var(--yelp-red, #D32323); }

/* Style for the text label displayed on hover/select */
.rating-hover-text {
    font-size: 0.9rem;
    color: var(--admin-text-light); /* Default color when no rating */
    min-width: 120px;
    text-align: left;
    margin-left: 10px; /* Space after stars */
    font-weight: 500;
    transition: color 0.1s ease-in-out;
}


/* Sub-rating stars might be smaller */
.sub-rating-input { font-size: 1.3rem; }
.sub-rating-group { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;}
.sub-rating-label { font-weight: 500; color: #444; min-width: 90px; font-size: 0.9rem; }

/* ... (Rest of your CSS) ... */

#auth-container {
    /* background-color: #D32323; */
    color: #0d0c0c;
    position: static;
    transform: none;
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 10px;
    order: 2; /* Auth below logo */
    flex-wrap: wrap;
    gap: 10px;   
}

/* /Styles/business-detail.css */

/* ... (other styles) ... */

.status-message { /* Base styles for status/error */
    padding: 8px 12px;
    margin-top: 15px;
    border-radius: 4px;
    font-size: 0.9rem;
    display: none; /* Hidden by default */
    border: 1px solid transparent;
}

/* Style for the submitting state */
.status-message.submitting {
    color: #444; /* Neutral color */
    background-color: #f0f0f0; /* Light grey background */
    border-color: #ccc;
    font-style: italic;
}

/* Style for the success state */
.status-message.success {
    color: var(--success-green, #2e7d32);
    background-color: var(--success-light, #e8f5e9);
    border-color: var(--success-green, #2e7d32);
    font-style: normal;
}

/* Keep existing error message styles (or create if needed) */
.error-message {
    color: var(--error-red, #d32f2f);
    background-color: var(--error-light, #ffebee);
    border: 1px solid var(--error-red, #d32f2f);
    padding: 8px 12px;
    margin-top: 15px;
    border-radius: 4px;
    font-size: 0.9rem;
    display: none; /* Hidden by default */
}

/* ... (rest of your CSS) ... */

/* /Styles/business-detail.css */

/* ... (all your existing styles) ... */

/* --- "Show More Reviews" Button --- */
.btn-show-more-reviews {
    /* display: block; /* Already set inline, but can be here */
    /* margin: 20px auto; /* Already set inline, but can be here */
    padding: 10px 20px;
    font-size: 0.95rem;
    /* Add any other specific styles you want for this button */
    /* e.g., to match your theme's secondary button */
    /* background-color: #6c757d; */ /* Example secondary color */
    /* border-color: #6c757d; */
    /* color: #fff; */
}

.btn-show-more-reviews:hover {
    /* background-color: #5a6268; */ /* Darker shade for hover */
    /* border-color: #545b62; */
}


/* Add these new styles to the end of business-detail.css */

.streak-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.streak-popup-content {
    position: relative;
    text-align: center;
    color: white;
    padding: 40px 20px;
    animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.close-streak-popup {
    position: absolute;
    top: -10px;
    right: -10px;
    background: white;
    color: black;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 30px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.streak-flame {
    font-size: 100px; /* Big flame emoji */
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.streak-number-container {
    margin-top: -35px; /* Pull the number up into the flame */
    margin-bottom: 20px;
}

#streak-popup-number {
    font-size: 5rem;
    font-weight: 900;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

#streak-popup-message {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 300px;
}

.streak-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 250px;
    margin: 0 auto;
}

.streak-popup-actions .btn {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border-radius: 25px; /* Rounded buttons */
}

/* Specific button styles */
.streak-popup-actions .btn-secondary {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
}
.streak-popup-actions .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.streak-popup-actions .btn-primary {
    background-color: #FE2C55; /* TikTok red */
    border: none;
    color: white;
}
.streak-popup-actions .btn-primary:hover {
    background-color: #d41f45;
}

/* Add these styles to business-detail.css */

.leaderboard-sneak-peek-section {
    background-color: #fff8e1; /* A light, warm, inviting color */
    border: 1px solid #ffecb3;
    border-left: 5px solid var(--star-gold); /* Gold accent */
}

.leaderboard-sneak-peek-section h3 {
    text-align: center;
    border-bottom: 1px solid #ffe082;
}

.leaderboard-sneak-peek-section h3 .fa-trophy {
    color: var(--star-gold);
}

.leaderboard-peek-list {
    margin-bottom: 25px;
}

/* We can reuse the .leaderboard-item styles from leaderboard.css, 
   but let's define them here for completeness in case it's not imported. */
.leaderboard-peek-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #fff3e0;
}
.leaderboard-peek-item:last-child {
    border-bottom: none;
}

.leaderboard-peek-rank {
    font-size: 1.1rem;
    font-weight: bold;
    color: #888;
    width: 35px;
    flex-shrink: 0;
}

.leaderboard-peek-item.rank-1 .leaderboard-peek-rank { color: #ffd700; }
.leaderboard-peek-item.rank-2 .leaderboard-peek-rank { color: #c0c0c0; }
.leaderboard-peek-item.rank-3 .leaderboard-peek-rank { color: #cd7f32; }

.leaderboard-peek-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
}

.leaderboard-peek-user-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.leaderboard-peek-user-name {
    font-weight: 500;
}

.leaderboard-peek-streak {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #f57c00;
}

/* Action buttons at the bottom */
.leaderboard-peek-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #ffe082;
    flex-wrap: wrap;
}

/* --- Styling for Business Owner Replies --- */
/* (This can be copied directly to business-detail.css) */

/* The button for the owner to click to open the reply form */
.reply-btn {
    background-color: var(--yelp-red);
    color: white;
    margin-left: auto; /* Pushes the button to the far right */
}

.reply-btn:hover {
    background-color: #c11f1f;
}

/* The form that appears for the owner to type their reply */
.reply-form {
    margin-top: 15px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 5px;
    border-left: 3px solid var(--yelp-red); /* Accent border */
}

.reply-form textarea.reply-text-input {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    resize: vertical;
    box-sizing: border-box; /* Important */
}

.reply-form-actions {
    display: flex;
    justify-content: flex-end; /* Puts buttons on the right */
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.reply-status { /* For "Submitting..." or error messages */
    font-size: 0.85rem;
    color: #666;
    flex-grow: 1; /* Takes up remaining space */
}

/* The "Submit Reply" button inside the owner's form */
.submit-reply-btn {
    /* Uses general .btn styles, you can add specifics if needed */
    padding: 8px 15px;
}


/* In /Styles/business-detail.css */

/* ============================================= */
/* ===== CORRECTED: Review Thread Avatar Styles ====== */
/* ============================================= */

/* Styles for the MAIN reviewer's avatar in the header of a review */
.reviewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-light);
    flex-shrink: 0; /* Prevents it from shrinking if username is long */
}

/* Styles for the SMALLER avatar of the BUSINESS OWNER in a reply */
.business-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Styles for the SMALLER avatar of ANOTHER USER in a reply */
.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-light);
    flex-shrink: 0;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
    .reviewer-avatar {
        width: 32px;
        height: 32px;
    }

    .business-avatar,
    .user-avatar {
        width: 28px;
        height: 28px;
    }
}

/* In Styles/business-detail.css, add these styles */

.social-links-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px; /* Add some space below the main action buttons */
    width: 100%; /* Ensure it takes full width within the centered header */
}

.social-link {
    display: inline-block;
    font-size: 1.8rem; /* Make the icons a good, clickable size */
    color: var(--yelp-grey);
    transition: color 0.2s ease, transform 0.2s ease;
}

.social-link:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}

/* Specific hover colors for each brand */
.social-link.instagram:hover { color: #E1306C; }
.social-link.facebook:hover { color: #1877F2; }
.social-link.tiktok:hover { color: #000000; }

/* In Styles/business-detail.css */

.like-follow-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
    width: 100%;
}

.btn-interaction {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 1rem;
    font-weight: 600;
    background-color: var(--yelp-light);
    color: var(--yelp-dark);
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-interaction:hover {
    background-color: #e0e0e0;
}

/* --- Active State Styles --- */

/* For the LIKE button when active */
#like-button.active {
    background-color: var(--link-blue); /* A nice blue for active state */
    color: white;
    border-color: var(--link-blue);
}
#like-button.active .fa-thumbs-up {
    font-weight: 900; /* Changes from 'far' (regular) to 'fas' (solid) */
}

/* For the FOLLOW button when active */
#follow-button.active {
    background-color: #f0f0f0;
    color: var(--yelp-dark);
}
#follow-button.active .fa-plus {
    display: none; /* Hide the plus icon */
}
#follow-button.active .fa-check {
    display: inline-block; /* Show the check icon */
}
#follow-button.active:hover {
    background-color: #ffebee; /* On hover, show red to indicate "unfollow" */
    color: var(--error-red);
    border-color: #ffcdd2;
}

/* The check icon that appears when following */
.fa-check {
    display: none; /* Hidden by default */
}

/* Stats text (e.g., "52 likes • 120 followers") */
.interaction-stats {
    font-size: 0.9rem;
    color: var(--yelp-grey);
    margin-left: 10px;
}

/* In Styles/business-detail.css, add these styles at the end */

/* ============================================= */
/* ===== NEW: Loyalty Sneak Peek Styles ====== */
/* ============================================= */

.loyalty-sneak-peek-section {
    background-color: #e7f3ff; /* A light, friendly blue */
    border: 1px solid #b3d7ff;
    border-left: 5px solid var(--link-blue); /* Blue accent to match the icon */
    text-align: center; /* Center all content within the banner */
}

.loyalty-sneak-peek-section h3 {
    text-align: center;
    border-bottom-color: #b3d7ff;
}

.loyalty-sneak-peek-section h3 .fa-stamp {
    color: var(--link-blue); /* Use the blue theme color */
}

.stamp-peek-grid {
    display: flex; /* Use flex for a simple row of stamps */
    justify-content: center;
    gap: 8px;
    margin: 15px 0;
}

.stamp-peek {
    font-size: 2rem; /* The size of the stamp icon */
    color: var(--border-medium); /* Default color for an empty stamp */
}

.stamp-peek.filled {
    color: var(--link-blue); /* Blue color for a filled stamp */
    transform: scale(1.1); /* Make filled stamps slightly larger */
    animation: stamp-pop 0.3s ease-out; /* Reuse animation from user profile */
}

.loyalty-peek-message {
    font-size: 1rem;
    color: var(--yelp-dark);
    margin: 15px 0;
    font-weight: 500;
}

.loyalty-peek-message strong {
    color: var(--success-green);
}

.loyalty-peek-actions {
    margin-top: 10px;
}

#loyalty-peek-join-btn {
    /* Uses .btn and .btn-primary from index.css */
    background-color: var(--link-blue); /* Match the blue theme */
    border-color: var(--link-blue);
}

#loyalty-peek-join-btn:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}

/* In Styles/business-detail.css, add this */

/* Style for the stamp icon in the new loyalty leaderboard peek */
.leaderboard-peek-streak .fa-stamp {
    color: var(--link-blue); /* Use the same blue as the loyalty banner theme */
}