/* ======================================================================
   LAGOM DARK BLUE — Ultimate CSS (same visual, cleaner + safer)
   ====================================================================== */


/* =========================
   Variables
   ========================= */
:root {
  /* Brand */
  --primary-blue: #0195f4;
  --primary-blue-dark: #0076c4;
  --primary-blue-darker: #005a9e;

  /* Surfaces */
  --bg-dark-primary: #1a1f2e;
  --bg-dark-secondary: #151a26;
  --bg-dark-card: rgba(30, 36, 51, 0.8);
  --bg-glass: rgba(30, 36, 51, 0.8);

  /* Borders */
  --border-dark: rgba(255, 255, 255, 0.08);
  --border-dark-hover: rgba(255, 255, 255, 0.15);

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  /* Shadows */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
  --shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(1, 149, 244, 0.2);

  /* Motion */
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* =========================
   Panels & Cards (generic)
   ========================= */
.panel,
.card,
.panel-default {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border-dark) !important;
  background: var(--bg-dark-card) !important;
  backdrop-filter: blur(10px) !important;
  transition: transform .3s var(--transition-smooth), border-color .3s var(--transition-smooth), box-shadow .3s var(--transition-smooth) !important;
}

/* Hover générique (exclusions pricing/product pour éviter double effet) */
.panel:not(.panel-sidebar):not(.vf-os-template-card):not(.panel-product):not(.pricing-card):not(.price-table):not(.pricing-table):hover,
.card:not(.vf-os-template-card):not(.product-card):not(.pricing-card):hover {
  transform: translateY(-3px) !important;
  border-color: rgba(1, 149, 244, 0.3) !important;
  box-shadow: var(--shadow-hover) !important;
}

.panel-heading,
.card-header {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  background: rgba(30, 36, 51, 0.4) !important;
  border-bottom: 1px solid var(--border-dark) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  padding: 16px 20px !important;
}

.panel-body,
.card-body {
  padding: 20px !important;
}

/* =========================================
   PRICING — garder le hover de la CARTE,
   supprimer tous traits internes (fond intact)
   ========================================= */

/* 0) Réactive la transition de la CARTE même si prefers-reduced-motion est actif */
@media (prefers-reduced-motion: reduce) {
  .pricing-table,
  .price-table,
  .panel-product,
  .product-card,
  .pricing-card,
  [class*="package"],
  [class*="pricing"] {
    transition:
      transform .3s var(--transition-smooth),
      border-color .3s var(--transition-smooth),
      box-shadow .3s var(--transition-smooth) !important;
  }
}

/* 1) Conserver le hover fluide sur la CARTE uniquement */
.pricing-table,
.price-table,
.panel-product,
.product-card,
.pricing-card,
[class*="package"],
[class*="pricing"] {
  will-change: transform;
  transition:
    transform .3s var(--transition-smooth),
    border-color .3s var(--transition-smooth),
    box-shadow .3s var(--transition-smooth) !important;
}
.pricing-table:hover,
.price-table:hover,
.panel-product:hover,
.product-card:hover,
.pricing-card:hover,
[class*="package"]:hover,
[class*="pricing"]:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(1,149,244,.35) !important;
  box-shadow: var(--shadow-hover) !important; /* pas d'inset */
}

