/* ==========================================================================
   Velo Cash — sign-in screen
   Scoped entirely under .velo-auth so it cannot leak into the rest of the
   admin panel. Loaded only by resources/views/layouts/auth_velo.blade.php.
   ========================================================================== */

/* Same Arabic display face the CMS front-end uses, so every public page shares
   one type system: Inter (Latin) · Abd ElRady Pro (Arabic) · Rubik (Hebrew). */
@font-face {
    font-family: 'Abd ElRady Pro';
    src: url('/fonts/abd_elrady_pro/Abd ElRady Pro Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abd ElRady Pro';
    src: url('/fonts/abd_elrady_pro/Abd ElRady Pro.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Language-aware stacks — the html[lang] attribute is set by the layout.
   Sets the inheritable base font on the whole panel. */
html[lang="ar"] .velo-auth {
    font-family: 'Abd ElRady Pro', 'Rubik', 'Segoe UI', system-ui, sans-serif;
}

html[lang="he"] .velo-auth {
    font-family: 'Rubik', 'Assistant', 'Segoe UI', system-ui, sans-serif;
}

/* These pages load the admin CSS bundle, which sets an explicit font-family on
   headings, buttons and form controls (Source Sans Pro). That explicit rule
   beats plain inheritance, so those elements ignored the brand font and looked
   mismatched. Force every TEXT element to inherit the panel font — icons
   (<i>, svg, Font Awesome) are deliberately NOT touched so glyphs stay intact. */
.velo-auth :is(
    h1, h2, h3, h4, h5, h6,
    p, a, span, strong, em, small, time, label, li, dt, dd,
    th, td, caption, legend, summary, blockquote, figcaption,
    button, input, textarea, select, option
) {
    font-family: inherit !important;
}

.velo-auth {
    --v-navy: #01063A;
    --v-navy-700: #0A1250;
    --v-navy-600: #141E63;
    --v-royal: #455FF4;
    --v-royal-600: #3448DF;
    --v-sky: #3CB9FF;
    --v-cyan: #59E0FF;
    --v-mint: #0FE082;

    --v-ink: #01063A;
    --v-ink-500: #5B628C;
    --v-ink-400: #7A81A8;
    --v-ink-200: #D9DEF0;
    --v-ink-100: #EBEEF9;
    --v-ink-50: #F5F7FD;

    --v-radius: 16px;
    --v-ease: cubic-bezier(.22, 1, .36, 1);

    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
    font-family: 'Inter', 'Rubik', 'Abd ElRady Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--v-ink);
    background: #fff;
}

html.velo-auth-html,
body.velo-auth-body {
    height: auto;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}

@media (min-width: 992px) {
    .velo-auth {
        grid-template-columns: 1.05fr .95fr;
    }
}

.velo-auth *,
.velo-auth *::before,
.velo-auth *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Brand panel
   -------------------------------------------------------------------------- */

.velo-auth__brand {
    position: relative;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    background: linear-gradient(160deg, #01063A 0%, #141E63 55%, #0A1250 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 992px) {
    .velo-auth__brand {
        display: flex;
    }
}

.velo-auth__brand::before,
.velo-auth__brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
}

.velo-auth__brand::before {
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(69, 95, 244, .8) 0%, rgba(69, 95, 244, 0) 68%);
    top: -200px;
    inset-inline-start: -160px;
    animation: velo-auth-float-a 17s ease-in-out infinite;
}

.velo-auth__brand::after {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(60, 185, 255, .55) 0%, rgba(60, 185, 255, 0) 70%);
    bottom: -180px;
    inset-inline-end: -140px;
    animation: velo-auth-float-b 21s ease-in-out infinite;
}

@keyframes velo-auth-float-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(50px, 45px, 0) scale(1.12); }
}

@keyframes velo-auth-float-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-45px, -55px, 0) scale(1.1); }
}

.velo-auth__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(ellipse 80% 60% at 30% 20%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 20%, #000 30%, transparent 80%);
}

.velo-auth__logo {
    height: 62px;
    width: auto;
    object-fit: contain;
    display: block;
}

.velo-auth__brand-body {
    max-width: 32rem;
}

.velo-auth__badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem 1.05rem .45rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    color: #DCE4FF;
    font-size: .8125rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.velo-auth__badge-dot {
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #0FE082 0%, #3CB9FF 100%);
    color: var(--v-navy);
    font-size: .7rem;
    flex: none;
}

.velo-auth__title {
    font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.85rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: #fff;
    margin: 0 0 1rem;
}

html[dir="rtl"] .velo-auth__title {
    letter-spacing: 0;
    line-height: 1.3;
}

.velo-auth__subtitle {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(226, 232, 255, .78);
    margin: 0 0 2.25rem;
}

.velo-auth__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .95rem;
}

.velo-auth__point {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    font-size: .96rem;
    font-weight: 500;
    color: rgba(226, 232, 255, .88);
}

.velo-auth__point-icon {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(15, 224, 130, .16);
    color: var(--v-mint);
    font-size: .72rem;
    margin-top: .1rem;
}

.velo-auth__brand-foot {
    font-size: .82rem;
    color: rgba(226, 232, 255, .45);
}

/* --------------------------------------------------------------------------
   Form panel
   -------------------------------------------------------------------------- */

.velo-auth__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 1rem + 2vw, 3rem);
    background: var(--v-ink-50);
}

.velo-auth__topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    min-height: 44px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.velo-auth__toplink {
    font-size: .875rem;
    font-weight: 600;
    color: var(--v-ink-500);
    text-decoration: none;
    transition: color .2s var(--v-ease);
}

.velo-auth__toplink:hover,
.velo-auth__toplink:focus {
    color: var(--v-royal);
    text-decoration: none;
}

