/* =================================================================
   TES COOKIE CONSENT — STYLES
   Everything is scoped under .tes-consent to avoid clashing with
   the site CSS. !important is used on type/colour/focus because the
   global stylesheet uses aggressive element-level !important rules
   (e.g. `button:focus { outline: none !important }` and the mobile
   `p { font-size: 16pt !important }`) that would otherwise win.
   ================================================================= */

.tes-consent[hidden] { display: none !important; }

.tes-consent {
  position: fixed;
  inset: 0;
  z-index: 2147483000;                 /* above sticky CTAs / back-to-top */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: "Inter", sans-serif;
}

/* Overlay sits BEHIND the dialog so the buttons are never covered
   (no "ghost" element hiding the interactive controls). */
.tes-consent__overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 60, 20, 0.55);  /* #143C14 tint */
  z-index: 1;
}

.tes-consent__dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

.tes-consent__title {
  font-family: "Gabarito", sans-serif;
  font-weight: 600;
  font-size: 24px !important;
  line-height: 120% !important;
  color: #143C14 !important;
  margin: 0 0 10px 0;
}

.tes-consent__body {
  font-weight: 400;
  font-size: 15px !important;
  line-height: 150% !important;
  color: #4E4E4E !important;
  margin: 0 0 20px 0;
}

.tes-consent__link {
  color: #143C14 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tes-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Equal size / prominence on the first layer so rejecting is as easy
   as accepting (ICO requirement). */
.tes-consent__btn {
  flex: 1 1 auto;
  min-width: 150px;
  min-height: 48px;
  padding: 14px 20px;
  font-family: "Inter", sans-serif;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 20px !important;
  border-radius: 50px;
  cursor: pointer;                     /* strong actionability signal */
  transition: filter 0.15s ease, background-color 0.15s ease;
}

.tes-consent__btn--accept {
  background-color: #C3EB66;
  color: #0E0E0E;
  border: 2px solid #C3EB66;
}
.tes-consent__btn--accept:hover { filter: brightness(0.95); }

.tes-consent__btn--reject {
  background-color: #ffffff;
  color: #143C14;
  border: 2px solid #143C14;
}
.tes-consent__btn--reject:hover { background-color: #f4f7ee; }

/* Visible keyboard focus — overrides the global `button:focus { outline:none }`. */
.tes-consent__btn:focus-visible {
  outline: 3px solid #143C14 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(20, 60, 20, 0.25) !important;
}

@media (max-width: 480px) {
  .tes-consent__dialog { padding: 22px; border-radius: 16px; }
  .tes-consent__actions { flex-direction: column-reverse; }  /* Accept on top */
  .tes-consent__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tes-consent__btn { transition: none; }
}