/* 2) Supprimer les lignes internes (headers + features) sans toucher au fond */
.pricing-card .package-header,
.product-card .package-header,
.panel-product .package-header,
.pricing-card .package-features li,
.product-card .package-features li,
.panel-product .package-features li,
.row-pricing-table .package-header,
.row-pricing-table .package-features li,
.pricing-card .panel-body ul li,
.product-card .panel-body ul li,
.panel-product .panel-body ul li {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* 3) Éteindre les cadres des wrappers internes SANS changer le background */
.pricing-card .panel,
.pricing-card .panel-body,
.pricing-card .card,
.pricing-card .card-body,
.pricing-card .package,
.pricing-card .package-inner,
.pricing-card .package-content,
.pricing-card .package-price,
.product-card .panel,
.product-card .panel-body,
.product-card .card,
.product-card .card-body,
.product-card .package,
.product-card .package-inner,
.product-card .package-content,
.product-card .package-price,
.panel-product .panel,
.panel-product .panel-body,
.panel-product .card,
.panel-product .card-body,
.panel-product .package,
.panel-product .package-inner,
.panel-product .package-content,
.panel-product .package-price {
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* 4) Pas de réapparition via pseudo-éléments (on ne touche pas aux icônes) */
.pricing-card .panel::before, .pricing-card .panel::after,
.pricing-card .panel-body::before, .pricing-card .panel-body::after,
.pricing-card .card::before, .pricing-card .card::after,
.pricing-card .card-body::before, .pricing-card .card-body::after,
.product-card .panel::before, .product-card .panel::after,
.product-card .panel-body::before, .product-card .panel-body::after,
.panel-product .panel::before, .panel-product .panel::after,
.panel-product .panel-body::before, .panel-product .panel-body::after {
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
  background-image: none !important;
}

/* 5) Les ENFANTS ne doivent pas animer au survol (boutons/icônes OK) */
.pricing-card *:hover,
.product-card *:hover,
.panel-product *:hover,
[class*="package"] *:hover,
[class*="pricing"] *:hover {
  transform: none !important;
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}


/* =========================
   Buttons
   ========================= */
.btn,
button:not(.navbar-toggle) {
  transition: transform .25s var(--transition-smooth), box-shadow .25s var(--transition-smooth), background .25s var(--transition-smooth), border-color .25s var(--transition-smooth) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border: none !important;
}

.btn:hover { transform: translateY(-2px) !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%) !important;
  box-shadow: 0 4px 15px rgba(1, 149, 244, 0.3) !important;
  color: #ffffff !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue-darker) 100%) !important;
  box-shadow: 0 6px 20px rgba(1, 149, 244, 0.4) !important;
}

