/* ToppersGuide global styles */
:root{
  --primary:#6a00ff;
  --accent:#ff6a00;
  --gold:#ffb000;
  --bg:#f7f7fb;
  --ink:#222;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji","Noto Color Emoji", "Segoe UI Emoji", sans-serif;
  background: var(--bg);
  color:var(--ink);
  line-height:1.55;
  position:relative;
  min-height:100vh;
  padding-bottom:80px; /* space for footer */
}

/* Watermark */
body.watermarked::before{
  content:"";
  position:fixed;
  inset:0;
  background:url('../img/toppersguideLogo.png') no-repeat center center / 380px auto;
  opacity:.10;
  pointer-events:none;
  z-index:0;
  filter:grayscale(20%);
}

.header-brand img{height:40px;width:auto}
.navbar-brand small{display:block;font-size:.75rem;color:#6b7280;margin-top:-6px}
.hero{
  background:linear-gradient(120deg, rgba(106,0,255,.08), rgba(255,106,0,.08));
  border-radius:18px;
  padding:28px;
  position:relative;
  overflow:hidden;
}
.hero h1{font-weight:800}
.hero .btn{margin-right:10px;margin-bottom:10px}

.card-hover{transition:.2s transform, .2s box-shadow}
.card-hover:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.08)}

footer{
  position:fixed; left:0; right:0; bottom:0;
  background:#fff; border-top:1px solid #eee; padding:10px 0; z-index:2;
}

.badge-free{background:#10b981}
.badge-paid{background:#ef4444}

.tg-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center; z-index:9999;
}
.tg-modal.open{display:flex}
.tg-modal .panel{
  background:#fff; width:min(900px, 92vw); max-height:86vh; overflow:auto;
  border-radius:16px; box-shadow:0 24px 48px rgba(0,0,0,.2);
}
.tg-modal .panel header{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #eee}
.tg-modal .panel header h5{margin:0}
.tg-modal .panel .content{padding:18px}

.search-bar{position:relative}
.search-bar input{padding-left:40px}
.search-bar .icon{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  opacity:.6
}

/* Test UI */
.test-wrap{background:#fff;border-radius:16px;padding:18px}
.question{font-weight:600}
.option{border:1px solid #ddd;border-radius:10px;padding:10px;margin-bottom:10px;cursor:pointer}
.option input{margin-right:8px}
.timer{font-weight:800}
.progress{height:8px;border-radius:999px}

.bookmark{cursor:pointer}
.bookmark.active{color:var(--gold)}


.post-card {
  cursor: pointer;
  border: 5px !important;
/*  border-left-width: 5px !important;*/
  border-radius: 8px;
  transition: transform 0.2s ease-in-out;
}
.post-card:hover {
  transform: scale(1.02);
  box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
}