/* إلغاء التحديد الأزرق عند الضغط في جميع الصفحات */
        * {
          -webkit-tap-highlight-color: transparent;
          /* للموبايل (Chrome, Safari) */
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          /* زيادة تأكيد للموبايل */
        }

        /* إلغاء الإطار الأزرق (Outline) الذي يظهر عند الضغط بالماوس أو الكيبورد */
        *:focus {
          outline: none !important;
        }

        /* منع اختيار النصوص في الأزرار ليعطي إحساس تطبيق حقيقي */
        button,
        .menu-btn,
        .choice-card,
        .menu-card {
          user-select: none;
          -webkit-user-select: none;
        }

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  --primary:#1A3A5F;
  --secondary:#D4AF37;
  --bg-app:#F0F4F8;
  --card-white:#FFFFFF;
  --text-main:#333333;
  --text-muted:#6C757D;
}
body{background:#E2E8EF;font-family:'Cairo',sans-serif;display:flex;justify-content:center;min-height:100vh;}
.app-container{background:var(--bg-app);width:100%;max-width:414px;min-height:100vh;padding:0 0 100px;position:relative;}

/* ===== HERO HEADER ===== */
.lb-hero{background:var(--primary);padding:20px 20px 60px;position:relative;overflow:hidden;}
.lb-hero::before{content:'';position:absolute;top:-40px;left:-40px;width:160px;height:160px;background:rgba(255,255,255,0.05);border-radius:50%;}
.lb-hero::after{content:'';position:absolute;bottom:-30px;right:-30px;width:120px;height:120px;background:rgba(212,175,55,0.1);border-radius:50%;}
.hero-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.back-btn{background:rgba(255,255,255,0.15);border:none;color:white;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;}
.hero-title{font-size:1.1rem;font-weight:800;color:white;text-align:center;flex:1;}
.share-btn{background:rgba(255,255,255,0.15);border:none;color:white;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:0.9rem;display:flex;align-items:center;justify-content:center;}

/* TABS */
.tabs{display:flex;gap:8px;padding:0 4px;}
.tab-btn{flex:1;background:rgba(255,255,255,0.12);border:none;color:rgba(255,255,255,0.7);padding:8px 4px;border-radius:12px;font-family:'Cairo',sans-serif;font-size:0.72rem;font-weight:700;cursor:pointer;transition:all 0.2s;}
.tab-btn.active{background:var(--secondary);color:white;}

/* PODIUM */
.podium-wrap{background:white;margin:0 16px;border-radius:22px;padding:20px 16px;margin-top:-30px;box-shadow:0 8px 30px rgba(0,0,0,0.12);margin-bottom:12px;position:relative;z-index:2;}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:12px;height:130px;}
.podium-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;}
.podium-avatar{font-size:1.5rem;width:44px;height:44px;border-radius:50%;background:#EEF2F7;display:flex;align-items:center;justify-content:center;border:3px solid #ddd;}
.podium-name{font-size:0.6rem;font-weight:700;color:var(--primary);text-align:center;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.podium-pts{font-size:0.58rem;color:var(--text-muted);}
.podium-block{border-radius:12px 12px 0 0;width:100%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;color:white;}
.rank-1 .podium-avatar{border-color:#D4AF37;background:#FFF8DC;}
.rank-1 .podium-block{background:linear-gradient(to top,#B8860B,#D4AF37);height:70px;}
.rank-2 .podium-avatar{border-color:#94a3b8;}
.rank-2 .podium-block{background:linear-gradient(to top,#64748b,#94a3b8);height:50px;}
.rank-3 .podium-avatar{border-color:#CD7F32;}
.rank-3 .podium-block{background:linear-gradient(to top,#a0522d,#CD7F32);height:38px;}

/* MY RANK CARD */
.my-rank-card{margin:0 16px 12px;background:linear-gradient(135deg,var(--primary),#2a5298);border-radius:18px;padding:14px 16px;display:flex;align-items:center;gap:12px;}
.my-rank-av{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.2);font-size:1.3rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.my-rank-info{flex:1;}
.my-rank-name{font-weight:800;color:white;font-size:0.9rem;}
.my-rank-pts{font-size:0.72rem;color:rgba(255,255,255,0.75);margin-top:1px;}
.my-rank-badge{background:var(--secondary);color:white;padding:4px 12px;border-radius:20px;font-weight:800;font-size:0.85rem;}

/* LIST */
.list-section{padding:0 16px;}
.list-header{font-weight:800;color:var(--primary);font-size:0.85rem;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.rank-row{background:white;border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:12px;margin-bottom:8px;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
.rank-row.me-row{border:2px solid var(--secondary);background:#FFFBEE;}
.rank-num{font-weight:800;color:var(--text-muted);font-size:0.85rem;width:24px;text-align:center;flex-shrink:0;}
.rank-av{width:38px;height:38px;border-radius:50%;background:#EEF2F7;font-size:1.1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rank-name{flex:1;font-weight:700;color:var(--primary);font-size:0.85rem;}
.rank-me-tag{font-size:0.6rem;color:var(--secondary);font-weight:700;display:block;}
.rank-pts{font-weight:800;color:var(--primary);font-size:0.85rem;text-align:left;}
.rank-unit{font-size:0.6rem;color:var(--text-muted);font-weight:400;}

/* COUNTDOWN */
.countdown-card{margin:0 16px 12px;background:white;border-radius:16px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
.countdown-text{font-size:0.75rem;color:var(--text-muted);}
.countdown-val{font-weight:800;color:var(--primary);font-size:0.85rem;}
.disclaimer{margin:0 16px 16px;background:#FFF8E6;border:1px dashed #D4AF37;border-radius:14px;padding:10px 14px;font-size:0.72rem;color:#856404;text-align:center;}

/* BOTTOM NAV */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 414px;
      background: white;
      display: flex;
      justify-content: space-around;
      padding: 12px 0;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.07);
      z-index: 100;
      border-radius: 24px 24px 0 0;
    }
    .nav-item {
      text-decoration: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      color: var(--text-muted);
      font-size: 0.65rem;
      font-weight: 700;
      font-family: 'Cairo', sans-serif;
    }
    .nav-item i { font-size: 1.25rem; }
    .nav-item.active { color: var(--secondary); }


/* ===== LOGIN OVERLAY ===== */
.login-overlay{position:fixed;inset:0;background:rgba(15,30,55,0.85);z-index:300;display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(6px);}
.login-sheet{background:white;width:100%;max-width:414px;border-radius:28px 28px 0 0;padding:28px 24px 44px;animation:slideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.login-sheet-handle{width:40px;height:4px;background:#e0e0e0;border-radius:4px;margin:0 auto 22px;}
.login-sheet-top{display:flex;flex-direction:column;align-items:center;margin-bottom:22px;}
/* تعديل اللوجو ليكون متناسقاً */
.login-logo {
  width: 70px;          /* تكبير الحاوية */
  height: 70px;
  background: white;     /* خلفية بيضاء ليبرز اللوجو */
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* إضافة ظل خفيف لمسة جمالية */
  overflow: hidden;      /* لضمان عدم خروج الصورة عن الحواف */
}

.login-logo img {
  width: 85%;           /* الصورة تأخذ مساحة مناسبة داخل الحاوية */
  height: 85%;
  object-fit: contain;  /* المحافظة على أبعاد الصورة */
}
.login-tagline{font-size:1rem;font-weight:800;color:var(--primary);}
.login-sub{font-size:0.78rem;color:var(--text-muted);margin-top:4px;text-align:center;}

/* Google btn */
.google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;border:1.5px solid #e0e0e0;border-radius:14px;background:white;cursor:pointer;font-family:'Cairo',sans-serif;font-size:0.88rem;font-weight:700;color:#333;margin-bottom:16px;transition:background 0.2s;}
.google-btn:active{background:#f5f5f5;}
.google-icon{width:20px;height:20px;}

/* Divider */
.or-divider{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.or-line{flex:1;height:1px;background:#eee;}
.or-text{font-size:0.72rem;color:var(--text-muted);font-weight:600;}

/* Form */
.login-input{width:100%;padding:12px 16px;border:1.5px solid #e8e8e8;border-radius:14px;font-family:'Cairo',sans-serif;font-size:0.9rem;color:var(--primary);margin-bottom:10px;outline:none;transition:border 0.2s;}
.login-input:focus{border-color:var(--secondary);}
.login-actions{display:flex;gap:10px;margin-top:4px;}
.login-btn-primary{flex:1;padding:13px;background:var(--primary);color:white;border:none;border-radius:14px;font-family:'Cairo',sans-serif;font-size:0.88rem;font-weight:700;cursor:pointer;transition:background 0.2s;}
.login-btn-outline{flex:1;padding:13px;background:white;color:var(--primary);border:1.5px solid var(--primary);border-radius:14px;font-family:'Cairo',sans-serif;font-size:0.88rem;font-weight:700;cursor:pointer;}
.login-error{font-size:0.75rem;color:#e74c3c;text-align:center;margin-top:6px;min-height:18px;}
.guest-link{text-align:center;margin-top:14px;font-size:0.75rem;color:var(--text-muted);cursor:pointer;text-decoration:underline;}

/* Name request modal (for Google users) */
.name-overlay{position:fixed;inset:0;background:rgba(15,30,55,0.85);z-index:400;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.name-overlay.open{display:flex;}
.name-card{background:white;width:90%;max-width:350px;border-radius:22px;padding:28px 22px;text-align:center;}
.name-card h3{font-weight:800;color:var(--primary);font-size:1rem;margin-bottom:8px;}
.name-card p{font-size:0.78rem;color:var(--text-muted);margin-bottom:18px;}

/* 1. تعديل الحاوية الرئيسية فقط */
.app-container {
  width: 100%;
  max-width: 100%; /* إزالة الحد الأقصى عشان تملأ الشاشة */
  margin: 0 auto;
  padding: 20px 4%;
  padding-bottom: 100px;
  box-sizing: border-box;
}

/* 2. تعديل شبكة الأزرار */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
  gap: 15px;
  margin-bottom: 24px;
}

/* 3. الاستعلامات (Media Queries) لضبط المقاسات وزرار الذكاء الاصطناعي */

/* للشاشات الصغيرة جداً */
@media (max-width: 360px) {
  .features-grid {
    grid-template-columns: 1fr; 
  }
  .wide-item {
    grid-column: span 1;
  }
}

/* للشاشات المتوسطة والكبيرة (التابلت والكمبيوتر) */
@media (min-width: 768px) {
  .app-container {
    padding: 30px 8%; 
  }
  
  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  /* زر الذكاء الاصطناعي يأخذ مساحة كارت واحد فقط مثل البقية */
  .wide-item {
    grid-column: span 1; 
  }

  /* ترتيب مواقيت الصلاة في شبكة */
  #prayer-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
  }
  
  .prayer-row {
    margin-bottom: 0; 
  }
  
  .feat-ar { font-size: 1.1rem; }
  .prayer-section-title { font-size: 1.2rem; }
  .guidance-verse { font-size: 1.6rem; }
}

body {
  background: var(--bg-app); /* توحيد لون الخلفية */
  font-family: 'Cairo', sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.app-container {
  background: var(--bg-app);
  width: 100%;
  max-width: 100%; /* إزالة الحد الأقصى لملء الشاشة بالكامل */
  min-height: 100vh;
  padding: 0 0 100px;
  position: relative;
  overflow-x: hidden; /* لمنع أي تمرير أفقي بالخطأ */
}