.btn-success {
  background: linear-gradient(135deg, #36c055 0%, #2ea043 100%) !important;
  box-shadow: 0 4px 15px rgba(54, 192, 85, 0.3) !important;
  color: #ffffff !important;
}
.btn-success:hover {
  background: linear-gradient(135deg, #2ea043 0%, #25883a 100%) !important;
  color: #ffffff !important;
}

.btn-danger {
  background: linear-gradient(135deg, #d92632 0%, #b91c29 100%) !important;
  box-shadow: 0 4px 15px rgba(217, 38, 50, 0.3) !important;
  color: #ffffff !important;
}
.btn-danger:hover {
  background: linear-gradient(135deg, #b91c29 0%, #9a1722 100%) !important;
  color: #ffffff !important;
}

.btn-default,
.btn-secondary,
.btn-light {
  background: rgba(30, 36, 51, 0.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--text-primary) !important;
}
.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover {
  background: rgba(1, 149, 244, 0.12) !important;
  border-color: var(--primary-blue) !important;
  color: var(--primary-blue) !important;
}

/* Focus visible accessibilité */
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary-blue) !important;
  outline-offset: 2px !important;
}

/* =========================
   Inputs & Textarea (dark readable)
   ========================= */
.form-control,
input[type="text"]:not(.vf-input-field),
input[type="email"]:not(.vf-input-field),
input[type="password"]:not(.vf-input-field),
select,
textarea {
  transition: background .25s var(--transition-smooth), border-color .25s var(--transition-smooth), box-shadow .25s var(--transition-smooth) !important;
  border-radius: var(--radius-md) !important;
  border: 1.5px solid var(--border-dark) !important;
  background: rgba(30, 36, 51, 0.8) !important;
  color: var(--text-primary) !important;
  padding: 12px 16px !important;
}
.form-control:hover,
input[type="text"]:not(.vf-input-field):hover,
input[type="email"]:not(.vf-input-field):hover,
input[type="password"]:not(.vf-input-field):hover,
select:hover,
textarea:hover {
  border-color: var(--border-dark-hover) !important;
  background: rgba(30, 36, 51, 0.9) !important;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 3px rgba(1, 149, 244, 0.15) !important;
  background: rgba(30, 36, 51, 1) !important;
  color: var(--text-primary) !important;
  outline: none !important;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: .7 !important;
}

/* Input groups (indicatif téléphone, etc.) */
.input-group-addon,
.input-group-text {
  background: rgba(30, 36, 51, 0.8) !important;
  border: 1.5px solid var(--border-dark) !important;
  color: var(--text-secondary) !important;
  padding: 12px 16px !important;
}

/* =========================
   Tables
   ========================= */
.table,
table {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--border-dark) !important;
}
.table thead,
table thead {
  background: rgba(30, 36, 51, 0.8) !important;
}
.table thead th,
table thead th {
  background: transparent !important;
  border-bottom: 2px solid rgba(1, 149, 244, 0.3) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: .8px !important;
  color: var(--text-primary) !important;
  padding: 16px !important;
}
.table tbody,
table tbody {
  background: rgba(30, 36, 51, 0.4) !important;
}
.table tbody tr,
table tbody tr {
  transition: background .2s var(--transition-smooth) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.table tbody tr:hover,
table tbody tr:hover {
  background: rgba(1, 149, 244, 0.06) !important;
}
.table tbody td,
table tbody td {
  padding: 14px 16px !important;
  color: var(--text-secondary) !important;
}

/* =========================
   Badges
   ========================= */
.badge,
.label {
  border-radius: 20px !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}
.badge-primary,
.label-primary {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%) !important;
  color: #ffffff !important;
}
.badge-success,
.label-success {
  background: linear-gradient(135deg, #36c055 0%, #2ea043 100%) !important;
  color: #ffffff !important;
}
.badge-danger,
.label-danger {
  background: linear-gradient(135deg, #d92632 0%, #b91c29 100%) !important;
  color: #ffffff !important;
}

/* =========================
   Alerts
   ========================= */
.alert {
  border-radius: var(--radius-lg) !important;
  border-left-width: 4px !important;
  padding: 16px 20px !important;
  backdrop-filter: blur(10px) !important;
}
.alert-success { background: rgba(54,192,85,.15) !important; border-left-color:#36c055 !important; color:#6ee7b7 !important; }
.alert-info    { background: rgba(1,149,244,.15) !important; border-left-color:var(--primary-blue) !important; color:#7dd3fc !important; }
.alert-warning { background: rgba(255,168,0,.15) !important; border-left-color:#ffa800 !important; color:#fbbf24 !important; }
.alert-danger  { background: rgba(217,38,50,.15) !important; border-left-color:#d92632 !important; color:#fca5a5 !important; }

/* =========================
   Modal
   ========================= */
.modal-content {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--border-dark) !important;
  background: var(--bg-dark-secondary) !important;
}
.modal-header {
  background: rgba(1, 149, 244, 0.05) !important;
  border-bottom: 1px solid var(--border-dark) !important;
}
.modal-body { padding: 24px !important; color: var(--text-secondary) !important; }

/* =========================
   Dropdown
   ========================= */
.dropdown-menu {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--border-dark) !important;
  background: rgba(30, 36, 51, 0.98) !important;
  padding: 8px !important;
}
.dropdown-item {
  border-radius: var(--radius-sm) !important;
  transition: background .2s var(--transition-smooth), color .2s var(--transition-smooth) !important;
  color: var(--text-secondary) !important;
  padding: 10px 14px !important;
}
.dropdown-item:hover { background: rgba(1,149,244,.1) !important; color: var(--primary-blue) !important; }
.dropdown-item.active { background: rgba(1,149,244,.15) !important; color: var(--primary-blue) !important; }

/* =========================
   Pagination
   ========================= */
.pagination { gap: 6px !important; }
.pagination .page-item .page-link {
  background: rgba(30,36,51,.8) !important;
  border: 1.5px solid rgba(255,255,255,.15) !important;
  color: var(--text-secondary) !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  transition: background .2s var(--transition-smooth), border-color .2s var(--transition-smooth), color .2s var(--transition-smooth) !important;
}
.pagination .page-item .page-link:hover { background: rgba(1,149,244,.15) !important; border-color: var(--primary-blue) !important; color: var(--primary-blue) !important; }
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%) !important;
  border-color: var(--primary-blue) !important;
  color: #ffffff !important;
}

/* =========================
   Scrollbar
   ========================= */
::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.2) !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%) !important;
  border-radius: 10px !important;
}

