/* ==========================================================================
   Restrict for Elementor — Admin 2.0 ("Restricted 2.0" brand layer)
   --------------------------------------------------------------------------
   Additive restyle of the plugin welcome/settings screen. Loaded AFTER
   admin.css on `toplevel_page_restrict_for_elementor_settings` only.
   Palette/type mirrors the "Restricted 2.0" theme (see _design-ref).
   All selectors are scoped to the `.rfe-brand-2` wrapper added in
   settings/settings.php — nothing here leaks into other admin screens.
   No hooks, keys, slugs or behavior are affected by this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Design tokens (declared on the template's page wrapper)
   -------------------------------------------------------------------------- */

.rfe-welcome-screen-wrap.rfe-brand-2 {
  --rfe-purple-900: #42213F;
  --rfe-purple-700: #5A2C54;
  --rfe-mauve-500: #9F5992;
  --rfe-amber-400: #FFBD48;
  --rfe-amber-400-hover: #F2AE35;
  --rfe-cream-200: #FEDEA6;
  --rfe-cyan-100: #DAF2F6;
  --rfe-ink: #221126;
  --rfe-muted: #6B5A68;
  --rfe-paper: #FFFFFF;
  --rfe-bg-warm: #FFFBF5;
  --rfe-line: #EFE4EA;
  --rfe-font-display: "Sauce Grotesk", "Inter", -apple-system, "Segoe UI", sans-serif;
  --rfe-font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --rfe-radius-s: 10px;
  --rfe-radius-m: 16px;
  --rfe-radius-l: 24px;
  --rfe-radius-pill: 999px;
  --rfe-shadow-s: 0 1px 2px rgba(34, 17, 38, .06), 0 2px 8px rgba(34, 17, 38, .06);
  --rfe-shadow-m: 0 4px 12px rgba(34, 17, 38, .08), 0 12px 32px rgba(34, 17, 38, .10);
  --rfe-focus: 3px solid rgba(159, 89, 146, .5);
  --rfe-ease: cubic-bezier(.22, .68, .28, 1);
}

/* Warm page backdrop, scoped to this admin screen only */
body.toplevel_page_restrict_for_elementor_settings #wpcontent {
  background: #FFFBF5;
}

/* --------------------------------------------------------------------------
   1. Page frame & base typography
   -------------------------------------------------------------------------- */

