/* custom.css - Kuwait Kennel Club Theme */

:root {
    --primary: #0a8a45; /* Green from Kuwait flag */
    --primary-light: #0fb755;
    --primary-dark: #076e37;
    --secondary: #ce1126; /* Red from Kuwait flag */
    --secondary-light: #e72d42;
    --secondary-dark: #a80d1e;
    --accent: #000000; /* Black from Kuwait flag */
    --light: #ffffff; /* White from Kuwait flag */
    --gray-light: #f5f7fa;
    --gray-medium: #e2e8f0;
    --gray-dark: #94a3b8;
}

/* Custom background patterns and elements */
.kuwait-pattern {
    background-color: var(--gray-light);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657l1.415 1.414L13.858 0H11.03zm32.284 0l6.364 6.364-1.414 1.414L41.2 0h2.112zm-24.596 0l-6.364 6.364 1.414 1.414L19.8 0h-1.082zM38.213 0l9.9 9.9-1.414 1.414L38.213 2.828 29.9 11.14l-1.414-1.414L38.213 0zm-16.97 0L11.343 9.9l1.414 1.414L21.244 2.828 29.557 11.14l1.414-1.414L21.244 0zm-8.485 0L0 5.373v2.827l6.97-6.97L6.97 0H2.758zM5.373 54.627l-.83-.828 1.415-1.415L8.2 54.627H5.374zm48.254 0l.83-.828-1.415-1.415-2.242 2.243h2.827zm-5.656 0l-3.657-3.657 1.414-1.414L51.8 54.627h-2.83zM11.03 54.627l3.657-3.657-1.414-1.414L8.2 54.627h2.83zm32.284 0l-6.364-6.364 1.414-1.414L46.143 54.627h-2.83zm-24.596 0l6.364-6.364-1.414-1.414L19.8 54.627h1.082zM38.213 54.627L28.9 45.313l1.414-1.414 7.899 7.9 7.9-7.9 1.414 1.414-9.9 9.9zm-16.97 0l9.9-9.9-1.414-1.414-7.9 7.9-7.9-7.9-1.414 1.414 9.9 9.9zm-8.485 0l-3.657-3.657v2.827l3.657 3.657h4.212L5.374 54.627zm45.426-8.485l-8.485 8.485h2.83l7.07-7.07-1.414-1.415zm-40.97 8.485l8.487-8.485-1.415-1.415-7.07 7.07v2.83zm32.484-8.485l-7.07 7.07 1.414 1.415 7.07-7.07-1.415-1.415zm-24.596 7.07l7.07-7.07-1.414-1.415-7.07 7.07 1.414 1.415z' fill='%230A8A45' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Enhanced hero section with Kuwait-inspired elements */
.hero-section {
    background-image: linear-gradient(
            135deg,
            rgba(10, 138, 69, 0.9) 0%,
            rgba(206, 17, 38, 0.8) 100%
        ),
        url("/static/images/kuwait-dog-flag.png");
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    min-height: 500px;
    border-bottom: 4px solid var(--primary);
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        125deg,
        rgba(10, 138, 69, 0.85) 0%,
        rgba(206, 17, 38, 0.75) 100%
    );
    backdrop-filter: blur(3px);
    z-index: 1;
}

/* Enhanced buttons with Kuwait theme */
.btn-kuwait {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.12);
}

.btn-kuwait:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
}

.btn-kuwait-primary {
    background-color: var(--primary);
    color: white;
}

.btn-kuwait-primary:hover {
    background-color: var(--primary-light);
}

.btn-kuwait-secondary {
    background-color: var(--secondary);
    color: white;
}

.btn-kuwait-secondary:hover {
    background-color: var(--secondary-light);
}

.btn-kuwait-outline {
    border: 2px solid var(--primary);
    color: var(--primary);
    background-color: transparent;
}

.btn-kuwait-outline:hover {
    background-color: var(--primary);
    color: white;
}

/* Card styles with Kuwait-inspired accents */
.dog-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-top: 3px solid var(--primary);
}

.dog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
}

.event-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-top: 3px solid var(--primary);
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
}

/* Form styling with Kuwait-inspired colors */
.form-control-kuwait {
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control-kuwait:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(10, 138, 69, 0.2);
    outline: none;
}

/* Custom section dividers with Kuwait-inspired patterns */
.section-divider-kuwait {
    height: 4px;
    background: linear-gradient(to right, var(--primary), var(--secondary));
    border-radius: 2px;
    margin: 2rem 0;
}

/* Badge styling */
.badge-fci {
    background-color: #3b82f6;
    color: white;
}

.badge-wusv {
    background-color: var(--primary);
    color: white;
}

.badge-premium {
    background: linear-gradient(135deg, #ffd700, #ffa500);
    color: #333;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Premium badge shimmer effect */
.badge-premium::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) rotate(30deg);
    }
    100% {
        transform: translateX(100%) rotate(30deg);
    }
}

/* Footer with Kuwait-inspired design */
.footer-kuwait {
    background-color: var(--accent);
    color: var(--light);
    border-top: 4px solid var(--primary);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .hero-section {
        min-height: 400px;
    }
}

/* National flag-inspired elements */
.kuwait-flag-colors {
    background: linear-gradient(
        to right,
        var(--primary) 33%,
        var(--light) 33%,
        var(--light) 66%,
        var(--secondary) 66%
    );
}

.kuwait-flag-triangle {
    position: relative;
}

.kuwait-flag-triangle::before {
    content: "";
    position: absolute;
    left: 0;
    width: 33%;
    height: 100%;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    background-color: var(--accent);
    z-index: 1;
}

/* Special animation for premium elements */
.premium-pulse {
    animation: premium-pulse 2s infinite;
}

@keyframes premium-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(10, 138, 69, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(10, 138, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(10, 138, 69, 0);
    }
}

/* Title underlines inspired by Kuwait flag */
.kuwait-title-underline {
    position: relative;
    padding-bottom: 0.5rem;
    
}

/* .kuwait-title-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 60px;
    background: linear-gradient(to right, var(--primary), var(--secondary));
    border-radius: 2px;
} */

