/**
 * Loyalty card pop-up (template-parts/loyalty-modal.php) away from the landing page.
 * Opened on the homepage by the email deep links #loyalty-card, #lost-card and
 * ?details=1#update-details (assets/js/kk-loyalty-modal.js).
 * The rules below are copied from kk-coming-back.css (confirm modal + loyalty pop-up);
 * keep the two in step.
 */
#kk-cb-loyalty {
	--cb-ink: #2B1E12;
	--cb-muted: rgba(43, 30, 18, 0.66);
	--cb-line: rgba(43, 30, 18, 0.14);
	--cb-surface: #ffffff;
	--cb-surface-2: #F7F3EC;
	--cb-gold: #C9A75A;
	--cb-gold-text: #B8923D;
	--cb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	z-index: 10050;
}
@keyframes cb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cb-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

.kk-cb__modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.kk-cb__modal[hidden] { display: none; }
.kk-cb__modal-back { position: absolute; inset: 0; background: rgba(20, 13, 7, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: cb-fade-in 0.25s ease both; }
.kk-cb__modal-box {
	position: relative;
	width: min(100%, 440px);
	padding: 30px 28px 26px;
	border-radius: 20px;
	background: var(--cb-surface);
	color: var(--cb-ink);
	border: 1px solid var(--cb-line);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
	animation: cb-modal-in 0.35s var(--cb-ease) both;
}
.kk-cb__modal-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--cb-muted); font-size: 26px; line-height: 1; cursor: pointer; }
.kk-cb__modal-x:hover { color: var(--cb-ink); background: var(--cb-surface-2); }
body.kk-cb-modal-open { overflow: hidden; }

