/*
 * Easlish — Dark Mode Hotfixes
 * Fixes contrast issues caused by theme variables being remapped in dark mode.
 * Scoped to `body.dark-mode` only (no light-mode impact).
 */

body.dark-mode {
  /* Buttons: restore readable text on colored backgrounds */
  --primary-btn-color: rgba(255, 255, 255, 0.96);
  --primary-btn-hover-color: rgba(255, 255, 255, 0.96);
  --secondary-btn-color: rgba(255, 255, 255, 0.96);
  --secondary-btn-hover-color: rgba(255, 255, 255, 0.96);
  --accent-btn-color: rgba(255, 255, 255, 0.96);
  --accent-btn-hover-color: rgba(255, 255, 255, 0.96);
  --info-btn-color: rgba(255, 255, 255, 0.96);
  --info-btn-hover-color: rgba(255, 255, 255, 0.96);
  --danger-btn-color: rgba(255, 255, 255, 0.96);
  --danger-btn-hover-color: rgba(255, 255, 255, 0.96);

  /* Bright backgrounds: dark text is more readable */
  --warning-btn-color: rgba(17, 24, 39, 0.95);
  --warning-btn-hover-color: rgba(17, 24, 39, 0.95);
  --success-btn-color: rgba(17, 24, 39, 0.95);
  --success-btn-hover-color: rgba(17, 24, 39, 0.95);

  /* In dark mode, "white" buttons often use dark surfaces → keep text light */
  --white-btn-color: rgba(255, 255, 255, 0.96);
  --white-btn-hover-color: rgba(255, 255, 255, 0.96);
}

/* `text-white` should be real white, not the dark-mode surface variable */
body.dark-mode .text-white,
body.dark-mode .text-hover-white:hover {
  color: rgba(255, 255, 255, 0.96) !important;
}

/* Optional: border-white should stay visible */
body.dark-mode .border-white {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* WhatsApp fixed prefix input (+966) */
.easlish-wa-input {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.easlish-wa-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  min-width: 72px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(15, 23, 42, 0.88);
  font-weight: 800;
  border-radius: 14px 0 0 14px;
  line-height: 1;
  direction: ltr;
  unicode-bidi: embed;
}

.easlish-wa-input .form-control {
  border-left: 0 !important;
  border-radius: 0 14px 14px 0 !important;
}

.rtl .easlish-wa-prefix {
  border-radius: 0 14px 14px 0;
}

.rtl .easlish-wa-input .form-control {
  border-left: 1px solid rgba(148, 163, 184, 0.45) !important;
  border-right: 0 !important;
  border-radius: 14px 0 0 14px !important;
}

.easlish-wa-input:focus-within .easlish-wa-prefix {
  border-color: rgba(232, 103, 79, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(232, 103, 79, 0.12);
}

.easlish-wa-input.is-invalid .easlish-wa-prefix,
.easlish-wa-input.is-invalid .form-control {
  border-color: rgba(246, 60, 60, 0.55) !important;
}

body.dark-mode .easlish-wa-prefix {
  background: rgba(2, 6, 23, 0.55);
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(226, 232, 240, 0.92);
}

body.dark-mode .rtl .easlish-wa-input .form-control {
  border-left-color: rgba(148, 163, 184, 0.22) !important;
}