/* =========================================
   COMPASS GLOBAL STYLES
   Scope: Reset, variables, base typography, shared utilities
========================================= */

:root {
    --primary: #1f56c5;
    --primary-dark: #17479f;
    --text: #20252d;
    --muted: #737c87;
    --border: #dfe4ea;
    --surface: #ffffff;
    --page-bg: #f6f8fb;
}

/* RESET & BASE */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;

    background: var(--surface);
    color: var(--text);

    font-family:
        Figtree,
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}

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

a {
    color: inherit;
}

/* FORM CONTROLS BASE */

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

input,
select,
textarea {
    color: var(--text);
}

/* FOCUS STATES */

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(31, 86, 197, 0.2);
    outline-offset: 2px;
}

/* =========================================
   SHARED CONTAINERS
   Scope: .container
========================================= */

.container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* =========================================
   SHARED BUTTONS
   Scope: .primary-button, .secondary-button, .next-button, .create-button, .back-button, .auth-submit
========================================= */

.primary-button,
.secondary-button,
.next-button,
.create-button,
.back-button,
.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 6px;

    font-weight: 700;
    text-decoration: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.primary-button,
.secondary-button {
    min-height: 48px;
    padding: 0 22px;

    font-size: 14px;
}

.primary-button {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.primary-button:hover {
    border-color: var(--primary-dark);
    background: var(--primary-dark);
}

.primary-button.small {
    min-height: 40px;
    padding: 0 16px;
}

.secondary-button {
    border: 1px solid #d8dde4;
    background: #ffffff;
    color: #343b45;
}

.secondary-button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* =========================================
   SHARED FORM ELEMENTS
   Scope: .field, .field input/select/textarea, .form-error
========================================= */

.field {
    margin-bottom: 20px;
}

.field > label {
    display: block;
    margin-bottom: 8px;

    color: #343b45;

    font-size: 13px;
    font-weight: 700;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 48px;

    padding: 0 13px;

    border: 1px solid #d4dae2;
    border-radius: 6px;

    outline: none;

    background: #ffffff;
    color: var(--text);

    font-size: 14px;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.field textarea {
    min-height: 110px;
    padding: 13px;
    resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #9aa1aa;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(31, 86, 197, 0.08);
}

.field small {
    display: block;
    margin-top: 6px;

    color: #8b929c;
    font-size: 11px;
}

.form-error {
    display: none;
    padding: 11px 13px;

    border: 1px solid #edcaca;
    border-radius: 6px;

    background: #fff6f6;
    color: #9f3939;

    font-size: 12px;
    line-height: 1.5;
}

.form-error.show {
    display: block;
}

.form-error[hidden] {
    display: none !important;
}

/* =========================================
   SHARED PROGRESS COMPONENTS
   Scope: .progress-track, .progress-fill, .progress-value
========================================= */

.progress-track {
    width: 100%;
    overflow: hidden;

    background: #e1e5ea;
    border-radius: 10px;
}

.progress-fill,
.progress-value {
    height: 100%;
    background: var(--primary);
}

/* =========================================
   GLOBAL RESPONSIVE RULES
   Scope: Layout changes for tablets and phones
========================================= */

@media (max-width: 620px) {
    .container {
        width: calc(100% - 32px);
    }
}

/* COMPASS v3 shared refinements */

.primary-button:focus-visible,
.secondary-button:focus-visible,
.save-card-btn:focus-visible,
.details-link:focus-visible {
    box-shadow: 0 0 0 4px rgba(31, 86, 197, 0.12);
}