/* Xrentit website design system.
   Same brand colours, radii and light/dark behaviour as the Xrentit app, so the
   website and the app feel like one product. Loaded after style.css. */

:root {
    --xr-primary: #15b887;
    --xr-primary-strong: #0f9a72;
    --xr-primary-light: #2dd4a8;
    --xr-primary-soft: #e8f8f2;
    --xr-bg: #ffffff;
    --xr-surface: #f7f8f8;
    --xr-raised: #ffffff;
    --xr-muted: #f2f4f3;
    --xr-border: #e8e8e8;
    --xr-text: #1d1d1d;
    --xr-subtle: #6b7280;
    --xr-on-primary: #ffffff;
    --xr-danger: #c62828;
    --xr-warning: #ef6c00;
    --xr-star: #ffb800;
    --xr-shadow: 0 1px 2px rgba(16, 24, 20, .05), 0 8px 24px rgba(16, 24, 20, .06);
    --xr-shadow-lg: 0 2px 6px rgba(16, 24, 20, .06), 0 24px 56px rgba(16, 24, 20, .12);
    --xr-radius: 14px;
    --xr-radius-lg: 22px;
    --xr-header-h: 76px;
    --xr-font: "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="dark"] {
    --xr-primary-soft: #12332a;
    --xr-bg: #0f1412;
    --xr-surface: #151a18;
    --xr-raised: #1a1f1d;
    --xr-muted: #1f2523;
    --xr-border: #2a312e;
    --xr-text: #f1f5f3;
    --xr-subtle: #9aa5a0;
    --xr-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --xr-shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 56px rgba(0, 0, 0, .5);
}

body.xr-site {
    font-family: var(--xr-font);
    background: var(--xr-bg);
    color: var(--xr-text);
    -webkit-font-smoothing: antialiased;
}
body.xr-site h1, body.xr-site h2, body.xr-site h3, body.xr-site h4, body.xr-site h5 {
    font-family: var(--xr-font);
    color: var(--xr-text);
    letter-spacing: -0.015em;
}
body.xr-site p { color: var(--xr-subtle); }
body.xr-site a { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.xr-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Buttons ---------- */
.xr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; min-height: 46px; border-radius: 12px; border: 1.5px solid transparent;
    font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.xr-btn:hover { transform: translateY(-1px); text-decoration: none; }
.xr-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--xr-primary) 45%, transparent); outline-offset: 2px; }
.xr-btn--primary { background: var(--xr-primary); color: var(--xr-on-primary); box-shadow: 0 6px 18px color-mix(in srgb, var(--xr-primary) 35%, transparent); }
.xr-btn--primary:hover { background: var(--xr-primary-strong); color: var(--xr-on-primary); }
.xr-btn--ghost { background: transparent; color: var(--xr-text); border-color: var(--xr-border); }
.xr-btn--ghost:hover { border-color: var(--xr-primary); color: var(--xr-primary); }
.xr-btn--soft { background: var(--xr-primary-soft); color: var(--xr-primary-strong); }
.xr-btn--sm { padding: 9px 16px; min-height: 40px; font-size: 14px; }

/* ---------- Header ---------- */
.xr-header {
    position: sticky; top: 0; z-index: 1000; height: var(--xr-header-h);
    background: color-mix(in srgb, var(--xr-bg) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--xr-border);
}
.xr-header__inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.xr-logo { display: flex; align-items: center; flex: 0 0 auto; }
.xr-logo img { height: 38px; width: auto; display: block; }
.xr-logo .xr-logo-dark { display: none; }
:root[data-theme="dark"] .xr-logo .xr-logo-light { display: none; }
:root[data-theme="dark"] .xr-logo .xr-logo-dark { display: block; }
.xr-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto 0 8px; padding: 0; list-style: none; }
.xr-nav > li { position: relative; }
.xr-nav a, .xr-nav button.xr-nav__more {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; border: 0; background: none;
    font: 500 15px var(--xr-font); color: var(--xr-subtle); text-decoration: none; cursor: pointer;
}
.xr-nav a:hover, .xr-nav button.xr-nav__more:hover { color: var(--xr-text); background: var(--xr-muted); }
.xr-nav a.is-active { color: var(--xr-primary-strong); background: var(--xr-primary-soft); font-weight: 600; }
.xr-menu {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; padding: 6px; border-radius: 14px;
    background: var(--xr-raised); border: 1px solid var(--xr-border); box-shadow: var(--xr-shadow-lg); display: none;
}
.xr-menu.is-open { display: block; }
.xr-menu a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 10px; font: 500 14.5px var(--xr-font); line-height: 1.2; color: var(--xr-text); text-decoration: none; white-space: nowrap; }
.xr-menu a i { flex: none; width: 20px; font-size: 19px; line-height: 1; text-align: center; color: var(--xr-subtle); }
.xr-menu a:hover { background: var(--xr-muted); color: var(--xr-text); }
.xr-menu a.xr-notif__all { display: block; border-radius: 0; padding: 12px 16px; gap: 0; width: auto; color: var(--xr-primary); font-weight: 700; }
.xr-menu a:hover i { color: var(--xr-primary); }
.xr-menu a.logout-btn, .xr-menu a.logout-btn i { color: var(--xr-danger); }
.xr-menu a.logout-btn:hover { background: color-mix(in srgb, var(--xr-danger) 10%, transparent); }
.xr-actions { display: flex; align-items: center; gap: 10px; }
.xr-icon-btn {
    width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--xr-border); background: var(--xr-raised); color: var(--xr-text);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; text-decoration: none;
}
.xr-icon-btn:hover { border-color: var(--xr-primary); color: var(--xr-primary); }
.xr-lang { position: relative; }
.xr-lang > button { width: auto; padding: 0 12px; gap: 6px; font: 600 14px var(--xr-font); }
.xr-lang .xr-menu a.is-current { color: var(--xr-primary-strong); font-weight: 700; }
.xr-burger { display: none; }
.xr-drawer { display: none; }
@media (max-width: 1080px) {
    .xr-nav, .xr-actions .xr-hide-md { display: none; }
    .xr-burger { display: inline-flex; margin-left: auto; }
    .xr-actions { margin-left: 0; }
    .xr-header__inner { gap: 12px; }
    .xr-drawer {
        position: fixed; inset: var(--xr-header-h) 0 0 0; background: var(--xr-bg); z-index: 999; padding: 16px 20px 32px; overflow: auto;
        display: none; flex-direction: column; gap: 4px;
    }
    .xr-drawer.is-open { display: flex; }
    .xr-drawer a { padding: 14px 12px; border-radius: 12px; font-size: 17px; font-weight: 600; color: var(--xr-text); text-decoration: none; }
    .xr-drawer a:hover, .xr-drawer a.is-active { background: var(--xr-primary-soft); color: var(--xr-primary-strong); }
    .xr-drawer .xr-drawer__cta { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
    .xr-drawer .xr-btn { font-size: 16px; }
}
body.xr-lock { overflow: hidden; }

/* ---------- Sections ---------- */
.xr-section { padding: 88px 0; }
.xr-section--surface { background: var(--xr-surface); }
.xr-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--xr-primary-soft);
    color: var(--xr-primary-strong); font-size: 13px; font-weight: 700; letter-spacing: .02em; margin-bottom: 14px;
}
.xr-title { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; font-weight: 800; margin: 0 0 14px; }
.xr-lead { font-size: 17px; line-height: 1.65; color: var(--xr-subtle); max-width: 640px; margin: 0; }
.xr-head { margin-bottom: 44px; }
.xr-head--center { text-align: center; }
.xr-head--center .xr-lead { margin-left: auto; margin-right: auto; }
.xr-grid { display: grid; gap: 22px; }
.xr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xr-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 991px) { .xr-grid--3, .xr-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xr-section { padding: 64px 0; } }
@media (max-width: 640px) { .xr-grid--3, .xr-grid--4, .xr-grid--2 { grid-template-columns: 1fr; } .xr-section { padding: 52px 0; } }
.xr-card {
    background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: var(--xr-radius-lg); padding: 26px;
    box-shadow: var(--xr-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.xr-card:hover { transform: translateY(-3px); box-shadow: var(--xr-shadow-lg); border-color: color-mix(in srgb, var(--xr-primary) 40%, var(--xr-border)); }
.xr-card h3, .xr-card h4 { font-size: 19px; font-weight: 700; margin: 16px 0 8px; }
.xr-card p { margin: 0; font-size: 15px; line-height: 1.6; }
.xr-ico {
    width: 52px; height: 52px; border-radius: 14px; background: var(--xr-primary-soft); color: var(--xr-primary-strong);
    display: inline-flex; align-items: center; justify-content: center; font-size: 26px;
}

/* ---------- Hero ---------- */
.xr-hero { position: relative; overflow: hidden; padding: 72px 0 96px; background:
    radial-gradient(900px 480px at 85% 10%, color-mix(in srgb, var(--xr-primary) 14%, transparent), transparent 70%),
    radial-gradient(700px 400px at 0% 100%, color-mix(in srgb, var(--xr-primary) 9%, transparent), transparent 70%), var(--xr-bg); }
.xr-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
@media (max-width: 991px) { .xr-hero { padding: 40px 0 64px; } .xr-hero__grid { grid-template-columns: 1fr; } }
.xr-hero h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.08; font-weight: 800; margin: 0 0 18px; }
.xr-hero h1 em { font-style: normal; color: var(--xr-primary); }
.xr-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.xr-search {
    display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 30px; max-width: 560px; padding: 8px;
    background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: 16px; box-shadow: var(--xr-shadow-lg);
}
.xr-search label { position: relative; display: flex; align-items: center; margin: 0; }
.xr-search label i { position: absolute; left: 14px; color: var(--xr-subtle); font-size: 18px; }
.xr-search input { width: 100%; height: 50px; border: 0; background: transparent; padding: 0 14px 0 42px; font: 500 15px var(--xr-font); color: var(--xr-text); outline: none; }
.xr-search input::placeholder { color: var(--xr-subtle); }
@media (max-width: 480px) { .xr-search { grid-template-columns: 1fr; } .xr-search .xr-btn { width: 100%; } }
.xr-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; padding: 0; list-style: none; }
.xr-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--xr-subtle); }
.xr-trust li i { color: var(--xr-primary); font-size: 18px; }
.xr-hero__visual { position: relative; }
.xr-hero__visual .banner-img { position: relative; margin: 0 auto; max-width: 560px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .18)); }
.xr-hero__visual .banner-img > img { width: 100%; height: auto; display: block; }

/* ---------- Steps ---------- */
.xr-step { position: relative; }
.xr-step__n { position: absolute; top: 20px; right: 22px; font-size: 44px; font-weight: 800; color: var(--xr-primary-soft); line-height: 1; }
:root[data-theme="dark"] .xr-step__n { color: #1f3d33; }

/* ---------- Feature list ---------- */
.xr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 991px) { .xr-split { grid-template-columns: 1fr; gap: 28px; } }
.xr-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
@media (max-width: 640px) { .xr-checks { grid-template-columns: 1fr; } }
.xr-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 500; color: var(--xr-text); line-height: 1.5; }
.xr-checks li i { color: var(--xr-primary); font-size: 20px; margin-top: 1px; }

