/* UK Vape Kings Loyalty — colours come from :root vars set by the plugin, seeded with the exact
   values read off the live BLOY widget so this matches rather than approximates. */

:root {
  --ukvk-bg: #E8ECFF;
  --ukvk-btn: #dd3333;
  --ukvk-text: #303030;
  --ukvk-btn-text: #FFFFFF;
  --ukvk-redeem-btn: #001584;
}

/* ---- product points badge ---- */
.ukvk-points-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ukvk-bg);
  color: var(--ukvk-text);
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  margin: 0 0 12px;
}
.ukvk-points-badge__icon { color: var(--ukvk-btn); }

/* ---- cart / checkout redemption panel ---- */
.ukvk-redeem {
  background: var(--ukvk-bg);
  color: var(--ukvk-text);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 22px;
}
.ukvk-redeem__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ukvk-redeem__note { margin: 0; font-size: .92em; opacity: .85; }
.ukvk-redeem__slider { width: 100%; margin: 6px 0 10px; accent-color: var(--ukvk-redeem-btn); }
.ukvk-redeem__row { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 12px; }
.ukvk-redeem__value { color: var(--ukvk-redeem-btn); }
.ukvk-redeem .button { background: var(--ukvk-redeem-btn); color: var(--ukvk-btn-text); border: 0; border-radius: 8px; padding: 9px 18px; cursor: pointer; }
.ukvk-redeem .ukvk-redeem__clear { background: transparent; color: var(--ukvk-text); text-decoration: underline; padding-left: 8px; }
.ukvk-redeem .button[disabled] { opacity: .55; cursor: default; }
.ukvk-redeem--guest { font-size: .95em; }
.ukvk-redeem--guest p { margin: 0; }

/* ---- floating widget: the store's BLOY launcher + panel, numbers measured 2026-09-25 (1440 / 390) ---- */
.ukvk-widget { position: fixed; left: 20px; bottom: 20px; z-index: 9998; font-family: inherit; font-size: inherit; line-height: inherit; color: rgb(44, 70, 61); }
.ukvk-widget__launcher { display: flex; align-items: center; height: 50px; padding: 0 17.56px 0 16px; margin: 0; border: 0; border-radius: 12px; background: var(--ukvk-btn); color: var(--ukvk-btn-text); font-family: inherit; font-size: 14px; line-height: 19.6px; font-weight: 400; cursor: pointer; box-shadow: none; }
.ukvk-widget__launcher:hover { background: var(--ukvk-btn); filter: none; }
.ukvk-widget__ico--launcher { width: 20px; height: 20px; flex: 0 0 20px; }
.ukvk-widget__title { display: inline-block; margin-left: 8px; font-size: 14px; line-height: 19.6px; font-weight: 400; white-space: nowrap; }

