/**
 * Prayer Times App Stylesheet
 * Optimized for production
 */
 
/* iOS system font stack for SF fonts */
@font-face {
  font-family: "SF Pro Text";
  src: local("SF Pro Text"), local(".SFProText-Regular");
  font-weight: normal;
}

@font-face {
  font-family: "SF Pro Display";
  src: local("SF Pro Display"), local(".SFProDisplay-Regular");
  font-weight: normal;
}

@font-face {
  font-family: "SF Arabic";
  src: local("SF Pro Text"), local(".SFProText-Regular");
  font-weight: normal;
}

:root {
  /* Theme Colors */
  --ios-bg-dark: #000000;
  --ios-bg-card: #000000;
  --ios-text-primary: #ffffff;
  --ios-text-secondary: #8d8d8d;
  --ios-orange: #FF9500;
  --ios-red: #FF3B30;
  --ios-border: #333333;
  --ios-control-bg: rgba(120, 120, 128, 0.16);
  --ios-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ios-radius: 0.5rem;
  --ios-mosque-bg: #4A4A4A;
  --ios-accent: #A2AAAD;
  
  /* Font Sizes */
  --city-name-size: 2.5rem;
  --time-display-size: 5rem;
  --period-size: 1.75rem;
  --label-size: 1.125rem;
  --title-size: 2.5rem;
  --subtitle-size: 1.25rem;
  
  /* Typography */
  --ios-font-primary: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ios-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ios-font-arabic: "SF Arabic", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ios-letter-spacing-tight: -0.024em;
  --ios-letter-spacing-display: -0.015em;
}

/* Base Layout */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  font-family: var(--ios-font-primary);
  background-color: var(--ios-bg-dark);
  color: var(--ios-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  font-kerning: normal;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: -webkit-fill-available;
}

/* RTL Support */
.rtl {
  direction: rtl;
  text-align: right;
}

.rtl .ml-1 {
  margin-left: 0;
  margin-right: 0.25rem;
}

.rtl .ml-2 {
  margin-left: 0;
  margin-right: 0.5rem;
}

/* Main Container */
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--ios-bg-card);
  position: relative;
  max-height: 100%;
}