/* ---------- Stats ---------- */
.xr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 991px) { .xr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xr-stat { text-align: center; padding: 28px 16px; border-radius: var(--xr-radius-lg); background: var(--xr-raised); border: 1px solid var(--xr-border); }
.xr-stat i { font-size: 30px; color: var(--xr-primary); }
.xr-stat .odometer, .xr-stat .num { display: block; font-size: 38px; font-weight: 800; color: var(--xr-text); line-height: 1.2; margin: 8px 0 2px; }
.xr-stat h4 { font-size: 15px; font-weight: 600; margin: 0; color: var(--xr-subtle); }

/* ---------- App + CTA bands ---------- */
.xr-band {
    border-radius: 28px; padding: clamp(32px, 5vw, 64px); color: #fff; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #0b6e53 0%, #15b887 60%, #2dd4a8 100%);
}
.xr-band h2, .xr-band p { color: #fff; }
.xr-band p { opacity: .9; }
.xr-band .xr-eyebrow { background: rgba(255, 255, 255, .18); color: #fff; }
.xr-band__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; }
@media (max-width: 991px) { .xr-band__grid { grid-template-columns: 1fr; } }
.xr-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.xr-store { display: flex; align-items: center; gap: 12px; background: #fff; color: #17212b; border-radius: 14px; padding: 10px 16px; text-decoration: none; min-width: 190px; }
.xr-store img { height: 34px; width: auto; }
.xr-store small { display: block; color: #6b7280; font-size: 11px; line-height: 1.1; }
.xr-store b { display: block; font-size: 16px; line-height: 1.2; }
.xr-band__img { display: flex; justify-content: center; }
.xr-band__img img { max-width: 100%; max-height: 360px; filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .3)); }
.xr-band--cta { background: linear-gradient(135deg, #14231d 0%, #1a2a23 100%); }
:root[data-theme="dark"] .xr-band--cta { background: linear-gradient(135deg, #12332a 0%, #1a3f33 100%); }
.xr-band--cta .xr-btn--primary { box-shadow: none; }

/* ---------- Footer ---------- */
.xr-footer { background: var(--xr-surface); border-top: 1px solid var(--xr-border); padding: 64px 0 0; margin-top: 0; }
.xr-footer__grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1.2fr; gap: 36px; }
@media (max-width: 991px) { .xr-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .xr-footer__grid { grid-template-columns: 1fr; } }
.xr-footer h6 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; color: var(--xr-text); }
.xr-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.xr-footer a { color: var(--xr-subtle); text-decoration: none; font-size: 15px; }
.xr-footer a:hover { color: var(--xr-primary); }
.xr-footer p { font-size: 15px; line-height: 1.65; margin: 14px 0 0; max-width: 340px; }
.xr-footer .xr-logo-foot img { height: 36px; }
.xr-sub { display: flex; gap: 8px; margin-top: 12px; }
.xr-sub input { flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 1px solid var(--xr-border); background: var(--xr-raised); color: var(--xr-text); padding: 0 14px; font: 500 14px var(--xr-font); }
.xr-sub input:focus { outline: 2px solid color-mix(in srgb, var(--xr-primary) 45%, transparent); border-color: var(--xr-primary); }
.xr-social { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.xr-social a { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--xr-border); background: var(--xr-raised); display: inline-flex; align-items: center; justify-content: center; color: var(--xr-text); font-size: 17px; }
.xr-social a:hover { border-color: var(--xr-primary); color: var(--xr-primary); }
.xr-copy { margin-top: 44px; padding: 20px 0; border-top: 1px solid var(--xr-border); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 14px; color: var(--xr-subtle); }
.xr-copy p { margin: 0; max-width: none; font-size: 14px; }

/* Legacy elements that should not clash with the new look */
body.xr-site .scrollToTop { border-radius: 14px; background: var(--xr-primary); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Promo strip under the hero ---------- */
.xr-promo { position: relative; z-index: 2; margin-top: -48px; padding-bottom: 8px; }
.xr-promo__card {
    display: flex; align-items: center; gap: 22px; padding: 22px 26px; border-radius: var(--xr-radius-lg);
    background: var(--xr-raised); border: 1px solid var(--xr-border); box-shadow: var(--xr-shadow-lg);
}
.xr-promo__text { flex: 1; min-width: 0; }
.xr-promo__text h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.xr-promo__text p { margin: 0; font-size: 15px; }
@media (max-width: 767px) { .xr-promo__card { flex-direction: column; align-items: flex-start; } .xr-promo__card .xr-btn { width: 100%; } }

/* Text on the coloured bands must stay white (beats the generic paragraph colour). */
body.xr-site .xr-band p { color: rgba(255, 255, 255, .92); }
body.xr-site .xr-band h2 { color: #fff; }
.xr-search input::placeholder { opacity: 1; }

/* ======================================================================
   Browse cars
   ====================================================================== */
.xr-pagehead { padding: 40px 0 24px; background:
    radial-gradient(800px 320px at 90% -20%, color-mix(in srgb, var(--xr-primary) 12%, transparent), transparent 70%), var(--xr-bg);
    border-bottom: 1px solid var(--xr-border); }
.xr-pagehead h1 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; margin: 0 0 6px; }
.xr-pagehead__sub { margin: 0 0 22px; font-size: 16px; }
.xr-finder { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.xr-finder__search { position: relative; flex: 1 1 340px; max-width: 560px; }
.xr-finder__search i.las { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--xr-subtle); font-size: 20px; pointer-events: none; }
.xr-finder__search input {
    width: 100%; height: 52px; border-radius: 14px; border: 1px solid var(--xr-border); background: var(--xr-raised); color: var(--xr-text);
    padding: 0 16px 0 46px; font: 500 15px var(--xr-font); box-shadow: var(--xr-shadow); outline: none;
}
.xr-finder__search input:focus { border-color: var(--xr-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xr-primary) 18%, transparent); }
.xr-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 14px; background: var(--xr-muted); border: 1px solid var(--xr-border); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.xr-seg::-webkit-scrollbar { display: none; }
.xr-seg button { border: 0; background: transparent; padding: 10px 18px; border-radius: 10px; font: 600 14px var(--xr-font); color: var(--xr-subtle); cursor: pointer; white-space: nowrap; }
.xr-seg button:hover { color: var(--xr-text); }
.xr-seg button.active { background: var(--xr-raised); color: var(--xr-primary-strong); box-shadow: var(--xr-shadow); }
.xr-chips-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.xr-chips-row::-webkit-scrollbar { display: none; }
.xr-chips-row .xr-chips-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--xr-subtle); flex: 0 0 auto; }
.xr-chips { display: flex; gap: 8px; flex-wrap: nowrap; }
.xr-chips button { border: 1px solid var(--xr-border); background: var(--xr-raised); color: var(--xr-text); border-radius: 999px; padding: 8px 16px; font: 600 13.5px var(--xr-font); cursor: pointer; white-space: nowrap; }
.xr-chips button:hover { border-color: var(--xr-primary); }
.xr-chips button.active { background: var(--xr-primary); border-color: var(--xr-primary); color: var(--xr-on-primary); }
.xr-place-chip { display: none; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--xr-primary-soft); color: var(--xr-primary-strong); font-size: 13.5px; font-weight: 600; width: fit-content; margin-top: 14px; }
.xr-place-chip.is-visible { display: inline-flex; }
.xr-place-chip button { border: 0; background: rgba(0, 0, 0, .08); color: inherit; width: 24px; height: 24px; border-radius: 50%; line-height: 1; cursor: pointer; }
.xr-results { padding: 36px 0 88px; background: var(--xr-bg); min-height: 50vh; }
.xr-results__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.xr-count { font-size: 14px; font-weight: 600; color: var(--xr-subtle); }
.xr-sec-title { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.xr-sec-sub { margin: 0 0 18px; font-size: 14.5px; }
.xr-cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 44px; }
@media (max-width: 1080px) { .xr-cars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .xr-cars { grid-template-columns: 1fr; gap: 18px; } .xr-seg { width: 100%; } .xr-seg button { flex: 1; padding: 10px 12px; } }

/* Skeleton loading */
.xr-skel { border-radius: 18px; border: 1px solid var(--xr-border); background: var(--xr-raised); overflow: hidden; }
.xr-skel__img { aspect-ratio: 16/10; background: var(--xr-muted); }
.xr-skel__line { height: 12px; border-radius: 6px; background: var(--xr-muted); margin: 14px 18px 0; }
.xr-skel__line.short { width: 45%; } .xr-skel__line.mid { width: 70%; }
.xr-skel__img, .xr-skel__line { position: relative; overflow: hidden; }
.xr-skel__img::after, .xr-skel__line::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: xrshine 1.3s infinite; }
:root[data-theme="dark"] .xr-skel__img::after, :root[data-theme="dark"] .xr-skel__line::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
@keyframes xrshine { to { transform: translateX(100%); } }
.xr-skel__line:last-child { margin-bottom: 20px; }

/* Empty and error states */
.xr-empty { text-align: center; padding: 64px 24px; border: 1.5px dashed var(--xr-border); border-radius: var(--xr-radius-lg); background: var(--xr-surface); }
.xr-empty i { font-size: 54px; color: var(--xr-primary); }
.xr-empty h4 { margin: 12px 0 6px; font-size: 20px; font-weight: 700; }
.xr-empty p { margin: 0 auto 18px; max-width: 420px; }
.xr-empty.is-error i { color: var(--xr-danger); }

