/* Fonts Definition */
@font-face {
  font-family: "Aramesh";
  src: url("/fonts/w_Aramesh.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aramesh-b";
  src: url("/fonts/w_Aramesh Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aramesh-eb";
  src: url("/fonts/w_Aramesh Extra Bold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aramesh-bl";
  src: url("/fonts/w_Aramesh Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: #070D18;
  --foreground: #F5F7FA;
  
  --heyat-gold: #D4AF37;
  --heyat-gold-light: #F3E5AB;
  --heyat-gold-dark: #AA820A;
  
  --heyat-teal: #0D9488;
  --heyat-teal-dark: #115E59;
  --heyat-teal-deep: #0B2B26;

  --heyat-navy: #0F172A;
  --heyat-navy-dark: #070D18;
  --heyat-navy-light: #1E293B;

  --heyat-emerald: #059669;
  --heyat-ruby: #991B1B;

  /* MudBlazor Typography Font Family Overrides */
  --mud-typography-default-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  --mud-typography-body1-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  --mud-typography-body2-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  --mud-typography-button-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  --mud-typography-caption-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  --mud-typography-subtitle1-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  --mud-typography-subtitle2-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  --mud-typography-h1-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  --mud-typography-h2-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  --mud-typography-h3-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  --mud-typography-h4-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  --mud-typography-h5-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  --mud-typography-h6-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  --mud-typography-overline-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
}

* {
  box-sizing: border-box;
  font-feature-settings: "ss01" 1, "locl" 1;
  -webkit-font-feature-settings: "ss01" 1, "locl" 1;
}

html, body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Aramesh", system-ui, -apple-system, sans-serif !important;
  direction: rtl;
  text-align: right;
  overflow-x: clip;
  margin: 0;
  padding: 0;
  font-feature-settings: "ss01" 1, "locl" 1;
  -webkit-font-feature-settings: "ss01" 1, "locl" 1;
}

.english-digits {
  font-family: Consolas, "Roboto Mono", "Segoe UI Mono", Menlo, Monaco, "Courier New", monospace, Arial, sans-serif !important;
  font-feature-settings: "ss01" 0, "locl" 0 !important;
  -webkit-font-feature-settings: "ss01" 0, "locl" 0 !important;
  font-variant-numeric: normal !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  letter-spacing: 0.05em;
}

/* ========================================================
   GLOBAL TYPOGRAPHY & FONT ENFORCEMENT (ARAMESH)
   ======================================================== */
.mud-typography,
.mud-input,
.mud-input-root,
.mud-input-slot,
.mud-input-label,
.mud-input-label-outlined,
.mud-input-label-inputcontrol,
.mud-input-label-filled,
.mud-input-control,
.mud-input-helper-text,
.mud-input-error,
.mud-select,
.mud-select-input,
.mud-combobox,
.mud-combobox-input,
.mud-button,
.mud-button-label,
.mud-chip,
.mud-chip-label,
.mud-dialog,
.mud-dialog-title,
.mud-dialog-content,
.mud-dialog-actions,
.mud-popover,
.mud-popover-provider,
.mud-list,
.mud-list-item,
.mud-list-item-text,
.mud-list-item-icon,
.mud-tabs-tabbar,
.mud-table,
.mud-table-cell,
.mud-switch,
.mud-checkbox,
.mud-tooltip,
.mud-badge,
.mud-picker,
.mud-picker-calendar,
.mud-picker-content {
  font-family: "Aramesh", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ========================================================
   RTL ALIGNMENT & OUTLINED LABEL POSITIONING FOR MUDBLAZOR
   ======================================================== */
[dir="rtl"] .mud-input-label,
.mud-rtl .mud-input-label,
.mud-application-layout-rtl .mud-input-label {
  transform-origin: top right !important;
  text-align: right !important;
  right: 0 !important;
  left: auto !important;
  font-family: "Aramesh", system-ui, sans-serif !important;
}

[dir="rtl"] .mud-input-label-inputcontrol,
.mud-rtl .mud-input-label-inputcontrol,
.mud-application-layout-rtl .mud-input-label-inputcontrol {
  right: 0 !important;
  left: auto !important;
  top: 0 !important;
  transform-origin: top right !important;
  text-align: right !important;
}

/* Outlined labels in normal state (when field is empty and not focused) */
[dir="rtl"] .mud-input-label-outlined,
.mud-rtl .mud-input-label-outlined,
.mud-application-layout-rtl .mud-input-label-outlined {
  transform: translate(-14px, 19px) scale(1) !important;
  transform-origin: top right !important;
  right: 0 !important;
  left: auto !important;
  max-width: calc(100% - 28px) !important;
}

/* Outlined labels with margin-dense */
[dir="rtl"] .mud-input-label-outlined.mud-input-label-margin-dense,
.mud-rtl .mud-input-label-outlined.mud-input-label-margin-dense,
.mud-application-layout-rtl .mud-input-label-outlined.mud-input-label-margin-dense {
  transform: translate(-14px, 12px) scale(1) !important;
}

/* Outlined labels in shrink state (when field has a value, is focused, or autofilled) */
[dir="rtl"] .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
[dir="rtl"] .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
[dir="rtl"] .mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-rtl .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-rtl .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-rtl .mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-application-layout-rtl .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-application-layout-rtl .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-application-layout-rtl .mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
  transform: translate(-14px, -6px) scale(0.75) !important;
  transform-origin: top right !important;
  right: 0 !important;
  left: auto !important;
  background-color: #0F172A !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  z-index: 2 !important;
}

/* Ensure legend in fieldset matches Persian font metrics and right-alignment */
[dir="rtl"] .mud-input.mud-input-outlined .mud-input-outlined-border,
.mud-rtl .mud-input.mud-input-outlined .mud-input-outlined-border,
.mud-application-layout-rtl .mud-input.mud-input-outlined .mud-input-outlined-border {
  text-align: right !important;
}

[dir="rtl"] .mud-input.mud-input-outlined > .mud-input-outlined-border legend,
.mud-rtl .mud-input.mud-input-outlined > .mud-input-outlined-border legend,
.mud-application-layout-rtl .mud-input.mud-input-outlined > .mud-input-outlined-border legend {
  font-family: "Aramesh", system-ui, sans-serif !important;
  text-align: right !important;
  float: right !important;
  margin: 0 10px 0 0 !important;
}

/* Ensure inputs, selects and textareas are right-aligned */
[dir="rtl"] .mud-input-slot,
.mud-rtl .mud-input-slot,
.mud-application-layout-rtl .mud-input-slot {
  text-align: right !important;
  direction: rtl !important;
}

/* Select and ComboBox dropdown alignment in RTL */
[dir="rtl"] .mud-select .mud-select-input,
.mud-rtl .mud-select .mud-select-input,
.mud-combobox .mud-input-slot {
  text-align: right !important;
}

/* Islamic Pattern Gradients */
.islamic-pattern {
  background-color: #070D18;
  background-image: 
    radial-gradient(rgba(212, 175, 55, 0.09) 1px, transparent 1px),
    radial-gradient(rgba(13, 148, 136, 0.06) 1px, #070D18 1px);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
}

.islamic-pattern-light {
  background-color: #0B1320;
  background-image: radial-gradient(rgba(212, 175, 55, 0.12) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.glass-panel-subtle {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 12px 30px -10px rgba(212, 175, 55, 0.2);
}

.gold-gradient-text {
  background: linear-gradient(135deg, #FDF4DC 0%, #D4AF37 50%, #AA820A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-border-gradient {
  border-image: linear-gradient(to bottom, #D4AF37, transparent) 1;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #070D18;
}
::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}
::-webkit-scrollbar-thumb:hover {
  background: #D4AF37;
}

/* Utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Navigation Dropdowns with Pure CSS Hover & Animations */
.nav-dropdown-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: -2px;
  min-width: 13.5rem;
  z-index: 100;
  background-color: #0F172A;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
  padding: 0.5rem 0;
  backdrop-filter: blur(16px);
}

.nav-dropdown-wrapper:hover .nav-dropdown-menu,
.nav-dropdown-wrapper:focus-within .nav-dropdown-menu {
  display: block;
  animation: navDropdownAnim 0.18s ease-out forwards;
}

.nav-dropdown-wrapper:hover .nav-chevron {
  transform: rotate(180deg);
}

.nav-chevron {
  transition: transform 0.2s ease;
}

@keyframes navDropdownAnim {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Swiper Hero Slider Custom Theme */
.hero-swiper {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hero-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
}

.hero-swiper .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.4);
  width: 10px;
  height: 10px;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.hero-swiper .swiper-pagination-bullet-active {
  background: #D4AF37 !important;
  width: 28px !important;
  border-radius: 9999px !important;
  opacity: 1 !important;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #F3E5AB;
  transition: all 0.3s ease;
}

.hero-swiper .swiper-button-next:hover,
.hero-swiper .swiper-button-prev:hover {
  background: rgba(212, 175, 55, 0.25);
  border-color: #D4AF37;
  color: #FFFFFF;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.hero-swiper .swiper-button-next::after,
.hero-swiper .swiper-button-prev::after {
  font-size: 16px;
  font-weight: bold;
}

/* Leaflet Customizations for Heyat */
.leaflet-container {
  font-family: "Aramesh", sans-serif !important;
  background-color: #070D18 !important;
}

#heyat-contact-map .leaflet-pane {
  z-index: 10 !important;
}

#heyat-contact-map .leaflet-top,
#heyat-contact-map .leaflet-bottom {
  z-index: 15 !important;
}

.leaflet-popup-content-wrapper {
  background: #0F172A !important;
  color: #F5F7FA !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
}

.leaflet-popup-tip {
  background: #0F172A !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
}

/* Persian Digits & Phone/Amount Formatting */
.phone-persian-field input,
.phone-persian-field .mud-input-slot {
  direction: ltr !important;
  text-align: right !important;
  letter-spacing: 0.15em !important;
  font-family: "Aramesh-b", "Aramesh", sans-serif !important;
  font-weight: 700 !important;
  padding-right: 20px !important;
  padding-left: 14px !important;
  font-feature-settings: "ss01" 1, "locl" 1 !important;
  -webkit-font-feature-settings: "ss01" 1, "locl" 1 !important;
}

.amount-persian-field input,
.amount-persian-field .mud-input-slot {
  font-family: "Aramesh-b", "Aramesh", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding-right: 18px !important;
  font-feature-settings: "ss01" 1, "locl" 1 !important;
  -webkit-font-feature-settings: "ss01" 1, "locl" 1 !important;
}