html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Drag & Drop Image Zones */
.drop-zone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    min-height: 90px;
    display: flex;
  flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #fafafa;
}

.drop-zone:hover {
    border-color: #86b7fe;
    background: #f0f7ff;
}

.drop-zone--over {
    border-color: #0d6efd;
    background: #e7f1ff;
    border-style: solid;
}

.drop-zone--has-file {
    border-color: #198754;
    border-style: solid;
    background: #f0faf4;
}

.drop-zone .drop-zone-prompt {
    color: #888;
    font-size: 0.85rem;
    pointer-events: none;
}

.drop-zone .drop-zone-icon {
    font-size: 1.5rem;
    pointer-events: none;
}

.drop-zone input[type="file"] {
    display: none;
}

.drop-zone-preview {
    margin-top: 6px;
}

/* Browse Auction Card Images */
.auction-card-img-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f0f0f0;
    display: flex;
  align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

/* Half-size image wrapper for recommendation cards */
.auction-card-img-wrapper.auction-card-img-sm {
    aspect-ratio: 4 / 3;
    max-height: 100px;
}

/* Extra-small image wrapper for recently viewed on Browse page */
.auction-card-img-wrapper.auction-card-img-xs {
    aspect-ratio: 1 / 1;
    max-height: 80px;
}

.auction-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.auction-card-img-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.auction-card-img-wrapper .no-image-placeholder {
    color: #fff;
    font-size: 0.95rem;
}

/* ?? Dark Mode ???????????????????????????????????????????????? */
body.dark-mode {
    background-color: #1a1a2e;
    color: #e0e0e0;
}

body.dark-mode .container {
  color: #e0e0e0;
}

/* Cards */
body.dark-mode .card {
    background-color: #16213e;
  border-color: #0f3460;
    color: #e0e0e0;
}

body.dark-mode .card-header {
    background-color: #0f3460;
    border-color: #0f3460;
    color: #e0e0e0;
}

body.dark-mode .card-footer {
  background-color: #0f3460;
    border-color: #0f3460;
}

/* Tables */
body.dark-mode .table {
 color: #e0e0e0;
  --bs-table-bg: #16213e;
    --bs-table-striped-bg: #1a2744;
    --bs-table-hover-bg: #1e2d50;
 border-color: #0f3460;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #1a2744;
  color: #e0e0e0;
}

body.dark-mode .table th,
body.dark-mode .table td {
    border-color: #0f3460;
}

body.dark-mode .table-danger {
    --bs-table-bg: #4a1a2e;
    color: #e0e0e0;
}

/* Forms */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #1a2744;
    border-color: #0f3460;
    color: #e0e0e0;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #1e2d50;
    border-color: #258cfb;
    color: #e0e0e0;
}

body.dark-mode .form-control::placeholder {
color: #8899aa;
}

body.dark-mode .input-group-text {
    background-color: #0f3460;
    border-color: #0f3460;
    color: #e0e0e0;
}

body.dark-mode .form-check-input {
    background-color: #1a2744;
    border-color: #0f3460;
}

body.dark-mode .form-check-input:checked {
    background-color: #258cfb;
    border-color: #258cfb;
}

/* Alerts */
body.dark-mode .alert-info {
  background-color: #0f3460;
    border-color: #1a4a7a;
    color: #a8d8ea;
}

body.dark-mode .alert-success {
    background-color: #1a3a2a;
    border-color: #2a5a3a;
    color: #a8e6cf;
}

body.dark-mode .alert-danger {
    background-color: #4a1a2e;
    border-color: #6a2a3e;
    color: #f5a0b0;
}

body.dark-mode .alert-warning {
    background-color: #4a3a1a;
    border-color: #6a5a2a;
    color: #f5e0a0;
}

/* Text utilities */
body.dark-mode .text-dark {
    color: #e0e0e0 !important;
}

body.dark-mode .text-muted {
    color: #8899aa !important;
}

body.dark-mode a {
    color: #64b5f6;
}

body.dark-mode a:hover {
    color: #90caf9;
}

