/* ═══════════════════════════════════════════════════════════════════════════
   SMART FORUM BUILDER — PREMIUM VISUAL OVERHAUL
   ═══════════════════════════════════════════════════════════════════════════
   Light mode. Ivory canvas, modern blue accent, DM Sans + Fraunces type.
   Loads AFTER smart-forum-public.css.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  --sfp-canvas: #F8F7F4;
  --sfp-canvas-tint: #F2F0EB;
  --sfp-surface: #FFFFFF;
  --sfp-ink: #1B1B18;
  --sfp-ink-2: #44443D;
  --sfp-ink-3: #70706A;
  --sfp-ink-4: #A3A39D;
  --sfp-border: #E8E6E1;
  --sfp-border-hover: #D4D1CB;
  --sfp-accent: #2563EB;
  --sfp-accent-hover: #1D4FD7;
  --sfp-accent-soft: rgba(37, 99, 235, 0.06);
  --sfp-accent-mid: rgba(37, 99, 235, 0.13);
  --sfp-shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.03);
  --sfp-shadow-2: 0 2px 4px rgba(0,0,0,.03), 0 8px 24px rgba(0,0,0,.06);
  --sfp-shadow-3: 0 4px 8px rgba(0,0,0,.03), 0 16px 48px rgba(0,0,0,.08);
  --sfp-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.18);
  --sfp-radius-s: 10px;
  --sfp-radius-m: 14px;
  --sfp-radius-l: 18px;
  --sfp-radius-pill: 999px;
  --sfp-speed: .2s;
  --sfp-ease: cubic-bezier(.25, .1, .25, 1);
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
body.smartforum-template-default,
#sf-primary,
#sf-primary *:not(i):not([class*="fa-"]):not(.dashicons):not([class*="icon"]) {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#sf-primary h1:not(.scp-description *),
#sf-primary h2:not(.scp-description *),
#sf-primary .sf-post-heading h2,
#sf-primary h1.sf-entry-title,
#sf-primary h2.sf-user-full-name,
#sf-primary h2.sf-course-title,
#sf-primary h2.sf-listing-title,
#sf-primary .sf-poster-content h1,
#sf-primary .sf-lr-form h4,
#sf-primary .sf-modal-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
}

/* ════════════════════════════════════════════════════════════════════════
   BUG FIXES — these address real usability issues
   ════════════════════════════════════════════════════════════════════════ */

/* FIX 1: "Log In" / "Grab by joining a course" buttons — force white text
   The admin has --sf-bg-color set dark and --sf-text-color also dark.
   All primary-action buttons must have white text to be readable. */
#sf-primary .sf-btn:not(.sf-btn-underline):not(.sf-btn-light):not(.sf-btn-white):not(.sf-btn-icon):not(.btn-transparent):not(.sf-comment-btn-outline):not(.sf-btn-danger-soft) {
  color: #FFFFFF !important;
}
#sf-primary .sf-btn.sf-btn-topic,
#sf-primary .sf-login-register-template-style .sf-lr-logon-button,
#sf-primary .sf-login-register-template-style .sf-lr-forgot-button,
#sf-primary .sf-btn.sf-btn-secondary,
#sf-primary .sf-login-btn,
#sf-primary .sf-signup-btn {
  color: #FFFFFF !important;
}

/* FIX 2: Notification dropdown + profile dropdown hidden behind sticky search bar.
   The sticky .sf-content-heading has z-index:10. The header is below it in stacking.
   We bump the header and its children so dropdowns are always on top. */
#sf-primary .sf-custom-header-for-lesson header {
  z-index: 100 !important;
  position: relative;
}
#sf-primary .sf-icons {
  z-index: 101 !important;
  position: relative;
}
/* Notification & profile dropdown panels themselves */
#sf-primary .sf-notification-box,
#sf-primary .sf-profile-links,
#sf-primary .sf-header-notification-box,
#sf-primary .sf-header-messages-box {
  z-index: 100002 !important;
}
/* Active notification panel */
#sf-primary .sf-header-notification-box.af-popup-active,
#sf-primary .sf-header-messages-box.af-popup-active {
  z-index: 100003 !important;
}

