/* =========================================
   Sokolink - Base Styles
   ========================================= */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-gray-800);
    background-color: var(--color-gray-50);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-gray-900);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
}

.hidden {
    display: none !important;
}

/* Defensive: all partial containers start hidden by default.
   This prevents a visual race condition where merchant partials
   (auth, dashboard, etc.) flash on screen before the landing page
   async-loads. The PageLoader's showOnly() function explicitly
   removes .hidden from the active partial — this rule is a
   belt-and-suspenders safety net. */
[id^="partial-"] {
    display: none !important;
}
[id^="partial-"].visible {
    display: block !important;
}

.page {
    min-height: 100vh;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo i {
    font-size: var(--text-2xl);
    color: var(--color-primary);
}

.logo-text {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-gray-900);
    letter-spacing: -0.02em;
}

/* Sokolink brand mark — a trust shield holding a verified checkmark that
   links two parties (buyer node + merchant node), signalling "we safely hold
   the money in escrow until the deal is confirmed". Rendered on an
   <i class="sl-logo-mark">, so every existing ".<container> i" font-size rule
   keeps sizing it exactly as the old handshake was — no HTML changes needed.
   It is a full-colour inline-SVG background (self-contained, no file path),
   so it looks identical on light headers and dark marketing panels. */
.sl-logo-mark {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.16em;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20116%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%231a56db%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%230d2a6e%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M22%2C8%20Q8%2C8%208%2C22%20L8%2C60%20Q8%2C96%2050%2C114%20Q92%2C96%2092%2C60%20L92%2C22%20Q92%2C8%2078%2C8%20Z%27%20fill%3D%27url%28%23g%29%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.6%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27M32%2C56%20L46%2C70%20L72%2C36%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%279%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2756%27%20r%3D%277.5%27%20fill%3D%27%230d2a6e%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%2772%27%20cy%3D%2736%27%20r%3D%278.5%27%20fill%3D%27%2310b981%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.5%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.user-greeting {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    font-weight: 500;
}

.link {
    color: var(--color-primary);
    font-weight: 500;
}

.link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* Utility: scrollable */
.scrollable {
    overflow-y: auto;
}
/* ============ BACK LINK (shared across auth + module pages) ============ */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary, #2563eb);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.15s, opacity 0.15s;
    cursor: pointer;
    background: none;
    border: none;
}
.back-link:hover {
    color: var(--primary-dark, #1d4ed8);
    opacity: 0.85;
}
.back-link i {
    font-size: 0.75rem;
}