/* ==========================================================================
   TempMailNinja PW — redesigned header + Premium pricing popup
   Load AFTER assets/themes/basic/css/style.css (see README, step 1).
   All rules are scoped under .tn-header / .tn-pricing-modal so the rest
   of the theme is untouched. Colours match the reference screenshots:
   white header, dark text, orange Premium (#ff9c37), blue primary.
   ========================================================================== */

/* ---------- Header bar ----------
   v4 — spacing tightened everywhere (logo 38px, bar 64px, smaller link
   padding) so the header fits without the logo and the first link
   overlapping, and store buttons removed (see navbar.blade.php). */
.tn-header {
  background: #fff;
  margin-top: 0 !important;
  min-height: 64px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  position: relative;
  z-index: 1030;
}
.tn-header.nav-sticky {
  background: #fff;
  box-shadow: 0 4px 16px rgba(17, 17, 26, .10);
}
.tn-header .nav-inner { width: 100%; gap: 14px; }
.tn-header .logo { flex-shrink: 0; display: flex; align-items: center; }
.tn-header .logo img { max-height: 38px; width: auto; }
/* White header => always show the dark logo, never the white one. */
.tn-header .white-logo { display: none !important; }
.tn-header .dark-logo { display: block !important; }

/* ---------- Centre menu ----------
   NOTE ON SPECIFICITY (v4 fix): the theme's own selectors are very long
   (e.g. .nav .nav-inner .nav-menu .nav-links .nav-link), so short
   .tn-header rules LOST to the theme on padding, border-radius and
   text-align — that is why the submenu items rendered as centred grey
   pills instead of plain left-aligned rows. Every rule below therefore
   uses the same long chain, prefixed with .tn-header, so it wins. */
.tn-header .nav-menu { width: auto; flex: 1 1 auto; min-width: 0; }
.tn-header .nav-menu-scroller { height: 64px; }
.tn-header .nav-menu-body { justify-content: center; }
.tn-header .nav-actions { margin-left: auto; gap: 8px; flex-wrap: nowrap; }
.tn-header.nav .nav-inner .nav-menu .nav-links { display: flex; align-items: center; margin-left: 0; gap: 2px; }
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-link,
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-btn {
  color: #171718 !important;
  font-size: 15px;
  font-weight: 500;
  opacity: .92;
  padding: 8px 11px;
  margin: 0 !important;
  border-radius: 10px;
  white-space: nowrap;
}
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-link:hover,
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-link.active,
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop:hover .nav-drop-btn,
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop.active .nav-drop-btn {
  color: #171718 !important;
  background: #f3f4f8;
  opacity: 1;
}
.tn-header .nav-drop .nav-drop-btn .fa-chevron-down { transition: transform .25s; font-size: 11px; }
.tn-header .nav-drop:hover .nav-drop-btn .fa-chevron-down,
.tn-header .nav-drop.active .nav-drop-btn .fa-chevron-down { transform: rotate(180deg); }

