.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.text-muted{
  color: rgba(4, 69, 122, 0.82) !important;
}

.profile-stats .stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  text-align: center;
  padding: .75rem;
}
.profile-stats .stat .val { font-weight: 700; }
.profile-stats .stat .lbl { font-size: .8rem; color: rgba(229,231,235,.75); }
/*
 |--------------------------------------------------------------
 | Project custom styles
 |--------------------------------------------------------------
 */

:root {
  --app-primary: #202A47;
  --app-bg: #f8f9fa;
  --sidebar-link: #495057;
  --glass-bg: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(0, 0, 0, 0.125);
  --glass-text: #212529;
  --glass-shadow: 0 6px 16px rgba(0,0,0,0.06);
  --glass-radius: 14px;
  --topbar-height: 56px;
  --bottombar-height: 62px;
}

html, body {
  scroll-behavior: smooth;
  overflow-x: hidden; /* prevent unexpected horizontal scroll */
}

body {
  font-family: iransans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--app-bg);
  background-attachment: fixed;
  color: var(--glass-text);
}

/* -------------------------------------------------------------
   Admin light theme (now default for all pages)
   Apply via body.admin-light in admin layout
-------------------------------------------------------------- */
body.admin-light {
  --app-bg: #f8f9fa;
  --glass-bg: #ffffff;
  --glass-text: #212529;
  --glass-border: rgba(0,0,0,0.075);
  color: #212529;
  background: #f8f9fa;
}

body.admin-light .glass-nav,
body.admin-light .glass-bottom-nav,
body.admin-light .glass-sidebar,
body.admin-light .glass-card,
body.admin-light .card.glass,
body.admin-light .modal-content.glass,
body.admin-light .offcanvas.glass {
  background: #ffffff !important;
  color: #212529 !important;
  border-color: rgba(0,0,0,0.075) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
}

body.admin-light .sidebar .nav-link { color: #495057; }
body.admin-light .sidebar .nav-link:hover,
body.admin-light #adminSidebar .nav-link:hover { color: #0d6efd; background: rgba(13,110,253,.06); }
body.admin-light .sidebar .nav-link.active,
body.admin-light #adminSidebar .nav-link.active {
  background: rgba(13,110,253,.12);
  color: #0d6efd;
}

body.admin-light .navbar.navbar-light .nav-link { color: #495057; }
body.admin-light .navbar.navbar-light .nav-link:hover { color: #0d6efd; }

.app-main {
  padding-top: calc(var(--topbar-height) + 8px) !important;
  padding-bottom: calc(var(--bottombar-height) + 18px + env(safe-area-inset-bottom)) !important;
  min-height: calc(100vh - (var(--topbar-height) + var(--bottombar-height) + 2rem));
}

/* Ensure form controls inherit font */
button, input, optgroup, select, textarea {
  font-family: inherit;
}

/* Font Awesome v4/v5-style compatibility
   Allows using icons as: <i class="fa fa-xxx"></i>
   Prefer FA5 Free; fall back to FA6 Free if present locally */

 

/* Layout helpers */
.min-h-main {
  min-height: calc(100vh - 6rem);
}

/* Cards (auth and common) */
.auth-card {
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.brand-avatar {
  width: 56px;
  height: 56px;
  object-fit: cover;
}

/* Consistent tiny avatar size for tables/lists */
.avatar-34 {
  width: 34px;
  height: 34px;
  object-fit: cover;
}

/* Admin shell & sidebar */
.admin-shell {
  min-height: 100vh;
}

.sidebar {
  width: 260px;
  flex: 0 0 260px; /* prevent collapsing in flex container on desktop */
}

.sidebar .nav-link {
  color: rgba(229,231,235,0.85);
  transition: padding .12s ease, background-color .12s ease, color .12s ease;
}

.sidebar .nav-link.active {
  background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(37,99,235,0.25));
  color: #fff;
  border-radius: 10px;
}

/* Increase padding for active sidebar items (blue background area) */
#adminSidebar .nav-link.active {
  padding-right: .75rem !important;
  padding-left: .75rem !important;
}
#adminSidebar .nav-link.active:hover,
#adminSidebar .nav-link.active:focus {
  padding-right: .75rem !important;
  padding-left: .75rem !important;
}

