/**
 * SnatchFive Platform — global front-end fixes.
 * Brand: Snatch Black #3b3d43, Snatch Blue #0857f4, Snatch Green #b4e94c.
 *
 * The footer's first section carries a -40px top margin (neutralised via an
 * inline rule scoped to the footer block id in the plugin). This file adds the
 * cross-page safety spacing and other global tidy-ups.
 */

/* ---- Task 8: no underline text decoration anywhere on the site ---- */
a, a:link, a:visited, a:hover, a:focus, a:active,
.woocommerce a, .elementor a, ins, u {
	text-decoration: none !important;
}

/* ---- Task 19 + 4: footer sits flush with content, no overlap and no gap ---- */
/* The footer's first section had margin-top:-40px (neutralised to 0 via the
   inline rule), so it can no longer overlap content. We also drop the bottom
   spacing under the main content and the footer's top section so there is no
   white gap between the last section and the footer (task 4, all pages). */
#main.main {
	margin-bottom: 0;
	/* Task 5: a little breathing room so the footer is not touching the last
	   content, without bringing back the big sticky-footer gap. */
	padding-bottom: 44px !important;
}
.footer.custom-footer {
	margin-top: 0 !important;
}
/* The footer reserves 125px at the bottom for the mobile bottom bar; on desktop
   there is no such bar, so that is just empty white space. Remove it there. */
@media (min-width: 992px) {
	.footer {
		padding-bottom: 0 !important;
	}
}
/* Trim the page content wrapper's bottom spacing so the last section sits close
   to the footer (task 4c). */
.page-content-wrap, .main-content, .page-content {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}
/* The page wrapper is a sticky-footer flex column (min-height:100vh): on short
   pages the main area grows and pushes the footer down, leaving white space
   above it. Drop the forced height and the grow so the footer sits flush under
   the last section. */
.page-wrapper {
	min-height: 0 !important;
}
.page-wrapper > #main.main,
.page-wrapper > .main {
	flex: 0 0 auto !important;
}

/* ---- Task 17: enlarge the homepage "20% OFF 1st order / 10% OFF 2nd order" chips ---- */
/* The hero HTML widget styles .sf-offer__chip inline (specificity 0,1,0); the
   `body` prefix here (0,1,1) wins regardless of source order, so no !important. */
body .sf-offer__chip {
	font-size: 1.25rem;
	padding: 12px 22px;
}
body .sf-offer__chip b {
	font-size: 1.04em;
}
@media (max-width: 640px) {
	body .sf-offer__chip {
		font-size: 1rem;
		padding: 9px 16px;
	}
}

/* ---- Task 14: shared page shortcodes (affiliate dashboard, refer a friend) ---- */
/* The Wolmart theme reveals page content with a scroll-triggered fade (elements
   start opacity:0). Our plugin-rendered content must never depend on that, so
   force it visible. */
body .sf-page, body .sf-page *, body .sf-dash, body .sf-dash * {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	/* Cancel the theme's paused entrance keyframe (a running animation's 0%
	   opacity:0 keyframe overrides even !important, which is what kept our
	   below-the-fold sections invisible). */
	animation: none !important;
}

