html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.average-rating-title {
    font-size: 1.1rem;
    color: #6c757d;
    font-weight: normal;
}

.dropdown-menu-end {
    right: 0;
    left: auto;
}

.sticky-top {
    z-index: 1020;
}

.dropdown-menu {
    z-index: 1030 !important;
}

/* Optional: Add this if you want to ensure the dropdown toggle button also stays above */
.dropdown-toggle {
    z-index: 1030;
    position: relative;
}

/* Enhanced dropdown menu styling with brand colors */
.dropdown-menu .dropdown-item {
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.dropdown-menu .dropdown-item.active {
    background-color: #FB4264 !important;
    color: white !important;
}

.dropdown-menu .dropdown-item:hover {
    background-color: rgba(251, 66, 100, 0.1) !important;
    color: #FB4264 !important;
}

/* Style for "All Regions/Cities" and similar clear filter options */
.dropdown-menu .dropdown-item.clear-filter {
    font-weight: 500;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.dropdown-menu .dropdown-item.clear-filter:hover {
    background-color: rgba(251, 66, 100, 0.05) !important;
}

@media (max-width: 768px) {
    .my-cafes-table {
        /* Enable horizontal scrolling for the table on mobile */
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .my-cafes-actions {
        /* Stack the action buttons vertically on mobile */
        flex-direction: column;
        gap: 0.5rem !important;
    }

    .my-cafes-search {
        /* Make search more mobile-friendly */
        flex-wrap: wrap;
        gap: 0.5rem;
    }

        .my-cafes-search .form-control {
            width: 100%;
            margin-right: 0 !important;
        }

        .my-cafes-search .btn {
            width: 100%;
        }

    .dropdown-menu {
        position: absolute;
        width: max-content;
        max-width: 200px;
    }
}

/* Modern Industry Selector Styles */
.industry-selector {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    max-height: 280px;
    overflow-y: auto;
    padding: 0;
}

.industry-selector::-webkit-scrollbar {
    width: 6px;
}

.industry-selector::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.industry-selector::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.industry-selector::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.industry-category {
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 16px;
}

.industry-category:last-child {
    border-bottom: none;
}

.industry-category h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Removed red line styling */
/* .industry-category h6::before {
    content: '';
    width: 4px;
    height: 16px;
    background: linear-gradient(135deg, #FB4264, #e23457);
    border-radius: 2px;
} */

.industry-selector .form-check {
    margin: 0;
    padding: 4px 0;
}

.industry-selector .form-check-input {
    margin-right: 8px;
    margin-top: 0;
    width: 16px;
    height: 16px;
    border: 2px solid #dee2e6;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.industry-selector .form-check-input:checked {
    background-color: #FB4264;
    border-color: #FB4264;
    box-shadow: 0 0 0 2px rgba(251, 66, 100, 0.25);
}

.industry-selector .form-check-input:focus,
.industry-selector .form-check-input:focus-visible,
.industry-selector .form-check-input:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: #dee2e6 !important;
}

.industry-selector .form-check-input:checked:focus,
.industry-selector .form-check-input:checked:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: #FB4264 !important;
}

.industry-selector .form-check-label {
    font-size: 0.875rem;
    color: #495057;
    cursor: pointer;
    font-weight: 400;
    line-height: 1.4;
    transition: color 0.2s ease;
    user-select: none;
}

/* Individual hover effects removed - now handled by item-level hover */

/* Selected industry styling */
.industry-selector .form-check-input:checked + .form-check-label {
    font-weight: 500;
    color: #FB4264;
}

/* Compact layout for better space usage */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 8px;
    padding: 0 8px 12px 0;
}

