/* =========================================================================
   Flower Shop 404 — Elementor Add-ons
   Design system + widget styles. Soft pink + warm-brown florist aesthetic.
   Motion follows Emil Kowalski's principles: transform/opacity only,
   custom ease-out curves, scale-on-press, reduced-motion aware.
   ========================================================================= */

:root {
	/* Palette */
	--fl404-pink-900: #c2255c;
	--fl404-pink-700: #d6336c;
	--fl404-pink-600: #e64980;
	--fl404-pink-500: #f06595;
	--fl404-pink-400: #f783ac;
	--fl404-pink-100: #fde2ec;
	--fl404-pink-050: #fdf2f6;
	--fl404-brown: #3d2420;
	--fl404-brown-soft: #5b4a4a;
	--fl404-ink: #6b7280;
	--fl404-muted: #9aa0ab;
	--fl404-line: #f0dbe3;
	--fl404-line-soft: #f2e7eb;
	--fl404-white: #ffffff;

	/* Type */
	--fl404-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--fl404-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Motion */
	--fl404-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

	/* Layout */
	--fl404-radius-pill: 999px;
	--fl404-shadow-pink: 0 12px 28px rgba(230, 73, 128, 0.32);
	--fl404-shadow-soft: 0 8px 24px rgba(214, 51, 108, 0.08);
}

/* ---------------------------------------------------------------------------
   Canvas — full-width, fit-to-screen scaffold (master widget)
   --------------------------------------------------------------------------- */
.fl404-canvas {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	font-family: var(--fl404-sans);
	color: var(--fl404-ink);
	overflow: hidden;
}
.fl404-canvas::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 240px;
	background: linear-gradient(180deg, rgba(240, 101, 149, 0.10) 0%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
	z-index: 0;
}
.fl404-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
	gap: 22px;
}

/* ---------------------------------------------------------------------------
   404 number block
   --------------------------------------------------------------------------- */
.fl404-number-block {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.fl404-number {
	font-family: var(--fl404-sans);
	font-weight: 800;
	font-size: clamp(110px, 21vw, 210px);
	line-height: 0.9;
	letter-spacing: -0.02em;
	background: linear-gradient(95deg, var(--fl404-pink-700) 0%, var(--fl404-pink-400) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--fl404-pink-600); /* fallback */
	margin: 0;
}
.fl404-divider {
	position: relative;
	width: min(540px, 86%);
	height: 1px;
	margin-top: 18px;
	background: linear-gradient(90deg, rgba(240, 101, 149, 0) 0%, var(--fl404-line) 28%, var(--fl404-line) 72%, rgba(240, 101, 149, 0) 100%);
}
.fl404-divider__flower {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--fl404-white);
	padding: 0 10px;
	font-size: 18px;
	line-height: 1;
}

/* Floating decorative flowers */
.fl404-decor {
	position: absolute;
	font-size: 26px;
	line-height: 1;
	pointer-events: none;
	z-index: 2;
	will-change: transform;
	animation: fl404-float 6s ease-in-out infinite;
}
.fl404-decor--a { top: -6%;  right: 26%; font-size: 30px; animation-delay: 0s; }
.fl404-decor--b { top: 40%;  right: 16%; font-size: 22px; animation-delay: 1.2s; }
.fl404-decor--c { top: 18%;  left: 20%;  font-size: 20px; animation-delay: 2.1s; }

@keyframes fl404-float {
	0%, 100% { transform: translateY(0) rotate(-4deg); }
	50%      { transform: translateY(-12px) rotate(4deg); }
}

/* ---------------------------------------------------------------------------
   Heading block
   --------------------------------------------------------------------------- */
.fl404-heading-block {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: 12px;
	width: 100%;
}
.fl404-title {
	font-family: var(--fl404-serif);
	font-weight: 700;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--fl404-brown);
	margin: 0;
}
.fl404-title__flower { font-size: 0.78em; }
.fl404-subtitle {
	font-family: var(--fl404-sans);
	font-weight: 600;
	font-size: clamp(15px, 2vw, 18px);
	color: var(--fl404-pink-600);
	margin: 0;
}
.fl404-desc {
	font-family: var(--fl404-sans);
	font-weight: 400;
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1.65;
	color: var(--fl404-ink);
	max-width: 520px;
	margin: 6px auto 0;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.fl404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 6px;
}
.fl404-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 28px;
	border-radius: var(--fl404-radius-pill);
	font-family: var(--fl404-sans);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 180ms var(--fl404-ease-out), box-shadow 220ms ease,
		background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.fl404-btn__icon { font-size: 1.05em; line-height: 1; display: inline-flex; }