/* Car card (shared by browse, favourites and the home page) */
body.xr-site .xrentit-car-card {
    background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: 18px; box-shadow: var(--xr-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.xr-site .xrentit-car-card:hover { transform: translateY(-4px); box-shadow: var(--xr-shadow-lg); border-color: color-mix(in srgb, var(--xr-primary) 40%, var(--xr-border)); }
body.xr-site .xrentit-car-card__media { background: var(--xr-muted); aspect-ratio: 16/10; }
body.xr-site .xrentit-car-card__media img { transition: transform .5s ease; }
body.xr-site .xrentit-car-card:hover .xrentit-car-card__media img { transform: scale(1.05); }
body.xr-site .xrentit-car-card__media-placeholder { color: var(--xr-primary); opacity: .55; }
body.xr-site .xrentit-car-card__fav {
    width: 40px; height: 40px; top: 12px; right: 12px; background: rgba(255, 255, 255, .92); color: #374151; backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15); display: flex; align-items: center; justify-content: center; font-size: 19px;
}
body.xr-site .xrentit-car-card__fav:hover { color: #ef4444; transform: scale(1.06); }
body.xr-site .xrentit-car-card__fav.is-active { color: #ef4444; }
body.xr-site .xrentit-car-card__badge { background: var(--xr-primary); color: var(--xr-on-primary); font-size: 11px; letter-spacing: .04em; padding: 5px 11px; }
body.xr-site .xrentit-car-card__body { padding: 18px 20px 20px; }
body.xr-site .xrentit-car-card__tags { min-height: 0; margin-bottom: 6px; }
body.xr-site .xrentit-car-card__tags:empty { display: none; }
body.xr-site .xrentit-car-card__tag { background: var(--xr-primary-soft); color: var(--xr-primary-strong); border-radius: 999px; padding: 3px 10px; font-weight: 700; }
body.xr-site .xrentit-car-card__title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
body.xr-site .xrentit-car-card__title a { color: var(--xr-text); }
body.xr-site .xrentit-car-card__title a:hover { color: var(--xr-primary-strong); }
body.xr-site .xrentit-car-card__location { color: var(--xr-subtle); font-size: 13.5px; margin-bottom: 12px; }
body.xr-site .xrentit-car-card__location i { color: var(--xr-primary); }
body.xr-site .xrentit-car-card__spec { background: var(--xr-muted); color: var(--xr-text); border-radius: 8px; font-size: 12px; font-weight: 600; padding: 5px 10px; }
body.xr-site .xrentit-car-card__discount { color: var(--xr-primary-strong); background: var(--xr-primary-soft); border-radius: 8px; padding: 6px 10px; display: inline-block; }
body.xr-site .xrentit-car-card__rate-refs { color: var(--xr-subtle); }
body.xr-site .xrentit-car-card__footer { border-top: 1px solid var(--xr-border); padding-top: 14px; }
body.xr-site .xrentit-car-card__price-amount { font-size: 24px; font-weight: 800; color: var(--xr-text); letter-spacing: -.02em; }
body.xr-site .xrentit-car-card__price-unit { color: var(--xr-subtle); }
body.xr-site .xrentit-car-card__rating { color: var(--xr-subtle); font-weight: 600; }
body.xr-site .xrentit-car-card__footer .btn--base {
    background: var(--xr-primary); color: var(--xr-on-primary); border: 0; border-radius: 12px; padding: 11px 20px; font-weight: 700; font-size: 14px; box-shadow: none;
}
body.xr-site .xrentit-car-card__footer .btn--base:hover { background: var(--xr-primary-strong); }

/* ======================================================================
   Car detail
   ====================================================================== */
body.xr-site .car-detail-page {
    --ink: var(--xr-text); --muted: var(--xr-subtle); --line: var(--xr-border); --soft: var(--xr-muted); --accent: var(--xr-primary-strong);
    background: var(--xr-bg); padding-bottom: 96px; min-height: 70vh;
}
:root[data-theme="dark"] body.xr-site .car-detail-page { --accent: var(--xr-primary-light); }
.car-detail-loading { padding: 28px 0 80px; }
body.xr-site .car-detail-topbar { padding: 22px 0 6px; }
body.xr-site .car-detail-back { color: var(--xr-subtle); font-weight: 600; }
body.xr-site .car-detail-back:hover { color: var(--xr-primary-strong); }
body.xr-site .car-detail-fav-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--xr-raised); border: 1px solid var(--xr-border); color: var(--xr-text); box-shadow: var(--xr-shadow); }
body.xr-site .car-detail-fav-btn:hover { color: #ef4444; border-color: #fecaca; }
body.xr-site .car-detail-gallery__main { border-radius: 22px; background: var(--xr-muted); box-shadow: var(--xr-shadow-lg); aspect-ratio: 16/9; }
body.xr-site .car-detail-gallery__placeholder { border-radius: 22px; background: var(--xr-muted); color: var(--xr-primary); aspect-ratio: 16/9; }
body.xr-site .car-detail-thumb { border-radius: 12px; width: 96px; height: 66px; opacity: .75; border-width: 2px; }
body.xr-site .car-detail-thumb:hover { opacity: 1; }
body.xr-site .car-detail-thumb.active { opacity: 1; border-color: var(--xr-primary); }
body.xr-site .car-detail-panel { background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: 20px; padding: 24px 26px; box-shadow: var(--xr-shadow); margin-bottom: 18px; }
body.xr-site .car-detail-title { color: var(--xr-text); font-weight: 800; letter-spacing: -.02em; }
body.xr-site .car-detail-section-title { font-size: 18px; font-weight: 700; color: var(--xr-text); }
body.xr-site .car-detail-spec { background: var(--xr-muted); color: var(--xr-text); border: 1px solid transparent; border-radius: 999px; }
body.xr-site .car-detail-spec i { color: var(--xr-primary); }
body.xr-site .car-detail-chip { background: var(--xr-primary-soft); color: var(--xr-primary-strong); border-radius: 999px; }
:root[data-theme="dark"] body.xr-site .car-detail-chip { color: var(--xr-primary-light); }
body.xr-site .car-detail-info-item, body.xr-site .car-detail-list li, body.xr-site .car-detail-rules-list li,
body.xr-site .car-detail-breakdown > div, body.xr-site .car-detail-price-box { background: var(--xr-muted); border-radius: 12px; }
body.xr-site .car-detail-info-item strong, body.xr-site .car-detail-rules-list strong { color: var(--xr-text); }
body.xr-site .car-detail-rating-pill { background: color-mix(in srgb, var(--xr-star) 18%, transparent); color: #9a6700; }
:root[data-theme="dark"] body.xr-site .car-detail-rating-pill { color: #ffd566; }
body.xr-site .car-detail-review { border-bottom: 1px solid var(--xr-border); }
body.xr-site .car-detail-review p, body.xr-site .car-detail-policy p, body.xr-site .car-detail-policy-rules li, body.xr-site .car-detail-price-row { color: var(--xr-text); }
body.xr-site .car-detail-option { background: var(--xr-muted); border: 1.5px solid transparent; border-radius: 14px; }
body.xr-site .car-detail-option:hover { border-color: color-mix(in srgb, var(--xr-primary) 45%, transparent); }
body.xr-site .car-detail-option:has(input:checked) { border-color: var(--xr-primary); background: var(--xr-primary-soft); }
body.xr-site .car-detail-option input { accent-color: var(--xr-primary); }
body.xr-site .car-detail-option__body strong, body.xr-site .car-detail-option__price { color: var(--xr-text); }
body.xr-site .car-detail-link { color: var(--xr-primary-strong); }

/* Booking panel */
body.xr-site .car-detail-sidebar {
    position: sticky; top: calc(var(--xr-header-h) + 20px); background: var(--xr-raised); border: 1px solid var(--xr-border);
    border-radius: 22px; padding: 24px; box-shadow: var(--xr-shadow-lg);
}
body.xr-site .car-detail-sidebar__price { color: var(--xr-text); }
body.xr-site .car-detail-sidebar__price strong { font-size: 30px; letter-spacing: -.02em; }
body.xr-site .car-detail-sidebar__heading { font-size: 17px; font-weight: 700; margin: 4px 0 16px; }
.car-detail-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
body.xr-site .car-detail-field .form-label { color: var(--xr-text); font-size: 13px; font-weight: 600; }
body.xr-site .car-detail-field .form-control {
    min-height: 48px; border-radius: 12px; border: 1px solid var(--xr-border); background: var(--xr-bg); color: var(--xr-text); font: 500 14px var(--xr-font);
}
body.xr-site .car-detail-field .form-control:focus { border-color: var(--xr-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xr-primary) 18%, transparent); outline: none; }
:root[data-theme="dark"] body.xr-site .car-detail-field .form-control { color-scheme: dark; }
body.xr-site .car-detail-discount-badge { background: var(--xr-primary-soft); color: var(--xr-primary-strong); border: 0; }
body.xr-site .car-detail-cta {
    min-height: 52px; border-radius: 14px; font-weight: 700; font-size: 16px; background: var(--xr-primary); color: var(--xr-on-primary); border: 0;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--xr-primary) 32%, transparent); display: inline-flex; align-items: center; justify-content: center;
}
body.xr-site .car-detail-cta:hover { background: var(--xr-primary-strong); color: var(--xr-on-primary); }
.car-detail-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; font-size: 13px; line-height: 1.5;
    background: color-mix(in srgb, var(--xr-warning) 12%, transparent); color: var(--xr-text); }
.car-detail-note i { color: var(--xr-warning); font-size: 18px; }
@media (max-width: 991px) { body.xr-site .car-detail-sidebar { position: static; } }
@media (max-width: 480px) { .car-detail-dates { grid-template-columns: 1fr; } body.xr-site .car-detail-panel { padding: 20px 18px; } }

/* Mobile bottom bar */
.car-detail-bar { display: none; }
@media (max-width: 991px) {
    .car-detail-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 14px;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--xr-bg) 92%, transparent); backdrop-filter: blur(14px);
        border-top: 1px solid var(--xr-border); }
    .car-detail-bar[hidden] { display: none; }
    .car-detail-bar__price { color: var(--xr-text); font-size: 15px; display: flex; align-items: baseline; gap: 5px; min-width: 0; }
    .car-detail-bar__price strong { font-size: 20px; font-weight: 800; }
    .car-detail-bar__price span { color: var(--xr-subtle); font-size: 13px; }
    body.xr-site .scrollToTop { bottom: 84px; }
}

/* ======================================================================
   Checkout
   ====================================================================== */
body.xr-site .car-checkout-page { background: var(--xr-bg); min-height: 70vh; padding-bottom: 72px; }
.car-checkout-header { margin: 14px 0 6px; }
.car-checkout-title { margin: 0; font-size: clamp(28px, 3vw, 38px); font-weight: 800; letter-spacing: -.02em; }
.car-checkout-subtitle { margin: 8px 0 0; font-size: 15.5px; max-width: 560px; }
.xr-steps { display: flex; gap: 8px; margin: 22px 0 6px; padding: 0; list-style: none; flex-wrap: wrap; }
.xr-steps li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--xr-muted); color: var(--xr-subtle); font-size: 14px; font-weight: 600; }
.xr-steps li span { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--xr-border); color: var(--xr-text); font-size: 13px; font-weight: 700; }
.xr-steps li.is-current { background: var(--xr-primary-soft); color: var(--xr-primary-strong); }
.xr-steps li.is-current span { background: var(--xr-primary); color: var(--xr-on-primary); }
.xr-steps li.is-done span { background: var(--xr-primary-soft); color: var(--xr-primary-strong); }
.xr-steps li.is-done span::before { content: "\2713"; }
.xr-steps li.is-done span { font-size: 0; } .xr-steps li.is-done span::before { font-size: 14px; }
@media (max-width: 575px) { .xr-steps li { flex: 1 1 100%; } }

body.xr-site .xrentit-checkout { --ink: var(--xr-text); --muted: var(--xr-subtle); --line: var(--xr-border); --soft: var(--xr-muted); --accent: var(--xr-primary-strong); }
body.xr-site .xrentit-checkout__panel, body.xr-site .xrentit-checkout__sidebar {
    background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: 20px; padding: 24px 26px; box-shadow: var(--xr-shadow);
}
body.xr-site .xrentit-checkout__sidebar { top: calc(var(--xr-header-h) + 20px); box-shadow: var(--xr-shadow-lg); }
body.xr-site .xrentit-checkout__section-title { font-size: 18px; font-weight: 700; color: var(--xr-text); }
body.xr-site .xrentit-checkout__car-media { background: var(--xr-muted); border-radius: 14px; width: 128px; height: 90px; }
body.xr-site .xrentit-checkout__car-media-placeholder { color: var(--xr-primary); opacity: .6; }
body.xr-site .xrentit-checkout__car-title { color: var(--xr-text); }
body.xr-site .xrentit-checkout__label { color: var(--xr-text); font-weight: 600; font-size: 13px; }
body.xr-site .xrentit-checkout__input, body.xr-site .xrentit-checkout .form-control {
    min-height: 48px; border-radius: 12px; border: 1px solid var(--xr-border); background: var(--xr-bg); color: var(--xr-text); font: 500 14.5px var(--xr-font);
}
body.xr-site .xrentit-checkout textarea.xrentit-checkout__input { min-height: 84px; }
body.xr-site .xrentit-checkout__input:focus, body.xr-site .xrentit-checkout .form-control:focus {
    border-color: var(--xr-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xr-primary) 18%, transparent); outline: none; background: var(--xr-bg); color: var(--xr-text);
}
:root[data-theme="dark"] body.xr-site .xrentit-checkout .form-control { color-scheme: dark; }
body.xr-site .xrentit-checkout__divider { border-color: var(--xr-border); opacity: 1; }
body.xr-site .xrentit-checkout__option { background: var(--xr-muted); border: 1.5px solid transparent; border-radius: 14px; }
body.xr-site .xrentit-checkout__option:hover { border-color: color-mix(in srgb, var(--xr-primary) 45%, transparent); }
body.xr-site .xrentit-checkout__option:has(input:checked) { border-color: var(--xr-primary); background: var(--xr-primary-soft); }
body.xr-site .xrentit-checkout__option input { accent-color: var(--xr-primary); }
body.xr-site .xrentit-checkout__option-body strong, body.xr-site .xrentit-checkout__option-price { color: var(--xr-text); }
body.xr-site .xrentit-checkout__date-summary { border-radius: 12px; }
body.xr-site .xrentit-checkout__date-summary.is-ok { background: var(--xr-primary-soft); color: var(--xr-primary-strong); }
body.xr-site .xrentit-checkout__price-total { border-top: 1px solid var(--xr-border); }
body.xr-site .xrentit-checkout__discount { background: var(--xr-primary-soft); color: var(--xr-primary-strong); border-radius: 10px; }
body.xr-site .xrentit-checkout__price-row { color: var(--xr-text); }
body.xr-site .xrentit-checkout .stripe-panel { background: var(--xr-bg); border: 1px solid var(--xr-border); border-radius: 14px; }
body.xr-site .xrentit-checkout__agree label { color: var(--xr-text); }
body.xr-site .xrentit-checkout__agree input[type="checkbox"] { accent-color: var(--xr-primary); }
body.xr-site .xrentit-checkout__pay {
    min-height: 54px; border-radius: 14px; font-size: 16px; font-weight: 700; background: var(--xr-primary); color: var(--xr-on-primary); border: 0;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--xr-primary) 32%, transparent);
}
body.xr-site .xrentit-checkout__pay:hover:not(:disabled) { background: var(--xr-primary-strong); }
body.xr-site .xrentit-checkout__pay:disabled { background: var(--xr-border); color: var(--xr-subtle); box-shadow: none; cursor: not-allowed; }
@media (max-width: 991px) { body.xr-site .xrentit-checkout__sidebar { position: static; } }

