/* ============================================
   Shaheen PWA - Arabic Stylesheet
   RTL-specific styles for Arabic language page
   ============================================ */

/* Import Arabic font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

/* ============================================
   RTL BASE STYLES
   ============================================ */

/* Arabic font family */
body {
  font-family: 'Almarai', sans-serif;
}

/* RTL text direction */
html[lang="ar"] {
  direction: rtl;
}

/* ============================================
   RTL TYPOGRAPHY
   ============================================ */

/* Arabic-specific font sizes */
h1 {
  font-size: 32px;
}

p {
  font-size: 19px;
}

/* ============================================
   RTL LAYOUT ADJUSTMENTS
   ============================================ */

/* Mirror language button position for RTL */
.lang-btn {
  left: auto;
  right: 20px;
}

/* ============================================
   RTL RESPONSIVE STYLES
   ============================================ */

/* Small screens (mobile devices) */
@media (max-width: 768px) {
  /* Adjust container width for Arabic layout */
  .container {
    max-width: 374px;
  }
  
  /* Mirror language button position for RTL on mobile */
  .lang-btn {
    left: auto;
    right: 20px;
  }
  
  /* Adjust button width for Arabic text */
  a {
    width: 242px;
    font-size: 20px;
    margin: 10px 0px;
    align-content: center;
  }
}