@font-face {
    font-family: 'PMedium'; 
    src: url('fonts/Poppins-Medium.ttf') format('truetype'); 
}

@font-face {
    font-family: 'PBold'; 
    src: url('fonts/Poppins-Bold.ttf') format('truetype'); 
}

@font-face {
    font-family: 'PBlack'; 
    src: url('fonts/Poppins-Black.ttf') format('truetype'); 
}

@font-face {
    font-family: 'PExBold'; 
    src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); 
}

@font-face {
  font-family: 'PExBoldIt'; 
  src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); 
}

@font-face {
    font-family: 'PBlackIt'; 
    src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); 
}

@font-face {
    font-family: 'PSemiBold'; 
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); 
}

@font-face {
    font-family: 'PRegular'; 
    src: url('fonts/Poppins-Regular.ttf') format('truetype'); 
}

@font-face {
    font-family: 'Refuseniks'; 
    src: url('fonts/refuseniks.bold-italic.ttf') format('truetype'); 
}

@font-face {
    font-family: 'RoughAnthem'; 
    src: url('fonts/Rough\ Anthem.ttf') format('truetype'); 
}

@font-face {
    font-family: 'Gemsbuck'; 
    src: url('fonts/Gemsbuck\ 01\ Black.ttf') format('truetype'); 
}

@font-face {
    font-family: 'AltoneExtraBold'; 
    src: url('fonts/Altone-ExtraBold.ttf') format('opentype'); 
}

:root {
    --primary: #FFC629;
    --darkprimary: #f8b600;
    --brown:#d8742d;
    --light-brown: #A67C52;
    --cream: #FFF8E1;
    --pastel-yellow: #FFEB61;
    --red: #ff8a8a;
}
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
body {
    font-family: 'Poppins', sans-serif;
    background-color: #FFFFFF;
}

.bg-primary {
    background-color: #ffc629;
}

.bg-sidebar {
    background-color: var(--brown);
}

.bg-primarylight {
    background-color: #fcf8eb;
}

.font-brown2 {
    color: #b85f22;
}