/* Hover padding for sidebar links (keep base px-0 in markup; add slight space on hover) */
#adminSidebar .nav-link:hover,
#adminSidebar .nav-link:focus {
  padding-right: .5rem !important;
  padding-left: .5rem !important;
}

/* Only force white text on hover/focus in dark admin theme */
body:not(.admin-light) #adminSidebar .nav-link:hover,
body:not(.admin-light) #adminSidebar .nav-link:focus {
  color: #fff;
}

@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    top: 56px; /* navbar height */
    bottom: 0;
    z-index: 1030;
    transform: translateX(100%);
    transition: transform .2s ease-in-out;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-left: 1px solid var(--glass-border);
  }
  .sidebar.show {
    transform: translateX(0);
  }
}

/* Example utility overrides */
.text-primary {
  color: var(--app-primary) !important;
}

/* Action buttons: unified styling */
.action-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.action-buttons form {
  margin: 0;
}
.action-btn {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.65rem;
  --bs-btn-font-size: 0.85rem;
  line-height: 1.2;
  border-radius: 0.375rem;
  color: #212529 !important; /* black text by default */
}
.action-btn:hover,
.action-btn:focus {
  color: #fff !important; /* force white text on hover/focus */
}

/* Ensure white text for chat header action buttons on dark glass */
.chat-header .action-btn {
  color: #ffffff !important;
}


/* -------------------------------------------------------------
   Liquid Glass UI (iOS-style) theme
   Apply via: .glass-page on body and components below
------------------------------------------------------------- */

.glass-page {
  --bs-body-bg: transparent;
}

.glass-nav {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  min-height: var(--topbar-height);
}