.industry-item {
    display: flex;
    align-items: center;
    padding: 8px 28px 8px 36px;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.industry-item:hover {
    background-color: #f8f9fa;
    border-color: #e9ecef;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.industry-item:hover .form-check-input {
    border-color: #FB4264;
}

.industry-item:hover .form-check-label {
    color: #FB4264;
}

.industry-item .form-check {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Duplicate rule removed - see above */

.industry-item .form-check-input {
    flex-shrink: 0;
    margin-right: 8px;
    margin-top: 0;
    margin-left: 48px;
}

.industry-item .form-check-label {
    flex: 1;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .industry-grid {
        grid-template-columns: 1fr;
    }
    
    .industry-selector {
        max-height: 250px;
    }
}

/* Headquarters checkbox styling - brand red color */
.form-check:has(input[name*="IsHeadquarters"]) {
    margin-top: 12px !important;
}

input[name*="IsHeadquarters"].form-check-input:checked {
    background-color: #FB4264 !important;
    border-color: #FB4264 !important;
}

input[name*="IsHeadquarters"].form-check-input:focus {
    border-color: #FB4264 !important;
    box-shadow: 0 0 0 0.25rem rgba(251, 66, 100, 0.25) !important;
}

input[name*="IsHeadquarters"].form-check-input:hover {
    border-color: #FB4264 !important;
}

/* Enhanced mobile click/tap styles for better UX */
/* Override default Bootstrap active states with custom brand-consistent styles */

/* Primary button active states */
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus,
.btn-primary.active:focus {
    background-color: #FB4264 !important; /* Full brand red */
    border-color: #FB4264 !important;
    color: white !important;
    transform: translateY(1px) !important; /* Slight press down effect */
    box-shadow: 0 2px 4px rgba(251, 66, 100, 0.3) !important;
}

/* Secondary button active states */
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:active:focus,
.btn-secondary.active:focus {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3) !important;
}

/* Outline secondary button active states (used on homepage) */
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary:active:focus,
.btn-outline-secondary.active:focus {
    background-color: #FB4264 !important; /* Full brand red */
    border-color: #FB4264 !important;
    color: white !important;
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(251, 66, 100, 0.3) !important;
}

/* Success button active states */
.btn-success:active,
.btn-success.active,
.btn-success:active:focus,
.btn-success.active:focus {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(25, 135, 84, 0.3) !important;
}

/* Danger button active states */
.btn-danger:active,
.btn-danger.active,
.btn-danger:active:focus,
.btn-danger.active:focus {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important;
}

/* Link button active states */
.btn-link:active,
.btn-link.active,
.btn-link:active:focus,
.btn-link.active:focus {
    color: #E23455 !important; /* Darker brand red */
    text-decoration: underline !important;
    transform: translateY(1px) !important;
}

/* Custom contribution button active states (from Places page) */
.contribution-btn:active,
.contribution-btn.active,
.contribution-btn:active:focus,
.contribution-btn.active:focus {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(251, 66, 100, 0.3) !important;
}

.contribution-btn-secondary:active,
.contribution-btn-secondary.active,
.contribution-btn-secondary:active:focus,
.contribution-btn-secondary.active:focus {
    background: #FB4264 !important;
    color: white !important;
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(251, 66, 100, 0.3) !important;
}

.contribution-btn-primary:active,
.contribution-btn-primary.active,
.contribution-btn-primary:active:focus,
.contribution-btn-primary.active:focus {
    background: #FB4264 !important;
    border-color: #FB4264 !important;
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(251, 66, 100, 0.3) !important;
}

/* Filter chip active states */
.filter-chip:active,
.filter-chip.active:active,
.filter-chip:active:focus,
.filter-chip.active:active:focus {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(251, 66, 100, 0.3) !important;
}

/* Bottom sheet filter button active states */
.bottom-sheet-filter-btn:active,
.bottom-sheet-filter-btn:active:focus {
    background: #E23455 !important;
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(251, 66, 100, 0.3) !important;
}

/* Filters toggle button active states */
.filters-toggle-btn:active,
.filters-toggle-btn:active:focus {
    background: #E23455 !important;
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(251, 66, 100, 0.3) !important;
}

/* Place item active states */
.place-item:active {
    background: #f1f5f9 !important;
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Navigation link active states */
.nav-link:active,
.nav-link.active:active,
.nav-link:active:focus,
.nav-link.active:active:focus {
    color: #E23455 !important;
    transform: translateY(1px) !important;
}

/* Dropdown item active states */
.dropdown-item:active,
.dropdown-item.active:active,
.dropdown-item:active:focus,
.dropdown-item.active:active:focus {
    background-color: rgba(251, 66, 100, 0.15) !important;
    color: #FB4264 !important;
    transform: translateY(1px) !important;
}

/* Industry item active states */
.industry-item:active {
    background-color: #f1f5f9 !important;
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
    /* Ensure active states are more visible on mobile */
    .btn:active,
    .btn.active,
    .btn:active:focus,
    .btn.active:focus {
        transition: all 0.1s ease !important; /* Faster transition for mobile */
    }
    
    /* Slightly larger press effect on mobile for better feedback */
    .btn:active,
    .btn.active,
    .btn:active:focus,
    .btn.active:focus {
        transform: translateY(2px) !important;
    }
    
    /* Enhanced touch feedback for interactive elements */
    .filter-chip:active,
    .place-item:active,
    .industry-item:active {
        transform: translateY(2px) !important;
        transition: all 0.1s ease !important;
    }
}

/* Remove default Bootstrap focus outlines and replace with custom ones */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Remove blue selection highlights from buttons */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus {
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Remove focus outlines from form controls but keep accessibility */
.form-control:focus {
    border-color: #FB4264 !important;
    box-shadow: 0 0 0 0.2rem rgba(251, 66, 100, 0.25) !important;
    outline: none !important;
}

/* Remove focus outlines from checkboxes but keep accessibility */
.form-check-input:focus {
    border-color: #FB4264 !important;
    box-shadow: 0 0 0 0.2rem rgba(251, 66, 100, 0.25) !important;
    outline: none !important;
}

/* Remove mobile-specific blue highlights and selection effects */
* {
    -webkit-tap-highlight-color: transparent !important;
}

/* Enhanced mobile touch experience for buttons */
@media (max-width: 768px) {
    .btn-primary:active,
    .btn-primary.active,
    .btn-outline-secondary:active,
    .btn-outline-secondary.active,
    .join-button:active {
        background-color: #FB4264 !important;
        border-color: #FB4264 !important;
        color: white !important;
        transform: translateY(2px) !important;
        transition: all 0.1s ease !important;
    }
    
    /* Ensure text remains white on mobile touch */
    .btn-primary:active *,
    .btn-primary.active *,
    .btn-outline-secondary:active *,
    .btn-outline-secondary.active *,
    .join-button:active * {
        color: white !important;
    }
    
    /* Specific styles for homepage top 3 sections */
    .hero .btn-primary:active,
    .hero .btn-primary.active,
    .features .btn-outline-secondary:active,
    .features .btn-outline-secondary.active,
    .join-button:active {
        background-color: #FB4264 !important;
        border-color: #FB4264 !important;
        color: white !important;
        transform: translateY(2px) !important;
        transition: all 0.1s ease !important;
        box-shadow: 0 2px 4px rgba(251, 66, 100, 0.3) !important;
    }
}

/* Remove text selection on buttons and interactive elements */
.btn,
.filter-chip,
.place-item,
.contribution-btn,
.bottom-sheet-filter-btn,
.filters-toggle-btn,
.nav-link,
.dropdown-item,
.industry-item {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    touch-action: manipulation !important; /* Optimize for touch */
}

/* Remove blue selection from specific button types */
.btn-primary:focus,
.btn-secondary:focus,
.btn-outline-secondary:focus,
.btn-success:focus,
.btn-danger:focus,
.btn-link:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Remove focus ring from custom contribution buttons */
.contribution-btn:focus,
.contribution-btn-secondary:focus,
.contribution-btn-primary:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Remove focus ring from filter elements */
.filter-chip:focus,
.bottom-sheet-filter-btn:focus,
.filters-toggle-btn:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Remove focus ring from navigation elements */
.nav-link:focus,
.dropdown-item:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Remove focus ring from industry items */
.industry-item:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Prevent auto-zoom on mobile when input fields are focused */
/* Mobile browsers (especially iOS Safari) zoom in when font-size is less than 16px */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    textarea,
    select,
    .form-control,
    .custom-select,
    .form-floating input,
    .form-floating textarea,
    .form-floating select,
    #Description,
    textarea#Description {
        font-size: 16px !important;
    }
}