.hrm-public-booking,
.hrm-public-booking *,
.hrm-frontend-dashboard,
.hrm-frontend-dashboard * {
  box-sizing: border-box;
}

.hrm-public-booking,
.hrm-frontend-dashboard {
  --hrm-brand-primary: #987CC0;
  --hrm-brand-button: #987CC0;
  --hrm-brand-navy: #07142e;
  --hrm-brand-text: #000000;
  --hrm-brand-font: Inter, system-ui, sans-serif;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 16px;
  background: #ffffff;
  color: var(--hrm-brand-text);
  font-family: var(--hrm-brand-font);
  isolation: isolate;
}

.hrm-public-brand-mark {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

.hrm-public-brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(111, 41, 255, 0.36));
}

.hrm-public-booking a,
.hrm-frontend-dashboard a {
  text-decoration: none;
}

.hrm-public-booking button,
.hrm-public-booking input,
.hrm-public-booking select,
.hrm-public-booking textarea,
.hrm-frontend-dashboard button,
.hrm-frontend-dashboard input,
.hrm-frontend-dashboard select,
.hrm-frontend-dashboard textarea {
  font-family: var(--hrm-brand-font);
}

.hrm-public-booking button:disabled,
.hrm-frontend-dashboard button:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.hrm-public-booking .bg-primary-500,
.hrm-frontend-dashboard .bg-primary-500,
.hrm-public-booking .hrm-brand-button,
.hrm-frontend-dashboard .hrm-brand-button {
  background-color: var(--hrm-brand-button) !important;
  background-image: linear-gradient(135deg, var(--hrm-brand-button) 0%, color-mix(in srgb, var(--hrm-brand-button) 64%, #000 36%) 52%, var(--hrm-brand-navy) 100%) !important;
}

.hrm-public-booking .hover\:bg-primary-600:hover,
.hrm-frontend-dashboard .hover\:bg-primary-600:hover,
.hrm-public-booking .hrm-brand-button:hover,
.hrm-frontend-dashboard .hrm-brand-button:hover {
  background-color: color-mix(in srgb, var(--hrm-brand-button) 86%, #000 14%) !important;
}

.hrm-public-booking .bg-primary-50,
.hrm-frontend-dashboard .bg-primary-50 {
  background-color: color-mix(in srgb, var(--hrm-brand-primary) 12%, #fff 88%) !important;
}

.hrm-public-booking .text-primary-500,
.hrm-public-booking .text-primary-600,
.hrm-public-booking .text-primary-700,
.hrm-frontend-dashboard .text-primary-500,
.hrm-frontend-dashboard .text-primary-600,
.hrm-frontend-dashboard .text-primary-700 {
  color: var(--hrm-brand-primary) !important;
}

.hrm-public-booking .border-primary-500,
.hrm-frontend-dashboard .border-primary-500 {
  border-color: var(--hrm-brand-primary) !important;
}

.hrm-public-booking .ring-primary-500,
.hrm-public-booking .focus\:ring-primary-500:focus,
.hrm-frontend-dashboard .ring-primary-500,
.hrm-frontend-dashboard .focus\:ring-primary-500:focus {
  --tw-ring-color: var(--hrm-brand-primary) !important;
}

.hrm-public-booking .hrm-brand-button,
.hrm-frontend-dashboard .hrm-brand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 12px 16px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hrm-public-booking .hrm-back-listing .iconify,
.hrm-public-booking .hrm-back-detail .iconify,
.hrm-public-booking .hrm-gallery-prev .iconify {
  transform: rotate(180deg);
}

.hrm-public-booking .hrm-room-grid {
  min-height: 220px;
}

.hrm-public-booking .hrm-room-card {
  will-change: transform;
}

.hrm-public-booking .hrm-detail-gallery img,
.hrm-public-booking .hrm-summary-image img {
  display: block;
}

.hrm-public-booking .hrm-summary-image .hrm-gallery-open {
  pointer-events: none;
}

.hrm-frontend-dashboard .hrm-dashboard-card {
  background: #ffffff;
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: 16px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
}

.hrm-frontend-dashboard .hrm-dashboard-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

/* Room filter pills — purple-tinted inactive state (no orange from host themes) */
.hrm-frontend-dashboard .hrm-front-room-filter {
  border-color: color-mix(in srgb, var(--hrm-brand-primary) 22%, #e2e8f0) !important;
  background: #fff !important;
  color: var(--hrm-brand-text) !important;
}

.hrm-frontend-dashboard .hrm-front-room-filter:hover:not(.border-primary-500) {
  background: color-mix(in srgb, var(--hrm-brand-primary) 10%, #fff) !important;
  border-color: color-mix(in srgb, var(--hrm-brand-primary) 35%, #e2e8f0) !important;
}

.hrm-frontend-dashboard .hrm-front-room-filter.border-primary-500 {
  border-color: var(--hrm-brand-primary) !important;
}

.hrm-frontend-dashboard .hrm-front-delete-room {
  background: color-mix(in srgb, var(--hrm-brand-primary) 12%, #fff) !important;
  color: var(--hrm-brand-primary) !important;
  border: 1px solid color-mix(in srgb, var(--hrm-brand-primary) 28%, #e2e8f0);
}

.hrm-frontend-dashboard .hrm-front-delete-room:hover {
  background: color-mix(in srgb, var(--hrm-brand-primary) 20%, #fff) !important;
}

@media (max-width: 768px) {
  .hrm-public-booking,
  .hrm-frontend-dashboard {
    padding: 16px 12px;
  }
}

/* =============================================================
   FINAL PUBLIC CONTRAST + RESPONSIVE QA LAYER
   Keeps booking, checkout, dashboard, and table screens readable
   when the active WordPress theme applies light/dark overrides.
   ============================================================= */
.hrm-public-booking,
.hrm-frontend-dashboard {
  width: min(1180px, calc(100vw - 24px));
  max-width: 100%;
  color: #0f172a !important;
  background: #ffffff !important;
  overflow-x: clip;
}

.hrm-public-booking :where(h1, h2, h3, h4, h5, h6, strong, th, label, .text-slate-950, .text-slate-900, .text-slate-800, .text-black),
.hrm-frontend-dashboard :where(h1, h2, h3, h4, h5, h6, strong, th, label, .text-slate-950, .text-slate-900, .text-slate-800, .text-black) {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
}

.hrm-public-booking :where(p, li, td, span, small, figcaption, .text-slate-700, .text-slate-600, .text-slate-500, .text-slate-400),
.hrm-frontend-dashboard :where(p, li, td, span, small, figcaption, .text-slate-700, .text-slate-600, .text-slate-500, .text-slate-400) {
  color: #475569 !important;
  -webkit-text-fill-color: #475569;
}

.hrm-public-booking :where(.bg-white, .bg-surface-50, .bg-surface-100, .hrm-room-card, .hrm-checkout-form, .hrm-dashboard-card),
.hrm-frontend-dashboard :where(.bg-white, .bg-surface-50, .bg-surface-100, .hrm-dashboard-card) {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.hrm-public-booking :where(.bg-primary-50),
.hrm-frontend-dashboard :where(.bg-primary-50) {
  background-color: color-mix(in srgb, var(--hrm-brand-primary) 12%, #ffffff 88%) !important;
}

.hrm-public-booking :where(input, textarea, select),
.hrm-frontend-dashboard :where(input, textarea, select) {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
}

.hrm-public-booking :where(input, textarea, select)::placeholder,
.hrm-frontend-dashboard :where(input, textarea, select)::placeholder {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b;
  opacity: 0.92;
}

.hrm-public-booking :where(.iconify),
.hrm-frontend-dashboard :where(.iconify) {
  color: currentColor;
  -webkit-text-fill-color: currentColor;
}

.hrm-public-booking :where(.bg-primary-500, .hrm-brand-button, .hrm-view-room, .hrm-pay-button, .hrm-gallery-open, .hrm-gallery-next),
.hrm-frontend-dashboard :where(.bg-primary-500, .hrm-brand-button, .hrm-front-room-filter.border-primary-500) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.hrm-public-booking :where(.bg-primary-500 *, .hrm-brand-button *, .hrm-view-room *, .hrm-pay-button *, .hrm-gallery-open *, .hrm-gallery-next *),
.hrm-frontend-dashboard :where(.bg-primary-500 *, .hrm-brand-button *, .hrm-front-room-filter.border-primary-500 *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.hrm-public-booking :where(.border-slate-200, .border-slate-300),
.hrm-frontend-dashboard :where(.border-slate-200, .border-slate-300) {
  border-color: #d7dce7 !important;
}

.hrm-public-booking :where(.shadow-card, .shadow-modal, .hrm-dashboard-card),
.hrm-frontend-dashboard :where(.shadow-card, .shadow-modal, .hrm-dashboard-card) {
  box-shadow: 0 18px 45px -28px rgb(15 23 42 / 0.42), 0 1px 2px rgb(15 23 42 / 0.08);
}

.hrm-public-booking :where(.hrm-room-grid, .hrm-summary-breakdown, .hrm-bank-transfer-panel),
.hrm-frontend-dashboard :where(.hrm-dashboard-table, .hrm-dashboard-card) {
  min-width: 0;
}

.hrm-frontend-dashboard :where(table, .hrm-dashboard-table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hrm-frontend-dashboard :where(thead, tbody, tr) {
  min-width: max-content;
}

@media (max-width: 768px) {
  .hrm-public-booking,
  .hrm-frontend-dashboard {
    width: min(100%, calc(100vw - 20px));
    padding: 14px 10px;
  }

  .hrm-public-booking :where(.hrm-room-grid, .grid),
  .hrm-frontend-dashboard :where(.grid) {
    gap: 14px;
  }

  .hrm-public-booking :where(.hrm-checkout-form, aside, .hrm-room-card, .hrm-dashboard-card),
  .hrm-frontend-dashboard :where(.hrm-dashboard-card) {
    border-radius: 14px !important;
    padding-inline: clamp(14px, 4vw, 20px) !important;
  }
}

@media (max-width: 430px) {
  .hrm-public-booking,
  .hrm-frontend-dashboard {
    width: min(100%, calc(100vw - 14px));
    padding-inline: 7px;
  }

  .hrm-public-booking :where(button, .hrm-brand-button, .hrm-view-room, .hrm-pay-button),
  .hrm-frontend-dashboard :where(button, .hrm-brand-button) {
    min-height: 44px;
    white-space: normal;
  }

  .hrm-public-booking :where(h1, h2, h3, p, span, label, button, a),
  .hrm-frontend-dashboard :where(h1, h2, h3, p, span, label, button, a) {
    overflow-wrap: anywhere;
  }
}

/* =============================================================
   FINAL PUBLIC APP VISIBILITY QA LAYER
   Extra hardening for booking, checkout, confirmation, dashboard,
   analytics, room detail, and room management screens.
   ============================================================= */
.hrm-public-booking,
.hrm-frontend-dashboard {
  color-scheme: light;
}

.hrm-public-booking :where(section, article, aside, form, header, .hrm-booking-hero, .hrm-room-card, .hrm-dashboard-card, .hrm-checkout-form, .hrm-payment-option, .hrm-bank-transfer-panel, .hrm-summary-breakdown, .rounded-2xl, .rounded-xl),
.hrm-frontend-dashboard :where(section, article, aside, form, header, .hrm-dashboard-card, .rounded-2xl, .rounded-xl) {
  color: #0f172a !important;
}

.hrm-public-booking :where(a:not(.bg-primary-500):not(.hrm-brand-button):not(.hrm-view-room):not(.hrm-pay-button), button:not(.bg-primary-500):not(.hrm-brand-button):not(.hrm-view-room):not(.hrm-pay-button), .hrm-back-listing, .hrm-back-detail, .hrm-filter-pill),
.hrm-frontend-dashboard :where(a:not(.bg-primary-500):not(.hrm-brand-button), button:not(.bg-primary-500):not(.hrm-brand-button):not(.hrm-front-room-filter), .hrm-front-delete-room) {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
}

.hrm-public-booking :where(.text-primary-500, .text-primary-600, .text-primary-700, .hrm-availability-badge, .hrm-availability-badge *, .hrm-filter-pill.border-primary-500),
.hrm-frontend-dashboard :where(.text-primary-500, .text-primary-600, .text-primary-700, .bg-primary-50, .bg-primary-50 *, .hrm-front-room-filter:not(.border-primary-500)) {
  color: var(--hrm-brand-primary) !important;
  -webkit-text-fill-color: var(--hrm-brand-primary);
}

.hrm-public-booking :where(.text-red-500, .text-red-600, .text-red-700),
.hrm-frontend-dashboard :where(.text-red-500, .text-red-600, .text-red-700, .hrm-front-delete-room, .hrm-front-delete-room *) {
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c;
}

.hrm-public-booking :where(.bg-red-50),
.hrm-frontend-dashboard :where(.bg-red-50, .hrm-front-delete-room) {
  background-color: #fef2f2 !important;
}

.hrm-public-booking :where(.text-white, .text-white\/80, .bg-primary-500, .bg-primary-500 *, .hrm-brand-button, .hrm-brand-button *, .hrm-view-room, .hrm-view-room *, .hrm-pay-button, .hrm-pay-button *, .hrm-gallery-open, .hrm-gallery-open *, .hrm-gallery-next, .hrm-gallery-next *),
.hrm-frontend-dashboard :where(.text-white, .text-white\/80, .bg-primary-500, .bg-primary-500 *, .hrm-brand-button, .hrm-brand-button *, .hrm-front-save-room-price, .hrm-front-save-room-price *, .hrm-front-switch-booking-room, .hrm-front-switch-booking-room *, .hrm-front-room-filter.border-primary-500, .hrm-front-room-filter.border-primary-500 *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.hrm-public-booking :where(code, pre),
.hrm-frontend-dashboard :where(code, pre) {
  color: #241232 !important;
  background: color-mix(in srgb, var(--hrm-brand-primary) 12%, #ffffff 88%) !important;
  border-radius: 8px;
}

.hrm-public-booking :where(input[type="date"], input[type="number"], input[type="text"], input[type="tel"], input[type="email"], textarea, select),
.hrm-frontend-dashboard :where(input[type="date"], input[type="number"], input[type="text"], input[type="tel"], input[type="email"], input[type="color"], textarea, select) {
  min-height: 42px;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
  background-color: #ffffff !important;
}

.hrm-public-booking :where(table, th, td),
.hrm-frontend-dashboard :where(table, th, td) {
  color: inherit;
}

.hrm-public-booking :where(thead tr, .bg-surface-100),
.hrm-frontend-dashboard :where(thead tr, .bg-surface-100) {
  background-color: #f8fafc !important;
}

.hrm-public-booking :where(.hrm-payment-option, .hrm-payment-option *),
.hrm-public-booking :where(.hrm-summary-breakdown, .hrm-summary-breakdown *),
.hrm-public-booking :where(.hrm-bank-transfer-panel, .hrm-bank-transfer-panel *) {
  color: #475569 !important;
  -webkit-text-fill-color: #475569;
}

.hrm-public-booking :where(.hrm-payment-option.text-slate-900, .hrm-payment-option.text-slate-900 *, .hrm-summary-total, .hrm-summary-room, .hrm-summary-nights, .hrm-summary-subtotal, .hrm-summary-vat),
.hrm-frontend-dashboard :where(.font-bold, .font-semibold) {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
}

.hrm-public-booking :where(.bg-primary-500, .bg-primary-500 *, .hrm-brand-button, .hrm-brand-button *, .hrm-view-room, .hrm-view-room *, .hrm-pay-button, .hrm-pay-button *, .hrm-gallery-open, .hrm-gallery-open *, .hrm-gallery-next, .hrm-gallery-next *),
.hrm-frontend-dashboard :where(.bg-primary-500, .bg-primary-500 *, .hrm-brand-button, .hrm-brand-button *, .hrm-front-save-room-price, .hrm-front-save-room-price *, .hrm-front-switch-booking-room, .hrm-front-switch-booking-room *, .hrm-front-room-filter.border-primary-500, .hrm-front-room-filter.border-primary-500 *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

@media (max-width: 430px) {
  .hrm-public-booking :where(.hrm-booking-hero, .hrm-checkout-form, .hrm-dashboard-card, .hrm-room-card),
  .hrm-frontend-dashboard :where(.hrm-dashboard-card) {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* =============================================================
   FINAL FORM INPUT READABILITY PASS
   Keeps typed values, placeholders, labels, select values, icons,
   and buttons readable even when the host theme is dark.
   ============================================================= */
.hrm-public-booking :where(label, label span, legend),
.hrm-frontend-dashboard :where(label, label span, legend) {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.hrm-public-booking :where(input[type="date"], input[type="number"], input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="search"], textarea, select),
.hrm-frontend-dashboard :where(input[type="date"], input[type="number"], input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="search"], input[type="color"], textarea, select) {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: var(--hrm-brand-primary);
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.hrm-public-booking :where(input, textarea)::placeholder,
.hrm-frontend-dashboard :where(input, textarea)::placeholder {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  opacity: 0.68 !important;
}

.hrm-public-booking :where(select option),
.hrm-frontend-dashboard :where(select option) {
  color: #0f172a !important;
  background: #ffffff !important;
}

.hrm-public-booking :where(input, textarea, select):focus,
.hrm-frontend-dashboard :where(input, textarea, select):focus {
  border-color: var(--hrm-brand-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hrm-brand-primary) 18%, transparent) !important;
  outline: none !important;
}

.hrm-public-booking :where(input, textarea, select):-webkit-autofill,
.hrm-frontend-dashboard :where(input, textarea, select):-webkit-autofill {
  -webkit-text-fill-color: #0f172a !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

.hrm-public-booking :where(button, .hrm-brand-button, .hrm-view-room, .hrm-pay-button, .hrm-gallery-open, .hrm-gallery-next),
.hrm-frontend-dashboard :where(button, .hrm-brand-button, .hrm-front-save-room-price, .hrm-front-switch-booking-room) {
  text-shadow: none !important;
}

.hrm-public-booking :where(.bg-primary-500, .bg-primary-500 *, .hrm-brand-button, .hrm-brand-button *, .hrm-view-room, .hrm-view-room *, .hrm-pay-button, .hrm-pay-button *),
.hrm-frontend-dashboard :where(.bg-primary-500, .bg-primary-500 *, .hrm-brand-button, .hrm-brand-button *, .hrm-front-save-room-price, .hrm-front-save-room-price *, .hrm-front-switch-booking-room, .hrm-front-switch-booking-room *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}