/* ============================================================
   Miyav Cloud — WHMCS theme.css
   Consolidates: index.html inline styles + login.html + register.html
   inline styles into one stylesheet so we no longer depend on the
   Tailwind CDN at runtime. Tailwind utility classes that the design
   actually uses are reproduced here as plain CSS, scoped to .mv-* or
   semantic class names where appropriate.

   This file is loaded on every public/auth page (header.tpl).
   For the authenticated dashboard, dashboard.css (the original
   shared.css) is layered on top.
   ============================================================ */

/* ── design tokens ────────────────────────────────────────── */
:root {
    --ink:       #2F1C6A;
    --ink2:      #1D1E20;
    --muted:     #727586;
    --violet:    #673DE6;
    --violet2:   #8C85FF;
    --mint:      #00B090;
    --mint2:     #00B67A;
    --lav:       #F4F5FF;
    --lav2:      #EBE4FF;
    --stroke:    #D5DFFF;
    --orange:    #FD6020;
    --sun:       #F79E1B;
    --rose:      #E11D48;
    --bg:        #ffffff;

    --shadow-card: 0 1px 2px rgba(47, 28, 106, .06), 0 8px 24px rgba(47, 28, 106, .06);
    --shadow-pop:  0 30px 60px -20px rgba(103, 61, 230, .35);
    --shadow-bar:  0 4px 10px rgba(0, 0, 0, .06);

    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-2xl: 20px;
    --radius-3xl: 28px;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; padding: 0; margin: 0; }