/* FIX 3: Login popup close (X) button clipped inside the popup.
   The popup has overflow:hidden from border-radius which hides the
   absolutely-positioned close button at top:-20px right:-20px.
   Move it inside the popup, top-right corner, clearly visible. */
#sf-primary .sf-login-registration-popup .sf-popup-popup-main {
  overflow: visible !important;
}
#sf-primary .sf-login-registration-popup .sf-popup-close-icon {
  position: absolute !important;
  top: -16px !important;
  right: -16px !important;
  z-index: 10 !important;
}
#sf-primary .sf-login-registration-popup .sf-popup-close-icon .sf-btn-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--sfp-ink) !important;
  color: #fff !important;
  box-shadow: var(--sfp-shadow-2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--sfp-surface) !important;
  cursor: pointer !important;
  transition: transform var(--sfp-speed), background var(--sfp-speed) !important;
}
#sf-primary .sf-login-registration-popup .sf-popup-close-icon .sf-btn-icon:hover {
  transform: scale(1.1) rotate(90deg) !important;
  background: var(--sfp-accent) !important;
}

/* FIX 4: Profile dropdown too hard to hover — gap between avatar and dropdown.
   The dropdown has margin-top:-5px creating a dead zone. Remove that gap
   and add a generous invisible hover bridge so the cursor doesn't lose focus. */
#sf-primary .sf-profile-links {
  margin-top: 0 !important;
  top: 100% !important;
  padding-top: 4px !important; /* tiny visual breathing room */
}
/* Invisible hover bridge — extends hover zone between avatar and dropdown */
#sf-primary .sf-user-profile::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  height: 15px;
  background: transparent;
}
/* Make sure the profile link container is wide enough to be easy to interact with */
#sf-primary .sf-profile-links {
  min-width: 190px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   VISUAL OVERHAUL — from here on, purely cosmetic
   ════════════════════════════════════════════════════════════════════════ */

/* ── CANVAS ─────────────────────────────────────────────────────────────── */
body.smartforum-template-default { background: var(--sfp-canvas) !important; }
#sf-primary .sf-bg-secondary,
#sf-primary .sf-community-content-column { background: var(--sfp-canvas) !important; }

/* ── HEADER ─────────────────────────────────────────────────────────────── */
#sf-primary .sf-custom-header-for-lesson header {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid var(--sfp-border) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) !important;
  height: 62px !important;
  padding: 0 20px !important;
}
#sf-primary .sf-logo img { height: 34px !important; transition: opacity var(--sfp-speed); }
#sf-primary .sf-logo img:hover { opacity: .8; }

/* Search pill */
#sf-primary .sf-custom-header-for-lesson .sf-search-bar input,
#sf-primary .sf-content-heading .sf-search-bar input {
  background: var(--sfp-canvas-tint) !important;
  border: 1px solid var(--sfp-border) !important;
  border-radius: var(--sfp-radius-pill) !important;
  padding: 9px 38px 9px 15px !important;
  font-size: 13.5px !important;
  color: var(--sfp-ink) !important;
  box-shadow: none !important;
  transition: border-color var(--sfp-speed), background var(--sfp-speed), box-shadow var(--sfp-speed) !important;
}
#sf-primary .sf-custom-header-for-lesson .sf-search-bar input:focus,
#sf-primary .sf-content-heading .sf-search-bar input:focus {
  background: var(--sfp-surface) !important;
  border-color: var(--sfp-accent) !important;
  box-shadow: var(--sfp-shadow-focus) !important;
}

/* User avatar in header */
#sf-primary .sf-user-menu img { border-radius: 8px !important; transition: box-shadow var(--sfp-speed); }
#sf-primary .sf-user-menu img:hover { box-shadow: 0 0 0 2px var(--sfp-accent-mid); }
#sf-primary a.sf-user-menu span.sf-user-name { font-weight: 600 !important; font-size: 13px !important; color: var(--sfp-ink) !important; }

