body { font-family: 'Plus Jakarta Sans', sans-serif; }

.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.blob {
    position: absolute;
    z-index: -1;
    filter: blur(60px);
    opacity: 0.3;
    transition: all .5s ease;
}

/* Force override Bootstrap utilities to use Urbanova colors */
.bg-primary {
    background-color: #c7d421 !important;
}

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

/* Common Button Styles mimicking index.html */
.btn {
    border-radius: 1rem; /* rounded-2xl */
    font-weight: 700;
    transition: all 0.2s ease-in-out; /* transition-all duration-200 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
    padding: 0.5rem 1.5rem;
    border: none;
}

.btn:hover {
    transform: translateY(-2px); /* hover:translate-y-[-2px] */
}

/* Force override Bootstrap CSS variables for hover states to prevent the default blue #0b5ed7 */
.btn-primary {
    --bs-btn-color: #222f5f;
    --bs-btn-bg: #c7d421;
    --bs-btn-border-color: #c7d421;
    --bs-btn-hover-color: #222f5f;
    --bs-btn-hover-bg: #c7d421;
    --bs-btn-hover-border-color: #c7d421;
    --bs-btn-focus-shadow-rgb: 199, 212, 33;
    --bs-btn-active-color: #222f5f;
    --bs-btn-active-bg: #c7d421;
    --bs-btn-active-border-color: #c7d421;

    background-color: #c7d421 !important;
    border-color: #c7d421 !important;
    color: #222f5f !important;
}

.btn-primary:hover {
    filter: brightness(1.05);
    background-color: #c7d421 !important;
    border-color: #c7d421 !important;
    color: #222f5f !important;
}

/* Secondary Button - Urbanova Blue */
.btn-secondary, .bg-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgb(34, 47, 95);
    --bs-btn-border-color: rgb(34, 47, 95);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgb(34, 47, 95);
    --bs-btn-hover-border-color: rgb(34, 47, 95);
    --bs-btn-focus-shadow-rgb: 34, 47, 95;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(34, 47, 95);
    --bs-btn-active-border-color: rgb(34, 47, 95);

    --tw-bg-opacity: 1;
    background-color: rgb(34 47 95 / var(--tw-bg-opacity, 1)) !important;
    border-color: rgb(34 47 95 / var(--tw-bg-opacity, 1)) !important;
    color: white !important;
}

.btn-secondary:hover { 
    background-color: rgb(34 47 95 / var(--tw-bg-opacity, 1)) !important;
    border-color: rgb(34 47 95 / var(--tw-bg-opacity, 1)) !important;
    opacity: 0.95;
    color: white !important;
}

/* Specific override for Bootstrap's complex selectors like .btn:first-child:hover */
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: inherit !important;
    border-color: inherit !important;
}

/* Inputs */
.form-control {
    border-radius: 0.75rem; /* rounded-xl */
    padding: 0.75rem;
}

.form-control:focus { 
    border-color: #c7d421; 
    box-shadow: 0 0 0 0.25rem rgba(199, 212, 33, 0.25); 
}

.input-group {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Pagination */
.page-item.active .page-link { 
    background-color: #c7d421; 
    border-color: #c7d421; 
    color: #222f5f; 
    font-weight: bold;
}

.page-link {
    color: #222f5f;
    border-radius: 0.5rem;
    margin: 0 2px;
}