:root {
  /* Saiz asas besar sedikit supaya tidak perlu zoom */
  --base-size: 16px;
  /* default browser */
  --scale-ratio: 1;
  /* ubah ke 1.25 untuk “bigger mode” */

  /* Font-stack: Inter untuk body, Poppins untuk heading */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Poppins', var(--font-body);
}

/* 2.a Anti-alias paling bersih */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  /* Firefox fallback hint */
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}

/* 2.b Saiz & weight minimum untuk kekal sharp */
html {
  font-size: calc(var(--base-size) * var(--scale-ratio));
  line-height: 1.6;
  /* jangan 1.2 – nampak pecah */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  /* 400 terlalu nipis pada dark bg */
  color: #111827;
  /* hitam pekat → kontras tinggi */
  background-color: #ffffff;
}

/* 2.c Heading – weight sederhana, tidak terlalu tebal */
h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
  font-family: var(--font-heading);
  font-weight: 700;
  /* 800 terlalu tebal → “bercak” */
  line-height: 1.2;
  letter-spacing: -0.01em;
  /* kurangkan “blur” */
}

/* 2.d Jangan biar user pilih text transparan (jagged) */
::selection {
  background-color: #10b981;
  color: #ffffff;
  -webkit-text-stroke: 0;
  /* padam stroke bila select */
}

/* 2.e Scale / hover tanpa blur GPU */
.hover-scale {
  transform: translateZ(0) scale(1.02);
  will-change: transform;
  backface-visibility: hidden;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out forwards;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}

.shadow-premium {
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
}

.shadow-hd {
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.1);
}

.windows-font-fix {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  /* padam shadow halus */
}

/* Auth Background Pattern */
.auth-bg {
  background:
    linear-gradient(rgba(248, 250, 252, 0.92), rgba(248, 250, 252, 0.88)),
    url('https://images.unsplash.com/photo-1564769625905-50e93615e769?auto=format&fit=crop&q=80&w=2500');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
  z-index: 0;
}

.auth-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
}

/* =============================================
   Booking Form: Themed Native Input Controls
   ============================================= */

/* Date Input - calendar icon teal */
input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2300B7AC' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E");
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Select Dropdown - custom teal arrow */
select.booking-select,
.booking-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2300B7AC' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Custom Radio Buttons */
.custom-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  background-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  flex-shrink: 0;
}

.custom-radio:checked {
  border-color: #00B7AC;
  background-color: #00B7AC;
  box-shadow: inset 0 0 0 3px #fff;
}

.custom-radio:hover {
  border-color: #00B7AC;
}

.custom-radio:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 183, 172, 0.2);
}

/* Custom Checkboxes */
.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #cbd5e1;
  border-radius: 0.375rem;
  background-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  flex-shrink: 0;
  position: relative;
}

.custom-checkbox:checked {
  border-color: #00B7AC;
  background-color: #00B7AC;
}

.custom-checkbox:checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}

.custom-checkbox:hover {
  border-color: #00B7AC;
}

.custom-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 183, 172, 0.2);
}
/* =============================================
   React DatePicker Custom Theme Overrides
   ============================================= */
.react-datepicker-wrapper {
  width: 100%;
}

.custom-datepicker-popper {
  z-index: 100 !important;
}

.react-datepicker {
  background-color: #1e293b !important; /* slate-800 */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 1rem !important; /* rounded-2xl */
  font-family: inherit !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important; /* shadow-2xl */
  padding: 0.5rem;
}

.react-datepicker__triangle {
  display: none !important;
}

.react-datepicker__header {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: 0.5rem !important;
}

.react-datepicker__current-month, 
.react-datepicker-time__header, 
.react-datepicker-year-header {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

.react-datepicker__day-name, 
.react-datepicker__day, 
.react-datepicker__time-name {
  color: #cbd5e1 !important; /* slate-300 */
  width: 2.2rem !important;
  line-height: 2.2rem !important;
  margin: 0.166rem !important;
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  transition: all 0.2s;
}

.react-datepicker__day:hover, 
.react-datepicker__month-text:hover, 
.react-datepicker__quarter-text:hover, 
.react-datepicker__year-text:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.react-datepicker__day--selected, 
.react-datepicker__day--in-selecting-range, 
.react-datepicker__day--in-range, 
.react-datepicker__month-text--selected, 
.react-datepicker__month-text--in-selecting-range, 
.react-datepicker__month-text--in-range, 
.react-datepicker__quarter-text--selected, 
.react-datepicker__quarter-text--in-selecting-range, 
.react-datepicker__quarter-text--in-range, 
.react-datepicker__year-text--selected, 
.react-datepicker__year-text--in-selecting-range, 
.react-datepicker__year-text--in-range {
  background-color: #00B7AC !important; /* primary */
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px 0 rgba(0, 183, 172, 0.39);
}

.react-datepicker__day--keyboard-selected, 
.react-datepicker__month-text--keyboard-selected, 
.react-datepicker__quarter-text--keyboard-selected, 
.react-datepicker__year-text--keyboard-selected {
  background-color: rgba(0, 183, 172, 0.2) !important;
  color: #00B7AC !important;
}

.react-datepicker__day--disabled, 
.react-datepicker__month-text--disabled, 
.react-datepicker__quarter-text--disabled, 
.react-datepicker__year-text--disabled {
  color: rgba(255, 255, 255, 0.2) !important;
  cursor: not-allowed !important;
}

.react-datepicker__day--disabled:hover {
  background-color: transparent !important;
}

.react-datepicker__navigation-icon::before {
  border-color: #cbd5e1 !important;
}
.react-datepicker__navigation:hover *::before {
  border-color: #fff !important;
}

/* =============================================
   Dashboard Light Theme (matching EzUmrah home)
   ============================================= */

.dashboard-root {
  background-color: #f8fafc;
  color: #0f172a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dashboard-sidebar {
  background-color: #ffffff;
  border-right: 1px solid #e2e8f0;
  box-shadow: 4px 0 24px -8px rgba(0, 0, 0, 0.06);
}

.dashboard-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid #e2e8f0;
}

.dashboard-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.dashboard-nav-item {
  font-size: 0.8125rem;
  color: #64748b;
}

.dashboard-nav-active {
  background-color: #f0fdfb;
  color: #00B7AC;
  font-weight: 700;
  border: 1px solid #ccfbf1;
}

.dashboard-nav-active .material-symbols-outlined {
  color: #00B7AC !important;
}

.dashboard-scroll::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.dashboard-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.dashboard-scroll::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 20px;
}

.dashboard-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}