/* Base styles */
body {
    font-family: 'Nunito', sans-serif;
    background-color: #f8f9fa;
    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%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f0f0f0' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

h1, h2, h3, .navbar-brand {
    font-family: 'Indie Flower', cursive;
}

/* Card styles */
.card {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 6px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

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

.card-title {
    font-size: 1.5rem;
    color: #ff6b6b;
}

.animal-img {
    height: 200px;
    object-fit: cover;
    transition: all 0.3s ease;
}

.card:hover .animal-img {
    transform: scale(1.05);
}

.user-img-small {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
}

.user-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 15px;
    border: 5px solid #ffbe76;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.pet-detail-img {
    max-height: 400px;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Navbar styling */
.navbar {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.navbar-brand {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.nav-link {
    font-weight: 600;
    color: #fff !important;
    position: relative;
    padding: 0.5rem 1rem;
    margin: 0 0.2rem;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Button styles */
.btn {
    border-radius: 25px;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #55efc4 !important;
    border-color: #55efc4 !important;
    color: #2d3436 !important;
}

.btn-primary:hover {
    background-color: #00b894 !important;
    border-color: #00b894 !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(0,0,0,0.1);
}

.btn-info {
    background-color: #74b9ff !important;
    border-color: #74b9ff !important;
    color: #fff !important;
}

.btn-info:hover {
    background-color: #0984e3 !important;
    border-color: #0984e3 !important;
}

.btn-success {
    background-color: #ffeaa7 !important;
    border-color: #ffeaa7 !important;
    color: #2d3436 !important;
}

.btn-success:hover {
    background-color: #fdcb6e !important;
    border-color: #fdcb6e !important;
}

.btn-secondary {
    background-color: #a29bfe !important;
    border-color: #a29bfe !important;
}

.btn-secondary:hover {
    background-color: #6c5ce7 !important;
    border-color: #6c5ce7 !important;
}

.btn-danger {
    background-color: #ff7675 !important;
    border-color: #ff7675 !important;
}

.btn-danger:hover {
    background-color: #d63031 !important;
    border-color: #d63031 !important;
}

/* Badge styling */
.badge {
    padding: 0.5em 0.8em;
    border-radius: 12px;
    font-weight: 600;
}

.bg-success {
    background-color: #55efc4 !important;
    color: #2d3436 !important;
}

.bg-secondary {
    background-color: #a29bfe !important;
}

/* Footer styling */
footer {
    background: linear-gradient(135deg, #fad0c4 0%, #ff9a9e 100%) !important;
    color: #fff !important;
    padding: 1.5rem 0 !important;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
    margin-top: 4rem !important;
}

/* Form styling */
.form-control {
    border-radius: 10px;
    padding: 0.8rem 1rem;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #a29bfe;
    box-shadow: 0 0 0 0.25rem rgba(162, 155, 254, 0.25);
}

.card-header {
    font-size: 1.5rem;
    padding: 1rem 1.5rem;
}

/* Welcome page styling */
.welcome-container {
    background-color: #fff;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.welcome-title {
    font-size: 3.5rem;
    color: #ff6b6b;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.welcome-subtitle {
    font-size: 1.5rem;
    color: #636e72;
    margin-bottom: 2rem;
}

.paw-print-container {
    margin-bottom: 1.5rem;
}

.paw-icon {
    font-size: 4rem;
    color: #ff6b6b;
    background-color: #ffeaa7;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    display: inline-block;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}

.wobble-btn {
    display: inline-block;
    position: relative;
    transition: transform 0.3s ease;
    transform-origin: center;
    font-size: 1.25rem;
}

.wobble-btn:hover {
    animation: wobble 1s 1;
}

@keyframes wobble {
    0% { transform: translateX(0%); }
    15% { transform: translateX(-15%) rotate(-5deg); }
    30% { transform: translateX(10%) rotate(3deg); }
    45% { transform: translateX(-7%) rotate(-3deg); }
    60% { transform: translateX(5%) rotate(2deg); }
    75% { transform: translateX(-3%) rotate(-1deg); }
    100% { transform: translateX(0%); }
}

/* Pet silhouettes */
.pet-silhouettes {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: -1;
}

.pet {
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    opacity: 0.2;
    transform-origin: bottom center;
}

.dog {
    left: 10%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23a29bfe' d='M496 96h-64l-7.16-14.31A32 32 0 0 0 396.22 64H342.6l-27.28-27.28C305.23 26.64 288 33.78 288 48.03v149.84l128 45.71V208h32c35.35 0 64-28.65 64-64v-32c0-8.84-7.16-16-16-16zm-112 48c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16zM96 224c-17.64 0-32-14.36-32-32 0-17.67-14.33-32-32-32S0 174.33 0 192c0 41.66 26.83 76.85 64 90.1V496c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V384h160v112c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V277.55L266.05 224H96z'/%3E%3C/svg%3E");
    animation: petWalk 15s linear infinite;
}

.cat {
    left: 30%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ff9a9e' d='M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z'/%3E%3C/svg%3E");
    animation: petWalk 20s linear infinite;
    animation-delay: 2s;
}

.bird {
    left: 60%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2355efc4' d='M512 0C460.22 3.56 96.44 38.2 71.01 287.61c-3.09 26.66-4.84 53.44-5.99 80.24l178.87-178.69c6.25-6.25 16.4-6.25 22.65 0s6.25 16.38 0 22.63L7.04 471.03c-9.38 9.37-9.38 24.57 0 33.94 9.38 9.37 24.59 9.37 33.98 0l57.13-57.07c42.43 16.85 84.48 25.11 114.37 25.11 75.86 0 236.25-100.34 236.25-283.98V0h63.96V245.1c0 2.8-28.55 92.77-33.66 106.61h63.66c0-145.1-52.41-215.04-52.41-215.04 2.28 22.97 3.3 45.29 3.3 66.91 0 72.35-61.74 143.4-171.6 143.4-8.3 0-16.75-.65-25.21-1.95C106.4 279.1 41.92 142.4 32 96c222.56 97.41 310.08 124.15 351.45 124.15 5.87 0 10.63-.42 14.56-1.27-15.14-1.23-29.39-9.52-43.33-17.07C329.61 187.17 301.16 174 256 174c-45.49 0-73.82 13.06-98.62 27.25-34.47 19.73-63.94 36.68-149.69 36.68-6.14 0-12.41-.1-18.8-.31C12.78 109.93 136.24 39.32 512 0z'/%3E%3C/svg%3E");
    animation: petWalk 12s linear infinite;
    animation-delay: 1s;
}

.rabbit {
    left: 80%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23fdcb6e' d='M464 192h-96c0 70.69-57.31 128-128 128-70.69 0-128-57.31-128-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h16c0 80.98 50.2 150.11 121.13 178.32-12.76 16.87-21.72 36.8-24.95 58.69-1.46 9.92 6.04 18.98 16.07 18.98h223.5c10.03 0 17.53-9.06 16.07-18.98-3.22-21.89-12.19-41.82-24.95-58.69C429.8 406.11 480 336.98 480 256h16c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm-224 96c-53.02 0-96-42.98-96-96h192c0 53.02-42.98 96-96 96zm-64-192c0-35.29 28.71-64 64-64 35.29 0 64 28.71 64 64v32H176v-32zm384-96c0-35.29-28.71-64-64-64-35.29 0-64 28.71-64 64v96h128V0z'/%3E%3C/svg%3E");
    animation: petWalk 18s linear infinite;
    animation-delay: 3s;
}

@keyframes petWalk {
    0% { transform: translateX(-100px) scaleX(1); }
    49.9% { transform: translateX(calc(100vw + 100px)) scaleX(1); }
    50% { transform: translateX(calc(100vw + 100px)) scaleX(-1); }
    99.9% { transform: translateX(-100px) scaleX(-1); }
    100% { transform: translateX(-100px) scaleX(1); }
}

/* Details page styles */
.animal-details-container {
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
}

.animal-details-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg, #ff9a9e, #fad0c4, #55efc4, #a29bfe);
}

.list-group-item {
    padding: 1rem 1.5rem;
    border-left: 0;
    border-right: 0;
    position: relative;
}

.list-group-item strong {
    color: #ff6b6b;
    margin-right: 10px;
}

/* Admin dashboard styling */
.table {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.table thead th {
    background-color: #ffeaa7;
    color: #2d3436;
    font-weight: 700;
    padding: 12px 15px;
}

.table tbody td {
    padding: 12px 15px;
    vertical-align: middle;
}