/* =====================================================================
   تصليحات — نظام تصميم بأسلوب iOS لموقع العميل
   (كل تنسيقات التطبيق مُنطاقة تحت .app-shell؛ لوحة الإدارة تبقى كما هي)
   ===================================================================== */
:root{
  --brand:#007AFF; --brand-2:#34C7B5; --brand-press:#0062CC;
  --ios-bg:#F2F2F7; --card:#fff; --label:#1C1C1E; --secondary:#8E8E93;
  --sep:rgba(60,60,67,.14); --green:#34C759; --red:#FF3B30;
  --radius:20px; --radius-sm:14px; --tabbar-h:64px;
}
*{ -webkit-tap-highlight-color:transparent; }
body{ font-family:-apple-system,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Tahoma,sans-serif; background:#f6f8fb; }

/* ============ الهيكل العام (موقع العميل) ============ */
.app-shell{ background:var(--ios-bg); color:var(--label); margin:0; -webkit-font-smoothing:antialiased; }
.app-shell .container{ max-width:720px; }
.app-shell .app-main{ padding:16px 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px); }
.app-shell h4{ font-weight:800; letter-spacing:-.02em; font-size:1.3rem; }
.app-shell h3{ font-weight:800; letter-spacing:-.02em; }
.app-shell a{ -webkit-touch-callout:none; }

/* ============ شريط علوي شفاف (Blur) ============ */
.ios-topbar{ position:sticky; top:0; z-index:1020; padding-top:env(safe-area-inset-top);
  background:rgba(242,242,247,.82); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep); }
.ios-topbar-inner{ max-width:720px; margin:0 auto; height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.ios-brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--label); }
.ios-brand img{ width:30px; height:30px; object-fit:contain; }
.ios-brand span{ font-weight:800; font-size:1.18rem; letter-spacing:-.02em; }
.ios-topbar-action{ color:var(--brand); display:flex; }
.ios-topbar-login{ color:var(--brand); font-weight:600; text-decoration:none; font-size:1.02rem; }

/* ============ بطاقات ============ */
.app-shell .card{ border:0; border-radius:var(--radius); background:var(--card);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 26px rgba(0,0,0,.05); overflow:hidden; }