/* Let the price summary stay in view while the form scrolls. */
body.xr-site .xrentit-checkout > .row > .col-lg-5,
body.xr-site .car-detail-page .row > .col-lg-5 { align-self: stretch; }
@media (max-width: 991px) {
    body.xr-site .xrentit-checkout > .row > .col-lg-5,
    body.xr-site .car-detail-page .row > .col-lg-5 { align-self: auto; }
}
body.xr-site .date-chip { border-radius: 999px; font-weight: 600; }
body.xr-site .date-chip-selected { background: var(--xr-primary-soft); color: var(--xr-primary-strong); }
body.xr-site .date-chip-booked { background: color-mix(in srgb, var(--xr-danger) 16%, transparent); color: var(--xr-danger); }
body.xr-site .date-chip-pending { background: color-mix(in srgb, var(--xr-warning) 18%, transparent); color: var(--xr-warning); }
body.xr-site .date-chip-blocked { background: var(--xr-muted); color: var(--xr-subtle); }
body.xr-site .xrentit-checkout .form-control::placeholder, body.xr-site .car-detail-field .form-control::placeholder { color: var(--xr-subtle); opacity: .75; }

/* ======================================================================
   Account area shell (customer and vendor)
   ====================================================================== */
:root { --xr-side-w: 268px; --xr-top-h: 68px; }
body.xr-app { font-family: var(--xr-font); background: var(--xr-surface); color: var(--xr-text); -webkit-font-smoothing: antialiased; }
body.xr-app h1, body.xr-app h2, body.xr-app h3, body.xr-app h4, body.xr-app h5, body.xr-app h6 { font-family: var(--xr-font); color: var(--xr-text); letter-spacing: -.01em; }
body.xr-app p { color: var(--xr-subtle); }
.xr-shell { display: grid; grid-template-columns: var(--xr-side-w) minmax(0, 1fr); min-height: 100vh; }
.xr-side {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--xr-raised);
    border-right: 1px solid var(--xr-border); padding: 20px 14px 16px; overflow-y: auto; z-index: 1100;
}
.xr-side__brand { display: flex; align-items: center; padding: 4px 10px 18px; }
.xr-side__brand img { height: 36px; width: auto; }
.xr-side__brand .xr-logo-dark { display: none; }
:root[data-theme="dark"] .xr-side__brand .xr-logo-light { display: none; }
:root[data-theme="dark"] .xr-side__brand .xr-logo-dark { display: block; }
.xr-side__group { margin-top: 14px; }
.xr-side__label { padding: 0 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--xr-subtle); opacity: .85; }
.xr-side__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.xr-side__nav a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--xr-subtle);
    font: 600 14.5px var(--xr-font); text-decoration: none; position: relative;
}
.xr-side__nav a i { font-size: 21px; width: 22px; text-align: center; }
.xr-side__nav a:hover { background: var(--xr-muted); color: var(--xr-text); }
.xr-side__nav a.is-active { background: var(--xr-primary-soft); color: var(--xr-primary-strong); }
:root[data-theme="dark"] .xr-side__nav a.is-active { color: var(--xr-primary-light); }
.xr-side__nav a.is-active::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--xr-primary); }
.xr-pill { margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--xr-muted); color: var(--xr-subtle); }
.xr-pill.ok { background: var(--xr-primary-soft); color: var(--xr-primary-strong); }
.xr-pill.warn { background: color-mix(in srgb, var(--xr-warning) 16%, transparent); color: var(--xr-warning); }
.xr-pill.bad { background: color-mix(in srgb, var(--xr-danger) 14%, transparent); color: var(--xr-danger); }
.xr-side__foot { margin-top: auto; padding-top: 18px; display: grid; gap: 12px; }
.xr-help { border-radius: 16px; padding: 16px; background: linear-gradient(135deg, var(--xr-grad-from, #0b6e53), var(--xr-primary)); color: #fff; }
.xr-help h6 { color: #fff; margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.xr-help p { color: rgba(255, 255, 255, .88); margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.xr-help .xr-btn { background: #fff; color: #0b6e53; width: 100%; box-shadow: none; }
.xr-main { min-width: 0; display: flex; flex-direction: column; }
.xr-topbar {
    position: sticky; top: 0; z-index: 1000; height: var(--xr-top-h); display: flex; align-items: center; gap: 14px; padding: 0 28px;
    background: color-mix(in srgb, var(--xr-surface) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--xr-border);
}
.xr-topbar__title { font-size: 18px; font-weight: 700; margin: 0; color: var(--xr-text); }
.xr-topbar__crumb { font-size: 13px; color: var(--xr-subtle); }
.xr-topbar__crumb a { color: var(--xr-subtle); text-decoration: none; }
.xr-topbar__crumb a:hover { color: var(--xr-primary-strong); }
.xr-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.xr-burger-side { display: none; }
.xr-dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--xr-danger); border: 2px solid var(--xr-raised); }
.xr-dd { position: relative; }
.xr-dd .xr-menu { right: 0; min-width: 200px; }
.xr-notif { min-width: 340px; max-width: 92vw; padding: 0; overflow: hidden; }
.xr-notif__head { padding: 14px 16px; border-bottom: 1px solid var(--xr-border); font-weight: 700; }
.xr-notif__list { max-height: 360px; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.xr-notif__item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--xr-border); }
.xr-notif__item:last-child { border-bottom: 0; }
.xr-notif__item b { display: block; font-size: 14px; color: var(--xr-text); }
.xr-notif__item span { display: block; font-size: 13px; color: var(--xr-subtle); line-height: 1.4; }
.xr-notif__item a { display: inline; width: auto; padding: 0; gap: 0; border-radius: 0; font: inherit; white-space: normal; }
.xr-notif__item a:hover { background: none; text-decoration: underline; }
.xr-notif__all { display: block; padding: 12px 16px; border-top: 1px solid var(--xr-border); text-align: center; font-size: 13.5px; font-weight: 700; color: var(--xr-primary); text-decoration: none; }
.xr-notif__all:hover { background: var(--xr-muted); }
.xr-notif__item time { font-size: 11.5px; color: var(--xr-subtle); }
.xr-notif__empty { padding: 28px 16px; text-align: center; color: var(--xr-subtle); font-size: 14px; }
.xr-avatar-btn { position: relative; padding: 0; overflow: hidden; }
.xr-avatar-btn__ini { font: 700 14px var(--xr-font); color: var(--xr-on-primary); }
.xr-avatar-btn:has(.xr-avatar) .xr-avatar-btn__ini { display: none; }
.xr-avatar-btn { background: var(--xr-primary); border-color: var(--xr-primary); }
.xr-avatar-btn:hover { color: var(--xr-on-primary); }
.xr-avatar-btn .xr-avatar { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
.xr-avatar { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; border: 1px solid var(--xr-border); background: var(--xr-muted); }
.xr-usermenu__head { padding: 12px 14px; border-bottom: 1px solid var(--xr-border); margin-bottom: 6px; }
.xr-usermenu__head b { display: block; font-size: 14px; color: var(--xr-text); }
.xr-usermenu__head span { font-size: 12.5px; color: var(--xr-subtle); }
.xr-content { padding: 28px; max-width: 1280px; width: 100%; margin: 0 auto; }
.xr-side-overlay { display: none; }
@media (max-width: 1100px) {
    .xr-shell { grid-template-columns: minmax(0, 1fr); }
    .xr-side { position: fixed; inset: 0 auto 0 0; width: min(86vw, 300px); transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--xr-shadow-lg); }
    .xr-side.is-open { transform: none; }
    .xr-side-overlay.is-open { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1090; }
    .xr-burger-side { display: inline-flex; }
    .xr-topbar { padding: 0 16px; }
    .xr-content { padding: 18px 16px 40px; }
    .xr-hide-sm { display: none !important; }
}
body.xr-lock-side { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .xr-side { transition: none; } }
body.xr-app .xr-help p { color: rgba(255, 255, 255, .9); }
body.xr-app .xr-help h6 { color: #fff; }

/* Dashboard */
.xr-greet { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.xr-greet h2 { margin: 0 0 4px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; }
.xr-greet p { margin: 0; font-size: 15px; }
.xr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
@media (max-width: 1100px) { .xr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .xr-kpis { grid-template-columns: 1fr 1fr; gap: 12px; } }
.xr-kpi { background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: 18px; padding: 18px 20px; box-shadow: var(--xr-shadow); display: flex; flex-direction: column; gap: 10px; }
.xr-kpi__top { display: flex; align-items: center; justify-content: space-between; }
.xr-kpi__label { font-size: 13.5px; font-weight: 600; color: var(--xr-subtle); }
.xr-kpi .xr-ico { width: 40px; height: 40px; border-radius: 12px; font-size: 21px; }
.xr-kpi__value { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--xr-text); }
.xr-panel { background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: 20px; padding: 22px 24px; box-shadow: var(--xr-shadow); margin-bottom: 22px; }
.xr-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.xr-panel__head h3 { margin: 0; font-size: 18px; font-weight: 700; }
.xr-link { color: var(--xr-primary-strong); font-weight: 600; font-size: 14px; text-decoration: none; }
.xr-link:hover { text-decoration: underline; }
.xr-status-card { display: flex; gap: 16px; align-items: center; border-radius: 20px; padding: 20px 22px; margin-bottom: 22px; border: 1px solid transparent; }
.xr-status-card .xr-ico { flex: 0 0 auto; width: 48px; height: 48px; font-size: 26px; }
.xr-status-card h4 { margin: 0 0 2px; font-size: 16.5px; font-weight: 700; }
.xr-status-card p { margin: 0; font-size: 14px; line-height: 1.5; }
.xr-status-card .xr-btn { margin-left: auto; flex: 0 0 auto; }
.xr-status-card.warn { background: color-mix(in srgb, var(--xr-warning) 10%, var(--xr-raised)); border-color: color-mix(in srgb, var(--xr-warning) 30%, transparent); }
.xr-status-card.warn .xr-ico { background: color-mix(in srgb, var(--xr-warning) 18%, transparent); color: var(--xr-warning); }
.xr-status-card.ok { background: var(--xr-primary-soft); border-color: color-mix(in srgb, var(--xr-primary) 28%, transparent); }
.xr-status-card.bad { background: color-mix(in srgb, var(--xr-danger) 9%, var(--xr-raised)); border-color: color-mix(in srgb, var(--xr-danger) 28%, transparent); }
.xr-status-card.bad .xr-ico { background: color-mix(in srgb, var(--xr-danger) 16%, transparent); color: var(--xr-danger); }
@media (max-width: 640px) { .xr-status-card { flex-wrap: wrap; } .xr-status-card .xr-btn { width: 100%; margin-left: 0; } }

/* Booking rows (dashboard and My bookings) */
.xr-bk { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--xr-border); border-radius: 16px; background: var(--xr-raised); transition: border-color .15s, box-shadow .15s; }
.xr-bk + .xr-bk { margin-top: 12px; }
.xr-bk:hover { border-color: color-mix(in srgb, var(--xr-primary) 40%, var(--xr-border)); box-shadow: var(--xr-shadow); }
.xr-bk__thumb { width: 84px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--xr-muted); display: flex; align-items: center; justify-content: center; color: var(--xr-primary); font-size: 28px; flex: 0 0 auto; }
.xr-bk__thumb img { width: 100%; height: 100%; object-fit: cover; }
.xr-bk__body { flex: 1; min-width: 0; }
.xr-bk__title { margin: 0 0 3px; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xr-bk__dates { font-size: 13.5px; color: var(--xr-subtle); }
.xr-bk__side { text-align: right; flex: 0 0 auto; display: grid; gap: 6px; justify-items: end; }
.xr-bk__price { font-size: 17px; font-weight: 800; color: var(--xr-text); }
.xr-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: capitalize; background: var(--xr-muted); color: var(--xr-subtle); }
.xr-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.xr-badge.pending { background: color-mix(in srgb, var(--xr-warning) 16%, transparent); color: var(--xr-warning); }
.xr-badge.accepted, .xr-badge.active { background: var(--xr-primary-soft); color: var(--xr-primary-strong); }
.xr-badge.completed, .xr-badge.closed { background: color-mix(in srgb, #6d28d9 14%, transparent); color: #6d28d9; }
:root[data-theme="dark"] .xr-badge.completed, :root[data-theme="dark"] .xr-badge.closed { color: #b79cf5; }
.xr-badge.rejected, .xr-badge.cancelled, .xr-badge.disputed { background: color-mix(in srgb, var(--xr-danger) 14%, transparent); color: var(--xr-danger); }
@media (max-width: 575px) { .xr-bk { flex-wrap: wrap; } .xr-bk__side { width: 100%; grid-auto-flow: column; justify-content: space-between; align-items: center; text-align: left; } }
body.xr-app { overflow-x: hidden; }

/* Booking details */
body.xr-app .v2-booking-back { color: var(--xr-subtle); font-weight: 600; }
body.xr-app .v2-booking-back:hover { color: var(--xr-primary-strong); }
body.xr-app .v2-booking-loading, body.xr-app .v2-booking-error { background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: 20px; }
body.xr-app .v2-booking-loading__spinner { border-color: var(--xr-border); border-top-color: var(--xr-primary); }
body.xr-app .v2-booking-card { background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: 20px; box-shadow: var(--xr-shadow); }
body.xr-app .v2-booking-card__title { color: var(--xr-text); font-size: 17px; }
body.xr-app .v2-booking-label { color: var(--xr-subtle); }
body.xr-app .v2-booking-muted { color: var(--xr-subtle); }
body.xr-app .v2-booking-hero__media { background: var(--xr-muted); color: var(--xr-primary); }
body.xr-app .v2-booking-hero__title { color: var(--xr-text); font-size: 22px; font-weight: 800; }
body.xr-app .v2-booking-sticky { top: calc(var(--xr-top-h) + 20px); }
body.xr-app .v2-booking-divider { border-color: var(--xr-border); opacity: 1; }
body.xr-app .v2-booking-schedule-item { background: var(--xr-muted); border-radius: 14px; }
body.xr-app .v2-booking-schedule-item strong { color: var(--xr-text); }
body.xr-app .v2-booking-timeline li { border-left-color: var(--xr-border); }
body.xr-app .v2-booking-timeline li::before { background: var(--xr-primary); border-color: var(--xr-raised); box-shadow: 0 0 0 2px var(--xr-border); }
body.xr-app .v2-booking-timeline li.is-muted::before { background: var(--xr-border); }
body.xr-app .v2-booking-timeline__label { color: var(--xr-subtle); }
body.xr-app .v2-booking-timeline__value { color: var(--xr-text); }
body.xr-app .v2-booking-price-row { color: var(--xr-subtle); }
body.xr-app .v2-booking-price-row.is-total { color: var(--xr-text); border-top-color: var(--xr-border); }
body.xr-app .v2-booking-host__name { color: var(--xr-text); }
body.xr-app .v2-booking-host__link { color: var(--xr-primary-strong); }
body.xr-app .v2-booking-locked { background: var(--xr-muted); border-radius: 14px; color: var(--xr-subtle); }
body.xr-app .v2-booking-status { border-radius: 999px; }
body.xr-app .v2-booking-status--pending { background: color-mix(in srgb, var(--xr-warning) 16%, transparent); color: var(--xr-warning); }
body.xr-app .v2-booking-status--accepted, body.xr-app .v2-booking-status--active { background: var(--xr-primary-soft); color: var(--xr-primary-strong); }
body.xr-app .v2-booking-status--rejected, body.xr-app .v2-booking-status--cancelled, body.xr-app .v2-booking-status--disputed { background: color-mix(in srgb, var(--xr-danger) 14%, transparent); color: var(--xr-danger); }
body.xr-app .v2-booking-actions .btn, body.xr-app .v2-booking-actions a.btn { min-height: 46px; border-radius: 12px; font-weight: 700; }
body.xr-app .v2-booking-refund { background: var(--xr-muted); border-radius: 14px; color: var(--xr-text); }
@media (max-width: 991px) { body.xr-app .v2-booking-sticky { position: static; } }

/* Buttons from the old dashboard theme take the new look inside the account area. */
body.xr-app .btn--base, body.xr-app a.btn--base, body.xr-app button.btn--base {
    background: var(--xr-primary); color: var(--xr-on-primary); border: 0; border-radius: 12px; font-weight: 700; padding: 11px 20px; line-height: 1.2; box-shadow: none;
}
body.xr-app .btn--base:hover { background: var(--xr-primary-strong); color: var(--xr-on-primary); }
body.xr-app .btn--base.btn-sm { padding: 8px 14px; font-size: 14px; }

/* ---------- Forms in the account area ---------- */
body.xr-app label:not(.xkyc-drop):not(.xr-btn):not(.xr-dropzone):not(.vk-drop) { color: var(--xr-text); font-weight: 600; font-size: 13.5px; margin-bottom: 6px; display: block; }
body.xr-app label:not(.xkyc-drop):not(.xr-btn):not(.xr-dropzone):not(.vk-drop):not(.ci-drop):not(.vk-drop) span { color: var(--xr-danger); margin-left: 2px; }
body.xr-app .form-group { margin-bottom: 16px; position: relative; }
body.xr-app .form--control, body.xr-app .form-control {
    width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--xr-border); background: var(--xr-bg); color: var(--xr-text);
    padding: 10px 14px; font: 500 14.5px var(--xr-font); box-shadow: none;
}
body.xr-app textarea.form--control { min-height: 96px; }
body.xr-app .form--control:focus, body.xr-app .form-control:focus {
    border-color: var(--xr-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xr-primary) 18%, transparent); outline: none; background: var(--xr-bg); color: var(--xr-text);
}
body.xr-app .form--control::placeholder { color: var(--xr-subtle); opacity: .75; }
:root[data-theme="dark"] body.xr-app .form--control, :root[data-theme="dark"] body.xr-app .form-control { color-scheme: dark; }
body.xr-app .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; }
body.xr-app .input-group-text { display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--xr-border); border-right: 0; border-radius: 12px 0 0 12px; background: var(--xr-muted); color: var(--xr-text); font-weight: 600; }
body.xr-app .input-group .form--control { border-radius: 0 12px 12px 0; }
body.xr-app .select2-container--default .select2-selection--single { height: 48px; border: 1px solid var(--xr-border); border-radius: 12px; background: var(--xr-bg); }
body.xr-app .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: 14px; color: var(--xr-text); }
body.xr-app .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }
body.xr-app .field-icon { position: absolute; right: 14px; top: 41px; color: var(--xr-subtle); }
.xr-error { color: var(--xr-danger); font-size: 12.5px; margin-top: 5px; }
.xr-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.xr-span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .xr-form-grid { grid-template-columns: 1fr; } }
.xr-form-actions { margin-top: 8px; display: flex; justify-content: flex-end; }
.xr-btn--danger { background: color-mix(in srgb, var(--xr-danger) 12%, transparent); color: var(--xr-danger); border-color: color-mix(in srgb, var(--xr-danger) 30%, transparent); }
.xr-btn--danger:hover { background: var(--xr-danger); color: #fff; }

/* Profile */
.xr-profile-head { display: flex; gap: 22px; align-items: center; }
.xr-profile-head .profile-thumb { position: relative; margin: 0; flex: 0 0 auto; }
.xr-profile-head .avatar-preview, .xr-profile-head .profilePicPreview { width: 96px; height: 96px; border-radius: 24px; background-size: cover; background-position: center; border: 2px solid var(--xr-border); background-color: var(--xr-muted); }
.xr-profile-head__body h2 { margin: 0 0 4px; font-size: 24px; font-weight: 800; }
.xr-profile-head__body p { margin: 0 0 12px; font-size: 14.5px; }
.xr-profile-head__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.xr-profile-head__tags .xr-pill { margin-left: 0; padding: 5px 12px; font-size: 12.5px; text-decoration: none; }
@media (max-width: 575px) { .xr-profile-head { flex-direction: column; align-items: flex-start; } }
.xr-profile-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1100px) { .xr-profile-grid { grid-template-columns: 1fr; } }
.xr-upload-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--xr-border); }
.xr-upload-row small { color: var(--xr-subtle); font-size: 13px; }
.xr-upload-row .avatar-edit input { display: none; }
.xr-upload-row .avatar-edit label { margin: 0; display: inline-flex; color: var(--xr-primary-strong); }
.xr-danger { border-color: color-mix(in srgb, var(--xr-danger) 30%, var(--xr-border)); }
.xr-danger p { font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
body.xr-app .modal-content { background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: 20px; color: var(--xr-text); }
body.xr-app .modal-body .title { font-size: 19px; font-weight: 700; }
body.xr-app .modal-body p { font-size: 14.5px; line-height: 1.6; }
body.xr-app .select2-container { width: 100% !important; }
body.xr-app .select2-container .select2-selection--single { background: var(--xr-bg) !important; border: 1px solid var(--xr-border) !important; border-radius: 12px !important; height: 48px !important; }
body.xr-app .select2-container .select2-selection__rendered { color: var(--xr-text) !important; line-height: 46px !important; padding-left: 14px !important; }
body.xr-app .select2-container .select2-selection__arrow { height: 46px !important; }
body.xr-app .select2-container--open .select2-selection--single, body.xr-app .select2-container--focus .select2-selection--single { border-color: var(--xr-primary) !important; }
.select2-dropdown { background: var(--xr-raised) !important; border: 1px solid var(--xr-border) !important; border-radius: 12px !important; overflow: hidden; color: var(--xr-text); }
.select2-container--default .select2-results__option { color: var(--xr-text); padding: 9px 14px; }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--xr-primary-soft) !important; color: var(--xr-primary-strong) !important; }
.select2-container--default .select2-search--dropdown .select2-search__field { background: var(--xr-bg); color: var(--xr-text); border: 1px solid var(--xr-border); border-radius: 8px; }
.select2-dropdown .select2-results, .select2-dropdown .select2-results__options, .select2-results__option { background: var(--xr-raised) !important; color: var(--xr-text); }
.select2-container--default .select2-results__option--selected, .select2-container--default .select2-results__option[aria-selected=true] { background: var(--xr-muted) !important; color: var(--xr-text) !important; }