/* Improved tab navigation */
.tab-kuwait {
    display: flex;
    background-color: var(--gray-light);
    border-radius: 12px;
    overflow: hidden;
    padding: 0.25rem;
}

.tab-kuwait .tab-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    text-align: center;
    color: var(--accent);
    transition: all 0.3s ease;
    border-radius: 8px;
    font-weight: 500;
}

.tab-kuwait .tab-btn.active {
    background-color: var(--primary);
    color: white;
}

/* Dog breed tags with Kuwait-inspired colors */
.breed-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    background-color: var(--primary);
}

/* Loading skeletons with Kuwait flag colors */
.skeleton {
    animation: skeleton-loading 1.5s infinite;
    background: linear-gradient(
        90deg,
        var(--gray-light) 25%,
        var(--gray-medium) 50%,
        var(--gray-light) 75%
    );
    background-size: 200% 100%;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Category pill buttons */
.pill-category {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.pill-category:hover {
    transform: translateY(-2px);
}

.pill-category-fci {
    background-color: #3b82f6;
    color: white;
}

.pill-category-wusv {
    background-color: var(--primary);
    color: white;
}

/* Special styles for premium cards */
.premium-card {
    position: relative;
    overflow: hidden;
}

.premium-card::before {
    content: "";
    position: absolute;
    top: -15px;
    right: -15px;
    background: var(--primary);
    width: 80px;
    height: 80px;
    transform: rotate(45deg);
    z-index: 1;
}

.premium-card::after {
    content: "★";
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 1rem;
    z-index: 2;
}

/* Custom progress bar with Kuwait colors */
.progress-bar-kuwait {
    height: 0.5rem;
    border-radius: 0.25rem;
    overflow: hidden;
    background-color: var(--gray-light);
}

.progress-bar-kuwait .progress {
    height: 100%;
    background: linear-gradient(to right, var(--primary), var(--primary-light));
}

/* Improved notification indicators */
.notification-dot-kuwait {
    position: relative;
}

.notification-dot-kuwait::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: var(--secondary);
    border-radius: 50%;
    border: 2px solid var(--light);
}

/* Enhanced Admin Event Management Styling */
.admin-manage-events {
    font-family: "Source Sans Pro", sans-serif;
    background-color: #f5f7fa;
    padding: 0 0 40px 0;
    margin: 0;
    color: #333;
}

.admin-manage-events .page-header {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 20px 30px;
    margin-bottom: 30px;
    border-bottom: 3px solid var(--primary);
}

.admin-manage-events .btn-add-event {
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s;
    text-decoration: none;
}

.admin-manage-events .btn-add-event:hover {
    background-color: var(--primary-light);
    transform: translateY(-2px);
}

.admin-manage-events .action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
}

.admin-manage-events .view-btn:hover {
    color: var(--primary);
    background-color: rgba(10, 138, 69, 0.1);
}

.admin-manage-events .edit-btn:hover {
    color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.1);
}

.admin-manage-events .delete-btn:hover {
    color: var(--secondary);
    background-color: rgba(206, 17, 38, 0.1);
}

