/*
 * Connect Loyalty Card Module v1.7.4
 * RESTORED PREMIUM BASELINE
 *
 * This stylesheet intentionally recreates the earlier approved bank-card composition.
 * No page-level dashboard stylesheet should be required for the card to render correctly.
 * Template values remain compatible, but structural experimentation is paused: all templates
 * inherit this approved baseline until a future card-module-only design release.
 */

.cl-card-module,
.cl-card-module *{box-sizing:border-box}
.cl-card-module{width:100%;max-width:100%;min-width:0;display:flex;justify-content:center;align-items:center;isolation:isolate}
.cl-card-shell{width:700px;max-width:100%;min-width:0;flex:0 1 700px;margin:0 auto;perspective:1500px;-webkit-perspective:1500px;container-type:inline-size}
.cl-loyalty-card{position:relative;width:100%;max-width:100%;min-width:0;aspect-ratio:85.60/53.98;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .72s cubic-bezier(.2,.78,.2,1);color:var(--cl-text,#fff);border-radius:32px}
.cl-loyalty-card.is-flipped{transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}
.cl-card-face{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:32px;color:var(--cl-text,#fff);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 25px 60px rgba(20,31,48,.17);font-family:inherit}
.cl-card-front{transform:rotateY(0deg);-webkit-transform:rotateY(0deg);z-index:2}
.cl-card-back{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);z-index:1}

/* Rich theme palettes. Emerald matches the uploaded approved reference. */
.cl-loyalty-card{--cl-base:#181A57;--cl-accent:var(--cl-user-accent,#6657D9);--cl-highlight:color-mix(in srgb,var(--cl-accent) 72%,#fff 28%)}
.cl-loyalty-card.theme-signature{--cl-base:#181A57;--cl-accent:var(--cl-user-accent,#6254D6);--cl-highlight:#8175E6}
.cl-loyalty-card.theme-midnight{--cl-base:#071827;--cl-accent:#0E547D;--cl-highlight:#176F9F}
.cl-loyalty-card.theme-sunset{--cl-base:#571A36;--cl-accent:#C84E60;--cl-highlight:#F58A61}
.cl-loyalty-card.theme-emerald{--cl-base:#083B39;--cl-accent:#2CB787;--cl-highlight:#41BE93}
.cl-loyalty-card.theme-rose{--cl-base:#54314F;--cl-accent:#B76E79;--cl-highlight:#EAB5A7}
.cl-card-bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.cl-card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;mix-blend-mode:soft-light;filter:saturate(1.08) contrast(1.03);z-index:1;pointer-events:none}
.cl-card-art[hidden]{display:none!important}
.cl-card-front>*:not(.cl-card-bg):not(.cl-card-art),.cl-card-back>*:not(.cl-card-bg):not(.cl-card-art){position:relative;z-index:3}

/* Front — exact older information hierarchy, no divider lines. */
.cl-card-front{padding:32px 32px 4px}
.cl-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;height:74px}
.cl-merchant-lockup{display:flex;align-items:center;gap:15px;min-width:0}
.cl-logo-box{width:73px;height:73px;flex:0 0 73px;border-radius:22px;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.cl-logo-box img{width:100%;height:100%;object-fit:contain;padding:10px}
.cl-logo-box span{font-size:21px;line-height:1;font-weight:950;color:#fff}
.cl-logo-box img[hidden],.cl-logo-box span[hidden]{display:none!important}
.cl-merchant-name{min-width:0;padding-top:8px}
.cl-merchant-name small,.cl-cardholder small,.cl-kpis small,.cl-back-info small{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:12px;line-height:1.15;font-weight:500;opacity:.84}
.cl-merchant-name strong{display:block;margin-top:3px;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:24px;line-height:1.05;font-weight:900;color:inherit}
.cl-tier{display:flex;align-items:center;justify-content:center;min-width:108px;height:48px;padding:0 20px;border-radius:24px;background:rgba(255,255,255,.15);font-size:12px;line-height:1;font-weight:950;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:inherit}

.cl-card-tools{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;column-gap:18px;margin-top:22px;height:59px}
.cl-chip{grid-column:1;position:relative;width:84px;height:59px;flex:0 0 84px;border-radius:17px;background:linear-gradient(145deg,#FCE5A0 0%,#E7B957 72%,#D79C34 100%);box-shadow:inset 0 2px 8px rgba(255,255,255,.48),0 4px 10px rgba(0,0,0,.08)}
.cl-chip:before,.cl-chip:after,.cl-chip i:before,.cl-chip i:after{content:"";position:absolute;background:rgba(132,91,19,.27)}
.cl-chip:before{left:30px;top:8px;bottom:8px;width:1px}.cl-chip:after{left:12px;right:12px;top:29px;height:1px}.cl-chip i:before{left:30px;top:16px;width:22px;height:1px}.cl-chip i:after{left:30px;bottom:16px;width:22px;height:1px}
.cl-signature{grid-column:2;justify-self:end;display:flex;align-items:center;justify-content:center;min-width:184px;height:48px;padding:0 22px;border-radius:26px;background:#fff;color:#182033;font-size:12px;line-height:1;font-weight:950;letter-spacing:.075em;text-transform:uppercase;white-space:nowrap;box-shadow:0 5px 14px rgba(11,18,29,.06)}

.cl-member-number{margin-top:25px;white-space:nowrap;font-size:46px;line-height:1;font-weight:900;letter-spacing:.115em;text-shadow:0 2px 12px rgba(0,0,0,.12);font-variant-numeric:tabular-nums}
.cl-cardholder{margin-top:25px}
.cl-cardholder strong{display:block;margin-top:3px;max-width:72%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:23px;line-height:1.05;font-weight:900;color:inherit}

.cl-card-bottom{position:absolute!important;left:32px;right:32px;bottom:4px;height:85px}
.cl-kpis{display:grid;grid-template-columns:1fr 1fr;gap:18px;height:85px}
.cl-kpis[hidden],.cl-next-reward[hidden]{display:none!important}
.cl-kpis>div{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:17px 20px;border:0;border-radius:22px;background:rgba(255,255,255,.115);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.cl-kpis strong{display:block;margin-top:7px;font-size:21px;line-height:1;font-weight:900;color:inherit}
.cl-next-reward{grid-template-columns:1fr!important}
.cl-next-reward>div{grid-column:1/-1}
.cl-progress{display:none!important}

/* Logo watermark from approved old design: subtle lower-right identity only. */
.cl-watermark{position:absolute!important;right:27px;bottom:49px;width:125px;height:125px;display:grid;place-items:center;opacity:.13;z-index:2!important;pointer-events:none}
.cl-watermark img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) brightness(3)}
.cl-watermark span{font-size:88px;line-height:1;font-weight:950;color:#fff}
.cl-watermark img[hidden],.cl-watermark span[hidden]{display:none!important}

/* Back — bank-card inspired, clean and without decorative divider grids. */
.cl-card-back{padding:25px 31px 25px}
.cl-magnetic-strip{height:54px;margin:8px -31px 22px;background:rgba(2,7,15,.78)}
.cl-back-layout{height:calc(100% - 84px);display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;align-items:center}
.cl-qr-panel{display:grid;place-items:center;padding:15px;border-radius:20px;background:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);text-align:center}
.cl-qr-panel img,.cl-demo-qr{width:150px;height:150px;box-sizing:border-box;background:#fff;padding:8px;border-radius:14px}
.cl-qr-panel p{margin:7px 0 0;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;opacity:.9}
.cl-demo-qr{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:3px}.cl-demo-qr i{background:#111827;border-radius:1px}.cl-demo-qr i:nth-child(3n+2),.cl-demo-qr i:nth-child(7n){opacity:.17}
.cl-back-info{display:grid;gap:10px;min-width:0}.cl-back-info>div{padding:13px 16px;border:0;border-radius:15px;background:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.cl-back-info strong{display:block;margin-top:4px;font-size:15px;line-height:1.15;font-weight:900;overflow-wrap:anywhere}.cl-back-info p{margin:2px 3px 0;font-size:10px;line-height:1.35;opacity:.86}.cl-back-info [hidden]{display:none!important}

/* Templates are deliberately normalized to this one approved premium baseline in v1.4.0. */
.cl-loyalty-card.layout-classic,.cl-loyalty-card.layout-luxury,.cl-loyalty-card.layout-modern,.cl-loyalty-card.layout-minimal{--cl-template-restored:1}

/* Owner preview and homepage use the same physical composition, just constrained by their parent. */
.cl-card-preview-module .cl-card-shell,.cl-card-home-module .cl-card-shell{width:700px;max-width:100%}

/* Responsive scaling by card container, preserving exact hierarchy. */
@container (max-width:699px){
  .cl-loyalty-card,.cl-card-face{border-radius:4.55cqw}
  .cl-card-front{padding:4.57cqw 4.57cqw .57cqw}
  .cl-card-header{gap:3.1cqw;height:10.6cqw}.cl-merchant-lockup{gap:2.1cqw}.cl-logo-box{width:10.4cqw;height:10.4cqw;flex-basis:10.4cqw;border-radius:3.1cqw}.cl-logo-box img{padding:1.4cqw}.cl-logo-box span{font-size:3cqw}.cl-merchant-name{padding-top:1.1cqw}.cl-merchant-name small,.cl-cardholder small,.cl-kpis small,.cl-back-info small{font-size:1.7cqw}.cl-merchant-name strong{margin-top:.4cqw;font-size:3.4cqw;max-width:51cqw}.cl-tier{min-width:15.4cqw;height:6.85cqw;padding:0 2.85cqw;border-radius:3.4cqw;font-size:1.7cqw}
  .cl-card-tools{margin-top:3.1cqw;height:8.4cqw}.cl-chip{width:12cqw;height:8.4cqw;flex-basis:12cqw;border-radius:2.4cqw}.cl-chip:before{left:4.3cqw;top:1.1cqw;bottom:1.1cqw}.cl-chip:after{left:1.7cqw;right:1.7cqw;top:4.1cqw}.cl-chip i:before{left:4.3cqw;top:2.3cqw;width:3.1cqw}.cl-chip i:after{left:4.3cqw;bottom:2.3cqw;width:3.1cqw}.cl-signature{min-width:26.3cqw;height:6.85cqw;padding:0 3.1cqw;border-radius:3.7cqw;font-size:1.7cqw}
  .cl-member-number{margin-top:3.6cqw;font-size:6.55cqw;letter-spacing:.115em}.cl-cardholder{margin-top:3.6cqw}.cl-cardholder strong{margin-top:.4cqw;font-size:3.3cqw}
  .cl-card-bottom{left:4.57cqw;right:4.57cqw;bottom:.57cqw;height:12.1cqw}.cl-kpis{gap:2.55cqw;height:12.1cqw}.cl-kpis>div{padding:2.4cqw 2.85cqw;border-radius:3.1cqw}.cl-kpis strong{margin-top:1cqw;font-size:3cqw}
  .cl-watermark{right:3.85cqw;bottom:7cqw;width:17.85cqw;height:17.85cqw}.cl-watermark span{font-size:12.5cqw}
  .cl-card-back{padding:3.55cqw 4.4cqw}.cl-magnetic-strip{height:7.7cqw;margin:1.1cqw -4.4cqw 3.1cqw}.cl-back-layout{height:calc(100% - 12cqw);grid-template-columns:27cqw 1fr;gap:3.4cqw}.cl-qr-panel{padding:2.1cqw;border-radius:2.85cqw}.cl-qr-panel img,.cl-demo-qr{width:21.4cqw;height:21.4cqw;padding:1.1cqw;border-radius:2cqw}.cl-qr-panel p{font-size:1.3cqw}.cl-back-info{gap:1.4cqw}.cl-back-info>div{padding:1.85cqw 2.3cqw;border-radius:2.1cqw}.cl-back-info strong{font-size:2.1cqw}.cl-back-info p{font-size:1.4cqw}
}

/* Mobile containment hotfix v1.4.1
 * Keep the approved desktop card unchanged, but never allow the shell to use
 * intrinsic/nowrap content as its minimum width on a narrow viewport. */
@media screen and (max-width:760px){
  .cl-card-module{width:100%!important;max-width:100%!important;min-width:0!important;margin-inline:auto!important;padding-inline:0!important}
  .cl-card-shell,.cl-card-preview-module .cl-card-shell,.cl-card-home-module .cl-card-shell{
    width:calc(100vw - 24px)!important;
    max-width:100%!important;
    min-width:0!important;
    flex:0 1 auto!important;
    margin-inline:auto!important;
  }
  .cl-loyalty-card,.cl-card-face{max-width:100%!important;min-width:0!important}
  .cl-merchant-lockup,.cl-merchant-name,.cl-cardholder,.cl-kpis>div,.cl-back-info{min-width:0!important}
}


/* Print / PDF keeps true bank-card dimensions and both faces. */
@media print{
  .cl-card-module{display:block!important;width:100%!important;max-width:none!important}.cl-card-shell{display:block!important;width:85.6mm!important;max-width:none!important;margin:0 auto!important;perspective:none!important}.cl-loyalty-card,.cl-loyalty-card.is-flipped{display:block!important;width:85.6mm!important;height:auto!important;aspect-ratio:auto!important;transform:none!important;-webkit-transform:none!important}.cl-card-face{display:block!important;position:relative!important;inset:auto!important;width:85.6mm!important;height:53.98mm!important;transform:none!important;-webkit-transform:none!important;backface-visibility:visible!important;-webkit-backface-visibility:visible!important;margin:0 auto 8mm!important;box-shadow:none!important;page-break-inside:avoid!important;break-inside:avoid!important;border-radius:4mm!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.cl-card-front{padding:3.9mm 3.9mm .5mm!important}.cl-card-header{height:9mm!important}.cl-logo-box{width:9mm!important;height:9mm!important;flex-basis:9mm!important;border-radius:2.5mm!important}.cl-logo-box img{padding:1.2mm!important}.cl-merchant-name small,.cl-cardholder small,.cl-kpis small{font-size:1.45mm!important}.cl-merchant-name strong{font-size:3mm!important}.cl-tier{height:6mm!important;min-width:14mm!important;font-size:1.4mm!important}.cl-card-tools{margin-top:2.7mm!important;height:7.2mm!important}.cl-chip{width:10.3mm!important;height:7.2mm!important;flex-basis:10.3mm!important}.cl-signature{height:6mm!important;min-width:22mm!important;font-size:1.4mm!important}.cl-member-number{margin-top:3mm!important;font-size:5.55mm!important}.cl-cardholder{margin-top:3mm!important}.cl-cardholder strong{font-size:2.8mm!important}.cl-card-bottom{left:3.9mm!important;right:3.9mm!important;bottom:.5mm!important;height:10.4mm!important}.cl-kpis{height:10.4mm!important;gap:2.2mm!important}.cl-kpis>div{padding:2mm 2.4mm!important;border-radius:2.6mm!important}.cl-kpis strong{font-size:2.6mm!important}.cl-watermark{right:3.3mm!important;bottom:6mm!important;width:15mm!important;height:15mm!important}.cl-card-back{padding:3.3mm 3.8mm!important}.cl-magnetic-strip{height:7mm!important;margin:1mm -3.8mm 3mm!important}.cl-back-layout{height:calc(100% - 11mm)!important;grid-template-columns:23mm 1fr!important;gap:3mm!important}.cl-qr-panel img,.cl-demo-qr{width:19mm!important;height:19mm!important}.cl-back-info>div{padding:1.4mm 1.8mm!important}.cl-back-info strong{font-size:1.9mm!important}
}

/* v1.5.0: a loyalty card is a fixed physical-card surface. Page locale must never mirror its composition. */
.cl-card-module,.cl-loyalty-card,.cl-card-face{direction:ltr!important;text-align:left!important;unicode-bidi:isolate}.cl-card-header,.cl-card-tools,.cl-card-bottom,.cl-back-layout{direction:ltr!important}.cl-merchant-name strong,.cl-cardholder strong,[data-cl-reward-name],[data-cl-reward-name-back]{unicode-bidi:plaintext}

/* Card Module 1.6.0 — optional customer date of birth on the protected card front. */
.cl-card-dob{display:flex;align-items:baseline;gap:7px;margin-top:5px;max-width:72%;font-size:12px;line-height:1;color:inherit;opacity:.92}.cl-card-dob small{display:inline!important;font-size:10px!important;letter-spacing:.07em!important;opacity:.72}.cl-card-dob b{font-size:12px;font-weight:800;white-space:nowrap}@container (max-width:699px){.cl-card-dob{gap:1cqw;margin-top:.7cqw;font-size:1.7cqw}.cl-card-dob small{font-size:1.35cqw!important}.cl-card-dob b{font-size:1.7cqw}}@media print{.cl-card-dob{gap:1mm!important;margin-top:.8mm!important;font-size:1.5mm!important}.cl-card-dob small{font-size:1.15mm!important}.cl-card-dob b{font-size:1.5mm!important}}

/* Card Module 1.6.1 — balance and available rewards can be controlled independently. */
.cl-kpis.cl-kpis-single{grid-template-columns:1fr!important}
.cl-kpis.cl-kpis-single>div:not([hidden]){grid-column:1/-1}
.cl-kpis[data-cl-kpis][hidden]{display:none!important}

/* Phase 10.4.5 — independent card visibility hardening */
.cl-kpis>[hidden],
.cl-back-info>[hidden]{display:none!important}

/* Card Module 1.7.0 — Card Branding + Membership Tiers */
.cl-chip[hidden]{display:none!important}

/* Compact KPI rail: fixed lower-right slots. Hiding one value never stretches the other. */
.cl-cardholder strong{max-width:58%}
.cl-card-bottom{left:auto!important;right:32px!important;bottom:22px!important;width:310px!important;height:58px!important}
.cl-kpis{grid-template-columns:150px 150px!important;gap:10px!important;height:58px!important;justify-content:end}
.cl-kpis>div{min-width:0;height:58px!important;padding:10px 14px!important;border-radius:16px!important;justify-content:center}
.cl-kpis>[data-cl-balance-block]{grid-column:1!important}
.cl-kpis>[data-cl-rewards-block]{grid-column:2!important}
.cl-kpis small{font-size:9px!important;letter-spacing:.075em!important}
.cl-kpis strong{margin-top:4px!important;font-size:17px!important}
.cl-kpis.cl-kpis-single{grid-template-columns:150px 150px!important}
.cl-kpis.cl-kpis-single>div:not([hidden]){grid-column:auto!important}

/* Card Module 1.7.1 — premium templates restored and stabilized.
 * Theme = palette. Template = geometric/material character.
 * Core identity/data anchors NEVER move between templates. This prevents overflow
 * and preserves the bank-card hierarchy on screen and in physical printing. */
.cl-loyalty-card.layout-classic{--cl-template-geometry:classic}
.cl-loyalty-card.layout-luxury{--cl-template-geometry:luxury}
.cl-loyalty-card.layout-modern{--cl-template-geometry:modern}
.cl-loyalty-card.layout-minimal{--cl-template-geometry:minimal}

/* Luxury Signature: monochrome/branded premium material without relocating data. */
.cl-loyalty-card.layout-luxury .cl-card-face{border-radius:31px;box-shadow:0 31px 72px rgba(15,23,42,.23)}
.cl-loyalty-card.layout-luxury .cl-card-face:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 78% 5%,color-mix(in srgb,var(--cl-highlight) 24%,transparent),transparent 33%),linear-gradient(118deg,rgba(0,0,0,.16),transparent 50%,rgba(255,255,255,.035))}
.cl-loyalty-card.layout-luxury .cl-logo-box{border-radius:50%}
.cl-loyalty-card.layout-luxury .cl-tier{background:rgba(8,10,14,.17);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cl-highlight) 36%,transparent)}
.cl-loyalty-card.layout-luxury .cl-signature{background:rgba(10,12,16,.18);color:var(--cl-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cl-highlight) 32%,transparent)}
.cl-loyalty-card.layout-luxury .cl-kpis>div{background:rgba(5,8,14,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* Modern Dynamic: sharper material language; data positions remain identical to Classic. */
.cl-loyalty-card.layout-modern .cl-card-face{border-radius:24px}
.cl-loyalty-card.layout-modern .cl-logo-box{border-radius:13px}
.cl-loyalty-card.layout-modern .cl-tier{border-radius:13px;background:rgba(255,255,255,.93);color:#172033;text-shadow:none}
.cl-loyalty-card.layout-modern .cl-signature{border-radius:12px;background:#fff;color:#172033;box-shadow:5px 5px 0 rgba(0,0,0,.08)}
.cl-loyalty-card.layout-modern .cl-chip{border-radius:10px}
.cl-loyalty-card.layout-modern .cl-kpis>div{border-radius:14px;background:rgba(255,255,255,.16);box-shadow:inset 4px 0 0 rgba(255,255,255,.42)}

/* Minimal Premium: almost-monochrome presentation derived from the selected theme. */
.cl-loyalty-card.layout-minimal .cl-card-face{border-radius:26px;box-shadow:0 24px 58px rgba(15,23,42,.16)}
.cl-loyalty-card.layout-minimal .cl-watermark{display:none!important}
.cl-loyalty-card.layout-minimal .cl-card-art{opacity:.08;mix-blend-mode:normal}
.cl-loyalty-card.layout-minimal .cl-logo-box{border-radius:15px;background:rgba(255,255,255,.09);box-shadow:none}
.cl-loyalty-card.layout-minimal .cl-tier{background:rgba(255,255,255,.10);box-shadow:none}
.cl-loyalty-card.layout-minimal .cl-signature{background:rgba(255,255,255,.10);color:var(--cl-text);border:1px solid rgba(255,255,255,.20);box-shadow:none}
.cl-loyalty-card.layout-minimal .cl-kpis>div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);box-shadow:none;backdrop-filter:none}

/* Logo-safe branding: a real merchant/card logo is presented on a clean plate and is
 * never reused as a large blurred watermark over the geometric design. */
.cl-loyalty-card.has-card-logo .cl-logo-box{background:linear-gradient(145deg,#fff,#f3f5f8)!important;border:1px solid rgba(15,23,42,.08)!important;box-shadow:0 8px 22px rgba(8,15,28,.13),inset 0 1px 0 #fff!important}
.cl-loyalty-card.has-card-logo .cl-logo-box img{padding:8px!important;filter:none!important;mix-blend-mode:normal!important;opacity:1!important}
.cl-loyalty-card.has-card-logo .cl-watermark{display:none!important}

/* Chip and signature are independent physical-card slots. Hiding the chip leaves its
 * slot empty; LOYALTY SIGNATURE remains anchored to the right. */
.cl-card-tools{grid-template-columns:84px minmax(0,1fr)!important;column-gap:18px!important}
.cl-card-tools .cl-chip{grid-column:1!important}
.cl-card-tools .cl-signature{grid-column:2!important;justify-self:end!important}

/* Membership packages retain merchant colors while adding unmistakable premium tier treatment. */
.cl-loyalty-card.tier-style-silver .cl-card-face{box-shadow:inset 0 0 0 2px rgba(226,232,240,.72),0 25px 60px rgba(20,31,48,.17)}
.cl-loyalty-card.tier-style-silver .cl-tier{background:linear-gradient(135deg,#F8FAFC,#CBD5E1);color:#1F2937;text-shadow:none}
.cl-loyalty-card.tier-style-silver .cl-signature{box-shadow:0 0 0 1px rgba(226,232,240,.45),0 5px 14px rgba(11,18,29,.06)}
.cl-loyalty-card.tier-style-gold .cl-card-face{box-shadow:inset 0 0 0 2px rgba(244,199,94,.78),0 25px 60px rgba(20,31,48,.19)}
.cl-loyalty-card.tier-style-gold .cl-tier{background:linear-gradient(135deg,#FFF0B3,#D9A62E);color:#3A2A09;text-shadow:none}
.cl-loyalty-card.tier-style-gold .cl-signature{box-shadow:0 0 0 1px rgba(238,197,82,.48),0 5px 14px rgba(11,18,29,.07)}
.cl-loyalty-card.tier-style-vip .cl-card-face{box-shadow:inset 0 0 0 2px rgba(211,183,255,.72),0 26px 66px rgba(10,5,28,.25)}
.cl-loyalty-card.tier-style-vip .cl-tier{background:linear-gradient(135deg,#191328,#51377A 55%,#B699E8);color:#fff;border:1px solid rgba(255,255,255,.28);text-shadow:0 1px 8px rgba(0,0,0,.32)}
.cl-loyalty-card.tier-style-vip .cl-signature{background:#171120;color:#fff;border:1px solid rgba(255,255,255,.20)}

@container (max-width:699px){
  .cl-cardholder strong{max-width:58%}
  .cl-card-bottom{right:4.57cqw!important;bottom:3.15cqw!important;width:44.3cqw!important;height:8.3cqw!important}
  .cl-kpis{grid-template-columns:21.4cqw 21.4cqw!important;gap:1.45cqw!important;height:8.3cqw!important}
  .cl-kpis>div{height:8.3cqw!important;padding:1.3cqw 1.7cqw!important;border-radius:2.2cqw!important}
  .cl-kpis small{font-size:1.28cqw!important}.cl-kpis strong{margin-top:.55cqw!important;font-size:2.42cqw!important}
}

@media print{
  .cl-cardholder strong{max-width:58%!important}
  .cl-card-bottom{left:auto!important;right:3.9mm!important;bottom:3mm!important;width:38mm!important;height:7.2mm!important}
  .cl-kpis{grid-template-columns:18.5mm 18.5mm!important;gap:1mm!important;height:7.2mm!important}
  .cl-kpis>div{height:7.2mm!important;padding:1.15mm 1.5mm!important;border-radius:1.8mm!important}
  .cl-kpis small{font-size:1.05mm!important}.cl-kpis strong{margin-top:.45mm!important;font-size:2.15mm!important}
}


/* Card Module 1.7.1 responsive/print stabilization */
@container (max-width:699px){
  .cl-card-tools{grid-template-columns:12cqw minmax(0,1fr)!important;column-gap:2.55cqw!important}
  .cl-loyalty-card.layout-modern .cl-card-header,.cl-loyalty-card.layout-modern .cl-card-tools,.cl-loyalty-card.layout-modern .cl-member-number,.cl-loyalty-card.layout-modern .cl-cardholder{margin-left:0!important}
}
@media print{
  .cl-card-tools{grid-template-columns:10.3mm minmax(0,1fr)!important;column-gap:2.2mm!important}
  .cl-loyalty-card.layout-modern .cl-card-header,.cl-loyalty-card.layout-modern .cl-card-tools,.cl-loyalty-card.layout-modern .cl-member-number,.cl-loyalty-card.layout-modern .cl-cardholder{margin-left:0!important}
  .cl-loyalty-card.has-card-logo .cl-logo-box img{padding:1.1mm!important}
}

/* Card Module 1.7.2 — live premium template engine + branding-safe geometry.
 * All geometric groups are present in the SVG and switched by layout class.
 * This makes the live preview and saved card identical and prevents stale server-rendered geometry. */
.cl-bg-template{display:none}
.cl-loyalty-card.layout-classic .cl-bg-classic{display:block}
.cl-loyalty-card.layout-luxury .cl-bg-luxury{display:block}
.cl-loyalty-card.layout-modern .cl-bg-modern{display:block}
.cl-loyalty-card.layout-minimal .cl-bg-minimal{display:block}

/* Luxury and Minimal deliberately normalize toward the merchant brand color,
 * recreating the earlier premium one-color behavior while Theme remains the palette selector. */
.cl-loyalty-card.layout-luxury{
  --cl-base:color-mix(in srgb,var(--cl-brand,#5B4CF0) 58%,#101624 42%);
  --cl-accent:color-mix(in srgb,var(--cl-brand,#5B4CF0) 82%,#fff 18%);
  --cl-highlight:color-mix(in srgb,var(--cl-brand,#5B4CF0) 56%,#fff 44%);
}
.cl-loyalty-card.layout-minimal{
  --cl-base:color-mix(in srgb,var(--cl-brand,#5B4CF0) 72%,#101624 28%);
  --cl-accent:color-mix(in srgb,var(--cl-brand,#5B4CF0) 84%,#fff 16%);
  --cl-highlight:color-mix(in srgb,var(--cl-brand,#5B4CF0) 42%,#fff 58%);
}

/* Keep a clean brand-safe zone. Template geometry is intentionally concentrated
 * on the right/lower card area; a real logo gets a crisp neutral plate and never a watermark. */
.cl-loyalty-card.has-card-logo .cl-logo-box{
  background:#fff!important;
  border:1px solid rgba(15,23,42,.08)!important;
  box-shadow:0 7px 18px rgba(8,15,28,.14),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.cl-loyalty-card.has-card-logo .cl-logo-box img{object-fit:contain!important;padding:7px!important;filter:none!important;opacity:1!important;mix-blend-mode:normal!important}
.cl-loyalty-card.has-card-logo .cl-watermark{display:none!important}

/* Chip and signature are hard-independent slots. Removing the chip never reflows signature. */
.cl-card-tools{grid-template-columns:84px minmax(0,1fr)!important;grid-template-areas:"chip signature"!important}
.cl-card-tools .cl-chip{grid-area:chip!important}
.cl-card-tools .cl-signature{grid-area:signature!important;justify-self:end!important;margin:0!important;transform:none!important}
.cl-card-tools .cl-chip[hidden]{display:none!important}

@container (max-width:699px){
  .cl-card-tools{grid-template-columns:12cqw minmax(0,1fr)!important;grid-template-areas:"chip signature"!important}
}
@media print{
  .cl-card-tools{grid-template-columns:10.3mm minmax(0,1fr)!important;grid-template-areas:"chip signature"!important}
}


/* Card Module 1.7.3 — continuous scaling + premium custom artwork modes.
 * The card uses proportional container units for every width below the 700px design master.
 * This closes the previous 561–699px desktop-preview gap without changing the 700px customer card. */
.cl-card-preview-module .cl-card-shell{width:700px;max-width:100%;min-width:0}

/* Custom artwork modes.
 * overlay = backwards-compatible subtle texture.
 * brand   = a crisp contained logo/brand mark on a clean surface, ideal for merchant logos.
 * full    = true edge-to-edge artwork with an automatic contrast veil for legible card data. */
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-bg-template{opacity:.10}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-card-art{
  inset:7% 5% 7% 36%;width:59%;height:86%;object-fit:contain;object-position:center;
  opacity:.20;mix-blend-mode:normal;filter:none
}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-card-art-back{
  inset:10% 9%;width:82%;height:80%;opacity:.12
}
.cl-loyalty-card.artwork-mode-full.has-card-artwork .cl-bg-template{display:none!important}
.cl-loyalty-card.artwork-mode-full.has-card-artwork .cl-card-art{
  inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:1;mix-blend-mode:normal;filter:none
}
.cl-loyalty-card.artwork-mode-full.has-card-artwork .cl-card-face:before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,10,20,.48) 0%,rgba(5,10,20,.30) 48%,rgba(5,10,20,.18) 100%)
}
.cl-loyalty-card.artwork-mode-full.has-card-artwork .cl-card-back:before{
  background:linear-gradient(90deg,rgba(5,10,20,.34),rgba(5,10,20,.24))
}
.card-artwork-mode-control{margin-top:12px;padding-top:12px;border-top:1px solid rgba(148,163,184,.18)}
.card-artwork-mode-control small{display:block;margin-top:5px;color:var(--muted)}

/* Card Module 1.7.4 — authoritative premium card controls.
 * - Owner desktop preview scales the complete 700px master card as a single physical surface.
 * - Card color is independent from site Brand color and visibly drives every palette.
 * - Brand Surface is a genuine split-layout redesign for merchant logo/artwork, not a translucent overlay.
 */
.cl-card-scale-frame{width:100%;max-width:100%;min-width:0;display:flex;justify-content:center;align-items:flex-start}

/* The Settings preview is not reflowed. It is a scaled copy of the exact 700px master card.
 * This avoids medium-desktop typography overflow and keeps it identical to the real card. */
.cl-card-preview-module .cl-card-scale-frame{
  position:relative;width:min(700px,100%);max-width:700px;aspect-ratio:85.60/53.98;overflow:hidden;margin-inline:auto
}
.cl-card-preview-module .cl-card-shell{
  position:absolute!important;top:0;left:50%;width:700px!important;max-width:none!important;min-width:700px!important;
  flex:0 0 700px!important;margin:0!important;transform:translateX(-50%) scale(var(--cl-preview-scale,1));
  transform-origin:top center!important
}

/* One explicit Card color control now affects every theme. The website Brand color is only its fallback. */
.cl-loyalty-card{--cl-card-color:var(--cl-user-accent,var(--cl-brand,#5B4CF0))}
.cl-loyalty-card.theme-signature{
  --cl-base:color-mix(in srgb,var(--cl-card-color) 34%,#151744 66%);
  --cl-accent:var(--cl-card-color);
  --cl-highlight:color-mix(in srgb,var(--cl-card-color) 62%,#fff 38%)
}
.cl-loyalty-card.theme-midnight{
  --cl-base:color-mix(in srgb,var(--cl-card-color) 14%,#061827 86%);
  --cl-accent:color-mix(in srgb,var(--cl-card-color) 72%,#0E547D 28%);
  --cl-highlight:color-mix(in srgb,var(--cl-card-color) 58%,#7DD3FC 42%)
}
.cl-loyalty-card.theme-sunset{
  --cl-base:color-mix(in srgb,var(--cl-card-color) 30%,#571A36 70%);
  --cl-accent:var(--cl-card-color);
  --cl-highlight:color-mix(in srgb,var(--cl-card-color) 56%,#FDBA74 44%)
}
.cl-loyalty-card.theme-emerald{
  --cl-base:color-mix(in srgb,var(--cl-card-color) 24%,#073B38 76%);
  --cl-accent:var(--cl-card-color);
  --cl-highlight:color-mix(in srgb,var(--cl-card-color) 58%,#A7F3D0 42%)
}
.cl-loyalty-card.theme-rose{
  --cl-base:color-mix(in srgb,var(--cl-card-color) 30%,#53314D 70%);
  --cl-accent:var(--cl-card-color);
  --cl-highlight:color-mix(in srgb,var(--cl-card-color) 55%,#FBCFE8 45%)
}
/* Templates that normalize to one-color branding must use Card color, never the website brand color. */
.cl-loyalty-card.layout-luxury{
  --cl-base:color-mix(in srgb,var(--cl-card-color) 58%,#101624 42%);
  --cl-accent:color-mix(in srgb,var(--cl-card-color) 82%,#fff 18%);
  --cl-highlight:color-mix(in srgb,var(--cl-card-color) 56%,#fff 44%)
}
.cl-loyalty-card.layout-minimal{
  --cl-base:color-mix(in srgb,var(--cl-card-color) 72%,#101624 28%);
  --cl-accent:color-mix(in srgb,var(--cl-card-color) 84%,#fff 16%);
  --cl-highlight:color-mix(in srgb,var(--cl-card-color) 42%,#fff 58%)
}

/* PREMIUM BRAND SURFACE
 * Uploaded logo/artwork becomes a dedicated brand panel, with preset geometry removed.
 * This is intentionally a different composition, not an image blended underneath the card color. */
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-bg-template{display:none!important}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-card-face{
  background:linear-gradient(135deg,color-mix(in srgb,var(--cl-card-color) 32%,#101827 68%),color-mix(in srgb,var(--cl-card-color) 52%,#101827 48%))
}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-card-front:after{
  content:"";position:absolute;z-index:1;top:0;right:0;width:34%;height:100%;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(245,247,251,.94));
  border-left:1px solid rgba(255,255,255,.36);box-shadow:-22px 0 54px rgba(5,12,24,.12)
}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-card-art{
  z-index:2;inset:86px 28px auto auto;width:27%;height:126px;object-fit:contain;object-position:center;
  padding:12px;opacity:1;mix-blend-mode:normal;filter:none;background:transparent
}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-card-art-back{
  inset:50%;width:42%;height:42%;transform:translate(-50%,-50%);padding:12px;opacity:.96
}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-merchant-lockup{max-width:61%}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-merchant-name strong{max-width:260px}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-tier{
  position:relative;z-index:4;background:#172033;color:#fff;box-shadow:0 8px 18px rgba(15,23,42,.16)
}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-card-tools{
  grid-template-columns:84px 184px!important;justify-content:start!important;width:61%
}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-card-tools .cl-signature{justify-self:start!important}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-member-number{
  max-width:62%;font-size:31px;letter-spacing:.09em;overflow:hidden;text-overflow:clip
}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-cardholder{max-width:60%}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-cardholder strong{max-width:100%}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-card-bottom{
  right:20px!important;bottom:20px!important;width:218px!important;height:56px!important;z-index:4!important
}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-kpis{
  grid-template-columns:104px 104px!important;gap:8px!important;height:56px!important
}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-kpis>div{
  height:56px!important;padding:9px 10px!important;background:rgba(23,32,51,.92)!important;color:#fff!important;border-radius:14px!important
}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-kpis small{font-size:8px!important}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-kpis strong{font-size:16px!important}
.cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-watermark{display:none!important}

/* Full artwork remains truly edge-to-edge and suppresses all preset template geometry. */
.cl-loyalty-card.artwork-mode-full.has-card-artwork .cl-bg-template{display:none!important}
.cl-loyalty-card.artwork-mode-full.has-card-artwork .cl-card-art{opacity:1!important;mix-blend-mode:normal!important;filter:none!important}

@media print{
  .cl-card-preview-module .cl-card-shell{transform:none!important}
  .cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-card-art{top:10.5mm!important;right:3.4mm!important;width:23mm!important;height:15.5mm!important;padding:1.5mm!important}
  .cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-member-number{font-size:3.8mm!important;max-width:54mm!important}
  .cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-card-bottom{right:2.5mm!important;bottom:2.5mm!important;width:27mm!important;height:7mm!important}
  .cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-kpis{grid-template-columns:13mm 13mm!important;gap:1mm!important;height:7mm!important}
  .cl-loyalty-card.artwork-mode-brand.has-card-artwork .cl-kpis>div{height:7mm!important;padding:1mm!important}
}