.velo-auth__toplink--pill {
    padding: .5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--v-ink-200);
    background: #fff;
}

.velo-auth__toplink--pill:hover {
    border-color: rgba(69, 95, 244, .45);
}

/* Language dropdown (reuses the app's <details> markup) */
.velo-auth__lang {
    position: relative;
}

.velo-auth__lang > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--v-ink-200);
    background: #fff;
    font-size: .875rem;
    font-weight: 700;
    color: var(--v-ink-500);
    user-select: none;
}

.velo-auth__lang > summary::-webkit-details-marker {
    display: none;
}

.velo-auth__lang > summary:hover {
    border-color: rgba(69, 95, 244, .45);
    color: var(--v-royal);
}

.velo-auth__lang-menu {
    position: absolute;
    top: calc(100% + .5rem);
    inset-inline-end: 0;
    min-width: 190px;
    margin: 0;
    padding: .4rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--v-ink-100);
    border-radius: var(--v-radius);
    box-shadow: 0 24px 60px rgba(1, 6, 58, .14);
    z-index: 60;
}

.velo-auth__lang-menu a {
    display: block;
    padding: .6rem .8rem;
    border-radius: 10px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--v-ink-500);
    cursor: pointer;
    text-decoration: none;
}

.velo-auth__lang-menu a:hover {
    background: var(--v-ink-50);
    color: var(--v-royal);
}

/* Card */
.velo-auth__stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.velo-auth__card {
    width: 100%;
    max-width: 27rem;
    padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
    background: #fff;
    border: 1px solid var(--v-ink-100);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(1, 6, 58, .08);
    animation: velo-auth-in .55s var(--v-ease) both;
}

@keyframes velo-auth-in {
    from { opacity: 0; transform: translateY(14px); }
}

.velo-auth__card-logo {
    height: 54px;
    width: auto;
    margin: 0 auto 1.25rem;
    display: block;
}

@media (min-width: 992px) {
    .velo-auth__card-logo { display: none; }
}

.velo-auth__heading {
    text-align: center;
    margin-bottom: 1.75rem;
}

.velo-auth__heading h1 {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--v-ink);
    margin: 0 0 .35rem;
}

html[dir="rtl"] .velo-auth__heading h1 {
    letter-spacing: 0;
}

.velo-auth__heading p {
    font-size: .9375rem;
    color: var(--v-ink-400);
    margin: 0;
}

/* Fields */
.velo-auth__field {
    margin-bottom: 1.15rem;
}

.velo-auth__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--v-ink);
    margin-bottom: .45rem;
}

.velo-auth__input-wrap {
    position: relative;
}

.velo-auth__input {
    display: block;
    width: 100%;
    height: 50px;
    padding-inline: 2.85rem 1rem;
    font-family: inherit;
    font-size: .96rem;
    font-weight: 500;
    color: var(--v-ink);
    background: var(--v-ink-50);
    border: 1.5px solid transparent;
    border-radius: 12px;
    transition: border-color .2s var(--v-ease), background-color .2s var(--v-ease), box-shadow .2s var(--v-ease);
}

.velo-auth__input::placeholder {
    color: var(--v-ink-400);
    font-weight: 400;
}

.velo-auth__input:focus {
    outline: none;
    background: #fff;
    border-color: var(--v-royal);
    box-shadow: 0 0 0 4px rgba(69, 95, 244, .12);
}

.velo-auth__input-icon {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--v-ink-400);
    font-size: .95rem;
    pointer-events: none;
    transition: color .2s var(--v-ease);
}

.velo-auth__input:focus ~ .velo-auth__input-icon {
    color: var(--v-royal);
}

/* password reveal — the app's JS targets #show_hide_icon */
.velo-auth__input-wrap .show_hide_icon,
.velo-auth__input-wrap #show_hide_icon {
    position: absolute !important;
    inset-inline-end: .65rem;
    top: 50% !important;
    transform: translateY(-50%);
    inset-inline-start: auto !important;
    right: auto;
    left: auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: none;
    background: none;
    padding: 0;
    color: var(--v-ink-400);
    cursor: pointer;
    border-radius: 8px;
}

.velo-auth__input-wrap #show_hide_icon:hover {
    background: var(--v-ink-50);
    color: var(--v-ink);
}

.velo-auth__input-wrap #show_hide_icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.velo-auth__forgot {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--v-royal);
    text-decoration: none;
}

.velo-auth__forgot:hover {
    color: var(--v-royal-600);
    text-decoration: underline;
}

.velo-auth__remember {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--v-ink-500);
    cursor: pointer;
    margin-bottom: 1.4rem;
}

.velo-auth__remember input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--v-royal);
    cursor: pointer;
    margin: 0;
}

.velo-auth__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #455FF4 0%, #3CB9FF 100%);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(69, 95, 244, .3);
    transition: transform .25s var(--v-ease), box-shadow .25s var(--v-ease), filter .25s var(--v-ease);
}

.velo-auth__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(69, 95, 244, .38);
    filter: saturate(1.1);
}

.velo-auth__submit:active {
    transform: translateY(0);
}

.velo-auth__submit:focus-visible {
    outline: 3px solid rgba(69, 95, 244, .45);
    outline-offset: 3px;
}

/* success / info notice above a form (e.g. "reset link sent") */
.velo-auth__notice {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .9rem 1.05rem;
    margin-bottom: 1.25rem;
    border-radius: 12px;
    background: rgba(15, 224, 130, .1);
    border: 1px solid rgba(15, 224, 130, .32);
    color: #067A47;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.55;
}

.velo-auth__notice i {
    flex: none;
    margin-top: .18rem;
    color: var(--v-mint);
}

