/* =========================================================
   Ibrahim Course Books — Mint Light
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  color-scheme:light;
  scroll-behavior:smooth;
}

body{
  margin:0 !important;
  min-height:100vh;

  background:
    radial-gradient(
      circle at 8% 8%,
      rgba(65,199,173,.15),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 12%,
      rgba(123,225,205,.13),
      transparent 29%
    ),
    linear-gradient(
      180deg,
      #f9fffd,
      #edf9f5 52%,
      #f8fffc
    ) !important;

  color:#173f3a !important;
}

.wrap{
  max-width:1160px !important;
  padding:26px 20px 70px !important;
}

.hero{
  margin:30px 0 38px !important;
  padding:42px 24px !important;

  border-radius:28px;
  border:1px solid rgba(8,127,113,.19);

  background:
    radial-gradient(
      circle at top left,
      rgba(8,127,113,.13),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(239,251,247,.96)
    );

  box-shadow:
    0 20px 52px rgba(18,83,73,.11),
    0 4px 14px rgba(18,83,73,.05);
}

.hero h1{
  color:#073f39 !important;
  font-size:clamp(32px,5vw,48px) !important;
  line-height:1.2;
}

.hero p{
  color:#5d7c76 !important;
  font-size:18px;
}

.top-nav{
  margin:16px 0 0 !important;
}

.back-btn{
  display:inline-flex;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;

  color:#05675e !important;
  background:#ffffff;
  border:1px solid rgba(8,127,113,.24);

  font-weight:700;
}

.trust{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.trust span{
  margin:0 !important;
  padding:8px 12px;
  border-radius:999px;

  color:#05675e !important;
  background:rgba(8,127,113,.09);
  border:1px solid rgba(8,127,113,.20);
  font-weight:700;
}

.grid{
  gap:24px !important;
}

.card{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f7fffc
    ) !important;

  color:#173f3a !important;
  border:1px solid rgba(8,127,113,.17) !important;
  border-radius:24px !important;
  padding:20px !important;

  box-shadow:
    0 16px 42px rgba(18,83,73,.09),
    0 4px 13px rgba(18,83,73,.04);
}

/* إخفاء علامة الصورة المكسورة */
.card img{
  display:none !important;
}

/* غلاف مؤقت احترافي لحين رفع الصور الأصلية */
.card::before{
  content:"📘  غلاف الكتاب قريبًا";

  display:grid;
  place-items:center;

  width:100%;
  min-height:260px;
  margin-bottom:18px;

  border-radius:18px;
  border:1px solid rgba(8,127,113,.19);

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255,255,255,.42),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #bfece2,
      #69cdb9
    );

  color:#064d45;
  font-size:22px;
  font-weight:800;
  text-align:center;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    0 10px 24px rgba(18,83,73,.10);
}

.card h3{
  color:#073f39 !important;
  font-size:22px;
}

.card p{
  color:#5d7c76 !important;
  font-size:15px !important;
}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.meta span{
  margin:0 !important;
  padding:6px 10px;
  border-radius:999px;

  color:#05675e !important;
  background:rgba(8,127,113,.08);
  border:1px solid rgba(8,127,113,.18);

  font-weight:700;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#ffffff !important;
  color:#05675e !important;
  border:1px solid rgba(8,127,113,.28) !important;

  font-family:inherit;
  font-weight:800;

  box-shadow:0 6px 17px rgba(18,83,73,.06);
}

.btn.primary{
  background:
    linear-gradient(
      135deg,
      #05675e,
      #29ad97
    ) !important;

  color:#ffffff !important;
  border-color:transparent !important;

  box-shadow:
    0 12px 28px rgba(8,127,113,.22);
}

.btn:hover,
.back-btn:hover{
  transform:translateY(-2px);
}

@media (max-width:620px){
  .wrap{
    padding-inline:12px !important;
  }

  .hero{
    padding:30px 16px !important;
  }

  .card::before{
    min-height:220px;
    font-size:19px;
  }

  .btn{
    width:100%;
  }
}