/* 06-start-guide.css */
/* === صندوق ابدأ حسب احتياج طفلك — بديل صندوق المشاركة فقط === */
.start-guide-box{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(220,233,231,.92);
  border-radius:24px;
  padding:20px;
  box-shadow:var(--shadow-sm);
  margin-bottom:25px;
  position:relative;
  overflow:hidden;
}
.start-guide-box::before{
  content:'';
  position:absolute;
  right:0;top:0;width:100%;height:5px;
  background:linear-gradient(90deg,var(--accent),var(--primary));
}
.start-guide-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0f766e;
  background:#f0fdfa;
  border:1px solid #cfe7e3;
  border-radius:999px;
  padding:5px 12px;
  font-size:.72rem;
  font-weight:900;
  margin-bottom:8px;
}
.start-guide-title{
  color:var(--primary);
  font-size:1rem;
  font-weight:900;
  margin-bottom:4px;
}
.start-guide-sub{
  color:#60717a;
  font-size:.78rem;
  font-weight:700;
  line-height:1.7;
  margin-bottom:14px;
}
.start-guide-buttons{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.start-guide-group-label{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:8px;
  color:#8a6b2f;
  font-size:.76rem;
  font-weight:900;
  margin:4px 0 1px;
  text-align:right;
}
.start-guide-group-label::before{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,#eadfcb);
}
.start-guide-btn{
  border:1px solid #d8ebe8;
  background:linear-gradient(135deg,#ffffff,#f8fdfc);
  color:#0f766e;
  border-radius:18px;
  padding:12px 8px;
  min-height:76px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-family:'Tajawal','Segoe UI',Tahoma,sans-serif;
  font-weight:900;
  font-size:.8rem;
  cursor:pointer;
  transition:.22s ease;
  box-shadow:0 6px 14px rgba(15,118,110,.06);
}
.start-guide-btn i{
  font-size:1.18rem;
  color:var(--accent);
}
.start-guide-btn-stage{
  background:linear-gradient(135deg,#fffdf6,#f8fdfc);
  border-color:#eadfcb;
}
.start-guide-btn-stage i{color:#c9a84c;}
.start-guide-btn:hover{
  transform:translateY(-2px);
  border-color:#99d5ca;
  box-shadow:0 12px 24px rgba(15,118,110,.12);
  background:linear-gradient(135deg,#f0fdfa,#ffffff);
}
.start-guide-btn:active{transform:scale(.985);}
.start-guide-modal{
  position:fixed;
  inset:0;
  z-index:9998;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,47,44,.46);
  backdrop-filter:blur(6px);
}
.start-guide-modal.open{display:flex;}
.start-guide-panel{
  width:min(560px,100%);
  max-height:86vh;
  overflow-y:auto;
  background:#fff;
  border:1px solid #d8ebe8;
  border-radius:24px;
  box-shadow:0 24px 70px rgba(15,47,44,.26);
  transform:translateY(10px);
  animation:startGuideRise .22s ease forwards;
}
@keyframes startGuideRise{to{transform:translateY(0);}}
.start-guide-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 14px;
  border-bottom:1px solid #e3efed;
  background:linear-gradient(135deg,#ffffff,#f0fdfa);
}
.start-guide-modal-title{
  margin:0;
  color:#0f766e;
  font-weight:900;
  font-size:1.05rem;
}
.start-guide-close{
  width:38px;
  height:38px;
  border:1px solid #d8ebe8;
  background:#fff;
  color:#6b7b84;
  border-radius:50%;
  font-size:1.05rem;
  font-weight:900;
  cursor:pointer;
  line-height:1;
}
.start-guide-close:hover{background:#fff7ed;color:#9a3412;border-color:#fed7aa;}
.start-guide-modal-body{padding:18px;}
.start-guide-question{
  color:#42535b;
  font-size:.92rem;
  font-weight:800;
  line-height:1.9;
  margin-bottom:14px;
}
.start-guide-actions{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.start-guide-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:right;
  background:linear-gradient(135deg,#ffffff,#f8fdfc);
  border:1px solid #d8ebe8;
  border-radius:16px;
  padding:12px 14px;
  color:#0f766e!important;
  text-decoration:none!important;
  font-weight:900;
  transition:.2s ease;
}
.start-guide-action:hover{
  background:linear-gradient(135deg,#f0fdfa,#ffffff);
  border-color:#99d5ca;
  transform:translateX(-3px);
}
.start-guide-action small{
  display:block;
  color:#60717a;
  font-weight:700;
  font-size:.72rem;
  line-height:1.55;
  margin-top:2px;
}
.start-guide-action i{color:var(--accent);}
.start-guide-subchoices{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.start-guide-choice{
  background:#f8fdfc;
  border:1px solid #d8ebe8;
  border-radius:18px;
  padding:13px;
}
.start-guide-choice-title{
  color:#23323a;
  font-weight:900;
  font-size:.9rem;
  margin-bottom:8px;
}
.start-guide-choice-links{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.start-guide-choice-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:7px 11px;
  color:#fff!important;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  font-size:.74rem;
  font-weight:900;
  text-decoration:none!important;
}
.start-guide-choice-links a:nth-child(even){
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
@media (max-width:520px){
  .start-guide-box{padding:17px 13px;border-radius:22px;}
  .start-guide-buttons{grid-template-columns:repeat(2,1fr);gap:8px;}
  .start-guide-btn{min-height:72px;font-size:.74rem;border-radius:16px;}
  .start-guide-modal{padding:12px;align-items:flex-end;}
  .start-guide-panel{border-radius:24px 24px 18px 18px;max-height:88vh;}
  .start-guide-action{align-items:flex-start;}
}