/*
 * The design system's shared components, on every public page: loaded after theme.css by
 * components/assets/css-head.blade.php. Each block here backs a Blade component in
 * resources/views/components/qr/ (<x-qr.button>, <x-qr.chip>, <x-qr.icon>, <x-qr.field>…); page
 * sheets such as new-home.css only arrange them. Values come from tokens.css.
 */

/* public.css forces every <p> to 16px with !important, so the system's small text lines (hints,
   errors, labels, live signals) are divs: a size set here then actually applies. */

/* ---------- Skip link ---------- */

/* First thing a keyboard reaches on every page; invisible until then. */
.qr-skip-link {
    position: fixed;
    top: var(--qr-space-2);
    left: var(--qr-space-2);
    z-index: var(--qr-layer-alert);
    padding: var(--qr-space-3) var(--qr-space-4);
    border-radius: var(--qr-radius-card);
    background: var(--qr-mint);
    color: var(--qr-on-mint);
    font-family: var(--qr-body);
    font-size: var(--qr-text-body);
    font-weight: 700;
    transform: translateY(calc(-100% - var(--qr-space-4)));
}

.qr-skip-link:focus,
a.qr-skip-link:hover {
    color: var(--qr-on-mint);
    transform: none;
}

/* ---------- Icon ---------- */

.qr-icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.2em;
}

.qr-spin {
    animation: qr-spin var(--qr-duration-scene) linear infinite;
}

@keyframes qr-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Unlock ---------- */

/* After a booking the difficulty lock opens: the closed lock tips and fades, the open one settles
   in with a mint glow. Expressive curve, once; reduced motion lands straight on the open lock. */
.qr-unlock {
    position: relative;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--qr-space-4);
    color: var(--qr-mint);
}

.qr-unlock .qr-icon {
    position: absolute;
    inset: 0;
}

.qr-unlock-closed {
    animation: qr-unlock-closed var(--qr-duration-slow) var(--qr-ease-expressive) var(--qr-duration-slow) both;
}

.qr-unlock-open {
    opacity: 0;
    animation: qr-unlock-open var(--qr-duration-slower) var(--qr-ease-expressive) var(--qr-duration-slower) both;
}

@keyframes qr-unlock-closed {
    to {
        opacity: 0;
        transform: translateY(-2px) rotate(-10deg) scale(0.9);
    }
}

@keyframes qr-unlock-open {
    from {
        opacity: 0;
        transform: scale(0.85);
        filter: drop-shadow(0 0 0 transparent);
    }

    to {
        opacity: 1;
        transform: none;
        filter: drop-shadow(0 0 12px var(--qr-mint-border));
    }
}

/* ---------- Buttons ---------- */

.qr-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--qr-space-2);
    min-height: 48px;
    padding: var(--qr-space-3) var(--qr-space-5);
    border: 1px solid transparent;
    border-radius: var(--qr-radius-panel);
    font-family: var(--qr-body);
    font-size: var(--qr-text-body);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--qr-duration-fast) var(--qr-ease-standard),
        border-color var(--qr-duration-fast) var(--qr-ease-standard),
        box-shadow var(--qr-duration-fast) var(--qr-ease-standard),
        transform var(--qr-duration-instant) var(--qr-ease-standard);
}

.qr-button:active {
    transform: scale(0.98);
}

.qr-button:disabled,
.qr-button[aria-disabled="true"] {
    opacity: var(--qr-disabled-opacity);
    cursor: default;
    transform: none;
}

/* "a." repeats the class so a link-button outranks the site's bare a / a:hover colours. */
.qr-button-primary,
a.qr-button-primary,
a.qr-button-primary:hover {
    background: var(--qr-mint);
    color: var(--qr-on-mint);
    text-decoration: none;
}

.qr-button-primary:hover:not(:disabled),
.qr-button-primary:focus-visible {
    background: var(--qr-mint-hover);
    box-shadow: var(--qr-glow);
}

.qr-button-ghost,
a.qr-button-ghost,
a.qr-button-ghost:hover {
    background: transparent;
    border-color: var(--qr-hairline-strong);
    color: var(--qr-text);
    text-decoration: none;
}

.qr-button-ghost:hover:not(:disabled),
.qr-button-ghost:focus-visible {
    border-color: var(--qr-mint);
    background: var(--qr-state-hover);
}

.qr-button-small {
    min-height: 40px;
    padding: var(--qr-space-2) var(--qr-space-4);
    font-size: var(--qr-text-caption);
}

.qr-link-button,
a.qr-link-button {
    display: inline-flex;
    align-items: center;
    gap: var(--qr-space-1);
    padding: var(--qr-space-2) 0;
    border: 0;
    background: none;
    color: var(--qr-mint);
    font-family: var(--qr-body);
    font-size: var(--qr-text-caption);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

a.qr-link-button:hover,
.qr-link-button:hover {
    color: var(--qr-mint-hover);
}

/* Square, for a lone icon: 40px to see, 44px to hit. */
.qr-icon-button {
    position: relative;
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--qr-hairline);
    border-radius: var(--qr-radius-card);
    background: transparent;
    color: var(--qr-text);
    font-size: var(--qr-text-subheading);
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--qr-duration-fast) var(--qr-ease-standard), background-color var(--qr-duration-fast) var(--qr-ease-standard);
}

.qr-icon-button::before {
    content: '';
    position: absolute;
    inset: -2px;
}

.qr-icon-button:hover:not(:disabled) {
    border-color: var(--qr-hairline-strong);
    background: var(--qr-state-hover);
}

.qr-icon-button:disabled {
    opacity: var(--qr-disabled-opacity);
    cursor: default;
}

/* ---------- Chips ---------- */

.qr-chip-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qr-space-2);
}

