@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ============================================================
   FakeEmail.net — modern homepage visual layer (CSS only).
   Theme: BLUE / TEAL to match the brand logo.
   Blue #2563EB · Teal #14B6C4 · Navy ink #0F2147
   Scoped to the homepage. No HTML/JS/backend changes.
   ============================================================ */

:root{
  --fe-accent:#2563eb;       /* blue (links, accents) */
  --fe-accent-ink:#1d4ed8;   /* darker blue hover */
  --fe-teal:#14b6c4;         /* teal pop */
  --fe-ink:#0f2147;          /* navy (matches logo text) */
  --fe-muted:#51607a;
  --fe-card:#ffffff;
  --fe-bg:#f4f7fc;
  --fe-line:#e7ebf3;
  --fe-shadow:0 12px 34px rgba(15,33,71,.08);
  --fe-shadow-lg:0 22px 60px rgba(15,33,71,.15);
  --fe-radius:18px;
}

/* ---- Base typography (kills the Roboto Mono "2010" look) ---- */
#tm-body{ background:var(--fe-bg) !important; }
#tm-body, main, .tm-content, .temp-emailbox-text, .temp-emailbox-text p, .faq-section, .populer-article-list,
main p, main li, main h2, main h3, main h4, .temp-emailbox h2, .section-top-qr h2,
.section-top-qr p, .p-header h3, .faq-question, .faq-answer{
  font-family:'Poppins', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
main p, main li, .temp-emailbox-text p{
  color:var(--fe-muted) !important;
  font-size:16px !important;
  line-height:1.75 !important;
  letter-spacing:.1px;
}
main h2{ color:var(--fe-ink) !important; font-weight:700 !important; letter-spacing:-.4px; font-size:1.7rem !important; margin-top:2.2rem; }
main h3{ color:var(--fe-ink) !important; font-weight:600 !important; letter-spacing:-.2px; }
main a{ color:var(--fe-accent); }
main a:hover{ color:var(--fe-accent-ink); }

/* ---- Top header bar: clean white (logo stays visible) ---- */
.main-header{
  background:#ffffff !important;
  border-bottom:1px solid var(--fe-line) !important;
  box-shadow:0 1px 2px rgba(15,33,71,.04) !important;
}
.main-header .lang-text, .main-header .lang-select, .main-header .headerSeoLink{ color:var(--fe-ink) !important; }

/* ============================ HERO ============================ */
.section-top-qr{
  background:
    radial-gradient(860px 380px at 50% -28%, rgba(255,255,255,.42), transparent 60%),
    radial-gradient(640px 300px at 90% 4%, rgba(20,182,196,.40), transparent 58%),
    linear-gradient(135deg,#2f6bf0 0%, #4a86ee 52%, #1fb6c4 122%) !important;
  padding:48px 0 62px !important;
  border-bottom:0 !important;
  position:relative;
}
.section-top-qr .temp-emailbox{
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.6);
  border-radius:22px !important;
  box-shadow:0 26px 60px rgba(13,52,140,.30);
  padding:26px 26px 30px !important;
  max-width:640px;
  margin:6px auto 0 !important;
}
.section-top-qr .temp-emailbox h2{
  color:var(--fe-ink) !important; font-weight:700 !important; font-size:1.18rem !important;
  letter-spacing:-.2px; margin-bottom:16px; text-align:center;
}
/* email pill */
.section-top-qr .input-warp{
  background:#f4f7fc !important;
  border:1px solid #e3e9f3 !important;
  border-radius:14px !important;
  overflow:hidden;
}
.section-top-qr .emailbox-input{
  color:var(--fe-ink) !important;
  font-size:1.05rem !important;
  letter-spacing:.2px;
  background:transparent !important;
  font-weight:500;
}
.section-top-qr .emailbox-input::placeholder{ color:#93a0b8 !important; }
/* QR button (white SVG icon -> needs dark bg) */
.section-top-qr .btn-rds.popover-qr{
  background:var(--fe-ink) !important; border:0 !important; border-radius:11px !important;
}
.section-top-qr .btn-rds.popover-qr:hover{ background:#16315e !important; }
/* copy button -> teal pop (echoes the logo mask/shield) */
.section-top-qr .copyIconGreenBtn{
  background:var(--fe-teal) !important; border:0 !important; border-radius:11px !important;
  box-shadow:0 8px 20px rgba(20,182,196,.35);
}
.section-top-qr .copyIconGreenBtn:hover{ filter:brightness(1.06); }
.temp-emailbox-text{ text-align:center; }
.temp-emailbox-text p{ color:rgba(255,255,255,.95) !important; margin-top:18px; font-weight:500; text-shadow:0 1px 10px rgba(10,40,120,.25); }

/* days-left badge — soft light pill with blue number */
.days-left-area{
  background:#ffffff !important; background-image:none !important;
  border:1px solid #d8e3f7 !important;
  color:var(--fe-ink) !important; text-shadow:none !important;
  padding:7px 10px !important; margin:18px auto 4px !important;
  box-shadow:0 6px 16px rgba(37,99,235,.12);
}
.days-left-area .days-area{
  border:0 !important; text-shadow:none !important; color:#fff !important;
  background:var(--fe-accent) !important; padding:3px 18px !important;
}
.days-left-area span{ text-shadow:none !important; color:var(--fe-ink); }

/* ===================== ACTION BUTTON ROW ===================== */
.section-btn-header{ margin-top:-26px; position:relative; z-index:5; }
.section-btn-header .tm-btn{
  background:#fff !important; color:var(--fe-ink) !important;
  border:1px solid var(--fe-line) !important; border-radius:14px !important;
  padding:11px 20px !important; margin:6px !important; font-weight:600 !important;
  box-shadow:var(--fe-shadow); transition:transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.section-btn-header .tm-btn:hover{
  transform:translateY(-2px); color:var(--fe-accent) !important;
  box-shadow:var(--fe-shadow-lg);
}
.section-btn-header .tm-btn .icon-control{ opacity:.8; }

/* ========================= INBOX ============================= */
.inboxWarpMain, .inbox-area{
  background:var(--fe-card) !important; border:1px solid var(--fe-line) !important;
  border-radius:var(--fe-radius) !important; box-shadow:var(--fe-shadow) !important;
  overflow:hidden;
}
.inbox-header{
  background:#fff !important; color:var(--fe-ink) !important;
  border-bottom:2px solid var(--fe-accent) !important; border-radius:0 !important;
  font-weight:600; letter-spacing:.2px;
}
.inbox-header .col-h{ color:var(--fe-ink) !important; }

/* ====================== RECENT POSTS ======================== */
.p-header h3{
  text-align:center; font-weight:700 !important; font-size:1.7rem !important;
  color:var(--fe-ink) !important; margin:8px 0 26px; letter-spacing:-.3px; position:relative;
}
.p-header h3::after{
  content:""; display:block; width:64px; height:4px; border-radius:3px;
  background:linear-gradient(90deg,var(--fe-accent),var(--fe-teal)); margin:14px auto 0;
}
.populer-article-list{ list-style:none; padding:0; }
.populer-article-list > li{ height:auto !important; margin-bottom:8px; }
.populer-article-list .inner-text-box{
  background:var(--fe-card); border:1px solid var(--fe-line);
  border-radius:16px; box-shadow:var(--fe-shadow); overflow:hidden;
  margin:12px; height:auto !important; min-height:0 !important; position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
}
.populer-article-list .inner-text-box:hover{ transform:translateY(-4px); box-shadow:var(--fe-shadow-lg); }
.populer-article-list .inner-text-box figure{
  position:static !important; float:none !important; inset:auto !important;
  width:100% !important; height:auto !important;
  margin:0 !important; overflow:hidden; aspect-ratio:16/9; min-height:158px;
  background:linear-gradient(135deg,#eaf1fe,#e6f7f8) !important;
}
.populer-article-list .inner-text-box figure img{
  position:static !important;
  width:100% !important; height:100% !important; object-fit:cover; display:block;
  transition:transform .3s ease;
}
.populer-article-list .inner-text-box:hover figure img{ transform:scale(1.05); }
.populer-article-list .inner-text-box > a{
  display:block; padding:16px 18px 4px; font-weight:600; font-size:1.06rem;
  color:var(--fe-ink) !important; line-height:1.4; text-decoration:none;
}
.populer-article-list .inner-text-box > a:hover{ color:var(--fe-accent) !important; }
.populer-article-list .inner-text-box p{
  padding:0 18px 18px; margin:0; color:var(--fe-muted) !important; font-size:.94rem !important; line-height:1.6 !important;
}

/* =========================== FAQ ============================ */
.faq-section{ padding:14px 0 30px; }
.faq-section-title{
  text-align:center; font-weight:700 !important; font-size:1.7rem !important;
  color:var(--fe-ink) !important; margin-bottom:28px; letter-spacing:-.3px;
}
.faq-section-title::after{
  content:""; display:block; width:64px; height:4px; border-radius:3px;
  background:linear-gradient(90deg,var(--fe-accent),var(--fe-teal)); margin:14px auto 0;
}
.faq-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.faq-item{
  background:var(--fe-card) !important; border:1px solid var(--fe-line) !important;
  border-left:4px solid var(--fe-accent) !important;
  border-radius:14px !important; padding:20px 22px !important;
  box-shadow:var(--fe-shadow) !important; transition:transform .16s ease, box-shadow .16s ease;
}
.faq-item:hover{ transform:translateY(-3px); box-shadow:var(--fe-shadow-lg) !important; }
.faq-item .faq-question{
  color:var(--fe-ink) !important; font-weight:600 !important; font-size:1.04rem !important;
  margin:0 0 8px !important; text-transform:none !important; background:none !important;
}
.faq-item .faq-answer{ color:var(--fe-muted) !important; font-size:.95rem !important; line-height:1.65 !important; margin:0 !important; }

@media (max-width:720px){
  .faq-grid{ grid-template-columns:1fr; }
  .section-top-qr .temp-emailbox{ margin:6px 14px 0 !important; }
  main h2{ font-size:1.45rem !important; }
}