.message{margin:8px 0;font-weight:600;}
.message.success{color:#00ff88;}  /* أخضر للنجاح */
.message.warning{color:#ffd700;}  /* أصفر للتحذير */

body {
  margin:0;
  font-family:"Poppins",sans-serif;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background: linear-gradient(-45deg,#ffb400,#ff7b00,#b35400,#ffcc00);
  background-size:400% 400%;
  animation:bgMove 12s ease infinite;
  color:#fff;
}
@keyframes bgMove{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

.container{
  background:rgba(45,20,0,0.9);
  border-radius:25px;
  padding:40px 50px;
  text-align:center;
  box-shadow:0 8px 25px rgba(0,0,0,0.4);
  width:90%;
  max-width:450px;
  animation:fadeIn 1s ease;
}
@keyframes fadeIn{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);}}

/* ===== Logo ===== */
.logo-oval{
  width:160px;
  background:#fff;
  border-radius:50% / 40%;
  padding:10px;
  border:4px solid gold;
  box-shadow:0 0 20px rgba(255,215,0,0.6);
  margin-bottom:20px;
}
.logo-glow{animation: glow 2s infinite alternate;}
@keyframes glow{0%{box-shadow:0 0 10px gold;}100%{box-shadow:0 0 25px orange;}}

h1{font-size:1.8rem;margin-bottom:10px;}
#dynamicText{font-size:1rem;margin-bottom:20px;color:#eee;}

.countdown{
  font-size:1.3rem;
  font-weight:600;
  color:#ffd700;
  margin-bottom:15px;
  animation:pulse 1.5s infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.6;}}

.progress-container{
  background:#fff3;
  border-radius:10px;
  width:100%;
  height:12px;
  overflow:hidden;
  margin-bottom:20px;
}
#progress{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,gold,orange);
  border-radius:10px;
  transition:width .4s linear;
  text-align:center;
  color:#000;
  font-weight:bold;
  line-height:12px;
  font-size:0.8rem;
}

/* ===== Visitor Counters (3 styles) ===== */
.visitor-counter {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 8px 14px;
  font-weight: 600;
  color: #fff;
  margin: 6px;
  transition: 0.3s;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

.visitor-counter:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

.visitor-counter .eye {
  margin-right: 6px;
  font-size: 1.2em;
}

/* أنماط لكل نوع */
.visitor-counter.today {
  background: linear-gradient(90deg, #00c853, #64dd17); /* أخضر */
  color: #fff;
}

.visitor-counter.month {
  background: linear-gradient(90deg, #2962ff, #448aff); /* أزرق */
  color: #fff;
}

.visitor-counter.total {
  background: linear-gradient(90deg, #ffb300, #ff6f00); /* ذهبي */
  color: #fff;
}

form{margin-top:10px;}
input[type=email]{
  padding:10px;
  border-radius:8px;
  border:none;
  width:70%;
  max-width:220px;
  margin-bottom:10px;
}
button, .notify-btn{
  background:linear-gradient(90deg,#ffb400,#ff7b00);
  border:none;
  color:#fff;
  font-weight:600;
  padding:10px 18px;
  border-radius:25px;
  cursor:pointer;
  transition:.3s;
  margin-top:10px;
}
button:hover, .notify-btn:hover{
  transform:scale(1.05);
  box-shadow:0 0 12px gold;
}

.features{text-align:left;margin-top:20px;padding-left:20px;}
.features li{margin-bottom:6px;}

.contact{font-size:.9rem;margin-top:20px;}
.contact a{color:#ffd700;text-decoration:none;margin:0 5px;}
.contact a:hover{text-decoration:underline;}