/* Azal shared font controls.
   Edit this file when you want to change fonts across dashboard, gallery, QR, RSVP and upload pages. */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=Inter:wght@300;400;500;600;700;800;900&family=Cairo:wght@300;400;600;700;800;900&display=swap');

:root {
  --azal-font-display-en: 'Crimson Text', Georgia, serif;
  --azal-font-body-en: 'Inter', Arial, sans-serif;
  --azal-font-ar: 'Cairo', 'Inter', Arial, sans-serif;
}

html:not([dir="rtl"]) body,
html:not([dir="rtl"]) button,
html:not([dir="rtl"]) input,
html:not([dir="rtl"]) textarea,
html:not([dir="rtl"]) select {
  font-family: var(--azal-font-body-en) !important;
}

html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  font-family: var(--azal-font-ar) !important;
}

html:not([dir="rtl"]) h1,
html:not([dir="rtl"]) h2,
html:not([dir="rtl"]) .hero-title,
html:not([dir="rtl"]) .dashboard-title,
html:not([dir="rtl"]) .section-title,
html:not([dir="rtl"]) .modal-title,
html:not([dir="rtl"]) .guest-name,
html:not([dir="rtl"]) .azal-display-font {
  font-family: var(--azal-font-display-en) !important;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .dashboard-title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .modal-title,
html[dir="rtl"] .guest-name,
html[dir="rtl"] .azal-display-font {
  font-family: var(--azal-font-ar) !important;
}


/* Header/brand lockup: keep dashboard, gallery and QR visually consistent. */
html:not([dir="rtl"]) .brand-wordmark strong,
html:not([dir="rtl"]) .brand-wordmark span,
html:not([dir="rtl"]) .brand-title,
html:not([dir="rtl"]) .brand-sub,
html:not([dir="rtl"]) .topbar,
html:not([dir="rtl"]) .topbar button,
html:not([dir="rtl"]) .topbar a {
  font-family: var(--azal-font-body-en) !important;
}

html[dir="rtl"] .brand-wordmark strong,
html[dir="rtl"] .brand-wordmark span,
html[dir="rtl"] .brand-title,
html[dir="rtl"] .brand-sub,
html[dir="rtl"] .topbar,
html[dir="rtl"] .topbar button,
html[dir="rtl"] .topbar a {
  font-family: var(--azal-font-ar) !important;
}

.brand-wordmark strong,
.brand-title {
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

html[dir="rtl"] .brand-wordmark strong,
html[dir="rtl"] .brand-title,
html[dir="rtl"] .brand-wordmark span,
html[dir="rtl"] .brand-sub {
  letter-spacing: 0 !important;
  text-transform: none !important;
}


/* v18 mobile label guard */
@media (max-width: 760px) {
  .ghost-btn,
  .pill-btn,
  .btn,
  .tab {
    white-space: nowrap;
  }
}


/* button-line-height-fix-v18 */
button,
a.btn,
.ghost-btn,
.pill-btn,
.btn,
.tab {
  line-height: 1.35;
}
html[dir="rtl"] button,
html[dir="rtl"] a.btn,
html[dir="rtl"] .ghost-btn,
html[dir="rtl"] .pill-btn,
html[dir="rtl"] .btn,
html[dir="rtl"] .tab {
  line-height: 1.45;
}


/* v19 mobile Arabic/English button clipping fix */
@media (max-width: 760px) {
  .dashboard-view-toggle,
  .response-tools {
    gap: 8px !important;
  }

  .dashboard-view-btn,
  .response-tools .ghost-btn,
  .response-tools .pill-btn,
  .guest-manager-actions .ghost-btn,
  .guest-manager-actions .pill-btn,
  .guest-draft-actions .ghost-btn,
  .guest-draft-actions .pill-btn,
  .small-control {
    min-height: 48px !important;
    height: auto !important;
    padding: 10px 10px 11px !important;
    line-height: 1.45 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html[dir="rtl"] .dashboard-view-btn,
  html[dir="rtl"] .response-tools .ghost-btn,
  html[dir="rtl"] .response-tools .pill-btn,
  html[dir="rtl"] .guest-manager-actions .ghost-btn,
  html[dir="rtl"] .guest-manager-actions .pill-btn,
  html[dir="rtl"] .guest-draft-actions .ghost-btn,
  html[dir="rtl"] .guest-draft-actions .pill-btn,
  html[dir="rtl"] .small-control {
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
    padding-top: 9px !important;
    padding-bottom: 12px !important;
  }

  html:not([dir="rtl"]) .dashboard-view-btn,
  html:not([dir="rtl"]) .response-tools .ghost-btn,
  html:not([dir="rtl"]) .response-tools .pill-btn,
  html:not([dir="rtl"]) .guest-manager-actions .ghost-btn,
  html:not([dir="rtl"]) .guest-manager-actions .pill-btn,
  html:not([dir="rtl"]) .guest-draft-actions .ghost-btn,
  html:not([dir="rtl"]) .guest-draft-actions .pill-btn,
  html:not([dir="rtl"]) .small-control {
    font-size: 0.76rem !important;
    line-height: 1.4 !important;
  }

  .dashboard-view-btn span,
  .response-tools span,
  .guest-manager-actions span,
  .guest-draft-actions span,
  .small-control span {
    display: inline-block !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    line-height: inherit !important;
    padding: 0 1px 1px !important;
  }

  /* Hide non-essential icons on the tight mobile dashboard controls to keep text readable. */
  .dashboard-view-btn i,
  .response-tools i {
    display: none !important;
  }

  .dashboard-view-btn,
  .response-tools .ghost-btn,
  .response-tools .pill-btn {
    gap: 0 !important;
  }
}