@import "/public/css/colors/zem.colors.css";

/* Remove outline and shadow from all elements on focus */
*:focus,
*:active,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Inputs and form elements */
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Links */
a,
a:focus,
a:active {
  outline: none !important;
  box-shadow: none !important;
  color: var(--white);
}
.page-item {
  cursor: pointer;
}

/* Bootstrap compatibility */
.form-control:focus,
.btn:focus,
.btn:active,
.btn-check:focus + .btn,
.page-link:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

.placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills container nicely */

  /* Make it look muted */
  filter: grayscale(100%) brightness(0.8) opacity(0.6);

  /* Prevent interaction */
  pointer-events: none; /* no clicks */
  user-select: none; /* no text/image selection */
  -webkit-user-drag: none; /* prevent dragging */

  /* Optional: smooth appearance */
  transition: filter 0.3s ease;
}

.dynamic-img {
  width: var(--w);
  height: var(--h);
  object-fit: cover;
}

.notification-card {
  transition: 0.2s ease;
}

.notification-card:hover {
  transform: translateY(-4px);
}