/* ── containers ───────────────────────────────────────────── */
.mv-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ── top strip ────────────────────────────────────────────── */
.mv-topstrip {
    background: var(--ink);
    color: #fff;
    font-size: 14px;
}
.mv-topstrip-inner {
    max-width: 1280px; margin: 0 auto; padding: 10px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mv-topstrip-status { display: flex; align-items: center; gap: 8px; }
.mv-topstrip-status .dot {
    width: 8px; height: 8px; border-radius: 999px; background: var(--mint);
    display: inline-block;
}
.mv-topstrip-links { display: flex; align-items: center; gap: 20px; opacity: .9; }
.mv-topstrip-links a:hover { text-decoration: underline; }
@media (max-width: 900px) { .mv-topstrip-links { display: none; } }

/* ── sticky marketing nav ─────────────────────────────────── */
.mv-nav {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-bar);
}
.mv-nav-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 24px;
    height: 72px; display: flex; align-items: center; justify-content: space-between;
}
.mv-nav-left { display: flex; align-items: center; gap: 40px; }
.mv-logo { display: inline-flex; align-items: center; gap: 8px; }
.mv-logo-text { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.mv-logo-text .accent { color: var(--violet); }
.mv-nav-links {
    display: none; align-items: center; gap: 4px;
    font-size: 15px; font-weight: 500; color: var(--ink2);
}
.mv-nav-links a { padding: 8px 12px; border-radius: 6px; }
.mv-nav-links a:hover { background: var(--lav); }
.mv-nav-links a.is-accent { color: var(--violet); font-weight: 700; }
@media (min-width: 1024px) { .mv-nav-links { display: flex; } }
.mv-nav-actions { display: flex; align-items: center; gap: 12px; }
.mv-nav-link {
    display: none; font-size: 14px; font-weight: 500; color: var(--ink2);
}
.mv-nav-link:hover { color: var(--violet); }
@media (min-width: 768px) { .mv-nav-link { display: inline; } }

/* ── buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 700; border-radius: 8px; line-height: 1; white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--violet); color: #fff; padding: 14px 22px; }
.btn-primary:hover { background: #5731c2; box-shadow: 0 12px 24px -10px rgba(103, 61, 230, .55); }
.btn-mint { background: var(--mint); color: #fff; padding: 14px 22px; }
.btn-mint:hover { background: #009779; }
.btn-ghost { border: 2px solid var(--ink); color: var(--ink); padding: 12px 18px; background: transparent; }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-social { background: #fff; color: var(--ink); padding: 12px 18px; box-shadow: inset 0 0 0 1px var(--stroke); }
.btn-social:hover { background: var(--lav); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }

/* ── pills / badges ───────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    font-weight: 700; font-size: 14px;
}
.pill-violet { background: var(--lav2); color: var(--violet); }
.pill-mint   { background: rgba(0, 176, 144, .15); color: var(--mint); }
.pill .dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; display: inline-block; }

/* ── auth shell (login/register) ──────────────────────────── */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .auth-shell.left-brand  { grid-template-columns: 1fr 1.05fr; }
    .auth-shell.right-brand { grid-template-columns: 1.05fr 1fr; }
}
.auth-shell .brand-panel {
    position: relative;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    color: #fff;
    background: var(--ink);
    overflow: hidden;
}
@media (min-width: 1024px) {
    .auth-shell .brand-panel { display: flex; padding: 56px; }
}
.auth-shell .form-panel {
    display: flex; flex-direction: column; min-height: 100vh;
}
.auth-shell .form-panel .auth-grain {
    flex: 1; display: flex; flex-direction: column;
    background-image:
        radial-gradient(1100px 600px at 110% -10%, rgba(103, 61, 230, .12), transparent 60%),
        radial-gradient(800px 500px at -10% 110%, rgba(0, 176, 144, .12), transparent 60%);
}
.auth-shell .form-panel header {
    padding: 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.auth-shell .form-panel main {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.auth-shell .form-panel .auth-form { width: 100%; max-width: 440px; }
.auth-shell .form-panel footer {
    padding: 20px 24px;
    font-size: 12px; color: var(--muted);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.auth-shell .form-panel footer a { color: inherit; }
.auth-shell .form-panel footer a:hover { color: var(--ink); }

.brand-panel .grid-bg {
    position: absolute; inset: 0; opacity: .06;
    background-image:
        linear-gradient(rgba(213, 223, 255, .6) 1px, transparent 1px),
        linear-gradient(90deg, rgba(213, 223, 255, .6) 1px, transparent 1px);
    background-size: 32px 32px;
}
.brand-panel .blur-blob {
    position: absolute; border-radius: 999px; filter: blur(60px);
}
.brand-panel .blur-blob.violet { top: -160px; right: -160px; width: 480px; height: 480px; background: rgba(103, 61, 230, .4); }
.brand-panel .blur-blob.mint   { bottom: -128px; left: -96px; width: 420px; height: 420px; background: rgba(0, 176, 144, .25); }
.brand-panel > * { position: relative; z-index: 1; }

/* ── form fields ──────────────────────────────────────────── */
.field-label {
    font-size: 12px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .08em; display: block;
}
.field-wrap { position: relative; margin-top: 6px; }
.field-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none;
}
.field {
    width: 100%; padding: 14px 16px 14px 44px;
    border-radius: 12px; background: #fff; color: var(--ink);
    font-family: inherit; font-size: 15px; font-weight: 500;
    box-shadow: inset 0 0 0 1px var(--stroke);
    border: 0; outline: none;
    transition: box-shadow .15s ease;
}
.field:focus { box-shadow: inset 0 0 0 2px var(--violet), 0 0 0 4px rgba(103, 61, 230, .12); }
.field.invalid { box-shadow: inset 0 0 0 2px var(--orange); }
.field-eye {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    padding: 6px; color: var(--muted);
}
.field-eye:hover { color: var(--ink); }
.field-error {
    color: var(--orange); font-size: 12px; font-weight: 600; margin-top: 6px;
    display: none;
}
.field-error.show, .field-error.is-shown { display: block; }

/* select reset */
select.field {
    padding-left: 44px; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23727586' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

/* checkboxes */
.checkbox {
    width: 18px; height: 18px; flex: none;
    border-radius: 6px;
    box-shadow: inset 0 0 0 2px var(--stroke);
    appearance: none; -webkit-appearance: none; cursor: pointer;
    transition: all .15s;
}
.checkbox:checked {
    background: var(--violet);
    box-shadow: inset 0 0 0 2px var(--violet);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.5L4.8 9 10 3.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

/* password strength */
.strength-bar { height: 6px; border-radius: 999px; background: var(--lav2); overflow: hidden; margin-top: 8px; }
.strength-fill { height: 100%; width: 0%; background: var(--orange); transition: width .25s, background .25s; border-radius: 999px; }

/* ── footer (marketing) ───────────────────────────────────── */
.mv-footer { background: var(--lav); border-top: 1px solid var(--stroke); }
.mv-footer-inner { max-width: 1280px; margin: 0 auto; padding: 64px 24px; }
.mv-footer-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .mv-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.mv-footer h4 { font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.mv-footer ul li { margin-bottom: 8px; font-size: 14px; color: var(--muted); }
.mv-footer ul li a:hover { color: var(--ink); }
.mv-footer .compliance { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; font-size: 12px; color: var(--muted); }
.mv-footer .compliance span {
    padding: 4px 8px; border-radius: 4px; background: #fff;
    box-shadow: inset 0 0 0 1px var(--stroke);
}
.mv-footer .colophon {
    margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--stroke);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 16px; font-size: 12px; color: var(--muted);
}
.mv-footer .colophon .pay { display: flex; gap: 12px; align-items: center; }
.mv-footer .colophon .pay span {
    padding: 4px 8px; border-radius: 4px; background: #fff;
    font-weight: 700; color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--stroke);
}

/* ── animations ───────────────────────────────────────────── */
.pulse-dot { animation: pulseDot 2.4s ease-in-out infinite; }
@keyframes pulseDot {
    0%, 100% { transform: scale(1);    opacity: .9; }
    50%      { transform: scale(1.08); opacity: 1; }
}
.float { animation: float 6s ease-in-out infinite; }
.float.delay { animation-delay: 1.5s; }
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* ── toast ────────────────────────────────────────────────── */
.toast {
    position: fixed; right: 24px; bottom: 24px;
    background: var(--ink); color: #fff;
    padding: 14px 18px; border-radius: 12px;
    box-shadow: 0 20px 40px rgba(47, 28, 106, .3);
    transform: translateY(20px); opacity: 0;
    transition: all .25s ease;
    z-index: 60;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── helpers (kept tiny — sidebar uses its own dashboard.css) ─ */
.hidden { display: none !important; }
@media (min-width: 768px) { .md-hidden { display: none !important; } .md-show { display: initial !important; } }
@media (min-width: 1024px) { .lg-hidden { display: none !important; } .lg-show { display: initial !important; } }
.mt-2 { margin-top: 8px; }  .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-violet { color: var(--violet); }
.text-mint { color: var(--mint); }
.text-orange { color: var(--orange); }
.text-ink { color: var(--ink); }
.text-sm { font-size: 14px; } .text-xs { font-size: 12px; }
.font-bold { font-weight: 700; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.divider-or {
    display: flex; align-items: center; gap: 16px;
    margin: 24px 0; font-size: 12px; color: var(--muted);
    text-transform: uppercase; letter-spacing: .08em;
}
.divider-or::before, .divider-or::after {
    content: ""; flex: 1; height: 1px; background: var(--stroke);
}

/* ── WHMCS-injected helpers ───────────────────────────────── */
/* WHMCS prints global system messages with these classes; map them
   to our toast / pill so they don't look unstyled before Phase 2. */
.alert {
    padding: 12px 16px; border-radius: 12px; font-size: 14px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-card);
}
.alert-success { background: rgba(0, 176, 144, .12);  color: var(--mint2); }
.alert-info    { background: var(--lav2);              color: var(--violet); }
.alert-warning { background: rgba(247, 158, 27, .14); color: #A26404; }
.alert-danger  { background: rgba(225, 29, 72, .10);  color: var(--rose); }

/* honour reduced motion */
@media (prefers-reduced-motion: reduce) {
    .float, .pulse-dot, .toast { animation: none !important; transition: none !important; }
}