/* Eshraq App v1.8.4 — compact rail, stronger visual hierarchy and in-app webview */

@media (min-width:901px){
  #appView.app-shell{padding-right:276px;transition:padding-right .2s ease}
  #appView.app-shell.eshraq-rail-collapsed{padding-right:84px}
  #appView .bottom-nav{width:276px;transition:width .2s ease,padding .2s ease;overflow-y:auto;overflow-x:visible;padding:104px 12px 16px;gap:5px}
  #appView .bottom-nav::before{display:none!important}
  #appView .eshraq-rail-brand{position:absolute;top:12px;right:10px;left:10px;min-height:78px;display:flex;align-items:center;gap:8px;padding:10px 9px;border-radius:16px;background:linear-gradient(135deg,#ffe79a,#d8af49);color:#173a34;box-shadow:0 9px 24px rgba(0,0,0,.13);border:1px solid rgba(255,255,255,.38)}
  #appView .eshraq-rail-brand img{width:44px;height:44px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 3px 5px rgba(0,0,0,.10));content:url('./assets/eshraq-app-logo-email.png')}
  #appView .eshraq-rail-brand strong{font-size:0;font-weight:900;white-space:normal;overflow:visible;line-height:1.25;max-width:none;min-width:0;flex:1}
  #appView .eshraq-rail-brand strong::after{content:'تطبيق إشراق\Aللتنمية المجتمعية';white-space:pre;display:block;font-size:.79rem;font-weight:900;line-height:1.5;text-align:right}
  #appView .eshraq-rail-toggle{margin-inline-start:auto;width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(23,58,52,.16);border-radius:10px;background:rgba(255,255,255,.56);color:#173a34;cursor:pointer;font-weight:900}
  #appView .bottom-nav button{position:relative;overflow:visible;min-height:48px;padding:7px 10px;gap:10px}
  #appView .bottom-nav button span{width:34px;height:34px;border:0!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 5px 14px rgba(0,0,0,.08);font-weight:900}
  #appView .bottom-nav button[data-page="home"] span{background:#fff0bf;color:#7d5b0b}
  #appView .bottom-nav button[data-page="services"] span{background:#d9f4ea;color:#08705f}
  #appView .bottom-nav button[data-page="appointments"] span{background:#dceefa;color:#226b91}
  #appView .bottom-nav button[data-page="requests"] span{background:#eee2f6;color:#6d468a}
  #appView .bottom-nav button[data-eshraq-web*="/team/"] span{background:#ffe5d8;color:#a34e2f}
  #appView .bottom-nav button[data-eshraq-web*="/blog/"] span{background:#e8e4ff;color:#5d53a7}
  #appView .bottom-nav button[data-eshraq-web*="/donate/"] span{background:#ffe1e7;color:#a23856}
  #appView .bottom-nav button[data-page="more"] span{background:#e5f3ef;color:#0b6b5e}
  #appView .bottom-nav button.on{background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.08));border-color:rgba(216,175,73,.52);color:#fff;box-shadow:inset 3px 0 0 rgba(216,175,73,.78)}
  #appView .bottom-nav button.on span{filter:saturate(1.12) brightness(1.02);transform:scale(1.03)}
  #appView .bottom-nav button::after{content:attr(data-tooltip);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(5px);padding:7px 10px;border-radius:9px;background:#173a34;color:#fff;font-size:.78rem;font-weight:750;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .13s ease,transform .13s ease;box-shadow:0 8px 22px rgba(0,0,0,.18);z-index:70}
  #appView .eshraq-rail-collapsed .bottom-nav{width:84px;padding-inline:12px}
  #appView .eshraq-rail-collapsed .eshraq-rail-brand{right:9px;left:9px;justify-content:center;padding:10px 6px}
  #appView .eshraq-rail-collapsed .eshraq-rail-brand img{width:44px;height:44px}
  #appView .eshraq-rail-collapsed .eshraq-rail-brand strong{display:none}
  #appView .eshraq-rail-collapsed .eshraq-rail-toggle{position:absolute;left:-13px;bottom:-11px;width:27px;height:27px;border-radius:50%;background:#fff4c8}
  #appView .eshraq-rail-collapsed .bottom-nav button{justify-content:center;padding-inline:8px}
  #appView .eshraq-rail-collapsed .bottom-nav button small{display:none}
  #appView .eshraq-rail-collapsed .bottom-nav button span{width:38px;height:38px}
  #appView .eshraq-rail-collapsed .bottom-nav button:hover::after,#appView .eshraq-rail-collapsed .bottom-nav button:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}
  #appView .eshraq-rail-collapsed ~ .profile-required-gate{right:106px}
}

/* Reduced density with clearer cards. */
#appView .content{padding-top:16px;padding-bottom:56px}
#appView .page{gap:11px}
#appView .card{padding:14px}
#appView .list-item,#appView .service-card,#appView .journey-card{padding:14px}
#appView .hero{min-height:184px;padding:22px 26px}
#appView .quick-grid,#appView .service-grid,#appView .journey-v140,#appView .quality-grid{gap:10px}
#appView .quick{min-height:100px;padding:12px;border-radius:18px}
#appView .quick span{width:42px;height:42px;border-radius:13px;font-size:1.16rem;font-weight:900;box-shadow:0 5px 14px rgba(23,58,52,.08)}
#appView .menu{gap:8px}

