/* Shared Aride UI foundation. Opt-in scope: no changes to legacy pages. */
.aride-ui {
    --aride-accent: #ed2035;
    --aride-action: #d91c30;
    --aride-action-hover: #c6172a;
    --aride-accent-soft: #fff1f3;
    --aride-text: #1f2937;
    --aride-muted: #667085;
    --aride-background: #f5f6f8;
    --aride-surface: #fff;
    --aride-border: #e2e5eb;
    --aride-space-1: 8px;
    --aride-space-2: 16px;
    --aride-space-3: 24px;
    --aride-space-4: 32px;
    --aride-space-6: 48px;
    --aride-card-radius: 12px;
    --aride-control-radius: 8px;
    --aride-font: Inter, Arial, sans-serif;
    color: var(--aride-text);
    font: 400 16px/1.5 var(--aride-font);
}
.aride-ui .aride-caption { color: var(--aride-muted); font-size: 14px; line-height: 1.5; }
.aride-ui .aride-card { box-sizing: border-box; min-width: 0; padding: 24px; border: 1px solid var(--aride-border); border-radius: var(--aride-card-radius); background: var(--aride-surface); }
.aride-ui .aride-card-title { margin: 0 0 16px; color: var(--aride-text); font: 700 20px/1.35 var(--aride-font); }
.aride-ui .aride-field { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 10px 14px; border: 1px solid var(--aride-border); border-radius: var(--aride-control-radius); background: #fff; color: var(--aride-text); font: 400 16px/1.5 var(--aride-font); }
.aride-ui .aride-field::placeholder { color: var(--aride-muted); opacity: 1; }
.aride-ui .aride-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; gap: 8px; min-height: 48px; margin: 0; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--aride-control-radius); background: var(--aride-action); color: #fff; font: 600 16px/1.5 var(--aride-font); text-decoration: none; cursor: pointer; }
.aride-ui .aride-button:hover { background: var(--aride-action-hover); }
.aride-ui .aride-button--secondary { border-color: var(--aride-border); background: #fff; color: var(--aride-text); }
.aride-ui .aride-button--secondary:hover { background: var(--aride-background); }
.aride-ui .aride-button:disabled { border-color: var(--aride-border); background: var(--aride-background); color: var(--aride-muted); cursor: default; }
.aride-ui .aride-link { color: var(--aride-action); text-decoration: underline; text-underline-offset: 3px; }
.aride-ui .aride-link:hover { color: var(--aride-action-hover); }
.aride-ui .aride-chip { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; max-width: 100%; margin: 0; padding: 8px 12px; border: 1px solid var(--aride-border); border-radius: var(--aride-control-radius); background: var(--aride-background); color: var(--aride-text); font: 400 14px/1.4 var(--aride-font); text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.aride-ui .aride-chip:hover { border-color: var(--aride-action); color: var(--aride-action); background: var(--aride-accent-soft); }
.aride-ui .aride-chip--selected { border-color: var(--aride-action); background: var(--aride-action); color: #fff; }
.aride-ui .aride-chip--selected:hover { background: var(--aride-action-hover); color: #fff; }
.aride-ui :is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--aride-action); outline-offset: 3px; }
/* Override the legacy !important focus border without changing field geometry.
   Overlap outline and border so a focused field has one continuous contour. */
.aride-ui .aride-field:focus { border: 1px solid var(--aride-action) !important; outline: 2px solid var(--aride-action); outline-offset: -1px; box-shadow: none; }
.aride-ui .aride-brands-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1023px) { .aride-ui .aride-brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .aride-ui .aride-brands-grid { grid-template-columns: minmax(0, 1fr); } .aride-ui .aride-card { padding: 16px; } }