/* SF24 Manual Orders — Aurora Bento Light wrapper around the order-portal plugin */
:root {
  --mo-bg: #f3f1ec; --mo-sf: #ffffff;
  --mo-bd: rgba(80,40,140,.10); --mo-bd-strong: rgba(80,40,140,.18);
  --mo-ac: #7c3aed; --mo-ac2: #8b5cf6;
  --mo-gold: #EDC432; --mo-orange: #f58529; --mo-pink: #DD2A7B;
  --mo-tx: #1a1033; --mo-ts: #6b6589; --mo-tm: #9f9bb5;
  --mo-r: 16px; --mo-rl: 22px;
  --mo-sh: 0 1px 3px rgba(80,40,140,.06), 0 8px 28px rgba(80,40,140,.06);
  --mo-sh-lift: 0 4px 14px rgba(80,40,140,.08), 0 18px 44px rgba(80,40,140,.10);
  --mo-fh: 'Rubik','Inter',-apple-system,sans-serif;
  --mo-fb: 'Nunito','Inter',system-ui,sans-serif;
}

.sf24-mo {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px clamp(16px,3vw,56px) 80px;
  font-family: var(--mo-fb);
  color: var(--mo-tx);
  box-sizing: border-box;
}
.sf24-mo * { box-sizing: border-box; }

/* HERO */
.sf24-mo-hero {
  text-align: center;
  padding: 40px 24px 32px;
  margin-bottom: 28px;
  background:
    radial-gradient(circle at 20% 0%, rgba(124,58,237,.08), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(245,133,41,.06), transparent 55%);
  border-radius: 28px;
}
.sf24-mo-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--mo-bd-strong);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  color: var(--mo-tx);
  margin-bottom: 22px;
  box-shadow: 0 6px 18px -8px rgba(124,58,237,.18);
}
.sf24-mo-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10b981;
  animation: sf24-mo-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes sf24-mo-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.65); }
  50% { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
}
.sf24-mo-h1 {
  font-family: var(--mo-fh);
  font-size: clamp(36px,6vw,64px);
  font-weight: 900;
  line-height: 0.96;
  margin: 0 0 18px;
  letter-spacing: -0.025em;
}
.sf24-mo-h1 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--mo-pink) 0%, var(--mo-orange) 50%, var(--mo-gold) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.sf24-mo-sub {
  max-width: 620px;
  margin: 0 auto 22px;
  font-size: 15px; line-height: 1.55;
  color: var(--mo-ts);
  font-weight: 500;
}
.sf24-mo-sub code {
  background: rgba(124,58,237,.08);
  color: var(--mo-ac);
  padding: 1px 7px;
  border-radius: 5px;
  font-family: 'JetBrains Mono','Menlo',monospace;
  font-size: 13.5px;
  font-weight: 700;
}
.sf24-mo-trust {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
  color: #059669;
  font-weight: 600;
}
.sf24-mo-trust span {
  display: inline-flex; align-items: center; gap: 6px;
}
.sf24-mo-trust svg { color: #059669; flex-shrink: 0; }

/* PORTAL CARD WRAPPER — provides Aurora card framing around the plugin's own form
   Plugin draws its own internals (.sf24op-* classes), we just give it a clean shell. */
.sf24-mo-portal {
  margin-bottom: 28px;
}
.sf24-mo-portal-card {
  background: var(--mo-sf);
  border: 1px solid var(--mo-bd);
  border-radius: var(--mo-rl);
  padding: clamp(18px,3vw,28px);
  box-shadow: var(--mo-sh-lift);
  position: relative;
  overflow: hidden;
}
.sf24-mo-portal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mo-ac) 0%, var(--mo-pink) 50%, var(--mo-orange) 100%);
  pointer-events: none;
  z-index: 1;
}

/* === Plugin brand-mark — embed the Socialfy24 S-logo into the empty .sf24op-mark
       gradient square so users see the actual brand asset, not a blank purple box. === */