/* Stronger but calm Eshraq color system. */
#appView .quick:nth-child(1){background:linear-gradient(145deg,#f5fffb,#e3f7ef);border-color:#bfe5d7}
#appView .quick:nth-child(1) span{background:#bfeadb;color:#056456}
#appView .quick:nth-child(2){background:linear-gradient(145deg,#fffdf6,#fff1c9);border-color:#ecd58f}
#appView .quick:nth-child(2) span{background:#ffe29a;color:#775506}
#appView .quick:nth-child(3){background:linear-gradient(145deg,#f8fcff,#e3f2fa);border-color:#c5e1ef}
#appView .quick:nth-child(3) span{background:#cce8f6;color:#1e6488}
#appView .quick:nth-child(4){background:linear-gradient(145deg,#fdfaff,#efe3f7);border-color:#dbc7e8}
#appView .quick:nth-child(4) span{background:#dfcaee;color:#694386}
#appView .journey-card:nth-child(1){background:linear-gradient(145deg,#ffffff,#edf9f4);border-color:#cce7dd}
#appView .journey-card:nth-child(2){background:linear-gradient(145deg,#ffffff,#fff6da);border-color:#ead799}
#appView .service-card:nth-child(3n+1){background:linear-gradient(180deg,#fff,#f0faf6);border-top:4px solid #0b806f}
#appView .service-card:nth-child(3n+2){background:linear-gradient(180deg,#fff,#fff8e6);border-top:4px solid #d8af49}
#appView .service-card:nth-child(3n){background:linear-gradient(180deg,#fff,#eef7fc);border-top:4px solid #4e8eb3}

/* More page becomes a real card grid instead of one dense white list. */
#appView #more>.menu.card{grid-template-columns:repeat(2,minmax(0,1fr));padding:0;background:transparent;border:0;box-shadow:none}
#appView #more>.menu button{min-height:64px;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 12px;border:1px solid #d9e5e1;border-radius:16px;background:linear-gradient(145deg,#fff,#f5faf8);box-shadow:0 7px 18px rgba(23,58,52,.045)}
#appView #more>.menu button:nth-child(2n){background:linear-gradient(145deg,#fff,#fff8e8);border-color:#eadfbf}
#appView #more>.menu button:nth-child(3n){background:linear-gradient(145deg,#fff,#eef6fb);border-color:#d1e5ef}
#appView #more>.menu button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(23,58,52,.07);border-color:#b9d9cf}
#appView .menu-main{display:flex;align-items:center;gap:10px;min-width:0}
#appView .menu-main b{font-size:.9rem;line-height:1.4}
#appView .menu-icon{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:#dff4ec;color:#08705f;font-size:1rem;font-weight:900}
#appView #more>.menu button:nth-child(2n) .menu-icon{background:#ffeab0;color:#7b5908}
#appView #more>.menu button:nth-child(3n) .menu-icon{background:#dbeef8;color:#246b8e}
#appView #more>.menu button:nth-child(4n) .menu-icon{background:#eadcf4;color:#704a8c}
#appView .menu-arrow{font-size:1.2rem;color:#70807a}

/* Searchable long-list proxy. The native select remains the source of truth for FormData. */
#profileForm .eshraq-search-select{width:100%;border:1px solid #d4dfdb;border-radius:12px;padding:10px 12px;background:#fff;color:#173a34;outline:none}
#profileForm .eshraq-search-select:focus{border-color:rgba(11,107,94,.65);box-shadow:0 0 0 3px rgba(11,107,94,.10)}
#profileForm .eshraq-native-select-source{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip-path:inset(50%)!important}
#profileForm .eshraq-search-select:invalid,#profileForm.profile-validated .eshraq-search-select:invalid{border-color:#d33b32!important;box-shadow:0 0 0 3px rgba(211,59,50,.10)!important;background:#fff9f8!important}

#profileForm{gap:10px!important}
#profileForm .basic-profile-section{padding:13px!important;border-radius:18px!important;margin:0!important}
#profileForm .basic-profile-section .form-grid{gap:9px!important}
#profileForm .basic-profile-section label{padding:8px 9px!important;border-radius:12px!important;gap:5px!important}
#profileForm .profile-section-head{margin-bottom:9px!important;gap:9px!important}
#profileForm .profile-section-icon{width:34px!important;height:34px!important;border-radius:10px!important}
#profileForm .basic-profile-note{padding:10px 12px!important;border-radius:12px!important}
#profileForm hr{margin:10px 0;border:0;border-top:1px solid rgba(23,58,52,.10)}

