@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;600;700;800&family=Noto+Kufi+Arabic:wght@500;600;700;800&display=swap');

:root{
  --green:#20e38a;
  --green-light:#9affc8;
  --green-dark:#063b25;

  --black:#010604;
  --black2:#020b07;

  --card:#061810;
  --card2:#091f15;

  --white:#f2fff8;
  --muted:#829c90;

  --gold:#e0bd55;

  --line:rgba(32,227,138,.30);
}

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

html{
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(18,130,78,.10),
      transparent 30%
    ),
    #010604;

  color:var(--white);

  font-family:
    Cairo,
    Arial,
    sans-serif;

  overflow-x:hidden;
}

button,
input{
  font:inherit;
}

button{
  cursor:pointer;
}

a{
  color:inherit;
  text-decoration:none;
}

.hidden{
  display:none !important;
}


/* =====================================================
   شاشة البداية
===================================================== */

.splash{

  position:fixed;

  inset:0;

  z-index:5000;

  display:grid;

  place-items:center;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(31,227,138,.13),
      transparent 25%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(13,105,65,.16),
      transparent 45%
    ),
    #010604;

  transition:
    opacity .8s ease,
    visibility .8s ease;
}

.splash.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.splash-light{

  position:absolute;

  width:330px;
  height:330px;

  border-radius:50%;

  background:
    rgba(32,227,138,.10);

  filter:blur(70px);

  animation:
    breathing 3s ease-in-out infinite;
}

.splash-content{

  position:relative;

  z-index:2;

  text-align:center;

  display:flex;

  flex-direction:column;

  align-items:center;

  animation:
    splashIn 1.1s ease both;
}

.splash-logo{

  width:205px;
  height:205px;

  border-radius:52px;

  display:grid;
  place-items:center;

  background:
    linear-gradient(
      145deg,
      rgba(12,48,31,.78),
      rgba(2,13,8,.92)
    );

  border:
    1px solid rgba(32,227,138,.55);

  box-shadow:
    0 0 0 10px rgba(32,227,138,.025),
    0 0 45px rgba(32,227,138,.18),
    0 0 100px rgba(32,227,138,.08),
    inset 0 0 35px rgba(32,227,138,.08);

  animation:
    logoPulse 3s ease-in-out infinite;
}

.splash-logo svg{

  width:175px;
  height:175px;

  filter:
    drop-shadow(0 0 8px rgba(32,227,138,.55))
    drop-shadow(0 0 20px rgba(32,227,138,.20));
}

.splash h1{

  margin-top:27px;

  font-family:
    'Noto Kufi Arabic',
    Cairo,
    sans-serif;

  font-size:
    clamp(34px,8vw,55px);

  line-height:1.5;

  font-weight:800;

  color:#f4fff9;
}

.splash-line{

  width:105px;
  height:2px;

  margin:12px 0 15px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--green),
      transparent
    );

  box-shadow:
    0 0 18px rgba(32,227,138,.75);
}

.english-title{

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(16px,4vw,23px);

  letter-spacing:5px;

  color:#d8e8df;
}

.splash p{

  margin-top:10px;

  font-size:13px;

  color:#849f91;
}

.loading-bar{

  width:105px;
  height:2px;

  margin-top:35px;

  overflow:hidden;

  background:
    rgba(255,255,255,.08);

  border-radius:10px;
}

.loading-bar span{

  display:block;

  width:35%;

  height:100%;

  background:var(--green);

  box-shadow:
    0 0 15px var(--green);

  animation:
    loading 1.3s linear infinite;
}


/* =====================================================
   الموقع
===================================================== */

.app{

  position:relative;

  min-height:100vh;

  opacity:1;

  visibility:visible;
}

.ambient{

  position:fixed;

  width:350px;
  height:350px;

  border-radius:50%;

  filter:blur(110px);

  pointer-events:none;

  z-index:-1;
}

.ambient-one{

  right:-190px;
  top:10%;

  background:
    rgba(32,227,138,.08);
}

.ambient-two{

  left:-210px;
  bottom:5%;

  background:
    rgba(14,112,68,.09);
}