/* password reveal buttons rendered by the reset screen */
.velo-auth__input-wrap .velo-reveal {
    position: absolute;
    inset-inline-end: .65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--v-ink-400);
    cursor: pointer;
    border-radius: 8px;
}

.velo-auth__input-wrap .velo-reveal:hover {
    background: var(--v-ink-50);
    color: var(--v-ink);
}

.velo-auth__input-wrap .velo-reveal svg {
    width: 20px;
    height: 20px;
}

/* leave room for the reveal button so long values are not hidden behind it */
.velo-auth__input-wrap:has(.velo-reveal) .velo-auth__input {
    padding-inline-end: 2.9rem;
}

.velo-auth__foot {
    margin-top: 1.5rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--v-ink-100);
    text-align: center;
    font-size: .875rem;
    color: var(--v-ink-400);
}

.velo-auth__foot a {
    font-weight: 700;
    color: var(--v-royal);
    text-decoration: none;
}

.velo-auth__foot a:hover {
    text-decoration: underline;
}

.velo-auth__secure {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.25rem;
    font-size: .78rem;
    color: var(--v-ink-400);
}

.velo-auth__secure i {
    color: var(--v-mint);
}

/* Validation messages inherited from the framework */
.velo-auth .help-block {
    display: block;
    margin: .45rem 0 0;
    font-size: .8125rem;
    font-weight: 600;
    color: #E5484D;
}

.velo-auth .has-error .velo-auth__input {
    border-color: #E5484D;
    background: #FFF5F5;
}

.velo-auth__panel-bottom {
    text-align: center;
    padding-top: 1.5rem;
    font-size: .8125rem;
    color: var(--v-ink-400);
}

.velo-auth__panel-bottom a {
    color: var(--v-ink-400);
    text-decoration: none;
}

.velo-auth__panel-bottom a:hover {
    color: var(--v-royal);
}

/* ==========================================================================
   Business registration
   --------------------------------------------------------------------------
   The form markup comes from business/partials/register_form.blade.php, which
   is shared with the Superadmin "create business" screen — so it is styled
   from here, scoped under .velo-reg, and never edited.
   The wizard chrome (.wizard/.steps/.content/.actions) is generated at runtime
   by jQuery Steps (public/js/login.js).
   ========================================================================== */

/* Full-width variant (no side brand panel) — used by /pricing, which brings
   its own dark hero band instead. */
.velo-auth--plain {
    grid-template-columns: 1fr !important;
}

.velo-auth--plain .velo-auth__brand {
    display: none !important;
}

.velo-auth--plain .velo-auth__panel {
    padding: 0;
    background: var(--v-ink-50);
}

.velo-auth--plain .velo-auth__topbar {
    max-width: 1180px;
    margin-inline: auto;
    padding: 1.25rem clamp(1rem, 4vw, 2rem) 0;
    margin-bottom: 0;
}

.velo-auth--plain .velo-auth__stage {
    display: block;
}

.velo-auth--wide {
    grid-template-columns: 1fr;
}

@media (min-width: 1200px) {
    .velo-auth--wide {
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    }
}

.velo-auth__card--wide {
    max-width: 60rem;
}

.velo-reg .velo-auth__heading {
    margin-bottom: 1.25rem;
}

/* --- wizard chrome --- */
.velo-reg .wizard,
.velo-reg .wizard > .content {
    overflow: visible;
}

.velo-reg .wizard > .steps {
    width: 100%;
    margin-bottom: 1.75rem;
}

.velo-reg .wizard > .steps ul {
    display: flex;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: velo-step;
}

.velo-reg .wizard > .steps li {
    flex: 1 1 0;
    min-width: 0;
    float: none;
    width: auto;
}

.velo-reg .wizard > .steps a,
.velo-reg .wizard > .steps a:hover,
.velo-reg .wizard > .steps a:active {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding: .7rem .5rem 1rem;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--v-ink-400);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.35;
    position: relative;
    white-space: normal;
    text-decoration: none;
}

/* the numbered bullet */
.velo-reg .wizard > .steps a::before {
    counter-increment: velo-step;
    content: counter(velo-step);
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--v-ink-100);
    color: var(--v-ink-400);
    font-size: .75rem;
    font-weight: 800;
    transition: background-color .3s var(--v-ease), color .3s var(--v-ease);
}

/* the progress rail */
.velo-reg .wizard > .steps a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--v-ink-100);
    transition: background-color .3s var(--v-ease);
}

.velo-reg .wizard > .steps .current a,
.velo-reg .wizard > .steps .current a:hover,
.velo-reg .wizard > .steps .current a:active {
    color: var(--v-ink);
}

.velo-reg .wizard > .steps .current a::before {
    background: linear-gradient(135deg, #455FF4 0%, #3CB9FF 100%);
    color: #fff;
}

.velo-reg .wizard > .steps .current a::after,
.velo-reg .wizard > .steps .done a::after {
    background: linear-gradient(135deg, #455FF4 0%, #3CB9FF 100%);
}

.velo-reg .wizard > .steps .done a,
.velo-reg .wizard > .steps .done a:hover,
.velo-reg .wizard > .steps .done a:active {
    color: var(--v-ink-500);
}

.velo-reg .wizard > .steps .done a::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    background: rgba(15, 224, 130, .15);
    color: #067A47;
}

.velo-reg .wizard > .steps .number {
    display: none;
}

.velo-reg .wizard > .steps .disabled a,
.velo-reg .wizard > .steps .disabled a:hover {
    color: var(--v-ink-400);
    cursor: default;
}

/* --- wizard body ---
   jQuery Steps ships with a fixed-height .content and absolutely positioned
   .body panels (sized for its own demo). Both are forced back into normal flow
   here so the card grows with the fields instead of the form spilling out of
   it. Only the active .body is ever displayed, so static flow is safe. */
.velo-reg .wizard > .content {
    background: transparent !important;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
}

.velo-reg .wizard > .content > .body {
    position: static !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    inset: auto !important;
    padding: 0 !important;
    margin: 0;
}

/* jQuery Steps animates `left`; neutralised now that the panel is static */
.velo-reg .wizard > .content > .body[style*="display: none"],
.velo-reg .wizard > .content > .body[style*="display:none"] {
    display: none !important;
}

.velo-reg fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.velo-reg legend {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--v-ink-100);
    padding-bottom: .6rem;
    margin-bottom: 1.25rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--v-ink-400);
}