.qr-chip-label {
    min-width: 96px;
    color: var(--qr-muted);
    font-size: var(--qr-text-label);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* 32px to see; the ::before stretches the target to 44px so a thumb does not miss. */
.qr-chip,
.qr-active-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: var(--qr-space-1) 14px;
    border: 1px solid var(--qr-hairline-strong);
    border-radius: var(--qr-radius-pill);
    background: transparent;
    color: var(--qr-text);
    font-family: var(--qr-body);
    font-size: var(--qr-text-caption);
    cursor: pointer;
    transition:
        background-color var(--qr-duration-fast) var(--qr-ease-standard),
        border-color var(--qr-duration-fast) var(--qr-ease-standard),
        color var(--qr-duration-fast) var(--qr-ease-standard);
}

.qr-chip::before,
.qr-active-chip::before {
    content: '';
    position: absolute;
    inset: -6px 0;
}

.qr-chip:hover {
    background: var(--qr-state-hover);
}

.qr-chip[aria-pressed="true"],
.qr-active-chip {
    border-color: var(--qr-mint);
    background: var(--qr-mint-soft);
    color: var(--qr-mint);
}

.qr-active-chip {
    padding-right: 10px;
}

.qr-active-chip span[aria-hidden] {
    font-size: var(--qr-text-body);
    line-height: 1;
}

/* ---------- Fields ---------- */

.qr-field {
    display: grid;
    align-content: start;
    gap: 6px;
}

.qr-field-label {
    color: var(--qr-faint);
    font-family: var(--qr-body);
    font-size: var(--qr-text-label);
    font-weight: 700;
    letter-spacing: var(--qr-tracking-label);
    text-transform: uppercase;
}

.qr-field-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: var(--qr-space-3) 14px;
    border: 1px solid var(--qr-hairline-strong);
    border-radius: var(--qr-radius-card);
    background: var(--qr-surface-2);
    color: var(--qr-text);
    font-family: var(--qr-body);
    font-size: var(--qr-text-body);
    transition: border-color var(--qr-duration-fast) var(--qr-ease-standard), box-shadow var(--qr-duration-fast) var(--qr-ease-standard);
}

.qr-field-input::placeholder {
    color: var(--qr-faint);
}

.qr-field-input:focus {
    border-color: var(--qr-mint);
    outline: none;
    box-shadow: var(--qr-focus-field);
}

.qr-field-input[aria-invalid="true"] {
    border-color: var(--qr-danger);
}

textarea.qr-field-input {
    min-height: 120px;
    resize: vertical;
}

.qr-field-hint {
    margin: 0;
    color: var(--qr-muted);
    font-size: var(--qr-text-caption);
}

/* Colour alone does not say "wrong" (WCAG 1.4.1): the message carries an icon and the words. */
.qr-field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    color: var(--qr-danger);
    font-size: var(--qr-text-caption);
}

/* ---------- Dialog ---------- */

/* A native <dialog> opened with showModal(): the browser traps focus, closes it on Escape and
   lays the backdrop. Not for the booking form, whose SweetAlert prompts would end up under it. */
.qr-dialog {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--qr-gutter));
    max-height: calc(100% - 2 * var(--qr-space-5));
    margin: auto;
    padding: var(--qr-space-5);
    border: 1px solid var(--qr-hairline);
    border-radius: var(--qr-radius-panel);
    background: var(--qr-surface);
    color: var(--qr-text);
    font-family: var(--qr-body);
    overflow-y: auto;
}

.qr-dialog[open] {
    animation: qr-dialog-in var(--qr-duration-slow) var(--qr-ease-enter);
}

/* Browsers without <dialog> (Safari before 15.4) would show it inline all the time. */
.qr-dialog:not([open]) {
    display: none;
}

.qr-dialog::backdrop {
    background: var(--qr-scrim);
}

@keyframes qr-dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

/* ---------- Callout ---------- */

.qr-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--qr-space-4) var(--qr-space-6);
    margin-bottom: var(--qr-space-5);
    padding: var(--qr-space-5);
    border: 1px solid var(--qr-mint-border);
    border-radius: var(--qr-radius-panel);
    background: var(--qr-mint-wash);
}

.qr-callout[hidden] {
    display: none;
}

.qr-callout > div:first-child {
    flex: 1 1 420px;
}

.qr-callout-title {
    margin: 0 0 var(--qr-space-2);
    color: var(--qr-text);
    font-family: var(--qr-body);
    font-size: var(--qr-text-subheading);
    font-weight: 700;
}

.qr-callout p {
    margin: 0;
    color: var(--qr-muted);
    font-size: var(--qr-text-body);
}

.qr-callout-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qr-space-4);
}

/* ---------- Live signal ---------- */

/* A mint dot that breathes next to live data ("3 lediga tider idag"). The one looping animation
   in the system; the reduced-motion rule in tokens.css stops it. */
.qr-live {
    display: inline-flex;
    align-items: center;
    gap: var(--qr-space-2);
    color: var(--qr-text);
    font-size: var(--qr-text-caption);
    font-weight: 700;
}

.qr-live::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: var(--qr-radius-pill);
    background: var(--qr-mint);
    box-shadow: 0 0 0 0 var(--qr-mint-border);
    animation: qr-live-pulse var(--qr-duration-pulse) var(--qr-ease-standard) infinite;
}

@keyframes qr-live-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--qr-mint-border);
    }

    70% {
        box-shadow: 0 0 0 8px transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

/* "Few times left": a quiet label, never red, never a countdown. */
.qr-scarce {
    color: var(--qr-mint);
    font-size: var(--qr-text-label);
    font-weight: 700;
    letter-spacing: var(--qr-tracking-label);
    text-transform: uppercase;
}