/* ---- the pop-up itself: a white card that flips between Sign up (front) and Lost card (back) ---- */
.kk-cb__loyalty { display: block; overflow-y: auto; overscroll-behavior: contain; padding: 28px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; }
.kk-cb__loyalty::-webkit-scrollbar { width: 8px; }
.kk-cb__loyalty::-webkit-scrollbar-track { background: transparent; }
.kk-cb__loyalty::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 999px; }
.kk-cb__loyalty .kk-cb__modal-back { position: fixed; }
.kk-cb__loyalty .kk-cb__modal-box { width: min(100%, 760px); margin: 0 auto; padding: 0; background: #fff; color: #3d2a16; border: 0; border-radius: 24px; }
.kk-cb__loyalty .kk-cb__modal-x { z-index: 3; top: 14px; right: 16px; color: #A89A86; background: transparent; box-shadow: none; font-size: 30px; font-weight: 300; }
.kk-cb__loyalty .kk-cb__modal-x:hover, .kk-cb__loyalty .kk-cb__modal-x:focus { background: transparent; color: #2B1E12; }
.kk-cb__loyalty .kk-loyalty-signup { padding: 0; background: none; }

/* header */
.kk-lm__head { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 22px; row-gap: 18px; align-items: center; padding: 30px 36px 22px; background: linear-gradient(180deg, #F7F3EC, #fff); border-bottom: 1px solid #ECE5D8; }
/* the card + fob, the same pair as on the page, small */
.kk-lm__set { position: relative; grid-row: 1 / 3; width: 140px; aspect-ratio: 1.2; perspective: 700px; }
.kk-lm__pair { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.9s var(--cb-ease); }
.kk-lm__set.is-live .kk-lm__pair { transition: transform 0.12s linear; }
.kk-lm__card { position: absolute; left: 0; top: 6%; width: 82%; height: auto; transform: translateZ(6px) rotate(-5deg); filter: drop-shadow(0 12px 20px rgba(43, 30, 18, 0.28)); }
.kk-lm__fob { position: absolute; right: -4%; bottom: -2%; width: 52%; height: auto; transform: translateZ(34px) rotate(8deg); filter: drop-shadow(0 10px 16px rgba(43, 30, 18, 0.32)); }
.kk-lm__head-text { min-width: 0; padding-right: 40px; }
.kk-lm__kicker { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #B8923D; }
.kk-lm__title { margin: 0 0 6px; font-family: "Poppins", sans-serif; font-size: clamp(24px, 3.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: #2B1E12; }
.kk-lm__lede { margin: 0; font-size: 14px; line-height: 1.55; color: #7a6a56; }
/* the switch: a two-segment pill, gold thumb slides to the active side */
.kk-cb__loyalty .kk-loyalty-tabs.kk-lm__switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: #EFE9DE; justify-self: start; }
.kk-cb__loyalty .kk-lm__switch::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #C9A75A; box-shadow: 0 4px 12px rgba(43, 30, 18, 0.18); transition: transform 0.45s var(--cb-ease); }
.kk-cb__loyalty .kk-lm__switch.is-back::before { transform: translateX(100%); }
.kk-cb__loyalty .kk-lm__switch .kk-loyalty-tab { position: relative; z-index: 1; min-width: 124px !important; padding: 9px 20px !important; font-family: "Poppins", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: #7a6a56 !important; border-radius: 999px !important; transition: color 0.3s; }
.kk-cb__loyalty .kk-lm__switch .kk-loyalty-tab--active { color: #2B1E12 !important; }
.kk-cb__loyalty .kk-lm__switch .kk-loyalty-tab::after { content: none; }
.kk-cb__loyalty .kk-lm__switch .kk-loyalty-tab:focus-visible { outline: 2px solid #B8923D; outline-offset: 2px; }

/* the flip */
/* "Update your details" face: only rendered for the opening-email link (?details=1); replaces the flip + the switch while showing */
.kk-lm__update { display: none; padding: 26px 36px 32px; }
.kk-cb__loyalty.is-update .kk-lm__update { display: block; }
.kk-cb__loyalty.is-update .kk-lm__flip, .kk-cb__loyalty.is-update .kk-lm__switch { display: none; }
@media (max-width: 600px) { .kk-lm__update { padding: 20px 18px 26px; } }
.kk-lm__flip { perspective: 2000px; padding: 26px 36px 32px; }
.kk-lm__faces { position: relative; transform-style: preserve-3d; transition: transform 0.75s var(--cb-ease); }
.kk-lm__faces.is-back { transform: rotateY(180deg); }
.kk-cb__loyalty .kk-lm__face { display: block; animation: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kk-lm__face--back { transform: rotateY(180deg); }
/* the side showing is in the flow (so the box is as tall as it); the other is parked behind it */
.kk-cb__loyalty .kk-lm__face:not(.kk-loyalty-panel--active) { position: absolute; inset: 0; overflow: hidden; pointer-events: none; visibility: hidden; transition: visibility 0s 0.4s; }
.kk-cb__loyalty .kk-lm__face.kk-loyalty-panel--active { position: relative; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .kk-lm__faces, .kk-lm__switch::before { transition: none !important; } }

/* how it works: the Loyalty Card page's steps (kk-lhow), sized for the pop-up */
.kk-cb__loyalty .kk-lm__steps { gap: 24px; margin: 0 0 30px; padding: 0 0 26px; border-bottom: 1px solid #ECE5D8; }
.kk-cb__loyalty .kk-lm__steps .kk-lhow__icon { width: 56px; height: 56px; }
@media (min-width: 768px) { .kk-cb__loyalty .kk-lm__steps .kk-lhow__step:not(:last-child)::after { top: 28px; left: calc(50% + 42px); right: calc(-50% + 30px); } }
.kk-cb__loyalty .kk-lm__steps .kk-lhow__num { margin-top: 12px; }
.kk-cb__loyalty .kk-lm__steps .kk-lhow__name { margin: 2px 0 6px; font-size: 18px; }
.kk-cb__loyalty .kk-lm__steps .kk-lhow__desc { font-size: 13.5px; line-height: 1.55; }
/* phones: the page's own stacked layout (kk-loyalty.css, max-width 767px) applies as is */
/* form styling on the landing: calmer labels, rounder fields, gold focus, gold submit */
.kk-cb__loyalty .kk-loyalty-form-wrap { max-width: none; padding: 0; border-radius: 0; box-shadow: none; background: none; }
.kk-cb__loyalty .frm_forms, .kk-cb__loyalty .frm_style_formidable-style.with_frm_style { font-family: "Poppins", sans-serif; }
.kk-cb__loyalty .frm_forms .frm_primary_label, .kk-cb__loyalty .kk-loyalty-panel[data-panel="signup"] .frm_forms .frm_primary_label { font-family: inherit; font-size: 13px; font-weight: 500; color: #5a4630; margin-bottom: 6px; }
.kk-cb__loyalty .frm_forms .frm_required { color: #B8923D; }
.kk-cb__loyalty .frm_forms .frm_description, .kk-cb__loyalty .kk-loyalty-panel[data-panel="signup"] .frm_forms .frm_description { font-size: 12px; color: #9a8c7a; }
.kk-cb__loyalty .frm_forms input[type="text"], .kk-cb__loyalty .frm_forms input[type="email"], .kk-cb__loyalty .frm_forms input[type="tel"], .kk-cb__loyalty .frm_forms input[type="number"], .kk-cb__loyalty .frm_forms select, .kk-cb__loyalty .frm_forms textarea,
.kk-cb__loyalty .frm_style_formidable-style.with_frm_style input[type="text"], .kk-cb__loyalty .frm_style_formidable-style.with_frm_style input[type="email"], .kk-cb__loyalty .frm_style_formidable-style.with_frm_style input[type="tel"], .kk-cb__loyalty .frm_style_formidable-style.with_frm_style select, .kk-cb__loyalty .frm_style_formidable-style.with_frm_style textarea {
	min-height: 46px; padding: 10px 14px; border: 1px solid #E3DCCF; border-radius: 12px; background: #FCFAF6; font-family: inherit; font-size: 14.5px; color: #2B1E12; box-shadow: none; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.kk-cb__loyalty .frm_forms input:focus, .kk-cb__loyalty .frm_forms select:focus, .kk-cb__loyalty .frm_forms textarea:focus { border-color: #C9A75A; background: #fff; box-shadow: 0 0 0 3px rgba(201, 167, 90, 0.22); outline: none; }
.kk-cb__loyalty .frm_forms input::placeholder { color: #A89A86; }
.kk-cb__loyalty .frm_forms .frm_form_field { margin-bottom: 16px; }
.kk-cb__loyalty .frm_forms .frm_blank_field input, .kk-cb__loyalty .frm_forms .frm_blank_field select { border-color: #C96A5A; background: #FFF8F6; }
.kk-cb__loyalty .frm_forms .frm_error { font-size: 12px; color: #B5503F; }
.kk-cb__loyalty .frm_forms .frm_error_style { border-radius: 12px; }
.kk-cb__loyalty .frm_forms .frm_message { border-radius: 14px; }
/* inline choices (Title, Yes / No): one tidy row, the "Other" box short and level with the radios */
.kk-cb__loyalty .frm_forms .frm_opt_container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.kk-cb__loyalty .frm_forms .frm_radio, .kk-cb__loyalty .frm_forms .frm_checkbox { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.kk-cb__loyalty .frm_forms .frm_radio label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.kk-cb__loyalty .frm_forms .frm_other_input, .kk-cb__loyalty .frm_style_formidable-style.with_frm_style .frm_other_input { display: inline-block; width: 150px !important; min-height: 38px; margin: 0 0 0 4px; padding: 6px 12px !important; }
.kk-cb__loyalty .frm_forms .vertical_radio .frm_opt_container { display: block; }

/* numbered sections: gold number, hairline rule */
.kk-cb__loyalty .kk-lf-section { gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #E8E2D6; font-size: 17px; color: #2B1E12; }
.kk-cb__loyalty .kk-lf-section__num { background: #C9A75A; color: #2B1E12; border-radius: 8px; }
.kk-cb__loyalty .frm_forms .frm_form_field:has(> .kk-lf-section) { margin: 18px 0 16px !important; }
.kk-cb__loyalty .kk-lf-note { border-color: #EEE8DD; font-size: 12.5px; }
.kk-cb__loyalty .kk-lf-guardian { border-color: #E8E2D6; border-radius: 14px; background: #FAF7F1; }
.kk-cb__loyalty .frm_forms input[type="radio"], .kk-cb__loyalty .frm_forms input[type="checkbox"] { accent-color: #B8923D; }
/* lost card: the newsletter switch keeps its words */
.kk-cb__loyalty [data-panel="lost"] .frm_form_field:has(.frm_switch_block) { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; }
.kk-cb__loyalty [data-panel="lost"] .frm_form_field:has(.frm_switch_block) .frm_primary_label { display: block !important; order: 2; margin: 0; font-weight: 500; color: #5a4630; }
.kk-cb__loyalty [data-panel="lost"] .frm_form_field:has(.frm_switch_block) .frm_switch_block { order: 1; margin: 0; }
.kk-cb__loyalty .frm_forms .frm_switch_block .frm_switch { background: #D9D1C2; }
.kk-cb__loyalty .frm_forms .frm_switch_block input:checked + .frm_switch { background: #C9A75A; }
/* submit: gold pill like the page */
.kk-cb__modal.kk-cb__loyalty .frm_forms .frm_submit { margin-top: 8px; text-align: center; }
.kk-cb__modal.kk-cb__loyalty .frm_forms .frm_submit button, .kk-cb__modal.kk-cb__loyalty .frm_forms .frm_submit input[type="submit"], .kk-cb__modal.kk-cb__loyalty .frm_style_formidable-style.with_frm_style .frm_submit button, .kk-cb__modal.kk-cb__loyalty .frm_forms .frm_submit button.frm_button_submit, .kk-cb__modal.kk-cb__loyalty .frm_style_formidable-style.with_frm_style .frm_submit button.frm_button_submit {
	min-width: 240px; min-height: 50px; padding: 12px 32px; border: 0; border-radius: 999px; background: #C9A75A; color: #2B1E12; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: 0 10px 24px rgba(43, 30, 18, 0.16); transition: filter 0.25s, transform 0.25s var(--cb-ease);
}
.kk-cb__modal.kk-cb__loyalty .frm_forms .frm_submit button:hover, .kk-cb__modal.kk-cb__loyalty .frm_forms .frm_submit button:focus, .kk-cb__modal.kk-cb__loyalty .frm_forms .frm_submit input[type="submit"]:hover { background: #C9A75A; color: #2B1E12; filter: brightness(1.08); transform: translateY(-1px); }
.kk-lm__privacy { margin: 18px auto 0; max-width: 560px; text-align: center; font-size: 12px; line-height: 1.6; color: #9a8c7a; }
.kk-cb__loyalty .kk-lf-terms { margin-top: 18px; }

@media (max-width: 600px) {
	.kk-cb__loyalty { padding: 10px 8px; }
	.kk-cb__loyalty .kk-cb__modal-box { border-radius: 18px; }
	.kk-lm__head { grid-template-columns: 1fr; row-gap: 14px; padding: 24px 18px 16px; }
	.kk-lm__set { grid-row: auto; width: 120px; margin: 0 auto 4px; }
	.kk-lm__head-text { text-align: center; padding-right: 0; }
	.kk-cb__loyalty .kk-loyalty-tabs.kk-lm__switch { justify-self: stretch; }
	.kk-cb__loyalty .kk-lm__switch .kk-loyalty-tab { min-width: 0 !important; padding: 9px 10px !important; }
	.kk-lm__flip { padding: 18px 16px 24px; }
	.kk-cb__modal.kk-cb__loyalty .frm_forms .frm_submit button, .kk-cb__modal.kk-cb__loyalty .frm_forms .frm_submit button.frm_button_submit { width: 100%; }
}