/* =====================================================
   زر الرئيسية
===================================================== */

.home-button{

  position:fixed;

  z-index:1500;

  right:18px;
  bottom:20px;

  width:72px;
  height:72px;

  border-radius:50%;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:1px;

  background:
    radial-gradient(
      circle at 35% 30%,
      #b8ff75,
      #55df70 45%,
      #15934d 100%
    );

  color:#00200f;

  font-weight:800;

  box-shadow:
    0 0 30px rgba(32,227,138,.28),
    0 10px 30px rgba(0,0,0,.45);

  border:
    1px solid rgba(168,255,198,.55);

  transition:.25s;
}

.home-button:hover{

  transform:
    translateY(-4px)
    scale(1.03);
}

.home-icon{

  font-size:27px;

  line-height:20px;
}

.home-button span:last-child{

  font-size:9px;
}


/* =====================================================
   الرأس
===================================================== */

.hero{

  padding:
    55px 18px
    50px;

  text-align:center;

  background:
    linear-gradient(
      180deg,
      rgba(4,24,15,.85),
      rgba(1,7,4,.20)
    );

  border-bottom:
    1px solid rgba(32,227,138,.14);
}

.hero-logo{

  display:flex;

  justify-content:center;

  margin-bottom:20px;
}

.logo-ring{

  width:145px;
  height:145px;

  display:grid;
  place-items:center;

  border-radius:40px;

  border:
    1px solid rgba(32,227,138,.48);

  background:
    linear-gradient(
      145deg,
      #0a2518,
      #03100a
    );

  box-shadow:
    0 0 0 8px rgba(32,227,138,.025),
    0 0 40px rgba(32,227,138,.12),
    inset 0 0 30px rgba(32,227,138,.07);
}

.logo-ring svg{

  width:122px;
  height:122px;

  filter:
    drop-shadow(0 0 8px rgba(32,227,138,.40));
}

.hero-small{

  color:var(--green);

  font-size:14px;

  font-weight:800;
}

.hero-text h1{

  margin-top:2px;

  font-family:
    'Noto Kufi Arabic',
    Cairo,
    sans-serif;

  font-size:
    clamp(30px,7vw,48px);

  line-height:1.65;

  font-weight:800;
}

.hero-line{

  width:85px;
  height:2px;

  margin:
    8px auto
    12px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--green),
      transparent
    );

  box-shadow:
    0 0 15px rgba(32,227,138,.6);
}

.hero-text p{

  color:#829d91;

  font-size:13px;

  max-width:650px;

  margin:auto;

  line-height:2;
}


/* =====================================================
   المحتوى
===================================================== */

main{

  width:
    min(
      1050px,
      calc(100% - 28px)
    );

  margin:auto;
}

.intro{

  padding:
    45px 10px
    32px;

  text-align:center;
}

.section-label{

  display:inline-flex;

  padding:
    6px 17px;

  border-radius:999px;

  border:
    1px solid rgba(32,227,138,.28);

  background:
    rgba(32,227,138,.045);

  color:var(--green-light);

  font-size:11px;

  font-weight:700;
}

.intro h2{

  margin:
    14px 0 9px;

  font-size:24px;

  font-weight:800;
}

.intro p{

  max-width:720px;

  margin:auto;

  color:#8da69b;

  font-size:13px;

  line-height:2.1;
}


/* =====================================================
   قسم الصيدليات
===================================================== */

.pharmacy-section{

  padding:
    8px 0
    65px;
}

.section-title{

  display:flex;

  justify-content:space-between;

  align-items:flex-end;

  gap:15px;

  margin:
    0 2px
    18px;
}

.section-title span{

  color:#4d846d;

  font-size:10px;

  font-weight:800;

  letter-spacing:2px;
}

.section-title h2{

  margin-top:2px;

  font-size:27px;

  font-weight:800;
}

.count{

  padding:
    8px 14px;

  border-radius:14px;

  color:var(--green-light);

  background:
    rgba(32,227,138,.05);

  border:
    1px solid rgba(32,227,138,.25);

  font-size:11px;

  white-space:nowrap;
}


