/* ATL Encomendas base and shared components (docs/design-system.md). Tokens in atl-tokens.css.
   Component classes use the atl- prefix; screen-specific rules live in the page's .razor.css. */

html, body {
    min-height: 100%;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-primary);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- Button ---------- */

.atl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: 48px;
    padding: 0 var(--space-lg);
    border: 0;
    border-radius: var(--radius-md);
    font: 700 16px/1 var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-standard), transform 120ms var(--ease-standard);
}

.atl-btn--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-cta);
}

.atl-btn--primary:hover {
    background: var(--color-primary-strong);
}

.atl-btn--primary:active {
    transform: translateY(1px);
}

/* Secondary (e.g. "Fechar" in the Conta sheet): white with a cool border, navy text. */
.atl-btn--outline {
    border: 1px solid var(--color-control-border);
    background: var(--color-control);
    color: var(--color-primary);
}

.atl-btn--outline:hover {
    background: var(--color-primary-soft);
}

/* Yellow call to action on navy. */
.atl-btn--accent {
    background: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: 0 10px 20px -10px rgba(232, 188, 51, 0.9);
}

/* Frosted glass over photos and banners (event and space cards): reads on any image without a colour of its own. */
.atl-btn--glass {
    border: 1px solid color-mix(in srgb, var(--color-on-primary) 45%, transparent);
    background: color-mix(in srgb, var(--color-on-primary) 18%, transparent);
    color: var(--color-on-primary);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.atl-btn--glass:hover {
    background: color-mix(in srgb, var(--color-on-primary) 28%, transparent);
}

.atl-btn--accent:active,
.atl-btn--glass:active {
    transform: translateY(1px);
}

/* Inside cards. */
.atl-btn--sm {
    height: 44px;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 800;
}

.atl-btn--sm svg {
    width: 16px;
    height: 16px;
}

.atl-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-cta), 0 0 0 2px var(--color-surface-raised), 0 0 0 5px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

/* On photos and navy the navy ring does not show: a white outline instead. */
.atl-btn--accent:focus-visible,
.atl-btn--glass:focus-visible {
    box-shadow: none;
    outline: 2px solid var(--color-on-primary);
    outline-offset: 2px;
}

.atl-btn[aria-disabled="true"] {
    cursor: progress;
    opacity: 0.85;
}

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

.atl-btn svg {
    width: 18px;
    height: 18px;
}

/* ---------- Field ---------- */

.atl-field + .atl-field {
    margin-top: var(--space-md);
}

.atl-label {
    display: block;
    margin-bottom: var(--space-sm);
    font: 700 11px/1 var(--font-sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-label);
}

.atl-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 var(--space-md);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    background: var(--color-field);
    color: var(--color-text);
    font: 600 15px/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
    transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.atl-input::placeholder {
    color: var(--color-text-subtle);
    font-weight: 500;
    letter-spacing: 0;
}

.atl-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--ring-primary);
}

.atl-input.is-invalid {
    border-color: var(--color-danger);
}

/* Only the typed PIN is spaced out, never the placeholder. */
.atl-input--pin:not(:placeholder-shown) {
    letter-spacing: 0.4em;
}

.atl-field__error {
    margin: 6px 0 0;
    font: 600 12px/1.3 var(--font-sans);
    color: var(--color-danger);
}

/* ---------- Alert ---------- */

.atl-alert {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    font: 600 13px/1.4 var(--font-sans);
}

.atl-alert svg {
    flex: none;
    width: 18px;
    height: 18px;
}

/* Information, not an error (e.g. "Este NIF já está inscrito neste evento."). */
.atl-alert--info {
    align-items: center;
    gap: 10px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 14px;
}

/* ---------- Icon button (Components/Ui/IconButton) ---------- */

.atl-icon-btn {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: none;
    color: inherit;
    cursor: pointer;
}

.atl-icon-btn svg {
    width: 22px;
    height: 22px;
}

/* On navy: account button of the home and the orders. */
.atl-icon-btn--glass {
    border: 1px solid color-mix(in srgb, var(--color-on-primary) 25%, transparent);
    background: color-mix(in srgb, var(--color-on-primary) 12%, transparent);
    color: var(--color-on-primary);
}

/* On navy, no fill: back arrow of the app bar. */
.atl-icon-btn--ghost {
    border-radius: var(--radius-md);
    color: var(--color-on-primary);
}

/* On light surfaces: close of a sheet. */
.atl-icon-btn--soft {
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.atl-icon-btn--soft svg {
    width: 20px;
    height: 20px;
}

.atl-icon-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.atl-icon-btn--soft:focus-visible {
    outline-color: var(--color-primary);
}

/* ---------- Skeleton (loading placeholder) ----------
   Added to the card it stands for (e.g. class="cart-item atl-skeleton"), which gives the size. !important because the
   card's own background comes from the page's scoped CSS, which is more specific. */

.atl-skeleton {
    border-color: transparent !important;
    background: linear-gradient(90deg, var(--color-control-border), var(--color-surface-raised), var(--color-control-border)) !important;
    background-size: 200% 100% !important;
    animation: atl-shimmer 1.4s linear infinite;
}

@keyframes atl-shimmer {
    to { background-position: -200% 0; }
}

/* ---------- Spinner ---------- */

.atl-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: atl-spin 700ms linear infinite;
}

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