.fl404-btn__icon svg { width: 1em; height: 1em; fill: currentColor; }
.fl404-btn--solid {
	background: linear-gradient(135deg, var(--fl404-pink-600) 0%, var(--fl404-pink-700) 100%);
	color: var(--fl404-white);
	box-shadow: var(--fl404-shadow-pink);
}
.fl404-btn--solid:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(230, 73, 128, 0.40); }
.fl404-btn--solid:active { transform: translateY(0) scale(0.98); }
.fl404-btn--outline {
	background: var(--fl404-white);
	color: var(--fl404-brown);
	border-color: var(--fl404-line);
}
.fl404-btn--outline:hover { transform: translateY(-2px); border-color: var(--fl404-pink-400); color: var(--fl404-pink-700); }
.fl404-btn--outline:active { transform: translateY(0) scale(0.98); }

/* ---------------------------------------------------------------------------
   Section labels (eyebrow)
   --------------------------------------------------------------------------- */
.fl404-label {
	display: block;
	font-family: var(--fl404-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fl404-muted);
	margin-bottom: 14px;
}

/* ---------------------------------------------------------------------------
   Search box
   --------------------------------------------------------------------------- */
.fl404-search-block { width: 100%; max-width: 380px; margin-top: 6px; }
.fl404-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 22px;
	background: var(--fl404-white);
	border: 1.5px solid var(--fl404-line);
	border-radius: var(--fl404-radius-pill);
	box-shadow: var(--fl404-shadow-soft);
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.fl404-search:focus-within { border-color: var(--fl404-pink-400); box-shadow: 0 10px 26px rgba(230, 73, 128, 0.14); }
.fl404-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--fl404-sans);
	font-size: 15px;
	color: var(--fl404-brown);
	padding: 10px 0;
}
.fl404-search__input::placeholder { color: var(--fl404-muted); }
.fl404-search__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--fl404-pink-600) 0%, var(--fl404-pink-700) 100%);
	color: var(--fl404-white);
	cursor: pointer;
	box-shadow: var(--fl404-shadow-pink);
	transition: transform 180ms var(--fl404-ease-out), box-shadow 220ms ease;
}
.fl404-search__btn:hover { transform: scale(1.05); }
.fl404-search__btn:active { transform: scale(0.95); }
.fl404-search__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------------------------------------------------------------------------
   Collection pills
   --------------------------------------------------------------------------- */
.fl404-collections { width: 100%; margin-top: 6px; }
.fl404-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.fl404-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 12px;
	border-radius: var(--fl404-radius-pill);
	background: var(--fl404-white);
	border: 1px solid var(--fl404-line-soft);
	font-family: var(--fl404-sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--fl404-brown-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: transform 180ms var(--fl404-ease-out), border-color 200ms ease,
		background-color 200ms ease, box-shadow 200ms ease;
}
.fl404-pill__icon { font-size: 1em; line-height: 1; }
.fl404-pill:hover {
	transform: translateY(-2px);
	border-color: var(--fl404-pink-400);
	background: var(--fl404-pink-050);
	box-shadow: 0 8px 18px rgba(230, 73, 128, 0.12);
}

/* ---------------------------------------------------------------------------
   Trust features
   --------------------------------------------------------------------------- */
.fl404-features {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 30px;
	width: 100%;
	margin-top: 14px;
	padding-top: 24px;
	border-top: 1px solid var(--fl404-line-soft);
}
.fl404-feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.fl404-feature__icon { font-size: 22px; line-height: 1; }
.fl404-feature__icon svg { width: 24px; height: 24px; }
.fl404-feature__label {
	font-family: var(--fl404-sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--fl404-muted);
}

/* ---------------------------------------------------------------------------
   Standalone widget wrappers (so each block stands alone in a Container)
   --------------------------------------------------------------------------- */
.fl404-block { width: 100%; }
.fl404-block--center { text-align: center; }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.fl404-inner { gap: 18px; }
	.fl404-actions { width: 100%; }
	.fl404-btn { flex: 1 1 auto; }
	.fl404-features { gap: 18px 24px; }
	.fl404-feature { flex: 0 0 40%; }
	.fl404-decor--c { display: none; }
}

@media (max-width: 479px) {
	.fl404-feature { flex: 0 0 45%; }
}

/* Accessibility — honor reduced motion */
@media (prefers-reduced-motion: reduce) {
	.fl404-decor { animation: none; }
	.fl404-btn, .fl404-pill, .fl404-search__btn { transition: none; }
}