.rfe-brand-2 {
  float: none;
  width: auto;
  max-width: 1240px;
  margin: 12px 0 0;
  padding-bottom: 48px;
  font-family: var(--rfe-font-body);
  color: var(--rfe-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.rfe-brand-2,
.rfe-brand-2 .rfe_wrap,
.rfe-brand-2 .rfe_wrap p,
.rfe-brand-2 p,
.rfe-brand-2 span,
.rfe-brand-2 a,
.rfe-brand-2 h1,
.rfe-brand-2 h3 {
  font-family: var(--rfe-font-body);
}

.rfe-brand-2 h1,
.rfe-brand-2 h3,
.rfe-brand-2 .rfe-premium-button,
.rfe-brand-2 .rfe-premium-text span {
  font-family: var(--rfe-font-display);
}

.rfe-brand-2 ::selection {
  background: var(--rfe-cream-200);
  color: var(--rfe-purple-900);
}

.rfe-brand-2 a:focus-visible,
.rfe-brand-2 button:focus-visible,
.rfe-brand-2 .rfe-play-icon:focus-visible {
  outline: var(--rfe-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* Neutralize legacy layout boxes (floats / white container card) */
.rfe-brand-2 .rfe_wrap {
  float: none;
  width: auto;
  margin: 0;
}

.rfe-brand-2 .rfe-options-wrap.rfe-current-welcome {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.rfe-brand-2 .rfe-welcome-screen {
  width: auto;
  padding: 0;
}

.rfe-brand-2 .rfe-free-features {
  float: none;
  width: auto;
}

/* --------------------------------------------------------------------------
   2. Hero band (settings header)
   -------------------------------------------------------------------------- */

.rfe-brand-2 .rfe-settings-header {
  position: relative;
  float: none;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin: 12px 0 0;
  padding: clamp(28px, 4.5vw, 52px);
  background: radial-gradient(120% 90% at 50% 0%, #5A2C54 0%, #42213F 62%);
  border-radius: var(--rfe-radius-l);
  box-shadow: var(--rfe-shadow-m);
  overflow: hidden;
}

/* Subtle amber glow, bottom-left */
.rfe-brand-2 .rfe-settings-header::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  left: -180px;
  bottom: -280px;
  background: radial-gradient(circle, rgba(255, 189, 72, .20), transparent 65%);
  pointer-events: none;
}

/* Subtle mauve glow, top-right */
.rfe-brand-2 .rfe-settings-header::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -160px;
  top: -240px;
  background: radial-gradient(circle, rgba(159, 89, 146, .35), transparent 65%);
  pointer-events: none;
}

.rfe-brand-2 .rfe-settings-header > * {
  position: relative;
  z-index: 1;
}

/* Logo chip */
.rfe-brand-2 .rfe-restrict-logo {
  float: none;
  flex: 0 0 auto;
  background: var(--rfe-paper);
  border-radius: var(--rfe-radius-m);
  padding: 12px 14px;
  line-height: 0;
  box-shadow: var(--rfe-shadow-s);
}

.rfe-brand-2 .rfe-restrict-logo img {
  display: block;
  width: 70px;
  height: auto;
}

/* Version pill (cream) */
.rfe-brand-2 .rfe-version {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  float: none;
  white-space: nowrap;
  background: var(--rfe-cream-200);
  color: var(--rfe-purple-900);
  border-radius: var(--rfe-radius-pill);
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  box-shadow: var(--rfe-shadow-s);
}

/* Title block */
.rfe-brand-2 .rfe-header-title {
  float: none;
  flex: 1 1 380px;
  margin: 0;
  width: auto;
}

.rfe-brand-2 .rfe-settings-header h1 {
  margin: 0 0 10px;
  padding: 0;
  color: var(--rfe-paper);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}

.rfe-brand-2 .rfe-settings-header .rfe-header-title > span {
  display: block;
  width: auto;
  max-width: 58ch;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.65;
  text-transform: none;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   3. Hint / video tutorial block (glass card inside the hero)
   -------------------------------------------------------------------------- */

.rfe-brand-2 .rfe-restrict-elementor-hint {
  float: none;
  flex: 1 1 100%;
  width: auto;
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--rfe-radius-m);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.rfe-brand-2 .rfe-restrict-elementor-hint > img {
  float: none;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 6px;
  box-sizing: content-box;
  background: rgba(255, 189, 72, .16);
  border-radius: 50%;
}

.rfe-brand-2 .rfe-restrict-elementor-hint p {
  float: none;
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  color: rgba(255, 255, 255, .85);
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.6;
}

.rfe-brand-2 .rfe-restrict-elementor-hint p a {
  color: var(--rfe-cream-200);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rfe-brand-2 .rfe-restrict-elementor-hint p a:hover {
  color: var(--rfe-amber-400);
}

/* Play trigger — amber pill button */
.rfe-brand-2.rfe-welcome-screen-wrap .rfe-play-icon,
.rfe-brand-2 .rfe-play-icon {
  float: none;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rfe-amber-400);
  border: none;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(255, 189, 72, .35);
  cursor: pointer;
  transition: transform .25s var(--rfe-ease), background .25s var(--rfe-ease), box-shadow .25s var(--rfe-ease);
}

.rfe-brand-2 .rfe-play-icon:hover,
.rfe-brand-2 .rfe-play-icon:focus-visible {
  background: var(--rfe-amber-400-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 189, 72, .45);
}

.rfe-brand-2 .rfe-play-icon img {
  width: 22px;
  height: 22px;
  margin: 0;
}

.rfe-brand-2 .rfe-popup-tutorial img:hover {
  filter: none;
}

/* --------------------------------------------------------------------------
   4. Features header row (eyebrow + top CTA)
   -------------------------------------------------------------------------- */

.rfe-brand-2 .rfe-feature-header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 36px 0 20px;
}

.rfe-brand-2 .rfe-feature-header-wrap > span {
  float: none;
  display: inline-block;
  width: auto;
  margin: 0;
  color: var(--rfe-mauve-500);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.rfe-brand-2 .rfe_wrap .rfe-top-premium {
  float: none;
}

/* --------------------------------------------------------------------------
   5. Feature grid — white cards
   -------------------------------------------------------------------------- */

.rfe-brand-2 .rfe-sections-wrap {
  float: none;
  width: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.rfe-brand-2 .rfe-welcome-screen .rfe-half-section,
.rfe-brand-2 .rfe-welcome-screen .rfe-sections-wrap .rfe-half-section:nth-child(2n) {
  position: relative;
  float: none;
  width: auto;
  margin: 0;
  display: flex;
  align-items: stretch;
  background: var(--rfe-paper);
  border: 1px solid var(--rfe-line);
  border-radius: var(--rfe-radius-l);
  box-shadow: var(--rfe-shadow-s);
  overflow: hidden;
  transition: transform .3s var(--rfe-ease), box-shadow .3s var(--rfe-ease), border-color .3s var(--rfe-ease);
}

.rfe-brand-2 .rfe-welcome-screen .rfe-half-section:hover {
  transform: translateY(-2px);
  box-shadow: var(--rfe-shadow-m);
  border-color: rgba(159, 89, 146, .35);
}

/* Premium cards: mauve-tinted border + amber/mauve accent bar */
.rfe-brand-2 .rfe-half-section.rfe-premium-section {
  border-color: rgba(159, 89, 146, .30);
}

.rfe-brand-2 .rfe-half-section.rfe-premium-section::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rfe-amber-400), var(--rfe-mauve-500));
}

/* Illustration panel (warm, full-bleed crop like the legacy look) */
.rfe-brand-2 .rfe-welcome-img {
  position: relative;
  float: none;
  flex: 0 0 190px;
  width: 190px;
  height: auto;
  min-height: 0;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(254, 222, 166, .45), transparent 62%),
    var(--rfe-bg-warm);
  border-right: 1px solid var(--rfe-line);
  border-radius: 0;
  overflow: hidden;
}

.rfe-brand-2 .rfe-welcome-img img {
  position: absolute;
  inset: 0;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

/* Text body */
.rfe-brand-2 .rfe-welcome-text,
.rfe-brand-2 .rfe-free-features .rfe-welcome-text,
.rfe-brand-2 .rfe-premium-section .rfe-welcome-text {
  position: relative;
  float: none;
  flex: 1 1 auto;
  width: auto;
  min-height: 0;
  padding: 28px 28px 30px;
  background: transparent;
  border-radius: 0;
}

.rfe-brand-2 .rfe-welcome-text h3 {
  margin: 0 0 10px;
  padding: 0;
  color: var(--rfe-purple-900);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* Keep headings clear of the corner badges */
.rfe-brand-2 .rfe-premium-section .rfe-welcome-text h3 {
  padding-right: 124px;
}

.rfe-brand-2 .rfe-half-section:not(.rfe-premium-section) .rfe-welcome-text h3 {
  padding-right: 44px;
}

.rfe-brand-2 .rfe-welcome-text p {
  margin: 0;
  color: var(--rfe-muted);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.65;
}

.rfe-brand-2 .rfe-welcome-text p a {
  color: var(--rfe-mauve-500);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rfe-brand-2 .rfe-welcome-text p a:hover {
  color: var(--rfe-purple-700);
}

.rfe-brand-2 .rfe-welcome-text p strong {
  color: var(--rfe-ink);
  font-weight: 600;
}

/* Legacy decorative corner — superseded by the card radius */
.rfe-brand-2 .rfe-rouned-box {
  display: none;
}

/* --------------------------------------------------------------------------
   6. Corner badges
   -------------------------------------------------------------------------- */

/* "Go Premium" — amber pill (replaces the legacy expanding circle) */
.rfe-brand-2 .rfe-premium-section-button,
.rfe-brand-2 .rfe-premium-section-button:hover {
  position: absolute;
  top: 22px;
  right: 22px;
  width: auto;
  height: auto;
  overflow: visible;
  background: transparent;
  border-radius: var(--rfe-radius-pill);
}

.rfe-brand-2 .rfe-premium-section-button a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 14px;
  background: var(--rfe-amber-400);
  border-radius: var(--rfe-radius-pill);
  text-decoration: none;
  transition: background .25s var(--rfe-ease), box-shadow .25s var(--rfe-ease), transform .25s var(--rfe-ease);
}

.rfe-brand-2 .rfe-premium-section-button a:hover,
.rfe-brand-2 .rfe-premium-section-button a:focus-visible {
  background: var(--rfe-amber-400-hover);
  box-shadow: var(--rfe-shadow-s);
  transform: translateY(-2px);
}

.rfe-brand-2 .rfe-welcome-text .rfe-premium-section-button span {
  position: static;
  float: none;
  display: inline-block;
  width: auto;
  margin: 0;
  color: var(--rfe-purple-900);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rfe-brand-2 .rfe-premium-section-button .rfe-premium-icon,
.rfe-brand-2 .rfe-premium-section-button:hover .rfe-premium-icon {
  position: static;
  width: 24px;
  height: 24px;
  background: var(--rfe-purple-900);
  background-color: var(--rfe-purple-900);
  border-radius: 50%;
}

.rfe-brand-2 .rfe-premium-section-button .rfe-premium-icon:before {
  margin: 5px 0 0 4px;
}

/* "Included" check — deep purple disc with cream ring */
.rfe-brand-2 .rfe-already-featured {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  background: var(--rfe-purple-900);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--rfe-cream-200);
}

.rfe-brand-2 .rfe-already-featured:before {
  margin: 10px 0 0 8px;
}

/* --------------------------------------------------------------------------
   7. Buttons (pill system)
   -------------------------------------------------------------------------- */

.rfe-brand-2 .rfe_wrap .button-primary.rfe-premium-button,
.rfe-brand-2 .rfe_wrap a.rfe-premium-button,
.rfe-brand-2 .rfe-premium-text a.rfe-premium-button {
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  margin: 0;
  padding: 14px 28px;
  background: var(--rfe-amber-400);
  border: 1.5px solid transparent;
  border-radius: var(--rfe-radius-pill);
  color: var(--rfe-purple-900);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: none;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: transform .25s var(--rfe-ease), box-shadow .25s var(--rfe-ease), background .25s var(--rfe-ease);
}

.rfe-brand-2 .rfe_wrap .button-primary.rfe-premium-button:hover,
.rfe-brand-2 .rfe_wrap .button-primary.rfe-premium-button:focus,
.rfe-brand-2 .rfe-premium-text a.rfe-premium-button:hover,
.rfe-brand-2 .rfe-premium-text a.rfe-premium-button:focus {
  background: var(--rfe-amber-400-hover);
  border-color: transparent;
  color: var(--rfe-purple-900);
  transform: translateY(-2px);
  box-shadow: var(--rfe-shadow-m);
  outline: none;
}

/* --------------------------------------------------------------------------
   8. Bottom upsell band (deep purple, amber CTA)
   -------------------------------------------------------------------------- */

.rfe-brand-2 .rfe-premium-text {
  position: relative;
  float: none;
  width: auto;
  margin: 28px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: clamp(26px, 4vw, 40px) clamp(26px, 4vw, 44px);
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(159, 89, 146, .35), transparent 70%),
    radial-gradient(120% 140% at 50% 0%, #5A2C54 0%, #42213F 62%);
  border-radius: var(--rfe-radius-l);
  box-shadow: var(--rfe-shadow-m);
  overflow: hidden;
}

.rfe-brand-2 .rfe-premium-text span,
.rfe-brand-2 .rfe-free-features .rfe-premium-text span {
  position: relative;
  z-index: 1;
  float: none;
  display: block;
  width: auto;
  max-width: 36ch;
  margin: 0;
  color: var(--rfe-paper);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-transform: none;
}

.rfe-brand-2 .rfe-premium-text a.rfe-premium-button {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1100px) {

  .rfe-brand-2 .rfe-sections-wrap {
    grid-template-columns: 1fr;
  }

  .rfe-brand-2 .rfe-welcome-img {
    flex-basis: 170px;
    width: 170px;
  }
}

@media only screen and (max-width: 782px) {

  .rfe-brand-2 {
    margin-top: 6px;
  }

  .rfe-brand-2 .rfe-settings-header {
    gap: 18px;
  }

  .rfe-brand-2 .rfe-header-title {
    flex-basis: 100%;
  }

  .rfe-brand-2 .rfe-feature-header-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media only screen and (max-width: 640px) {

  .rfe-brand-2 .rfe-welcome-screen .rfe-half-section,
  .rfe-brand-2 .rfe-welcome-screen .rfe-sections-wrap .rfe-half-section:nth-child(2n) {
    flex-direction: column;
  }

  .rfe-brand-2 .rfe-welcome-img {
    flex: none;
    width: 100%;
    height: 150px;
    border-right: none;
    border-bottom: 1px solid var(--rfe-line);
  }

  .rfe-brand-2 .rfe-premium-section .rfe-welcome-text h3,
  .rfe-brand-2 .rfe-half-section:not(.rfe-premium-section) .rfe-welcome-text h3 {
    padding-right: 0;
  }

  /* Corner badges move below the text flow on small cards */
  .rfe-brand-2 .rfe-premium-section-button,
  .rfe-brand-2 .rfe-premium-section-button:hover,
  .rfe-brand-2 .rfe-already-featured {
    top: 16px;
    right: 16px;
  }

  .rfe-brand-2 .rfe-premium-text {
    align-items: flex-start;
    flex-direction: column;
  }

  .rfe-brand-2 .rfe-restrict-elementor-hint {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .rfe-brand-2 .rfe-restrict-elementor-hint p {
    flex-basis: calc(100% - 62px);
  }
}

@media only screen and (max-width: 480px) {

  .rfe-brand-2 .rfe-settings-header {
    padding: 24px 20px;
  }

  .rfe-brand-2 .rfe-welcome-text,
  .rfe-brand-2 .rfe-free-features .rfe-welcome-text,
  .rfe-brand-2 .rfe-premium-section .rfe-welcome-text {
    padding: 22px 20px 24px;
  }

  .rfe-brand-2 .rfe_wrap .button-primary.rfe-premium-button,
  .rfe-brand-2 .rfe-premium-text a.rfe-premium-button {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   10. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .rfe-brand-2 .rfe-half-section,
  .rfe-brand-2 .rfe-play-icon,
  .rfe-brand-2 .rfe-premium-button,
  .rfe-brand-2 .rfe-premium-section-button a {
    transition: none;
  }
}