/* =========================
   Links
   ========================= */
a:not(.btn):not(.nav-link) {
  color: var(--text-primary) !important;
  transition: color .2s var(--transition-smooth) !important;
}
a:not(.btn):not(.nav-link):hover { color: var(--primary-blue) !important; text-decoration: none !important; }
p a, .content a { color: var(--primary-blue) !important; }

/* =========================
   Navbar
   ========================= */
.navbar {
  background: linear-gradient(135deg, rgba(26,31,46,.98) 0%, rgba(21,26,38,.95) 100%) !important;
  border-bottom: 2px solid rgba(1, 149, 244, 0.3) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.6) !important;
  backdrop-filter: blur(20px) !important;
  padding: 12px 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
}
.navbar-brand { transition: transform .3s var(--transition-smooth), filter .3s var(--transition-smooth) !important; }
.navbar-brand:hover { transform: scale(1.05) !important; filter: drop-shadow(0 4px 12px rgba(1,149,244,.5)) !important; }
.navbar-nav .nav-link {
  position: relative !important;
  padding: 10px 18px !important;
  margin: 0 4px !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  transition: background .2s var(--transition-smooth), color .2s var(--transition-smooth) !important;
}
.navbar-nav .nav-link:hover { background: rgba(1,149,244,.1) !important; color: var(--primary-blue) !important; }
.navbar-nav .nav-link.active { background: rgba(1,149,244,.15) !important; color: var(--primary-blue) !important; font-weight: 600 !important; }

/* =========================
   Sidebar
   ========================= */
.panel-sidebar,
.list-group {
  background: rgba(30, 36, 51, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  color: var(--text-secondary) !important;
  padding: 12px 16px !important;
  transition: background .2s var(--transition-smooth), color .2s var(--transition-smooth), transform .2s var(--transition-smooth) !important;
}
.list-group-item:hover { background: rgba(1,149,244,.08) !important; color: var(--primary-blue) !important; transform: translateX(4px) !important; }
.list-group-item.active { background: rgba(1,149,244,.15) !important; color: var(--primary-blue) !important; border-left: 3px solid var(--primary-blue) !important; font-weight: 600 !important; }

/* =========================
   Breadcrumb
   ========================= */
.breadcrumb {
  background: rgba(30, 36, 51, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-lg) !important;
  padding: 12px 20px !important;
}
.breadcrumb-item a { color: var(--text-secondary) !important; }
.breadcrumb-item.active { color: var(--primary-blue) !important; font-weight: 600 !important; }

/* =========================
   Progress
   ========================= */
.progress { border-radius: 20px !important; background: rgba(0,0,0,.3) !important; height: 10px !important; }
.progress-bar {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%) !important;
  border-radius: 20px !important;
  transition: width .6s var(--transition-smooth) !important;
}

/* =========================
   Tabs
   ========================= */
.nav-tabs,
.nav-pills { border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.nav-tabs .nav-link,
.nav-pills .nav-link { background: transparent !important; border: none !important; color: var(--text-secondary) !important; }
.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover { color: var(--primary-blue) !important; }
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background: rgba(1,149,244,.12) !important;
  color: var(--primary-blue) !important;
  border-bottom: 2px solid var(--primary-blue) !important;
}

/* =========================
   Footer
   ========================= */
.footer,
footer {
  background: linear-gradient(135deg, rgba(21,26,38,.98) 0%, rgba(15,18,28,.95) 100%) !important;
  border-top: 2px solid rgba(1,149,244,.2) !important;
  padding: 40px 0 20px 0 !important;
}
.footer a, footer a { color: var(--text-secondary) !important; }
.footer a:hover, footer a:hover { color: var(--primary-blue) !important; }