/* Cards from the old dashboard theme, wherever they still appear in the account area. */
body.xr-app .custom-card { background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: 20px; box-shadow: var(--xr-shadow); margin: 0 0 22px; overflow: hidden; }
body.xr-app .custom-card .dashboard-header-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; margin: 0; border: 0; }
body.xr-app .custom-card .dashboard-header-wrapper .title, body.xr-app .custom-card .dashboard-header-wrapper h4 { margin: 0; font-size: 18px; font-weight: 700; color: var(--xr-text); }
body.xr-app .custom-card .card-body { padding: 18px 24px 24px; background: transparent; }
body.xr-app .custom-card .kyc-text, body.xr-app .custom-card .unverified { color: var(--xr-text); font-weight: 600; }
body.xr-app .custom-card .kyc-text .title { margin: 0; font-size: 16px; color: var(--xr-text); }
body.xr-app .kyc-preview-area p, body.xr-app .kyc-title .title { color: var(--xr-text); }
body.xr-app .kyc-title { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }

/* Country and other dropdowns: keep the text centred and the arrow on the field. */
body.xr-app .select2-container .select2-selection--single { padding: 0 !important; box-sizing: border-box !important; display: flex !important; align-items: center; }
body.xr-app .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 38px 0 14px !important; line-height: 1.2 !important; flex: 1; }
body.xr-app .select2-container .select2-selection--single .select2-selection__arrow { top: 0 !important; right: 6px !important; height: 100% !important; display: flex; align-items: center; }
body.xr-app .select2-container .select2-selection--single .select2-selection__arrow b { position: static !important; margin: 0 !important; border-color: var(--xr-subtle) transparent transparent transparent; }

