/* /Components/Account/Pages/Manage/MyProfile.razor.rz.scp.css */
/* Profile Page Styles */
.profile-page[b-ma017c0avu] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    padding: 2rem 1rem;
}

.profile-container[b-ma017c0avu] {
    max-width: 800px;
    margin: 0 auto;
}

.profile-header[b-ma017c0avu] {
    text-align: center;
    margin-bottom: 2rem;
}

.profile-header h1[b-ma017c0avu] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.profile-subtitle[b-ma017c0avu] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

/* Alert Styles */
.alert[b-ma017c0avu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-success[b-ma017c0avu] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid #86efac;
}

.alert-error[b-ma017c0avu] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.alert-info[b-ma017c0avu] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.alert-warning[b-ma017c0avu] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #fcd34d;
}

.impersonation-warning[b-ma017c0avu] {
    margin-bottom: 1.5rem;
}

.impersonation-warning strong[b-ma017c0avu] {
    font-weight: 600;
}

.alert-close[b-ma017c0avu] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.alert-close:hover[b-ma017c0avu] {
    opacity: 1;
}

/* Profile Content */
.profile-content[b-ma017c0avu] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Section Cards */
.profile-section[b-ma017c0avu] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.profile-section h2[b-ma017c0avu] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 1.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

/* Profile Picture Section */
.profile-picture-container[b-ma017c0avu] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Profile Header Card - Combined Picture + Account Info */
.profile-header-section[b-ma017c0avu] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 0;
    overflow: hidden;
}

.profile-header-card[b-ma017c0avu] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
}

.profile-header-section .profile-avatar-wrapper[b-ma017c0avu] {
    position: relative;
    flex-shrink: 0;
}

.profile-header-section .profile-avatar-large[b-ma017c0avu] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.profile-header-section .avatar-image[b-ma017c0avu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-header-section .avatar-initials[b-ma017c0avu] {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-header-section .avatar-uploading[b-ma017c0avu] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.profile-header-section .change-photo-btn[b-ma017c0avu] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.profile-header-section .change-photo-btn[b-ma017c0avu]  .rzi {
    font-size: 1.125rem !important;
    color: #667eea !important;
}

.profile-header-section .change-photo-btn:hover[b-ma017c0avu] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Profile Header Info */
.profile-header-info[b-ma017c0avu] {
    flex: 1;
    min-width: 0;
}

.profile-name-section[b-ma017c0avu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.profile-display-name[b-ma017c0avu] {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    padding: 0;
    border: none;
}

.profile-meta[b-ma017c0avu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.profile-meta-item[b-ma017c0avu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.profile-meta-item[b-ma017c0avu]  .rzi {
    font-size: 1rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Status Badges */
.status-badge[b-ma017c0avu] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-badge.active[b-ma017c0avu] {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.inactive[b-ma017c0avu] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-badge-small[b-ma017c0avu] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 0.5rem;
}

.status-badge-small.active[b-ma017c0avu] {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

/* Remove Photo Button in Header */
.profile-header-section .btn-remove-link[b-ma017c0avu] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.profile-header-section .btn-remove-link:hover:not(:disabled)[b-ma017c0avu] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.profile-header-section .btn-remove-link:disabled[b-ma017c0avu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.profile-header-section .btn-remove-link[b-ma017c0avu]  .rzi {
    font-size: 0.875rem !important;
}

/* Mobile Responsive for Profile Header */
@media (max-width: 640px) {
    .profile-header-card[b-ma017c0avu] {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .profile-header-section .profile-avatar-large[b-ma017c0avu] {
        width: 100px;
        height: 100px;
    }

    .profile-header-section .avatar-initials[b-ma017c0avu] {
        font-size: 2rem;
    }

    .profile-name-section[b-ma017c0avu] {
        justify-content: center;
    }

    .profile-display-name[b-ma017c0avu] {
        font-size: 1.25rem;
    }

    .profile-meta[b-ma017c0avu] {
        align-items: center;
    }

    .profile-meta-item[b-ma017c0avu] {
        font-size: 0.8125rem;
    }
}

.profile-avatar-wrapper[b-ma017c0avu] {
    position: relative;
}

.profile-avatar-large[b-ma017c0avu] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 4px solid white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.avatar-image[b-ma017c0avu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials[b-ma017c0avu] {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

.avatar-uploading[b-ma017c0avu] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.change-photo-btn[b-ma017c0avu] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}

.change-photo-btn[b-ma017c0avu]  .rzi {
    font-size: 1.25rem !important;
    color: white !important;
}

.change-photo-btn:hover[b-ma017c0avu] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.change-photo-btn input[type="file"][b-ma017c0avu],
.change-photo-btn[b-ma017c0avu]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.profile-picture-info[b-ma017c0avu] {
    flex: 1;
}

.btn-remove-link[b-ma017c0avu] {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    transition: color 0.2s;
}

.btn-remove-link:hover:not(:disabled)[b-ma017c0avu] {
    color: #dc2626;
}

.btn-remove-link:disabled[b-ma017c0avu] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Form Styles */
.form-grid[b-ma017c0avu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 640px) {
    .form-grid[b-ma017c0avu] {
        grid-template-columns: 1fr;
    }
}

.form-group[b-ma017c0avu] {
    margin-bottom: 1rem;
}

.form-group label[b-ma017c0avu] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-input[b-ma017c0avu] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: white;
}

.form-input:focus[b-ma017c0avu] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-input:disabled[b-ma017c0avu] {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

.form-hint[b-ma017c0avu] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0.5rem 0 0 0;
}

.validation-message[b-ma017c0avu] {
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 0.25rem;
}

.form-actions[b-ma017c0avu] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.btn-primary[b-ma017c0avu] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover:not(:disabled)[b-ma017c0avu] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled[b-ma017c0avu] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Info Grid */
.info-grid[b-ma017c0avu] {
    display: grid;
    gap: 1rem;
}

.info-item[b-ma017c0avu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.info-item:last-child[b-ma017c0avu] {
    border-bottom: none;
}

.info-label[b-ma017c0avu] {
    color: #64748b;
    font-size: 0.875rem;
}

.info-value[b-ma017c0avu] {
    font-weight: 600;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge[b-ma017c0avu] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.active[b-ma017c0avu] {
    background: #dcfce7;
    color: #166534;
}

.status-badge.inactive[b-ma017c0avu] {
    background: #fee2e2;
    color: #991b1b;
}

/* Subscription Pills */
.subscription-plan-pill[b-ma017c0avu] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.subscription-status-pill[b-ma017c0avu] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    background: #e5e7eb;
    color: #374151;
    text-transform: capitalize;
}

.subscription-status-pill.status-active[b-ma017c0avu] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
}

/* Security Links */
.security-options[b-ma017c0avu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.security-link[b-ma017c0avu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s, transform 0.2s;
}

.security-link:hover[b-ma017c0avu] {
    background: #f1f5f9;
    transform: translateX(4px);
}

.security-link-content[b-ma017c0avu] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.security-link-content > :global(.rzi)[b-ma017c0avu] {
    font-size: 1.5rem;
    color: #667eea;
}

.security-link-content strong[b-ma017c0avu] {
    display: block;
    color: #1a1a2e;
    font-size: 0.9375rem;
}

.security-link-content p[b-ma017c0avu] {
    margin: 0;
    font-size: 0.8125rem;
    color: #64748b;
}

/* Mobile Adjustments */
@media (max-width: 640px) {
    .profile-page[b-ma017c0avu] {
        padding: 1rem 0.5rem;
    }

    .profile-picture-container[b-ma017c0avu] {
        flex-direction: column;
        text-align: center;
    }

    .profile-avatar-large[b-ma017c0avu] {
        width: 100px;
        height: 100px;
    }

    .avatar-initials[b-ma017c0avu] {
        font-size: 2rem;
    }

    .profile-section[b-ma017c0avu] {
        padding: 1.25rem;
    }

    .info-item[b-ma017c0avu] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Input Wrapper with Icon */
.input-wrapper[b-ma017c0avu] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-ma017c0avu] {
    position: absolute;
    left: 1rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

.input-icon[b-ma017c0avu]  .rzi {
    font-size: 1.25rem !important;
}

.form-input.with-icon[b-ma017c0avu] {
    padding-left: 3rem;
}

/* Address Section Styles */
.address-section[b-ma017c0avu] {
    overflow: hidden;
}

.address-tabs[b-ma017c0avu] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.address-tab[b-ma017c0avu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: #64748b;
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.address-tab:hover[b-ma017c0avu] {
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.address-tab.active[b-ma017c0avu] {
    color: #667eea;
    border-bottom-color: #667eea;
}

.address-tab[b-ma017c0avu]  .rzi {
    font-size: 1.25rem !important;
}

.address-form-container[b-ma017c0avu] {
    animation: fadeIn-b-ma017c0avu 0.2s ease;
}

@keyframes fadeIn-b-ma017c0avu {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Copy Billing Toggle */
.copy-billing-toggle[b-ma017c0avu] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    border: 1px solid #bae6fd;
}

.toggle-label[b-ma017c0avu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.toggle-label input[type="checkbox"][b-ma017c0avu] {
    display: none;
}

.toggle-slider[b-ma017c0avu] {
    position: relative;
    width: 48px;
    height: 26px;
    background: #cbd5e1;
    border-radius: 13px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.toggle-slider[b-ma017c0avu]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-label input:checked + .toggle-slider[b-ma017c0avu] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.toggle-label input:checked + .toggle-slider[b-ma017c0avu]::after {
    transform: translateX(22px);
}

.toggle-text[b-ma017c0avu] {
    font-weight: 500;
    color: #374151;
}

/* Shipping Same as Billing Display */
.shipping-same-as-billing[b-ma017c0avu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 12px;
    border: 1px solid #86efac;
}

.shipping-same-as-billing[b-ma017c0avu]  .rzi {
    font-size: 3rem !important;
    color: #22c55e !important;
    margin-bottom: 0.75rem;
}

.shipping-same-as-billing p[b-ma017c0avu] {
    margin: 0;
    color: #166534;
    font-weight: 500;
}

/* Geolocation Button */
.geolocation-hint[b-ma017c0avu] {
    margin: 1rem 0;
}

.btn-geolocation[b-ma017c0avu] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #7dd3fc;
    border-radius: 8px;
    color: #0369a1;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-geolocation:hover:not(:disabled)[b-ma017c0avu] {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-color: #38bdf8;
}

.btn-geolocation:disabled[b-ma017c0avu] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-geolocation[b-ma017c0avu]  .rzi {
    font-size: 1.125rem !important;
}

/* Mobile Address Tabs */
@media (max-width: 640px) {
    .address-tabs[b-ma017c0avu] {
        flex-direction: column;
        gap: 0;
        border-bottom: none;
    }

    .address-tab[b-ma017c0avu] {
        width: 100%;
        justify-content: center;
        border-bottom: none;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        background: #f8fafc;
    }

    .address-tab.active[b-ma017c0avu] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .address-tab.active[b-ma017c0avu]  .rzi {
        color: white !important;
    }

    .btn-geolocation[b-ma017c0avu] {
        width: 100%;
        justify-content: center;
    }
}

/* ===== My Pets Summary Section ===== */
.pets-summary-section[b-ma017c0avu] {
    overflow: hidden;
}

.pets-empty-state[b-ma017c0avu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 2px dashed #cbd5e1;
}

.pets-empty-state .empty-icon[b-ma017c0avu]  .rzi {
    font-size: 3.5rem !important;
    color: #94a3b8 !important;
    margin-bottom: 1rem;
}

.pets-empty-state p[b-ma017c0avu] {
    color: #64748b;
    font-size: 1rem;
    margin: 0 0 1.25rem 0;
}

/* Pet Stats Row */
.pets-stats-row[b-ma017c0avu] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pet-stat-card[b-ma017c0avu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pet-stat-card:hover[b-ma017c0avu] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pet-stat-card.active[b-ma017c0avu] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #86efac;
}

.pet-stat-value[b-ma017c0avu] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1;
}

.pet-stat-card.active .pet-stat-value[b-ma017c0avu] {
    color: #166534;
}

.pet-stat-label[b-ma017c0avu] {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 0.375rem;
    font-weight: 500;
}

.pet-stat-card.active .pet-stat-label[b-ma017c0avu] {
    color: #166534;
}

/* Pet Details Grid */
.pets-details-grid[b-ma017c0avu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pet-detail-card[b-ma017c0avu] {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    border: 1px solid #e9d5ff;
}

.pet-detail-card.names-card[b-ma017c0avu] {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-color: #fed7aa;
}

.pet-detail-header[b-ma017c0avu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #581c87;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.names-card .pet-detail-header[b-ma017c0avu] {
    color: #9a3412;
}

.pet-detail-header[b-ma017c0avu]  .rzi {
    font-size: 1.125rem !important;
}

/* Pet Tags */
.pet-tags[b-ma017c0avu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pet-tag[b-ma017c0avu] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: transform 0.2s;
}

.pet-tag:hover[b-ma017c0avu] {
    transform: scale(1.05);
}

.pet-tag[b-ma017c0avu]  .rzi {
    font-size: 0.9375rem !important;
}

.pet-tag.type-tag[b-ma017c0avu] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.pet-tag.breed-tag[b-ma017c0avu] {
    background: white;
    color: #7c3aed;
    border: 1px solid #c4b5fd;
}

.pet-tag.more-tag[b-ma017c0avu] {
    background: #e2e8f0;
    color: #64748b;
}

/* Pet Names List */
.pet-names-list[b-ma017c0avu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.pet-name-chip[b-ma017c0avu] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1a1a2e;
    border: 1px solid #fdba74;
    box-shadow: 0 2px 4px rgba(251, 146, 60, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}

.pet-name-chip:hover[b-ma017c0avu] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(251, 146, 60, 0.25);
}

.pet-name-chip[b-ma017c0avu]  .rzi {
    font-size: 0.875rem !important;
    color: #f97316 !important;
}

/* Pets Actions */
.pets-actions[b-ma017c0avu] {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.btn-secondary[b-ma017c0avu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-ma017c0avu] {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #1e293b;
}

.btn-primary-outline[b-ma017c0avu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary-outline:hover[b-ma017c0avu] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Mobile Pets Section */
@media (max-width: 640px) {
    .pets-stats-row[b-ma017c0avu] {
        gap: 0.75rem;
    }

    .pet-stat-card[b-ma017c0avu] {
        padding: 1rem;
    }

    .pet-stat-value[b-ma017c0avu] {
        font-size: 1.5rem;
    }

    .pets-actions[b-ma017c0avu] {
        flex-direction: column;
    }

    .btn-secondary[b-ma017c0avu],
    .btn-primary-outline[b-ma017c0avu] {
        width: 100%;
    }
}
/* /Components/Admin/ImpersonationBlockedNotice.razor.rz.scp.css */
.impersonation-blocked-notice[b-2wzh0lndnx] {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 8px;
    margin: 16px 0;
}

.blocked-icon[b-2wzh0lndnx] {
    font-size: 2rem;
    flex-shrink: 0;
}

.blocked-content[b-2wzh0lndnx] {
    flex: 1;
}

.blocked-content h4[b-2wzh0lndnx] {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #92400e;
}

.blocked-content p[b-2wzh0lndnx] {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: #78350f;
    line-height: 1.5;
}

.blocked-actions-list[b-2wzh0lndnx] {
    font-size: 0.85rem;
    color: #92400e;
}

.blocked-actions-list strong[b-2wzh0lndnx] {
    display: block;
    margin-bottom: 6px;
}

.blocked-actions-list ul[b-2wzh0lndnx] {
    margin: 0;
    padding-left: 20px;
    columns: 2;
    column-gap: 24px;
}

.blocked-actions-list li[b-2wzh0lndnx] {
    margin-bottom: 4px;
}

@media (max-width: 600px) {
    .impersonation-blocked-notice[b-2wzh0lndnx] {
        flex-direction: column;
        text-align: center;
    }

    .blocked-actions-list ul[b-2wzh0lndnx] {
        columns: 1;
        text-align: left;
    }
}
/* /Components/Admin/ImpersonationConfirmationDialog.razor.rz.scp.css */
.impersonation-dialog-backdrop[b-f50fhfu7ft] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    backdrop-filter: blur(4px);
}

.impersonation-dialog[b-f50fhfu7ft] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: dialog-appear-b-f50fhfu7ft 0.2s ease-out;
}

@keyframes dialog-appear-b-f50fhfu7ft {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.dialog-header[b-f50fhfu7ft] {
    padding: 24px 24px 16px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

.dialog-icon[b-f50fhfu7ft] {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.dialog-header h2[b-f50fhfu7ft] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.dialog-body[b-f50fhfu7ft] {
    padding: 20px 24px;
}

.user-info-card[b-f50fhfu7ft] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 20px;
}

.user-avatar[b-f50fhfu7ft] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .user-avatar img[b-f50fhfu7ft] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.avatar-initials[b-f50fhfu7ft] {
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
}

.user-details[b-f50fhfu7ft] {
    flex: 1;
    min-width: 0;
}

.user-name[b-f50fhfu7ft] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.user-email[b-f50fhfu7ft] {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-badge[b-f50fhfu7ft] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 4px;
}

.info-section[b-f50fhfu7ft] {
    margin-bottom: 20px;
}

    .info-section h4[b-f50fhfu7ft] {
        margin: 0 0 12px;
        font-size: 0.9rem;
        font-weight: 600;
        color: #475569;
    }

.info-list[b-f50fhfu7ft] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .info-list li[b-f50fhfu7ft] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 6px 0;
        font-size: 0.875rem;
        color: #64748b;
    }

.check-icon[b-f50fhfu7ft] {
    color: #22c55e !important;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.error-icon[b-f50fhfu7ft] {
    color: #dc2626 !important;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.reason-section[b-f50fhfu7ft] {
    margin-bottom: 16px;
}

    .reason-section label[b-f50fhfu7ft] {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 8px;
    }

.reason-input[b-f50fhfu7ft] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .reason-input:focus[b-f50fhfu7ft] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .reason-input[b-f50fhfu7ft]::placeholder {
        color: #94a3b8;
    }

.acknowledgment-section[b-f50fhfu7ft] {
    padding: 12px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    margin-bottom: 16px;
}

.checkbox-label[b-f50fhfu7ft] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

    .checkbox-label input[type="checkbox"][b-f50fhfu7ft] {
        width: 18px;
        height: 18px;
        margin-top: 2px;
        cursor: pointer;
        accent-color: #dc3545;
    }

.checkbox-text[b-f50fhfu7ft] {
    font-size: 0.875rem;
    color: #92400e;
    font-weight: 500;
    line-height: 1.4;
}

.error-message[b-f50fhfu7ft] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.875rem;
}

.error-icon[b-f50fhfu7ft] {
    flex-shrink: 0;
}

.loading-state[b-f50fhfu7ft] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px;
    color: #64748b;
}

.spinner[b-f50fhfu7ft] {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-f50fhfu7ft 0.8s linear infinite;
}

.spinner-small[b-f50fhfu7ft] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-f50fhfu7ft 0.8s linear infinite;
}

@keyframes spin-b-f50fhfu7ft {
    to {
        transform: rotate(360deg);
    }
}

.dialog-footer[b-f50fhfu7ft] {
    padding: 16px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-cancel[b-f50fhfu7ft] {
    padding: 10px 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-cancel:hover:not(:disabled)[b-f50fhfu7ft] {
        background: #e2e8f0;
    }

    .btn-cancel:disabled[b-f50fhfu7ft] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-confirm[b-f50fhfu7ft] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-confirm:hover:not(:disabled)[b-f50fhfu7ft] {
        background: linear-gradient(135deg, #c82333 0%, #a71d2a 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }

    .btn-confirm:disabled[b-f50fhfu7ft] {
        background: #94a3b8;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* Mobile adjustments */
@media (max-width: 480px) {
    .impersonation-dialog[b-f50fhfu7ft] {
        width: 95%;
        margin: 16px;
    }

    .dialog-header[b-f50fhfu7ft] {
        padding: 20px 16px 12px;
    }

    .dialog-body[b-f50fhfu7ft] {
        padding: 16px;
    }

    .dialog-footer[b-f50fhfu7ft] {
        padding: 12px 16px 20px;
        flex-direction: column-reverse;
    }

    .btn-cancel[b-f50fhfu7ft],
    .btn-confirm[b-f50fhfu7ft] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Layout/AdminHeader.razor.rz.scp.css */
/* ================================================
   Admin Header Component Styles
   ================================================ */

.admin-header-content[b-umsmebxo5o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 100%;
}

.admin-header-left[b-umsmebxo5o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-menu-toggle[b-umsmebxo5o] {
    color: #94a3b8 !important;
}

.admin-menu-toggle:hover[b-umsmebxo5o] {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.admin-brand[b-umsmebxo5o] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: #ffffff;
    margin-left: 15px;
}

.admin-brand:hover[b-umsmebxo5o] {
    text-decoration: none;
    color: #ffffff;
}

.admin-brand-logo[b-umsmebxo5o] {
    height: 32px;
    width: 32px;
    filter: hue-rotate(-30deg) saturate(2) brightness(0.9);
}

.admin-brand-text[b-umsmebxo5o] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.admin-badge[b-umsmebxo5o] {
    margin-left: 0.5rem;
    font-size: 0.65rem !important;
    padding: 0.125rem 0.5rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-header-right[b-umsmebxo5o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Notification Bell */
.admin-notification[b-umsmebxo5o] {
    position: relative;
}

.notification-btn[b-umsmebxo5o] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #94a3b8;
}

.notification-btn:hover[b-umsmebxo5o] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.notification-btn[b-umsmebxo5o]  .rzi {
    font-size: 1.5rem !important;
}

.notification-badge[b-umsmebxo5o] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Notifications Dropdown */
.notifications-overlay[b-umsmebxo5o] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.notifications-dropdown[b-umsmebxo5o] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 320px;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow: hidden;
}

.notifications-header[b-umsmebxo5o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    color: #1f2937;
}

.mark-read-btn[b-umsmebxo5o] {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 0.75rem;
    cursor: pointer;
}

.mark-read-btn:hover[b-umsmebxo5o] {
    text-decoration: underline;
}

.notifications-empty[b-umsmebxo5o] {
    padding: 2rem;
    text-align: center;
    color: #9ca3af;
}

.notifications-empty[b-umsmebxo5o]  .rzi {
    font-size: 2rem !important;
    margin-bottom: 0.5rem;
}

.notifications-empty p[b-umsmebxo5o] {
    margin: 0;
    font-size: 0.875rem;
}

/* Notifications List */
.notifications-list[b-umsmebxo5o] {
    max-height: 350px;
    overflow-y: auto;
}

.notification-item[b-umsmebxo5o] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    position: relative;
    transition: background-color 0.15s ease;
}

.notification-item:hover[b-umsmebxo5o] {
    background: #f9fafb;
}

.notification-item:last-child[b-umsmebxo5o] {
    border-bottom: none;
}

.notification-unread[b-umsmebxo5o] {
    background: #eff6ff;
}

.notification-unread:hover[b-umsmebxo5o] {
    background: #dbeafe;
}

.notification-unread-dot[b-umsmebxo5o] {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #3b82f6;
    border-radius: 50%;
}

.notification-icon[b-umsmebxo5o] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #e5e7eb;
    color: #6b7280;
}

.notification-icon[b-umsmebxo5o]  .rzi {
    font-size: 1rem !important;
}

.activity-icon-join[b-umsmebxo5o] {
    background: #dcfce7;
    color: #16a34a;
}

.activity-icon-pet[b-umsmebxo5o] {
    background: #fef3c7;
    color: #d97706;
}

.activity-icon-scan[b-umsmebxo5o] {
    background: #e0e7ff;
    color: #4f46e5;
}

.activity-icon-alert[b-umsmebxo5o] {
    background: #fee2e2;
    color: #dc2626;
}

.activity-icon-found[b-umsmebxo5o] {
    background: #d1fae5;
    color: #059669;
}

.activity-icon-help[b-umsmebxo5o] {
    background: #fce7f3;
    color: #db2777;
}

.activity-icon-sub[b-umsmebxo5o] {
    background: #f3e8ff;
    color: #9333ea;
}

.activity-icon-info[b-umsmebxo5o] {
    background: #f3f4f6;
    color: #6b7280;
}

.notification-content[b-umsmebxo5o] {
    flex: 1;
    min-width: 0;
}

.notification-text[b-umsmebxo5o] {
    display: block;
    font-size: 0.8125rem;
    color: #374151;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.notification-time[b-umsmebxo5o] {
    display: block;
    font-size: 0.6875rem;
    color: #9ca3af;
}

.notifications-view-all[b-umsmebxo5o] {
    display: block;
    text-align: center;
    padding: 0.75rem;
    color: #3b82f6;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    border-top: 1px solid #e5e7eb;
}

.notifications-view-all:hover[b-umsmebxo5o] {
    background: #f9fafb;
    text-decoration: none;
}

/* User Profile Pill */
.admin-user-pill[b-umsmebxo5o] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
    background: rgba(139, 92, 246, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.admin-user-pill:hover[b-umsmebxo5o] {
    background: rgba(139, 92, 246, 0.4);
    border-color: rgba(139, 92, 246, 0.5);
}

.user-avatar[b-umsmebxo5o] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar img[b-umsmebxo5o] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials[b-umsmebxo5o] {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
}

.user-info[b-umsmebxo5o] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.user-name[b-umsmebxo5o] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
}

.user-email[b-umsmebxo5o] {
    font-size: 0.7rem;
    color: #cbd5e1;
}

.user-dropdown-arrow[b-umsmebxo5o]  .rzi {
    font-size: 1.25rem !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease;
}

/* User Dropdown Menu */
.user-menu-overlay[b-umsmebxo5o] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.user-dropdown-menu[b-umsmebxo5o] {
    position: fixed;
    top: 60px;
    right: 1rem;
    min-width: 200px;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow: hidden;
}

.dropdown-item[b-umsmebxo5o] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.dropdown-item:hover[b-umsmebxo5o] {
    background: #f3f4f6;
    color: #1f2937;
    text-decoration: none;
}

.dropdown-item[b-umsmebxo5o]  .rzi {
    font-size: 1.125rem !important;
    color: #6b7280 !important;
}

.dropdown-divider[b-umsmebxo5o] {
    margin: 0.25rem 0;
    border-color: #e5e7eb;
}

/* Logout Button */
.logout-btn[b-umsmebxo5o] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #f87171;
}

.logout-btn:hover[b-umsmebxo5o] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.logout-btn[b-umsmebxo5o]  .rzi {
    font-size: 1.5rem !important;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
    .user-info[b-umsmebxo5o] {
        display: none;
    }
    
    .user-dropdown-arrow[b-umsmebxo5o] {
        display: none;
    }
    
    .admin-user-pill[b-umsmebxo5o] {
        padding: 0.25rem;
        gap: 0;
    }
    
    .admin-header-right[b-umsmebxo5o] {
        gap: 0.5rem;
    }
    
    .notifications-dropdown[b-umsmebxo5o] {
        position: fixed;
        top: 64px;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-width: 320px;
        margin-left: auto;
    }
    
    .user-dropdown-menu[b-umsmebxo5o] {
        right: 0.5rem;
    }
}

/* Small phone screens */
@media (max-width: 480px) {
    .admin-header-right[b-umsmebxo5o] {
        gap: 0.375rem;
    }
    
    .notification-btn[b-umsmebxo5o],
    .logout-btn[b-umsmebxo5o] {
        width: 36px;
        height: 36px;
    }
    
    .notification-btn[b-umsmebxo5o]  .rzi,
    .logout-btn[b-umsmebxo5o]  .rzi {
        font-size: 1.25rem !important;
    }
    
    .user-avatar[b-umsmebxo5o] {
        width: 32px;
        height: 32px;
    }
    
    .avatar-initials[b-umsmebxo5o] {
        font-size: 0.75rem;
    }
    
    .notifications-dropdown[b-umsmebxo5o] {
        position: fixed;
        top: 64px;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-width: calc(100vw - 1rem);
    }
    
    .notifications-list[b-umsmebxo5o] {
        max-height: 300px;
    }
    
    .admin-badge[b-umsmebxo5o] {
        font-size: 0.6rem !important;
        padding: 0.1rem 0.375rem !important;
    }
    
    .user-dropdown-menu[b-umsmebxo5o] {
        right: 0.5rem;
        min-width: 180px;
    }
}
/* /Components/Layout/AdminLayout.razor.rz.scp.css */
/* ================================================
   Admin Layout Styles - PetFindrz Admin Portal
   Uses Radzen Layout with Icon Sidebar
   ================================================ */

/* Base Layout */
.admin-layout[b-8ng8pumemd] {
    min-height: 100vh;
    background: #f1f5f9;
}

/* ================================================
   HEADER STYLES
   ================================================ */
.admin-header[b-8ng8pumemd] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 64px;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.admin-header-content[b-8ng8pumemd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 100%;
}

.admin-header-left[b-8ng8pumemd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-menu-toggle[b-8ng8pumemd] {
    color: #94a3b8 !important;
}

.admin-menu-toggle:hover[b-8ng8pumemd] {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.admin-brand[b-8ng8pumemd] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: #ffffff;
}

.admin-brand:hover[b-8ng8pumemd] {
    text-decoration: none;
    color: #ffffff;
}

.admin-brand-logo[b-8ng8pumemd] {
    height: 32px;
    width: 32px;
}

.admin-brand-text[b-8ng8pumemd] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.admin-badge[b-8ng8pumemd] {
    margin-left: 0.5rem;
    font-size: 0.65rem !important;
    padding: 0.125rem 0.5rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-header-right[b-8ng8pumemd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Notification Bell */
.admin-notification[b-8ng8pumemd] {
    position: relative;
}

.notification-btn[b-8ng8pumemd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #94a3b8;
}

.notification-btn:hover[b-8ng8pumemd] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.notification-btn[b-8ng8pumemd]  .rzi {
    font-size: 1.5rem !important;
}

.notification-badge[b-8ng8pumemd] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* User Profile Pill */
.admin-user-pill[b-8ng8pumemd] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
    background: rgba(139, 92, 246, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.admin-user-pill:hover[b-8ng8pumemd] {
    background: rgba(139, 92, 246, 0.4);
    border-color: rgba(139, 92, 246, 0.5);
}

.user-avatar[b-8ng8pumemd] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar img[b-8ng8pumemd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials[b-8ng8pumemd] {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
}

.user-info[b-8ng8pumemd] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.user-name[b-8ng8pumemd] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
}

.user-email[b-8ng8pumemd] {
    font-size: 0.7rem;
    color: #cbd5e1;
}

.user-dropdown-arrow[b-8ng8pumemd]  .rzi {
    font-size: 1.25rem !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease;
}

/* User Dropdown Menu */
.user-menu-overlay[b-8ng8pumemd] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.user-dropdown-menu[b-8ng8pumemd] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 60px;
    min-width: 200px;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow: hidden;
}

.dropdown-item[b-8ng8pumemd] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.15s ease;
}

.dropdown-item:hover[b-8ng8pumemd] {
    background: #f3f4f6;
    color: #1f2937;
    text-decoration: none;
}

.dropdown-item[b-8ng8pumemd]  .rzi {
    font-size: 1.125rem !important;
    color: #6b7280 !important;
}

.dropdown-divider[b-8ng8pumemd] {
    margin: 0.25rem 0;
    border-color: #e5e7eb;
}

/* Logout Button */
.logout-form[b-8ng8pumemd] {
    display: flex;
}

.logout-btn[b-8ng8pumemd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #f87171;
}

.logout-btn:hover[b-8ng8pumemd] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.logout-btn[b-8ng8pumemd]  .rzi {
    font-size: 1.5rem !important;
}

/* Old Profile Menu Styles - Remove if not needed */
.admin-menu-divider[b-8ng8pumemd] {
    margin: 0.5rem 0;
    border-color: #e2e8f0;
}

/* ================================================
   SIDEBAR STYLES
   ================================================ */
.admin-sidebar[b-8ng8pumemd] {
    background: #1e293b;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    width: 250px;
    transition: width 0.3s ease;
}

.admin-sidebar:not(.rz-sidebar-expanded)[b-8ng8pumemd] {
    width: 60px;
}

/* Navigation Menu */
.admin-nav[b-8ng8pumemd] {
    padding: 1rem 0;
}

.admin-nav[b-8ng8pumemd]  .rz-panel-menu-item {
    margin: 0.125rem 0.5rem;
    border-radius: 0.5rem;
}

.admin-nav[b-8ng8pumemd]  .rz-panel-menu-item-link {
    padding: 0.75rem 1rem;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.admin-nav[b-8ng8pumemd]  .rz-panel-menu-item-link:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #e2e8f0;
}

.admin-nav[b-8ng8pumemd]  .rz-panel-menu-item-link.active,
.admin-nav[b-8ng8pumemd]  .rz-panel-menu-item-link[aria-current="page"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.admin-nav[b-8ng8pumemd]  .rz-panel-menu-item-icon {
    font-size: 1.25rem;
    margin-right: 0.75rem;
    opacity: 0.9;
}

.admin-nav[b-8ng8pumemd]  .rz-panel-menu-item-link.active .rz-panel-menu-item-icon,
.admin-nav[b-8ng8pumemd]  .rz-panel-menu-item-link[aria-current="page"] .rz-panel-menu-item-icon {
    opacity: 1;
}

/* Collapsed sidebar - show only icons */
.admin-sidebar:not(.rz-sidebar-expanded) .admin-nav[b-8ng8pumemd]  .rz-panel-menu-item-text {
    display: none;
}

.admin-sidebar:not(.rz-sidebar-expanded) .admin-nav[b-8ng8pumemd]  .rz-panel-menu-item-icon {
    margin-right: 0;
}

.admin-sidebar:not(.rz-sidebar-expanded) .admin-nav[b-8ng8pumemd]  .rz-panel-menu-item-link {
    justify-content: center;
    padding: 0.75rem;
}

/* Navigation Divider */
.admin-nav-divider[b-8ng8pumemd] {
    margin: 1rem 0.75rem;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Exit Admin Link */
.admin-nav-exit[b-8ng8pumemd]  .rz-panel-menu-item-link {
    color: #64748b;
}

.admin-nav-exit[b-8ng8pumemd]  .rz-panel-menu-item-link:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

/* ================================================
   BODY / CONTENT STYLES
   ================================================ */
.admin-body[b-8ng8pumemd] {
    background: #f1f5f9;
    min-height: calc(100vh - 64px);
}

.admin-content[b-8ng8pumemd] {
    padding: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* ================================================
   RESPONSIVE STYLES
   ================================================ */
@media (max-width: 768px) {
    .admin-brand-text[b-8ng8pumemd] {
        display: none;
    }

    .admin-profile-name[b-8ng8pumemd] {
        display: none;
    }

    .admin-sidebar[b-8ng8pumemd] {
        position: fixed;
        left: 0;
        top: 64px;
        height: calc(100vh - 64px);
        z-index: 999;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .admin-sidebar.rz-sidebar-expanded[b-8ng8pumemd] {
        transform: translateX(0);
    }

    .admin-content[b-8ng8pumemd] {
        padding: 1rem;
    }
}

/* ================================================
   RADZEN COMPONENT OVERRIDES FOR ADMIN
   ================================================ */

/* Card styling in admin context */
[b-8ng8pumemd] .rz-card {
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-radius: 0.75rem;
}

/* Badge colors for admin */
[b-8ng8pumemd] .rz-badge-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

[b-8ng8pumemd] .rz-badge-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

[b-8ng8pumemd] .rz-badge-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

[b-8ng8pumemd] .rz-badge-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Button styling */
[b-8ng8pumemd] .rz-button.rz-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
}

[b-8ng8pumemd] .rz-button.rz-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

/* DataGrid styling */
[b-8ng8pumemd] .rz-datatable {
    border-radius: 0.5rem;
    overflow: hidden;
}

[b-8ng8pumemd] .rz-datatable-thead .rz-datatable-column-title {
    font-weight: 600;
    color: #374151;
}

/* Chart styling */
[b-8ng8pumemd] .rz-chart {
    font-family: inherit;
}
/* /Components/Layout/AdminShell.razor.rz.scp.css */
/* ================================================
   Admin Shell Component Styles
   Combined header, sidebar, and layout styles
   ================================================ */

/* Base Layout */
.admin-layout[b-wpqvnfrjy3] {
    min-height: 100vh;
    background: #f1f5f9;
}

/* Impersonation Active - offset for banner */
.admin-layout.impersonation-active[b-wpqvnfrjy3] {
    margin-top: 44px;
}

.admin-layout.impersonation-active .admin-header[b-wpqvnfrjy3] {
    top: 44px;
}

@media (max-width: 768px) {
    .admin-layout.impersonation-active[b-wpqvnfrjy3] {
        margin-top: 80px;
    }
    
    .admin-layout.impersonation-active .admin-header[b-wpqvnfrjy3] {
        top: 80px;
    }
}

/* ================================================
   HEADER STYLES
   ================================================ */

/* Override Radzen header component */
[b-wpqvnfrjy3] .rz-header {
    background-color: #000000 !important;
    --rz-header-background-color: #000000;
}

.admin-header[b-wpqvnfrjy3] {
    background: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 64px;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.admin-header-content[b-wpqvnfrjy3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 100%;
}

.admin-header-left[b-wpqvnfrjy3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-menu-toggle[b-wpqvnfrjy3] {
    color: #94a3b8 !important;
}

.admin-menu-toggle:hover[b-wpqvnfrjy3] {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.admin-brand[b-wpqvnfrjy3] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: #ffffff;
}

.admin-brand:hover[b-wpqvnfrjy3] {
    text-decoration: none;
    color: #ffffff;
}

.admin-brand-logo[b-wpqvnfrjy3] {
    height: 32px;
    width: 32px;
    filter: hue-rotate(-30deg) saturate(2) brightness(0.9);
}

.admin-brand-text[b-wpqvnfrjy3] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.admin-badge[b-wpqvnfrjy3] {
    margin-left: 0.5rem;
    font-size: 0.65rem !important;
    padding: 0.125rem 0.5rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-header-right[b-wpqvnfrjy3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Notification Bell */
.admin-notification[b-wpqvnfrjy3] {
    position: relative;
}

.notification-btn[b-wpqvnfrjy3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #94a3b8;
}

.notification-btn:hover[b-wpqvnfrjy3] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.notification-btn[b-wpqvnfrjy3]  .rzi {
    font-size: 1.5rem !important;
}

.notification-badge[b-wpqvnfrjy3] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Notifications Dropdown */
.notifications-overlay[b-wpqvnfrjy3] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.notifications-dropdown[b-wpqvnfrjy3] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 320px;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow: hidden;
}

.notifications-header[b-wpqvnfrjy3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    color: #1f2937;
}

.mark-read-btn[b-wpqvnfrjy3] {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 0.75rem;
    cursor: pointer;
}

.mark-read-btn:hover[b-wpqvnfrjy3] {
    text-decoration: underline;
}

.notifications-empty[b-wpqvnfrjy3] {
    padding: 2rem;
    text-align: center;
    color: #9ca3af;
}

.notifications-empty[b-wpqvnfrjy3]  .rzi {
    font-size: 2rem !important;
    margin-bottom: 0.5rem;
}

.notifications-empty p[b-wpqvnfrjy3] {
    margin: 0;
    font-size: 0.875rem;
}

/* User Profile Pill */
.admin-user-pill[b-wpqvnfrjy3] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
    background: rgba(139, 92, 246, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.admin-user-pill:hover[b-wpqvnfrjy3] {
    background: rgba(139, 92, 246, 0.4);
    border-color: rgba(139, 92, 246, 0.5);
}

.user-avatar[b-wpqvnfrjy3] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar img[b-wpqvnfrjy3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials[b-wpqvnfrjy3] {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
}

.user-info[b-wpqvnfrjy3] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.user-name[b-wpqvnfrjy3] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
}

.user-email[b-wpqvnfrjy3] {
    font-size: 0.7rem;
    color: #cbd5e1;
}

.user-dropdown-arrow[b-wpqvnfrjy3]  .rzi {
    font-size: 1.25rem !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease;
}

/* User Dropdown Menu */
.user-menu-overlay[b-wpqvnfrjy3] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.user-dropdown-menu[b-wpqvnfrjy3] {
    position: fixed;
    top: 60px;
    right: 1rem;
    min-width: 200px;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow: hidden;
}

.dropdown-item[b-wpqvnfrjy3] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.dropdown-item:hover[b-wpqvnfrjy3] {
    background: #f3f4f6;
    color: #1f2937;
    text-decoration: none;
}

.dropdown-item[b-wpqvnfrjy3]  .rzi {
    font-size: 1.125rem !important;
    color: #6b7280 !important;
}

.dropdown-divider[b-wpqvnfrjy3] {
    margin: 0.25rem 0;
    border-color: #e5e7eb;
}

.logout-item[b-wpqvnfrjy3] {
    color: #ef4444;
}

.logout-item:hover[b-wpqvnfrjy3] {
    background: #fef2f2;
    color: #dc2626;
}

.logout-item[b-wpqvnfrjy3]  .rzi {
    color: #ef4444 !important;
}

/* ================================================
   BODY STYLES
   ================================================ */
.admin-body[b-wpqvnfrjy3] {
    background: #f1f5f9;
}

.admin-content[b-wpqvnfrjy3] {
    padding: 1.5rem;
    max-width: 1600px;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
    .admin-brand-text[b-wpqvnfrjy3] {
        display: none;
    }
    
    .user-info[b-wpqvnfrjy3] {
        display: none;
    }
    
    .user-dropdown-arrow[b-wpqvnfrjy3] {
        display: none;
    }
    
    .admin-user-pill[b-wpqvnfrjy3] {
        padding: 0.25rem;
        gap: 0;
    }
    
    .admin-header-right[b-wpqvnfrjy3] {
        gap: 0.5rem;
    }
    
    .notifications-dropdown[b-wpqvnfrjy3] {
        position: fixed;
        top: 64px;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-width: 320px;
        margin-left: auto;
    }
}

/* Small phone screens */
@media (max-width: 480px) {
    .admin-header[b-wpqvnfrjy3] {
        padding: 0 0.5rem;
    }
    
    .admin-header-left[b-wpqvnfrjy3] {
        gap: 0.5rem;
    }
    
    .admin-header-right[b-wpqvnfrjy3] {
        gap: 0.375rem;
    }
    
    .notification-btn[b-wpqvnfrjy3],
    .logout-btn[b-wpqvnfrjy3] {
        width: 36px;
        height: 36px;
    }
    
    .notification-btn[b-wpqvnfrjy3]  .rzi,
    .logout-btn[b-wpqvnfrjy3]  .rzi {
        font-size: 1.25rem !important;
    }
    
    .user-avatar[b-wpqvnfrjy3] {
        width: 32px;
        height: 32px;
    }
    
    .avatar-initials[b-wpqvnfrjy3] {
        font-size: 0.75rem;
    }
    
    .notifications-dropdown[b-wpqvnfrjy3] {
        position: fixed;
        top: 64px;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-width: calc(100vw - 1rem);
    }
    
    .notifications-list[b-wpqvnfrjy3] {
        max-height: 300px;
    }
    
    .admin-badge[b-wpqvnfrjy3] {
        font-size: 0.6rem !important;
        padding: 0.1rem 0.375rem !important;
    }
}
/* /Components/Layout/AdminSidebar.razor.rz.scp.css */
/* ================================================
   Admin Sidebar Component Styles
   Icon Sidebar Pattern using Radzen DisplayStyle
   ================================================ */

.admin-sidebar[b-arln3ottzc] {
    background: #1e293b !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-width: 60px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    /* Hide scrollbar but keep functionality */
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.admin-sidebar[b-arln3ottzc]::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Ensure all child elements respect boundaries */
.admin-sidebar *[b-arln3ottzc] {
    box-sizing: border-box;
}

/* Prevent any overflow from panel menus */
.admin-sidebar[b-arln3ottzc]  .rz-panel-menu {
    overflow: hidden !important;
    width: 100% !important;
}

/* Toggle button container at top of sidebar */
.sidebar-toggle-container[b-arln3ottzc] {
    padding: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-toggle-container[b-arln3ottzc]  .rz-sidebar-toggle {
    color: #94a3b8 !important;
    width: 100%;
    justify-content: flex-start;
    margin-inline-end: 0 !important;
    padding: 0 0 0 6px !important;
}

.sidebar-toggle-container[b-arln3ottzc]  .rz-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

/* Navigation Menu */
.admin-nav[b-arln3ottzc] {
    padding: 0.5rem 0;
    flex: 1;
}

/* Expanded state - wider menu items */
.admin-nav[b-arln3ottzc]  .rz-panel-menu-item {
    margin: 0.125rem 0.5rem;
    border-radius: 0.5rem;
}

.admin-nav[b-arln3ottzc]  .rz-panel-menu-item-link {
    padding: 0.75rem 1rem !important;
    color: #94a3b8 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    white-space: nowrap !important;
}

/* Icon-only mode - tighter layout */
.admin-nav[b-arln3ottzc]  .rz-panel-menu[style*="icon"] .rz-panel-menu-item,
.admin-nav[b-arln3ottzc]  .rz-panel-menu-item:has(.rz-panel-menu-item-link:not(:has(.rz-panel-menu-item-text))) {
    margin: 0.125rem 0.25rem;
}

.admin-nav[b-arln3ottzc]  .rz-panel-menu-item-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

/* Active state - matching grey background like content body (#f1f5f9) */
.admin-nav[b-arln3ottzc]  .rz-panel-menu-item-link.active,
.admin-nav[b-arln3ottzc]  .rz-panel-menu-item-link[aria-current="page"],
.admin-nav[b-arln3ottzc]  .rz-panel-menu-item.rz-state-selected > .rz-panel-menu-item-link,
.admin-nav[b-arln3ottzc]  .rz-panel-menu-item-link.rz-state-active,
.admin-nav[b-arln3ottzc]  .rz-navigation-item-active > .rz-panel-menu-item-link,
.admin-nav[b-arln3ottzc]  .rz-panel-menu-item-link[aria-current="true"] {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    font-weight: 600 !important;
}

.admin-nav[b-arln3ottzc]  .rz-panel-menu-item-icon {
    font-size: 1.25rem !important;
    opacity: 0.9;
    flex-shrink: 0;
}

.admin-nav[b-arln3ottzc]  .rz-panel-menu-item-link.active .rz-panel-menu-item-icon,
.admin-nav[b-arln3ottzc]  .rz-panel-menu-item-link[aria-current="page"] .rz-panel-menu-item-icon,
.admin-nav[b-arln3ottzc]  .rz-panel-menu-item.rz-state-selected .rz-panel-menu-item-icon,
.admin-nav[b-arln3ottzc]  .rz-panel-menu-item-link.rz-state-active .rz-panel-menu-item-icon {
    opacity: 1;
    color: #1e293b !important;
}

/* Sidebar Footer */
.sidebar-footer[b-arln3ottzc] {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.5rem;
}

/* Exit Admin Item */
.admin-nav-exit[b-arln3ottzc]  .rz-panel-menu-item-link {
    color: #f87171 !important;
}

.admin-nav-exit[b-arln3ottzc]  .rz-panel-menu-item-link:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #fca5a5 !important;
}
/* /Components/Layout/Footer.razor.rz.scp.css */
/* Footer */
.landing-footer[b-pfp2lkog47] {
    width: 100%;
    background: #1e293b;
    color: white;
    padding: 0;
    box-sizing: border-box;
}

.footer-container[b-pfp2lkog47] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem 0;
}

.footer-content[b-pfp2lkog47] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
}

/* Brand Column */
.footer-brand[b-pfp2lkog47] {
    max-width: 280px;
}

.footer-logo[b-pfp2lkog47] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.logo-icon[b-pfp2lkog47] {
    font-size: 1.5rem;
}

.logo-text[b-pfp2lkog47] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
}

.footer-description[b-pfp2lkog47] {
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.footer-social[b-pfp2lkog47] {
    display: flex;
    gap: 0.75rem;
}

.social-icon[b-pfp2lkog47] {
    width: 36px;
    height: 36px;
    background: #334155;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.2s ease;
}

.social-icon:hover[b-pfp2lkog47] {
    background: #475569;
    color: white;
}

.social-icon[b-pfp2lkog47]  .rzi {
    font-size: 1.1rem !important;
}

/* Footer Columns */
.footer-column[b-pfp2lkog47] {
    
}

.footer-heading[b-pfp2lkog47] {
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1.25rem;
}

.footer-links[b-pfp2lkog47] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li[b-pfp2lkog47] {
    margin-bottom: 0.75rem;
}

.footer-links a[b-pfp2lkog47] {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}

.footer-links a:hover[b-pfp2lkog47] {
    color: white;
}

.footer-links[b-pfp2lkog47]  .rzi {
    font-size: 1rem !important;
    color: #64748b !important;
}

/* Footer Bottom */
.footer-bottom[b-pfp2lkog47] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-top: 1px solid #334155;
}

.footer-copyright[b-pfp2lkog47] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
}

.footer-stats[b-pfp2lkog47] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #94a3b8;
}

.stats-dot[b-pfp2lkog47] {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse-green-dot-b-pfp2lkog47 2s infinite;
}

@keyframes pulse-green-dot-b-pfp2lkog47 {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .footer-content[b-pfp2lkog47] {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-brand[b-pfp2lkog47] {
        grid-column: span 2;
        max-width: 100%;
        text-align: center;
    }

    .footer-logo[b-pfp2lkog47] {
        justify-content: center;
    }

    .footer-social[b-pfp2lkog47] {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .footer-content[b-pfp2lkog47] {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer-brand[b-pfp2lkog47] {
        grid-column: span 1;
    }

    .footer-column[b-pfp2lkog47] {
        text-align: center;
    }

    .footer-links a[b-pfp2lkog47] {
        justify-content: center;
    }

    .footer-bottom[b-pfp2lkog47] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-container[b-pfp2lkog47] {
        padding: 3rem 1rem 0;
    }
}
/* /Components/Layout/ImpersonationBanner.razor.rz.scp.css */
.impersonation-banner[b-6ldc6ad4db] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 44px;
    background: linear-gradient(90deg, #dc3545 0%, #c82333 100%);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10001;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.impersonation-content[b-6ldc6ad4db] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    width: 100%;
    justify-content: center;
}

.impersonation-icon[b-6ldc6ad4db] {
    font-size: 1.25rem !important;
    animation: pulse-b-6ldc6ad4db 2s ease-in-out infinite;
    color: white !important;
}

.impersonation-text[b-6ldc6ad4db] {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

    .impersonation-text strong[b-6ldc6ad4db] {
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

.admin-label[b-6ldc6ad4db],
.viewing-label[b-6ldc6ad4db] {
    opacity: 0.85;
    font-weight: 400;
}

.admin-email[b-6ldc6ad4db] {
    opacity: 0.9;
    font-weight: 500;
}

.arrow-separator[b-6ldc6ad4db] {
    opacity: 0.7;
    margin: 0 4px;
    font-size: 1rem !important;
    color: white !important;
    vertical-align: middle;
}

/* Timer Display */
.impersonation-timer[b-6ldc6ad4db] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
}

.timer-icon[b-6ldc6ad4db] {
    font-size: 1rem !important;
    color: white !important;
}

.timer-value[b-6ldc6ad4db] {
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 45px;
    text-align: center;
}

.impersonation-timer.timer-warning[b-6ldc6ad4db] {
    background: rgba(255, 193, 7, 0.3);
    animation: timer-pulse-b-6ldc6ad4db 1s ease-in-out infinite;
}

.impersonation-timer.timer-warning .timer-value[b-6ldc6ad4db] {
    color: #fff3cd;
}

@keyframes timer-pulse-b-6ldc6ad4db {
    0%, 100% {
        background: rgba(255, 193, 7, 0.3);
    }
    50% {
        background: rgba(255, 193, 7, 0.5);
    }
}

/* Notes Toggle Button */
.impersonation-notes-toggle[b-6ldc6ad4db] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .impersonation-notes-toggle:hover[b-6ldc6ad4db] {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.5);
    }

.notes-icon[b-6ldc6ad4db] {
    font-size: 1rem !important;
    color: white !important;
}

.notes-count[b-6ldc6ad4db] {
    background: #ffc107;
    color: #000;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* End Button */
.impersonation-end-btn[b-6ldc6ad4db] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .impersonation-end-btn:hover:not(:disabled)[b-6ldc6ad4db] {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.6);
        transform: translateY(-1px);
    }

    .impersonation-end-btn:active:not(:disabled)[b-6ldc6ad4db] {
        transform: translateY(0);
    }

    .impersonation-end-btn:disabled[b-6ldc6ad4db] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Notes Panel */
.impersonation-notes-panel[b-6ldc6ad4db] {
    width: 100%;
    max-width: 600px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 16px;
}

.notes-header[b-6ldc6ad4db] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

    .notes-header h4[b-6ldc6ad4db] {
        margin: 0;
        font-size: 0.85rem;
        font-weight: 600;
    }

.notes-hint[b-6ldc6ad4db] {
    font-size: 0.75rem;
    opacity: 0.8;
    font-style: italic;
}

.notes-input-row[b-6ldc6ad4db] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.notes-input[b-6ldc6ad4db] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 0.85rem;
}

    .notes-input[b-6ldc6ad4db]::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

    .notes-input:focus[b-6ldc6ad4db] {
        outline: none;
        border-color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.15);
    }

.notes-add-btn[b-6ldc6ad4db] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

    .notes-add-btn:hover:not(:disabled)[b-6ldc6ad4db] {
        background: rgba(255, 255, 255, 0.3);
    }

    .notes-add-btn:disabled[b-6ldc6ad4db] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Internal Toggle Checkbox */
.internal-toggle[b-6ldc6ad4db] {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .internal-toggle:hover[b-6ldc6ad4db] {
        background: rgba(255, 255, 255, 0.2);
    }

    .internal-toggle input[type="checkbox"][b-6ldc6ad4db] {
        width: 14px;
        height: 14px;
        cursor: pointer;
        accent-color: #fbbf24;
    }

.toggle-icon-internal[b-6ldc6ad4db] {
    font-size: 0.9rem !important;
    color: #fbbf24 !important;
}

.toggle-label[b-6ldc6ad4db] {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.notes-list[b-6ldc6ad4db] {
    max-height: 150px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.note-item[b-6ldc6ad4db] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* Internal note styling */
.note-item.note-internal[b-6ldc6ad4db] {
    background: rgba(251, 191, 36, 0.15);
    border-left: 3px solid #fbbf24;
}

/* Public note styling */
.note-item.note-public[b-6ldc6ad4db] {
    background: rgba(59, 130, 246, 0.15);
    border-left: 3px solid #3b82f6;
}

.note-visibility-icon[b-6ldc6ad4db] {
    font-size: 0.85rem !important;
    flex-shrink: 0;
}

.note-visibility-icon.internal[b-6ldc6ad4db] {
    color: #fbbf24 !important;
}

.note-visibility-icon.public[b-6ldc6ad4db] {
    color: #60a5fa !important;
}

.note-time[b-6ldc6ad4db] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    opacity: 0.8;
    min-width: 55px;
}

.note-text[b-6ldc6ad4db] {
    flex: 1;
    word-break: break-word;
}

.note-remove[b-6ldc6ad4db] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
    line-height: 1;
}

    .note-remove:hover[b-6ldc6ad4db] {
        color: white;
    }

/* Notes Legend */
.notes-legend[b-6ldc6ad4db] {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
    opacity: 0.85;
}

.legend-item[b-6ldc6ad4db] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-icon[b-6ldc6ad4db] {
    font-size: 0.8rem !important;
}

.legend-icon.internal[b-6ldc6ad4db] {
    color: #fbbf24 !important;
}

.legend-icon.public[b-6ldc6ad4db] {
    color: #60a5fa !important;
}

.notes-empty[b-6ldc6ad4db] {
    text-align: center;
    padding: 12px;
    font-size: 0.8rem;
    opacity: 0.7;
    font-style: italic;
}

@keyframes pulse-b-6ldc6ad4db {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .impersonation-banner[b-6ldc6ad4db] {
        min-height: auto;
    }

    .impersonation-content[b-6ldc6ad4db] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 8px 12px;
    }

    /* Hide warning icon on mobile for space savings */
    .impersonation-icon[b-6ldc6ad4db] {
        display: none;
    }

    /* Hide admin info on mobile - just show who we're viewing as */
    .admin-label[b-6ldc6ad4db],
    .admin-email[b-6ldc6ad4db],
    .arrow-separator[b-6ldc6ad4db] {
        display: none;
    }

    .viewing-label[b-6ldc6ad4db] {
        display: inline;
    }

    .impersonation-text[b-6ldc6ad4db] {
        font-size: 0.8rem;
        text-align: center;
        width: 100%;
    }

    .impersonation-timer[b-6ldc6ad4db],
    .impersonation-notes-toggle[b-6ldc6ad4db],
    .impersonation-end-btn[b-6ldc6ad4db] {
        font-size: 0.8rem;
        padding: 4px 12px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-zvr7nsce75] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Offset the entire page when impersonation banner is active */
.page.impersonation-active[b-zvr7nsce75] {
    margin-top: 44px;
}

/* On mobile where banner may wrap, add more padding */
@media (max-width: 768px) {
    .page.impersonation-active[b-zvr7nsce75] {
        margin-top: 90px;
    }
}

main[b-zvr7nsce75] {
    flex: 1;
}

.top-header[b-zvr7nsce75] {
    background-image: linear-gradient(90deg, rgb(5, 39, 103) 0%, #3a0647 100%);
    position: sticky;
    top: 0;
    z-index: 1000;
    opacity: 0.95;
    backdrop-filter: blur(10px);
}

/* When impersonating, the sticky header should stick to the position below the banner */
.page.impersonation-active .top-header[b-zvr7nsce75] {
    position: sticky;
    top: 0;
}

#blazor-error-ui[b-zvr7nsce75] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-zvr7nsce75] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar[b-nb4kc56u4t] {
    padding: 0;
}

.navbar-container[b-nb4kc56u4t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
}

.navbar-brand[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    color: white;
    text-decoration: none;
    font-weight: 700;
}

.navbar-brand:hover[b-nb4kc56u4t] {
    color: rgba(255, 255, 255, 0.9);
}

.brand-logo[b-nb4kc56u4t] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: contain;
}

/* Mobile toggle button */
.navbar-toggler[b-nb4kc56u4t] {
    display: none;
}

.navbar-toggler-label[b-nb4kc56u4t] {
    display: none;
    cursor: pointer;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background-color: transparent;
}

/* Hide mobile header right section on desktop */
.mobile-header-right[b-nb4kc56u4t] {
    display: none;
}

.toggler-icon[b-nb4kc56u4t] {
    display: block;
    width: 24px;
    height: 2px;
    background-color: white;
    position: relative;
}

.toggler-icon[b-nb4kc56u4t]::before,
.toggler-icon[b-nb4kc56u4t]::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: white;
    left: 0;
}

.toggler-icon[b-nb4kc56u4t]::before {
    top: -7px;
}

.toggler-icon[b-nb4kc56u4t]::after {
    top: 7px;
}

/* Navigation menu */
.nav-menu[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    margin-left: 2rem;
}

.nav-links[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-auth[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-link[b-nb4kc56u4t],
[b-nb4kc56u4t] a.nav-link {
    color: white !important;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.nav-link:hover[b-nb4kc56u4t],
[b-nb4kc56u4t] a.nav-link:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.15);
}

/* Active state for anchor links */
.nav-link.active[b-nb4kc56u4t],
a.nav-link.active[b-nb4kc56u4t] {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
    font-weight: 500;
}

/* User greeting container with name and email */
.user-greeting-container[b-nb4kc56u4t] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem;
    padding: 0.4rem 0.85rem;
    text-decoration: none;
}

/* User Profile Circle - positioned LEFT of name/email */
.user-profile-circle[b-nb4kc56u4t] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.user-profile-image[b-nb4kc56u4t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-avatar-img[b-nb4kc56u4t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* User Menu Container and Dropdown */
.user-menu-container[b-nb4kc56u4t] {
    position: relative;
}

.user-menu-trigger[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-menu-trigger:hover[b-nb4kc56u4t] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.user-menu-chevron[b-nb4kc56u4t] {
    color: white;
    transition: transform 0.2s ease;
}

.user-menu-chevron[b-nb4kc56u4t]  .rzi {
    font-size: 1.25rem !important;
}

/* Dropdown Overlay */
.user-dropdown-overlay[b-nb4kc56u4t] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* Dropdown Menu */
.user-dropdown-menu[b-nb4kc56u4t] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 280px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow: hidden;
    animation: dropdownSlideIn-b-nb4kc56u4t 0.15s ease-out;
}

@keyframes dropdownSlideIn-b-nb4kc56u4t {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown User Header */
.dropdown-user-header[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.dropdown-user-avatar[b-nb4kc56u4t] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.dropdown-user-avatar img[b-nb4kc56u4t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dropdown-user-info[b-nb4kc56u4t] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dropdown-user-name[b-nb4kc56u4t] {
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-user-email[b-nb4kc56u4t] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dropdown Divider */
.dropdown-divider[b-nb4kc56u4t] {
    height: 1px;
    background: #e5e7eb;
    margin: 0.25rem 0;
}

/* Dropdown Subscription Header */
.dropdown-subscription-header[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-subscription-header .subscription-plan[b-nb4kc56u4t] {
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
}

.dropdown-subscription-header .subscription-badge[b-nb4kc56u4t] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.dropdown-subscription-header .subscription-badge.active[b-nb4kc56u4t] {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.subscription-plan[b-nb4kc56u4t] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #0369a1;
}

.subscription-badge[b-nb4kc56u4t] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.subscription-badge.active[b-nb4kc56u4t] {
    background: #dcfce7;
    color: #166534;
}

/* Dropdown Items */
.dropdown-item[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.dropdown-item:hover[b-nb4kc56u4t] {
    background: #f3f4f6;
    color: #1f2937;
}

.dropdown-item[b-nb4kc56u4t]  .rzi {
    font-size: 1.25rem !important;
    color: #6b7280;
}

.dropdown-item:hover[b-nb4kc56u4t]  .rzi {
    color: #4f46e5;
}

/* Dropdown Logout */
.dropdown-logout-form[b-nb4kc56u4t] {
    width: 100%;
}

.dropdown-logout[b-nb4kc56u4t] {
    color: #dc2626;
}

.dropdown-logout:hover[b-nb4kc56u4t] {
    background: #fef2f2;
    color: #b91c1c;
}

.dropdown-logout[b-nb4kc56u4t]  .rzi {
    color: #dc2626 !important;
}

/* Dropdown Admin - Red styling to match mobile */
.dropdown-admin[b-nb4kc56u4t] {
    color: #dc2626;
    background: #fef2f2;
}

.dropdown-admin:hover[b-nb4kc56u4t] {
    background: #fee2e2;
    color: #b91c1c;
}

.dropdown-admin[b-nb4kc56u4t]  .rzi {
    color: #dc2626 !important;
}

/* Desktop Header Logout Icon (next to user profile) */
.mobile-header-logout-form[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
}

.mobile-header-logout-form .mobile-header-dropdown-item[b-nb4kc56u4t] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mobile-header-logout-form .mobile-logout-icon-wrapper[b-nb4kc56u4t] {
    background: none;
    box-shadow: none;
    width: auto;
    height: auto;
}

.mobile-header-logout-form .mobile-header-dropdown-logout[b-nb4kc56u4t]  .rzi {
    color: #dc2626 !important;
    font-size: 1.5rem !important;
}

.mobile-header-logout-form .mobile-header-dropdown-logout:hover[b-nb4kc56u4t]  .rzi {
    color: #b91c1c !important;
    transform: scale(1.1);
}

/* User info text - stacked vertically, appears AFTER circle */
.user-info-text[b-nb4kc56u4t] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.user-info-text .user-firstname[b-nb4kc56u4t],
.user-firstname[b-nb4kc56u4t] {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.user-info-text .user-email[b-nb4kc56u4t],
.user-email[b-nb4kc56u4t] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.user-email[b-nb4kc56u4t] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.user-greeting[b-nb4kc56u4t] {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.5rem;
    white-space: nowrap;
}

/* Mobile user email */
.mobile-user-email[b-nb4kc56u4t] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.15rem;
}

.btn-link[b-nb4kc56u4t] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.btn-link:hover[b-nb4kc56u4t] {
    color: white;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* Auth button styles */
.btn-outline[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-outline {
    border: 1px solid white !important;
    background-color: transparent !important;
    color: white !important;
    border-radius: 4px;
}

.btn-outline:hover[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.btn-solid[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-solid {
    background-color: white !important;
    color: #3a0647 !important;
    border: 1px solid white !important;
    border-radius: 4px;
    font-weight: 500;
}

.btn-solid:hover[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-solid:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Danger button (red) for desktop */
.btn-danger[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-danger {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-danger:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 3px 8px rgba(239, 68, 68, 0.4);
}

/* Success button (green) for desktop */
.btn-success[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
}

.btn-success:hover[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-success:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    box-shadow: 0 3px 8px rgba(34, 197, 94, 0.4);
}

/* Hide mobile overlay on desktop */
.mobile-nav-overlay[b-nb4kc56u4t] {
    display: none;
}

/* Found a Pet Button - Eye-catching gradient animation */
.btn-found-pet[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-found-pet {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53, #ff6b6b) !important;
    background-size: 200% 200% !important;
    color: white !important;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: 25px;
    border: none !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: gradient-pulse-b-nb4kc56u4t 2s ease infinite;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;

/* Subscribe Button - Premium gold gradient */
.btn-subscribe,
::deep a.btn-subscribe {
    background: linear-gradient(135deg, #f59e0b, #eab308, #f59e0b) !important;
    background-size: 200% 200% !important;
    color: white !important;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: none !important;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    animation: gradient-pulse-b-nb4kc56u4t 3s ease infinite;
    box-shadow: 0 3px 12px rgba(245, 158, 11, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.85rem;
}

.btn-subscribe:hover[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-subscribe:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(245, 158, 11, 0.5);
}

.btn-subscribe[b-nb4kc56u4t]  .rzi {
    font-size: 1rem !important;
    color: white !important;
}
    text-decoration: none;[b-nb4kc56u4t]
}

.btn-found-pet:hover[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-found-pet:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
    color: white !important;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53, #ff6b6b) !important;
}

@keyframes gradient-pulse-b-nb4kc56u4t {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Register Pet Button - Purple gradient with camera icon */
.btn-register-pet[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-register-pet {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: 25px;
    border: none !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-register-pet:hover[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-register-pet:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    color: white !important;
}

.btn-register-pet[b-nb4kc56u4t]  .rzi {
    font-size: 1.1rem !important;
    color: white !important;
}

/* Login Button - Circular icon style like logout */
.btn-login[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-login {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
    font-size: 0 !important; /* Hide text, show only icon */
}

.btn-login:hover[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-login:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.6);
    color: white !important;
}

.btn-login[b-nb4kc56u4t]  .rzi {
    font-size: 1.3rem !important;
    color: white !important;
}

/* Login Button - Text link style for non-logged-in users */
.btn-login-text[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-login-text {
    color: white !important;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: 25px;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-login-text:hover[b-nb4kc56u4t],
[b-nb4kc56u4t] a.btn-login-text:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: white !important;
    color: white !important;
}

/* Red Power Off Logout Button */
.btn-logout-icon[b-nb4kc56u4t] {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #dc3545;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.btn-logout-icon:hover[b-nb4kc56u4t] {
    background-color: #c82333;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5);
}

.btn-logout-icon[b-nb4kc56u4t]  .rzi {
    font-size: 1.2rem;
}

/* Mobile styles */
@media (max-width: 1100px) {
    .navbar-container[b-nb4kc56u4t] {
        padding: 0.5rem 0.75rem;
    }
    
    .navbar-brand[b-nb4kc56u4t] {
        font-size: 1.35rem;
        gap: 0.35rem;
    }
    
    .brand-logo[b-nb4kc56u4t] {
        width: 36px;
        height: 36px;
    }
    
    /* Mobile Header Right Section - single row */
    .mobile-header-right[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
    }
    
    /* Style Join/Login links for mobile */
    .mobile-header-right .nav-link[b-nb4kc56u4t] {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
        white-space: nowrap;
    }

    /* Hide Register Pet and Login buttons on mobile */
    .btn-register-pet[b-nb4kc56u4t],
    [b-nb4kc56u4t] a.btn-register-pet,
    .btn-login[b-nb4kc56u4t],
    [b-nb4kc56u4t] a.btn-login {
        display: none !important;
    }

    .mobile-header-user-container[b-nb4kc56u4t] {
        position: relative;
    }

    .mobile-header-user-trigger[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
    }

    .mobile-header-user-circle[b-nb4kc56u4t] {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea, #764ba2);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 0.7rem;
        border: 2px solid rgba(255, 255, 255, 0.3);
        transition: all 0.2s ease;
        overflow: hidden;
    }

    .mobile-header-user-image[b-nb4kc56u4t] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .mobile-header-user-trigger:hover .mobile-header-user-circle[b-nb4kc56u4t] {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    }

    /* Mobile Header Dropdown Overlay */
    .mobile-header-dropdown-overlay[b-nb4kc56u4t] {
        position: fixed;
        inset: 0;
        z-index: 1001;
    }

    /* Mobile Header Dropdown */
    .mobile-header-dropdown[b-nb4kc56u4t] {
        position: absolute;
        top: calc(100% + 0.5rem);
        right: 0;
        min-width: 260px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1002;
        overflow: hidden;
        animation: mobileHeaderDropdownSlide-b-nb4kc56u4t 0.15s ease-out;
    }

    @keyframes mobileHeaderDropdownSlide-b-nb4kc56u4t {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Mobile Dropdown Subscription Header */
    .mobile-dropdown-subscription-header[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-dropdown-subscription-header .subscription-plan[b-nb4kc56u4t] {
        font-weight: 600;
        font-size: 0.875rem;
        color: white;
    }

    .mobile-dropdown-subscription-header .subscription-badge[b-nb4kc56u4t] {
        display: inline-flex;
        align-items: center;
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    .mobile-dropdown-subscription-header .subscription-badge.active[b-nb4kc56u4t] {
        background: rgba(34, 197, 94, 0.2);
        color: #86efac;
        border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .mobile-header-dropdown-header[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .mobile-header-dropdown-avatar[b-nb4kc56u4t] {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 0.95rem;
        border: 2px solid rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }

    .mobile-header-dropdown-image[b-nb4kc56u4t] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .mobile-header-dropdown-info[b-nb4kc56u4t] {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .mobile-header-dropdown-name[b-nb4kc56u4t] {
        color: white;
        font-weight: 600;
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-header-dropdown-email[b-nb4kc56u4t] {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-header-dropdown-divider[b-nb4kc56u4t] {
        height: 1px;
        background: #e5e7eb;
        margin: 0.25rem 0;
    }

    .mobile-header-dropdown-item[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        color: #374151;
        text-decoration: none;
        font-size: 0.875rem;
        transition: all 0.15s ease;
        cursor: pointer;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    .mobile-header-dropdown-item:hover[b-nb4kc56u4t] {
        background: #f3f4f6;
        color: #1f2937;
    }

    .mobile-header-dropdown-item[b-nb4kc56u4t]  .rzi {
        font-size: 1.2rem !important;
        color: #6b7280;
    }

    .mobile-header-dropdown-item:hover[b-nb4kc56u4t]  .rzi {
        color: #4f46e5;
    }

    .mobile-header-logout-form[b-nb4kc56u4t] {
        width: 100%;
    }

    .mobile-header-dropdown-logout[b-nb4kc56u4t] {
        color: #dc2626;
    }

    .mobile-header-dropdown-logout:hover[b-nb4kc56u4t] {
        background: #fef2f2;
        color: #b91c1c;
    }

    .mobile-header-dropdown-logout[b-nb4kc56u4t]  .rzi {
        color: white !important;
        font-size: 0.85rem !important;
    }

    /* Red power icon wrapper for mobile logout */
    .mobile-logout-icon-wrapper[b-nb4kc56u4t] {
        width: 24px;
        height: 24px;
        min-width: 24px;
        border-radius: 50%;
        background-color: #dc2626;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
    }

    .mobile-header-dropdown-logout:hover .mobile-logout-icon-wrapper[b-nb4kc56u4t] {
        background-color: #b91c1c;
        transform: scale(1.05);
    }

    .mobile-header-dropdown-admin[b-nb4kc56u4t] {
        color: #dc2626;
        background: #fef2f2;
    }

    .mobile-header-dropdown-admin:hover[b-nb4kc56u4t] {
        background: #fee2e2;
        color: #b91c1c;
    }

    .mobile-header-dropdown-admin[b-nb4kc56u4t]  .rzi {
        color: #dc2626 !important;
    }

    .navbar-toggler-label[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        justify-content: center;
        order: 3;
    }

    /* Hide desktop nav on mobile */
    .nav-desktop[b-nb4kc56u4t] {
        display: none !important;
    }

    /* Mobile Overlay */
    .mobile-nav-overlay[b-nb4kc56u4t] {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        cursor: pointer;
    }

    .navbar-toggler:checked ~ .mobile-nav-overlay[b-nb4kc56u4t] {
        display: block;
    }

    /* Mobile Panel */
    .mobile-nav-panel[b-nb4kc56u4t] {
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: white;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
        animation: slideIn-b-nb4kc56u4t 0.3s ease;
        cursor: default;
        z-index: 1001;
    }

    @keyframes slideIn-b-nb4kc56u4t {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0);
        }
    }

    /* Mobile Header */
    .mobile-nav-header[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.5rem;
    }

    .mobile-brand[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.75rem;
        font-weight: 700;
        color: #3b82f6;
        text-decoration: none;
    }

    .mobile-brand span[b-nb4kc56u4t] {
        color: #1a202c;
    }

    .mobile-close-btn[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        cursor: pointer;
        color: #64748b;
        transition: color 0.2s ease;
    }

    .mobile-close-btn:hover[b-nb4kc56u4t] {
        color: #1a202c;
    }

    .mobile-close-btn[b-nb4kc56u4t]  .rzi {
        font-size: 1.5rem !important;
    }

    /* Mobile Divider */
    .mobile-nav-divider[b-nb4kc56u4t] {
        height: 1px;
        background: #e2e8f0;
        margin: 0 1.5rem;
    }

    /* Mobile Navigation Links */
    .mobile-nav-links[b-nb4kc56u4t] {
        padding: 1rem 0;
    }

    /* Mobile Action Buttons */
    .mobile-nav-actions[b-nb4kc56u4t] {
        padding: 1rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .mobile-action-btn[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.6rem 1rem;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .mobile-action-btn[b-nb4kc56u4t]  .rzi {
        font-size: 1.1rem !important;
    }

    .mobile-btn-outline[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #5b7ddb 0%, #8b5cf6 100%);
        color: white;
        border: none;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
    }

    .mobile-btn-outline:hover[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #4a6bc9 0%, #7c3aed 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    }

    .mobile-btn-primary[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #5b7ddb 0%, #8b5cf6 100%);
        color: white;
        border: none;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
    }

    .mobile-btn-primary:hover[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #4a6bc9 0%, #7c3aed 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    }

    .mobile-btn-green[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
        border: none;
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
    }

    .mobile-btn-green:hover[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    }

    .mobile-btn-purple[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        color: white;
        border: none;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
    }

    .mobile-btn-purple:hover[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    }

    /* Mobile Auth Section */
    .mobile-auth-section[b-nb4kc56u4t] {
        padding: 1rem 1.5rem;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }

    .mobile-user-info[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 0.75rem;
    }

    .mobile-user-avatar[b-nb4kc56u4t] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #5b7ddb 0%, #8b5cf6 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
    }

    .mobile-user-avatar[b-nb4kc56u4t]  .rzi {
        font-size: 1.5rem !important;
    }

    .mobile-user-details[b-nb4kc56u4t] {
        display: flex;
        flex-direction: column;
    }

    .mobile-user-name[b-nb4kc56u4t] {
        font-weight: 600;
        font-size: 1rem;
        color: #1a202c;
    }

    .mobile-user-label[b-nb4kc56u4t] {
        font-size: 0.85rem;
        color: #64748b;
    }

    .mobile-auth-buttons[b-nb4kc56u4t] {
        display: flex;
        gap: 0.5rem;
    }

    .mobile-auth-buttons.mobile-auth-guest[b-nb4kc56u4t] {
        flex-direction: row;
    }

    .mobile-auth-btn[b-nb4kc56u4t] {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
        border: none;
        cursor: pointer;
    }

    .mobile-auth-btn[b-nb4kc56u4t]  .rzi {
        font-size: 1rem !important;
    }

    .mobile-auth-register[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #5b7ddb 0%, #8b5cf6 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
    }

    .mobile-auth-register:hover[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #4a6bc9 0%, #7c3aed 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    }

    .mobile-auth-join[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #5b7ddb 0%, #8b5cf6 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
        flex: 1;
    }

    .mobile-auth-join:hover[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #4a6bc9 0%, #7c3aed 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    }

    .mobile-auth-login[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
        flex: 1;
    }

    .mobile-auth-login:hover[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    }

    .mobile-auth-actions[b-nb4kc56u4t] {
        display: flex;
        gap: 0.75rem;
        margin-top: 0.5rem;
    }

    /* Guest action links - styled like regular nav links */
    .mobile-guest-actions[b-nb4kc56u4t] {
        padding: 0.5rem;
    }

    .mobile-guest-link[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
        border-radius: 8px;
        transition: all 0.15s ease;
    }

    .mobile-guest-link[b-nb4kc56u4t]  .rzi {
        font-size: 1.25rem !important;
    }

    .mobile-guest-join[b-nb4kc56u4t] {
        color: #7c3aed;
    }

    .mobile-guest-join:hover[b-nb4kc56u4t] {
        background: #f8fafc;
        color: #6d28d9;
    }

    .mobile-guest-join[b-nb4kc56u4t]  .rzi {
        color: #7c3aed !important;
    }

    .mobile-guest-login[b-nb4kc56u4t] {
        color: #16a34a;
    }

    .mobile-guest-login:hover[b-nb4kc56u4t] {
        background: #f8fafc;
        color: #15803d;
    }

    .mobile-guest-login[b-nb4kc56u4t]  .rzi {
        color: #16a34a !important;
    }

    .mobile-auth-found-pet[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #ff6b6b, #ff8e53, #ff6b6b) !important;
        background-size: 200% 200% !important;
        color: white;
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
        margin-bottom: 0.5rem;
        animation: gradient-pulse-b-nb4kc56u4t 2s ease infinite;
        font-weight: 600;
    }

    .mobile-auth-found-pet:hover[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #ff5252, #ff7b42, #ff5252) !important;
        background-size: 200% 200% !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
    }

    .mobile-auth-dashboard[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #5b7ddb 0%, #8b5cf6 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
    }

    .mobile-auth-dashboard:hover[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #4a6bc9 0%, #7c3aed 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    }

    .mobile-auth-logout[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
        border: none;
    }

    .mobile-auth-logout:hover[b-nb4kc56u4t] {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }

    .mobile-logout-form[b-nb4kc56u4t] {
        flex: 1;
        display: flex;
    }

    .mobile-logout-form .mobile-auth-btn[b-nb4kc56u4t] {
        width: 100%;
    }

    /* Enhanced Nav Links with Icons */
    .mobile-nav-link[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
        font-weight: 500;
        color: #374151;
        text-decoration: none;
        transition: all 0.2s ease;
        border-left: 3px solid transparent;
    }

    .mobile-nav-link[b-nb4kc56u4t]  .rzi {
        font-size: 1.1rem !important;
        color: #64748b;
    }

    .mobile-nav-link:hover[b-nb4kc56u4t] {
        background: #f8fafc;
        border-left-color: #3b82f6;
    }

    .mobile-nav-link:hover[b-nb4kc56u4t]  .rzi {
        color: #3b82f6;
    }

    .mobile-nav-link.active[b-nb4kc56u4t] {
        color: #3b82f6;
        background: linear-gradient(90deg, #eff6ff 0%, transparent 100%);
        border-left-color: #3b82f6;
    }

    .mobile-nav-link.active[b-nb4kc56u4t]  .rzi {
        color: #3b82f6;
    }

    /* Mobile User Info Section (always visible) */
    .mobile-user-info-section[b-nb4kc56u4t] {
        width: 100%;
    }

    .mobile-user-info-row[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .mobile-user-info-section .mobile-user-avatar[b-nb4kc56u4t] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 0.9rem;
        border: 2px solid rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }

    .mobile-user-avatar-image[b-nb4kc56u4t] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .mobile-user-info-section .mobile-user-details[b-nb4kc56u4t] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .mobile-user-info-section .mobile-user-name[b-nb4kc56u4t] {
        color: white;
        font-weight: 600;
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-user-info-section .mobile-user-email[b-nb4kc56u4t] {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Mobile User Dropdown */
    .mobile-user-dropdown[b-nb4kc56u4t] {
        display: flex;
        flex-direction: column;
        margin-top: 0.5rem;
        padding: 0.5rem;
        background: #f8fafc;
        border-radius: 12px;
        animation: mobileDropdownSlide-b-nb4kc56u4t 0.2s ease-out;
    }

    @keyframes mobileDropdownSlide-b-nb4kc56u4t {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .mobile-dropdown-item[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        color: #374151;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
        border-radius: 8px;
        transition: all 0.15s ease;
        cursor: pointer;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    .mobile-dropdown-item:hover[b-nb4kc56u4t] {
        background: white;
        color: #1f2937;
    }

    .mobile-dropdown-item[b-nb4kc56u4t]  .rzi {
        font-size: 1.25rem !important;
        color: #6b7280;
    }

    .mobile-dropdown-item:hover[b-nb4kc56u4t]  .rzi {
        color: #4f46e5;
    }

    .mobile-dropdown-divider[b-nb4kc56u4t] {
        height: 1px;
        background: #e5e7eb;
        margin: 0.25rem 0;
    }

    .mobile-dropdown-logout[b-nb4kc56u4t] {
        color: #dc2626;
    }

    .mobile-dropdown-logout:hover[b-nb4kc56u4t] {
        background: #fef2f2;
        color: #b91c1c;
    }

    .mobile-dropdown-logout[b-nb4kc56u4t]  .rzi {
        color: #dc2626 !important;
    }

    .mobile-dropdown-admin[b-nb4kc56u4t] {
        color: #dc2626;
        background: #fef2f2;
    }

    .mobile-dropdown-admin:hover[b-nb4kc56u4t] {
        background: #fee2e2;
        color: #b91c1c;
    }

    .mobile-dropdown-admin[b-nb4kc56u4t]  .rzi {
        color: #dc2626 !important;
    }
}

/* ========================================
   ALERTS BELL ICON - DESKTOP STYLES
   ======================================== */

.alerts-menu-container[b-nb4kc56u4t] {
    position: relative;
    margin-right: 0.75rem;
}

.alerts-menu-trigger[b-nb4kc56u4t] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.alerts-menu-trigger:hover[b-nb4kc56u4t] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.alerts-bell-icon[b-nb4kc56u4t]  .rzi {
    font-size: 1.4rem !important;
    color: white !important;
}

.alerts-badge[b-nb4kc56u4t] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: linear-gradient(135deg, #ff6b6b, #ef4444);
    color: white !important;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
    animation: pulse-badge-b-nb4kc56u4t 2s ease-in-out infinite;
}

@keyframes pulse-badge-b-nb4kc56u4t {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Alerts Dropdown Overlay */
.alerts-dropdown-overlay[b-nb4kc56u4t] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* Alerts Dropdown Menu */
.alerts-dropdown-menu[b-nb4kc56u4t] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow: hidden;
    animation: alertsDropdownSlide-b-nb4kc56u4t 0.2s ease-out;
}


@keyframes alertsDropdownSlide-b-nb4kc56u4t {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alerts-dropdown-header[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


.alerts-dropdown-header h3[b-nb4kc56u4t] {
    margin: 0;
    color: white;
    font-size: 1rem;
    font-weight: 600;
}

.alerts-header-actions[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alerts-view-all-link[b-nb4kc56u4t] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.alerts-view-all-link:hover[b-nb4kc56u4t] {
    color: white;
    text-decoration: underline;
}

.alerts-clear-btn[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.alerts-clear-btn:hover[b-nb4kc56u4t] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.alerts-clear-btn[b-nb4kc56u4t]  .rzi {
    font-size: 1rem !important;
}

.alerts-view-all[b-nb4kc56u4t] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.alerts-view-all:hover[b-nb4kc56u4t] {
    color: white;
    text-decoration: underline;
}

.alerts-dropdown-divider[b-nb4kc56u4t] {
    height: 1px;
    background: #e5e7eb;
}

.alerts-dropdown-list[b-nb4kc56u4t] {
    max-height: 380px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.alerts-dropdown-item[b-nb4kc56u4t] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    transition: background 0.15s ease;
    cursor: default;
    position: relative;
}

/* Unread notification styles */
.alerts-item-unread[b-nb4kc56u4t] {
    background: linear-gradient(90deg, #eff6ff 0%, #ffffff 100%);
}

.alerts-unread-dot[b-nb4kc56u4t] {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
}

.alerts-dropdown-item:hover[b-nb4kc56u4t] {
    background: #f9fafb;
}

.alerts-item-icon[b-nb4kc56u4t] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alerts-item-icon[b-nb4kc56u4t]  .rzi {
    font-size: 1.1rem !important;
}

/* Activity icon colors */
.activity-icon-join[b-nb4kc56u4t] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #059669;
}

.activity-icon-pet[b-nb4kc56u4t] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #2563eb;
}

.activity-icon-scan[b-nb4kc56u4t] {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #4f46e5;
}

.activity-icon-alert[b-nb4kc56u4t] {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #dc2626;
}

.activity-icon-found[b-nb4kc56u4t] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #059669;
}

.activity-icon-help[b-nb4kc56u4t] {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    color: #db2777;
}

.activity-icon-sub[b-nb4kc56u4t] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #d97706;
}

.activity-icon-info[b-nb4kc56u4t] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
}

.alerts-item-content[b-nb4kc56u4t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.alerts-item-text[b-nb4kc56u4t] {
    font-size: 0.875rem;
    color: #1f2937;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.alerts-item-time[b-nb4kc56u4t] {
    font-size: 0.75rem;
    color: #3b82f6;
    font-weight: 500;
}

.alerts-item-ip[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: #9ca3af;
}

.alerts-item-ip[b-nb4kc56u4t]  .rzi {
    font-size: 0.7rem !important;
}

.alerts-empty-state[b-nb4kc56u4t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: #6b7280;
    gap: 0.5rem;
}

.alerts-empty-state[b-nb4kc56u4t]  .rzi {
    font-size: 2rem !important;
    color: #22c55e;
}

.alerts-empty-state span[b-nb4kc56u4t] {
    font-size: 0.9rem;
}

/* ========================================
   ALERTS BELL ICON - MOBILE STYLES
   ======================================== */

@media (max-width: 1100px) {
    .alerts-menu-container[b-nb4kc56u4t] {
        display: none;
    }

    .mobile-alerts-container[b-nb4kc56u4t] {
        position: relative;
    }

    .mobile-alerts-trigger[b-nb4kc56u4t] {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-alerts-trigger:hover[b-nb4kc56u4t] {
        background: rgba(255, 255, 255, 0.2);
    }

    .mobile-alerts-bell-icon[b-nb4kc56u4t]  .rzi {
        font-size: 1.2rem !important;
        color: white !important;
    }

    .mobile-alerts-badge[b-nb4kc56u4t] {
        position: absolute;
        top: -3px;
        right: -3px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: linear-gradient(135deg, #ff6b6b, #ef4444);
        color: white;
        font-size: 0.65rem;
        font-weight: 700;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(239, 68, 68, 0.5);
    }

    /* Mobile Alerts Overlay */
    .mobile-alerts-overlay[b-nb4kc56u4t] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1001;
    }

    /* Mobile Alerts Dropdown - Side Panel Style */
    .mobile-alerts-dropdown[b-nb4kc56u4t] {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 360px;
        height: 100vh;
        background: white;
        z-index: 1002;
        display: flex;
        flex-direction: column;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        animation: mobileAlertsSlideIn-b-nb4kc56u4t 0.3s ease-out;
    }

    @keyframes mobileAlertsSlideIn-b-nb4kc56u4t {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(0);
        }
    }

    .mobile-alerts-header[b-nb4kc56u4t] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 1.25rem 1.5rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .mobile-alerts-header-left[b-nb4kc56u4t] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .mobile-alerts-header h3[b-nb4kc56u4t] {
        margin: 0;
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .mobile-alerts-header-actions[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .mobile-alerts-view-link[b-nb4kc56u4t] {
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.8rem;
        text-decoration: none;
        font-weight: 500;
    }

    .mobile-alerts-view-link:hover[b-nb4kc56u4t] {
        color: white;
        text-decoration: underline;
    }

    .mobile-alerts-clear-btn[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        padding: 0;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        border-radius: 50%;
        color: white;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-alerts-clear-btn:hover[b-nb4kc56u4t] {
        background: rgba(255, 255, 255, 0.3);
    }

    .mobile-alerts-clear-btn[b-nb4kc56u4t]  .rzi {
        font-size: 0.9rem !important;
    }

    .mobile-alerts-close[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        border-radius: 50%;
        color: white;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .mobile-alerts-close:hover[b-nb4kc56u4t] {
        background: rgba(255, 255, 255, 0.3);
    }

    .mobile-alerts-close[b-nb4kc56u4t]  .rzi {
        font-size: 1.25rem !important;
    }

    .mobile-alerts-list[b-nb4kc56u4t] {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem 0;
    }

    .mobile-alerts-item[b-nb4kc56u4t] {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #f3f4f6;
        position: relative;
    }

    .mobile-alerts-item:last-child[b-nb4kc56u4t] {
        border-bottom: none;
    }

    /* Mobile unread notification styles */
    .mobile-alerts-item-unread[b-nb4kc56u4t] {
        background: linear-gradient(90deg, #eff6ff 0%, #ffffff 100%);
    }

    .mobile-alerts-unread-dot[b-nb4kc56u4t] {
        position: absolute;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        border-radius: 50%;
        box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
    }

    .mobile-alerts-item-icon[b-nb4kc56u4t] {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-alerts-item-icon[b-nb4kc56u4t]  .rzi {
        font-size: 1.2rem !important;
    }

    .mobile-alerts-item-content[b-nb4kc56u4t] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .mobile-alerts-item-text[b-nb4kc56u4t] {
        font-size: 0.9rem;
        color: #1f2937;
        line-height: 1.4;
    }

    .mobile-alerts-item-time[b-nb4kc56u4t] {
        font-size: 0.8rem;
        color: #3b82f6;
        font-weight: 500;
    }

    .mobile-alerts-empty[b-nb4kc56u4t] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 1.5rem;
        color: #6b7280;
        gap: 0.75rem;
    }

    .mobile-alerts-empty[b-nb4kc56u4t]  .rzi {
        font-size: 2.5rem !important;
        color: #22c55e;
    }

    .mobile-alerts-footer[b-nb4kc56u4t] {
        padding: 1rem 1.25rem;
        border-top: 1px solid #e5e7eb;
        background: #f9fafb;
    }

    .mobile-alerts-view-all[b-nb4kc56u4t] {
        display: block;
        width: 100%;
        padding: 0.75rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-size: 0.9rem;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        border-radius: 10px;
        transition: all 0.2s ease;
    }

    .mobile-alerts-view-all:hover[b-nb4kc56u4t] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    /* Mobile Load More Styles */
    .mobile-alerts-loading[b-nb4kc56u4t] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
    }

    .mobile-alerts-load-more[b-nb4kc56u4t] {
        display: block;
        width: calc(100% - 2rem);
        margin: 0.75rem 1rem 1rem;
        padding: 0.75rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-size: 0.9rem;
        font-weight: 600;
        text-align: center;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-alerts-load-more:hover[b-nb4kc56u4t] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
}

/* ========================================
   LOAD MORE BUTTON - DESKTOP STYLES
   ======================================== */

.alerts-loading-more[b-nb4kc56u4t] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.alerts-load-more-btn[b-nb4kc56u4t] {
    display: block;
    width: calc(100% - 2rem);
    margin: 0.5rem 1rem 1rem;
    padding: 0.625rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.alerts-load-more-btn:hover[b-nb4kc56u4t] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.alerts-load-more-btn:active[b-nb4kc56u4t] {
    transform: translateY(0);
}

/* ========================================
   EXTRA SMALL SCREENS (320px - 400px)
   ======================================== */
@media (max-width: 400px) {
    .navbar-container[b-nb4kc56u4t] {
        padding: 0.35rem 0.5rem;
    }
    
    .navbar-brand[b-nb4kc56u4t] {
        font-size: 1.1rem;
        gap: 0.25rem;
    }
    
    .brand-logo[b-nb4kc56u4t] {
        width: 28px;
        height: 28px;
    }
    
    .mobile-header-right[b-nb4kc56u4t] {
        gap: 0.3rem;
    }
    
    .mobile-header-right .nav-link[b-nb4kc56u4t] {
        font-size: 0.65rem;
        padding: 0.25rem 0.4rem;
    }
    
    .mobile-header-user-circle[b-nb4kc56u4t] {
        width: 30px;
        height: 30px;
        font-size: 0.55rem;
    }
    
    .mobile-alerts-trigger[b-nb4kc56u4t] {
        width: 30px;
        height: 30px;
    }
    
    .mobile-alerts-bell-icon[b-nb4kc56u4t]  .rzi {
        font-size: 0.95rem !important;
    }
    
    .navbar-toggler-label[b-nb4kc56u4t] {
        padding: 0.3rem;
    }
    
    .toggler-icon[b-nb4kc56u4t] {
        width: 18px;
        height: 2px;
    }
    
    .toggler-icon[b-nb4kc56u4t]::before,
    .toggler-icon[b-nb4kc56u4t]::after {
        width: 18px;
    }
    
    .toggler-icon[b-nb4kc56u4t]::before {
        top: -5px;
    }
    
    .toggler-icon[b-nb4kc56u4t]::after {
        top: 5px;
    }
}
/* /Components/Pages/Admin/AiHub.razor.rz.scp.css */
/* ================================================
   AI Hub Page Styles
   PetFindrz Admin Portal
   ================================================ */

.ai-hub-page[b-7ve9apo2xj] {
    min-height: 100%;
}

/* ================================================
   PAGE HEADER
   ================================================ */
.page-header[b-7ve9apo2xj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-info[b-7ve9apo2xj] {
    flex: 1;
}

.page-title[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.title-icon[b-7ve9apo2xj]  .rzi {
    font-size: 1.75rem !important;
    color: #8b5cf6 !important;
}

.page-subtitle[b-7ve9apo2xj] {
    color: #64748b;
    margin: 0.25rem 0 0 0;
    font-size: 0.9375rem;
}

.header-actions[b-7ve9apo2xj] {
    display: flex;
    gap: 0.75rem;
}

/* ================================================
   AI STATUS BANNER
   ================================================ */
.ai-status-banner[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 0.625rem;
    margin-bottom: 1.5rem;
}

.ai-status-banner.status-healthy[b-7ve9apo2xj] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
}

.ai-status-banner.status-warning[b-7ve9apo2xj] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
}

.ai-status-banner .status-icon[b-7ve9apo2xj] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-healthy .status-icon[b-7ve9apo2xj] {
    background: #22c55e;
}

.status-warning .status-icon[b-7ve9apo2xj] {
    background: #f59e0b;
}

.status-icon[b-7ve9apo2xj]  .rzi {
    font-size: 1.5rem !important;
    color: #ffffff !important;
}

.status-content[b-7ve9apo2xj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.status-title[b-7ve9apo2xj] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.status-detail[b-7ve9apo2xj] {
    font-size: 0.875rem;
    color: #64748b;
}

.status-meta[b-7ve9apo2xj] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.health-badge[b-7ve9apo2xj] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
}

.health-badge.badge-success[b-7ve9apo2xj] {
    background: #dcfce7;
    color: #166534;
}

.health-badge.badge-warning[b-7ve9apo2xj] {
    background: #fef3c7;
    color: #92400e;
}

.last-check[b-7ve9apo2xj] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ================================================
   AI STATS GRID
   ================================================ */
.ai-stats-grid[b-7ve9apo2xj] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ai-stat-card[b-7ve9apo2xj] {
    background: #ffffff;
    border-radius: 0.625rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.ai-stat-card:hover[b-7ve9apo2xj] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.ai-stat-icon[b-7ve9apo2xj] {
    width: 44px;
    height: 44px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-stat-icon[b-7ve9apo2xj]  .rzi {
    font-size: 1.375rem !important;
    color: #ffffff !important;
}

.stat-icon-analyses[b-7ve9apo2xj] { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
.stat-icon-register[b-7ve9apo2xj] { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.stat-icon-found[b-7ve9apo2xj] { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.stat-icon-success[b-7ve9apo2xj] { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.stat-icon-confidence[b-7ve9apo2xj] { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.stat-icon-tokens[b-7ve9apo2xj] { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }

.ai-stat-content[b-7ve9apo2xj] {
    display: flex;
    flex-direction: column;
}

.ai-stat-value[b-7ve9apo2xj] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.ai-stat-label[b-7ve9apo2xj] {
    font-size: 0.6875rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ================================================
   AI SECTION
   ================================================ */
.ai-section[b-7ve9apo2xj] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.ai-section-header[b-7ve9apo2xj] {
    margin-bottom: 1.25rem;
}

.ai-section-header h4[b-7ve9apo2xj] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-section-header h4[b-7ve9apo2xj]  .rzi {
    font-size: 1.25rem !important;
    color: #3b82f6 !important;
}

.ai-section-header p[b-7ve9apo2xj] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

/* ================================================
   AI SETTINGS GRID
   ================================================ */
.ai-settings-grid[b-7ve9apo2xj] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.settings-group[b-7ve9apo2xj] {
    background: #f8fafc;
    border-radius: 0.625rem;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
}

.settings-group-full[b-7ve9apo2xj] {
    grid-column: span 2;
}

.settings-group h5[b-7ve9apo2xj] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.setting-item[b-7ve9apo2xj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.setting-item:last-child[b-7ve9apo2xj] {
    border-bottom: none;
    padding-bottom: 0;
}

.setting-info[b-7ve9apo2xj] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.setting-label[b-7ve9apo2xj] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1e293b;
}

.setting-description[b-7ve9apo2xj] {
    font-size: 0.8125rem;
    color: #64748b;
}

/* ================================================
   LIMITS GRID
   ================================================ */
.limits-grid[b-7ve9apo2xj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.limit-item[b-7ve9apo2xj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.limit-item label[b-7ve9apo2xj] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
}

.limit-input[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.limit-input[b-7ve9apo2xj]  .rz-slider {
    flex: 1;
}

.limit-value[b-7ve9apo2xj] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #3b82f6;
    min-width: 48px;
    text-align: right;
}

/* ================================================
   AI SETTINGS ACTIONS
   ================================================ */
.ai-settings-actions[b-7ve9apo2xj] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}

/* ================================================
   DATA CARD
   ================================================ */
.data-card[b-7ve9apo2xj] {
    background: #ffffff;
    border-radius: 0.625rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

/* ================================================
   AI LOGS GRID
   ================================================ */
.ai-logs-grid[b-7ve9apo2xj]  .rz-data-grid {
    border: none;
}

.ai-logs-grid[b-7ve9apo2xj]  .rz-datatable-thead > tr > th {
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.75rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.ai-logs-grid[b-7ve9apo2xj]  .rz-datatable-tbody > tr > td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.ai-logs-grid[b-7ve9apo2xj]  .rz-datatable-tbody > tr:hover > td {
    background: #f8fafc;
}

.log-time[b-7ve9apo2xj] {
    font-size: 0.8125rem;
    color: #64748b;
}

.user-email[b-7ve9apo2xj] {
    font-size: 0.8125rem;
    color: #475569;
}

.tokens-value[b-7ve9apo2xj],
.duration-value[b-7ve9apo2xj] {
    font-size: 0.8125rem;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ================================================
   CONFIDENCE CELL
   ================================================ */
.confidence-cell[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.confidence-bar[b-7ve9apo2xj] {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.confidence-fill[b-7ve9apo2xj] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.confidence-value[b-7ve9apo2xj] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    min-width: 36px;
}

/* ================================================
   EMPTY STATE
   ================================================ */
.empty-state[b-7ve9apo2xj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #64748b;
}

.empty-state[b-7ve9apo2xj]  .rzi {
    font-size: 3rem !important;
    color: #cbd5e1 !important;
    margin-bottom: 1rem;
}

.empty-state p[b-7ve9apo2xj] {
    margin: 0;
    font-size: 0.9375rem;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1200px) {
    .ai-stats-grid[b-7ve9apo2xj] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .limits-grid[b-7ve9apo2xj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .ai-settings-grid[b-7ve9apo2xj] {
        grid-template-columns: 1fr;
    }
    
    .settings-group-full[b-7ve9apo2xj] {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .page-header[b-7ve9apo2xj] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ai-stats-grid[b-7ve9apo2xj] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .limits-grid[b-7ve9apo2xj] {
        grid-template-columns: 1fr;
    }
    
    .ai-status-banner[b-7ve9apo2xj] {
        flex-direction: column;
        text-align: center;
    }
    
    .status-meta[b-7ve9apo2xj] {
        align-items: center;
    }
}

/* ================================================
   GRID ENHANCEMENTS
   ================================================ */
.log-time-cell.clickable[b-7ve9apo2xj],
.ai-logs-grid[b-7ve9apo2xj]  .rz-datatable-tbody > tr {
    cursor: pointer;
}

.type-cell[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rerun-indicator[b-7ve9apo2xj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

.rerun-indicator[b-7ve9apo2xj]  .rzi {
    font-size: 0.75rem !important;
    color: white !important;
}

.matches-cell[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.matches-label[b-7ve9apo2xj] {
    font-size: 0.6875rem;
    color: #64748b;
}

.sightings-processed[b-7ve9apo2xj] {
    font-size: 0.75rem;
    color: #64748b;
}

/* ================================================
   DETAIL DIALOG
   ================================================ */
.ai-modal-backdrop[b-7ve9apo2xj] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: fadeIn-b-7ve9apo2xj 0.2s ease;
}

.ai-modal-dialog[b-7ve9apo2xj] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-7ve9apo2xj 0.3s ease;
}

.ai-modal-dialog.large[b-7ve9apo2xj] {
    max-width: 900px;
}

@keyframes fadeIn-b-7ve9apo2xj {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-7ve9apo2xj {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.dialog-header[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.dialog-title[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dialog-title[b-7ve9apo2xj]  .rzi {
    font-size: 1.5rem !important;
    color: #7c3aed !important;
}

.dialog-title h2[b-7ve9apo2xj] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.dialog-subtitle[b-7ve9apo2xj] {
    font-size: 0.8125rem;
    color: #64748b;
}

.dialog-content[b-7ve9apo2xj] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.dialog-footer[b-7ve9apo2xj] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ================================================
   DETAIL SUMMARY
   ================================================ */
.detail-summary[b-7ve9apo2xj] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.summary-item[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-label[b-7ve9apo2xj] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.summary-value[b-7ve9apo2xj] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
}

.rerun-badge[b-7ve9apo2xj] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 4px;
}

.rerun-badge[b-7ve9apo2xj]  .rzi {
    font-size: 0.75rem !important;
}

/* ================================================
   ERROR SECTION
   ================================================ */
.error-section[b-7ve9apo2xj] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.error-section h4[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: #dc2626;
}

.error-section[b-7ve9apo2xj]  .rzi {
    color: #dc2626 !important;
}

.error-message[b-7ve9apo2xj] {
    margin: 0;
    font-size: 0.8125rem;
    color: #991b1b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ================================================
   MATCHING SECTION
   ================================================ */
.matching-section h4[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #1e293b;
}

.matching-section h4[b-7ve9apo2xj]  .rzi {
    color: #7c3aed !important;
}

.matching-stats[b-7ve9apo2xj] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.matching-stat[b-7ve9apo2xj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.matching-stat .stat-value[b-7ve9apo2xj] {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
}

.matching-stat .stat-label[b-7ve9apo2xj] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
}

.matching-stat.highlight[b-7ve9apo2xj] {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(109, 40, 217, 0.1));
    border-color: rgba(124, 58, 237, 0.2);
}

.matching-stat.highlight .stat-value[b-7ve9apo2xj] {
    color: #7c3aed;
}

.matching-stat.error[b-7ve9apo2xj] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}

/* ================================================
   MATCH LOG SECTION
   ================================================ */
.match-log-section h5[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem 0;
    font-size: 0.9375rem;
    color: #1e293b;
}

.match-log-section h5[b-7ve9apo2xj]  .rzi {
    color: #7c3aed !important;
}

.section-hint[b-7ve9apo2xj] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0 0 1rem 0;
}

.match-log-list[b-7ve9apo2xj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.match-log-card[b-7ve9apo2xj] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.match-log-card:hover[b-7ve9apo2xj] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.match-log-card.score-high[b-7ve9apo2xj] {
    border-left: 4px solid #22c55e;
}

.match-log-card.score-medium[b-7ve9apo2xj] {
    border-left: 4px solid #f59e0b;
}

.match-log-card.score-low[b-7ve9apo2xj] {
    border-left: 4px solid #ef4444;
}

/* ================================================
   PET COMPARISON
   ================================================ */
.pet-comparison[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    gap: 1rem;
}

.comparison-pet[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.comparison-pet.matched[b-7ve9apo2xj] {
    flex-direction: row-reverse;
    text-align: right;
}

.pet-photo[b-7ve9apo2xj] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pet-photo img[b-7ve9apo2xj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-photo[b-7ve9apo2xj]  .rzi {
    font-size: 2rem !important;
    color: #94a3b8 !important;
}

.pet-info[b-7ve9apo2xj] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pet-label[b-7ve9apo2xj] {
    font-size: 0.625rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pet-name[b-7ve9apo2xj] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
}

.pet-breed[b-7ve9apo2xj] {
    font-size: 0.8125rem;
    color: #64748b;
}

.pet-owner[b-7ve9apo2xj] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.comparison-score[b-7ve9apo2xj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.score-circle[b-7ve9apo2xj] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.score-circle.score-high[b-7ve9apo2xj] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.15));
    color: #16a34a;
    border: 2px solid #22c55e;
}

.score-circle.score-medium[b-7ve9apo2xj] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.15));
    color: #d97706;
    border: 2px solid #f59e0b;
}

.score-circle.score-low[b-7ve9apo2xj] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15));
    color: #dc2626;
    border: 2px solid #ef4444;
}

.comparison-arrow[b-7ve9apo2xj]  .rzi {
    font-size: 1.25rem !important;
    color: #94a3b8 !important;
}

/* ================================================
   SCORE BREAKDOWN
   ================================================ */
.score-breakdown[b-7ve9apo2xj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1rem 1rem 1rem;
    background: #f8fafc;
}

.score-item[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.score-item .score-label[b-7ve9apo2xj] {
    font-size: 0.75rem;
    color: #64748b;
    width: 50px;
    flex-shrink: 0;
}

.score-bar-container[b-7ve9apo2xj] {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.score-bar[b-7ve9apo2xj] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.score-bar.visual[b-7ve9apo2xj] {
    background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.score-bar.text[b-7ve9apo2xj] {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.score-bar.hybrid[b-7ve9apo2xj] {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.score-percent[b-7ve9apo2xj] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    width: 36px;
    text-align: right;
}

.score-item.hybrid[b-7ve9apo2xj] {
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}

.distance-info[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #64748b;
    padding-top: 0.5rem;
}

.distance-info[b-7ve9apo2xj]  .rzi {
    font-size: 0.875rem !important;
    color: #94a3b8 !important;
}

/* ================================================
   MATCH REASONING
   ================================================ */
.match-reasoning[b-7ve9apo2xj] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(124, 58, 237, 0.05);
    border-top: 1px solid #e2e8f0;
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.5;
}

.match-reasoning[b-7ve9apo2xj]  .rzi {
    font-size: 1rem !important;
    color: #f59e0b !important;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.match-status-row[b-7ve9apo2xj] {
    padding: 0.75rem 1rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

/* ================================================
   NO MATCHES FOUND
   ================================================ */
.no-matches-found[b-7ve9apo2xj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    color: #64748b;
    text-align: center;
}

.no-matches-found[b-7ve9apo2xj]  .rzi {
    font-size: 3rem !important;
    color: #cbd5e1 !important;
    margin-bottom: 0.5rem;
}

.no-matches-found p[b-7ve9apo2xj] {
    margin: 0;
    font-size: 0.9375rem;
}

/* ================================================
   ANALYSIS SECTION
   ================================================ */
.analysis-section h4[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #1e293b;
}

.analysis-section h4[b-7ve9apo2xj]  .rzi {
    color: #7c3aed !important;
}

.confidence-display[b-7ve9apo2xj] {
    margin-bottom: 1rem;
}

.confidence-label[b-7ve9apo2xj] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    display: block;
}

.confidence-large[b-7ve9apo2xj] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.confidence-bar-large[b-7ve9apo2xj] {
    flex: 1;
    height: 12px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.confidence-fill-large[b-7ve9apo2xj] {
    height: 100%;
    border-radius: 6px;
}

.confidence-value-large[b-7ve9apo2xj] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.model-info[b-7ve9apo2xj] {
    display: flex;
    gap: 0.5rem;
}

.info-label[b-7ve9apo2xj] {
    font-size: 0.75rem;
    color: #64748b;
}

.info-value[b-7ve9apo2xj] {
    font-size: 0.875rem;
    color: #1e293b;
    font-weight: 500;
}

/* ================================================
   RESPONSIVE DIALOG
   ================================================ */
@media (max-width: 768px) {
    .ai-modal-dialog[b-7ve9apo2xj] {
        width: 95%;
        max-height: 90vh;
    }
    
    .pet-comparison[b-7ve9apo2xj] {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .comparison-pet[b-7ve9apo2xj],
    .comparison-pet.matched[b-7ve9apo2xj] {
        flex-direction: column;
        text-align: center;
    }
    
    .matching-stats[b-7ve9apo2xj] {
        flex-direction: column;
    }
}
/* /Components/Pages/Admin/Index.razor.rz.scp.css */
/* ================================================
   Admin Dashboard Index Page Styles
   PetFindrz Admin Portal - KPI Dashboard
   ================================================ */

.admin-dashboard[b-zq3su99z1h] {
    min-height: 100%;
}

/* ================================================
   PAGE HEADER
   ================================================ */
.dashboard-header[b-zq3su99z1h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-info[b-zq3su99z1h] {
    flex: 1;
}

.page-title[b-zq3su99z1h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.title-icon[b-zq3su99z1h]  .rzi {
    font-size: 1.75rem !important;
    color: #3b82f6 !important;
}

.page-subtitle[b-zq3su99z1h] {
    color: #64748b;
    margin: 0.25rem 0 0 0;
    font-size: 0.9375rem;
}

.header-actions[b-zq3su99z1h] {
    display: flex;
    gap: 0.75rem;
}

.refresh-btn[b-zq3su99z1h] {
    border-color: #cbd5e1 !important;
}

/* ================================================
   LOADING STATE
   ================================================ */
.loading-container[b-zq3su99z1h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.loading-text[b-zq3su99z1h] {
    margin-top: 1rem;
    color: #64748b;
    font-size: 0.9375rem;
}

/* ================================================
   PRIMARY KPI CARDS
   ================================================ */
.kpi-grid[b-zq3su99z1h] {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.primary-kpis[b-zq3su99z1h] {
    grid-template-columns: repeat(4, 1fr);
}

.kpi-card[b-zq3su99z1h] {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.kpi-card:hover[b-zq3su99z1h] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.kpi-icon-container[b-zq3su99z1h] {
    width: 48px;
    height: 48px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon[b-zq3su99z1h]  .rzi {
    font-size: 1.5rem !important;
    color: #ffffff !important;
}

/* KPI Color Variations */
.kpi-users .kpi-icon-container[b-zq3su99z1h] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.kpi-revenue .kpi-icon-container[b-zq3su99z1h] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.kpi-pets .kpi-icon-container[b-zq3su99z1h] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.kpi-sightings .kpi-icon-container[b-zq3su99z1h] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.kpi-content[b-zq3su99z1h] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kpi-label[b-zq3su99z1h] {
    font-size: 0.8125rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.kpi-value[b-zq3su99z1h] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
    margin: 0.25rem 0;
}

.kpi-trend[b-zq3su99z1h] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.kpi-trend[b-zq3su99z1h]  .rzi {
    font-size: 1rem !important;
}

.trend-up[b-zq3su99z1h] {
    color: #22c55e;
}

.trend-down[b-zq3su99z1h] {
    color: #ef4444;
}

.kpi-subtext[b-zq3su99z1h] {
    font-size: 0.8125rem;
    color: #64748b;
}

.kpi-subtext .text-danger[b-zq3su99z1h] {
    color: #ef4444;
}

.kpi-subtext .text-warning[b-zq3su99z1h] {
    color: #f59e0b;
}

/* ================================================
   SECONDARY KPI CARDS
   ================================================ */
.secondary-kpis[b-zq3su99z1h] {
    grid-template-columns: repeat(4, 1fr);
}

.kpi-card-small[b-zq3su99z1h] {
    background: #ffffff;
    border-radius: 0.625rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.kpi-card-small:hover[b-zq3su99z1h] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.kpi-card-small.kpi-alert[b-zq3su99z1h] {
    border-color: #fecaca;
    background: #fef2f2;
}

.kpi-small-icon[b-zq3su99z1h]  .rzi {
    font-size: 1.5rem !important;
}

.kpi-small-icon.text-success[b-zq3su99z1h]  .rzi {
    color: #22c55e !important;
}

.kpi-small-icon.text-primary[b-zq3su99z1h]  .rzi {
    color: #3b82f6 !important;
}

.kpi-small-icon.text-warning[b-zq3su99z1h]  .rzi {
    color: #f59e0b !important;
}

.kpi-small-icon.text-danger[b-zq3su99z1h]  .rzi {
    color: #ef4444 !important;
}

.kpi-small-icon.text-muted[b-zq3su99z1h]  .rzi {
    color: #94a3b8 !important;
}

.kpi-small-content[b-zq3su99z1h] {
    display: flex;
    flex-direction: column;
}

.kpi-small-value[b-zq3su99z1h] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.kpi-small-label[b-zq3su99z1h] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

/* ================================================
   CHART CARDS
   ================================================ */
.charts-row[b-zq3su99z1h] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.chart-card[b-zq3su99z1h],
.trend-chart-card[b-zq3su99z1h] {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.trend-chart-card[b-zq3su99z1h] {
    margin-bottom: 1.5rem;
}

.chart-header[b-zq3su99z1h] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.chart-title[b-zq3su99z1h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.chart-title[b-zq3su99z1h]  .rzi {
    font-size: 1.25rem !important;
    color: #64748b !important;
}

.chart-body[b-zq3su99z1h] {
    padding: 1rem;
}

.chart-empty[b-zq3su99z1h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #94a3b8;
    gap: 0.5rem;
}

.chart-empty[b-zq3su99z1h]  .rzi {
    font-size: 2rem !important;
    opacity: 0.5;
}

/* ================================================
   BOTTOM ROW - ACTIVITY & ACTIONS
   ================================================ */
.bottom-row[b-zq3su99z1h] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.activity-card[b-zq3su99z1h],
.actions-card[b-zq3su99z1h] {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.card-header-custom[b-zq3su99z1h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.card-title[b-zq3su99z1h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.card-title[b-zq3su99z1h]  .rzi {
    font-size: 1.25rem !important;
    color: #64748b !important;
}

.view-all-link[b-zq3su99z1h] {
    font-size: 0.8125rem;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.view-all-link:hover[b-zq3su99z1h] {
    text-decoration: underline;
}

/* Activity List */
.activity-list[b-zq3su99z1h] {
    padding: 0.5rem 0;
    max-height: 400px;
    overflow-y: auto;
}

.activity-item[b-zq3su99z1h] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    transition: background-color 0.15s ease;
}

.activity-item:hover[b-zq3su99z1h] {
    background: #f8fafc;
}

.activity-icon[b-zq3su99z1h] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon[b-zq3su99z1h]  .rzi {
    font-size: 1rem !important;
    color: #ffffff !important;
}

.activity-icon-success[b-zq3su99z1h] {
    background: #22c55e;
}

.activity-icon-primary[b-zq3su99z1h] {
    background: #3b82f6;
}

.activity-icon-warning[b-zq3su99z1h] {
    background: #f59e0b;
}

.activity-icon-danger[b-zq3su99z1h] {
    background: #ef4444;
}

.activity-icon-info[b-zq3su99z1h] {
    background: #64748b;
}

.activity-content[b-zq3su99z1h] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.activity-description[b-zq3su99z1h] {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.4;
}

.activity-time[b-zq3su99z1h] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.125rem;
}

.activity-empty[b-zq3su99z1h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #94a3b8;
    gap: 0.5rem;
}

.activity-empty[b-zq3su99z1h]  .rzi {
    font-size: 2rem !important;
    opacity: 0.5;
}

/* Quick Actions */
.quick-actions[b-zq3su99z1h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 1rem;
}

.action-btn[b-zq3su99z1h] {
    justify-content: flex-start !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #374151 !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
}

.action-btn:hover[b-zq3su99z1h] {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

.action-btn[b-zq3su99z1h]  .rzi {
    font-size: 1.125rem !important;
    color: #64748b !important;
    margin-right: 0.5rem !important;
}

/* ================================================
   FOOTER
   ================================================ */
.dashboard-footer[b-zq3su99z1h] {
    text-align: center;
    padding: 1rem 0;
}

.generated-time[b-zq3su99z1h] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.generated-time[b-zq3su99z1h]  .rzi {
    font-size: 1rem !important;
}

/* ================================================
   ERROR STATE
   ================================================ */
.error-container[b-zq3su99z1h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.error-icon[b-zq3su99z1h]  .rzi {
    font-size: 3rem !important;
    color: #ef4444 !important;
}

.error-container h3[b-zq3su99z1h] {
    color: #1e293b;
    margin: 1rem 0 0.5rem 0;
}

.error-container p[b-zq3su99z1h] {
    color: #64748b;
    margin-bottom: 1.5rem;
}

/* ================================================
   RESPONSIVE STYLES
   ================================================ */
@media (max-width: 1200px) {
    .primary-kpis[b-zq3su99z1h] {
        grid-template-columns: repeat(2, 1fr);
    }

    .secondary-kpis[b-zq3su99z1h] {
        grid-template-columns: repeat(2, 1fr);
    }

    .bottom-row[b-zq3su99z1h] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .primary-kpis[b-zq3su99z1h] {
        grid-template-columns: 1fr;
    }

    .secondary-kpis[b-zq3su99z1h] {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-row[b-zq3su99z1h] {
        grid-template-columns: 1fr;
    }

    .dashboard-header[b-zq3su99z1h] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-title[b-zq3su99z1h] {
        font-size: 1.5rem;
    }

    .kpi-value[b-zq3su99z1h] {
        font-size: 1.5rem;
    }

    .quick-actions[b-zq3su99z1h] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .secondary-kpis[b-zq3su99z1h] {
        grid-template-columns: 1fr;
    }

    .kpi-card[b-zq3su99z1h] {
        padding: 1rem;
    }

    .kpi-icon-container[b-zq3su99z1h] {
        width: 40px;
        height: 40px;
    }
}
/* /Components/Pages/Admin/MatchingTools.razor.rz.scp.css */
/* ================================================
   Admin Matching Tools Page Styles
   PetFindrz Admin Portal
   ================================================ */

.matching-tools-page[b-njd7n65974] {
    min-height: 100%;
}

/* ================================================
   PAGE HEADER
   ================================================ */
.page-header[b-njd7n65974] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-info[b-njd7n65974] {
    flex: 1;
}

.page-title[b-njd7n65974] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.title-icon[b-njd7n65974]  .rzi {
    font-size: 1.75rem !important;
    color: #7c3aed !important;
}

.page-subtitle[b-njd7n65974] {
    color: #64748b;
    margin: 0.25rem 0 0 0;
    font-size: 0.9375rem;
}

/* ================================================
   LOADING & UNAUTHORIZED STATES
   ================================================ */
.loading-container[b-njd7n65974],
.unauthorized-container[b-njd7n65974] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    color: #64748b;
}

.unauthorized-container[b-njd7n65974]  .rzi {
    font-size: 3rem !important;
    color: #94a3b8 !important;
}

.unauthorized-container h2[b-njd7n65974] {
    margin: 0;
    color: #1e293b;
}

/* ================================================
   STATS ROW
   ================================================ */
.stats-row[b-njd7n65974] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-njd7n65974] {
    background: #ffffff;
    border-radius: 0.625rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.stat-card:hover[b-njd7n65974] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.stat-card.stat-success[b-njd7n65974] {
    border-color: #22c55e;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.stat-icon[b-njd7n65974] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon[b-njd7n65974]  .rzi {
    font-size: 1.5rem !important;
    color: white !important;
}

.stat-icon-found[b-njd7n65974] { background: linear-gradient(135deg, #22c55e, #16a34a); }
.stat-icon-lost[b-njd7n65974] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.stat-icon-matches[b-njd7n65974] { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.stat-icon-reunited[b-njd7n65974] { background: linear-gradient(135deg, #ec4899, #db2777); }
.stat-icon-embedding[b-njd7n65974] { background: linear-gradient(135deg, #06b6d4, #0891b2); }

.stat-content[b-njd7n65974] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-njd7n65974] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.stat-label[b-njd7n65974] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.stat-hint[b-njd7n65974] {
    font-size: 0.6875rem;
    color: #64748b;
}

.stat-hint.warning[b-njd7n65974] {
    color: #f59e0b;
}

.stat-card.stat-warning[b-njd7n65974] {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.embedding-stats[b-njd7n65974] {
    margin-top: 0.5rem;
}

/* ================================================
   TOOLS GRID
   ================================================ */
.tools-grid[b-njd7n65974] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.tool-card[b-njd7n65974] {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.tool-card:hover[b-njd7n65974] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.tool-header[b-njd7n65974] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tool-icon[b-njd7n65974]  .rzi {
    font-size: 1.5rem !important;
    color: #7c3aed !important;
}

.tool-header h3[b-njd7n65974] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
}

.tool-description[b-njd7n65974] {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.tool-warning[b-njd7n65974] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fef3c7;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: #92400e;
}

.tool-warning[b-njd7n65974]  .rzi {
    font-size: 1rem !important;
    color: #f59e0b !important;
}

.tool-info[b-njd7n65974] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #e0f2fe;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: #0369a1;
}

.tool-info[b-njd7n65974]  .rzi {
    font-size: 1rem !important;
    color: #0ea5e9 !important;
}

.tool-success[b-njd7n65974] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #dcfce7;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: #166534;
}

.tool-success[b-njd7n65974]  .rzi {
    font-size: 1rem !important;
    color: #22c55e !important;
}

.tool-actions[b-njd7n65974] {
    display: flex;
    gap: 0.75rem;
}

.tool-result[b-njd7n65974] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.875rem;
}

.tool-result.success[b-njd7n65974] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.tool-result.error[b-njd7n65974] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.tool-result.warning[b-njd7n65974] {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.tool-result[b-njd7n65974]  .rzi {
    font-size: 1.25rem !important;
    flex-shrink: 0;
}

.result-details[b-njd7n65974] {
    flex: 1;
}

.result-details strong[b-njd7n65974] {
    display: block;
    margin-bottom: 0.5rem;
}

.result-details ul[b-njd7n65974] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
}

.result-details li[b-njd7n65974] {
    margin-bottom: 0.25rem;
}

/* ================================================
   CONFIG CARD
   ================================================ */
.config-grid[b-njd7n65974] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.config-item[b-njd7n65974] {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.config-label[b-njd7n65974] {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0.25rem;
}

.config-value[b-njd7n65974] {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.config-hint[b-njd7n65974] {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ================================================
   QUICK ACTIONS
   ================================================ */
.quick-actions-grid[b-njd7n65974] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.quick-action[b-njd7n65974] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.quick-action:hover[b-njd7n65974] {
    background: #f1f5f9;
    border-color: #7c3aed;
    color: #7c3aed;
}

.quick-action[b-njd7n65974]  .rzi {
    font-size: 1.125rem !important;
    color: #64748b !important;
}

.quick-action:hover[b-njd7n65974]  .rzi {
    color: #7c3aed !important;
}

/* ================================================
   INFO CARD
   ================================================ */
.info-content[b-njd7n65974] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-section h4[b-njd7n65974] {
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
}

.info-section p[b-njd7n65974] {
    margin: 0;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
}

/* ================================================
   BACKFILL SECTIONS
   ================================================ */
.backfill-section[b-njd7n65974] {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.backfill-section:last-child[b-njd7n65974] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.backfill-section h4[b-njd7n65974] {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
    .stats-row[b-njd7n65974] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tools-grid[b-njd7n65974] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .stats-row[b-njd7n65974] {
        grid-template-columns: 1fr;
    }
    
    .config-grid[b-njd7n65974] {
        grid-template-columns: 1fr;
    }
    
    .quick-actions-grid[b-njd7n65974] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Pets.razor.rz.scp.css */
/* ================================================
   Admin Pet Management Page Styles
   PetFindrz Admin Portal
   ================================================ */

.pets-page[b-qjoe1l70px] {
    min-height: 100%;
}

/* ================================================
   PAGE HEADER
   ================================================ */
.page-header[b-qjoe1l70px] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-info[b-qjoe1l70px] {
    flex: 1;
}

.page-title[b-qjoe1l70px] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.title-icon[b-qjoe1l70px]  .rzi {
    font-size: 1.75rem !important;
    color: #f97316 !important;
}

.page-subtitle[b-qjoe1l70px] {
    color: #64748b;
    margin: 0.25rem 0 0 0;
    font-size: 0.9375rem;
}

.header-actions[b-qjoe1l70px] {
    display: flex;
    gap: 0.75rem;
}

/* ================================================
   STATS ROW
   ================================================ */
.stats-row[b-qjoe1l70px] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-card[b-qjoe1l70px] {
    background: #ffffff;
    border-radius: 0.625rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.stat-card:hover[b-qjoe1l70px] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.stat-card.stat-danger[b-qjoe1l70px] {
    border-color: #ef4444;
    background: #fef2f2;
}

.stat-icon[b-qjoe1l70px] {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon[b-qjoe1l70px]  .rzi {
    font-size: 1.25rem !important;
    color: #ffffff !important;
}

.stat-icon-total[b-qjoe1l70px] { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.stat-icon-active[b-qjoe1l70px] { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.stat-icon-lost[b-qjoe1l70px] { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.stat-icon-stolen[b-qjoe1l70px] { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }
.stat-icon-found[b-qjoe1l70px] { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.stat-icon-photos[b-qjoe1l70px] { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }

.stat-content[b-qjoe1l70px] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-qjoe1l70px] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.stat-label[b-qjoe1l70px] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ================================================
   TYPE BREAKDOWN
   ================================================ */
.type-breakdown[b-qjoe1l70px] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.type-chip[b-qjoe1l70px] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 2rem;
    font-size: 0.875rem;
    color: #475569;
}

.type-chip[b-qjoe1l70px]  .rzi {
    font-size: 1rem !important;
    color: #64748b !important;
}

.type-chip.highlight[b-qjoe1l70px] {
    background: #f0fdf4;
    border-color: #22c55e;
    color: #166534;
}

.type-chip.highlight[b-qjoe1l70px]  .rzi {
    color: #22c55e !important;
}

/* ================================================
   FILTERS CARD
   ================================================ */
.filters-card[b-qjoe1l70px] {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
}

.filters-header[b-qjoe1l70px] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.filters-header h3[b-qjoe1l70px] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filters-grid[b-qjoe1l70px] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.filter-group[b-qjoe1l70px] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.filter-group label[b-qjoe1l70px] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ================================================
   BULK ACTIONS BAR
   ================================================ */
.bulk-actions-bar[b-qjoe1l70px] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.selection-count[b-qjoe1l70px] {
    font-weight: 600;
    color: #1e293b;
}

.bulk-buttons[b-qjoe1l70px] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ================================================
   DATA CARD / GRID
   ================================================ */
.data-card[b-qjoe1l70px] {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.pets-grid[b-qjoe1l70px]  .rz-data-grid {
    border: none;
}

.pets-grid[b-qjoe1l70px]  .rz-datatable-thead > tr > th {
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.8125rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.pets-grid[b-qjoe1l70px]  .rz-datatable-tbody > tr > td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.pets-grid[b-qjoe1l70px]  .rz-datatable-tbody > tr:hover > td {
    background: #f8fafc;
}

.pets-grid[b-qjoe1l70px]  .rz-state-highlight > td {
    background: #fef3c7 !important;
}

/* Pet Cell */
.pet-cell[b-qjoe1l70px] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pet-avatar[b-qjoe1l70px] {
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.pet-avatar img[b-qjoe1l70px] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-avatar .avatar-icon[b-qjoe1l70px]  .rzi {
    font-size: 1.25rem !important;
    color: #ea580c !important;
}

.pet-info[b-qjoe1l70px] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pet-name[b-qjoe1l70px] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pet-breed[b-qjoe1l70px] {
    font-size: 0.8125rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Owner Cell */
.owner-cell[b-qjoe1l70px] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.owner-avatar[b-qjoe1l70px] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.owner-avatar img[b-qjoe1l70px] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials[b-qjoe1l70px] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.owner-info[b-qjoe1l70px] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.owner-name[b-qjoe1l70px] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.owner-email[b-qjoe1l70px] {
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status Cell */
.status-cell[b-qjoe1l70px] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.alert-icon[b-qjoe1l70px] {
    color: #ef4444 !important;
    font-size: 1rem !important;
    animation: pulse-b-qjoe1l70px 2s infinite;
}

.match-indicator[b-qjoe1l70px] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.12);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    cursor: help;
}

.match-indicator[b-qjoe1l70px]  .rzi {
    font-size: 0.75rem !important;
    color: #7c3aed !important;
}

@keyframes pulse-b-qjoe1l70px {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Size Text */
.size-text[b-qjoe1l70px] {
    font-size: 0.875rem;
    color: #475569;
}

/* Microchip ID */
.microchip-id[b-qjoe1l70px] {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Stats Cell */
.stats-cell[b-qjoe1l70px] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.75rem;
    color: #64748b;
}

.stats-cell span[b-qjoe1l70px] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stats-cell[b-qjoe1l70px]  .rzi {
    font-size: 0.875rem !important;
}

/* Flags Cell */
.flags-cell[b-qjoe1l70px] {
    display: flex;
    gap: 0.375rem;
    justify-content: center;
}

.flag-active[b-qjoe1l70px] { color: #22c55e !important; }
.flag-inactive[b-qjoe1l70px] { color: #94a3b8 !important; }
.flag-public[b-qjoe1l70px] { color: #3b82f6 !important; }
.flag-private[b-qjoe1l70px] { color: #64748b !important; }
.flag-embedding[b-qjoe1l70px] { color: #22c55e !important; }
.flag-no-embedding[b-qjoe1l70px] { color: #cbd5e1 !important; }

/* Embedding Badge (used in dialogs) */
.embedding-badge[b-qjoe1l70px] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.embedding-badge.has-embedding[b-qjoe1l70px] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.embedding-badge.has-embedding[b-qjoe1l70px]  .rzi {
    color: #22c55e !important;
    font-size: 0.875rem !important;
}

.embedding-badge.no-embedding[b-qjoe1l70px] {
    background: rgba(148, 163, 184, 0.1);
    color: #64748b;
}

.embedding-badge.no-embedding[b-qjoe1l70px]  .rzi {
    color: #94a3b8 !important;
    font-size: 0.875rem !important;
}

/* Date Text */
.date-text[b-qjoe1l70px] {
    font-size: 0.8125rem;
    color: #475569;
}

/* Action Buttons */
.action-buttons[b-qjoe1l70px] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

/* Loading Placeholder */
.loading-placeholder[b-qjoe1l70px] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: #64748b;
}

/* ================================================
   MODAL / DIALOG
   ================================================ */
.modal-backdrop[b-qjoe1l70px] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.pet-dialog[b-qjoe1l70px] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.action-dialog[b-qjoe1l70px] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 1002;
    width: 90%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.action-dialog.danger[b-qjoe1l70px] {
    border: 2px solid #ef4444;
}

.dialog-header[b-qjoe1l70px] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.dialog-header h2[b-qjoe1l70px] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dialog-content[b-qjoe1l70px] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.dialog-footer[b-qjoe1l70px] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* Dialog Form */
.dialog-form[b-qjoe1l70px] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.form-group[b-qjoe1l70px] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-group label[b-qjoe1l70px] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.warning-text[b-qjoe1l70px] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #dc2626;
    font-weight: 500;
}

.warning-text[b-qjoe1l70px]  .rzi {
    color: #dc2626 !important;
}

/* Profile Header in Dialog */
.profile-header[b-qjoe1l70px] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.profile-avatar[b-qjoe1l70px] {
    width: 80px;
    height: 80px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar img[b-qjoe1l70px] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar .avatar-icon-lg[b-qjoe1l70px]  .rzi {
    font-size: 2.5rem !important;
    color: #ea580c !important;
}

.profile-info h3[b-qjoe1l70px] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.profile-info p[b-qjoe1l70px] {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0.25rem 0 0.75rem 0;
}

.profile-badges[b-qjoe1l70px] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Detail Grid */
.detail-grid[b-qjoe1l70px] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.detail-section[b-qjoe1l70px] {
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
}

.detail-section h4[b-qjoe1l70px] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.detail-row[b-qjoe1l70px] {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    font-size: 0.875rem;
}

.detail-label[b-qjoe1l70px] {
    color: #64748b;
}

.detail-value[b-qjoe1l70px] {
    font-weight: 500;
    color: #1e293b;
    text-align: right;
}

.detail-value.monospace[b-qjoe1l70px] {
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
}

.notes-text[b-qjoe1l70px] {
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.6;
    white-space: pre-wrap;
}

.mt-3[b-qjoe1l70px] {
    margin-top: 1rem;
}

/* Owner Detail */
.owner-detail[b-qjoe1l70px] {
    padding: 1.5rem;
}

.owner-header[b-qjoe1l70px] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.owner-avatar-lg[b-qjoe1l70px] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.owner-avatar-lg img[b-qjoe1l70px] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials-lg[b-qjoe1l70px] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #64748b;
}

.owner-header h4[b-qjoe1l70px] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.owner-header p[b-qjoe1l70px] {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0.25rem 0 0.5rem 0;
}

.owner-actions[b-qjoe1l70px] {
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Photos Grid */
.photos-grid[b-qjoe1l70px] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem 0;
}

.photo-card[b-qjoe1l70px] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.photo-card:hover[b-qjoe1l70px] {
    border-color: #3b82f6;
}

.photo-card.primary[b-qjoe1l70px] {
    border-color: #f97316;
}

.photo-card img[b-qjoe1l70px] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.primary-badge[b-qjoe1l70px] {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    background: #f97316;
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
}

.no-photos[b-qjoe1l70px] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #94a3b8;
}

.no-photos[b-qjoe1l70px]  .rzi {
    font-size: 3rem !important;
    margin-bottom: 0.5rem;
}

/* Admin Actions Panel */
.admin-actions-panel[b-qjoe1l70px] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.action-section[b-qjoe1l70px] {
    padding: 1.25rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.action-section.action-danger[b-qjoe1l70px] {
    background: #fef2f2;
    border-color: #fecaca;
}

.action-section h4[b-qjoe1l70px] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.375rem 0;
}

.action-section.action-danger h4[b-qjoe1l70px] {
    color: #dc2626;
}

.action-desc[b-qjoe1l70px] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0 0 1rem 0;
}

.action-form[b-qjoe1l70px] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.text-muted[b-qjoe1l70px] {
    color: #94a3b8;
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */
@media (max-width: 1400px) {
    .stats-row[b-qjoe1l70px] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .filters-grid[b-qjoe1l70px] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .photos-grid[b-qjoe1l70px] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .stats-row[b-qjoe1l70px] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filters-grid[b-qjoe1l70px] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .detail-grid[b-qjoe1l70px] {
        grid-template-columns: 1fr;
    }
    
    .photos-grid[b-qjoe1l70px] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-header[b-qjoe1l70px] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .stats-row[b-qjoe1l70px] {
        grid-template-columns: 1fr;
    }
    
    .filters-grid[b-qjoe1l70px] {
        grid-template-columns: 1fr;
    }
    
    .bulk-actions-bar[b-qjoe1l70px] {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .bulk-buttons[b-qjoe1l70px] {
        width: 100%;
        justify-content: center;
    }
    
    .pet-dialog[b-qjoe1l70px],
    .action-dialog[b-qjoe1l70px] {
        width: 95%;
        max-height: 95vh;
    }
    
    .profile-header[b-qjoe1l70px] {
        flex-direction: column;
        text-align: center;
    }
    
    .action-form[b-qjoe1l70px] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-form > *[b-qjoe1l70px] {
        width: 100% !important;
    }
    
    .photos-grid[b-qjoe1l70px] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Pages/Admin/Reports.razor.rz.scp.css */
/* ================================================
   Admin Reports & Analytics Page Styles
   PetFindrz Admin Portal
   ================================================ */

.reports-page[b-s0s3sphtwj] {
    min-height: 100%;
}

/* ================================================
   PAGE HEADER
   ================================================ */
.page-header[b-s0s3sphtwj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-info[b-s0s3sphtwj] {
    flex: 1;
}

.page-title[b-s0s3sphtwj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.title-icon[b-s0s3sphtwj]  .rzi {
    font-size: 1.75rem !important;
    color: #06b6d4 !important;
}

.page-subtitle[b-s0s3sphtwj] {
    color: #64748b;
    margin: 0.25rem 0 0 0;
    font-size: 0.9375rem;
}

.header-actions[b-s0s3sphtwj] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.period-dropdown[b-s0s3sphtwj] {
    min-width: 160px;
}

.export-btn[b-s0s3sphtwj] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

/* ================================================
   LOADING STATE
   ================================================ */
.loading-container[b-s0s3sphtwj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.loading-text[b-s0s3sphtwj] {
    margin-top: 1rem;
    color: #64748b;
    font-size: 0.9375rem;
}

/* ================================================
   SUMMARY CARDS
   ================================================ */
.summary-grid[b-s0s3sphtwj] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.summary-card[b-s0s3sphtwj] {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.summary-card:hover[b-s0s3sphtwj] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.summary-icon[b-s0s3sphtwj] {
    width: 44px;
    height: 44px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.summary-icon[b-s0s3sphtwj]  .rzi {
    font-size: 1.375rem !important;
    color: #ffffff !important;
}

/* Summary card color variants */
.stat-users .summary-icon[b-s0s3sphtwj] { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.stat-revenue .summary-icon[b-s0s3sphtwj] { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.stat-pets .summary-icon[b-s0s3sphtwj] { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.stat-sightings .summary-icon[b-s0s3sphtwj] { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.stat-reunion .summary-icon[b-s0s3sphtwj] { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }
.stat-conversion .summary-icon[b-s0s3sphtwj] { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }

.summary-content[b-s0s3sphtwj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.summary-label[b-s0s3sphtwj] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.summary-value[b-s0s3sphtwj] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
    margin: 0.125rem 0;
}

.summary-secondary[b-s0s3sphtwj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.change-indicator[b-s0s3sphtwj] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.change-indicator[b-s0s3sphtwj]  .rzi {
    font-size: 0.875rem !important;
}

.change-indicator.positive[b-s0s3sphtwj] {
    color: #22c55e;
}

.change-indicator.negative[b-s0s3sphtwj] {
    color: #ef4444;
}

.secondary-value[b-s0s3sphtwj] {
    font-size: 0.75rem;
    color: #64748b;
}

/* ================================================
   REPORT TABS
   ================================================ */
.report-tabs[b-s0s3sphtwj] {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.report-tabs[b-s0s3sphtwj]  .rz-tabview-nav {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 1rem;
}

.report-tabs[b-s0s3sphtwj]  .rz-tabview-nav li {
    margin-right: 0.5rem;
}

.report-tabs[b-s0s3sphtwj]  .rz-tabview-nav li a {
    padding: 1rem 1.25rem;
    font-weight: 500;
    color: #64748b;
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.report-tabs[b-s0s3sphtwj]  .rz-tabview-nav li a:hover {
    color: #1e293b;
    background: rgba(59, 130, 246, 0.05);
}

.report-tabs[b-s0s3sphtwj]  .rz-tabview-nav li.rz-state-active a {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: transparent;
}

.report-tabs[b-s0s3sphtwj]  .rz-tabview-panels {
    padding: 0;
}

.tab-content[b-s0s3sphtwj] {
    padding: 1.5rem;
}

/* ================================================
   CHART CARDS
   ================================================ */
.chart-row[b-s0s3sphtwj] {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.chart-row.full-width[b-s0s3sphtwj] {
    grid-template-columns: 1fr;
}

.chart-row.two-column[b-s0s3sphtwj] {
    grid-template-columns: repeat(2, 1fr);
}

.chart-row.three-column[b-s0s3sphtwj] {
    grid-template-columns: repeat(3, 1fr);
}

.chart-card[b-s0s3sphtwj] {
    background: #f8fafc;
    border-radius: 0.625rem;
    overflow: hidden;
}

.chart-card.full-width[b-s0s3sphtwj] {
    grid-column: 1 / -1;
}

.chart-header[b-s0s3sphtwj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}

.chart-header h3[b-s0s3sphtwj] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-header h3[b-s0s3sphtwj]  .rzi {
    font-size: 1.125rem !important;
    color: #64748b !important;
}

.chart-actions[b-s0s3sphtwj] {
    display: flex;
    gap: 0.5rem;
}

.chart-body[b-s0s3sphtwj] {
    padding: 1rem;
}

.chart-empty[b-s0s3sphtwj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #94a3b8;
    text-align: center;
}

.chart-empty[b-s0s3sphtwj]  .rzi {
    font-size: 2rem !important;
    margin-bottom: 0.5rem;
}

/* ================================================
   METRICS ROW
   ================================================ */
.metrics-row[b-s0s3sphtwj] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.metric-card[b-s0s3sphtwj] {
    background: #f8fafc;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
}

.metric-card.highlight-green[b-s0s3sphtwj] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.metric-card.highlight-red[b-s0s3sphtwj] {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.metric-label[b-s0s3sphtwj] {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0.25rem;
}

.metric-value[b-s0s3sphtwj] {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    color: #1e293b;
}

.metric-value.positive[b-s0s3sphtwj] {
    color: #22c55e;
}

.metric-value.negative[b-s0s3sphtwj] {
    color: #ef4444;
}

/* ================================================
   DATA CARDS
   ================================================ */
.data-card[b-s0s3sphtwj] {
    background: #f8fafc;
    border-radius: 0.625rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.data-header[b-s0s3sphtwj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}

.data-header h3[b-s0s3sphtwj] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.data-body[b-s0s3sphtwj] {
    padding: 1rem 1.25rem;
}

/* ================================================
   BREED GRID
   ================================================ */
.breed-grid[b-s0s3sphtwj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.breed-item[b-s0s3sphtwj] {
    display: grid;
    grid-template-columns: 150px 1fr 100px;
    align-items: center;
    gap: 1rem;
}

.breed-name[b-s0s3sphtwj] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breed-bar-container[b-s0s3sphtwj] {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.breed-bar[b-s0s3sphtwj] {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.breed-count[b-s0s3sphtwj] {
    font-size: 0.8125rem;
    color: #64748b;
    text-align: right;
}

/* ================================================
   STATE LIST
   ================================================ */
.state-list[b-s0s3sphtwj] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.state-item[b-s0s3sphtwj] {
    display: grid;
    grid-template-columns: 40px 1fr 50px;
    align-items: center;
    gap: 0.75rem;
}

.state-name[b-s0s3sphtwj] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
}

.state-bar-container[b-s0s3sphtwj] {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.state-bar[b-s0s3sphtwj] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.state-bar.users[b-s0s3sphtwj] {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

.state-bar.pets[b-s0s3sphtwj] {
    background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
}

.state-bar.sightings[b-s0s3sphtwj] {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.state-count[b-s0s3sphtwj] {
    font-size: 0.75rem;
    color: #64748b;
    text-align: right;
}

/* ================================================
   HOTSPOT GRID
   ================================================ */
.hotspot-grid[b-s0s3sphtwj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.hotspot-item[b-s0s3sphtwj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #ffffff;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.hotspot-icon[b-s0s3sphtwj] {
    color: #f59e0b !important;
    font-size: 1.25rem !important;
}

.hotspot-info[b-s0s3sphtwj] {
    display: flex;
    flex-direction: column;
}

.hotspot-location[b-s0s3sphtwj] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
}

.hotspot-count[b-s0s3sphtwj] {
    font-size: 0.75rem;
    color: #64748b;
}

/* ================================================
   ACTIVITY TYPE GRID
   ================================================ */
.activity-type-grid[b-s0s3sphtwj] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.activity-type-item[b-s0s3sphtwj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #ffffff;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.activity-type-name[b-s0s3sphtwj] {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.25rem;
    text-transform: capitalize;
}

.activity-type-count[b-s0s3sphtwj] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}

/* ================================================
   CITIES GRID
   ================================================ */
.cities-grid[b-s0s3sphtwj]  .rz-datatable-thead > tr > th {
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0.75rem 1rem;
}

.cities-grid[b-s0s3sphtwj]  .rz-datatable-tbody > tr > td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

.city-name[b-s0s3sphtwj] {
    font-weight: 500;
    color: #1e293b;
}

/* ================================================
   REPORT FOOTER
   ================================================ */
.report-footer[b-s0s3sphtwj] {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 0;
    margin-top: 1rem;
}

.generated-time[b-s0s3sphtwj] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.generated-time[b-s0s3sphtwj]  .rzi {
    font-size: 1rem !important;
}

/* ================================================
   ERROR STATE
   ================================================ */
.error-container[b-s0s3sphtwj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
}

.error-icon[b-s0s3sphtwj] {
    font-size: 3rem !important;
    color: #ef4444 !important;
    margin-bottom: 1rem;
}

.error-container h3[b-s0s3sphtwj] {
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.error-container p[b-s0s3sphtwj] {
    color: #64748b;
    margin: 0 0 1.5rem 0;
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */
@media (max-width: 1400px) {
    .summary-grid[b-s0s3sphtwj] {
        grid-template-columns: repeat(3, 1fr);
    }

    .metrics-row[b-s0s3sphtwj] {
        grid-template-columns: repeat(3, 1fr);
    }

    .hotspot-grid[b-s0s3sphtwj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .activity-type-grid[b-s0s3sphtwj] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .chart-row.three-column[b-s0s3sphtwj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-row.three-column .chart-card:last-child[b-s0s3sphtwj] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 992px) {
    .summary-grid[b-s0s3sphtwj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-row.two-column[b-s0s3sphtwj] {
        grid-template-columns: 1fr;
    }

    .chart-row.three-column[b-s0s3sphtwj] {
        grid-template-columns: 1fr;
    }

    .metrics-row[b-s0s3sphtwj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-header[b-s0s3sphtwj] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-s0s3sphtwj] {
        width: 100%;
        flex-wrap: wrap;
    }

    .summary-grid[b-s0s3sphtwj] {
        grid-template-columns: 1fr;
    }

    .hotspot-grid[b-s0s3sphtwj] {
        grid-template-columns: 1fr;
    }

    .activity-type-grid[b-s0s3sphtwj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .breed-item[b-s0s3sphtwj] {
        grid-template-columns: 120px 1fr 80px;
    }
}
/* /Components/Pages/Admin/Settings.razor.rz.scp.css */
/* ================================================
   Admin Settings Page Styles
   PetFindrz Admin Portal
   ================================================ */

.settings-page[b-uciwxupi31] {
    min-height: 100%;
}

/* ================================================
   PAGE HEADER
   ================================================ */
.page-header[b-uciwxupi31] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-info[b-uciwxupi31] {
    flex: 1;
}

.page-title[b-uciwxupi31] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.title-icon[b-uciwxupi31]  .rzi {
    font-size: 1.75rem !important;
    color: #3b82f6 !important;
}

.page-subtitle[b-uciwxupi31] {
    color: #64748b;
    margin: 0.25rem 0 0 0;
    font-size: 0.9375rem;
}

.header-actions[b-uciwxupi31] {
    display: flex;
    gap: 0.75rem;
}

/* ================================================
   STATS ROW
   ================================================ */
.stats-row[b-uciwxupi31] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-uciwxupi31] {
    background: #ffffff;
    border-radius: 0.625rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.stat-card:hover[b-uciwxupi31] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.stat-card.stat-warning[b-uciwxupi31] {
    border-color: #f59e0b;
    background: #fffbeb;
}

.stat-icon[b-uciwxupi31] {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon[b-uciwxupi31]  .rzi {
    font-size: 1.25rem !important;
    color: #ffffff !important;
}

.stat-icon-roles[b-uciwxupi31] { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.stat-icon-breeds[b-uciwxupi31] { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.stat-icon-active[b-uciwxupi31] { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.stat-icon-inactive[b-uciwxupi31] { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.stat-icon-types[b-uciwxupi31] { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.stat-icon-enums[b-uciwxupi31] { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }

.stat-content[b-uciwxupi31] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-uciwxupi31] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.stat-label[b-uciwxupi31] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ================================================
   TABS CONTAINER
   ================================================ */
.settings-tabs-container[b-uciwxupi31] {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.settings-tabs[b-uciwxupi31]  .rz-tabview-nav {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 1rem;
}

.settings-tabs[b-uciwxupi31]  .rz-tabview-nav-link {
    padding: 1rem 1.5rem;
    font-weight: 500;
    color: #64748b;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.settings-tabs[b-uciwxupi31]  .rz-tabview-nav-link:hover {
    color: #3b82f6;
}

.settings-tabs[b-uciwxupi31]  .rz-tabview-nav-link.rz-state-active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: transparent;
}

.settings-tabs[b-uciwxupi31]  .rz-tabview-panels {
    padding: 0;
}

/* ================================================
   TAB CONTENT
   ================================================ */
.tab-content[b-uciwxupi31] {
    padding: 1.5rem;
}

.tab-header[b-uciwxupi31] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.tab-header h3[b-uciwxupi31] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.tab-description[b-uciwxupi31] {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0.25rem 0 0 0;
}

/* ================================================
   ROLE GRID
   ================================================ */
.role-grid[b-uciwxupi31] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.role-card[b-uciwxupi31] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.625rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.role-card:hover[b-uciwxupi31] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.role-card.system-role[b-uciwxupi31] {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.role-header[b-uciwxupi31] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.role-icon[b-uciwxupi31] {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.role-icon[b-uciwxupi31]  .rzi {
    font-size: 1.25rem !important;
    color: #ffffff !important;
}

.system-role .role-icon[b-uciwxupi31] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.role-info[b-uciwxupi31] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.role-name[b-uciwxupi31] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.system-badge[b-uciwxupi31] {
    font-size: 0.6875rem !important;
}

.role-stats[b-uciwxupi31] {
    margin-bottom: 0.75rem;
}

.user-count[b-uciwxupi31] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: #64748b;
}

.user-count[b-uciwxupi31]  .rzi {
    font-size: 1rem !important;
}

.role-actions[b-uciwxupi31] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}

/* ================================================
   FILTERS CARD
   ================================================ */
.filters-card[b-uciwxupi31] {
    background: #f8fafc;
    border-radius: 0.625rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
}

.filters-header[b-uciwxupi31] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.filters-header h4[b-uciwxupi31] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filters-grid[b-uciwxupi31] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.filters-grid-4[b-uciwxupi31] {
    grid-template-columns: repeat(4, 1fr);
}

.filter-group[b-uciwxupi31] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.filter-group label[b-uciwxupi31] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ================================================
   DATA CARD / GRID
   ================================================ */
.data-card[b-uciwxupi31] {
    background: #ffffff;
    border-radius: 0.625rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.breeds-grid[b-uciwxupi31]  .rz-data-grid {
    border: none;
}

.breeds-grid[b-uciwxupi31]  .rz-datatable-thead > tr > th {
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.8125rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.breeds-grid[b-uciwxupi31]  .rz-datatable-tbody > tr > td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.breeds-grid[b-uciwxupi31]  .rz-datatable-tbody > tr:hover > td {
    background: #f8fafc;
}

.breed-name-cell[b-uciwxupi31] {
    display: flex;
    flex-direction: column;
}

.breed-name[b-uciwxupi31] {
    font-weight: 600;
    color: #1e293b;
}

.size-text[b-uciwxupi31] {
    color: #64748b;
}

.coat-type[b-uciwxupi31] {
    color: #64748b;
    font-size: 0.875rem;
}

.rank-badge[b-uciwxupi31] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.action-buttons[b-uciwxupi31] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

/* ================================================
   ENUM GRID
   ================================================ */
.enum-grid[b-uciwxupi31] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.enum-card[b-uciwxupi31] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.625rem;
    overflow: hidden;
}

.enum-header[b-uciwxupi31] {
    background: #f8fafc;
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.enum-header h4[b-uciwxupi31] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.enum-description[b-uciwxupi31] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0.25rem 0 0 0;
}

.enum-values[b-uciwxupi31] {
    padding: 0;
}

.enum-table[b-uciwxupi31] {
    width: 100%;
    border-collapse: collapse;
}

.enum-table th[b-uciwxupi31] {
    text-align: left;
    padding: 0.625rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.enum-table td[b-uciwxupi31] {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.enum-table tr:last-child td[b-uciwxupi31] {
    border-bottom: none;
}

.enum-value[b-uciwxupi31] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8125rem;
    color: #8b5cf6;
    background: #f5f3ff;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    display: inline-block;
}

.enum-name[b-uciwxupi31] {
    font-size: 0.875rem;
    color: #1e293b;
}

/* ================================================
   DIALOG STYLES
   ================================================ */
.modal-backdrop[b-uciwxupi31] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: fadeIn-b-uciwxupi31 0.2s ease;
}

.dialog-panel[b-uciwxupi31] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    z-index: 1001;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: slideIn-b-uciwxupi31 0.2s ease;
    display: flex;
    flex-direction: column;
}

.dialog-panel-lg[b-uciwxupi31] {
    max-width: 720px;
}

.dialog-header[b-uciwxupi31] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.dialog-header h2[b-uciwxupi31] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dialog-content[b-uciwxupi31] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.dialog-footer[b-uciwxupi31] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* ================================================
   FORM STYLES
   ================================================ */
.form-group[b-uciwxupi31] {
    margin-bottom: 1rem;
}

.form-group label[b-uciwxupi31] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 0.375rem;
}

.form-group .required[b-uciwxupi31] {
    color: #ef4444;
}

.form-grid[b-uciwxupi31] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.form-group-full[b-uciwxupi31] {
    grid-column: span 2;
}

.range-inputs[b-uciwxupi31] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.range-inputs[b-uciwxupi31]  .rz-spinner {
    flex: 1;
}

.range-separator[b-uciwxupi31] {
    color: #64748b;
    font-size: 0.875rem;
}

/* ================================================
   EMPTY STATE
   ================================================ */
.empty-state[b-uciwxupi31] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #64748b;
}

.empty-state[b-uciwxupi31]  .rzi {
    font-size: 3rem !important;
    color: #cbd5e1 !important;
    margin-bottom: 1rem;
}

.empty-state p[b-uciwxupi31] {
    margin: 0;
    font-size: 0.9375rem;
}

/* ================================================
   ANIMATIONS
   ================================================ */
@keyframes fadeIn-b-uciwxupi31 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-uciwxupi31 {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1200px) {
    .stats-row[b-uciwxupi31] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .filters-grid[b-uciwxupi31],
    .filters-grid-4[b-uciwxupi31] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-header[b-uciwxupi31] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .stats-row[b-uciwxupi31] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filters-grid[b-uciwxupi31],
    .filters-grid-4[b-uciwxupi31] {
        grid-template-columns: 1fr;
    }
    
    .role-grid[b-uciwxupi31] {
        grid-template-columns: 1fr;
    }
    
    .enum-grid[b-uciwxupi31] {
        grid-template-columns: 1fr;
    }
    
    .dialog-panel[b-uciwxupi31] {
        width: 95%;
        max-height: 85vh;
    }
    
    .form-grid[b-uciwxupi31] {
        grid-template-columns: 1fr;
    }
    
    .form-group-full[b-uciwxupi31] {
        grid-column: span 1;
    }

    .config-stats-row[b-uciwxupi31] {
        grid-template-columns: repeat(2, 1fr);
    }

    .config-value-row[b-uciwxupi31] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .config-value-field[b-uciwxupi31] {
        width: 100%;
    }
}

/* ================================================
   CONFIGURATION TAB STYLES
   ================================================ */

/* Tab Header with Actions */
.tab-header-info[b-uciwxupi31] {
    flex: 1;
}

.tab-header-actions[b-uciwxupi31] {
    display: flex;
    gap: 0.5rem;
}

/* Config Stats Row */
.config-stats-row[b-uciwxupi31] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.config-stat-card[b-uciwxupi31] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.625rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.config-stat-card:hover[b-uciwxupi31] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.config-stat-card.config-stat-warning[b-uciwxupi31] {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}

.config-stat-icon[b-uciwxupi31] {
    font-size: 1.5rem !important;
}

.config-stat-icon[b-uciwxupi31]  .rzi {
    font-size: 1.5rem !important;
}

.config-stat-env[b-uciwxupi31] { color: #22c55e; }
.config-stat-runtime[b-uciwxupi31] { color: #3b82f6; }
.config-stat-total[b-uciwxupi31] { color: #8b5cf6; }
.config-stat-sensitive[b-uciwxupi31] { color: #f59e0b; }
.config-stat-notset[b-uciwxupi31] { color: #ef4444; }

.config-stat-info[b-uciwxupi31] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.config-stat-value[b-uciwxupi31] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.config-stat-label[b-uciwxupi31] {
    font-size: 0.6875rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Config Groups */
.config-groups[b-uciwxupi31] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.config-group-card[b-uciwxupi31] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.config-group-card:hover[b-uciwxupi31] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.config-group-header[b-uciwxupi31] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid #e2e8f0;
}

.config-group-title[b-uciwxupi31] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.config-group-icon[b-uciwxupi31] {
    width: 42px;
    height: 42px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.config-group-icon[b-uciwxupi31]  .rzi {
    font-size: 1.375rem !important;
    color: #ffffff !important;
}

/* Group Icon Colors */
.config-icon-runtime[b-uciwxupi31] { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.config-icon-database[b-uciwxupi31] { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.config-icon-azure[b-uciwxupi31] { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
.config-icon-auth[b-uciwxupi31] { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.config-icon-payment[b-uciwxupi31] { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.config-icon-email[b-uciwxupi31] { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.config-icon-security[b-uciwxupi31] { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.config-icon-cache[b-uciwxupi31] { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); }
.config-icon-logging[b-uciwxupi31] { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }
.config-icon-features[b-uciwxupi31] { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }

.config-group-info h4[b-uciwxupi31] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.config-group-description[b-uciwxupi31] {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 0.125rem;
    display: block;
}

/* Config Values */
.config-group-values[b-uciwxupi31] {
    padding: 0.5rem 0;
}

.config-value-row[b-uciwxupi31] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s ease;
}

.config-value-row:last-child[b-uciwxupi31] {
    border-bottom: none;
}

.config-value-row:hover[b-uciwxupi31] {
    background: #f8fafc;
}

.config-value-row.config-value-notset[b-uciwxupi31] {
    background: #fef2f2;
}

.config-value-row.config-value-notset:hover[b-uciwxupi31] {
    background: #fee2e2;
}

.config-value-icon[b-uciwxupi31] {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.config-value-icon[b-uciwxupi31]  .rzi {
    font-size: 1rem !important;
    color: #64748b !important;
}

.config-value-row.config-value-notset .config-value-icon[b-uciwxupi31] {
    background: #fecaca;
}

.config-value-row.config-value-notset .config-value-icon[b-uciwxupi31]  .rzi {
    color: #dc2626 !important;
}

.config-value-content[b-uciwxupi31] {
    flex: 1;
    min-width: 0;
}

.config-value-header[b-uciwxupi31] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.config-value-name[b-uciwxupi31] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1e293b;
}

.config-value-badges[b-uciwxupi31] {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.config-badge[b-uciwxupi31] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.config-badge[b-uciwxupi31]  .rzi {
    font-size: 0.75rem !important;
}

.config-badge-sensitive[b-uciwxupi31] {
    background: #fef3c7;
    color: #92400e;
}

.config-badge-source[b-uciwxupi31] {
    background: #f1f5f9;
    color: #475569;
}

.config-badge-appsettings[b-uciwxupi31] { background: #dbeafe; color: #1e40af; }
.config-badge-environment[b-uciwxupi31] { background: #d1fae5; color: #065f46; }
.config-badge-connectionstring[b-uciwxupi31] { background: #ede9fe; color: #5b21b6; }
.config-badge-generated[b-uciwxupi31] { background: #f3e8ff; color: #7c3aed; }
.config-badge-keyvault[b-uciwxupi31] { background: #fce7f3; color: #9d174d; }
.config-badge-aspire[b-uciwxupi31] { background: #cffafe; color: #0e7490; }

.config-value-key[b-uciwxupi31] {
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #94a3b8;
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.config-value-field[b-uciwxupi31] {
    width: 320px;
    flex-shrink: 0;
    position: relative;
}

.config-input[b-uciwxupi31] {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.8125rem !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

.config-input[b-uciwxupi31]  input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

.config-input.config-input-notset[b-uciwxupi31] {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #dc2626 !important;
    font-style: italic !important;
}

.config-input.config-input-sensitive[b-uciwxupi31]  input {
    letter-spacing: 0.1em;
}

.config-not-set-indicator[b-uciwxupi31] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #f59e0b;
}

.config-not-set-indicator[b-uciwxupi31]  .rzi {
    font-size: 1rem !important;
}

/* Config Footer */
.config-footer[b-uciwxupi31] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin-top: 1rem;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.8125rem;
}

.config-timestamp[b-uciwxupi31],
.config-version[b-uciwxupi31] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.config-timestamp[b-uciwxupi31]  .rzi,
.config-version[b-uciwxupi31]  .rzi {
    font-size: 1rem !important;
    color: #94a3b8 !important;
}

/* Config Loading */
.config-loading[b-uciwxupi31] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: #64748b;
    gap: 1rem;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .config-stats-row[b-uciwxupi31] {
        grid-template-columns: repeat(3, 1fr);
    }

    .config-value-field[b-uciwxupi31] {
        width: 260px;
    }
}

@media (max-width: 992px) {
    .config-value-field[b-uciwxupi31] {
        width: 200px;
    }
}


/* /Components/Pages/Admin/Sightings.razor.rz.scp.css */
/* ================================================
   Admin Sighting Management Page Styles
   PetFindrz Admin Portal
   ================================================ */

.sightings-page[b-bn069jw6v5] {
    min-height: 100%;
}

/* ================================================
   PAGE HEADER
   ================================================ */
.page-header[b-bn069jw6v5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-info[b-bn069jw6v5] {
    flex: 1;
}

.page-title[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.title-icon[b-bn069jw6v5]  .rzi {
    font-size: 1.75rem !important;
    color: #f97316 !important;
}

.page-subtitle[b-bn069jw6v5] {
    color: #64748b;
    margin: 0.25rem 0 0 0;
    font-size: 0.9375rem;
}

.header-actions[b-bn069jw6v5] {
    display: flex;
    gap: 0.75rem;
}

/* ================================================
   STATS ROW
   ================================================ */
.stats-row[b-bn069jw6v5] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-card[b-bn069jw6v5] {
    background: #ffffff;
    border-radius: 0.625rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.stat-card:hover[b-bn069jw6v5] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.stat-card.stat-warning[b-bn069jw6v5] {
    border-color: #f59e0b;
    background: #fffbeb;
}

.stat-card.stat-highlight[b-bn069jw6v5] {
    border-color: #8b5cf6;
    background: #f5f3ff;
}

.stat-card.stat-success[b-bn069jw6v5] {
    border-color: #22c55e;
    background: #f0fdf4;
}

.stat-icon[b-bn069jw6v5] {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon[b-bn069jw6v5]  .rzi {
    font-size: 1.25rem !important;
    color: #ffffff !important;
}

.stat-icon-total[b-bn069jw6v5] { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.stat-icon-active[b-bn069jw6v5] { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.stat-icon-lost[b-bn069jw6v5] { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.stat-icon-found[b-bn069jw6v5] { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.stat-icon-matches[b-bn069jw6v5] { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.stat-icon-reunited[b-bn069jw6v5] { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }

.stat-content[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-bn069jw6v5] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.stat-label[b-bn069jw6v5] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ================================================
   TYPE BREAKDOWN
   ================================================ */
.type-breakdown[b-bn069jw6v5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.type-chip[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 2rem;
    font-size: 0.875rem;
    color: #475569;
}

.type-chip[b-bn069jw6v5]  .rzi {
    font-size: 1rem !important;
    color: #64748b !important;
}

.type-chip.highlight[b-bn069jw6v5] {
    background: #f0fdf4;
    border-color: #22c55e;
    color: #166534;
}

.type-chip.highlight[b-bn069jw6v5]  .rzi {
    color: #22c55e !important;
}

.type-chip.danger[b-bn069jw6v5] {
    background: #fef2f2;
    border-color: #ef4444;
    color: #dc2626;
}

.type-chip.danger[b-bn069jw6v5]  .rzi {
    color: #ef4444 !important;
}

/* ================================================
   FILTERS CARD
   ================================================ */
.filters-card[b-bn069jw6v5] {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
}

.filters-header[b-bn069jw6v5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.filters-header h3[b-bn069jw6v5] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filters-grid[b-bn069jw6v5] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.filter-group[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.filter-group label[b-bn069jw6v5] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ================================================
   BULK ACTIONS BAR
   ================================================ */
.bulk-actions-bar[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.selection-count[b-bn069jw6v5] {
    font-weight: 600;
    color: #1e293b;
}

.bulk-buttons[b-bn069jw6v5] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ================================================
   DATA CARD / GRID
   ================================================ */
.data-card[b-bn069jw6v5] {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.sightings-grid[b-bn069jw6v5]  .rz-data-grid {
    border: none;
}

.sightings-grid[b-bn069jw6v5]  .rz-datatable-thead > tr > th {
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.8125rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.sightings-grid[b-bn069jw6v5]  .rz-datatable-tbody > tr > td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.sightings-grid[b-bn069jw6v5]  .rz-datatable-tbody > tr:hover > td {
    background: #f8fafc;
}

.sightings-grid[b-bn069jw6v5]  .rz-state-highlight > td {
    background: #fef3c7 !important;
}

/* Sighting Cell */
.sighting-cell[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sighting-avatar[b-bn069jw6v5] {
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.sighting-avatar img[b-bn069jw6v5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sighting-avatar .avatar-icon[b-bn069jw6v5]  .rzi {
    font-size: 1.25rem !important;
    color: #3b82f6 !important;
}

.sighting-info[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sighting-type[b-bn069jw6v5] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sighting-breed[b-bn069jw6v5] {
    font-size: 0.8125rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status Cell */
.status-cell[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.match-indicator[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #8b5cf6;
    font-weight: 500;
}

.match-indicator[b-bn069jw6v5]  .rzi {
    font-size: 0.875rem !important;
    color: #8b5cf6 !important;
}

/* Location Cell */
.location-cell[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
}

.location-text[b-bn069jw6v5] {
    font-size: 0.875rem;
    color: #475569;
}

.location-text.truncate[b-bn069jw6v5] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* Reporter Cell */
.reporter-cell[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reporter-avatar[b-bn069jw6v5] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.reporter-avatar.anonymous[b-bn069jw6v5] {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.reporter-avatar.anonymous[b-bn069jw6v5]  .rzi {
    font-size: 1rem !important;
    color: #94a3b8 !important;
}

.reporter-avatar img[b-bn069jw6v5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials[b-bn069jw6v5] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.reporter-info[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.reporter-name[b-bn069jw6v5] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reporter-name.anonymous[b-bn069jw6v5] {
    color: #94a3b8;
    font-style: italic;
}

.reporter-email[b-bn069jw6v5] {
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reporter-phone[b-bn069jw6v5] {
    font-size: 0.6875rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anonymous-badge[b-bn069jw6v5] {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.625rem;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.anonymous-badge[b-bn069jw6v5]  .rzi {
    font-size: 0.625rem !important;
}

/* Matched Pet Cell */
.matched-pet-cell[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.matched-pet-avatar[b-bn069jw6v5] {
    width: 32px;
    height: 32px;
    border-radius: 0.375rem;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.matched-pet-avatar img[b-bn069jw6v5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.matched-pet-avatar .avatar-icon[b-bn069jw6v5]  .rzi {
    font-size: 1rem !important;
    color: #22c55e !important;
}

.matched-pet-info[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.owner-link[b-bn069jw6v5] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.15s ease;
}

.owner-link:hover[b-bn069jw6v5] {
    color: #2563eb;
    text-decoration: underline;
}

.owner-link[b-bn069jw6v5]  .rzi {
    font-size: 0.75rem !important;
}

/* Combined Date Cell */
.date-cell[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.date-primary[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1e293b;
}

.date-primary[b-bn069jw6v5]  .rzi {
    font-size: 0.875rem !important;
    color: #64748b !important;
}

.date-secondary[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: #94a3b8;
}

.date-secondary[b-bn069jw6v5]  .rzi {
    font-size: 0.75rem !important;
    color: #cbd5e1 !important;
}

.date-secondary.date-primary[b-bn069jw6v5] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1e293b;
}

.date-secondary.date-primary[b-bn069jw6v5]  .rzi {
    font-size: 0.875rem !important;
    color: #64748b !important;
}

/* Match Count */
.match-count[b-bn069jw6v5] {
    font-size: 0.8125rem;
    color: #8b5cf6;
    font-weight: 500;
}

/* Date Text */
.date-text[b-bn069jw6v5] {
    font-size: 0.8125rem;
    color: #475569;
}

/* Action Buttons */
.action-buttons[b-bn069jw6v5] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

/* Loading Placeholder */
.loading-placeholder[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: #64748b;
}

/* ================================================
   MODAL / DIALOG
   ================================================ */
.modal-backdrop[b-bn069jw6v5] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sighting-dialog[b-bn069jw6v5] {
    position: fixed;
    inset: 0;
    margin: auto;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 9991;
    width: 90%;
    max-width: 950px;
    height: fit-content;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.action-dialog[b-bn069jw6v5] {
    position: fixed;
    inset: 0;
    margin: auto;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 9992;
    width: 90%;
    max-width: 480px;
    height: fit-content;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.action-dialog.danger[b-bn069jw6v5] {
    border: 2px solid #ef4444;
}

.dialog-header[b-bn069jw6v5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.dialog-header h2[b-bn069jw6v5] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dialog-content[b-bn069jw6v5] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.dialog-footer[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* Dialog Form */
.dialog-form[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.form-group[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-group label[b-bn069jw6v5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.warning-text[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #dc2626;
    font-weight: 500;
}

.warning-text[b-bn069jw6v5]  .rzi {
    color: #dc2626 !important;
}

/* Profile Header in Dialog */
.profile-header[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.profile-avatar[b-bn069jw6v5] {
    width: 80px;
    height: 80px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar img[b-bn069jw6v5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar .avatar-icon-lg[b-bn069jw6v5]  .rzi {
    font-size: 2.5rem !important;
    color: #3b82f6 !important;
}

.profile-info[b-bn069jw6v5] {
    flex: 1;
}

.profile-info h3[b-bn069jw6v5] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.profile-info p[b-bn069jw6v5] {
    color: #64748b;
    margin: 0 0 0.75rem 0;
}

.profile-badges[b-bn069jw6v5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Detail Grid */
.detail-grid[b-bn069jw6v5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.detail-section[b-bn069jw6v5] {
    background: #f8fafc;
    border-radius: 0.5rem;
    padding: 1rem;
}

.detail-section h4[b-bn069jw6v5] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.detail-row[b-bn069jw6v5] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.detail-row:last-child[b-bn069jw6v5] {
    border-bottom: none;
}

.detail-label[b-bn069jw6v5] {
    font-size: 0.8125rem;
    color: #64748b;
}

.detail-value[b-bn069jw6v5] {
    font-size: 0.8125rem;
    color: #1e293b;
    font-weight: 500;
    text-align: right;
}

.detail-value.monospace[b-bn069jw6v5] {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
}

.notes-text[b-bn069jw6v5] {
    color: #475569;
    line-height: 1.6;
    font-size: 0.875rem;
}

/* Reporter Detail */
.reporter-detail[b-bn069jw6v5] {
    padding: 1rem 0;
}

.reporter-header[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.reporter-avatar-lg[b-bn069jw6v5] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.reporter-avatar-lg img[b-bn069jw6v5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials-lg[b-bn069jw6v5] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #64748b;
}

.reporter-header h4[b-bn069jw6v5] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.reporter-header p[b-bn069jw6v5] {
    color: #64748b;
    margin: 0.25rem 0 0 0;
}

.reporter-actions[b-bn069jw6v5] {
    display: flex;
    gap: 0.5rem;
}

.anonymous-notice[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: #94a3b8;
}

.anonymous-notice[b-bn069jw6v5]  .rzi {
    font-size: 3rem !important;
    color: #cbd5e1 !important;
    margin-bottom: 1rem;
}

/* Photos Grid */
.photos-grid[b-bn069jw6v5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.photos-source-notice[b-bn069jw6v5] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    color: #1d4ed8;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}

.photos-source-notice[b-bn069jw6v5]  .rzi {
    font-size: 1rem !important;
    color: #3b82f6 !important;
}

.photo-card[b-bn069jw6v5] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f1f5f9;
}

.photo-card img[b-bn069jw6v5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-card.primary[b-bn069jw6v5] {
    border: 2px solid #f97316;
}

.primary-badge[b-bn069jw6v5] {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    background: #f97316;
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
}

.no-photos[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #94a3b8;
    grid-column: 1 / -1;
}

.no-photos[b-bn069jw6v5]  .rzi {
    font-size: 3rem !important;
    color: #cbd5e1 !important;
    margin-bottom: 0.5rem;
}

/* Matches Panel */
.matches-panel[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.match-card[b-bn069jw6v5] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.match-card:hover[b-bn069jw6v5] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.match-card.confirmed[b-bn069jw6v5] {
    border-color: #22c55e;
    background: #f0fdf4;
}

.match-card.rejected[b-bn069jw6v5] {
    border-color: #ef4444;
    background: #fef2f2;
    opacity: 0.7;
}

.match-header[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.match-pet-avatar[b-bn069jw6v5] {
    width: 56px;
    height: 56px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.match-pet-avatar img[b-bn069jw6v5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.match-pet-avatar[b-bn069jw6v5]  .rzi {
    font-size: 1.5rem !important;
    color: #ea580c !important;
}

.match-pet-info[b-bn069jw6v5] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.match-pet-name[b-bn069jw6v5] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.match-pet-breed[b-bn069jw6v5] {
    font-size: 0.8125rem;
    color: #64748b;
}

.match-owner[b-bn069jw6v5] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

.match-score[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 0.5rem;
}

.score-value[b-bn069jw6v5] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #166534;
}

.score-label[b-bn069jw6v5] {
    font-size: 0.625rem;
    color: #22c55e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.match-details[b-bn069jw6v5] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
}

.match-distance[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.match-distance[b-bn069jw6v5]  .rzi {
    font-size: 1rem !important;
}

.match-reasoning[b-bn069jw6v5] {
    font-size: 0.8125rem;
    color: #475569;
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
}

.match-status-row[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.notified-badge[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #22c55e;
}

.notified-badge[b-bn069jw6v5]  .rzi {
    font-size: 1rem !important;
    color: #22c55e !important;
}

.match-actions[b-bn069jw6v5] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
}

.no-matches[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #94a3b8;
}

.no-matches[b-bn069jw6v5]  .rzi {
    font-size: 3rem !important;
    color: #cbd5e1 !important;
    margin-bottom: 0.5rem;
}

/* Admin Actions Panel */
.admin-actions-panel[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.action-section[b-bn069jw6v5] {
    background: #f8fafc;
    border-radius: 0.5rem;
    padding: 1.25rem;
}

.action-section h4[b-bn069jw6v5] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.action-desc[b-bn069jw6v5] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 1rem 0;
}

.action-form[b-bn069jw6v5] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.action-section.action-danger[b-bn069jw6v5] {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.action-section.action-danger h4[b-bn069jw6v5] {
    color: #dc2626;
}

.matched-pet-info[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #ffffff;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.matched-pet-info[b-bn069jw6v5]  .rzi {
    font-size: 2rem !important;
    color: #22c55e !important;
}

.matched-pet-info strong[b-bn069jw6v5] {
    font-size: 1rem;
    color: #1e293b;
}

.matched-pet-info p[b-bn069jw6v5] {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: #64748b;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1400px) {
    .stats-row[b-bn069jw6v5] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .filters-grid[b-bn069jw6v5] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .stats-row[b-bn069jw6v5] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters-grid[b-bn069jw6v5] {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail-grid[b-bn069jw6v5] {
        grid-template-columns: 1fr;
    }

    .sighting-dialog[b-bn069jw6v5] {
        max-width: 95%;
    }
}

@media (max-width: 768px) {
    .page-header[b-bn069jw6v5] {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-row[b-bn069jw6v5] {
        grid-template-columns: 1fr;
    }

    .filters-grid[b-bn069jw6v5] {
        grid-template-columns: 1fr;
    }

    .bulk-actions-bar[b-bn069jw6v5] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .bulk-buttons[b-bn069jw6v5] {
        justify-content: center;
    }

    .profile-header[b-bn069jw6v5] {
        flex-direction: column;
        text-align: center;
    }

    .match-header[b-bn069jw6v5] {
        flex-wrap: wrap;
    }

    .match-actions[b-bn069jw6v5] {
        flex-wrap: wrap;
    }
}

/* Utility Classes */
.text-muted[b-bn069jw6v5] {
    color: #94a3b8;
}

.mt-3[b-bn069jw6v5] {
    margin-top: 1rem;
}

.w-100[b-bn069jw6v5] {
    width: 100%;
}

/* ================================================
   CLICKABLE CELLS
   ================================================ */
.clickable[b-bn069jw6v5] {
    cursor: pointer;
    transition: all 0.15s ease;
}

.clickable:hover[b-bn069jw6v5] {
    background: rgba(59, 130, 246, 0.04);
}

.sighting-cell.clickable[b-bn069jw6v5] {
    padding: 0.25rem;
    margin: -0.25rem;
    border-radius: 0.5rem;
    position: relative;
}

.sighting-cell .quick-view-icon[b-bn069jw6v5] {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sighting-cell.clickable:hover .quick-view-icon[b-bn069jw6v5] {
    opacity: 1;
}

.sighting-cell .quick-view-icon[b-bn069jw6v5]  .rzi {
    font-size: 0.875rem !important;
    color: #3b82f6 !important;
}

/* Sighting Type Classes */
.sighting-avatar.sighting-lost[b-bn069jw6v5] {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
}

.sighting-avatar.sighting-found[b-bn069jw6v5] {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
}

.sighting-avatar.sighting-community[b-bn069jw6v5] {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
}

.sighting-avatar.sighting-stolen[b-bn069jw6v5] {
    background: linear-gradient(135deg, #fecaca 0%, #ef4444 50%);
}

/* ================================================
   PET/MATCHES COLUMN STYLES
   ================================================ */
.pet-match-cell[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    border-radius: 0.375rem;
}

.pet-match-cell.clickable:hover[b-bn069jw6v5] {
    background: rgba(34, 197, 94, 0.08);
}

.pet-match-avatar[b-bn069jw6v5] {
    width: 32px;
    height: 32px;
    border-radius: 0.375rem;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.pet-match-avatar.lost[b-bn069jw6v5] {
    background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
    border: 2px solid #f59e0b;
}

.pet-match-avatar.matched[b-bn069jw6v5] {
    background: linear-gradient(135deg, #dcfce7 0%, #86efac 100%);
    border: 2px solid #22c55e;
}

.pet-match-avatar img[b-bn069jw6v5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-match-avatar .avatar-icon[b-bn069jw6v5]  .rzi {
    font-size: 1rem !important;
    color: #64748b !important;
}

.pet-match-info[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.pet-context-label[b-bn069jw6v5] {
    font-size: 0.625rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-weight: 500;
}

.pet-context-label.confirmed[b-bn069jw6v5] {
    color: #16a34a;
}

/* Match Count Cell */
.match-count-cell[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-radius: 0.375rem;
    border: 1px solid #c4b5fd;
}

.match-count-cell.clickable:hover[b-bn069jw6v5] {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border-color: #a78bfa;
}

.match-count-indicator[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.match-count-indicator[b-bn069jw6v5]  .rzi {
    font-size: 0.875rem !important;
    color: #7c3aed !important;
}

.match-count-indicator .count[b-bn069jw6v5] {
    font-weight: 700;
    font-size: 0.875rem;
    color: #7c3aed;
}

.match-count-cell .match-label[b-bn069jw6v5] {
    font-size: 0.6875rem;
    color: #8b5cf6;
    font-weight: 500;
}

.no-matches[b-bn069jw6v5] {
    font-size: 0.75rem;
    font-style: italic;
}

/* ================================================
   QUICK VIEW DIALOG
   ================================================ */
.quick-view-dialog[b-bn069jw6v5] {
    position: fixed;
    inset: 0;
    margin: auto;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 9992;
    width: 90%;
    max-width: 720px;
    height: fit-content;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.quick-view-header[b-bn069jw6v5] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.quick-view-title[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quick-view-title h2[b-bn069jw6v5] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.quick-view-content[b-bn069jw6v5] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.quick-view-loading[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: #64748b;
}

.quick-view-grid[b-bn069jw6v5] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
}

/* Quick View Photo Section */
.quick-view-photo-section[b-bn069jw6v5] {
    background: #f8fafc;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-right: 1px solid #e2e8f0;
}

.quick-view-main-photo[b-bn069jw6v5] {
    aspect-ratio: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.quick-view-main-photo img[b-bn069jw6v5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quick-view-photo-strip[b-bn069jw6v5] {
    display: flex;
    gap: 0.5rem;
}

.quick-view-photo-strip img[b-bn069jw6v5] {
    width: 56px;
    height: 56px;
    border-radius: 0.375rem;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.quick-view-photo-strip img:hover[b-bn069jw6v5] {
    border-color: #f97316;
}

.more-photos[b-bn069jw6v5] {
    width: 56px;
    height: 56px;
    border-radius: 0.375rem;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 600;
}

.quick-view-no-photo[b-bn069jw6v5] {
    aspect-ratio: 1;
    border-radius: 0.5rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #94a3b8;
}

.quick-view-no-photo[b-bn069jw6v5]  .rzi {
    font-size: 3rem !important;
    color: #cbd5e1 !important;
}

/* Pet Photo Label (when showing linked pet's photo) */
.pet-photo-label[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 0.375rem;
    color: #c2410c;
    font-size: 0.8125rem;
    font-weight: 500;
}

.pet-photo-label[b-bn069jw6v5]  .rzi {
    font-size: 1rem !important;
    color: #f97316 !important;
}

/* Quick View Info Section */
.quick-view-info-section[b-bn069jw6v5] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    max-height: 400px;
}

.quick-view-status-row[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ai-confidence[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: #6366f1;
    font-weight: 500;
}

.ai-confidence[b-bn069jw6v5]  .rzi {
    font-size: 1rem !important;
    color: #6366f1 !important;
}

.quick-view-section[b-bn069jw6v5] {
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0.5rem;
}

.quick-view-section h4[b-bn069jw6v5] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.quick-view-section h4[b-bn069jw6v5]  .rzi {
    font-size: 0.875rem !important;
    color: #94a3b8 !important;
}

.quick-view-details[b-bn069jw6v5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
}

.detail-item[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.detail-item .label[b-bn069jw6v5] {
    font-size: 0.6875rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.detail-item .value[b-bn069jw6v5] {
    font-size: 0.8125rem;
    color: #1e293b;
    font-weight: 500;
}

.detail-item .value.highlight[b-bn069jw6v5] {
    color: #22c55e;
}

.quick-view-location[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.location-text[b-bn069jw6v5] {
    font-size: 0.875rem;
    color: #1e293b;
    font-weight: 500;
}

.location-desc[b-bn069jw6v5] {
    font-size: 0.8125rem;
    color: #64748b;
}

.quick-view-dates[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.date-item[b-bn069jw6v5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.date-item .label[b-bn069jw6v5] {
    font-size: 0.75rem;
    color: #64748b;
}

.date-item .value[b-bn069jw6v5] {
    font-size: 0.8125rem;
    color: #1e293b;
    font-weight: 500;
}

/* Match Summary in Quick View */
.matches-summary[b-bn069jw6v5] {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #c4b5fd;
}

.matches-summary h4[b-bn069jw6v5] {
    color: #7c3aed;
}

.matches-summary h4[b-bn069jw6v5]  .rzi {
    color: #8b5cf6 !important;
}

.match-summary-list[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.match-summary-item[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0.375rem;
}

.match-pet-thumb[b-bn069jw6v5] {
    width: 28px;
    height: 28px;
    border-radius: 0.25rem;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.match-pet-thumb img[b-bn069jw6v5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.match-pet-thumb[b-bn069jw6v5]  .rzi {
    font-size: 0.875rem !important;
    color: #94a3b8 !important;
}

.match-pet-name[b-bn069jw6v5] {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.match-confidence[b-bn069jw6v5] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.match-confidence.confidence-high[b-bn069jw6v5] {
    background: #dcfce7;
    color: #16a34a;
}

.match-confidence.confidence-medium[b-bn069jw6v5] {
    background: #fef3c7;
    color: #d97706;
}

.match-confidence.confidence-low[b-bn069jw6v5] {
    background: #fee2e2;
    color: #dc2626;
}

.match-status-badge[b-bn069jw6v5] {
    font-size: 0.625rem !important;
}

.more-matches-link[b-bn069jw6v5] {
    text-align: center;
    font-size: 0.75rem;
    color: #7c3aed;
    font-weight: 500;
    padding: 0.25rem;
    cursor: pointer;
}

.quick-view-footer[b-bn069jw6v5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ================================================
   MATCHES DIALOG
   ================================================ */
.matches-dialog[b-bn069jw6v5] {
    position: fixed;
    inset: 0;
    margin: auto;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 9992;
    width: 90%;
    max-width: 600px;
    height: fit-content;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.matches-header[b-bn069jw6v5] {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-bottom: 1px solid #c4b5fd;
}

.matches-title[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.matches-icon[b-bn069jw6v5] {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.matches-icon[b-bn069jw6v5]  .rzi {
    font-size: 1.25rem !important;
    color: white !important;
}

.matches-title h2[b-bn069jw6v5] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.matches-subtitle[b-bn069jw6v5] {
    font-size: 0.8125rem;
    color: #64748b;
}

.matches-content[b-bn069jw6v5] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.matches-loading[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: #64748b;
}

.no-matches-state[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.no-matches-state[b-bn069jw6v5]  .rzi {
    font-size: 3rem !important;
    color: #cbd5e1 !important;
    margin-bottom: 0.5rem;
}

.no-matches-state h3[b-bn069jw6v5] {
    color: #64748b;
    margin: 0 0 0.5rem 0;
}

.no-matches-state p[b-bn069jw6v5] {
    color: #94a3b8;
    margin: 0;
}

.matches-list[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Match Card Styles for Dialog */
.matches-list .match-card[b-bn069jw6v5] {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0;
    overflow: hidden;
}

.match-card-header[b-bn069jw6v5] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

/* Match Score Section - positioned at left of card body */
.match-score-section[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.5rem;
    border-right: 1px solid #e2e8f0;
    margin-right: 0.5rem;
}

.match-confidence-indicator[b-bn069jw6v5] {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.match-confidence-indicator.confidence-high[b-bn069jw6v5] {
    background: #dcfce7;
    color: #16a34a;
}

.match-confidence-indicator.confidence-medium[b-bn069jw6v5] {
    background: #fef3c7;
    color: #d97706;
}

.match-confidence-indicator.confidence-low[b-bn069jw6v5] {
    background: #fee2e2;
    color: #dc2626;
}

.match-card-body[b-bn069jw6v5] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
}

.match-pet-photo[b-bn069jw6v5] {
    width: 80px;
    height: 80px;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f1f5f9;
    flex-shrink: 0;
}

.match-pet-photo img[b-bn069jw6v5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-photo-placeholder[b-bn069jw6v5] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}

.no-photo-placeholder[b-bn069jw6v5]  .rzi {
    font-size: 2rem !important;
    color: #94a3b8 !important;
}

.match-pet-details[b-bn069jw6v5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.match-pet-details h4[b-bn069jw6v5] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.pet-breed[b-bn069jw6v5] {
    font-size: 0.8125rem;
    color: #64748b;
}

.owner-info[b-bn069jw6v5], .distance-info[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #64748b;
}

.owner-info[b-bn069jw6v5]  .rzi,
.distance-info[b-bn069jw6v5]  .rzi {
    font-size: 0.875rem !important;
    color: #94a3b8 !important;
}

.match-reasoning[b-bn069jw6v5] {
    display: flex;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    background: #fffbeb;
    border-top: 1px solid #fef3c7;
    font-size: 0.8125rem;
    color: #92400e;
}

.match-reasoning[b-bn069jw6v5]  .rzi {
    font-size: 0.875rem !important;
    color: #f59e0b !important;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.notified-indicator[b-bn069jw6v5] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #f0fdf4;
    border-top: 1px solid #bbf7d0;
    font-size: 0.75rem;
    color: #16a34a;
}

.notified-indicator[b-bn069jw6v5]  .rzi {
    font-size: 0.875rem !important;
    color: #22c55e !important;
}

.match-card-actions[b-bn069jw6v5] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.matches-footer[b-bn069jw6v5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ================================================
   EMBEDDING STATUS ICONS
   ================================================ */
.embedding-icon[b-bn069jw6v5]  .rzi {
    font-size: 1rem !important;
}

.embedding-icon.has-embedding[b-bn069jw6v5]  .rzi {
    color: #22c55e !important;
}

.embedding-icon.no-embedding[b-bn069jw6v5]  .rzi {
    color: #cbd5e1 !important;
}

/* Embedding Badge (used in dialogs) */
.embedding-badge[b-bn069jw6v5] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.embedding-badge.has-embedding[b-bn069jw6v5] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.embedding-badge.has-embedding[b-bn069jw6v5]  .rzi {
    color: #22c55e !important;
    font-size: 0.875rem !important;
}

.embedding-badge.no-embedding[b-bn069jw6v5] {
    background: rgba(148, 163, 184, 0.1);
    color: #64748b;
}

.embedding-badge.no-embedding[b-bn069jw6v5]  .rzi {
    color: #94a3b8 !important;
    font-size: 0.875rem !important;
}

/* ================================================
   RESPONSIVE - Quick View & Matches Dialogs
   ================================================ */
@media (max-width: 768px) {
    .quick-view-dialog[b-bn069jw6v5] {
        max-width: 95%;
    }
    
    .quick-view-grid[b-bn069jw6v5] {
        grid-template-columns: 1fr;
    }
    
    .quick-view-photo-section[b-bn069jw6v5] {
        max-height: 200px;
    }
    
    .quick-view-details[b-bn069jw6v5] {
        grid-template-columns: 1fr;
    }
    
    .matches-dialog[b-bn069jw6v5] {
        max-width: 95%;
    }
    
    .match-card-body[b-bn069jw6v5] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .match-pet-details[b-bn069jw6v5] {
        align-items: center;
    }
}

/* ================================================
   MAP HERO HEADER (Sighting Detail Dialog)
   ================================================ */
.sighting-hero-header[b-bn069jw6v5] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #1e3a5f;
    border-radius: 0.75rem 0.75rem 0 0;
    position: relative;
    min-height: 180px;
    flex-shrink: 0;
}

.hero-header-overlay[b-bn069jw6v5] {
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.55) 0%,
        rgba(15, 23, 42, 0.7) 40%,
        rgba(15, 23, 42, 0.85) 100%
    );
    border-radius: 0.75rem 0.75rem 0 0;
    padding: 1.25rem 1.5rem 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 180px;
}

.hero-header-top[b-bn069jw6v5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-header-top h2[b-bn069jw6v5] {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-header-top h2[b-bn069jw6v5]  .rzi {
    color: rgba(255, 255, 255, 0.9) !important;
}

.hero-close-btn[b-bn069jw6v5]  .rzi {
    color: rgba(255, 255, 255, 0.8) !important;
}

.hero-close-btn:hover[b-bn069jw6v5]  .rzi {
    color: #ffffff !important;
}

/* Centered text info in hero header */
.hero-info-centered[b-bn069jw6v5] {
    text-align: center;
}

.hero-info-centered h3[b-bn069jw6v5] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero-info-centered p[b-bn069jw6v5] {
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 0.625rem 0;
    font-size: 0.9375rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hero-badges-centered[b-bn069jw6v5] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

/* Centered profile picture that overlaps hero into content */
.hero-profile-picture-container[b-bn069jw6v5] {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.hero-profile-picture[b-bn069jw6v5] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-profile-picture img[b-bn069jw6v5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-profile-picture .profile-icon-lg[b-bn069jw6v5]  .rzi {
    font-size: 2.5rem !important;
    color: #94a3b8 !important;
}

/* Add top padding to dialog-content to accommodate the overlapping profile picture */
.admin-modal-dialog.large > .dialog-content[b-bn069jw6v5] {
    padding-top: 4rem;
}

@media (max-width: 640px) {
    .hero-info-centered h3[b-bn069jw6v5] {
        font-size: 1.125rem;
    }

    .hero-profile-picture[b-bn069jw6v5] {
        width: 80px;
        height: 80px;
    }

    .hero-profile-picture-container[b-bn069jw6v5] {
        bottom: -40px;
    }

    .admin-modal-dialog.large > .dialog-content[b-bn069jw6v5] {
        padding-top: 3.25rem;
    }
}

/* ================================================
   RE-RUN AI MATCHING BUTTON & RESULTS
   ================================================ */
.rerun-result[b-bn069jw6v5] {
    font-size: 0.6875rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.rerun-result.success[b-bn069jw6v5] {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.rerun-result.error[b-bn069jw6v5] {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.rerun-result .rate-limited[b-bn069jw6v5] {
    color: #d97706;
}

.rerun-result .match-found[b-bn069jw6v5] {
    font-weight: 500;
}

.rerun-result .error-msg[b-bn069jw6v5] {
    font-weight: 500;
}

.rerun-result[b-bn069jw6v5]  .rzi {
    font-size: 0.75rem !important;
}

/* ================================================
   OUTCOME BADGES (Lost Pet History Tab)
   ================================================ */
.outcome-badge[b-bn069jw6v5] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

.outcome-badge[b-bn069jw6v5]  .rzi {
    font-size: 0.875rem !important;
}

.outcome-badge.reunited[b-bn069jw6v5] {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.outcome-badge.reunited[b-bn069jw6v5]  .rzi {
    color: #16a34a !important;
}

.outcome-badge.closed[b-bn069jw6v5] {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.outcome-badge.closed[b-bn069jw6v5]  .rzi {
    color: #475569 !important;
}

.outcome-badge.superseded[b-bn069jw6v5] {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.outcome-badge.superseded[b-bn069jw6v5]  .rzi {
    color: #d97706 !important;
}

/* ================================================
   MATCHES COLUMN LAYOUT
   ================================================ */
.matches-column[b-bn069jw6v5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ================================================
   REJECTED INDICATOR
   ================================================ */
.rejected-indicator[b-bn069jw6v5] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: #94a3b8;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.1);
}

.rejected-indicator[b-bn069jw6v5]  .rzi {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
}
/* /Components/Pages/Admin/Subscriptions.razor.rz.scp.css */
/* ================================================
   Admin Subscription Management Page Styles
   PetFindrz Admin Portal
   ================================================ */

.subscriptions-page[b-ago1zcl1d2] {
    min-height: 100%;
}

/* ================================================
   PAGE HEADER
   ================================================ */
.page-header[b-ago1zcl1d2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-info[b-ago1zcl1d2] {
    flex: 1;
}

.page-title[b-ago1zcl1d2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.title-icon[b-ago1zcl1d2]  .rzi {
    font-size: 1.75rem !important;
    color: #8b5cf6 !important;
}

.page-subtitle[b-ago1zcl1d2] {
    color: #64748b;
    margin: 0.25rem 0 0 0;
    font-size: 0.9375rem;
}

.header-actions[b-ago1zcl1d2] {
    display: flex;
    gap: 0.75rem;
}

/* ================================================
   STATS ROW
   ================================================ */
.stats-row[b-ago1zcl1d2] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-ago1zcl1d2] {
    background: #ffffff;
    border-radius: 0.625rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.stat-card:hover[b-ago1zcl1d2] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.stat-card.stat-warning[b-ago1zcl1d2] {
    border-color: #f59e0b;
    background: #fffbeb;
}

.stat-card.stat-danger[b-ago1zcl1d2] {
    border-color: #ef4444;
    background: #fef2f2;
}

.stat-card.stat-revenue[b-ago1zcl1d2] {
    border-color: #22c55e;
    background: #f0fdf4;
}

.stat-icon[b-ago1zcl1d2] {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon[b-ago1zcl1d2]  .rzi {
    font-size: 1.25rem !important;
    color: #ffffff !important;
}

.stat-icon-users[b-ago1zcl1d2] { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.stat-icon-total[b-ago1zcl1d2] { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.stat-icon-active[b-ago1zcl1d2] { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.stat-icon-trialing[b-ago1zcl1d2] { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.stat-icon-pastdue[b-ago1zcl1d2] { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.stat-icon-expiring[b-ago1zcl1d2] { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.stat-icon-mrr[b-ago1zcl1d2] { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }

.stat-content[b-ago1zcl1d2] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-ago1zcl1d2] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.stat-label[b-ago1zcl1d2] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ================================================
   FILTERS CARD
   ================================================ */
.filters-card[b-ago1zcl1d2] {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
}

.filters-header[b-ago1zcl1d2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.filters-header h3[b-ago1zcl1d2] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filters-grid[b-ago1zcl1d2] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.filter-group[b-ago1zcl1d2] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.filter-group label[b-ago1zcl1d2] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ================================================
   DATA CARD / GRID
   ================================================ */
.data-card[b-ago1zcl1d2] {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.subscriptions-grid[b-ago1zcl1d2]  .rz-data-grid {
    border: none;
}

.subscriptions-grid[b-ago1zcl1d2]  .rz-datatable-thead > tr > th {
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.8125rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.subscriptions-grid[b-ago1zcl1d2]  .rz-datatable-tbody > tr > td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.subscriptions-grid[b-ago1zcl1d2]  .rz-datatable-tbody > tr:hover > td {
    background: #f8fafc;
}

/* User Cell */
.user-cell[b-ago1zcl1d2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar[b-ago1zcl1d2] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.user-avatar img[b-ago1zcl1d2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials[b-ago1zcl1d2] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
}

.user-info[b-ago1zcl1d2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-name[b-ago1zcl1d2] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email[b-ago1zcl1d2] {
    font-size: 0.8125rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status Cell */
.status-cell[b-ago1zcl1d2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.at-risk-icon[b-ago1zcl1d2] {
    color: #ef4444 !important;
    font-size: 1rem !important;
    animation: pulse-b-ago1zcl1d2 2s infinite;
}

@keyframes pulse-b-ago1zcl1d2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* MRR Amount */
.mrr-amount[b-ago1zcl1d2] {
    font-weight: 600;
    color: #059669;
    font-size: 0.875rem;
}

/* Pets Cell */
.pets-cell[b-ago1zcl1d2] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.125rem;
}

.pet-count[b-ago1zcl1d2] {
    font-weight: 600;
    color: #1e293b;
}

.pet-limit[b-ago1zcl1d2] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Expiry Cell */
.expiry-cell[b-ago1zcl1d2] {
    display: flex;
    flex-direction: column;
}

.expiry-date[b-ago1zcl1d2] {
    font-size: 0.875rem;
    color: #1e293b;
}

.expiry-days[b-ago1zcl1d2] {
    font-size: 0.75rem;
    color: #64748b;
}

.expiry-cell.expired .expiry-date[b-ago1zcl1d2],
.expiry-cell.expired .expiry-days[b-ago1zcl1d2] {
    color: #ef4444;
}

.expiry-cell.expiring-soon .expiry-date[b-ago1zcl1d2],
.expiry-cell.expiring-soon .expiry-days[b-ago1zcl1d2] {
    color: #f59e0b;
    font-weight: 500;
}

.expiry-cell.expiring-warning .expiry-days[b-ago1zcl1d2] {
    color: #f59e0b;
}

/* Stripe ID */
.stripe-id[b-ago1zcl1d2] {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Action Buttons */
.action-buttons[b-ago1zcl1d2] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

/* View Details button - darker for better visibility */
.action-buttons .rz-button.rz-button-text.rz-variant-text:first-child[b-ago1zcl1d2] {
    color: #475569;
}

.action-buttons .rz-button.rz-button-text.rz-variant-text:first-child:hover[b-ago1zcl1d2] {
    color: #1e293b;
    background-color: rgba(71, 85, 105, 0.1);
}

/* Loading Placeholder */
.loading-placeholder[b-ago1zcl1d2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: #64748b;
}

/* ================================================
   MODAL / DIALOG
   ================================================ */
.modal-backdrop[b-ago1zcl1d2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.subscription-dialog[b-ago1zcl1d2] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.action-dialog[b-ago1zcl1d2] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 1002;
    width: 90%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.action-dialog.danger[b-ago1zcl1d2] {
    border: 2px solid #ef4444;
}

.dialog-header[b-ago1zcl1d2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.dialog-header h2[b-ago1zcl1d2] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dialog-content[b-ago1zcl1d2] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.dialog-footer[b-ago1zcl1d2] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* Dialog Form */
.dialog-form[b-ago1zcl1d2] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.form-group[b-ago1zcl1d2] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-group label[b-ago1zcl1d2] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.warning-text[b-ago1zcl1d2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #dc2626;
    font-weight: 500;
}

.warning-text[b-ago1zcl1d2]  .rzi {
    color: #dc2626 !important;
}

/* Profile Header in Dialog */
.profile-header[b-ago1zcl1d2] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.profile-avatar[b-ago1zcl1d2] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar img[b-ago1zcl1d2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials-lg[b-ago1zcl1d2] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #64748b;
}

.profile-info h3[b-ago1zcl1d2] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.profile-info p[b-ago1zcl1d2] {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0.25rem 0 0.75rem 0;
}

.profile-badges[b-ago1zcl1d2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Detail Grid */
.detail-grid[b-ago1zcl1d2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.detail-section[b-ago1zcl1d2] {
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
}

.detail-section h4[b-ago1zcl1d2] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.detail-row[b-ago1zcl1d2] {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    font-size: 0.875rem;
}

.detail-label[b-ago1zcl1d2] {
    color: #64748b;
}

.detail-value[b-ago1zcl1d2] {
    font-weight: 500;
    color: #1e293b;
    text-align: right;
}

.detail-value.monospace[b-ago1zcl1d2] {
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
    word-break: break-all;
}

/* Billing History */
.billing-history[b-ago1zcl1d2] {
    margin-top: 1rem;
}

.billing-table[b-ago1zcl1d2] {
    width: 100%;
    border-collapse: collapse;
}

.billing-table th[b-ago1zcl1d2] {
    text-align: left;
    padding: 0.75rem;
    background: #f8fafc;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 1px solid #e2e8f0;
}

.billing-table td[b-ago1zcl1d2] {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}

.billing-table .monospace[b-ago1zcl1d2] {
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
}

.invoice-link[b-ago1zcl1d2] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #3b82f6;
    text-decoration: none;
    font-size: 0.8125rem;
    margin-right: 0.75rem;
}

.invoice-link:hover[b-ago1zcl1d2] {
    text-decoration: underline;
}

.no-billing[b-ago1zcl1d2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #94a3b8;
}

.no-billing[b-ago1zcl1d2]  .rzi {
    font-size: 3rem !important;
    margin-bottom: 0.5rem;
}

/* Admin Actions Panel */
.admin-actions-panel[b-ago1zcl1d2] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.action-section[b-ago1zcl1d2] {
    padding: 1.25rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.action-section.action-danger[b-ago1zcl1d2] {
    background: #fef2f2;
    border-color: #fecaca;
}

.action-section h4[b-ago1zcl1d2] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.375rem 0;
}

.action-section.action-danger h4[b-ago1zcl1d2] {
    color: #dc2626;
}

.action-desc[b-ago1zcl1d2] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0 0 1rem 0;
}

.action-form[b-ago1zcl1d2] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */
@media (max-width: 1400px) {
    .stats-row[b-ago1zcl1d2] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .filters-grid[b-ago1zcl1d2] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .stats-row[b-ago1zcl1d2] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filters-grid[b-ago1zcl1d2] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .detail-grid[b-ago1zcl1d2] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header[b-ago1zcl1d2] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .stats-row[b-ago1zcl1d2] {
        grid-template-columns: 1fr;
    }
    
    .filters-grid[b-ago1zcl1d2] {
        grid-template-columns: 1fr;
    }
    
    .subscription-dialog[b-ago1zcl1d2],
    .action-dialog[b-ago1zcl1d2] {
        width: 95%;
        max-height: 95vh;
    }
    
    .profile-header[b-ago1zcl1d2] {
        flex-direction: column;
        text-align: center;
    }
    
    .action-form[b-ago1zcl1d2] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-form > *[b-ago1zcl1d2] {
        width: 100% !important;
    }
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
/* ================================================
   Admin User Management Page Styles
   PetFindrz Admin Portal
   ================================================ */

.users-page[b-lmlu9gnpta] {
    min-height: 100%;
}

/* ================================================
   PAGE HEADER
   ================================================ */
.page-header[b-lmlu9gnpta] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-info[b-lmlu9gnpta] {
    flex: 1;
}

.page-title[b-lmlu9gnpta] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.title-icon[b-lmlu9gnpta]  .rzi {
    font-size: 1.75rem !important;
    color: #3b82f6 !important;
}

.page-subtitle[b-lmlu9gnpta] {
    color: #64748b;
    margin: 0.25rem 0 0 0;
    font-size: 0.9375rem;
}

.header-actions[b-lmlu9gnpta] {
    display: flex;
    gap: 0.75rem;
}

/* ================================================
   STATS ROW
   ================================================ */
.stats-row[b-lmlu9gnpta] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-lmlu9gnpta] {
    background: #ffffff;
    border-radius: 0.625rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.stat-card:hover[b-lmlu9gnpta] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.stat-card.stat-warning[b-lmlu9gnpta] {
    border-color: #f59e0b;
    background: #fffbeb;
}

.stat-card.stat-danger[b-lmlu9gnpta] {
    border-color: #ef4444;
    background: #fef2f2;
}

.stat-icon[b-lmlu9gnpta] {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon[b-lmlu9gnpta]  .rzi {
    font-size: 1.25rem !important;
    color: #ffffff !important;
}

.stat-icon-users[b-lmlu9gnpta] { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.stat-icon-active[b-lmlu9gnpta] { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.stat-icon-subscribed[b-lmlu9gnpta] { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.stat-icon-new[b-lmlu9gnpta] { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.stat-icon-unverified[b-lmlu9gnpta] { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.stat-icon-locked[b-lmlu9gnpta] { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

.stat-content[b-lmlu9gnpta] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-lmlu9gnpta] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.stat-label[b-lmlu9gnpta] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ================================================
   FILTERS CARD
   ================================================ */
.filters-card[b-lmlu9gnpta] {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
}

.filters-header[b-lmlu9gnpta] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.filters-header h3[b-lmlu9gnpta] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filters-grid[b-lmlu9gnpta] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.filter-group[b-lmlu9gnpta] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.filter-group label[b-lmlu9gnpta] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ================================================
   DATA CARD / GRID
   ================================================ */
.data-card[b-lmlu9gnpta] {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.users-grid[b-lmlu9gnpta]  .rz-data-grid {
    border: none;
}

.users-grid[b-lmlu9gnpta]  .rz-datatable-thead > tr > th {
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.8125rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.users-grid[b-lmlu9gnpta]  .rz-datatable-tbody > tr > td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.users-grid[b-lmlu9gnpta]  .rz-datatable-tbody > tr:hover > td {
    background: #f8fafc;
}

/* User Cell */
.user-cell[b-lmlu9gnpta] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar[b-lmlu9gnpta] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.user-avatar img[b-lmlu9gnpta] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials[b-lmlu9gnpta] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
}

.user-info[b-lmlu9gnpta] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-name[b-lmlu9gnpta] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email[b-lmlu9gnpta] {
    font-size: 0.8125rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Subscription Cell */
.subscription-cell[b-lmlu9gnpta] {
    display: flex;
    align-items: center;
}

/* Roles Cell */
.roles-cell[b-lmlu9gnpta] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.role-badge[b-lmlu9gnpta] {
    font-size: 0.6875rem !important;
}

.more-roles[b-lmlu9gnpta] {
    font-size: 0.75rem;
    color: #64748b;
    padding: 0.125rem 0.375rem;
}

/* Pet Count */
.pet-count[b-lmlu9gnpta] {
    font-weight: 600;
    color: #64748b;
}

/* Date Cell */
.date-cell[b-lmlu9gnpta] {
    font-size: 0.8125rem;
    color: #64748b;
}

/* Action Buttons */
.action-buttons[b-lmlu9gnpta] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

/* ================================================
   MODAL / DIALOG
   ================================================ */
.modal-backdrop[b-lmlu9gnpta] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.user-dialog[b-lmlu9gnpta] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dialog-header[b-lmlu9gnpta] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.dialog-header h2[b-lmlu9gnpta] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dialog-content[b-lmlu9gnpta] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.dialog-footer[b-lmlu9gnpta] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.dialog-footer .spacer[b-lmlu9gnpta] {
    flex: 1;
}

/* Profile Header in Dialog */
.profile-header[b-lmlu9gnpta] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.profile-avatar[b-lmlu9gnpta] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar img[b-lmlu9gnpta] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials-lg[b-lmlu9gnpta] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #64748b;
}

.profile-info h3[b-lmlu9gnpta] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.profile-info p[b-lmlu9gnpta] {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0.25rem 0 0.75rem 0;
}

.profile-badges[b-lmlu9gnpta] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Detail Grid */
.detail-grid[b-lmlu9gnpta] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.detail-section[b-lmlu9gnpta] {
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
}

.detail-section h4[b-lmlu9gnpta] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.detail-row[b-lmlu9gnpta] {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    font-size: 0.875rem;
}

.detail-label[b-lmlu9gnpta] {
    color: #64748b;
}

.detail-value[b-lmlu9gnpta] {
    font-weight: 500;
    color: #1e293b;
    text-align: right;
}

.detail-value.monospace[b-lmlu9gnpta] {
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
    word-break: break-all;
}

/* Subscription Details */
.subscription-details[b-lmlu9gnpta] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.subscription-actions[b-lmlu9gnpta] {
    padding: 1rem;
    background: #fffbeb;
    border-radius: 0.5rem;
    border: 1px solid #fcd34d;
}

.subscription-actions h4[b-lmlu9gnpta] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 0.75rem 0;
}

.action-group[b-lmlu9gnpta] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Roles Management */
.roles-management[b-lmlu9gnpta] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.current-roles h4[b-lmlu9gnpta],
.add-role h4[b-lmlu9gnpta] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.75rem 0;
}

.role-chips[b-lmlu9gnpta] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.role-chip[b-lmlu9gnpta] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: #f1f5f9;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
}

.add-role-form[b-lmlu9gnpta] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Activity Log */
.activity-log[b-lmlu9gnpta] {
    max-height: 400px;
    overflow-y: auto;
}

.activity-timeline[b-lmlu9gnpta] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 1rem;
    border-left: 2px solid #e2e8f0;
}

.activity-entry[b-lmlu9gnpta] {
    position: relative;
    padding: 0.75rem 0 0.75rem 1.25rem;
}

.activity-marker[b-lmlu9gnpta] {
    position: absolute;
    left: -0.4375rem;
    top: 1rem;
    width: 0.625rem;
    height: 0.625rem;
    background: #3b82f6;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.activity-details[b-lmlu9gnpta] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.activity-type[b-lmlu9gnpta] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.activity-desc[b-lmlu9gnpta] {
    font-size: 0.875rem;
    color: #1e293b;
}

.activity-meta[b-lmlu9gnpta] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.ip-address[b-lmlu9gnpta] {
    font-family: ui-monospace, monospace;
}

.no-activity[b-lmlu9gnpta] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #94a3b8;
    text-align: center;
}

.no-activity[b-lmlu9gnpta]  .rzi {
    font-size: 2rem !important;
    margin-bottom: 0.5rem;
}

/* ================================================
   COPYABLE USER ID
   ================================================ */
.user-id-copyable[b-lmlu9gnpta] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
}

.user-id-copyable:hover[b-lmlu9gnpta] {
    background: #e2e8f0;
}

.user-id-copyable:active[b-lmlu9gnpta] {
    background: #cbd5e1;
}

.user-id-text[b-lmlu9gnpta] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    font-size: 0.8125rem;
    word-break: break-all;
    color: #475569;
}

.copy-icon[b-lmlu9gnpta] {
    flex-shrink: 0;
    font-size: 0.875rem !important;
    color: #94a3b8;
    transition: all 0.2s ease;
}

.user-id-copyable:hover .copy-icon[b-lmlu9gnpta] {
    color: #3b82f6;
}

.copy-icon.copied[b-lmlu9gnpta] {
    color: #22c55e !important;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1400px) {
    .stats-row[b-lmlu9gnpta] {
        grid-template-columns: repeat(3, 1fr);
    }

    .filters-grid[b-lmlu9gnpta] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .stats-row[b-lmlu9gnpta] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters-grid[b-lmlu9gnpta] {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail-grid[b-lmlu9gnpta] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-row[b-lmlu9gnpta] {
        grid-template-columns: 1fr;
    }

    .filters-grid[b-lmlu9gnpta] {
        grid-template-columns: 1fr;
    }

    .page-header[b-lmlu9gnpta] {
        flex-direction: column;
        align-items: flex-start;
    }

    .user-dialog[b-lmlu9gnpta] {
        width: 95%;
        max-height: 95vh;
    }

    .profile-header[b-lmlu9gnpta] {
        flex-direction: column;
        text-align: center;
    }

    .profile-badges[b-lmlu9gnpta] {
        justify-content: center;
    }
}

/* Loading Placeholder */
.loading-placeholder[b-lmlu9gnpta] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: #64748b;
}
/* /Components/Pages/Billing.razor.rz.scp.css */
/* Billing Page Styles */
.billing-page[b-kgq75e9ihp] {
    min-height: 100vh;
    background: #f8fafc;
    padding: 2rem 1rem;
}

.billing-container[b-kgq75e9ihp] {
    max-width: 800px;
    margin: 0 auto;
}

/* Header */
.billing-header[b-kgq75e9ihp] {
    margin-bottom: 2rem;
}

.back-link[b-kgq75e9ihp] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    transition: color 0.2s;
}

.back-link:hover[b-kgq75e9ihp] {
    color: #4f46e5;
}

.back-link[b-kgq75e9ihp]  .rzi {
    font-size: 1.125rem !important;
}

.billing-header h1[b-kgq75e9ihp] {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
}

.billing-subtitle[b-kgq75e9ihp] {
    color: #6b7280;
    font-size: 1rem;
    margin: 0;
}

/* Loading */
.loading-container[b-kgq75e9ihp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.loading-container p[b-kgq75e9ihp] {
    margin-top: 1rem;
    color: #6b7280;
}

/* Section Styles */
.billing-section[b-kgq75e9ihp] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-header[b-kgq75e9ihp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.section-header h2[b-kgq75e9ihp] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.section-icon[b-kgq75e9ihp]  .rzi {
    font-size: 1.5rem !important;
    color: #4f46e5 !important;
}

/* Payment Method Card */
.payment-method-card[b-kgq75e9ihp] {
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
}

.card-display[b-kgq75e9ihp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card-brand-icon[b-kgq75e9ihp] {
    width: 48px;
    height: 32px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-brand-icon[b-kgq75e9ihp]  .rzi {
    font-size: 1.25rem !important;
    color: white !important;
}

.card-details[b-kgq75e9ihp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.card-brand[b-kgq75e9ihp] {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.95rem;
}

.card-number[b-kgq75e9ihp] {
    color: #6b7280;
    font-size: 0.875rem;
    font-family: monospace;
}

.card-expiry[b-kgq75e9ihp] {
    color: #9ca3af;
    font-size: 0.8rem;
}

.card-status[b-kgq75e9ihp] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.card-status.default[b-kgq75e9ihp] {
    background: #dbeafe;
    color: #1d4ed8;
}

.payment-actions[b-kgq75e9ihp] {
    display: flex;
    gap: 0.75rem;
}

.btn-update-card[b-kgq75e9ihp],
.btn-add-card[b-kgq75e9ihp] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-update-card[b-kgq75e9ihp] {
    background: #4f46e5;
    color: white;
}

.btn-update-card:hover[b-kgq75e9ihp] {
    background: #4338ca;
}

.btn-add-card[b-kgq75e9ihp] {
    background: #4f46e5;
    color: white;
}

.btn-add-card:hover[b-kgq75e9ihp] {
    background: #4338ca;
}

/* No Payment Method */
.no-payment-method[b-kgq75e9ihp] {
    text-align: center;
    padding: 2rem;
}

.no-card-icon[b-kgq75e9ihp]  .rzi {
    font-size: 3rem !important;
    color: #d1d5db !important;
}

.no-payment-method p[b-kgq75e9ihp] {
    color: #6b7280;
    margin: 0.75rem 0 1rem;
}

/* Billing History Table */
.billing-history-card[b-kgq75e9ihp] {
    overflow: hidden;
}

.invoices-table[b-kgq75e9ihp] {
    width: 100%;
    border-collapse: collapse;
}

.invoices-table th[b-kgq75e9ihp],
.invoices-table td[b-kgq75e9ihp] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.invoices-table th[b-kgq75e9ihp] {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.invoices-table td[b-kgq75e9ihp] {
    color: #4b5563;
    font-size: 0.9rem;
}

.invoices-table tbody tr:hover[b-kgq75e9ihp] {
    background: #f9fafb;
}

.invoice-status[b-kgq75e9ihp] {
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.invoice-status.status-paid[b-kgq75e9ihp] {
    background: #dcfce7;
    color: #16a34a;
}

.invoice-status.status-pending[b-kgq75e9ihp] {
    background: #fef3c7;
    color: #d97706;
}

.invoice-status.status-failed[b-kgq75e9ihp] {
    background: #fee2e2;
    color: #dc2626;
}

.btn-view-invoice[b-kgq75e9ihp] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #4f46e5;
    text-decoration: none;
    font-size: 0.8rem;
}

.btn-view-invoice:hover[b-kgq75e9ihp] {
    text-decoration: underline;
}

/* No Invoices */
.no-invoices[b-kgq75e9ihp] {
    text-align: center;
    padding: 2rem;
}

.no-invoices-icon[b-kgq75e9ihp]  .rzi {
    font-size: 3rem !important;
    color: #d1d5db !important;
}

.no-invoices p[b-kgq75e9ihp] {
    color: #6b7280;
    margin: 0.75rem 0 0.25rem;
}

.no-invoices-hint[b-kgq75e9ihp] {
    color: #9ca3af;
    font-size: 0.85rem;
}

/* Billing Address */
.billing-address-card[b-kgq75e9ihp] {
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
}

.address-display p[b-kgq75e9ihp] {
    color: #374151;
    margin: 0 0 1rem;
    white-space: pre-line;
    line-height: 1.6;
}

.btn-edit-address[b-kgq75e9ihp],
.btn-add-address[b-kgq75e9ihp] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
}

.btn-edit-address:hover[b-kgq75e9ihp],
.btn-add-address:hover[b-kgq75e9ihp] {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.no-address[b-kgq75e9ihp] {
    text-align: center;
    padding: 1rem;
}

.no-address p[b-kgq75e9ihp] {
    color: #6b7280;
    margin: 0 0 1rem;
}

/* Manage Subscription Card */
.manage-subscription-card[b-kgq75e9ihp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    flex-wrap: wrap;
}

.manage-info[b-kgq75e9ihp] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.manage-icon[b-kgq75e9ihp]  .rzi {
    font-size: 2rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.manage-text h3[b-kgq75e9ihp] {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.manage-text p[b-kgq75e9ihp] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin: 0;
}

.btn-manage-subscription[b-kgq75e9ihp] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: white;
    color: #4f46e5;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-manage-subscription:hover[b-kgq75e9ihp] {
    background: #f0f0ff;
    transform: translateY(-1px);
}

/* Modal Styles */
.billing-modal-overlay[b-kgq75e9ihp] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
}

.billing-modal[b-kgq75e9ihp] {
    display: block;
    width: 680px;
    max-width: 96%;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.billing-modal-content[b-kgq75e9ihp] {
    position: relative;
}

.billing-close-btn[b-kgq75e9ihp] {
    float: right;
    border: none;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
}

.billing-modal-loading[b-kgq75e9ihp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 32px 0 24px 0;
    width: 100%;
}

.loader[b-kgq75e9ihp] {
    width: 40px;
    height: 40px;
    border: 4px solid #eee;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: spin-b-kgq75e9ihp 1s linear infinite;
}

@keyframes spin-b-kgq75e9ihp {
    to { transform: rotate(360deg); }
}

.loading-text[b-kgq75e9ihp] {
    margin-top: 12px;
    color: #444;
    font-size: 1rem;
}

.modal-error[b-kgq75e9ihp] {
    color: #b91c1c;
    margin: 8px 0;
    font-weight: 600;
}

.card-element[b-kgq75e9ihp] {
    margin-top: 12px;
    margin-bottom: 12px;
    min-height: 48px;
    border: 1px dashed #ddd;
    padding: 8px;
}

/* Responsive */
@media (max-width: 640px) {
    .billing-header h1[b-kgq75e9ihp] {
        font-size: 1.5rem;
    }
    
    .manage-subscription-card[b-kgq75e9ihp] {
        flex-direction: column;
        text-align: center;
    }
    
    .manage-info[b-kgq75e9ihp] {
        flex-direction: column;
    }
    
    .invoices-table[b-kgq75e9ihp] {
        font-size: 0.8rem;
    }
    
    .invoices-table th[b-kgq75e9ihp],
    .invoices-table td[b-kgq75e9ihp] {
        padding: 0.5rem;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.dashboard-page[b-nx7g3lw5zc] {
    min-height: 100vh;
    background: #f8fafc;
    padding-bottom: 3rem;
}

/* Dashboard Header */
.dashboard-header[b-nx7g3lw5zc] {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 50%, #4c1d95 100%);
    padding: 2rem;
    color: white;
}

.dashboard-header-content[b-nx7g3lw5zc] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.welcome-title[b-nx7g3lw5zc] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.welcome-subtitle[b-nx7g3lw5zc] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Welcome Subscription Display */
.welcome-subscription[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.welcome-subscription .subscription-plan[b-nx7g3lw5zc] {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.welcome-subscription .subscription-badge[b-nx7g3lw5zc] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.welcome-subscription .subscription-badge.active[b-nx7g3lw5zc] {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Wave icon in welcome title */
.wave-icon[b-nx7g3lw5zc]  .rzi {
    color: #fbbf24 !important;
    font-size: 1.5rem !important;
    vertical-align: middle;
}

.btn-header-action[b-nx7g3lw5zc],
a.btn-header-action[b-nx7g3lw5zc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #667eea, #764ba2, #667eea);
    background-size: 200% 200%;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    animation: gradient-pulse-cool-b-nx7g3lw5zc 3s ease infinite;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-header-action:hover[b-nx7g3lw5zc],
a.btn-header-action:hover[b-nx7g3lw5zc] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    color: white;
    text-decoration: none;
}

@keyframes gradient-pulse-cool-b-nx7g3lw5zc {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Found a Pet Button - Orange gradient matching header */
.header-actions .btn-found-pet[b-nx7g3lw5zc],
a.btn-found-pet[b-nx7g3lw5zc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53, #ff6b6b);
    background-size: 200% 200%;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    animation: gradient-pulse-b-nx7g3lw5zc 2s ease infinite;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.header-actions .btn-found-pet:hover[b-nx7g3lw5zc],
a.btn-found-pet:hover[b-nx7g3lw5zc] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
    color: white;
    text-decoration: none;
}

@keyframes gradient-pulse-b-nx7g3lw5zc {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.header-actions[b-nx7g3lw5zc] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Subscription Banner */
.subscription-banner[b-nx7g3lw5zc] {
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    padding: 1rem 2rem;
}

.subscription-banner-content[b-nx7g3lw5zc] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.banner-icon[b-nx7g3lw5zc] {
    font-size: 2rem;
}

.banner-icon[b-nx7g3lw5zc]  .rzi {
    font-size: 2rem !important;
    color: #1a202c !important;
}

.banner-text[b-nx7g3lw5zc] {
    flex: 1;
}

.banner-text h3[b-nx7g3lw5zc] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.125rem;
}

.banner-text p[b-nx7g3lw5zc] {
    font-size: 0.9rem;
    color: #374151;
}

.btn-upgrade[b-nx7g3lw5zc] {
    padding: 0.625rem 1.25rem;
    background: #1e293b;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-upgrade:hover[b-nx7g3lw5zc] {
    background: #0f172a;
    transform: translateY(-1px);
}

/* Dashboard Stats */
.dashboard-stats[b-nx7g3lw5zc] {
    max-width: 1200px;
    margin: -1.5rem auto 2rem;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    position: relative;
    z-index: 10;
}

.stat-card[b-nx7g3lw5zc] {
    background: white;
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover[b-nx7g3lw5zc] {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.stat-icon[b-nx7g3lw5zc] {
    width: 50px;
    height: 50px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-icon[b-nx7g3lw5zc]  .rzi {
    font-size: 1.5rem !important;
}

.stat-icon-blue[b-nx7g3lw5zc] {
    background: #dbeafe;
}

.stat-icon-blue[b-nx7g3lw5zc]  .rzi {
    color: #2563eb !important;
}

.stat-icon-green[b-nx7g3lw5zc] {
    background: #dcfce7;
}

.stat-icon-green[b-nx7g3lw5zc]  .rzi {
    color: #16a34a !important;
}

.stat-icon-purple[b-nx7g3lw5zc] {
    background: #f3e8ff;
}

.stat-icon-purple[b-nx7g3lw5zc]  .rzi {
    color: #9333ea !important;
}

.stat-icon-orange[b-nx7g3lw5zc] {
    background: #ffedd5;
}

.stat-icon-orange[b-nx7g3lw5zc]  .rzi {
    color: #ea580c !important;
}

.stat-info[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
}

.stat-number[b-nx7g3lw5zc] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
}

.stat-label[b-nx7g3lw5zc] {
    font-size: 0.85rem;
    color: #64748b;
}

/* Dashboard Grid */
.dashboard-grid[b-nx7g3lw5zc] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Top Row - My Pets + Potential Matches side by side */
.dashboard-top-row[b-nx7g3lw5zc] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* When no pending matches, My Pets takes full width */
.dashboard-top-row > .pets-card:only-child[b-nx7g3lw5zc] {
    grid-column: 1 / -1;
}

/* Dashboard Cards */
.dashboard-card[b-nx7g3lw5zc] {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}


.card-header[b-nx7g3lw5zc] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h2[b-nx7g3lw5zc] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}

.btn-card-action[b-nx7g3lw5zc] {
    padding: 0.5rem 1rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-card-action:hover[b-nx7g3lw5zc] {
    background: #2563eb;
}

.card-link[b-nx7g3lw5zc] {
    font-size: 0.9rem;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.card-link:hover[b-nx7g3lw5zc] {
    text-decoration: underline;
}

.card-content[b-nx7g3lw5zc] {
    padding: 1.5rem;
}

/* Pets Tabs */
.pets-tabs[b-nx7g3lw5zc] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 1.5rem;
    background: #f8fafc;
}

.pets-tab[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.pets-tab:hover[b-nx7g3lw5zc] {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.pets-tab.active[b-nx7g3lw5zc] {
    color: #3b82f6;
    background: white;
}

.pets-tab.active[b-nx7g3lw5zc]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3b82f6;
}

.pets-tab[b-nx7g3lw5zc]  .rzi {
    font-size: 1.1rem !important;
}

.tab-count[b-nx7g3lw5zc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #e2e8f0;
    color: #64748b;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pets-tab.active .tab-count[b-nx7g3lw5zc] {
    background: #dbeafe;
    color: #3b82f6;
}

.tab-count.deactivated[b-nx7g3lw5zc] {
    background: #fef3c7;
    color: #d97706;
}

.pets-tab.active .tab-count.deactivated[b-nx7g3lw5zc] {
    background: #fef3c7;
    color: #d97706;
}

/* Empty State */
.empty-state[b-nx7g3lw5zc] {
    text-align: center;
    padding: 2rem;
}

.empty-icon[b-nx7g3lw5zc] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-icon[b-nx7g3lw5zc]  .rzi {
    font-size: 3rem !important;
    color: #94a3b8 !important;
}

.empty-state h3[b-nx7g3lw5zc] {
    font-size: 1.1rem;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.empty-state p[b-nx7g3lw5zc] {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

.btn-empty-action[b-nx7g3lw5zc] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
}

.btn-empty-action:hover[b-nx7g3lw5zc] {
    background: #2563eb;
}

/* Pets List */
.pets-list[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pet-item-link[b-nx7g3lw5zc] {
    text-decoration: none;
    color: inherit;
    display: block;
}

.pet-item[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pet-item-link:hover .pet-item[b-nx7g3lw5zc] {
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    background: #fafbfc;
}

.pet-item-link:hover .pet-action[b-nx7g3lw5zc] {
    background: #f1f5f9;
    color: #3b82f6;
}

.pet-img[b-nx7g3lw5zc] {
    width: 50px;
    height: 50px;
    border-radius: 0.5rem;
    object-fit: cover;
}

.pet-details[b-nx7g3lw5zc] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pet-details strong[b-nx7g3lw5zc] {
    font-size: 0.95rem;
    color: #1a202c;
}

.pet-details span[b-nx7g3lw5zc] {
    font-size: 0.8rem;
    color: #64748b;
}

.pet-status[b-nx7g3lw5zc] {
    font-size: 0.7rem !important;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    text-transform: uppercase;
    display: inline-block;
    width: fit-content;
    margin-top: 0.25rem;
}

.status-safe[b-nx7g3lw5zc] {
    background: #dcfce7;
    color: #16a34a;
}

.status-lost[b-nx7g3lw5zc] {
    background: #fee2e2;
    color: #dc2626;
}

.status-stolen[b-nx7g3lw5zc] {
    background: #fef3c7;
    color: #d97706;
}

.status-found[b-nx7g3lw5zc] {
    background: #dbeafe;
    color: #2563eb;
}

/* Pet Status Row - contains status badge and match indicator */
.pet-status-row[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.pet-status-row .pet-status[b-nx7g3lw5zc] {
    margin-top: 0;
}

/* Match indicator next to pet status */
.pet-match-indicator[b-nx7g3lw5zc] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #f59e0b;
    background: #fef3c7;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    animation: pulse-glow-b-nx7g3lw5zc 2s ease-in-out infinite;
}

.pet-match-indicator[b-nx7g3lw5zc]  .rzi {
    font-size: 0.75rem !important;
    color: #f59e0b !important;
}

@keyframes pulse-glow-b-nx7g3lw5zc {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0);
    }
}

.pet-action[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0.375rem;
    color: #94a3b8;
    transition: all 0.2s ease;
}

.pet-action[b-nx7g3lw5zc]  .rzi {
    font-size: 1.25rem !important;
}

/* Activity List */
.activity-list[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    transition: background 0.2s ease;
}

.activity-item:hover[b-nx7g3lw5zc] {
    background: #f8fafc;
}

.activity-icon[b-nx7g3lw5zc] {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.activity-icon[b-nx7g3lw5zc]  .rzi {
    font-size: 1.2rem !important;
}

.activity-icon-scan[b-nx7g3lw5zc] {
    background: #dbeafe;
}

.activity-icon-scan[b-nx7g3lw5zc]  .rzi {
    color: #2563eb !important;
}

.activity-icon-alert[b-nx7g3lw5zc] {
    background: #fef3c7;
}

.activity-icon-alert[b-nx7g3lw5zc]  .rzi {
    color: #d97706 !important;
}

.activity-icon-join[b-nx7g3lw5zc] {
    background: #dcfce7;
}

.activity-icon-join[b-nx7g3lw5zc]  .rzi {
    color: #16a34a !important;
}

.activity-icon-pet[b-nx7g3lw5zc] {
    background: #dbeafe;
}

.activity-icon-pet[b-nx7g3lw5zc]  .rzi {
    color: #2563eb !important;
}

.activity-icon-found[b-nx7g3lw5zc] {
    background: #dcfce7;
}

.activity-icon-found[b-nx7g3lw5zc]  .rzi {
    color: #16a34a !important;
}

.activity-icon-help[b-nx7g3lw5zc] {
    background: #fce7f3;
}

.activity-icon-help[b-nx7g3lw5zc]  .rzi {
    color: #db2777 !important;
}

.activity-icon-sub[b-nx7g3lw5zc] {
    background: #f3e8ff;
}

.activity-icon-sub[b-nx7g3lw5zc]  .rzi {
    color: #9333ea !important;
}

.activity-icon-info[b-nx7g3lw5zc] {
    background: #f1f5f9;
}

.activity-icon-info[b-nx7g3lw5zc]  .rzi {
    color: #64748b !important;
}

.activity-details[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
}

.activity-text[b-nx7g3lw5zc] {
    font-size: 0.9rem;
    color: #374151;
}

.activity-time[b-nx7g3lw5zc] {
    font-size: 0.8rem;
    color: #94a3b8;
}

.activity-ip[b-nx7g3lw5zc] {
    font-size: 0.7rem;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'Consolas', 'Monaco', monospace;
}

.activity-ip[b-nx7g3lw5zc]  .rzi {
    font-size: 10px !important;
    color: #cbd5e1 !important;
}

/* Alerts List */
.alerts-list[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alert-item[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

.alert-item:hover[b-nx7g3lw5zc] {
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.alert-img[b-nx7g3lw5zc] {
    width: 50px;
    height: 50px;
    border-radius: 0.5rem;
    object-fit: cover;
}

.alert-details[b-nx7g3lw5zc] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.alert-details strong[b-nx7g3lw5zc] {
    font-size: 0.95rem;
    color: #1a202c;
}

.alert-details span[b-nx7g3lw5zc] {
    font-size: 0.8rem;
    color: #64748b;
}

.alert-time[b-nx7g3lw5zc] {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
}

.alert-badge[b-nx7g3lw5zc] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-urgent[b-nx7g3lw5zc] {
    background: #fee2e2;
    color: #dc2626;
}

.badge-active[b-nx7g3lw5zc] {
    background: #dcfce7;
    color: #16a34a;
}

/* Quick Actions */
.quick-actions-grid[b-nx7g3lw5zc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.quick-action-btn[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-action-btn:hover[b-nx7g3lw5zc] {
    background: white;
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.action-icon[b-nx7g3lw5zc] {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.action-icon[b-nx7g3lw5zc]  .rzi {
    font-size: 1.75rem !important;
    color: #3b82f6 !important;
}

.quick-action-btn span[b-nx7g3lw5zc] {
    font-size: 0.9rem;
    color: #1a202c;
    font-weight: 600;
}

.action-subtitle[b-nx7g3lw5zc] {
    font-size: 0.75rem !important;
    color: #64748b !important;
    font-weight: 400 !important;
}

/* Dashboard Pricing Section */
.dashboard-pricing-section[b-nx7g3lw5zc] {
    max-width: 1200px;
    margin: 3rem auto 0;
    padding: 0 2rem;
}

.pricing-section-header[b-nx7g3lw5zc] {
    text-align: center;
    margin-bottom: 2rem;
}

.pricing-section-header h2[b-nx7g3lw5zc] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.pricing-section-header p[b-nx7g3lw5zc] {
    font-size: 1rem;
    color: #64748b;
}

.stripe-pricing-container[b-nx7g3lw5zc] {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .dashboard-stats[b-nx7g3lw5zc] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-grid[b-nx7g3lw5zc] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-header-content[b-nx7g3lw5zc] {
        flex-direction: column;
        text-align: center;
    }
    
    .welcome-title[b-nx7g3lw5zc] {
        font-size: 1.5rem;
    }
    
    .subscription-banner-content[b-nx7g3lw5zc] {
        flex-direction: column;
        text-align: center;
    }
    
    .dashboard-stats[b-nx7g3lw5zc] {
        grid-template-columns: 1fr 1fr;
        margin-top: -1rem;
    }
    
    .stat-card[b-nx7g3lw5zc] {
        padding: 1rem;
    }
    
    .stat-number[b-nx7g3lw5zc] {
        font-size: 1.25rem;
    }
    
    .dashboard-grid[b-nx7g3lw5zc] {
        padding: 0 1rem;
    }
    
    .dashboard-top-row[b-nx7g3lw5zc] {
        grid-template-columns: 1fr;
    }
    
    .quick-actions-grid[b-nx7g3lw5zc] {
        grid-template-columns: 1fr 1fr;
    }
    
    .pets-tabs[b-nx7g3lw5zc] {
        padding: 0 1rem;
    }
    
    .pets-tab[b-nx7g3lw5zc] {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .dashboard-stats[b-nx7g3lw5zc] {
        grid-template-columns: 1fr;
    }
    
    .quick-actions-grid[b-nx7g3lw5zc] {
        grid-template-columns: 1fr;
    }
    
    .pets-tabs[b-nx7g3lw5zc] {
        padding: 0 0.75rem;
    }
    
    .pets-tab[b-nx7g3lw5zc] {
        padding: 0.625rem 0.75rem;
        font-size: 0.8rem;
        gap: 0.375rem;
    }
    
    .tab-count[b-nx7g3lw5zc] {
        min-width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
}

/* Loading State for Nearby Pets */
.loading-state[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: #64748b;
    font-size: 0.9rem;
}

/* Empty State Small (for alerts section) */
.empty-state-small[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    color: #64748b;
    gap: 0.5rem;
}

.empty-state-small[b-nx7g3lw5zc]  .rzi {
    font-size: 2rem !important;
    color: #22c55e !important;
}

.empty-state-small span[b-nx7g3lw5zc] {
    font-size: 0.9rem;
}

.view-map-link[b-nx7g3lw5zc] {
    font-size: 0.85rem;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.view-map-link:hover[b-nx7g3lw5zc] {
    text-decoration: underline;
}

/* Clickable Alert Item */
.alert-item[b-nx7g3lw5zc] {
    cursor: pointer;
}

/* Location Hint */
.location-hint[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.75rem;
    background: #fef3c7;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    color: #92400e;
}

.location-hint[b-nx7g3lw5zc]  .rzi {
    font-size: 1rem !important;
    color: #f59e0b !important;
}

/* Alerts Grid - LiveMap style cards */
.alerts-grid[b-nx7g3lw5zc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Activity Card Detailed Styles for Dashboard */
.activity-card-detailed[b-nx7g3lw5zc] {
    background: white;
    border-radius: 0.75rem;
    padding: 1rem;
    border-left: 4px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    cursor: pointer;
}

.activity-card-detailed:hover[b-nx7g3lw5zc] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.activity-card-detailed.activity-lost[b-nx7g3lw5zc] {
    border-left-color: #f59e0b;
}

.activity-card-detailed.activity-found[b-nx7g3lw5zc] {
    border-left-color: #22c55e;
}

.activity-card-detailed.activity-matched[b-nx7g3lw5zc] {
    border-left-color: #3b82f6;
}

.activity-card-detailed.activity-sighting[b-nx7g3lw5zc] {
    border-left-color: #8b5cf6;
}

.activity-detail-header[b-nx7g3lw5zc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.activity-detail-header strong[b-nx7g3lw5zc] {
    font-size: 0.95rem;
    color: #1a202c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.activity-badge[b-nx7g3lw5zc] {
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.activity-badge.badge-active[b-nx7g3lw5zc] {
    background: #dcfce7;
    color: #16a34a;
}

.activity-badge.badge-urgent[b-nx7g3lw5zc] {
    background: #fee2e2;
    color: #dc2626;
}

.activity-badge.badge-matched[b-nx7g3lw5zc] {
    background: #dbeafe;
    color: #2563eb;
}

.activity-badge.badge-reunited[b-nx7g3lw5zc] {
    background: #fef3c7;
    color: #d97706;
}

.activity-detail-body[b-nx7g3lw5zc] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.activity-detail-img[b-nx7g3lw5zc] {
    width: 60px;
    height: 60px;
    border-radius: 0.5rem;
    object-fit: cover;
    flex-shrink: 0;
}

.activity-detail-meta[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #64748b;
    min-width: 0;
}

.activity-detail-meta span[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-detail-meta .distance-info[b-nx7g3lw5zc] {
    color: #3b82f6;
    font-weight: 500;
}

.activity-detail-meta[b-nx7g3lw5zc]  .rzi {
    font-size: 0.9rem !important;
    color: #94a3b8 !important;
    flex-shrink: 0;
}

.activity-detail-tags[b-nx7g3lw5zc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.activity-detail-tags .tag[b-nx7g3lw5zc] {
    padding: 0.15rem 0.5rem;
    background: #f1f5f9;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.activity-detail-tags .tag-highlight[b-nx7g3lw5zc] {
    background: #dbeafe;
    color: #2563eb;
    border-color: #bfdbfe;
}

@media (max-width: 768px) {
    .alerts-grid[b-nx7g3lw5zc] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ACTIVITY HISTORY SECTION
   ======================================== */

.activity-history-section[b-nx7g3lw5zc] {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 0 2rem 3rem;
}

.activity-history-header[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.activity-history-header h2[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}

.activity-history-header h2[b-nx7g3lw5zc]  .rzi {
    font-size: 1.5rem !important;
    color: #667eea !important;
}

.btn-mark-all-read[b-nx7g3lw5zc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-mark-all-read:hover[b-nx7g3lw5zc] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-mark-all-read[b-nx7g3lw5zc]  .rzi {
    font-size: 1rem !important;
}

/* Activity Cards Grid */
.activity-cards-grid[b-nx7g3lw5zc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
}

/* Empty State */
.activity-empty-state[b-nx7g3lw5zc] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.activity-empty-state[b-nx7g3lw5zc]  .rzi {
    font-size: 3rem !important;
    color: #22c55e !important;
    margin-bottom: 1rem;
}

.activity-empty-state h3[b-nx7g3lw5zc] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.activity-empty-state p[b-nx7g3lw5zc] {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}

/* Activity History Card */
.activity-history-card[b-nx7g3lw5zc] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    border: 1px solid #f1f5f9;
}

.activity-history-card:hover[b-nx7g3lw5zc] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Unread Card Styles */
.activity-card-unread[b-nx7g3lw5zc] {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
    border-color: #bfdbfe;
}

.activity-card-unread-badge[b-nx7g3lw5zc] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.2rem 0.6rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Card Icon */
.activity-card-icon[b-nx7g3lw5zc] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-card-icon[b-nx7g3lw5zc]  .rzi {
    font-size: 1.25rem !important;
}

/* Activity Icon Colors */
.activity-card-icon.activity-icon-join[b-nx7g3lw5zc] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #059669;
}

.activity-card-icon.activity-icon-pet[b-nx7g3lw5zc] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #2563eb;
}

.activity-card-icon.activity-icon-scan[b-nx7g3lw5zc] {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #4f46e5;
}

.activity-card-icon.activity-icon-alert[b-nx7g3lw5zc] {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #dc2626;
}

.activity-card-icon.activity-icon-found[b-nx7g3lw5zc] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #059669;
}

.activity-card-icon.activity-icon-help[b-nx7g3lw5zc] {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    color: #db2777;
}

.activity-card-icon.activity-icon-sub[b-nx7g3lw5zc] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #d97706;
}

.activity-card-icon.activity-icon-info[b-nx7g3lw5zc] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
}

/* Card Content */
.activity-card-content[b-nx7g3lw5zc] {
    flex: 1;
    min-width: 0;
}

.activity-card-description[b-nx7g3lw5zc] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a202c;
    line-height: 1.4;
    margin: 0 0 0.5rem 0;
    word-wrap: break-word;
}

.activity-card-meta[b-nx7g3lw5zc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.activity-card-time[b-nx7g3lw5zc],
.activity-card-ip[b-nx7g3lw5zc] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #64748b;
}

.activity-card-time[b-nx7g3lw5zc]  .rzi,
.activity-card-ip[b-nx7g3lw5zc]  .rzi {
    font-size: 0.9rem !important;
    color: #94a3b8 !important;
}

.activity-card-time[b-nx7g3lw5zc] {
    color: #3b82f6;
    font-weight: 500;
}

/* Load More Button */
.btn-load-more-activities[b-nx7g3lw5zc] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: white;
    color: #667eea;
    border: 2px dashed #e2e8f0;
    border-radius: 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-load-more-activities:hover:not(:disabled)[b-nx7g3lw5zc] {
    background: #f8fafc;
    border-color: #667eea;
    color: #4f46e5;
}

.btn-load-more-activities:disabled[b-nx7g3lw5zc] {
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-load-more-activities[b-nx7g3lw5zc]  .rzi {
    font-size: 1.25rem !important;
}

/* Responsive Design for Activity History */
@media (max-width: 768px) {
    .activity-history-section[b-nx7g3lw5zc] {
        padding: 0 1rem 2rem;
    }
    
    .activity-history-header[b-nx7g3lw5zc] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .activity-cards-grid[b-nx7g3lw5zc] {
        grid-template-columns: 1fr;
    }
    
    .activity-history-card[b-nx7g3lw5zc] {
        padding: 1rem;
    }
    
    .activity-card-icon[b-nx7g3lw5zc] {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
    
    .activity-card-icon[b-nx7g3lw5zc]  .rzi {
        font-size: 1.1rem !important;
    }
}
/* Pet Quota CSS - to be appended to Dashboard.razor.css */

/* ========================================
   PET QUOTA & OVER-LIMIT STYLES
   ======================================== */

/* Stat Card with Quota Progress */
.stat-card-pets[b-nx7g3lw5zc] {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.stat-card-pets .stat-info[b-nx7g3lw5zc] {
    flex: 1;
    min-width: 0;
}

.stat-card-warning[b-nx7g3lw5zc] {
    border-left: 4px solid #ef5350;
}

.stat-progress-container[b-nx7g3lw5zc] {
    width: 100%;
    height: 16px;
    background: #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.stat-progress-bar[b-nx7g3lw5zc] {
    height: 100%;
    border-radius: 8px;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 28px;
}

.stat-progress-label[b-nx7g3lw5zc] {
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    padding-right: 6px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.stat-progress-bar.quota-normal[b-nx7g3lw5zc] {
    background: #4caf50;
}

.stat-progress-bar.quota-warning[b-nx7g3lw5zc] {
    background: #ff9800;
}

.stat-progress-bar.quota-limit[b-nx7g3lw5zc] {
    background: #ffa726;
}

.stat-progress-bar.quota-over[b-nx7g3lw5zc] {
    background: #ef5350;
}

.stat-warning-text[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    font-size: 0.7rem;
    color: #c62828;
    font-weight: 500;
}

.stat-warning-text[b-nx7g3lw5zc]  .rzi {
    font-size: 0.85rem !important;
    color: #c62828 !important;
}

/* Card Header Enhancements */
.card-header-left[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.card-header-actions[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Pets Quota Badge */
.pets-quota-badge[b-nx7g3lw5zc] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.pets-quota-badge[b-nx7g3lw5zc]  .rzi {
    font-size: 0.85rem !important;
}

.badge-normal[b-nx7g3lw5zc] {
    background: #e8f5e9;
    color: #2e7d32;
}

.badge-near-limit[b-nx7g3lw5zc] {
    background: #fff3e0;
    color: #ef6c00;
}

.badge-at-limit[b-nx7g3lw5zc] {
    background: #fff8e1;
    color: #f57c00;
}

.badge-over-limit[b-nx7g3lw5zc] {
    background: #ffebee;
    color: #c62828;
    animation: pulse-badge-b-nx7g3lw5zc 2s ease-in-out infinite;
}

@keyframes pulse-badge-b-nx7g3lw5zc {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.badge-over-limit[b-nx7g3lw5zc]  .rzi {
    color: #c62828 !important;
}

/* Upgrade Button (Small) */
.btn-upgrade-small[b-nx7g3lw5zc] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, #ef5350, #c62828);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-upgrade-small:hover[b-nx7g3lw5zc] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.3);
    color: white;
}

.btn-upgrade-small[b-nx7g3lw5zc]  .rzi {
    font-size: 0.85rem !important;
}

/* Disabled Add Pet Button */
.btn-card-action.btn-disabled[b-nx7g3lw5zc] {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

/* Pet Protection Badge */
.pet-protection-badge[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.65rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

.pet-protection-badge.protected[b-nx7g3lw5zc] {
    background: #e8f5e9;
    color: #2e7d32;
}

.pet-protection-badge.protected[b-nx7g3lw5zc]  .rzi {
    font-size: 0.75rem !important;
    color: #2e7d32 !important;
}

.pet-protection-badge.unprotected[b-nx7g3lw5zc] {
    background: #ffebee;
    color: #c62828;
}

.pet-protection-badge.unprotected[b-nx7g3lw5zc]  .rzi {
    font-size: 0.85rem !important;
    color: #c62828 !important;
}

/* Over Limit Separator */
.over-limit-separator[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 0.5rem 0;
}

.separator-line[b-nx7g3lw5zc] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ef5350, transparent);
}

.separator-text[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    background: #ffebee;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #c62828;
    white-space: nowrap;
}

.separator-text[b-nx7g3lw5zc]  .rzi {
    font-size: 0.85rem !important;
    color: #c62828 !important;
}

/* Over-Limit Pet Styling */
.pet-over-limit .pet-item-dimmed[b-nx7g3lw5zc] {
    opacity: 0.7;
    background: #fafafa;
    border-color: #ffcdd2;
}

.pet-over-limit:hover .pet-item-dimmed[b-nx7g3lw5zc] {
    opacity: 0.85;
    background: #fff8f8;
}

.pet-over-limit .pet-img[b-nx7g3lw5zc] {
    filter: grayscale(30%);
}

.pet-status-unprotected[b-nx7g3lw5zc] {
    background: #ffebee !important;
    color: #c62828 !important;
}

.pet-status-unprotected[b-nx7g3lw5zc]  .rzi {
    font-size: 0.7rem !important;
    color: #c62828 !important;
}

/* Upgrade Prompt */
.upgrade-prompt[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
    border: 1px solid #ffca28;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #f57c00;
    flex-wrap: wrap;
}

.upgrade-prompt[b-nx7g3lw5zc]  .rzi {
    font-size: 1.1rem !important;
    color: #f57c00 !important;
}

.btn-upgrade-prompt[b-nx7g3lw5zc] {
    padding: 0.35rem 0.75rem;
    background: #f57c00;
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-left: auto;
}

.btn-upgrade-prompt:hover[b-nx7g3lw5zc] {
    background: #ef6c00;
    color: white;
}

/* Responsive Adjustments for Quota Display */
@media (max-width: 768px) {
    .card-header-left[b-nx7g3lw5zc] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .card-header-actions[b-nx7g3lw5zc] {
        width: 100%;
        justify-content: flex-end;
    }
    
    .pets-quota-badge[b-nx7g3lw5zc] {
        align-self: flex-start;
    }
    
    .pet-protection-badge[b-nx7g3lw5zc] {
        display: none;
    }
    
    .upgrade-prompt[b-nx7g3lw5zc] {
        flex-direction: column;
        text-align: center;
    }
    
    .btn-upgrade-prompt[b-nx7g3lw5zc] {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .stat-progress-container[b-nx7g3lw5zc] {
        display: none;
    }
}

/* Pet Item Row with Actions */
.pet-item-row[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pet-item-row .pet-item-link[b-nx7g3lw5zc] {
    flex: 1;
    min-width: 0;
}

.pet-item-actions[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pet-item-row:hover .pet-item-actions[b-nx7g3lw5zc] {
    opacity: 1;
}

.pet-action-btn[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pet-action-btn:hover[b-nx7g3lw5zc] {
    background: #f1f5f9;
}

.pet-action-btn[b-nx7g3lw5zc]  .rzi {
    font-size: 1rem !important;
}

.pet-action-deactivate:hover[b-nx7g3lw5zc] {
    color: #f59e0b;
    background: #fef3c7;
}

.pet-action-delete:hover[b-nx7g3lw5zc] {
    color: #ef4444;
    background: #fee2e2;
}

/* Delete Confirmation Modal */
.modal-overlay[b-nx7g3lw5zc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-nx7g3lw5zc 0.2s ease;
    overflow: hidden;
    overscroll-behavior: contain;
}

@keyframes fadeIn-b-nx7g3lw5zc {
    from { opacity: 0; }
    to { opacity: 1; }
}

.delete-confirm-dialog[b-nx7g3lw5zc] {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    overflow: hidden;
    animation: slideUp-b-nx7g3lw5zc 0.2s ease;
}

@keyframes slideUp-b-nx7g3lw5zc {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.delete-confirm-dialog .modal-header[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: none;
}

.delete-warning-icon[b-nx7g3lw5zc]  .rzi {
    font-size: 3rem !important;
    color: #ef4444 !important;
}

.delete-confirm-dialog .modal-header h3[b-nx7g3lw5zc] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
}

.delete-confirm-dialog .modal-body[b-nx7g3lw5zc] {
    padding: 0 1.5rem 1.5rem;
    text-align: center;
}

.delete-confirm-dialog .modal-body p[b-nx7g3lw5zc] {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.delete-confirm-dialog .modal-body .text-warning[b-nx7g3lw5zc] {
    color: #ef4444;
    font-weight: 500;
    font-size: 0.85rem;
}

.delete-confirm-dialog .modal-footer[b-nx7g3lw5zc] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
    justify-content: center;
    border-top: none;
}

.delete-confirm-dialog .btn[b-nx7g3lw5zc] {
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.delete-confirm-dialog .btn-secondary[b-nx7g3lw5zc] {
    background: #f3f4f6;
    color: #374151;
}

.delete-confirm-dialog .btn-secondary:hover[b-nx7g3lw5zc] {
    background: #e5e7eb;
}

.delete-confirm-dialog .btn-danger[b-nx7g3lw5zc] {
    background: #ef4444;
    color: white;
}

.delete-confirm-dialog .btn-danger:hover[b-nx7g3lw5zc] {
    background: #dc2626;
}

/* Responsive adjustments for pet actions */
@media (max-width: 768px) {
    .pet-item-actions[b-nx7g3lw5zc] {
        opacity: 1;
    }
    
    .pet-action-btn[b-nx7g3lw5zc] {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .pet-item-row[b-nx7g3lw5zc] {
        flex-wrap: wrap;
    }
    
    .pet-item-actions[b-nx7g3lw5zc] {
        width: 100%;
        justify-content: flex-end;
        padding-top: 0.5rem;
        border-top: 1px solid #f1f5f9;
        margin-top: 0.5rem;
    }
}

/* ========================================
   DEACTIVATED PETS SECTION
   ======================================== */

.deactivated-pets-card[b-nx7g3lw5zc] {
    background: #fafbfc;
    border: 1px dashed #d1d5db;
}

.deactivated-pets-card .card-header[b-nx7g3lw5zc] {
    background: transparent;
    border-bottom: 1px dashed #e5e7eb;
}

.deactivated-pets-card .card-header h2[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 1rem;
}

.deactivated-pets-card .card-header h2[b-nx7g3lw5zc]  .rzi {
    font-size: 1.25rem !important;
    color: #9ca3af !important;
}

.deactivated-count-badge[b-nx7g3lw5zc] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: #e5e7eb;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
}

.deactivated-info[b-nx7g3lw5zc] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f3f4f6;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

.deactivated-info[b-nx7g3lw5zc]  .rzi {
    font-size: 1rem !important;
    color: #9ca3af !important;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.deactivated-pets-list[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.deactivated-pet-item[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.deactivated-pet-item .pet-item-link[b-nx7g3lw5zc] {
    flex: 1;
    min-width: 0;
}

.pet-item-deactivated[b-nx7g3lw5zc] {
    opacity: 0.65;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
}

.deactivated-pet-item:hover .pet-item-deactivated[b-nx7g3lw5zc] {
    opacity: 0.85;
    background: white;
    border-style: solid;
    border-color: #9ca3af;
}

.pet-img-deactivated[b-nx7g3lw5zc] {
    filter: grayscale(60%);
}

.deactivated-pet-item:hover .pet-img-deactivated[b-nx7g3lw5zc] {
    filter: grayscale(30%);
}

.pet-status-deactivated[b-nx7g3lw5zc] {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
}

.pet-status-deactivated[b-nx7g3lw5zc]  .rzi {
    font-size: 0.7rem !important;
    color: #9ca3af !important;
}

/* Deactivated Pet Actions */
.deactivated-pet-item .pet-item-actions[b-nx7g3lw5zc] {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.deactivated-pet-item:hover .pet-item-actions[b-nx7g3lw5zc] {
    opacity: 1;
}

.pet-action-reactivate[b-nx7g3lw5zc] {
    text-decoration: none;
}

.pet-action-reactivate:hover[b-nx7g3lw5zc] {
    color: #10b981 !important;
    background: #d1fae5 !important;
}

.pet-action-reactivate[b-nx7g3lw5zc]  .rzi {
    color: inherit !important;
}

.pet-action-edit[b-nx7g3lw5zc] {
    text-decoration: none;
}

.pet-action-edit:hover[b-nx7g3lw5zc] {
    color: #3b82f6 !important;
    background: #dbeafe !important;
}

.pet-action-edit[b-nx7g3lw5zc]  .rzi {
    color: inherit !important;
}

/* Responsive for Deactivated Pets */
@media (max-width: 768px) {
    .deactivated-pet-item .pet-item-actions[b-nx7g3lw5zc] {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .deactivated-info[b-nx7g3lw5zc] {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .deactivated-pet-item[b-nx7g3lw5zc] {
        flex-wrap: wrap;
    }
    
    .deactivated-pet-item .pet-item-actions[b-nx7g3lw5zc] {
        width: 100%;
        justify-content: flex-end;
        padding-top: 0.5rem;
        border-top: 1px dashed #e5e7eb;
        margin-top: 0.5rem;
    }
}

/* ====================================
   Clickable Stat Cards
   ==================================== */
.stat-card-clickable[b-nx7g3lw5zc] {
    cursor: pointer;
    position: relative;
}

.stat-card-clickable:hover[b-nx7g3lw5zc] {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.stat-card-clickable:active[b-nx7g3lw5zc] {
    transform: translateY(-2px);
}

.stat-card-action[b-nx7g3lw5zc] {
    margin-left: auto;
    color: #94a3b8;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.stat-card-clickable:hover .stat-card-action[b-nx7g3lw5zc] {
    opacity: 1;
    transform: translateX(3px);
}

.stat-card-action[b-nx7g3lw5zc]  .rzi {
    font-size: 1.25rem !important;
}

/* ====================================
   Stats Detail Modal
   ==================================== */
.stats-detail-modal[b-nx7g3lw5zc] {
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: white;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-nx7g3lw5zc 0.2s ease;
    overscroll-behavior: contain;
}

.stats-modal-header[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.modal-title-section[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-title-section .stat-icon[b-nx7g3lw5zc] {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-title-section h3[b-nx7g3lw5zc] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.modal-subtitle[b-nx7g3lw5zc] {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
}

.modal-close-btn[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close-btn:hover[b-nx7g3lw5zc] {
    background: #e2e8f0;
    color: #1e293b;
}

.modal-close-btn[b-nx7g3lw5zc]  .rzi {
    font-size: 1.25rem !important;
}

.stats-modal-body[b-nx7g3lw5zc] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    background: white;
    overscroll-behavior: contain;
}

/* Stats Summary Row */
.stats-summary-row[b-nx7g3lw5zc] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.stats-summary-item[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stats-summary-value[b-nx7g3lw5zc] {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.stats-summary-label[b-nx7g3lw5zc] {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stats-summary-divider[b-nx7g3lw5zc] {
    width: 1px;
    height: 40px;
    background: #e2e8f0;
}

/* Stats Empty State */
.stats-empty-state[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
}

.stats-empty-state .empty-icon[b-nx7g3lw5zc] {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.stats-empty-state .empty-icon[b-nx7g3lw5zc]  .rzi {
    font-size: 3rem !important;
}

.stats-empty-state p[b-nx7g3lw5zc] {
    font-size: 1rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.stats-empty-state .empty-hint[b-nx7g3lw5zc] {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 1.25rem;
    max-width: 280px;
}

.btn-primary-small[b-nx7g3lw5zc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-primary-small:hover[b-nx7g3lw5zc] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    color: white;
    text-decoration: none;
}

/* Stats Activity List */
.stats-activity-list[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.list-section-title[b-nx7g3lw5zc] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.stats-activity-item[b-nx7g3lw5zc] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    transition: background 0.2s ease;
}

.stats-activity-item:hover[b-nx7g3lw5zc] {
    background: #f1f5f9;
}

.activity-item-icon[b-nx7g3lw5zc] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dbeafe;
    color: #2563eb;
}

.activity-item-icon[b-nx7g3lw5zc]  .rzi {
    font-size: 1.1rem !important;
}

.activity-item-icon.activity-icon-found[b-nx7g3lw5zc] {
    background: #d1fae5;
    color: #10b981;
}

.activity-item-icon.activity-icon-scan[b-nx7g3lw5zc] {
    background: #ede9fe;
    color: #7c3aed;
}

.activity-item-icon.activity-icon-help[b-nx7g3lw5zc] {
    background: #ffedd5;
    color: #f97316;
}

.activity-item-content[b-nx7g3lw5zc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.activity-item-header[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.activity-type-badge[b-nx7g3lw5zc] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: #e0f2fe;
    color: #0284c7;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.activity-item-desc[b-nx7g3lw5zc] {
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.activity-item-time[b-nx7g3lw5zc] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.activity-item-link[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0.375rem;
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.2s ease;
}

.activity-item-link:hover[b-nx7g3lw5zc] {
    background: #e2e8f0;
    color: #2563eb;
}

.activity-item-link[b-nx7g3lw5zc]  .rzi {
    font-size: 1rem !important;
}

/* Modal Loading State */
.modal-loading[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
    color: #64748b;
}

/* Responsive adjustments for stat modals */
@media (max-width: 520px) {
    .stats-detail-modal[b-nx7g3lw5zc] {
        max-width: 100%;
        margin: 0 1rem;
        max-height: 90vh;
    }
    
    .stats-summary-row[b-nx7g3lw5zc] {
        gap: 1rem;
        padding: 1rem;
    }
    
    .stats-summary-value[b-nx7g3lw5zc] {
        font-size: 1.5rem;
    }
    
    .stats-modal-body[b-nx7g3lw5zc] {
        padding: 1rem;
    }
}

/* ========================================
   PENDING MATCHES SECTION (Urgent Alert)
   ======================================== */

.matches-card.urgent-card[b-nx7g3lw5zc] {
    border: 2px solid #22c55e;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.15);
    overflow: visible;
}

.matches-header[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-title-group[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.urgent-icon[b-nx7g3lw5zc] {
    color: #22c55e;
}

.urgent-icon.pulse[b-nx7g3lw5zc]  .rzi {
    animation: pulse-green-b-nx7g3lw5zc 2s infinite;
}

@keyframes pulse-green-b-nx7g3lw5zc {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.match-count-badge[b-nx7g3lw5zc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.5rem;
    background: #22c55e;
    color: white;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
}

.pending-matches-list[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.match-alert-card[b-nx7g3lw5zc] {
    display: grid;
    grid-template-columns: auto minmax(200px, 1fr) auto;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    align-items: start;
}

.match-alert-card:hover[b-nx7g3lw5zc] {
    border-color: #22c55e;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.match-photo-section[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.match-score-below[b-nx7g3lw5zc] {
    display: flex;
    justify-content: center;
}

.match-photo[b-nx7g3lw5zc] {
    width: 80px;
    height: 80px;
    border-radius: 0.75rem;
    object-fit: cover;
}

.match-photo-placeholder[b-nx7g3lw5zc] {
    width: 80px;
    height: 80px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.match-photo-placeholder[b-nx7g3lw5zc]  .rzi {
    font-size: 2rem !important;
    color: #94a3b8 !important;
}

.confidence-badge[b-nx7g3lw5zc] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 2px solid white;
}

.confidence-badge.confidence-high[b-nx7g3lw5zc] {
    background: #22c55e;
    color: white;
}

.confidence-badge.confidence-medium[b-nx7g3lw5zc] {
    background: #f59e0b;
    color: white;
}

.confidence-badge.confidence-low[b-nx7g3lw5zc] {
    background: #94a3b8;
    color: white;
}

.match-info-section[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.match-pet-name[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.match-pet-name[b-nx7g3lw5zc]  .rzi {
    font-size: 1.1rem !important;
    color: #22c55e !important;
}

.match-details[b-nx7g3lw5zc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: #64748b;
}

.match-details span[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.match-details[b-nx7g3lw5zc]  .rzi {
    font-size: 0.9rem !important;
    color: #94a3b8 !important;
}

.match-reasoning[b-nx7g3lw5zc] {
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: 0.375rem;
    border-left: 3px solid #22c55e;
    min-width: 220px;
}

.match-actions-section[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

.match-btn[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.match-btn[b-nx7g3lw5zc]  .rzi {
    font-size: 0.9rem !important;
}

.match-btn-confirm[b-nx7g3lw5zc] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.match-btn-confirm:hover[b-nx7g3lw5zc] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.match-btn-reject[b-nx7g3lw5zc] {
    background: #f1f5f9;
    color: #64748b;
}

.match-btn-reject:hover[b-nx7g3lw5zc] {
    background: #fee2e2;
    color: #dc2626;
}

.match-btn-view[b-nx7g3lw5zc] {
    background: transparent;
    color: #2563eb;
    border: 1px solid #e2e8f0;
}

.match-btn-view:hover[b-nx7g3lw5zc] {
    background: #eff6ff;
    border-color: #2563eb;
}

/* Responsive layout for match cards */
@media (max-width: 900px) {
    .match-alert-card[b-nx7g3lw5zc] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .match-photo-section[b-nx7g3lw5zc] {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;
    }
    
    .match-actions-section[b-nx7g3lw5zc] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .match-btn[b-nx7g3lw5zc] {
        flex: 1;
        min-width: fit-content;
    }
}

/* ========================================
   MY SIGHTINGS SECTION
   ======================================== */

.sightings-card .empty-state-small[b-nx7g3lw5zc] {
    padding: 2rem 1rem;
}

.empty-hint[b-nx7g3lw5zc] {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 0.5rem;
}

.btn-empty-action-small[b-nx7g3lw5zc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-empty-action-small:hover[b-nx7g3lw5zc] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    color: white;
}

.sightings-list[b-nx7g3lw5zc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sighting-item[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sighting-item:hover[b-nx7g3lw5zc] {
    background: white;
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.sighting-photo[b-nx7g3lw5zc] {
    flex-shrink: 0;
}

.sighting-photo img[b-nx7g3lw5zc] {
    width: 56px;
    height: 56px;
    border-radius: 0.5rem;
    object-fit: cover;
}

.sighting-photo-placeholder[b-nx7g3lw5zc] {
    width: 56px;
    height: 56px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sighting-photo-placeholder[b-nx7g3lw5zc]  .rzi {
    font-size: 1.5rem !important;
    color: #94a3b8 !important;
}

.sighting-details[b-nx7g3lw5zc] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sighting-title[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.sighting-type-label[b-nx7g3lw5zc] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.sighting-type-label.type-lost[b-nx7g3lw5zc] {
    background: #fef3c7;
    color: #d97706;
}

.sighting-type-label.type-found[b-nx7g3lw5zc] {
    background: #dcfce7;
    color: #16a34a;
}

.sighting-location[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sighting-location[b-nx7g3lw5zc]  .rzi {
    font-size: 0.85rem !important;
    color: #94a3b8 !important;
    flex-shrink: 0;
}

.sighting-meta[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sighting-status[b-nx7g3lw5zc] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.sighting-status.status-active[b-nx7g3lw5zc] {
    background: #dbeafe;
    color: #2563eb;
}

.sighting-status.status-match[b-nx7g3lw5zc] {
    background: #fef3c7;
    color: #d97706;
}

.sighting-status.status-confirmed[b-nx7g3lw5zc] {
    background: #dcfce7;
    color: #16a34a;
}

.sighting-status.status-reunited[b-nx7g3lw5zc] {
    background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
    color: #059669;
}

.sighting-status.status-closed[b-nx7g3lw5zc],
.sighting-status.status-expired[b-nx7g3lw5zc] {
    background: #f1f5f9;
    color: #64748b;
}

.sighting-matches[b-nx7g3lw5zc] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #f59e0b;
    font-weight: 600;
}

.sighting-matches[b-nx7g3lw5zc]  .rzi {
    font-size: 0.8rem !important;
    color: #f59e0b !important;
}

.sighting-action[b-nx7g3lw5zc] {
    flex-shrink: 0;
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.sighting-item:hover .sighting-action[b-nx7g3lw5zc] {
    transform: translateX(4px);
    color: #667eea;
}

/* Responsive adjustments for matches and sightings */
@media (max-width: 768px) {
    .match-alert-card[b-nx7g3lw5zc] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .match-photo-section[b-nx7g3lw5zc] {
        display: flex;
        justify-content: center;
    }
    
    .match-actions-section[b-nx7g3lw5zc] {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .match-btn[b-nx7g3lw5zc] {
        flex: 1;
        min-width: 100px;
    }
}

@media (max-width: 480px) {
    .sighting-item[b-nx7g3lw5zc] {
        flex-wrap: wrap;
    }
    
    .sighting-details[b-nx7g3lw5zc] {
        width: calc(100% - 72px);
    }
    
    .sighting-action[b-nx7g3lw5zc] {
        width: 100%;
        text-align: right;
        padding-top: 0.5rem;
        border-top: 1px solid #f1f5f9;
        margin-top: 0.5rem;
    }
}
/* /Components/Pages/EditPet.razor.rz.scp.css */
/* Edit Pet Page - Award-Winning Professional Design */

.edit-pet-page[b-gvrzyta52c] {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Loading & Error States */
.loading-container[b-gvrzyta52c],
.error-container[b-gvrzyta52c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

.error-container[b-gvrzyta52c]  .rzi {
    font-size: 4rem !important;
    color: #ef4444 !important;
    margin-bottom: 1rem;
}

.error-container h2[b-gvrzyta52c] {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.error-container p[b-gvrzyta52c] {
    color: #64748b;
    margin-bottom: 1.5rem;
}

/* Edit Header */
.edit-header[b-gvrzyta52c] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    padding: 1rem 1.5rem;
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

.edit-header-content[b-gvrzyta52c] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-back[b-gvrzyta52c] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-back:hover[b-gvrzyta52c] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.btn-back[b-gvrzyta52c]  .rzi {
    font-size: 1.25rem !important;
    color: white !important;
}

.edit-header-info[b-gvrzyta52c] {
    flex: 1;
    min-width: 0;
}

.edit-header-info h1[b-gvrzyta52c] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edit-header-info p[b-gvrzyta52c] {
    font-size: 0.85rem;
    opacity: 0.9;
    margin: 0;
    display: none;
}

.edit-header-actions[b-gvrzyta52c] {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.btn-cancel[b-gvrzyta52c] {
    padding: 0.625rem 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: none;
}

.btn-cancel:hover:not(:disabled)[b-gvrzyta52c] {
    background: rgba(255, 255, 255, 0.2);
}

.btn-save[b-gvrzyta52c] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: white;
    color: #6366f1;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-save:hover:not(:disabled)[b-gvrzyta52c] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-save:disabled[b-gvrzyta52c] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-save[b-gvrzyta52c]  .rzi {
    font-size: 1.1rem !important;
    color: #6366f1 !important;
}

/* Alert Messages */
.alert[b-gvrzyta52c] {
    max-width: 900px;
    margin: 1rem auto;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.alert-success[b-gvrzyta52c] {
    background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
    color: #166534;
    border: 1px solid #86efac;
}

.alert-success[b-gvrzyta52c]  .rzi {
    color: #16a34a !important;
    font-size: 1.25rem !important;
}

.alert-error[b-gvrzyta52c] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.alert-error[b-gvrzyta52c]  .rzi {
    color: #dc2626 !important;
    font-size: 1.25rem !important;
}

/* Form Container */
.edit-form-container[b-gvrzyta52c] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Edit Section - Card Style */
.edit-section[b-gvrzyta52c] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.edit-section:hover[b-gvrzyta52c] {
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.1);
}

/* Section Header - Modern Style */
.section-header[b-gvrzyta52c] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.section-icon[b-gvrzyta52c] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-icon[b-gvrzyta52c]  .rzi {
    font-size: 1.5rem !important;
    color: white !important;
}

.section-icon.appearance-icon[b-gvrzyta52c] {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.section-icon.id-icon[b-gvrzyta52c] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.section-icon.location-icon[b-gvrzyta52c] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.section-icon.owner-icon[b-gvrzyta52c] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.section-icon.notes-icon[b-gvrzyta52c] {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.section-icon.privacy-icon[b-gvrzyta52c] {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.section-title[b-gvrzyta52c] {
    flex: 1;
}

.section-title h2[b-gvrzyta52c] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem;
}

.section-title p[b-gvrzyta52c] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

.section-badge[b-gvrzyta52c] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.section-badge[b-gvrzyta52c]  .rzi {
    font-size: 0.875rem !important;
    color: #f59e0b !important;
}

/* Photo Edit Container */
.photo-edit-container[b-gvrzyta52c] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.current-photo[b-gvrzyta52c] {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.current-photo img[b-gvrzyta52c] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-overlay[b-gvrzyta52c] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.9) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s;
}

.current-photo:hover .photo-overlay[b-gvrzyta52c] {
    opacity: 1;
}

.photo-overlay[b-gvrzyta52c]  .rzi {
    font-size: 2rem !important;
    color: white !important;
}

.photo-overlay span[b-gvrzyta52c] {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
}

.photo-info[b-gvrzyta52c] {
    flex: 1;
    min-width: 200px;
}

.photo-info p[b-gvrzyta52c] {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 0.75rem;
}

.photo-tip[b-gvrzyta52c] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #0d9488;
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    padding: 0.875rem 1rem;
    border-radius: 12px;
    border: 1px solid #99f6e4;
}

.photo-tip[b-gvrzyta52c]  .rzi {
    font-size: 1.125rem !important;
    color: #14b8a6 !important;
    flex-shrink: 0;
}

/* Form Grid */
.form-grid[b-gvrzyta52c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.location-fields-grid[b-gvrzyta52c] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}

.form-group[b-gvrzyta52c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group-wide[b-gvrzyta52c] {
    grid-column: 1 / -1;
}

.form-group label[b-gvrzyta52c] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.required[b-gvrzyta52c] {
    color: #ef4444;
}

/* Input with Icon - Icon INSIDE the border */
.input-with-icon[b-gvrzyta52c] {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.input-with-icon:focus-within[b-gvrzyta52c] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.input-with-icon .field-icon[b-gvrzyta52c] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    flex-shrink: 0;
}

.input-with-icon[b-gvrzyta52c]  .field-icon .rzi {
    font-size: 1.25rem !important;
    color: #94a3b8 !important;
    transition: color 0.2s ease;
}

.input-with-icon:focus-within[b-gvrzyta52c]  .field-icon .rzi {
    color: #6366f1 !important;
}

.input-with-icon .form-input[b-gvrzyta52c],
.input-with-icon .form-select[b-gvrzyta52c] {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 0.75rem 1rem 0.75rem 0;
    box-shadow: none !important;
    outline: none;
    min-width: 0;
}

.input-with-icon .form-input:focus[b-gvrzyta52c],
.input-with-icon .form-select:focus[b-gvrzyta52c] {
    outline: none;
    box-shadow: none !important;
}

/* Has Value State - Green Border */
.input-with-icon.has-value[b-gvrzyta52c] {
    border-color: #10b981;
    background: linear-gradient(180deg, #f0fdf4 0%, white 100%);
}

.input-with-icon.has-value[b-gvrzyta52c]  .field-icon .rzi {
    color: #10b981 !important;
}

/* Select styling inside wrapper */
.input-with-icon.select-with-icon .form-select[b-gvrzyta52c] {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    cursor: pointer;
    appearance: none;
}

/* Textarea with Icon - Icon INSIDE the border */
.textarea-with-icon[b-gvrzyta52c] {
    display: flex;
    align-items: flex-start;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.textarea-with-icon:focus-within[b-gvrzyta52c] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.textarea-with-icon .field-icon[b-gvrzyta52c] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0.875rem 0.75rem;
    flex-shrink: 0;
}

.textarea-with-icon[b-gvrzyta52c]  .field-icon .rzi {
    font-size: 1.25rem !important;
    color: #94a3b8 !important;
    transition: color 0.2s ease;
}

.textarea-with-icon:focus-within[b-gvrzyta52c]  .field-icon .rzi {
    color: #6366f1 !important;
}

.textarea-with-icon .form-textarea[b-gvrzyta52c] {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 0.75rem 1rem 0.75rem 0;
    box-shadow: none !important;
    outline: none;
    resize: vertical;
    min-height: 100px;
}

.textarea-with-icon .form-textarea:focus[b-gvrzyta52c] {
    outline: none;
    box-shadow: none !important;
}

/* Has Value State - Green Border */
.textarea-with-icon.has-value[b-gvrzyta52c] {
    border-color: #10b981;
    background: linear-gradient(180deg, #f0fdf4 0%, white 100%);
}

.textarea-with-icon.has-value[b-gvrzyta52c]  .field-icon .rzi {
    color: #10b981 !important;
}

.textarea-with-icon.large .form-textarea[b-gvrzyta52c] {
    min-height: 140px;
}

/* Form Inputs */
.form-input[b-gvrzyta52c],
.form-select[b-gvrzyta52c],
.form-textarea[b-gvrzyta52c] {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #1e293b;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-input:focus[b-gvrzyta52c],
.form-select:focus[b-gvrzyta52c],
.form-textarea:focus[b-gvrzyta52c] {
    outline: none;
    border-color: #6366f1;
    background: white;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.form-input[b-gvrzyta52c]::placeholder,
.form-textarea[b-gvrzyta52c]::placeholder {
    color: #94a3b8;
}

.form-select[b-gvrzyta52c] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}

.form-textarea[b-gvrzyta52c] {
    resize: vertical;
    min-height: 100px;
}

.form-hint[b-gvrzyta52c] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.form-hint[b-gvrzyta52c]  .rzi {
    font-size: 0.875rem !important;
    color: #94a3b8 !important;
}

.validation-error[b-gvrzyta52c] {
    font-size: 0.75rem;
    color: #dc2626;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Modern Checkbox */
.checkbox-group[b-gvrzyta52c] {
    grid-column: span 2;
}

.checkbox-label.modern[b-gvrzyta52c] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
}

.checkbox-label.modern:hover[b-gvrzyta52c] {
    border-color: #6366f1;
    background: #faf5ff;
}

.checkbox-wrapper[b-gvrzyta52c] {
    position: relative;
    flex-shrink: 0;
}

.checkbox-wrapper .form-checkbox[b-gvrzyta52c] {
    width: 24px;
    height: 24px;
    opacity: 0;
    position: absolute;
}

.checkbox-custom[b-gvrzyta52c] {
    width: 24px;
    height: 24px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: white;
}

.checkbox-custom[b-gvrzyta52c]  .rzi {
    font-size: 1rem !important;
    color: white !important;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.form-checkbox:checked + .checkbox-custom[b-gvrzyta52c] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #10b981;
}

.form-checkbox:checked + .checkbox-custom[b-gvrzyta52c]  .rzi {
    opacity: 1;
    transform: scale(1);
}

.checkbox-content[b-gvrzyta52c] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.checkbox-title[b-gvrzyta52c] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
}

.checkbox-desc[b-gvrzyta52c] {
    font-size: 0.8rem;
    color: #64748b;
}

/* Location Picker Wrapper */
.location-picker-wrapper[b-gvrzyta52c] {
    margin-bottom: 1rem;
}

/* Owner Info Banner */
.owner-info-banner[b-gvrzyta52c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border-radius: 12px;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: #5b21b6;
    border: 1px solid #c4b5fd;
}

.owner-info-banner[b-gvrzyta52c]  .rzi {
    font-size: 1.25rem !important;
    color: #7c3aed !important;
}

/* Privacy Options - Toggle Style */
.privacy-options[b-gvrzyta52c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.privacy-option[b-gvrzyta52c] {
    padding: 1.25rem;
    background: #f8fafc;
    border-radius: 14px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.privacy-option.enabled[b-gvrzyta52c] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
}

.toggle-label[b-gvrzyta52c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

.toggle-switch[b-gvrzyta52c] {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.toggle-input[b-gvrzyta52c] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider[b-gvrzyta52c] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cbd5e1;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.toggle-slider[b-gvrzyta52c]::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-input:checked + .toggle-slider[b-gvrzyta52c] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.toggle-input:checked + .toggle-slider[b-gvrzyta52c]::before {
    transform: translateX(24px);
}

.toggle-info[b-gvrzyta52c] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.toggle-title[b-gvrzyta52c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.toggle-title[b-gvrzyta52c]  .rzi {
    font-size: 1.25rem !important;
    color: #6366f1 !important;
}

.toggle-description[b-gvrzyta52c] {
    font-size: 0.85rem;
    color: #64748b;
}

/* Mobile Form Actions */
.form-actions-mobile[b-gvrzyta52c] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    position: sticky;
    bottom: 0;
}

.btn-cancel-mobile[b-gvrzyta52c],
.btn-save-mobile[b-gvrzyta52c] {
    flex: 1;
    padding: 1rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-cancel-mobile[b-gvrzyta52c] {
    background: #f1f5f9;
    color: #475569;
    border: 2px solid #e2e8f0;
}

.btn-cancel-mobile:hover:not(:disabled)[b-gvrzyta52c] {
    background: #e2e8f0;
}

.btn-save-mobile[b-gvrzyta52c] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-save-mobile:hover:not(:disabled)[b-gvrzyta52c] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.btn-save-mobile:disabled[b-gvrzyta52c],
.btn-cancel-mobile:disabled[b-gvrzyta52c] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-save-mobile[b-gvrzyta52c]  .rzi,
.btn-cancel-mobile[b-gvrzyta52c]  .rzi {
    font-size: 1.25rem !important;
}

.btn-save-mobile[b-gvrzyta52c]  .rzi {
    color: white !important;
}

/* Primary Button */
.btn-primary[b-gvrzyta52c] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover[b-gvrzyta52c] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.btn-primary[b-gvrzyta52c]  .rzi {
    font-size: 1.1rem !important;
    color: white !important;
}

/* Tablet Styles */
@media (min-width: 640px) {
    .edit-header[b-gvrzyta52c] {
        padding: 1.25rem 2rem;
    }
    
    .edit-header-info h1[b-gvrzyta52c] {
        font-size: 1.5rem;
    }
    
    .edit-header-info p[b-gvrzyta52c] {
        display: block;
    }
    
    .btn-cancel[b-gvrzyta52c] {
        display: block;
    }
    
    .btn-save[b-gvrzyta52c] {
        padding: 0.75rem 1.75rem;
        font-size: 0.95rem;
    }
    
    .edit-form-container[b-gvrzyta52c] {
        padding: 2rem;
    }
    
    .edit-section[b-gvrzyta52c] {
        padding: 2rem;
    }
    
    .form-grid[b-gvrzyta52c] {
        gap: 1.5rem;
    }
    
    .form-actions-mobile[b-gvrzyta52c] {
        display: none;
    }
    
    .checkbox-group[b-gvrzyta52c] {
        grid-column: span 1;
    }
    
    .location-fields-grid[b-gvrzyta52c] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop Styles */
@media (min-width: 1024px) {
    .edit-header-content[b-gvrzyta52c] {
        gap: 1.5rem;
    }
    
    .current-photo[b-gvrzyta52c] {
        width: 160px;
        height: 160px;
    }
    
    .form-grid[b-gvrzyta52c] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .section-icon[b-gvrzyta52c] {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }
    
    .section-icon[b-gvrzyta52c]  .rzi {
        font-size: 1.75rem !important;
    }
}

/* Mobile Optimizations */
@media (max-width: 639px) {
    .location-fields-grid[b-gvrzyta52c] {
        grid-template-columns: 1fr;
    }
    
    .section-header[b-gvrzyta52c] {
        flex-wrap: wrap;
    }
    
    .section-badge[b-gvrzyta52c] {
        margin-top: 0.5rem;
    }
}

/* Animations */
@keyframes fadeIn-b-gvrzyta52c {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.edit-section[b-gvrzyta52c] {
    animation: fadeIn-b-gvrzyta52c 0.4s ease;
}

/* Focus Visible States for Accessibility */
.form-input:focus-visible[b-gvrzyta52c],
.form-select:focus-visible[b-gvrzyta52c],
.form-textarea:focus-visible[b-gvrzyta52c] {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *[b-gvrzyta52c],
    *[b-gvrzyta52c]::before,
    *[b-gvrzyta52c]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.landing-page[b-n18jqkupvx] {
    min-height: 100vh;
    min-width: 100vw;
    overflow-x: hidden;
}

/* Hero Section */
.hero-section[b-n18jqkupvx] {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 30%, #4c1d95 70%, #581c87 100%);
    width: 100vw;
    min-height: 100vh;
    margin-left: calc(-50vw + 50%);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* Floating Background Images - Happy Pet Owners */
.hero-floating-images[b-n18jqkupvx] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.floating-image[b-n18jqkupvx] {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0.45;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
    border: 4px solid rgba(255, 255, 255, 0.25);
}

.floating-image img[b-n18jqkupvx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9);
}

/* Desktop: 100% larger sizes, strategically positioned to fill background without overlap */
.floating-img-1[b-n18jqkupvx] {
    width: 320px;
    height: 320px;
    top: 2%;
    left: 2%;
    animation: floatImage-b-n18jqkupvx 8s ease-in-out infinite;
}

.floating-img-2[b-n18jqkupvx] {
    width: 280px;
    height: 280px;
    top: 3%;
    right: 3%;
    animation: floatImage-b-n18jqkupvx 7s ease-in-out infinite 1s;
}

.floating-img-3[b-n18jqkupvx] {
    width: 240px;
    height: 240px;
    bottom: 35%;
    left: 1%;
    animation: floatImage-b-n18jqkupvx 9s ease-in-out infinite 2s;
}

.floating-img-4[b-n18jqkupvx] {
    width: 220px;
    height: 220px;
    bottom: 3%;
    left: 18%;
    animation: floatImage-b-n18jqkupvx 6s ease-in-out infinite 0.5s;
}

.floating-img-5[b-n18jqkupvx] {
    width: 260px;
    height: 260px;
    bottom: 5%;
    right: 2%;
    animation: floatImage-b-n18jqkupvx 8s ease-in-out infinite 1.5s;
}

.floating-img-6[b-n18jqkupvx] {
    width: 200px;
    height: 200px;
    top: 45%;
    right: 8%;
    animation: floatImage-b-n18jqkupvx 7s ease-in-out infinite 2.5s;
}

.floating-img-7[b-n18jqkupvx] {
    width: 180px;
    height: 180px;
    bottom: 2%;
    left: 42%;
    animation: floatImage-b-n18jqkupvx 9s ease-in-out infinite 3s;
}

.floating-img-8[b-n18jqkupvx] {
    width: 160px;
    height: 160px;
    top: 35%;
    right: 25%;
    animation: floatImage-b-n18jqkupvx 8s ease-in-out infinite 1.8s;
}

@keyframes floatImage-b-n18jqkupvx {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-12px) rotate(1.5deg);
    }
    50% {
        transform: translateY(-6px) rotate(-1deg);
    }
    75% {
        transform: translateY(-18px) rotate(1deg);
    }
}

/* Tablet: Responsive floating images (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .floating-img-1[b-n18jqkupvx] {
        width: 220px;
        height: 220px;
        top: 3%;
        left: 1%;
    }
    
    .floating-img-2[b-n18jqkupvx] {
        width: 200px;
        height: 200px;
        top: 5%;
        right: 2%;
    }
    
    .floating-img-3[b-n18jqkupvx] {
        width: 160px;
        height: 160px;
        bottom: 40%;
        left: 0%;
    }
    
    .floating-img-4[b-n18jqkupvx] {
        width: 150px;
        height: 150px;
        bottom: 5%;
        left: 10%;
    }
    
    .floating-img-5[b-n18jqkupvx] {
        width: 180px;
        height: 180px;
        bottom: 8%;
        right: 1%;
    }
    
    .floating-img-6[b-n18jqkupvx] {
        width: 140px;
        height: 140px;
        top: 50%;
        right: 5%;
    }
    
    .floating-img-7[b-n18jqkupvx] {
        width: 130px;
        height: 130px;
        bottom: 3%;
        left: 35%;
    }
    
    .floating-img-8[b-n18jqkupvx] {
        width: 120px;
        height: 120px;
        top: 38%;
        right: 22%;
    }
}

/* Mobile: Smaller, strategically placed images (max-width: 768px) */
@media (max-width: 768px) {
    .floating-img-1[b-n18jqkupvx] {
        width: 140px;
        height: 140px;
        top: 2%;
        left: -2%;
    }
    
    .floating-img-2[b-n18jqkupvx] {
        width: 130px;
        height: 130px;
        top: 3%;
        right: -2%;
    }
    
    .floating-img-3[b-n18jqkupvx] {
        width: 110px;
        height: 110px;
        top: 32%;
        left: -3%;
    }
    
    .floating-img-4[b-n18jqkupvx] {
        width: 100px;
        height: 100px;
        bottom: 28%;
        left: 5%;
    }
    
    .floating-img-5[b-n18jqkupvx] {
        width: 120px;
        height: 120px;
        bottom: 8%;
        right: -2%;
    }
    
    .floating-img-6[b-n18jqkupvx] {
        width: 95px;
        height: 95px;
        top: 35%;
        right: 0%;
    }
    
    .floating-img-7[b-n18jqkupvx] {
        width: 90px;
        height: 90px;
        bottom: 5%;
        left: 30%;
    }
    
    .floating-img-8[b-n18jqkupvx] {
        width: 85px;
        height: 85px;
        bottom: 22%;
        right: 8%;
    }
}

/* Small Mobile: Even smaller images (max-width: 480px) */
@media (max-width: 480px) {
    .floating-img-1[b-n18jqkupvx] {
        width: 100px;
        height: 100px;
        top: 1%;
        left: -5%;
    }
    
    .floating-img-2[b-n18jqkupvx] {
        width: 90px;
        height: 90px;
        top: 2%;
        right: -5%;
    }
    
    .floating-img-3[b-n18jqkupvx] {
        width: 80px;
        height: 80px;
        top: 28%;
        left: -8%;
    }
    
    .floating-img-4[b-n18jqkupvx] {
        width: 75px;
        height: 75px;
        bottom: 32%;
        left: 2%;
    }
    
    .floating-img-5[b-n18jqkupvx] {
        width: 85px;
        height: 85px;
        bottom: 10%;
        right: -5%;
    }
    
    .floating-img-6[b-n18jqkupvx] {
        width: 70px;
        height: 70px;
        top: 30%;
        right: -3%;
    }
    
    .floating-img-7[b-n18jqkupvx] {
        width: 65px;
        height: 65px;
        bottom: 6%;
        left: 25%;
    }
    
    .floating-img-8[b-n18jqkupvx] {
        width: 60px;
        height: 60px;
        bottom: 25%;
        right: 5%;
    }
}

.hero-container[b-n18jqkupvx] {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 3rem;
    text-align: center;
}

.hero-content[b-n18jqkupvx] {
    z-index: 1;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-title[b-n18jqkupvx] {
    font-size: 3.75rem;
    font-weight: 800;
    color: white;
    line-height: 1.15;
    margin-bottom: 1.75rem;
    letter-spacing: -0.02em;
}

.hero-title-highlight[b-n18jqkupvx] {
    color: #60a5fa;
}

.hero-description[b-n18jqkupvx] {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.8;
    margin-bottom: 2.5rem;
    max-width: 620px;
}

.hero-buttons[b-n18jqkupvx] {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    margin-bottom: 3rem;
    flex-wrap: nowrap;
    justify-content: center;
}

/* Primary CTA Button - Matching header orange gradient for conversion */
.btn-hero-primary[b-n18jqkupvx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53, #ff6b6b) !important;
    background-size: 200% 200% !important;
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: gradient-pulse-b-n18jqkupvx 2s ease infinite;
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.5);
    text-decoration: none;
}

.btn-hero-primary:hover[b-n18jqkupvx] {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 107, 107, 0.7);
}

@keyframes gradient-pulse-b-n18jqkupvx {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Primary Outline Button - Orange gradient outline version */
.btn-hero-secondary[b-n18jqkupvx],
.btn-hero-primary-outline[b-n18jqkupvx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: transparent;
    color: #ff8e53;
    border: 2px solid #ff8e53;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-hero-secondary:hover[b-n18jqkupvx],
.btn-hero-primary-outline:hover[b-n18jqkupvx] {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    border-color: transparent;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
}

.btn-icon[b-n18jqkupvx] {
    font-size: 1.1rem;
}

.hero-social-proof[b-n18jqkupvx] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.hero-stats[b-n18jqkupvx] {
    display: flex;
    gap: 3rem;
}

.hero-stat[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
}

.hero-stat-number[b-n18jqkupvx] {
    font-size: 2rem;
    font-weight: 700;
    color: white;
}

.hero-stat-label[b-n18jqkupvx] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Hero Cards */
.hero-cards[b-n18jqkupvx] {
    position: relative;
    height: 400px;
    z-index: 1;
}

.pet-card[b-n18jqkupvx] {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    min-width: 260px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.pet-card.lost-card[b-n18jqkupvx] {
    top: 20px;
    left: 0;
    animation: floatCard-b-n18jqkupvx 3s ease-in-out infinite;
}

.pet-card.found-card[b-n18jqkupvx] {
    top: 160px;
    left: 20px;
    animation: floatCard-b-n18jqkupvx 3s ease-in-out infinite 0.5s;
}

/* Pet Card Image - replacing emoji */
.pet-card-image[b-n18jqkupvx] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pet-card-image img[b-n18jqkupvx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-emoji[b-n18jqkupvx] {
    font-size: 2rem;
}

.pet-card-content[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
}

.pet-card-content strong[b-n18jqkupvx] {
    color: white;
    font-size: 1rem;
}

.pet-card-content span[b-n18jqkupvx] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.status-card[b-n18jqkupvx] {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    min-width: 160px;
}

.status-card.match-card[b-n18jqkupvx] {
    top: 50px;
    right: 0;
    animation: floatCard-b-n18jqkupvx 3s ease-in-out infinite 0.25s;
}

.status-card.reunited-card[b-n18jqkupvx] {
    top: 200px;
    right: 20px;
    animation: floatCard-b-n18jqkupvx 3s ease-in-out infinite 0.75s;
}

.status-emoji[b-n18jqkupvx] {
    font-size: 1.5rem;
}

.status-card-content[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
}

.status-card-content strong[b-n18jqkupvx] {
    color: white;
    font-size: 0.9rem;
}

.status-card-content span[b-n18jqkupvx] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
}

@keyframes floatCard-b-n18jqkupvx {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* How It Works Section */
.how-it-works-section[b-n18jqkupvx] {
    width: 100vw;
    min-height: 100vh;
    margin-left: calc(-50vw + 50%);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    box-sizing: border-box;
}

.how-it-works-container[b-n18jqkupvx] {
    max-width: 1400px;
    width: 100%;
    text-align: center;
    padding: 2rem 0 4rem 0;
}

.how-it-works-title[b-n18jqkupvx] {
    font-size: 3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1.5rem;
}

.how-it-works-subtitle[b-n18jqkupvx] {
    font-size: 1.25rem;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.how-it-works-cards[b-n18jqkupvx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.how-it-works-card[b-n18jqkupvx] {
    background: white;
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.how-it-works-card:hover[b-n18jqkupvx] {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.card-icon[b-n18jqkupvx] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.card-icon[b-n18jqkupvx]  .rzi {
    font-size: 1.75rem !important;
}

.card-icon-blue[b-n18jqkupvx] {
    background: #eff6ff;
}

.card-icon-blue[b-n18jqkupvx]  .rzi {
    color: #3b82f6 !important;
}

.card-icon-green[b-n18jqkupvx] {
    background: #f0fdf4;
}

.card-icon-green[b-n18jqkupvx]  .rzi {
    color: #22c55e !important;
}

.card-icon-purple[b-n18jqkupvx] {
    background: #faf5ff;
}

.card-icon-purple[b-n18jqkupvx]  .rzi {
    color: #8b5cf6 !important;
}

.card-icon-orange[b-n18jqkupvx] {
    background: #fff7ed;
}

.card-icon-orange[b-n18jqkupvx]  .rzi {
    color: #f97316 !important;
}

.card-title[b-n18jqkupvx] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.75rem;
}

.card-description[b-n18jqkupvx] {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.card-badge[b-n18jqkupvx] {
    display: inline-block;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid;
}

.card-badge-blue[b-n18jqkupvx] {
    color: #3b82f6;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.card-badge-green[b-n18jqkupvx] {
    color: #22c55e;
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.card-badge-purple[b-n18jqkupvx] {
    color: #8b5cf6;
    border-color: #ddd6fe;
    background: #faf5ff;
}

.card-badge-orange[b-n18jqkupvx] {
    color: #f97316;
    border-color: #fed7aa;
    background: #fff7ed;
}

/* Three Simple Steps Section */
.simple-steps-section[b-n18jqkupvx] {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 5rem 2rem;
    background: #f8fafc;
    box-sizing: border-box;
}

.simple-steps-container[b-n18jqkupvx] {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.simple-steps-title[b-n18jqkupvx] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
}

.simple-steps-subtitle[b-n18jqkupvx] {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 3rem;
}

.simple-steps-cards[b-n18jqkupvx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.simple-step-card[b-n18jqkupvx] {
    background: white;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f5f9;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.simple-step-card:hover[b-n18jqkupvx] {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.step-emoji[b-n18jqkupvx] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.step-number[b-n18jqkupvx] {
    width: 40px;
    height: 40px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
}

.step-connector[b-n18jqkupvx] {
    position: absolute;
    top: 50%;
    right: -1.5rem;
    width: 1.5rem;
    height: 2px;
    background: #3b82f6;
    transform: translateY(-50%);
}

.simple-step-card:last-child .step-connector[b-n18jqkupvx] {
    display: none;
}

.step-title[b-n18jqkupvx] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.75rem;
}

.step-description[b-n18jqkupvx] {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.section-title[b-n18jqkupvx] {
    font-weight: 700 !important;
    color: #2d3748 !important;
    margin-bottom: 0.5rem !important;
}

.section-subtitle[b-n18jqkupvx] {
    color: #6c757d !important;
    max-width: 500px;
}

/* Success Stories (within Testimonials) */
.success-stories-content[b-n18jqkupvx] {
    padding: 3rem;
}

.success-stories-title[b-n18jqkupvx] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
}

.success-stories-subtitle[b-n18jqkupvx] {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.success-stories-list[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.success-story-item[b-n18jqkupvx] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.story-emoji[b-n18jqkupvx] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.story-content[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.story-content strong[b-n18jqkupvx] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
}

.story-content span[b-n18jqkupvx] {
    font-size: 0.9rem;
    color: #64748b;
}

.success-stories-stats[b-n18jqkupvx] {
    height: 100%;
    min-height: 350px;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 30%, #8b5cf6 70%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stats-card[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.stats-heart[b-n18jqkupvx] {
    font-size: 3.5rem;
    animation: heartbeat-b-n18jqkupvx 1.5s ease-in-out infinite;
}

@keyframes heartbeat-b-n18jqkupvx {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.stats-number[b-n18jqkupvx] {
    font-size: 2rem;
    font-weight: 700;
    color: white;
}

.stats-subtext[b-n18jqkupvx] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Features Section */
.features-section[b-n18jqkupvx] {
    padding: 4rem 2rem;
    background: #f8f9fa;
}

.feature-card[b-n18jqkupvx] {
    padding: 1.5rem !important;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover[b-n18jqkupvx] {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Integrated Veterinary Care Section */
.vet-care-section[b-n18jqkupvx] {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 5rem 2rem;
    background: linear-gradient(180deg, #f0f4ff 0%, #f8fafc 100%);
    box-sizing: border-box;
}

.vet-care-container[b-n18jqkupvx] {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.vet-care-icon[b-n18jqkupvx] {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.vet-care-icon[b-n18jqkupvx]  .rzi {
    font-size: 2rem !important;
    color: #4f46e5 !important;
}

.vet-care-title[b-n18jqkupvx] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
}

.vet-care-subtitle[b-n18jqkupvx] {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.vet-care-cards[b-n18jqkupvx] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.vet-care-card[b-n18jqkupvx] {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f5f9;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vet-care-card:hover[b-n18jqkupvx] {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.vet-card-icon[b-n18jqkupvx] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: #f0f4ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vet-card-icon[b-n18jqkupvx]  .rzi {
    font-size: 1.5rem !important;
    color: #4f46e5 !important;
}

.vet-card-content h3[b-n18jqkupvx] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.vet-card-content p[b-n18jqkupvx] {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.vet-care-cta[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.btn-vet-care[b-n18jqkupvx] {
    background: #4f46e5;
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-vet-care:hover[b-n18jqkupvx] {
    background: #4338ca;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}

.vet-care-note[b-n18jqkupvx] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

/* Live Sightings Map Section */
.live-map-section[b-n18jqkupvx] {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 5rem 2rem;
    background: #f8fafc;
    box-sizing: border-box;
}

.live-map-container[b-n18jqkupvx] {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.live-map-title[b-n18jqkupvx] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
}

.live-map-subtitle[b-n18jqkupvx] {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.live-map-content[b-n18jqkupvx] {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 0;
    background: white;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.map-panel[b-n18jqkupvx] {
    background: linear-gradient(135deg, #e0e7ff 0%, #f0e6fa 100%);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 450px;
}

.usa-map-container[b-n18jqkupvx] {
    width: 100%;
    max-width: 600px;
    margin-bottom: 1.5rem;
}

.map-wrapper[b-n18jqkupvx] {
    position: relative;
    width: 100%;
}

.usa-map-img[b-n18jqkupvx] {
    width: 100%;
    height: auto;
    filter: hue-rotate(200deg) saturate(0.3) brightness(1.1);
    opacity: 0.9;
}

.map-dots-overlay[b-n18jqkupvx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-dot[b-n18jqkupvx] {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.map-dot:hover[b-n18jqkupvx] {
    transform: translate(-50%, -50%) scale(1.4);
    z-index: 10;
}

.dot-lost[b-n18jqkupvx] {
    background: #ef4444;
    animation: pulse-dot-b-n18jqkupvx 2s infinite;
}

.dot-found[b-n18jqkupvx] {
    background: #22c55e;
    animation: pulse-dot-b-n18jqkupvx 2s infinite 0.5s;
}

.dot-matched[b-n18jqkupvx] {
    background: #3b82f6;
    width: 16px;
    height: 16px;
    animation: pulse-dot-b-n18jqkupvx 2s infinite 1s;
}

@keyframes pulse-dot-b-n18jqkupvx {
    0%, 100% { 
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
    }
    50% { 
        opacity: 0.7;
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
    }
}

.map-legend[b-n18jqkupvx] {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.legend-item[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #475569;
}

.legend-dot[b-n18jqkupvx] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-lost[b-n18jqkupvx] {
    background: #ef4444;
}

.legend-found[b-n18jqkupvx] {
    background: #22c55e;
}

.legend-matched[b-n18jqkupvx] {
    background: #3b82f6;
}

/* Activity Panel */
.activity-panel[b-n18jqkupvx] {
    padding: 1.5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.activity-title[b-n18jqkupvx] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 1rem;
}

.activity-feed[b-n18jqkupvx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    max-height: 320px;
}

.activity-item[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: #f8fafc;
    border-left: 3px solid;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.activity-item:hover[b-n18jqkupvx] {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.activity-lost[b-n18jqkupvx] {
    border-left-color: #ef4444;
}

.activity-found[b-n18jqkupvx] {
    border-left-color: #22c55e;
}

.activity-matched[b-n18jqkupvx] {
    border-left-color: #3b82f6;
}

.activity-img[b-n18jqkupvx] {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    object-fit: cover;
}

.activity-info[b-n18jqkupvx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.activity-info strong[b-n18jqkupvx] {
    font-size: 0.9rem;
    color: #1a202c;
}

.activity-location[b-n18jqkupvx] {
    font-size: 0.8rem;
    color: #64748b;
}

.activity-time[b-n18jqkupvx] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.activity-badge[b-n18jqkupvx] {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
}

.badge-active[b-n18jqkupvx] {
    background: #f1f5f9;
    color: #64748b;
}

.badge-matched[b-n18jqkupvx] {
    background: #dbeafe;
    color: #2563eb;
}

.activity-buttons[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.btn-report-found[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #3b82f6;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-report-found:hover[b-n18jqkupvx] {
    background: #2563eb;
}

.btn-report-found[b-n18jqkupvx]  .rzi {
    font-size: 1rem !important;
}

.btn-search-lost[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-search-lost:hover[b-n18jqkupvx] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.btn-search-lost[b-n18jqkupvx]  .rzi {
    font-size: 1rem !important;
}

/* Full-Width Map Panel for Homepage */
.map-panel-fullwidth[b-n18jqkupvx] {
    background: linear-gradient(145deg, #f0f7ff 0%, #e8f4f8 100%);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.usa-map-container-large[b-n18jqkupvx] {
    width: 100%;
    margin-bottom: 1rem;
}

.usa-map-container-large .map-wrapper[b-n18jqkupvx] {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.usa-map-container-large .usa-map-img[b-n18jqkupvx] {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    filter: hue-rotate(200deg) saturate(0.3) brightness(1.1);
    opacity: 0.9;
}

.map-panel-fullwidth .map-legend[b-n18jqkupvx] {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.legend-link[b-n18jqkupvx] {
    margin-left: auto;
}

.view-full-map-link[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #1b6ec2;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.view-full-map-link:hover[b-n18jqkupvx] {
    color: #1558a3;
    text-decoration: underline;
}

/* Horizontal Activity Feed */
.activity-panel-horizontal[b-n18jqkupvx] {
    margin-bottom: 1.5rem;
}

.activity-header-row[b-n18jqkupvx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.activity-header-row .activity-title[b-n18jqkupvx] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Live Updates Indicator */
.activity-live-indicator[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #22c55e;
    font-weight: 500;
}

.live-dot[b-n18jqkupvx] {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse-live-b-n18jqkupvx 2s ease-in-out infinite;
}

@keyframes pulse-live-b-n18jqkupvx {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.3);
    }
}

.activity-view-all[b-n18jqkupvx] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.view-all-link[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #1b6ec2;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.view-all-link:hover[b-n18jqkupvx] {
    text-decoration: underline;
}

.activity-feed-horizontal[b-n18jqkupvx] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.activity-feed-horizontal[b-n18jqkupvx]::-webkit-scrollbar {
    height: 6px;
}

.activity-feed-horizontal[b-n18jqkupvx]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.activity-feed-horizontal[b-n18jqkupvx]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

/* Detailed Activity Card - Matching LiveMap Design */
.activity-card-detailed[b-n18jqkupvx] {
    flex: 0 0 auto;
    width: 300px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    border-left: 3px solid #e5e7eb;
    transition: all 0.2s ease;
    cursor: pointer;
}

.activity-card-detailed:hover[b-n18jqkupvx] {
    border-color: #e5e7eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.activity-card-detailed.activity-lost[b-n18jqkupvx] {
    border-left-color: #ef4444;
}

.activity-card-detailed.activity-found[b-n18jqkupvx] {
    border-left-color: #22c55e;
}

.activity-card-detailed.activity-matched[b-n18jqkupvx] {
    border-left-color: #3b82f6;
}

.activity-card-detailed.activity-sighting[b-n18jqkupvx] {
    border-left-color: #f59e0b;
}

.activity-detail-header[b-n18jqkupvx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.activity-detail-header strong[b-n18jqkupvx] {
    font-size: 0.95rem;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.activity-detail-body[b-n18jqkupvx] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.activity-detail-img[b-n18jqkupvx] {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.activity-detail-content[b-n18jqkupvx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.activity-detail-meta[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: #6b7280;
    flex: 1;
}

.activity-detail-meta span[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.activity-detail-meta .distance-info[b-n18jqkupvx] {
    color: #3b82f6;
    font-weight: 500;
}

.activity-detail-meta[b-n18jqkupvx]  .rzi {
    font-size: 0.9rem !important;
    color: #9ca3af !important;
}

.activity-detail-tags[b-n18jqkupvx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tag[b-n18jqkupvx] {
    padding: 0.15rem 0.5rem;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #4b5563;
}

.tag-highlight[b-n18jqkupvx] {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Activity Badges */
.activity-badge[b-n18jqkupvx] {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-active[b-n18jqkupvx] {
    background: #fef3c7;
    color: #92400e;
}

.badge-matched[b-n18jqkupvx] {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-reunited[b-n18jqkupvx] {
    background: #dcfce7;
    color: #166534;
}

.activity-loading[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    color: #6b7280;
}

/* Legacy card styles - keep for backward compatibility */
.activity-card[b-n18jqkupvx] {
    flex: 0 0 auto;
    width: 220px;
    scroll-snap-align: start;
    background: white;
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-left: 3px solid #e5e7eb;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.activity-card:hover[b-n18jqkupvx] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.activity-card.activity-lost[b-n18jqkupvx] {
    border-left-color: #ef4444;
}

.activity-card.activity-found[b-n18jqkupvx] {
    border-left-color: #22c55e;
}

.activity-card.activity-matched[b-n18jqkupvx] {
    border-left-color: #3b82f6;
}

.activity-card.activity-sighting[b-n18jqkupvx] {
    border-left-color: #f59e0b;
}

.activity-card-img[b-n18jqkupvx] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.activity-card-content[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.activity-card-content strong[b-n18jqkupvx] {
    font-size: 0.95rem;
    color: #1a1a2e;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    max-height: 1.3em;
}

.activity-card-location[b-n18jqkupvx] {
    font-size: 0.8rem;
    color: #6b7280;
}

.activity-card-time[b-n18jqkupvx] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.activity-card .activity-badge[b-n18jqkupvx] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* Map Action Buttons */
.map-action-buttons[b-n18jqkupvx] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.map-action-buttons .btn-report-found[b-n18jqkupvx],
.map-action-buttons .btn-search-lost[b-n18jqkupvx] {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .map-panel-fullwidth .map-legend[b-n18jqkupvx] {
        gap: 1rem;
    }
    
    .legend-link[b-n18jqkupvx] {
        margin-left: 0;
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }
    
    .activity-card[b-n18jqkupvx] {
        width: 180px;
    }
    
    .activity-card-img[b-n18jqkupvx] {
        height: 100px;
    }
    
    .map-action-buttons[b-n18jqkupvx] {
        flex-direction: column;
    }
    
    .map-action-buttons .btn-report-found[b-n18jqkupvx],
    .map-action-buttons .btn-search-lost[b-n18jqkupvx] {
        width: 100%;
    }
}

/* Pricing Section */
.pricing-section[b-n18jqkupvx] {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 4rem 2rem;
    background: #f8fafc;
    box-sizing: border-box;
}

.pricing-container-wrapper[b-n18jqkupvx] {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.pricing-title[b-n18jqkupvx] {
    font-size: 2.75rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 1rem 0;
}

.pricing-subtitle[b-n18jqkupvx] {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 650px;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

.pricing-cards-grid[b-n18jqkupvx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

/* Free Card */
.pricing-card-free[b-n18jqkupvx] {
    background: white;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    text-align: left;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.free-badge[b-n18jqkupvx] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #22c55e;
    color: white;
    padding: 0.35rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.pricing-card-title[b-n18jqkupvx] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin: 1rem 0 0.5rem 0;
}

.pricing-card-subtitle[b-n18jqkupvx] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0 0 2rem 0;
}

.free-features-list[b-n18jqkupvx] {
    list-style: none;
    padding: 0;
    margin: 0 0 auto 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.free-features-list li[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: #475569;
}

.check-icon[b-n18jqkupvx] {
    color: #22c55e;
    font-weight: 700;
    font-size: 1rem;
}

.btn-start-helping[b-n18jqkupvx] {
    width: 100%;
    padding: 1rem 1.5rem;
    background: #22c55e;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 2rem;
}

.btn-start-helping:hover[b-n18jqkupvx] {
    background: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3);
}

/* Premium Card */
.pricing-card-premium[b-n18jqkupvx] {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 30%, #7c3aed 70%, #581c87 100%);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    color: white;
}

.pet-emojis[b-n18jqkupvx] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pet-emojis span[b-n18jqkupvx] {
    font-size: 2.5rem;
}

.pricing-card-title-premium[b-n18jqkupvx] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.75rem 0;
}

.pricing-card-desc-premium[b-n18jqkupvx] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

.highlight-text[b-n18jqkupvx] {
    color: #fbbf24;
    font-weight: 600;
}

.premium-features-grid[b-n18jqkupvx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.premium-feature[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.95);
}

.feature-icon[b-n18jqkupvx] {
    font-size: 1rem;
}

.stats-bar[b-n18jqkupvx] {
    display: flex;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.stat-item[b-n18jqkupvx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-value[b-n18jqkupvx] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fbbf24;
}

.stat-label[b-n18jqkupvx] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.btn-create-account[b-n18jqkupvx] {
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53, #ff6b6b) !important;
    background-size: 200% 200% !important;
    color: white !important;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    animation: gradient-pulse-b-n18jqkupvx 2s ease infinite;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.btn-create-account:hover[b-n18jqkupvx] {
    transform: scale(1.03) translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);
}

.btn-spinner[b-n18jqkupvx] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-n18jqkupvx 0.8s linear infinite;
}

@keyframes spin-b-n18jqkupvx {
    to {
        transform: rotate(360deg);
    }
}

.btn-create-account:disabled[b-n18jqkupvx] {
    opacity: 0.8;
    cursor: wait;
}

.signin-link[b-n18jqkupvx] {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.signin-link a[b-n18jqkupvx] {
    color: #fbbf24;
    font-weight: 600;
    text-decoration: none;
}

.signin-link a:hover[b-n18jqkupvx] {
    text-decoration: underline;
}

.pricing-footer[b-n18jqkupvx] {
    text-align: center;
    margin-top: 2rem;
    color: #64748b;
    font-size: 0.95rem;
}

/* Responsive for Pricing Cards */
@media (max-width: 768px) {
    .pricing-cards-grid[b-n18jqkupvx] {
        grid-template-columns: 1fr;
    }
    
    .pricing-title[b-n18jqkupvx] {
        font-size: 2rem;
    }
    
    .premium-features-grid[b-n18jqkupvx] {
        grid-template-columns: 1fr;
    }
}

/* Testimonials Section */
.testimonials-section[b-n18jqkupvx] {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 4rem 2rem;
    background: #f8fafc;
    box-sizing: border-box;
}

.success-stories-container[b-n18jqkupvx] {
    max-width: 1200px;
    margin: 0 auto 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    background: white;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.happy-reunions-container[b-n18jqkupvx] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
}

.testimonial-card[b-n18jqkupvx] {
    padding: 2rem !important;
    height: 100%;
    border-left: 4px solid var(--rz-primary) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: white !important;
}

.testimonial-card:hover[b-n18jqkupvx] {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* CTA Section */
.cta-section[b-n18jqkupvx] {
    padding: 5rem 2rem;
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
}

.cta-container[b-n18jqkupvx] {
    max-width: 900px;
    margin: 0 auto;
}

.cta-card[b-n18jqkupvx] {
    position: relative;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #ff6b6b 100%);
    background-size: 200% 200%;
    animation: gradient-shift-b-n18jqkupvx 8s ease infinite;
    padding: 4rem 3rem;
    border-radius: 2rem;
    box-shadow: 
        0 25px 80px rgba(255, 107, 107, 0.35),
        0 10px 30px rgba(255, 107, 107, 0.2);
    overflow: hidden;
}

@keyframes gradient-shift-b-n18jqkupvx {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.cta-bg-shapes[b-n18jqkupvx] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.cta-shape[b-n18jqkupvx] {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.cta-shape-1[b-n18jqkupvx] {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    animation: float-slow-b-n18jqkupvx 15s ease-in-out infinite;
}

.cta-shape-2[b-n18jqkupvx] {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    animation: float-slow-b-n18jqkupvx 12s ease-in-out infinite reverse;
}

.cta-shape-3[b-n18jqkupvx] {
    width: 150px;
    height: 150px;
    top: 50%;
    left: 10%;
    animation: float-slow-b-n18jqkupvx 10s ease-in-out infinite;
}

@keyframes float-slow-b-n18jqkupvx {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}

.cta-content[b-n18jqkupvx] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: white;
}

.cta-icon-wrapper[b-n18jqkupvx] {
    margin-bottom: 1.5rem;
}

.cta-logo[b-n18jqkupvx] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    animation: pulse-glow-b-n18jqkupvx 3s ease-in-out infinite;
}

@keyframes pulse-glow-b-n18jqkupvx {
    0%, 100% { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); }
    50% { box-shadow: 0 8px 40px rgba(255, 255, 255, 0.3); }
}

.cta-title[b-n18jqkupvx] {
    font-size: 2.75rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.cta-subtitle[b-n18jqkupvx] {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0.5rem 0 1.5rem;
    opacity: 0.95;
}

.cta-description[b-n18jqkupvx] {
    font-size: 1.1rem;
    max-width: 550px;
    line-height: 1.7;
    margin: 0 0 2rem;
    opacity: 0.95;
}

.cta-description strong[b-n18jqkupvx] {
    font-weight: 700;
}

/* CTA Stats */
.cta-stats[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding: 1.5rem 2.5rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-stat[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.cta-stat-number[b-n18jqkupvx] {
    font-size: 1.75rem;
    font-weight: 800;
}

.cta-stat-label[b-n18jqkupvx] {
    font-size: 0.85rem;
    opacity: 0.9;
    font-weight: 500;
}

.cta-stat-divider[b-n18jqkupvx] {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.3);
}

/* CTA Buttons */
.cta-buttons[b-n18jqkupvx] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
}

.cta-btn-primary[b-n18jqkupvx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: white;
    color: #ff6b6b;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.cta-btn-primary:hover[b-n18jqkupvx] {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    color: #ff5252;
}

.cta-btn-secondary[b-n18jqkupvx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: transparent;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-btn-secondary:hover[b-n18jqkupvx] {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
    transform: translateY(-3px);
}

/* CTA Trust Badges */
.cta-trust[b-n18jqkupvx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.cta-trust span[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* CTA Responsive */
@media (max-width: 768px) {
    .cta-card[b-n18jqkupvx] {
        padding: 3rem 1.5rem;
    }
    
    .cta-title[b-n18jqkupvx] {
        font-size: 2rem;
    }
    
    .cta-subtitle[b-n18jqkupvx] {
        font-size: 1.25rem;
    }
    
    .cta-stats[b-n18jqkupvx] {
        flex-direction: column;
        gap: 1rem;
        padding: 1.25rem 1.5rem;
    }
    
    .cta-stat-divider[b-n18jqkupvx] {
        width: 60px;
        height: 1px;
    }
    
    .cta-buttons[b-n18jqkupvx] {
        flex-direction: column;
        width: 100%;
    }
    
    .cta-btn-primary[b-n18jqkupvx],
    .cta-btn-secondary[b-n18jqkupvx] {
        width: 100%;
        justify-content: center;
    }
    
    .cta-trust[b-n18jqkupvx] {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .hero-title[b-n18jqkupvx] {
        font-size: 2.75rem;
    }

    .hero-cards[b-n18jqkupvx] {
        display: none;
    }

    .how-it-works-cards[b-n18jqkupvx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .how-it-works-title[b-n18jqkupvx] {
        font-size: 2.5rem;
    }

    .live-map-content[b-n18jqkupvx] {
        grid-template-columns: 1fr;
    }

    .map-panel[b-n18jqkupvx] {
        min-height: 350px;
    }

    .activity-feed[b-n18jqkupvx] {
        max-height: 250px;
    }

    .live-map-title[b-n18jqkupvx] {
        font-size: 2rem;
    }

    .success-stories-container[b-n18jqkupvx] {
        grid-template-columns: 1fr;
    }

    .success-stories-stats[b-n18jqkupvx] {
        min-height: 250px;
    }

    .pricing-cards[b-n18jqkupvx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-title[b-n18jqkupvx] {
        font-size: 2rem;
    }

    .vet-care-cards[b-n18jqkupvx] {
            grid-template-columns: 1fr;
        }

        .vet-care-title[b-n18jqkupvx] {
            font-size: 2rem;
        }

        .simple-steps-cards[b-n18jqkupvx] {
            grid-template-columns: 1fr;
            max-width: 400px;
            margin: 0 auto;
        }

        .step-connector[b-n18jqkupvx] {
            display: none;
        }

        .simple-steps-title[b-n18jqkupvx] {
                    font-size: 2rem;
                }
            }

        @media (max-width: 768px) {
            .hero-section[b-n18jqkupvx] {
                padding: 2rem 1rem;
                min-height: 100vh;
            }

            .hero-title[b-n18jqkupvx] {
                font-size: 2rem;
            }

            .hero-title-highlight[b-n18jqkupvx] {
                display: block;
            }

            .hero-description[b-n18jqkupvx] {
        font-size: 1rem;
    }

    .success-stories-content[b-n18jqkupvx] {
        padding: 2rem;
    }

    .success-stories-title[b-n18jqkupvx] {
        font-size: 1.75rem;
    }

    .pricing-cards[b-n18jqkupvx] {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .pricing-title[b-n18jqkupvx] {
        font-size: 1.75rem;
    }

    .pricing-subtitle[b-n18jqkupvx] {
        font-size: 1rem;
    }

    .how-it-works-section[b-n18jqkupvx] {
        min-height: auto;
        padding: 3rem 1rem;
    }

    .how-it-works-cards[b-n18jqkupvx] {
        grid-template-columns: 1fr;
    }

    .how-it-works-title[b-n18jqkupvx] {
        font-size: 2rem;
    }

    .how-it-works-subtitle[b-n18jqkupvx] {
        font-size: 1rem;
    }

    .hero-stats[b-n18jqkupvx] {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }

    .how-it-works-section[b-n18jqkupvx],
    .features-section[b-n18jqkupvx],
    .testimonials-section[b-n18jqkupvx],
    .cta-section[b-n18jqkupvx] {
        padding: 2rem 1rem;
    }

    .live-map-section[b-n18jqkupvx] {
        padding: 3rem 1rem;
    }

    .live-map-title[b-n18jqkupvx] {
        font-size: 1.75rem;
    }

    .live-map-subtitle[b-n18jqkupvx] {
        font-size: 1rem;
    }

    .map-legend[b-n18jqkupvx] {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .vet-care-section[b-n18jqkupvx] {
        padding: 3rem 1rem;
    }

    .vet-care-title[b-n18jqkupvx] {
        font-size: 1.75rem;
    }

    .vet-care-subtitle[b-n18jqkupvx] {
        font-size: 1rem;
    }

    .vet-care-card[b-n18jqkupvx] {
        flex-direction: column;
        text-align: center;
    }

    .vet-card-icon[b-n18jqkupvx] {
        margin: 0 auto;
    }

    .vet-card-content[b-n18jqkupvx] {
            text-align: center;
        }

        .cta-card[b-n18jqkupvx] {
            padding: 2rem 1rem !important;
        }

        .step-card[b-n18jqkupvx],
        .feature-card[b-n18jqkupvx],
        .testimonial-card[b-n18jqkupvx] {
            margin-bottom: 1rem;
        }
    }

/* Small mobile: Stack hero buttons vertically */
@media (max-width: 499px) {
    .hero-buttons[b-n18jqkupvx] {
        flex-direction: column;
        width: 100%;
    }

    .btn-hero-primary[b-n18jqkupvx],
    .btn-hero-secondary[b-n18jqkupvx] {
        width: 100%;
        justify-content: center;
    }
}

    /* Animation for cards */
    @keyframes fadeInUp-b-n18jqkupvx {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
}

.stat-card[b-n18jqkupvx],
.step-card[b-n18jqkupvx],
.feature-card[b-n18jqkupvx],
.testimonial-card[b-n18jqkupvx] {
    animation: fadeInUp-b-n18jqkupvx 0.6s ease-out;
}

/* Button enhancements */
.hero-section .rz-button-lg[b-n18jqkupvx] {
    padding: 1rem 2rem !important;
    font-size: 1.1rem !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-section .rz-button-lg:hover[b-n18jqkupvx] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.cta-section .rz-button-lg[b-n18jqkupvx] {
    padding: 1rem 2.5rem !important;
    font-size: 1.1rem !important;
    border-radius: 0.5rem !important;
}

/* =============================================
   HOME PAGE - EMBEDDED LIVE MAP SECTION
   Identical functionality to /live-map page
   ============================================= */

.home-live-map-section[b-n18jqkupvx] {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: #f5f5f5;
    position: relative;
}

/* Title Container */
.home-live-map-container[b-n18jqkupvx] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 2rem 1rem 2rem;
    text-align: center;
}

.home-live-map-title[b-n18jqkupvx] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.home-live-map-title .rzi[b-n18jqkupvx] {
    color: #3b82f6;
    font-size: 2rem;
}

.home-live-map-subtitle[b-n18jqkupvx] {
    font-size: 1.1rem;
    color: #6b7280;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.home-live-map-wrapper[b-n18jqkupvx] {
    display: flex;
    flex-direction: row;
    height: 700px;
    max-width: 1200px;
    margin: 0 2rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

/* Floating Filter Pills */
.home-floating-filters[b-n18jqkupvx] {
    position: absolute;
    top: 0.75rem;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.home-floating-filters[b-n18jqkupvx]::-webkit-scrollbar {
    display: none;
}

.home-live-map-section .filter-pill[b-n18jqkupvx] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    background: white;
    border: none;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.home-live-map-section .filter-pill:active[b-n18jqkupvx] {
    transform: scale(0.96);
}

.home-live-map-section .filter-pill.active[b-n18jqkupvx] {
    background: #1a1a2e;
    color: white;
}

.home-live-map-section .filter-pill .dot[b-n18jqkupvx] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.home-live-map-section .dot-lost[b-n18jqkupvx] { background: #ef4444; }
.home-live-map-section .dot-found[b-n18jqkupvx] { background: #22c55e; }
.home-live-map-section .dot-matched[b-n18jqkupvx] { background: #3b82f6; }

.home-live-map-section[b-n18jqkupvx]  .filter-pill-dropdown {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    min-width: 80px;
}

/* KPI Strip */
.home-kpi-strip[b-n18jqkupvx] {
    position: absolute;
    top: 55px;
    left: 1rem;
    right: 1rem;
    z-index: 85;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.home-kpi-strip.visible[b-n18jqkupvx] {
    max-height: 80px;
    opacity: 1;
}

.home-kpi-toggle[b-n18jqkupvx] {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: none;
    border-radius: 0 0 10px 10px;
    padding: 0.2rem 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    z-index: 86;
    transition: top 0.3s ease;
}

.home-kpi-strip.visible ~ .home-kpi-toggle[b-n18jqkupvx] {
    top: 130px;
}

.home-live-map-section .kpi-items[b-n18jqkupvx] {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
}

.home-live-map-section .kpi-item[b-n18jqkupvx] {
    text-align: center;
}

.home-live-map-section .kpi-num[b-n18jqkupvx] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
}

.home-live-map-section .kpi-label[b-n18jqkupvx] {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.home-live-map-section .kpi-lost .kpi-num[b-n18jqkupvx] { color: #ef4444; }
.home-live-map-section .kpi-found .kpi-num[b-n18jqkupvx] { color: #22c55e; }
.home-live-map-section .kpi-reunited .kpi-num[b-n18jqkupvx] { color: #f472b6; }

/* Map Container */
.home-map-container[b-n18jqkupvx] {
    flex: 1;
    position: relative;
    min-height: 600px;
    min-width: 0;
}

.home-google-map-element[b-n18jqkupvx] {
    width: 100%;
    height: 100%;
    min-height: 600px;
}

/* Loading Overlay */
.home-map-loading-overlay[b-n18jqkupvx] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 50;
}

.home-live-map-section .loading-spinner[b-n18jqkupvx] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-n18jqkupvx 1s linear infinite;
}

@keyframes spin-b-n18jqkupvx {
    to { transform: rotate(360deg); }
}

/* FABs */
.home-fab-my-location[b-n18jqkupvx],
.home-fab-legend[b-n18jqkupvx] {
    position: absolute;
    right: 1rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 80;
    transition: all 0.2s;
}

.home-fab-my-location[b-n18jqkupvx] {
    bottom: 50%;
}

.home-fab-legend[b-n18jqkupvx] {
    bottom: calc(50% - 60px);
}

.home-fab-my-location:hover[b-n18jqkupvx],
.home-fab-legend:hover[b-n18jqkupvx] {
    background: #f9fafb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.home-fab-my-location:active[b-n18jqkupvx],
.home-fab-legend:active[b-n18jqkupvx] {
    transform: scale(0.95);
    background: #f3f4f6;
}

.home-fab-legend.active[b-n18jqkupvx] {
    background: #1a1a2e;
    color: white;
}

/* Floating Legend */
/* Floating Legend */
.home-legend-backdrop[b-n18jqkupvx] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 79;
}

.home-floating-legend[b-n18jqkupvx] {
    position: absolute;
    right: 1rem;
    bottom: calc(50% - 200px);
    background: white;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    padding-top: 2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 85;
    min-width: 160px;
}

.home-floating-legend .legend-close-btn[b-n18jqkupvx] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    border-radius: 4px;
    transition: all 0.2s;
}

.home-floating-legend .legend-close-btn:hover[b-n18jqkupvx] {
    background: #f3f4f6;
    color: #374151;
}

.home-floating-legend .legend-close-btn .rzi[b-n18jqkupvx] {
    font-size: 1rem;
}

.home-floating-legend .legend-item[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #374151;
    padding: 0.25rem 0;
}

.home-floating-legend .legend-dot[b-n18jqkupvx] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.home-floating-legend .legend-lost[b-n18jqkupvx] { background: #ef4444; }
.home-floating-legend .legend-found[b-n18jqkupvx] { background: #22c55e; }
.home-floating-legend .legend-matched[b-n18jqkupvx] { background: #3b82f6; }
.home-floating-legend .legend-reunited[b-n18jqkupvx] { background: #f472b6; }
.home-floating-legend .legend-user[b-n18jqkupvx] { 
    background: #4285F4; 
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3);
}

.home-floating-legend .legend-divider[b-n18jqkupvx] {
    height: 1px;
    background: #e5e7eb;
    margin: 0.5rem 0;
}

.home-floating-legend .legend-radius[b-n18jqkupvx] {
    font-size: 0.75rem;
    color: #6b7280;
}

.home-floating-legend .legend-circle[b-n18jqkupvx] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px dashed #4285F4;
    background: rgba(66, 133, 244, 0.1);
}


/* Activity Panel - Desktop Sidebar */
.home-activity-panel[b-n18jqkupvx] {
    width: 300px;
    max-width: 300px;
    background: white;
    border-left: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.home-activity-panel .sheet-handle[b-n18jqkupvx],
.home-activity-panel .sheet-handle-disabled[b-n18jqkupvx] {
    display: none;
}

.home-activity-panel .panel-header[b-n18jqkupvx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}

.home-activity-panel .panel-title[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.home-activity-panel .panel-title h3[b-n18jqkupvx] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.home-live-map-section .radius-badge[b-n18jqkupvx] {
    background: #eff6ff;
    color: #3b82f6;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
}

.home-live-map-section .live-indicator[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #22c55e;
    font-weight: 500;
}

.home-live-map-section .live-dot[b-n18jqkupvx] {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: homePulse-b-n18jqkupvx 2s infinite;
}

@keyframes homePulse-b-n18jqkupvx {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.home-activity-panel .panel-content[b-n18jqkupvx] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    overscroll-behavior: contain;
}

/* Blurred cards for non-authenticated users */
.home-activity-panel .activity-scroll-blurred[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}

.home-activity-panel .activity-scroll-blurred .activity-card[b-n18jqkupvx] {
    filter: blur(3px);
    opacity: 0.7;
    pointer-events: none;
}

.home-activity-panel .activity-scroll-blurred .blurred-card[b-n18jqkupvx] {
    filter: blur(4px);
    opacity: 0.6;
}

.home-activity-panel .blur-overlay[b-n18jqkupvx] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

.home-activity-panel .blur-overlay .rzi[b-n18jqkupvx] {
    font-size: 1.5rem;
    color: #6b7280;
}

.home-activity-panel .blur-overlay span[b-n18jqkupvx] {
    font-size: 0.85rem;
    color: #374151;
    font-weight: 500;
}

.home-activity-panel .panel-footer[b-n18jqkupvx] {
    padding: 0.75rem 1rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.view-full-map-btn[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Sign-up CTA button styling */
.view-full-map-btn.signup-cta[b-n18jqkupvx] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
}

.view-full-map-btn.signup-cta:hover[b-n18jqkupvx] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
}

.signin-link-small[b-n18jqkupvx] {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    color: #6b7280;
    text-decoration: none;
}

.signin-link-small:hover[b-n18jqkupvx] {
    color: #3b82f6;
    text-decoration: underline;
}

.view-full-map-btn:hover[b-n18jqkupvx] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

/* Activity Cards - Vertical List on Desktop */
.home-activity-panel .activity-scroll[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.home-activity-panel .activity-card[b-n18jqkupvx] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    background: #fafafa;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    border: 2px solid transparent;
    transition: all 0.2s;
    padding: 0.75rem;
}

/* Only show pointer cursor on clickable cards (authenticated users) */
.home-activity-panel .activity-card.clickable[b-n18jqkupvx] {
    cursor: pointer;
}

.home-activity-panel .activity-card.clickable:hover[b-n18jqkupvx] {
    background: #f3f4f6;
}

.home-activity-panel .activity-card.selected[b-n18jqkupvx] {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.home-activity-panel .activity-card.activity-lost[b-n18jqkupvx] { border-left: 4px solid #ef4444; }
.home-activity-panel .activity-card.activity-found[b-n18jqkupvx] { border-left: 4px solid #22c55e; }
.home-activity-panel .activity-card.activity-matched[b-n18jqkupvx] { border-left: 4px solid #3b82f6; }

.home-activity-panel .card-image-container[b-n18jqkupvx] {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
}

.home-activity-panel .card-image-container img[b-n18jqkupvx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-activity-panel .card-badge[b-n18jqkupvx] {
    position: absolute;
    bottom: 4px;
    left: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.home-live-map-section[b-n18jqkupvx]  .badge-active { background: #fef3c7; color: #92400e; }
.home-live-map-section[b-n18jqkupvx]  .badge-matched { background: #dbeafe; color: #1d4ed8; }
.home-live-map-section[b-n18jqkupvx]  .badge-reunited { background: #fce7f3; color: #9d174d; }

.home-activity-panel .card-body[b-n18jqkupvx] {
    flex: 1;
    min-width: 0;
}

.home-activity-panel .card-title[b-n18jqkupvx] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.home-activity-panel .card-meta[b-n18jqkupvx] {
    font-size: 0.75rem;
    color: #6b7280;
}

.home-activity-panel .meta-location[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.home-activity-panel .meta-row[b-n18jqkupvx] {
    display: flex;
    justify-content: space-between;
}

.home-activity-panel .meta-distance[b-n18jqkupvx] {
    color: #3b82f6;
    font-weight: 500;
}

.home-activity-panel .meta-time[b-n18jqkupvx] {
    color: #9ca3af;
}

/* Expanded Grid */
.home-activity-panel .activity-grid-expanded[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.home-activity-panel .activity-grid-expanded h4[b-n18jqkupvx] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.home-activity-panel .activity-card-row[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    background: #f9fafb;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.home-activity-panel .activity-card-row:hover[b-n18jqkupvx] {
    background: #f3f4f6;
}

.home-activity-panel .activity-card-row img[b-n18jqkupvx] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.home-activity-panel .activity-card-row .row-content[b-n18jqkupvx] {
    flex: 1;
    min-width: 0;
}

.home-activity-panel .activity-card-row strong[b-n18jqkupvx] {
    display: block;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-activity-panel .activity-card-row span[b-n18jqkupvx] {
    font-size: 0.75rem;
    color: #6b7280;
}

.home-activity-panel .row-distance[b-n18jqkupvx] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #3b82f6;
    flex-shrink: 0;
}

/* Empty/Loading States */
.home-activity-panel .location-prompt[b-n18jqkupvx],
.home-activity-panel .empty-state[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    color: #6b7280;
}

.home-activity-panel .location-prompt .rzi[b-n18jqkupvx],
.home-activity-panel .empty-state .rzi[b-n18jqkupvx] {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 0.75rem;
}

.home-activity-panel .location-prompt p[b-n18jqkupvx],
.home-activity-panel .empty-state p[b-n18jqkupvx] {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Loading Skeleton */
.home-activity-panel .loading-skeleton[b-n18jqkupvx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.home-activity-panel .skeleton-card[b-n18jqkupvx] {
    height: 90px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer-b-n18jqkupvx 1.5s infinite;
    border-radius: 12px;
}

@keyframes shimmer-b-n18jqkupvx {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* CTA for non-authenticated users */
.home-map-cta[b-n18jqkupvx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.home-map-cta .map-cta-content[b-n18jqkupvx] {
    flex: 1;
    min-width: 280px;
}

.home-map-cta .map-cta-content h3[b-n18jqkupvx] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
}

.home-map-cta .map-cta-content p[b-n18jqkupvx] {
    margin: 0;
    font-size: 0.95rem;
    color: #6b7280;
    max-width: 500px;
}

.home-map-cta .map-cta-buttons[b-n18jqkupvx] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.home-map-cta .btn-map-cta-primary[b-n18jqkupvx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.home-map-cta .btn-map-cta-primary:hover[b-n18jqkupvx] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.home-map-cta .btn-map-cta-secondary[b-n18jqkupvx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: white;
    color: #374151;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.home-map-cta .btn-map-cta-secondary:hover[b-n18jqkupvx] {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Mobile Responsive - Convert sidebar to bottom sheet */
@media (max-width: 968px) {
    .home-live-map-container[b-n18jqkupvx] {
        padding: 1.5rem 1rem 1rem 1rem;
    }

    .home-live-map-title[b-n18jqkupvx] {
        font-size: 1.75rem;
    }


    .home-live-map-subtitle[b-n18jqkupvx] {
        font-size: 1rem;
    }

    .home-live-map-wrapper[b-n18jqkupvx] {
        flex-direction: column;
        height: auto;
        min-height: auto;
        border-radius: 12px;
        margin: 0 1rem;
        border: none;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }

    .home-map-container[b-n18jqkupvx] {
        height: 55vh;
        min-height: 350px;
    }

    .home-google-map-element[b-n18jqkupvx] {
        height: 55vh;
        min-height: 350px;
    }

    .home-activity-panel[b-n18jqkupvx] {
        width: 100%;
        max-width: 100%;
        border-left: none;
        border-top: 1px solid #e5e7eb;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
        max-height: 38vh;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    /* Sheet handle with larger touch target for mobile */
    .home-activity-panel .sheet-handle[b-n18jqkupvx] {
        display: block;
        width: 50px;
        height: 6px;
        background: #9ca3af;
        border-radius: 3px;
        margin: 0 auto;
        cursor: grab;
        /* Larger touch target using padding */
        padding: 12px 30px;
        background-clip: content-box;
    }

    /* Disabled sheet handle for non-auth users */
    .home-activity-panel .sheet-handle-disabled[b-n18jqkupvx] {
        display: block;
        width: 50px;
        height: 6px;
        background: #d1d5db;
        border-radius: 3px;
        margin: 12px auto;
    }

    /* Expanded pulls up to show more content */
    .home-activity-panel.expanded[b-n18jqkupvx] {
        max-height: 65vh;
    }

    /* Collapsed shows just the header */
    .home-activity-panel.collapsed[b-n18jqkupvx] {
        max-height: 80px;
    }

    .home-activity-panel.collapsed .panel-content[b-n18jqkupvx],
    .home-activity-panel.collapsed .panel-footer[b-n18jqkupvx] {
        display: none;
    }

    /* Horizontal scroll for cards on mobile */
    .home-activity-panel .activity-scroll[b-n18jqkupvx],
    .home-activity-panel .activity-scroll-blurred[b-n18jqkupvx] {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }



    .home-activity-panel .activity-scroll[b-n18jqkupvx]::-webkit-scrollbar {
        display: none;
    }

    .home-activity-panel .activity-card[b-n18jqkupvx] {
        flex-direction: column;
        width: 140px;
        flex-shrink: 0;
        scroll-snap-align: start;
        padding: 0;
    }

    .home-activity-panel .card-image-container[b-n18jqkupvx] {
        width: 100%;
        height: 80px;
        border-radius: 10px 10px 0 0;
    }

    .home-activity-panel .card-body[b-n18jqkupvx] {
        padding: 0.5rem;
    }

    .home-activity-panel .card-title[b-n18jqkupvx] {
        font-size: 0.8rem;
    }

    .home-activity-panel .card-meta[b-n18jqkupvx] {
        font-size: 0.7rem;
    }

    .home-fab-my-location[b-n18jqkupvx] {
        bottom: 45%;
    }

    .home-fab-legend[b-n18jqkupvx] {
        bottom: calc(45% - 60px);
    }

    .home-floating-legend[b-n18jqkupvx] {
        bottom: calc(45% - 200px);
    }

    /* Mobile blurred scroll styles */
    .home-activity-panel .activity-scroll-blurred[b-n18jqkupvx] {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .home-activity-panel .blur-overlay[b-n18jqkupvx] {
        position: absolute;
        top: 40%;
        padding: 0.75rem 1rem;
    }

    .home-activity-panel .blur-overlay .rzi[b-n18jqkupvx] {
        font-size: 1.25rem;
    }

    .home-activity-panel .blur-overlay span[b-n18jqkupvx] {
        font-size: 0.75rem;
    }
}

@media (max-width: 640px) {
    .home-live-map-wrapper[b-n18jqkupvx] {
        margin: 0 0.75rem;
    }

    .home-floating-filters[b-n18jqkupvx] {
        padding: 0.5rem;
    }

    .home-live-map-section .filter-pill[b-n18jqkupvx] {
        padding: 0.4rem 0.65rem;
        font-size: 0.7rem;
    }

    .home-map-container[b-n18jqkupvx] {
        height: 45vh;
        min-height: 280px;
    }

    .home-google-map-element[b-n18jqkupvx] {
        height: 45vh;
        min-height: 280px;
    }

    .home-map-cta[b-n18jqkupvx] {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem;
    }

    .home-map-cta .map-cta-buttons[b-n18jqkupvx] {
        width: 100%;
        flex-direction: column;
    }

    .home-map-cta .btn-map-cta-primary[b-n18jqkupvx],
    .home-map-cta .btn-map-cta-secondary[b-n18jqkupvx] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/ImageAnalysis.razor.rz.scp.css */
.pet-finder-container[b-1vgnjlnqfh] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-1vgnjlnqfh] {
    margin-bottom: 2rem;
}

.page-header .rz-text-h2[b-1vgnjlnqfh] {
    color: #2d3748 !important;
    font-weight: 700 !important;
}

.page-subtitle[b-1vgnjlnqfh] {
    color: #6c757d !important;
    max-width: 600px;
}

/* Upload Card */
.upload-card[b-1vgnjlnqfh] {
    padding: 1.5rem !important;
    height: 100%;
    border: 2px solid #e2e8f0 !important;
    transition: border-color 0.3s ease;
}

.upload-card:hover[b-1vgnjlnqfh] {
    border-color: var(--rz-primary) !important;
}

.upload-area[b-1vgnjlnqfh] {
    margin-bottom: 1rem;
}

.upload-hint[b-1vgnjlnqfh] {
    color: #6c757d !important;
    margin-top: 0.5rem;
}

/* Image Preview */
.image-preview-container[b-1vgnjlnqfh] {
    text-align: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 2px dashed #dee2e6;
}

.image-preview[b-1vgnjlnqfh] {
    max-width: 100%;
    max-height: 300px;
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.placeholder-preview[b-1vgnjlnqfh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 2px dashed #dee2e6;
    min-height: 200px;
}

/* Prompt Input */
.prompt-input[b-1vgnjlnqfh] {
    width: 100%;
}

.prompt-input textarea[b-1vgnjlnqfh] {
    border-radius: 0.5rem !important;
}

/* Analyze Button */
.analyze-button[b-1vgnjlnqfh] {
    width: 100%;
    padding: 1rem !important;
    font-size: 1.1rem !important;
    border-radius: 0.5rem !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.analyze-button:hover:not(:disabled)[b-1vgnjlnqfh] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.analyze-button:disabled[b-1vgnjlnqfh] {
    opacity: 0.6;
}

/* Results Card */
.results-card[b-1vgnjlnqfh] {
    padding: 1.5rem !important;
    height: auto;
    border: 2px solid #e2e8f0 !important;
}

.confidence-card[b-1vgnjlnqfh] {
    background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%) !important;
    padding: 1rem !important;
    border: none !important;
}

.analysis-content-card[b-1vgnjlnqfh] {
    background: #f8f9fa !important;
    padding: 1rem !important;
    border: none !important;
}

.analysis-text[b-1vgnjlnqfh] {
    line-height: 1.7;
    color: #2d3748;
    white-space: pre-wrap;
}

.meta-info[b-1vgnjlnqfh] {
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    opacity: 0.8;
}

/* No Results Placeholder */
.no-results-placeholder[b-1vgnjlnqfh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

/* Tips Card */
.tips-card[b-1vgnjlnqfh] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    padding: 1rem !important;
    border: none !important;
}

.tips-list[b-1vgnjlnqfh] {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
    color: #92400e;
}

.tips-list li[b-1vgnjlnqfh] {
    margin-bottom: 0.25rem;
}

/* Responsive */
@media (max-width: 992px) {
    .pet-finder-container[b-1vgnjlnqfh] {
        padding: 1rem;
    }

    .upload-card[b-1vgnjlnqfh],
    .results-card[b-1vgnjlnqfh] {
        margin-bottom: 1rem;
    }
}

/* Animation */
@keyframes fadeIn-b-1vgnjlnqfh {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.confidence-card[b-1vgnjlnqfh],
.analysis-content-card[b-1vgnjlnqfh] {
    animation: fadeIn-b-1vgnjlnqfh 0.5s ease-out;
}
/* /Components/Pages/LiveMap-old.razor.rz.scp.css */
/* Live Map Page Styles */
.live-map-page[b-bdy57pec1u] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* Header */
.map-page-header[b-bdy57pec1u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.map-page-header h1[b-bdy57pec1u] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.map-page-header p[b-bdy57pec1u] {
    margin: 0.25rem 0 0 0;
    color: #6b7280;
}

.header-actions[b-bdy57pec1u] {
    display: flex;
    gap: 0.75rem;
}

/* KPI Dashboard */
.kpi-dashboard[b-bdy57pec1u] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (max-width: 992px) {
    .kpi-dashboard[b-bdy57pec1u] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .kpi-dashboard[b-bdy57pec1u] {
        grid-template-columns: 1fr;
    }
}

.kpi-card[b-bdy57pec1u] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-left: 4px solid;
}

.kpi-card.kpi-lost[b-bdy57pec1u] {
    border-left-color: #ef4444;
}

.kpi-card.kpi-found[b-bdy57pec1u] {
    border-left-color: #22c55e;
}

.kpi-card.kpi-matched[b-bdy57pec1u] {
    border-left-color: #3b82f6;
}

.kpi-card.kpi-reunited[b-bdy57pec1u] {
    border-left-color: #f472b6;
}

.kpi-icon[b-bdy57pec1u] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.kpi-lost .kpi-icon[b-bdy57pec1u] {
    background: #fef2f2;
    color: #ef4444;
}

.kpi-found .kpi-icon[b-bdy57pec1u] {
    background: #f0fdf4;
    color: #22c55e;
}

.kpi-matched .kpi-icon[b-bdy57pec1u] {
    background: #eff6ff;
    color: #3b82f6;
}

.kpi-reunited .kpi-icon[b-bdy57pec1u] {
    background: #fdf2f8;
    color: #f472b6;
}

.kpi-content[b-bdy57pec1u] {
    display: flex;
    flex-direction: column;
}

.kpi-value[b-bdy57pec1u] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.2;
}

.kpi-label[b-bdy57pec1u] {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.kpi-sublabel[b-bdy57pec1u] {
    font-size: 0.8rem;
    color: #9ca3af;
}

/* Filters */
.map-filters[b-bdy57pec1u] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.filter-group[b-bdy57pec1u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filter-group label[b-bdy57pec1u] {
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.filter-toggles[b-bdy57pec1u] {
    display: flex;
    gap: 0.75rem;
}

.filter-toggle[b-bdy57pec1u] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.filter-toggle:hover[b-bdy57pec1u] {
    border-color: #1b6ec2;
}

.filter-toggle.active[b-bdy57pec1u] {
    background: #eff6ff;
    border-color: #1b6ec2;
}

.filter-toggle input[b-bdy57pec1u] {
    display: none;
}

.toggle-dot[b-bdy57pec1u] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.toggle-lost[b-bdy57pec1u] {
    background: #ef4444;
}

.toggle-found[b-bdy57pec1u] {
    background: #22c55e;
}

.toggle-matched[b-bdy57pec1u] {
    background: #3b82f6;
}

/* Full Map Container */
.full-map-container[b-bdy57pec1u] {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 992px) {
    .full-map-container[b-bdy57pec1u] {
        grid-template-columns: 1fr;
    }
}

.map-wrapper-large[b-bdy57pec1u] {
    position: relative;
    background: linear-gradient(145deg, #f0f7ff 0%, #e8f4f8 100%);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    min-height: 500px;
}

.usa-map-img-large[b-bdy57pec1u] {
    width: 100%;
    height: auto;
    opacity: 0.85;
}

.map-dot-large[b-bdy57pec1u] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.map-dot-large:hover[b-bdy57pec1u] {
    transform: scale(1.4);
    z-index: 10;
}

.map-dot-large.selected[b-bdy57pec1u] {
    transform: scale(1.6);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
    z-index: 20;
}

/* Map Legend Panel */
.map-legend-panel[b-bdy57pec1u] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.map-legend-panel h4[b-bdy57pec1u] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legend-items-vertical[b-bdy57pec1u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legend-item-v[b-bdy57pec1u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #4b5563;
}

.legend-dot[b-bdy57pec1u] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-lost[b-bdy57pec1u] {
    background: #ef4444;
}

.legend-found[b-bdy57pec1u] {
    background: #22c55e;
}

.legend-matched[b-bdy57pec1u] {
    background: #3b82f6;
}

.legend-reunited[b-bdy57pec1u] {
    background: #f472b6;
}

.quick-stats[b-bdy57pec1u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-stat[b-bdy57pec1u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.quick-stat:last-child[b-bdy57pec1u] {
    border-bottom: none;
}

.stat-num[b-bdy57pec1u] {
    font-weight: 700;
    color: #1b6ec2;
}

.stat-label[b-bdy57pec1u] {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Activity Section */
.activity-section[b-bdy57pec1u] {
    margin-bottom: 2rem;
}

.activity-header[b-bdy57pec1u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.activity-header h2[b-bdy57pec1u] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.activity-live-indicator[b-bdy57pec1u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #22c55e;
    font-weight: 500;
}

.live-dot[b-bdy57pec1u] {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse-b-bdy57pec1u 2s infinite;
}

@keyframes pulse-b-bdy57pec1u {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}


.activity-grid[b-bdy57pec1u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.activity-card-detailed[b-bdy57pec1u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.activity-card-detailed:hover[b-bdy57pec1u] {
    border-color: #e5e7eb;
    transform: translateY(-2px);
}

.activity-card-detailed.selected[b-bdy57pec1u] {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.activity-card-detailed.activity-lost[b-bdy57pec1u] {
    border-left: 3px solid #ef4444;
}

.activity-card-detailed.activity-found[b-bdy57pec1u] {
    border-left: 3px solid #22c55e;
}

.activity-card-detailed.activity-matched[b-bdy57pec1u] {
    border-left: 3px solid #3b82f6;
}

.activity-detail-header[b-bdy57pec1u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.activity-detail-header strong[b-bdy57pec1u] {
    font-size: 1rem;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.activity-detail-body[b-bdy57pec1u] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.activity-detail-img[b-bdy57pec1u] {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.activity-detail-content[b-bdy57pec1u] {
    flex: 1;
    min-width: 0;
}

.activity-detail-meta[b-bdy57pec1u] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: #6b7280;
    flex: 1;
}

.activity-detail-meta span[b-bdy57pec1u] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.activity-detail-meta .distance-info[b-bdy57pec1u] {
    color: #3b82f6;
    font-weight: 500;
}

.activity-detail-tags[b-bdy57pec1u] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tag[b-bdy57pec1u] {
    padding: 0.15rem 0.5rem;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #4b5563;
}

.tag-highlight[b-bdy57pec1u] {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Activity Badges */
.activity-badge[b-bdy57pec1u] {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-active[b-bdy57pec1u] {
    background: #fef3c7;
    color: #92400e;
}


.badge-matched[b-bdy57pec1u] {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-reunited[b-bdy57pec1u] {
    background: #fce7f3;
    color: #9d174d;
}

/* Help Section */
.help-section[b-bdy57pec1u] {
    padding: 2rem 0;
}

.help-section h2[b-bdy57pec1u] {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #1a1a2e;
}

.help-cards[b-bdy57pec1u] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .help-cards[b-bdy57pec1u] {
        grid-template-columns: 1fr;
    }
}

.help-card[b-bdy57pec1u] {
    text-align: center;
    padding: 2rem 1.5rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.help-icon[b-bdy57pec1u] {
    font-size: 3rem;
    margin-bottom: 1rem;
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 50%;
    color: #1b6ec2;
}

.help-icon[b-bdy57pec1u]  .rzi {
    font-size: 2.5rem !important;
}
}

.help-card h3[b-bdy57pec1u] {
    margin: 0 0 0.75rem 0;
    color: #1a1a2e;
}

.help-card p[b-bdy57pec1u] {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* Map Dots */
.map-dots-overlay[b-bdy57pec1u] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.map-dot[b-bdy57pec1u] {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
}

.dot-lost[b-bdy57pec1u] {
    background: #ef4444;
}

.dot-found[b-bdy57pec1u] {
    background: #22c55e;
}

.dot-matched[b-bdy57pec1u] {
    background: #3b82f6;
}

.dot-sighting[b-bdy57pec1u] {
    background: #f59e0b;
}

.mt-3[b-bdy57pec1u] {
    margin-top: 1rem;
}
/* /Components/Pages/LiveMap.razor.rz.scp.css */
/* ============================================
   LIVE MAP GOOGLE - Mobile-First Uber/DoorDash Style
   ============================================ */

.live-map-page[b-mmsgfzgk8h] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}

/* Floating Filter Pills - positioned at top after header removal */
.floating-filters[b-mmsgfzgk8h] {
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.floating-filters[b-mmsgfzgk8h]::-webkit-scrollbar {
    display: none;
}

.filter-pill[b-mmsgfzgk8h] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.65rem;
    background: white;
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-size: 0.7rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-pill:active[b-mmsgfzgk8h] {
    transform: scale(0.96);
}

.filter-pill.active[b-mmsgfzgk8h] {
    background: #1a1a2e;
    color: white;
}

.filter-pill .dot[b-mmsgfzgk8h] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.dot-lost[b-mmsgfzgk8h] { background: #ef4444; }
.dot-found[b-mmsgfzgk8h] { background: #22c55e; }
.dot-matched[b-mmsgfzgk8h] { background: #3b82f6; }

[b-mmsgfzgk8h] .filter-pill-dropdown {
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
    border-radius: 16px !important;
    font-size: 0.7rem !important;
    min-width: 60px;
}

/* KPI Strip */
.kpi-strip[b-mmsgfzgk8h] {
    position: absolute;
    top: 48px;
    left: 0.5rem;
    right: 0.5rem;
    z-index: 85;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.kpi-strip.visible[b-mmsgfzgk8h] {
    max-height: 70px;
    opacity: 1;
}

.kpi-toggle[b-mmsgfzgk8h] {
    position: absolute;
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: none;
    border-radius: 0 0 8px 8px;
    padding: 0.15rem 0.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    z-index: 86;
    transition: top 0.3s ease;
}

.kpi-strip.visible ~ .kpi-toggle[b-mmsgfzgk8h] {
    top: 110px;
}

.kpi-items[b-mmsgfzgk8h] {
    display: flex;
    justify-content: space-around;
    padding: 0.75rem;
}

.kpi-item[b-mmsgfzgk8h] {
    text-align: center;
}

.kpi-num[b-mmsgfzgk8h] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
}

.kpi-label[b-mmsgfzgk8h] {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-lost .kpi-num[b-mmsgfzgk8h] { color: #ef4444; }
.kpi-found .kpi-num[b-mmsgfzgk8h] { color: #22c55e; }
.kpi-reunited .kpi-num[b-mmsgfzgk8h] { color: #f472b6; }

/* Map Container */
.map-container[b-mmsgfzgk8h] {
    flex: 1;
    position: relative;
    min-height: 0;
    margin-bottom: 60px; /* Leave space for collapsed bottom sheet */
}

.google-map-element[b-mmsgfzgk8h] {
    width: 100%;
    height: 100%;
}

/* Loading Overlay */
.map-loading-overlay[b-mmsgfzgk8h] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 50;
}

.loading-spinner[b-mmsgfzgk8h] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-mmsgfzgk8h 1s linear infinite;
}

@keyframes spin-b-mmsgfzgk8h {
    to { transform: rotate(360deg); }
}

/* FABs */
.fab-my-location[b-mmsgfzgk8h],
.fab-legend[b-mmsgfzgk8h] {
    position: absolute;
    right: 1rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 80;
    transition: all 0.2s;
}

.fab-my-location[b-mmsgfzgk8h] {
    bottom: 45%;
}

.fab-legend[b-mmsgfzgk8h] {
    bottom: calc(45% - 60px);
}

.fab-my-location:hover[b-mmsgfzgk8h],
.fab-legend:hover[b-mmsgfzgk8h] {
    background: #f9fafb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.fab-my-location:active[b-mmsgfzgk8h],
.fab-legend:active[b-mmsgfzgk8h] {
    transform: scale(0.95);
    background: #f3f4f6;
}

.fab-legend.active[b-mmsgfzgk8h] {
    background: #1a1a2e;
    color: white;
}

/* Floating Legend */
.floating-legend[b-mmsgfzgk8h] {
    position: absolute;
    right: 1rem;
    bottom: calc(45% - 180px);
    background: white;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 80;
    min-width: 160px;
}

.legend-item[b-mmsgfzgk8h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #374151;
    padding: 0.25rem 0;
}

.legend-dot[b-mmsgfzgk8h] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-lost[b-mmsgfzgk8h] { background: #ef4444; }
.legend-found[b-mmsgfzgk8h] { background: #22c55e; }
.legend-matched[b-mmsgfzgk8h] { background: #3b82f6; }
.legend-reunited[b-mmsgfzgk8h] { background: #f472b6; }
.legend-user[b-mmsgfzgk8h] { 
    background: #4285F4; 
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3);
}

.legend-divider[b-mmsgfzgk8h] {
    height: 1px;
    background: #e5e7eb;
    margin: 0.5rem 0;
}

.legend-radius[b-mmsgfzgk8h] {
    font-size: 0.75rem;
    color: #6b7280;
}

.legend-circle[b-mmsgfzgk8h] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px dashed #4285F4;
    background: rgba(66, 133, 244, 0.1);
}

/* Legend backdrop - closes legend when clicking outside */
.legend-backdrop[b-mmsgfzgk8h] {
    position: fixed;
    inset: 0;
    z-index: 79;
    background: transparent;
}

/* Legend close button */
.legend-close-btn[b-mmsgfzgk8h] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: #666;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.legend-close-btn:hover[b-mmsgfzgk8h] {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

/* Bottom Sheet - Fixed to viewport bottom */
.bottom-sheet[b-mmsgfzgk8h] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: white;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    max-height: 38vh;
    min-height: 60px;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* Collapsed state - shows handle + header */
.bottom-sheet.collapsed[b-mmsgfzgk8h] {
    max-height: 60px;
    min-height: 60px;
}

.bottom-sheet.collapsed .sheet-content[b-mmsgfzgk8h],
.bottom-sheet.collapsed .sheet-footer[b-mmsgfzgk8h] {
    display: none;
}

.bottom-sheet.expanded[b-mmsgfzgk8h] {
    max-height: 65vh;
}

.sheet-handle[b-mmsgfzgk8h] {
    width: 40px;
    height: 5px;
    background: #9ca3af;
    border-radius: 3px;
    margin: 10px auto 6px;
    cursor: grab;
    flex-shrink: 0;
}

.sheet-handle:active[b-mmsgfzgk8h] {
    cursor: grabbing;
    background: #6b7280;
}

.sheet-header[b-mmsgfzgk8h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.75rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.sheet-title[b-mmsgfzgk8h] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sheet-title h3[b-mmsgfzgk8h] {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.radius-badge[b-mmsgfzgk8h] {
    background: #eff6ff;
    color: #3b82f6;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
}

.live-indicator[b-mmsgfzgk8h] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #22c55e;
    font-weight: 500;
}

.live-dot[b-mmsgfzgk8h] {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse-b-mmsgfzgk8h 2s infinite;
}

@keyframes pulse-b-mmsgfzgk8h {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.sheet-content[b-mmsgfzgk8h] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem 0.25rem;
    overscroll-behavior: contain;
}

.sheet-footer[b-mmsgfzgk8h] {
    padding: 0.35rem 0.75rem 0.5rem;
    border-top: 1px solid #f3f4f6;
    text-align: center;
}

.compare-link[b-mmsgfzgk8h] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s;
}

.compare-link:hover[b-mmsgfzgk8h] {
    color: #3b82f6;
}

/* Activity Cards - Horizontal Scroll */
.activity-scroll[b-mmsgfzgk8h] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.activity-scroll[b-mmsgfzgk8h]::-webkit-scrollbar {
    display: none;
}

.activity-card[b-mmsgfzgk8h] {
    flex-shrink: 0;
    width: 130px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.activity-card:active[b-mmsgfzgk8h] {
    transform: scale(0.98);
}

.activity-card.selected[b-mmsgfzgk8h] {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.activity-card.activity-lost[b-mmsgfzgk8h] { border-left: 3px solid #ef4444; }
.activity-card.activity-found[b-mmsgfzgk8h] { border-left: 3px solid #22c55e; }
.activity-card.activity-matched[b-mmsgfzgk8h] { border-left: 3px solid #3b82f6; }

.card-image-container[b-mmsgfzgk8h] {
    position: relative;
    width: 100%;
    height: 70px;
}

.card-image-container img[b-mmsgfzgk8h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-badge[b-mmsgfzgk8h] {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.15rem;
}

[b-mmsgfzgk8h] .badge-active { background: #fef3c7; color: #92400e; }
[b-mmsgfzgk8h] .badge-matched { background: #dbeafe; color: #1d4ed8; }
[b-mmsgfzgk8h] .badge-reunited { background: #fce7f3; color: #9d174d; }

.card-body[b-mmsgfzgk8h] {
    padding: 0.4rem;
}

.card-title[b-mmsgfzgk8h] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.15rem;
}

.card-meta[b-mmsgfzgk8h] {
    font-size: 0.6rem;
    color: #6b7280;
}

.meta-location[b-mmsgfzgk8h] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-row[b-mmsgfzgk8h] {
    display: flex;
    justify-content: space-between;
}

.meta-distance[b-mmsgfzgk8h] {
    color: #3b82f6;
    font-weight: 500;
}

.meta-time[b-mmsgfzgk8h] {
    color: #9ca3af;
}

/* Expanded Grid */
.activity-grid-expanded[b-mmsgfzgk8h] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.activity-grid-expanded h4[b-mmsgfzgk8h] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-card-row[b-mmsgfzgk8h] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    background: #f9fafb;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.activity-card-row:hover[b-mmsgfzgk8h] {
    background: #f3f4f6;
}

.activity-card-row img[b-mmsgfzgk8h] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.activity-card-row .row-content[b-mmsgfzgk8h] {
    flex: 1;
    min-width: 0;
}

.activity-card-row strong[b-mmsgfzgk8h] {
    display: block;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-card-row span[b-mmsgfzgk8h] {
    font-size: 0.75rem;
    color: #6b7280;
}

.row-distance[b-mmsgfzgk8h] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #3b82f6;
    flex-shrink: 0;
}

/* Empty/Loading States */
.location-prompt[b-mmsgfzgk8h],
.empty-state[b-mmsgfzgk8h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    color: #6b7280;
}

.location-prompt p[b-mmsgfzgk8h],
.empty-state p[b-mmsgfzgk8h] {
    margin: 0.5rem 0 1rem;
    font-size: 0.9rem;
}

.loading-skeleton[b-mmsgfzgk8h] {
    display: flex;
    gap: 0.75rem;
    overflow: hidden;
}

.skeleton-card[b-mmsgfzgk8h] {
    flex-shrink: 0;
    width: 160px;
    height: 150px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-mmsgfzgk8h 1.5s infinite;
    border-radius: 12px;
}

@keyframes shimmer-b-mmsgfzgk8h {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   TABLET & DESKTOP OVERRIDES
   ============================================ */

@media (min-width: 768px) {
    .live-map-page[b-mmsgfzgk8h] {
        flex-direction: row;
        padding: 1rem;
        gap: 1rem;
        background: #e5e7eb;
    }
    
    /* Filter pills on desktop */
    .floating-filters[b-mmsgfzgk8h] {
        top: 1rem;
        left: 1rem;
        right: auto;
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }
    
    .filter-pill[b-mmsgfzgk8h] {
        padding: 0.5rem 0.85rem;
        font-size: 0.8rem;
    }
    
    .filter-pill .dot[b-mmsgfzgk8h] {
        width: 8px;
        height: 8px;
    }
    
    [b-mmsgfzgk8h] .filter-pill-dropdown {
        font-size: 0.8rem !important;
        min-width: 70px;
    }
    
    .map-container[b-mmsgfzgk8h] {
        flex: 1;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        border: 1px solid #d1d5db;
        margin-bottom: 0; /* No bottom margin on desktop */
    }
    
    .fab-my-location[b-mmsgfzgk8h] {
        bottom: 120px;
        right: 1.5rem;
    }
    
    .fab-legend[b-mmsgfzgk8h] {
        bottom: 60px;
        right: 1.5rem;
    }
    
    .floating-legend[b-mmsgfzgk8h] {
        bottom: 130px;
        right: 1.5rem;
    }
    
    /* Side Panel instead of Bottom Sheet */
    .bottom-sheet[b-mmsgfzgk8h] {
        position: relative;
        width: 360px;
        max-height: none;
        min-height: auto;
        height: 100%;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        border: 1px solid #d1d5db;
        flex-shrink: 0;
    }
    
    .bottom-sheet.collapsed[b-mmsgfzgk8h] {
        max-height: none;
        min-height: auto;
    }
    
    .bottom-sheet.collapsed .sheet-header[b-mmsgfzgk8h],
    .bottom-sheet.collapsed .sheet-content[b-mmsgfzgk8h],
    .bottom-sheet.collapsed .sheet-footer[b-mmsgfzgk8h] {
        display: flex;
        flex-direction: column;
    }
    
    .bottom-sheet.expanded[b-mmsgfzgk8h] {
        max-height: none;
    }
    
    .sheet-handle[b-mmsgfzgk8h] {
        display: none;
    }
    
    .sheet-header[b-mmsgfzgk8h] {
        padding: 0.75rem 1rem;
    }
    
    .sheet-title h3[b-mmsgfzgk8h] {
        font-size: 0.95rem;
    }
    
    .sheet-content[b-mmsgfzgk8h] {
        flex: 1;
        padding: 0.75rem 1rem;
        overflow-y: auto;
    }
    
    .activity-scroll[b-mmsgfzgk8h] {
        flex-direction: column;
        overflow-x: visible;
        overflow-y: visible;
        gap: 0.5rem;
    }
    
    .activity-card[b-mmsgfzgk8h] {
        width: 100%;
        flex-direction: row;
        height: auto;
        align-items: center;
        border-radius: 12px;
        overflow: visible;
        padding: 0.5rem 0.65rem;
        gap: 0.65rem;
    }
    
    .card-image-container[b-mmsgfzgk8h] {
        width: 56px;
        height: 56px;
        min-width: 56px;
        flex-shrink: 0;
        border-radius: 50%;
        overflow: hidden;
    }
    
    .card-image-container img[b-mmsgfzgk8h] {
        border-radius: 50%;
        width: 56px;
        height: 56px;
    }
    
    .card-body[b-mmsgfzgk8h] {
        flex: 1;
        padding: 0;
        min-width: 0;
    }
    
    .card-title[b-mmsgfzgk8h] {
        font-size: 0.8rem;
    }
    
    .card-meta[b-mmsgfzgk8h] {
        font-size: 0.65rem;
    }
    
    .sheet-footer[b-mmsgfzgk8h] {
        padding: 0.5rem 1rem;
    }
    
    .compare-link[b-mmsgfzgk8h] {
        font-size: 0.75rem;
    }
    
    /* Expanded grid rows on desktop */
    .activity-card-row img[b-mmsgfzgk8h] {
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }
}

@media (min-width: 1024px) {
    .live-map-page[b-mmsgfzgk8h] {
        padding: 1.25rem;
    }
    
    .bottom-sheet[b-mmsgfzgk8h] {
        width: 380px;
    }
    
    .kpi-strip[b-mmsgfzgk8h] {
        left: 1.25rem;
        right: auto;
        width: 300px;
    }
    
    .kpi-toggle[b-mmsgfzgk8h] {
        left: calc(1.25rem + 150px);
    }
}

@media (min-width: 1280px) {
    .live-map-page[b-mmsgfzgk8h] {
        padding: 1.5rem;
    }
    
    .bottom-sheet[b-mmsgfzgk8h] {
        width: 400px;
    }
}

/* ============================================
   EXTRA SMALL SCREENS (320px - 400px)
   ============================================ */
@media (max-width: 400px) {
    .floating-filters[b-mmsgfzgk8h] {
        gap: 0.25rem;
        padding: 0.25rem 0.35rem;
    }
    
    .filter-pill[b-mmsgfzgk8h] {
        padding: 0.3rem 0.5rem;
        font-size: 0.65rem;
        border-radius: 12px;
    }
    
    .filter-pill .dot[b-mmsgfzgk8h] {
        width: 5px;
        height: 5px;
    }
    
    [b-mmsgfzgk8h] .filter-pill-dropdown {
        font-size: 0.65rem !important;
        min-width: 50px;
    }
    
    .bottom-sheet[b-mmsgfzgk8h] {
        max-height: 35vh;
        min-height: 55px;
    }
    
    .bottom-sheet.collapsed[b-mmsgfzgk8h] {
        max-height: 55px;
        min-height: 55px;
    }
    
    .bottom-sheet.expanded[b-mmsgfzgk8h] {
        max-height: 60vh;
    }
    
    .map-container[b-mmsgfzgk8h] {
        margin-bottom: 55px;
    }
    
    .sheet-header[b-mmsgfzgk8h] {
        padding: 0 0.5rem 0.35rem;
    }
    
    .sheet-title h3[b-mmsgfzgk8h] {
        font-size: 0.75rem;
    }
    
    .radius-badge[b-mmsgfzgk8h] {
        font-size: 0.6rem;
        padding: 0.15rem 0.35rem;
    }
    
    .live-indicator[b-mmsgfzgk8h] {
        font-size: 0.65rem;
    }
    
    .sheet-content[b-mmsgfzgk8h] {
        padding: 0.35rem 0.5rem 0.25rem;
    }
    
    .activity-card[b-mmsgfzgk8h] {
        width: 110px;
    }
    
    .card-image-container[b-mmsgfzgk8h] {
        height: 60px;
    }
    
    .card-body[b-mmsgfzgk8h] {
        padding: 0.3rem;
    }
    
    .card-title[b-mmsgfzgk8h] {
        font-size: 0.65rem;
    }
    
    .card-meta[b-mmsgfzgk8h] {
        font-size: 0.55rem;
    }
    
    .sheet-footer[b-mmsgfzgk8h] {
        padding: 0.25rem 0.5rem 0.35rem;
    }
    
    .compare-link[b-mmsgfzgk8h] {
        font-size: 0.6rem;
    }
}
/* /Components/Pages/LiveMapNew.razor.rz.scp.css */
/* ================================================
   LiveMapNew Page Styles
   PetFindrz - New Live Map with smaller pins
   ================================================ */

.live-map-new-page[b-qlta0k2606] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f8fafc;
}

/* ================================================
   HEADER
   ================================================ */
.page-header[b-qlta0k2606] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.header-content h1[b-qlta0k2606] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.header-content h1[b-qlta0k2606]  .rzi {
    color: #3b82f6;
}

.header-content p[b-qlta0k2606] {
    margin: 0.25rem 0 0 0;
    color: #64748b;
    font-size: 0.875rem;
}

/* ================================================
   FILTER BAR
   ================================================ */
.filter-bar[b-qlta0k2606] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.filter-pills[b-qlta0k2606] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-pill[b-qlta0k2606] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-pill:hover[b-qlta0k2606] {
    background: #e2e8f0;
}

.filter-pill.active[b-qlta0k2606] {
    color: #ffffff;
}

.filter-pill.active.lost[b-qlta0k2606] {
    background: #ef4444;
    border-color: #ef4444;
}

.filter-pill.active.found[b-qlta0k2606] {
    background: #22c55e;
    border-color: #22c55e;
}

.filter-pill.active.matched[b-qlta0k2606] {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

.dot[b-qlta0k2606] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-lost[b-qlta0k2606] { background: #ef4444; }
.dot-found[b-qlta0k2606] { background: #22c55e; }
.dot-matched[b-qlta0k2606] { background: #8b5cf6; }

.filter-radius[b-qlta0k2606] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
}

.filter-radius[b-qlta0k2606]  .rz-dropdown {
    min-width: 120px;
}

/* ================================================
   MAP WRAPPER
   ================================================ */
.map-wrapper[b-qlta0k2606] {
    position: relative;
    flex: 1;
    min-height: 400px;
}

.map-container[b-qlta0k2606] {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.map-loading[b-qlta0k2606] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.map-loading span[b-qlta0k2606] {
    color: #64748b;
    font-weight: 500;
}

/* FAB */
.fab-location[b-qlta0k2606] {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: #3b82f6;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 5;
}

.fab-location:hover[b-qlta0k2606] {
    background: #3b82f6;
    color: #ffffff;
    transform: scale(1.05);
}

.fab-location[b-qlta0k2606]  .rzi {
    font-size: 1.5rem !important;
}

/* Legend */
.map-legend[b-qlta0k2606] {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    display: flex;
    gap: 1rem;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 5;
}

.legend-item[b-qlta0k2606] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
}

.legend-dot[b-qlta0k2606] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.legend-dot.lost[b-qlta0k2606] { background: #ef4444; }
.legend-dot.found[b-qlta0k2606] { background: #22c55e; }
.legend-dot.matched[b-qlta0k2606] { background: #8b5cf6; }

/* ================================================
   DEMO SECTION
   ================================================ */
.demo-section[b-qlta0k2606] {
    padding: 2rem 1.5rem;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}

.demo-section h2[b-qlta0k2606] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.demo-section h2[b-qlta0k2606]  .rzi {
    color: #8b5cf6;
}

.demo-section > p[b-qlta0k2606] {
    color: #64748b;
    margin: 0 0 1.5rem 0;
}

.demo-card[b-qlta0k2606] {
    max-width: 500px;
    padding: 1.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
}

.demo-card h3[b-qlta0k2606] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1rem 0;
}

.demo-result[b-qlta0k2606] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.demo-result h4[b-qlta0k2606] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 0.75rem 0;
}

.demo-result dl[b-qlta0k2606] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 1rem;
    margin: 0;
    font-size: 0.875rem;
}

.demo-result dt[b-qlta0k2606] {
    color: #64748b;
    font-weight: 500;
}

.demo-result dd[b-qlta0k2606] {
    margin: 0;
    color: #1e293b;
}

.demo-result h4.admin-section[b-qlta0k2606] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed #fecaca;
    color: #dc2626;
    font-size: 0.8125rem;
}

.demo-result dl.admin-data[b-qlta0k2606] {
    background: #fef2f2;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #fecaca;
}

.demo-result dl.admin-data dt[b-qlta0k2606] {
    color: #dc2626;
}

.demo-result dl.admin-data dd[b-qlta0k2606] {
    color: #991b1b;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
    .page-header[b-qlta0k2606] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .filter-bar[b-qlta0k2606] {
        flex-direction: column;
        align-items: flex-start;
    }

    .map-legend[b-qlta0k2606] {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        justify-content: center;
    }

    .fab-location[b-qlta0k2606] {
        bottom: 5rem;
    }
}
/* /Components/Pages/PetDetails.razor.rz.scp.css */
/* Pet Details Page - Facebook-Style Profile */

.pet-details-page[b-tj7tjdpygo] {
    min-height: 100vh;
    background: #f0f2f5;
}

/* Loading & Not Found States */
.loading-container[b-tj7tjdpygo],
.not-found-container[b-tj7tjdpygo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

.not-found-container[b-tj7tjdpygo]  .rzi {
    font-size: 5rem !important;
    color: #65676b !important;
    margin-bottom: 1rem;
}

.not-found-container h2[b-tj7tjdpygo] {
    font-size: 1.5rem;
    color: #1c1e21;
    margin-bottom: 0.5rem;
}

.not-found-container p[b-tj7tjdpygo] {
    color: #65676b;
    margin-bottom: 1.5rem;
}

/* Cover Section */
.cover-section[b-tj7tjdpygo] {
    position: relative;
    max-width: 940px;
    margin: 0 auto;
}

.cover-photo[b-tj7tjdpygo] {
    height: 220px;
    background-size: cover;
    background-position: center;
    border-radius: 0 0 8px 8px;
    position: relative;
}

.cover-overlay[b-tj7tjdpygo] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 50%);
    border-radius: 0 0 8px 8px;
}

.profile-picture-container[b-tj7tjdpygo] {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
}

.profile-picture[b-tj7tjdpygo] {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 4px solid white;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background: white;
}

.profile-picture img[b-tj7tjdpygo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-edit-photo[b-tj7tjdpygo] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e4e6eb;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-edit-photo:hover[b-tj7tjdpygo] {
    background: #d8dadf;
}

.btn-edit-photo[b-tj7tjdpygo]  .rzi {
    font-size: 1.25rem !important;
    color: #050505 !important;
}

/* Profile Header */
.profile-header[b-tj7tjdpygo] {
    max-width: 940px;
    margin: 0 auto;
    padding: 70px 1rem 1rem;
    text-align: center;
    background: white;
    border-bottom: 1px solid #dddfe2;
}

.pet-name[b-tj7tjdpygo] {
    font-size: 2rem;
    font-weight: 700;
    color: #050505;
    margin: 0 0 0.25rem;
}

.pet-breed[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    color: #65676b;
    margin: 0 0 0.75rem;
}

.breed-icon[b-tj7tjdpygo]  .rzi {
    font-size: 1.25rem !important;
    color: #667eea !important;
}

.pet-meta[b-tj7tjdpygo] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.meta-item[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: #65676b;
}

.meta-item[b-tj7tjdpygo]  .rzi {
    font-size: 1rem !important;
    color: #65676b !important;
}

/* Status Badge */
.status-badge-container[b-tj7tjdpygo] {
    margin: 1rem 0;
}

.status-badge[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.status-badge[b-tj7tjdpygo]  .rzi {
    font-size: 1.1rem !important;
}

.status-allgood[b-tj7tjdpygo] {
    background: #e7f5e9;
    color: #1b7a2d;
}

.status-allgood[b-tj7tjdpygo]  .rzi {
    color: #1b7a2d !important;
}

.status-lost[b-tj7tjdpygo] {
    background: #fff3cd;
    color: #856404;
}

.status-lost[b-tj7tjdpygo]  .rzi {
    color: #856404 !important;
}

.status-stolen[b-tj7tjdpygo] {
    background: #f8d7da;
    color: #721c24;
}

.status-stolen[b-tj7tjdpygo]  .rzi {
    color: #721c24 !important;
}

.status-found[b-tj7tjdpygo] {
    background: #d4edda;
    color: #155724;
}

.status-found[b-tj7tjdpygo]  .rzi {
    color: #155724 !important;
}

/* Profile Actions */
.profile-actions[b-tj7tjdpygo] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-bottom: 1rem;
}

.profile-actions button[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-primary[b-tj7tjdpygo] {
    background: #1877f2;
    color: white;
}

.btn-primary:hover[b-tj7tjdpygo] {
    background: #166fe5;
}

.btn-secondary[b-tj7tjdpygo] {
    background: #e4e6eb;
    color: #050505;
}

.btn-secondary:hover[b-tj7tjdpygo] {
    background: #d8dadf;
}

.btn-danger[b-tj7tjdpygo] {
    background: #dc3545;
    color: white;
}

.btn-danger:hover[b-tj7tjdpygo] {
    background: #c82333;
}

.btn-success[b-tj7tjdpygo] {
    background: #28a745;
    color: white;
}

.btn-success:hover[b-tj7tjdpygo] {
    background: #218838;
}

/* Alert Banner */
.alert-banner[b-tj7tjdpygo] {
    max-width: 940px;
    margin: 0 auto;
    padding: 1rem;
}

.alert-content[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.alert-lost .alert-content[b-tj7tjdpygo] {
    border-left: 4px solid #ffc107;
}

.alert-stolen .alert-content[b-tj7tjdpygo] {
    border-left: 4px solid #dc3545;
}

.alert-content[b-tj7tjdpygo] >  .rzi {
    font-size: 2.5rem !important;
}

.alert-lost .alert-content[b-tj7tjdpygo] >  .rzi {
    color: #ffc107 !important;
}

.alert-stolen .alert-content[b-tj7tjdpygo] >  .rzi {
    color: #dc3545 !important;
}

.alert-text[b-tj7tjdpygo] {
    flex: 1;
}

.alert-text strong[b-tj7tjdpygo] {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.alert-text p[b-tj7tjdpygo] {
    margin: 0;
    font-size: 0.9rem;
    color: #65676b;
}

.btn-alert-action[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #1877f2;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-alert-action:hover[b-tj7tjdpygo] {
    background: #166fe5;
}

/* Admin Action Banner (Scan Found Pets) */
.admin-action-banner[b-tj7tjdpygo] {
    max-width: 940px;
    margin: 0 auto 1rem;
    padding: 0 1rem;
}

.admin-action-content[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.admin-action-content[b-tj7tjdpygo] >  .rzi {
    font-size: 2rem !important;
    opacity: 0.9;
}

.admin-action-text[b-tj7tjdpygo] {
    flex: 1;
}

.admin-action-text strong[b-tj7tjdpygo] {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.admin-action-text p[b-tj7tjdpygo] {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.btn-scan-action[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-scan-action:hover[b-tj7tjdpygo] {
    background: rgba(255, 255, 255, 0.25);
}

.btn-scan-action.disabled[b-tj7tjdpygo],
.btn-scan-action:disabled[b-tj7tjdpygo] {
    opacity: 0.6;
    cursor: not-allowed;
}

.scan-result[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    font-size: 0.875rem;
    margin-top: -8px;
}

.scan-result.success[b-tj7tjdpygo] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.scan-result.error[b-tj7tjdpygo] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.scan-result[b-tj7tjdpygo]  .rzi {
    font-size: 1.125rem !important;
}

/* Profile Content Grid */
.profile-content[b-tj7tjdpygo] {
    max-width: 940px;
    margin: 0 auto;
    padding: 1rem;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 1rem;
}

/* Profile Cards */
.profile-card[b-tj7tjdpygo] {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}

.profile-card h3[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #050505;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e4e6eb;
}

.profile-card h3[b-tj7tjdpygo]  .rzi {
    font-size: 1.25rem !important;
    color: #65676b !important;
}

/* About List */
.about-list[b-tj7tjdpygo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.about-item[b-tj7tjdpygo] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.about-item[b-tj7tjdpygo]  .rzi {
    font-size: 1.25rem !important;
    color: #65676b !important;
    margin-top: 0.125rem;
}

.about-item div[b-tj7tjdpygo] {
    display: flex;
    flex-direction: column;
}

.about-item .label[b-tj7tjdpygo] {
    font-size: 0.8rem;
    color: #65676b;
}

.about-item .value[b-tj7tjdpygo] {
    font-size: 0.95rem;
    color: #050505;
    font-weight: 500;
}

.special-notes[b-tj7tjdpygo] {
    font-size: 0.95rem;
    color: #050505;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Owner Card */
.owner-card .owner-info[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.owner-avatar[b-tj7tjdpygo] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.owner-details[b-tj7tjdpygo] {
    flex: 1;
}

.owner-name[b-tj7tjdpygo] {
    display: block;
    font-weight: 600;
    color: #050505;
    margin-bottom: 0.25rem;
}

.btn-contact[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: #e4e6eb;
    color: #050505;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-contact:hover[b-tj7tjdpygo] {
    background: #d8dadf;
}

/* Photos Card */
.photos-card .card-header[b-tj7tjdpygo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e4e6eb;
}

.photos-card .card-header h3[b-tj7tjdpygo] {
    margin: 0;
    padding: 0;
    border: none;
}

.btn-add-photo[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: #e7f3ff;
    color: #1877f2;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-add-photo:hover[b-tj7tjdpygo] {
    background: #d6e9fc;
}

.photos-grid[b-tj7tjdpygo] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.photo-item[b-tj7tjdpygo] {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

.photo-item:hover[b-tj7tjdpygo] {
    transform: scale(1.02);
}

.photo-item img[b-tj7tjdpygo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-photos[b-tj7tjdpygo] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: #65676b;
}

.no-photos[b-tj7tjdpygo]  .rzi {
    font-size: 3rem !important;
    color: #bcc0c4 !important;
}

/* Activity Timeline */
.activity-timeline[b-tj7tjdpygo] {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 20px;
}

/* Timeline vertical line */
.activity-timeline[b-tj7tjdpygo]::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 24px;
    bottom: 24px;
    width: 3px;
    background: #e4e6eb;
    border-radius: 2px;
}

.timeline-item[b-tj7tjdpygo] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
    padding-bottom: 1.25rem;
}

.timeline-item:last-child[b-tj7tjdpygo] {
    padding-bottom: 0;
}

/* Timeline Icon */
.timeline-icon[b-tj7tjdpygo] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: #e4e6eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.timeline-icon[b-tj7tjdpygo]  .rzi {
    font-size: 1.1rem !important;
    color: #65676b !important;
}

.timeline-icon-success[b-tj7tjdpygo] {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
}

.timeline-icon-success[b-tj7tjdpygo]  .rzi {
    color: white !important;
}

.timeline-icon-info[b-tj7tjdpygo] {
    background: linear-gradient(135deg, #2196f3, #42a5f5);
}

.timeline-icon-info[b-tj7tjdpygo]  .rzi {
    color: white !important;
}

.timeline-icon-primary[b-tj7tjdpygo] {
    background: linear-gradient(135deg, #1877f2, #42a5f5);
}

.timeline-icon-primary[b-tj7tjdpygo]  .rzi {
    color: white !important;
}

.timeline-icon-warning[b-tj7tjdpygo] {
    background: linear-gradient(135deg, #ff9800, #ffb74d);
}

.timeline-icon-warning[b-tj7tjdpygo]  .rzi {
    color: white !important;
}

.timeline-icon-danger[b-tj7tjdpygo] {
    background: linear-gradient(135deg, #f44336, #ef5350);
}

.timeline-icon-danger[b-tj7tjdpygo]  .rzi {
    color: white !important;
}

.timeline-icon-secondary[b-tj7tjdpygo] {
    background: linear-gradient(135deg, #6c757d, #868e96);
}

.timeline-icon-secondary[b-tj7tjdpygo]  .rzi {
    color: white !important;
}

.timeline-content[b-tj7tjdpygo] {
    flex: 1;
    padding-top: 0.25rem;
}

/* Timeline Icon with Pet Photo Background */
.timeline-icon-with-photo[b-tj7tjdpygo] {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.timeline-pet-photo[b-tj7tjdpygo] {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.timeline-icon-overlay[b-tj7tjdpygo] {
    position: absolute;
    inset: 0;
    background: rgba(228, 230, 235, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.timeline-icon-overlay[b-tj7tjdpygo]  .rzi {
    font-size: 1.25rem !important;
    color: #65676b !important;
}

.timeline-icon-alert[b-tj7tjdpygo] {
    background: rgba(255, 243, 205, 0.9);
}

.timeline-icon-alert[b-tj7tjdpygo]  .rzi {
    color: #856404 !important;
}

.timeline-icon[b-tj7tjdpygo] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e4e6eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.timeline-icon[b-tj7tjdpygo]  .rzi {
    font-size: 1.25rem !important;
    color: #65676b !important;
}

.timeline-alert .timeline-icon[b-tj7tjdpygo] {
    background: #fff3cd;
}

.timeline-alert .timeline-icon[b-tj7tjdpygo]  .rzi {
    color: #856404 !important;
}

.timeline-content[b-tj7tjdpygo] {
    display: flex;
    flex-direction: column;
    padding-top: 0.25rem;
}

.timeline-title[b-tj7tjdpygo] {
    font-weight: 600;
    color: #050505;
    font-size: 0.95rem;
}

.timeline-date[b-tj7tjdpygo] {
    font-size: 0.85rem;
    color: #65676b;
}

/* Modal */
.modal-overlay[b-tj7tjdpygo] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-tj7tjdpygo] {
    background: white;
    border-radius: 12px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

/* Wider modal for lost pet dialog with map */
.modal-content:has(.location-picker-container)[b-tj7tjdpygo] {
    max-width: 600px;
}

.modal-header[b-tj7tjdpygo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e4e6eb;
}

.modal-header h2[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #050505;
    margin: 0;
}

.modal-header h2[b-tj7tjdpygo]  .rzi {
    color: #dc3545 !important;
}

.modal-close[b-tj7tjdpygo] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e4e6eb;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.modal-close:hover[b-tj7tjdpygo] {
    background: #d8dadf;
}

.modal-body[b-tj7tjdpygo] {
    padding: 1.25rem;
}

.modal-body > p[b-tj7tjdpygo] {
    color: #65676b;
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.form-group[b-tj7tjdpygo] {
    margin-bottom: 1rem;
}

.form-group label[b-tj7tjdpygo] {
    display: block;
    font-weight: 600;
    color: #050505;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.form-input[b-tj7tjdpygo],
.form-textarea[b-tj7tjdpygo] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #dddfe2;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-input:focus[b-tj7tjdpygo],
.form-textarea:focus[b-tj7tjdpygo] {
    outline: none;
    border-color: #1877f2;
}

.form-textarea[b-tj7tjdpygo] {
    min-height: 100px;
    resize: vertical;
}

.alert-preview[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff3cd;
    border-radius: 8px;
    margin-top: 1rem;
}

/* QR Code Card Styles */
.qr-code-card[b-tj7tjdpygo] {
    text-align: center;
}

.qr-code-card h3[b-tj7tjdpygo] {
    text-align: left;
}

.qr-code-container[b-tj7tjdpygo] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    margin: 1rem 0;
    min-height: 200px;
}

.qr-code-image[b-tj7tjdpygo] {
    max-width: 180px;
    max-height: 180px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qr-loading[b-tj7tjdpygo] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px;
    width: 180px;
}

.qr-description[b-tj7tjdpygo] {
    font-size: 0.85rem;
    color: #65676b;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.qr-actions[b-tj7tjdpygo] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.btn-download-qr[b-tj7tjdpygo],
.btn-print-qr[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-download-qr[b-tj7tjdpygo] {
    background: #1877f2;
    color: white;
}

.btn-download-qr:hover[b-tj7tjdpygo] {
    background: #166fe5;
}

.btn-print-qr[b-tj7tjdpygo] {
    background: #e4e6eb;
    color: #050505;
}

.btn-print-qr:hover[b-tj7tjdpygo] {
    background: #d8dadf;
}

.btn-download-qr[b-tj7tjdpygo]  .rzi,
.btn-print-qr[b-tj7tjdpygo]  .rzi {
    font-size: 1rem !important;
}

.alert-preview[b-tj7tjdpygo]  .rzi {
    font-size: 1.5rem !important;
    color: #856404 !important;
}

.alert-preview span[b-tj7tjdpygo] {
    font-size: 0.9rem;
    color: #856404;
}

.modal-footer[b-tj7tjdpygo] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e4e6eb;
}

.modal-footer button[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.modal-footer button:disabled[b-tj7tjdpygo] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 900px) {
    .profile-content[b-tj7tjdpygo] {
        grid-template-columns: 1fr;
    }
    
    .profile-sidebar[b-tj7tjdpygo] {
        order: 2;
    }
    
    .profile-main[b-tj7tjdpygo] {
        order: 1;
    }
}

@media (max-width: 600px) {
    .cover-photo[b-tj7tjdpygo] {
        height: 150px;
    }
    
    .profile-picture[b-tj7tjdpygo] {
        width: 100px;
        height: 100px;
    }
    
    .profile-picture-container[b-tj7tjdpygo] {
        bottom: -50px;
    }
    
    .profile-header[b-tj7tjdpygo] {
        padding-top: 60px;
    }
    
    .pet-name[b-tj7tjdpygo] {
        font-size: 1.5rem;
    }
    
    .profile-actions[b-tj7tjdpygo] {
        flex-direction: column;
    }
    
    .profile-actions button[b-tj7tjdpygo] {
        width: 100%;
        justify-content: center;
    }
    
    .alert-content[b-tj7tjdpygo] {
        flex-direction: column;
        text-align: center;
    }
    
    .photos-grid[b-tj7tjdpygo] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Radzen Timeline Customizations
   ======================================== */

.activity-header[b-tj7tjdpygo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.activity-header h3[b-tj7tjdpygo] {
    margin: 0;
}

/* Radzen Timeline Base Customizations */
[b-tj7tjdpygo] .pet-activity-timeline {
    --rz-timeline-line-color: #e4e6eb;
    --rz-timeline-line-width: 3px;
    padding: 0.5rem 0;
    min-height: 100px;
}

[b-tj7tjdpygo] .pet-activity-timeline .rz-timeline-item {
    padding-bottom: 1rem;
}

/* Ensure RadzenTimeline renders properly */
.activity-card[b-tj7tjdpygo]  .rz-timeline {
    display: flex !important;
    flex-direction: column !important;
}

.activity-card[b-tj7tjdpygo]  .rz-timeline-item {
    display: flex !important;
}

.activity-card[b-tj7tjdpygo]  .rz-timeline-content {
    flex: 1;
}

/* Timeline Point Images */
.timeline-point-image[b-tj7tjdpygo] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--rz-success, #4caf50);
    position: relative;
    background: white;
}

.timeline-point-image img[b-tj7tjdpygo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: rotate(90deg);
    scale: 1.4;
}

.timeline-point-alert[b-tj7tjdpygo] {
    border-color: var(--rz-warning, #ff9800);
}

.timeline-point-danger[b-tj7tjdpygo] {
    border-color: var(--rz-danger, #f44336);
}

.timeline-point-success[b-tj7tjdpygo] {
    border-color: var(--rz-success, #4caf50);
}

/* Alert and Success Badges */
.timeline-alert-badge[b-tj7tjdpygo],
.timeline-success-badge[b-tj7tjdpygo] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--rz-warning, #ff9800);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.timeline-alert-badge[b-tj7tjdpygo]  .rzi {
    font-size: 11px !important;
    color: white !important;
}

.timeline-success-badge[b-tj7tjdpygo] {
    background: var(--rz-success, #4caf50);
}

.timeline-success-badge[b-tj7tjdpygo]  .rzi {
    font-size: 11px !important;
    color: white !important;
}

/* Timeline Event Cards */
.timeline-event[b-tj7tjdpygo] {
    padding: 0.875rem 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid var(--rz-primary, #1877f2);
    margin-left: 0.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.timeline-event:hover[b-tj7tjdpygo] {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.timeline-event-alert[b-tj7tjdpygo] {
    border-left-color: var(--rz-warning, #ff9800);
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), #f8f9fa);
}

.timeline-event-danger[b-tj7tjdpygo] {
    border-left-color: var(--rz-danger, #f44336);
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.08), #f8f9fa);
}

.timeline-event-success[b-tj7tjdpygo] {
    border-left-color: var(--rz-success, #4caf50);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), #f8f9fa);
}

.timeline-event-sighting[b-tj7tjdpygo] {
    border-left-color: var(--rz-secondary, #6c757d);
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.05), #f8f9fa);
}

.timeline-event-health[b-tj7tjdpygo] {
    border-left-color: var(--rz-info, #2196f3);
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.05), #f8f9fa);
}

.timeline-event-milestone[b-tj7tjdpygo] {
    border-left-color: gold;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), #f8f9fa);
}

.timeline-event-social[b-tj7tjdpygo] {
    border-left-color: var(--rz-success, #4caf50);
    background: #f8f9fa;
}

/* Timeline Event Content */
.timeline-event-title[b-tj7tjdpygo] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1c1e21;
}

.timeline-event-title[b-tj7tjdpygo]  .rzi {
    font-size: 1.1rem !important;
}

.timeline-alert-title[b-tj7tjdpygo] {
    color: #b45309;
}

.timeline-alert-title[b-tj7tjdpygo]  .rzi {
    color: #b45309 !important;
}

.timeline-danger-title[b-tj7tjdpygo] {
    color: #c62828;
}

.timeline-danger-title[b-tj7tjdpygo]  .rzi {
    color: #c62828 !important;
}

.timeline-success-title[b-tj7tjdpygo] {
    color: #2e7d32;
}

.timeline-success-title[b-tj7tjdpygo]  .rzi {
    color: #2e7d32 !important;
}

.timeline-event-description[b-tj7tjdpygo] {
    font-size: 0.875rem;
    color: #65676b;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.timeline-event-date[b-tj7tjdpygo] {
    font-size: 0.75rem;
    color: #8a8d91;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.timeline-event-date[b-tj7tjdpygo]  .rzi {
    font-size: 0.75rem !important;
    color: #8a8d91 !important;
}

/* ==========================================================================
   Physical Traits Card - NEW Enhanced AI Data Display
   ========================================================================== */

/* Physical Traits Card */
.traits-card[b-tj7tjdpygo] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

.traits-card h3[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6366f1 !important;
}

.traits-subtitle[b-tj7tjdpygo] {
    font-size: 0.85rem;
    color: #64748b;
    margin: -0.5rem 0 1rem 0;
    padding-left: 1.75rem;
}

/* Traits Grid */
.traits-grid[b-tj7tjdpygo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (max-width: 480px) {
    .traits-grid[b-tj7tjdpygo] {
        grid-template-columns: 1fr;
    }
}

.trait-item[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.trait-item:hover[b-tj7tjdpygo] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.trait-icon[b-tj7tjdpygo] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border-radius: 10px;
    color: #6366f1;
    flex-shrink: 0;
}

.trait-icon[b-tj7tjdpygo]  .rzi {
    font-size: 1.25rem !important;
}

.trait-info[b-tj7tjdpygo] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.trait-label[b-tj7tjdpygo] {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.trait-value[b-tj7tjdpygo] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Color Dots */
.color-dot[b-tj7tjdpygo] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

/* Section Styles (Markings, Unique Features, Collar) */
.markings-section[b-tj7tjdpygo],
.unique-features-section[b-tj7tjdpygo],
.collar-section[b-tj7tjdpygo] {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 10px;
    background: white;
}

.section-header[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: #475569;
}

.section-header[b-tj7tjdpygo]  .rzi {
    font-size: 1.1rem !important;
}

.section-header strong[b-tj7tjdpygo] {
    font-size: 0.9rem;
}

.markings-section p[b-tj7tjdpygo],
.unique-features-section p[b-tj7tjdpygo],
.collar-section p[b-tj7tjdpygo] {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* Unique Features - Highlighted as Key Identifier */
.unique-features-section[b-tj7tjdpygo] {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border: 1px solid #fcd34d;
}

.unique-features-section .section-header[b-tj7tjdpygo] {
    color: #92400e;
}

.unique-features-section .section-header[b-tj7tjdpygo]  .rzi {
    color: #f59e0b !important;
}

.unique-features-section p[b-tj7tjdpygo] {
    color: #78350f;
}

.key-badge[b-tj7tjdpygo] {
    font-size: 0.65rem;
    background: #f59e0b;
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    margin-left: auto;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Collar Section */
.collar-section[b-tj7tjdpygo] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
}

.collar-section .section-header[b-tj7tjdpygo] {
    color: #065f46;
}

.collar-section .section-header[b-tj7tjdpygo]  .rzi {
    color: #10b981 !important;
}

.collar-section p[b-tj7tjdpygo] {
    color: #047857;
}

/* Markings Section */
.markings-section[b-tj7tjdpygo] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
}

.markings-section .section-header[b-tj7tjdpygo] {
    color: #0c4a6e;
}

.markings-section .section-header[b-tj7tjdpygo]  .rzi {
    color: #0ea5e9 !important;
}

.markings-section p[b-tj7tjdpygo] {
    color: #075985;
}

/* ==========================================================================
   QR Code Modal Styles
   ========================================================================== */

.qr-code-container[b-tj7tjdpygo] {
    position: relative;
    cursor: pointer;
}

.qr-code-image.clickable[b-tj7tjdpygo] {
    transition: transform 0.2s, box-shadow 0.2s;
}

.qr-code-container:hover .qr-code-image.clickable[b-tj7tjdpygo] {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.qr-enlarge-hint[b-tj7tjdpygo] {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.qr-code-container:hover .qr-enlarge-hint[b-tj7tjdpygo] {
    opacity: 1;
}

.qr-enlarge-hint[b-tj7tjdpygo]  .rzi {
    font-size: 0.875rem !important;
}

/* QR Modal Overlay */
.qr-modal-overlay[b-tj7tjdpygo] {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px);
}

.qr-modal-content[b-tj7tjdpygo] {
    background: white;
    border-radius: 20px;
    max-width: 400px;
    width: 90%;
    padding: 0;
    position: relative;
    animation: modalSlideIn-b-tj7tjdpygo 0.3s ease-out;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@keyframes modalSlideIn-b-tj7tjdpygo {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.qr-modal-close[b-tj7tjdpygo] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s;
    z-index: 10;
}

.qr-modal-close:hover[b-tj7tjdpygo] {
    background: rgba(0, 0, 0, 0.15);
    color: #1e293b;
}

.qr-modal-header[b-tj7tjdpygo] {
    text-align: center;
    padding: 24px 24px 16px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.qr-modal-header h2[b-tj7tjdpygo] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.qr-modal-header h2[b-tj7tjdpygo]  .rzi {
    font-size: 1.5rem !important;
    color: white !important;
}

.qr-modal-header p[b-tj7tjdpygo] {
    margin: 4px 0 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.qr-modal-body[b-tj7tjdpygo] {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8fafc;
}

.qr-modal-image[b-tj7tjdpygo] {
    width: 100%;
    max-width: 340px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    background: white;
    padding: 12px;
}

.qr-modal-footer[b-tj7tjdpygo] {
    display: flex;
    gap: 12px;
    padding: 16px 24px 24px;
    justify-content: center;
    background: white;
}

.btn-qr-download[b-tj7tjdpygo],
.btn-qr-print[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.btn-qr-download[b-tj7tjdpygo] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.btn-qr-download:hover[b-tj7tjdpygo] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-qr-print[b-tj7tjdpygo] {
    background: #f1f5f9;
    color: #475569;
}

.btn-qr-print:hover[b-tj7tjdpygo] {
    background: #e2e8f0;
}

/* ==========================================================================
   Timeline Photos Preview (Fixed)
   ========================================================================== */

/* Timeline Photos Preview */
.timeline-photos-preview[b-tj7tjdpygo] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.timeline-mini-photo[b-tj7tjdpygo] {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.timeline-more-photos[b-tj7tjdpygo] {
    font-size: 0.75rem;
    color: #65676b;
    padding: 0.375rem 0.625rem;
    background: #e4e6eb;
    border-radius: 6px;
    font-weight: 500;
}

/* Health Event Reminder */
.timeline-health-reminder[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.timeline-health-reminder[b-tj7tjdpygo]  .rzi {
    font-size: 0.9rem !important;
    color: #0d6efd !important;
}

/* Sighting Specific Styles */
.sighting-photo-container[b-tj7tjdpygo] {
    margin: 0.75rem 0;
    position: relative;
}

.sighting-photo[b-tj7tjdpygo] {
    max-width: 180px;
    max-height: 120px;
    border-radius: 8px;
    border: 1px solid #e4e6eb;
    object-fit: cover;
}

.sighting-actions[b-tj7tjdpygo] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Social Stats */
.social-stats[b-tj7tjdpygo] {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

.stat-item[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.9rem;
    color: #65676b;
}

.stat-item[b-tj7tjdpygo]  .rzi {
    font-size: 1rem !important;
    color: #65676b !important;
}

.stat-item strong[b-tj7tjdpygo] {
    color: #1c1e21;
}

/* Live Activity Indicator */
.timeline-live-indicator[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-radius: 20px;
    cursor: pointer;
    animation: pulse-b-tj7tjdpygo 2s infinite;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1565c0;
    transition: transform 0.2s;
}

.timeline-live-indicator:hover[b-tj7tjdpygo] {
    transform: scale(1.02);
}

.timeline-live-indicator[b-tj7tjdpygo]  .rzi {
    font-size: 1.1rem !important;
    color: #1565c0 !important;
}

@keyframes pulse-b-tj7tjdpygo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Load More Section */
.timeline-load-more[b-tj7tjdpygo] {
    text-align: center;
    padding: 1rem;
    border-top: 1px dashed #e4e6eb;
    margin-top: 0.5rem;
}

.timeline-load-more .activity-count[b-tj7tjdpygo] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #8a8d91;
}

/* Connection Status Indicator */
.connection-indicator[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 16px;
    margin-top: 1rem;
}

.connection-indicator[b-tj7tjdpygo]  .rzi {
    font-size: 0.9rem !important;
}

.connection-connected[b-tj7tjdpygo] {
    background: #e8f5e9;
    color: #2e7d32;
}

.connection-connected[b-tj7tjdpygo]  .rzi {
    color: #2e7d32 !important;
}

.connection-reconnecting[b-tj7tjdpygo] {
    background: #fff3e0;
    color: #ef6c00;
}

.connection-reconnecting[b-tj7tjdpygo]  .rzi {
    color: #ef6c00 !important;
}

.connection-disconnected[b-tj7tjdpygo] {
    background: #ffebee;
    color: #c62828;
}

.connection-disconnected[b-tj7tjdpygo]  .rzi {
    color: #c62828 !important;
}

/* Responsive Timeline Adjustments */
@media (max-width: 600px) {
    .activity-header[b-tj7tjdpygo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .timeline-event[b-tj7tjdpygo] {
        margin-left: 0.25rem;
        padding: 0.75rem;
    }
    
    .timeline-point-image[b-tj7tjdpygo] {
        width: 38px;
        height: 38px;
    }
    
    .timeline-photos-preview[b-tj7tjdpygo] {
        gap: 0.375rem;
    }
    
    .timeline-mini-photo[b-tj7tjdpygo] {
        width: 44px;
        height: 44px;
    }
    
    .social-stats[b-tj7tjdpygo] {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* Over-limit banner and Remove Pet Modal - to be appended to PetDetails.razor.css */

/* ========================================
   OVER PLAN LIMIT BANNER
   ======================================== */

.over-limit-banner[b-tj7tjdpygo] {
    background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
    border: 1px solid #fc8181;
    border-left: 4px solid #e53e3e;
    border-radius: 0.75rem;
    margin: 1rem 2rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.15);
}

.over-limit-content[b-tj7tjdpygo] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.over-limit-icon[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(229, 62, 62, 0.15);
    border-radius: 50%;
    flex-shrink: 0;
}

.over-limit-icon[b-tj7tjdpygo]  .rzi {
    font-size: 1.5rem !important;
    color: #c53030 !important;
}

.over-limit-text[b-tj7tjdpygo] {
    flex: 1;
    min-width: 200px;
}

.over-limit-text strong[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1rem;
    color: #c53030;
    margin-bottom: 0.5rem;
}

.over-limit-text strong[b-tj7tjdpygo]  .rzi {
    font-size: 1.1rem !important;
    color: #c53030 !important;
}

.over-limit-text p[b-tj7tjdpygo] {
    font-size: 0.9rem;
    color: #742a2a;
    line-height: 1.5;
    margin: 0;
}

.over-limit-actions[b-tj7tjdpygo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-upgrade-banner[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, #e53e3e, #c53030);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-upgrade-banner:hover[b-tj7tjdpygo] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(197, 48, 48, 0.35);
    color: white;
}

.btn-upgrade-banner[b-tj7tjdpygo]  .rzi {
    font-size: 1rem !important;
}

.btn-remove-pet[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 1rem;
    background: white;
    color: #c53030;
    border: 1px solid #fc8181;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-pet:hover[b-tj7tjdpygo] {
    background: #fff5f5;
    border-color: #e53e3e;
}

.btn-remove-pet[b-tj7tjdpygo]  .rzi {
    font-size: 0.95rem !important;
}

/* ========================================
   REMOVE PET MODAL
   ======================================== */

.modal-small[b-tj7tjdpygo] {
    max-width: 450px;
}

.modal-header-danger[b-tj7tjdpygo] {
    background: linear-gradient(135deg, #fff5f5, #fed7d7);
    border-bottom: 1px solid #fc8181;
}

.modal-header-danger h2[b-tj7tjdpygo] {
    color: #c53030;
}

.modal-header-danger[b-tj7tjdpygo]  .rzi {
    color: #c53030 !important;
}

.remove-pet-warning[b-tj7tjdpygo] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #fff5f5;
    border: 1px solid #fc8181;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.remove-pet-warning[b-tj7tjdpygo]  .rzi {
    font-size: 1.5rem !important;
    color: #e53e3e !important;
    flex-shrink: 0;
}

.remove-pet-warning p[b-tj7tjdpygo] {
    margin: 0;
    font-size: 0.9rem;
    color: #742a2a;
    line-height: 1.5;
}

.remove-pet-info[b-tj7tjdpygo] {
    padding: 0.75rem;
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    border-radius: 0.5rem;
}

.remove-pet-info p[b-tj7tjdpygo] {
    margin: 0;
    font-size: 0.85rem;
    color: #276749;
}

.btn-upgrade-alt[b-tj7tjdpygo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, #48bb78, #38a169);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-right: auto;
}

.btn-upgrade-alt:hover[b-tj7tjdpygo] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(56, 161, 105, 0.35);
    color: white;
}

.btn-upgrade-alt[b-tj7tjdpygo]  .rzi {
    font-size: 0.9rem !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .over-limit-banner[b-tj7tjdpygo] {
        margin: 1rem;
        padding: 1rem;
    }
    
    .over-limit-content[b-tj7tjdpygo] {
        flex-direction: column;
    }
    
    .over-limit-actions[b-tj7tjdpygo] {
        width: 100%;
        flex-direction: column;
    }
    
    .btn-upgrade-banner[b-tj7tjdpygo],
    .btn-remove-pet[b-tj7tjdpygo] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
.legal-page[b-d8fj3t6v74] {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    padding: 2rem 1rem 4rem;
}

.legal-container[b-d8fj3t6v74] {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Header */
.legal-header[b-d8fj3t6v74] {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 50%, #4c1d95 100%);
    padding: 3rem 2.5rem;
    color: white;
    text-align: center;
}

.legal-title[b-d8fj3t6v74] {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
    line-height: 1.2;
}

.legal-meta[b-d8fj3t6v74] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.meta-item[b-d8fj3t6v74] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.meta-label[b-d8fj3t6v74] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
}

.meta-value[b-d8fj3t6v74] {
    font-size: 1rem;
    font-weight: 600;
}

/* Content */
.legal-content[b-d8fj3t6v74] {
    padding: 2.5rem;
}

.legal-section[b-d8fj3t6v74] {
    margin-bottom: 2.5rem;
}

.legal-section:last-child[b-d8fj3t6v74] {
    margin-bottom: 0;
}

.legal-section h2[b-d8fj3t6v74] {
    font-size: 1.375rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.legal-section p[b-d8fj3t6v74] {
    font-size: 1rem;
    line-height: 1.75;
    color: #475569;
    margin: 0 0 1rem;
}

.legal-section p:last-child[b-d8fj3t6v74] {
    margin-bottom: 0;
}

.legal-section a[b-d8fj3t6v74] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.legal-section a:hover[b-d8fj3t6v74] {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Lists */
.legal-list[b-d8fj3t6v74] {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.legal-list li[b-d8fj3t6v74] {
    font-size: 1rem;
    line-height: 1.75;
    color: #475569;
    margin-bottom: 0.5rem;
    position: relative;
}

.legal-list li[b-d8fj3t6v74]::marker {
    color: #2563eb;
}

/* Highlight Box */
.legal-highlight[b-d8fj3t6v74] {
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border-left: 4px solid #2563eb;
    padding: 1rem 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    margin: 1.5rem 0;
}

.legal-highlight strong[b-d8fj3t6v74] {
    color: #1e40af;
}

/* Contact Info */
.contact-info[b-d8fj3t6v74] {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.75rem;
    margin-top: 1rem;
}

.contact-info p[b-d8fj3t6v74] {
    margin: 0 0 0.5rem;
    color: #334155;
}

.contact-info p:last-child[b-d8fj3t6v74] {
    margin-bottom: 0;
}

/* Footer */
.legal-footer[b-d8fj3t6v74] {
    padding: 1.5rem 2.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.back-link[b-d8fj3t6v74] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.back-link:hover[b-d8fj3t6v74] {
    color: #1d4ed8;
    gap: 0.75rem;
}

.back-icon[b-d8fj3t6v74] {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.back-link:hover .back-icon[b-d8fj3t6v74] {
    transform: translateX(-3px);
}

/* Responsive */
@media (max-width: 768px) {
    .legal-page[b-d8fj3t6v74] {
        padding: 1rem;
    }

    .legal-container[b-d8fj3t6v74] {
        border-radius: 1rem;
    }

    .legal-header[b-d8fj3t6v74] {
        padding: 2rem 1.5rem;
    }

    .legal-title[b-d8fj3t6v74] {
        font-size: 1.875rem;
    }

    .legal-meta[b-d8fj3t6v74] {
        gap: 1.5rem;
    }

    .legal-content[b-d8fj3t6v74] {
        padding: 1.5rem;
    }

    .legal-section h2[b-d8fj3t6v74] {
        font-size: 1.25rem;
    }

    .legal-footer[b-d8fj3t6v74] {
        padding: 1.25rem 1.5rem;
    }
}
/* /Components/Pages/RegisterPet.razor.rz.scp.css */
.register-pet-page[b-pu427tn7tz] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 50%, #f5f5ff 100%);
    padding: 2rem 1rem 4rem;
}

.register-pet-container[b-pu427tn7tz] {
    max-width: 800px;
    margin: 0 auto;
}

/* Header Styles */
.register-header[b-pu427tn7tz] {
    text-align: center;
    margin-bottom: 2rem;
}

.register-header h1[b-pu427tn7tz] {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1e40af 0%, #4f46e5 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.register-subtitle[b-pu427tn7tz] {
    font-size: 1.1rem;
    color: #64748b;
}

/* Form Section Styles */
.form-section[b-pu427tn7tz] {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.form-section.step-hidden[b-pu427tn7tz] {
    display: none;
}

/* Clickable completed step indicators */
.step-indicator.step-complete[b-pu427tn7tz] {
    cursor: pointer;
}

.step-indicator.step-complete:hover[b-pu427tn7tz] {
    background: #eff6ff;
}

.step-indicator.step-pending[b-pu427tn7tz] {
    opacity: 0.5;
}

.step-summary[b-pu427tn7tz] {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.2rem 0.6rem;
    border-radius: 0.375rem;
}

.section-header[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.section-header h2[b-pu427tn7tz] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.section-icon[b-pu427tn7tz]  .rzi {
    font-size: 1.5rem !important;
    color: #2563eb !important;
}

/* Pet Name Group in Step 1 */
.pet-name-group[b-pu427tn7tz] {
    margin-bottom: 1.5rem;
    max-width: 400px;
}

.pet-name-group .form-input[b-pu427tn7tz] {
    font-size: 1.1rem;
    padding: 0.875rem 1rem;
    padding-left: 2.75rem;
}

/* Photo Section Layout - Side by Side */
.photo-section-layout[b-pu427tn7tz] {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

/* Photo Upload Section */
.photo-upload-section[b-pu427tn7tz] {
    width: 100%;
}

.form-label[b-pu427tn7tz] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.photo-instruction[b-pu427tn7tz] {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1.25rem;
}

/* New Simple Photo Upload Grid - 4 boxes in a row */
.photo-upload-grid-simple[b-pu427tn7tz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* Simple Photo Upload Box - matching the reference image */
.photo-upload-box[b-pu427tn7tz] {
    position: relative;
    aspect-ratio: 1;
    border: 2px dashed #d1d5db;
    border-radius: 0.75rem;
    background: #ffffff;
    transition: all 0.2s ease;
    overflow: hidden;
}

.photo-upload-box:hover[b-pu427tn7tz] {
    border-color: #6366f1;
    background: #f5f3ff;
}

.photo-upload-box.uploaded[b-pu427tn7tz] {
    border-style: solid;
    border-color: #22c55e;
    background: white;
}

.photo-upload-box .photo-input[b-pu427tn7tz] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 10;
}

.photo-box-label[b-pu427tn7tz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    position: relative;
}

.photo-upload-box .box-icon[b-pu427tn7tz]  .rzi {
    font-size: 2rem !important;
    color: #9ca3af !important;
    margin-bottom: 0.5rem;
}

.photo-upload-box:hover .box-icon[b-pu427tn7tz]  .rzi {
    color: #6366f1 !important;
}

.photo-upload-box .box-title[b-pu427tn7tz] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4f46e5;
    margin-bottom: 0.25rem;
}

.photo-upload-box .box-subtitle[b-pu427tn7tz] {
    font-size: 0.7rem;
    color: #9ca3af;
}

.photo-upload-box .photo-preview[b-pu427tn7tz] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
}

.photo-upload-box .photo-check[b-pu427tn7tz] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #22c55e;
    border-radius: 50%;
    padding: 0.125rem;
}

.photo-upload-box .photo-check[b-pu427tn7tz]  .rzi {
    font-size: 1rem !important;
    color: white !important;
}

/* Angle validation warning styles */
.photo-upload-box.angle-warning[b-pu427tn7tz] {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.photo-upload-box .photo-check.warning[b-pu427tn7tz] {
    background: #f59e0b;
}

.photo-upload-box .photo-check.validating[b-pu427tn7tz] {
    background: #3b82f6;
    animation: spin-b-pu427tn7tz 1s linear infinite;
}

@keyframes spin-b-pu427tn7tz {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.angle-validation-warning[b-pu427tn7tz] {
    position: absolute;
    bottom: -2rem;
    left: 0;
    right: 0;
    font-size: 0.7rem;
    color: #f59e0b;
    text-align: center;
    padding: 0.25rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 0 0 0.5rem 0.5rem;
    line-height: 1.2;
}

/* Front photo angle warning box */
.front-angle-warning-box[b-pu427tn7tz] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin: 1rem 0;
}

.front-angle-warning-box .warning-content[b-pu427tn7tz] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.front-angle-warning-box .warning-icon[b-pu427tn7tz] {
    color: #d97706;
    font-size: 2rem !important;
    flex-shrink: 0;
}

.front-angle-warning-box .warning-text[b-pu427tn7tz] {
    flex: 1;
}

.front-angle-warning-box .warning-text strong[b-pu427tn7tz] {
    color: #92400e;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.5rem;
}

.front-angle-warning-box .warning-text p[b-pu427tn7tz] {
    color: #78350f;
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.front-angle-warning-box .warning-tip[b-pu427tn7tz] {
    font-size: 0.8rem;
    color: #92400e;
    font-style: italic;
}

.front-angle-warning-box .warning-actions[b-pu427tn7tz] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.front-angle-warning-box .btn-upload-different[b-pu427tn7tz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    color: #d97706;
    border: 2px solid #d97706;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.front-angle-warning-box .btn-upload-different:hover[b-pu427tn7tz] {
    background: #fef3c7;
}

.front-angle-warning-box .btn-analyze-anyway[b-pu427tn7tz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #d97706;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.front-angle-warning-box .btn-analyze-anyway:hover[b-pu427tn7tz] {
    background: #b45309;
}

/* Duplicate image warning box (red/danger theme) */
.duplicate-warning-box[b-pu427tn7tz] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 2px solid #dc2626;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin: 1rem 0;
}

.duplicate-warning-box .warning-content[b-pu427tn7tz] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.duplicate-warning-box .warning-icon[b-pu427tn7tz] {
    color: #dc2626;
    font-size: 2rem !important;
    flex-shrink: 0;
}

.duplicate-warning-box .warning-text[b-pu427tn7tz] {
    flex: 1;
}

.duplicate-warning-box .warning-text strong[b-pu427tn7tz] {
    color: #991b1b;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.5rem;
}

.duplicate-warning-box .warning-text p[b-pu427tn7tz] {
    color: #7f1d1d;
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.duplicate-warning-box .warning-count[b-pu427tn7tz] {
    font-weight: 600;
    color: #dc2626;
}

.duplicate-warning-box .warning-tip[b-pu427tn7tz] {
    font-size: 0.8rem;
    color: #991b1b;
    font-style: italic;
}

.duplicate-warning-box .warning-actions[b-pu427tn7tz] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.duplicate-warning-box .btn-upload-different[b-pu427tn7tz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    color: #dc2626;
    border: 2px solid #dc2626;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.duplicate-warning-box .btn-upload-different:hover[b-pu427tn7tz] {
    background: #fee2e2;
}

.duplicate-warning-box .btn-admin-override[b-pu427tn7tz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #7c3aed;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.duplicate-warning-box .btn-admin-override:hover[b-pu427tn7tz] {
    background: #6d28d9;
}

@media (max-width: 768px) {
    .photo-upload-grid-simple[b-pu427tn7tz] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .photo-upload-grid-simple[b-pu427tn7tz] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .photo-upload-box .box-title[b-pu427tn7tz] {
        font-size: 0.7rem;
    }
    
    .photo-upload-box .box-subtitle[b-pu427tn7tz] {
        font-size: 0.6rem;
    }
}

/* Photo Examples Horizontal (below info box) */
.photo-examples-horizontal[b-pu427tn7tz] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.photo-examples-horizontal h4[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 1rem;
}

.photo-examples-horizontal h4[b-pu427tn7tz]  .rzi {
    font-size: 1.1rem !important;
    color: #6366f1 !important;
}

.examples-row[b-pu427tn7tz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* Legacy photo-upload-grid for backwards compatibility */
.photo-upload-grid[b-pu427tn7tz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Photo Examples Sidebar - kept for backwards compatibility */
.photo-examples-sidebar[b-pu427tn7tz] {
    width: 180px;
    flex-shrink: 0;
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
}

.photo-examples-sidebar h4[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 0.75rem;
}

.photo-examples-sidebar h4[b-pu427tn7tz]  .rzi {
    font-size: 1rem !important;
    color: #6366f1 !important;
}

.examples-vertical[b-pu427tn7tz] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.example-card-mini[b-pu427tn7tz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border-radius: 0.5rem;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.examples-row .example-card-mini[b-pu427tn7tz] {
    flex-direction: column;
}

.examples-vertical .example-card-mini[b-pu427tn7tz] {
    flex-direction: row;
    padding: 0.35rem;
}

.example-card-mini:hover[b-pu427tn7tz] {
    border-color: #c7d2fe;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.example-card-mini img[b-pu427tn7tz] {
    width: 60px;
    height: 60px;
    border-radius: 0.375rem;
    object-fit: cover;
}

.examples-row .example-card-mini img[b-pu427tn7tz] {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.examples-vertical .example-card-mini img[b-pu427tn7tz] {
    width: 40px;
    height: 40px;
}

.example-info[b-pu427tn7tz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.examples-vertical .example-info[b-pu427tn7tz] {
    align-items: flex-start;
    gap: 0.125rem;
}

.example-badge-mini[b-pu427tn7tz] {
    font-size: 0.65rem;
    font-weight: 600;
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    width: fit-content;
}

.example-badge-mini.example-front[b-pu427tn7tz] { background: #22c55e; }
.example-badge-mini.example-left[b-pu427tn7tz] { background: #3b82f6; }
.example-badge-mini.example-right[b-pu427tn7tz] { background: #f97316; }
.example-badge-mini.example-back[b-pu427tn7tz] { background: #8b5cf6; }

.example-tip[b-pu427tn7tz] {
    font-size: 0.625rem;
    color: #94a3b8;
}

@media (max-width: 768px) {
    .photo-section-layout[b-pu427tn7tz] {
        flex-direction: column;
    }
    
    .photo-examples-sidebar[b-pu427tn7tz] {
        width: 100%;
        order: -1;
        margin-bottom: 1rem;
    }
    
    .examples-vertical[b-pu427tn7tz] {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .examples-vertical .example-card-mini[b-pu427tn7tz] {
        flex: 1 1 calc(50% - 0.375rem);
        min-width: 140px;
    }
    
    .examples-row[b-pu427tn7tz] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .photo-upload-grid[b-pu427tn7tz] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .examples-row[b-pu427tn7tz] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

.photo-upload-card[b-pu427tn7tz] {
    position: relative;
    aspect-ratio: 1;
    border: 2px dashed #cbd5e1;
    border-radius: 0.75rem;
    background: #f8fafc;
    transition: all 0.2s ease;
    overflow: hidden;
}

/* Required photo (Front/Profile) - Green styling */
.photo-upload-card.photo-required[b-pu427tn7tz] {
    border-color: #22c55e;
    border-width: 2px;
    background: #f0fdf4;
}

.photo-upload-card.photo-required:hover[b-pu427tn7tz] {
    border-color: #16a34a;
    background: #dcfce7;
}

.photo-upload-card.photo-required .upload-text[b-pu427tn7tz] {
    color: #16a34a;
    font-weight: 600;
}

.photo-upload-card.photo-required .upload-hint[b-pu427tn7tz] {
    color: #22c55e;
}

.photo-upload-card.photo-required .upload-icon[b-pu427tn7tz]  .rzi {
    color: #22c55e !important;
}

/* Optional photos - Gray/subtle styling */
.photo-upload-card.photo-optional[b-pu427tn7tz] {
    border-color: #d1d5db;
    background: #f9fafb;
}

.photo-upload-card.photo-optional:hover[b-pu427tn7tz] {
    border-color: #9ca3af;
    background: #f3f4f6;
}

.photo-upload-card.photo-optional .upload-text[b-pu427tn7tz] {
    color: #6b7280;
}

.photo-upload-card.photo-optional .upload-hint[b-pu427tn7tz] {
    color: #9ca3af;
    font-style: italic;
}

.photo-upload-card.photo-optional .upload-icon[b-pu427tn7tz]  .rzi {
    color: #9ca3af !important;
}

/* Uploaded state */
.photo-upload-card.uploaded[b-pu427tn7tz] {
    border-style: solid;
    border-color: #22c55e;
    background: white;
}

.photo-input[b-pu427tn7tz] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 10;
}

.photo-label[b-pu427tn7tz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    position: relative;
}

.upload-icon[b-pu427tn7tz]  .rzi {
    font-size: 2rem !important;
    color: #94a3b8 !important;
    margin-bottom: 0.5rem;
}

.upload-text[b-pu427tn7tz] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #2563eb;
}

.upload-hint[b-pu427tn7tz] {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

.photo-preview[b-pu427tn7tz] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.photo-check[b-pu427tn7tz] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #22c55e;
    border-radius: 50%;
    padding: 0.25rem;
}

.photo-check[b-pu427tn7tz]  .rzi {
    font-size: 1rem !important;
    color: white !important;
}

/* Info Box Styles */
.info-box[b-pu427tn7tz] {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 1px solid #bfdbfe;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.info-box-header[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.info-box-header h3[b-pu427tn7tz] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e40af;
    margin: 0;
}

.info-icon[b-pu427tn7tz]  .rzi {
    font-size: 1.25rem !important;
    color: #2563eb !important;
}

.info-box p[b-pu427tn7tz] {
    font-size: 0.875rem;
    color: #475569;
    margin: 0;
    line-height: 1.6;
}

.photo-requirements[b-pu427tn7tz] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #bfdbfe;
}

.photo-requirements h4[b-pu427tn7tz] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.photo-requirements ul[b-pu427tn7tz] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.photo-requirements li[b-pu427tn7tz] {
    font-size: 0.8125rem;
    color: #475569;
    padding: 0.375rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.photo-requirements .list-icon[b-pu427tn7tz]  .rzi {
    font-size: 1rem !important;
    color: #22c55e !important;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.photo-requirements .list-content[b-pu427tn7tz] {
    display: flex;
    flex-direction: column;
}

.photo-requirements .list-content strong[b-pu427tn7tz] {
    color: #1e293b;
}

.photo-requirements .list-desc[b-pu427tn7tz] {
    color: #64748b;
    font-size: 0.75rem;
}

/* Two-column layout for info-box content */
.info-box-two-column[b-pu427tn7tz] {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #bfdbfe;
}

.info-box-two-column .photo-requirements[b-pu427tn7tz] {
    flex: 1;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.why-photos-inline[b-pu427tn7tz] {
    flex: 1;
    background: linear-gradient(135deg, #faf5ff 0%, #fdf4ff 100%);
    border: 1px solid #e9d5ff;
    border-radius: 0.5rem;
    padding: 1rem;
}

.why-photos-inline h4[b-pu427tn7tz] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #7c3aed;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.why-photos-inline h4[b-pu427tn7tz]  .rzi {
    color: #8b5cf6 !important;
}

.why-photos-inline p[b-pu427tn7tz] {
    font-size: 0.8125rem;
    color: #475569;
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .info-box-two-column[b-pu427tn7tz] {
        flex-direction: column;
        gap: 1rem;
    }
}

.why-photos[b-pu427tn7tz] {
    background: linear-gradient(135deg, #faf5ff 0%, #fdf4ff 100%);
    border-color: #e9d5ff;
}

.why-photos .info-box-header h3[b-pu427tn7tz] {
    color: #7c3aed;
}

.why-photos .info-icon[b-pu427tn7tz]  .rzi {
    color: #8b5cf6 !important;
}

/* Photo Examples */
.photo-examples[b-pu427tn7tz] {
    margin: 2rem 0;
}

.photo-examples h3[b-pu427tn7tz] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1rem;
}

.examples-grid[b-pu427tn7tz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .examples-grid[b-pu427tn7tz] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.example-card[b-pu427tn7tz] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    text-align: center;
}

.example-card img[b-pu427tn7tz] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.example-badge[b-pu427tn7tz] {
    display: inline-block;
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    border-radius: 9999px;
    margin-top: -1.25rem;
    position: relative;
    z-index: 1;
}

.example-front[b-pu427tn7tz] { background: #22c55e; }
.example-left[b-pu427tn7tz] { background: #3b82f6; }
.example-right[b-pu427tn7tz] { background: #f97316; }
.example-back[b-pu427tn7tz] { background: #8b5cf6; }

.example-desc[b-pu427tn7tz] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    padding: 0.5rem 0.5rem 0;
    margin: 0;
}

.example-hint[b-pu427tn7tz] {
    font-size: 0.65rem;
    color: #94a3b8;
    padding: 0 0.5rem 0.75rem;
    margin: 0;
}

/* Form Inputs */
.form-row[b-pu427tn7tz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row-3[b-pu427tn7tz] {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
    .form-row[b-pu427tn7tz],
    .form-row-3[b-pu427tn7tz] {
        grid-template-columns: 1fr;
    }
}

.form-group[b-pu427tn7tz] {
    margin-bottom: 1rem;
}

.form-group:last-child[b-pu427tn7tz] {
    margin-bottom: 0;
}

.form-input[b-pu427tn7tz] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: white;
    transition: all 0.2s ease;
}

.form-input:focus[b-pu427tn7tz] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-input[b-pu427tn7tz]::placeholder {
    color: #9ca3af;
}

.form-textarea[b-pu427tn7tz] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: white;
    transition: all 0.2s ease;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.form-textarea:focus[b-pu427tn7tz] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.mt-2[b-pu427tn7tz] {
    margin-top: 0.5rem;
}

.validation-message[b-pu427tn7tz] {
    display: block;
    font-size: 0.75rem;
    color: #dc2626;
    margin-top: 0.25rem;
}

/* Form Actions */
.form-actions[b-pu427tn7tz] {
    text-align: center;
    margin-top: 2rem;
}

.btn-register[b-pu427tn7tz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 3rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 200px;
}

.btn-register:hover:not(:disabled)[b-pu427tn7tz] {
    background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
}

.btn-register:disabled[b-pu427tn7tz] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Green Register Button */
.btn-register-green[b-pu427tn7tz] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.btn-register-green:hover:not(:disabled)[b-pu427tn7tz] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 10px 25px -5px rgba(22, 163, 74, 0.4);
}

.btn-register[b-pu427tn7tz]  .rzi {
    font-size: 1.1rem !important;
}

/* Secure Note */
.secure-note[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #64748b;
}

.secure-note[b-pu427tn7tz]  .rzi {
    font-size: 1rem !important;
    color: #22c55e !important;
}

/* Edit Owner Button */
.btn-edit-owner[b-pu427tn7tz] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.btn-edit-owner:hover[b-pu427tn7tz] {
    background: #dbeafe;
    border-color: #93c5fd;
}

.btn-edit-owner[b-pu427tn7tz]  .rzi {
    font-size: 0.9rem !important;
}

/* Edit Actions (Save/Cancel) */
.edit-actions[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.btn-save-owner[b-pu427tn7tz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    background: #22c55e;
    border: 1px solid #16a34a;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save-owner:hover[b-pu427tn7tz] {
    background: #16a34a;
}

.btn-save-owner[b-pu427tn7tz]  .rzi {
    font-size: 0.9rem !important;
}

.btn-cancel-owner[b-pu427tn7tz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-owner:hover[b-pu427tn7tz] {
    background: #e2e8f0;
    color: #475569;
}

.btn-cancel-owner[b-pu427tn7tz]  .rzi {
    font-size: 0.9rem !important;
}

/* Disabled form inputs */
.form-input:disabled[b-pu427tn7tz],
.form-textarea:disabled[b-pu427tn7tz] {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
    border-color: #e2e8f0;
}

.spinner[b-pu427tn7tz] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-pu427tn7tz 0.8s linear infinite;
}

@keyframes spin-b-pu427tn7tz {
    to { transform: rotate(360deg); }
}

/* Messages */
.error-message[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    color: #dc2626;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.error-message[b-pu427tn7tz]  .rzi {
    font-size: 1.25rem !important;
    color: #dc2626 !important;
}

.success-message[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    color: #16a34a;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.success-message[b-pu427tn7tz]  .rzi {
    font-size: 1.25rem !important;
    color: #16a34a !important;
}

/* Step Indicators */
.step-indicator[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f1f5f9;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid #94a3b8;
}

.step-indicator.step-active[b-pu427tn7tz] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-left-color: #3b82f6;
}

.step-indicator.step-complete[b-pu427tn7tz] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-left-color: #22c55e;
}

.step-number[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.875rem;
}

.step-complete .step-number[b-pu427tn7tz] {
    background: #22c55e;
}

.step-text[b-pu427tn7tz] {
    font-weight: 600;
    color: #1e293b;
    font-size: 1rem;
}

.step-check[b-pu427tn7tz]  .rzi {
    font-size: 1.25rem !important;
    color: #22c55e !important;
    margin-left: auto;
}

/* Fade-in Animation */
.fade-in[b-pu427tn7tz] {
    animation: fadeIn-b-pu427tn7tz 0.4s ease-out;
}

@keyframes fadeIn-b-pu427tn7tz {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* AI Analyzing Indicator */
.analyzing-indicator[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 0.75rem;
    color: #0369a1;
    font-weight: 500;
    margin-top: 1rem;
}

/* Photo Metadata Info */
.metadata-info[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: 0.5rem;
    color: #854d0e;
    font-size: 0.875rem;
    margin-top: 1rem;
}

.metadata-info[b-pu427tn7tz]  .rzi {
    font-size: 1.25rem !important;
    color: #ca8a04 !important;
}

/* AI Results Section */
.ai-results-section[b-pu427tn7tz] {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #bbf7d0;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.ai-results-header[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #166534;
    margin-bottom: 0.25rem;
}

.ai-results-header[b-pu427tn7tz]  .rzi {
    font-size: 1.25rem !important;
    color: #22c55e !important;
}


.ai-results-hint[b-pu427tn7tz] {
    font-size: 0.875rem;
    color: #166534;
    opacity: 0.8;
    margin: 0;
}

/* ===========================================
   LOCATION SOURCE INDICATOR
   Tags showing where location data came from
   =========================================== */

.location-source-indicator[b-pu427tn7tz] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.source-badge[b-pu427tn7tz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    background: #f3f4f6;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.source-badge[b-pu427tn7tz]  .rzi {
    font-size: 0.8rem !important;
}

.source-badge.disabled[b-pu427tn7tz] {
    opacity: 0.5;
}

.source-badge.active[b-pu427tn7tz] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-color: #059669;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.source-badge.source-profile.active[b-pu427tn7tz] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-color: #7c3aed;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.source-badge.source-gps.active[b-pu427tn7tz] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.source-badge.source-manual.active[b-pu427tn7tz] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #d97706;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* Location Actions */
.location-actions[b-pu427tn7tz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}

.location-btn[b-pu427tn7tz] {
    flex: 0 0 auto;
}

/* Responsive adjustments for steps */
@media (max-width: 640px) {
    .step-indicator[b-pu427tn7tz] {
        padding: 0.5rem 0.75rem;
    }
    
    .step-number[b-pu427tn7tz] {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
    
    .step-text[b-pu427tn7tz] {
        font-size: 0.875rem;
    }
    
    .location-actions[b-pu427tn7tz] {
        flex-direction: column;
    }
    
    .location-btn[b-pu427tn7tz] {
        width: 100%;
    }
}

.limit-message-box[b-pu427tn7tz] {
    background: linear-gradient(135deg, #f0f7ff 0%, #e0e7ff 100%);
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(37, 99, 235, 0.08);
    padding: 48px 32px 40px 32px;
    margin: 40px auto 32px auto;
    max-width: 520px;
    text-align: center;
    border: 2px solid #2563eb;
}

.limit-icon[b-pu427tn7tz] {
    font-size: 2.5rem;
    color: #f59e42;
    margin-bottom: 16px;
}

.limit-title[b-pu427tn7tz] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 1.5rem;
}

.limit-description[b-pu427tn7tz] {
    font-size: 1rem;
    color: #334155;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    text-align: center;
}

.limit-actions[b-pu427tn7tz] {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 8px;
}

/* Enhanced Limit Icon */
.limit-icon-container[b-pu427tn7tz] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
}

.limit-icon-bg[b-pu427tn7tz] {
    font-size: 4rem !important;
    color: #94a3b8 !important;
}

.limit-icon-overlay[b-pu427tn7tz] {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 2rem !important;
    color: #ef4444 !important;
    background: white;
    border-radius: 50%;
}

/* Quota Display in Limit Box */
.limit-quota-display[b-pu427tn7tz] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.quota-visual[b-pu427tn7tz] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.quota-current[b-pu427tn7tz] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ef4444;
}

.quota-divider[b-pu427tn7tz] {
    font-size: 1.5rem;
    color: #94a3b8;
}

.quota-max[b-pu427tn7tz] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #64748b;
}

.quota-label[b-pu427tn7tz] {
    font-size: 0.9rem;
    color: #64748b;
    margin-left: 0.5rem;
}

.quota-progress[b-pu427tn7tz] {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.quota-progress-fill[b-pu427tn7tz] {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #dc2626);
    border-radius: 4px;
}

.quota-status[b-pu427tn7tz] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #dc2626;
}

/* Limit Options Grid */
.limit-options[b-pu427tn7tz] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.limit-option[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.limit-option:hover[b-pu427tn7tz] {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.limit-option-primary[b-pu427tn7tz] {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: #93c5fd;
}

.limit-option-primary:hover[b-pu427tn7tz] {
    border-color: #60a5fa;
}

.option-icon[b-pu427tn7tz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #3b82f6;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.option-icon[b-pu427tn7tz]  .rzi {
    font-size: 1.5rem !important;
    color: white !important;
}

.option-icon-secondary[b-pu427tn7tz] {
    background: #64748b;
}

.option-icon-tertiary[b-pu427tn7tz] {
    background: #8b5cf6;
}

.option-content[b-pu427tn7tz] {
    flex: 1;
    text-align: left;
}

.option-content h4[b-pu427tn7tz] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.option-content p[b-pu427tn7tz] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

@media (max-width: 640px) {
    .limit-option[b-pu427tn7tz] {
        flex-direction: column;
        text-align: center;
    }
    
    .option-content[b-pu427tn7tz] {
        text-align: center;
    }
    
    .limit-option[b-pu427tn7tz]  .rz-button {
        width: 100%;
    }
}

/* ===========================================
   VALID/FILLED FORM FIELD STYLES
   Green borders for fields with values
   =========================================== */

/* Radzen TextBox - green border when has value */
[b-pu427tn7tz] .rz-textbox:not(:placeholder-shown),
[b-pu427tn7tz] .rz-textbox.rz-state-filled {
    border-color: #22c55e !important;
}

/* Radzen TextArea - green border when has value */
[b-pu427tn7tz] .rz-textarea:not(:placeholder-shown) {
    border-color: #22c55e !important;
}

/* Radzen Dropdown - green border when has selection */
[b-pu427tn7tz] .rz-dropdown.rz-state-filled,
[b-pu427tn7tz] .rz-dropdown:has(.rz-dropdown-label:not(:empty)) {
    border-color: #22c55e !important;
}

/* Green icon for filled dropdowns */
[b-pu427tn7tz] .rz-dropdown.rz-state-filled .rz-dropdown-trigger-icon {
    color: #22c55e;
}

/* Native input fields - green when has value */
.form-input:not(:placeholder-shown)[b-pu427tn7tz] {
    border-color: #22c55e !important;
}

/* Icon color change for filled fields */
.input-icon-wrapper:has(input:not(:placeholder-shown)) .input-icon[b-pu427tn7tz] {
    color: #22c55e;
}

/* Radzen NumericTextBox when has value */
[b-pu427tn7tz] .rz-spinner:has(input:not(:placeholder-shown)) {
    border-color: #22c55e !important;
}

/* LocationPicker has-value state */
[b-pu427tn7tz] .location-display.has-value {
    border-color: #22c55e !important;
}

[b-pu427tn7tz] .location-display.has-value .location-icon {
    color: #22c55e !important;
}
/* /Components/Pages/RegisterPetWizard.razor.rz.scp.css */
/* Register Pet Wizard - Modern Step-by-Step Flow */

.register-wizard-page[b-w2cuoufqf6] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 2rem 1rem;
}

/* Wizard Container */
.wizard-container[b-w2cuoufqf6] {
    max-width: 800px;
    margin: 0 auto;
}

/* Header */
.wizard-header[b-w2cuoufqf6] {
    text-align: center;
    margin-bottom: 2rem;
}

.wizard-header .header-content h1[b-w2cuoufqf6] {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.wizard-header .header-content h1 .rzi[b-w2cuoufqf6] {
    color: #6366f1;
    font-size: 2.5rem;
}

.wizard-header .header-content p[b-w2cuoufqf6] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

.wizard-header .header-progress[b-w2cuoufqf6] {
    margin-top: 1.5rem;
}

.wizard-header .progress-text[b-w2cuoufqf6] {
    font-size: 0.875rem;
    color: #6366f1;
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

.wizard-header .progress-bar[b-w2cuoufqf6] {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    max-width: 300px;
    margin: 0 auto;
}

.wizard-header .progress-fill[b-w2cuoufqf6] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Step Navigation */
.step-nav[b-w2cuoufqf6] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.step-nav-item[b-w2cuoufqf6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: default;
    transition: all 0.3s ease;
    min-width: 100px;
}

.step-nav-item.clickable[b-w2cuoufqf6] {
    cursor: pointer;
}

.step-nav-item.clickable:hover[b-w2cuoufqf6] {
    border-color: #6366f1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.step-nav-item.current[b-w2cuoufqf6] {
    border-color: #6366f1;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.step-nav-item.current .step-nav-number[b-w2cuoufqf6],
.step-nav-item.current .step-nav-title[b-w2cuoufqf6] {
    color: white;
}

.step-nav-item.complete[b-w2cuoufqf6] {
    border-color: #10b981;
    background: #ecfdf5;
}

.step-nav-item.complete .step-nav-number[b-w2cuoufqf6] {
    background: #10b981;
    color: white;
}

.step-nav-number[b-w2cuoufqf6] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.step-nav-item.current .step-nav-number[b-w2cuoufqf6] {
    background: rgba(255,255,255,0.2);
}

.step-nav-title[b-w2cuoufqf6] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Wizard Content */
.wizard-content[b-w2cuoufqf6] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    min-height: 400px;
}

.wizard-step[b-w2cuoufqf6] {
    display: none;
    padding: 3rem 2rem;
    animation: fadeIn-b-w2cuoufqf6 0.4s ease;
}

.wizard-step.active[b-w2cuoufqf6] {
    display: block;
}

@keyframes fadeIn-b-w2cuoufqf6 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-content[b-w2cuoufqf6] {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.step-content h2[b-w2cuoufqf6] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem;
}

.step-description[b-w2cuoufqf6] {
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 2rem;
}

/* Step 1: Name Input */
.step-icon-large[b-w2cuoufqf6] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.step-icon-large .rzi[b-w2cuoufqf6] {
    font-size: 2.5rem;
    color: white;
}

.name-input-wrapper[b-w2cuoufqf6] {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.name-input[b-w2cuoufqf6] {
    width: 100%;
    padding: 1.25rem 1.25rem 1.25rem 3.5rem;
    font-size: 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    outline: none;
    transition: all 0.3s ease;
    text-align: center;
}

.name-input:focus[b-w2cuoufqf6] {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.name-input[b-w2cuoufqf6]::placeholder {
    color: #94a3b8;
}

.name-icon[b-w2cuoufqf6] {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6366f1;
}

.name-preview[b-w2cuoufqf6] {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
}

.preview-label[b-w2cuoufqf6] {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.preview-name[b-w2cuoufqf6] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #6366f1;
}

/* Step 2: Photo Upload */
.photo-step .step-content[b-w2cuoufqf6] {
    max-width: 600px;
}

.photo-grid[b-w2cuoufqf6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.photo-card[b-w2cuoufqf6] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.photo-input-hidden[b-w2cuoufqf6] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.photo-card-content[b-w2cuoufqf6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.photo-card:hover .photo-card-content[b-w2cuoufqf6] {
    border-color: #6366f1;
    background: #f5f3ff;
}

.photo-required .photo-card-content[b-w2cuoufqf6] {
    border-color: #6366f1;
    border-style: solid;
}

.photo-card.uploaded .photo-card-content[b-w2cuoufqf6] {
    border: none;
    background: none;
}

.photo-placeholder[b-w2cuoufqf6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
}

.photo-placeholder .add-icon[b-w2cuoufqf6] {
    font-size: 2.5rem;
    color: #6366f1;
}

.photo-label[b-w2cuoufqf6] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
}

.photo-required-badge[b-w2cuoufqf6] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.75rem;
    background: #6366f1;
    color: white;
    border-radius: 20px;
    font-weight: 600;
}

.photo-optional-badge[b-w2cuoufqf6] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.5rem;
    background: #e2e8f0;
    color: #64748b;
    border-radius: 20px;
    font-weight: 600;
}

.photo-preview[b-w2cuoufqf6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-overlay[b-w2cuoufqf6] {
    position: absolute;
    inset: 0;
    background: rgba(99, 102, 241, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 0.875rem;
}

.photo-card:hover .photo-overlay[b-w2cuoufqf6] {
    opacity: 1;
}

.photo-overlay .check-icon[b-w2cuoufqf6] {
    font-size: 2rem;
}

.photo-tips[b-w2cuoufqf6] {
    background: #fef3c7;
    padding: 1.25rem;
    border-radius: 12px;
    text-align: left;
}

.photo-tips h4[b-w2cuoufqf6] {
    margin: 0 0 0.75rem;
    color: #92400e;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.photo-tips ul[b-w2cuoufqf6] {
    margin: 0;
    padding-left: 1.25rem;
    color: #78350f;
    font-size: 0.875rem;
}

.photo-tips li[b-w2cuoufqf6] {
    margin-bottom: 0.25rem;
}

/* Analyzing Overlay */
.analyzing-overlay[b-w2cuoufqf6] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 20px;
}

.analyzing-content[b-w2cuoufqf6] {
    text-align: center;
}

.analyzing-content h3[b-w2cuoufqf6] {
    margin: 1rem 0 0.5rem;
    color: #6366f1;
    font-size: 1.25rem;
}

.analyzing-content p[b-w2cuoufqf6] {
    color: #64748b;
    margin: 0;
}

/* Step 3: Details */
.details-step .step-content[b-w2cuoufqf6] {
    max-width: 600px;
    text-align: left;
}

.ai-banner[b-w2cuoufqf6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: #6366f1;
    flex-wrap: wrap;
}

.ai-banner .rzi[b-w2cuoufqf6] {
    font-size: 1.25rem;
}

.details-grid[b-w2cuoufqf6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.details-grid.nested[b-w2cuoufqf6] {
    margin-top: 1rem;
}

.detail-field[b-w2cuoufqf6] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.detail-field.full-width[b-w2cuoufqf6] {
    grid-column: 1 / -1;
}

.field-label[b-w2cuoufqf6] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-input[b-w2cuoufqf6] {
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9375rem;
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
    background: white;
}

.field-input:focus[b-w2cuoufqf6] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.more-details[b-w2cuoufqf6] {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
}

.more-details summary[b-w2cuoufqf6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #6366f1;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.more-details summary:hover[b-w2cuoufqf6] {
    background: #f1f5f9;
}

.more-details[open] summary[b-w2cuoufqf6] {
    border-radius: 10px 10px 0 0;
}

/* Step 4: Owner */
.owner-step .step-content[b-w2cuoufqf6] {
    max-width: 600px;
    text-align: left;
}

.prepopulated-banner[b-w2cuoufqf6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #ecfdf5;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: #047857;
}

.prepopulated-banner .rzi[b-w2cuoufqf6] {
    font-size: 1.25rem;
}

.owner-grid[b-w2cuoufqf6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.owner-field[b-w2cuoufqf6] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.owner-field.full-width[b-w2cuoufqf6] {
    grid-column: 1 / -1;
}

.field-label.required[b-w2cuoufqf6]::after {
    content: " *";
    color: #ef4444;
}

.field-textarea[b-w2cuoufqf6] {
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9375rem;
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
    resize: vertical;
    font-family: inherit;
}

.field-textarea:focus[b-w2cuoufqf6] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Wizard Navigation */
.wizard-nav[b-w2cuoufqf6] {
    padding: 1.5rem 2rem;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.error-banner[b-w2cuoufqf6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.nav-buttons[b-w2cuoufqf6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-back[b-w2cuoufqf6] {
    min-width: 120px;
}

.btn-next[b-w2cuoufqf6], .btn-submit[b-w2cuoufqf6] {
    min-width: 160px;
}

/* Validation */
.validation-error[b-w2cuoufqf6] {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Limit Overlay */
.limit-overlay[b-w2cuoufqf6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.limit-card[b-w2cuoufqf6] {
    text-align: center;
    padding: 3rem;
    max-width: 400px;
}

.limit-icon-wrapper[b-w2cuoufqf6] {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
}

.limit-icon-wrapper .limit-icon[b-w2cuoufqf6] {
    font-size: 4rem;
    color: #64748b;
}

.limit-icon-wrapper .limit-badge[b-w2cuoufqf6] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    background: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 3px solid white;
}

.limit-card h2[b-w2cuoufqf6] {
    margin: 0 0 0.75rem;
    color: #1e293b;
}

.limit-card p[b-w2cuoufqf6] {
    color: #64748b;
    margin-bottom: 1.5rem;
}

.limit-actions[b-w2cuoufqf6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Success Overlay */
.success-overlay[b-w2cuoufqf6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.success-card[b-w2cuoufqf6] {
    text-align: center;
    padding: 3rem;
    max-width: 450px;
}

.success-animation[b-w2cuoufqf6] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
}

.success-circle[b-w2cuoufqf6] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn-b-w2cuoufqf6 0.5s ease;
}

.success-check[b-w2cuoufqf6] {
    font-size: 3.5rem;
    color: white;
}

.success-rings[b-w2cuoufqf6] {
    position: absolute;
    inset: 0;
}

.ring[b-w2cuoufqf6] {
    position: absolute;
    inset: 0;
    border: 2px solid #10b981;
    border-radius: 50%;
    animation: ringPulse-b-w2cuoufqf6 1.5s ease-out infinite;
}

.ring-2[b-w2cuoufqf6] { animation-delay: 0.3s; }
.ring-3[b-w2cuoufqf6] { animation-delay: 0.6s; }

@keyframes scaleIn-b-w2cuoufqf6 {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes ringPulse-b-w2cuoufqf6 {
    from { transform: scale(1); opacity: 0.6; }
    to { transform: scale(1.5); opacity: 0; }
}

.success-card h2[b-w2cuoufqf6] {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
    color: #1e293b;
}

.success-card > p[b-w2cuoufqf6] {
    color: #64748b;
    margin-bottom: 1.5rem;
}

.success-features[b-w2cuoufqf6] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.success-features .feature[b-w2cuoufqf6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #047857;
}

.success-features .feature .rzi[b-w2cuoufqf6] {
    font-size: 1.5rem;
}

.success-features .feature span[b-w2cuoufqf6] {
    font-size: 0.75rem;
    font-weight: 600;
}

.success-actions[b-w2cuoufqf6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Responsive */
@media (max-width: 640px) {
    .register-wizard-page[b-w2cuoufqf6] {
        padding: 1rem 0.5rem;
    }

    .wizard-header .header-content h1[b-w2cuoufqf6] {
        font-size: 1.5rem;
    }

    .step-nav[b-w2cuoufqf6] {
        gap: 0.25rem;
    }

    .step-nav-item[b-w2cuoufqf6] {
        padding: 0.75rem;
        min-width: 70px;
    }

    .step-nav-title[b-w2cuoufqf6] {
        font-size: 0.625rem;
    }

    .wizard-step[b-w2cuoufqf6] {
        padding: 2rem 1rem;
    }

    .step-content h2[b-w2cuoufqf6] {
        font-size: 1.5rem;
    }

    .photo-grid[b-w2cuoufqf6] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .details-grid[b-w2cuoufqf6],
    .owner-grid[b-w2cuoufqf6] {
        grid-template-columns: 1fr;
    }

    .nav-buttons[b-w2cuoufqf6] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .btn-back[b-w2cuoufqf6], .btn-next[b-w2cuoufqf6], .btn-submit[b-w2cuoufqf6] {
        min-width: unset;
        flex: 1;
    }

    .success-features[b-w2cuoufqf6] {
        gap: 1rem;
    }
}

/* Fade In Animation */
.fade-in[b-w2cuoufqf6] {
    animation: fadeIn-b-w2cuoufqf6 0.4s ease;
}

/* Focus visible for accessibility */
.step-nav-item:focus-visible[b-w2cuoufqf6],
.photo-card-content:focus-visible[b-w2cuoufqf6],
.field-input:focus-visible[b-w2cuoufqf6],
.name-input:focus-visible[b-w2cuoufqf6] {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}
/* /Components/Pages/ReportFoundPet.razor.rz.scp.css */
/* Container */
.report-found-container[b-45m33tw9nl] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Placeholder text styling - lighter grey */
[b-45m33tw9nl] .rz-textbox::placeholder,
[b-45m33tw9nl] .rz-textarea::placeholder,
[b-45m33tw9nl] input::placeholder,
[b-45m33tw9nl] textarea::placeholder {
    color: #adb5bd !important;
    opacity: 1;
}

[b-45m33tw9nl] .rz-textbox::-webkit-input-placeholder,
[b-45m33tw9nl] .rz-textarea::-webkit-input-placeholder {
    color: #adb5bd !important;
}

[b-45m33tw9nl] .rz-textbox::-moz-placeholder,
[b-45m33tw9nl] .rz-textarea::-moz-placeholder {
    color: #adb5bd !important;
}

/* Location Source Indicator */
.location-source-indicator[b-45m33tw9nl] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.source-badge[b-45m33tw9nl] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    background: #f3f4f6;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.source-badge[b-45m33tw9nl]  .rz-icon {
    font-size: 0.8rem !important;
}

.source-badge.active[b-45m33tw9nl] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-color: #059669;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.source-badge.source-photo.active[b-45m33tw9nl] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-color: #7c3aed;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.source-badge.source-gps.active[b-45m33tw9nl] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.source-badge.source-manual.active[b-45m33tw9nl] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #d97706;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* Optional label styling */
.optional-label[b-45m33tw9nl] {
    font-weight: 400;
    font-size: 0.85em;
    color: #9ca3af;
}

/* Populated form fields - green border for fields with values */
[b-45m33tw9nl] .rz-textbox:not(:placeholder-shown),
[b-45m33tw9nl] .rz-dropdown.rz-state-filled,
[b-45m33tw9nl] .rz-dropdown:has(.rz-dropdown-label:not(:empty)),
[b-45m33tw9nl] .rz-textarea:not(:placeholder-shown) {
    border-color: #22c55e !important;
}

/* Ensure green border persists after blur for filled fields */
[b-45m33tw9nl] .rz-textbox:not(:placeholder-shown):not(:focus),
[b-45m33tw9nl] .rz-textarea:not(:placeholder-shown):not(:focus) {
    border-color: #22c55e !important;
}

/* Green icon for filled dropdowns */
[b-45m33tw9nl] .rz-dropdown.rz-state-filled .rz-dropdown-trigger-icon,
[b-45m33tw9nl] .rz-dropdown:has(.rz-dropdown-label:not(:empty)) .rz-dropdown-trigger-icon {
    color: #22c55e;
}

/* Header */
.report-header[b-45m33tw9nl] {
    text-align: center;
    margin-bottom: 2rem;
}

.report-title[b-45m33tw9nl] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

.report-subtitle[b-45m33tw9nl] {
    font-size: 1.1rem;
    color: #6b7280;
}

/* Content Layout */
.report-content[b-45m33tw9nl] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 992px) {
    .report-content[b-45m33tw9nl] {
        grid-template-columns: 1fr;
    }
    
    .sidebar[b-45m33tw9nl] {
        display: none;
    }
}

/* Form Card */
.report-form-card[b-45m33tw9nl] {
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.form-header[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.form-header-icon[b-45m33tw9nl] {
    font-size: 1.5rem;
    color: #1b6ec2;
}

.form-header h2[b-45m33tw9nl] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: #1a1a2e;
}

/* Form Sections */
.form-section[b-45m33tw9nl] {
    margin-bottom: 1.5rem;
}

.form-label[b-45m33tw9nl] {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-label.required[b-45m33tw9nl]::after {
    content: " *";
    color: #dc2626;
}

.form-hint[b-45m33tw9nl] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Upload Zone */
.upload-zone[b-45m33tw9nl] {
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    background: #fafafa;
}

.upload-zone:hover[b-45m33tw9nl],
.upload-zone.drag-over[b-45m33tw9nl] {
    border-color: #1b6ec2;
    background: #f0f7ff;
}

.upload-zone.has-image[b-45m33tw9nl] {
    padding: 1rem;
    border-style: solid;
    border-color: #22c55e;
    background: #f0fdf4;
}

.upload-placeholder[b-45m33tw9nl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.upload-icon[b-45m33tw9nl] {
    font-size: 3rem;
    color: #1b6ec2;
}

.upload-text[b-45m33tw9nl] {
    font-weight: 500;
    color: #1b6ec2;
}

.upload-hint[b-45m33tw9nl] {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Hidden file inputs container */
.hidden-inputs[b-45m33tw9nl] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.file-input[b-45m33tw9nl],
.file-input input[type="file"][b-45m33tw9nl],
.hidden-inputs input[type="file"][b-45m33tw9nl] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Ensure the InputFile wrapper is also hidden */
[b-45m33tw9nl] .file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Upload Buttons for Camera/Gallery */
.upload-buttons[b-45m33tw9nl] {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.upload-btn[b-45m33tw9nl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    position: relative;
    z-index: 2;
}

.upload-btn-camera[b-45m33tw9nl] {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.upload-btn-camera:hover[b-45m33tw9nl] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.upload-btn-gallery[b-45m33tw9nl] {
    background: white;
    color: #374151;
    border-color: #d1d5db;
}

.upload-btn-gallery:hover[b-45m33tw9nl] {
    background: #f9fafb;
    border-color: #3b82f6;
    color: #1d4ed8;
}

@media (max-width: 480px) {
    .upload-buttons[b-45m33tw9nl] {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .upload-btn[b-45m33tw9nl] {
        width: 100%;
        justify-content: center;
    }
}

.image-preview-wrapper[b-45m33tw9nl] {
    position: relative;
    display: inline-block;
}

.image-preview[b-45m33tw9nl] {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    object-fit: contain;
}

.remove-image-btn[b-45m33tw9nl] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #dc2626;
    color: white;
    border: 2px solid white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.remove-image-btn:hover[b-45m33tw9nl] {
    background: #b91c1c;
}

/* Analyzing Indicator */
.analyzing-indicator[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #f0f7ff;
    border-radius: 8px;
    color: #1b6ec2;
    font-weight: 500;
}

/* Info Box */
.info-box[b-45m33tw9nl] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid #a7f3d0;
}

.info-icon[b-45m33tw9nl] {
    color: #059669;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-content strong[b-45m33tw9nl] {
    display: block;
    color: #047857;
    margin-bottom: 0.25rem;
}

.info-content p[b-45m33tw9nl] {
    color: #065f46;
    margin: 0;
    font-size: 0.9rem;
}

/* Tips Card */
.tips-card[b-45m33tw9nl] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
}

.tips-card h4[b-45m33tw9nl] {
    margin: 0 0 0.75rem 0;
    color: #92400e;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tips-list[b-45m33tw9nl] {
    margin: 0;
    padding-left: 1.25rem;
    color: #78350f;
    font-size: 0.9rem;
}

.tips-list li[b-45m33tw9nl] {
    margin-bottom: 0.35rem;
}

.tips-list li:last-child[b-45m33tw9nl] {
    margin-bottom: 0;
}

/* Verification Section */
.verification-section[b-45m33tw9nl] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.verification-intro[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0369a1;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

.verification-actions[b-45m33tw9nl] {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.verify-btn[b-45m33tw9nl] {
    min-width: 180px;
}

.resend-btn[b-45m33tw9nl] {
    min-width: 120px;
}

.code-entry-group[b-45m33tw9nl] {
    max-width: 300px;
    margin: 1rem auto;
}

.verification-hint[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 1rem;
}

@media (max-width: 480px) {
    .verification-actions[b-45m33tw9nl] {
        flex-direction: column;
    }
    
    .verify-btn[b-45m33tw9nl],
    .resend-btn[b-45m33tw9nl] {
        width: 100%;
    }
}

/* Verification Dialog */
.verification-dialog-overlay[b-45m33tw9nl] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.verification-dialog[b-45m33tw9nl] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 450px;
    width: 100%;
    overflow: hidden;
    animation: dialogSlideIn-b-45m33tw9nl 0.3s ease;
}

@keyframes dialogSlideIn-b-45m33tw9nl {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dialog-header[b-45m33tw9nl] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}

.dialog-header h3[b-45m33tw9nl] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    flex: 1;
}

.dialog-icon[b-45m33tw9nl] {
    font-size: 1.5rem;
}

.dialog-close[b-45m33tw9nl] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.dialog-close:hover[b-45m33tw9nl] {
    background: rgba(255, 255, 255, 0.3);
}

.dialog-content[b-45m33tw9nl] {
    padding: 1.5rem;
}

.dialog-intro[b-45m33tw9nl] {
    color: #4b5563;
    margin: 0 0 1.25rem 0;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dialog-form[b-45m33tw9nl] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dialog-actions[b-45m33tw9nl] {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dialog-hint[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 1rem;
}

/* Input with icon inside the border */
.input-with-icon[b-45m33tw9nl] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.input-with-icon:focus-within[b-45m33tw9nl] {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}

.input-with-icon .field-icon[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 100%;
    color: #6b7280;
    font-size: 1.2rem;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    padding: 0.75rem 0;
}

.input-with-icon .icon-input[b-45m33tw9nl],
.input-with-icon[b-45m33tw9nl]  .rz-textbox {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 0.75rem 1rem !important;
    box-shadow: none !important;
    min-height: 44px;
}

.input-with-icon[b-45m33tw9nl]  .rz-textbox:focus {
    box-shadow: none !important;
}

/* Code input specific styling */
.code-input-wrapper[b-45m33tw9nl]  .rz-textbox {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 8px;
}

/* Join checkbox - two column grid layout */
.join-checkbox[b-45m33tw9nl] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.875rem;
    align-items: start;
    cursor: pointer;
    transition: all 0.2s ease;
}

.join-checkbox:hover[b-45m33tw9nl] {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.join-checkbox:has(input:checked)[b-45m33tw9nl] {
    background: #f5f3ff;
    border-color: #667eea;
}

.join-checkbox[b-45m33tw9nl]  .rz-chkbox {
    margin-top: 1px;
}

.join-label[b-45m33tw9nl] {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    gap: 0.25rem;
}

.join-label strong[b-45m33tw9nl] {
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.join-hint[b-45m33tw9nl] {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Security Code Component Styling */
.security-code-group[b-45m33tw9nl] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.security-code-group .form-label[b-45m33tw9nl] {
    align-self: flex-start;
    margin-bottom: 1rem;
}

.verification-security-code[b-45m33tw9nl] {
    justify-content: center;
}

[b-45m33tw9nl] .verification-security-code .rz-security-code-input {
    width: 48px !important;
    height: 56px !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

[b-45m33tw9nl] .verification-security-code .rz-security-code-input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
}

/* Dialog buttons - rounded like header buttons */
.dialog-btn-primary[b-45m33tw9nl] {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.025em !important;
    border-radius: 50px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4) !important;
}

.dialog-btn-primary:hover:not(:disabled)[b-45m33tw9nl] {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
    transform: translateY(-2px);
}

.dialog-btn-primary:disabled[b-45m33tw9nl] {
    opacity: 0.6 !important;
    cursor: not-allowed;
    transform: none !important;
}

.dialog-btn-secondary[b-45m33tw9nl] {
    width: 100%;
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.025em !important;
    border-radius: 50px !important;
    transition: all 0.2s ease !important;
}

.dialog-btn-secondary:hover:not(:disabled)[b-45m33tw9nl] {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px);
}

/* Verified contact info display */
.verified-contact-info[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 8px;
    color: #166534;
    font-size: 0.9rem;
}

.verified-contact-info .verified-icon[b-45m33tw9nl] {
    color: #22c55e;
    font-size: 1.25rem;
}

/* Uploaded photo preview in sidebar */
.uploaded-preview[b-45m33tw9nl] {
    border-color: #22c55e !important;
}

.uploaded-badge[b-45m33tw9nl] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}

/* AI Results Section */
.ai-results-section[b-45m33tw9nl] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid #93c5fd;
}

.ai-results-header[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1d4ed8;
    font-weight: 600;
}

.ai-results-hint[b-45m33tw9nl] {
    margin: 0.5rem 0 0 0;
    font-size: 0.85rem;
    color: #3b82f6;
}

/* Form Grid */
.form-grid[b-45m33tw9nl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group[b-45m33tw9nl] {
    display: flex;
    flex-direction: column;
}

.form-group.full-width[b-45m33tw9nl] {
    grid-column: 1 / -1;
}

/* ===========================================
   INPUT GROUP WITH ICONS
   Styled inputs with left-side icons
   =========================================== */

.input-group-icon[b-45m33tw9nl] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-group-icon .form-input[b-45m33tw9nl],
.input-group-icon[b-45m33tw9nl]  .rz-textbox,
.input-group-icon[b-45m33tw9nl]  .rz-dropdown,
.input-group-icon[b-45m33tw9nl]  .rz-textarea {
    padding-left: 2.75rem !important;
    width: 100%;
}

.input-group-icon .input-icon[b-45m33tw9nl] {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
}

.input-group-icon .input-icon[b-45m33tw9nl]  .rzi {
    font-size: 1.125rem !important;
}

/* Green icon when field has value */
.input-group-icon:has(.rz-textbox:not(:placeholder-shown)) .input-icon[b-45m33tw9nl],
.input-group-icon:has(.rz-dropdown.rz-state-filled) .input-icon[b-45m33tw9nl],
.input-group-icon:has(.rz-textarea:not(:placeholder-shown)) .input-icon[b-45m33tw9nl],
.input-group-icon:has(.form-input:not(:placeholder-shown)) .input-icon[b-45m33tw9nl] {
    color: #22c55e;
}

/* Radzen component overrides for icon inputs */
.input-group-icon[b-45m33tw9nl]  .rz-textbox,
.input-group-icon[b-45m33tw9nl]  .rz-dropdown {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: white;
    min-height: 44px;
}

.input-group-icon[b-45m33tw9nl]  .rz-textbox:focus,
.input-group-icon[b-45m33tw9nl]  .rz-dropdown:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Green border when filled */
.input-group-icon[b-45m33tw9nl]  .rz-textbox:not(:placeholder-shown),
.input-group-icon[b-45m33tw9nl]  .rz-dropdown.rz-state-filled {
    border-color: #22c55e !important;
}

@media (max-width: 640px) {
    .form-grid[b-45m33tw9nl] {
        grid-template-columns: 1fr;
    }
}

/* Location Section */
.location-section[b-45m33tw9nl] {
    background: #f9fafb;
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.location-details-grid[b-45m33tw9nl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .location-details-grid[b-45m33tw9nl] {
        grid-template-columns: 1fr;
    }
}

.location-status[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    color: #059669;
    font-size: 0.9rem;
}

.location-btn[b-45m33tw9nl] {
    margin-top: 0.75rem;
}

/* Behavior Toggles */
.behavior-toggles[b-45m33tw9nl] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 12px;
}

.toggle-item[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toggle-item label[b-45m33tw9nl] {
    cursor: pointer;
    color: #374151;
}

/* Contact Section */
.contact-section[b-45m33tw9nl] {
    background: #fef3c7;
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid #fcd34d;
}

/* Form Actions */
.form-actions[b-45m33tw9nl] {
    margin-top: 2rem;
}

.submit-btn[b-45m33tw9nl] {
    width: 100%;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 2rem;
}

/* Sidebar */
.sidebar[b-45m33tw9nl] {
    position: sticky;
    top: 2rem;
}

.example-card[b-45m33tw9nl] {
    padding: 1.5rem;
    border-radius: 12px;
}

.example-card h4[b-45m33tw9nl] {
    margin: 0 0 1rem 0;
    font-weight: 600;
}

.example-image-container[b-45m33tw9nl] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.example-image[b-45m33tw9nl] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid #22c55e;
}

.example-badge[b-45m33tw9nl] {
    margin-top: 0.75rem;
    padding: 0.35rem 1rem;
    background: #22c55e;
    color: white;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.example-caption[b-45m33tw9nl] {
    text-align: center;
    color: #6b7280;
    font-size: 0.85rem;
    margin: 0.5rem 0 0 0;
}

/* Success State - Enhanced Design */
.success-container[b-45m33tw9nl] {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 1rem;
}

.success-card-wrapper[b-45m33tw9nl] {
    position: relative;
    overflow: hidden;
}

/* Animated Background Shapes */
.success-bg-shapes[b-45m33tw9nl] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.shape[b-45m33tw9nl] {
    position: absolute;
    border-radius: 50%;
    opacity: 0.12;
    animation: float-b-45m33tw9nl 6s ease-in-out infinite;
}

.shape-1[b-45m33tw9nl] {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #22c55e, #10b981);
    top: -50px;
    right: -50px;
    animation-delay: 0s;
}

.shape-2[b-45m33tw9nl] {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    bottom: -30px;
    left: -30px;
    animation-delay: 2s;
}

.shape-3[b-45m33tw9nl] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    top: 50%;
    left: 10%;
    animation-delay: 4s;
}

@keyframes float-b-45m33tw9nl {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

.success-card[b-45m33tw9nl] {
    position: relative;
    z-index: 1;
    padding: 2.5rem 2rem;
    text-align: center;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fdf9 100%);
    box-shadow: 0 10px 40px rgba(34, 197, 94, 0.15), 0 0 0 1px rgba(34, 197, 94, 0.1);
}

.success-content[b-45m33tw9nl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* Animated Checkmark Icon */
.success-icon-wrapper[b-45m33tw9nl] {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon-bg[b-45m33tw9nl] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
    animation: pulse-success-b-45m33tw9nl 2s ease-in-out infinite;
}

.success-icon-ring[b-45m33tw9nl] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid rgba(34, 197, 94, 0.3);
    animation: ring-expand-b-45m33tw9nl 2s ease-out infinite;
}

@keyframes pulse-success-b-45m33tw9nl {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

@keyframes ring-expand-b-45m33tw9nl {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

.success-checkmark[b-45m33tw9nl] {
    position: relative;
    z-index: 2;
    color: white;
    animation: checkmark-pop-b-45m33tw9nl 0.5s ease-out;
}

[b-45m33tw9nl] .success-checkmark .rzi {
    font-size: 3rem !important;
}

@keyframes checkmark-pop-b-45m33tw9nl {
    0% { transform: scale(0) rotate(-45deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Confetti Animation */
.confetti-container[b-45m33tw9nl] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    pointer-events: none;
    overflow: hidden;
}

.confetti[b-45m33tw9nl] {
    position: absolute;
    font-size: 1.5rem;
    animation: confetti-fall-b-45m33tw9nl 4s ease-in-out infinite;
}

.confetti-1[b-45m33tw9nl] { left: 5%; animation-delay: 0s; }
.confetti-2[b-45m33tw9nl] { left: 20%; animation-delay: 0.8s; }
.confetti-3[b-45m33tw9nl] { left: 40%; animation-delay: 0.3s; }
.confetti-4[b-45m33tw9nl] { left: 60%; animation-delay: 1.2s; }
.confetti-5[b-45m33tw9nl] { left: 80%; animation-delay: 0.5s; }

@keyframes confetti-fall-b-45m33tw9nl {
    0% { 
        transform: translateY(-30px) rotate(0deg) scale(1); 
        opacity: 0; 
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateY(60px) rotate(180deg) scale(1.1);
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% { 
        transform: translateY(140px) rotate(360deg) scale(0.8); 
        opacity: 0; 
    }
}

/* Success Text */
.success-text[b-45m33tw9nl] {
    margin-top: 0.5rem;
}

.success-text h2[b-45m33tw9nl] {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.success-subtitle[b-45m33tw9nl] {
    color: #6b7280;
    font-size: 1.1rem;
    margin: 0;
    max-width: 400px;
    line-height: 1.5;
}

/* Status Timeline */
.status-timeline[b-45m33tw9nl] {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 1rem 0;
    background: #f8fafc;
    border-radius: 16px;
    padding: 1.25rem;
}

.timeline-item[b-45m33tw9nl] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    position: relative;
}

.timeline-item:not(:last-child)[b-45m33tw9nl]::after {
    content: '';
    position: absolute;
    left: 18px;
    top: 48px;
    width: 2px;
    height: calc(100% - 24px);
    background: #e2e8f0;
}

.timeline-item.completed:not(:last-child)[b-45m33tw9nl]::after {
    background: linear-gradient(180deg, #22c55e 0%, #10b981 100%);
}

.timeline-icon[b-45m33tw9nl] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #94a3b8;
    transition: all 0.3s ease;
}

.timeline-item.completed .timeline-icon[b-45m33tw9nl] {
    background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.timeline-item.highlight .timeline-icon[b-45m33tw9nl] {
    animation: icon-bounce-b-45m33tw9nl 0.6s ease;
}

@keyframes icon-bounce-b-45m33tw9nl {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.timeline-item.pending .timeline-icon[b-45m33tw9nl] {
    background: #f1f5f9;
    color: #94a3b8;
}

.timeline-content[b-45m33tw9nl] {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding-top: 2px;
}

.timeline-title[b-45m33tw9nl] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
}

.timeline-item.completed .timeline-title[b-45m33tw9nl] {
    color: #059669;
}

.timeline-desc[b-45m33tw9nl] {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 2px;
}

/* Matches Preview - Enhanced */
.matches-preview[b-45m33tw9nl] {
    width: 100%;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.matches-header[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.matches-icon[b-45m33tw9nl] {
    color: #059669;
}

[b-45m33tw9nl] .matches-icon .rzi {
    font-size: 1.5rem !important;
}

.matches-preview h3[b-45m33tw9nl] {
    margin: 0;
    color: #047857;
    font-size: 1.25rem;
}

.matches-preview > p[b-45m33tw9nl] {
    margin: 0 0 1rem 0;
    color: #065f46;
    font-size: 0.95rem;
}

.match-cards[b-45m33tw9nl] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.match-card[b-45m33tw9nl] {
    background: white;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 140px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.match-card:hover[b-45m33tw9nl] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.match-avatar[b-45m33tw9nl] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22c55e;
}

.match-info[b-45m33tw9nl] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.match-name[b-45m33tw9nl] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
}

.match-confidence-bar[b-45m33tw9nl] {
    width: 60px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.confidence-fill[b-45m33tw9nl] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #10b981 100%);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.match-confidence-text[b-45m33tw9nl] {
    font-size: 0.75rem;
    color: #059669;
    font-weight: 500;
    margin-top: 2px;
}

/* Legacy match confidence support */
.match-confidence[b-45m33tw9nl] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #059669;
}

/* Success Actions - Enhanced */
.success-actions[b-45m33tw9nl] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.success-actions[b-45m33tw9nl]  .rz-button {
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-dashboard[b-45m33tw9nl]  .rz-button {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.btn-dashboard[b-45m33tw9nl]  .rz-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
}

.btn-another[b-45m33tw9nl]  .rz-button {
    background: white !important;
    border: 2px solid #e2e8f0 !important;
    color: #64748b !important;
}

.btn-another[b-45m33tw9nl]  .rz-button:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

/* Success Footer */
.success-footer[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 1rem;
    color: #94a3b8;
    font-size: 0.9rem;
}

.heart-icon[b-45m33tw9nl] {
    color: #ef4444;
    animation: heartbeat-b-45m33tw9nl 1.5s ease-in-out infinite;
}

[b-45m33tw9nl] .heart-icon .rzi {
    font-size: 1rem !important;
}

@keyframes heartbeat-b-45m33tw9nl {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
}

/* Legacy support */
.success-icon[b-45m33tw9nl] {
    font-size: 4rem;
}

.success-content h2[b-45m33tw9nl] {
    margin: 0;
    color: #059669;
}

.success-content > p[b-45m33tw9nl] {
    color: #6b7280;
    margin: 0;
}

@media (max-width: 480px) {
    .success-card[b-45m33tw9nl] {
        padding: 2rem 1.25rem;
    }
    
    .success-text h2[b-45m33tw9nl] {
        font-size: 1.5rem;
    }
    
    .success-subtitle[b-45m33tw9nl] {
        font-size: 1rem;
    }
    
    .success-actions[b-45m33tw9nl] {
        flex-direction: column;
        width: 100%;
    }
    
    .success-actions[b-45m33tw9nl]  .rz-button {
        width: 100%;
    }
    
    .status-timeline[b-45m33tw9nl] {
        padding: 1rem;
    }
    
    .timeline-icon[b-45m33tw9nl] {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
    
    .timeline-item:not(:last-child)[b-45m33tw9nl]::after {
        left: 15px;
    }
    
    .match-cards[b-45m33tw9nl] {
        flex-direction: column;
    }
    
    .match-card[b-45m33tw9nl] {
        width: 100%;
    }
}

/* Step Indicator */
.step-indicator[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e5e7eb;
}

.step-indicator.step-active[b-45m33tw9nl] {
    border-bottom-color: #1b6ec2;
}

.step-indicator.step-complete[b-45m33tw9nl] {
    border-bottom-color: #22c55e;
}

.step-number[b-45m33tw9nl] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1b6ec2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.step-indicator.step-complete .step-number[b-45m33tw9nl] {
    background: #22c55e;
}

.step-text[b-45m33tw9nl] {
    font-weight: 600;
    color: #1a1a2e;
    font-size: 1.1rem;
}

.step-check[b-45m33tw9nl] {
    color: #22c55e;
    font-size: 1.25rem;
    margin-left: auto;
}

/* Fade-in Animation */
.fade-in[b-45m33tw9nl] {
    animation: fadeIn-b-45m33tw9nl 0.4s ease-out;
}

@keyframes fadeIn-b-45m33tw9nl {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Metadata Info */
.metadata-info[b-45m33tw9nl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border-radius: 8px;
    color: #059669;
    font-size: 0.9rem;
    border: 1px solid #bbf7d0;
}

/* Location Actions */
.location-actions[b-45m33tw9nl] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.location-status.success[b-45m33tw9nl] {
    background: #f0fdf4;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #bbf7d0;
    margin-bottom: 1rem;
}

/* GPS Display */
.gps-display[b-45m33tw9nl] {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f1f5f9;
    border-radius: 6px;
    display: inline-block;
}

/* Location details grid - updated for 4 columns */
.location-details-grid[b-45m33tw9nl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .location-details-grid[b-45m33tw9nl] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .location-details-grid[b-45m33tw9nl] {
        grid-template-columns: 1fr;
    }
    
    .location-actions[b-45m33tw9nl] {
        flex-direction: column;
    }
    
    .location-actions[b-45m33tw9nl]  .rz-button {
        width: 100%;
    }
}

/* Duplicate image warning box (red/danger theme) */
.duplicate-warning-box[b-45m33tw9nl] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 2px solid #dc2626;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin: 1rem 0;
}

.duplicate-warning-box .warning-content[b-45m33tw9nl] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.duplicate-warning-box .warning-icon[b-45m33tw9nl] {
    color: #dc2626;
    font-size: 2rem !important;
    flex-shrink: 0;
}

.duplicate-warning-box .warning-text[b-45m33tw9nl] {
    flex: 1;
}

.duplicate-warning-box .warning-text strong[b-45m33tw9nl] {
    color: #991b1b;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.5rem;
}

.duplicate-warning-box .warning-text p[b-45m33tw9nl] {
    color: #7f1d1d;
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.duplicate-warning-box .warning-count[b-45m33tw9nl] {
    font-weight: 600;
    color: #dc2626;
}

.duplicate-warning-box .warning-tip[b-45m33tw9nl] {
    font-size: 0.8rem;
    color: #991b1b;
    font-style: italic;
}

.duplicate-warning-box .warning-actions[b-45m33tw9nl] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.duplicate-warning-box .btn-upload-different[b-45m33tw9nl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    color: #dc2626;
    border: 2px solid #dc2626;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.duplicate-warning-box .btn-upload-different:hover[b-45m33tw9nl] {
    background: #fee2e2;
}

.duplicate-warning-box .btn-admin-override[b-45m33tw9nl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #7c3aed;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.duplicate-warning-box .btn-admin-override:hover[b-45m33tw9nl] {
    background: #6d28d9;
}
/* /Components/Pages/SightingDetails.razor.rz.scp.css */
/* ============================================
   Sighting Details Page Styles
   Consistent with PetFindrz design system
   ============================================ */

.sighting-details-page[b-193kylbw4o] {
    min-height: 100vh;
    background: #f8f9fa;
}

/* Loading & Not Found States */
.loading-container[b-193kylbw4o],
.not-found-container[b-193kylbw4o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

.loading-container p[b-193kylbw4o],
.not-found-container p[b-193kylbw4o] {
    color: #666;
    margin-top: 1rem;
}

.not-found-container .rzi[b-193kylbw4o] {
    font-size: 64px;
    color: #ccc;
    margin-bottom: 1rem;
}

.not-found-container h2[b-193kylbw4o] {
    color: #333;
    margin-bottom: 0.5rem;
}

/* Hero Section - Map Background */
.sighting-hero[b-193kylbw4o] {
    position: relative;
    height: 300px;
    overflow: visible;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #1e3a5f;
}

.hero-overlay[b-193kylbw4o] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.15) 0%,
        rgba(15, 23, 42, 0.25) 50%,
        rgba(15, 23, 42, 0.55) 100%
    );
}

/* Centered Profile Picture - overlaps into content */
.hero-profile-container[b-193kylbw4o] {
    position: absolute;
    bottom: -85px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.hero-profile-pic[b-193kylbw4o] {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-profile-pic img[b-193kylbw4o] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-profile-pic .profile-placeholder-icon[b-193kylbw4o]  .rzi {
    font-size: 3rem !important;
    color: #94a3b8 !important;
}

/* Status & Type Badges */
.sighting-status-badge[b-193kylbw4o],
.sighting-type-badge[b-193kylbw4o] {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.sighting-status-badge[b-193kylbw4o] {
    top: 1rem;
    right: 1rem;
}

.sighting-type-badge[b-193kylbw4o] {
    top: 1rem;
    left: 1rem;
}

.sighting-status-badge.status-active[b-193kylbw4o] {
    background: rgba(34, 197, 94, 0.9);
    color: white;
}

.sighting-status-badge.status-resolved[b-193kylbw4o] {
    background: rgba(59, 130, 246, 0.9);
    color: white;
}

.sighting-status-badge.status-matched[b-193kylbw4o] {
    background: rgba(168, 85, 247, 0.9);
    color: white;
}

.sighting-status-badge.status-expired[b-193kylbw4o] {
    background: rgba(156, 163, 175, 0.9);
    color: white;
}

.sighting-type-badge.type-lostbyowner[b-193kylbw4o] {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

.sighting-type-badge.type-foundpet[b-193kylbw4o] {
    background: rgba(34, 197, 94, 0.9);
    color: white;
}

.sighting-type-badge.type-communitysighting[b-193kylbw4o] {
    background: rgba(59, 130, 246, 0.9);
    color: white;
}

/* Main Content */
.sighting-content[b-193kylbw4o] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 6.5rem 2rem 2rem;
}

/* Header */
.sighting-header[b-193kylbw4o] {
    margin-bottom: 2rem;
    text-align: center;
}

.sighting-header h1[b-193kylbw4o] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 0.5rem 0;
}

.sighting-subtitle[b-193kylbw4o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #666;
    font-size: 1rem;
}

.sighting-subtitle .rzi[b-193kylbw4o] {
    color: #667eea;
}

.sighting-time[b-193kylbw4o] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #888;
}

/* Info Cards Grid */
.info-cards-grid[b-193kylbw4o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.info-card[b-193kylbw4o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.info-card:hover[b-193kylbw4o] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-icon[b-193kylbw4o] {
    font-size: 1.5rem;
    color: #667eea;
}

.info-icon.positive[b-193kylbw4o] {
    color: #22c55e;
}

.info-icon.caution[b-193kylbw4o] {
    color: #f59e0b;
}

.info-icon.neutral[b-193kylbw4o] {
    color: #9ca3af;
}

.info-content[b-193kylbw4o] {
    display: flex;
    flex-direction: column;
}

.info-label[b-193kylbw4o] {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value[b-193kylbw4o] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

/* Details Grid */
.details-grid[b-193kylbw4o] {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 2rem;
}

@media (max-width: 900px) {
    .details-grid[b-193kylbw4o] {
        grid-template-columns: 1fr;
    }
    
    .details-sidebar[b-193kylbw4o] {
        order: -1;
    }
}

/* Detail Cards */
.detail-card[b-193kylbw4o] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.detail-card h3[b-193kylbw4o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
}

.detail-card h3 .rzi[b-193kylbw4o] {
    color: #667eea;
}

.detail-card p[b-193kylbw4o] {
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Location Info */
.location-info[b-193kylbw4o] {
    margin-bottom: 1rem;
}

.location-description[b-193kylbw4o] {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 0.5rem !important;
}

.address[b-193kylbw4o],
.city-state[b-193kylbw4o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666 !important;
    font-size: 0.95rem;
}

.map-link[b-193kylbw4o] {
    margin-top: 1rem;
}

/* Details List */
.details-list[b-193kylbw4o] {
    display: grid;
    gap: 1rem;
}

.details-list dt[b-193kylbw4o] {
    font-size: 0.85rem;
    color: #888;
    font-weight: 500;
}

.details-list dd[b-193kylbw4o] {
    margin: 0.25rem 0 0 0;
    color: #333;
    font-size: 1rem;
}

/* QR Card */
.qr-card[b-193kylbw4o] {
    text-align: center;
}

.qr-container[b-193kylbw4o] {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.qr-image[b-193kylbw4o] {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qr-hint[b-193kylbw4o] {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 1rem !important;
}

/* Contact Card */
.contact-card .contact-info[b-193kylbw4o] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #667eea;
    word-break: break-all;
}

.contact-method[b-193kylbw4o] {
    font-size: 0.9rem;
    color: #888;
    margin-top: 0.5rem !important;
}

/* Report Info Card */
.report-details[b-193kylbw4o] {
    display: grid;
    gap: 0.75rem;
}

.report-details dt[b-193kylbw4o] {
    font-size: 0.8rem;
    color: #888;
    margin: 0;
}

.report-details dd[b-193kylbw4o] {
    margin: 0.125rem 0 0 0;
    color: #333;
    font-size: 0.95rem;
}

.report-id[b-193kylbw4o] {
    font-family: monospace;
    background: #f5f5f5;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem !important;
}

/* Sidebar Actions */
.sidebar-actions[b-193kylbw4o] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Re-run Matching Result Card */
.rerun-result-card[b-193kylbw4o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.rerun-result-card.success[b-193kylbw4o] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.rerun-result-card.error[b-193kylbw4o] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.rerun-result-card[b-193kylbw4o]  .rzi {
    font-size: 1.25rem !important;
}

/* Info Button Style */
.btn-info[b-193kylbw4o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: white;
}

.btn-info:hover[b-193kylbw4o] {
    background: linear-gradient(135deg, #6d28d9, #5b21b6);
    transform: translateY(-1px);
}

.btn-info.disabled[b-193kylbw4o],
.btn-info:disabled[b-193kylbw4o] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Buttons */
.btn-primary[b-193kylbw4o],
.btn-secondary[b-193kylbw4o],
.btn-success[b-193kylbw4o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-primary[b-193kylbw4o] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover[b-193kylbw4o] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary[b-193kylbw4o] {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
}

.btn-secondary:hover[b-193kylbw4o] {
    background: #eee;
    border-color: #ccc;
}

.btn-success[b-193kylbw4o] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.btn-success:hover[b-193kylbw4o] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.btn-full[b-193kylbw4o] {
    width: 100%;
}

/* Toast Notification */
.toast-notification[b-193kylbw4o] {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: #333;
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    animation: slideUp-b-193kylbw4o 0.3s ease;
}

@keyframes slideUp-b-193kylbw4o {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .sighting-hero[b-193kylbw4o] {
        height: 220px;
    }
    
    .sighting-content[b-193kylbw4o] {
        padding: 5rem 1rem 1rem;
    }
    
    .sighting-header h1[b-193kylbw4o] {
        font-size: 1.5rem;
    }
    
    .info-cards-grid[b-193kylbw4o] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .qr-image[b-193kylbw4o] {
        width: 150px;
        height: 150px;
    }

    .hero-profile-pic[b-193kylbw4o] {
        width: 120px;
        height: 120px;
    }

    .hero-profile-container[b-193kylbw4o] {
        bottom: -60px;
    }
}

@media (max-width: 480px) {
    .info-cards-grid[b-193kylbw4o] {
        grid-template-columns: 1fr;
    }
    
    .sighting-subtitle[b-193kylbw4o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* /Components/Pages/Subscription.razor.rz.scp.css */
/* Subscription Page - Clean Pricing Card Design */

.subscription-page[b-xe2si9v2mz] {
    min-height: 100vh;
    background: #f8fafc;
    padding: 2rem 1rem;
}

/* Plan Selection Section */
.plan-selection-section[b-xe2si9v2mz] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.plan-selection-container[b-xe2si9v2mz] {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.section-title[b-xe2si9v2mz] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
}

.section-subtitle[b-xe2si9v2mz] {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 650px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

/* Plans Loading State */
.plans-loading[b-xe2si9v2mz] {
    text-align: center;
    padding: 4rem 2rem;
}

.plans-loading p[b-xe2si9v2mz] {
    margin-top: 1.5rem;
    color: #64748b;
    font-size: 1.1rem;
}

.plans-error-message[b-xe2si9v2mz] {
    color: #f59e0b;
    font-size: 0.9rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: #fffbeb;
    border-radius: 8px;
    border: 1px solid #fcd34d;
    text-align: center;
}

.plans-grid[b-xe2si9v2mz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Plan Cards */
.plan-card[b-xe2si9v2mz] {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: left;
    border: 1px solid #e2e8f0;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Ensure the card takes full height in the grid */
    height: 100%;
}

.plan-card-popular[b-xe2si9v2mz] {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Badges Container */
.plan-badges[b-xe2si9v2mz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    min-height: 28px;
}

.popular-badge[b-xe2si9v2mz] {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    color: #475569;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.sandbox-badge[b-xe2si9v2mz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #0f172a;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.sandbox-badge[b-xe2si9v2mz]  .rzi {
    font-size: 0.875rem !important;
    color: white !important;
}

.plan-name[b-xe2si9v2mz] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 0.5rem 0;
}

.plan-description[b-xe2si9v2mz] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
    /*flex-grow: 1;*/
}

.plan-price[b-xe2si9v2mz] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
}

.price-amount[b-xe2si9v2mz] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1;
}

.price-period[b-xe2si9v2mz] {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.3;
}

/* Subscribe Button */
.btn-subscribe[b-xe2si9v2mz] {
    width: 100%;
    padding: 0.875rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: #22c55e;
    color: white;
    margin-top: auto; /* Pushes the button to the bottom */
}

.btn-subscribe:hover[b-xe2si9v2mz] {
    background: #16a34a;
}

/* Trial Info Footer */
.trial-info[b-xe2si9v2mz] {
    text-align: center;
    margin-top: 2rem;
    color: #64748b;
    font-size: 0.95rem;
}

/* Checkout Section */
.checkout-section[b-xe2si9v2mz] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    background: white;
}

.checkout-container[b-xe2si9v2mz] {
    max-width: 600px;
    margin: 0 auto;
}

/* Back to Plans Button */
.btn-back-to-plans[b-xe2si9v2mz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    margin-bottom: 1.5rem;
    background: transparent;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-back-to-plans:hover[b-xe2si9v2mz] {
    background: #f8fafc;
    color: #1a202c;
    border-color: #cbd5e1;
}

.btn-back-to-plans[b-xe2si9v2mz]  .rzi {
    font-size: 1.1rem !important;
}

.checkout-loading[b-xe2si9v2mz],
.checkout-error[b-xe2si9v2mz] {
    text-align: center;
    padding: 4rem 2rem;
}

.checkout-loading p[b-xe2si9v2mz] {
    margin-top: 1.5rem;
    color: #64748b;
    font-size: 1.1rem;
}

.checkout-error[b-xe2si9v2mz]  .rzi {
    font-size: 4rem !important;
    color: #ef4444 !important;
}

.checkout-error h3[b-xe2si9v2mz] {
    font-size: 1.5rem;
    color: #1a202c;
    margin: 1rem 0 0.5rem;
}

.checkout-error p[b-xe2si9v2mz] {
    color: #64748b;
    margin-bottom: 1.5rem;
}

.btn-retry[b-xe2si9v2mz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: #22c55e;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-retry:hover[b-xe2si9v2mz] {
    background: #16a34a;
}

.stripe-checkout-container[b-xe2si9v2mz] {
    min-height: 400px;
    background: #fafafa;
    border-radius: 8px;
    overflow: hidden;
}

.stripe-checkout-container.hidden[b-xe2si9v2mz] {
    display: none;
}

/* Responsive */
@media (max-width: 900px) {
    .plans-grid[b-xe2si9v2mz] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .plan-card-popular[b-xe2si9v2mz] {
        order: -1;
    }
}

@media (max-width: 640px) {
    .plans-grid[b-xe2si9v2mz] {
        grid-template-columns: 1fr;
    }
    
    .price-amount[b-xe2si9v2mz] {
        font-size: 2rem;
    }
}

/* Loading State */
.subscription-loading[b-xe2si9v2mz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.subscription-loading p[b-xe2si9v2mz] {
    margin-top: 1rem;
    color: #64748b;
}

/* Current Subscription Section */
.current-subscription-section[b-xe2si9v2mz] {
    padding: 3rem 1rem;
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.current-subscription-container[b-xe2si9v2mz] {
    max-width: 700px;
    margin: 0 auto;
}

.subscription-header[b-xe2si9v2mz] {
    text-align: center;
    margin-bottom: 2rem;
}

.subscription-badge[b-xe2si9v2mz] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.subscription-badge.active[b-xe2si9v2mz] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.subscription-badge[b-xe2si9v2mz]  .rzi {
    font-size: 1rem !important;
}

.subscription-header h1[b-xe2si9v2mz] {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem;
}

.subscription-subtitle[b-xe2si9v2mz] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

/* Subscription Card */
.subscription-card[b-xe2si9v2mz] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.subscription-plan-header[b-xe2si9v2mz] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.plan-icon[b-xe2si9v2mz] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-icon[b-xe2si9v2mz]  .rzi {
    font-size: 1.75rem !important;
    color: white !important;
}

.plan-info[b-xe2si9v2mz] {
    flex: 1;
}

.current-plan-name[b-xe2si9v2mz] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.25rem;
}

.plan-status[b-xe2si9v2mz] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.plan-status.status-active[b-xe2si9v2mz] {
    background: #dcfce7;
    color: #16a34a;
}

.plan-status.status-trialing[b-xe2si9v2mz] {
    background: #dbeafe;
    color: #2563eb;
}

.plan-status.status-past_due[b-xe2si9v2mz] {
    background: #fef3c7;
    color: #d97706;
}

.plan-status.status-canceled[b-xe2si9v2mz] {
    background: #fee2e2;
    color: #dc2626;
}

.plan-price-display[b-xe2si9v2mz] {
    text-align: right;
}

.plan-price-display .price[b-xe2si9v2mz] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
}

.plan-price-display .period[b-xe2si9v2mz] {
    font-size: 0.8rem;
    color: #64748b;
}

.subscription-divider[b-xe2si9v2mz] {
    height: 1px;
    background: #e5e7eb;
    margin: 1.5rem 0;
}

/* Subscription Details */
.subscription-details[b-xe2si9v2mz] {
    display: flex;
    gap: 2rem;
}

.detail-item[b-xe2si9v2mz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.detail-item[b-xe2si9v2mz]  .rzi {
    font-size: 1.5rem !important;
    color: #667eea !important;
}

.detail-content[b-xe2si9v2mz] {
    display: flex;
    flex-direction: column;
}

.detail-label[b-xe2si9v2mz] {
    font-size: 0.8rem;
    color: #64748b;
}

.detail-value[b-xe2si9v2mz] {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

/* Plan Features */
.plan-features h3[b-xe2si9v2mz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 1rem;
}

.plan-features h3[b-xe2si9v2mz]  .rzi {
    font-size: 1.25rem !important;
    color: #22c55e !important;
}

.features-list[b-xe2si9v2mz] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.features-list li[b-xe2si9v2mz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #374151;
}

.feature-check[b-xe2si9v2mz]  .rzi {
    font-size: 1rem !important;
    color: #22c55e !important;
}

/* Subscription Actions */
.subscription-actions[b-xe2si9v2mz] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.btn-upgrade[b-xe2si9v2mz] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-upgrade:hover[b-xe2si9v2mz] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-manage-billing[b-xe2si9v2mz] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: #f3f4f6;
    color: #374151;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-manage-billing:hover[b-xe2si9v2mz] {
    background: #e5e7eb;
}

/* Impersonation Notice Styles */
.impersonation-notice[b-xe2si9v2mz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    color: #92400e;
    font-size: 0.9rem;
}

.impersonation-notice[b-xe2si9v2mz]  > .rzi {
    font-size: 1.25rem !important;
    color: #d97706 !important;
}

.impersonation-notice strong[b-xe2si9v2mz] {
    font-weight: 600;
    color: #78350f;
}

.impersonation-actions-notice[b-xe2si9v2mz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 0.875rem;
    width: 100%;
}

.impersonation-actions-notice[b-xe2si9v2mz]  > .rzi {
    font-size: 1rem !important;
    color: #94a3b8 !important;
}

/* Upgrade Prompt */
.upgrade-prompt[b-xe2si9v2mz] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
}

.upgrade-prompt[b-xe2si9v2mz]  > .rzi {
    font-size: 2rem !important;
    color: #d97706 !important;
}

.upgrade-prompt-content[b-xe2si9v2mz] {
    flex: 1;
}

.upgrade-prompt-content h4[b-xe2si9v2mz] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 0.25rem;
}

.upgrade-prompt-content p[b-xe2si9v2mz] {
    font-size: 0.85rem;
    color: #a16207;
    margin: 0;
}

.btn-upgrade-small[b-xe2si9v2mz] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #d97706;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-upgrade-small:hover[b-xe2si9v2mz] {
    background: #b45309;
}

/* Back to Subscription Button */
.btn-back-to-subscription[b-xe2si9v2mz] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: #64748b;
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

.btn-back-to-subscription:hover[b-xe2si9v2mz] {
    color: #1f2937;
}

/* Responsive for Current Subscription */
@media (max-width: 640px) {
    .subscription-plan-header[b-xe2si9v2mz] {
        flex-wrap: wrap;
    }
    
    .plan-price-display[b-xe2si9v2mz] {
        width: 100%;
        text-align: left;
        margin-top: 1rem;
    }
    
    .subscription-details[b-xe2si9v2mz] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .features-list[b-xe2si9v2mz] {
        grid-template-columns: 1fr;
    }
    
    .subscription-actions[b-xe2si9v2mz] {
        flex-direction: column;
    }
    
    .upgrade-prompt[b-xe2si9v2mz] {
        flex-direction: column;
        text-align: center;
    }
}
/* /Components/Pages/SubscriptionReturn.razor.rz.scp.css */
/* Subscription Return Page - Award-Winning Design */
/* Matching PetFindrz theme with celebratory animations */

.subscription-return-page[b-60xiiwexqq] {
    min-height: 100vh;
    min-width: 100vw;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Return Section Base */
.return-section[b-60xiiwexqq] {
    flex: 1;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.return-container[b-60xiiwexqq] {
    max-width: 600px;
    text-align: center;
}

/* Loading State */
.return-loading[b-60xiiwexqq] {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.loading-animation[b-60xiiwexqq] {
    margin-bottom: 2rem;
}

/* Success State */
.return-success[b-60xiiwexqq] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 30%, #bbf7d0 100%);
    position: relative;
    overflow: hidden;
}

.return-success[b-60xiiwexqq]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%);
    animation: pulse-bg-b-60xiiwexqq 4s ease-in-out infinite;
}

@keyframes pulse-bg-b-60xiiwexqq {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.3; }
}

.success-animation[b-60xiiwexqq] {
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.success-checkmark[b-60xiiwexqq] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    animation: success-pop-b-60xiiwexqq 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 10px 40px rgba(34, 197, 94, 0.4);
}

@keyframes success-pop-b-60xiiwexqq {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.success-checkmark[b-60xiiwexqq]  .rzi {
    font-size: 3.5rem !important;
    color: white !important;
}

.return-title[b-60xiiwexqq] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.return-subtitle[b-60xiiwexqq] {
    font-size: 1.15rem;
    color: #475569;
    max-width: 500px;
    margin: 0 auto 2rem;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* Confirmation Details */
.confirmation-details[b-60xiiwexqq] {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
}

.confirmation-details p[b-60xiiwexqq] {
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
}

.customer-email[b-60xiiwexqq] {
    font-weight: 600;
    color: #1a202c !important;
    font-size: 1.1rem !important;
    margin-top: 0.5rem !important;
}

/* Next Steps */
.next-steps[b-60xiiwexqq] {
    background: white;
    padding: 2rem;
    border-radius: 1.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    text-align: left;
    position: relative;
    z-index: 1;
}

.next-steps h3[b-60xiiwexqq] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1.5rem;
    text-align: center;
}

.steps-grid[b-60xiiwexqq] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.step-item[b-60xiiwexqq] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.step-item:hover[b-60xiiwexqq] {
    background: #f1f5f9;
    transform: translateX(5px);
}

.step-icon[b-60xiiwexqq] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon[b-60xiiwexqq]  .rzi {
    font-size: 1.5rem !important;
    color: white !important;
}

.step-content h4[b-60xiiwexqq] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 0.25rem;
}

.step-content p[b-60xiiwexqq] {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}

/* Retry State */
.return-retry[b-60xiiwexqq] {
    background: linear-gradient(180deg, #fef3c7 0%, #fef9c3 100%);
}

.retry-icon[b-60xiiwexqq] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
}

.retry-icon[b-60xiiwexqq]  .rzi {
    font-size: 2.5rem !important;
    color: white !important;
}

/* Error State */
.return-error[b-60xiiwexqq] {
    background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
}

.error-icon[b-60xiiwexqq] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
}

.error-icon[b-60xiiwexqq]  .rzi {
    font-size: 2.5rem !important;
    color: white !important;
}

/* Action Buttons */
.action-buttons[b-60xiiwexqq] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.btn-primary-action[b-60xiiwexqq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-primary-action:hover[b-60xiiwexqq] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.btn-secondary-action[b-60xiiwexqq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: white;
    color: #475569;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary-action:hover[b-60xiiwexqq] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f8faff;
}

/* Trust Footer */
.trust-footer[b-60xiiwexqq] {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 1.5rem 2rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.trust-footer .trust-container[b-60xiiwexqq] {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.trust-footer .trust-item[b-60xiiwexqq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
    font-size: 0.9rem;
}

.trust-footer .trust-item[b-60xiiwexqq]  .rzi {
    font-size: 1.25rem !important;
    color: #3b82f6 !important;
}

.trust-footer .trust-item a[b-60xiiwexqq] {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.trust-footer .trust-item a:hover[b-60xiiwexqq] {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .return-title[b-60xiiwexqq] {
        font-size: 1.75rem;
    }
    
    .steps-grid[b-60xiiwexqq] {
        gap: 1rem;
    }
    
    .step-item[b-60xiiwexqq] {
        padding: 0.875rem;
    }
    
    .action-buttons[b-60xiiwexqq] {
        flex-direction: column;
    }
    
    .btn-primary-action[b-60xiiwexqq],
    .btn-secondary-action[b-60xiiwexqq] {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   Confetti & Celebration Animations
   ======================================== */

/* Animated Background Shapes */
.success-bg-shapes[b-60xiiwexqq] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.shape[b-60xiiwexqq] {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
}

.shape-1[b-60xiiwexqq] {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
    top: -100px;
    left: -100px;
    animation: float-shape-b-60xiiwexqq 8s ease-in-out infinite;
}

.shape-2[b-60xiiwexqq] {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    bottom: -50px;
    right: -50px;
    animation: float-shape-b-60xiiwexqq 6s ease-in-out infinite reverse;
}

.shape-3[b-60xiiwexqq] {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    top: 50%;
    right: -75px;
    animation: float-shape-b-60xiiwexqq 7s ease-in-out infinite;
}

@keyframes float-shape-b-60xiiwexqq {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.1); }
}

/* Confetti Animation */
.confetti-container[b-60xiiwexqq] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
}

.confetti[b-60xiiwexqq] {
    position: absolute;
    font-size: 1.75rem;
    animation: confetti-fall-b-60xiiwexqq 4s ease-in-out infinite;
}

.confetti-1[b-60xiiwexqq] { left: 5%; animation-delay: 0s; }
.confetti-2[b-60xiiwexqq] { left: 15%; animation-delay: 0.8s; }
.confetti-3[b-60xiiwexqq] { left: 30%; animation-delay: 0.3s; }
.confetti-4[b-60xiiwexqq] { left: 50%; animation-delay: 1.2s; }
.confetti-5[b-60xiiwexqq] { left: 70%; animation-delay: 0.5s; }
.confetti-6[b-60xiiwexqq] { left: 85%; animation-delay: 1s; }
.confetti-7[b-60xiiwexqq] { left: 95%; animation-delay: 0.7s; }

@keyframes confetti-fall-b-60xiiwexqq {
    0% { 
        transform: translateY(-40px) rotate(0deg) scale(1); 
        opacity: 0; 
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateY(80px) rotate(180deg) scale(1.1);
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% { 
        transform: translateY(180px) rotate(360deg) scale(0.8); 
        opacity: 0; 
    }
}

/* Enhanced Success Icon with Ring Animation */
.success-icon-wrapper[b-60xiiwexqq] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.success-icon-bg[b-60xiiwexqq] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 50%;
    animation: success-pulse-b-60xiiwexqq 2s ease-in-out infinite;
}

.success-icon-ring[b-60xiiwexqq] {
    position: absolute;
    inset: -10px;
    border: 3px solid #22c55e;
    border-radius: 50%;
    opacity: 0;
    animation: ring-expand-b-60xiiwexqq 2s ease-out infinite;
}

@keyframes success-pulse-b-60xiiwexqq {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { transform: scale(1.02); box-shadow: 0 0 30px 10px rgba(34, 197, 94, 0.2); }
}

@keyframes ring-expand-b-60xiiwexqq {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.success-animation .success-checkmark[b-60xiiwexqq] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: checkmark-pop-b-60xiiwexqq 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s both;
}

@keyframes checkmark-pop-b-60xiiwexqq {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.success-animation .success-checkmark[b-60xiiwexqq]  .rzi {
    font-size: 3.5rem !important;
    color: white !important;
}

/* Step Item Enhancements */
.step-item[b-60xiiwexqq] {
    cursor: pointer;
}

.step-arrow[b-60xiiwexqq] {
    display: flex;
    align-items: center;
    margin-left: auto;
    opacity: 0.4;
    transition: all 0.2s ease;
}

.step-item:hover .step-arrow[b-60xiiwexqq] {
    opacity: 1;
    transform: translateX(4px);
}

.step-arrow[b-60xiiwexqq]  .rzi {
    font-size: 1.25rem !important;
    color: #94a3b8 !important;
}

.step-item:hover .step-arrow[b-60xiiwexqq]  .rzi {
    color: #3b82f6 !important;
}

/* Different icon colors for variety */
.step-icon.notifications-icon[b-60xiiwexqq] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.step-icon.health-icon[b-60xiiwexqq] {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}
/* /Components/Pages/Terms.razor.rz.scp.css */
.legal-page[b-1yb3fhqo5f] {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    padding: 2rem 1rem 4rem;
}

.legal-container[b-1yb3fhqo5f] {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Header */
.legal-header[b-1yb3fhqo5f] {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 50%, #4c1d95 100%);
    padding: 3rem 2.5rem;
    color: white;
    text-align: center;
}

.legal-title[b-1yb3fhqo5f] {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
    line-height: 1.2;
}

.legal-meta[b-1yb3fhqo5f] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.meta-item[b-1yb3fhqo5f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.meta-label[b-1yb3fhqo5f] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
}

.meta-value[b-1yb3fhqo5f] {
    font-size: 1rem;
    font-weight: 600;
}

/* Content */
.legal-content[b-1yb3fhqo5f] {
    padding: 2.5rem;
}

.legal-section[b-1yb3fhqo5f] {
    margin-bottom: 2.5rem;
}

.legal-section:last-child[b-1yb3fhqo5f] {
    margin-bottom: 0;
}

.legal-section h2[b-1yb3fhqo5f] {
    font-size: 1.375rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.legal-section p[b-1yb3fhqo5f] {
    font-size: 1rem;
    line-height: 1.75;
    color: #475569;
    margin: 0 0 1rem;
}

.legal-section p:last-child[b-1yb3fhqo5f] {
    margin-bottom: 0;
}

.legal-section a[b-1yb3fhqo5f] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.legal-section a:hover[b-1yb3fhqo5f] {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Lists */
.legal-list[b-1yb3fhqo5f] {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.legal-list li[b-1yb3fhqo5f] {
    font-size: 1rem;
    line-height: 1.75;
    color: #475569;
    margin-bottom: 0.5rem;
    position: relative;
}

.legal-list li[b-1yb3fhqo5f]::marker {
    color: #2563eb;
}

/* Highlight Box */
.legal-highlight[b-1yb3fhqo5f] {
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border-left: 4px solid #2563eb;
    padding: 1rem 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    margin: 1.5rem 0;
}

.legal-highlight p[b-1yb3fhqo5f] {
    margin: 0;
}

.legal-highlight strong[b-1yb3fhqo5f] {
    color: #1e40af;
}

.legal-highlight.warning[b-1yb3fhqo5f] {
    background: linear-gradient(135deg, #fef3c7 0%, #fff7ed 100%);
    border-left-color: #f59e0b;
}

.legal-highlight.warning strong[b-1yb3fhqo5f] {
    color: #b45309;
}

/* Contact Info */
.contact-info[b-1yb3fhqo5f] {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.75rem;
    margin-top: 1rem;
}

.contact-info p[b-1yb3fhqo5f] {
    margin: 0 0 0.5rem;
    color: #334155;
}

.contact-info p:last-child[b-1yb3fhqo5f] {
    margin-bottom: 0;
}

/* Footer */
.legal-footer[b-1yb3fhqo5f] {
    padding: 1.5rem 2.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.back-link[b-1yb3fhqo5f] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.back-link:hover[b-1yb3fhqo5f] {
    color: #1d4ed8;
    gap: 0.75rem;
}

.back-icon[b-1yb3fhqo5f] {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.back-link:hover .back-icon[b-1yb3fhqo5f] {
    transform: translateX(-3px);
}

/* Responsive */
@media (max-width: 768px) {
    .legal-page[b-1yb3fhqo5f] {
        padding: 1rem;
    }

    .legal-container[b-1yb3fhqo5f] {
        border-radius: 1rem;
    }

    .legal-header[b-1yb3fhqo5f] {
        padding: 2rem 1.5rem;
    }

    .legal-title[b-1yb3fhqo5f] {
        font-size: 1.875rem;
    }

    .legal-meta[b-1yb3fhqo5f] {
        gap: 1.5rem;
    }

    .legal-content[b-1yb3fhqo5f] {
        padding: 1.5rem;
    }

    .legal-section h2[b-1yb3fhqo5f] {
        font-size: 1.25rem;
    }

    .legal-footer[b-1yb3fhqo5f] {
        padding: 1.25rem 1.5rem;
    }
}
/* /Components/Shared/LocationPicker.razor.rz.scp.css */
/* ================================================
   LocationPicker Component Styles
   PetFindrz - Reusable Location Selection
   ================================================ */

.location-picker[b-jiqq2a9846] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.location-picker.disabled[b-jiqq2a9846] {
    opacity: 0.6;
    pointer-events: none;
}

/* ================================================
   LOCATION DISPLAY FIELD
   ================================================ */
.location-display[b-jiqq2a9846] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    min-height: 48px;
}

.location-display:focus-within[b-jiqq2a9846] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: #ffffff;
}

.location-display.has-value[b-jiqq2a9846] {
    background: #ffffff;
    border-color: #22c55e;
}

.location-icon[b-jiqq2a9846] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.location-display.has-value .location-icon[b-jiqq2a9846] {
    color: #22c55e;
}

.location-display.focused[b-jiqq2a9846] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: #ffffff;
}

.location-icon[b-jiqq2a9846]  .rzi {
    font-size: 1.25rem !important;
}

.location-input-wrapper[b-jiqq2a9846] {
    flex: 1;
    min-width: 0;
    position: relative;
}

.location-input[b-jiqq2a9846] {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    color: #1e293b;
    outline: none;
}

.location-input[b-jiqq2a9846]::placeholder {
    color: #94a3b8;
}

/* ================================================
   AUTOCOMPLETE DROPDOWN
   ================================================ */
.autocomplete-dropdown[b-jiqq2a9846] {
    position: absolute;
    top: calc(100% + 4px);
    left: -1rem;
    right: -2.75rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
}

.autocomplete-item[b-jiqq2a9846] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.1s ease;
    font-size: 0.875rem;
    color: #1e293b;
    line-height: 1.4;
}

.autocomplete-item:hover[b-jiqq2a9846],
.autocomplete-item.selected[b-jiqq2a9846] {
    background: #f1f5f9;
}

.autocomplete-item:not(:last-child)[b-jiqq2a9846] {
    border-bottom: 1px solid #f1f5f9;
}

.autocomplete-item .suggestion-icon[b-jiqq2a9846] {
    flex-shrink: 0;
    color: #94a3b8;
    margin-top: 0.125rem;
}

.autocomplete-item .suggestion-icon[b-jiqq2a9846]  .rzi {
    font-size: 1rem !important;
}

.location-text[b-jiqq2a9846] {
    display: block;
    font-size: 0.9375rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-text.placeholder[b-jiqq2a9846] {
    color: #94a3b8;
}

.location-clear[b-jiqq2a9846] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.location-clear:hover[b-jiqq2a9846] {
    background: #e2e8f0;
    color: #ef4444;
}

.location-clear[b-jiqq2a9846]  .rzi {
    font-size: 1rem !important;
}

/* ================================================
   ACTION BUTTONS
   ================================================ */
.location-actions[b-jiqq2a9846] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-current-location[b-jiqq2a9846],
.btn-map-toggle[b-jiqq2a9846],
.btn-use-default[b-jiqq2a9846] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-current-location[b-jiqq2a9846] {
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #3b82f6;
}

.btn-current-location:hover:not(:disabled)[b-jiqq2a9846] {
    background: #3b82f6;
    color: #ffffff;
}

.btn-current-location:disabled[b-jiqq2a9846] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-current-location.loading[b-jiqq2a9846] {
    background: #3b82f6;
    color: #ffffff;
}

.btn-current-location[b-jiqq2a9846]  .rz-progressbar-circular {
    width: 1rem !important;
    height: 1rem !important;
}

.btn-use-default[b-jiqq2a9846] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #22c55e;
}

.btn-use-default:hover:not(:disabled)[b-jiqq2a9846] {
    background: #22c55e;
    color: #ffffff;
}

.btn-use-default:disabled[b-jiqq2a9846] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-map-toggle[b-jiqq2a9846] {
    background: #ffffff;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.btn-map-toggle:hover:not(:disabled)[b-jiqq2a9846] {
    background: #f8fafc;
    color: #3b82f6;
    border-color: #3b82f6;
}

.btn-map-toggle.active[b-jiqq2a9846] {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.btn-map-toggle .chevron[b-jiqq2a9846] {
    margin-left: 0.125rem;
}

.btn-map-toggle[b-jiqq2a9846]  .rzi {
    font-size: 1.125rem !important;
}

.btn-map-toggle .chevron[b-jiqq2a9846]  .rzi {
    font-size: 1rem !important;
}

/* ================================================
   MAP PANEL
   ================================================ */
.location-map-panel[b-jiqq2a9846] {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    animation: slideDown-b-jiqq2a9846 0.25s ease-out;
}

@keyframes slideDown-b-jiqq2a9846 {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.location-map[b-jiqq2a9846] {
    width: 100%;
    height: 220px;
    background: #f1f5f9;
}

.map-instructions[b-jiqq2a9846] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    color: #3b82f6;
    font-size: 0.8125rem;
    font-weight: 500;
}

.map-instructions[b-jiqq2a9846]  .rzi {
    font-size: 1rem !important;
}

.map-loading-overlay[b-jiqq2a9846] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
}

/* ================================================
   ERROR MESSAGE
   ================================================ */
.location-error[b-jiqq2a9846] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    color: #dc2626;
    font-size: 0.8125rem;
}

.location-error[b-jiqq2a9846]  .rzi {
    font-size: 1rem !important;
    flex-shrink: 0;
}

.error-dismiss[b-jiqq2a9846] {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: transparent;
    border: none;
    color: #dc2626;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.error-dismiss:hover[b-jiqq2a9846] {
    opacity: 1;
}

.error-dismiss[b-jiqq2a9846]  .rzi {
    font-size: 0.875rem !important;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 480px) {
    .location-actions[b-jiqq2a9846] {
        flex-direction: column;
    }

    .btn-current-location[b-jiqq2a9846],
    .btn-map-toggle[b-jiqq2a9846] {
        width: 100%;
        justify-content: center;
    }

    .location-map[b-jiqq2a9846] {
        height: 180px;
    }
}
/* /Components/Shared/MatchScoreDisplay.razor.rz.scp.css */
/* ================================================
   MatchScoreDisplay Component Styles
   Reusable match confidence score visualization
   ================================================ */

.score-display[b-ldjf3hlc32] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* ================================================
   MAIN SCORE RING
   ================================================ */
.score-main[b-ldjf3hlc32] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.score-ring[b-ldjf3hlc32] {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(
        var(--score-color, #10b981) calc(var(--score-pct, 0) * 1%),
        #e2e8f0 calc(var(--score-pct, 0) * 1%)
    );
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.score-ring[b-ldjf3hlc32]::before {
    content: '';
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
}

.score-value[b-ldjf3hlc32] {
    position: relative;
    z-index: 1;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
}

.score-label[b-ldjf3hlc32] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ================================================
   SCORE BREAKDOWN (Visual/Text bars)
   ================================================ */
.score-breakdown[b-ldjf3hlc32] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
    max-width: 120px;
    padding-top: 0.25rem;
    border-top: 1px solid #e2e8f0;
}

.score-item[b-ldjf3hlc32] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.score-icon[b-ldjf3hlc32] {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
}

.score-item.visual .score-icon[b-ldjf3hlc32] {
    background: rgba(124, 58, 237, 0.12);
}

.score-item.visual .score-icon[b-ldjf3hlc32]  .rzi {
    font-size: 0.75rem !important;
    color: #7c3aed !important;
}

.score-item.text .score-icon[b-ldjf3hlc32] {
    background: rgba(14, 165, 233, 0.12);
}

.score-item.text .score-icon[b-ldjf3hlc32]  .rzi {
    font-size: 0.75rem !important;
    color: #0ea5e9 !important;
}

.score-bar-container[b-ldjf3hlc32] {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.score-bar[b-ldjf3hlc32] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.score-pct[b-ldjf3hlc32] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #475569;
    min-width: 32px;
    text-align: right;
}

/* ================================================
   FALLBACK (Text-only indicator)
   ================================================ */
.score-fallback[b-ldjf3hlc32] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    color: #94a3b8;
    padding-top: 0.25rem;
}

.score-fallback[b-ldjf3hlc32]  .rzi {
    font-size: 0.75rem !important;
}

/* ================================================
   SIZE VARIANTS
   ================================================ */

/* Compact - Just the ring, minimal space */
.score-display.compact[b-ldjf3hlc32] {
    gap: 0;
}

.score-display.compact .score-ring[b-ldjf3hlc32] {
    width: 40px;
    height: 40px;
}

.score-display.compact .score-ring[b-ldjf3hlc32]::before {
    width: 32px;
    height: 32px;
}

.score-display.compact .score-value[b-ldjf3hlc32] {
    font-size: 0.6875rem;
}

.score-display.compact .score-breakdown[b-ldjf3hlc32] {
    display: none;
}

/* Large - Bigger ring, more detail */
.score-display.large .score-ring[b-ldjf3hlc32] {
    width: 72px;
    height: 72px;
}

.score-display.large .score-ring[b-ldjf3hlc32]::before {
    width: 56px;
    height: 56px;
}

.score-display.large .score-value[b-ldjf3hlc32] {
    font-size: 1.125rem;
}

.score-display.large .score-label[b-ldjf3hlc32] {
    font-size: 0.75rem;
}

.score-display.large .score-breakdown[b-ldjf3hlc32] {
    max-width: 160px;
}

.score-display.large .score-bar-container[b-ldjf3hlc32] {
    height: 8px;
}

/* ================================================
   HOVER STATES
   ================================================ */
.score-item[b-ldjf3hlc32] {
    cursor: help;
    transition: transform 0.15s ease;
}

.score-item:hover[b-ldjf3hlc32] {
    transform: translateX(2px);
}

.score-item:hover .score-bar[b-ldjf3hlc32] {
    filter: brightness(1.1);
}
/* /Components/Shared/PetQuotaIndicator.razor.rz.scp.css */
/* PetQuotaIndicator Component Styles */

/* =================================
   Base Container Styles
   ================================= */
.pet-quota-indicator[b-uohrec7lr0] {
    font-family: inherit;
}

/* =================================
   Size Variants
   ================================= */
.quota-size-sm[b-uohrec7lr0] {
    font-size: 0.85rem;
}

.quota-size-md[b-uohrec7lr0] {
    font-size: 1rem;
}

.quota-size-lg[b-uohrec7lr0] {
    font-size: 1.15rem;
}

/* =================================
   State Colors - CSS Variables
   ================================= */
.quota-state-normal[b-uohrec7lr0] {
    --quota-color: #4caf50;
    --quota-bg: #e8f5e9;
    --quota-border: #4caf50;
    --quota-text: #2e7d32;
}

.quota-state-warning[b-uohrec7lr0] {
    --quota-color: #ff9800;
    --quota-bg: #fff3e0;
    --quota-border: #ff9800;
    --quota-text: #ef6c00;
}

.quota-state-limit[b-uohrec7lr0] {
    --quota-color: #ffa726;
    --quota-bg: #fff8e1;
    --quota-border: #ffa726;
    --quota-text: #f57c00;
}

.quota-state-over[b-uohrec7lr0] {
    --quota-color: #ef5350;
    --quota-bg: #ffebee;
    --quota-border: #ef5350;
    --quota-text: #c62828;
}

/* =================================
   Full Display Mode
   ================================= */
.quota-header[b-uohrec7lr0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.quota-icon[b-uohrec7lr0] {
    color: var(--quota-color);
    display: flex;
    align-items: center;
}

.quota-label[b-uohrec7lr0] {
    font-weight: 500;
    color: #374151;
}

.quota-warning-badge[b-uohrec7lr0],
.quota-limit-badge[b-uohrec7lr0] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
}

.quota-warning-badge[b-uohrec7lr0] {
    background-color: #ffebee;
    color: #c62828;
    animation: pulse-warning-b-uohrec7lr0 2s ease-in-out infinite;
}

.quota-limit-badge[b-uohrec7lr0] {
    background-color: #fff8e1;
    color: #f57c00;
}

@keyframes pulse-warning-b-uohrec7lr0 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.quota-numbers[b-uohrec7lr0] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.quota-current[b-uohrec7lr0] {
    font-size: 1.75em;
    font-weight: 700;
    color: var(--quota-text);
}

.quota-separator[b-uohrec7lr0] {
    font-size: 1.25em;
    color: #9ca3af;
    font-weight: 300;
}

.quota-max[b-uohrec7lr0] {
    font-size: 1.25em;
    font-weight: 600;
    color: #6b7280;
}

.quota-allowed-label[b-uohrec7lr0] {
    font-size: 0.85em;
    color: #9ca3af;
    margin-left: 0.25rem;
}

/* Progress Bar */
.quota-progress-container[b-uohrec7lr0] {
    position: relative;
    height: 8px;
    background-color: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.quota-progress-bar[b-uohrec7lr0] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--quota-color);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.quota-progress-overflow[b-uohrec7lr0] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        var(--quota-color),
        var(--quota-color) 5px,
        rgba(255,255,255,0.3) 5px,
        rgba(255,255,255,0.3) 10px
    );
    border-radius: 4px;
    animation: overflow-stripes-b-uohrec7lr0 1s linear infinite;
}

@keyframes overflow-stripes-b-uohrec7lr0 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 14px 0;
    }
}

.quota-footer[b-uohrec7lr0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
}

.quota-percentage[b-uohrec7lr0] {
    color: var(--quota-text);
    font-weight: 500;
}

.quota-remaining[b-uohrec7lr0] {
    color: #6b7280;
}

.quota-upgrade-link[b-uohrec7lr0] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--quota-color);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}

.quota-upgrade-link:hover[b-uohrec7lr0] {
    opacity: 0.8;
    text-decoration: underline;
}

/* =================================
   Compact Display Mode
   ================================= */
.quota-compact[b-uohrec7lr0] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    background: var(--quota-bg);
    border: 1px solid var(--quota-border);
    border-radius: 1.5rem;
    white-space: nowrap;
}

.quota-compact .quota-icon[b-uohrec7lr0] {
    font-size: 0.9em;
}

.quota-numbers-inline[b-uohrec7lr0] {
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
    font-weight: 600;
    color: var(--quota-text);
}

.quota-numbers-inline .quota-current[b-uohrec7lr0] {
    font-size: 1em;
}

.quota-numbers-inline .quota-separator[b-uohrec7lr0] {
    font-size: 0.85em;
}

.quota-numbers-inline .quota-max[b-uohrec7lr0] {
    font-size: 0.9em;
}

.quota-warning-icon[b-uohrec7lr0],
.quota-caution-icon[b-uohrec7lr0] {
    display: flex;
    align-items: center;
}

.quota-warning-icon[b-uohrec7lr0] {
    color: #c62828;
    animation: pulse-warning-b-uohrec7lr0 2s ease-in-out infinite;
}

.quota-caution-icon[b-uohrec7lr0] {
    color: #ef6c00;
}

/* =================================
   Badge Display Mode
   ================================= */
.quota-badge[b-uohrec7lr0] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: var(--quota-bg);
    border-radius: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--quota-text);
}

.quota-numbers-badge[b-uohrec7lr0] {
    white-space: nowrap;
}

.badge-icon[b-uohrec7lr0] {
    font-size: 0.85em;
}

.quota-state-over .badge-icon[b-uohrec7lr0] {
    animation: pulse-warning-b-uohrec7lr0 2s ease-in-out infinite;
}

/* =================================
   Stat Card Display Mode
   ================================= */
.quota-stat-card[b-uohrec7lr0] {
    text-align: left;
}

.quota-stat-card .stat-number[b-uohrec7lr0] {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--quota-text);
    line-height: 1.2;
}

.quota-stat-card .stat-label[b-uohrec7lr0] {
    display: block;
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.stat-progress-container[b-uohrec7lr0] {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.stat-progress-bar[b-uohrec7lr0] {
    height: 100%;
    background: var(--quota-color);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.stat-warning[b-uohrec7lr0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: #c62828;
    font-weight: 500;
}

/* =================================
   Responsive Breakpoints
   ================================= */
@media (max-width: 768px) {
    .quota-size-lg[b-uohrec7lr0] {
        font-size: 1rem;
    }
    
    .quota-current[b-uohrec7lr0] {
        font-size: 1.5em;
    }
    
    .quota-footer[b-uohrec7lr0] {
        flex-direction: column;
        gap: 0.35rem;
        align-items: flex-start;
    }
    
    .quota-upgrade-link[b-uohrec7lr0] {
        width: 100%;
        justify-content: center;
        padding: 0.35rem;
        background: var(--quota-bg);
        border-radius: 0.5rem;
    }
}

@media (max-width: 480px) {
    .quota-header[b-uohrec7lr0] {
        flex-wrap: wrap;
    }
    
    .quota-warning-badge[b-uohrec7lr0],
    .quota-limit-badge[b-uohrec7lr0] {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        margin-top: 0.35rem;
    }
    
    .quota-numbers[b-uohrec7lr0] {
        justify-content: center;
    }
}