/* =========================
    MailForwarder Pro — Unified App + Landing CSS
    ========================= */

/* ---------- Design tokens ---------- */
:root{
    /* Base palette */
    --bg-900:#0A0D12;
    --bg-800:#101624;
    --bg:#0b0f14;

    --ink:#EAF0FF;
    --muted:#8EA3C0;

    --grid:#162235;        /* grid lines */
    --panel-stroke:#1b2740;
    --panel-shadow:0 10px 40px rgba(0,0,0,.35);

    /* Brand / accents */
    --accent:#EA4B71;      /* n8n-like pink */
    --accent-2:#8a6bff;    /* violet */
    --accent-soft:linear-gradient(90deg, var(--accent), #ff7d96);
    --primary-grad:linear-gradient(90deg,#5ad1ff,#8a6bff);

    /* Surfaces */
    --card-bg:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    --input-bg:#0f1622;

    /* Strokes */
    --stroke:#1b2740;
    --stroke-2:#1e2735;

    /* Utility */
    --radius-12:12px;
    --radius-16:16px;
    --radius-18:18px;
    --radius-pill:999px;
}

/* ---------- Base ---------- */
html,body{
    height:100%;
    background:
        radial-gradient(1200px 700px at 30% -10%, #121a26, transparent),
        var(--bg-900);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Subtle grid backdrop */
body.bg-grid::before,
body::before{
    content:""; position:fixed; inset:0; z-index:-1;
    background:
        linear-gradient(var(--grid) 1px, transparent 1px) 0 0/24px 24px,
        linear-gradient(90deg,var(--grid) 1px, transparent 1px) 0 0/24px 24px;
    opacity:.25;
    -webkit-mask-image: radial-gradient(1000px 600px at 20% -10%, black, transparent 60%);
            mask-image: radial-gradient(1000px 600px at 20% -10%, black, transparent 60%);
}

/* Links */
a{color:#8fd3ff; text-decoration:none}
a:hover{text-decoration:underline}

/* Containers */
/* Increased max-width slightly for modern screens */
.container{ max-width:1200px; }

/* ---------- Components ---------- */

/* Navbar */
.navbar{
    background:rgba(10,14,20,0.8);
    backdrop-filter: blur(8px);
    border-bottom:1px solid #1a2230;
}

/* Tag / Chip */
.tag{
    background:#0d1520;
    border:1px solid #1f2a3a;
    border-radius:var(--radius-pill);
    padding:.2rem .6rem;
    color:var(--muted);
    font-size:.8rem;
}

/* Cards (Bootstrap classes: p-4 and h-100 used in HTML) */
.card{
    background:var(--card-bg);
    border:1px solid var(--panel-stroke);
    border-radius:var(--radius-16);
    box-shadow:var(--panel-shadow);
    color:var(--ink);
    padding:1.5rem; /* Default padding for all .card */
}

/* Use this class ONLY when you truly want a card to stretch in a grid/column */
.card-fill{ height:100%; }

/* Compact welcome bar */
.card-compact { border-radius: var(--radius-12); }
.card-compact h5 { font-size: 1rem; line-height: 1.2; }
.badge-soft { background: rgba(255,255,255,.06); border: 1px solid var(--panel-stroke); }

/* Quick actions */
.quick-actions .btn { padding: .35rem .6rem; font-weight: 600; }
.quick-actions .btn.btn-outline-light { border-color:#2a395d !important; }

/* Buttons */
.btn-primary{
    background:var(--primary-grad);
    border:0;
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-outline-light{
    border-color:#2a395d !important; color:var(--ink) !important;
}
.btn-outline-light:hover{ background:#0f1726 !important; text-decoration:none; }

/* Inputs */
input,select,textarea{
    background:var(--input-bg) !important;
    color:var(--ink) !important;
    border:1px solid var(--stroke-2) !important;
}
.form-label{ color:#cfe3ff; }

/* Tables */
.table{ color:var(--ink); }
.table thead{ color:#9db0d8; }
.table.table-dark{
    --bs-table-bg: rgba(255,255,255,.02);
    --bs-table-striped-bg: rgba(255,255,255,.04);
    --bs-table-striped-color: var(--ink);
    --bs-table-hover-bg: rgba(255,255,255,.05);
    --bs-table-hover-color: var(--ink);
    border-color:var(--panel-stroke);
}

/* HR */
hr{ border-color:var(--stroke-2); }

/* Footer */
.footer{ border-top:1px solid var(--panel-stroke); padding:22px 0; display:flex; align-items:center }
.footer .container{ display:flex; justify-content:space-between; align-items:center }
.footer .links{ display:flex; gap:14px }
.footer a{ color:#a9bfdd }
.footer a:hover{ color:#d5e7ff }
.tiny-note{ color:#9fb4d2; margin-top:8px; font-size:.85rem }

/* Muted on light cards inside light containers (if any) */
.light-container .text-muted { color:#adb5bd !important; }

/* ---------- Landing (n8n-inspired) ---------- */

/* Hero */
.hero{
    padding-top: 72px; 
    padding-bottom: 32px;
    background:
        radial-gradient(700px 300px at 15% -5%, rgba(234,75,113,.25), transparent 60%),
        radial-gradient(900px 500px at 80% 0%, rgba(234,75,113,.15), transparent 70%);
}
.badge-accent{
    display:inline-block; padding:.25rem .6rem; border-radius:var(--radius-pill); font-size:.75rem;
    background:rgba(234,75,113,.15); color:#ffb8c6; border:1px solid rgba(234,75,113,.35);
}
.hero-title{ font-size: clamp(1.8rem, 2.6vw + 1rem, 3.2rem); line-height:1.1; margin:14px 0; }
.hero-sub{ color:var(--muted); max-width:55ch; }

/* CTA buttons */
.btn-cta, .btn-ghost{
    display:inline-block; padding:.8rem 1.4rem; border-radius:14px; font-weight:600; border:1px solid transparent;
    transition:transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-cta{ background: var(--accent-soft); color:#0b0e16; border-color: transparent; box-shadow: 0 10px 24px rgba(234,75,113,.25); }
.btn-cta:hover{ transform: translateY(-2px); box-shadow:0 14px 30px rgba(234,75,113,.35); text-decoration:none }
.btn-ghost{ background: transparent; border-color:#2a395d; color:var(--ink) }
.btn-ghost:hover{ background:#0f1726; text-decoration:none; transform: translateY(-1px); }

/* Code UI Card */
.ui-card{
    background: var(--card-bg);
    border:1px solid var(--panel-stroke);
    border-radius:18px;
    /* Removed custom box-shadow since we're using Bootstrap's shadow-lg now */
}
.ui-top{ padding:.6rem .8rem; border-bottom:1px solid var(--panel-stroke); display:flex; gap:.35rem }
.dot{width:10px; height:10px; border-radius:50%}
.dot.red{background:#ff6b6b}.dot.amber{background:#f9c846}.dot.green{background:#3ddc97}
.ui-body{ padding:1.2rem 1.4rem }
.code{
    background:#0b1220; color:#cfe3ff; padding:1rem; border-radius:12px; border:1px solid var(--panel-stroke);
    overflow:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.code .cmnt{ color:#86a2c5 }

/* Trust strip */
.strip{ padding:20px 0 8px; }
/* Replaced strip-grid with flex-based CSS for better responsiveness, though Bootstrap row handles it now */
.chip{
    background: rgba(255,255,255,.04); border:1px solid var(--panel-stroke); border-radius:999px;
    padding:.4rem .7rem; text-align:center; color:#b7c6df; font-size:.9rem;
    transition: background .2s ease, border-color .2s ease;
}
.chip:hover{
    background: rgba(255,255,255,.08);
    border-color: #3b4e6a;
}
@media (max-width: 900px){
    /* Removed old strip-grid styles */
}

/* Generic sections */
.section{ padding:56px 0; }
.section-title{ font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem); margin-bottom:18px }

/* Feature/Step cards */
.card.fx h5{ margin-bottom:.35rem }
.card.fx p{ color:var(--muted); margin-bottom:0 }
.step{ position:relative; padding-top:1.4rem }
.step .stepnum{
    position:absolute; top:.8rem; right:.8rem; width:30px; height:30px; border-radius:8px; /* Slightly larger dot */
    display:grid; place-items:center; font-weight:700; color:#0b0e16;
    background: var(--accent-soft);
}

/* Pricing */
.pricing{ padding: 2rem !important; } /* Override default card padding for pricing */
.pricing .head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem }
.pill{ background:rgba(234,75,113,.15); color:#ffb8c6; border:1px solid rgba(234,75,113,.35); padding:.2rem .5rem; border-radius:999px; font-size:.8rem }
/* New style for the primary plan's pill */
.pill.primary-pill {
    background: rgba(138, 107, 255, 0.2); /* Violet tint */
    color: #c7bfff;
    border: 1px solid rgba(138, 107, 255, 0.5);
}
.pricing .muted{ color:var(--muted) }
/* Replaced ul/li with list-unstyled and margin-bottom on li in HTML */
.pricing .price{ font-size:1.6rem; font-weight:800; margin:.2rem 0 .8rem } /* Increased bottom margin */
.pricing .price span{ font-size:.9rem; color:var(--muted); margin-left:.2rem }

/* Highlight the primary pricing card */
.pricing.primary{ 
    border-color: var(--accent); /* Used the main accent color for a stronger border */
    box-shadow: 0 10px 28px rgba(234,75,113,.25); /* Increased shadow opacity */
    background: linear-gradient(180deg, rgba(234,75,113,.08), rgba(255,255,255,.02)); /* Subtle accent gradient */
}

/* FAQ: Bootstrap Accordion Overrides */
.accordion{
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--panel-stroke);
    --bs-accordion-border-radius: var(--radius-12);
    --bs-accordion-border-width: 1px;
    --bs-accordion-active-bg: rgba(255,255,255,.05);
    --bs-accordion-btn-color: var(--ink);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-color: var(--ink);
    --bs-accordion-padding-y: 1rem;
    --bs-accordion-padding-x: 1.25rem;
}
.accordion-item{
    background: rgba(255,255,255,.03);
    margin-bottom: .6rem;
}
.accordion-button{
    background: transparent !important;
    font-weight: 600;
}
.accordion-button:not(.collapsed){
    color: var(--ink);
    background: rgba(255,255,255,.05) !important;
}
.accordion-button::after{
    filter: invert(1);
}
.accordion-body{
    color: var(--muted);
    padding-top: 0;
}
.accordion-body p {
    margin-bottom: 0;
}
/* Removed old .faq styles */


/* Final cleanup - remove unused helper class */
.card-content-height {
    height: auto !important;
    min-height: 0 !important;
}