/* ==========================================================================
   AqabaStays — Main Stylesheet (css/style.css)
   ========================================================================== */

/* Base Typography & Smooth Scrolling */
html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bilingual Font Stacks */
html[dir="rtl"] body,
body[data-lang="ar"] {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;
}

html[dir="ltr"] body,
body[data-lang="en"] {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* RTL Icon Flipping */
html[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

html[dir="ltr"] .rtl-flip {
  transform: none;
}

/* Hide Scrollbars cleanly (for gallery strips & mobile carousels) */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Scrollbar for Desktop Tables & Modals */
.scrollbar-thin::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

/* Text Selection Color */
::selection {
  background-color: #1FB8A6;
  color: #ffffff;
}

/* Form Input Defaults & Date Indicators */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

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

/* Tab Panels Visibility */
[data-tab-panel] {
  display: none;
}

[data-tab-panel].is-active {
  display: block;
}

/* Ticket & Card Perforations (Voucher styling) */
.voucher-perforation {
  position: relative;
  border-top: 2px dashed rgba(14, 27, 36, 0.14);
}

.voucher-perforation::before,
.voucher-perforation::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background-color: #F6EFE1;
}

html[dir="rtl"] .voucher-perforation::before { right: -35px; left: auto; }
html[dir="rtl"] .voucher-perforation::after { left: -35px; right: auto; }
html[dir="ltr"] .voucher-perforation::before { left: -35px; right: auto; }
html[dir="ltr"] .voucher-perforation::after { right: -35px; left: auto; }

/* Subtle Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Print Rules (Voucher & Invoices) */
@media print {
  .no-print,
  header,
  footer,
  nav,
  button,
  .mobile-bar {
    display: none !important;
  }

  body, html {
    background: #ffffff !important;
    color: #000000 !important;
  }

  #printArea {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .voucher-card {
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
    break-inside: avoid;
  }

  @page {
    margin: 12mm;
  }
}