/* ---------- Dropdown card (desktop) — like the reference image:
   white card, soft shadow, plain left-aligned rows, no pill background
   until hover. ---------- */
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop { position: relative; }
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu {
  display: block !important;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 260px;
  width: max-content;
  max-width: 320px;
  background: #fff;
  border: 1px solid #e9eaf0;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(17, 17, 26, .14);
  padding: 8px;
  margin: 0 !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 1050;
}
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop:hover .nav-drop-menu,
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop.active .nav-drop-menu,
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop.animated .nav-drop-menu {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu .nav-link {
  display: block;
  color: #4b5563 !important;
  background: transparent;
  text-align: left !important;
  padding: 10px 14px;
  margin: 0 !important;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  opacity: 1;
}
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu .nav-link:not(:last-child) {
  margin-bottom: 0 !important;
}
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu .nav-link:hover {
  background: #f3f4f8;
  color: #171718 !important;
}

/* ---------- Right-side actions (store buttons removed in v4) ---------- */
.tn-premium-btn {
  background: #ff9c37;
  border: 1px solid #cc6e0f;
  color: #3b1f03;
  font-weight: 700;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tn-premium-btn:hover { background: #ffa94d; color: #3b1f03; }
.tn-header .nav-actions .btn-outline-light {
  color: #171718 !important;
  border-color: #d4d7de;
}
.tn-header .nav-actions .btn-outline-light:hover { background: #f3f4f8; color: #171718; }
.tn-header .nav-menu-button { color: #171718 !important; }

/* ---------- Premium pricing popup ---------- */
.tn-pricing-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s, visibility .25s;
}
.tn-pricing-modal.open { visibility: visible; opacity: 1; }
.tn-pricing-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 26, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* v3 — popup made noticeably smaller overall: it used to fill the whole
   screen and run past the bottom of the viewport. The card is narrower,
   paddings and type are tighter, and the plan cards inside it are
   compacted too, so the full popup (both plans + features + payment
   logos) fits on a normal laptop screen without scrolling. */
.tn-pricing-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 26px 28px 18px;
  text-align: center;
  transform: translateY(12px) scale(.98);
  transition: transform .25s;
}
.tn-pricing-modal.open .tn-pricing-card { transform: none; }
.tn-pricing-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 6px 10px;
}
.tn-pricing-close:hover { color: #171718; }
.tn-pricing-crown {
  width: 44px; height: 44px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #ede9fe;
  color: #6d28d9;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.tn-pricing-title { font-size: 23px; font-weight: 800; color: #171718; margin-bottom: 4px; }
.tn-pricing-subtitle { color: #4b5563; font-size: 14px; margin-bottom: 14px; }
.tn-plan-switcher {
  display: inline-flex;
  border: 1px solid #c7cbe8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.tn-plan-switcher-item {
  border: 0;
  background: #fff;
  color: #171718;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.tn-plan-switcher-item.active { background: #6d28d9; color: #fff; }
.tn-plans { display: none; text-align: left; }
.tn-plans.active { display: block; }
.tn-plans .plan { height: 100%; }
/* Compact plan cards inside the popup (the theme's .plan is roomy). */
.tn-pricing-card .plan { padding: 20px 18px !important; border-radius: 18px; }
.tn-pricing-card .plan-title { font-size: 16px; margin-bottom: 2px; }
.tn-pricing-card .plan-price { font-size: 28px !important; margin-bottom: 2px !important; }
.tn-pricing-card .plan-price span { font-size: 13px; }
.tn-pricing-card .plan-text { font-size: 13px; line-height: 1.45; margin-bottom: 12px; }
.tn-pricing-card .plan .btn-xl { padding: 8px 16px; font-size: 14px; }
.tn-pricing-card .plan-features { margin-top: 10px; }
.tn-pricing-card .plan-feat { padding: 4px 0; font-size: 14px; gap: 8px; }
.tn-pricing-card .plan-feat-icon, .tn-pricing-card .plan-feat-icon-v2 {
  width: 18px; height: 18px; font-size: 10px;
}
.tn-pricing-secure { margin-top: 16px; }
.tn-pricing-secure-title { font-weight: 700; color: #171718; margin-bottom: 4px; font-size: 14px; }
.tn-pricing-secure-title i { color: #16a34a; margin-right: 6px; }
.tn-pricing-secure-text { color: #6b7280; font-size: 12px; max-width: 560px; margin: 0 auto 8px; }
.tn-pricing-methods { color: #6b7280; font-size: 12px; font-weight: 600; margin: 0; }
.tn-pricing-missing { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 14px; }

/* ---------- Payment logos (popup footer) ---------- */
.tn-payment-logos {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 10px; margin-top: 12px;
}
.tn-payment-logos img {
  height: 24px; width: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 3px 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  object-fit: contain;
}

/* ---------- Responsive ----------
   v2 fix — mobile submenu was invisible in v1. Root causes found from
   the user's screenshot (parent open, empty gap, no submenu text):
     1. the DESKTOP dropdown rule sets left:50% + translate(-50%) and
        visibility:hidden/opacity:0. In the mobile block v1 only reset
        position/transform on the CLOSED menu, so the OPEN (.active)
        menu still inherited translate(-50%) and was pushed off-screen;
     2. tn-header.js and the site's main.js BOTH toggled .active on the
        same click, cancelling each other out — the menu never opened.
   Both are fixed here (and in tn-header.js v2): the mobile rules below
   fully reset position/transform/visibility for closed AND open menus,
   and the JS now stops the click propagating to main.js. */
@media (max-width: 1199.98px) {
  .tn-header .nav-menu {
    position: fixed; width: 100%; height: 100%;
    top: 0; left: 0; z-index: 1040;
    visibility: hidden; opacity: 0;
    background: transparent;
  }
  .tn-header .nav-menu.show { visibility: visible; opacity: 1; }
  .tn-header .nav-menu .overlay { display: block; }
  .tn-header .nav-menu-scroller {
    position: absolute; top: 0; right: 0;
    width: min(360px, 88vw); height: 100%;
    background: #fff;
    box-shadow: -8px 0 32px rgba(0, 0, 0, .14);
    align-items: flex-start;
    overflow-y: auto;
    padding: 24px 20px 32px;
  }
  .tn-header .nav-menu-body { flex-direction: column; align-items: stretch; width: 100%; }
  .tn-header .nav-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 0; margin: 0 !important; }
  .tn-header .nav-links { flex-direction: column; align-items: stretch; width: 100%; gap: 2px; margin: 0 !important; }
  .tn-header .nav-links .nav-link,
  .tn-header .nav-drop .nav-drop-btn {
    text-align: left; padding: 13px 14px; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    color: #171718 !important;
    font-size: 16px; font-weight: 600;
    background: transparent; border-radius: 12px;
    margin: 0 !important;
  }
  .tn-header .nav-links .nav-link:hover,
  .tn-header .nav-drop.active .nav-drop-btn {
    background: #f3f4f8;
  }
  /* Submenu: closed = hidden, open = a visible indented list.
     Every desktop positioning property is reset here, for BOTH states,
     so nothing can push it off-screen or make it transparent. */
  .tn-header .nav-drop .nav-drop-menu,
  .tn-header .nav-drop:hover .nav-drop-menu,
  .tn-header .nav-drop.active .nav-drop-menu,
  .tn-header .nav-drop.animated .nav-drop-menu {
    position: static !important;
    left: auto !important; top: auto !important;
    transform: none !important;
    visibility: visible; opacity: 1; pointer-events: auto;
    min-width: 0; width: 100%; max-width: none;
    box-shadow: none; border: 0; border-left: 3px solid #ede9fe;
    border-radius: 0 12px 12px 0;
    background: #fafaff;
    padding: 6px 0 6px 8px; margin: 2px 0 10px 0 !important;
  }
  .tn-header .nav-drop .nav-drop-menu { display: none !important; }
  .tn-header .nav-drop.active .nav-drop-menu { display: block !important; }
  /* Submenu links: dark, readable text on the light panel — never white,
     plain rows like the reference (no pill shape, left-aligned). */
  .tn-header .nav-drop .nav-drop-menu .nav-link {
    display: flex; justify-content: flex-start; align-items: center;
    color: #1f2937 !important;
    background: transparent !important;
    font-size: 15px; font-weight: 500;
    padding: 11px 14px 11px 18px; margin: 0 !important;
    border-radius: 10px !important; text-align: left !important; width: 100%;
  }
  .tn-header .nav-drop .nav-drop-menu .nav-link:hover {
    background: #ede9fe !important; color: #171718 !important;
  }
  .tn-header .nav-drop .nav-drop-btn .fa-chevron-down { transition: transform .25s; }
  .tn-header .nav-drop.active .nav-drop-btn .fa-chevron-down { transform: rotate(180deg); }
  .tn-header .nav-actions-sm { display: flex !important; }
  /* Buttons: equal, comfortable spacing — no touching edges. */
  .tn-header .nav-actions .tn-premium-btn { margin: 14px 0 0 0 !important; }
  .tn-header .tn-premium-btn,
  .tn-header .nav-actions .btn {
    justify-content: center; width: 100%;
    margin: 0 !important;
    padding: 12px 16px; border-radius: 12px; font-size: 16px;
  }
  .tn-header .nav-actions > a.btn,
  .tn-header .nav-actions > button.btn { margin-top: 12px !important; }
  .tn-header .nav-actions > a.btn:first-of-type { margin-top: 0 !important; }
  .tn-header .nav-actions .tn-premium-btn + a.btn { margin-top: 12px !important; }
}
@media (max-width: 767.98px) {
  .tn-header .nav-inner { gap: 12px; }
  .tn-header .logo img { max-height: 36px; }
  .tn-pricing-card { padding: 20px 14px 14px; border-radius: 18px; }
  .tn-pricing-title { font-size: 20px; }
  .tn-pricing-subtitle { font-size: 13px; }
  .tn-plan-switcher-item { padding: 8px 14px; font-size: 14px; }
}
@media (max-width: 479.98px) {
  .tn-pricing-modal { padding: 10px; }
  .tn-pricing-card { max-height: calc(100vh - 20px); }
}

/* ---------- Footer: social icons + store buttons (v5) ----------
   Footer is dark, so the pills are dark grey with white icons/text,
   like the reference screenshots. Both rows wrap, so they stay
   responsive on mobile. */
.tn-social-row {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 10px; margin-bottom: 18px; width: 100%;
}
.tn-social-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: #3c3c3c;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; text-decoration: none;
  transition: background .2s, transform .2s;
}
.tn-social-btn:hover { background: #835aff; color: #fff; transform: translateY(-2px); }
.tn-store-row { margin-top: 18px; text-align: center; width: 100%; }
.tn-store-title { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.tn-store-buttons {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 10px;
}
.tn-store-btn-ft {
  background: #3c3c3c;
  border: 1px solid #737373;
  color: #fff;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 14px; font-weight: 500;
  white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s;
}
.tn-store-btn-ft:hover { background: #4a4a4a; color: #fff; }
.tn-store-btn-ft img { width: 22px; height: 22px; display: block; }
.tn-store-btn-ft--icon-only { padding: 8px 10px; }
@media (max-width: 767.98px) {
  .tn-social-btn { width: 40px; height: 40px; font-size: 16px; }
  .tn-social-row { gap: 8px; margin-bottom: 14px; }
  .tn-store-buttons { gap: 8px; }
  .tn-store-btn-ft { padding: 7px 12px; font-size: 13px; }
}

/* ---------- Random Name Generator page ---------- */
.rng-form {
  background: #f8f8fc;
  border: 1px dashed rgba(0, 0, 0, .12);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 8px;
}
.rng-profile { margin-top: 8px; }
.rng-group-title {
  background: #349e5b;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  margin: 20px 0 6px;
}
.rng-group {
  background: #f0f0f5;
  border-radius: 6px;
  padding: 8px 12px;
  font-weight: 700;
  margin: 16px 0 4px;
}
.rng-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px solid #eee;
}
.rng-row label {
  width: 190px;
  flex-shrink: 0;
  font-weight: 600;
  margin: 0;
}
.rng-row .rng-value { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rng-row .rng-copy { flex-shrink: 0; }
.rng-about h3 { font-size: 20px; margin: 22px 0 8px; }
@media (max-width: 767.98px) {
  .rng-row { flex-wrap: wrap; gap: 6px; }
  .rng-row label { width: 100%; }
  .rng-form { padding: 14px; }
}