/* --- fields --- */
.velo-reg .form-group {
    margin-bottom: 1.1rem;
}

.velo-reg .form-group > label,
.velo-reg .control-label {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--v-ink);
    margin-bottom: .4rem;
}

.velo-reg .form-control,
.velo-reg select.form-control {
    display: block;
    width: 100%;
    height: 46px;
    padding: .6rem .9rem;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--v-ink);
    background: var(--v-ink-50);
    border: 1.5px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    transition: border-color .2s var(--v-ease), background-color .2s var(--v-ease), box-shadow .2s var(--v-ease);
}

.velo-reg .form-control:focus {
    outline: none;
    background: #fff;
    border-color: var(--v-royal);
    box-shadow: 0 0 0 4px rgba(69, 95, 244, .12);
}

.velo-reg textarea.form-control {
    height: auto;
    min-height: 92px;
}

/* icon prefix — the partial wraps inputs in .input-group + .input-group-addon */
.velo-reg .input-group {
    display: flex;
    width: 100%;
    position: relative;
}

.velo-reg .input-group-addon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    padding: 0;
    background: var(--v-ink-100) !important;
    border: none;
    border-start-start-radius: 10px;
    border-end-start-radius: 10px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    color: var(--v-ink-400);
    font-size: .9rem;
}

.velo-reg .input-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.velo-reg .input-group .select2-container {
    flex: 1 1 auto;
    min-width: 0;
}

/* select2 skin */
.velo-reg .select2-container--default .select2-selection--single {
    height: 46px;
    background: var(--v-ink-50);
    border: 1.5px solid transparent;
    border-radius: 0 10px 10px 0;
}

html[dir="rtl"] .velo-reg .select2-container--default .select2-selection--single {
    border-radius: 10px 0 0 10px;
}

.velo-reg .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding-inline-start: .9rem;
    color: var(--v-ink);
    font-weight: 500;
}

.velo-reg .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
}

/* file input — bare <input type=file> when no plugin has taken over */
.velo-reg input[type="file"]:not(.file-input input) {
    display: block;
    width: 100%;
    padding: .7rem .9rem;
    background: var(--v-ink-50);
    border: 1.5px dashed var(--v-ink-200);
    border-radius: 10px;
    font-size: .875rem;
    color: var(--v-ink-500);
    cursor: pointer;
}

/* bootstrap-fileinput (kv-fileinput) auto-initialises on this form; its
   caption box sizes itself and would otherwise spill into the next column. */
.velo-reg .file-input {
    width: 100%;
    max-width: 100%;
}

.velo-reg .file-input .input-group {
    display: flex;
    width: 100%;
    max-width: 100%;
}

.velo-reg .file-caption {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 .9rem;
    background: var(--v-ink-50);
    border: 1.5px solid transparent;
    border-start-start-radius: 10px;
    border-end-start-radius: 10px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    box-shadow: none;
}

.velo-reg .file-caption-name {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
    color: var(--v-ink-500);
}

.velo-reg .input-group-btn {
    flex: none;
    display: flex;
    width: auto;
}

.velo-reg .btn-file,
.velo-reg .fileinput-remove {
    height: 46px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding-inline: 1rem;
    border: none;
    background: linear-gradient(135deg, #455FF4 0%, #3CB9FF 100%);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    border-radius: 0;
    box-shadow: none;
}

.velo-reg .input-group-btn > :last-child.btn-file,
.velo-reg .input-group-btn > :last-child {
    border-start-end-radius: 10px;
    border-end-end-radius: 10px;
}

.velo-reg .fileinput-remove {
    background: var(--v-ink-100);
    color: var(--v-ink-500);
}

.velo-reg .btn-file:hover,
.velo-reg .btn-file:focus {
    color: #fff;
    filter: saturate(1.15);
}

.velo-reg input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--v-royal);
    margin-inline-end: .4rem;
    vertical-align: -2px;
}

.velo-reg .terms_condition {
    color: var(--v-royal);
    font-weight: 600;
    cursor: pointer;
}

.velo-reg .help-block,
.velo-reg .text-danger {
    display: block;
    margin-top: .35rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #E5484D;
}

.velo-reg label.error {
    display: block;
    margin-top: .35rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #E5484D;
}

.velo-reg .form-control.error {
    border-color: #E5484D;
    background: #FFF5F5;
}

/* --- wizard actions --- */

/* jQuery Steps floats .steps/.content/.actions, so the form (which is the
   .wizard element itself here) collapses to zero height unless it establishes
   a block formatting context. */
.velo-reg .wizard,
.velo-reg #business_register_form {
    display: flow-root;
}

.velo-reg .wizard > .steps,
.velo-reg .wizard > .content,
.velo-reg .wizard > .actions {
    float: none !important;
}

.velo-reg .wizard > .actions {
    position: static;
    width: 100%;
    clear: both;
    margin-top: 1.75rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--v-ink-100);
    text-align: initial;
}