/* Dropdown panels */
#sf-primary .sf-notification-box, #sf-primary .sf-profile-links,
#sf-primary .sf-header-notification-box, #sf-primary .sf-header-messages-box {
  background: var(--sfp-surface) !important; border: 1px solid var(--sfp-border) !important;
  border-radius: var(--sfp-radius-m) !important; box-shadow: var(--sfp-shadow-3) !important;
}
#sf-primary .sf-user-profile .sf-profile-links ul.sf-sub-menu-main li { border-bottom-color: var(--sfp-border) !important; }
#sf-primary .sf-user-profile .sf-profile-links ul.sf-sub-menu-main li a {
  font-size: 14px !important; font-weight: 500 !important; color: var(--sfp-ink-2) !important;
  padding: 11px 18px !important; transition: background var(--sfp-speed), color var(--sfp-speed) !important;
}
#sf-primary .sf-user-profile .sf-profile-links ul.sf-sub-menu-main li a:hover {
  background: var(--sfp-accent-soft) !important; color: var(--sfp-accent) !important;
}

/* ── SIDEBAR ────────────────────────────────────────────────────────────── */
#sf-primary .sf-community-menu-column { background: var(--sfp-surface) !important; border-right-color: var(--sfp-border) !important; }
#sf-primary h3.sf-heading-menu {
  text-transform: uppercase !important; font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: 0.1em !important; color: var(--sfp-ink-4) !important; font-family: 'DM Sans', sans-serif !important;
}
#sf-primary a.sf-menu-link-text, #sf-primary .sf-community-list a {
  border-radius: 8px !important; transition: background var(--sfp-speed), color var(--sfp-speed) !important;
}
#sf-primary a.sf-menu-link-text:hover, #sf-primary .sf-community-list a:hover {
  background: var(--sfp-accent-soft) !important; color: var(--sfp-accent) !important;
}
#sf-primary .sf-community-list a.sf-active-link,
#sf-primary .sf-standard-layout-v2__sidebar a.sf-menu-link-text.sf-active-link,
#sf-primary .sf-standard-layout-v2__sidebar a.sf-menu-link-text.sf-active-link h3 {
  background: var(--sfp-accent-soft) !important; color: var(--sfp-accent) !important; font-weight: 600 !important;
}
#sf-primary .sf-sb-menu-link { border-bottom-color: var(--sfp-border) !important; }
#sf-primary .sf-community-menu-column::-webkit-scrollbar { width: 5px; }
#sf-primary .sf-community-menu-column::-webkit-scrollbar-thumb { background: rgba(0,0,0,.06); border-radius: 10px; }
#sf-primary .sf-community-menu-column::-webkit-scrollbar-track { background: transparent; }

/* ── CONTENT HEADING ────────────────────────────────────────────────────── */
#sf-primary .sf-content-heading {
  background: rgba(255,255,255,.75) !important; backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--sfp-border) !important;
}

/* ── BANNER ─────────────────────────────────────────────────────────────── */
#sf-primary .sf-post-banner { border-radius: var(--sfp-radius-l) !important; overflow: hidden !important; }
#sf-primary .sf-poster-content { border-radius: var(--sfp-radius-m) !important; }
#sf-primary .sf-poster-content h1 { font-weight: 700 !important; letter-spacing: -0.02em !important; }

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
#sf-primary .sf-btn { border-radius: 8px !important; font-weight: 600 !important; transition: transform var(--sfp-speed) var(--sfp-ease), box-shadow var(--sfp-speed), filter var(--sfp-speed) !important; }
#sf-primary .sf-btn:not(.sf-btn-underline):not(.sf-btn-icon) { border-radius: var(--sfp-radius-pill) !important; box-shadow: var(--sfp-shadow-1) !important; }
#sf-primary .sf-btn:not(.sf-btn-underline):not(.sf-btn-icon):hover { transform: translateY(-1px) !important; box-shadow: var(--sfp-shadow-2) !important; filter: brightness(1.04) !important; }
#sf-primary .sf-btn:not(.sf-btn-underline):not(.sf-btn-icon):active { transform: translateY(0) scale(.98) !important; }
#sf-primary .sf-btn-light { background: var(--sfp-canvas-tint) !important; color: var(--sfp-ink) !important; }
#sf-primary button.sf-follow-btn-text, #sf-primary .sf-post-content-box-widget .sf-card-footer button.sf-btn {
  border-radius: var(--sfp-radius-pill) !important; transition: transform var(--sfp-speed), box-shadow var(--sfp-speed) !important;
}
#sf-primary button.sf-follow-btn-text:hover, #sf-primary .sf-post-content-box-widget .sf-card-footer button.sf-btn:hover {
  transform: translateY(-1px); box-shadow: var(--sfp-shadow-1);
}