.ukvk-widget__panel { position: fixed; left: 20px; bottom: 80px; width: 350px; height: 660px; max-height: calc(100vh - 100px); background: #fff; border-radius: 12px; box-shadow: rgba(0, 0, 0, .5) 0 0 5px 0, rgba(0, 0, 0, .2) 0 1px 15px 0; overflow: hidden; padding: 0; color: rgb(44, 70, 61); }
.ukvk-widget__panel[hidden] { display: none; }
.ukvk-widget__wrapper { display: flex; flex-direction: column; height: 100%; }
.ukvk-widget__container { position: relative; height: calc(100% - 30px); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.ukvk-widget__container::-webkit-scrollbar { display: none; }
.ukvk-widget__action { position: absolute; top: 0; left: 0; right: 0; height: 50px; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; z-index: 2; }
.ukvk-widget__close { display: block; padding: 0 6px; margin: 0; border: 0; background: none; color: #000; font-size: 13.3333px; line-height: normal; cursor: pointer; text-align: center; }
.ukvk-widget__close .ukvk-widget__ico { display: inline; vertical-align: baseline; width: 20px; height: 20px; }
.ukvk-widget__back { display: none; align-items: center; padding: 0 6px; margin: 0; border: 0; background: none; color: #fff; font-family: inherit; font-size: 13.3333px; line-height: normal; cursor: pointer; }
.ukvk-widget__back .ukvk-widget__ico { display: block; width: 20px; height: 20px; margin-right: 2px; }
.ukvk-widget__panel:not([data-view="main"]) .ukvk-widget__back { display: flex; }
.ukvk-widget__header { height: 170px; padding: 59px 16px 0; box-sizing: border-box; background: rgb(34, 34, 34); color: #fff; }
.ukvk-widget__header-title { line-height: 22.8px; }
.ukvk-widget__header-first { font-size: 14px; line-height: 20px; font-weight: 400; }
.ukvk-widget__header-second { font-size: 24px; line-height: 32px; font-weight: 700; }
.ukvk-widget__main { margin-top: -30px; }
.ukvk-widget__main-container { padding: 0 12px; }
.ukvk-widget__view[hidden] { display: none; }
.ukvk-widget__section { background: #fff; border: 1px solid rgb(227, 227, 227); border-radius: 12px; padding: 14px 16px; margin: 0; }
.ukvk-widget__section + .ukvk-widget__section { margin-top: 20px; }
.ukvk-widget__login { text-align: center; }
.ukvk-widget__login-title { font-size: 16px; line-height: 24px; font-weight: 600; color: rgb(113, 113, 113); }
.ukvk-widget__login-body { margin: 6px 0 10px; font-size: 14px; line-height: 20px; color: rgb(113, 113, 113); }
.ukvk-widget__join { display: inline-block; width: 100%; box-sizing: border-box; padding: 10px; border: 0; border-radius: 8px; background: var(--ukvk-btn); color: var(--ukvk-btn-text) !important; font-size: 16px; line-height: normal; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; }
.ukvk-widget__join:hover { opacity: .7; }
.ukvk-widget__signin { margin-top: 6px; font-size: 14px; line-height: 20px; color: rgb(113, 113, 113); }
.ukvk-widget__signin-link { color: rgb(0, 0, 238); text-decoration: none; }
.ukvk-widget__row { display: flex; justify-content: space-between; align-items: center; padding: 14px 5px; cursor: pointer; border-radius: 12px; }
.ukvk-widget__row:hover { background: rgb(249, 249, 249); }
.ukvk-widget__row-item { display: flex; align-items: center; }
.ukvk-widget__row-item .ukvk-widget__ico--row { width: 20px; height: 20px; font-size: 20px; flex: 0 0 20px; margin-right: 8px; }
.ukvk-widget__row-item span { display: block; font-size: 14px; line-height: 25.7895px; color: rgb(113, 113, 113); }
.ukvk-widget__ico--chev { width: 25px; height: 25px; font-size: 25px; flex: 0 0 25px; }
.ukvk-widget__referral { padding: 0 2px 14px; }
.ukvk-widget__referral-text span { display: block; font-size: 14px; line-height: 25.7895px; color: rgb(113, 113, 113); }
.ukvk-widget__rewards { padding: 8px; }
.ukvk-widget__reward { display: flex; align-items: center; gap: 10px; }
.ukvk-widget__reward + .ukvk-widget__reward { margin-top: 12px; }
.ukvk-widget__reward-icon { display: block; width: 20px; height: 28px; }
.ukvk-widget__reward-icon .ukvk-widget__ico { display: block; width: 20px; height: 20px; }
.ukvk-widget__reward-info { display: flex; flex-direction: column; }
.ukvk-widget__reward-info span { display: block; font-size: 14px; line-height: 25.7895px; color: rgb(113, 113, 113); }
.ukvk-widget__bottom { padding: 10px 0; height: 0; }
.ukvk-widget__list-title { font-size: 16px; line-height: 29.4737px; font-weight: 600; color: rgb(113, 113, 113); }
.ukvk-widget__list-item { padding: 14px 0; }
.ukvk-widget__list-item + .ukvk-widget__list-item { border-top: 1px solid rgb(240, 240, 240); }
.ukvk-widget__item-content { display: flex; align-items: center; }
.ukvk-widget__item-icon { display: block; width: 25px; height: 25px; line-height: 0; flex: 0 0 25px; margin-right: 12px; }
.ukvk-widget__item-icon .ukvk-widget__ico { display: block; width: 25px; height: 25px; }
.ukvk-widget__item-spacing { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.ukvk-widget__item-detail { display: flex; flex-direction: column; gap: 2px; }
.ukvk-widget__text-primary { font-size: 14px; line-height: 25.7895px; font-weight: 600; color: rgb(113, 113, 113); }
.ukvk-widget__text-subdued { font-size: 14px; line-height: 25.7895px; font-weight: 400; color: rgb(113, 113, 113); }
.ukvk-widget__btn { display: flex; justify-content: center; align-items: center; height: 32px; box-sizing: border-box; padding: 6px 12px; border-radius: 8px; background: var(--ukvk-btn); color: var(--ukvk-btn-text) !important; font-size: 14px; line-height: normal; font-weight: 400; text-decoration: none; white-space: nowrap; }
.ukvk-widget__btn span { display: block; }

@media (max-width: 749px) {
  .ukvk-widget { left: 20px; bottom: 20px; }
  .ukvk-widget__panel { position: fixed; inset: 0; left: 0; bottom: 0; width: auto; height: auto; max-height: none; z-index: 2147483647; }
}

/* ---- My Account ---- */
.ukvk-account__balance { background: var(--ukvk-bg); border-radius: 12px; padding: 22px; text-align: center; margin-bottom: 24px; }
.ukvk-account__num { display: block; font-size: 40px; font-weight: 800; color: var(--ukvk-redeem-btn); line-height: 1.1; }
.ukvk-account__lifetime { opacity: .75; font-size: .9em; margin: 4px 0 0; }
.ukvk-account__reflink { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-family: monospace; }
.ukvk-account__history { width: 100%; }
.ukvk-account__history .ukvk-plus { color: #1a7f37; font-weight: 600; }
.ukvk-account__history .ukvk-minus { color: #b42318; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .ukvk-widget__launcher, .ukvk-widget__cta { transition: none; }
}