/* ========== Theme Tokens (Dark) ========== */
:root {
    /* palette (brand "green" is actually blue now) */
    --brand-green: #3085fc; /* primary accent */
  
    /* derived brand shades (for hover/active/focus) */
    --brand-green-400: #4e97fc; /* focus ring / lighter */
    --brand-green-500: #3085fc; /* base */
    --brand-green-600: #1273fc; /* hover */
    --brand-green-700: #0364eb; /* active */
    --brand-green-510: #267ffc; /* disabled bg */
  
    --surface-0: #050211;
    --surface-1: #050211;
    --text-0: #f4f4f4;
    --border-0: #40396d5e;
  
    /* bootstrap var overrides */
    --bs-body-bg: var(--surface-0);
    --bs-body-color: var(--text-0);
    --bs-border-color: var(--border-0);
    --bs-card-bg: var(--surface-0);
    --bs-card-border-color: var(--border-0);
    --bs-navbar-color: var(--text-0);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-brand-color: var(--text-0);
    --bs-navbar-toggler-border-color: var(--border-0);
    --bs-table-color: var(--text-0);
    --bs-table-bg: var(--surface-0);
    --bs-table-border-color: var(--border-0);
  }
  
  /* ========== Alerts ========== */
  .alert-danger,
  .alert-info {
    border: 0;
    color: #fff;
    border-radius: 0; /* unify radius */
  }
  .alert-danger { background: #9b2b3a70; }
  .alert-info   { background: #2b5c9b70; }
  
  /* ========== Base ========== */
  html, body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: sans-serif;
  }

  body {
    background-image: radial-gradient(at top left, #32165c 0%, #00000000 25%) !important;
  }
  
  /* Remove harsh focus glow globally; keep accessibility via :focus-visible */
  .form-control:focus,
  .btn:focus,
  .nav-link:focus {
    box-shadow: none !important;
    outline: none !important;
  }
  :focus-visible {
    outline: 2px solid var(--border-0);
    outline-offset: 2px;
  }
  
  /* ========== Cards ========== */
  .card,
  .card-dark {
    background-color: var(--bs-card-bg);
    border: 1px solid var(--border-0) !important;
  }
  .card-dark .card-header {
    border-bottom: 1px solid #2b2b2b !important;
  }
  
  /* ========== Navbar ========== */
  .navbar {
    background: var(--bs-body-bg) !important;
    border:0px;
    border-bottom: 1px solid var(--border-0) !important;

  }
  .navbar-brand { padding-top: 15px; padding-bottom: 15px; font-size: 1rem; }
  .nav-link { color: var(--bs-navbar-color); }
  .nav-link:hover,
  .nav-link:focus { color: var(--bs-navbar-hover-color); }
  .navbar-toggler { top: .25rem; right: 1rem; }
  
  /* ========== Forms ========== */
  .form-control {
    background-color: transparent;
    color: var(--text-0);
    border-color: var(--border-0);
  }
  .form-control::placeholder { color: rgba(244,244,244,.6); }
  .form-control:focus { border-color: var(--border-0); }
  .form-floating > label { color: var(--text-0); opacity: .8; }
  
  /* darker fill variant */
  .form-control-dark {
    color: var(--text-0);
    background-color: rgba(255,255,255,.08);
    border: 1px solid var(--border-0);
    border-radius: 0;
  }
  .form-control-dark:focus {
    border-color: var(--border-0);
    box-shadow: 0 0 0 .25rem rgba(255,255,255,.06);
  }
  
  /* ========== Sidebar ========== */
  .sidebar {
    padding-top: 5rem !important;
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 100;
    background-color: var(--surface-0);
    box-shadow: inset -1px 0 0 rgba(0,0,0,.1);
    overflow-x: hidden; overflow-y: auto;
    border-right: 1px solid var(--border-0);
  }
  @media (max-width: 767.98px) { .sidebar { top: 5rem; } }
  
  /* ========== Main Container ========== */
  .mainbody { padding-left: 0; padding-right: 0; }
  
  /* ========== Tables (dark) ========== */
  .table {
    --bs-table-bg: var(--surface-0);
    --bs-table-color: var(--text-0);
    --bs-table-border-color: var(--border-0);
  }
  .table > :not(caption) > * > * { background-color: var(--surface-0); }
  
  /* ========== Buttons ========== */
  /* Use with <button class="btn btn-green"> */
  .btn-green {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-green-500);
    --bs-btn-border-color: var(--brand-green-500);
  
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-green-600);
    --bs-btn-hover-border-color: var(--brand-green-600);
  
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-green-700);
    --bs-btn-active-border-color: var(--brand-green-700);
  
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-green-510);
    --bs-btn-disabled-border-color: var(--brand-green-510);
  
    /* restore a pleasant focus ring just for this button */
    --bs-btn-focus-shadow-rgb: 48, 133, 252; /* #3085fc */
  }
  .btn-green:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .25rem rgba(48,133,252,.35);
  }
  
  /* Optional outline variant matching the same brand hue */
  .btn-outline-green {
    --bs-btn-color: var(--brand-green-500);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--brand-green-500);
  
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-green-600);
    --bs-btn-hover-border-color: var(--brand-green-600);
  
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-green-700);
    --bs-btn-active-border-color: var(--brand-green-700);
  
    --bs-btn-disabled-color: var(--brand-green-500);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--brand-green-500);
  
    --bs-btn-focus-shadow-rgb: 48,133,252;
  }
  .btn-outline-green:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .25rem rgba(48,133,252,.35);
  }
  
  /* Soft light button (kept, just tidied) */
  .btn-custom-light {
    --btn-light-bg: #e9f5ef;
    --btn-light-text: #0f3727;
  
    --bs-btn-bg: var(--btn-light-bg);
    --bs-btn-color: var(--btn-light-text);
    --bs-btn-border-color: var(--btn-light-bg);
  
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: var(--btn-light-bg);
    --bs-btn-hover-border-color: var(--btn-light-bg);
  
    --bs-btn-active-bg: transparent;
    --bs-btn-active-color: var(--btn-light-bg);
    --bs-btn-active-border-color: var(--btn-light-bg);
  
    --bs-btn-disabled-bg: var(--btn-light-bg);
    --bs-btn-disabled-color: var(--btn-light-text);
    --bs-btn-disabled-border-color: var(--btn-light-bg);
  }
  .btn-custom-light:focus-visible {
    outline: 2px solid var(--btn-light-bg);
    outline-offset: 2px;
  }
  
  /* ========== Misc UI ========== */
  .success-top { background: var(--brand-green-500) !important; border-radius: 0 !important; }
  .card-mail { background: #0d0e27 !important;  border-radius: 0 !important; }
  .card-mail-read { background-color: var(--bs-card-bg) !important; }

  .link-active { background: #13142b; border-radius: 4px; }
  
  /* Pagination (dark) */
  .pagination { padding: .5rem; border-radius: .375rem; }
  .pagination .page-link {
    background-color: transparent !important;
    color: var(--text-0);
    border: 1px solid #444;
  }
  .pagination .page-link:hover {
    background-color: transparent !important;
    color: var(--text-0);
    border-color: var(--border-0);
  }
  .pagination .disabled .page-link {
    background-color: transparent !important;
    color: #777;
    border-color: var(--border-0);
    pointer-events: none;
  }
  
  /* ========== Custom Select (radio-based) ========== */
  .month-select { display: none; } /* hide radios */
  
  .css-select-box {
    display: block; width: 100%;
    padding: 12px 14px;
    background: transparent; color: #fff;
    border: 1px solid var(--border-0);
    border-radius: 8px; cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease, transform .08s ease;
  }
  .css-select-box:hover   { transform: translateY(-1px); border-color: rgba(255,255,255,.25); }
  .css-select-box:active  { transform: translateY(0); }
  
  /* checked state (adjacent or general sibling) */
  .month-select:checked + .css-select-box,
  .month-select:checked ~ .css-select-box {
    border-color: var(--brand-green-500);
    background: rgba(48,133,252,.06);
    box-shadow: 0 0 0 .2rem rgba(48,133,252,.15);
  }
  
  .css-select-box h4,
  .css-select-box h6 { margin: 0; line-height: 1.25; }
  .css-select-box h6 { opacity: .85; }
  .select-row { row-gap: .75rem; }
  




  .homehead {
    padding: 100px 0;
    text-align: center;
    color: #f5f5f5;
    /* background: linear-gradient(180deg, #0d0a22, #05030f); */
  }
  
  .homehead h1 {
    font-weight: 800;
    font-size: clamp(2.2rem, 3.2vw + 1rem, 4rem);
    line-height: 1.2;
    margin-bottom: 20px;
  }
  
  .homehead h1 .accent {
    background: linear-gradient(90deg, #7a5cff, #9b5df5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  .homehead p {
    color: #b7bac2;
    max-width: 700px;
    margin: 0 auto 30px;
    line-height: 1.6;
  }
  
  .btn-primary {
    background: #7a5cff;
    border-color: #7a5cff;
    border-radius: 12px;
    padding: 12px 28px;
    font-weight: 600;
  }
  
  .btn-primary:hover {
    background: #6b4cf7;
    border-color: #6b4cf7;
  }
  
  .btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #fff;
    padding: 12px 28px;
    font-weight: 600;
  }
  
  .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.15);
  }
  
  .hero-shot {
    max-width: 900px;
    margin: 50px auto 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  }
  
  .hero-shot img {
    width: 100%;
    border-radius: 12px;
  }
  

.abuselink {
  text-align: center;
  margin-top: 60px;

}

.abuselink a {
  color: var(--text-0);
  font-weight: bold;
  text-decoration: underline;
}

.info-header {
  padding-bottom: 50px;
}

#faq h5 {
  font-weight: 900;
}

.card-plan h3 {

}

.card-plan{
}

.plan-title{ color:#efcd8f; font-weight:600; }
.plan-title2{ color:#8b5dbc; font-weight:600; }

.card-plan .text-muted{ color:#74717f !important; line-height:1.7; }

/* price */
.mail-price{ display:flex; align-items:baseline; gap:8px; }
.mail-price .cur{ font-size:22px; opacity:.9; }
.mail-price .price{ font-size:56px; font-weight:800; line-height:1; }
.mail-price .mo{ font-size:16px; opacity:.85; }

/* divider */
.line{ border-color:#262433; opacity:1; }

/* features (check.webp icons) */
.plan-list .feature-item{ color:#c9c7d3; }