/* Add safe area insets for modern devices */
@supports (padding: max(0px)) {
  .container {
    padding-top: max(0px, env(safe-area-inset-top));
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

#root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

/* Prayer Card */
.prayer-card {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Mosque Background Icon */
.prayer-card::after {
  content: "";
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 200px;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%233D4758' d='M400 0c5 0 9.8 2.4 12.8 6.4c34.7 46.3 78.1 74.9 133.5 111.5c0 0 0 0 0 0s0 0 0 0c5.2 3.4 10.5 7 16 10.6c28.9 19.2 45.7 51.7 45.7 86.1c0 28.6-11.3 54.5-29.8 73.4l-356.4 0c-18.4-19-29.8-44.9-29.8-73.4c0-34.4 16.7-66.9 45.7-86.1c5.4-3.6 10.8-7.1 16-10.6c0 0 0 0 0 0s0 0 0 0C309.1 81.3 352.5 52.7 387.2 6.4c3-4 7.8-6.4 12.8-6.4zM288 512l0-72c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 72-48 0c-17.7 0-32-14.3-32-32l0-128c0-17.7 14.3-32 32-32l416 0c17.7 0 32 14.3 32 32l0 128c0 17.7-14.3 32-32 32l-48 0 0-72c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 72-64 0 0-58c0-19-8.4-37-23-49.2L400 384l-25 20.8C360.4 417 352 435 352 454l0 58-64 0zM70.4 5.2c5.7-4.3 13.5-4.3 19.2 0l16 12C139.8 42.9 160 83.2 160 126l0 2L0 128l0-2C0 83.2 20.2 42.9 54.4 17.2l16-12zM0 160l160 0 0 136.6c-19.1 11.1-32 31.7-32 55.4l0 128c0 9.6 2.1 18.6 5.8 26.8c-6.6 3.4-14 5.2-21.8 5.2l-64 0c-26.5 0-48-21.5-48-48L0 176l0-16z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}

/* Header Styles */
.card-header {
  padding: 0.75rem 1.5rem 0.25rem;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  direction: ltr;
  flex-shrink: 0;
}

.rtl .header-left {
  order: 0;
}

.rtl .globe-btn {
  order: 1;
}

.header-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.city-name {
  color: var(--ios-accent);
  font-size: var(--subtitle-size);
  font-weight: 300;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--ios-font-display);
  letter-spacing: -0.01em;
}

.rtl .city-name {
  margin-right: 0;
  margin-left: auto;
  text-align: right;
  padding-right: 0;
}

.globe-btn {
  color: var(--ios-accent);
  font-size: 1rem;
  font-weight: 400;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  color: var(--ios-accent);
  width: 20px;
  height: 20px;
  opacity: 0.9;
}

/* Title and Date Container */
.title-date-container {
  display: flex;
  flex-direction: row;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin: 0.125rem 0 0.25rem;
  justify-content: space-between;
  align-items: baseline;
  flex-shrink: 0;
}

.rtl .title-date-container {
  text-align: right !important;
}

.card-title {
  font-family: var(--ios-font-display);
  font-size: var(--title-size);
  font-weight: 500;
  letter-spacing: var(--ios-letter-spacing-display);
  margin: 0;
}

.date-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.rtl .date-container {
  align-items: flex-end !important;
  text-align: right !important;
}

.date-display {
  font-family: var(--ios-font-primary);
  font-size: var(--subtitle-size);
  color: var(--ios-text-secondary);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-top: 0.25rem;
  line-height: 1.3;
}

.hijri-date {
  font-family: var(--ios-font-primary);
  font-size: var(--subtitle-size);
  color: var(--ios-text-secondary);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-top: 0.125rem;
  line-height: 1.3;
}

/* Prayer List */
.prayer-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  height: 100%;
}

/* Add horizontal lines before Fajr and after Isha */
.prayer-list::before, .prayer-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--ios-border);
}

.prayer-list::before {
  top: 0;
}

.prayer-list::after {
  bottom: 0;
}

.prayer-item {
  border-bottom: 1px solid var(--ios-border);
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.prayer-item:last-child {
  border-bottom: none;
}

.prayer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 1.5rem;
  position: relative;
  z-index: 1;
  height: 100%;
}

.rtl .prayer-content {
  padding-left: 1.0rem;
  padding-right: 1.5rem;
}

.prayer-left {
  display: flex;
  flex-direction: column;
}

.rtl .prayer-left {
  flex: 1;
  max-width: 60%;
}

.prayer-name {
  font-family: var(--ios-font-display);
  font-size: var(--city-name-size);
  font-weight: 300;
  letter-spacing: var(--ios-letter-spacing-display);
  display: flex;
  align-items: center;
  margin-bottom: 0.125rem;
}

.rtl .prayer-name {
  font-family: var(--ios-font-arabic);
  letter-spacing: 0;
  justify-content: flex-start;
  width: 100%;
  margin-right: 0;
}

.rtl .prayer-item {
  text-align: right;
}

.prayer-info {
  font-family: var(--ios-font-primary);
  font-size: var(--label-size);
  line-height: 1.25;
  display: flex;
  align-items: center;
  font-weight: 300;
  color: var(--ios-text-secondary);
  letter-spacing: -0.01em;
  flex-wrap: wrap;
  width: 100%;
}

.rtl .prayer-info {
  font-family: var(--ios-font-arabic);
}

.countdown-text {
  margin-right: 0.25rem;
}

.rtl .countdown-text {
  margin-right: 0;
  margin-left: 0.25rem;
}

.prayer-time {
  font-family: var(--ios-font-display);
  font-size: var(--time-display-size);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ios-letter-spacing-tight);
  display: flex;
  align-items: baseline;
}