body.dark-mode .text-decoration-none.text-dark {
color: #e0e0e0 !important;
}

/* Buttons - outlines */
body.dark-mode .btn-outline-secondary {
    color: #aab4be;
    border-color: #aab4be;
}

body.dark-mode .btn-outline-secondary:hover {
    background-color: #aab4be;
    color: #1a1a2e;
}

body.dark-mode .btn-outline-primary {
    color: #64b5f6;
    border-color: #64b5f6;
}

body.dark-mode .btn-outline-primary:hover {
    background-color: #64b5f6;
  color: #1a1a2e;
}

/* Backgrounds */
body.dark-mode .bg-light {
    background-color: #1a2744 !important;
    color: #e0e0e0;
}

body.dark-mode .bg-white {
    background-color: #16213e !important;
}

/* Footer */
body.dark-mode .footer {
 background-color: #0f1a2e;
    border-color: #0f3460 !important;
}

body.dark-mode .footer a {
    color: #64b5f6;
}

/* Breadcrumb */
body.dark-mode .breadcrumb {
    background-color: transparent;
}

body.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: #8899aa;
}

body.dark-mode .breadcrumb-item.active {
    color: #8899aa;
}

/* Modals */
body.dark-mode .modal-content {
    background-color: #16213e;
    border-color: #0f3460;
    color: #e0e0e0;
}

/* Dropdown */
body.dark-mode .dropdown-menu {
    background-color: #16213e;
    border-color: #0f3460;
}

body.dark-mode .dropdown-item {
    color: #e0e0e0;
}

body.dark-mode .dropdown-item:hover {
    background-color: #1a2744;
}

/* Pagination */
body.dark-mode .page-link {
    background-color: #16213e;
    border-color: #0f3460;
    color: #64b5f6;
}

body.dark-mode .page-link:hover {
    background-color: #1a2744;
  color: #90caf9;
}

body.dark-mode .page-item.active .page-link {
    background-color: #258cfb;
    border-color: #258cfb;
}

body.dark-mode .page-item.disabled .page-link {
 background-color: #0f1a2e;
    border-color: #0f3460;
    color: #556677;
}

/* Auction card image wrapper in dark mode */
body.dark-mode .auction-card-img-wrapper {
    background: #0f1a2e;
}

/* Image preview popup */
body.dark-mode #img-preview-popup {
    background: #16213e;
    border-color: #0f3460;
}

/* Misc */
body.dark-mode hr {
    border-color: #0f3460;
}

body.dark-mode .border-bottom {
    border-color: #0f3460 !important;
}

body.dark-mode .border-top {
  border-color: #0f3460 !important;
}

body.dark-mode .form-text {
    color: #8899aa;
}

/* News popup modal in dark mode */
body.dark-mode #newsPopupModal .modal-header.bg-info {
    background-color: #0f3460 !important;
    color: #e0e0e0;
}

body.dark-mode #newsPopupModal .modal-header.bg-info .modal-title {
  color: #e0e0e0;
}

/* =====================================================================
   Quick Register card on Item Details (anonymous users only)
   ===================================================================== */
.quick-register-card {
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18), 0 4px 16px rgba(13, 110, 253, 0.12);
    animation: qr-glow 3s ease-in-out infinite;
}

@keyframes qr-glow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18), 0 4px 16px rgba(13, 110, 253, 0.12); }
    50%       { box-shadow: 0 0 0 5px rgba(13, 110, 253, 0.32), 0 4px 24px rgba(13, 110, 253, 0.22); }
}

/* =====================================================================
   Achievement Badges  (Manage / Profile page)
   ===================================================================== */
.achievement-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
    text-align: center;
    gap: 4px;
}

.achievement-badge-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    transition: transform 0.2s;
}

.achievement-badge:hover .achievement-badge-icon {
    transform: scale(1.1);
}

.achievement-badge-label {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}

.achievement-badge-progress {
    width: 100%;
    font-size: 0.65rem;
}