#profileForm .eshraq-emergency-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(184,77,55,.20);border-radius:13px;padding:10px 12px;background:linear-gradient(135deg,#fff8ef,#fff);color:#7c432f;cursor:pointer;font-weight:850;text-align:right}
#profileForm .eshraq-emergency-toggle span:first-child{display:flex;align-items:center;gap:8px}
#profileForm .eshraq-emergency-toggle[aria-expanded="true"]{background:linear-gradient(135deg,#fff0e8,#fff8ef);border-color:rgba(184,77,55,.34)}
#profileForm .eshraq-emergency-toggle .toggle-state{font-size:.75rem;color:#8f6c5d;font-weight:700}
#profileForm .eshraq-emergency-source{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none!important}
#profileSharedPhoneSection .eshraq-shared-relation{background:#fff8e8!important;border-color:rgba(216,175,73,.28)!important}
#profileSharedPhoneSection .eshraq-shared-relation-other{background:#fffaf0!important;border-style:dashed!important}
#profileForm .eshraq-phone-hint{margin-top:4px;color:#6d7d77;font-size:.72rem;font-weight:600;line-height:1.55}

/* Eshraq website/resources inside More. */
#appView .eshraq-resources{display:grid;gap:10px;background:linear-gradient(145deg,#fffefb,#f3faf7);border-color:rgba(11,107,94,.16)}
#appView .eshraq-resources-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
#appView .eshraq-resources-head h3{margin:0;color:#0b6b5e}
#appView .eshraq-resources-head p{margin:3px 0 0;color:#697873;font-size:.82rem}
#appView .eshraq-resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#appView .eshraq-resource-link{display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 11px;border:1px solid #d6e5df;border-radius:14px;text-decoration:none;color:#173a34;background:linear-gradient(145deg,#fff,#eef9f5);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
#appView .eshraq-resource-link:nth-child(5n+2){background:linear-gradient(145deg,#fff,#fff6d9);border-color:#ebdba8}
#appView .eshraq-resource-link:nth-child(5n+3){background:linear-gradient(145deg,#fff,#eaf5fb);border-color:#cfe4ef}
#appView .eshraq-resource-link:nth-child(5n+4){background:linear-gradient(145deg,#fff,#f2e9f8);border-color:#dfd0e9}
#appView .eshraq-resource-link:nth-child(5n){background:linear-gradient(145deg,#fff,#fff0e9);border-color:#ead6cb}
#appView .eshraq-resource-link:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(23,58,52,.07);border-color:#9bcfbe}
#appView .eshraq-resource-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;font-size:1.08rem;font-weight:900;box-shadow:0 4px 12px rgba(23,58,52,.06)}
#appView .eshraq-resource-link b{font-size:.88rem;line-height:1.45}
#appView .eshraq-resource-link small{display:block;margin-top:2px;font-size:.71rem}
#appView .eshraq-resource-link:nth-child(5n+1) .eshraq-resource-icon{background:#bfeadb;color:#056456}
#appView .eshraq-resource-link:nth-child(5n+2) .eshraq-resource-icon{background:#ffe29a;color:#775506}
#appView .eshraq-resource-link:nth-child(5n+3) .eshraq-resource-icon{background:#cce8f6;color:#1e6488}
#appView .eshraq-resource-link:nth-child(5n+4) .eshraq-resource-icon{background:#dfcaee;color:#694386}
#appView .eshraq-resource-link:nth-child(5n) .eshraq-resource-icon{background:#ffd7c7;color:#95452e}

/* In-app browser for eshraq.org pages. */
#appView .eshraq-webview{display:grid;gap:12px;padding:14px;background:linear-gradient(145deg,#fffefb,#f5faf8)}
#appView .eshraq-webview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:4px 4px 0}
#appView .eshraq-webview-head h2{margin:4px 0 3px;font-size:1.25rem}
#appView .eshraq-webview-head p{margin:0}
#appView .eshraq-webview-frame-wrap{position:relative;min-height:620px;border:1px solid #d7e3df;border-radius:18px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
#appView .eshraq-webview-frame-wrap iframe{display:block;width:100%;height:clamp(620px,72vh,900px);border:0;background:#fff}
#appView .eshraq-webview-loading{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:linear-gradient(145deg,#fffdf8,#edf7f3);color:#0b6b5e;font-weight:800}
#appView .eshraq-webview-note{margin:0 4px 2px}

@media(max-width:900px){
  #appView .eshraq-rail-brand,#appView .eshraq-rail-toggle{display:none!important}
  #appView .bottom-nav .desktop-nav-extra{display:none!important}
  #appView .content{padding-top:12px}
  #profileForm .basic-profile-section{padding:12px!important}
  #appView .eshraq-webview-frame-wrap{min-height:520px}
  #appView .eshraq-webview-frame-wrap iframe{height:calc(100dvh - 225px);min-height:520px}
}
@media(max-width:680px){
  #appView #more>.menu.card,#appView .eshraq-resource-grid{grid-template-columns:1fr}
  #appView .hero{padding:19px;min-height:auto}
  #appView .quick{min-height:94px}
  #appView .eshraq-webview-head{display:grid;gap:10px}
  #appView .eshraq-webview-head .btn{width:100%;text-align:center}
}