/* E-Lily premium soft-depth design system — shared across every customer route. */
:root {
  --elu-red: #df2b20;
  --elu-red-dark: #bc1812;
  --elu-red-soft: #fff0ee;
  --elu-ink: #261d1b;
  --elu-muted: #766764;
  --elu-bg: #f8f4f3;
  --elu-surface: #fffdfc;
  --elu-soft: #f5eeec;
  --elu-line: rgba(111, 70, 63, .10);
  --elu-shadow: 0 14px 34px rgba(79, 43, 38, .075), 0 3px 10px rgba(79, 43, 38, .045);
  --elu-shadow-sm: 0 7px 18px rgba(79, 43, 38, .065), 0 2px 6px rgba(79, 43, 38, .035);
  --elu-inset: inset 2px 2px 6px rgba(92, 57, 52, .055), inset -2px -2px 6px rgba(255, 255, 255, .88);
}

html { background: var(--elu-bg) !important; }

body:not(.elily-team-page),
body:not(.elily-team-page) .shell,
body:not(.elily-team-page) .shell-main {
  background:
    radial-gradient(circle at 10% 2%, rgba(228, 41, 31, .05), transparent 25%),
    linear-gradient(180deg, #fbf8f7 0%, var(--elu-bg) 45%, #f6f0ef 100%) !important;
  color: var(--elu-ink) !important;
}

/* Remove the remaining yellow/blue legacy canvases from Kicks-era routes. */
.rf-home.kx-authhome,
.kx-myplans,
.recharge.kx-rec,
.vwit-wrap.kx-wd,
.bankx.kx-cards,
.redeem-page.kx-rd,
.redeem.kx-rd,
.kx-support.kx-sup,
.acctx.kx-acc,
.vrob-page,
.vnot-page,
.kx-recx,
.page-pad {
  background: transparent !important;
  background-image: none !important;
}

/* Shared, calm top bars. */
.kx-mp-top,
.kx-rc-top,
.kx-ww-top,
.kx-cd-top,
.kx-rd-top,
.kx-su-top,
.kx-as-top,
.kx-fr-top,
.team-titlebar,
.cz-titlebar,
.rf-whead,
.page-header {
  border-bottom: 1px solid rgba(111, 70, 63, .075) !important;
  background: rgba(251, 248, 247, .91) !important;
  box-shadow: 0 8px 22px rgba(83, 47, 42, .04) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
}

.kx-mp-back,
.kx-rc-back,
.kx-ww-back,
.kx-cd-back,
.kx-rd-back,
.kx-fr-back,
.rf-back,
.team-back,
.cz-back,
.kx-as-ics button,
.acctx-bell {
  min-width: 42px !important;
  min-height: 42px !important;
  border: 1px solid rgba(118, 72, 65, .09) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #fff, #f8f1f0) !important;
  color: var(--elu-red) !important;
  box-shadow: var(--elu-shadow-sm), inset 0 1px 0 #fff !important;
}

.kx-mp-top .kh-logo,
.kx-rc-top .kh-logo,
.kx-ww-top .kh-logo,
.kx-cd-top .kh-logo,
.kx-rd-top .kh-logo,
.kx-su-top .kh-logo,
.kx-as-top .kh-logo {
  border: 1px solid rgba(223, 43, 32, .10) !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: var(--elu-shadow-sm) !important;
}

.kx-fr-top .kh-logo {
  border: 1px solid rgba(223, 43, 32, .10) !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: var(--elu-shadow-sm) !important;
}

/* Shared red hero language. */
.kx-mp-hero,
.kx-rc-hero,
.kx-ww-hero,
.kx-cd-hero,
.kx-rd-hero,
.kx-su-hero,
.kx-as-hero,
.kx-rec-hero,
.kx-wd-hero,
.kx-cards-hero,
.kx-sup-hero,
.kx-fr-hero,
.kx-not-hero,
.rdm-hero,
.ehp-hero {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.18), transparent 31%),
    linear-gradient(145deg, #ef372c 0%, #d92018 50%, var(--elu-red-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 18px 38px rgba(161, 31, 23, .20), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.kx-mp-kicker,
.kx-rc-kicker,
.kx-ww-kicker,
.kx-cd-kicker,
.kx-rd-kicker,
.kx-su-kicker,
.kx-as-kicker,
.kx-fr-kicker,
.page-eyebrow,
.kicker {
  color: rgba(255,255,255,.78) !important;
  letter-spacing: .13em !important;
}

/* Main surfaces. */
.kh-wallet,
.kh-quick-btn,
.kh-more,
.kh-reward-grid .kh-roul,
.kx-mp-card,
.kx-mp-empty,
.kx-rc-meths button,
.kx-rc-hist,
.kx-ww-acct,
.kx-ww-hist,
.vwit-card,
.kx-cd-card,
.kx-cd-empty,
.bankx-cta-wrap,
.kx-rd-won,
.rdm-form,
.kx-su-row,
.kx-su-empty,
.tg-group-card,
.kx-as-stats,
.kx-as-pairs,
.kx-as-card,
.kx-as-menu,
.kx-app-card,
.kx-tg-card,
.record-summary,
.kx-fr-list,
.kx-fr-empty,
.vnot-wrap,
.vnot-empty,
.nodata,
.ehp-card {
  border: 1px solid var(--elu-line) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #fff, var(--elu-surface)) !important;
  box-shadow: var(--elu-shadow), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.kh-wallet-stats > div,
.kx-mp-stats span,
.kx-rc-amt,
.kx-ww-amt,
.kx-as-stats > div,
.vwit-balance,
.vwit-input-wrap,
.vwit-acct,
.vwit-limit,
.vwit-sum,
.record-sum-item,
.acctx-stats > div,
.acctx-income-row,
.acctx-tile {
  border: 1px solid rgba(116, 75, 68, .075) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #f6efed, #fffaf9) !important;
  box-shadow: var(--elu-inset) !important;
}

/* Buttons and selected controls. */
.kh-dep,
.kx-mp-go,
.kx-mp-claim,
.kx-rc-go,
.kx-ww-go,
.vwit-submit,
.kx-cd-add,
.bankx-cta,
.kx-rd-go,
.rdm-btn,
.kx-su-new,
.bm-btn,
.acctx-btn.blue,
.authx-cta,
.vrob-btn {
  min-height: 46px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #ed3429 0%, #d62219 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(173, 32, 23, .21), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.kh-wit,
.kx-as-wit,
.kx-su-tg,
.acctx-btn.green {
  min-height: 46px !important;
  border: 1px solid rgba(223,43,32,.17) !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, #fff, #fff6f4) !important;
  color: var(--elu-red) !important;
  box-shadow: var(--elu-shadow-sm), inset 0 1px 0 #fff !important;
}

.kx-rc-presets button,
.kx-mp-tabs button,
.team-tabs .team-tab,
.rec-chip,
.ehp-filter {
  min-height: 40px !important;
  border: 1px solid rgba(111,70,63,.09) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #fff, #f8f2f1) !important;
  color: var(--elu-muted) !important;
  box-shadow: 0 5px 12px rgba(79,43,38,.045), inset 0 1px 0 #fff !important;
}

.kx-rc-presets button.on,
.kx-mp-tabs button.on,
.team-tabs .team-tab.active,
.rec-chip.active,
.ehp-filter.is-active,
.kx-rc-meths button.on {
  border-color: var(--elu-red) !important;
  background: linear-gradient(180deg, #ed3429, #d62219) !important;
  color: #fff !important;
  outline: 0 !important;
  box-shadow: 0 8px 18px rgba(173,32,23,.18), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.kx-rc-meths button.on span,
.kx-rc-meths button.on b { color: #fff !important; }

/* Home: keep the strong medical hero, soften the utility grid. */
.kh-cover {
  background:
    radial-gradient(circle at 88% 9%, rgba(255,255,255,.16), transparent 29%),
    linear-gradient(145deg, #ef372c, #d92018 58%, #b91711) !important;
}

.kh-wallet { border-radius: 24px !important; }
.kh-quick-btn,
.kh-more { box-shadow: var(--elu-shadow-sm), inset 0 1px 0 #fff !important; }
.kh-quick-btn .kh-icon,
.kh-more .kh-icon,
.kh-eye {
  background: linear-gradient(145deg, #fff6f4, #f5e5e2) !important;
  box-shadow: var(--elu-inset) !important;
}

.kh-feature,
.kh-reward-grid .kh-checkin {
  border: 1px solid rgba(255,255,255,.20) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.17), transparent 30%),
    linear-gradient(145deg, #ef372c, #d92018 55%, #b91711) !important;
  box-shadow: 0 17px 34px rgba(161,31,23,.18), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* Auth: matching depth without making the form look inflated. */
.authx {
  background:
    radial-gradient(circle at 14% 2%, rgba(228,41,31,.08), transparent 28%),
    linear-gradient(180deg, #fff9f8, var(--elu-bg)) !important;
}

.authx-hero {
  background:
    radial-gradient(circle at 83% 12%, rgba(255,255,255,.17), transparent 31%),
    linear-gradient(145deg, #ef372c, #d92018 56%, #b91711) !important;
}

.authx-sheet {
  border: 1px solid var(--elu-line) !important;
  background: linear-gradient(145deg, #fff, var(--elu-surface)) !important;
  box-shadow: 0 -8px 30px rgba(92, 48, 42, .08), inset 0 1px 0 #fff !important;
}

.authx-line {
  min-height: 56px !important;
  border: 1px solid rgba(111,70,63,.09) !important;
  background: linear-gradient(145deg, #f6efed, #fffaf9) !important;
  box-shadow: var(--elu-inset) !important;
}

.authx-eye {
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 13px !important;
}

/* Account page cards and links. */
.kx-as-link,
.kx-tg-row,
.acctx-tile {
  border-color: rgba(111,70,63,.08) !important;
}

.kx-as-link i,
.kx-as-pairs i,
.acctx-tile svg,
.record-sum-num,
.text-success { color: var(--elu-red) !important; }

.kx-as-out,
.acctx-tile.danger { color: #bb241c !important; }

/* Empty states and supporting copy. */
.nodata,
.kx-mp-empty,
.kx-cd-empty,
.kx-su-empty,
.kx-rc-empty,
.kx-ww-empty,
.rf-empty {
  color: var(--elu-muted) !important;
}

.kx-mp-top span,
.kx-rc-top span,
.kx-ww-top span,
.kx-cd-top span,
.kx-rd-top span,
.kx-su-top span,
.kx-as-top span,
.kx-fr-top span,
.kx-mp-note,
.kx-rc-meths span,
.kx-ww-acct span,
.kx-cd-card span,
.kx-su-row span,
.record-sum-lbl { color: var(--elu-muted) !important; }

/* Shared bottom navigation: floating, clear, and touch-friendly. */
.bottomnav,
.bottomnav .bottomnav-inner {
  border: 1px solid rgba(111,70,63,.08) !important;
  background: rgba(255,253,252,.94) !important;
  box-shadow: 0 -10px 30px rgba(70,38,33,.10), inset 0 1px 0 #fff !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
}

.bottomnav .nav-item,
.bottomnav .nav-content {
  min-height: 54px !important;
}

.bottomnav .nav-content.active,
.bottomnav .nav-item:has(.active) .nav-content {
  border-radius: 16px !important;
  background: linear-gradient(145deg, #fff6f4, #fce6e2) !important;
  box-shadow: var(--elu-inset) !important;
}

.bottomnav .nav-content.active .nav-icwrap,
.bottomnav .nav-item:has(.active) .nav-icwrap,
.bottomnav .nav-content.active .nav-label,
.bottomnav .nav-item:has(.active) .nav-label {
  color: var(--elu-red) !important;
}

/* Interactions stay crisp and accessible. */
button,
a,
input,
select { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(223,43,32,.22) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: no-preference) {
  button,
  a,
  .ehp-card,
  .kx-mp-card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
  }
}

@media (max-width: 360px) {
  .kh-quick { gap: 6px !important; }
  .kh-quick-btn { padding-inline: 3px !important; }
  .bottomnav .nav-label { font-size: 9px !important; }
}