/* ==========================================================================
   Paynex — base tokens shared by dashboard + auth
   Palette: white surfaces, soft lavender canvas and purple primary
   ========================================================================== */
:root {
    /* brand — the default "Ocean Teal" theme. Admin → Brand & Contact can
       pick another; App\Services\Settings\ThemeSettings then prints these
       same variables again in a <style> after this file. */
    --primary: #0c7088;
    --primary-2: #0985a5;
    --primary-dark: #146174;
    --primary-deep: #115060;
    --primary-bright: #83c9db;
    --primary-ink: #0c2f38;
    --accent: #d63f11;
    --accent-dark: #b5350f;
    --accent-deep: #962c0c;
    --accent-soft: #f8e9e5;

    /* the same colours as "r, g, b" for rgba(var(--x-rgb), .2) */
    --primary-rgb: 12, 112, 136;
    --primary-2-rgb: 9, 133, 165;
    --primary-dark-rgb: 20, 97, 116;
    --primary-deep-rgb: 17, 80, 96;
    --primary-ink-rgb: 12, 47, 56;
    --accent-rgb: 214, 63, 17;
    --accent-dark-rgb: 181, 53, 15;

    /* text */
    --heading: #112529;
    --ink: #2f3f43;
    --muted: #5f7276;
    --muted-2: #66777b;

    /* surfaces */
    --line: #dbeaed;
    --line-soft: #e5f0f3;
    --bg: #f0f8fa;
    --card: #ffffff;
    --card-2: #f5fafc;
    --field: #ffffff;
    --nav: var(--primary-ink);

    /* status */
    --green: #15803d;
    --amber: #a16207;
    --danger: #b91c1c;

    --radius: 16px;
    --shadow-sm: 0 1px 3px rgba(var(--primary-ink-rgb),  .04);
    --shadow: 0 6px 20px rgba(var(--primary-ink-rgb),  .07);
    --shadow-lg: 0 20px 50px rgba(var(--primary-ink-rgb),  .12);
    --sidebar-w: 258px;
}

/* Native form controls and dropdowns use the light palette. */
:root { color-scheme: light; }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; padding: 0; color: inherit; background: none; }
input { font-family: inherit; }
img { max-width: 100%; display: block; }

/* ---------- brand lockup (fallback when logo.png is absent) ---------- */
.brand-img { width: auto; object-fit: contain; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.brand__mark {
    width: var(--brand-h);
    height: var(--brand-h);
    flex: 0 0 auto;
    display: block;
}

.brand__text { display: flex; flex-direction: column; line-height: 1; }

.brand__name {
    font-weight: 800;
    font-size: calc(var(--brand-h) * .52);
    letter-spacing: -.5px;
    color: var(--heading);
}

.brand__name-alt { color: var(--accent); }

.brand__tag {
    margin-top: 3px;
    font-size: calc(var(--brand-h) * .17);
    font-weight: 600;
    letter-spacing: .09em;
    color: var(--muted-2);
}

.brand--dark .brand__name { color: #fff; }
.brand--dark .brand__tag { color: rgba(255, 255, 255, .62); }

.art-img, .art-svg { display: block; width: 100%; height: 100%; }
.art-svg { line-height: 0; }

/* ---------- generic pieces ---------- */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 0;
}

.card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--heading);
}

.link-more {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}

.link-more:hover { text-decoration: underline; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 16px;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}

.btn:active { transform: translateY(1px); }
.btn :is(svg, .ui-image) { width: 15px; height: 15px; flex: 0 0 auto; }

.btn--primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(var(--primary-rgb),  .26);
}

.btn--primary:hover { box-shadow: 0 8px 22px rgba(var(--primary-rgb),  .38); }

.btn--ghost {
    background: rgba(255, 255, 255, .04);
    color: var(--primary);
    border: 1px solid var(--line);
}