.navbar .nav-link.text-primary i { color: #93c5fd !important; }

.glass-bottom-nav {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -8px 20px rgba(0,0,0,0.25);
  min-height: var(--bottombar-height);
  padding-bottom: env(safe-area-inset-bottom);
}

.glass-bottom-nav .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap !important;
  gap: clamp(0.25rem, 2.5vw, 1rem) !important;
  overflow-x: hidden; /* avoid accidental horizontal scroll */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.glass-bottom-nav .container::-webkit-scrollbar { display: none; }

.glass-bottom-nav .nav-link {
  flex: 1 1 0; /* allow equal width */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: .25rem .3rem;
  white-space: nowrap;
  min-width: 0; /* allow shrinking on very small screens */
}
.glass-bottom-nav .nav-link i { font-size: 1rem; }
.glass-bottom-nav .nav-link .small { font-size: .66rem; line-height:1; }

/* Active bottom nav: apply gradient to icon and label (no box) */
.cart-count {
  z-index: 999;
  font-size: 11px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #000 !important;
  background-color: #ffc107 !important;
}
.glass-bottom-nav .nav-link.text-primary i,
.glass-bottom-nav .nav-link.text-primary .small {
  color: #1b41aa; /* fallback for non-supporting browsers */
}

@supports (-webkit-background-clip: text) {
  .glass-bottom-nav .nav-link.text-primary i,
  .glass-bottom-nav .nav-link.text-primary i::before,
  .glass-bottom-nav .nav-link.text-primary .small {
    background: linear-gradient(90deg, #1b41aa 0%, #1b41aa 50%, #1b41aa 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: nav-gradient-move 12s ease-in-out infinite;
  }
}

@supports (background-clip: text) {
  .glass-bottom-nav .nav-link.text-primary i,
  .glass-bottom-nav .nav-link.text-primary i::before,
  .glass-bottom-nav .nav-link.text-primary .small {
    background: linear-gradient(90deg, #1b41aa 0%, #1b41aa 50%, #1b41aa 100%);
    background-size: 200% 100%;
    background-clip: text;
    color: transparent !important;
    display: inline-block;
    animation: nav-gradient-move 12s ease-in-out infinite;
  }
}

@keyframes nav-gradient-move {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .glass-bottom-nav .nav-link.text-primary i,
  .glass-bottom-nav .nav-link.text-primary i::before,
  .glass-bottom-nav .nav-link.text-primary .small {
    animation: none;
  }
}

@media (max-width: 380px) {
  .glass-bottom-nav .container { gap: 0.75rem !important; }
  .glass-bottom-nav .nav-link { padding: .25rem .5rem; }
}

@media (max-width: 360px) {
  .glass-bottom-nav .nav-link i { font-size: 1rem; }
  .glass-bottom-nav .nav-link .small { font-size: .66rem; }
}

.glass-card,
.card.glass,
.modal-content.glass,
.offcanvas.glass {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  color: var(--glass-text);
}

/* Slightly different glass for modal only */
.modal-content.glass {
  background: rgba(255, 255, 255, 0.98);
}

/* Darker modal backdrop (Bootstrap 5) for dark theme only */
body:not(.admin-light) .modal-backdrop {
  --bs-backdrop-opacity: 0.6;
}

/* Custom black close button class - highest specificity */
.btn-close-black {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
  opacity: .9 !important;
}

.btn-close-black:hover {
  opacity: 1 !important;
}

/* Override Bootstrap's btn-close-white to force black in light theme */
.btn-close-white {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
}

/* Custom modal close button with FontAwesome icon */
.modal-close-btn {
  background: none !important;
  border: none !important;
  padding: 0.5rem !important;
  cursor: pointer !important;
  color: #000 !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
  transition: opacity 0.15s ease !important;
}

.modal-close-btn:hover {
  opacity: 1 !important;
}

.modal-close-btn i {
  font-size: inherit !important;
}

/* Force black close buttons in all modals and offcanvas */
.modal .btn-close,
.offcanvas .btn-close,
.alert .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
  opacity: .9;
}

.modal .btn-close:hover,
.offcanvas .btn-close:hover,
.alert .btn-close:hover {
  opacity: 1;
}

/* In dark theme, make close buttons white */
body:not(.admin-light) .modal .btn-close,
body:not(.admin-light) .offcanvas .btn-close,
body:not(.admin-light) .alert .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
}

.glass-sidebar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-input,
.form-control.glass,
.form-select.glass {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--glass-border);
  color: var(--glass-text);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);
}
.glass-input::placeholder,
.form-control.glass::placeholder {
  color: rgba(33,37,41,0.6);
}

/* Ensure proper caret color on all selects inside user (glass) layout */
.glass-page select.form-select {
  color-scheme: light; /* enables proper caret on light backgrounds */
}

.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(34, 45, 75, 0.25) !important;
}

.form-control.glass:focus,
.form-select.glass:focus {
  border-color: rgba(147,197,253,0.8);
  box-shadow: 0 0 0 0.2rem rgba(34, 45, 75, 0.25);
}

/* Force readable text inside the closed select on bright bg */
.form-select.glass {
  color: var(--glass-text); /* Use glass text variable for consistency */
}
@media (prefers-color-scheme: light) {
  .form-select.glass {
    color: #0b1220;
  }
}

