/* Tsleem — cookie consent banner.
   Uses the page's own tokens (--navy, --orange, --r) so it reads as part of the site rather than a
   bolted-on widget. Logical properties throughout, so the Arabic RTL page needs no overrides. */

.cc {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9999;
  padding: 16px;
  background: rgba(20, 31, 40, .97);
  color: #e8eef3;
  box-shadow: 0 -10px 40px -12px rgba(0, 0, 0, .45);
  animation: cc-in .28s ease-out both;
}

@keyframes cc-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cc { animation: none; } }

.cc__in {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.cc__txt { flex: 1 1 420px; min-width: 0; }
.cc__t { margin: 0 0 4px; font-weight: 700; font-size: 15px; color: #fff; }
.cc__b { margin: 0; font-size: 14px; line-height: 1.55; color: #b9c6d1; }

.cc__link { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cc__link:hover { color: #FA4D09; }

.cc__act { display: flex; gap: 10px; flex-wrap: wrap; margin-inline-start: auto; }

.cc__btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  /* Comfortably above the 44px touch target on the phones field staff actually use. */
  min-height: 44px;
}

.cc__btn--solid { background: #FA4D09; color: #fff; }
.cc__btn--solid:hover { background: #d93f05; }

/* Decline is a real, equally reachable choice — not a greyed-out afterthought. Regulators treat
   a hard-to-find refusal as no consent at all. */
.cc__btn--ghost { background: transparent; color: #e8eef3; border-color: rgba(255, 255, 255, .32); }
.cc__btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }

.cc__btn:focus-visible,
.cc__link:focus-visible {
  outline: 2px solid #FA4D09;
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .cc__in { gap: 14px; }
  .cc__act { width: 100%; margin-inline-start: 0; }
  .cc__btn { flex: 1 1 auto; }
}