/* ============ الهيرو كبطاقة متدرّجة ============ */
.app-shell .hero{ margin:4px 16px 20px; padding:22px 20px!important; border-radius:24px;
  background:linear-gradient(145deg,#0A84FF,#34C7B5); color:#fff;
  box-shadow:0 14px 34px rgba(0,122,255,.26); }
.app-shell .hero h1{ font-weight:800; letter-spacing:-.03em; font-size:1.36rem; line-height:1.3; margin-bottom:.5rem!important; }
.app-shell .hero .lead{ opacity:.95; font-size:.96rem; margin-bottom:1rem!important; }
.app-shell .hero .form-control{ background:rgba(255,255,255,.96); border:0; }
.app-shell .hero .btn-light{ color:var(--brand); font-weight:700; }
.hero-search{ display:flex; gap:.5rem; max-width:440px; margin:0 auto; }
.hero-search .form-control{ flex:1; min-width:0; border-radius:14px; }
.hero-search .btn{ border-radius:14px; padding-inline:1.2rem; white-space:nowrap; }

/* ============ أزرار بأسلوب iOS ============ */
.app-shell .btn{ border-radius:13px; font-weight:600; padding:.7rem 1.1rem; border:0; transition:transform .12s, background .15s; }
.app-shell .btn:active{ transform:scale(.97); }
.app-shell .btn-primary{ background:var(--brand); color:#fff; }
.app-shell .btn-primary:hover{ background:var(--brand-press); }
.app-shell .btn-success{ background:var(--green); color:#fff; }
.app-shell .btn-lg{ padding:.95rem 1.2rem; font-size:1.05rem; border-radius:16px; }
.app-shell .btn-sm{ border-radius:10px; padding:.46rem .8rem; font-size:.86rem; }
.app-shell .btn-outline-primary{ border:1.5px solid var(--brand); color:var(--brand); background:transparent; }
.app-shell .btn-outline-primary:hover{ background:var(--brand); color:#fff; }
.app-shell .btn-link{ color:var(--brand); text-decoration:none; font-weight:600; }

/* ============ حقول الإدخال ============ */
.app-shell .form-control,.app-shell .form-select{ border-radius:13px; border:1px solid var(--sep);
  background:#fff; padding:.75rem .9rem; font-size:1rem; color:var(--label); }
.app-shell .form-control:focus,.app-shell .form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,122,255,.15); }
.app-shell .form-label{ font-weight:600; font-size:.9rem; color:#3a3a3c; margin-bottom:.35rem; }
.app-shell .form-text{ color:var(--secondary); }

/* ============ شارات / رقائق ============ */
.app-shell .badge{ border-radius:999px; font-weight:600; padding:.42em .72em; font-size:.76em; }
.app-shell .badge.bg-primary{ background:var(--brand)!important; }
.app-shell .badge.bg-success{ background:rgba(52,199,89,.16)!important; color:#1f8f3b!important; }
.app-shell .badge.bg-info{ background:rgba(0,122,255,.12)!important; color:var(--brand)!important; }
.app-shell .badge.bg-secondary{ background:rgba(120,120,128,.15)!important; color:#6b6b70!important; }
.app-shell .badge.bg-light{ background:rgba(120,120,128,.12)!important; color:#48484a!important; }
.app-shell .badge.bg-warning{ background:rgba(255,149,0,.16)!important; color:#b25e00!important; }

/* ============ بطاقات التصنيفات/الخدمات/الباقات ============ */
.category-card,.service-card,.package-card{ transition:transform .14s, box-shadow .14s; }
.app-shell .category-card,.app-shell .service-card{ border:0; }
.category-card:active,.service-card:active,.package-card:active{ transform:scale(.98); }
.cat-icon{ width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:rgba(0,122,255,.10);color:var(--brand);font-size:24px;margin:0 auto 8px; }
.card-service-image{display:block;width:100%;height:120px;object-fit:cover;}
.service-detail-image{width:100%;height:180px;object-fit:cover;border-radius:18px;}

/* ===== شبكة التصنيفات المدمجة (أيقونات بأسلوب iOS) ===== */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cat-tile{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  background:#fff; border-radius:18px; padding:14px 6px 12px; text-decoration:none; color:var(--label);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px rgba(0,0,0,.05); transition:transform .14s; }
.cat-tile:active{ transform:scale(.96); }
.cat-thumb{ width:60px; height:60px; border-radius:16px; object-fit:contain; background:#f1f6ff; padding:5px; flex:none; }
.cat-emoji{ width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(0,122,255,.10);color:var(--brand);font-size:26px;flex:none; }
.cat-name{ font-weight:600; font-size:.8rem; line-height:1.25; letter-spacing:-.01em; }

/* ===== قائمة الخدمات المدمجة (صف لكل خدمة) ===== */
.svc-list{ display:flex; flex-direction:column; gap:10px; }
.svc-row{ display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px; padding:10px 12px;
  text-decoration:none; color:var(--label); box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px rgba(0,0,0,.05); transition:transform .14s; }
.svc-row:active{ transform:scale(.98); }
.svc-thumb{ width:56px; height:56px; border-radius:14px; object-fit:cover; flex:none; background:#f1f6ff; }
.svc-row .m{ flex:1; min-width:0; }
.svc-row .t{ font-weight:600; font-size:.98rem; letter-spacing:-.01em; }
.svc-row .s{ color:var(--secondary); font-size:.82rem; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.svc-row .chev{ color:#c7c7cc; flex:none; }

/* سطر إرشادي صغير تحت عنوان القسم */
.sec-hint{ color:var(--secondary); font-size:.86rem; margin:-4px 2px 12px; }
.app-shell h4.sec{ font-size:1.2rem; margin:24px 2px 10px; }
.package-card{border:0;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 30px rgba(13,40,70,.08)}
.package-label{display:inline-flex;align-self:flex-start;padding:.3rem .66rem;border-radius:99px;background:rgba(52,199,89,.15);color:#1f8f3b;font-size:.74rem;font-weight:700}

/* قائمة iOS مجمّعة (للحساب/العناوين) */
.ios-list{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 26px rgba(0,0,0,.05); }
.ios-list .ios-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.9rem 1rem; border-bottom:.5px solid var(--sep); color:var(--label); text-decoration:none; }
.ios-list .ios-row:last-child{ border-bottom:0; }
.ios-list .ios-row:active{ background:#f2f2f7; }
.ios-chevron{ color:var(--secondary); }

/* ============ لافتات flash ============ */
.ios-banner{ border-radius:14px; padding:.82rem 1rem; margin:14px 0; font-weight:600; font-size:.95rem; }
.ios-banner-ok{ background:rgba(52,199,89,.15); color:#1f8f3b; }
.ios-banner-err{ background:rgba(255,59,48,.12); color:#d70015; }

/* ============ الفوتر ============ */
.app-footer{ text-align:center; color:var(--secondary); padding:10px 0 calc(var(--tabbar-h) + 26px); }
.app-footer-links a{ color:var(--brand); text-decoration:none; font-size:.9rem; margin:0 .25rem; }
.app-footer-links span{ color:var(--sep); }
.app-footer-copy{ font-size:.76rem; margin-top:.45rem; }

/* ============ شريط تبويب سفلي ============ */
.ios-tabbar{ position:fixed; bottom:0; left:0; right:0; z-index:1030; display:flex;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.85); -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px);
  border-top:.5px solid var(--sep); }
.ios-tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--secondary); text-decoration:none; font-size:.66rem; font-weight:600; padding-top:8px; }
.ios-tab span{ line-height:1; }
.ios-tab.active{ color:var(--brand); }
.ios-tab:active{ opacity:.55; }

@media (min-width:860px){ .app-shell .container, .ios-topbar-inner{ max-width:820px; } }

/* ============ مكوّنات iOS للصفحات الداخلية ============ */
.app-shell .ios-title{ font-size:1.9rem; font-weight:800; letter-spacing:-.03em; margin:4px 2px 12px; }
.ios-section-title{ font-size:.82rem; font-weight:700; color:var(--secondary); margin:22px 8px 8px; }
.ios-section-head{ display:flex; align-items:baseline; justify-content:space-between; margin:22px 8px 8px; }
.ios-section-head .t{ font-size:.82rem; font-weight:700; color:var(--secondary); }
.ios-section-head a{ color:var(--brand); font-size:.86rem; text-decoration:none; font-weight:600; }

.ios-list .ios-row-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ios-row-label{ font-weight:600; }
.ios-row-sub{ font-size:.82rem; color:var(--secondary); overflow:hidden; text-overflow:ellipsis; }
.ios-row-trail{ display:flex; align-items:center; gap:.5rem; color:var(--secondary); white-space:nowrap; }
.ios-list .ios-row.danger .ios-row-label{ color:var(--red); }
.ios-list .ios-row.center{ justify-content:center; color:var(--brand); font-weight:600; }

.status-pill{ display:inline-block; padding:.32em .72em; border-radius:999px; font-size:.74rem; font-weight:700; background:rgba(0,122,255,.12); color:var(--brand); }
.status-pill.ok{ background:rgba(52,199,89,.16); color:#1f8f3b; }
.status-pill.bad{ background:rgba(255,59,48,.12); color:#d70015; }
.status-pill.warn{ background:rgba(255,149,0,.16); color:#b25e00; }

.ios-profile{ display:flex; align-items:center; gap:.9rem; padding:2px 6px 10px; }
.ios-avatar{ width:58px; height:58px; border-radius:50%; background:linear-gradient(145deg,#0A84FF,#34C7B5); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; flex:none; }
.ios-profile h2{ font-size:1.3rem; font-weight:800; margin:0; letter-spacing:-.02em; }
.ios-profile .sub{ color:var(--secondary); font-size:.92rem; }

.ios-auth{ max-width:420px; margin:12px auto; padding:0 6px; text-align:center; }
.ios-auth-logo img{ width:66px; height:66px; object-fit:contain; margin:14px auto 6px; }
.ios-auth-title{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; }
.ios-auth-sub{ color:var(--secondary); margin-bottom:18px; }
.ios-fieldset{ background:#fff; border-radius:16px; overflow:hidden; text-align:start; box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 26px rgba(0,0,0,.05); }
.ios-field{ padding:.3rem 1rem .5rem; border-bottom:.5px solid var(--sep); }
.ios-field:last-child{ border-bottom:0; }
.ios-field label{ font-size:.72rem; color:var(--secondary); display:block; margin-top:.4rem; }
.ios-field input{ border:0; width:100%; padding:.3rem 0 .55rem; font-size:1.05rem; background:transparent; outline:none; color:var(--label); }
.ios-otp input{ letter-spacing:.55em; text-align:center; font-size:1.7rem; font-weight:800; padding-inline-start:.55em; }

.ios-timeline{ position:relative; margin:0; padding:0; list-style:none; }
.ios-timeline li{ position:relative; padding:0 26px 16px 0; }
.ios-timeline li::before{ content:""; position:absolute; right:7px; top:15px; bottom:-1px; width:2px; background:var(--sep); }
.ios-timeline li:last-child::before{ display:none; }
.ios-timeline li::after{ content:""; position:absolute; right:3px; top:3px; width:11px; height:11px; border-radius:50%; background:#c7c7cc; border:2px solid #fff; box-shadow:0 0 0 1px var(--sep); }
.ios-timeline li.cur::after{ background:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.ios-tl-title{ font-weight:600; font-size:.95rem; }
.ios-tl-meta{ color:var(--secondary); font-size:.76rem; }

.ios-thumb{ width:84px; height:84px; object-fit:cover; border-radius:12px; display:block; }
.ios-amount{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }

/* =====================================================================
   لوحة الإدارة (تبقى كما هي)
   ===================================================================== */
.brand-lockup{display:flex;align-items:center;gap:.45rem}.brand-lockup img{height:34px;width:34px;object-fit:contain;display:block}.brand-lockup span{color:#fff;font-size:1.25rem;font-weight:800;line-height:1}
.admin-brand{display:flex;align-items:center;gap:.45rem;margin:0 0 1.75rem;color:#fff;text-decoration:none;font-size:1.2rem;font-weight:800}.admin-brand img{width:34px;height:34px;object-fit:contain}
.status-badge{ font-size:.8rem; }
.admin-sidebar{ min-height:100vh; background:#111827; }
.admin-sidebar a{ color:#cbd5e1; text-decoration:none; display:block; padding:.6rem 1rem; border-radius:8px; }
.admin-sidebar a:hover,.admin-sidebar a.active{ background:#1f2937; color:#fff; }
.stat-card{ border-radius:14px; border:none; }