/* Dropdown list: search box and options follow the theme (no white edges). */
.select2-container--default .select2-dropdown { box-shadow: var(--xr-shadow-lg); font-family: var(--xr-font); }
.select2-container--default .select2-search--dropdown { background: var(--xr-raised) !important; padding: 10px !important; border-bottom: 1px solid var(--xr-border); }
.select2-container--default .select2-search--dropdown .select2-search__field {
    width: 100%; height: 40px; background: var(--xr-bg) !important; color: var(--xr-text) !important; border: 1px solid var(--xr-border) !important; border-radius: 10px !important;
    padding: 0 12px !important; font: 500 14px var(--xr-font) !important; outline: none !important; box-shadow: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--xr-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--xr-primary) 18%, transparent) !important; }
.select2-container--default .select2-results__option { font: 500 14.5px var(--xr-font); }
.select2-results { background: var(--xr-raised) !important; }
.select2-results__options { max-height: 260px; }
.select2-results__options { scrollbar-width: thin; scrollbar-color: var(--xr-border) transparent; }
.select2-results__options::-webkit-scrollbar { width: 8px; }
.select2-results__options::-webkit-scrollbar-track { background: transparent; }
.select2-results__options::-webkit-scrollbar-thumb { background: var(--xr-border); border-radius: 8px; }
body.xr-app .xkyc-drop span { color: var(--xr-text); }
body.xr-app .xkyc-title { color: var(--xr-text); }
body.xr-app .xkyc-hint { color: var(--xr-subtle); }
body.xr-app .xkyc-guide h5 { color: var(--xr-text); }
body.xr-app .xkyc-guide li span { color: var(--xr-text); }
body.xr-app .xkyc-count { color: var(--xr-subtle); }

/* KYC documents block and alerts inside the account area */
body.xr-app .kyc-preview { background: transparent; border: 1px solid var(--xr-border); border-radius: 16px; padding: 18px 20px; }
body.xr-app .kyc-preview-area { background: transparent; padding: 0; border: 0; }
body.xr-app .kyc-preview-area p { margin: 0 0 8px; color: var(--xr-text); }
body.xr-app .kyc-title .title { font-size: 16px; font-weight: 700; margin: 0; }
body.xr-app .kyc-title i { color: var(--xr-primary); font-size: 22px; }
body.xr-app .submit-img label, body.xr-app .submit-img .kyc-img { color: var(--xr-text); }
body.xr-app .submit-img img { border-radius: 12px; border: 1px solid var(--xr-border); }
body.xr-app .text--success { color: var(--xr-primary-strong) !important; }
body.xr-app .text--warning { color: var(--xr-warning) !important; }
body.xr-app .text--danger { color: var(--xr-danger) !important; }
body.xr-app .alert { border: 1px solid var(--xr-border); border-radius: 14px; padding: 12px 16px; font-size: 14px; background: var(--xr-muted); color: var(--xr-text); }
body.xr-app .alert-info { background: color-mix(in srgb, var(--xr-primary) 10%, transparent); border-color: color-mix(in srgb, var(--xr-primary) 25%, transparent); }
body.xr-app .re-submit-btn { text-align: center; }
body.xr-app .rejected-reason { background: color-mix(in srgb, var(--xr-danger) 10%, transparent); color: var(--xr-text); border-radius: 12px; padding: 12px 14px; }

/* KYC status page: spacing and rhythm */
body.xr-app .custom-card .card-body { padding: 8px 24px 28px; }
body.xr-app .kyc-preview { padding: 22px 24px 24px; margin-top: 4px; }
body.xr-app .kyc-title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 0; }
body.xr-app .kyc-title i {
    width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    background: var(--xr-primary-soft) !important; color: var(--xr-primary-strong) !important; font-size: 22px; line-height: 1;
}
body.xr-app .kyc-title .title { margin: 0; line-height: 1.3; }
body.xr-app .kyc-preview-area { margin: 0 0 18px; padding: 0; }
body.xr-app .kyc-preview-area p {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border-radius: 999px; background: var(--xr-muted);
    font-size: 14px; font-weight: 600; color: var(--xr-subtle);
}
body.xr-app .kyc-preview-area p span { font-weight: 700; }
body.xr-app .kyc-preview .submit-img { margin: 4px 0 6px; }
body.xr-app .kyc-preview .alert { margin: 0; }
body.xr-app .re-submit-btn { margin-top: 26px; padding: 22px 0 0 !important; border-top: 1px solid var(--xr-border); display: flex; flex-direction: column; align-items: center; gap: 10px; }
body.xr-app .re-submit-btn p { margin: 0; font-size: 13px; }
body.xr-app .re-submit-btn .btn--base { min-width: 260px; }
@media (max-width: 575px) { body.xr-app .re-submit-btn .btn--base { width: 100%; min-width: 0; } body.xr-app .custom-card .card-body { padding: 8px 16px 22px; } }
body.xr-app .xkyc-result { border: 1px solid transparent; }
body.xr-app .xkyc-result.wait { border-color: color-mix(in srgb, var(--xr-warning) 28%, transparent); }
body.xr-app .xkyc-result.ok { border-color: color-mix(in srgb, var(--xr-primary) 28%, transparent); }
body.xr-app .xkyc-result.bad { border-color: color-mix(in srgb, var(--xr-danger) 28%, transparent); }
body.xr-app .xkyc-result h5 { color: var(--xr-text); }
body.xr-app .xkyc-result p { color: var(--xr-text); opacity: .78; }
body.xr-app .xkyc-tips { background: var(--xr-raised); }
body.xr-app .xkyc-tips li span { color: var(--xr-text); }
body.xr-app .custom-card .dashboard-header-wrapper { padding: 22px 24px 16px; }
body.xr-app .xkyc-result { margin-bottom: 22px; padding: 20px 22px; }
body.xr-app .kyc-preview-area { margin-bottom: 20px; }
body.xr-app .kyc-preview .alert { margin-bottom: 4px; }
body.xr-app .submit-img .row, body.xr-app .submit-img .mb-20-none { margin-bottom: 0 !important; }
body.xr-app .submit-img .col-12, body.xr-app .submit-img [class*="col-"] { margin-bottom: 14px; }

/* Tables (history and other lists) */
.xr-table-wrap { overflow-x: auto; margin: 0 -8px; padding: 0 8px; }
.xr-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.xr-table th { text-align: left; padding: 12px 14px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--xr-subtle); border-bottom: 1px solid var(--xr-border); white-space: nowrap; }
.xr-table td { padding: 14px; border-bottom: 1px solid var(--xr-border); color: var(--xr-text); vertical-align: middle; }
.xr-table tbody tr:hover td { background: var(--xr-muted); }
.xr-table tbody tr:last-child td { border-bottom: 0; }
.xr-table .text-end { text-align: right; }
@media (max-width: 760px) {
    .xr-table thead { display: none; }
    .xr-table, .xr-table tbody, .xr-table tr, .xr-table td { display: block; width: 100%; }
    .xr-table tr { border: 1px solid var(--xr-border); border-radius: 14px; margin-bottom: 12px; padding: 6px 0; }
    .xr-table td { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border: 0; text-align: right; }
    .xr-table td::before { content: attr(data-label); color: var(--xr-subtle); font-weight: 600; text-align: left; }
    .xr-table tbody tr:hover td { background: transparent; }
}
.xr-pager { margin-top: 18px; display: flex; justify-content: center; }
body.xr-app .pagination { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; justify-content: center; }
body.xr-app .pagination .page-link, body.xr-app .pagination li > span, body.xr-app .pagination li > a {
    display: inline-flex; min-width: 38px; height: 38px; align-items: center; justify-content: center; padding: 0 12px; border-radius: 10px;
    border: 1px solid var(--xr-border); background: var(--xr-raised); color: var(--xr-text); font-weight: 600; text-decoration: none;
}
body.xr-app .pagination .active .page-link, body.xr-app .pagination .active > span { background: var(--xr-primary); border-color: var(--xr-primary); color: var(--xr-on-primary); }
body.xr-app .pagination .disabled .page-link, body.xr-app .pagination .disabled > span { opacity: .45; }