.visually-hidden-focusable:not(:focus):not(:focus-within),
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* ---------- First load (index.html) and Blazor error bar ---------- */

/* First load (index.html): the ATL logo on the navy with two soft glows (blue above, a hint of yellow below), and under it a thin yellow
   bar that follows the download of the app. Blazor sets --blazor-load-percentage on <html> while it loads; before that
   (and with cached files, where it jumps quickly) the bar shows a gentle indeterminate sweep. */
.atl-boot {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--color-primary) 85%, white 15%) 0%, transparent 60%),
        linear-gradient(170deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
}

.atl-boot__glow {
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    pointer-events: none;
    animation: atl-boot-drift 9s ease-in-out infinite alternate;
}

.atl-boot__glow--yellow {
    bottom: -48vmax;
    left: -26vmax;
    background: var(--color-accent);
    opacity: 0.14;
}

.atl-boot__glow--blue {
    top: -38vmax;
    right: -28vmax;
    background: #4547e6;
    opacity: 0.5;
    animation-delay: -4s;
}

.atl-boot__center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    animation: atl-boot-in 0.5s ease-out both;
}

.atl-boot__logo {
    display: block;
    width: 168px;
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(6, 7, 48, 0.55));
    animation: atl-boot-breathe 2.4s ease-in-out infinite;
}

.atl-boot__bar {
    position: relative;
    width: 148px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.atl-boot__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--blazor-load-percentage, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 70%, white), var(--color-accent));
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 70%, transparent);
    transition: width 0.25s ease-out;
}

/* Until Blazor reports progress: a short segment sweeping across. */
html:not([style*="--blazor-load-percentage"]) .atl-boot__fill {
    width: 36%;
    animation: atl-boot-sweep 1.2s ease-in-out infinite;
}

.atl-boot__text {
    margin: -14px 0 0;
    font: 700 11px/1 var(--font-sans);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

@keyframes atl-boot-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes atl-boot-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes atl-boot-sweep {
    from { transform: translateX(-110%); }
    to { transform: translateX(310%); }
}

@keyframes atl-boot-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-6vmax, 4vmax, 0); }
}

/* Unhandled-error toast: a floating card like the other panels, clear of the screen edges and the home indicator. */
#blazor-error-ui {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
    z-index: 1000;
    display: none;
    max-width: 480px;
    margin-inline: auto;
    padding: 14px var(--space-md);
    border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent);
    border-radius: var(--radius-md);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    box-shadow: var(--shadow-panel);
    font: 600 14px/1.4 var(--font-sans);
}

#blazor-error-ui[style*="display: block"] {
    display: flex !important;
    align-items: center;
    gap: var(--space-sm);
}

#blazor-error-ui .reload {
    margin-left: var(--space-xs);
    color: inherit;
    font-weight: 800;
    text-underline-offset: 3px;
}

#blazor-error-ui .dismiss {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin: -4px -8px -4px auto;
    border-radius: var(--radius-full);
    cursor: pointer;
}

#blazor-error-ui .dismiss:hover {
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

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

/* ---------- Bottom sheet (event registration, catalogue filters, Conta) ---------- */

.sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(15, 16, 60, 0.45);
    touch-action: none;
    animation: sheet-fade var(--dur-enter) var(--ease-standard) both;
}

/* Page behind an open sheet does not scroll. */
body:has(.sheet) {
    overflow: hidden;
}

.sheet {
    position: fixed;
    inset: auto 0 0;
    z-index: 100;
    max-width: 480px;
    /* Taller content (or the on-screen keyboard) scrolls inside the sheet, never the page behind it. */
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 auto;
    padding: 12px var(--gutter) calc(var(--space-lg) + env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-surface-raised);
    color: var(--color-text);
    box-shadow: 0 -12px 40px -12px rgba(8, 9, 60, 0.35);
    animation: sheet-up var(--dur-enter) var(--ease-standard) both;
}

.sheet__grip {
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-full);
    background: var(--color-card-border);
}

.sheet__overline {
    margin: 0 0 6px;
    font: 700 11px/1 var(--font-sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-label);
}

.sheet__title {
    margin: 0 0 4px;
    font: 800 20px/1.2 var(--font-sans);
    color: var(--color-text);
}

.sheet__meta {
    margin: 0 0 20px;
    font: 500 13px/1.4 var(--font-sans);
    color: var(--color-label);
}

.sheet__cancel {
    display: block;
    width: 100%;
    margin-top: var(--space-sm);
    padding: 12px;
    border: 0;
    background: none;
    color: var(--color-label);
    font: 700 14px/1 var(--font-sans);
}

@keyframes sheet-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes sheet-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- Product thumbnail colours (catalogue, cart): one per category ---------- */

.product-thumb--sky { background: var(--thumb-sky-bg); color: var(--thumb-sky-fg); }
.product-thumb--amber { background: var(--thumb-amber-bg); color: var(--thumb-amber-fg); }
.product-thumb--blue { background: var(--thumb-blue-bg); color: var(--thumb-blue-fg); }
.product-thumb--violet { background: var(--thumb-violet-bg); color: var(--thumb-violet-fg); }
.product-thumb--lime { background: var(--thumb-lime-bg); color: var(--thumb-lime-fg); }

/* ---------- Counter pill (app bar of the catalogue and the cart): items in the cart ---------- */

.atl-count-pill {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font: 800 13px/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}