/* ── FEED CARDS ─────────────────────────────────────────────────────────── */
#sf-primary .sf-main-feed .common-post {
  background: var(--sfp-surface) !important; border: 1px solid var(--sfp-border) !important;
  border-radius: var(--sfp-radius-l) !important; box-shadow: var(--sfp-shadow-1) !important;
  padding: 20px 22px !important; margin-block-end: 18px !important;
  transition: box-shadow var(--sfp-speed) var(--sfp-ease), border-color var(--sfp-speed) !important;
}
#sf-primary .sf-main-feed .common-post:hover { box-shadow: var(--sfp-shadow-2) !important; border-color: var(--sfp-border-hover) !important; }
#sf-primary .sf-main-feed .user-image { border-radius: 10px !important; }
#sf-primary .sf-main-feed .user-and-group > span > a { font-weight: 700 !important; }
#sf-primary .sf-main-feed .time-and-privacy { color: var(--sfp-ink-3) !important; }
#sf-primary .sf-main-feed .common-content, #sf-primary .sf-main-feed .common-content p { color: var(--sfp-ink-2) !important; line-height: 1.7 !important; }
#sf-primary .sf-main-feed .actions-buttons { border-top-color: var(--sfp-border) !important; }
#sf-primary .sf-main-feed .actions-buttons-button {
  border-radius: 8px !important; font-weight: 500 !important; color: var(--sfp-ink-3) !important;
  transition: background var(--sfp-speed), color var(--sfp-speed) !important;
}
#sf-primary .sf-main-feed .actions-buttons-button:hover { background: var(--sfp-accent-soft) !important; color: var(--sfp-accent) !important; }

/* ── ACTIVITY INNER ─────────────────────────────────────────────────────── */
#sf-primary .activity-inner {
  background: var(--sfp-surface) !important; border-color: var(--sfp-border) !important;
  border-radius: var(--sfp-radius-m) !important; box-shadow: var(--sfp-shadow-1) !important;
  transition: box-shadow var(--sfp-speed), border-color var(--sfp-speed) !important;
}
#sf-primary .activity-inner:hover { box-shadow: var(--sfp-shadow-2) !important; border-color: var(--sfp-border-hover) !important; }
#sf-primary .activity-inner-meta.action { background: var(--sfp-canvas-tint) !important; border-top-color: var(--sfp-border) !important; }

/* ── POST CONTENT BOX ───────────────────────────────────────────────────── */
#sf-primary .sf-post-content-box {
  background: var(--sfp-surface) !important; border: 1px solid var(--sfp-border) !important;
  border-left: 4px solid var(--sfp-accent) !important; border-radius: var(--sfp-radius-m) !important;
  box-shadow: var(--sfp-shadow-1) !important; transition: box-shadow var(--sfp-speed) !important;
}
#sf-primary .sf-post-content-box:hover { box-shadow: var(--sfp-shadow-2) !important; }

/* ── WIDGETS ────────────────────────────────────────────────────────────── */
#sf-primary .sf-post-content-box-widget .widget {
  background: var(--sfp-surface) !important; border: 1px solid var(--sfp-border) !important;
  border-radius: var(--sfp-radius-m) !important; box-shadow: var(--sfp-shadow-1) !important;
  transition: box-shadow var(--sfp-speed) !important;
}
#sf-primary .sf-post-content-box-widget .widget:hover { box-shadow: var(--sfp-shadow-2) !important; }

