/* =================================================================
   Swixx Rare Disease Academy — Event Feedback Questionnaire
   Mobile-first stylesheet
   ================================================================= */

:root {
    --brand:            #1C006E;        /* deep indigo, primary */
    --brand-dark:       #14004F;
    --brand-soft:       rgba(28, 0, 110, 0.06);
    --brand-tint:       rgba(28, 0, 110, 0.16);

    --accent:           #1A8BB7;        /* teal-blue, secondary */
    --accent-soft:      rgba(26, 139, 183, 0.10);
    --accent-tint:      rgba(26, 139, 183, 0.22);

    --highlight:        #EA0029;        /* red, used sparingly for emphasis/errors */

    --ink:              #1C006E;        /* headings/strong text use the brand */
    --ink-body:         #1F2238;        /* body text */
    --ink-muted:        #3F4660;        /* secondary text — darkened for contrast */
    --line:             #E4E7EE;
    --line-soft:        #F1F3F8;

    --bg:               #FFFFFF;
    --card:             #FFFFFF;

    --danger:           #EA0029;
    --success:          #1A8BB7;

    --radius-sm:        8px;
    --radius-md:        12px;
    --radius-lg:        20px;

    --shadow-sm:        0 1px 2px rgba(20, 33, 61, 0.05);
    --shadow-md:        0 4px 16px rgba(20, 33, 61, 0.06),
                        0 1px 3px rgba(20, 33, 61, 0.04);
    --shadow-lg:        0 12px 40px rgba(20, 33, 61, 0.08),
                        0 4px 12px rgba(20, 33, 61, 0.04);

    --t-fast:           150ms ease-out;
    --t-base:           220ms ease-out;
}

* { box-sizing: border-box; }

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

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-body);
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%,
                        rgba(28, 0, 110, 0.05), transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%,
                        rgba(26, 139, 183, 0.06), transparent 60%),
        var(--bg);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Page layout ---------- */

.page {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}

@media (min-width: 640px) {
    .page { padding: 32px 24px 64px; }
}

/* ---------- Language switcher ---------- */
/* Hidden by request — multi-language routing via /en/, /hr/, /bg/, /sk/
   continues to work. Remove `display: none` to bring it back. */

.lang-switch {
    display: none;
}

.lang-link {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--t-fast), background var(--t-fast);
}
.lang-link:hover {
    color: var(--brand);
    background: var(--brand-soft);
}
.lang-link.is-active {
    color: var(--brand);
    background: var(--brand-soft);
    font-weight: 700;
}

/* ---------- Card ---------- */

.card {
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px 16px 32px;
    animation: cardIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@media (min-width: 640px) {
    .card { padding: 40px 44px 48px; }
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card__title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--brand);
    text-align: center;
}

@media (min-width: 640px) {
    .card__title { font-size: 34px; }
}

.card__subtitle {
    margin: 0 0 32px;
    font-size: 15px;
    color: var(--ink-muted);
    text-align: center;
}

/* ---------- Questions ---------- */

.question {
    border: none;
    padding: 0;
    margin: 0 0 28px;
    transition: padding var(--t-fast);
}

.question__label {
    display: block;
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
}

/* Error state on a question */
.question.is-error .question__label { color: var(--highlight); }
.question.is-error .chip,
.question.is-error .pill {
    border-color: var(--highlight);
    animation: shake 320ms ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* ---------- 1-5 scale ---------- */
/* Phone/narrow: stacked column (labels above and below the buttons).
   ≥700px:     a 3-column CSS grid where the MIDDLE column auto-sizes
               to the buttons and the two side columns share the leftover
               space equally. That locks circle "3" exactly on the
               horizontal centre of the card (and therefore the screen),
               regardless of how long the side labels are — they'll wrap
               to two lines if they don't fit. */

.scale {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

@media (min-width: 700px) {
    .scale {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 14px;
    }
}

.scale__min, .scale__max {
    font-size: 13px;
    color: var(--ink-muted);
    text-align: center;
    line-height: 1.35;
    overflow-wrap: break-word;
}

@media (min-width: 700px) {
    .scale__min { text-align: right; }
    .scale__max { text-align: left; }
}

.scale__buttons {
    display: flex;
    gap: 8px;
}

/* ---------- Chip (1-5 button) ---------- */

.chip {
    appearance: none;
    background: var(--card);
    border: 2px solid var(--line);
    color: var(--ink-body);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    transition:
        background var(--t-base),
        border-color var(--t-base),
        color var(--t-base),
        transform var(--t-fast),
        box-shadow var(--t-base);
    -webkit-tap-highlight-color: transparent;
}

.chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.chip:active { transform: translateY(0); }

.chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-tint);
}

.chip.is-selected {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 4px 12px rgba(28, 0, 110, 0.28);
}

.chip.is-selected:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

/* ---------- Pills (3-option button group) ---------- */

.pills {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 520px) {
    .pills {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

.pill {
    appearance: none;
    background: var(--card);
    border: 2px solid var(--line);
    color: var(--ink-body);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background var(--t-base),
        border-color var(--t-base),
        color var(--t-base),
        transform var(--t-fast),
        box-shadow var(--t-base);
    -webkit-tap-highlight-color: transparent;
}

.pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.pill:active { transform: translateY(0); }

.pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-tint);
}

.pill.is-selected {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 4px 12px rgba(28, 0, 110, 0.28);
}

.pill.is-selected:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

/* ---------- Textarea ---------- */

textarea {
    width: 100%;
    min-height: 110px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-body);
    background: var(--card);
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    resize: vertical;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}

textarea::placeholder { color: #9CA3B0; }

textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

/* ---------- Inline form error ---------- */

.form-error {
    margin: 12px 0 16px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--highlight);
    background: rgba(234, 0, 41, 0.08);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--highlight);
    animation: fadeIn 200ms ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Submit button ---------- */

.submit-btn {
    appearance: none;
    width: 100%;
    margin-top: 8px;
    padding: 16px 24px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--brand);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(28, 0, 110, 0.32);
    transition:
        background var(--t-base),
        transform var(--t-fast),
        box-shadow var(--t-base);
    -webkit-tap-highlight-color: transparent;
}

.submit-btn:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(28, 0, 110, 0.4);
}

.submit-btn:active { transform: translateY(0); }

.submit-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-tint),
                0 4px 14px rgba(28, 0, 110, 0.32);
}

.submit-btn.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

/* ---------- Closing CTA ---------- */

.cta {
    margin: 24px 0 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-muted);
}

.cta a {
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
}
.cta a:hover { text-decoration: underline; }

.cta__sub {
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

/* ---------- Thank-you panel ---------- */

.thanks {
    text-align: center;
    padding: 24px 0 8px;
    animation: thanksIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes thanksIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.thanks__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 50%;
}

.thanks__title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: var(--brand);
}

.thanks__body {
    margin: 0;
    font-size: 15px;
    color: var(--ink-muted);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}