.bg-whitegr {
    background: linear-gradient(to right, #ffffff, #fcfcfd, #f5f6f8);
}

.bg-whitef {
    background-color: #fffdd0;
}

.bg-darkyellow {
    background-color: #f89f00;
}


.bg-dbrown {
    background-color: #7c4521
;
}

.bg-brown2 {
    background-color: #b85f22
    ;
}

.bg-errorhead {
    background-color: #ef4444;
}

.bg-gradient-1 {
    background: linear-gradient(to left, #d8742d, #ffc629);
}

.bg-pastel {
    background-color: var(--pastel-yellow);
}

.bg-brown {
    background-color: var(--brown);
}

.bg-lightbrown {
    background: linear-gradient(to bottom, #fff, #ffc629, #ffc629, #fff);
}

.bg-lightbrown2 {
    background: linear-gradient(to bottom, #fff, #ffc629,#ffc629, #fff,#ffc629, #ffc629, #fff);
} 

.bg-cream {
    background-color: var(--cream);
}

.bg-red {
    background-color: var(--red);
}
.bg-image {
    
background-image: url('assets/herocover.png');
background-size: cover; /* Makes sure the image covers the section */
background-position: center center; /* Centers the image */
background-repeat: no-repeat; /* Prevents repeating the image */


}

.bg-pattern {
    background-color: #FFC629;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='400' cy='400' r='50%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FFC629'/%3E%3Cstop offset='1' stop-color='%23FFC629'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='400' cy='400' r='70%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FFC629'/%3E%3Cstop offset='1' stop-color='%23FFE044'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='800'/%3E%3Cg fill-opacity='.8'%3E%3Cpath fill='url(%23b)' d='M998.7 439.2c1.7-26.5 1.7-52.7 0.1-78.5L401 399.9c0 0 0-0.1 0-0.1l587.6-116.9c-5.1-25.9-11.9-51.2-20.3-75.8L400.9 399.7c0 0 0-0.1 0-0.1l537.3-265c-11.6-23.5-24.8-46.2-39.3-67.9L400.8 399.5c0 0 0-0.1-0.1-0.1l450.4-395c-17.3-19.7-35.8-38.2-55.5-55.5l-395 450.4c0 0-0.1 0-0.1-0.1L733.4-99c-21.7-14.5-44.4-27.6-68-39.3l-265 537.4c0 0-0.1 0-0.1 0l192.6-567.4c-24.6-8.3-49.9-15.1-75.8-20.2L400.2 399c0 0-0.1 0-0.1 0l39.2-597.7c-26.5-1.7-52.7-1.7-78.5-0.1L399.9 399c0 0-0.1 0-0.1 0L282.9-188.6c-25.9 5.1-51.2 11.9-75.8 20.3l192.6 567.4c0 0-0.1 0-0.1 0l-265-537.3c-23.5 11.6-46.2 24.8-67.9 39.3l332.8 498.1c0 0-0.1 0-0.1 0.1L4.4-51.1C-15.3-33.9-33.8-15.3-51.1 4.4l450.4 395c0 0 0 0.1-0.1 0.1L-99 66.6c-14.5 21.7-27.6 44.4-39.3 68l537.4 265c0 0 0 0.1 0 0.1l-567.4-192.6c-8.3 24.6-15.1 49.9-20.2 75.8L399 399.8c0 0 0 0.1 0 0.1l-597.7-39.2c-1.7 26.5-1.7 52.7-0.1 78.5L399 400.1c0 0 0 0.1 0 0.1l-587.6 116.9c5.1 25.9 11.9 51.2 20.3 75.8l567.4-192.6c0 0 0 0.1 0 0.1l-537.3 265c11.6 23.5 24.8 46.2 39.3 67.9l498.1-332.8c0 0 0 0.1 0.1 0.1l-450.4 395c17.3 19.7 35.8 38.2 55.5 55.5l395-450.4c0 0 0.1 0 0.1 0.1L66.6 899c21.7 14.5 44.4 27.6 68 39.3l265-537.4c0 0 0.1 0 0.1 0L207.1 968.3c24.6 8.3 49.9 15.1 75.8 20.2L399.8 401c0 0 0.1 0 0.1 0l-39.2 597.7c26.5 1.7 52.7 1.7 78.5 0.1L400.1 401c0 0 0.1 0 0.1 0l116.9 587.6c25.9-5.1 51.2-11.9 75.8-20.3L400.3 400.9c0 0 0.1 0 0.1 0l265 537.3c23.5-11.6 46.2-24.8 67.9-39.3L400.5 400.8c0 0 0.1 0 0.1-0.1l395 450.4c19.7-17.3 38.2-35.8 55.5-55.5l-450.4-395c0 0 0-0.1 0.1-0.1L899 733.4c14.5-21.7 27.6-44.4 39.3-68l-537.4-265c0 0 0-0.1 0-0.1l567.4 192.6c8.3-24.6 15.1-49.9 20.2-75.8L401 400.2c0 0 0-0.1 0-0.1L998.7 439.2z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}

.bg-pattern2 {
    background-color: #FFC629;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%23FFC629' cx='50' cy='0' r='50'/%3E%3Cg fill='%23fec229' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23fcbd28' cx='50' cy='100' r='50'/%3E%3Cg fill='%23fbb928' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f9b528' cx='50' cy='200' r='50'/%3E%3Cg fill='%23f8b028' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f6ac28' cx='50' cy='300' r='50'/%3E%3Cg fill='%23f4a829' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f2a429' cx='50' cy='400' r='50'/%3E%3Cg fill='%23f0a029' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23ee9b29' cx='50' cy='500' r='50'/%3E%3Cg fill='%23ec972a' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%23ea932a' cx='50' cy='600' r='50'/%3E%3Cg fill='%23e78f2b' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23e58b2b' cx='50' cy='700' r='50'/%3E%3Cg fill='%23e2872b' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23e0832c' cx='50' cy='800' r='50'/%3E%3Cg fill='%23dd7f2c' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%23db7c2c' cx='50' cy='900' r='50'/%3E%3Cg fill='%23d8782d' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23D5742D' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: contain;
    background-position: top center;
}

.bg-pattern3 {
background-color: #D8742D;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%23D8742D' cx='50' cy='0' r='50'/%3E%3Cg fill='%23da762c' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23dc782b' cx='50' cy='100' r='50'/%3E%3Cg fill='%23de7a2a' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23e07c29' cx='50' cy='200' r='50'/%3E%3Cg fill='%23e17e27' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%23e38026' cx='50' cy='300' r='50'/%3E%3Cg fill='%23e58225' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23e78423' cx='50' cy='400' r='50'/%3E%3Cg fill='%23e88622' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23ea8820' cx='50' cy='500' r='50'/%3E%3Cg fill='%23eb8b1e' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%23ed8d1c' cx='50' cy='600' r='50'/%3E%3Cg fill='%23ee8f1a' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f09117' cx='50' cy='700' r='50'/%3E%3Cg fill='%23f19315' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f39612' cx='50' cy='800' r='50'/%3E%3Cg fill='%23f4980e' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f59a0a' cx='50' cy='900' r='50'/%3E%3Cg fill='%23f79d05' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23F89F00' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: contain;
}


.highlights1 {
    color: #ff8a8a;

}

.highlight2 {
    color: #ff8a8a;
    font-style: italic;
    
}

.shelterhdr {
    color: white;
    letter-spacing: 1px;
    
}

.text-primary {
    color: var(--primary);
}


.text-brown {
    color: var(--brown);
}

.border-primary {
    border-color: var(--primary);
}

.border-brown {
    border-color: var(--brown);
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-family: "PSemiBold";
    transition: all 0.3s ease;
    border: 2px solid var(--primary);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--brown);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid var(--brown);
}

.btn-secondary:hover {
    background-color: transparent;
    color: var(--brown);
    transform: translateY(-2px);
}

.btn-outline {
    background-color: var(--brown);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: var(--brown);
    color: white;
    transform: translateY(-2px);
}

.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.tvRequired::after {
        content: "*";
        color: #e53e3e;
        margin-left: 2px;
}

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

.nav-link:hover {
        font-family: "PSemiBold";
}

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

.herotitle {
    font-family: "PExBold";
}

.cursive {
    font-family: 'RoughAnthem';
}

.logo-font {
    font-family: 'AltoneExtraBold';
}

.ourmission {
    font-family: "PExBold";
}

.navcontainer {
    background-color:#a76d31;

}

.loginbtn {
    border: 3px solid white;
    color:white;
}

.herotitle2 {
    font-family: "PMedium";
}

.semibold {
    font-family: "PSemiBold";

}

.extrabold {
    font-family: "PExBold";

}

.bold {
    font-family: "PBold";
}



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



.pet-card {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

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

.feature-card {
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

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

.feature-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

/* Chatbot styles */

.chatbot-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.chatbot-button:hover {
    transform: scale(1.1);
}

.chatbot-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    height: 450px;
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    display: none;
}

.chatbot-header {
    background-color: var(--primary);
    color: var(--brown);
    padding: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chatbot-messages {
    height: 330px;
    padding: 1rem;
    overflow-y: auto;
}

.message {
    margin-bottom: 1rem;
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
}

.chatbot-input {
    display: flex;
    padding: 0.5rem 1rem;
    border-top: 1px solid #eee;
}

.chatbot-input input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    margin-right: 0.5rem;
}

.chatbot-input button {
    background-color: var(--primary);
    color: var(--brown);
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

/* Pet matching system */
.pet-swipe-card {
    position: relative;
    width: 100%;
    max-width: 350px;
    height: 450px;
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    margin: 0 auto;
}

.pet-swipe-image {
    width: 100%;
    height: 65%;
    object-fit: cover;
}

.pet-swipe-info {
    padding: 1.5rem;
}

.swipe-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.swipe-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.swipe-button:hover {
    transform: scale(1.1);
}

.swipe-left {
    background-color: #ff4757;
    color: white;
}

.swipe-right {
    background-color: #2ed573;
    color: white;
}

/* Testimonials */
.testimonial-card {
    background-color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.testimonial-avatar {
    width: 4rem;
    height: 4rem;
    background-color: #fef3c7;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

/* Mobile menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    z-index: 100;
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.mobile-nav-link {
    display: block;
    padding: 1rem 0;
    font-size: 1.25rem;
    color: var(--brown);
    border-bottom: 1px solid #eee;
}

/* About Section */
.photo-frame {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}
.photo-frame:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}
.photo-collage {
    min-height: 500px;
}

.missec {
    background-image: linear-gradient(to left , #FFEB61, #FFC629);
}

.txtprg {
    color: white;
}

.animalres {
    color: var(--brown);
    font-family: "PExBold";
    font-size: larger;
}

.animalres2 {
    color: var(--brown);
    font-family: "PSemiBold";
}

/*Features*/
.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.feature-card {
    background-color: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    background-color:#f9b528;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.fdesc {
    font-family: "PSemiBold";
    
}

.fdesc2 {
    font-family: "PBold";
    color: white;
    background-color: var(--primary);
    padding: 5px;
    text-align: center;
    border-radius: 10px 10px 0 0;
}

.number {
    font-family: "PExBold";
}

@media (max-width: 768px) {
    
    .feature-content {
        flex-direction: column;
    }
    
    .feature-icon {
        margin-right: 0;
        margin-bottom: 1rem;
    }
}

/* Carousel */
 .carousel-container {
    position: relative;

    height: 70vh;
    overflow: hidden;
}

@media (max-width: 768px) {
    .carousel-container {
        height: 50vh;
    }
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
    z-index: 1;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 2;
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    color: white;
    padding: 30px 10% 30px 10%;
    text-align: left;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.carousel-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

.indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background-color: white;
    transform: scale(1.2);
}

@media (max-width: 640px) {
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .prev-btn {
        left: 10px;
    }
    
    .next-btn {
        right: 10px;
    }
    
    .caption h2 {
        font-size: 1.2rem;
    }
    
    .caption p {
        font-size: 0.9rem;
    }
}

/* Chatbot */

.chatbot-container {
    position: fixed;
    right: 20px;
    margin-left: 20px;
    bottom: 70px;
    z-index: 1000;
    max-width: 350px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent content overflow */
}

.chatbot-container.hidden {
    display: none;
}

.chatbot-close {
    position: absolute; /* Make the close button fixed at the top-right of the container */
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
    z-index: 1000; /* Ensure it stays above other elements */
}

.chatbot-close:hover {
    color: #ff0000;
}

.chatbot-name {
    text-align: center;
    font-size: 1.5rem;
    color: #333;
    margin: 40px 0 20px; /* Add space below the close button */
}

.chatbot-output {
    height: 300px;
    overflow-y: auto;
    border-radius: 4px;
    background-color: #f7f7f7;
}

.message {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 4px;
}

.message.user {
    background-color: red;
    text-align: right;
}

.message.bot {
    background-color: #f8d7da;
    text-align: left;
}

.options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.option-button {
    padding: 8px 12px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.option-button:hover {
    background-color: #0056b3;
}

.chatbot-form {
    display: flex;
    gap: 10px;
}

.chatbot-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.chatbot-submit {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

.chatbot-submit:hover {
    background-color: #0056b3;
}

.chatbot-categories, .chatbot-questions {
    margin-top: 10px;
}

.chatbot-categories p, .chatbot-questions p {
    font-weight: bold;
    margin-bottom: 5px;
}

.chatbot-categories ul, .chatbot-questions ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.chatbot-categories li, .chatbot-questions li {
    padding: 8px;
    background-color: #f1f1f1;
    margin-bottom: 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.chatbot-categories li:hover, .chatbot-questions li:hover {
    background-color: #e0e0e0;
}

.chatbot-questions.hidden {
    display: none;
}

.chatbot-back {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.chatbot-back:hover {
    background-color: #0056b3;
}

.chatbot-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 20px;
    
}

.chatbot-option {
    padding: 5px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.chatbot-option:hover {
    background-color: #0056b3;
}

.chatbot-message {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
}

.user-message {
    background-color: #374151;
    display: inline-block;     /* Shrink to fit content */
    border-radius: 10px 10px 0px 10px;
    font-family: "PMedium";
    color: white;
    font-size: 0.9rem;
    text-align: right;
    padding: 8px 12px;
    max-width: 80%;
    word-wrap: break-word;
}


.bot-message {
        background: var(--primary) !important;
        color: var(--text);
        box-shadow: 0 2px 8px rgba(37,99,235,0.04);
        color: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        padding: 10px !important;
        border-radius: 0 10px 10px 10px;
        font-family: "PMedium";
        font-size: 0.9rem;
}

.sub-message {
        background: var(--primary) !important;
        color: var(--text);
        box-shadow: 0 2px 8px rgba(37,99,235,0.04);
        color: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        padding: 10px !important;
        border-radius: 0 10px 10px 10px;
        font-family: "PMedium";
        font-size: 0.9rem;
        margin-left: 30px;
        margin-top: 10px;
        margin-bottom: 20px;
}

/*Featured Videos*/
.video-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 10px 10px 15px 5px rgba(0, 0, 0, 0.1), 8px 4px 6px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}
.video-container:hover {
    transform: translateY(-5px);
}
.thumbnail-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.video-container:hover .thumbnail {
    transform: scale(1.05);
}
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background-color:#fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 5;
}
.play-button:hover {
    background-color: #ffffff;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3);
}
.play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent var(--primary);
    margin-left: 5px;
}
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.modal-content {
    width: 90%;
    max-width: 900px;
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.close-button {
    position: absolute;
    top: -40px;
    right: 0;
    background-color: transparent;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    color: white;
}
.video-frame {
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
    z-index: 2;
}
.duration-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 3;
}

/*Adopt Guidelines*/
.card-shadow {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.btn-primary2 {
    transition: all 0.3s ease;
    font-family: "PSemiBold";
}
.btn-primary2:hover {
    transform: translateY(-3px);
}
.quote {
    border-left: 4px solid;
    font-style: italic;
    font-family: "PSemiBold";
}
.donation-type {
    transition: all 0.3s ease;
}
.donation-type:hover {
    transform: translateY(-5px);
}
.tab-active {
    border-bottom: 3px solid #ffc629;
    color: #ffc629;
}

/* Login Page */
.form-field:focus-within label {
    color: var(--brown);
}
.floating-animation {
    animation: float 8s ease-in-out infinite;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

.custom-focus:focus {
    outline: none;
    border-color: var(--brown);
    box-shadow: 0 0 0 1px var(--brown);
}

        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: linear-gradient(100deg, var(--pastel-yellow), #FFD247, var(--pastel-yellow));
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }
        
        .bubbles {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .bubble {
            position: absolute;
            bottom: -100px;
            animation: float2 8s infinite ease-in;
            border-radius: 50%;
            background-color: rgb(255,255,255,0.4);
            padding: 5px;

        }
        
        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        @keyframes float2 {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
                border-radius: 50%;
            }
            100% {
                transform: translateY(-1000px) rotate(720deg);
                opacity: 0;
                border-radius: 50%;
            }
        }

        input[type="password"]::-ms-reveal {
            display: none;
        }

        .typewriter-text {
            border-right: 3px solid #fde047;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            margin: 0;
        }

        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #fde047 }
        }

/* Sidebar */

        .sidebar {
            transition: all 0.3s ease;
            height: 100vh; /* full viewport height */
            
        }


        .sidebar-expanded {
            width: 275px;
        }
        .sidebar-collapsed {
            width: 80px;
        }
        .menu-item {
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        .submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .submenu.active {
            max-height: 500px;
        }


        .profile-image {
            border: 3px solid #fff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .submenu-collapsed {
            position: absolute;
            left: 70px;
            min-width: 180px;
            background-color: #4338ca;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            padding: 0.5rem;
            z-index: 50;
            display: none;
        }

                
        /* Collapsed sidebar submenu icons */
        .sidebar-collapsed .submenu-items {
            display: flex;
            flex-direction: column;
            align-items: center;
            
        }
        .sidebar-expanded .submenu-items {
            display: none;
        }
        .submenu-item, .submenu-expanded {
          
            margin: 0.25rem 0;
            border-radius: 0.375rem;
            transition: all 0.2s;
        }
        .submenu-items {
            margin-left: 10px;

        }

        .submenu-item:hover, .submenu-expanded:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }
        .menu-item:hover {
            background-color: var(--darkprimary);
        }
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .content-wrapper {
            flex: 1;
        }
        .submenu-icon.rotated {
            transform: rotate(180deg);
           
    transform-origin: center;


        }
        
        /* Custom scrollbar styling */
        .sidebar-scroll::-webkit-scrollbar {
            width: 6px;
        }
        .sidebar-scroll::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }
        .sidebar-scroll::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
        }
        .sidebar-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }
        
        /* Mobile sidebar */
        @media (max-width: 767px) {
            .sidebar {
                position: fixed;
                left: -280px;
                top: 0;
                height: 100%;
                z-index: 50;
                width: 250px;
            }
            .sidebar.mobile-open {
                left: 0;
            }
            .overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 40;
                display: none;
            }
            .overlay.active {
                display: block;
            }
            .mobile-nav {
                display: flex;
            }
            .main-content {
                margin-top: 60px; /* Height of mobile nav */
            }
        }
        
        @media (min-width: 769px) {
            .mobile-nav {
                display: none;
            }
        }
        
        /* Collapsed sidebar styles */
        .sidebar-collapsed .menu-text {
            display: none;
        }
        .sidebar-collapsed .menu-container {
            position: relative;
        }
        .sidebar-collapsed .menu-item {
            justify-content: center;
            padding-left: 0;
            padding-right: 0;
        }
        .sidebar-collapsed .menu-icon {
            margin-right: 0;
        }
        .sidebar-collapsed .submenu-icon {
    position: absolute;  /* take out of flex flow */
    right: 3px;         /* distance from right edge of sidebar */
           /* vertical center */
    
}
        .sidebar-collapsed .profile-info {
            display: none;
        }
        .sidebar-collapsed .logo-text {
            display: none;
        }


/* Dashboard */
        .greeting-card {
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        .greeting-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: -1;
            transition: opacity 1s ease;
        }
        
        /* Morning background with sunrise elements */
        .greeting-card-morning::before {
            background: linear-gradient(180deg, #ffcba4 0%, #fc9961 100%);
        }
        .morning-elements {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        .sunrise {
            position: absolute;
            width: 160px;
            height: 160px;
            background: radial-gradient(circle, rgba(255,236,210,1) 0%, rgba(255,177,153,1) 50%, rgba(255,126,95,1) 100%);
            border-radius: 50%;
            top: -80px;
            right: 40px;
            box-shadow: 0 0 60px rgba(255, 177, 153, 0.8);
            animation: rise 3s ease-out forwards;
        }
        .sunrise-glow {
            position: absolute;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(255,236,210,0.6) 0%, rgba(255,177,153,0.3) 50%, rgba(255,126,95,0) 100%);
            border-radius: 50%;
            top: -100px;
            right: 20px;
            animation: glow 4s infinite alternate;
        }
        .mountain {
            position: absolute;
            bottom: 0;
            z-index: -1;
        }
        .mountain-back {
            width: 300px;
            height: 100px;
            background: linear-gradient(180deg, #a18cd1 0%, #6b5b95 100%);
            clip-path: polygon(0% 100%, 50% 30%, 100% 100%);
            left: -50px;
            opacity: 0.7;
        }
        .mountain-mid {
            width: 250px;
            height: 120px;
            background: linear-gradient(180deg, #8e78c0 0%, #5b4a8a 100%);
            clip-path: polygon(0% 100%, 30% 20%, 70% 50%, 100% 100%);
            left: 100px;
            opacity: 0.8;
        }
        .mountain-front {
            width: 350px;
            height: 150px;
            background: linear-gradient(180deg, #7b6cb0 0%, #4a3b7a 100%);
            clip-path: polygon(0% 100%, 20% 40%, 40% 20%, 60% 40%, 80% 30%, 100% 100%);
            right: -50px;
            opacity: 0.9;
        }
        .cloud {
            position: absolute;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50px;
            animation: float 15s infinite ease-in-out;
        }
        .cloud-1 {
            width: 120px;
            height: 40px;
            top: 40px;
            left: 60px;
            animation-delay: 0s;
        }
        .cloud-2 {
            width: 80px;
            height: 30px;
            top: 70px;
            left: 180px;
            animation-delay: 2s;
        }
        .cloud-3 {
            width: 100px;
            height: 35px;
            top: 30px;
            right: 180px;
            animation-delay: 1s;
        }
        .bird {
            position: absolute;
            width: 20px;
            height: 10px;
            background: transparent;
            animation: fly 20s linear infinite;
        }
        .bird::before, .bird::after {
            content: '';
            position: absolute;
            width: 10px;
            height: 5px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 50% 50% 0 0;
        }
        .bird::before {
            left: 0;
            animation: wingLeft 0.5s infinite alternate;
        }
        .bird::after {
            right: 0;
            animation: wingRight 0.5s infinite alternate;
        }
        .bird-1 {
            top: 50px;
            left: -20px;
        }
        .bird-2 {
            top: 70px;
            left: -40px;
            animation-delay: 3s;
        }
        .bird-3 {
            top: 40px;
            left: -30px;
            animation-delay: 6s;
        }
        /* Afternoon background */
        .greeting-card-afternoon::before {
            background: linear-gradient(180deg, #64b3f4 0%, #c2e9fb 100%);
        }
        .afternoon-elements {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        .sun-high {
            position: absolute;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,235,180,1) 30%, rgba(255,204,51,1) 100%);
            border-radius: 50%;
            top: 30px;
            right: 60px;
            box-shadow: 0 0 60px rgba(255, 204, 51, 0.6);
            animation: pulse 4s infinite alternate;
        }
        .sun-rays {
            position: absolute;
            top: 30px;
            right: 60px;
            width: 100px;
            height: 100px;
            animation: rotate 20s linear infinite;
        }
        .sun-ray {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 4px;
            height: 70px;
            background: rgba(255, 204, 51, 0.4);
            transform-origin: center bottom;
        }
        .afternoon-cloud {
            position: absolute;
            background: white;
            border-radius: 50px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .afternoon-cloud-2 {
            width: 120px;
            height: 40px;
            top: 80px;
            right: 180px;
            animation: float-slow 25s infinite ease-in-out reverse;
            animation-delay: 5s;
        }
        .afternoon-cloud-2::before {
            content: '';
            position: absolute;
            width: 60px;
            height: 60px;
            background: white;
            border-radius: 50%;
            top: -30px;
            left: 20px;
        }
        .afternoon-cloud-2::after {
            content: '';
            position: absolute;
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            top: -20px;
            left: 60px;
        }

        .landscape {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60px;
            background: linear-gradient(180deg, #7ed56f 0%, #28b485 100%);
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
            transform: scaleX(1.5);
        }

                /* Evening background with sunset elements */
        .greeting-card-evening::before {
            background: linear-gradient(180deg, #5f2c82 0%, #49a09d 100%);
        }
        .evening-elements {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        .sunset {
            position: absolute;
            width: 120px;
            height: 60px;
            background: radial-gradient(ellipse at bottom, #ff7e5f 0%, #feb47b 100%);
            border-radius: 120px 120px 0 0;
            bottom: -10px;
            right: 40px;
            box-shadow: 0 -10px 30px rgba(255, 126, 95, 0.6);
        }
        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkle 2s infinite alternate;
        }
        .star-1 {
            width: 3px;
            height: 3px;
            top: 30px;
            left: 80px;
            animation-delay: 0.5s;
        }
        .star-2 {
            width: 2px;
            height: 2px;
            top: 50px;
            left: 150px;
            animation-delay: 0.2s;
        }
        .star-3 {
            width: 4px;
            height: 4px;
            top: 20px;
            left: 220px;
            animation-delay: 0.8s;
        }
        
        /* Night background */
        .greeting-card-night::before {
            background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
        }
        .night-elements {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        .moon {
            position: absolute;
            width: 60px;
            height: 60px;
            background: radial-gradient(circle, #e6e6e6 30%, #b3b3b3 70%);
            border-radius: 50%;
            top: 20px;
            right: 60px;
            box-shadow: 0 0 20px rgba(230, 230, 230, 0.4);
        }
        
        @keyframes twinkle {
            0% { opacity: 0.3; }
            100% { opacity: 1; }
        }

        @keyframes fly {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(100vw + 50px)); }
        }
        
        @keyframes wingLeft {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(-20deg); }
        }
        
        @keyframes wingRight {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(20deg); }
        }

        @keyframes rise {
            0% { transform: translateY(40px); opacity: 0.7; }
            100% { transform: translateY(0); opacity: 1; }
        }
        
        @keyframes glow {
            0% { opacity: 0.5; }
            100% { opacity: 0.8; }
        }

        @keyframes pulse {
            0% { opacity: 0.9; }
            100% { opacity: 1; }
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes pulse-slow {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.8;
            }
        }
        
         
        @keyframes pulse-slow {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.8;
            }
        }
        .pulse-animation {
            animation: pulse-slow 2s infinite;
        }
        .time-icon {
            
            margin-right: 0.5rem;
        }

/* Pet Owner List */
        .adopter-card {
            transition: all 0.3s ease;
        }
        .adopter-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .pagination-btn {
            transition: all 0.2s ease;
        }
        .pagination-btn:hover:not(.active):not(:disabled) {
            background-color: #e2e8f0;
        }

        .pet-avatar {
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            margin: 0 auto;
            background-color: var(--pastel-yellow);
        }

/* My Profile */
        .mp-nav-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            width: 280px;
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            z-index: 50;
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }
        
        .mp-nav-dropdown.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .mp-nav-link {
            transition: all 0.2s ease;
            border-left: 3px solid transparent;
        }
        
        .mp-nav-link.active {
            background-color: rgba(79, 70, 229, 0.1);
            border-left: 3px solid #4f46e5;
        }
        
        .mp-nav-link:hover:not(.active) {
            background-color: rgba(79, 70, 229, 0.05);
        }
        
        .mp-nav-icon {
            transition: all 0.2s ease;
        }
        
        .mp-nav-link:hover .mp-nav-icon {
            transform: translateX(3px);
        }
        
        .mp-mobile-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
            z-index: 50;
            display: none;
        }
        
        @media (max-width: 768px) {
            .mp-mobile-nav {
                display: flex;
            }
            
            main {
                padding-bottom: 80px;
            }
        }

        .mp-tab-content {
            display: none;
        }
        
        .mp-tab-content.active {
            display: block;
            animation: mpFadeIn 0.5s ease forwards;
        }
        .mp-action-card {
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        .mp-action-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .mp-steps-container {
            height: 0;
            overflow: hidden;
            transition: height 0.4s cubic-bezier(.4,0,.2,1);
        }


        
        .mp-step-item {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
        }
        
        .mp-steps-container.mp-active .mp-step-item {
            opacity: 1;
            transform: translateY(0);
        }
        
        .mp-steps-container.mp-active .mp-step-item:nth-child(1) {
            transition-delay: 0.1s;
        }
        
        .mp-steps-container.mp-active .mp-step-item:nth-child(2) {
            transition-delay: 0.2s;
        }
        
        .mp-steps-container.mp-active .mp-step-item:nth-child(3) {
            transition-delay: 0.3s;
        }
        
        .mp-notification-dot {
            animation: mpPulse 2s infinite;
        }

                .quick-card {
            transition: all 0.3s ease;
            overflow: hidden;
            position: relative;
            z-index: 1;
            border: none;
        }
        
        .quick-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
        
        .card-icon {
            transition: all 0.4s ease;
        }

        .mp-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 9px;
            background-color: #ef4444;
            color: white;
            font-size: 0.7rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .mp-status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .mp-status-pending {
        background-color: #fef3c7; /* Soft amber */
        color: #b45309;            /* Warm amber text */
        }

        .mp-status-approved {
        background-color: #d1fae5; /* Soft mint green */
        color: #047857;            /* Emerald green text */
        }

        .mp-status-rejected {
        background-color: #fee2e2; /* Soft rose */
        color: #b91c1c;            /* Deep red text */
        }

        .mp-status-successful {
        background-color: #dbeafe; /* Light sky blue */
        color: #1d4ed8;            /* Royal blue text */
        }

        .mp-status-failed {
        background-color: #fee2e2; /* Soft rose */
        color: #b91c1c;              /* Charcoal gray text */
        }

        .mp-status-cancelled {
        background-color: #fef2f2; /* Pale blush */
        color: #991b1b;            /* Muted crimson text */
        }

        .mp-status-return {
            background-color: #e9d5ff; /* Muted orchid / lavender blend */
            color: #581c87;            /* Deep violet */
        }

        .mp-status-returned {
            background-color: #ede9fe; /* Soft lavender */
            color: #6b21a8;            /* Deep purple text */
        }

        .mp-status-returning {
            background-color: #f3e8ff; /* light mauve/lavender */
            color: #7e22ce;            /* royal purple */
        }

        .quick-card:hover .card-icon {
            transform: scale(1.1);
        }
        
        .mp-action-button {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .mp-action-button:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: all 0.4s ease;
            z-index: -1;
        }
        
        .mp-action-button:hover {
            transform: translateY(-2px);
        }
        
        .mp-action-button:hover:before {
            left: 100%;
        }
        
        .mp-card-content {
            position: relative;
            z-index: 1;
        }

        .mp-fade-in {
            animation: mpFadeIn 0.5s ease forwards;
        }
        
        @keyframes mpFadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes mpPulse {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 var(--pastel-yellow);
            }
            
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
            }
            
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
            }
        }
        
        .mp-pending-item {
            animation: mpSlideIn 0.5s ease-out forwards;
            opacity: 0;
        }
        
        @keyframes mpSlideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .mp-pending-item:nth-child(1) {
            animation-delay: 0.1s;
        }
        
        .mp-pending-item:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .mp-pending-item:nth-child(3) {
            animation-delay: 0.3s;
        }
        
        .mp-pending-item:nth-child(4) {
            animation-delay: 0.4s;
        }
        
        .mp-paw-print {
            position: absolute;
            opacity: 0.03;
            z-index: 0;
        }
        
        .mp-card-icon {
            transition: transform 0.3s ease;
        }
        
        .mp-action-card:hover .mp-card-icon {
            transform: scale(1.1);
        }
        
        .mp-action-header {
            transition: all 0.3s ease;
        }
        
        .mp-action-card.mp-active .mp-action-header {
            background-color: rgba(255, 255, 255, 0.9);
        }
        
    .mp-greeting-card {
      height: 180px;
      transition: background-color 1s ease;
      overflow: hidden;
      position: relative;
    }
    
    .mp-scene-element {
      position: absolute;
      transition: all 0.5s ease;
    }
    
    .mp-sun {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    }
    
    .mp-moon {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: #f5f5f5;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }
    
    .mp-stars {
      position: absolute;
      width: 2px;
      height: 2px;
      background: white;
      border-radius: 50%;
      box-shadow: 0 0 3px 1px white;
    }
    
    .mp-gif-placeholder {
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }

    
    .mp-ground {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 30px;
      border-top-left-radius: 50% 20px;
      border-top-right-radius: 50% 20px;
        }

    .mp-mountain {
      position: absolute;
      bottom: 30px;
      border-radius: 50%;
    }

    .bg-pattern4 {
        background-color: #D8742D;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%23D8742D' cx='50' cy='0' r='50'/%3E%3Cg fill='%23db782d' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23dd7c2c' cx='50' cy='100' r='50'/%3E%3Cg fill='%23e0802c' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23e2832b' cx='50' cy='200' r='50'/%3E%3Cg fill='%23e5872b' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%23e78b2b' cx='50' cy='300' r='50'/%3E%3Cg fill='%23e98f2a' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23eb932a' cx='50' cy='400' r='50'/%3E%3Cg fill='%23ed9729' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23ef9c29' cx='50' cy='500' r='50'/%3E%3Cg fill='%23f1a029' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f3a428' cx='50' cy='600' r='50'/%3E%3Cg fill='%23f5a828' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23f7ac28' cx='50' cy='700' r='50'/%3E%3Cg fill='%23f8b028' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23fab528' cx='50' cy='800' r='50'/%3E%3Cg fill='%23fbb928' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%23fdbd28' cx='50' cy='900' r='50'/%3E%3Cg fill='%23fec229' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23FFC629' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
        background-attachment: fixed;
        background-size: contain;
    }

            /* Navbar styles */
        .mp-navbar {
            background-color: white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 40;
        }

        
        
        .mp-navbar-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1.5rem;
        }
        
        .mp-logo {
            display: flex;
            align-items: center;
        }
        
        .mp-nav-menu {
            display: flex;
            align-items: center;
        }
        
        .mp-nav-item {
            position: relative;
            margin-left: 0.5rem;
        }
        
        .mp-nav-button {
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 1rem;
            font-weight: 500;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            transition: all 0.2s ease;
        }
        
        .mp-nav-button:hover {
            background-color: white;
            color: var(--brown);
            border-radius: 30px;

        }
        
        .mp-nav-button.active {
            background-color: #f3f4f6;
            color: #4f46e5;
        }
        
        .mp-nav-button svg {
            margin-right: 0.5rem;
        }
        
        .mp-dropdown-header {
            padding: 1rem;
            background-color: #4f46e5;
            color: white;
        }
        
        .mp-dropdown-title {
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 0.25rem;
        }
        
        .mp-dropdown-subtitle {
            font-size: 0.75rem;
            opacity: 0.8;
        }
        
        .mp-dropdown-footer {
            padding: 0.75rem;
            background-color: #f9fafb;
            border-top: 1px solid #e5e7eb;
            text-align: center;
        }
        
        .mp-dropdown-footer a {
            color: #4f46e5;
            font-size: 0.875rem;
            font-weight: 500;
        }
        
        .mp-dropdown-footer a:hover {
            text-decoration: underline;
        }
        
        .mp-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 30;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .mp-overlay.active {
            opacity: 1;
            visibility: visible;
        }

                /* Filter styles */
        .mp-filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            padding: 1rem;
            background-color: white;
        }
        
        .mp-filter-label {
            font-size: 0.875rem;
            font-weight: 500;
            color: #4b5563;
            margin-right: 0.5rem;
        }
        
        .mp-filter-select {
            background-color: white;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            padding: 0.5rem 2rem 0.5rem 0.75rem;
            font-size: 0.9rem;
            color: #111827;
            appearance: none;
            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;
        }
        
        .mp-search-container {
            position: relative;
            flex-grow: 1;
            max-width: 275px;
        }
        
        .mp-search-input {
            width: 100%;
            padding: 0.5rem 1rem 0.5rem 1rem;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            color: #111827;
            background-color: white;
        }
        
        .mp-search-icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
        }
        
        .mp-filter-chip {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .mp-filter-chip.active {
            color: white;
        }
        
        .mp-filter-chip:not(.active) {
            background-color: #f3f4f6;
            color: #4b5563;
        }
        
        .mp-filter-chip:not(.active):hover {
            background-color: #e5e7eb;
        }
        
        .mp-filter-all.active {
            background-color: #6366f1;
        }
        
        .mp-filter-pending.active {
            background-color: #f59e0b;
        }
        
        .mp-filter-approved.active {
            background-color: #10b981;
        }
        
        .mp-filter-rejected.active {
            background-color: #ef4444;
        }
        
        .mp-filter-successful.active {
            background-color: #22c55e;
        }
        
        .mp-filter-failed.active {
            background-color: #f43f5e;
        }

        .mp-filter-cancelled.active {
            background-color: #991b1b; /* You can change the color to your preferred one */
        }

        
        .mp-filter-processing.active {
            background-color: #0ea5e9;
        }
        
        .mp-filter-completed.active {
            background-color: #6366f1;
        }

        .mp-filter-return.active {
            background-color: #6b21a8;
        }

        .mp-filter-returning.active {
            background-color: #581c87;            /* Deep violet */
        }

        /* .mp-status-returned {
            background-color: #ede9fe; 
            color: #6b21a8;           
        }

        .mp-status-returning {
            background-color: #f3e8ff;
            color: #7e22ce;         
        } */



                .toModalBackdrop {
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(3px);
            transition: all 0.3s ease;
        }
        .toModalContent {
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.3s ease;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            display: flex;
            flex-direction: column;
            max-height: 90vh;
        }
        .toModalActive .toModalContent {
            transform: translateY(0);
            opacity: 1;
        }
        
        .toSectionTitle {
            position: relative;
            padding-bottom: 0.75rem;
            margin-bottom: 1.25rem;
            color: #6366f1;
            font-weight: 600;
        }
        .toSectionTitle::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 50px;
            background: linear-gradient(90deg, #a78bfa, #6366f1);
            border-radius: 3px;
        }
        .toInfoGrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.25rem;
        }
        @media (max-width: 640px) {
            .toInfoGrid {
                grid-template-columns: 1fr;
            }
        }

        .adpSectionTitle { 
            position: relative;
            padding-bottom: 0.75rem;
            margin-bottom: 1.25rem;
            color: #f59e0b; /* amber-500 */
            font-weight: 600;
        }
        .adpSectionTitle::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 50px;
            background: linear-gradient(90deg, #fbbf24, #f97316); /* amber-400 to orange-500 */
            border-radius: 3px;
        }
        .adpInfoGrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.25rem;
        }
        @media (max-width: 640px) {
            .toInfoGrid {
                grid-template-columns: 1fr;
            }
            .adpInfoGrid {
                grid-template-columns: 1fr !important;
            }
        }
        

        .donSectionTitle {
            position: relative;
            padding-bottom: 0.75rem;
            margin-bottom: 1.25rem;
            color: #e11d48; /* rose-600 for text color */
            font-weight: 600;
        }

        .donSectionTitle::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 50px;
            background: linear-gradient(90deg, #fb7185, #ef4444); /* from-rose-400 (#fb7185) to-red-500 (#ef4444) */
            border-radius: 3px;
        }

        .donInfoGrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.25rem;
        }
        @media (max-width: 640px) {
            .donInfoGrid {
                grid-template-columns: 1fr;
            }
        }


        .volSectionTitle {
            position: relative;
            padding-bottom: 0.75rem;
            margin-bottom: 1.25rem;
            color: #059669; /* emerald-600 for text color */
            font-weight: 600;
        }
        .volSectionTitle::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 50px;
            background: linear-gradient(90deg, #14b8a6, #059669); /* from-teal-400 (#14b8a6) to-emerald-600 (#059669) */
            border-radius: 3px;
        }
        .volInfoGrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.25rem;
        }
        @media (max-width: 640px) {
            .volInfoGrid {
                grid-template-columns: 1fr;
            }
        }

.tvModal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 24px; /* keeps space from viewport edges */
    box-sizing: border-box;
}

.tvModalOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1;
}

