:root {
    --bg: #f7f8fa;
    --card: #ffffff;
    --text: #1a1d23;
    --muted: #6b7280;
    --border: #e5e7eb;
    --accent: #fecc00;
    --accent-dark: #d9ad00;
    --danger: #dc2626;
    --success: #16a34a;
    --radius: 10px;
    --logo-purple: #430161; /* Ekameva Media footer logo wordmark - swapped to white in dark mode below, see web/includes/footer.php */
}

html[data-theme="dark"] {
    --bg: #14161a;
    --card: #1c1f26;
    --text: #e8eaed;
    --muted: #9aa1ac;
    --border: #2e323b;
    --accent: #fecc00;
    --accent-dark: #d9ad00;
    --danger: #f87171;
    --success: #4ade80;
    --logo-purple: #ffffff;
}

::-webkit-scrollbar { background: transparent; width: 4px; height: 4px; cursor: pointer; }
::-webkit-scrollbar:hover { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { display: none; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px;}

/* A few things use flat colors rather than variables (so they read correctly
   as "light chips" even on a light page) - give them dark-appropriate
   equivalents rather than leaving them jarringly bright in dark mode. */
html[data-theme="dark"] .alert-error { background: #3f1d1d; border-color: #5b2a2a; }
html[data-theme="dark"] .alert-success { background: #16301f; border-color: #1f4a2c; }
html[data-theme="dark"] .badge-active { background: #16301f; }
html[data-theme="dark"] .badge-paused { background: #3a2f0f; color: #fde68a; }
html[data-theme="dark"] .badge-suspended { background: #3f1d1d; }
html[data-theme="dark"] .pricing-banner { background: #3a2f0f; border-color: #5b4a1a; color: #fde68a; }
html[data-theme="dark"] .price-card-featured { box-shadow: 0 4px 16px rgba(0,0,0,0.4); }

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    transition: background-color .2s, color .2s;
    /* Safety net: if any element (a wide table, an unbroken code/API-key
       string, etc.) ever computes wider than the viewport, this stops the
       whole page from panning/scrolling sideways with it - the offending
       element just gets visually clipped there instead, while its own
       overflow-x: auto (see .table-scroll / .code-box) still lets people
       scroll *that one element* to see the rest of it. */
    overflow-x: hidden;
}

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.theme-toggle-btn:hover { background: var(--bg); }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.brand { font-weight: 700; font-size: 18px; color: var(--text); text-decoration: none; display: inline-flex; align-items: }
.brand span { color: var(--accent-dark); letter-spacing: -2px;}
.brand img { margin-right: 5px; }

.topbar nav a {
    margin-left: 18px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
}

.user-email { margin-left: 18px; color: var(--muted); font-size: 13px; }

.btn-primary-sm, .btn {
    display: inline-block;
    background: var(--accent);
    color: #1a1d23;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.btn-secondary {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-danger { background: var(--danger); color: #fff; }

.container { max-width: 1200px; min-height: 70vh; margin: 0 auto; padding: 32px 20px 60px; }

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
    transition: background-color .2s, border-color .2s;
}

.card h2 { margin-top: 0; font-size: 18px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; margin-top: 14px; }

input, select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
}

.help-text { font-size: 12px; color: var(--muted); margin-top: 4px; }

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}
.alert-error { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: var(--success); border: 1px solid #bbf7d0; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }

/* Wrap any <table> that could have more columns/content than a phone
   screen can fit (dashboard's site list, billing's plan table) in
   <div class="table-scroll"> - lets the table scroll horizontally on its
   own, inside the card's padding, instead of the table forcing the card
   (and the whole page) wider than the viewport. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.table-scroll table { margin: 0; }

.stat-row { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.stat-box {
    flex: 1;
    min-width: 140px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}
.stat-box .num { font-size: 26px; font-weight: 700; }
.stat-box .label { color: var(--muted); font-size: 13px; }

.code-box {
    background: #0f1115;
    color: #d9e0e8;
    padding: 14px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 13px;
    overflow-x: auto;
    /* The API key line in particular is one long unbroken token with no
       spaces to wrap at - without this, some mobile browsers let that single
       token push the box (and everything around it) wider than the screen
       instead of just scrolling inside it. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.code-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.code-row .code-box {
    flex: 1;
    min-width: 0; /* allow shrinking so overflow-x scroll still works inside a flex row */
}
.btn-copy {
    flex-shrink: 0;
    padding: 0 16px;
    background: var(--accent);
    color: #222;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background-color .15s;
}
.btn-copy:hover { background: var(--accent-dark); }
.btn-copy.btn-copy-done { background: var(--success); color: #fff; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.badge-active { background: #f0fdf4; color: var(--success); }
.badge-paused { background: #fef9c3; color: #854d0e; }
.badge-suspended { background: #fef2f2; color: var(--danger); }

/* ============================== NOTIFICATION BELL ============================== */
.notif-bell-wrap { position: relative; display: inline-block; margin-left: 18px; }

.notif-bell {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    color: var(--text);
}
.notif-bell-icon { font-size: 18px; }

.notif-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 999px;
    min-width: 16px;
    text-align: center;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-width: 88vw;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 50;
    overflow: hidden;
}

.notif-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.notif-mark-all {
    background: none;
    border: none;
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.notif-dropdown-list { max-height: 320px; overflow-y: auto; }

.notif-empty { padding: 20px 14px; color: var(--muted); font-size: 13px; text-align: center; margin: 0; }

.notif-item {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }

.notif-item-unread { background: rgba(254,204,0,0.08); }
.notif-item-unread::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-dark);
    margin-right: 6px;
    vertical-align: middle;
}

.notif-item-title { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.notif-item-message { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }

.footer { text-align: center; padding: 20px; color: var(--muted); font-size: 12px; }
.footer-logo-link { display: inline-block; line-height: 0; } /* avoids the usual few-px whitespace gap under an inline <svg> */

/* ============================== INSTALLED-APP CHROME (PWA) ============================== */

/* Hidden by default (normal browser tab); shown by JS in header.php only
   when running as an installed app (standalone / window-controls-overlay),
   since that's the only case where there's no browser-drawn close button
   to rely on already. */
.app-close-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.app-close-btn:hover { background: var(--danger); color: #fff; }
/* Only shown for plain "standalone" installs (no native close button exists
   at all there). In WCO mode the OS already draws a real close button in
   the corner, so showing our own next to/under it would be both redundant
   and exactly the kind of overlap this fix is for - see below. */
html.evt-pwa-standalone .app-close-btn { display: inline-flex; }

/* Window Controls Overlay (installed Desktop PWA, Chrome/Edge on Windows &
   ChromeOS): the OS still draws its own minimize/maximize/close buttons in
   the corner, but everything else that would normally be a plain OS title
   bar (page title, no styling) is handed to us to draw - so the topbar
   below becomes the title bar itself, and its background is draggable to
   move the window (every clickable control inside is explicitly excluded
   from that drag region, or nothing in it would be clickable).

   The bar's background still reaches full width (100%) edge to edge, but
   its *content* is padded away from BOTH reserved corners - padding-left
   for the small icon area the OS reserves there, and padding-right for the
   minimize/maximize/close strip. Skipping the right padding (as an earlier
   version of this did) lets our own nav controls render underneath that
   strip - the OS then draws its buttons on top of them every time, hiding
   whatever of our header was in that corner. z-index can't fix this: those
   buttons aren't part of the page's stacking context at all, they're drawn
   by the browser shell itself, unconditionally above all page content - the
   only real fix is keeping our own content out of that corner in the first
   place. */
html.evt-pwa-wco .topbar {
    -webkit-app-region: drag;
    app-region: drag;
    padding-left: max(16px, env(titlebar-area-x, 0px));
    padding-right: max(16px, calc(100% - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100%)));
    width: 100%;
    min-height: env(titlebar-area-height, 40px);
}
html.evt-pwa-wco .topbar .brand,
html.evt-pwa-wco .topbar nav,
html.evt-pwa-wco .topbar nav * {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}

/* Plain "standalone" installs (Android, or Desktop browsers without WCO
   support e.g. Chrome on macOS) don't get a titlebar-area to draw into, but
   still benefit from the explicit close button added above since some of
   these hosts show no window chrome of their own at all. */
.bottom-bar { display: block; padding-top: 10px; text-align: center; border-top: 1px solid #000; margin-top: 20px; }

/* ============================== HERO ============================== */
.hero {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 40px 0 60px;
    flex-wrap: wrap;
}
.hero-copy { flex: 1; min-width: 280px; }
.hero-copy h1 { font-size: 38px; line-height: 1.2; margin-bottom: 16px; }
.hero-copy h1 em { color: var(--accent-dark); font-style: normal; }
.hero-sub { color: var(--muted); font-size: 16px; max-width: 460px; margin-bottom: 24px; }
.hero-note { font-size: 13px; color: var(--muted); margin-top: 12px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.hero-art { flex: 1; min-width: 260px; max-width: 420px; margin: 0 auto; }
.hero-art img { width: 100%; height: auto; }

/* ============================ BENEFITS ============================ */
.section-title {
    text-align: center;
    font-size: 26px;
    margin-bottom: 32px;
}

.benefits { padding: 40px 0; }

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.benefit-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
}
.benefit-grid-4col {
    grid-template-columns: repeat(4, 1fr);
}
.benefit-icon { font-size: 26px; display: block; margin-bottom: 10px; }
.benefit-item h3 { font-size: 16px; margin: 0 0 8px; }
.benefit-item p { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0; }

@media (max-width: 900px) {
    .benefit-grid-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .benefit-grid-4col {
        grid-template-columns: 1fr;
    }
}

/* ============================= PRICING ============================= */
.pricing { padding: 50px 0 60px; }
.pricing-banner {
    background: #fff7d6;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    padding: 14px 20px;
    text-align: center;
    font-size: 15px;
    margin-bottom: 36px;
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: 720px;
    margin: 0 auto;
}
.price-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    position: relative;
}
.price-card-featured {
    border: 2px solid var(--accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.price-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--accent);
    color: #1a1d23;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}
.price-card h3 { font-size: 20px; margin: 0 0 4px; }
.price-tagline { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.price-amount { font-size: 32px; font-weight: 700; margin-bottom: 5px; }
.price-amount span { font-size: 14px; font-weight: 400; color: var(--muted); }
.price-features { list-style: none; padding: 0; margin: 0 0 22px; font-size: 14px; }
.price-features li {
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.price-features li:last-child { border-bottom: none; }

@media (max-width: 640px) {
    .hero { flex-direction: column-reverse; text-align: center; }
    .hero-copy { text-align: center; }
    .hero-sub { margin: 0 auto 24px; }
}

/* ---------------- Toggle switches (e.g. site_form.php email content) ---------------- */
.field-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 16px;
    margin-top: 16px;
}
.field-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color .15s;
}
.field-toggle-row:has(input:checked) {
    border-color: var(--accent);
}
.field-toggle-row span.field-label {
    font-size: 14px;
    color: var(--text);
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--border);
    transition: background-color .15s;
    border-radius: 999px;
}
.toggle-switch .slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: transform .15s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.toggle-switch input:checked + .slider {
    background-color: var(--accent);
}
.toggle-switch input:checked + .slider::before {
    transform: translateX(18px);
}
.toggle-switch input:focus-visible + .slider {
    outline: 2px solid var(--accent-dark);
    outline-offset: 2px;
}