/* ── FORUM TABLE ────────────────────────────────────────────────────────── */
#sf-primary .sf-post-header { background: var(--sfp-canvas-tint) !important; border-radius: var(--sfp-radius-m) var(--sfp-radius-m) 0 0 !important; }
#sf-primary .sf-forum-posts-border-b-radius { border-radius: var(--sfp-radius-m) !important; box-shadow: var(--sfp-shadow-1) !important; border: 1px solid var(--sfp-border) !important; overflow: hidden; }
#sf-primary .sf-forum-community-post { background: var(--sfp-surface) !important; transition: background var(--sfp-speed) !important; }
#sf-primary .sf-forum-community-post:not(:last-child) { border-bottom-color: var(--sfp-border) !important; }
#sf-primary .sf-forum-community-post:hover { background: var(--sfp-accent-soft) !important; }
#sf-primary .sf-forum-community-post .sf-forum-author-avatar { background: var(--sfp-canvas-tint) !important; border-radius: 10px !important; }
#sf-primary .sf-forum-entry-content .sf-forum-post-title { font-weight: 600 !important; color: var(--sfp-ink) !important; }
.single-smartforum #sf-primary .sf-forum-white-box.sf-forum-main-width {
  background: var(--sfp-surface) !important; border-radius: var(--sfp-radius-l) !important;
  box-shadow: var(--sfp-shadow-2) !important; border: 1px solid var(--sfp-border) !important;
}

/* ── LISTING CARDS ──────────────────────────────────────────────────────── */
#sf-primary .sf-listing-container {
  border: 1px solid var(--sfp-border) !important; border-radius: var(--sfp-radius-l) !important;
  box-shadow: var(--sfp-shadow-1) !important; overflow: hidden; background: var(--sfp-surface) !important;
  transition: box-shadow .3s var(--sfp-ease), transform .3s var(--sfp-ease), border-color .3s !important;
}
#sf-primary .sf-listing-container:hover { box-shadow: var(--sfp-shadow-3) !important; transform: translateY(-3px); border-color: var(--sfp-border-hover) !important; }
#sf-primary .sf-listing-container .sf-listing-image-container img { transition: transform .4s var(--sfp-ease) !important; }
#sf-primary .sf-listing-container:hover .sf-listing-image-container img { transform: scale(1.03); }
#sf-primary .sf-box-inside { background: var(--sfp-surface) !important; border-color: var(--sfp-border) !important; border-radius: var(--sfp-radius-l) !important; transition: box-shadow .3s, transform .3s !important; }
#sf-primary .sf-box-inside:hover { box-shadow: var(--sfp-shadow-3) !important; transform: translateY(-2px); }

/* ── TOPIC ──────────────────────────────────────────────────────────────── */
#sf-primary .sf-post-heading h2 { font-weight: 700 !important; color: var(--sfp-ink) !important; }
#sf-primary .sf-forum-post-author-row { border-bottom-color: var(--sfp-border) !important; }
#sf-primary .sf-forum-post-author-img img { border-radius: 10px !important; }
#sf-primary .sf-forum-post-footer { border-top-color: var(--sfp-border) !important; color: var(--sfp-ink-3) !important; }
#sf-primary .sf-post-content-single-forum-page > p, #sf-primary .sf-post-content-single-forum-page > div { color: var(--sfp-ink-2) !important; line-height: 1.78 !important; }

/* ── COMMENTS ───────────────────────────────────────────────────────────── */
#sf-primary .sf-comment-writing, #sf-primary #sf-composer, #sf-primary .sf-message-box-main {
  background: var(--sfp-surface) !important; border-color: var(--sfp-border) !important; border-radius: var(--sfp-radius-m) !important;
}
#sf-primary .sf-comment-btn.sf-comment-btn-outline { border-radius: var(--sfp-radius-pill) !important; transition: background var(--sfp-speed), color var(--sfp-speed), border-color var(--sfp-speed) !important; }
#sf-primary .sf-comment-btn.sf-comment-btn-outline:hover { background: var(--sfp-accent-soft) !important; color: var(--sfp-accent) !important; border-color: var(--sfp-accent) !important; }
#sf-primary .sf-reply-child-comment-div { border-left: 2px solid var(--sfp-border) !important; }

/* ── PROFILE ────────────────────────────────────────────────────────────── */
#sf-primary .sf-card { background: var(--sfp-surface) !important; border-color: var(--sfp-border) !important; border-radius: var(--sfp-radius-l) !important; box-shadow: var(--sfp-shadow-1) !important; }
#sf-primary .sf-profile-header-avatar img { border: 3px solid var(--sfp-surface) !important; box-shadow: var(--sfp-shadow-2) !important; border-radius: 16px !important; }
#sf-primary h2.sf-user-full-name { font-weight: 700 !important; color: var(--sfp-ink) !important; }
#sf-primary .sf-member-role { border-radius: var(--sfp-radius-pill) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; }