.velo-reg .wizard > .actions > ul {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.velo-reg .wizard > .actions > ul > li {
    float: none;
    margin: 0;
}

.velo-reg .wizard > .actions a,
.velo-reg .wizard > .actions a:hover,
.velo-reg .wizard > .actions a:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    height: 46px;
    padding-inline: 1.5rem;
    border: 1px solid var(--v-ink-200);
    border-radius: 999px;
    background: #fff;
    color: var(--v-ink);
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .25s var(--v-ease);
}

.velo-reg .wizard > .actions a:hover {
    border-color: rgba(69, 95, 244, .45);
    color: var(--v-royal);
}

/* next / finish get the brand fill */
.velo-reg .wizard > .actions li:last-child a,
.velo-reg .wizard > .actions a[href="#next"],
.velo-reg .wizard > .actions a[href="#finish"] {
    background: linear-gradient(135deg, #455FF4 0%, #3CB9FF 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 26px rgba(69, 95, 244, .28);
}

.velo-reg .wizard > .actions a[href="#next"]:hover,
.velo-reg .wizard > .actions a[href="#finish"]:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(69, 95, 244, .36);
}

.velo-reg .wizard > .actions .disabled a,
.velo-reg .wizard > .actions .disabled a:hover {
    opacity: .45;
    cursor: not-allowed;
    background: #fff;
    border-color: var(--v-ink-200);
    color: var(--v-ink-400);
    box-shadow: none;
    transform: none;
}

/* Bootstrap 3 grid inside the card still needs its gutters */
.velo-reg [class*="col-md-"],
.velo-reg [class*="col-xs-"],
.velo-reg [class*="col-sm-"] {
    padding-inline: .5rem;
}

.velo-reg .wizard > .content > .body > fieldset {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -.5rem;
}

.velo-reg .wizard > .content > .body > fieldset > legend {
    flex: 0 0 100%;
    margin-inline: .5rem;
    width: auto;
}

/* Bootstrap 3 line-breakers inside the field grid.
   Scoped to direct children of the fieldset on purpose: jQuery Steps also puts
   a `clearfix` class on the form and on .steps/.content/.actions, and a blanket
   `.clearfix { height: 0 }` would collapse the whole wizard. */
.velo-reg fieldset > .clearfix {
    flex-basis: 100%;
    height: 0;
    padding: 0;
}

