﻿/* ---------- Auth page helpers (login / sign up / reset) ---------- */
.app-alert { padding:12px 15px; border-radius:10px; font-size:14px; margin-bottom:18px;
    border:1px solid transparent; font-family:"JetBrains Mono",ui-monospace,monospace; }
.app-alert-error { background:rgba(255,90,90,.10); border-color:rgba(255,90,90,.40); color:#ffb3b3; }
.app-alert-ok    { background:rgba(46,204,113,.10); border-color:rgba(46,204,113,.40); color:#a8f0c6; }
.app-field-error { display:block; color:#ff6b6b; font-size:12.5px; margin-top:6px; }
.app-row-between { display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin:4px 0 18px; font-size:13px; flex-wrap:wrap; }
.app-check { display:inline-flex; align-items:center; gap:8px; }
.app-check input { width:auto; }
.app-alt {margin-top: 20px;font-size: 14px;display: flex;justify-content: center; align-items: center; gap: 6px; }

/* ==================================================================
   ACCOUNT DASHBOARD
================================================================== */
.dash-section {
    --d-bg:#0e0e10; --d-panel:#000000; --d-elev:#100f0f; --d-border:#2a2a30;
    --d-text:#f4f4f5; --d-text2:#999999; --d-muted:#8b8b93; --d-muted2:##370f17;   --d-accent:#630100; --d-accent-2:#8f2220;
    --d-ok:#2ecc71; --d-warn:#f5a623;
    font-family:"JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
    color:var(--d-text);
    padding:32px 20px 80px;
}
.dash { max-width:1120px; margin:0 auto; }

/* ---- Top navigation panel ---- */
.dash-topbar {
    display:flex; align-items:center; gap:20px;
    background:var(--d-panel); border:1px solid var(--d-border);
    border-radius:16px; padding:14px 18px; margin-bottom:22px; flex-wrap:wrap;
}
.dash-brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; }
.dash-dot { width:12px; height:12px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, var(--d-accent-2), var(--d-accent)); box-shadow:0 0 12px rgba(213,43,41,.6); }
.dash-brand-sub { font-size:11px; letter-spacing:2px; color:var(--d-muted); text-transform:uppercase; padding-left:4px; }

.dash-tabs { display:flex; gap:4px; margin-left:8px; flex-wrap:wrap; }
.dash-tab {
    padding:10px 16px; border-radius:10px; font-size:14px; color:var(--d-muted);
    text-decoration:none; transition:background .15s,color .15s; white-space:nowrap;
}
.dash-tab:hover { color:var(--d-text); background:var(--d-elev); }
.dash-tab.is-active { color:#fff; background:var(--d-accent); }

.dash-user { margin-left:auto; display:flex; align-items:center; gap:12px; }
.dash-user-meta { display:flex; flex-direction:column; text-align:right; line-height:1.3; }
.dash-user-name { font-size:13px; }
.dash-user-mail { font-size:11px; color:var(--d-muted); }
.dash-avatar { width:40px; height:40px; border-radius:25%; display:flex; align-items:center; justify-content:center;
    font-weight:900; color:#fff; background:linear-gradient(135deg,var(--d-accent),#7a1513); }
.dash-logout button { width:80px; height:40px; border-radius:10px; cursor:pointer; font-size:14px;
    color:var(--d-text2); background:var(--d-elev); border:1px solid #23233f; }
.dash-logout button:hover { border-color:#451e29; }
.dash-logout { margin:0; }

/* ---- Alerts ---- */
.dash-alert { padding:13px 16px; border-radius:12px; font-size:14px; margin-bottom:18px; border:1px solid transparent; }
.dash-alert-ok { background:rgba(46,204,113,.10); border-color:rgba(46,204,113,.4); color:#a8f0c6; }
.dash-alert-error { background:rgba(255,90,90,.10); border-color:rgba(255,90,90,.4); color:#ffb3b3; }

/* ---- Panel ---- */
.dash-panel { background:var(--d-panel); border:1px solid var(--d-border); border-radius:16px; padding:30px 30px 34px; }
.dash-head { margin-bottom:24px; }
.dash-head h1 { margin:0 0 6px; font-size:26px; }
.dash-head p { margin:0; color:var(--d-muted); font-size:14px; }
.dash-head b { color:var(--d-text); }

/* ---- Stat cards ---- */
.dash-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px; }
.dash-card { background:#101010 border:5px solid 212123); border-radius:14px; padding:18px; }
.dash-card-label { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--d-muted); }
.dash-card-value { font-size:22px; font-weight:700; margin:8px 0 4px; word-break:break-word; }
.dash-card-foot { font-size:12px; color:var(--d-muted); }

.dash-quick { display:flex; gap:12px; flex-wrap:wrap; }

/* ---- Buttons ---- */
.dash-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border-radius:11px;
    font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none;
    color:var(--d-text); background:var(--d-elev); border:1px solid var(--d-border); transition:.15s; }
.dash-btn:hover { border-color:var(--d-muted); }
.dash-btn-primary { color:#fff; background:var(--d-accent); border-color:var(--d-accent); }
.dash-btn-primary:hover { background:var(--d-accent-2); border-color:var(--d-accent-2); }

/* ---- Tables ---- */
.dash-table { width:100%; border-collapse:collapse; margin-top:22px; font-size:13.5px; }
.dash-table th { text-align:left; padding:12px 14px; color:var(--d-muted); font-weight:500;
    border-bottom:1px solid var(--d-border); font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.dash-table td { padding:14px; border-bottom:1px solid var(--d-border); vertical-align:middle; }
.dash-table tr:last-child td { border-bottom:none; }
.dash-code { background:var(--d-bg); border:1px solid var(--d-border); border-radius:6px; padding:3px 8px;
    font-family:inherit; font-size:12.5px; word-break:break-all; }
.dash-link { color:var(--d-accent-2); text-decoration:none; }
.dash-link:hover { text-decoration:underline; }

.dash-badge { display:inline-block; padding:4px 10px; border-radius:20px; font-size:12px;
    background:var(--d-bg); border:1px solid var(--d-border); color:var(--d-muted); }
.dash-badge.ok { color:#a8f0c6; border-color:rgba(46,204,113,.4); background:rgba(46,204,113,.10); }
.dash-badge.warn { color:#ffd8a0; border-color:rgba(245,166,35,.4); background:rgba(245,166,35,.10); }

.dash-empty { margin-top:24px; padding:26px; text-align:center; color:var(--d-muted);
    border:1px dashed var(--d-border); border-radius:12px; }

/* ---- Generate key ---- */
.dash-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.dash-box { background:var(--d-elev); border:1px solid var(--d-border); border-radius:14px; padding:22px; }
.dash-box-title { font-size:17px; font-weight:700; margin-bottom:4px; }
.dash-box-sub { font-size:13px; color:var(--d-muted); margin-bottom:18px; }
.dash-form { display:flex; flex-direction:column; gap:14px; }
.dash-field { display:flex; flex-direction:column; gap:7px; font-size:13px; color:var(--d-muted); }
.dash-field input { padding:13px 14px; background:var(--d-bg); border:1px solid var(--d-border);
    border-radius:10px; color:var(--d-text); font-family:inherit; font-size:14px; }
.dash-field input:focus { outline:none; border-color:var(--d-accent); box-shadow:0 0 0 3px rgba(213,43,41,.18); }

.dash-note { margin-top:22px; background:var(--d-bg); border:1px solid var(--d-border); border-radius:12px; padding:16px 18px; }
.dash-note-title { font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--d-muted); margin-bottom:10px; }
.dash-pre { margin:0; font-family:inherit; font-size:12.5px; color:var(--d-text); white-space:pre-wrap; word-break:break-all; line-height:1.6; }

/* ---- Purchase ---- */
.dash-price { display:flex; align-items:center; gap:20px; background:var(--d-elev);
    border:1px solid var(--d-border); border-radius:14px; padding:22px 24px; flex-wrap:wrap; }
.dash-price-name { font-size:17px; font-weight:700; }
.dash-price-sub { font-size:13px; color:var(--d-muted); margin-top:4px; }
.dash-price-amount { margin-left:auto; font-size:26px; font-weight:700; }

@media (max-width:900px){ .dash-cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){
    .dash-tabs { order:3; width:100%; }
    .dash-user { order:2; }
    .dash-grid-2 { grid-template-columns:1fr; }
    .dash-price-amount { margin-left:0; width:100%; }
}
@media (max-width:520px){ .dash-cards { grid-template-columns:1fr; } .dash-panel { padding:22px 18px 26px; } }

/* ---- Dashboard licenses list / misc ---- */
.dash-subhead { margin:26px 0 4px; font-size:18px; font-weight:600; }
.dash-muted { color:var(--d-muted); font-size:13px; }
/* ---- Contact form radios: show a visible checked state (independent of Webflow JS) ---- */
.radio-item .w-radio-input,
.radio-item .contact-radio-button {
    width: 18px;
    height: 18px;
    border: 2px solid #7a7a7a;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    margin-right: 8px;
    flex: 0 0 auto;
    box-sizing: border-box;
    background: transparent;
}
/* When the (hidden) radio inside this label is selected, fill the circle */
.radio-item:has(input[type="radio"]:checked) .w-radio-input,
.radio-item:has(input[type="radio"]:checked) .contact-radio-button {
    border-color: #d52b29;
}

    .radio-item:has(input[type="radio"]:checked) .w-radio-input::after,
    .radio-item:has(input[type="radio"]:checked) .contact-radio-button::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        background: #d52b29;
    }
/* Keep the native radio clickable but invisible (Webflow already positions it) */
.radio-item input[type="radio"] {
    cursor: pointer;
}

.radio-item {
    cursor: pointer;
}

/* ===== Rating popup ===== */
.rate-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 14px;
    font-size: 12px;
    font-weight: 600;
    color: #f4f4f5;
    background: rgba(213,43,41,.12);
    border: 1px solid rgba(213,43,41,.45);
    padding: 5px 13px;
    border-radius: 20px;
    text-decoration: none;
    cursor: pointer
}

    .rate-link:hover {
        background: #d52b29;
        color: #fff;
        border-color: #d52b29
    }

.rate-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .rate-modal[hidden] {
        display: none;
    }

.rate-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(2px);
}

.rate-box {
    position: relative;
    width: 92%;
    max-width: 420px;
    background: #151517;
    color: #f4f4f5;
    border: 1px solid #2a2a30;
    border-radius: 16px;
    padding: 26px 24px;
    font-family: "JetBrains Mono",ui-monospace,monospace;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

.rate-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: #8b8b93;
    font-size: 24px;
    cursor: pointer;
}

.rate-h {
    margin: 0 0 4px;
    font-size: 20px;
}

.rate-sub {
    margin: 0 0 16px;
    color: #8b8b93;
    font-size: 13px;
}

.rate-stars {
    display: flex;
    gap: 6px;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

    .rate-stars span {
        color: #3a3a40;
        transition: color .1s;
    }

        .rate-stars span.on {
            color: #f5a623;
        }

.rate-comment {
    width: 100%;
    margin-top: 16px;
    min-height: 80px;
    resize: vertical;
    box-sizing: border-box;
    background: #0e0e10;
    border: 1px solid #2a2a30;
    border-radius: 10px;
    color: #f4f4f5;
    padding: 12px;
    font-family: inherit;
    font-size: 13px;
}

    .rate-comment:focus {
        outline: none;
        border-color: #d52b29;
    }

.rate-submit {
    margin-top: 16px;
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 11px;
    background: #d52b29;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    font-family: inherit;
}

    .rate-submit:hover {
        background: #e5433f;
    }

    .rate-submit:disabled {
        opacity: .6;
        cursor: default;
    }

.rate-msg {
    margin-top: 12px;
    font-size: 13px;
    color: #a8f0c6;
    min-height: 18px;
    text-align: center;
}