.btn--ghost:hover { background: rgba(var(--primary-rgb),  .1); border-color: rgba(var(--primary-rgb),  .45); }

.btn--block { width: 100%; }

/* tinted icon tiles — slot names are cosmetic, not literal hues */
.tint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.tint :is(svg, .ui-image) { width: 55%; height: 55%; }
.tint .tile-img { width: 84%; height: 84%; object-fit: contain; }

.tint--blue    { background: rgba(59, 130, 246, .16);  color: #7cb3ff; }
.tint--purple  { background: rgba(var(--primary-2-rgb),  .16);  color: #5ab7cf; }
.tint--amber   { background: rgba(245, 158, 11, .16);  color: #a16207; }
.tint--green   { background: rgba(var(--primary-rgb),  .16);  color: #15803d; }
.tint--red     { background: rgba(248, 113, 113, .16); color: #b91c1c; }
.tint--cyan    { background: rgba(34, 211, 238, .16);  color: #4fdcf0; }
.tint--teal    { background: rgba(20, 184, 166, .16);  color: #4cd3c2; }
.tint--indigo  { background: rgba(var(--primary-2-rgb),  .16);  color: #57b6ce; }
.tint--sky     { background: rgba(14, 165, 233, .16);  color: #5fc0f5; }
.tint--pink    { background: rgba(238, 85, 39, .16);  color: #e2aa99; }
.tint--slate   { background: rgba(148, 163, 184, .14); color: #b3c4d6; }

/* native dropdown list items — Windows/Chrome ignore inherited colours here */
select option,
select optgroup {
    background: var(--card);
    color: var(--ink);
}

/* Shared service artwork: natural colour, transparent backgrounds and crisp sizing. */
.ui-image { display: inline-block; width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; vertical-align: middle; }
.rail__ico img.ui-image { width: 29px; height: 29px; }
.tint img.ui-image { width: 80%; height: 80%; }
.ad-rail__item img.ui-image { width: 25px; height: 25px; }
.svc-hero__icon img.ui-image { width: 38px; height: 38px; }
.svc-hero__icon--sm img.ui-image { width: 26px; height: 26px; }
.lp-service__ico img.ui-image { width: 38px; height: 38px; }

/* Status colours remain distinct from the purple brand colour on white cards. */
.tint--blue { background: #eff6ff; color: #2563eb; }
.tint--purple { background: color-mix(in srgb, var(--primary) 11%, white); color: var(--primary); }
.tint--amber { background: #fffbeb; color: #a16207; }
.tint--green { background: #ecfdf5; color: #15803d; }
.tint--red { background: #fef2f2; color: #b91c1c; }
.tint--cyan { background: #ecfeff; color: color-mix(in srgb, var(--primary) 97%, white); }
.tint--teal { background: #f0fdfa; color: #0f766e; }
.tint--indigo { background: #eef2ff; color: color-mix(in srgb, var(--primary) 88%, var(--primary-ink)); }
.tint--sky { background: #f0f9ff; color: #0369a1; }
.tint--pink { background: #fbf3f1; color: var(--accent-dark); }
.tint--slate { background: #f1f5f9; color: #475569; }
:where(input, textarea, select)::placeholder { color: var(--muted-2); opacity: 1; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ---------- inline form validation (form-validate.js) ---------- */
.frm-err {
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--danger, #b91c1c);
}

/* the field that failed, in either panel's markup */
.is-invalid,
.frm-input.is-invalid,
.fld__box .is-invalid {
    border-color: var(--danger, #b91c1c) !important;
    background: rgba(185, 28, 28, .04);
}

.is-invalid:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, .14) !important;
}

/* login/register page wraps inputs in .fld__box, so mark the box too */
.fld__box:has(.is-invalid) {
    border-color: var(--danger, #b91c1c);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, .12);
}

/* Phones: iOS zooms the whole page when a field under 16px gets focus, so
   every text field is 16px on small screens. */
@media (max-width: 640px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}