@media (max-width: 767.98px) {
    .velo-reg .wizard > .steps a {
        font-size: 0;
        gap: 0;
        justify-content: center;
        padding-inline: 0;
    }

    .velo-reg .wizard > .steps a::before {
        font-size: .75rem;
    }

    .velo-reg .wizard > .actions > ul {
        justify-content: stretch;
    }

    .velo-reg .wizard > .actions a {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ==========================================================================
   Public pricing page
   --------------------------------------------------------------------------
   The cards are rendered by superadmin::subscription.partials.package_card,
   which is shared with the logged-in subscription screen. It is styled from
   here (scoped to .velo-pricing) and never edited, so the other screen keeps
   its original look.
   ========================================================================== */

.velo-pricing {
    width: 100%;
}

.velo-pricing__hero {
    position: relative;
    background: linear-gradient(160deg, #01063A 0%, #141E63 55%, #0A1250 100%);
    color: #fff;
    padding-top: clamp(2rem, 1rem + 4vw, 3.5rem);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

.velo-pricing__hero::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(69, 95, 244, .7) 0%, rgba(69, 95, 244, 0) 68%);
    filter: blur(90px);
    top: -280px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.velo-pricing__hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 10%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 10%, #000 30%, transparent 80%);
}

.velo-pricing__hero-inner {
    max-width: 46rem;
    margin-inline: auto;
    padding: 0 clamp(1rem, 4vw, 2rem) clamp(3rem, 2rem + 4vw, 5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.velo-pricing__logo-link {
    display: inline-block;
    margin-bottom: 1.75rem;
}

.velo-pricing__logo {
    height: 58px;
    width: auto;
    object-fit: contain;
}

.velo-pricing__title {
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: #fff;
    margin: 0 0 .85rem;
}

html[dir="rtl"] .velo-pricing__title {
    letter-spacing: 0;
    line-height: 1.3;
}

.velo-pricing__subtitle {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(226, 232, 255, .78);
    margin: 0 0 2rem;
    max-width: 34rem;
}

/* monthly / annual switch */
.velo-pricing__toggle {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
}

.velo-pricing__toggle-label {
    font-size: .9rem;
    font-weight: 700;
    color: rgba(226, 232, 255, .6);
    transition: color .25s var(--v-ease);
    cursor: default;
    user-select: none;
}

.velo-pricing__toggle-label.is-active {
    color: #fff;
}

.velo-pricing__switch {
    position: relative;
    display: inline-flex;
    flex: none;
    cursor: pointer;
}

.velo-pricing__switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.velo-pricing__switch-track {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    position: relative;
    transition: background-color .3s var(--v-ease);
}

.velo-pricing__switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform .3s var(--v-ease);
}

.velo-pricing__switch input:checked ~ .velo-pricing__switch-track {
    background: linear-gradient(135deg, #0FE082 0%, #3CB9FF 100%);
}

.velo-pricing__switch input:checked ~ .velo-pricing__switch-track::after {
    transform: translateX(20px);
}

html[dir="rtl"] .velo-pricing__switch input:checked ~ .velo-pricing__switch-track::after {
    transform: translateX(-20px);
}

.velo-pricing__switch input:focus-visible ~ .velo-pricing__switch-track {
    outline: 3px solid rgba(89, 224, 255, .5);
    outline-offset: 3px;
}

.velo-pricing__divider {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: -1px;
    color: var(--v-ink-50);
}

/* --- cards --- */
.velo-pricing__body {
    max-width: 1180px;
    margin-inline: auto;
    padding: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(1rem, 4vw, 2rem) 3rem;
}

.velo-pricing__packages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    margin-inline: -.75rem;
}

/* the shared partial's outer column */
.velo-pricing .price_card {
    float: none;
    display: flex;
    width: 100%;
    padding-inline: .75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .velo-pricing .price_card { width: 50%; }
}

@media (min-width: 992px) {
    .velo-pricing .price_card { width: 33.3333%; }
}

/* the card body itself — neutralise the utility classes it ships with */
.velo-pricing .price_card > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2rem 1.65rem;
    background: #fff;
    border: 1px solid var(--v-ink-100);
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(1, 6, 58, .07);
    transition: transform .35s var(--v-ease), box-shadow .35s var(--v-ease), border-color .35s var(--v-ease);
    transform: none !important;
    cursor: default;
}

.velo-pricing .price_card > div:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 26px 56px rgba(1, 6, 58, .13);
    border-color: rgba(69, 95, 244, .3);
}

/* "popular" badge */
.velo-pricing .tw-dw-badge {
    align-self: center;
    display: inline-flex;
    align-items: center;
    padding: .35rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #455FF4 0%, #3CB9FF 100%) !important;
    color: #fff !important;
    border: none;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* package name */
.velo-pricing .price_card h2 {
    font-size: 1.15rem !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--v-ink) !important;
    margin: 0 0 .35rem;
}

/* price — the partial puts the amount and the "/ N interval" suffix in one
   <h3>, so the amount (its own .display_currency span) is scaled up and the
   suffix is kept small and muted instead of wrapping at heading size. */
.velo-pricing .price_card h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .3rem;
    font-size: .9rem !important;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 .5rem;
    color: var(--v-ink-400) !important;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.velo-pricing .price_card h3 .display_currency {
    font-size: clamp(1.85rem, 1.4rem + 1.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    white-space: nowrap;
    background: linear-gradient(100deg, #455FF4 0%, #3CB9FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.velo-pricing .price_card span.tw-text-sm {
    font-size: .9rem !important;
    color: var(--v-ink-400) !important;
    line-height: 1.6;
}

/* feature rows */
.velo-pricing .price_card .tw-flex.tw-gap-2 {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .45rem 0;
    font-size: .9rem;
    font-weight: 500;
    color: var(--v-ink-500) !important;
    border-bottom: 1px solid var(--v-ink-50);
    text-align: start;
}

.velo-pricing .price_card .tw-flex.tw-gap-2:last-child {
    border-bottom: none;
}

.velo-pricing .price_card .fa-check {
    flex: none;
    margin-top: .28rem;
    font-size: .72rem;
    color: var(--v-mint) !important;
}

/* CTA */
.velo-pricing .price_card a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin-top: auto;
    border-radius: 12px;
    background: linear-gradient(135deg, #455FF4 0%, #3CB9FF 100%);
    color: #fff !important;
    font-size: .96rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(69, 95, 244, .26);
    transition: transform .25s var(--v-ease), box-shadow .25s var(--v-ease), filter .25s var(--v-ease);
}

.velo-pricing .price_card a:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(69, 95, 244, .34);
    filter: saturate(1.1);
}

.velo-pricing__empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--v-ink-400);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Comparison table
   -------------------------------------------------------------------------- */

.velo-compare {
    margin-top: 3.5rem;
}

.velo-compare__head,
.velo-addons__head {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto 2rem;
}

.velo-compare__title,
.velo-addons__title {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--v-ink);
    margin: 0 0 .6rem;
}

html[dir="rtl"] .velo-compare__title,
html[dir="rtl"] .velo-addons__title {
    letter-spacing: 0;
}

.velo-compare__lead,
.velo-addons__lead {
    font-size: .96rem;
    line-height: 1.7;
    color: var(--v-ink-400);
    margin: 0;
}

.velo-compare__scroll {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--v-ink-100);
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(1, 6, 58, .06);
}

.velo-compare__table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
}

.velo-compare__table th,
.velo-compare__table td {
    padding: .85rem 1rem;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--v-ink-100);
}

.velo-compare__table thead th {
    position: sticky;
    top: 0;
    background: var(--v-ink-50);
    color: var(--v-ink);
    font-weight: 800;
    font-size: .85rem;
    border-bottom: 1px solid var(--v-ink-200);
    z-index: 1;
}

.velo-compare__rowhead {
    text-align: start !important;
    font-weight: 600;
    color: var(--v-ink-500);
    background: #fff;
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    min-width: 12rem;
}

.velo-compare__table thead .velo-compare__rowhead {
    background: var(--v-ink-50);
    z-index: 3;
}

.velo-compare__plan {
    display: block;
    line-height: 1.35;
}

