/* 
.grid-container.grid-view .grid-item {
     width: 33.3333%;
     display: block;
     float: left;
 }
 
 .grid-container.list-view .grid-item {
     width: 100%;
     display: flex;
     flex-direction: row;
     margin-bottom: 20px;
 }
 
.grid-container.list-view .card{
     width: 200px;
     height: auto;
     margin-right: 20px;
 }
 
 .grid-container.list-view .card-body {
     flex: 1;
 }
 
 #cookie-consent .text-muted {
    color: var(--primary-text-color) !important;
}

form .form-control::placeholder {
    color: var(--secondary-text-color) !important;
    opacity: 1;
}

.img-overly {
    pointer-events: none;
} */

.modalImage {
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ---------- Auth pages (login / forgot / reset password) ---------- */

body.auth-layout {
    background: var(--bg-light);
}

.login-container {
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    padding: 40px 36px;
}

.login-container img {
    height: 44px;
    width: auto;
    object-fit: contain;
}

.login-container h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 26px;
}

.login-container .form-control {
    border-radius: 10px;
    border-color: rgba(0, 0, 0, 0.08);
    background: var(--bg-light);
    padding: 11px 14px;
    height: auto;
}

.login-container .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--thm-primary-code), 0.12);
    background: var(--thm-white);
}

.login-container .btn-login {
    border-radius: 10px;
    font-weight: 700;
}

.login-container h6 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--thm-secondary-text);
}

/* The base theme's ".btn" rule forces a solid primary background with
   !important, so a plain override is silently dropped here. Beat it the
   same way — these demo-login buttons are secondary actions and shouldn't
   compete visually with the real "Login" submit button anyway. */
.login-container .row.g-2 .btn {
    border-radius: 10px !important;
    background: var(--bg-light) !important;
    color: var(--thm-text) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-weight: 600;
    font-size: 0.85rem;
}

.login-container .row.g-2 .btn:hover {
    background: var(--primary-color) !important;
    color: var(--text-white) !important;
    border-color: var(--primary-color);
}