/* Offer banner of a coupon (partial inc_coupon_banner_card). Used on the home page and in the admin Coupons screens.
   The fonts are set here so the banner looks the same outside the .hp-page theme. */
.cb{ --serif:'Playfair Display', Georgia, 'Times New Roman', serif; --sans:'Inter', 'Raleway', Arial, Helvetica, sans-serif; font-family:var(--sans); box-sizing:border-box;}
.cb *, .cb *:before, .cb *:after{ box-sizing:border-box;}
.cb{
	--cb-bg:radial-gradient(120% 160% at 0% 0%, #14507f 0%, #0a2a45 62%); --cb-accent:#f1b93a; --cb-accent-2:#fbe08a; --cb-ink:#2a1d00;
	position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:0 32px;
	padding:22px 30px; overflow:hidden; border-radius:18px; color:#fff;
	background:var(--cb-bg);
	box-shadow:0 10px 30px rgba(10,42,69,.22);
}
/* soft shapes for depth, no images needed */
.cb:before, .cb:after{ content:''; position:absolute; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.06);}
.cb:before{ width:260px; height:260px; left:-70px; top:-120px;}
.cb:after{ width:200px; height:200px; right:26%; bottom:-120px; background:rgba(255,255,255,.05);}
.cb > *{ position:relative; z-index:1;}
/* the lighter tone of the accent colour (top of the pill) is worked out from the accent itself */
@supports (color:color-mix(in srgb, red, white)){ .cb{ --cb-accent-2:color-mix(in srgb, var(--cb-accent) 55%, #fff);} }
/* patterns */
.cb-art{ position:absolute !important; inset:0; z-index:0 !important; pointer-events:none;}
.cb--confetti .cb-art{
	background-image:
		radial-gradient(circle, #f6c453 0 3px, transparent 4px), radial-gradient(circle, #ffffff 0 2px, transparent 3px),
		radial-gradient(circle, #ff6b6b 0 3px, transparent 4px), radial-gradient(circle, #5ee0a0 0 2px, transparent 3px);
	background-size:97px 61px, 73px 83px, 131px 79px, 89px 107px;
	background-position:12px 8px, 40px 30px, 70px 12px, 5px 50px;
	opacity:.55;
}
.cb--stripes .cb-art{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 16px, transparent 16px 32px);}
.cb-title{ display:grid; gap:4px; max-width:380px; padding-right:32px; border-right:1px solid rgba(255,255,255,.28);}
.cb-kicker{ font:700 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--cb-accent-2);}
.cb-title strong{ font:600 34px/1.05 var(--serif); letter-spacing:-.01em; color:#fff;}
.cb-text{ margin:0; font:500 17px/1.45 var(--sans); color:rgba(255,255,255,.92);}
.cb-offer{ display:grid; justify-items:center; gap:10px;}
.cb-pill{
	display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:6px 10px; padding:12px 26px; border-radius:999px;
	background:linear-gradient(180deg, var(--cb-accent-2), var(--cb-accent)); color:var(--cb-ink);
	font:500 14px/1.2 var(--sans); box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.cb-code{
	position:relative; display:inline-flex; align-items:center; gap:7px; margin:0; padding:5px 11px; border:1px dashed rgba(42,29,0,.55); border-radius:8px;
	background:rgba(255,255,255,.45); color:var(--cb-ink); font:800 14px/1 var(--sans); letter-spacing:.08em; cursor:pointer; transition:background .15s;
}
.cb-code:hover{ background:rgba(255,255,255,.75);}
.cb-code i{ font-size:13px; opacity:.7;}
.cb-code.is-copied:after{ content:'Copied!'; position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); padding:5px 10px; border-radius:6px; background:var(--cb-ink); color:#fff; font:600 11px/1 var(--sans); letter-spacing:0; white-space:nowrap;}
.cb-off{ font:800 24px/1 var(--sans); letter-spacing:.01em;}
.cb-cta{ margin-top:5px; color:#fff; font:600 14px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; opacity:.92;}
.cb-cta:hover{ color:var(--cb-accent-2); text-decoration:none; opacity:1;}
.cb-cta i{ margin-left:4px; transition:transform .2s;}
.cb-cta:hover i{ transform:translateX(4px);}
.cb-code:focus-visible, .cb-cta:focus-visible{ outline:3px solid #fff; outline-offset:3px;}

@media (max-width:991px){
	.cb{ grid-template-columns:minmax(0,1fr) auto; gap:16px 20px; padding:20px 22px;}
	.cb-title{ max-width:none; padding-right:0; border-right:0;}
	.cb-text{ grid-column:1; grid-row:2;}
	.cb-offer{ grid-column:2; grid-row:1 / 3;}
}
@media (max-width:767px){
	.cb{ grid-template-columns:minmax(0,1fr); text-align:center; border-radius:14px; padding:20px 16px;}
	.cb-title{ justify-items:center;}
	.cb-title strong{ font-size:28px;}
	.cb-text{ grid-column:1; grid-row:auto; font-size:15px;}
	.cb-text br{ display:none;}
	.cb-offer{ grid-column:1; grid-row:auto;}
	.cb-pill{ padding:12px 18px;}
}

/* narrow card version (the member dashboard): everything stacked in the middle, same look as on a phone */
.cb.cb--stack{ grid-template-columns:minmax(0,1fr); align-content:center; gap:14px; padding:22px 16px; border-radius:14px; text-align:center;}
.cb.cb--stack .cb-title{ justify-items:center; max-width:none; padding-right:0; border-right:0;}
.cb.cb--stack .cb-title strong{ font-size:26px;}
.cb.cb--stack .cb-text{ grid-column:1; grid-row:auto; font-size:14px;}
.cb.cb--stack .cb-text br{ display:none;}
.cb.cb--stack .cb-offer{ grid-column:1; grid-row:auto;}
.cb.cb--stack .cb-pill{ padding:10px 14px;}
.cb.cb--stack .cb-off{ font-size:21px;}