.tvForm-header {
    flex: 0 0 auto;
}

.tvModalBody {
    padding: 22px 32px;
    overflow-y: auto;
    box-sizing: border-box;
    flex: 1 1 auto;
}

/* Ensure inner form and file inputs respect the container padding */
.tvFormContainer,
.tvFormSection,
.tvFileUpload,
.tvImagePreview,
.tvImagePreviewItem {
    box-sizing: border-box;
}

/* Smaller screens: give larger margins from edges and limit modal width */
@media (max-width: 640px) {
    .tvModal {
        padding: 12px;
    }
    .tvModalContent {
        max-width: calc(100% - 24px); /* leaves 12px gap on each side */
        border-radius: 10px;
        max-height: calc(100vh - 24px);
    }
    .tvModalBody {
        padding: 12px 16px;
        max-height: calc(100vh - 120px);
    }
    /* make buttons and inputs easier to tap */
    .tvFormInput,
    .tvFileUpload input,
    select,
    textarea,
    .tvBtnPrimary,
    .modal-close-btn {
        width: 100%;
        box-sizing: border-box;
    }
    /* keep close button visible without touching edge */
    .modal-close-btn {
        position: relative;
        margin-left: auto;
        margin-right: 0;
    }
    /* reduce progress label wrapping */
    .tvProgressLabel {
        display: none; /* optional: hide long labels on very small screens */
    }
}
.tvModal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 24px; /* keeps space from viewport edges */
    box-sizing: border-box;
}

.tvModalOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1;
}

.tvForm-header {
    flex: 0 0 auto;
}

.tvModalBody {
    padding: 22px 32px;
    overflow-y: auto;
    box-sizing: border-box;
    flex: 1 1 auto;
}

/* Ensure inner form and file inputs respect the container padding */
.tvFormContainer,
.tvFormSection,
.tvFileUpload,
.tvImagePreview,
.tvImagePreviewItem {
    box-sizing: border-box;
}

/* Smaller screens: give larger margins from edges and limit modal width */
@media (max-width: 640px) {
    .tvModal {
        padding: 12px;
    }
    .tvModalContent {
        max-width: calc(100% - 24px); /* leaves 12px gap on each side */
        border-radius: 10px;
        max-height: calc(100vh - 24px);
    }
    .tvModalBody {
        padding: 12px 16px;
        max-height: calc(100vh - 120px);
    }
    /* make buttons and inputs easier to tap */
    .tvFormInput,
    .tvFileUpload input,
    select,
    textarea,
    .tvBtnPrimary,
    .modal-close-btn {
        width: 100%;
        box-sizing: border-box;
    }
    /* keep close button visible without touching edge */
    .modal-close-btn {
        position: relative;
        margin-left: auto;
        margin-right: 0;
    }
    .tvProgressLabel {
        display: block !important;       
        font-size: 12px;                 
        max-width: 90px;                 
        white-space: normal;             
        text-align: center;              
        line-height: 1.1;
        margin-top: 4px;
        color: #374151;                  
    }

    .tvProgressStep {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        margin: 0 20px;           
        vertical-align: top;
    }
}