.admin-manage-events .status-badge {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.admin-manage-events .upcoming-status {
    background-color: rgba(10, 138, 69, 0.1);
    color: var(--primary);
}

.admin-manage-events .ongoing-status {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.admin-manage-events .past-status {
    background-color: rgba(156, 163, 175, 0.1);
    color: #6b7280;
}

.admin-manage-events .cancelled-status {
    background-color: rgba(206, 17, 38, 0.1);
    color: var(--secondary);
}

/* Events Detail Page Styling */
.event-detail-page {
    background-color: #f8fafc;
    min-height: calc(100vh - 240px);
}

.event-detail-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.event-info {
    flex: 1;
}

.event-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 0.75rem;
}

.event-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.875rem;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.event-meta-item i {
    color: var(--primary);
}

.event-type.show {
    background-color: rgba(10, 138, 69, 0.1);
    color: var(--primary);
}

.event-type.event {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.event-type.meeting {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.event-status.upcoming {
    background-color: rgba(10, 138, 69, 0.1);
    color: var(--primary);
}

.event-status.ongoing {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.event-status.past {
    background-color: rgba(156, 163, 175, 0.1);
    color: #6b7280;
}

.event-status.cancelled {
    background-color: rgba(206, 17, 38, 0.1);
    color: var(--secondary);
}

.event-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Enhanced Button Styling for Event Pages */
.btn-register,
.btn-stats,
.btn-edit,
.btn-approval {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-register {
    background-color: var(--primary);
    color: white;
}

.btn-register:hover {
    background-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-stats {
    background-color: white;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.btn-stats:hover {
    background-color: #f9fafb;
    color: #1f2937;
    transform: translateY(-2px);
}

.btn-edit {
    background-color: #3b82f6;
    color: white;
}

.btn-edit:hover {
    background-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-approval {
    background-color: #8b5cf6;
    color: white;
}

.btn-approval:hover {
    background-color: #7c3aed;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Registration status badges */
.registration-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
}

.registration-status.pending {
    background-color: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.registration-status.approved {
    background-color: rgba(10, 138, 69, 0.1);
    color: var(--primary);
}

.registration-status.rejected {
    background-color: rgba(206, 17, 38, 0.1);
    color: var(--secondary);
}

/* Event Registration Form Styling */
.register-container {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-top: 2rem;
    border-top: 3px solid var(--primary);
}

.register-header {
    padding: 2rem;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.register-header h1 {
    font-size: 1.5rem;
    color: #111827;
    margin-bottom: 1rem;
}

.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.register-content {
    padding: 2rem;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
}

.register-info {
    background-color: #f9fafb;
    padding: 1.5rem;
    border-radius: 8px;
    height: fit-content;
}

.info-card {
    margin-bottom: 1.5rem;
}

.info-card h3 {
    font-size: 1rem;
    color: #111827;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.deadline-info,
.price-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

.deadline-info i,
.price-info i {
    color: var(--primary);
}

.registration-form {
    padding: 1.5rem;
    background-color: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #374151;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(10, 138, 69, 0.1);
    outline: none;
}

.form-text {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-cancel {
    padding: 0.625rem 1rem;
    background-color: white;
    color: #4b5563;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-cancel:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.btn-submit {
    padding: 0.625rem 1.25rem;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-submit:hover {
    background-color: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Enhanced Form Error Display */
.errors {
    margin-top: 0.5rem;
    color: var(--secondary);
    font-size: 0.75rem;
}

.errors span {
    display: block;
    margin-bottom: 0.25rem;
}

/* Status information box */
.status-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid #3b82f6;
}

.status-info h3 {
    color: #1f2937;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    border-bottom: none;
}

/* Admin Event Form Styling */
.admin-add-event,
.admin-edit-event {
    font-family: "Source Sans Pro", sans-serif;
    background-color: #f5f7fa;
    padding: 0 0 40px 0;
    color: #333;
}

.form-card {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
    border-top: 3px solid var(--primary);
}

.form-card-header {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.form-card-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(10, 138, 69, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.form-card-icon i {
    color: var(--primary);
    font-size: 18px;
}

.form-card-header h3 {
    margin: 0;
    font-size: 18px;
    color: #111827;
    font-weight: 600;
}

.form-card-body {
    padding: 24px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin: -12px;
    margin-bottom: 12px;
}

.form-group {
    flex: 1 0 0%;
    padding: 12px;
    min-width: 250px;
}

.form-group-full {
    flex: 0 0 100%;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #374151;
}

.required {
    color: var(--secondary);
    margin-left: 2px;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(10, 138, 69, 0.1);
    outline: none;
}

.form-text {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Custom CheckBoxes with Kuwait Color Theme */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin-right: 16px;
    cursor: pointer;
}

.checkbox-container input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    height: 20px;
    width: 20px;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    margin-right: 8px;
    transition: all 0.2s;
}

.checkbox-container:hover input ~ .checkmark {
    border-color: var(--primary);
}

.checkbox-container input:checked ~ .checkmark {
    background-color: var(--primary);
    border-color: var(--primary);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Custom Radio Buttons with Kuwait Color Theme */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 8px;
}

.radio-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

.radio-container input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radio-checkmark {
    height: 20px;
    width: 20px;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    margin-right: 8px;
    transition: all 0.2s;
}

.radio-container:hover input ~ .radio-checkmark {
    border-color: var(--primary);
}

.radio-container input:checked ~ .radio-checkmark {
    border-color: var(--primary);
}

.radio-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
}

.radio-container input:checked ~ .radio-checkmark:after {
    display: block;
}

/* Image Upload Styling with Kuwait Theme */
.image-upload-container {
    position: relative;
    height: 150px;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
}

.image-upload-container:hover {
    border-color: var(--primary);
}

.image-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10px;
    color: #6b7280;
}

.image-upload-placeholder i {
    font-size: 32px;
    color: var(--primary);
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.image-upload-container:hover .preview-overlay {
    opacity: 1;
}

.preview-overlay button {
    background-color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 5px;
}

.preview-overlay button i {
    color: #4b5563;
}

.preview-overlay button:hover i {
    color: var(--primary);
}

/* Markdown Editor Styling for Event Description */
.markdown-editor-container {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
}

.markdown-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.toolbar-btn {
    background-color: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.toolbar-btn:hover {
    background-color: rgba(10, 138, 69, 0.1);
}

.toolbar-btn i {
    color: #4b5563;
}

.toolbar-btn:hover i {
    color: var(--primary);
}

.toolbar-btn.active {
    background-color: rgba(10, 138, 69, 0.1);
}

.toolbar-btn.active i {
    color: var(--primary);
}

.markdown-editor {
    width: 100%;
    min-height: 200px;
    padding: 16px;
    font-family: monospace;
    resize: vertical;
    border: none;
}

.markdown-preview {
    padding: 16px;
    background-color: white;
}

.preview-mode .markdown-editor {
    display: none;
}

.preview-mode .markdown-preview {
    display: block;
}

.markdown-preview {
    display: none;
}

/* Enhanced Table Styling for Admin Pages */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.data-table th {
    padding: 12px 16px;
    text-align: left;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.data-table td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
    font-size: 14px;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background-color: #f3f4f6;
}

.data-table .sortable {
    cursor: pointer;
}

.data-table .sortable i {
    margin-left: 4px;
    color: #9ca3af;
}

.data-table .sortable.asc i:before {
    content: "\f0de";
}

.data-table .sortable.desc i:before {
    content: "\f0dd";
}

.data-table .actions-cell {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Search and Filter Components */
.search-container {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.search-input {
    padding: 10px 10px 10px 35px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    width: 250px;
    transition: all 0.2s;
}

.search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(10, 138, 69, 0.1);
    outline: none;
}

.filter-bar {
    background-color: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #4b5563;
    font-weight: 500;
}

.filter-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    background-color: white;
    cursor: pointer;
}

.date-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-input {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
}

.btn-filter,
.btn-clear-filter {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
}

.btn-filter {
    background-color: var(--primary);
    color: white;
    border: none;
}

.btn-filter:hover {
    background-color: var(--primary-light);
}

.btn-clear-filter {
    background-color: white;
    color: #4b5563;
    border: 1px solid #d1d5db;
    margin-left: 8px;
}

.btn-clear-filter:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

/* Pagination Controls */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}

.pagination-info {
    font-size: 14px;
    color: #4b5563;
}

.pagination-controls {
    display: flex;
    gap: 8px;
}

.pagination-page {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    color: #4b5563;
    background-color: white;
    border: 1px solid #d1d5db;
}

.pagination-page:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.pagination-page.active {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

.pagination-prev,
.pagination-next {
    padding: 0 12px;
    height: 36px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    color: #4b5563;
    background-color: white;
    border: 1px solid #d1d5db;
}

.pagination-prev:hover,
.pagination-next:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.pagination-prev.disabled,
.pagination-next.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modal Dialog Styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal-dialog {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(20px);
    transition: transform 0.3s;
}

.modal-overlay.show .modal-dialog {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #111827;
}

.close-modal {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    transition: all 0.2s;
}

.close-modal:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
}

/* Delete Confirmation Modal */
.event-to-delete {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.event-icon {
    font-size: 24px;
    color: var(--secondary);
    width: 48px;
    height: 48px;
    background-color: rgba(206, 17, 38, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.event-details h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #111827;
}

.event-details p {
    margin: 0 0 8px 0;
    color: #6b7280;
    font-size: 14px;
}

.btn-confirm-delete {
    background-color: var(--secondary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-confirm-delete:hover {
    background-color: var(--secondary-dark);
}

/* Form Action Buttons */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
}

.btn-submit,
.btn-cancel {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-submit {
    background-color: var(--primary);
    color: white;
    border: none;
}

.btn-submit:hover {
    background-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-cancel {
    background-color: white;
    color: #4b5563;
    border: 1px solid #d1d5db;
    text-decoration: none;
}

.btn-cancel:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        width: 100%;
    }

    .date-filter {
        width: 100%;
    }

    .btn-filter,
    .btn-clear-filter {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-actions {
        width: 100%;
        flex-direction: column;
    }

    .search-container,
    .search-input {
        width: 100%;
    }

    .btn-add-event {
        width: 100%;
        justify-content: center;
    }

    .form-row {
        flex-direction: column;
    }

    .form-group {
        flex: 0 0 100%;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn-submit,
    .btn-cancel {
        width: 100%;
        justify-content: center;
    }

    .event-header {
        flex-direction: column;
    }

    .event-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 16px;
    }

    .btn-register,
    .btn-stats,
    .btn-edit,
    .btn-approval {
        flex: 1;
        justify-content: center;
    }

    .event-content {
        grid-template-columns: 1fr;
    }

    .register-content {
        grid-template-columns: 1fr;
    }

    .pagination-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .pagination-controls {
        width: 100%;
        justify-content: center;
    }
}

/* Pet Profile Page Enhancements */
.pet-profile-container {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    border-top: 3px solid var(--primary);
}

.pet-profile-header {
    position: relative;
    height: 200px;
    background: linear-gradient(to right, var(--primary-dark), var(--primary));
    overflow: hidden;
}

.pet-profile-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657l1.415 1.414L13.858 0H11.03zm32.284 0l6.364 6.364-1.414 1.414L41.2 0h2.112zm-24.596 0l-6.364 6.364 1.414 1.414L19.8 0h-1.082zM38.213 0l9.9 9.9-1.414 1.414L38.213 2.828 29.9 11.14l-1.414-1.414L38.213 0zm-16.97 0L11.343 9.9l1.414 1.414L21.244 2.828 29.557 11.14l1.414-1.414L21.244 0zm-8.485 0L0 5.373v2.827l6.97-6.97L6.97 0H2.758zM5.373 54.627l-.83-.828 1.415-1.415L8.2 54.627H5.374zm48.254 0l.83-.828-1.415-1.415-2.242 2.243h2.827zm-5.656 0l-3.657-3.657 1.414-1.414L51.8 54.627h-2.83zM11.03 54.627l3.657-3.657-1.414-1.414L8.2 54.627h2.83zm32.284 0l-6.364-6.364 1.414-1.414L46.143 54.627h-2.83zm-24.596 0l6.364-6.364-1.414-1.414L19.8 54.627h1.082zM38.213 54.627L28.9 45.313l1.414-1.414 7.899 7.9 7.9-7.9 1.414 1.414-9.9 9.9zm-16.97 0l9.9-9.9-1.414-1.414-7.9 7.9-7.9-7.9-1.414 1.414 9.9 9.9zm-8.485 0l-3.657-3.657v2.827l3.657 3.657h4.212L5.374 54.627z' fill='%23FFFFFF' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E")
        center/cover;
}

.pet-profile-avatar {
    position: absolute;
    bottom: -50px;
    left: 50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid white;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 10;
}

.pet-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-profile-info {
    padding: 70px 30px 30px;
}

.pet-profile-name {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--accent);
}

.pet-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 1.5rem;
}

.pet-profile-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: var(--gray-light);
    border-radius: 30px;
    font-size: 0.875rem;
}

.pet-profile-meta-item i {
    color: var(--primary);
}

.pet-profile-meta-item.breed {
    background-color: rgba(10, 138, 69, 0.1);
    color: var(--primary);
}

.pet-profile-meta-item.gender {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.pet-profile-meta-item.age {
    background-color: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.pet-profile-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-medium);
    margin-bottom: 1.5rem;
}

.pet-profile-tab {
    padding: 1rem 1.5rem;
    color: var(--gray-dark);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.pet-profile-tab:hover {
    color: var(--primary);
}

.pet-profile-tab.active {
    color: var(--primary);
}

.pet-profile-tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary);
    border-radius: 3px 3px 0 0;
}

.pet-profile-content {
    padding: 0 30px 30px;
}

.pet-profile-section {
    margin-bottom: 2rem;
}

.pet-profile-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-medium);
    color: var(--accent);
}

/* Pedigree Chart Styling */
.pedigree-container {
    overflow-x: auto;
    padding: 1.5rem;
    background-color: var(--gray-light);
    border-radius: 8px;
}

.pedigree-chart {
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    grid-auto-rows: minmax(80px, auto);
    gap: 20px;
}

.pedigree-node {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    padding: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease;
    border-left: 3px solid var(--primary);
}

.pedigree-node:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.pedigree-node.male {
    border-left-color: #3b82f6;
}

.pedigree-node.female {
    border-left-color: var(--secondary);
}

.pedigree-node-name {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 0.875rem;
}

.pedigree-node-details {
    font-size: 0.75rem;
    color: var(--gray-dark);
}

/* Awards and Achievements Section */
.awards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.award-card {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border-top: 3px solid var(--primary);
}

.award-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.award-header {
    background: linear-gradient(
        135deg,
        var(--primary) 0%,
        var(--primary-dark) 100%
    );
    padding: 15px;
    color: white;
}

.award-badge {
    background-color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.award-badge i {
    font-size: 1.5rem;
    color: var(--primary);
}

.award-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.award-event {
    font-size: 0.75rem;
    opacity: 0.8;
}

.award-content {
    padding: 15px;
}

.award-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--gray-dark);
    margin-bottom: 10px;
}

.award-description {
    font-size: 0.875rem;
    color: var(--accent);
    line-height: 1.5;
}

/* Health Records Section */
.health-records {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.health-record-item {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid var(--gray-medium);
}

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

.health-record-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(10, 138, 69, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.health-record-icon i {
    color: var(--primary);
}

.health-record-info {
    flex: 1;
}

.health-record-title {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 0.875rem;
}

.health-record-date {
    font-size: 0.75rem;
    color: var(--gray-dark);
    margin-bottom: 5px;
}

.health-record-description {
    font-size: 0.75rem;
    color: var(--accent);
    line-height: 1.5;
}

/* Kuwait-themed Gallery */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.gallery-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover::after {
    opacity: 1;
}

/* Kennel Pages Enhanced Styling */
.kennel-header {
    position: relative;
    height: 300px;
    background: linear-gradient(to right, var(--primary-dark), var(--primary));
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.kennel-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657l1.415 1.414L13.858 0H11.03zm32.284 0l6.364 6.364-1.414 1.414L41.2 0h2.112zm-24.596 0l-6.364 6.364 1.414 1.414L19.8 0h-1.082zM38.213 0l9.9 9.9-1.414 1.414L38.213 2.828 29.9 11.14l-1.414-1.414L38.213 0zm-16.97 0L11.343 9.9l1.414 1.414L21.244 2.828 29.557 11.14l1.414-1.414L21.244 0zm-8.485 0L0 5.373v2.827l6.97-6.97L6.97 0H2.758zM5.373 54.627l-.83-.828 1.415-1.415L8.2 54.627H5.374zm48.254 0l.83-.828-1.415-1.415-2.242 2.243h2.827zm-5.656 0l-3.657-3.657 1.414-1.414L51.8 54.627h-2.83zM11.03 54.627l3.657-3.657-1.414-1.414L8.2 54.627h2.83zm32.284 0l-6.364-6.364 1.414-1.414L46.143 54.627h-2.83zm-24.596 0l6.364-6.364-1.414-1.414L19.8 54.627h1.082zM38.213 54.627L28.9 45.313l1.414-1.414 7.899 7.9 7.9-7.9 1.414 1.414-9.9 9.9zm-16.97 0l9.9-9.9-1.414-1.414-7.9 7.9-7.9-7.9-1.414 1.414 9.9 9.9zm-8.485 0l-3.657-3.657v2.827l3.657 3.657h4.212L5.374 54.627z' fill='%23FFFFFF' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E")
        center/cover;
}

.kennel-logo {
    position: absolute;
    bottom: -50px;
    left: 50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid white;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 10;
}

.kennel-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kennel-info-container {
    background-color: white;
    padding: 70px 50px 50px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.kennel-name {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--accent);
}

.kennel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.kennel-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: var(--gray-light);
    border-radius: 30px;
    font-size: 0.875rem;
}

.kennel-meta-item i {
    color: var(--primary);
}

.kennel-meta-item.location {
    background-color: rgba(10, 138, 69, 0.1);
    color: var(--primary);
}

.kennel-meta-item.established {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.kennel-meta-item.fci {
    background-color: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.kennel-meta-item.wusv {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.kennel-description {
    margin-bottom: 30px;
    line-height: 1.6;
    color: #4b5563;
}

.kennel-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--gray-medium);
    margin-bottom: 30px;
    padding-bottom: 1px;
    scroll-behavior: smooth;
}

.kennel-tab {
    padding: 12px 20px;
    color: var(--gray-dark);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.kennel-tab:hover {
    color: var(--primary);
}

.kennel-tab.active {
    color: var(--primary);
}

.kennel-tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary);
    border-radius: 3px 3px 0 0;
}

/* Improved Responsive Design */
@media (max-width: 1024px) {
    .pet-profile-avatar,
    .kennel-logo {
        width: 120px;
        height: 120px;
        bottom: -40px;
        left: 40px;
    }

    .pet-profile-info,
    .kennel-info-container {
        padding-top: 50px;
    }

    .pet-profile-name,
    .kennel-name {
        font-size: 1.75rem;
    }

    .pedigree-chart {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .pet-profile-header,
    .kennel-header {
        height: 180px;
    }

    .pet-profile-avatar,
    .kennel-logo {
        width: 100px;
        height: 100px;
        bottom: -30px;
        left: 30px;
        border-width: 3px;
    }

    .pet-profile-info,
    .kennel-info-container {
        padding: 40px 20px 20px;
    }

    .pet-profile-name,
    .kennel-name {
        font-size: 1.5rem;
    }

    .pedigree-chart {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .awards-container {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .form-row {
        flex-direction: column;
    }

    .form-group {
        min-width: auto;
    }

    .pet-profile-tabs,
    .kennel-tabs {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
    }
}

@media (max-width: 640px) {
    .pet-profile-avatar,
    .kennel-logo {
        left: 50%;
        transform: translateX(-50%);
    }

    .pet-profile-info,
    .kennel-info-container {
        padding-top: 80px;
        text-align: center;
    }

    .pet-profile-meta,
    .kennel-meta {
        justify-content: center;
    }

    .pedigree-chart {
        grid-template-columns: 1fr;
    }

    .gallery-container {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .pet-profile-tabs,
    .kennel-tabs {
        justify-content: center;
    }
}

/* Flag-inspired loader */
.kuwait-loader {
    width: 50px;
    height: 50px;
    margin: 20px auto;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    animation: spin 1.5s linear infinite;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.kuwait-loader::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        var(--primary) 0%,
        var(--primary) 33.33%,
        white 33.33%,
        white 66.66%,
        var(--secondary) 66.66%,
        var(--secondary) 100%
    );
}

.kuwait-loader::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 33.33%;
    height: 100%;
    background-color: var(--accent);
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Authentication pages styling */
.auth-container {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-light);
}

.auth-card {
    width: 100%;
    max-width: 480px;
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-top: 4px solid var(--primary);
}

.auth-header {
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--gray-medium);
}

.auth-logo {
    margin-bottom: 1rem;
}

.auth-logo img {
    height: 60px;
    width: auto;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--accent);
}

.auth-subtitle {
    font-size: 0.875rem;
    color: var(--gray-dark);
}

.auth-body {
    padding: 2rem;
}

.auth-footer {
    padding: 1.5rem;
    text-align: center;
    background-color: var(--gray-light);
    border-top: 1px solid var(--gray-medium);
}

.auth-footer-text {
    font-size: 0.875rem;
    color: var(--gray-dark);
}

.auth-footer-link {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.auth-footer-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.social-login {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.social-btn.google {
    background-color: white;
    color: #4285f4;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.social-btn.google:hover {
    background-color: #f9fafb;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.social-btn.facebook {
    background-color: #1877f2;
    color: white;
    border: none;
}

.social-btn.facebook:hover {
    background-color: #166fe5;
}

.or-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
}

.or-divider::before,
.or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--gray-medium);
}

.or-divider span {
    padding: 0 1rem;
    color: var(--gray-dark);
    font-size: 0.875rem;
}

/* Improved notification system */
.notification-center {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 350px;
    max-width: calc(100vw - 2rem);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notification {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    animation: slide-in 0.3s ease forwards;
    max-height: 0;
    opacity: 0;
}

@keyframes slide-in {
    0% {
        max-height: 0;
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        max-height: 200px;
        opacity: 1;
        transform: translateX(0);
    }
}

.notification-dismiss {
    animation: slide-out 0.3s ease forwards;
}

@keyframes slide-out {
    0% {
        max-height: 200px;
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        max-height: 0;
        opacity: 0;
        transform: translateX(100%);
    }
}

.notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    flex-shrink: 0;
}

.notification-icon i {
    font-size: 1.25rem;
}

.notification.success .notification-icon {
    background-color: var(--primary);
    color: white;
}

.notification.error .notification-icon {
    background-color: var(--secondary);
    color: white;
}

.notification.warning .notification-icon {
    background-color: #f59e0b;
    color: white;
}

.notification.info .notification-icon {
    background-color: #3b82f6;
    color: white;
}

.notification-content {
    flex: 1;
    padding: 0.75rem 1rem;
}

.notification-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    color: var(--accent);
}

.notification-message {
    font-size: 0.75rem;
    color: var(--gray-dark);
    line-height: 1.4;
}

.notification-close {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    color: var(--gray-dark);
    cursor: pointer;
    transition: color 0.2s;
}

.notification-close:hover {
    color: var(--accent);
}

/* Improved Print Styles for certificates and documents */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        background-color: #fff;
        margin: 0;
        padding: 0;
    }

    .print-certificate {
        border: 1px solid #ccc;
        border-radius: 0;
        box-shadow: none;
        page-break-inside: avoid;
    }

    .print-certificate header {
        background-color: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .print-certificate .kuwait-pattern {
        background-color: #f9f9f9 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .certificate-border {
        border: 1px solid #ccc !important;
    }
}

/* New Styles for Puppies Table */
.puppies-table-container {
    margin-top: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

#puppies-table {
    width: 100%;
    border-collapse: collapse;
}

#puppies-table th {
    background-color: #f8f9fa;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #495057;
}

#puppies-table td {
    padding: 8px 12px;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}

#puppies-table input,
#puppies-table select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

#puppies-table input:focus,
#puppies-table select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.puppies-count-control {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.puppies-count-control .input-group {
    max-width: 200px;
}

.table-responsive {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.required {
    color: #dc3545;
    font-weight: bold;
}

/* Custom styles for litter registration form */
.litter-registration-form .steps-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.litter-registration-form .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.litter-registration-form .step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f3f4f6;
    border: 2px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.litter-registration-form .step-text {
    font-size: 0.875rem;
    color: #4b5563;
    transition: all 0.3s ease;
}

.litter-registration-form .step-connector {
    flex-grow: 1;
    height: 2px;
    background-color: #d1d5db;
    margin: 0 0.5rem;
}

.litter-registration-form .step-item.active .step-circle {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
}

.litter-registration-form .step-item.active .step-text {
    color: var(--primary);
    font-weight: 600;
}

.litter-registration-form .form-control {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm;
    padding: 0.5rem 0.75rem;
}

.litter-registration-form select.form-control {
    @apply bg-white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.litter-registration-form .form-control.is-invalid {
    @apply border-red-500;
}

.litter-registration-form .invalid-feedback {
    @apply text-red-500 text-sm mt-1;
    display: none;
}

.litter-registration-form .form-control.is-invalid + .invalid-feedback {
    display: block;
}

.litter-registration-form .was-validated .form-control:invalid {
    @apply border-red-500;
}

.litter-registration-form
    .was-validated
    .form-control:invalid
    + .invalid-feedback {
    display: block;
}

.litter-registration-form .form-group {
    @apply mb-4;
}

.litter-registration-form label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.litter-registration-form .btn {
    @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.litter-registration-form .btn-primary {
    @apply bg-primary text-white hover:bg-primary/90 focus:ring-primary;
}

.litter-registration-form .btn-secondary {
    @apply bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-500;
}

.litter-registration-form .btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.litter-registration-form .card {
    @apply bg-white overflow-hidden shadow rounded-lg;
}

.litter-registration-form .card-header {
    @apply px-4 py-5 sm:px-6 border-b border-gray-200;
}

.litter-registration-form .card-body {
    @apply px-4 py-5 sm:p-6;
}

.litter-registration-form .card-footer {
    @apply px-4 py-3 sm:px-6 bg-gray-50 border-t border-gray-200;
}

.litter-registration-form .alert {
    @apply rounded-md p-4 mb-4;
}

.litter-registration-form .alert-info {
    @apply bg-blue-50 text-blue-700;
}

.litter-registration-form .alert-warning {
    @apply bg-yellow-50 text-yellow-700;
}

.litter-registration-form .table {
    @apply min-w-full divide-y divide-gray-200;
}

.litter-registration-form .table th {
    @apply px-3 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.litter-registration-form .table td {
    @apply px-3 py-2 whitespace-nowrap text-sm text-gray-500;
}

.litter-registration-form .table-bordered {
    @apply border border-gray-200;
}

.litter-registration-form .table-bordered th,
.litter-registration-form .table-bordered td {
    @apply border border-gray-200;
}

.litter-registration-form .table-responsive {
    @apply overflow-x-auto;
}

.litter-registration-form .input-group {
    @apply flex rounded-md shadow-sm;
}

.litter-registration-form .input-group-prepend {
    @apply inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm;
}

.litter-registration-form .input-group .form-control {
    @apply flex-1 min-w-0 rounded-none rounded-r-md;
}

.litter-registration-form .img-thumbnail {
    @apply max-w-xs rounded border border-gray-200 p-1;
}

/* Additional container classes for Bootstrap-like grid */
.litter-registration-form .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.litter-registration-form .row {
    @apply flex flex-wrap -mx-4;
}

.litter-registration-form .col-12 {
    @apply w-full px-4;
}

.litter-registration-form .col-md-4 {
    @apply w-full px-4 md:w-1/3;
}

.litter-registration-form .col-md-6 {
    @apply w-full px-4 md:w-1/2;
}

.litter-registration-form .col-md-8 {
    @apply w-full px-4 md:w-2/3;
}

.litter-registration-form .text-right {
    @apply text-right;
}

.litter-registration-form .mb-3 {
    @apply mb-3;
}

.litter-registration-form .mb-4 {
    @apply mb-4;
}

.litter-registration-form .mt-3 {
    @apply mt-3;
}

.litter-registration-form .mt-4 {
    @apply mt-4;
}

.litter-registration-form .text-center {
    @apply text-center;
}

.litter-registration-form .text-muted {
    @apply text-gray-500;
}

.litter-registration-form .font-weight-bold {
    @apply font-bold;
}

.litter-registration-form .border-primary {
    @apply border-primary;
}

.litter-registration-form .border-danger {
    @apply border-red-500;
}

.litter-registration-form .bg-primary {
    @apply bg-primary;
}

.litter-registration-form .bg-danger {
    @apply bg-red-500;
}

.litter-registration-form .bg-light {
    @apply bg-gray-50;
}

.litter-registration-form .text-white {
    @apply text-white;
}

.litter-registration-form small.form-text {
    @apply text-xs mt-1 block;
}

.litter-registration-form .d-flex {
    @apply flex;
}

.litter-registration-form .justify-content-between {
    @apply justify-between;
}

.litter-registration-form h5.mb-0 {
    @apply text-lg font-medium m-0;
}

.litter-registration-form h6 {
    @apply text-base font-medium;
}

.litter-registration-form .table-sm td,
.litter-registration-form .table-sm th {
    @apply py-1 px-2;
}

/* Add JavaScript for Litter Registration Form */
document.addEventListener("DOMContentLoaded", function() {
    // Only execute this code on the litter registration page
    if (document.querySelector('.litter-registration-form')) {
        // Initialize form validation
        var forms = document.getElementsByClassName("needs-validation");
        Array.prototype.filter.call(forms, function(form) {
            form.addEventListener("submit", function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add("was-validated");
            }, false);
        });

        // Multi-step form navigation
        const nextButtons = document.querySelectorAll(".next-step");
        const prevButtons = document.querySelectorAll(".prev-step");
        const formSteps = document.querySelectorAll(".form-step");
        const stepItems = document.querySelectorAll(".step-item");

        // Next step button click handler
        nextButtons.forEach(function(button) {
            button.addEventListener("click", function() {
                const currentStep = this.closest(".form-step");
                const nextStep = currentStep.nextElementSibling;
                const currentStepNumber = parseInt(
                    currentStep.getAttribute("id").replace("step", "")
                );

                // Validate current step fields
                let isValid = true;
                currentStep.querySelectorAll(":required").forEach(function(input) {
                    if (!input.value) {
                        isValid = false;
                        input.classList.add("is-invalid");
                    } else {
                        input.classList.remove("is-invalid");
                    }
                });

                // Additional validation for specific steps
                if (currentStepNumber === 2) {
                    const males = parseInt(document.getElementById("number_of_males").value) || 0;
                    const females = parseInt(document.getElementById("number_of_females").value) || 0;
                    const total = parseInt(document.getElementById("number_of_pups").value) || 0;

                    if (males + females !== total) {
                        isValid = false;
                        document.getElementById("number_of_males").classList.add("is-invalid");
                        document.getElementById("number_of_females").classList.add("is-invalid");
                    }
                }

                if (isValid) {
                    // Hide current step, show next step
                    currentStep.style.display = "none";
                    nextStep.style.display = "block";

                    // Update step indicator
                    stepItems.forEach(function(item) {
                        item.classList.remove("active");
                    });
                    
                    document.querySelector(`.step-item[data-step="${currentStepNumber + 1}"]`).classList.add("active");

                    // If moving to puppies step, generate puppy rows
                    if (currentStepNumber === 2) {
                        generatePuppyRows();
                    }

                    // If moving to review step, populate review information
                    if (currentStepNumber === 3) {
                        populateReviewData();
                    }

                    // Scroll to top
                    window.scrollTo(0, 0);
                }
            });
        });

        // Previous step button click handler
        prevButtons.forEach(function(button) {
            button.addEventListener("click", function() {
                const currentStep = this.closest(".form-step");
                const prevStep = currentStep.previousElementSibling;
                const currentStepNumber = parseInt(
                    currentStep.getAttribute("id").replace("step", "")
                );

                // Hide current step, show previous step
                currentStep.style.display = "none";
                prevStep.style.display = "block";

                // Update step indicator
                stepItems.forEach(function(item) {
                    item.classList.remove("active");
                });
                
                document.querySelector(`.step-item[data-step="${currentStepNumber - 1}"]`).classList.add("active");

                // Scroll to top
                window.scrollTo(0, 0);
            });
        });

        // Handle number of puppies input
        const numberOfPupsInput = document.getElementById("number_of_pups");
        if (numberOfPupsInput) {
            numberOfPupsInput.addEventListener("change", function() {
                // Update male/female counts if needed
                const total = parseInt(this.value) || 0;
                const males = parseInt(document.getElementById("number_of_males").value) || 0;
                const females = parseInt(document.getElementById("number_of_females").value) || 0;

                // If males + females doesn't match total, reset them
                if (males + females !== total) {
                    document.getElementById("number_of_males").value = "";
                    document.getElementById("number_of_females").value = "";
                }
            });
        }

        // Handle Matting selection
        const parentMeetingSelect = document.getElementById("parent_meeting_id");
        if (parentMeetingSelect) {
            parentMeetingSelect.addEventListener("change", function() {
                const meetingId = this.value;
                if (meetingId) {
                    // Fetch meeting data via AJAX
                    fetch(`/api/parent_meeting/${meetingId}`)
                        .then(response => response.json())
                        .then(data => {
                            // Populate sire data
                            document.getElementById("sire-img").src = data.sire.photo_url || "/static/images/dog-silhouette.png";
                            document.getElementById("sire-name").textContent = data.sire.name;
                            document.getElementById("sire-breed").textContent = data.sire.breed;
                            document.getElementById("sire-pedigree").textContent = data.sire.pedigree_number || "N/A";
                            document.getElementById("sire_pet_id").value = data.sire.id;

                            // Populate dam data
                            document.getElementById("dam-img").src = data.dam.photo_url || "/static/images/dog-silhouette.png";
                            document.getElementById("dam-name").textContent = data.dam.name;
                            document.getElementById("dam-breed").textContent = data.dam.breed;
                            document.getElementById("dam-pedigree").textContent = data.dam.pedigree_number || "N/A";
                            document.getElementById("dam_pet_id").value = data.dam.id;
                        })
                        .catch(error => {
                            console.error("Error fetching Matting data:", error);
                        });
                } else {
                    // Clear sire and dam data
                    clearParentData();
                }
            });
        }

        // Function to clear parent data
        function clearParentData() {
            document.getElementById("sire-img").src = "/static/images/dog-silhouette.png";
            document.getElementById("sire-name").textContent = "";
            document.getElementById("sire-breed").textContent = "";
            document.getElementById("sire-pedigree").textContent = "";
            document.getElementById("sire_pet_id").value = "";

            document.getElementById("dam-img").src = "/static/images/dog-silhouette.png";
            document.getElementById("dam-name").textContent = "";
            document.getElementById("dam-breed").textContent = "";
            document.getElementById("dam-pedigree").textContent = "";
            document.getElementById("dam_pet_id").value = "";
        }

        // Function to generate puppy form rows based on count
        function generatePuppyRows() {
            const totalPuppies = parseInt(document.getElementById("number_of_pups").value) || 0;
            const puppiesTableBody = document.getElementById("puppies-table-body");
            const males = parseInt(document.getElementById("number_of_males").value) || 0;
            const females = parseInt(document.getElementById("number_of_females").value) || 0;

            // Clear existing rows
            puppiesTableBody.innerHTML = "";

            // Generate row for each puppy
            for (let i = 0; i < totalPuppies; i++) {
                const gender = i < males ? "Male" : "Female";
                const row = document.createElement("tr");
                
                row.innerHTML = `
                    <td>${i + 1}</td>
                    <td>
                        <input type="text" class="form-control" name="puppy_name_${i}" required>
                    </td>
                    <td>
                        <select class="form-control" name="puppy_gender_${i}" required>
                            <option value="${gender}" selected>${gender}</option>
                            <option value="${gender === 'Male' ? 'Female' : 'Male'}">${gender === 'Male' ? 'Female' : 'Male'}</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" class="form-control" name="puppy_color_${i}" required>
                    </td>
                    <td>
                        <input type="text" class="form-control" name="puppy_markings_${i}">
                    </td>
                    <td>
                        <input type="text" class="form-control" name="puppy_microchip_${i}">
                    </td>
                    <td>
                        <select class="form-control" name="puppy_document_type_${i}">
                            <option value="">None</option>
                            <option value="Pedigree">Pedigree</option>
                            <option value="Registration">Registration</option>
                        </select>
                    </td>
                `;
                
                puppiesTableBody.appendChild(row);
            }
        }

        // Function to populate review data
        function populateReviewData() {
            // Populate parents data
            document.getElementById("review-sire").textContent = document.getElementById("sire-name").textContent;
            document.getElementById("review-dam").textContent = document.getElementById("dam-name").textContent;
            
            // Populate litter details
            document.getElementById("review-date-of-birth").textContent = document.getElementById("date_of_birth").value;
            document.getElementById("review-date-of-mating").textContent = document.getElementById("date_of_mating").value || "Not provided";
            document.getElementById("review-breed").textContent = document.getElementById("breed").value;
            document.getElementById("review-coat").textContent = document.getElementById("coat").value || "Not provided";
            document.getElementById("review-kennel").textContent = 
                document.getElementById("kennel_name").options[document.getElementById("kennel_name").selectedIndex].text;
            
            // Populate puppies counts
            document.getElementById("review-total-puppies").textContent = document.getElementById("number_of_pups").value;
            document.getElementById("review-males").textContent = document.getElementById("number_of_males").value;
            document.getElementById("review-females").textContent = document.getElementById("number_of_females").value;
            
            // Populate puppies table
            const puppiesTableBody = document.getElementById("puppies-table-body");
            const reviewTableBody = document.getElementById("review-puppies-table-body");
            reviewTableBody.innerHTML = "";

            // For each puppy row, create a review row
            Array.from(puppiesTableBody.rows).forEach((row, index) => {
                const inputs = row.querySelectorAll("input, select");
                const name = inputs[0].value;
                const gender = inputs[1].value;
                const color = inputs[2].value;
                const marks = inputs[3].value || "None";
                const microchip = inputs[4].value || "None";
                const docTypeSelect = inputs[5];
                const docType = docTypeSelect.options[docTypeSelect.selectedIndex].text;
                
                const reviewRow = document.createElement("tr");
                reviewRow.innerHTML = `
                    <td>${index + 1}</td>
                    <td>${name}</td>
                    <td>${gender}</td>
                    <td>${color}</td>
                    <td>${marks}</td>
                    <td>${microchip}</td>
                    <td>${docType}</td>
                `;
                
                reviewTableBody.appendChild(reviewRow);
            });
        }
    }
});