:root{
    --brand-tan: #C49A76;
    --brand-gray: #8B8C8D;
    --brand-white: #ffffff;
    --brand-dark: #6b5a45;
}

/* General helpers matching the header inline styles */
.text-brand-tan{ color:var(--brand-tan) !important; }
.text-brand-gray{ color:var(--brand-gray) !important; }
.bg-brand-tan{ background-color:var(--brand-tan) !important; }
.border-brand-tan{ border-color:var(--brand-tan) !important; }

/* Theme buttons */
.btn-theme{
    background-color:var(--brand-tan);
    color:var(--brand-white);
    border-radius:50px;
    padding:8px 18px;
    font-weight:700;
    border:1px solid rgba(0,0,0,0.03);
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.btn-theme:hover{ background-color: #b08a69; color:var(--brand-white); transform:translateY(-1px); }

.btn-theme-outline{
    background:transparent;
    color:var(--brand-tan);
    border:2px solid var(--brand-tan);
    border-radius:50px;
    padding:6px 16px;
    font-weight:700;
}
.btn-theme-outline:hover{ background:var(--brand-tan); color:var(--brand-white); }

/* Theme colored variants for common action buttons */
.btn-theme-success{
    background-color: #5CB85C; /* Bootstrap green */
    color: #fff;
    border-radius:50px;
    padding:8px 14px;
    font-weight:700;
    border:1px solid rgba(0,0,0,0.04);
}
.btn-theme-success:hover{ background-color:#4cae4c; transform:translateY(-1px); }

.btn-theme-danger{
    background-color: #d9534f; /* Bootstrap red */
    color:#fff;
    border-radius:50px;
    padding:8px 14px;
    font-weight:700;
    border:1px solid rgba(0,0,0,0.04);
}
.btn-theme-danger:hover{ background-color:#c9302c; transform:translateY(-1px); }

.btn-theme-warning{
    background-color: #f0ad4e; /* Bootstrap orange */
    color:#2b2b2b;
    border-radius:50px;
    padding:8px 14px;
    font-weight:700;
    border:1px solid rgba(0,0,0,0.04);
}
.btn-theme-warning:hover{ background-color:#ec971f; transform:translateY(-1px); }

/* Nav icon */
.nav-icon{ color:var(--brand-tan); font-size:1.25rem; transition:0.25s; }
.nav-icon:hover{ color:var(--brand-gray); }

/* Offcanvas (side menu) customizations */
.offcanvas-custom .offcanvas-header{ border-bottom:1px solid rgba(0,0,0,0.03); }
.offcanvas-custom .offcanvas-body{ padding-top:1rem; }
.offcanvas-custom{ width:320px; max-width:85%; }

.menu-list{ list-style:none; padding:0; margin:0; }
.menu-item{ display:flex; align-items:center; gap:12px; padding:12px 8px; border-radius:10px; transition:background 0.18s; }
.menu-item a{ color:var(--brand-dark); text-decoration:none; font-weight:600; width:100%; display:flex; align-items:center; }
.menu-item:hover{ background:rgba(196,154,118,0.08); }
.menu-item .fa-fw{ width:24px; text-align:center; }

/* Footer area of offcanvas */
.offcanvas-footer{ position:absolute; left:0; right:0; bottom:0; padding:12px; border-top:1px solid rgba(0,0,0,0.03); background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98)); }

/* Fix: ensure Bootstrap nav/tab lists don't fall back to default list rendering
   (addresses cases where some reset is missing or overridden) */
.nav, .nav-tabs { list-style: none !important; padding-left: 0 !important; margin-bottom: 0 !important; }
/* Scope: force horizontal layout for the memorial tabs only (id #memTab) to avoid touching other site navs */
#memTab { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 0.5rem; }
.nav-tabs .nav-link { display: inline-block; }
.nav-tabs .nav-item { margin-bottom: 0 !important; }
.nav-tabs .nav-link { border-radius: 0.35rem; }

/* Small utilities */
.kv-muted{ color:var(--brand-gray); font-size:0.9rem; }

@media (max-width:576px){ .offcanvas-custom{ width:280px; } }

/* Compact gallery thumbnails */
#attachments-list { display:flex; flex-wrap:wrap; gap:12px; }
/*#attachments-list .attach-card { width:110px; flex:0 0 110px; }*/
#attachments-list .attach-card img, #attachments-list .thumb img { width:110px; height:110px; object-fit:cover; display:block; border-radius:6px; }
#attachments-list .thumb { border-radius:6px; overflow:hidden; display:inline-block; }
.new-file-preview { width:110px; }

/* small helper to align add button */
#addImageBtn { min-width:40px; }