/* ===== GLOBAL ===== */
body{
background:#f4f6f9;
font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
margin:0;
}

.container{
max-width:900px;
margin:auto;
padding:20px;
}

/* ===== HERO CARD ===== */
.hero-card{
background:linear-gradient(135deg,#556B00,#8a9f2d);
color:#fff;
padding:35px 20px;
border-radius:20px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,0.15);
margin-bottom:20px;
}

.hero-title{
font-size:18px;
opacity:0.9;
margin-bottom:10px;
}

.hero-time{
font-size:48px;
font-weight:bold;
margin-bottom:8px;
}

.hero-date{
font-size:14px;
opacity:0.85;
}

/* ===== QUICK BOX ===== */
.quick-box{
background:#e9f0d5;
padding:12px;
border-radius:10px;
text-align:center;
margin-bottom:15px;
font-weight:500;
}

/* ===== TEXT ===== */
.main-text{
text-align:center;
font-size:17px;
margin-bottom:20px;
color:#333;
}

/* ===== GRID ===== */
.prayer-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
margin:25px 0;
}

/* ===== CARD ===== */
.p-card{
background:#fff;
padding:18px;
border-radius:14px;
text-align:center;
font-weight:bold;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:all 0.2s ease;
position:relative;
}

/* اسم الصلاة */
.p-card span{
display:block;
font-size:13px;
color:#777;
margin-bottom:6px;
}

/* الوقت */
.p-card strong{
font-size:16px;
color:#222;
}

/* hover */
.p-card:hover{
transform:translateY(-4px);
}

/* ===== ACTIVE PRAYER (FIXED) ===== */
.active-prayer{
background:#556B00 !important;
color:#fff !important;
transform:scale(1.02);
}

/* مهم جدًا */
.active-prayer span{
color:#dfe8b3 !important;
}

.active-prayer strong{
color:#fff !important;
}

/* ===== ACTION BUTTONS ===== */
.action-buttons{
margin-top:30px;
display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap;
}

.btn{
padding:12px 22px;
border-radius:10px;
text-decoration:none;
font-weight:600;
transition:all 0.2s ease;
}

.btn.primary{
background:#556B00;
color:#fff;
}

.btn.primary:hover{
background:#6f8a0a;
transform:translateY(-2px);
}

.btn.secondary{
background:#fff;
color:#556B00;
border:2px solid #556B00;
}

.btn.secondary:hover{
background:#556B00;
color:#fff;
}

/* ===== HEADINGS ===== */
h2{
margin-top:30px;
margin-bottom:10px;
font-size:20px;
}

p{
line-height:1.7;
color:#444;
font-size:15px;
}

/* ===== MOBILE ===== */
@media(max-width:600px){

.container{
padding:15px;
}

/* hero */
.hero-card{
padding:25px 15px;
border-radius:15px;
}

.hero-time{
font-size:36px;
}

/* grid يبقى عمود واحد */
.prayer-grid{
grid-template-columns:1fr;
}

/* cards */
.p-card{
padding:15px;
}

/* buttons */
.btn{
width:100%;
text-align:center;
}

}