.rtl .prayer-time {
  margin-right: 0;
  margin-left: -15px;
  justify-content: flex-end;
}

.time-period {
  font-family: var(--ios-font-display);
  font-size: var(--period-size);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-left: 0.1rem;
  min-width: 2.5rem;
  text-align: left;
}

.rtl .time-period {
  margin-left: 0;
  margin-right: 0.1rem;
  text-align: right;
}

/* Text Color Classes */
.text-white {
  color: var(--ios-text-primary);
}

.text-gray-500 {
  color: var(--ios-text-secondary);
}

.text-amber-400 {
  color: var(--ios-orange);
}

.text-red-500 {
  color: var(--ios-red);
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

/* Animations */
@keyframes fade-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

.fade-pulse {
  animation: fade-pulse 2s ease-in-out infinite;
}

/* Loading Animation */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--ios-accent);
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Error Popup */
.error-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  max-width: 360px;
  background-color: #1C1C1E;
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.error-header {
  padding: 18px 16px 10px;
  text-align: center;
  border-bottom: 1px solid #333;
}

.error-title {
  font-weight: 600;
  font-size: 17px;
  margin: 0;
}

.error-body {
  padding: 16px;
  text-align: center;
}

.error-message {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: #ddd;
}

.error-details {
  font-size: 12px;
  color: #999;
  margin-bottom: 12px;
  padding: 8px;
  background-color: #2C2C2E;
  border-radius: 8px;
  word-break: break-word;
}

.error-buttons {
  display: flex;
  border-top: 1px solid #333;
}

.error-button {
  flex: 1;
  padding: 12px;
  font-size: 17px;
  font-weight: 500;
  background: none;
  border: none;
  color: var(--ios-orange);
  cursor: pointer;
  text-align: center;
}

.error-button.primary {
  color: var(--ios-orange);
}

.error-button.secondary {
  color: #999;
  border-right: 1px solid #333;
}

.error-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

/* Media Query for Smaller Screens */
@media (max-width: 639px) {
  .title-date-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .card-title {
    font-size: 2rem;
    padding-left: 0;
    margin-bottom: 0.25rem;
  }
  
  .date-container {
    margin-top: 0;
    align-items: flex-start;
    padding-left: 0;
  }
  
  .rtl .title-date-container {
    text-align: right !important;
    align-items: flex-end !important;
  }
  
  .rtl .date-container {
    margin-left: auto !important;
    margin-right: 0 !important;
    align-items: flex-end !important;
    text-align: right !important;
    align-self: flex-end !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
  }
  
  .rtl .date-display, 
  .rtl .hijri-date {
    width: 100% !important;
    text-align: right !important;
  }
  
  .rtl .card-title {
    text-align: right !important;
    padding-right: 0 !important;
    width: 100% !important;
  }
}

