/* Logo Teal Palette */
:root {
  --brand-50: #ebf1f2;
  --brand-100: #d9e5e7;
  --brand-200: #b2cacf;
  --brand-300: #8cb0b7;
  --brand-400: #6696a0;
  --brand-500: #407c88;
  --brand-600: #1f6573;
  --brand-700: #005060;
  /* MAIN */
  --brand-800: #004452;
  --brand-900: #003843;
}

/* background */
.bg-emerald-50 {
  background: var(--brand-50) !important;
}

.bg-emerald-100 {
  background: var(--brand-100) !important;
}

.bg-emerald-200 {
  background: var(--brand-200) !important;
}

.bg-emerald-300 {
  background: var(--brand-300) !important;
}

.bg-emerald-400 {
  background: var(--brand-400) !important;
}

.bg-emerald-500 {
  background: var(--brand-500) !important;
}

.bg-emerald-600 {
  background: var(--brand-600) !important;
}

.bg-emerald-700 {
  background: var(--brand-700) !important;
}

.bg-emerald-800 {
  background: var(--brand-800) !important;
}

.bg-emerald-900 {
  background: var(--brand-900) !important;
}

/* text */
.text-emerald-500 {
  color: var(--brand-500) !important;
}

.text-emerald-600 {
  color: var(--brand-600) !important;
}

.text-emerald-700 {
  color: var(--brand-700) !important;
}

.text-emerald-800 {
  color: var(--brand-800) !important;
}

.text-emerald-900 {
  color: var(--brand-900) !important;
}

/* border */
.border-emerald-100 {
  border-color: var(--brand-100) !important;
}

.border-emerald-200 {
  border-color: var(--brand-200) !important;
}

.border-emerald-500 {
  border-color: var(--brand-500) !important;
}

.border-emerald-600 {
  border-color: var(--brand-600) !important;
}

.border-emerald-700 {
  border-color: var(--brand-700) !important;
}

/* ring / focus */
.ring-emerald-500 {
  --tw-ring-color: var(--brand-500) !important;
}

.focus\:ring-emerald-500:focus {
  --tw-ring-color: var(--brand-500) !important;
}

/* ===================================
   ALL BUTTONS = ORANGE + WHITE TEXT
=================================== */

:root {
  --btn-orange-500: #ff8c2a;
  /* main */
  --btn-orange-600: #ff7a00;
  /* hover */
  --btn-orange-700: #e66a00;
  /* active/dark */
}

/* ✅ Yellow classes -> Orange */
.bg-yellow-400 {
  background: var(--btn-orange-500) !important;
}

.bg-yellow-500 {
  background: var(--btn-orange-600) !important;
}

.hover\:bg-yellow-400:hover {
  background: var(--btn-orange-600) !important;
}

.hover\:bg-yellow-500:hover {
  background: var(--btn-orange-700) !important;
}

/* ✅ Emerald button classes -> Orange (your "View Full", pagination prev/next etc.) */
.bg-emerald-700 {
  background: var(--btn-orange-600) !important;
}

.bg-emerald-600 {
  background: var(--btn-orange-500) !important;
}

.hover\:bg-emerald-600:hover {
  background: var(--btn-orange-500) !important;
}

.hover\:bg-emerald-700:hover {
  background: var(--btn-orange-700) !important;
}

/* ✅ Force all Tailwind button text to white */
.text-emerald-900 {
  color: #fff !important;
}

.text-emerald-800 {
  color: #fff !important;
}

.text-yellow-400 {
  color: #fff !important;
}

.text-yellow-500 {
  color: #fff !important;
}

/* Optional: links that look like buttons */
a.bg-yellow-500,
a.bg-emerald-700,
button.bg-yellow-500,
button.bg-emerald-700 {
  color: #fff !important;
}

/* ===== Main Overlay ===== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  /* White background to make the green pop */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition:
    opacity 0.5s ease,
    visibility 0.5s;
}

/* ===== The Spinning Ring Container ===== */
.loader-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== The Green Spinning Border ===== */
.loader-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid #f3f3f3;
  /* Light grey background ring */
  border-top: 4px solid #005060;
  /* The Green (Emerald) spinning part */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ===== The Logo in the Center ===== */
.logo-center {
  width: 80px;
  /* Adjust size as needed */
  height: auto;
  z-index: 2;
}

/* ===== Spin Animation ===== */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Class to hide preloader */
.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ==============================
   LOGO GREEN THEME OVERRIDE
   Logo Green: #003843
============================== */

:root{
  --logo-green: #003843;
  --logo-green-2: #005060;      /* little lighter hover */
  --logo-green-soft: rgba(0,56,67,.10); /* bg tint */
}

/* ✅ Text emerald -> logo green */
.text-emerald-700,
.text-emerald-800,
.text-emerald-900{
  color: var(--logo-green) !important;
}

/* ✅ Hover text emerald -> logo green */
.hover\:text-emerald-700:hover,
.hover\:text-emerald-800:hover,
.hover\:text-emerald-900:hover{
  color: var(--logo-green) !important;
}

/* ✅ Underline/after emerald -> logo green */
.after\:bg-emerald-600::after,
.after\:bg-emerald-700::after{
  background: var(--logo-green) !important;
}

/* ✅ Mobile active bg emerald-100 -> soft logo green */
.bg-emerald-100{
  background: var(--logo-green-soft) !important;
}

/* ✅ Hover bg emerald-50 -> soft */
.hover\:bg-emerald-50:hover{
  background: var(--logo-green-soft) !important;
}

/* ✅ Buttons (Prev/Next etc.) emerald -> logo green */
.bg-emerald-700{ background: var(--logo-green) !important; }
.hover\:bg-emerald-600:hover{ background: var(--logo-green-2) !important; }