/* 404 page (Theme Builder template "Safy Kitchen - 404", built by build/tools/build-404.js): big "4 [plate with the logo and steam] 4", a friendly Arabic line, two buttons, a search box, quick category chips.
   Brand colours/tokens from tokens.css; spacing 4/8/12/16/24/32. Motion is gentle and switched off for people who prefer reduced motion. */
.elementor-element.safy-nf { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px var(--gutter) var(--section-pad); text-align: center; overflow: hidden; background: radial-gradient(circle at 12% 18%, var(--c-tint-pink), transparent 42%), radial-gradient(circle at 88% 70%, var(--c-tint-purple), transparent 44%), var(--c-white); }
.safy-nf *, .safy-nf .elementor-heading-title { font-family: Tajawal, sans-serif; }
.safy-nf .e-con::before, .safy-nf .e-con::after, .safy-nf.e-con::before, .safy-nf.e-con::after { content: none; }
.safy-nf .elementor-widget-container { padding: 0; margin: 0; }
.elementor-element.safy-nf > .e-con, .elementor-element.safy-nf .e-con { --width: auto; width: auto; }

/* leaves in the corners (decor already used by the home page) */
.elementor-element.safy-nf::before { content: ""; display: block; position: absolute; inset-block: 0 -35px; inset-inline-start: -40px; width: 200px; background: url("../img/home/leafs.webp") 0 100% / contain no-repeat; filter: blur(2px); opacity: .55; pointer-events: none; }
.elementor-element.safy-nf::after { content: ""; display: block; position: absolute; inset-block-start: 32px; inset-inline-end: 6%; width: 64px; height: 64px; background: url("../img/home/heart-left.webp") center / contain no-repeat; opacity: .8; animation: safy-nf-beat 3.2s ease-in-out infinite; pointer-events: none; }

/* 4 [plate] 4 */
.elementor-element.safy-nf__digits { display: flex; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; justify-content: center; gap: 24px; margin-top: 8px; }
.safy-nf__num .elementor-heading-title { margin: 0; font-size: clamp(96px, 20vw, 190px); font-weight: 800; line-height: 1; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent !important; letter-spacing: -2px; }
.elementor-element.safy-nf .safy-nf__plate { position: relative; flex: none; width: clamp(104px, 17vw, 168px); --width: clamp(104px, 17vw, 168px); aspect-ratio: 1; border-radius: 50%; background: var(--c-white) url("../img/logo-color.png") center / 84% auto no-repeat; box-shadow: 0 0 0 clamp(6px, 1vw, 10px) var(--c-white), 0 0 0 clamp(8px, 1.3vw, 13px) var(--c-primary), 0 22px 44px rgba(126, 34, 161, .28); animation: safy-nf-float 4.2s ease-in-out infinite; }
/* steam: three wavy lines rising from the plate */
.elementor-element.safy-nf .safy-nf__plate::before { content: ""; display: block; position: absolute; inset-inline: 18%; bottom: 100%; height: 56%; margin-bottom: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 60' fill='none' stroke='%23E32368' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M15 58c-8-10 8-16 0-27s8-17 0-29'/%3E%3Cpath d='M45 58c-8-10 8-16 0-27s8-17 0-29'/%3E%3Cpath d='M75 58c-8-10 8-16 0-27s8-17 0-29'/%3E%3C/svg%3E") center bottom / contain no-repeat; opacity: .55; animation: safy-nf-steam 2.6s ease-in-out infinite; }

.safy-nf__title .elementor-heading-title { margin: 8px 0 0; font-size: 36px; font-weight: 800; line-height: 1.4; color: var(--c-ink) !important; }
.safy-nf__text p { max-width: 520px; margin: 0; font-size: 17px; line-height: 2; color: var(--c-text-muted); }

/* buttons */
.elementor-element.safy-nf__actions { display: flex; flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.safy-nf__btn .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 32px; border: 1.5px solid transparent; border-radius: var(--radius-s); background: var(--grad-brand); background-origin: border-box; color: var(--c-white); font-size: 17px; font-weight: 700; line-height: 1; }
.safy-nf__btn .elementor-button:hover, .safy-nf__btn .elementor-button:focus-visible { background: var(--grad-brand); color: var(--c-white); filter: brightness(.93); }
.safy-nf__btn--ghost .elementor-button { border-color: var(--c-primary); background: var(--c-white); color: var(--c-primary); }
.safy-nf__btn--ghost .elementor-button:hover, .safy-nf__btn--ghost .elementor-button:focus-visible { background: var(--c-tint-pink); color: var(--c-primary); filter: none; }
.safy-nf__btn .elementor-button-icon { margin: 0; font-size: 18px; line-height: 1; }
.safy-nf__btn .elementor-button-icon svg { width: 18px; height: 18px; color: currentColor; }

/* search box */
.elementor-element.safy-nf__search { width: min(100%, 520px); margin-top: 8px; }
.safy-nf__search .elementor-search-form__container { min-height: 56px; border: 1px solid var(--c-line) !important; border-radius: var(--radius-m) !important; background: var(--c-white); box-shadow: var(--shadow-card); overflow: hidden; }
.safy-nf__search .elementor-search-form__container:focus-within { border-color: var(--c-primary) !important; box-shadow: 0 0 0 3px rgba(227, 35, 104, .12); }
.safy-nf__search input.elementor-search-form__input { height: 54px; padding: 0 16px; border: 0 !important; outline: 0; background: transparent !important; font-size: 16px; color: var(--c-ink); text-align: right; box-shadow: none !important; }
.safy-nf__search .elementor-search-form__submit { width: 56px; min-width: 56px; height: 56px; margin: 0; border: 0; border-radius: 0; background: var(--grad-brand) !important; color: var(--c-white) !important; }

/* quick chips */
.elementor-element.safy-nf__tip { display: flex; flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.safy-nf__tiplabel p { margin: 0; font-size: 15px; color: var(--c-text-muted); }
.safy-nf__chip .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 16px; border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-white); color: var(--c-ink); font-size: 14px; font-weight: 700; line-height: 1.5; }
.safy-nf__chip .elementor-button:hover, .safy-nf__chip .elementor-button:focus-visible { border-color: var(--c-primary); background: var(--c-tint-pink); color: var(--c-primary); }

@keyframes safy-nf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes safy-nf-steam { 0% { opacity: 0; transform: translateY(10px) scaleY(.9); } 40% { opacity: .6; } 100% { opacity: 0; transform: translateY(-12px) scaleY(1.05); } }
@keyframes safy-nf-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .elementor-element.safy-nf .safy-nf__plate, .elementor-element.safy-nf .safy-nf__plate::before, .elementor-element.safy-nf::after { animation: none; } }

@media (max-width: 767px) {
  .elementor-element.safy-nf { padding: 40px var(--gutter) var(--section-pad); gap: 12px; }
  .elementor-element.safy-nf__digits { gap: 12px; }
  .safy-nf__title .elementor-heading-title { font-size: 26px; }
  .safy-nf__text p { font-size: 15px; }
  .elementor-element.safy-nf__actions { width: 100%; flex-direction: column !important; }
  .safy-nf__btn .elementor-button { width: 100%; }
  .elementor-element.safy-nf::after { width: 44px; height: 44px; inset-inline-end: 4%; }
}