/* ── INPUTS ─────────────────────────────────────────────────────────────── */
#sf-primary .sf-input-field textarea, #sf-primary .sf-input-field input[type="text"],
#sf-primary .sf-input-field input[type="email"], #sf-primary .sf-input-field input[type="tel"],
#sf-primary .sf-input-field input[type="password"], #sf-primary .sf-input-field select,
#sf-primary .sf-topic-title input, #sf-primary #reset-password-form input {
  background: var(--sfp-canvas-tint) !important; border: 1.5px solid var(--sfp-border) !important;
  border-radius: var(--sfp-radius-s) !important; color: var(--sfp-ink) !important;
  transition: border-color var(--sfp-speed), box-shadow var(--sfp-speed), background var(--sfp-speed) !important;
}
#sf-primary .sf-input-field textarea:focus, #sf-primary .sf-input-field input[type="text"]:focus,
#sf-primary .sf-input-field input[type="email"]:focus, #sf-primary .sf-input-field input[type="tel"]:focus,
#sf-primary .sf-input-field input[type="password"]:focus, #sf-primary .sf-input-field select:focus,
#sf-primary .sf-topic-title input:focus, #sf-primary #reset-password-form input:focus {
  background: var(--sfp-surface) !important; border-color: var(--sfp-accent) !important; box-shadow: var(--sfp-shadow-focus) !important;
}

/* ── LOGIN / REGISTRATION ───────────────────────────────────────────────── */
#sf-primary .sf-login-register-template-style .sf-lr-template-grid { border-radius: var(--sfp-radius-l) !important; overflow: hidden !important; box-shadow: var(--sfp-shadow-3) !important; border: 1px solid var(--sfp-border) !important; }
#sf-primary .sf-login-register-template-style .sf-lr-template-form-wrapper { background: var(--sfp-surface) !important; }
#sf-primary .sf-login-register-template-style .sf-lr-form h4 { font-weight: 700 !important; color: var(--sfp-ink) !important; }
#sf-primary .sf-login-register-template-style .sf-lr-form .sf-input-field {
  background: var(--sfp-canvas-tint) !important; border: 1.5px solid var(--sfp-border) !important;
  border-radius: var(--sfp-radius-s) !important; transition: border-color var(--sfp-speed), box-shadow var(--sfp-speed), background var(--sfp-speed) !important;
}
#sf-primary .sf-login-register-template-style .sf-lr-form .sf-input-field:focus { background: var(--sfp-surface) !important; border-color: var(--sfp-accent) !important; box-shadow: var(--sfp-shadow-focus) !important; }
#sf-primary .sf-login-register-template-style .sf-lr-logon-button, #sf-primary .sf-login-register-template-style .sf-lr-forgot-button {
  border-radius: var(--sfp-radius-pill) !important; font-weight: 600 !important;
  transition: transform var(--sfp-speed), box-shadow var(--sfp-speed), filter var(--sfp-speed) !important;
}
#sf-primary .sf-login-register-template-style .sf-lr-logon-button:hover, #sf-primary .sf-login-register-template-style .sf-lr-forgot-button:hover {
  transform: translateY(-1px); box-shadow: var(--sfp-shadow-2) !important; filter: brightness(1.05);
}

/* ── SHADOW BOX / PAGINATION / SEARCH RESULTS ───────────────────────────── */
#sf-primary .sf-shadow-box { background: var(--sfp-surface) !important; border: 1px solid var(--sfp-border) !important; border-radius: var(--sfp-radius-l) !important; box-shadow: var(--sfp-shadow-3) !important; }
#sf-primary .sf-pagination .page-numbers, #sf-primary .sf-pagination .next { background: var(--sfp-surface) !important; border: 1px solid var(--sfp-border) !important; border-radius: 8px !important; color: var(--sfp-ink-2) !important; transition: border-color var(--sfp-speed), color var(--sfp-speed), transform var(--sfp-speed) !important; }
#sf-primary .sf-pagination .page-numbers:hover, #sf-primary .sf-pagination .next:hover { border-color: var(--sfp-accent) !important; color: var(--sfp-accent) !important; transform: translateY(-1px); }
#sf-primary ul.sf-pagination-page { box-shadow: none !important; background: transparent !important; }
#sf-search-results, #sf-primary #sf-search-results { border-radius: var(--sfp-radius-m) !important; box-shadow: var(--sfp-shadow-3) !important; border: 1px solid var(--sfp-border) !important; overflow: hidden; }
#sf-search-results ul li { border-bottom-color: var(--sfp-border) !important; transition: background var(--sfp-speed) !important; }
#sf-search-results ul li:hover { background: var(--sfp-accent-soft) !important; }