/* Earned badge colours */
.achievement-badge.earned .achievement-badge-icon {
    background: linear-gradient(135deg, #ffd700, #ffa500);
    color: #5c3a00;
    box-shadow: 0 2px 10px rgba(255, 165, 0, 0.45);
}

.achievement-badge.earned.badge-blue .achievement-badge-icon {
    background: linear-gradient(135deg, #64b5f6, #1976d2);
    color: #fff;
    box-shadow: 0 2px 10px rgba(25, 118, 210, 0.4);
}

.achievement-badge.earned.badge-green .achievement-badge-icon {
    background: linear-gradient(135deg, #81c784, #388e3c);
    color: #fff;
    box-shadow: 0 2px 10px rgba(56, 142, 60, 0.4);
}

.achievement-badge.earned.badge-purple .achievement-badge-icon {
    background: linear-gradient(135deg, #ce93d8, #8e24aa);
    color: #fff;
    box-shadow: 0 2px 10px rgba(142, 36, 170, 0.4);
}

.achievement-badge.earned.badge-red .achievement-badge-icon {
    background: linear-gradient(135deg, #ef9a9a, #c62828);
    color: #fff;
    box-shadow: 0 2px 10px rgba(198, 40, 40, 0.4);
}

.achievement-badge.earned.badge-teal .achievement-badge-icon {
    background: linear-gradient(135deg, #80cbc4, #00796b);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 121, 107, 0.4);
}

/* Locked badge */
.achievement-badge.locked .achievement-badge-icon {
    background: #e0e0e0;
    color: #9e9e9e;
    box-shadow: none;
}

.achievement-badge.locked .achievement-badge-label {
    color: #9e9e9e;
}

/* Dark-mode badge overrides */
body.dark-mode .achievement-badge.locked .achievement-badge-icon {
    background: #2a3550;
    color: #556677;
}

body.dark-mode .achievement-badge.locked .achievement-badge-label {
    color: #556677;
}

/* =====================================================================
   Themes  (midnight / ocean / forest / sunset / rose / lavender / slate)
   ===================================================================== */

/* --- Midnight Blue -------------------------------------------------- */
body.theme-midnight {
    background-color: #0d1b2a;
    color: #e0e0e0;
}
body.theme-midnight .card                    { background-color: #112236; border-color: #1a3550; color: #e0e0e0; }
body.theme-midnight .card-header             { background-color: #1a3550; border-color: #1a3550; color: #e0e0e0; }
body.theme-midnight .card-footer             { background-color: #1a3550; border-color: #1a3550; }
body.theme-midnight .table                   { color: #e0e0e0; --bs-table-bg: #112236; --bs-table-striped-bg: #152840; --bs-table-hover-bg: #1a3550; border-color: #1a3550; }
body.theme-midnight .table th,
body.theme-midnight .table td               { border-color: #1a3550; }
body.theme-midnight .form-control,
body.theme-midnight .form-select            { background-color: #152840; border-color: #1a3550; color: #e0e0e0; }
body.theme-midnight .form-control:focus,
body.theme-midnight .form-select:focus      { background-color: #1a3550; border-color: #4a8fc0; color: #e0e0e0; }
body.theme-midnight .form-control::placeholder { color: #6a8aaa; }
body.theme-midnight .input-group-text       { background-color: #1a3550; border-color: #1a3550; color: #e0e0e0; }
body.theme-midnight .alert-info             { background-color: #1a3550; border-color: #2a4560; color: #a8d8ea; }
body.theme-midnight .alert-success          { background-color: #1a3a2a; border-color: #2a5a3a; color: #a8e6cf; }
body.theme-midnight .alert-danger           { background-color: #3a1a2a; border-color: #5a2a3a; color: #f5a0b0; }
body.theme-midnight .alert-warning          { background-color: #3a2a0a; border-color: #5a4a1a; color: #f5d070; }
body.theme-midnight .text-muted             { color: #7a9ab8 !important; }
body.theme-midnight .text-dark              { color: #e0e0e0 !important; }
body.theme-midnight a                       { color: #7ab8e0; }
body.theme-midnight a:hover                 { color: #a8d4f0; }
body.theme-midnight .modal-content         { background-color: #112236; border-color: #1a3550; color: #e0e0e0; }
body.theme-midnight .footer                { background-color: #0a1520; border-color: #1a3550 !important; }
body.theme-midnight .bg-light              { background-color: #152840 !important; color: #e0e0e0; }
body.theme-midnight .bg-white              { background-color: #112236 !important; }
body.theme-midnight .border-bottom,
body.theme-midnight .border-top            { border-color: #1a3550 !important; }
body.theme-midnight .achievement-badge.locked .achievement-badge-icon { background: #1a3550; color: #4a6a8a; }
body.theme-midnight #howToStartFab         { background-color: #4a8fc0; color: #fff; }
body.theme-midnight #howToStartFab:hover   { background-color: #6aafd8; color: #fff; }

/* --- Ocean ---------------------------------------------------------- */
body.theme-ocean {
    background-color: #0a1628;
    color: #b8d4e3;
}
body.theme-ocean .card                      { background-color: #0e1f38; border-color: #163050; color: #b8d4e3; }
body.theme-ocean .card-header               { background-color: #163050; border-color: #163050; color: #b8d4e3; }
body.theme-ocean .card-footer               { background-color: #163050; border-color: #163050; }
body.theme-ocean .table                     { color: #b8d4e3; --bs-table-bg: #0e1f38; --bs-table-striped-bg: #122440; --bs-table-hover-bg: #163050; border-color: #163050; }
body.theme-ocean .table th,
body.theme-ocean .table td                 { border-color: #163050; }
body.theme-ocean .form-control,
body.theme-ocean .form-select              { background-color: #122440; border-color: #163050; color: #b8d4e3; }
body.theme-ocean .form-control:focus,
body.theme-ocean .form-select:focus        { background-color: #163050; border-color: #3a8fc0; color: #b8d4e3; }
body.theme-ocean .form-control::placeholder { color: #5a8aaa; }
body.theme-ocean .input-group-text         { background-color: #163050; border-color: #163050; color: #b8d4e3; }
body.theme-ocean .alert-info               { background-color: #163050; border-color: #204060; color: #90c8e0; }
body.theme-ocean .alert-success            { background-color: #102a20; border-color: #1a4030; color: #80c8a0; }
body.theme-ocean .alert-danger             { background-color: #2a1020; border-color: #401830; color: #e090a8; }
body.theme-ocean .alert-warning            { background-color: #2a2000; border-color: #403000; color: #d0b060; }
body.theme-ocean .text-muted               { color: #6a98b8 !important; }
body.theme-ocean .text-dark                { color: #b8d4e3 !important; }
body.theme-ocean a                         { color: #60b0d8; }
body.theme-ocean a:hover                   { color: #90cce8; }
body.theme-ocean .modal-content           { background-color: #0e1f38; border-color: #163050; color: #b8d4e3; }
body.theme-ocean .footer                  { background-color: #070e1c; border-color: #163050 !important; }
body.theme-ocean .bg-light                { background-color: #122440 !important; color: #b8d4e3; }
body.theme-ocean .bg-white                { background-color: #0e1f38 !important; }
body.theme-ocean .border-bottom,
body.theme-ocean .border-top              { border-color: #163050 !important; }
body.theme-ocean .achievement-badge.locked .achievement-badge-icon { background: #163050; color: #3a6888; }
body.theme-ocean #howToStartFab           { background-color: #3a8fc0; color: #fff; }
body.theme-ocean #howToStartFab:hover     { background-color: #60afd8; color: #fff; }

/* --- Forest --------------------------------------------------------- */
body.theme-forest {
    background-color: #1a2e1a;
    color: #c8e6c9;
}
body.theme-forest .card                    { background-color: #1e381e; border-color: #2a4a2a; color: #c8e6c9; }
body.theme-forest .card-header             { background-color: #2a4a2a; border-color: #2a4a2a; color: #c8e6c9; }
body.theme-forest .card-footer             { background-color: #2a4a2a; border-color: #2a4a2a; }
body.theme-forest .table                   { color: #c8e6c9; --bs-table-bg: #1e381e; --bs-table-striped-bg: #224022; --bs-table-hover-bg: #2a4a2a; border-color: #2a4a2a; }
body.theme-forest .table th,
body.theme-forest .table td               { border-color: #2a4a2a; }
body.theme-forest .form-control,
body.theme-forest .form-select            { background-color: #224022; border-color: #2a4a2a; color: #c8e6c9; }
body.theme-forest .form-control:focus,
body.theme-forest .form-select:focus      { background-color: #2a4a2a; border-color: #5a9a5a; color: #c8e6c9; }
body.theme-forest .form-control::placeholder { color: #6a9a6a; }
body.theme-forest .input-group-text       { background-color: #2a4a2a; border-color: #2a4a2a; color: #c8e6c9; }
body.theme-forest .alert-info             { background-color: #1a3a3a; border-color: #2a5a5a; color: #80c8c8; }
body.theme-forest .alert-success          { background-color: #1a3a1a; border-color: #2a5a2a; color: #90d890; }
body.theme-forest .alert-danger           { background-color: #3a1a1a; border-color: #5a2a2a; color: #e89090; }
body.theme-forest .alert-warning          { background-color: #3a2a0a; border-color: #5a4a1a; color: #d8b860; }
body.theme-forest .text-muted             { color: #7aaa7a !important; }
body.theme-forest .text-dark              { color: #c8e6c9 !important; }
body.theme-forest a                       { color: #70c870; }
body.theme-forest a:hover                 { color: #a0e0a0; }
body.theme-forest .modal-content         { background-color: #1e381e; border-color: #2a4a2a; color: #c8e6c9; }
body.theme-forest .footer                { background-color: #141e14; border-color: #2a4a2a !important; }
body.theme-forest .bg-light              { background-color: #224022 !important; color: #c8e6c9; }
body.theme-forest .bg-white              { background-color: #1e381e !important; }
body.theme-forest .border-bottom,
body.theme-forest .border-top            { border-color: #2a4a2a !important; }
body.theme-forest .achievement-badge.locked .achievement-badge-icon { background: #2a4a2a; color: #4a7a4a; }
body.theme-forest #howToStartFab         { background-color: #5aaa5a; color: #fff; }
body.theme-forest #howToStartFab:hover   { background-color: #7acc7a; color: #fff; }

/* --- Sunset --------------------------------------------------------- */
body.theme-sunset {
    background-color: #2d1b00;
    color: #ffe0b2;
}
body.theme-sunset .card                    { background-color: #3a2200; border-color: #5a3500; color: #ffe0b2; }
body.theme-sunset .card-header             { background-color: #5a3500; border-color: #5a3500; color: #ffe0b2; }
body.theme-sunset .card-footer             { background-color: #5a3500; border-color: #5a3500; }
body.theme-sunset .table                   { color: #ffe0b2; --bs-table-bg: #3a2200; --bs-table-striped-bg: #442800; --bs-table-hover-bg: #5a3500; border-color: #5a3500; }
body.theme-sunset .table th,
body.theme-sunset .table td               { border-color: #5a3500; }
body.theme-sunset .form-control,
body.theme-sunset .form-select            { background-color: #442800; border-color: #5a3500; color: #ffe0b2; }
body.theme-sunset .form-control:focus,
body.theme-sunset .form-select:focus      { background-color: #5a3500; border-color: #e08030; color: #ffe0b2; }
body.theme-sunset .form-control::placeholder { color: #c09060; }
body.theme-sunset .input-group-text       { background-color: #5a3500; border-color: #5a3500; color: #ffe0b2; }
body.theme-sunset .alert-info             { background-color: #3a3000; border-color: #5a5000; color: #f0d080; }
body.theme-sunset .alert-success          { background-color: #1a3a1a; border-color: #2a5a2a; color: #90d890; }
body.theme-sunset .alert-danger           { background-color: #4a1a00; border-color: #7a2a00; color: #f5a080; }
body.theme-sunset .alert-warning          { background-color: #4a3000; border-color: #7a5000; color: #f5d080; }
body.theme-sunset .text-muted             { color: #c09060 !important; }
body.theme-sunset .text-dark              { color: #ffe0b2 !important; }
body.theme-sunset a                       { color: #f0a050; }
body.theme-sunset a:hover                 { color: #f8c080; }
body.theme-sunset .modal-content         { background-color: #3a2200; border-color: #5a3500; color: #ffe0b2; }
body.theme-sunset .footer                { background-color: #1e1200; border-color: #5a3500 !important; }
body.theme-sunset .bg-light              { background-color: #442800 !important; color: #ffe0b2; }
body.theme-sunset .bg-white              { background-color: #3a2200 !important; }
body.theme-sunset .border-bottom,
body.theme-sunset .border-top            { border-color: #5a3500 !important; }
body.theme-sunset .achievement-badge.locked .achievement-badge-icon { background: #5a3500; color: #9a6030; }
body.theme-sunset #howToStartFab         { background-color: #e07030; color: #fff; }
body.theme-sunset #howToStartFab:hover   { background-color: #f09050; color: #fff; }

/* --- Rosé ----------------------------------------------------------- */
body.theme-rose {
    background-color: #fff0f5;
    color: #5c2d3f;
}
body.theme-rose .card                      { background-color: #fff; border-color: #f8d0de; color: #5c2d3f; }
body.theme-rose .card-header               { background-color: #fde8ef; border-color: #f8d0de; color: #5c2d3f; }
body.theme-rose .card-footer               { background-color: #fde8ef; border-color: #f8d0de; color: #5c2d3f; }
body.theme-rose .table                     { color: #5c2d3f; --bs-table-bg: #fff; --bs-table-striped-bg: #fff5f8; --bs-table-hover-bg: #fde8ef; border-color: #f8d0de; }
body.theme-rose .table th,
body.theme-rose .table td                 { border-color: #f8d0de; }
body.theme-rose .form-control,
body.theme-rose .form-select              { background-color: #fff5f8; border-color: #f8d0de; color: #5c2d3f; }
body.theme-rose .form-control:focus,
body.theme-rose .form-select:focus        { background-color: #fff; border-color: #c06080; color: #5c2d3f; }
body.theme-rose .text-muted               { color: #a06878 !important; }
body.theme-rose a                         { color: #c0507a; }
body.theme-rose a:hover                   { color: #9a3060; }
body.theme-rose .modal-content           { background-color: #fff; border-color: #f8d0de; color: #5c2d3f; }
body.theme-rose .footer                  { background-color: #fde8ef; border-color: #f8d0de !important; }
body.theme-rose .achievement-badge.locked .achievement-badge-icon { background: #fde8ef; color: #c0a0a8; }
body.theme-rose #howToStartFab           { background-color: #d06080; color: #fff; }
body.theme-rose #howToStartFab:hover     { background-color: #e080a0; color: #fff; }

/* --- Lavender ------------------------------------------------------- */
body.theme-lavender {
    background-color: #f0e6ff;
    color: #4a3560;
}
body.theme-lavender .card                  { background-color: #fff; border-color: #d8c8f0; color: #4a3560; }
body.theme-lavender .card-header           { background-color: #ede0ff; border-color: #d8c8f0; color: #4a3560; }
body.theme-lavender .card-footer           { background-color: #ede0ff; border-color: #d8c8f0; color: #4a3560; }
body.theme-lavender .table                 { color: #4a3560; --bs-table-bg: #fff; --bs-table-striped-bg: #f5f0ff; --bs-table-hover-bg: #ede0ff; border-color: #d8c8f0; }
body.theme-lavender .table th,
body.theme-lavender .table td             { border-color: #d8c8f0; }
body.theme-lavender .form-control,
body.theme-lavender .form-select          { background-color: #f5f0ff; border-color: #d8c8f0; color: #4a3560; }
body.theme-lavender .form-control:focus,
body.theme-lavender .form-select:focus    { background-color: #fff; border-color: #9060c0; color: #4a3560; }
body.theme-lavender .text-muted           { color: #8070a0 !important; }
body.theme-lavender a                     { color: #8050c0; }
body.theme-lavender a:hover               { color: #6030a0; }
body.theme-lavender .modal-content       { background-color: #fff; border-color: #d8c8f0; color: #4a3560; }
body.theme-lavender .footer              { background-color: #ede0ff; border-color: #d8c8f0 !important; }
body.theme-lavender .achievement-badge.locked .achievement-badge-icon { background: #ede0ff; color: #b0a0c8; }
body.theme-lavender #howToStartFab       { background-color: #9060d0; color: #fff; }
body.theme-lavender #howToStartFab:hover { background-color: #a880e0; color: #fff; }

/* --- Slate ---------------------------------------------------------- */
body.theme-slate {
    background-color: #f5f5f5;
    color: #37474f;
}
body.theme-slate .card                    { background-color: #fff; border-color: #cfd8dc; color: #37474f; }
body.theme-slate .card-header             { background-color: #eceff1; border-color: #cfd8dc; color: #37474f; }
body.theme-slate .card-footer             { background-color: #eceff1; border-color: #cfd8dc; }
body.theme-slate .table                   { color: #37474f; --bs-table-bg: #fff; --bs-table-striped-bg: #f8f9fa; --bs-table-hover-bg: #eceff1; border-color: #cfd8dc; }
body.theme-slate .table th,
body.theme-slate .table td               { border-color: #cfd8dc; }
body.theme-slate .form-control,
body.theme-slate .form-select            { background-color: #f8f9fa; border-color: #cfd8dc; color: #37474f; }
body.theme-slate .form-control:focus,
body.theme-slate .form-select:focus      { background-color: #fff; border-color: #607d8b; color: #37474f; }
body.theme-slate .text-muted             { color: #78909c !important; }
body.theme-slate a                       { color: #546e7a; }
body.theme-slate a:hover                 { color: #37474f; }
body.theme-slate .modal-content         { background-color: #fff; border-color: #cfd8dc; color: #37474f; }
body.theme-slate .footer                { background-color: #eceff1; border-color: #cfd8dc !important; }
body.theme-slate .achievement-badge.locked .achievement-badge-icon { background: #eceff1; color: #90a4ae; }
body.theme-slate #howToStartFab         { background-color: #607d8b; color: #fff; }
body.theme-slate #howToStartFab:hover   { background-color: #78909c; color: #fff; }

/* =====================================================================
   "How to Get Started" floating action button (anonymous users only)
   ===================================================================== */
#howToStartFab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1030;  /* below Bootstrap popovers (1060) and tooltips (1080) */
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background-color: #ffc107;
    color: #212529;
    border-radius: 50px;
    padding: 0.55rem 1rem 0.55rem 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: background-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    animation: fab-pulse 2.6s ease-in-out infinite;
}

#howToStartFab:hover,
#howToStartFab:focus {
    box-shadow: 0 6px 20px rgba(0,0,0,0.32);
    text-decoration: none;
    animation: none;
}

#howToStartFab .bi {
    font-size: 1.15rem;
    line-height: 1;
}

/* Collapse to icon-only on very small screens */
@media (max-width: 479px) {
    #howToStartFab .fab-label {
        display: none;
    }
    #howToStartFab {
        padding: 0.65rem 0.75rem;
        border-radius: 50%;
    }
}

@keyframes fab-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
    50%       { box-shadow: 0 4px 22px rgba(255,193,7,0.7); }
}

/* Highlight animation for item returned-to from details page */
@keyframes browse-highlight {
    0%   { box-shadow: 0 0 0 4px rgba(220,53,69,0.7); }
    50%  { box-shadow: 0 0 12px 6px rgba(220,53,69,0.35); }
    100% { box-shadow: none; }
}

.browse-highlight {
    animation: browse-highlight 7s ease-out;
    border-radius: 0.375rem;
}