/* ===== Global ===== */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

html { scrollbar-gutter: stable; } /* avoid page width shift when scrollbar appears */
body {
    overflow-y: scroll; /* fallback for older browsers */
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.center {
    margin: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive padding utility used by page */
.padding { padding: 5rem; }
@media (max-width: 991.98px) { .padding { padding: 1.5rem; } }
@media (max-width: 767.98px) { .padding { padding: 1rem; } }

.flex-grow-1 { min-width: 0; } /* allow flex child to shrink properly */

/* ===== Navbar / Modal text styles ===== */
.modal-header { border-bottom: none; }
.modal-title { font-size: 25px; font-weight: 700; color: #1A237E; }
.modal-body { font-style: italic; font-size: 15px; font-weight: 500; color: #1A237E; }

/* ===== Layout: Sidebar ===== */
/* Default sidebar sizing for small screens (visible only on lg and up in markup) */
.sidebar-lg {
    margin-left: 20px;
    width: 320px;
    min-width: 240px;
    padding-right: 1rem;
}

/* Keep sidebar a stable, non-flexing column on large screens */
@media (min-width: 992px) {
    .d-flex { align-items: flex-start; }
    .sidebar-lg {
        flex: 0 0 320px;
        width: 320px;
        min-width: 320px;
        max-width: 320px;
        box-sizing: border-box;
        align-self: flex-start;
        position: sticky;
        top: 80px; /* adjust if navbar height differs */
        min-height: calc(100vh - 96px); /* reserve viewport space to avoid width jumps */
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .offcanvas.offcanvas-start .offcanvas-body {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    .flex-grow-1 { flex: 1 1 auto; }
    }

/* ===== Filter panel ===== */
.sidebar-lg h5, .offcanvas-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a2a6c;
}
.sidebar-lg h6, .offcanvas-body h6 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #d32f2f;
    margin-top: 1rem;
}
.filter-box {
    border: 2px solid #f8b6c2;
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Make the entire label clickable and align contents */
.filter-box .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    position: relative;
    margin: 0;
    padding: 0.25rem 0;
}

/* Native input visually hidden but accessible/focusable */
.form-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

/* Custom square control */
.custom-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #777;
    border-radius: 4px;
    position: relative;
    transition: border-color .18s ease, background-color .18s ease, transform .18s cubic-bezier(.2,.9,.2,1);
    transform-origin: center;
    box-sizing: border-box;
}

/* keyboard focus ring */
.form-check-input:focus + .custom-box {
    box-shadow: 0 0 0 6px rgba(230,57,70,0.10);
    transform: scale(1.02);
}

/* hover feedback */
.filter-box .form-check:hover .custom-box {
    border-color: #555;
    transform: translateY(-1px);
}

/* Checkmark (hidden by default) */
.custom-box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid #e63946;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    transform-origin: center;
    transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .14s ease;
    box-sizing: content-box;
}

/* Checked state: animate box and reveal check */
.form-check-input:checked + .custom-box {
    border-color: #e63946;
    background-color: transparent;
    animation: box-pop .26s cubic-bezier(.2,.9,.2,1);
}
.form-check-input:checked + .custom-box::after {
    transform: rotate(45deg) scale(1);
    opacity: 1;
}
@keyframes box-pop {
    0%   { transform: scale(.92); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* Label text */
.form-check-label {
    font-weight: 500;
    color: #333;
    display: inline-flex;
    align-items: center;
}

/* small icon spacing inside label */
.filter-icon { margin-right: 0.5rem; }

/* ===== Cards ===== */
.card {
    background: #fff;
    border:4px solid #C9A75F; /* added border with requested color */
    border-radius: .25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: box-shadow .2s ease-in;
}
.card:hover { box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05); }
.card-body p:last-child { margin-bottom: 0; }
.card-link {
    color: #D32F2F;
    text-decoration: none;
    transition: color .3s ease-in;
}
.card-link:hover { color: #470c0c; cursor: pointer; }

/* ===== Media / Image ratio helpers ===== */
.media {
    position: relative;
    display: block;
    padding: 0;
    flex-shrink: 0;
    border-radius: inherit;
}
.media:after { content: ''; display: block; padding-top: 50%; } /* 2:1 ratio */
.media-content {
    position: absolute; inset: 0;
    border: 0;
    border-radius: inherit;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(120,120,120,.1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.media-content:before {
    content: '';
    position: absolute;
    height: 10%;
    width: 90%;
    left: 5%;
    bottom: 0;
    background: inherit;
    background-position-y: 100%;
    filter: blur(10px);
}

/* Gradient background helper */
.gd-primary {
    color: #fff;
    border: none;
    background: linear-gradient(45deg,#448bff,#44e9ff);
}