/*
 * Filmly Global Design System
 * CSS custom properties shared across all Filmly stylesheet modules.
 */

:root {
  --fl-bg:          #0c0d12;
  --fl-surface:     #13141c;
  --fl-surface2:    #1a1b26;
  --fl-surface3:    #1e2030;
  --fl-border:      #23243a;
  --fl-border-hover:#363860;
  --fl-text:        #ffffff;
  --fl-muted:       #6b7280;
  --fl-dimmed:      #9ca3af;
  --fl-red:         #e63946;
  --fl-red-hover:   #c8303c;
  --fl-green:       #22c55e;
  --fl-green-bg:    rgba(34, 197, 94, 0.12);
  --fl-amber:       #f59e0b;
  --fl-tag-bg:      #1e2030;
  --fl-radius-sm:   6px;
  --fl-radius-md:   10px;
  --fl-radius-lg:   14px;
  --fl-radius-full: 9999px;
  --fl-font:        'Inter', 'degular', sans-serif;
  --fl-transition:  0.18s ease;
}

/* ==========================================================================
   GLOBAL RESET: BOX SIZING + OVERFLOW PREVENTION
   Prevents horizontal scrolling on mobile without breaking any layout.
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent horizontal overflow on mobile globally */
@media (max-width: 768px) {
  body, .site, #page, #content, .site-content, .entry-content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* ==========================================================================
   ICON INLINE RESET
   Prevent UM's .um class icon elements from being pushed to new lines
   by any upstream display:block / clear:both selector.
   ========================================================================== */
i[class*="um-"],
i[class*="fi-"],
i[class*="fa-"],
i[class*="icon"],
.um-icon,
.fi-icon,
span[class*="um-icon"],
span[class*="fi-icon"] {
  display: inline-block !important;
  vertical-align: -0.1em !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  clear: none !important;
  flex: 0 0 auto !important;
  box-sizing: content-box !important;
}



/* ==========================================================================
   GLOBAL HEADER DROPDOWN DARK THEME
   Targets both the Elementor nav sub-menus (Browse Talent, etc.) and the
   Ultimate Member user account dropdown (avatar + username in header).
   ========================================================================== */

/* ─── Elementor Nav Sub-Menus inside Dark Containers ─── */
/* ─── Elementor Nav Sub-Menus inside Dark Containers ─── */
.filmly-dark-mode .elementor-nav-menu--dropdown,
.filmly-dark-mode .elementor-nav-menu--dropdown.e--pointer-none ul,
.filmly-dark-mode nav ul ul,
.filmly-dark-mode .nav-menu ul,
.filmly-dark-mode .sub-menu,
.filmly-dark-mode ul.sub-menu,
.filmly-dark-mode .main-navigation ul ul,
.filmly-dark-mode .elementor-nav-menu .sub-menu,
.dark-header .elementor-nav-menu--dropdown,
.dark-header .sub-menu,
.dark-header ul.sub-menu,
body.dark-header .elementor-nav-menu--dropdown,
body.dark-header .sub-menu,
.um-directory .elementor-nav-menu--dropdown,
.um-profile .elementor-nav-menu--dropdown,
.filmly-company-page .elementor-nav-menu--dropdown {
  background-color: var(--fl-surface2) !important;
  background:       var(--fl-surface2) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-md) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

/* Links inside the nav dropdown */
.filmly-dark-mode .sub-menu li a,
.filmly-dark-mode .sub-menu li a:visited,
.filmly-dark-mode .elementor-nav-menu--dropdown li a,
.filmly-dark-mode .elementor-nav-menu--dropdown li a:visited,
.filmly-dark-mode nav ul ul li a,
.filmly-dark-mode .main-navigation ul ul li a,
.dark-header .sub-menu li a,
body.dark-header .sub-menu li a,
.um-directory .sub-menu li a,
.um-profile .sub-menu li a,
.filmly-company-page .sub-menu li a {
  color: var(--fl-text) !important;
  background-color: transparent !important;
}

.filmly-dark-mode .sub-menu li a:hover,
.filmly-dark-mode .elementor-nav-menu--dropdown li a:hover,
.filmly-dark-mode nav ul ul li a:hover,
.filmly-dark-mode .main-navigation ul ul li a:hover,
.dark-header .sub-menu li a:hover,
body.dark-header .sub-menu li a:hover,
.um-directory .sub-menu li a:hover,
.um-profile .sub-menu li a:hover,
.filmly-company-page .sub-menu li a:hover {
  color: var(--fl-red) !important;
  background-color: var(--fl-surface3) !important;
}

/* ─── Ultimate Member User Account Dropdown & Profile Header Dropdown (avatar + username) ─── */
.filmly-dark-mode .um-account-dropdown,
.filmly-dark-mode .um-account-dropdown ul,
.filmly-dark-mode .um-user-dropdown,
.filmly-dark-mode .um-user-dropdown ul,
.filmly-dark-mode .um-profile-dropdown,
.filmly-dark-mode .um-profile-dropdown ul,
.filmly-dark-mode .um-header-navigation ul ul,
.filmly-dark-mode .um-nav .um-dropdown-nav,
.filmly-dark-mode ul.um-nav-dropdown,
.filmly-dark-mode .elementor-widget-um-account-nav .um-account-nav,
.filmly-dark-mode .elementor-widget-um-account-nav ul ul,
.filmly-dark-mode [class*="um-"][class*="dropdown"],
.filmly-dark-mode [class*="um-"][class*="dropdown"] ul,
.filmly-dark-mode [class*="um-"][class*="-nav"] ul ul,
.dark-header .um-account-dropdown,
.dark-header .um-account-dropdown ul,
.dark-header [class*="um-"][class*="dropdown"],
.dark-header [class*="um-"][class*="dropdown"] ul,
.dark-header .profile-header .um-account-dropdown,
.dark-header .profile-header [class*="um-"][class*="dropdown"],
body.dark-header .um-account-dropdown,
body.dark-header [class*="um-"][class*="dropdown"],
.um-profile [class*="um-"][class*="dropdown"],
.um-directory [class*="um-"][class*="dropdown"] {
  background-color: var(--fl-surface2) !important;
  background:       var(--fl-surface2) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-md) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.filmly-dark-mode .um-dropdown ul,
.filmly-dark-mode [class*="um-"][class*="dropdown"] ul,
.dark-header .um-dropdown ul,
.dark-header [class*="um-"][class*="dropdown"] ul,
body.dark-header [class*="um-"][class*="dropdown"] ul,
.um-profile [class*="um-"][class*="dropdown"] ul {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.filmly-dark-mode .um-account-dropdown li a,
.filmly-dark-mode .um-user-dropdown li a,
.filmly-dark-mode .um-profile-dropdown li a,
.filmly-dark-mode [class*="um-"][class*="dropdown"] li a,
.filmly-dark-mode [class*="um-"][class*="-nav"] ul ul li a,
.dark-header [class*="um-"][class*="dropdown"] li a,
body.dark-header [class*="um-"][class*="dropdown"] li a,
.um-profile [class*="um-"][class*="dropdown"] li a {
  color: var(--fl-text) !important;
  background-color: transparent !important;
}

.filmly-dark-mode .um-account-dropdown li a:hover,
.filmly-dark-mode .um-user-dropdown li a:hover,
.filmly-dark-mode .um-profile-dropdown li a:hover,
.filmly-dark-mode [class*="um-"][class*="dropdown"] li a:hover,
.filmly-dark-mode [class*="um-"][class*="-nav"] ul ul li a:hover,
.dark-header [class*="um-"][class*="dropdown"] li a:hover,
body.dark-header [class*="um-"][class*="dropdown"] li a:hover,
.um-profile [class*="um-"][class*="dropdown"] li a:hover {
  color: var(--fl-red) !important;
  background-color: var(--fl-surface3) !important;
}

/* ── Username title light color on dark theme headers ── */
.filmly-dark-mode .fpn-name,
.filmly-dark-mode .fpn-chevron,
.dark-header .fpn-name,
.dark-header .fpn-chevron,
body.dark-header .fpn-name,
body.dark-header .fpn-chevron,
.dark-header .profile-header .fpn-name,
.dark-header .profile-header .fpn-chevron,
.dark-header .profile-header .um-account-name a,
.dark-header .profile-header .um-name a,
body.dark-header .profile-header .um-account-name a,
body.dark-header .profile-header .um-name a {
  color: #ffffff !important;
}

/* ==========================================================================
   SCOPED FORM DARK THEME FOR FILMLY DASHBOARDS & EDIT SCREENS
   Scope dark mode styles strictly to designated Filmly containers & edit screens
   so third-party and standard site pages remain unaffected.
   ========================================================================== */

/* 1. Select Dropdowns & Select2 Popups in Dark Mode Containers */
.filmly-dark-mode select,
.filmly-dark-mode select option,
.dark-header select,
body.dark-header select,
.f-my-jobs-dashboard select,
.f-posted-jobs-wrap select,
.um-profile.um-editing select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #1a1c2e !important;
  background: #1a1c2e !important;
  color: #ffffff !important;
  border-color: #23243a !important;
}

/* 2. Form Inputs & Textareas in Dark Mode Containers */
.filmly-dark-mode input[type="text"],
.filmly-dark-mode input[type="number"],
.filmly-dark-mode input[type="url"],
.filmly-dark-mode input[type="email"],
.filmly-dark-mode input[type="password"],
.filmly-dark-mode input[type="search"],
.filmly-dark-mode input[type="tel"],
.filmly-dark-mode input[type="date"],
.filmly-dark-mode textarea,
.dark-header input[type="text"],
.dark-header input[type="number"],
.dark-header input[type="url"],
.dark-header input[type="email"],
.dark-header input[type="password"],
.dark-header input[type="search"],
.dark-header input[type="tel"],
.dark-header input[type="date"],
.dark-header textarea,
body.dark-header input[type="text"],
body.dark-header input[type="number"],
body.dark-header input[type="url"],
body.dark-header input[type="email"],
body.dark-header input[type="password"],
body.dark-header input[type="search"],
body.dark-header input[type="tel"],
body.dark-header input[type="date"],
body.dark-header textarea,
.f-my-jobs-dashboard input,
.f-my-jobs-dashboard textarea,
.f-posted-jobs-wrap input,
.f-posted-jobs-wrap textarea,
.um-profile.um-editing input,
.um-profile.um-editing textarea {
  background-color: #1a1c2e !important;
  background: #1a1c2e !important;
  color: #ffffff !important;
  border: 1px solid #23243a !important;
  border-radius: 8px !important;
}

.filmly-dark-mode input::placeholder,
.filmly-dark-mode textarea::placeholder {
  color: #94a3b8 !important;
}

/* 3. Grid Layout Repair on Edit Profile Screen ONLY */
.um-profile.um-editing .um-row,
.um-profile.um-editing .um-col-1,
.um-profile.um-editing .um-col-2,
.um-profile.um-editing .um-col-121,
.um-profile.um-editing .um-col-122,
.um-profile.um-editing .um-field-group,
.um-profile.um-editing .um-field-type-group {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
}

/* 4. Fix Grid Layout Widths (Personal Info, Contact Info) */
.page-id-dashboard .site-main,
.page-id-dashboard .entry-content,
.page-id-dashboard .elementor-widget-container,
.page-id-dashboard .elementor-widget-shortcode,
div.um-profile-body,
form.um-form,
div.um-form,
div.um-profile,
div.um {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
}

div.um-row {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 30px 0 !important;
  box-sizing: border-box !important;
  clear: both !important;
}

/* ==========================================================================
   WOOCOMMERCE CHECKOUT SCOPED DARK THEME
   Strictly scoped to .woocommerce-checkout / .elementor-widget-woocommerce-checkout-page / .page-id-3963
   ========================================================================== */

/* 1. Page Background & Wrapper Cleanup */
body.woocommerce-checkout,
body.page-id-3963,
.woocommerce-checkout .elementor-3963,
.woocommerce-checkout .elementor-widget-woocommerce-checkout-page,
.woocommerce-checkout .elementor-widget-container,
.woocommerce-checkout .woocommerce,
.woocommerce-checkout .checkout.woocommerce-checkout,
.woocommerce-checkout .e-checkout__container,
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
  background-color: var(--fl-bg, #0c0d12) !important;
  background: var(--fl-bg, #0c0d12) !important;
  color: var(--fl-text, #ffffff) !important;
}

/* 2. Main Outer Column Containers */
.woocommerce-checkout .e-checkout__column-start,
.woocommerce-checkout .e-checkout__column-end {
  background-color: var(--fl-surface, #13141c) !important;
  background: var(--fl-surface, #13141c) !important;
  border: 1px solid var(--fl-border, #23243a) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Remove any inner borders / outlines / boxes inside Billing Column */
.woocommerce-checkout .e-checkout__column-start .col2-set,
.woocommerce-checkout .e-checkout__column-start #customer_details,
.woocommerce-checkout .e-checkout__column-start .col-1,
.woocommerce-checkout .e-checkout__column-start .col-2,
.woocommerce-checkout .e-checkout__column-start .woocommerce-billing-fields,
.woocommerce-checkout .e-checkout__column-start .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .e-checkout__column-start .woocommerce-additional-fields,
.woocommerce-checkout .e-checkout__column-start .woocommerce-additional-fields__field-wrapper {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* 3. Inner Cards inside Right Column */
.woocommerce-checkout .e-checkout__column-end .e-checkout__order_review,
.woocommerce-checkout .e-checkout__column-end .e-coupon-box,
.woocommerce-checkout .e-checkout__column-end .e-checkout__order_review-2,
.woocommerce-checkout .e-checkout__column-end #payment {
  background-color: var(--fl-surface2, #181924) !important;
  background: var(--fl-surface2, #181924) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 18px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 16px !important;
}

/* 4. Headings & Section Titles */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .e-checkout-secondary-title,
.woocommerce-checkout h4 {
  color: var(--fl-text, #ffffff) !important;
  font-family: var(--fl-font, 'Inter', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em !important;
}

/* 5. Labels & Field Text */
.woocommerce-checkout label {
  color: var(--fl-text, #ffffff) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  margin-bottom: 4px !important;
  display: inline-block !important;
}

.woocommerce-checkout label .required {
  color: var(--fl-red, #e63946) !important;
}

.woocommerce-checkout .optional {
  color: var(--fl-dimmed, #9ca3af) !important;
  font-size: 0.8rem !important;
}

/* 6. Form Inputs & Textareas (Sleek Compact Sizing) */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select {
  background-color: #12131b !important;
  background: #12131b !important;
  color: var(--fl-text, #ffffff) !important;
  border: 1px solid var(--fl-border, #23243a) !important;
  border-radius: 8px !important;
  height: 42px !important;
  padding: 0 12px !important;
  font-size: 0.875rem !important;
  line-height: 42px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  width: 100% !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout textarea {
  background-color: #12131b !important;
  background: #12131b !important;
  color: var(--fl-text, #ffffff) !important;
  border: 1px solid var(--fl-border, #23243a) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 0.875rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  width: 100% !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {
  color: var(--fl-muted, #6b7280) !important;
  opacity: 1 !important;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  border-color: var(--fl-red, #e63946) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18) !important;
}

/* 7. Select2 Dropdowns */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  background-color: #12131b !important;
  background: #12131b !important;
  border: 1px solid var(--fl-border, #23243a) !important;
  border-radius: 8px !important;
  height: 42px !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  padding: 0 32px 0 12px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--fl-text, #ffffff) !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 0.875rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  width: 28px !important;
  position: absolute !important;
  top: 0 !important;
  right: 6px !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--fl-text, #ffffff) transparent transparent transparent !important;
  border-style: solid !important;
  border-width: 5px 5px 0 5px !important;
  margin: 0 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

.woocommerce-checkout .select2-dropdown,
body.woocommerce-checkout .select2-dropdown {
  background-color: #181924 !important;
  border: 1px solid var(--fl-border, #23243a) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  z-index: 99999 !important;
}

.woocommerce-checkout .select2-results__option,
body.woocommerce-checkout .select2-results__option {
  background-color: #181924 !important;
  color: var(--fl-text, #ffffff) !important;
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
}

.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected],
.woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"],
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--fl-border, #23243a) !important;
  color: var(--fl-text, #ffffff) !important;
}

/* 8. Order Summary Table (Puts Product Title Clearly Above Price Line) */
.woocommerce-checkout table.shop_table {
  background-color: transparent !important;
  border: none !important;
  border-collapse: collapse !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 10px 0 !important;
  color: var(--fl-text, #ffffff) !important;
  font-size: 0.875rem !important;
  background: transparent !important;
}

.woocommerce-checkout table.shop_table thead th {
  border-bottom: 1px solid var(--fl-border, #23243a) !important;
  color: var(--fl-dimmed, #9ca3af) !important;
  text-transform: uppercase !important;
  font-size: 0.725rem !important;
  letter-spacing: 0.05em !important;
  padding-bottom: 8px !important;
}

/* Forces item name/description onto its own line above price */
.woocommerce-checkout table.shop_table td.product-name {
  display: block !important;
  width: 100% !important;
  color: var(--fl-text, #ffffff) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  padding: 10px 0 2px 0 !important;
  border-bottom: none !important;
}

.woocommerce-checkout table.shop_table td.product-total {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid var(--fl-border, #23243a) !important;
}

.woocommerce-checkout table.shop_table .product-name a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.woocommerce-checkout table.shop_table .amount {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.woocommerce-checkout table.shop_table .order-total th,
.woocommerce-checkout table.shop_table .order-total td {
  display: table-cell !important;
  width: auto !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--fl-text, #ffffff) !important;
  border-bottom: 1px solid var(--fl-border, #23243a) !important;
  padding: 12px 0 !important;
}

.woocommerce-checkout table.shop_table .order-total td strong .amount {
  color: var(--fl-red, #e63946) !important;
  font-size: 1.1rem !important;
}

/* 9. Quiet Coupon Link & Compact Form */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .e-coupon-box,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  color: #94a3b8 !important;
  font-size: 0.825rem !important;
}

.woocommerce-checkout .woocommerce-info::before {
  display: none !important;
}

.woocommerce-checkout .e-coupon-box p.e-woocommerce-coupon-nudge {
  color: #94a3b8 !important;
  margin: 0 !important;
  font-size: 0.825rem !important;
}

.woocommerce-checkout .showcoupon,
.woocommerce-checkout a.e-show-coupon-form {
  color: #94a3b8 !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  transition: opacity 0.2s ease !important;
  opacity: 0.85 !important;
  font-size: 0.825rem !important;
}

.woocommerce-checkout .showcoupon:hover,
.woocommerce-checkout a.e-show-coupon-form:hover {
  opacity: 1 !important;
  color: #ffffff !important;
}

.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-coupon {
  background-color: #12131b !important;
  border: 1px solid var(--fl-border, #23243a) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin-top: 8px !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  box-shadow: none !important;
}

.woocommerce-checkout form.checkout_coupon p,
.woocommerce-checkout form.woocommerce-form-coupon p {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
}

.woocommerce-checkout form.checkout_coupon input[type="text"],
.woocommerce-checkout form.woocommerce-form-coupon input[type="text"] {
  height: 36px !important;
  line-height: 36px !important;
  font-size: 0.825rem !important;
  padding: 0 10px !important;
  background-color: #0c0d12 !important;
  border: 1px solid #23243a !important;
  border-radius: 6px !important;
  color: #ffffff !important;
}

.woocommerce-checkout form.checkout_coupon button,
.woocommerce-checkout form.woocommerce-form-coupon button,
.woocommerce-checkout button.e-apply-coupon {
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 14px !important;
  font-size: 0.775rem !important;
  font-weight: 700 !important;
  background-color: #23243a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  width: auto !important;
  transition: background-color 0.2s ease !important;
}

.woocommerce-checkout form.checkout_coupon button:hover,
.woocommerce-checkout form.woocommerce-form-coupon button:hover,
.woocommerce-checkout button.e-apply-coupon:hover {
  background-color: #3b3d5c !important;
}

/* 10. Payment Gateway Details, Radio Buttons & Card Logos */
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
  color: var(--fl-text, #ffffff) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Uniform payment gateway / card icons */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method img,
.woocommerce-checkout #payment .payment_box img,
.woocommerce-checkout img[src*="paystack"],
.woocommerce-checkout img[src*="stripe"],
.woocommerce-checkout img[src*="visa"],
.woocommerce-checkout img[src*="mastercard"],
.woocommerce-checkout img[src*="card"] {
  height: 20px !important;
  width: auto !important;
  max-height: 20px !important;
  max-width: 45px !important;
  object-fit: contain !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  display: inline-block !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
}

.woocommerce-checkout #payment div.payment_box {
  background-color: #12131b !important;
  color: var(--fl-dimmed, #9ca3af) !important;
  border: 1px solid #23243a !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-top: 8px !important;
  font-size: 0.825rem !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: #12131b !important;
}

/* Uniform Standardized 16px Checkboxes & Radio Buttons */
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout #payment input[type="checkbox"],
.woocommerce-checkout #wc-stripe-new-payment-method,
.woocommerce-checkout #save-card,
.woocommerce-checkout #createaccount {
  accent-color: var(--fl-red, #e63946) !important;
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 8px 0 0 !important;
  transform: none !important;
  zoom: 1 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

/* 11. Privacy Policy & Submit Button */
.woocommerce-checkout .woocommerce-privacy-policy-text p {
  color: var(--fl-dimmed, #9ca3af) !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
}

.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--fl-red, #e63946) !important;
  text-decoration: underline !important;
}

.woocommerce-checkout #place_order,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"],
.woocommerce-checkout button.alt {
  background-color: var(--fl-red, #e63946) !important;
  background: var(--fl-red, #e63946) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 20px !important;
  border-radius: 8px !important;
  border: none !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"]:hover,
.woocommerce-checkout button.alt:hover {
  background-color: var(--fl-red-hover, #c8303c) !important;
  background: var(--fl-red-hover, #c8303c) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   WOOCOMMERCE & ELEMENTOR CART / BASKET DARK THEME (HIGH SPECIFICITY)
   ========================================================================== */

/* 1. Outer Container & Section Backgrounds */
:is(body.woocommerce-cart, body.page-id-cart, body[class*="cart"], .elementor-widget-woocommerce-cart-page) :is(
  #page, #content, .site-content, article, .entry-content, .woocommerce,
  .elementor-section, .elementor-container, .elementor-column,
  .elementor-widget-container, .e-cart__container
) {
  background-color: #0c0d12 !important;
  background: #0c0d12 !important;
  color: #ffffff !important;
}

:is(body.woocommerce-cart, body.page-id-cart, body[class*="cart"]) .woocommerce {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 40px 24px 60px !important;
  box-sizing: border-box !important;
}

/* 2. Main Cart Grid Cards */
:is(body.woocommerce-cart, body.page-id-cart, body[class*="cart"], .elementor-widget-woocommerce-cart-page) :is(
  form.woocommerce-cart-form, .cart-collaterals, .cart_totals,
  .e-cart__column-start, .e-cart__column-end, .wc-block-cart,
  .e-cart__content
) {
  background-color: #13141c !important;
  background: #13141c !important;
  border: 1px solid #23243a !important;
  border-radius: 16px !important;
  color: #ffffff !important;
  padding: 28px !important;
  box-sizing: border-box !important;
  margin-bottom: 24px !important;
}

/* 3. Cart Table & Product Image Container (Strip White Background) */
:is(body.woocommerce-cart, body.page-id-cart, body[class*="cart"], .elementor-widget-woocommerce-cart-page) :is(
  table.shop_table, table.shop_table.cart, .woocommerce-cart-form__contents,
  .product-thumbnail, td.product-thumbnail, .e-cart__product-image,
  .e-cart__container table, .e-cart__container td
) {
  background: #13141c !important;
  background-color: #13141c !important;
  border-color: #23243a !important;
  color: #ffffff !important;
}

:is(body.woocommerce-cart, body.page-id-cart, body[class*="cart"], .elementor-widget-woocommerce-cart-page) :is(
  .product-thumbnail img, td.product-thumbnail img, .e-cart__product-image img
) {
  background: #1a1b26 !important;
  border: 1px solid #23243a !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  max-width: 70px !important;
  max-height: 70px !important;
}

/* 4. Product Titles, Prices, and Subtotals FORCE WHITE */
:is(body.woocommerce-cart, body.page-id-cart, body[class*="cart"], .elementor-widget-woocommerce-cart-page) :is(
  .product-name, .product-name a, td.product-name, td.product-name a,
  .e-cart__product-name, .e-cart__product-name a, .product-price,
  .product-subtotal, .amount, bdi, .e-cart__product-price,
  .e-cart__product-subtotal
) {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

:is(body.woocommerce-cart, body.page-id-cart, body[class*="cart"], .elementor-widget-woocommerce-cart-page) :is(
  .product-name p, .product-name span, .variation, .wc-item-meta,
  .e-cart__product-meta
) {
  color: #94a3b8 !important;
}

/* 5. Quantity Box & Trash Icon */
:is(body.woocommerce-cart, body.page-id-cart, body[class*="cart"], .elementor-widget-woocommerce-cart-page) :is(
  .quantity input.qty, input[type="number"].qty, .e-cart__product-quantity input
) {
  background-color: #0f1019 !important;
  background: #0f1019 !important;
  color: #ffffff !important;
  border: 1px solid #28293d !important;
  border-radius: 8px !important;
}

:is(body.woocommerce-cart, body.page-id-cart, body[class*="cart"], .elementor-widget-woocommerce-cart-page) :is(
  a.remove, .e-cart__product-remove a
) {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border-radius: 50% !important;
}

/* 6. PROCEED TO CHECKOUT BUTTON — VIBRANT FILMLY RED CTA */
:is(body.woocommerce-cart, body.page-id-cart, body[class*="cart"], .elementor-widget-woocommerce-cart-page, #elementor-page) :is(
  .wc-proceed-to-checkout a, .wc-proceed-to-checkout button,
  a.checkout-button, button.checkout-button, .e-cart__checkout-button,
  a.e-checkout-btn, .e-checkout-btn, .wc-block-cart__submit-button
) {
  background-color: #F73B3E !important;
  background: #F73B3E !important;
  color: #ffffff !important;
  border-radius: 30px !important;
  padding: 16px 32px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-style: italic !important;
  letter-spacing: 0.05em !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 6px 22px rgba(247, 59, 62, 0.5) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-top: 20px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

:is(body.woocommerce-cart, body.page-id-cart, body[class*="cart"], .elementor-widget-woocommerce-cart-page, #elementor-page) :is(
  .wc-proceed-to-checkout a:hover, a.checkout-button:hover,
  button.checkout-button:hover, .e-cart__checkout-button:hover,
  a.e-checkout-btn:hover, .e-checkout-btn:hover
) {
  background-color: #ff5255 !important;
  background: #ff5255 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(247, 59, 62, 0.65) !important;
}

/* 7. Empty Cart State & Notices */
.woocommerce-cart .cart-empty,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-message {
  background: #181926 !important;
  border-top: 3px solid #5E9AB7 !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  padding: 18px 24px !important;
  font-weight: 600 !important;
  margin-bottom: 24px !important;
}

.woocommerce-cart p.return-to-shop a,
.woocommerce-cart a.button.wc-backward {
  background-color: #F73B3E !important;
  background: #F73B3E !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  padding: 10px 24px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-style: italic !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-top: 12px !important;
  box-shadow: 0 4px 12px rgba(247, 59, 62, 0.3) !important;
}

.woocommerce-cart p.return-to-shop a:hover,
.woocommerce-cart a.button.wc-backward:hover {
  background-color: #ff5255 !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   GLOBAL HEADINGS, DASHBOARD TITLES, PROFILE SETUP & FIELD LABELS
   Enforce uppercase + italic + bold 900 styling for ALL page titles,
   dashboard headers, profile setup titles, and field labels (HEADINGS ONLY).
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.f-page-title,
.f-page-header h1,
.elementor-heading-title,
.f-opp-title,
.f-inbox-label,
.um-account-heading,
.um-account-title,
.um-account-main div.um-account-heading,
.um-account-tab div.um-account-heading,
.um-messaging-title,
.fi-header-title,
.fi-sidebar-header h2,
body.um-page-account h1,
body.um-page-account .entry-title,
body.um-page-account .page-title,
body.um-page-account h2,
body.um-page-messages h1,
body[class*="messages"] h1,
body[class*="messages"] .f-inbox-label,
body.um-page-user h1,
.um-profile.um-editing .um-field-label,
.um-profile.um-editing .um-field-label label,
.um-profile.um-editing .um-field-label span,
.um-profile.um-editing .um-row-heading,
.um-profile.um-editing .um-row-heading span,
.um-profile.um-editing .um-section-title,
.um-profile.um-editing .um-header-title,
.um-profile.um-editing .um-field-title,
.um-editing .um-field-label,
.um-editing .um-field-label label,
.um-editing .um-row-heading,
.um-editing .um-section-title,
.um-editing .um-header-title,
.um-account-main .um-field-label,
.um-account-main label,
body.um-page-account .um-field-label,
body.um-page-account label,
.um-account-side li a span.um-account-title,
.um-account-nav a,
.um-field-divider-text,
.um-field-divider-text span,
.um-field-group-head,
.flp-wrap .flp-header h2,
.flp-wrap .flp-header h1,
.flp-wrap .flp-main-title,
.flp-wrap .flp-plan-name,
.flp-wrap .flp-job-credits-banner h3,
.f-empty-title,
.f-empty-state-title,
.f-empty-state h2,
.f-empty-state h3,
.f-empty-state h4,
.f-modal-title,
.filmly-applications-title,
.f-applications-modal h2,
.f-applications-modal h3,
body.woocommerce-cart h1,
body.woocommerce-cart h2,
body.woocommerce-cart h3,
.cart_totals h2,
.e-cart__totals-title,
.woocommerce-cart th {
  text-transform: uppercase !important;
  font-style: italic !important;
  font-weight: 900 !important;
}

/* ==========================================================================
   ULTIMATE MEMBER MODAL / POPUP UPLOADER (CROPPER, PHOTO UPLOAD, & DIALOGS)
   Fix for white-on-white buttons and invisible close/cancel icons
   ========================================================================== */
.um-modal-overlay,
.um-popup-overlay {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 999999 !important;
}

.um-modal,
.um-popup {
  background: #13141c !important;
  border: 1.5px solid #23243a !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.um-modal-header,
.um-popup-header {
  background: #13141c !important;
  color: #ffffff !important;
  border-bottom: 1px solid #23243a !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-style: italic !important;
  font-size: 16px !important;
  padding: 14px 20px !important;
}

.um-modal-body,
.um-popup-body {
  background: #181926 !important;
  color: #ffffff !important;
  padding: 20px !important;
}

.um-modal-close,
.um-popup-close,
html body a.um-modal-close {
  color: #9ca3af !important;
  font-size: 24px !important;
  line-height: 1 !important;
  top: 10px !important;
  right: 14px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body a.um-modal-close:hover,
html body .um-popup-close:hover {
  color: #ffffff !important;
}

.um-modal-footer,
.um-popup-footer {
  background: #13141c !important;
  border-top: 1px solid #23243a !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

/* Primary Action Button (Apply / Finish Upload / Save) */
html body .um-modal-btn,
html body a.um-modal-btn,
html body .um-modal-btn.um-finish-upload,
html body input[type="submit"].um-modal-btn {
  background: #F73B3E !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  padding: 8px 24px !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-style: italic !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(247, 59, 62, 0.35) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  height: auto !important;
  line-height: 1.4 !important;
}

html body .um-modal-btn:hover,
html body a.um-modal-btn:hover,
html body .um-modal-btn.um-finish-upload:hover {
  background: #ff5255 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(247, 59, 62, 0.5) !important;
}

/* Cancel / Secondary Button */
html body .um-modal-btn.alt,
html body a.um-modal-btn.alt,
html body .um-modal a.cancel,
html body .um-modal-footer a.alt {
  background: #23243a !important;
  color: #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-style: italic !important;
  border: 1px solid #334155 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  height: auto !important;
  line-height: 1.4 !important;
}

html body .um-modal-btn.alt:hover,
html body a.um-modal-btn.alt:hover,
html body .um-modal a.cancel:hover {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #475569 !important;
}

/* Disabled state */
html body .um-modal-btn.disabled,
html body .um-modal-btn.disabled:hover {
  background: #334155 !important;
  color: #94a3b8 !important;
  opacity: 0.6 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* ==========================================================================
   JOB DESCRIPTION LINKS & BIZCOMMUNITY LINKS — RED IN NORMAL STATE & HOVER
   ========================================================================== */
.f-opp-description a,
.f-opp-description-text a,
.f-opportunities-ui .f-opp-description a,
.filmly-dark-mode .f-opp-description a,
.job-description a,
.job_description a,
.f-job-description a,
a.f-biz-apply-link {
  color: #F73B3E !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
  transition: color 0.2s ease, opacity 0.2s ease !important;
}

.f-opp-description a:hover,
.f-opp-description-text a:hover,
.f-opportunities-ui .f-opp-description a:hover,
.filmly-dark-mode .f-opp-description a:hover,
.job-description a:hover,
.job_description a:hover,
.f-job-description a:hover,
a.f-biz-apply-link:hover {
  color: #ff5255 !important;
  opacity: 0.9 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   REMOVE ICONS FROM TAB CONTENT HEADINGS (KEEP SIDEBAR TAB ICONS INTACT)
   ========================================================================== */
.um-account-main .um-account-heading i,
.um-account-tab .um-account-heading i,
.um-account-heading i,
div.um-account-heading i {
  display: none !important;
}

/* ==========================================================================
   ACCOUNT PAGE INPUT EDITABILITY & POINTER EVENTS UNLOCK
   ========================================================================== */
.um-account-tab input,
.um-account-tab select,
.um-account-tab textarea,
.um-account-main input,
.um-account-main select,
.um-account-main textarea,
body.um-page-account input,
body.um-page-account select,
body.um-page-account textarea {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  opacity: 1 !important;
}

.um-account-tab input[type="submit"],
.um-account-tab button,
.um-account-main input[type="submit"],
.um-account-main button,
body.um-page-account input[type="submit"],
body.um-page-account button {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   DASHBOARD EDIT PROFILE PAGE — ELEMENTOR CONTAINER DARK OVERRIDES
   Targets all Elementor section/container/widget wrappers that Elementor
   renders with a default white background on the dashboard ?um_action=edit page.
   ========================================================================== */

/* Page-level body scope */
body.um-page-user,
body[class*="page-dashboard"],
body[class*="um-page"] {
  background-color: #0c0d12 !important;
  background: #0c0d12 !important;
}

/* Every Elementor section, container, column and widget on dashboard pages */
body.um-page-user .elementor-section,
body.um-page-user .elementor-container,
body.um-page-user .elementor-column,
body.um-page-user .elementor-widget-container,
body.um-page-user .e-container,
body.um-page-user .e-con,
body.um-page-user .e-con-inner,
body.um-page-user section.elementor-section,
body.um-page-user div.elementor-column-wrap {
  background: transparent !important;
  background-color: transparent !important;
}

/* UM form wrappers — strip all white from every UM field/row/col on edit page */
body.um-page-user .um,
body.um-page-user .um-profile,
body.um-page-user .um-profile.um-editing,
body.um-page-user .um-profile.um-editing .um-row,
body.um-page-user .um-profile.um-editing .um-col,
body.um-page-user .um-profile.um-editing .um-col-0,
body.um-page-user .um-profile.um-editing .um-col-alt,
body.um-page-user .um-profile.um-editing .um-col-alt-b,
body.um-page-user .um-profile.um-editing .um-col-alt-s,
body.um-page-user .um-profile.um-editing .um-col-121,
body.um-page-user .um-profile.um-editing .um-col-122,
body.um-page-user .um-profile.um-editing .um-col-131,
body.um-page-user .um-profile.um-editing .um-col-132,
body.um-page-user .um-profile.um-editing .um-col-133,
body.um-page-user .um-profile.um-editing .um-field,
body.um-page-user .um-profile.um-editing .um-field-area,
body.um-page-user .um-profile.um-editing .um-field-group-body {
  background: #0c0d12 !important;
  background-color: #0c0d12 !important;
  color: #ffffff !important;
}

/* Bio textarea inner card */
body.um-page-user .um-profile.um-editing .um-field-bio .um-field-area,
body.um-page-user .um-profile.um-editing .um-field-type_textarea .um-field-area,
body.um-page-user .um-profile.um-editing .um-field[data-key="bio"] .um-field-area {
  background: #13141c !important;
  background-color: #13141c !important;
  border: 1px solid #23243a !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* All textareas inside edit form */
body.um-page-user .um-profile.um-editing textarea {
  background: #0f1019 !important;
  background-color: #0f1019 !important;
  color: #ffffff !important;
  border: 1px solid #28293d !important;
  border-radius: 8px !important;
}

/* Submit / update profile button row — transparent, no white bar */
body.um-page-user .um-profile.um-editing .um-col-alt,
body.um-page-user .um-profile.um-editing .um-col-alt-s {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Elementor inner sections that wrap individual UM sub-forms (bio, filmography, etc.) */
body.um-page-user .elementor-widget-shortcode,
body.um-page-user .elementor-widget-text-editor,
body.um-page-user .elementor-widget-heading {
  background: transparent !important;
  background-color: transparent !important;
}

/* Remove any white background injected by Elementor default widget styles */
body.um-page-user .elementor-widget-wrap {
  background: transparent !important;
  background-color: transparent !important;
}

/* Section backgrounds that Elementor injects inline — override via important */
body.um-page-user [data-elementor-type] section,
body.um-page-user [data-elementor-type] .e-con {
  --background-color: #0c0d12 !important;
  background: #0c0d12 !important;
}

/* ==========================================================================
   WOOCOMMERCE BASKET — PADDING FIX
   Hello Elementor strips padding from .site-main on the cart page,
   causing cart content to bleed to the viewport edge.
   ========================================================================== */

/* Dark background for the entire basket page */
body.woocommerce-cart,
body.woocommerce-cart #page,
body.woocommerce-cart .site,
body.woocommerce-cart .site-content,
body.woocommerce-cart #content {
  background: #0c0d12 !important;
  background-color: #0c0d12 !important;
}

body.woocommerce-cart .site-main {
  padding: 40px clamp(16px, 4vw, 80px) !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

body.woocommerce-cart .page-content {
  padding: 0 !important;
  width: 100% !important;
}

body.woocommerce-cart .wp-block-woocommerce-cart {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

body.woocommerce-cart .page-header {
  margin-bottom: 32px !important;
}

body.woocommerce-cart .entry-title {
  font-size: clamp(22px, 3vw, 36px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   ULTIMATE MEMBER NOTIFICATIONS SIDE DRAWER — MASTER DARK THEME BY DEFAULT
   No light theme, no conditional logic, 100% dark theme always.
   ========================================================================== */

/* Notification Side Drawer Container */
html body .um-notification-live-feed,
.um-notification-live-feed {
  background: #0c0d12 !important;
  color: #ffffff !important;
  border-left: 1px solid #23243a !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.85) !important;
}

.um-notification-live-feed-inner,
html body .um-notification-live-feed-inner {
  background: #0c0d12 !important;
}

/* Drawer Header */
html body .um-notification-header,
.um-notification-header {
  background: #13141c !important;
  border-bottom: 1px solid #23243a !important;
  padding: 16px 20px !important;
}

html body .um-notification-header h4,
.um-notification-header h4 {
  color: #ffffff !important;
  font-family: 'degular', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}

html body .um-notification-i-close,
.um-notification-i-close,
html body .um-notifications-options-a,
.um-notifications-options-a,
html body .um-notifications-options-a i,
.um-notifications-options-a i,
html body .um-notifications-options-a i:before,
.um-notifications-options-a i:before {
  color: #9ca3af !important;
  font-size: 18px !important;
  transition: color 0.15s ease !important;
}

html body .um-notification-i-close:hover,
.um-notification-i-close:hover,
html body .um-notifications-options-a:hover,
.um-notifications-options-a:hover,
html body .um-notifications-options-a:hover i,
.um-notifications-options-a:hover i,
html body .um-notifications-options-a:hover i:before,
.um-notifications-options-a:hover i:before {
  color: #ffffff !important;
}

/* Filter pills (All, Unread) */
html body .um-notifications-filter,
.um-notifications-filter {
  background: #1a1b26 !important;
  border: 1px solid #23243a !important;
  color: #9ca3af !important;
}

html body .um-notifications-filter.active,
.um-notifications-filter.active {
  background: linear-gradient(135deg, #e63946 0%, #b81d24 100%) !important;
  border-color: #e63946 !important;
  color: #ffffff !important;
}

/* Individual Notification Items */
html body .um-notification,
.um-notification {
  background: #13141c !important;
  border-bottom: 1px solid #1e2030 !important;
  color: #ffffff !important;
}

html body .um-notification:hover,
.um-notification:hover,
html body .um-notification.read:hover,
.um-notification.read:hover {
  background: #1a1b26 !important;
}

html body .um-notification.unread,
.um-notification.unread {
  background: #161726 !important;
  border-left: 3px solid #e63946 !important;
}

html body .um-notification.read,
.um-notification.read {
  background: #13141c !important;
}

/* Notification text, links & subtext */
html body .um-notification .um-notification-content,
html body .um-notification .um-notification-content-string,
html body .um-notification a,
.um-notification a {
  color: #ffffff !important;
}

html body .um-notification span.b1,
html body .um-notification span.b2,
.um-notification span.b1,
.um-notification span.b2 {
  color: #9ca3af !important;
}

html body .um-notifications-none,
.um-notifications-none {
  color: #6b7280 !important;
}

/* Notification Action Dropdown */
html body .um-new-dropdown,
.um-new-dropdown {
  background: #13141c !important;
  border: 1px solid #23243a !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85) !important;
  border-radius: 12px !important;
}

html body .um-new-dropdown ul li a,
.um-new-dropdown ul li a {
  color: #ffffff !important;
}

html body .um-new-dropdown ul li a:hover,
.um-new-dropdown ul li a:hover {
  background: #1a1b26 !important;
  color: #e63946 !important;
}

/* ==========================================================================
   ELEMENTOR BUTTON TEXT COLOR FIX
   filmly-global.css loads AFTER post-6.css & post-21.css, so rules here
   reliably override Elementor Kit's global `.elementor-kit-6 .elementor-button { color: #FFFFFF }`.
   Targets buttons with light/white backgrounds so text is dark & readable.
   ========================================================================== */

/* Buttons with white/off-white background (var --e-global-color-cb09fe4 = #FFFDFA) */
.elementor-21 .elementor-element.elementor-element-182cefa .elementor-button,
.elementor-21 .elementor-element.elementor-element-182cefa .elementor-button .elementor-button-text,
.elementor-21 .elementor-element.elementor-element-182cefa .elementor-button-link,
.elementor-21 .elementor-element.elementor-element-182cefa .elementor-button-link .elementor-button-text,
.elementor-21 .elementor-element.elementor-element-545bae0 .elementor-button,
.elementor-21 .elementor-element.elementor-element-545bae0 .elementor-button .elementor-button-text,
.elementor-21 .elementor-element.elementor-element-545bae0 .elementor-button-link,
.elementor-21 .elementor-element.elementor-element-545bae0 .elementor-button-link .elementor-button-text {
  color: #131313 !important;
}

/* Hover state — these buttons get a dark gradient bg on hover, so text should be light */
.elementor-21 .elementor-element.elementor-element-182cefa .elementor-button:hover,
.elementor-21 .elementor-element.elementor-element-182cefa .elementor-button:hover .elementor-button-text,
.elementor-21 .elementor-element.elementor-element-182cefa .elementor-button:focus,
.elementor-21 .elementor-element.elementor-element-182cefa .elementor-button:focus .elementor-button-text,
.elementor-21 .elementor-element.elementor-element-545bae0 .elementor-button:hover,
.elementor-21 .elementor-element.elementor-element-545bae0 .elementor-button:hover .elementor-button-text,
.elementor-21 .elementor-element.elementor-element-545bae0 .elementor-button:focus,
.elementor-21 .elementor-element.elementor-element-545bae0 .elementor-button:focus .elementor-button-text {
  color: #FFFDFA !important;
}

/* Broader safety net: any elementor-button with an inline style setting a light bg */
.elementor-button[style*="background-color: rgb(255"],
.elementor-button[style*="background-color: #FFFD"],
.elementor-button[style*="background-color: #fff"],
.elementor-button[style*="background-color: #FFF"],
.elementor-button[style*="background-color: white"] {
  color: #131313 !important;
}

.elementor-button[style*="background-color: rgb(255"] .elementor-button-text,
.elementor-button[style*="background-color: #FFFD"] .elementor-button-text,
.elementor-button[style*="background-color: #fff"] .elementor-button-text,
.elementor-button[style*="background-color: #FFF"] .elementor-button-text,
.elementor-button[style*="background-color: white"] .elementor-button-text {
  color: #131313 !important;
}