/* ==========================================================================
   MyFaayda Deal Finder — visual identity v2
   --------------------------------------------------------------------------
   Palette pulled directly from the myfaayda.com logo: magenta-pink to
   saffron-orange gradient, dark charcoal text (matching the logo's own
   "FIND THE BEST IN SECONDS" tagline treatment), warm blush-white paper
   instead of stock white or off-brand yellow/green.
   ========================================================================== */

:root {
	--mfd-ink: #262232;
	--mfd-pink: #E5177A;
	--mfd-pink-deep: #C4115F;
	--mfd-orange: #FF7A1A;
	--mfd-orange-deep: #E5650A;
	--mfd-gradient: linear-gradient(90deg, var(--mfd-pink) 0%, var(--mfd-orange) 100%);
	--mfd-paper: #FFF9F7;
	--mfd-paper-alt: #FFF1F1;
	--mfd-card: #FFFFFF;
	--mfd-line: #F3DCE1;
	--mfd-muted: #857D8C;
	--mfd-shadow: 0 10px 28px rgba(38, 34, 50, 0.08);
	--mfd-font-display: 'Baloo 2', ui-rounded, 'Segoe UI', sans-serif;
	--mfd-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mfd-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

.mfd-finder, .mfd-grid, .mfd-ai-widget {
	font-family: var(--mfd-font-body);
	color: var(--mfd-ink);
}

/* ---------- Hero ---------- */

.mfd-finder { max-width: 1180px; margin: 0 auto; padding: 0 1rem 2rem; width: 100%; }

.mfd-hero {
	text-align: center;
	padding: 2.75rem 1rem 2.25rem;
	background:
		radial-gradient(var(--mfd-line) 1px, transparent 1px) 0 0 / 18px 18px,
		var(--mfd-paper);
	border-radius: 20px;
	margin: 1rem 0 1.5rem;
}

.mfd-hero__eyebrow {
	display: inline-block;
	font-family: var(--mfd-font-body);
	font-weight: 600;
	font-size: 0.76rem;
	letter-spacing: 0.01em;
	color: var(--mfd-pink-deep);
	background: #FDE7F0;
	border: 1px solid #F7C7DD;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	margin-bottom: 1rem;
	max-width: 92vw;
}

.mfd-hero__title {
	font-family: var(--mfd-font-display);
	font-weight: 800;
	font-size: clamp(1.7rem, 5vw, 2.75rem);
	line-height: 1.18;
	margin: 0 0 0.85rem;
	letter-spacing: -0.01em;
}
.mfd-hero__title .mfd-accent {
	background: var(--mfd-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Mirrors the logo's own "— FIND THE BEST IN SECONDS —" treatment */
.mfd-hero__tagline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0 0 1.75rem;
	color: var(--mfd-muted);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.mfd-hero__tagline-line { height: 1.5px; width: 34px; background: var(--mfd-gradient); border-radius: 2px; }

.mfd-search-bar { position: relative; max-width: 560px; margin: 0 auto; }
.mfd-search-bar__input {
	width: 100%;
	padding: 1rem 1.2rem 1rem 3rem;
	border: 1.5px solid var(--mfd-line);
	background: var(--mfd-card);
	border-radius: 999px;
	font-family: var(--mfd-font-body);
	font-size: 1rem;
	box-shadow: var(--mfd-shadow);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mfd-search-bar__input:focus {
	outline: none;
	border-color: var(--mfd-pink);
	box-shadow: 0 0 0 4px rgba(229, 23, 122, 0.12);
}
.mfd-search-bar__icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); opacity: 0.55; }

/* ---------- Store pills ---------- */

.mfd-store-pills {
	display: flex;
	gap: 0.6rem;
	overflow-x: auto;
	padding: 1.25rem 0.1rem 0.4rem;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.mfd-store-pills.mfd-pills--expanded { flex-wrap: wrap; overflow-x: visible; }

.mfd-pill {
	display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0;
	border: 1.5px solid var(--mfd-line);
	background: var(--mfd-card);
	border-radius: 999px;
	padding: 0.45rem 0.95rem 0.45rem 0.45rem;
	white-space: nowrap;
	cursor: pointer;
	font-family: var(--mfd-font-body);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--mfd-ink);
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.mfd-pill img {
	width: 24px; height: 24px; object-fit: contain; border-radius: 50%;
	background: #fff; padding: 2px; border: 1px solid var(--mfd-line);
}
.mfd-pill[data-store=""] { padding-left: 1rem; }
.mfd-pill--active, .mfd-pill:hover { background: var(--mfd-gradient); border-color: transparent; color: #fff; }
.mfd-pill--more { padding-left: 1rem; border-style: dashed; color: var(--mfd-pink-deep); font-weight: 700; }
.mfd-pill--more:hover { background: var(--mfd-paper-alt); color: var(--mfd-pink-deep); }

/* ---------- Type tabs (segmented control) ---------- */

.mfd-type-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	background: var(--mfd-paper-alt);
	border-radius: 999px;
	padding: 0.3rem;
	margin: 0.25rem 0 1.75rem;
	width: fit-content;
	max-width: 100%;
}
.mfd-tab {
	border: none;
	background: transparent;
	border-radius: 999px;
	padding: 0.55rem 1.2rem;
	cursor: pointer;
	font-family: var(--mfd-font-body);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--mfd-muted);
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.mfd-tab--active { background: var(--mfd-ink); color: #fff; }
.mfd-tab--freebie.mfd-tab--active { background: var(--mfd-pink-deep); }

/* ---------- Deal grid + coupon-ticket cards ---------- */

.mfd-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem 1.25rem;
	margin: 1rem 0;
}
@media (max-width: 1000px) { .mfd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .mfd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 0.8rem; } }
@media (max-width: 460px)  { .mfd-grid { grid-template-columns: 1fr; } }

.mfd-card {
	position: relative;
	border: 1px solid var(--mfd-line);
	border-radius: 14px;
	overflow: visible;
	background: var(--mfd-card);
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba(38,34,50,0.05);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.mfd-card:hover { box-shadow: var(--mfd-shadow); transform: translateY(-3px); }
.mfd-card--freebie { border-color: #F7C7DD; }

.mfd-card__top {
	position: relative;
	height: 72px;
	padding: 0.85rem 0.9rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--mfd-paper-alt);
	border-radius: 14px 14px 0 0;
}
.mfd-card__logo { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; background: #fff; padding: 4px; border: 1px solid var(--mfd-line); }
.mfd-card__logo--placeholder {
	width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
	background: var(--mfd-gradient); color: #fff; font-family: var(--mfd-font-display);
	font-weight: 700; border-radius: 10px; font-size: 1.1rem;
}
.mfd-card__badge {
	background: var(--mfd-orange-deep);
	color: #fff;
	font-family: var(--mfd-font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 5px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.mfd-card__badge--free { background: var(--mfd-pink-deep); }

/* the "torn ticket" perforation between logo zone and offer details */
.mfd-card__body {
	position: relative;
	padding: 1.1rem 0.9rem 0.9rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
	border-top: 2px dashed var(--mfd-line);
}
.mfd-card::before, .mfd-card::after {
	content: '';
	position: absolute;
	top: 72px;
	width: 16px; height: 16px;
	background: var(--mfd-paper);
	border-radius: 50%;
	transform: translateY(-50%);
	border: 1px solid var(--mfd-line);
}
.mfd-card::before { left: -9px; }
.mfd-card::after { right: -9px; }

.mfd-card__store {
	font-family: var(--mfd-font-body);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mfd-muted);
	font-weight: 700;
}
.mfd-card__title {
	font-family: var(--mfd-font-body);
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.35;
	margin: 0;
	min-height: 2.55em;
	color: var(--mfd-ink);
}
.mfd-card__price { display: flex; align-items: baseline; gap: 0.5rem; }
.mfd-card__price-sale { font-family: var(--mfd-font-display); font-weight: 700; font-size: 1.15rem; color: var(--mfd-orange-deep); }
.mfd-card__price-original { text-decoration: line-through; color: var(--mfd-muted); font-size: 0.83rem; }

.mfd-card__code {
	border: 1.5px dashed var(--mfd-pink);
	background: #FDF0F5;
	border-radius: 8px;
	padding: 0.55rem 0.7rem;
	font-family: var(--mfd-font-mono);
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--mfd-pink-deep);
	display: flex; justify-content: space-between; align-items: center; gap: 0.4rem;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.mfd-card__code.mfd-copied { background: #FFF1E5; border-color: var(--mfd-orange); color: var(--mfd-orange-deep); }
.mfd-card__code-label { font-family: var(--mfd-font-body); font-weight: 600; font-size: 0.65rem; color: inherit; opacity: 0.8; white-space: nowrap; }

.mfd-card__cta {
	display: block;
	text-align: center;
	padding: 0.7rem;
	border-radius: 9px;
	background: var(--mfd-gradient);
	color: #fff !important;
	font-family: var(--mfd-font-body);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none !important;
	margin-top: auto;
	transition: filter 0.15s ease;
}
.mfd-card__cta:hover { filter: brightness(0.94); }

.mfd-empty { padding: 3.5rem 1rem; text-align: center; color: var(--mfd-muted); grid-column: 1 / -1; font-family: var(--mfd-font-body); }
.mfd-load-more-wrap { text-align: center; margin: 2rem 0 1rem; }
.mfd-load-more {
	border: 1.5px solid var(--mfd-ink);
	background: transparent;
	color: var(--mfd-ink);
	padding: 0.8rem 2.2rem;
	border-radius: 999px;
	cursor: pointer;
	font-family: var(--mfd-font-body);
	font-weight: 700;
	transition: background 0.15s ease, color 0.15s ease;
}
.mfd-load-more:hover:not(:disabled) { background: var(--mfd-ink); color: #fff; }
.mfd-load-more:disabled { opacity: 0.5; cursor: default; }

/* ---------- AI Deal Assistant widget ---------- */

.mfd-ai-widget { position: fixed; bottom: 20px; right: 20px; z-index: 9999; font-size: 14px; }
.mfd-ai-toggle {
	background: var(--mfd-gradient); color: #fff; border: none; border-radius: 999px;
	padding: 0.8rem 1.3rem; font-family: var(--mfd-font-body); font-weight: 700;
	cursor: pointer; box-shadow: 0 6px 18px rgba(229,23,122,0.28);
}
.mfd-ai-panel {
	position: absolute; bottom: 62px; right: 0; width: 320px; max-height: 440px;
	background: var(--mfd-card); border-radius: 14px; box-shadow: 0 12px 34px rgba(38,34,50,0.22);
	display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mfd-line);
}
.mfd-ai-messages { flex: 1; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; max-height: 330px; background: var(--mfd-paper); }
.mfd-ai-msg { padding: 0.55rem 0.75rem; border-radius: 10px; max-width: 85%; line-height: 1.4; font-size: 0.88rem; }
.mfd-ai-msg--user { align-self: flex-end; background: var(--mfd-ink); color: #fff; }
.mfd-ai-msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--mfd-line); }
.mfd-ai-msg--bot a { color: var(--mfd-pink-deep); font-weight: 700; }
.mfd-ai-form { display: flex; border-top: 1px solid var(--mfd-line); }
.mfd-ai-form input { flex: 1; border: none; padding: 0.8rem; outline: none; font-family: var(--mfd-font-body); }
.mfd-ai-form button { border: none; background: var(--mfd-gradient); color: #fff; padding: 0 1.1rem; cursor: pointer; font-weight: 700; }

/* ---------- Responsive tuning ---------- */

@media (max-width: 900px) {
	.mfd-hero { padding: 2.2rem 1rem 1.9rem; }
}

@media (max-width: 560px) {
	.mfd-finder { padding: 0 0.75rem 1.5rem; }
	.mfd-hero { padding: 1.9rem 0.85rem 1.6rem; border-radius: 14px; margin-top: 0.5rem; }
	.mfd-hero__tagline { font-size: 0.68rem; letter-spacing: 0.1em; gap: 0.5rem; }
	.mfd-hero__tagline-line { width: 22px; }
	.mfd-search-bar__input { padding: 0.9rem 1rem 0.9rem 2.7rem; font-size: 0.95rem; }
	.mfd-type-tabs { width: 100%; justify-content: center; }
	.mfd-tab { flex: 1; text-align: center; padding: 0.55rem 0.6rem; }
	.mfd-card__cta, .mfd-card__code { padding: 0.75rem 0.8rem; } /* comfortable tap targets */
	.mfd-ai-panel { width: calc(100vw - 40px); right: -10px; }
}