.sf24-mo .sf24op-mark,
body .sf24op-portal .sf24op-mark {
  background-image:
    url("https://socialfy24.com/wp-content/uploads/2026/04/Socialfy24-S-Logo.webp"),
    linear-gradient(135deg, #6d28d9, #7c3aed) !important;
  background-size: 28px 28px, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* === Plugin button overrides — Hello-Elementor's default <button> styling
       hijacks .sf24op-btn text color to its theme accent (pink). Force back to
       the plugin's intended purple-gradient + white text. === */
.sf24-mo .sf24op-btn,
.sf24-mo .sf24op-btn:link,
.sf24-mo .sf24op-btn:visited,
.sf24-mo .sf24op-btn:hover,
.sf24-mo .sf24op-btn:active,
.sf24-mo .sf24op-btn:focus,
body .sf24op-portal .sf24op-btn,
body .sf24op-portal button.sf24op-btn {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
  text-shadow: none !important;
  font-family: 'Plus Jakarta Sans', 'Rubik', 'Inter', sans-serif !important;
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%) !important;
  background-color: #7c3aed !important;
  background-image: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%) !important;
  border: 0 !important;
  text-transform: none !important;
  letter-spacing: -0.2px !important;
  outline: none !important;
}
.sf24-mo .sf24op-btn:hover,
body .sf24op-portal .sf24op-btn:hover {
  background: linear-gradient(135deg, #5b21b6 0%, #6d28d9 100%) !important;
  background-color: #6d28d9 !important;
  background-image: linear-gradient(135deg, #5b21b6 0%, #6d28d9 100%) !important;
  color: #fff !important;
}
/* Ghost button (Logout) — keep transparent + purple text on ALL states.
   Hello-Elementor injects a pink hover on `<button>` defaults; force-override every state. */
.sf24-mo .sf24op-btn-ghost,
.sf24-mo .sf24op-btn-ghost:link,
.sf24-mo .sf24op-btn-ghost:visited,
body .sf24op-portal .sf24op-btn-ghost,
body button.sf24op-btn-ghost {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
  border: 1.5px solid rgba(124,58,237,.25) !important;
  text-decoration: none !important;
  text-shadow: none !important;
  outline: none !important;
}
.sf24-mo .sf24op-btn-ghost:hover,
.sf24-mo .sf24op-btn-ghost:focus,
.sf24-mo .sf24op-btn-ghost:focus-visible,
.sf24-mo .sf24op-btn-ghost:active,
body .sf24op-portal .sf24op-btn-ghost:hover,
body .sf24op-portal .sf24op-btn-ghost:focus,
body .sf24op-portal .sf24op-btn-ghost:active,
body button.sf24op-btn-ghost:hover,
body button.sf24op-btn-ghost:focus,
body button.sf24op-btn-ghost:active {
  background: rgba(124,58,237,.06) !important;
  background-color: rgba(124,58,237,.06) !important;
  background-image: none !important;
  border-color: #7c3aed !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
  outline: none !important;
  text-decoration: none !important;
}

/* === Ensure ALL plugin elements are clickable (Hello-Elementor sometimes
       sets pointer-events on .entry-content children) === */
.sf24-mo .sf24op-portal,
.sf24-mo .sf24op-portal *,
.sf24-mo .sf24op-cat,
.sf24-mo .sf24op-cat *,
.sf24-mo [data-sf24op-cat],
.sf24-mo [data-sf24op-cat] *,
.sf24-mo [data-sf24op-cat-check] {
  pointer-events: auto !important;
}
.sf24-mo .sf24op-cat,
.sf24-mo [data-sf24op-cat] {
  cursor: pointer !important;
}
.sf24-mo .sf24op-cat input,
.sf24-mo [data-sf24op-cat-check] {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* FOOT */
.sf24-mo-foot {
  text-align: center;
}
.sf24-mo-foot-text {
  margin: 0;
  font-size: 13.5px;
  color: var(--mo-ts);
  line-height: 1.55;
  font-weight: 500;
  max-width: 660px;
  margin: 0 auto;
}
.sf24-mo-foot-text a {
  color: var(--mo-ac);
  text-decoration: none !important;
  border-bottom: 1.5px solid rgba(124,58,237,.25);
  font-weight: 700;
  transition: border-color .15s;
}
.sf24-mo-foot-text a:hover { border-bottom-color: var(--mo-ac); }

@media (max-width: 720px) {
  .sf24-mo { padding: 12px 12px 60px; }
  .sf24-mo-hero { padding: 28px 14px 22px; margin-bottom: 22px; border-radius: 22px; }
  .sf24-mo-portal-card { padding: 14px; }
}