/* Mobile-specific Adjustments */
@media screen and (max-width: 767px) {
  :root {
    --city-name-size: 1.75rem;
    --time-display-size: 3.25rem;
    --period-size: 1.125rem;
    --label-size: 0.8125rem;
    --title-size: 1.75rem;
    --subtitle-size: 0.9375rem;
  }
  
  .card-header {
    padding-top: 0.5rem;
    padding-bottom: 0.125rem;
  }
  
  .title-date-container {
    margin: 0 0 0.125rem;
  }
  
  .prayer-list {
    justify-content: space-between;
    padding: 0;
  }
  
  .prayer-content {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }
  
  .prayer-name {
    margin-bottom: 0;
  }
  
  .prayer-card::after {
    width: 80px;
    height: 80px;
    bottom: 0.25rem;
    right: 0.25rem;
    opacity: 0.15;
  }
  
  .prayer-card {
    transform: scale(0.95);
    transform-origin: center top;
  }
  
  .rtl .prayer-time {
    margin-left: -12px;
  }
  
  .rtl .title-date-container {
    text-align: right !important;
    flex-direction: column !important;
  }
  
  .rtl .date-container {
    margin-left: auto !important;
    margin-right: 0 !important;
    align-items: flex-end !important;
    text-align: right !important;
    align-self: flex-end !important;
    width: 100% !important;
  }
  
  .rtl .date-display, 
  .rtl .hijri-date {
    text-align: right !important;
    width: 100% !important;
  }
  
  .card-header,
  .title-date-container,
  .prayer-content {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Additional Size Reduction for Very Small Screens */
@media (max-height: 700px) {
  :root {
    --city-name-size: 1.875rem;
    --time-display-size: 3.75rem;
    --period-size: 1.5rem;
    --label-size: 0.9375rem;
    --title-size: 2rem;
    --subtitle-size: 1.125rem;
  }
  
  .prayer-name {
    margin-bottom: 0;
  }
  
  .card-header {
    padding: 0.75rem 1.5rem 0.25rem;
  }
  
  .prayer-content {
    padding: 0.25rem 1.5rem;
  }
  
  .title-date-container {
    margin: 0.125rem 0 0.5rem;
  }
  
  .rtl .date-container {
    align-items: flex-end !important;
    text-align: right;
  }
}

/* Final Viewport Height Adjustment */
@media screen and (max-height: 650px) {
  :root {
    --city-name-size: 1.5rem;
    --time-display-size: 2.75rem;
    --period-size: 1rem;
    --label-size: 0.75rem;
    --title-size: 1.5rem;
    --subtitle-size: 0.875rem;
  }
  
  .prayer-content {
    padding: 0 1rem;
  }
  
  .date-display, .hijri-date {
    font-size: 0.75rem;
  }
  
  .card-header {
    padding-top: 0.375rem;
    padding-bottom: 0;
  }
  
  .title-date-container {
    margin: 0;
  }
  
  .rtl .date-container {
    align-items: flex-end !important;
    text-align: right;
  }
}

/* Desktop/Larger Screen Optimizations */
@media screen and (min-width: 768px) {
  .prayer-card {
    transform: none;
  }
  
  .prayer-content {
    padding: 0.5rem 1.5rem;
  }
  
  @media (min-height: 700px) {
    .prayer-content {
      padding: 0.625rem 1.5rem;
    }
  }
  
  @media (min-height: 800px) {
    .prayer-content {
      padding: 0.75rem 1.5rem;
    }
    
    :root {
      --city-name-size: 2.75rem;
      --time-display-size: 5.5rem;
    }
  }
}

/* Very Small Mobile Screens */
@media screen and (max-width: 375px) {
  .prayer-content {
    padding: 0.0625rem 1rem;
  }
  
  .prayer-name {
    font-size: 1.5rem;
  }
  
  .prayer-time {
    font-size: 2.75rem;
  }
  
  .prayer-card {
    transform: scale(0.9);
  }
  
  .rtl .prayer-content {
    padding-left: 0.75rem;
    padding-right: 1.25rem;
  }
  
  .rtl .prayer-time {
    margin-left: -8px;
    font-size: calc(var(--time-display-size) - 0.25rem);
  }
  
  .rtl .prayer-left {
    max-width: 55%;
  }
  
  .rtl .title-date-container {
    display: flex !important;
    flex-direction: column !important;
    text-align: right !important;
  }
  
  .rtl .date-container {
    margin-left: auto !important;
    margin-right: 0 !important;
    align-items: flex-end !important;
    text-align: right !important;
    align-self: flex-end !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .rtl .date-display, 
  .rtl .hijri-date {
    text-align: right !important;
    direction: rtl !important;
    width: 100% !important;
  }
  
  .rtl .card-title {
    text-align: right !important;
    width: 100% !important;
  }
}

/* iOS-specific Fixes */
@supports (-webkit-touch-callout: none) {
  html {
    height: -webkit-fill-available;
  }
  
  body {
    min-height: -webkit-fill-available;
    height: -webkit-fill-available;
  }
  
  .container {
    height: -webkit-fill-available;
  }
}