/* FIRE GSM - Orange & Black Theme */
*{box-sizing:border-box}

:root{
  --bg:#0d0f12;
  --bg-soft:#15181c;
  --card:#171a1f;
  --card-2:#1d2025;
  --border:#353a42;
  --text:#f2f3f5;
  --muted:#a7adb7;
  --orange:#ff6a1a;
  --orange-2:#ff8a35;
  --orange-dark:#c94a18;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,sans-serif;
  transition:background .25s,color .25s;
}

header{
  min-height:82px;
  height:auto;
  background:#15171b;
  border-bottom:1px solid #2f3339;
  display:flex;
  align-items:center;
  padding:12px 5%;
  gap:30px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#fff;
  font-size:20px;
  font-weight:800;
}

.brand img{
  width:58px;
  height:58px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid #30343a;
}

nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
}

nav a{color:#e7e9ec;font-weight:600}
nav a:hover{color:var(--orange)}

a{color:var(--orange);text-decoration:none}

.wrap{
  max-width:1100px;
  margin:42px auto;
  padding:0 20px;
}

.hero,.card,.form,.balance,.stats div{
  background:linear-gradient(145deg,#181b20,#121417);
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.hero{
  padding:42px;
  margin-bottom:28px;
  border-top-color:#ff6a1a;
}

.hero h1{
  color:#fff;
  font-size:clamp(32px,6vw,58px);
  margin:10px 0 18px;
}

.hero p{color:var(--muted)}

.hero input,.form input,.form textarea,.form select{
  width:100%;
  padding:16px;
  margin:8px 0;
  background:#202329;
  color:#fff;
  border:1px solid #3b4048;
  border-radius:12px;
  font-size:16px;
  outline:none;
}

.hero input{
  border-radius:20px;
  font-size:18px;
}

.hero input:focus,.form input:focus,.form textarea:focus,.form select:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,106,26,.12);
}

.grid{display:grid;gap:20px}

.card{
  padding:28px;
  display:flex;
  align-items:center;
  gap:25px;
}

.card:hover{
  border-color:#6b442f;
  transform:translateY(-2px);
  transition:.2s;
}

.icon{
  width:100px;
  height:100px;
  flex:0 0 100px;
  background:linear-gradient(145deg,#f7f2ef,#ded7d4);
  color:#111;
  border-radius:22px;
  display:grid;
  place-items:center;
  font-size:42px;
}

.card h2{
  margin:0 0 10px;
  color:#f4f5f6;
  font-size:22px;
  line-height:1.4;
}

.card p{color:var(--muted)}

.price,.time,.btn,button{
  display:inline-block;
  padding:13px 18px;
  border-radius:14px;
  margin:3px;
  font-weight:bold;
  font-size:17px;
}

.price{
  background:#211a18;
  color:var(--orange-2);
  border:1px solid #7a3d23;
}

.time{
  background:#1e1d18;
  color:#ffc15a;
  border:1px solid #72551d;
}

.btn,button{
  background:linear-gradient(135deg,#ff7a25,#e14c1f);
  color:#fff;
  border:0;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(255,93,30,.18);
}

.btn:hover,button:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

.form{
  max-width:600px;
  margin:30px auto;
  padding:28px;
}

.err{color:#ff7065}

table{
  width:100%;
  border-collapse:collapse;
  background:#171a1f;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  color:#eee;
}

th,td{
  padding:13px;
  border-bottom:1px solid #30343a;
  text-align:left;
}

th{background:#202329;color:var(--orange-2)}
tr:hover td{background:#1d2025}

.balance{
  padding:20px;
  font-size:20px;
  margin:15px 0;
  color:#fff;
}

.stats{display:flex;gap:15px;flex-wrap:wrap}

.stats div{
  padding:20px;
  min-width:160px;
}

.stats b{
  display:block;
  color:var(--orange);
  font-size:28px;
}

footer{
  text-align:center;
  padding:30px;
  color:#8f96a0;
  background:#111317;
  border-top:1px solid #292d33;
}

/* Announcement bar */
.announcement-bar{
  background:linear-gradient(90deg,#ff7a25,#e9561d);
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  padding:12px 0;
  font-weight:bold;
  border-bottom:1px solid rgba(255,255,255,.15);
}

.announcement-text{
  display:inline-block;
  padding-left:100%;
  animation:moveText 18s linear infinite;
}

@keyframes moveText{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}

/* Dark mode toggle */
.theme-toggle{
  border:1px solid #3a3e45;
  background:#292c31;
  color:#fff;
  border-radius:22px;
  padding:9px 13px;
  cursor:pointer;
  font-size:18px;
}

body.dark-mode{background:#0d0f12;color:#f2f3f5}

@media(max-width:700px){
  header{
    padding:12px 16px;
    gap:12px;
    flex-wrap:wrap;
  }

  nav{
    gap:12px;
    font-size:14px;
  }

  .brand{
    font-size:18px;
  }

  .brand img{
    width:52px;
    height:52px;
  }

  .wrap{margin:25px auto;padding:0 16px}

  .hero{padding:28px 22px}

  .card{
    padding:20px;
    gap:15px;
    align-items:flex-start;
  }

  .icon{
    width:70px;
    height:70px;
    flex-basis:70px;
    border-radius:18px;
    font-size:30px;
  }

  .card h2{font-size:18px}

  .price,.time,.btn,button{
    padding:11px 14px;
    font-size:16px;
  }

  table{
    font-size:12px;
    display:block;
    overflow:auto;
  }
}


/* ===== DARK MODE FIX ===== */
body.dark-mode{
  background:#0d0f12 !important;
  color:#f2f3f5 !important;
}
body.dark-mode header{
  background:#15171b !important;
  border-color:#2f3339 !important;
}
body.dark-mode .hero,
body.dark-mode .card,
body.dark-mode .form,
body.dark-mode .balance,
body.dark-mode .stats div,
body.dark-mode .service-card,
body.dark-mode .category-item,
body.dark-mode table{
  background:#171a1f !important;
  color:#f2f3f5 !important;
  border-color:#353a42 !important;
}
body.dark-mode .hero p,
body.dark-mode .card p,
body.dark-mode footer,
body.dark-mode small{
  color:#a7adb7 !important;
}
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode strong,
body.dark-mode .admin-title{
  color:#f2f3f5 !important;
}
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .hero input{
  background:#202329 !important;
  color:#fff !important;
  border-color:#3b4048 !important;
}
body.dark-mode th{
  background:#202329 !important;
  color:#ff8a35 !important;
}
body.dark-mode td{
  border-color:#30343a !important;
}
body.dark-mode .note{
  background:#1b2027 !important;
  color:#d7dde5 !important;
  border-color:#38414c !important;
}

/* Keep the search icon inside the search box */
.hero{position:relative}
.hero #search{padding-right:55px}
.search-icon{
  position:absolute;
  right:62px;
  bottom:53px;
  color:#ff7a25;
  font-size:20px;
  pointer-events:none;
}
@media(max-width:700px){
  .search-icon{right:42px;bottom:47px}
}

/* Proper theme button */
.theme-toggle{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0 !important;
  margin-left:8px;
  background:#292c31 !important;
  color:#fff !important;
  border:1px solid #3a3e45 !important;
  border-radius:50% !important;
}
.theme-toggle:hover{border-color:#ff7a25 !important;color:#ff7a25 !important}


/* Homepage information sections */
.info-section{
  margin:28px 0;
  padding:34px;
  background:linear-gradient(145deg,#181b20,#121417);
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.info-section h2{margin:6px 0 12px;color:#fff;font-size:clamp(26px,4vw,38px)}
.info-section p{color:var(--muted);line-height:1.8;margin:0}
.section-kicker{color:var(--orange-2);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.section-lead{max-width:800px;margin-bottom:22px!important}
.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:25px}
.feature-box{padding:20px;border:1px solid var(--border);border-radius:16px;background:#15181c}
.feature-box i{font-size:24px;color:var(--orange);display:block;margin-bottom:12px}
.feature-box b{display:block;color:#fff;margin-bottom:7px;font-size:17px}
.feature-box span{display:block;color:var(--muted);line-height:1.6;font-size:14px}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:25px}
.why-card{padding:22px;border:1px solid var(--border);border-radius:16px;background:#15181c}
.why-card i{color:var(--orange);font-size:25px}
.why-card h3{margin:14px 0 7px;color:#fff}
.why-card p{font-size:14px;line-height:1.65}
.rules-list{display:grid;gap:12px;margin-top:20px}
.rules-list div{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border-radius:14px;background:#15181c;border:1px solid var(--border);color:var(--muted);line-height:1.7}
.rules-list i{color:#38d17a;margin-top:5px}
.rules-list b{color:#fff}
body.dark-mode .info-section,
body.dark-mode .feature-box,
body.dark-mode .why-card,
body.dark-mode .rules-list div{background:#171a1f!important;border-color:#353a42!important}
@media(max-width:800px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .feature-row{grid-template-columns:1fr}
}
@media(max-width:600px){
  .info-section{padding:24px 18px}
  .why-grid{grid-template-columns:1fr}
}

/* Compact mobile header - keep logo and navigation on one short row */
@media(max-width:700px){
  header{
    min-height:0 !important;
    height:66px !important;
    padding:7px 10px !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }
  .brand{
    gap:7px !important;
    font-size:16px !important;
    flex:0 0 auto !important;
  }
  .brand img{
    width:42px !important;
    height:42px !important;
    border-radius:9px !important;
  }
  nav{
    margin-left:auto !important;
    gap:5px !important;
    font-size:12px !important;
    white-space:nowrap !important;
    flex-wrap:nowrap !important;
    min-width:0 !important;
  }
  nav a{
    font-weight:700 !important;
  }
  .theme-toggle{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    margin-left:2px !important;
    font-size:15px !important;
  }
}