/* =====================================================
   البحث
===================================================== */

.search-box{

  height:66px;

  display:flex;

  align-items:center;

  gap:10px;

  padding:
    0 18px;

  border-radius:23px;

  background:
    rgba(4,20,13,.78);

  border:
    1px solid rgba(32,227,138,.28);

  box-shadow:
    inset 0 0 25px rgba(32,227,138,.025);
}

.search-box:focus-within{

  border-color:
    rgba(32,227,138,.65);

  box-shadow:
    0 0 25px rgba(32,227,138,.07),
    inset 0 0 25px rgba(32,227,138,.04);
}

.search-icon{

  color:var(--green-light);

  font-size:31px;

  transform:rotate(-20deg);
}

.search-box input{

  flex:1;

  width:100%;

  border:0;

  outline:0;

  background:transparent;

  color:white;

  font-size:14px;
}

.search-box input::placeholder{

  color:#6f8a7c;
}

.clear-search{

  width:32px;
  height:32px;

  border:0;

  border-radius:50%;

  background:
    rgba(255,255,255,.06);

  color:#b9cbc2;

  font-size:20px;

  display:none;
}


/* =====================================================
   الفلاتر
===================================================== */

.filters{

  display:flex;

  gap:10px;

  overflow-x:auto;

  padding:
    15px 0
    18px;

  scrollbar-width:none;
}

.filters::-webkit-scrollbar{
  display:none;
}

.filter-button{

  flex:
    0 0 auto;

  padding:
    11px 19px;

  border-radius:999px;

  border:
    1px solid rgba(32,227,138,.22);

  background:
    #06140d;

  color:#a7beb4;

  font-size:13px;

  font-weight:800;

  transition:.2s;
}

.filter-button.active{

  background:
    var(--green);

  color:#00190d;

  border-color:
    var(--green);

  box-shadow:
    0 0 22px rgba(32,227,138,.18);
}


/* =====================================================
   البطاقات
===================================================== */

.pharmacy-grid{

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:18px;
}

.pharmacy-card{

  position:relative;

  min-height:330px;

  display:flex;

  flex-direction:column;

  align-items:center;

  text-align:center;

  padding:
    28px 23px
    20px;

  overflow:hidden;

  border-radius:28px;

  border:
    1px solid rgba(32,227,138,.40);

  background:
    linear-gradient(
      145deg,
      rgba(8,31,20,.97),
      rgba(2,12,7,.98)
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    inset 0 0 35px rgba(32,227,138,.025);

  animation:
    cardIn .5s ease both;
}

.pharmacy-card::before{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  border-radius:28px;

  background:
    linear-gradient(
      120deg,
      rgba(32,227,138,.08),
      transparent 30%,
      transparent 70%,
      rgba(32,227,138,.035)
    );
}

.pharmacy-card::after{

  content:"";

  position:absolute;

  top:0;

  left:14%;
  right:14%;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(154,255,200,.65),
      transparent
    );
}


/* شعار البطاقة */

.pharmacy-logo{

  width:98px;
  height:98px;

  display:grid;
  place-items:center;

  border-radius:27px;

  background:
    linear-gradient(
      145deg,
      #0a2618,
      #031009
    );

  border:
    1px solid rgba(32,227,138,.32);

  box-shadow:
    inset 0 0 25px rgba(32,227,138,.06),
    0 10px 25px rgba(0,0,0,.30);
}

.pharmacy-logo svg{

  width:81px;
  height:81px;

  filter:
    drop-shadow(0 0 7px rgba(32,227,138,.38));
}


/* اسم الصيدلية */

.card-title{

  margin-top:17px;

  flex:1;
}

.card-title h3{

  font-family:
    'Noto Kufi Arabic',
    Cairo,
    sans-serif;

  font-size:23px;

  line-height:1.75;

  font-weight:800;

  color:#f5fff9;
}

.card-location{

  margin-top:3px;

  color:#829b90;

  font-size:13px;

  font-weight:600;
}


/* أزرار البطاقة */