.glass-page .form-select,
.glass-page .form-select.glass {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.input-group .input-group-text {
  background: rgba(248,249,250,0.8);
  border: 1px solid var(--glass-border);
  color: var(--glass-text);
}

/* Hide default number input spinners (arrows) */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-primary {
  background: linear-gradient(135deg, #222D4B 0%, #1a2339 100%);
  border: 0;
  box-shadow: 0 6px 20px rgba(34, 45, 75, 0.35);
}
.btn-primary:hover {
  filter: brightness(1.05);
}
.btn-outline-primary {
  color: #222D4B;
  border-color: rgba(34, 45, 75, 0.6);
}

/* Primary badge styles */
.badge.bg-primary {
  background: linear-gradient(135deg, #222D4B 0%, #1a2339 100%) !important;
  color: #ffffff !important;
}

/* Soft primary badge styles */
.badge-soft.primary {
  background: rgba(34, 45, 75, 0.1) !important;
  color: #222D4B !important;
  border-color: rgba(34, 45, 75, 0.3) !important;
}

/* Primary alert styles */
.alert-primary {
  color: #1a2339 !important;
  background-color: rgba(34, 45, 75, 0.1) !important;
  border-color: rgba(34, 45, 75, 0.3) !important;
}

.alert-primary .alert-link {
  color: #222D4B !important;
}

/* Primary border styles */
.border-primary {
  border-color: #222D4B !important;
}

.list-group.glass .list-group-item {
  background: rgba(255,255,255,0.95);
  border-color: var(--glass-border);
  color: var(--glass-text);
}

/* Notification card specific adjustments */
.notification-card {
  border: 1px solid rgba(0,0,0,0.125);
  padding: 0; /* card-body handles padding */
}
.notification-card .card-body { padding: .85rem 1rem; }
.notification-card.bg-glass { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.125); }
.notification-card .fw-semibold { font-size: 1rem; }
.notification-card .text-glass-muted { color: rgba(33,37,41,0.7) !important; }

.table.glass {
  --bs-table-bg: rgba(255,255,255,0.95);
  color: var(--glass-text);
}

/* Compact, elegant light table for requests */
.table-compact.table.glass {
  --row-bg: rgba(255,255,255,0.95);
  --row-hover: rgba(13,110,253,0.08);
  --row-border: rgba(0,0,0,0.125);
}
.table-compact.table.glass thead th {
  background: linear-gradient(180deg, rgba(248,249,250,0.95), rgba(255,255,255,0.95));
  color: #212529;
  border-bottom: 1px solid var(--row-border);
  font-weight: 700;
}
.table-compact.table.glass tbody tr {
  background: var(--row-bg);
}
.table-compact.table.glass tbody tr + tr td {
  border-top: 1px dashed var(--row-border);
}
.table-compact.table.glass tbody td,
.table-compact.table.glass tbody th {
  border-bottom: 0 !important; /* remove default bottom border to avoid white line at table bottom */
}
.table-compact.table.glass tbody tr:hover {
  background: var(--row-hover);
}
.table-compact.table.glass td, .table-compact.table.glass th {
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.table-compact.table.glass th,
.table-compact.table.glass td,
.table-compact.table.glass .small,
.table-compact.table.glass .pill,
.table-compact.table.glass .pill i,
.table-compact.table.glass .badge,
.table-compact.table.glass .badge-soft,
.table-compact.table.glass .text-glass-muted {
  color: #212529 !important;
}
.cell-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on, "lnum" on;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .825rem;
  border: 1px solid rgba(0,0,0,0.125);
  background: rgba(248,249,250,0.8);
}
.pill i { opacity: .9; }
.pill-blue { color: #0d6efd; border-color: rgba(13,110,253,0.3); background: rgba(13,110,253,0.1); }
.pill-amber { color: #fd7e14; border-color: rgba(253,126,20,0.3); background: rgba(253,126,20,0.1); }
.badge-soft {
  background: rgba(13,110,253,0.1);
  color: #0d6efd;
  border: 1px solid rgba(13,110,253,0.3);
}
.badge-soft.success { background: rgba(25,135,84,0.1); color: #198754; border-color: rgba(25,135,84,0.3); }
.badge-soft.warning { background: rgba(255,193,7,0.1); color: #ffc107; border-color: rgba(255,193,7,0.3); }
.badge-soft.muted { background: rgba(108,117,125,0.1); color: #6c757d; border-color: rgba(108,117,125,0.3); }

.toast.glass,
.dropdown-menu.glass,
.offcanvas-body.glass {
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  color: var(--glass-text);
}

/* Pagination light theme: appropriate colors for light mode */
.pagination.pagination-light .page-link {
  color: #212529 !important;
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.125) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
.pagination.pagination-light .page-item.active .page-link {
  color: #ffffff !important;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  box-shadow: 0 2px 4px rgba(13,110,253,0.3) !important;
}
.pagination.pagination-light .page-item.disabled .page-link {
  color: rgba(33,37,41,0.4) !important;
  background-color: rgba(248,249,250,0.8) !important;
  border-color: rgba(0,0,0,0.1) !important;
}
.pagination.pagination-light .page-link:hover,
.pagination.pagination-light .page-link:focus {
  color: #212529 !important;
  background-color: rgba(248,249,250,1) !important;
  border-color: rgba(0,0,0,0.175) !important;
  box-shadow: 0 0 0 0.1rem rgba(13,110,253,0.25) !important;
}

.text-glass-muted { color: rgba(33,37,41,0.7) !important; }
.border-glass { border-color: var(--glass-border) !important; }
.bg-glass { background: var(--glass-bg) !important; backdrop-filter: blur(6px); }

/* Accordion glass variant */
.accordion.glass .accordion-item {
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--glass-border);
  color: var(--glass-text);
  border-radius: 12px;
}
.accordion.glass .accordion-item + .accordion-item {
  margin-top: 0.5rem;
}
.accordion.glass .accordion-button {
  background: rgba(255,255,255,0.95);
  color: var(--glass-text);
  border-bottom: 1px solid var(--glass-border);
}
.accordion.glass .accordion-button:not(.collapsed) {
  background: rgba(255,255,255,0.98);
  color: var(--glass-text);
  box-shadow: none;
}
.accordion.glass .accordion-body {
  background: rgba(255,255,255,0.9);
  color: var(--glass-text);
}

/* Home FAQ: match feature-card background/look */
#homeFaq.accordion.glass .accordion-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
}
#homeFaq .accordion-button {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
  color: var(--glass-text);
}
#homeFaq .accordion-button:not(.collapsed) {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
  color: var(--glass-text);
}
#homeFaq .accordion-body {
  background: rgba(255,255,255,0.9);
}

/* Custom accordion button arrow (black) */
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Remove blue border on accordion button hover and focus */
.accordion-button:hover,
.accordion-button:focus,
.accordion-button.bg-transparent:hover,
.accordion-button.bg-transparent:focus {
  box-shadow: none !important;
  border-color: transparent !important;
  outline: none !important;
}


/* -------------------------------------------------------------
   Native select dropdown readability
   Ensure options render dark text on white background when opened
-------------------------------------------------------------- */
.form-select option,
.form-select optgroup {
  color: #0b1220;
  background-color: #ffffff;
}
.form-select option:checked {
  background-color: #e6f0ff;
  color: #0b1220;
}
.form-select[multiple] option:checked {
  background-color: #dbeafe;
}

/* Map custom styles removed by request */

/* -------------------------------------------------------------
   Ticketing/Chat minimal light UI
-------------------------------------------------------------- */
.ticketing .chat-sidebar .chat-item {
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--glass-border);
  color: var(--glass-text);
  margin-bottom: .35rem;
  border-radius: 12px;
}
.ticketing .chat-sidebar .chat-item:hover {
  background: rgba(248,249,250,0.95);
}
.ticketing .chat-sidebar .chat-active {
  background: rgba(13,110,253,0.15) !important;
  border-color: rgba(13,110,253,0.3) !important;
}
.ticketing .chat-badge { box-shadow: 0 0 0 2px rgba(0,0,0,0.1); }

.ticketing .chat-header { border-bottom: 1px solid var(--glass-border); padding-bottom: .25rem; }

.chat-bubble {
  max-width: 78%;
  border-radius: 14px;
  padding: .5rem .75rem;
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: anywhere; /* break very long words/URLs */
  overflow-x: hidden; /* avoid horizontal overflow inside bubbles */
}
.chat-bubble-in {
  background: linear-gradient(135deg, rgba(16,185,129,0.25) 0%, rgba(5,150,105,0.25) 100%);
  border: 1px solid rgba(16,185,129,0.45);
  color: #000000;
}
.chat-bubble-out {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
}

/* -------------------------------------------------------------
   Features (home): animated icons and special cards
-------------------------------------------------------------- */
.feature-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(13,110,253,0.4);
}