/* ── POPUPS / MODALS ────────────────────────────────────────────────────── */
#sf-primary .sf-popup-container { background-color: rgba(27, 27, 24, .45) !important; backdrop-filter: blur(4px); }
#sf-primary .sf-popup-popup-main { border-radius: var(--sfp-radius-l) !important; box-shadow: var(--sfp-shadow-3) !important; }
#sf-primary .sf-editor-popup:before { background: rgba(248, 247, 244, .88) !important; backdrop-filter: blur(10px); }
#sf-primary .sf-editor-popup .sf-custom-editor { border-radius: var(--sfp-radius-l) !important; box-shadow: var(--sfp-shadow-3) !important; border: 1px solid var(--sfp-border); overflow: hidden; }
#sf-primary .sf-popup-sidebar-container { border-radius: var(--sfp-radius-l) 0 0 var(--sfp-radius-l) !important; }
#sf-primary .sfb-popup { backdrop-filter: blur(4px); }
#sf-primary .sfb-popup-content { border-radius: var(--sfp-radius-l) !important; border: 1px solid var(--sfp-border) !important; box-shadow: var(--sfp-shadow-3) !important; }
#sf-primary .sfb-popup-header { border-bottom-color: var(--sfp-border) !important; }
#sf-primary .sfb-popup-footer { border-top-color: var(--sfp-border) !important; background: var(--sfp-canvas-tint) !important; }