@media (max-width: 360px) {
        .tvProgressLabel {
            font-size: 11px;
            max-width: 70px;
        }
    }

/* Responsive modal spacing so modals don't touch mobile edges */
@media (max-width: 640px) {
    .modal,
    .gmaps-modal {
        display: none;
    }

    .modal.active,
    .gmaps-modal.active {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px; /* space from left/right edges */
        box-sizing: border-box;
    }

    /* constrain modal content to viewport minus padding */
    .modal .modal-content,
    .modal-content,
    .gmaps-modal-content,
    .toModalContent{
        width: 100%;
        max-width: calc(100% - 32px); /* leaves 16px gap each side */
        margin: 0 auto;
        border-radius: 12px;
        box-sizing: border-box;
    }

    /* keep header/pet content padded and scrollable */
    .toPetHeader,
    .petHeader,
    .scrollableContent,
    .petContent,
    .modal .caption,
    .modal .modal-body {
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    /* prevent content from overflowing the viewport */
    .scrollableContent,
    .petContent,
    .modal .modal-content,
    .gmaps-modal-content {
        max-height: calc(80vh);
        overflow-y: auto;
    }

    /* move close buttons slightly inward if needed */
    .modal .close-button,
    .gmaps-close-btn,
    .chatbot-close {
        right: 8px;
        top: 8px;
    }
    .cr-modal {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) scale(0.95) !important;
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
    }

    .cr-modal.active {
        transform: translate(-50%, -50%) scale(1) !important;
        opacity: 1 !important;
    }
}

        .toInfoItem {
            margin-bottom: 0.75rem;
            background-color: #f8fafc;
            padding: 0.75rem;
            border-radius: 0.5rem;
            border: 1px solid #e2e8f0;
            transition: all 0.2s ease;
        }
        .toInfoItem:hover {
            border-color: #c4b5fd;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        .toInfoLabel {
            font-weight: 600;
            color: #4b5563;
            font-size: 0.875rem;
            margin-bottom: 0.25rem;
        }
        .toStatusBadge {
            display: inline-block;
            padding: 0.35rem 0.85rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 500;
            letter-spacing: 0.025em;
        }
        .toStatusPending {
            background-color: #fef3c7;
            color: #b45309;
            border: 1px solid #fcd34d;
        }
        .toPetHeader {
            border-radius: 0.5rem 0.5rem 0 0;
            padding: 1.5rem;
        }
       .scrollableContent {
            border-radius: 0 0 0.5rem 0.5rem;
            overflow-y: auto;
        }
        .toBtn {
            transition: all 0.2s ease;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        .toBtn:hover {
            transform: translateY(-1px);
        }
        .toBtn:active {
            transform: translateY(0);
        }
        .toCompatibilityCard {
            border-radius: 0.75rem;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .toCompatibilityCard:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .toCompatibilityHeader {
            padding: 1rem;
            text-align: center;
            font-weight: 600;
        }
        .toCompatibilityBody {
            padding: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .toCompatibilityIcon {
            height: 3rem;
            width: 3rem;
        }

        .scrollableContent::-webkit-scrollbar { 
            width: 12px;
        }

        .scrollableContent::-webkit-scrollbar-track {
            background: #eeeded; /* very light gray track */
        }

        .scrollableContent::-webkit-scrollbar-thumb {
            background: #d1d1d1; /* light gray thumb */
            border: 3px solid #e2dddd; /* subtle border */
            border-radius: 5px;
        }

        .scrollableContent::-webkit-scrollbar-thumb:hover {
            background: #bcbcbc; /* slightly darker on hover */
           
        }


        .toNoteBox-approved {
            background-color: #d1fae5;
            border-left: 4px solid #047857;
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .toNoteBox-pending {
            background-color: #fef3c7;
            border-left: 4px solid #b45309;
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .toNoteBox-cancelled {
            background-color: #fef2f2;
            border-left: 4px solid #991b1b;
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .toNoteBox-failed {
            background-color: #fee2e2;
            border-left: 4px solid #b91c1c;
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .toNoteBox-rejected {
            background-color: #fee2e2;
            border-left: 4px solid #b91c1c;
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .toNoteBox-successful {
            background-color: #dbeafe;
            border-left: 4px solid #1d4ed8;
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .toNoteBox-returned {
            background-color: #ede9fe;
            border-left: 4px solid #6b21a8;
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .toDocumentCard {
            background-color: white;
            border: 1px solid #e2e8f0;
            border-radius: 0.5rem;
            padding: 1rem;
            display: flex;
            align-items: center;
            transition: all 0.2s ease;
        }
        .toDocumentCard:hover {
            border-color: #c4b5fd;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .toDocumentIcon {
            width: 2.5rem;
            height: 2.5rem;
            margin-right: 1rem;
            flex-shrink: 0;
        }
        .toImageGrid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }
        @media (max-width: 640px) {
            .toImageGrid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        .toPetImage {
            aspect-ratio: 1/1;
            object-fit: cover;
            border-radius: 0.5rem;
            transition: all 0.2s ease;
            cursor: pointer;
        }
        .toPetImage:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .toReasonBox {
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 0.5rem;
            padding: 1.25rem;
        }

        .toEmpty-state {
            background-color: #f8fafc;
            border: 1px dashed #cbd5e1;
            border-radius: 0.5rem;
            padding: 1rem;
            text-align: center;
            color: #64748b;
            font-style: italic;
        }

                .cr-modal-backdrop {
            backdrop-filter: blur(5px);
            background-color: rgba(0, 0, 0, 0.5);
        }


        
        .cr-modal {
            transform: translate(-50%, -50%) scale(0.8);
            opacity: 0;
            transition: all 0.3s ease-in-out;
        }
        
        .cr-modal.active {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
        
        .cr-toast {
            display: none; /* Hidden by default */
            right: -400px;
            transition: all 0.5s ease-in-out;
        }
        
        .cr-toast.active {
            display: flex; /* Show when active */
            right: 20px;
        }
        
        .cr-toast.hiding {
            opacity: 0;
            transform: translateY(-20px);
        }
        
        .cr-progress-bar {
            height: 3px;
            background-color: #8b5cf6;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            animation: cr-progress 5s linear forwards;
        }
        
        @keyframes cr-progress {
            0% { width: 100%; }
            100% { width: 0%; }
        }
        

        
        .cr-btn-secondary {
            transition: all 0.3s ease;
        }
        
        .cr-btn-secondary:hover {
            background-color: #f3f4f6;
            transform: translateY(-2px);
        }
        
        .cr-btn-danger {
            background-color: #ef4444;
            transition: all 0.3s ease;
        }
        
        .cr-btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3);
        }
    
        
        .cr-other-reason {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        
        .cr-other-reason.show {
            max-height: 100px;
        }
/* volunteer form */
                .popup {
            visibility: hidden;
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: scale(0.95);
        }
        .popup.active {
            visibility: visible;
            opacity: 1;
            transform: scale(1);
        }
        .required::after {
            content: "*";
            color: #e53e3e;
            margin-left: 2px;
        }

.vol-toggle-option {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 2px solid #cbd5e1;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.vol-toggle-option:hover {
    background-color: #e0f7f1; /* light teal/emerald */
}
.vol-toggle-option.selected {
    background-color: #d1fae5; /* light emerald background */
    border-color: #10b981; /* emerald-500 */
}
.vol-toggle-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.vol-toggle-mark {
    height: 20px;
    width: 20px;
    min-width: 20px;
    border-radius: 4px;
    border: 2px solid #cbd5e0;
    display: flex;
    align-items: center;
    padding: 2px;
    justify-content: center;
    margin-right: 10px;
    transition: all 0.2s;
}
.vol-toggle-option.selected .vol-toggle-mark {
    border-color: #10b981;
    background-color: #10b981;
}

.vol-toggle-option.selected .checkmark-svg  {
    display: block;
}

.vol-custom-radio {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 2px solid #cbd5e1;
    cursor: pointer;
    transition: all 0.2s;
}
.vol-custom-radio:hover {
    background-color: #e0f7f1;
}
.vol-custom-radio.selected {
    background-color: #d1fae5;
    border: 2px solid #10b981;
}
.vol-custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.vol-checkmark {
    height: 20px;
    width: 20px;
    min-width: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    transition: all 0.2s;
}
.vol-custom-radio.selected .vol-checkmark {
    border: 2px solid #10b981;
    background-color: #10b981;
}
.vol-checkmark::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
    display: none;
}
.vol-custom-radio.selected .vol-checkmark::after {
    display: block;
}
.vol-form-input {
    transition: all 0.2s;
    border: 2px solid #cbd5e1;
}
.vol-form-input:focus {
    border: 2px solid #10b981;
}
.export-form-input {
    outline: none;
    transition: all 0.2s;
    border: 2px solid #cbd5e1;
}
.export-form-input:focus {
    border: 2px solid #f59e42;
}
.dateVol input[type="date"]:focus {
    outline: none;
    border: 2px solid #10b981;
}
.dateExport input[type="date"]:focus {
    outline: none;
    border: 2px solid #f59e42;
}
.vol-custom-select {
    position: relative;
}
.vol-custom-select select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    background-color: white;
    cursor: pointer;
}
.vol-custom-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #10b981;
    pointer-events: none;
}
.form-header {
    position: sticky;
    top: 0;
    z-index: 10;
    color: white;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
}
.vol-form-content {
    overflow-y: auto;
    max-height: calc(90vh - 80px);
}
.vol-form-content::-webkit-scrollbar {
    width: 10px;
}
.vol-form-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.vol-form-content::-webkit-scrollbar-thumb {
    background: #6ee7b7; /* light emerald */
    border-radius: 0px;
}
.vol-form-content::-webkit-scrollbar-thumb:hover {
    background: #10b981;
}
.vol-date-select {
    position: relative;
    border-radius: 0.5rem;
    border: 2px solid #10b981;
    background-color: white;
    transition: all 0.2s;
}
.vol-date-select:focus-within {
    border-color: #10b981;
}
.vol-date-select select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 1rem;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    color: #4b5563;
}
.vol-date-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #10b981;
    pointer-events: none;
}
.vol-date-select:hover {
    background-color: #f0fdfa;
}
.vol-toggle-hint {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #10b981;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-bottom-left-radius: 6px;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.2s;
}
.vol-toggle-option:hover .vol-toggle-hint {
    transform: translateY(0);
    opacity: 1;
}

        /* Add to your <style> */
        #confirmModal {
            display: none;
        }
        #confirmModal:not(.hidden) {
            display: flex;
        }

/* Footer Design */
        .fr-footer-gradient {
            background: linear-gradient(135deg, #ffc629 0%, #ffb52e 50%, #ff9f2e 100%);
        }
        .fr-footer-link {
            transition: all 0.3s ease;
            position: relative;
        }
        .fr-footer-link:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background-color: #fff;
            transition: width 0.3s ease;
        }
        .fr-footer-link:hover:after {
            width: 100%;
        }
        .fr-social-icon {
            transition: all 0.3s ease;
        }
        .fr-social-icon:hover {
            transform: translateY(-3px) scale(1.1);
            filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
        }
        .fr-footer-bottom {
            background-color: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(5px);
        }  

        /* Toast */

        .puToastContainer {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-width: 700px;
        }
        
        .puToast, .puToast2 {
            transform: translateX(400px);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
            height: 52px;
            border: 3px solid #fff;
            align-items: center;
        }
        
        .puToast.puShow {
            transform: translateX(0);
            opacity: 1;
        }

        .puToast2.puShow {
            transform: translateX(0);
            opacity: 1;
        }
        
        .puProgressBar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            width: 100%;
            transform-origin: left;
            background-color: rgba(255, 255, 255, 0.3);
        }
        
        .puToastContent {
            display: flex;
            align-items: center;
            height: 100%;
            width: 100%;
            padding: 0 12px;
            position: relative;
        }
        
        /* Fixed animations for each toast type */
        .puSuccessContent {
            animation: puBounce 0.5s ease both;
        }
        
        .puErrorContent {
            animation: puShake 0.5s ease both;
        }
        
        .puWarningContent {
            animation: puSlideDown 0.5s ease both;
        }
        
        .puInfoContent {
            animation: puFadeIn 0.5s ease both;
        }
        
        @keyframes puBounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-8px);}
            60% {transform: translateY(-4px);}
        }
        
        @keyframes puShake {
            0%, 100% {transform: translateX(0);}
            20%, 60% {transform: translateX(-4px);}
            40%, 80% {transform: translateX(4px);}
        }
        
        @keyframes puSlideDown {
            from {transform: translateY(-10px); opacity: 0;}
            to {transform: translateY(0); opacity: 1;}
        }
        
        @keyframes puFadeIn {
            from {opacity: 0;}
            to {opacity: 1;}
        }
        
        @keyframes puProgress {
            0% { transform: scaleX(1); }
            100% { transform: scaleX(0); }
        }
        
        .puToastIcon {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }
        
        .puToastMessage {
            font-size: 16px;
            font-weight: 500;
            margin-left: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2;
            flex: 1;
        }
        
        .puToastClose, .puToastClose2 {
            padding: 4px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .puToastClose:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .puToastClose2:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        .puToastSuccess {
            background-color: #10b981;
        }
        
        .puToastError {
            background-color: #ef4444;
        }
        
        .puToastWarning {
            background-color: #f59e0b;
        }
        
        .puToastInfo {
            background-color: #3b82f6;
        }

        @media (max-width: 640px) {
            .puToastContainer {
                top: 12px;
                left: 10px;
                right: 10px;
                /* center column items so full-width toasts sit centered in viewport */
                display: flex;
                align-items: center;
                max-width: none;
                gap: 8px;
                padding: 0;
            }

            .puToast, .puToast2 {
                width: 100%;
                max-width: 100%;
                height: auto; /* let content determine height on small screens */
                min-height: 48px;
                transform: translateX(100%); /* slide from right */
                opacity: 0;
                border-radius: 10px;
            }

            .puToast.puShow,
            .puToast2.puShow {
                transform: translateX(0);
                opacity: 1;
            }
            .puToastContent {
                padding: 10px;
            }

            .puToastMessage {
                white-space: normal; /* allow wrapping */
                overflow: visible;
                text-overflow: unset;
                font-size: 14px;
                margin-left: 8px;
            }

            .puToastClose, .puToastClose2 {
                flex-shrink: 0;
                margin-left: 8px;
            }

            .puToastIcon {
                width: 18px;
                height: 18px;
                flex-shrink: 0;
            }

            .puToast, .puToast2 {
                transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s;
            }
        }

        @media (max-width: 360px) {
            .puToastMessage {
                font-size: 13px;
            }

            .puToast {
                border-width: 2px;
            }
        }
        .gmaps-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.50);
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .gmaps-modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
        }

        .gmaps-modal-content {
            background: white;
            border-radius: 20px;
            width: 85%;
            max-width: 700px;
            max-height: 80%;
            overflow: hidden;
            transform: scale(0.9);
            transition: transform 0.3s ease;
            box-shadow: 0 25px 80px rgba(0,0,0,0.4);
            touch-action: manipulation;
            position: relative;
            z-index: 1001;
            isolation: isolate;
            contain: layout style paint;
            transform-origin: center center;
            will-change: transform;
        }

        .gmaps-modal.active .gmaps-modal-content {
            transform: scale(1);
        }

        .gmaps-modal-header {
            background: linear-gradient(135deg, #FFC629 0%, #f8b600 100%);
            color: white;
            font-family: "PExBold";
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 2000;
            isolation: isolate;
            contain: layout style paint;
            transform: translateZ(0);
            will-change: auto;
        }

        .gmaps-modal-title {
            font-weight: 700;
            margin: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.5rem;
        }

        .gmaps-close-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            font-size: 1.5rem;
            color: white;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 50%;
            transition: all 0.2s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gmaps-close-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }

        .gmaps-map-container {
            height: 450px;
            position: relative;
            background: #f0f4f8;
            isolation: isolate;
            contain: layout style paint;
            border-radius: 0 0 20px 20px;
            overflow: hidden;
        }

        #gmaps-map {
            width: 100%;
            height: 100%;
        }

        .gmaps-map-controls {
            position: absolute;
            top: 1rem;
            right: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            z-index: 1000;
        }

        .gmaps-control-btn {
            width: 44px;
            height: 44px;
            background: white;
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: bold;
            color: #4a5568;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gmaps-control-btn:hover {
            background: #f7fafc;
            transform: scale(1.05);
            box-shadow: 0 6px 16px rgba(0,0,0,0.2);
        }

        .gmaps-location-info {
            display: none;
        }

        .gmaps-info-grid {
            display: none;
        }

        .gmaps-info-item {
            text-align: center;
            padding: 1.5rem;
            background: linear-gradient(135deg, #f8fafc, #e2e8f0);
            border-radius: 16px;
            transition: transform 0.2s ease;
        }

        .gmaps-info-item:hover {
            transform: translateY(-2px);
        }

        .gmaps-info-icon {
            font-size: 1.8rem;
            margin-bottom: 0.75rem;
            display: block;
        }

        .gmaps-info-label {
            font-size: 0.8rem;
            color: #718096;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

        .gmaps-info-value {
            font-weight: 700;
            color: #2d3748;
            font-size: 1rem;
        }


        @media (max-width: 768px) {
            .gmaps-modal-content {
                width: 98%;
                margin: 1rem;
            }
            
            .gmaps-map-container {
                height: 400px;
            }
            
            .gmaps-location-card {
                max-width: 100%;
                padding: 2rem;
            }

            .gmaps-title {
                font-size: 2rem;
            }
        }

            .asFormInput, .drFormInput {
                transition: all 0.2s;
                border: 2px solid #cbd5e1;
            }
            .asFormInput:focus {
                border-color: #ffbb00;
            }
            .drFormInput:focus {
                border-color: #f43f5e
;
            }

        .modal-close-btn {
            background: rgba(255,255,255,0.3);
            border: none;
            font-size: 1.2rem;
            color: white;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 50%;
            transition: all 0.2s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-close-btn:hover {
            background: rgba(255,255,255,0.4);
            transform: scale(1.1);
        }
        .ExportBtn {
            background-image: linear-gradient(135deg, #fbbf24 0%, #f59e42 100%);
            transition: all 0.3s;
        }
        .ExportBtn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
        }
        @keyframes tvSlideIn {
            from {
                transform: translateY(30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        .slidein {
            z-index: 50;
            animation: tvSlideIn 0.3s ease-out;
           

        }

        .export-toggle-option {
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            border: 2px solid #cbd5e1;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }
        .export-toggle-option:hover {
            background-color: #fef3c7;
        }
        .export-toggle-option.selected {
            background-color: #fef3c7;
            border-color: #fbbf24;
        }
        .export-toggle-option input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }
        .export-toggle-mark {
            height: 20px;
            width: 20px;
            flex-shrink: 0;
            min-width: 20px;
            border-radius: 4px;
            border: 2px solid #cbd5e0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            padding: 2px;
            transition: all 0.2s;
        }
        .export-toggle-option.selected .export-toggle-mark {
            border-color: #fbbf24 ;
            background-color: #f59e42;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        /* hide SVG by default */
        .checkmark-svg {
            display: none;
        }

        /* show SVG when label has tvSelected */
        .export-toggle-option.selected .checkmark-svg {
            display: block;
        }

        .export-toggle-hint {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fbbf24;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-bottom-left-radius: 6px;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.2s;
}
.export-toggle-option:hover .export-toggle-hint {
    transform: translateY(0);
    opacity: 1;
}

/* Toggle button design */
.switch {
 --button-width: 3.5em;
 --button-height: 2em;
 --toggle-diameter: 1.5em;
 --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
 --toggle-shadow-offset: 10px;
 --toggle-wider: 3em;
 --color-grey: #cccccc;
 --color-green: #FFC629;
}

.slider {
 display: inline-block;
 width: var(--button-width);
 height: var(--button-height);
 background-color: var(--color-grey);
 border-radius: calc(var(--button-height) / 2);
 position: relative;
 transition: 0.3s all ease-in-out;
}

.slider::after {
 content: "";
 display: inline-block;
 width: var(--toggle-diameter);
 height: var(--toggle-diameter);
 background-color: #fff;
 border-radius: calc(var(--toggle-diameter) / 2);
 position: absolute;
 top: var(--button-toggle-offset);
 transform: translateX(var(--button-toggle-offset));
 box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
 transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked + .slider {
 background-color: var(--color-green);
}

.switch input[type="checkbox"]:checked + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
 box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
 display: none;
}

.switch input[type="checkbox"]:active + .slider::after {
 width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

/* Error message container */
.parsley-errors-list-required {
    margin-top: 5px;        /* mt-1 */
    font-size: 12px;        /* text-xs */
    color: #6B7280;         /* gray-500 */
    font-style: italic;     /* italic */
}

.parsley-errors-list {
    margin-top: 5px;        /* mt-1 */
    font-size: 12px;        /* text-xs */
    color: #EF4444;         /* gray-500 */    /* italic */
}

/* Individual error item */
.parsley-errors-list li {
    line-height: 1.25rem; /* adjust spacing */
}

/* Optional: style invalid input */
input.parsley-error:not([type="radio"]):not([type="checkbox"]) {
    border-color: #ef4444; /* red border */
    box-shadow: 0 0 0 2px #ef4444;
}

input.border-red-500:focus,
textarea.border-red-500:focus,
select.border-red-500:focus {
    outline: none;   /* remove default focus outline */
    box-shadow: 0 0 0 2px #ef4444; /* match Tailwind border-red-500 ring manually */
}

#updatePersonalSubmit:disabled, #updateFinancialSubmit:disabled, #updateHousingSubmit:disabled, #updateOwnershipSubmit:disabled, #updatePreferenceSubmit:disabled, #updateEmailSubmit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.faq-chatbot-root .bot-message.answer a {
    color: #2563eb;         /* Example: Tailwind blue-600 */
    text-decoration: underline;
    font-weight: 600;
}
.faq-chatbot-root .bot-message.answer a:hover {
    color: #1d4ed8;         /* Example: Tailwind blue-700 */
    text-decoration: underline;
}