.sf-page { max-width: 1080px; margin: 0 auto; padding: 10px 0 0; color: #3b3d43; }
.sf-affil__head, .sf-refer__hero { text-align: center; margin-bottom: 26px; }
.sf-affil__title, .sf-refer__title { font-size: 30px; font-weight: 800; margin: 0 0 10px; color: #3b3d43; }
.sf-affil__lead, .sf-refer__lead { color: #5b606b; font-size: 16px; max-width: 640px; margin: 0 auto 18px; }
.sf-affil__stats {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px;
}
.sf-affil__cta {
	max-width: 520px; margin: 30px auto; text-align: center;
	background: #fff; border: 1px solid #e7e9ee; border-radius: 16px; padding: 36px 28px;
}
.sf-refer__linkrow { max-width: 560px; margin: 0 auto; }
body .sf-refer__steps {
	display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px;
}
body .sf-step { display: block !important; }
.sf-step {
	background: #fff; border: 1px solid #e7e9ee; border-radius: 16px; padding: 24px 22px; text-align: center;
}
.sf-step__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: #b4e94c; color: #3b3d43; font-weight: 800; font-size: 18px; margin-bottom: 12px;
}
.sf-step h4 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: #3b3d43; }
.sf-step p { margin: 0; color: #6b7280; font-size: 14px; }
.sf-affil .sf-card, .sf-refer .sf-card { margin-bottom: 18px; }

/* Lead / contact form (Contact, Stockist, Community, Discount, Catering) */
.sf-lead { max-width: 760px; }
.sf-lead__head { text-align: center; margin-bottom: 24px; }
.sf-lead__title { font-size: 30px; font-weight: 800; margin: 0 0 10px; color: #3b3d43; }
.sf-lead__intro { color: #5b606b; font-size: 16px; max-width: 620px; margin: 0 auto; }
.sf-lead__form {
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
	background: #fff; border: 1px solid #e7e9ee; border-radius: 16px; padding: 26px;
	box-shadow: 0 10px 30px rgba(16,24,40,.05);
}
.sf-lead__row { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sf-lead__row--wide { grid-column: 1 / -1; }
.sf-lead__row label { font-weight: 600; font-size: 13.5px; color: #3b3d43; }
.sf-req { color: #e5484d; }
.sf-lead__form input, .sf-lead__form textarea {
	width: 100%; border: 1px solid #d7dae1; border-radius: 10px;
	padding: 12px 14px; font-size: 14px; background: #fff; color: #3b3d43;
}
.sf-lead__form input:focus, .sf-lead__form textarea:focus { border-color: #0857f4; outline: none; }
.sf-lead__btn { grid-column: 1 / -1; justify-self: start; margin-top: 4px; border: 0; cursor: pointer; }
.sf-lead__success {
	display: flex; flex-direction: column; gap: 6px; text-align: center;
	background: #e7f8cf; border: 1px solid #b4e94c; border-radius: 14px;
	padding: 26px; color: #3b3d43; max-width: 560px; margin: 0 auto;
}
@media (max-width: 600px) { .sf-lead__form { grid-template-columns: 1fr; } }

/* Contact page: details panel beside the form (task 9) */
.sf-lead--split { max-width: 1000px; }
.sf-lead--split .sf-lead__grid {
	display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 22px; align-items: start;
}
.sf-contact {
	background: #3b3d43; color: #fff; border-radius: 16px; padding: 26px 24px;
	display: flex; flex-direction: column; gap: 18px;
}
.sf-contact__item { display: flex; flex-direction: column; gap: 4px; }
.sf-contact__label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #b4e94c; font-weight: 700; }
.sf-contact__item a, .sf-contact__item span { color: #fff; font-size: 15px; line-height: 1.5; }
.sf-contact__item a:hover { color: #b4e94c; }
@media (max-width: 768px) { .sf-lead--split .sf-lead__grid { grid-template-columns: 1fr; } }

/* Track Your Order (task 3) */
.sf-track { max-width: 620px; }
.sf-track__head { text-align: center; margin-bottom: 24px; }
.sf-track__title { font-size: 30px; font-weight: 800; margin: 0 0 10px; color: #3b3d43; }
.sf-track__lead { color: #5b606b; font-size: 16px; margin: 0; }
.sf-track__card {
	background: #fff; border: 1px solid #e7e9ee; border-radius: 16px; padding: 28px;
	box-shadow: 0 10px 30px rgba(16,24,40,.05);
}
.sf-track__card form.track_order p { margin: 0 0 16px; }
.sf-track__card form.track_order label { display: block; font-weight: 600; font-size: 13.5px; color: #3b3d43; margin-bottom: 6px; }
.sf-track__card form.track_order .input-text {
	width: 100%; border: 1px solid #d7dae1; border-radius: 10px; padding: 12px 14px; font-size: 14px;
}
.sf-track__card form.track_order .input-text:focus { border-color: #0857f4; outline: none; }
.sf-track__card form.track_order button,
.sf-track__card form.track_order .button {
	background: #b4e94c !important; color: #3b3d43 !important; border: 0 !important;
	border-radius: 10px; font-weight: 800; padding: 13px 24px; cursor: pointer;
}
.sf-track__card form.track_order button:hover { background: #a3d93f !important; }
.sf-track__foot { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; color: #3b3d43; font-weight: 600; }
.sf-track__foot .sf-btn { margin-top: 0; }

/* How it Works (task 11): interactive numbered steps */
.sf-hiw__head { text-align: center; margin-bottom: 30px; }
.sf-hiw__title { font-size: 32px; font-weight: 800; margin: 0 0 10px; color: #3b3d43; }
.sf-hiw__lead { color: #5b606b; font-size: 16px; max-width: 680px; margin: 0 auto; }
.sf-hiw__steps {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step;
}
.sf-hiw__step {
	position: relative; background: #fff; border: 1px solid #e7e9ee; border-radius: 18px;
	padding: 30px 22px 24px; text-align: center;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sf-hiw__step:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(16, 24, 40, .10);
	border-color: #b4e94c;
}
.sf-hiw__num {
	position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
	width: 34px; height: 34px; border-radius: 50%; background: #3b3d43; color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
	transition: background .2s ease;
}
.sf-hiw__step:hover .sf-hiw__num { background: #0857f4; }
.sf-hiw__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; border-radius: 50%; background: #f1f8e3; color: #3b3d43;
	margin: 6px auto 16px; transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sf-hiw__icon svg { width: 30px; height: 30px; }
.sf-hiw__step:hover .sf-hiw__icon { background: #b4e94c; transform: scale(1.06); }
.sf-hiw__steptitle { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: #3b3d43; }
.sf-hiw__steptext { margin: 0; color: #6b7280; font-size: 14px; line-height: 1.6; }
/* Why SnatchFive feature grid */
.sf-hiw__why { margin-top: 56px; }
.sf-hiw__whyhead { text-align: center; margin-bottom: 26px; }
.sf-hiw__whytitle { font-size: 26px; font-weight: 800; margin: 0 0 8px; color: #3b3d43; }
.sf-hiw__whylead { color: #5b606b; font-size: 15px; margin: 0; }
.sf-hiw__features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sf-hiw__feature {
	display: flex; gap: 14px; align-items: flex-start;
	background: #fff; border: 1px solid #e7e9ee; border-radius: 14px; padding: 20px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.sf-hiw__feature:hover { border-color: #b4e94c; box-shadow: 0 12px 30px rgba(16,24,40,.07); }
.sf-hiw__check {
	flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
	background: #b4e94c; color: #3b3d43; display: inline-flex; align-items: center; justify-content: center;
}
.sf-hiw__check svg { width: 18px; height: 18px; }
.sf-hiw__feature h4 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: #3b3d43; }
.sf-hiw__feature p { margin: 0; color: #6b7280; font-size: 13.5px; line-height: 1.55; }

/* Promise band */
.sf-hiw__band {
	margin-top: 50px; border-radius: 20px; padding: 48px 30px; text-align: center;
	background: linear-gradient(135deg, #3b3d43 0%, #2b2d33 100%); color: #fff;
}
.sf-hiw__bandinner { max-width: 720px; margin: 0 auto; }
.sf-hiw__band h3 { margin: 0 0 12px; font-size: 26px; font-weight: 800; color: #fff; }
.sf-hiw__band p { margin: 0; color: #d6d8dd; font-size: 16px; line-height: 1.7; }

.sf-hiw__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.sf-hiw__cta .sf-btn { margin-top: 0; }
@media (max-width: 900px) { .sf-hiw__features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sf-hiw__features { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .sf-hiw__steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sf-hiw__steps { grid-template-columns: 1fr; } }

/* FAQ accordion (native <details>) */
.sf-faq__head { text-align: center; margin-bottom: 26px; }
.sf-faq__title { font-size: 30px; font-weight: 800; margin: 0 0 10px; color: #3b3d43; }
.sf-faq__lead { color: #5b606b; font-size: 16px; max-width: 640px; margin: 0 auto; }
.sf-faq__list { max-width: 820px; margin: 0 auto; }
.sf-faq__item {
	background: #fff; border: 1px solid #e7e9ee; border-radius: 12px;
	margin-bottom: 12px; padding: 0 20px; overflow: hidden;
}
.sf-faq__item[open] { border-color: #b4e94c; box-shadow: 0 8px 24px rgba(16,24,40,.05); }
.sf-faq__q {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; cursor: pointer; list-style: none;
	padding: 18px 0; font-weight: 700; font-size: 16px; color: #3b3d43;
}
.sf-faq__q::-webkit-details-marker { display: none; }
.sf-faq__icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.sf-faq__icon::before, .sf-faq__icon::after {
	content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
	background: #3b3d43; transition: transform .2s ease;
}
.sf-faq__icon::before { width: 16px; height: 2px; }
.sf-faq__icon::after { width: 2px; height: 16px; }
.sf-faq__item[open] .sf-faq__icon::after { transform: translate(-50%,-50%) scaleY(0); }
.sf-faq__a { padding: 0 0 18px; color: #5b606b; font-size: 14.5px; line-height: 1.7; }
.sf-faq__a p { margin: 0; }
.sf-faq__cta {
	display: flex; align-items: center; justify-content: center; gap: 16px;
	flex-wrap: wrap; margin-top: 30px; text-align: center; color: #3b3d43; font-weight: 600;
}
.sf-faq__cta .sf-btn { margin-top: 0; }
@media (max-width: 768px) {
	.sf-affil__stats { grid-template-columns: 1fr 1fr; }
	.sf-refer__steps { grid-template-columns: 1fr; }
}

/* ---- Tasks 10 + 12: customer Dashboard ---- */
.sf-dash { color: #3b3d43; }
.sf-dash__greeting { margin-bottom: 22px; }
.sf-dash__hello { margin: 0 0 4px; font-size: 26px; font-weight: 800; color: #3b3d43; }
.sf-dash__sub { margin: 0; color: #6b7280; font-size: 14px; }

.sf-dash__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 22px;
}
.sf-stat {
	background: #ffffff;
	border: 1px solid #e7e9ee;
	border-radius: 14px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sf-stat__label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #8a8f9a; font-weight: 600; }
.sf-stat__value { font-size: 22px; font-weight: 800; color: #3b3d43; }
.sf-stat__value .woocommerce-Price-amount { font-size: inherit; }

.sf-dash__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.sf-card {
	background: #ffffff;
	border: 1px solid #e7e9ee;
	border-radius: 16px;
	padding: 22px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .04);
}
.sf-card--referral { grid-column: 1 / -1; background: linear-gradient(135deg, #3b3d43 0%, #2b2d33 100%); color: #fff; border: 0; }
.sf-card--referral .sf-card__title, .sf-card--referral .sf-card__lead { color: #fff; }
.sf-card__title { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.sf-card__lead { margin: 0 0 16px; font-size: 13px; color: #6b7280; }
.sf-card__foot { margin: 12px 0 0; font-size: 13px; color: #6b7280; }

.sf-code { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sf-code__label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; opacity: .7; }
.sf-code__value { font-size: 24px; font-weight: 800; letter-spacing: 3px; color: #b4e94c; }

.sf-linkrow { display: flex; gap: 10px; }
/* Default (light background, e.g. the refer-a-friend hero): dark text. */
.sf-linkrow__input {
	flex: 1 1 auto; min-width: 0;
	background: #f3f5f9;
	border: 1px solid #d7dae1;
	color: #3b3d43; border-radius: 10px; padding: 12px 14px; font-size: 13px;
}
/* Inside the dark referral card: light text. */
.sf-card--referral .sf-linkrow__input {
	background: rgba(255,255,255,.12);
	border-color: rgba(255,255,255,.25);
	color: #ffffff;
}
.sf-copybtn {
	flex: 0 0 auto;
	background: #ffffff !important; color: #3b3d43 !important; border: 0; border-radius: 10px;
	padding: 11px 16px; font-weight: 700; cursor: pointer; white-space: nowrap;
	text-transform: none; letter-spacing: 0; line-height: 1;
}
.sf-copybtn--primary { background: #b4e94c !important; color: #3b3d43 !important; }
.sf-copybtn.is-copied { background: #b4e94c !important; color: #3b3d43 !important; }

.sf-sub__row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #eef0f3; font-size: 14px; }
.sf-sub__row:last-child { border-bottom: 0; }
.sf-sub__row span { color: #6b7280; }

.sf-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sf-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #8a8f9a; padding: 0 8px 8px 0; border-bottom: 1px solid #eef0f3; }
.sf-table td { padding: 10px 8px 10px 0; border-bottom: 1px solid #f3f4f6; }
.sf-table tr:last-child td { border-bottom: 0; }

.sf-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: capitalize; background: #eef0f3; color: #4b5563; }
.sf-badge--active, .sf-badge--completed, .sf-badge--paid { background: #e7f8cf; color: #4d7c0f; }
.sf-badge--pending, .sf-badge--processing, .sf-badge--paused { background: #fff3cd; color: #92651a; }
.sf-badge--cancelled, .sf-badge--failed { background: #fde2e1; color: #b42318; }

/* Scoped to our own containers so these do not collide with the theme/hero's
   own .sf-btn classes (the hero "Order Meals" button keeps its blue + white). */
.sf-page .sf-btn, .sf-dash .sf-btn { display: inline-block; margin-top: 14px; padding: 11px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.sf-page .sf-btn--primary, .sf-dash .sf-btn--primary { background: #b4e94c; color: #3b3d43 !important; }
.sf-page .sf-btn--primary:hover, .sf-dash .sf-btn--primary:hover { background: #a3d93f; }
.sf-page .sf-btn--ghost, .sf-dash .sf-btn--ghost { background: #f3f5f9; color: #3b3d43 !important; }
.sf-link { color: #0857f4; font-weight: 600; text-decoration: none; }
.sf-link--more { display: inline-block; margin-top: 12px; }
.sf-empty { color: #6b7280; font-size: 14px; margin: 6px 0 0; }

.sf-dash__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sf-quicklink { background: #f3f5f9; color: #3b3d43; padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; font-size: 13px; }
.sf-quicklink:hover { background: #e7eaf0; }

@media (max-width: 768px) {
	.sf-dash__stats { grid-template-columns: 1fr 1fr; }
	.sf-dash__grid { grid-template-columns: 1fr; }
	.sf-linkrow { flex-direction: column; }
}

/* ---- Task 11: password eye toggle (login + signup) ---- */
.sf-pass-field {
	position: relative;
	display: block;
}
.sf-pass-field > input {
	width: 100%;
	padding-right: 44px !important;
}
.sf-pass-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: #6b7280;
	cursor: pointer;
	line-height: 0;
}
.sf-pass-toggle:hover { color: #3b3d43; }

/* ---- Task 11: email verification screen ---- */
.sf-verify {
	max-width: 420px;
	margin: 0 auto 24px;
	padding: 26px 24px;
	background: #ffffff;
	border: 1px solid #e7e9ee;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
	text-align: center;
}
.sf-verify__title {
	margin: 0 0 8px;
	color: #3b3d43;
	font-weight: 800;
}
.sf-verify__lead {
	margin: 0 0 18px;
	color: #5b606b;
	font-size: 14px;
}
.sf-verify__input {
	width: 100%;
	text-align: center;
	letter-spacing: .5em;
	font-size: 22px;
	font-weight: 700;
	padding: 12px 10px;
	border: 2px solid #d7dae1;
	border-radius: 10px;
	margin-bottom: 14px;
}
.sf-verify__input:focus { border-color: #0857f4; outline: none; }
.sf-verify__btn.button {
	width: 100%;
	background: #b4e94c !important;
	color: #3b3d43 !important;
	border: 0 !important;
	font-weight: 800;
	border-radius: 10px;
	padding: 13px 0;
}
.sf-verify__btn.button:hover { background: #a3d93f !important; }
.sf-verify__resend { margin-top: 12px; }
.sf-linkbtn {
	background: none;
	border: 0;
	color: #0857f4;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
}

/* ---- Task 18: mini-cart drawer — wider + clearly visible buttons ---- */
/* The customizer CSS styled both buttons with the same generic selector, so
   "View cart" and "Checkout" collided (one ended up invisible). These rules use
   higher specificity (scoped under .cart-popup) to win cleanly without editing
   the customizer, and widen the drawer. */
.cart-popup.widget_shopping_cart {
	width: 400px !important;
	max-width: 92vw !important;
}
.cart-popup .widget_shopping_cart_content {
	width: 100%;
}
/* Buttons: View Cart + Checkout side by side on one row. */
.cart-popup .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 10px;
	padding: 12px 14px;
}
.cart-popup .woocommerce-mini-cart__buttons a {
	display: block;
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	margin: 0 !important;
	padding: 12px 6px !important;
	text-align: center;
	border-radius: 8px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	font-size: 12.5px;
	box-shadow: none !important;
}
/* Reduce the cramped side padding throughout the drawer. */
.cart-popup .woocommerce-mini-cart,
.cart-popup .woocommerce-mini-cart__total {
	padding-left: 14px !important;
	padding-right: 14px !important;
}
/* View cart: outline / secondary. */
.cart-popup .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
	background: #ffffff !important;
	color: #3b3d43 !important;
	border: 2px solid #3b3d43 !important;
}
.cart-popup .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout):hover {
	background: #3b3d43 !important;
	color: #ffffff !important;
}
/* Checkout: primary green. */
.cart-popup .woocommerce-mini-cart__buttons a.checkout {
	background: #b4e94c !important;
	color: #3b3d43 !important;
	border: 2px solid #b4e94c !important;
}
.cart-popup .woocommerce-mini-cart__buttons a.checkout:hover {
	background: #a3d93f !important;
	border-color: #a3d93f !important;
	color: #3b3d43 !important;
}

/* ---- Task 2: checkout delivery date picker ---- */
.sf-delivery-row th { vertical-align: top; }
.sf-delivery-method { display: flex; gap: 16px; margin-bottom: 8px; font-weight: 600; }
.sf-delivery-method label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sf-delivery-date {
	width: 100%; max-width: 240px; padding: 10px 12px; border: 1px solid #d7dae1;
	border-radius: 8px; background: #fff; cursor: pointer; font-size: 14px;
}
.sf-delivery-hint { display: block; margin-top: 6px; color: #6b7280; font-size: 12px; }
.ui-datepicker .ui-state-disabled { opacity: .35; }
.ui-datepicker td .sf-day-ok a { font-weight: 700; }

/* ---- Task 6: one account avatar on desktop (keep the circled one) ---- */
/* Two header account widgets render on desktop: c60bf97 (custom, circled) and
   655f341 (plain icon). Hide the plain one on desktop; keep it on mobile where
   the circled one is hidden by the theme. */
@media (min-width: 992px) {
	.elementor-element-655f341 {
		display: none !important;
	}
}

/* ---- Task 4a: Offer page — remove the gap between header and hero ---- */
/* The gap is the page title bar ("Offer") + breadcrumb sitting between the
   header and the first Elementor section. Hide them and remove top spacing so
   the hero sits flush under the header. */
.page-id-4612 .page-header,
.page-id-4612 .breadcrumb-container {
	display: none !important;
}
.page-id-4612 #main.main,
.page-id-4612 .page-content-wrap {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* ---- Task 4b: hover effect on all buttons (shift icon + lighten/darken bg) ---- */
.elementor-button, .sf-btn, .sf-copybtn, .sf-lead__btn, .sf-verify__btn,
.woocommerce a.button, .woocommerce button.button {
	transition: background-color .2s ease, filter .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
.elementor-button:hover, .sf-btn:hover, .sf-copybtn:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
	filter: brightness(0.93);
	box-shadow: 0 6px 16px rgba(16, 24, 40, .12);
}
.sf-btn:hover, .sf-copybtn:hover { transform: translateY(-2px); }
.elementor-button .elementor-button-icon { transition: transform .15s ease; }
.elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* ---- Task 4c: no white gap between the last section and the footer ---- */
.elementor > .elementor-element:last-child,
.elementor > .e-con.e-parent:last-child {
	margin-bottom: 0 !important;
}

/* ---- Task 9: fix the corrupted Twitter/X share icon ---- */
/* The share icon uses `fa-x-twitter`, which only exists in Font Awesome 6.4+,
   but the site ships Font Awesome 5, so the glyph renders as an empty/tofu box.
   Draw the official X logo with a CSS mask instead: version-proof and it inherits
   the icon's current colour. Scoped to `i.fa-x-twitter`, so the footer's
   `w-icon-twitter` (which renders fine) is untouched. */
i.fa-x-twitter::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Task 15: remove "Recently Viewed" from the desktop header nav ---- */
/* The header element is an Elementor products widget rendered as
   .products-view-dropdown. Hide it from the desktop header only; the mobile
   experience uses its own bar and is unaffected. */
@media (min-width: 992px) {
	.header .products-view-dropdown {
		display: none !important;
	}
}

/* ============================================================
   Referral coupons + Loyalty (Time Reclaimer Card)  v1.9.0
   ============================================================ */

/* Coupon code chips in the referrals table */
.sf-dash .sf-couponcode { background: #eef0f3; padding: 3px 9px; border-radius: 6px; font-weight: 700; letter-spacing: 1px; font-size: 12px; color: #3b3d43; }

/* The Time Reclaimer loyalty card */
.sf-loyaltycard { background: #b4e94c; border-radius: 16px; padding: 22px; }
.sf-loyaltycard--full { border: 3px solid #0857f4; }
.sf-loyaltycard__head { margin-bottom: 6px; }
.sf-loyaltycard__brand { color: #0857f4; font-weight: 800; font-size: 24px; letter-spacing: 1px; }
.sf-loyaltycard__brand span { opacity: .9; }
.sf-loyaltycard__title { color: #3b3d43; font-size: clamp(20px, 4vw, 30px); font-weight: 800; margin: 10px 0 2px; line-height: 1.1; }
.sf-loyaltycard__sub { color: #3b3d43; margin: 0 0 18px; font-weight: 600; }
.sf-loyaltycard__stamps { display: flex; gap: 14px; flex-wrap: wrap; }

.sf-stamp { width: 84px; height: 84px; border-radius: 50%; border: 3px solid #0857f4; display: flex; align-items: center; justify-content: center; color: #0857f4; background: rgba(255,255,255,.18); transition: transform .15s ease; }
.sf-stamp__icon { width: 46px; height: 46px; display: block; }
.sf-stamp--filled { background: #0857f4; color: #fff; box-shadow: 0 5px 14px rgba(8,87,244,.4); }
.sf-stamp--free { border-width: 4px; }
.sf-stamp--free .sf-stamp__free { font-weight: 800; font-size: 16px; letter-spacing: 1px; }
.sf-stamp--free.sf-stamp--filled { background: #0857f4; color: #fff; }

/* Compact preview on the main dashboard */
.sf-loyaltycard--compact { padding: 14px; }
.sf-loyaltycard--compact .sf-loyaltycard__stamps { gap: 9px; }
.sf-loyaltycard--compact .sf-stamp { width: 48px; height: 48px; border-width: 2px; }
.sf-loyaltycard--compact .sf-stamp__icon { width: 27px; height: 27px; }
.sf-loyaltycard--compact .sf-stamp--free .sf-stamp__free { font-size: 10px; }

/* Loyalty copy */
.sf-loyalty__progress { margin-top: 18px; }
.sf-loyalty__status { font-weight: 700; color: #3b3d43; margin: 14px 0 4px; }
.sf-loyalty__earned { color: #0857f4; font-weight: 700; margin: 0; }
.sf-loyalty__list { margin: 0 0 18px; padding-left: 18px; }
.sf-loyalty__list li { margin: 7px 0; color: #3b3d43; }

/* Rewards page: card is full width */
.sf-card--loyalty .sf-loyaltycard { box-shadow: 0 10px 30px rgba(59,61,67,.12); }

/* Spacing for the stacked account sub pages (Referrals + Rewards) */
.sf-dash--referrals > .sf-card--referral { margin-bottom: 22px; }
.sf-dash--rewards > .sf-card { margin-bottom: 18px; }
.sf-dash--rewards > .sf-card:last-child { margin-bottom: 0; }
.sf-empty--inline { display: inline; margin: 0; color: #8a8f9a; font-size: 13px; }