/* Support: attachments */
.xr-muted-cell { color: var(--xr-subtle); max-width: 280px; }
.xr-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 28px 16px; border: 1.5px dashed var(--xr-border); border-radius: 14px; background: var(--xr-muted); cursor: pointer; text-align: center; margin: 0; }
.xr-dropzone:hover { border-color: var(--xr-primary); }
.xr-dropzone i { font-size: 34px; color: var(--xr-primary); }
.xr-dropzone b { color: var(--xr-text); font-size: 14.5px; }
.xr-dropzone span { color: var(--xr-subtle); font-size: 13px; }
.xr-dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.xr-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.xr-file { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--xr-border); border-radius: 12px; background: var(--xr-raised); min-width: 0; }
.xr-file img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.xr-file span { font-size: 12.5px; color: var(--xr-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xr-file.is-bad { border-color: var(--xr-danger); }

/* Support: conversation */
body.xr-app .support-card { display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: 20px; }
body.xr-app .support-card-wrapper { flex: 1; min-width: 0; display: flex; flex-direction: column; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.xr-app .support-card-wrapper .card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; background: transparent; border-bottom: 1px solid var(--xr-border); }
body.xr-app .card-header-user-area { display: flex; align-items: center; gap: 12px; }
body.xr-app .card-header-user-area .avatar, body.xr-app .media-chat .avatar { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; background: var(--xr-muted); }
body.xr-app .card-header-user-content .title { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--xr-text); }
body.xr-app .card-header-user-content .sub-title { font-size: 13px; color: var(--xr-subtle); }
body.xr-app .support-chat-area { display: flex; flex-direction: column; flex: 1; min-height: 0; }
body.xr-app .chat-container.messages { flex: 1; min-height: 340px; max-height: 56vh; overflow-y: auto; padding: 20px 22px; background: transparent; }
body.xr-app .chat-container ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
body.xr-app .media-chat { display: flex; gap: 10px; align-items: flex-end; max-width: 100%; }
body.xr-app .media-chat.media-chat-reverse { flex-direction: row-reverse; }
body.xr-app .media-chat .media-body { max-width: min(78%, 560px); }
body.xr-app .media-chat .media-body p { margin: 0; padding: 11px 15px; border-radius: 16px 16px 16px 4px; background: var(--xr-muted); color: var(--xr-text); font-size: 14.5px; line-height: 1.5; word-break: break-word; }
body.xr-app .media-chat.media-chat-reverse .media-body p { background: var(--xr-primary); color: var(--xr-on-primary); border-radius: 16px 16px 4px 16px; }
body.xr-app .media-chat .media-body p::before, body.xr-app .media-chat .media-body p::after { display: none !important; }
body.xr-app .chat-form { padding: 14px 18px; border-top: 1px solid var(--xr-border); background: transparent; }
body.xr-app .chat-form .publisher { display: flex; align-items: flex-end; gap: 10px; padding: 0; background: transparent; }
body.xr-app .chat-form .publisher .chatbox-message-part { flex: 1; }
body.xr-app .chat-form .publisher .publisher-input { width: 100%; min-height: 48px; max-height: 140px; border: 1px solid var(--xr-border); border-radius: 14px; background: var(--xr-bg); color: var(--xr-text); padding: 12px 14px; font: 500 14.5px var(--xr-font); resize: none; }
body.xr-app .chat-form .publisher .publisher-input:focus { outline: none; border-color: var(--xr-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xr-primary) 18%, transparent); }
body.xr-app .chat-form .chat-submit-btn { width: 48px; height: 48px; border-radius: 14px; border: 0; background: var(--xr-primary); color: var(--xr-on-primary); font-size: 22px; display: inline-flex; align-items: center; justify-content: center; }
body.xr-app .chat-form .chat-submit-btn:hover { background: var(--xr-primary-strong); }
body.xr-app .solved-message { padding: 16px 22px; border-top: 1px solid var(--xr-border); color: var(--xr-subtle) !important; font-size: 14px; }
body.xr-app .support-profile-wrapper { position: static !important; width: 320px; flex: 0 0 320px; transform: none !important; height: auto; background: var(--xr-surface); border: 0; border-left: 1px solid var(--xr-border); border-radius: 0; padding: 0; box-shadow: none; }
body.xr-app .support-profile-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--xr-border); }
body.xr-app .support-profile-header .badge { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
body.xr-app .support-profile-body { padding: 18px 20px; }
body.xr-app .support-profile-body .title { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
body.xr-app .support-profile-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 14px; color: var(--xr-subtle); }
body.xr-app .support-profile-list li span, body.xr-app .support-profile-list li p { color: var(--xr-text); }
body.xr-app .support-profile-list a { color: var(--xr-primary-strong); }
body.xr-app .chat-cross-btn, body.xr-app .info-btn { display: none; }
@media (max-width: 991px) {
    body.xr-app .support-card { flex-direction: column; }
    body.xr-app .support-profile-wrapper { width: 100%; flex: none; border-left: 0; border-top: 1px solid var(--xr-border); }
    body.xr-app .chat-container.messages { max-height: 50vh; min-height: 260px; }
}
body.xr-app .support-card-wrapper { border-right: 0 !important; box-shadow: none !important; }
body.xr-app .support-profile-wrapper .support-profile-header { background: transparent !important; }
body.xr-app .support-profile-header .badge, body.xr-app .support-profile-header span[class*="badge"] { background: var(--xr-muted); color: var(--xr-text); }
body.xr-app .support-profile-header .badge--warning { background: color-mix(in srgb, var(--xr-warning) 16%, transparent); color: var(--xr-warning); }
body.xr-app .support-profile-header .badge--info { background: var(--xr-primary-soft); color: var(--xr-primary-strong); }
body.xr-app .support-profile-header .badge--success { background: color-mix(in srgb, #6d28d9 14%, transparent); color: #6d28d9; }
body.xr-app .chat-form { border-top: 1px solid var(--xr-border) !important; }
body.xr-app .chat-form .publisher { border: 0 !important; box-shadow: none !important; }
body.xr-app .chat-form .publisher .chatbox-send-part .chat-submit-btn { background: var(--xr-primary) !important; color: var(--xr-on-primary) !important; border-radius: 14px !important; width: 48px; height: 48px; }
body.xr-app .chat-form .publisher .chatbox-message-part textarea.publisher-input { background: var(--xr-bg) !important; color: var(--xr-text) !important; border: 1px solid var(--xr-border) !important; border-radius: 14px !important; }
.chat-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 44px 16px 16px; text-align: center; }
.chat-empty i { font-size: 38px; color: var(--xr-primary); }
.chat-empty b { color: var(--xr-text); font-size: 15px; }
.chat-empty span { color: var(--xr-subtle); font-size: 13.5px; max-width: 320px; }
body.xr-app .messages:has(li) .chat-empty { display: none; }
body.xr-app .chat-container.messages { scrollbar-width: thin; scrollbar-color: var(--xr-border) transparent; }
body.xr-app .chat-container.messages::-webkit-scrollbar { width: 8px; }
body.xr-app .chat-container.messages::-webkit-scrollbar-track { background: transparent; }
body.xr-app .chat-container.messages::-webkit-scrollbar-thumb { background: var(--xr-border); border-radius: 8px; }

/* Support conversation: alignment polish */
body.xr-app .chat-form .publisher { align-items: center !important; gap: 12px; }
body.xr-app .chat-form .publisher .chatbox-message-part { display: flex; align-items: center; margin: 0 !important; padding: 0 !important; }
body.xr-app .chat-form .publisher .chatbox-message-part textarea.publisher-input { height: 52px !important; min-height: 52px !important; max-height: 140px; padding: 15px 16px !important; line-height: 22px !important; margin: 0 !important; display: block; }
body.xr-app .chat-form .publisher .chatbox-send-part { display: flex; align-items: center; flex: 0 0 52px; width: 52px; margin: 0 !important; padding: 0 !important; }
body.xr-app .chat-form .publisher .chatbox-send-part .chat-submit-btn { width: 52px !important; min-width: 52px; height: 52px !important; flex: none; margin: 0 !important; padding: 0 !important; line-height: 1 !important; }
body.xr-app .support-chat-area, body.xr-app .chat-container, body.xr-app .chat-container.messages { border: 0 !important; box-shadow: none !important; }
body.xr-app .chat-container.messages { border-right: 0 !important; }
body.xr-app .card-header-user-area .avatar { border: 0 !important; padding: 0 !important; background: var(--xr-muted) !important; }
body.xr-app .card-header-user-content .sub-title { display: block; margin-top: 2px; }
body.xr-app .support-profile-list li { display: flex; flex-direction: column; gap: 4px; }
body.xr-app .support-profile-list li > span, body.xr-app .support-profile-list li > p, body.xr-app .support-profile-list li > a { color: var(--xr-text); font-size: 14.5px; line-height: 1.55; margin: 0; }
body.xr-app .support-profile-list li { color: var(--xr-subtle); font-size: 12.5px; font-weight: 600; text-transform: none; }
body.xr-app .support-profile-list li .text--danger { color: var(--xr-primary-strong) !important; }
body.xr-app .support-profile-body .title { margin-bottom: 16px; }
body.xr-app .chat-form .publisher .chatbox-message-part textarea.publisher-input { resize: none !important; scrollbar-width: none; overflow: auto; }
body.xr-app .chat-form .publisher .chatbox-message-part textarea.publisher-input::-webkit-scrollbar { display: none; }

/* About and FAQ */
.xr-about__media { border-radius: var(--xr-radius-lg); background: linear-gradient(135deg, var(--xr-primary-soft), var(--xr-muted)); padding: 28px; display: flex; align-items: center; justify-content: center; min-height: 260px; }
.xr-about__media img { max-width: 100%; height: auto; display: block; }
.xr-values { display: grid; gap: 12px; margin: 24px 0 8px; }
.xr-values > div { display: flex; align-items: center; gap: 14px; }
.xr-values .xr-ico { width: 44px; height: 44px; font-size: 22px; flex: 0 0 auto; }
.xr-values b { font-size: 15.5px; color: var(--xr-text); font-weight: 600; }
.xr-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.xr-faq__item { background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
.xr-faq__item[open] { border-color: color-mix(in srgb, var(--xr-primary) 45%, var(--xr-border)); box-shadow: var(--xr-shadow); }
.xr-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 700; font-size: 16px; color: var(--xr-text); }
.xr-faq__item summary::-webkit-details-marker { display: none; }
.xr-faq__item summary i { color: var(--xr-primary); font-size: 18px; transition: transform .2s ease; flex: 0 0 auto; }
.xr-faq__item[open] summary i { transform: rotate(180deg); }
.xr-faq__item summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--xr-primary) 40%, transparent); outline-offset: 2px; border-radius: 16px; }
.xr-faq__body { padding: 0 22px 20px; }
.xr-faq__body p { margin: 0; font-size: 15px; line-height: 1.7; }

/* Contact */
.xr-contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 26px; align-items: start; }
@media (max-width: 991px) { .xr-contact { grid-template-columns: 1fr; } }
.xr-contact__info { display: grid; gap: 14px; }
.xr-contact__card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: var(--xr-raised); border: 1px solid var(--xr-border); text-decoration: none; box-shadow: var(--xr-shadow); transition: border-color .15s, transform .15s; }
a.xr-contact__card:hover { border-color: color-mix(in srgb, var(--xr-primary) 45%, var(--xr-border)); transform: translateY(-2px); }
.xr-contact__card small { display: block; color: var(--xr-subtle); font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.xr-contact__card b { color: var(--xr-text); font-size: 16px; font-weight: 700; word-break: break-word; }
.xr-contact__note { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-radius: 14px; background: var(--xr-primary-soft); color: var(--xr-primary-strong); font-size: 14px; font-weight: 600; }
:root[data-theme="dark"] .xr-contact__note { color: var(--xr-primary-light); }
.xr-contact__form { padding: 28px; }
.xr-contact__form:hover { transform: none; }
.xr-field { margin-bottom: 14px; }
.xr-field label { display: block; font-weight: 600; font-size: 13.5px; color: var(--xr-text); margin-bottom: 6px; }
.xr-field label span { color: var(--xr-danger); margin-left: 2px; }
.xr-field input, .xr-field textarea { width: 100%; border: 1px solid var(--xr-border); border-radius: 12px; background: var(--xr-bg); color: var(--xr-text); padding: 12px 14px; font: 500 15px var(--xr-font); min-height: 48px; }
.xr-field textarea { resize: vertical; min-height: 130px; }
.xr-field input:focus, .xr-field textarea:focus { outline: none; border-color: var(--xr-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xr-primary) 18%, transparent); }
.xr-field input::placeholder, .xr-field textarea::placeholder { color: var(--xr-subtle); opacity: .75; }
body.xr-site .xr-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
body.xr-site .xr-span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { body.xr-site .xr-form-grid { grid-template-columns: 1fr; } }
body.xr-site .xr-error { color: var(--xr-danger); font-size: 12.5px; margin-top: 5px; }