/* =========================
   Headings
   ========================= */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary) !important; }

/* =========================
   Responsive navbar panel
   ========================= */
@media (max-width: 991px) {
  .navbar-collapse {
    background: rgba(30, 36, 51, 0.98) !important;
    border-radius: var(--radius-lg) !important;
    margin-top: 12px !important;
    padding: 12px !important;
    border: 1px solid rgba(1,149,244,.2) !important;
  }
}

/* =========================
   Hide Lagom logo in sidebar
   ========================= */
.sidebar .logo,
.sidebar-menu .logo,
aside .logo,
[class*="sidebar"] img[src*="lagom"],
[class*="sidebar"] img[alt*="lagom"],
.sidebar-brand { display: none !important; }

/* Optional: tighten sidebar paddings and item spacing */
.sidebar,
.sidebar-menu {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.sidebar .list-group-item,
.sidebar-menu .list-group-item {
  margin: 0 !important;
  border-radius: var(--radius-sm) !important;
}

/* Headings consistency inside dark sections */
.section-title,
.page-title,
h1.page-title,
.panel .panel-title {
  color: var(--text-primary) !important;
  letter-spacing: .2px !important;
}

/* =========================
   Utility classes (non-intrusive)
   ========================= */
.text-primary { color: var(--primary-blue) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-dark { background: var(--bg-dark-primary) !important; }
.bg-dark-2 { background: var(--bg-dark-secondary) !important; }
.bg-card { background: var(--bg-dark-card) !important; }

.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }

.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-hover { box-shadow: var(--shadow-hover) !important; }

.no-shadow { box-shadow: none !important; }
.no-border { border: none !important; }

/* Spacers */
.gap-4 { gap: 4px !important; }
.gap-6 { gap: 6px !important; }
.gap-8 { gap: 8px !important; }
.gap-12 { gap: 12px !important; }

/* =========================
   Accessibility helpers
   ========================= */
:focus-visible {
  outline: 2px solid var(--primary-blue) !important;
  outline-offset: 2px !important;
}
[role="button"]:focus-visible { outline: 2px solid var(--primary-blue) !important; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================
   Pricing — enforce no child hover transforms (final safety net)
   ========================= */
.pricing-table *:hover,
.price-table *:hover,
.panel-product *:hover,
.product-card *:hover,
.pricing-card *:hover,
[class*="package"] *:hover,
[class*="pricing"] *:hover {
  transform: none !important;
  animation: none !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* =========================
   Mobile polish (safe)
   ========================= */
@media (max-width: 767.98px) {
  .panel,
  .card,
  .pricing-card,
  .product-card,
  .pricing-table,
  .price-table {
    border-radius: var(--radius-md) !important;
  }
  .navbar-brand img { max-height: 28px !important; }
  .btn { padding: 10px 16px !important; }
}

/* =========================
   Print tweaks (minimal)
   ========================= */
@media print {
  .navbar, .footer, .btn { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .panel, .card { border: 1px solid #ddd !important; box-shadow: none !important; }
}

/* Éditeur tickets — fond sombre + texte lisible */
.CodeMirror, .CodeMirror-scroll,
.simplemde-container .editor-preview,
.simplemde-container .editor-preview-side,
textarea[name="message"], #inputMessage {
  background: rgba(30, 36, 51, 0.98) !important;
  color: #fff !important;
}
.editor-toolbar { background: rgba(30,36,51,.9) !important; border-bottom: 1px solid var(--border-dark) !important; }
.CodeMirror-cursor { border-left: 2px solid var(--primary-blue) !important; }
textarea[name="subject"], #inputSubject {
  background: rgba(30,36,51,.9) !important; color: #fff !important; border: 1.5px solid var(--border-dark) !important;
}
#inputSubject::placeholder, textarea::placeholder { color: var(--text-muted) !important; }


/* =========================
   End — Lagom Dark Blue Ultimate CSS
   ========================= */