/* ── MISC UI ────────────────────────────────────────────────────────────── */
.sf-alert { border-radius: var(--sfp-radius-s) !important; box-shadow: var(--sfp-shadow-2) !important; }
#sf-primary .sf-empty-box { background: var(--sfp-surface) !important; border: 2px dashed var(--sfp-border) !important; border-radius: var(--sfp-radius-l) !important; box-shadow: none !important; }
#sf-primary .sf-empty-box .sf-icon i { color: var(--sfp-ink-4) !important; }
.sf-site-main a:not(.scp-description *), .sf-content-area a:not(.scp-description *) { color: var(--sfp-ink) !important; }
#sf-primary .sf-post-content-full-content a, #sf-primary .sf-comment-content-wrapper a { color: var(--sfp-accent) !important; text-decoration-color: rgba(37,99,235,.25) !important; text-underline-offset: 3px; transition: text-decoration-color var(--sfp-speed) !important; }
#sf-primary .sf-post-content-full-content a:hover, #sf-primary .sf-comment-content-wrapper a:hover { text-decoration-color: var(--sfp-accent) !important; }
#sf-primary .sf-share-button { border-radius: var(--sfp-radius-s) !important; transition: transform var(--sfp-speed), box-shadow var(--sfp-speed) !important; }
#sf-primary .sf-share-button:hover { transform: translateY(-1px) !important; box-shadow: var(--sfp-shadow-1) !important; }
#sf-primary .sf-audio-item { --sf-audio-bg: var(--sfp-canvas-tint); --sf-audio-border: var(--sfp-border); --sf-audio-accent: var(--sfp-accent); border-radius: var(--sfp-radius-m) !important; }
#sf-primary .sf-list-table tr { border-bottom-color: var(--sfp-border) !important; }
#sf-primary .sf-card-footer { border-top-color: var(--sfp-border) !important; }
#sf-primary .bb-1px-gray { border-bottom-color: var(--sfp-border) !important; }
#sf-primary .sf-mobile-menu-tab { background: rgba(255,255,255,.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-top: 1px solid var(--sfp-border) !important; }
#sf-primary .sf-mobile-menu-btn.sf-active a { color: var(--sfp-accent) !important; }
.sf-loader-wrapper { background: rgba(248,247,244,.82) !important; backdrop-filter: blur(6px); }
.sf-loader-wrapper .sf-loader span:nth-child(1) { background: var(--sfp-accent) !important; }
.sf-loader-wrapper .sf-loader span:nth-child(2) { background: #60A5FA !important; }
.sf-loader-wrapper .sf-loader span:nth-child(3) { background: #34D399 !important; }
.sf-loader-wrapper .sf-loader span:nth-child(4) { background: #A78BFA !important; }
body .select2-dropdown { border: 1px solid var(--sfp-border) !important; border-radius: var(--sfp-radius-s) !important; box-shadow: var(--sfp-shadow-3) !important; }
body .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--sfp-accent-soft) !important; color: var(--sfp-accent) !important; }
.swal-modal { border-radius: var(--sfp-radius-l) !important; }
.swal-button.swal-button--confirm { border-radius: var(--sfp-radius-pill) !important; font-weight: 600 !important; }
#sf-primary .sf-post-content-full-content .gamipress-points-type, #sf-primary .sf-post-content-full-content .gamipress-rank,
#sf-primary .sf-post-content-full-content .gamipress-achievement, #sf-primary .sf-post-content-main .gamipress-user-points {
  background: var(--sfp-canvas-tint) !important; border: 1px solid var(--sfp-border) !important; border-radius: var(--sfp-radius-m) !important; box-shadow: var(--sfp-shadow-1) !important;
}
#sf-primary .image-wrapper { border-radius: var(--sfp-radius-m) !important; }
#sf-primary ul.sf-files-list li { border-radius: 10px !important; }
#sf-primary li.sf-notification-list:hover { background: var(--sfp-accent-soft) !important; }
#sf-primary .sf-tab-list li label { border-radius: 8px !important; }
#sf-primary .sf-dropdown-menu { border-radius: var(--sfp-radius-m) !important; box-shadow: var(--sfp-shadow-3) !important; border: 1px solid var(--sfp-border) !important; overflow: hidden; }
#sf-primary .sf-forum-post-author-img img, #sf-primary .sf-comments-wrapper .sf-comment-row .sf-comment-content .sf-profile-img img { border-radius: 10px !important; }
#sf-primary .sf-listing-container .sf-listing-image-container img { border-radius: 0 !important; }
#sf-primary .sf-editor-popup .sf-post-privacy { border-radius: var(--sfp-radius-pill) !important; background: var(--sfp-canvas-tint) !important; }
#sf-primary .sf-editor-footer-main { border-top-color: var(--sfp-border) !important; }
.medium-editor-toolbar li button { border-radius: 6px !important; }
#sf-primary .sfb-lb-list-view-board { border-radius: var(--sfp-radius-l) !important; box-shadow: var(--sfp-shadow-2) !important; border: 1px solid var(--sfp-border) !important; }
#sf-primary .sf-conftcelebrate-bottom-notification { border-radius: var(--sfp-radius-m) !important; box-shadow: var(--sfp-shadow-3) !important; }

/* ── ANIMATIONS ─────────────────────────────────────────────────────────── */
@keyframes sfp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
#sf-primary .sf-main-feed .common-post, #sf-primary .activity-inner,
#sf-primary .sf-listing-container, #sf-primary .sf-post-content-box-widget .widget { animation: sfp-rise .35s var(--sfp-ease) both; }
#sf-primary .sf-main-feed .common-post:nth-child(2), #sf-primary .sf-listing-container:nth-child(2) { animation-delay: .04s; }
#sf-primary .sf-main-feed .common-post:nth-child(3), #sf-primary .sf-listing-container:nth-child(3) { animation-delay: .08s; }
#sf-primary .sf-main-feed .common-post:nth-child(4), #sf-primary .sf-listing-container:nth-child(4) { animation-delay: .12s; }
#sf-primary .sf-main-feed .common-post:nth-child(5), #sf-primary .sf-listing-container:nth-child(5) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

@media (max-width: 767px) {
  #sf-primary .sf-main-feed .common-post { padding: 16px !important; border-radius: var(--sfp-radius-m) !important; margin-block-end: 12px !important; }
  #sf-primary .sf-custom-header-for-lesson header { height: 54px !important; padding: 0 14px !important; }
  #sf-primary .sf-listing-container { border-radius: var(--sfp-radius-m) !important; }
}