.card-footer{

  width:100%;

  display:grid;

  grid-template-columns:
    1.25fr
    .95fr;

  gap:10px;

  margin-top:20px;
}

.details-button,
.card-phone{

  min-height:52px;

  display:grid;

  place-items:center;

  border-radius:16px;

  font-size:14px;

  font-weight:800;
}

.details-button{

  border:
    1px solid var(--green);

  background:
    var(--green);

  color:#001a0e;
}

.card-phone{

  border:
    1px solid rgba(32,227,138,.22);

  background:
    rgba(32,227,138,.035);

  color:var(--green-light);
}

.card-phone.disabled{

  color:#758d82;
}


/* =====================================================
   التحميل
===================================================== */

.loading-state{

  padding:
    45px 20px;

  text-align:center;

  color:#789286;
}

.loader{

  width:34px;
  height:34px;

  margin:
    0 auto 12px;

  border:
    3px solid rgba(32,227,138,.12);

  border-top-color:
    var(--green);

  border-radius:50%;

  animation:
    spin .8s linear infinite;
}


/* =====================================================
   لا توجد نتائج
===================================================== */

.empty-state{

  padding:
    45px 20px;

  text-align:center;

  border:
    1px dashed rgba(32,227,138,.28);

  border-radius:25px;

  color:#8fa79b;
}

.empty-icon{

  font-size:40px;

  color:var(--green-light);
}

.empty-state h3{

  margin:7px 0;

  font-size:20px;
}

.empty-state p{

  margin-bottom:15px;

  font-size:12px;
}

.empty-state button{

  border:
    1px solid rgba(32,227,138,.30);

  background:
    rgba(32,227,138,.06);

  color:var(--green-light);

  padding:
    10px 16px;

  border-radius:13px;
}


/* =====================================================
   Footer
===================================================== */

footer{

  min-height:170px;

  padding:
    38px 20px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:8px;

  text-align:center;

  border-top:
    1px solid rgba(32,227,138,.12);

  background:#010503;
}

.footer-symbol{

  width:55px;
  height:55px;

  display:grid;
  place-items:center;

  border-radius:17px;

  border:
    1px solid rgba(32,227,138,.28);

  color:var(--green);

  font-size:25px;
}

footer strong{

  color:var(--green-light);

  font-size:15px;
}

footer p{

  color:#5e786b;

  font-size:10px;
}


/* =====================================================
   نافذة التفاصيل
===================================================== */

.modal{

  position:fixed;

  inset:0;

  z-index:4000;

  display:grid;

  place-items:center;

  padding:15px;
}

.modal-backdrop{

  position:absolute;

  inset:0;

  background:
    rgba(0,0,0,.82);

  backdrop-filter:
    blur(12px);
}

.modal-card{

  position:relative;

  z-index:2;

  width:
    min(650px,100%);

  max-height:92vh;

  overflow-y:auto;

  padding:28px;

  border-radius:30px;

  border:
    1px solid rgba(32,227,138,.42);

  background:
    linear-gradient(
      145deg,
      #091e14,
      #020906
    );

  box-shadow:
    0 35px 100px #000,
    inset 0 0 35px rgba(32,227,138,.025);
}

.modal-close{

  position:absolute;

  top:14px;
  left:14px;

  width:43px;
  height:43px;

  border-radius:50%;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    #0a1b13;

  color:#c8d7d0;

  font-size:26px;
}

.modal-header{

  display:flex;

  align-items:center;

  gap:18px;

  padding-left:50px;
}

.modal-logo{

  width:105px;
  height:105px;

  flex:none;

  display:grid;

  place-items:center;

  border-radius:27px;

  background:#06130d;

  border:
    1px solid rgba(32,227,138,.30);

  color:var(--green-light);
}

.modal-logo svg{

  width:88px;
  height:88px;
}

.modal-heading span{

  color:var(--green);

  font-size:13px;

  font-weight:800;
}

.modal-heading h2{

  margin-top:2px;

  font-family:
    'Noto Kufi Arabic',
    Cairo,
    sans-serif;

  font-size:29px;

  line-height:1.65;
}