.velo-compare__pop {
    display: inline-block;
    margin-top: .3rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #455FF4 0%, #3CB9FF 100%);
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.velo-compare__group th {
    text-align: start !important;
    background: var(--v-ink-50);
    color: var(--v-ink-400);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding-block: .6rem;
}

.velo-compare__table tbody tr:last-child th,
.velo-compare__table tbody tr:last-child td {
    border-bottom: none;
}

.velo-compare__yes {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(15, 224, 130, .14);
    color: #067A47;
    font-size: .72rem;
}

.velo-compare__addon {
    display: inline-block;
    padding: .22rem .7rem;
    border-radius: 999px;
    background: rgba(69, 95, 244, .08);
    border: 1px solid rgba(69, 95, 244, .22);
    color: var(--v-royal);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.velo-compare__unlimited {
    font-weight: 700;
    color: var(--v-ink);
}

.velo-compare__dash {
    color: var(--v-ink-200);
}

/* --------------------------------------------------------------------------
   Add-ons
   -------------------------------------------------------------------------- */

.velo-addons {
    margin-top: 3.5rem;
}

.velo-addons__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.velo-addon {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.15rem 1.2rem;
    background: #fff;
    border: 1px solid var(--v-ink-100);
    border-radius: 16px;
    transition: transform .3s var(--v-ease), box-shadow .3s var(--v-ease), border-color .3s var(--v-ease);
}

.velo-addon:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(1, 6, 58, .08);
    border-color: rgba(69, 95, 244, .28);
}

.velo-addon__icon {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #455FF4 0%, #3CB9FF 100%);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 8px 20px rgba(69, 95, 244, .24);
}

.velo-addon__body {
    min-width: 0;
}

.velo-addon__name {
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--v-ink);
    margin: 0 0 .25rem;
    line-height: 1.4;
}

html[dir="rtl"] .velo-addon__name {
    letter-spacing: 0;
}

.velo-addon__meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--v-ink-400);
}

.velo-addon__meta i {
    color: var(--v-mint);
    font-size: .75rem;
}

.velo-addons__cta {
    margin-top: 2rem;
    padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    border-radius: 20px;
    background: linear-gradient(135deg, #455FF4 0%, #3CB9FF 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 18px 44px rgba(69, 95, 244, .28);
}

.velo-addons__cta h3 {
    font-size: clamp(1.3rem, 1rem + 1.2vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 .5rem;
}

html[dir="rtl"] .velo-addons__cta h3 {
    letter-spacing: 0;
}

.velo-addons__cta p {
    margin: 0 auto 1.5rem;
    max-width: 34rem;
    font-size: .98rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .9);
}

.velo-addons__btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    height: 48px;
    padding-inline: 1.9rem;
    border-radius: 999px;
    background: #fff;
    color: var(--v-royal) !important;
    font-size: .96rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(1, 6, 58, .2);
    transition: transform .25s var(--v-ease), box-shadow .25s var(--v-ease);
}

.velo-addons__btn:hover {
    color: var(--v-navy) !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(1, 6, 58, .28);
}

.velo-pricing__note {
    text-align: center;
    margin: 2.5rem 0 0;
    font-size: .875rem;
    color: var(--v-ink-400);
}

.velo-pricing__note i {
    color: var(--v-royal);
    margin-inline-end: .35rem;
}

/* the plain variant hides the side panel, so the top bar sits over the hero */
.velo-auth--plain .velo-auth__topbar {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 5;
}

.velo-auth--plain .velo-auth__toplink {
    color: rgba(226, 232, 255, .78);
}

.velo-auth--plain .velo-auth__toplink:hover {
    color: #fff;
}

.velo-auth--plain .velo-auth__toplink--pill {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.velo-auth--plain .velo-auth__lang > summary {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: rgba(226, 232, 255, .85);
}

.velo-auth--plain .velo-auth__panel-bottom {
    padding-bottom: 1.5rem;
}

/* ==========================================================================
   Long-form document pages (privacy policy, terms)
   ========================================================================== */

.velo-doc {
    width: 100%;
}

.velo-doc__hero {
    position: relative;
    background: linear-gradient(160deg, #01063A 0%, #141E63 55%, #0A1250 100%);
    color: #fff;
    padding-top: clamp(2rem, 1rem + 4vw, 3.5rem);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

.velo-doc__hero::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(69, 95, 244, .65) 0%, rgba(69, 95, 244, 0) 68%);
    filter: blur(90px);
    top: -260px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.velo-doc__hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 10%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 10%, #000 30%, transparent 80%);
}

.velo-doc__hero-inner {
    max-width: 46rem;
    margin-inline: auto;
    padding: 0 clamp(1rem, 4vw, 2rem) clamp(2.5rem, 2rem + 3vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.velo-doc__logo-link {
    display: inline-block;
    margin-bottom: 1.5rem;
}

.velo-doc__logo {
    height: 54px;
    width: auto;
    object-fit: contain;
}

.velo-doc__title {
    font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: #fff;
    margin: 0 0 .85rem;
}

html[dir="rtl"] .velo-doc__title {
    letter-spacing: 0;
    line-height: 1.3;
}

.velo-doc__meta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: .85rem;
    font-weight: 600;
    color: rgba(226, 232, 255, .78);
}

.velo-doc__meta i {
    color: var(--v-sky);
}

.velo-doc__divider {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: -1px;
    color: var(--v-ink-50);
}

/* --- body: sticky table of contents + article --- */
.velo-doc__body {
    max-width: 1120px;
    margin-inline: auto;
    padding: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(1rem, 4vw, 2rem) 3.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 992px) {
    .velo-doc__body {
        grid-template-columns: 17rem minmax(0, 1fr);
        gap: 2.5rem;
    }
}

.velo-doc__toc {
    display: none;
    position: sticky;
    top: 1.5rem;
    padding: 1.35rem 1.25rem;
    background: #fff;
    border: 1px solid var(--v-ink-100);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(1, 6, 58, .05);
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}

@media (min-width: 992px) {
    .velo-doc__toc {
        display: block;
    }
}

.velo-doc__toc-title {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--v-ink-400);
    margin: 0 0 .85rem;
}

.velo-doc__toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.velo-doc__toc-list li + li {
    margin-top: .15rem;
}

.velo-doc__toc-list a {
    display: block;
    padding: .45rem .6rem;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--v-ink-500);
    text-decoration: none;
    transition: background-color .2s var(--v-ease), color .2s var(--v-ease);
}