/* Blog */
.xr-post { background: var(--xr-raised); border: 1px solid var(--xr-border); border-radius: 20px; overflow: hidden; box-shadow: var(--xr-shadow); display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s, border-color .18s; }
.xr-post:hover { transform: translateY(-4px); box-shadow: var(--xr-shadow-lg); border-color: color-mix(in srgb, var(--xr-primary) 40%, var(--xr-border)); }
.xr-post__media { display: block; aspect-ratio: 16/10; background: linear-gradient(135deg, var(--xr-primary-soft), var(--xr-muted)); overflow: hidden; }
.xr-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.xr-post:hover .xr-post__media img { transform: scale(1.05); }
.xr-post__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.xr-post__date { color: var(--xr-subtle); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.xr-post h3 { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 700; }
.xr-post h3 a { color: var(--xr-text); text-decoration: none; }
.xr-post h3 a:hover { color: var(--xr-primary-strong); }
.xr-post p { margin: 0; font-size: 14.5px; line-height: 1.65; flex: 1; }
.xr-post .xr-link { margin-top: 6px; }
.xr-chips--wrap { flex-wrap: wrap; }
.xr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--xr-border); background: var(--xr-raised); color: var(--xr-text); font-weight: 600; font-size: 13.5px; text-decoration: none; }
a.xr-chip:hover { border-color: var(--xr-primary); color: var(--xr-primary-strong); }
.xr-chip.active { background: var(--xr-primary); border-color: var(--xr-primary); color: var(--xr-on-primary); }
.xr-chip span { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--xr-muted); color: var(--xr-subtle); }
.xr-article__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
@media (max-width: 991px) { .xr-article__grid { grid-template-columns: 1fr; } }
.xr-article__cover { border-radius: 22px; overflow: hidden; margin-bottom: 26px; background: var(--xr-muted); }
.xr-article__cover img { width: 100%; height: auto; display: block; }
.xr-prose { font-size: 17px; line-height: 1.8; color: var(--xr-text); }
.xr-prose p { color: var(--xr-text); margin: 0 0 1.1em; }
.xr-prose h2, .xr-prose h3, .xr-prose h4 { margin: 1.6em 0 .6em; }
.xr-prose img { max-width: 100%; height: auto; border-radius: 14px; }
.xr-prose a { color: var(--xr-primary-strong); }
.xr-prose ul, .xr-prose ol { padding-left: 1.3em; margin-bottom: 1.1em; }
.xr-article__side { display: grid; gap: 18px; position: sticky; top: calc(var(--xr-header-h) + 20px); }
@media (max-width: 991px) { .xr-article__side { position: static; } }
.xr-sidelist { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.xr-sidelist a { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 10px; color: var(--xr-text); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.xr-sidelist a:hover { background: var(--xr-muted); color: var(--xr-primary-strong); }
.xr-sidelist a span { color: var(--xr-subtle); font-size: 12.5px; }
.xr-recent { display: grid; gap: 14px; }
.xr-recent a { display: flex; gap: 12px; text-decoration: none; align-items: center; }
.xr-recent img { width: 72px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--xr-muted); flex: 0 0 auto; }
.xr-recent time { display: block; font-size: 12px; color: var(--xr-subtle); font-weight: 600; }
.xr-recent b { color: var(--xr-text); font-size: 14.5px; line-height: 1.35; display: block; }
.xr-recent a:hover b { color: var(--xr-primary-strong); }
.xr-prose { max-width: 72ch; }

/* Vendor landing */
.xr-vhero { position: relative; isolation: isolate; padding: 110px 0 100px; background: #0d1f19 var(--xr-vhero) center / cover no-repeat; color: #fff; }
.xr-vhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8, 24, 19, .92) 0%, rgba(8, 24, 19, .72) 55%, rgba(8, 24, 19, .35) 100%); }
.xr-vhero__copy { max-width: 640px; }
.xr-vhero h1 { color: #fff; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.1; font-weight: 800; margin: 0 0 16px; }
body.xr-site .xr-vhero p { color: rgba(255, 255, 255, .86); font-size: 18px; line-height: 1.65; margin: 0; }
.xr-vhero .xr-eyebrow { background: rgba(255, 255, 255, .16); color: #fff; }
.xr-btn--light { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(6px); }
.xr-btn--light:hover { background: #fff; color: #0b6e53; }
.xr-checks--one { grid-template-columns: 1fr; margin-top: 0; }
@media (max-width: 767px) { .xr-vhero { padding: 72px 0 64px; } }
.xr-kpi__value small { font-size: 14px; font-weight: 700; color: var(--xr-subtle); margin-left: 2px; }
.xr-kpi .xr-link { margin-top: -2px; }

/* ===== Sign-in pages (customers and vendors) ===== */
body.xr-auth { margin: 0; background: var(--xr-bg); color: var(--xr-text); font-family: var(--xr-font); -webkit-font-smoothing: antialiased; }
body.xr-auth *, body.xr-auth *::before, body.xr-auth *::after { box-sizing: border-box; }
.xa { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.xa-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 44px 52px; color: #fff; background: linear-gradient(145deg, var(--xr-grad-from, #0b6e53) 0%, var(--xr-primary) 100%); }
.xa-hero::before, .xa-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
.xa-hero::before { width: 520px; height: 520px; right: -180px; top: -160px; }
.xa-hero::after { width: 380px; height: 380px; left: -140px; bottom: -120px; background: rgba(255, 255, 255, .06); }
.xa-hero > * { position: relative; z-index: 1; }
.xa-hero__logo img { height: 40px; width: auto; display: block; }
.xa-hero h1 { margin: 0 0 14px; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.xa-hero p { margin: 0 0 30px; max-width: 440px; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.xa-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.xa-points li { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; color: #fff; }
.xa-points i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .16); font-size: 20px; }
.xa-hero__foot { font-size: 13px; color: rgba(255, 255, 255, .7); }

.xa-main { display: flex; flex-direction: column; min-height: 100vh; padding: 20px 32px 18px; background: var(--xr-bg); }
.xa-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xa-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--xr-subtle); text-decoration: none; }
.xa-back:hover { color: var(--xr-primary); }
.xa-top__tools { display: flex; align-items: center; gap: 10px; }
.xa-top .xr-icon-btn { width: auto; min-width: 42px; padding: 0 12px; gap: 6px; font: 600 14px var(--xr-font); }
.xa-dd { position: relative; }
.xa-center { flex: 1; display: grid; place-items: center; padding: 28px 0; }
.xa-card { width: 100%; max-width: 448px; }
.xa-card__logo { display: none; margin-bottom: 26px; }
.xa-card__logo img { height: 36px; width: auto; }
.xa-foot { margin: 0; text-align: center; font-size: 12.5px; color: var(--xr-subtle); }
.xa-title { margin: 0 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--xr-text); }
.xa-sub { margin: 0 0 24px; font-size: 15px; line-height: 1.55; color: var(--xr-subtle); }
.xa-sub strong { color: var(--xr-text); }

.xa-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin-bottom: 28px; border-radius: 14px; background: var(--xr-muted); }
.xa-tabs button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--xr-subtle); font: 700 14.5px var(--xr-font); cursor: pointer; transition: background .15s, color .15s; }
.xa-tabs button:hover { color: var(--xr-text); }
.xa-tabs button.is-on { background: var(--xr-raised); color: var(--xr-text); box-shadow: var(--xr-shadow); }

.xa-field { margin-bottom: 18px; }
.xa-field > label { display: block; margin: 0 0 7px; font-size: 13.5px; font-weight: 600; color: var(--xr-text); }
.xa-field input, .xa-field select { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--xr-border); border-radius: 14px; background: var(--xr-raised); color: var(--xr-text); font: 500 15.5px var(--xr-font); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.xa-field select { background-image: linear-gradient(45deg, transparent 50%, var(--xr-subtle) 50%), linear-gradient(135deg, var(--xr-subtle) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.xa-field input::placeholder { color: var(--xr-subtle); opacity: .7; }
.xa-field input:focus, .xa-field select:focus { outline: 0; border-color: var(--xr-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xr-primary) 20%, transparent); }
.xa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.xa-pass { position: relative; }
.xa-pass input { padding-right: 52px; }
.xa-pass__btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--xr-subtle); font-size: 20px; cursor: pointer; }
.xa-pass__btn:hover { color: var(--xr-text); background: var(--xr-muted); }
.xa-err { margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--xr-danger); }
.xa-row { display: flex; justify-content: flex-end; margin: -6px 0 18px; }
.xa-link { color: var(--xr-primary-strong); font-weight: 700; text-decoration: none; }
.xa-link:hover { text-decoration: underline; }
body.xr-auth a.xa-link, body.xr-auth .xa-alt a { color: var(--xr-primary-strong); }
.xa-captcha { margin-bottom: 18px; }
.xa-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; border: 0; border-radius: 14px; background: var(--xr-primary); color: var(--xr-on-primary); font: 700 16px var(--xr-font); cursor: pointer; box-shadow: 0 8px 22px color-mix(in srgb, var(--xr-primary) 32%, transparent); transition: background .15s, transform .15s, opacity .15s; }
.xa-btn:hover { background: var(--xr-primary-strong); transform: translateY(-1px); }
.xa-btn[disabled] { opacity: .65; cursor: wait; transform: none; }
.xa-alt { margin: 22px 0 0; text-align: center; font-size: 14.5px; color: var(--xr-subtle); }
.xa-check { display: flex !important; align-items: flex-start; gap: 10px; margin: 0 0 18px !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.5; color: var(--xr-subtle) !important; cursor: pointer; }
.xa-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--xr-primary); }
.xa-back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 14px; font-weight: 600; color: var(--xr-subtle); text-decoration: none; }
.xa-back-link:hover { color: var(--xr-primary); }
.xa-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 20px; background: var(--xr-primary-soft); color: var(--xr-primary-strong); font-size: 32px; }
.xa-otp { display: flex; justify-content: center; gap: 10px; margin: 6px 0 14px; }
.xa-otp__in { width: 100%; max-width: 54px; height: 62px; padding: 0 !important; text-align: center; border: 1.5px solid var(--xr-border); border-radius: 14px; background: var(--xr-raised); color: var(--xr-text); font: 800 26px var(--xr-font); caret-color: var(--xr-primary); }
.xa-otp__in:focus { outline: 0; border-color: var(--xr-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xr-primary) 20%, transparent); }
.xa-timer { margin: 4px 0 18px; text-align: center; font-size: 13.5px; color: var(--xr-subtle); }

@media (max-width: 991px) {
    .xa { grid-template-columns: 1fr; }
    .xa-hero { display: none; }
    .xa-main { padding: 16px 20px; }
    .xa-card__logo { display: block; }
    .xa-center { align-items: start; padding-top: 18px; }
}
@media (max-width: 420px) { .xa-grid { grid-template-columns: 1fr; } .xa-otp { gap: 7px; } .xa-otp__in { height: 56px; font-size: 22px; } }
body.xr-auth h1, body.xr-auth h2, body.xr-auth h3, body.xr-auth h4, body.xr-auth p, body.xr-auth label, body.xr-auth input, body.xr-auth select, body.xr-auth button { font-family: var(--xr-font); }
body.xr-auth h1, body.xr-auth h2 { margin-top: 0; }
body.xr-auth .xa-title { font-size: 28px; line-height: 1.2; }
body.xr-auth .xa-hero h1 { color: #fff; }
.xa-card__logo .xr-logo-dark { display: none; }
:root[data-theme="dark"] .xa-card__logo .xr-logo-light { display: none; }
:root[data-theme="dark"] .xa-card__logo .xr-logo-dark { display: block; }

/* ============================================================
   HERO CAR FLOOR — final (static glow, smooth animation)
   ============================================================ */
.xr-hero__visual .banner-img > img{ opacity: 0; }
.xr-hero__visual .banner-img{ filter: none; }
.xr-hero__visual .banner-inner-img{ --floor-y: 73%; z-index: 3; }
.xr-hero__visual .banner-inner-img > img{ position: relative; z-index: 1; filter: none; }
.xr-hero__visual .banner-inner-img::before{
  content:""; position:absolute; left:50%; top:var(--floor-y);
  width:64%; aspect-ratio:3.2/1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(ellipse at center,
    color-mix(in srgb, var(--xr-primary) 55%, transparent) 0%,
    color-mix(in srgb, var(--xr-primary) 18%, transparent) 48%,
    transparent 72%);
  filter:blur(22px); z-index:0;
  animation:xrFloorBreath 4s ease-in-out infinite;
}
.xr-hero__visual .banner-inner-img::after{
  content:""; position:absolute; left:50%; top:calc(var(--floor-y) + 1.5%);
  width:44%; aspect-ratio:7/1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, transparent 72%);
  filter:blur(9px); z-index:0;
}
@keyframes xrFloorBreath{ 0%,100%{opacity:.72} 50%{opacity:1} }