.modal-heading p{

  color:#839d90;

  font-size:13px;
}

.modal-body{

  margin-top:25px;
}

.info-row{

  display:flex;

  align-items:flex-start;

  gap:13px;

  padding:
    15px 0;

  border-bottom:
    1px solid rgba(255,255,255,.055);
}

.info-icon{

  width:42px;
  height:42px;

  flex:none;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:
    rgba(32,227,138,.07);

  color:var(--green-light);

  font-size:18px;
}

.info-row small{

  display:block;

  color:#6f897c;

  font-size:11px;

  margin-bottom:3px;
}

.info-row strong,
.info-row a{

  display:block;

  font-size:16px;

  line-height:2;

}

.info-row a{

  color:var(--green-light);

}


/* =====================================================
   الخدمات
===================================================== */

.services-box{

  padding-top:22px;
}

.services-title{

  color:#6f897c;

  font-size:12px;

  margin-bottom:10px;
}

.service-list{

  display:flex;

  flex-direction:column;

  gap:3px;
}

.service-item{

  display:flex;

  align-items:flex-start;

  gap:9px;

  padding:
    6px 0;

  color:#e6f7ed;

  font-size:17px;

  line-height:1.85;

  font-weight:800;
}

.service-bullet{

  color:var(--green);

  font-size:15px;

  padding-top:1px;
}


/* =====================================================
   أزرار النافذة
===================================================== */

.modal-actions{

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:10px;

  margin-top:22px;
}

.action{

  min-height:49px;

  display:grid;

  place-items:center;

  border-radius:14px;

  border:
    1px solid rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.03);

  font-size:13px;

  font-weight:800;
}

.action.call{

  background:var(--green);

  color:#00190d;
}

.action.whatsapp{

  color:#72ffb7;
}

.action.map{

  color:#c2d8ce;
}

.action.facebook{

  color:#a7d8ff;
}


/* =====================================================
   الحركات
===================================================== */

@keyframes spin{

  to{
    transform:rotate(360deg);
  }

}

@keyframes splashIn{

  from{
    opacity:0;
    transform:
      translateY(20px)
      scale(.95);
  }

  to{
    opacity:1;
    transform:none;
  }

}

@keyframes breathing{

  0%,100%{
    transform:scale(.90);
    opacity:.65;
  }

  50%{
    transform:scale(1.15);
    opacity:1;
  }

}

@keyframes logoPulse{

  0%,100%{
    transform:scale(.98);
  }

  50%{
    transform:scale(1.025);
  }

}

@keyframes loading{

  from{
    transform:translateX(-130%);
  }

  to{
    transform:translateX(350%);
  }

}

@keyframes cardIn{

  from{
    opacity:0;
    transform:
      translateY(15px);
  }

  to{
    opacity:1;
    transform:none;
  }

}


/* =====================================================
   الهاتف
===================================================== */

@media(max-width:700px){

  .pharmacy-grid{

    grid-template-columns:1fr;

    gap:15px;
  }

  .pharmacy-card{

    min-height:315px;
  }

  .card-title h3{

    font-size:24px;
  }

  .section-title{

    align-items:flex-start;

    flex-direction:column;
  }

  .count{

    align-self:flex-start;
  }

  .hero{

    padding-top:40px;
  }

  .logo-ring{

    width:125px;
    height:125px;
  }

  .logo-ring svg{

    width:106px;
    height:106px;
  }

  .modal-card{

    padding:23px;
  }

  .modal-heading h2{

    font-size:25px;
  }

  .service-item{

    font-size:17px;
  }

}


@media(max-width:390px){

  main{

    width:
      calc(100% - 20px);
  }

  .splash-logo{

    width:175px;
    height:175px;
  }

  .splash-logo svg{

    width:150px;
    height:150px;
  }

  .card-footer{

    grid-template-columns:1fr;
  }

  .modal-actions{

    grid-template-columns:1fr;
  }

  .home-button{

    width:65px;
    height:65px;

    right:14px;
    bottom:15px;
  }

}