.velo-doc__toc-list a:hover {
    background: var(--v-ink-50);
    color: var(--v-royal);
}

.velo-doc__article {
    background: #fff;
    border: 1px solid var(--v-ink-100);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(1, 6, 58, .06);
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);
}

.velo-doc__section {
    scroll-margin-top: 1.5rem;
}

.velo-doc__section + .velo-doc__section {
    margin-top: 2.25rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--v-ink-100);
}

.velo-doc__article h2 {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--v-ink);
    margin: 0 0 .85rem;
}

html[dir="rtl"] .velo-doc__article h2 {
    letter-spacing: 0;
}

.velo-doc__article h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--v-ink);
    margin: 1.5rem 0 .6rem;
}

.velo-doc__article p {
    font-size: .96rem;
    line-height: 1.8;
    color: var(--v-ink-500);
    margin: 0 0 1rem;
}

.velo-doc__article p:last-child {
    margin-bottom: 0;
}

.velo-doc__article ul {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.velo-doc__article ul li {
    position: relative;
    padding-inline-start: 1.5rem;
    margin-bottom: .6rem;
    font-size: .96rem;
    line-height: 1.75;
    color: var(--v-ink-500);
}

.velo-doc__article ul li::before {
    content: "";
    position: absolute;
    inset-inline-start: .3rem;
    top: .68rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v-royal);
}

.velo-doc__article strong {
    color: var(--v-ink);
    font-weight: 700;
}

.velo-doc__article a {
    color: var(--v-royal);
    font-weight: 600;
}

/* contact block */
.velo-doc__contact-list {
    list-style: none !important;
    margin: 1.15rem 0 0 !important;
    padding: 0 !important;
    display: grid;
    gap: .6rem;
}

.velo-doc__contact-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 !important;
    margin: 0 !important;
}

.velo-doc__contact-list li::before {
    display: none !important;
}

.velo-doc__contact-icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(69, 95, 244, .1);
    color: var(--v-royal);
    font-size: .85rem;
}

.velo-doc__back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 2.25rem;
    padding: .7rem 1.4rem;
    border-radius: 999px;
    border: 1px solid var(--v-ink-200);
    background: #fff;
    color: var(--v-ink) !important;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .25s var(--v-ease);
}

.velo-doc__back:hover {
    border-color: rgba(69, 95, 244, .45);
    color: var(--v-royal) !important;
}

html[dir="rtl"] .velo-doc__back i {
    transform: scaleX(-1);
}

/* ==========================================================================
   Public repair-status lookup
   ========================================================================== */

.velo-auth__input--select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-inline-end: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237A81A8'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: .9rem;
    background-position: right 1rem center;
}

html[dir="rtl"] .velo-auth__input--select {
    background-position: left 1rem center;
}

.velo-repair {
    width: 100%;
    max-width: 27rem;
    margin-inline: auto;
}

.velo-repair__results:not(:empty) {
    max-width: 46rem;
    margin: 1.75rem auto 0;
}

/* the results block is wider than the lookup card */
.velo-repair:has(.velo-repair__results:not(:empty)) {
    max-width: 46rem;
}

.velo-repair__card {
    background: #fff;
    border: 1px solid var(--v-ink-100);
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(1, 6, 58, .07);
    padding: 1.6rem;
    margin-bottom: 1.15rem;
    animation: velo-auth-in .45s var(--v-ease) both;
}

.velo-repair__card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--v-ink-100);
}

.velo-repair__job {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--v-ink);
}

.velo-repair__job i {
    color: var(--v-royal);
}

.velo-repair__status {
    display: inline-flex;
    align-items: center;
    padding: .35rem .95rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--status-color) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-color) 45%, transparent);
    color: var(--status-color);
    font-size: .8125rem;
    font-weight: 800;
    white-space: nowrap;
}

.velo-repair__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem 1.25rem;
    margin: 0 0 1.35rem;
}

.velo-repair__item dt {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--v-ink-400);
    margin-bottom: .2rem;
}

.velo-repair__item dd {
    margin: 0;
    font-size: .96rem;
    font-weight: 600;
    color: var(--v-ink);
    word-break: break-word;
}

.velo-repair__activities-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v-ink-400);
    margin: 0 0 .75rem;
}

/* the activities table comes from repair::customer_repair.repair_activities */
.velo-repair__activities .box-body {
    padding: 0;
}

.velo-repair__activities .table {
    width: 100%;
    margin: 0;
    background: var(--v-ink-50) !important;
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .875rem;
}

.velo-repair__activities .table th {
    background: var(--v-ink-100);
    color: var(--v-ink-500);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .7rem .85rem;
    border: none;
    text-align: start;
}

.velo-repair__activities .table td {
    padding: .7rem .85rem;
    border: none;
    border-top: 1px solid var(--v-ink-100);
    color: var(--v-ink-500);
    vertical-align: top;
}

.velo-repair__activities .table-responsive {
    border: none;
    overflow-x: auto;
}

/* Demo shop shortcuts (demo environments only) */
.velo-auth__demo {
    width: 100%;
    max-width: 27rem;
    margin: 1.5rem auto 0;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--v-ink-100);
    border-radius: var(--v-radius);
}

.velo-auth__demo h3 {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--v-ink-400);
    margin: 0 0 .85rem;
}

.velo-auth__demo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.velo-auth__demo-grid .demo-login {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--v-ink-200);
    background: var(--v-ink-50);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--v-ink-500);
    text-decoration: none;
}

.velo-auth__demo-grid .demo-login:hover {
    border-color: rgba(69, 95, 244, .45);
    color: var(--v-royal);
}

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