.feature-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(closest-side, rgba(13,110,253,0.15), rgba(13,110,253,0.08));
  box-shadow: 0 8px 20px rgba(13,110,253,0.2), inset 0 0 12px rgba(13,110,253,0.15);
}

.feature-icon {
  font-size: 1.5rem;
  color: #1b41aa;
  animation: feature-float 3.6s ease-in-out infinite;
  will-change: transform, filter;
}

.feature-card:hover .feature-icon {
  animation-duration: 2.2s;
  filter: brightness(1.1);
}

@keyframes feature-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .feature-icon { animation: none !important; }
  .feature-card { transition: none; }
}

/* Messages tabs on light glass cards */
.card.glass .nav-tabs {
  border-color: var(--glass-border);
}
.card.glass .nav-tabs .nav-link {
  color: #212529;
  border: 1px solid transparent;
}
.card.glass .nav-tabs .nav-link:hover,
.card.glass .nav-tabs .nav-link:focus {
  color: #212529;
  border-color: transparent;
}
.card.glass .nav-tabs .nav-link.active,
.card.glass .nav-tabs .nav-item.show .nav-link {
  color: #212529;
  background: rgba(255,255,255,0.95);
  border-color: var(--glass-border) var(--glass-border) transparent;
}

/* -------------------------------------------------------------
   Light-mode overrides for admin chat (chat-light)
   Ensure text/bubble backgrounds are light so content is readable
-------------------------------------------------------------- */
.chat-light {
  background: #fff !important;
  color: #0b1220 !important;
}
.chat-light .bg-glass { background: #f8fafc !important; backdrop-filter: none; }
.chat-light .border-glass { border-color: rgba(11,18,32,0.06) !important; }
.chat-light .text-glass-muted { color: rgba(11,18,32,0.75) !important; }
.chat-light .chat-bubble-in {
  background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(5,150,105,0.12) 100%);
  border: 1px solid rgba(16,185,129,0.12);
  color: #06321a;
}
.chat-light .chat-bubble-out {
  background: linear-gradient(135deg, #e6f0ff 0%, #dbeafe 100%);
  border: 1px solid rgba(59,130,246,0.12);
  color: #0b1220;
}
.chat-light .btn-outline-light { color: #0b1220; border-color: rgba(11,18,32,0.08); }
.chat-light .btn.text-light { color: #0b1220 !important; }

/* Ensure Bootstrap tooltips use white text in dark/glass themes */
.tooltip-inner,
.bs-tooltip-top .tooltip-inner,
.bs-tooltip-bottom .tooltip-inner,
.bs-tooltip-start .tooltip-inner,
.bs-tooltip-end .tooltip-inner {
  color: #ffffff !important;
  background-color: rgba(0,0,0,0.95) !important; /* keep good contrast */
  border-radius: .35rem;
}

/* Make tooltip arrow match dark background */
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-end .tooltip-arrow::before {
  color: rgba(0,0,0,0.95) !important;
}

/* -------------------------------------------------------------
   Enhanced Product Cards - Dark Blue Theme with White Text
   Beautiful product cards with rich visual effects
-------------------------------------------------------------- */

.product-card-enhanced {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 8px 25px rgba(26, 34, 56, 0.15) !important;
  overflow: hidden !important;
}

.product-card-enhanced:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(26, 34, 56, 0.25), 
              0 0 0 1px rgba(74, 222, 128, 0.3) !important;
  z-index: 10 !important;
}

/* Image container effects */
.product-card-enhanced .position-relative:hover img {
  transform: scale(1.05) !important;
}

.product-card-enhanced:hover .product-overlay {
  opacity: 1 !important;
}

.product-card-enhanced:hover .product-glow {
  opacity: 1 !important;
}

/* Card body enhancements */
.product-card-enhanced .card-body {
  background: linear-gradient(180deg, transparent 0%, rgba(26, 34, 56, 0.9) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Title link effects */
.product-card-enhanced .card-body h3 a {
  transition: color 0.2s ease !important;
}

.product-card-enhanced .card-body h3 a:hover {
  color: #ffd700 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
}

/* Price styling */
.product-card-enhanced .fw-bold {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease !important;
}

.product-card-enhanced:hover .fw-bold {
  transform: scale(1.05) !important;
  color: #ffffff !important;
}

/* Action button effects */
.product-card-enhanced .btn-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transition: all 0.2s ease !important;
  backdrop-filter: blur(10px) !important;
}

.product-card-enhanced .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
}

/* Badge enhancements */
.product-card-enhanced .badge {
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
}

.product-card-enhanced:hover .badge {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .product-card-enhanced {
    border-radius: 12px !important;
  }

  .product-card-enhanced:hover {
    transform: translateY(-4px) scale(1.01) !important;
  }

  .product-card-enhanced .position-relative {
    height: 90px !important;
  }

  .product-card-enhanced .card-body {
    padding: 0.75rem !important;
  }

  .product-card-enhanced .fw-bold {
    font-size: 0.56rem !important;
  }

  /* Reduce text size by 30% for mobile (0.8rem * 0.7 = 0.56rem) */
  .product-card-enhanced .card-body h3 {
    font-size: 0.56rem !important;
  }

  /* Reduce badge text size by 30% for mobile (0.7rem * 0.7 = 0.49rem) */
  .product-card-enhanced .badge {
    font-size: 0.49rem !important;
  }

  /* Reduce text size for search product cards by 30% (0.75rem * 0.7 = 0.525rem) */
  .product-card-enhanced small.card-title {
    font-size: 0.525rem !important;
  }

  /* Reduce main product card price text by 30% (0.8rem * 0.7 = 0.56rem) */
  .product-price-text {
    font-size: 0.56rem !important;
  }

  /* Reduce main product card title text by 30% (0.8rem * 0.7 = 0.56rem) */
  .card-body h3 {
    font-size: 0.56rem !important;
  }

  /* Reduce main product card image container height for mobile */
  .p-1 .position-relative[style*="height:130px"] {
    height: 90px !important;
  }
}

/* Cart page light mode text overrides */
.glass-page .cart-item .text-light {
  color: #212529 !important;
}

/* Checkout page light mode text overrides */
.glass-page .checkout .text-light {
  color: #212529 !important;
}
.glass-page .cart-item .btn-outline-secondary.text-light {
  color: #212529 !important;
  border-color: rgba(0,0,0,0.125) !important;
}
.glass-page .cart-item .btn-outline-secondary.text-light:hover,
.glass-page .cart-item .btn-outline-secondary.text-light:focus {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}
.glass-page .cart-item .form-control.text-light {
  color: #212529 !important;
  background-color: rgba(255,255,255,0.9) !important;
  border-color: rgba(0,0,0,0.125) !important;
}
.glass-page .cart-item .form-control.text-light:focus {
  color: #212529 !important;
  background-color: #fff !important;
  border-color: rgba(147,197,253,0.8) !important;
  box-shadow: 0 0 0 0.2rem rgba(34, 45, 75, 0.25) !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .product-card-enhanced,
  .product-card-enhanced:hover,
  .product-card-enhanced .position-relative:hover img,
  .product-card-enhanced .btn-outline-light,
  .product-card-enhanced .badge {
    transition: none !important;
    transform: none !important;
  }

  .product-card-enhanced:hover {
    transform: translateY(-2px) !important;
  }
}