/**
 * BirdieChaser Account/Auth Styles
 * 
 * Contains all styles for:
 * - Auth pages (Login, Register, Password Reset - pages 65, 66, 70)
 * - Account page (page 69)
 * - Ultimate Member plugin overrides
 * 
 * Loaded conditionally on account and auth pages only
 * 
 * @package BirdieChaser
 * @since 2.0.0
 */

/* ========================================
   IFRAME SAFETY STYLES
   Critical for Three.js integration - prevents layout issues when loaded in iframe
   ======================================== */

/* Prevent unexpected height expansion in iframe context */
.page-id-65, 
.page-id-66,
.page-id-1293, 
.page-id-69, 
.page-id-70 {
  min-height: 0;
  height: auto;
}

/* ========================================
   AUTH/ACCOUNT PAGE STYLING
   Applies to standalone page views (not iframe)
   Border-radius removed - handled by iframe container in 3D environment
   ======================================== */

/* Center headings on auth pages */
.page-id-65 .entry-content h1,
.page-id-66 .entry-content h1,
.page-id-1293 .entry-content h1,
.page-id-70 .entry-content h1 {
  text-align: center !important;
}

/* Center descriptive text below headings */
.page-id-65 .entry-content > p,
.page-id-66 .entry-content > p,
.page-id-1293 .entry-content > p,
.page-id-70 .entry-content > p {
  text-align: center !important;
}

/* General text links on auth pages */
.page-id-65 .entry-content a,
.page-id-66 .entry-content a,
.page-id-1293 .entry-content a,
.page-id-70 .entry-content a {
  color: var(--color-brown-dark) !important;
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.page-id-65 .entry-content a:hover,
.page-id-66 .entry-content a:hover,
.page-id-1293 .entry-content a:hover,
.page-id-70 .entry-content a:hover {
  color: var(--color-brown-medium) !important;
}

/* User profiles are disabled - hide view profile links */
.um-account-profile-link {
  display: none !important;
}

/* ========================================
   ULTIMATE MEMBER - GLOBAL OVERRIDES
   
   CRITICAL CONTEXT:
   Ultimate Member plugin uses aggressive !important flags throughout
   its default CSS (um-styles.min.css, um-old-default.min.css).
   We MUST use !important to override these styles.
   
   Strategy: High specificity selectors + !important flags
   ======================================== */

/* Remove UM's default background - we apply our own via page-specific classes */
.um.um:not(.um-admin) {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-base) !important;
  color: var(--color-brown-dark) !important;
}

/* Field block text (descriptive text, instructions) */
.um.um .um-field-block {
  color: var(--color-brown-dark) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-base) !important;
}

/* Form labels - uppercase bold styling */
.um .um-field-label {
  color: var(--color-brown-dark) !important;
}

.um .um-field-label label {
  font-family: var(--font-body) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: 1.5 !important;
  color: var(--color-brown-dark) !important;
  text-transform: uppercase !important;
}

.um .um-field-label .um-field-label-icon,
.um .um-field-label .um-field-label-icon i {
  color: var(--color-brown-dark) !important;
}

/* ========================================
   ULTIMATE MEMBER - BUTTON STYLES
   Primary submit buttons with brown background
   ======================================== */
.um input[type=submit].um-button,
.um input[type=submit].um-button:focus,
a.um-button {
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-bold) !important;
  font-size: var(--font-size-md) !important;
  text-transform: uppercase !important;
  color: var(--color-cream-light) !important;
  background: var(--color-brown-dark) !important;
  background-color: var(--color-brown-dark) !important;
  border: none !important;
  border-radius: var(--radius-standard) !important;
  padding: 12px 32px !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  transition: opacity var(--transition-base) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  opacity: 1 !important;
}

.um input[type=submit].um-button:hover,
a.um-button:hover {
  opacity: 0.9 !important;
  background: var(--color-brown-dark) !important;
  background-color: var(--color-brown-dark) !important;
  text-decoration: none !important;
}

/* Request data/export buttons - match primary button style */
.um-request-button {
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-bold) !important;
  font-size: var(--font-size-md) !important;
  text-transform: uppercase !important;
  color: var(--color-cream-light) !important;
  background: var(--color-brown-dark) !important;
  background-color: var(--color-brown-dark) !important;
  border: none !important;
  border-radius: var(--radius-standard) !important;
  padding: 12px 32px !important;
  display: inline-block !important;
  cursor: pointer !important;
  transition: opacity var(--transition-base) !important;
  text-decoration: none !important;
  margin: 10px 0 0 !important;
}

.um-request-button:hover {
  opacity: 0.9 !important;
  background: var(--color-brown-dark) !important;
  background-color: var(--color-brown-dark) !important;
  text-decoration: none !important;
}

/* ========================================
   ULTIMATE MEMBER - FORM INPUTS
   Text fields, email, password, textarea
   Rounded corners with brown border on focus
   
   CRITICAL: Must use .um.um .um-form.um-form specificity to override UM base styles
   This matches the working CSS you provided
   ======================================== */
.um.um .um-form.um-form input[type="text"],
.um.um .um-form.um-form input[type="email"],
.um.um .um-form.um-form input[type="password"],
.um.um .um-form.um-form input[type="search"],
.um.um .um-form.um-form input[type="tel"],
.um.um .um-form.um-form input[type="number"],
.um.um .um-form.um-form textarea {
  font-family: var(--font-body) !important;
  font-size: var(--font-size-xxs) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-brown-dark) !important;
  background-color: #fff !important;
  border: 3px solid var(--color-text-muted) !important;
  border-radius: var(--radius-standard) !important;
  padding: 12px 16px !important;
  height: auto !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}

/* Placeholder text styling */
.um.um .um-form.um-form input::placeholder,
.um.um .um-form.um-form textarea::placeholder {
  color: var(--color-text-muted) !important;
  font-weight: var(--font-weight-semibold) !important;
  opacity: 1 !important;
}

/* Focus state - brown border for visual feedback */
.um.um .um-form.um-form input[type="text"]:focus,
.um.um .um-form.um-form input[type="email"]:focus,
.um.um .um-form.um-form input[type="password"]:focus,
.um.um .um-form.um-form input[type="search"]:focus,
.um.um .um-form.um-form input[type="tel"]:focus,
.um.um .um-form.um-form input[type="number"]:focus,
.um.um .um-form.um-form textarea:focus {
  outline: none !important;
  border-color: var(--color-brown-medium) !important;
  border-width: 3px !important;
}

/* ========================================
   ULTIMATE MEMBER - PASSWORD VISIBILITY TOGGLE
   Eye icon that shows/hides password text
   ======================================== */
.um-toggle-password {
  font-size: 24px !important;
  line-height: 2.5 !important;
  width: 50px !important;
  color: var(--color-brown-dark) !important;
}

.um-toggle-password i.um-icon-eye,
.um-toggle-password i.um-icon-eye-disabled {
  color: var(--color-brown-dark) !important;
  transition: color var(--transition-fast);
}

.um-toggle-password:hover i.um-icon-eye,
.um-toggle-password:hover i.um-icon-eye-disabled {
  color: var(--color-brown-medium) !important;
}

/* ========================================
   ULTIMATE MEMBER - CHECKBOX/RADIO BUTTONS
   "Keep me signed in", privacy settings, and similar form elements
   Updated to use brand colors instead of default grey
   ======================================== */

/* Checkbox and radio option label text - brown instead of grey */
.um.um .um-field-checkbox-option,
.um.um .um-field-radio-option {
  margin: 0 0 0 36px !important;
  line-height: 24px !important;
  color: var(--color-brown-dark) !important;
  display: block !important;
  font-family: var(--font-body) !important;
}

/* Checkbox icon state */
.um-field-checkbox-state,
.um-field-checkbox-state i,
.um-field-radio-state,
.um-field-radio-state i {
  color: var(--color-brown-dark) !important;
}

/* Checkbox field label */
.um-field.um-field-c label.um-field-checkbox {
  color: var(--color-brown-dark) !important;
}

/* Radio button checked state - use brown instead of default blue */
.um-field-radio input[type="radio"]:checked + .um-field-radio-state i {
  color: var(--color-brown-medium) !important;
}

/* ========================================
   ULTIMATE MEMBER - TOOLTIPS
   Question mark icons with hover info
   Updated to match brand colors instead of grey/blue
   ======================================== */

/* Tooltip icon - brown instead of grey */
.um-tip,
.um-tip-w {
  color: var(--color-text-muted) !important;
  cursor: pointer !important;
  transition: color var(--transition-fast) !important;
}

/* Tooltip icon hover - darker brown instead of blue */
.um-tip:hover,
.um-tip-w:hover {
  color: var(--color-brown-medium) !important;
}

/* Tooltip icon itself */
.um-tip i,
.um-tip-w i {
  color: inherit !important;
}

/* Tooltip text popup - styled to match cream modals */
.um-tip-text {
  background: var(--color-cream-light) !important;
  color: var(--color-brown-dark) !important;
  border: 2px solid var(--color-text-muted) !important;
  border-radius: var(--radius-small) !important;
  padding: 8px 12px !important;
  font-size: var(--font-size-xxs) !important;
  line-height: 1.4 !important;
}

/* ========================================
   ULTIMATE MEMBER - TEXT LINKS
   "Forgot your password?" and similar links
   ======================================== */
.um-col-alt-b .um-link-alt {
  color: var(--color-brown-dark) !important;
  font-family: var(--font-body) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast);
}

.um-col-alt-b .um-link-alt:hover {
  color: var(--color-brown-medium) !important;
}

/* ========================================
   ULTIMATE MEMBER - FIELD ERRORS
   Validation error messages below form fields
   ======================================== */
.um-field-error {
  background: #c74a4a !important;
  border-radius: var(--radius-small) !important;
  color: #fff !important;
  padding: 12px !important;
  font-size: var(--font-size-xxs) !important;
  margin: 12px 0 0 0 !important;
}

/* Error arrow pointer */
.um-field-arrow {
  color: #c74a4a !important;
}

/* ========================================
   SELECT2 DROPDOWNS - STYLING
   
   CONTEXT: Ultimate Member uses Select2 plugin for country/state dropdowns.
   Both UM and Select2 have aggressive CSS with high specificity and !important.
   
   STRATEGY: Match their specificity to override visual styling
   Maintaining rounded corners and brown color scheme
   ======================================== */

/* Closed dropdown - match text input styling */
.um-field .select2.select2-container .select2-selection.select2-selection--single {
  border: 3px solid var(--color-text-muted) !important;
  border-radius: var(--radius-standard) !important;
  padding: 12px 16px !important;
  height: auto !important;
  min-height: 48px !important;
}

/* Selected text styling - match other form inputs */
.um-field .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5 !important;
  padding: 0 !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* Focus and open states - brown border */
.um-field .select2.select2-container.select2-container--focus .select2-selection,
.um-field .select2.select2-container.select2-container--open .select2-selection {
  border-color: var(--color-brown-medium) !important;
  box-shadow: none !important;
}

/* Dropdown menu container */
.select2-dropdown.select2-dropdown--below {
  border: 3px solid var(--color-brown-medium) !important;
  border-radius: var(--radius-standard) !important;
}

/* Search input inside dropdown */
.select2-dropdown .select2-search--dropdown .select2-search__field {
  border: 3px solid var(--color-text-muted) !important;
  border-radius: var(--radius-standard) !important;
}

.select2-dropdown .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--color-brown-medium) !important;
  outline: none !important;
}

/* Hovered/highlighted dropdown option */
.um-field .select2-container.select2-container--open .select2-dropdown .select2-results li.select2-results__option--highlighted {
  background: var(--color-brown-medium) !important;
  color: var(--color-cream-light) !important;
}

/* Dropdown arrow - vertical centering fix */
.um-field .select2.select2-container .select2-selection.select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: auto !important;
}

/* ----------------------------------------
   AUTH PAGES - MOBILE (Login/Register/Reset)
   ---------------------------------------- */
@media (max-width: 500px) {
  .page-id-65 .entry-content,
  .page-id-66 .entry-content,
  .page-id-1293 .entry-content,
  .page-id-70 .entry-content {
    padding: 30px 20px !important;
  }
}

/* ========================================
   IFRAME OPTIMIZATION - MINIMAL VERSION
   Auth/Account pages designed for iframe embedding in 3D environment
   ======================================== */

/* Reset page-level backgrounds */
.page-id-65,
.page-id-70 {
  background: transparent !important;
}

/* Login page needs cream background to fill page */
body.page-id-66,
body.page-id-1293,
body.page-id-66 .site,
body.page-id-1293 .site,
body.page-id-66 .site.grid-container,
body.page-id-1293 .site.grid-container,
body.page-id-66 .site-content,
body.page-id-1293 .site-content,
body.page-id-66 .content-area,
body.page-id-1293 .content-area,
body.page-id-66 .site-main,
body.page-id-1293 .site-main,
body.page-id-66 #primary,
body.page-id-1293 #primary,
body.page-id-66 article,
body.page-id-1293 article,
body.page-id-66 .inside-article,
body.page-id-1293 .inside-article,
body.page-id-66 .entry-content,
body.page-id-1293 .entry-content,
.page-id-66,
.page-id-1293,
.page-id-66 .site,
.page-id-1293 .site,
.page-id-66 .site-content,
.page-id-1293 .site-content,
.page-id-66 .content-area,
.page-id-1293 .content-area,
.page-id-66 #primary,
.page-id-1293 #primary,
.page-id-66 article,
.page-id-1293 article,
.page-id-66 .inside-article,
.page-id-1293 .inside-article {
  background: var(--gradient-cream) !important;
  min-height: 100vh !important;
  box-shadow: none !important;
}

/* Account page needs cream background to fill iframe */
body.page-id-69,
body.page-id-69 .site,
body.page-id-69 .site.grid-container,
body.page-id-69 .site-content,
body.page-id-69 .content-area,
body.page-id-69 .site-main,
body.page-id-69 #primary,
body.page-id-69 article,
body.page-id-69 .inside-article,
body.page-id-69 .entry-content {
  background: var(--gradient-cream) !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-shadow: none !important;
}

/* Account page entry-content padding for content spacing */
body.page-id-69 .entry-content {
  padding: 40px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Account page - constrain content width */
body.page-id-69 .entry-content > * {
  max-width: 450px !important;
  width: 100% !important;
}

/* Account page - UM container */
body.page-id-69 .um,
body.page-id-69 .um-form {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Account page - Remove grey borders from form elements */
body.page-id-69 .um-account-tab,
body.page-id-69 .um-account-tab-general,
body.page-id-69 .um-form,
body.page-id-69 .um-col-alt,
body.page-id-69 .um-col-alt-b,
body.page-id-69 .um-left,
body.page-id-69 .um-right,
body.page-id-69 .um-row,
body.page-id-69 .um hr,
body.page-id-69 hr {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
}

/* Neutralize GeneratePress container constraints */
.page-id-65 .site.grid-container,
.page-id-65 .site-content,
.page-id-65 .content-area,
.page-id-65 #primary,
.page-id-65 article,
.page-id-65 .inside-article,
.page-id-70 .site.grid-container,
.page-id-70 .site-content,
.page-id-70 .content-area,
.page-id-70 #primary,
.page-id-70 article,
.page-id-70 .inside-article {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Expand entry-content to fill iframe with cream background */
.page-id-65 .entry-content,
.page-id-70 .entry-content {
  background: var(--gradient-cream) !important;
  box-shadow: var(--glow-cream) !important;
  border-radius: 0 !important;
  max-width: none !important;
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 40px 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Login page entry-content - no box-shadow for seamless look */
.page-id-66 .entry-content,
.page-id-1293 .entry-content {
  background: var(--gradient-cream) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: none !important;
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 40px 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Constrain direct children to readable width */
.page-id-65 .entry-content > *,
.page-id-66 .entry-content > *,
.page-id-1293 .entry-content > *,
.page-id-70 .entry-content > * {
  max-width: 450px !important;
  width: 100% !important;
}

/* Remove Ultimate Member container width restrictions */
.page-id-65 .um,
.page-id-66 .um,
.page-id-1293 .um,
.page-id-70 .um {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Ensure UM form stays within centered content width */
.page-id-65 .um-form,
.page-id-66 .um-form,
.page-id-1293 .um-form,
.page-id-70 .um-form {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Birdhouse Registration page - button styling */
.page-id-1293 input[type="submit"],
.page-id-1293 button[type="submit"],
.page-id-1293 .um-button,
.page-id-1293 .um input[type="submit"],
.page-id-1293 .wpcf7-submit,
.page-id-1293 .entry-content input[type="submit"],
.page-id-1293 .entry-content button[type="submit"] {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #fbe8c6 !important;
  background: #412818 !important;
  background-color: #412818 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 32px !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
  text-shadow: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 450px !important;
  display: block !important;
  margin: 10px auto !important;
}

.page-id-1293 input[type="submit"]:hover,
.page-id-1293 button[type="submit"]:hover,
.page-id-1293 .um-button:hover {
  opacity: 0.9 !important;
}

/* Birdhouse Registration - UM alt button (Login link) */
.page-id-1293 a.um-button.um-alt,
.page-id-1293 .um-alt.um-button {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #fbe8c6 !important;
  background: #412818 !important;
  background-color: #412818 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 32px !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  display: inline-block !important;
  text-align: center !important;
  transition: opacity 0.2s ease !important;
}

.page-id-1293 a.um-button.um-alt:hover {
  opacity: 0.9 !important;
}

/* Birdhouse Registration - heading text */
.page-id-1293 h2.wp-block-heading {
  font-size: 1.4em !important;
  font-weight: 700 !important;
  margin-top: -30px !important;
}

/* Birdhouse Registration - "Create an Account" heading injected above form fields */
.page-id-1293 .um-form .um-row._um_row_1::before {
  content: 'Create an Account' !important;
  display: block !important;
  font-size: 1.4em !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: var(--color-brown-dark, #412818) !important;
  font-family: 'Libre Baskerville', Georgia, serif !important;
  padding: 60px 0 20px !important;
}


/* Birdhouse Registration - Scroll indicator */
.bc-scroll-indicator {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 110px !important;
  height: 110px !important;
  z-index: 999 !important;
  pointer-events: none !important;
  animation: bcScrollBounce 1.5s ease-in-out infinite !important;
  opacity: 1 !important;
  transition: opacity 0.5s ease !important;
}

.bc-scroll-indicator.hidden {
  opacity: 0 !important;
  animation: none !important;
}

@keyframes bcScrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Birdhouse Registration - Hide pricing/plan section ($6.99/month) */
.page-id-1293 .um-field-type_umm_stripe_plans,
.page-id-1293 [data-key="umm_stripe_plans"] {
  display: none !important;
}

/* Birdhouse Registration - Make form relative for login link positioning */
.page-id-1293 .um-form {
  position: relative !important;
  padding-top: 80px !important;
}

/* Register button - full width at bottom */
.page-id-1293 .um-col-alt .um-left.um-half {
  float: none !important;
  width: 100% !important;
}

/* Login link - absolute position at top of form */
.page-id-1293 .um-col-alt .um-right.um-half {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  float: none !important;
  width: 100% !important;
  text-align: center !important;
}

/* "Already have an account?" label above login button */
.page-id-1293 .um-col-alt .um-right.um-half::before {
  content: 'Already have an account?' !important;
  display: block !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #412818 !important;
  margin-bottom: 8px !important;
}

/*
 * Add top spacing before Stripe billing method selector
 * Prevents visual collision with preceding account section
 */
.page-id-69 .um-account-tab label[for="um-stripe-collection-method"] {
  margin-top: 24px !important;
}

/* =========================================================
   ACCOUNT PAGE - UPDATED DESIGN (v3.4)
   Matching mockup with clean username, location, and tabs
   ========================================================= */

/* ----------------------------------------
   RETURN TO 3D BUTTON
   ---------------------------------------- */
.bc-return-3d {
  position: absolute !important;
  top: 20px !important;
  right: 30px !important;
  background: var(--color-cream-light) !important;
  border: 2px solid var(--color-brown-dark) !important;
  border-radius: 10px !important;
  padding: 10px 15px !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 10 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.bc-return-3d .bc-return-label {
  font-size: 10px !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-brown-dark) !important;
  letter-spacing: 1px !important;
}

.bc-return-3d .bc-return-3d-text {
  font-family: var(--font-heading) !important;
  font-size: 32px !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-brown-dark) !important;
  line-height: 1 !important;
}

.bc-return-3d .bc-return-exp {
  font-size: 10px !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-brown-dark) !important;
  letter-spacing: 1px !important;
}

.bc-return-3d .bc-return-arrow {
  font-size: 24px !important;
  color: var(--color-brown-dark) !important;
  margin-top: 5px !important;
}

.bc-return-3d:hover {
  background: var(--color-cream-medium) !important;
}

/* ----------------------------------------
   PAGE TITLE
   ---------------------------------------- */
.bc-account-title {
  font-family: var(--font-heading) !important;
  font-size: 42px !important;
  color: var(--color-brown-dark) !important;
  margin-bottom: 25px !important;
  text-align: left !important;
}

/* ----------------------------------------
   ACCOUNT BANNER - Dark Brown Card
   ---------------------------------------- */
.bc-account-banner {
  background: var(--color-brown-dark) !important;
  border-radius: 15px !important;
  padding: 25px 30px !important;
  display: flex !important;
  align-items: center !important;
  gap: 25px !important;
  margin-bottom: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

/* Avatar */
.bc-account-avatar {
  flex-shrink: 0 !important;
}

.bc-account-avatar img {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  border: 4px solid var(--color-cream-light) !important;
  object-fit: cover !important;
  background: #ccc !important;
}

/* User Info */
.bc-account-info {
  flex: 1 !important;
}

.bc-account-username {
  font-family: var(--font-heading) !important;
  font-size: 32px !important;
  color: var(--color-cream-light) !important;
  margin: 0 0 5px 0 !important;
  opacity: 0.9 !important;
}

.bc-account-fullname {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  color: var(--color-cream-light) !important;
  margin: 0 0 12px 0 !important;
}

.bc-account-badge {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--color-cream-light) !important;
  font-size: 11px !important;
  font-weight: var(--font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding: 8px 14px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Edit Profile Button */
.bc-edit-profile {
  color: var(--color-cream-light) !important;
  font-size: 13px !important;
  font-weight: var(--font-weight-bold) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Add left margin only when badge is present */
.bc-account-badge + .bc-edit-profile {
  margin-left: 20px !important;
}

.bc-edit-profile:hover {
  opacity: 0.8 !important;
}

.bc-edit-profile i {
  font-size: 16px !important;
}

/* ----------------------------------------
   BANNER DIVIDER LINE
   ---------------------------------------- */
.bc-account-header::after {
  content: '' !important;
  display: block !important;
  height: 1px !important;
  background: var(--color-brown-dark) !important;
  margin: 30px 0 25px 0 !important;
  opacity: 0.3 !important;
}

/* Hide original UM account meta */
.page-id-69 .um-account-meta {
  display: none !important;
}

.page-id-69 .entry-header {
  display: none !important;
}

/* ----------------------------------------
   HORIZONTAL TABS - Custom Tab Bar
   We build our own tab bar since UM's accordion
   puts each tab in separate divs
   ---------------------------------------- */

/* Hide ALL the original UM accordion nav items */
.page-id-69 .um-account-nav,
.um.um-account .um-account-nav,
.um-account-main .um-account-nav,
div.um-account-nav,
.um-account-nav.uimob340-show,
.um-account-nav.uimob500-show {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* COMPLETELY HIDE the desktop sidebar with icons */
.page-id-69 .um-account-side,
.um-account-side,
.um.um-account .um-account-side,
div.um-account-side {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Also hide the account meta */
.page-id-69 .um-account-meta,
.um.um-account .um-account-meta,
.um-account-meta.radius-1 {
  display: none !important;
}

/* ========================================
   HIDE DOWNLOADS TAB - ALL USERS/ROLES
   Ensures Downloads tab is hidden regardless of user role
   ======================================== */
/* Hide Downloads from Ultimate Member tabs */
.um-account-tab[data-tab="downloads"],
.um-account-nav-item[data-tab="downloads"],
a.um-account-link[data-tab="downloads"],
.um-account-tab-downloads,
[data-tab="downloads"],
.um-account-nav a[data-tab="downloads"] {
  display: none !important;
}

/* Hide Downloads from WooCommerce My Account */
.woocommerce-MyAccount-navigation-link--downloads,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads {
  display: none !important;
}

/* Hide Downloads from our custom horizontal tabs */
.bc-horizontal-tabs a[data-tab="downloads"],
.bc-horizontal-tabs li[data-tab="downloads"],
.bc-tab-downloads,
.bc-tab[data-tab="downloads"] {
  display: none !important;
}

/* Hide duplicate Payment Methods from WooCommerce */
.woocommerce-MyAccount-navigation-link--payment-methods,
.bc-horizontal-tabs a[data-tab="payment-methods"],
.bc-tab[data-tab="payment-methods"],
[data-tab="payment-methods"] {
  display: none !important;
}

/* Hide any tabs not in our allowed list - CSS fallback */
.um-account-nav a[data-tab="privacy"],
.um-account-nav a[data-tab="delete"],
.um-account-nav a[data-tab="shipping"],
.bc-tab[data-tab="privacy"],
.bc-tab[data-tab="delete"],
.bc-tab[data-tab="shipping"] {
  display: none !important;
}

/* Make main content full width */
.page-id-69 .um-account-main,
.um.um-account .um-account-main {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Custom horizontal tab bar - matching mockup */
.bc-horizontal-tabs {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
  border: 1px solid var(--color-brown-dark) !important;
  border-radius: 8px !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* Individual tabs */
.bc-horizontal-tabs .bc-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 22px !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: none !important;
  border-right: 1px solid var(--color-brown-dark) !important;
  background: transparent !important;
  color: var(--color-brown-dark) !important;
  border-radius: 0 !important;
}

.bc-horizontal-tabs .bc-tab:last-child {
  border-right: none !important;
}

/* Active tab */
.bc-horizontal-tabs .bc-tab.current {
  background: var(--color-brown-dark) !important;
  color: var(--color-cream-light) !important;
}

/* Hover state */
.bc-horizontal-tabs .bc-tab:not(.current):hover {
  background: rgba(65, 40, 24, 0.1) !important;
}

/* Tab content heading - hide it since we have our own header */
.page-id-69 .um-account-heading,
.um.um-account .um-account-heading {
  display: none !important;
}

/* Ensure tab content displays properly */
.page-id-69 .um-account-tab {
  display: none;
}

.page-id-69 .um-account-tab[style*="display: block"],
.page-id-69 .um-account-tab:not([style*="display: none"]):first-of-type {
  display: block;
}

/* ----------------------------------------
   FORCE STYLES AT ALL UM BREAKPOINTS
   ---------------------------------------- */
.um.um-account.uimob340 .um-account-nav,
.um.um-account.uimob500 .um-account-nav,
.um.um-account.uimob800 .um-account-nav,
.um.um-account.uimob960 .um-account-nav {
  display: none !important;
}

.um.um-account.uimob340 .um-account-side,
.um.um-account.uimob500 .um-account-side,
.um.um-account.uimob800 .um-account-side,
.um.um-account.uimob960 .um-account-side,
.um.um-account.uimob340-show .um-account-side,
.um.um-account.uimob500-show .um-account-side,
.um.um-account .um-account-side.uimob340-hide,
.um.um-account .um-account-side.uimob500-hide {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

.um.um-account.uimob340 .um-account-main,
.um.um-account.uimob500 .um-account-main,
.um.um-account.uimob800 .um-account-main,
.um.um-account.uimob960 .um-account-main {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

/* ----------------------------------------
   RESPONSIVE - Scrollable tabs on mobile
   ---------------------------------------- */
@media (max-width: 768px) {
  /* Username - smaller size and padding */
  .bc-account-username {
    font-size: 22px !important;
    padding: 0 20px !important;
    word-break: break-word !important;
  }
  
  /* Full name - add padding */
  .bc-account-fullname {
    padding: 0 20px !important;
  }
  
  /* Badge - full width */
  .bc-account-badge {
    display: block !important;
    width: calc(100% - 40px) !important;
    margin: 0 20px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  
  /* Tabs - stack vertically, full width with dividers */
  .bc-horizontal-tabs {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px !important;
    border: 1px solid var(--color-brown-dark) !important;
    box-sizing: border-box !important;
  }
  
  .bc-horizontal-tabs .bc-tab {
    flex-shrink: 0 !important;
    font-size: 14px !important;
    padding: 14px 16px !important;
    width: 100% !important;
    text-align: center !important;
    border-right: none !important;
    border-bottom: 1px solid var(--color-brown-dark) !important;
    box-sizing: border-box !important;
  }
  
  .bc-horizontal-tabs .bc-tab:last-child {
    border-bottom: none !important;
  }
}

@media (max-width: 480px) {
  .bc-account-username {
    font-size: 18px !important;
    padding: 0 15px !important;
  }
  
  .bc-account-fullname {
    padding: 0 15px !important;
  }
  
  .bc-account-badge {
    width: calc(100% - 30px) !important;
    margin: 0 15px !important;
    font-size: 10px !important;
  }
  
  .bc-horizontal-tabs .bc-tab {
    font-size: 13px !important;
    padding: 12px 14px !important;
  }
}

/* ----------------------------------------
   WELCOME CONTENT (Dashboard tab)
   ---------------------------------------- */
.bc-welcome-content {
  margin: 0 0 30px 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-brown-dark);
}

.bc-welcome-content p {
  margin: 0 0 15px 0;
}

.bc-welcome-content p:last-child {
  margin-bottom: 0;
}

.bc-welcome-content strong {
  font-weight: var(--font-weight-bold);
}

.bc-welcome-content a {
  color: var(--color-link-gold);
  text-decoration: underline;
  font-weight: var(--font-weight-medium);
  transition: color 0.2s ease;
}

.bc-welcome-content a:hover {
  color: var(--color-brown-dark);
}

/* ----------------------------------------
   DASHBOARD CONTENT AREA
   ---------------------------------------- */

/* Tab content styling */
.page-id-69 .um-account-tab {
  padding: 0 !important;
}

/* Dashboard text links - golden/tan color like mockup */
.page-id-69 .um-account-tab a {
  color: var(--color-link-gold) !important;
  text-decoration: underline !important;
  font-weight: var(--font-weight-medium) !important;
}

.page-id-69 .um-account-tab a:hover {
  color: var(--color-brown-medium) !important;
  text-decoration: none !important;
}

/* Dashboard paragraph text */
.page-id-69 .um-account-tab p {
  font-family: var(--font-body) !important;
  font-size: var(--font-size-base) !important;
  color: var(--color-brown-dark) !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
}

/* Bold text within paragraphs */
.page-id-69 .um-account-tab strong {
  font-weight: var(--font-weight-bold) !important;
}

/* ----------------------------------------
   STRIPE BILLING / PAYMENT METHODS TAB
   ---------------------------------------- */

/* Stripe billing container - text is NOT in a <p> tag, it's loose text */
.um-stripe-billing-account-tab {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: var(--color-brown-dark) !important;
  line-height: 1.7 !important;
}

/* Radio option description paragraphs */
.um-stripe-billing-account-tab .um-field-radio p {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--color-brown-medium) !important;
  line-height: 1.5 !important;
  margin: 5px 0 0 0 !important;
}

/* Stack radio options vertically */
.um-stripe-billing-account-tab .um-field-area {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
}

.um-stripe-billing-account-tab .um-field-radio.um-field-half {
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}

/* Stripe section headings */
.page-id-69 .um-account-tab h3 {
  font-size: 18px !important;
  font-weight: var(--font-weight-bold) !important;
  margin: 20px 0 10px 0 !important;
}

/* ----------------------------------------
   CUSTOMER PORTAL BUTTON - um-button class
   Has inline style="display: inline;" so we override it
   ---------------------------------------- */
.um-stripe-billing-account-tab a.um-button,
.page-id-69 a.um-button,
body.page-id-69 a.um-button {
  display: inline-block !important;
  width: auto !important;
  background: var(--color-brown-dark) !important;
  background-color: var(--color-brown-dark) !important;
  color: var(--color-cream-light) !important;
  padding: 14px 20px !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-bold) !important;
  font-size: var(--font-size-md) !important;
  text-transform: uppercase !important;
  border: none !important;
  margin: 15px 0 25px 0 !important;
  cursor: pointer !important;
  transition: opacity var(--transition-base) !important;
}

.um-stripe-billing-account-tab a.um-button:hover,
.page-id-69 a.um-button:hover,
body.page-id-69 a.um-button:hover {
  background: var(--color-brown-dark) !important;
  background-color: var(--color-brown-dark) !important;
  color: var(--color-cream-light) !important;
  opacity: 0.9 !important;
  text-decoration: none !important;
}

/* Payment collection method radio options - stack vertically */
.page-id-69 .wcs-payment-method-selector,
.page-id-69 .um-account-tab fieldset,
.page-id-69 .um-account-tab .payment-method-selector {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
}

/* Radio option containers */
.page-id-69 .wcs-payment-method-selector label,
.page-id-69 .um-account-tab fieldset label,
.page-id-69 .um-account-tab .payment-method-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 15px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
}

/* Radio button inputs */
.page-id-69 .wcs-payment-method-selector input[type="radio"],
.page-id-69 .um-account-tab fieldset input[type="radio"] {
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}

/* Radio option text container */
.page-id-69 .wcs-payment-method-selector label span,
.page-id-69 .wcs-payment-method-selector label div {
  display: block !important;
}

/* Radio option title (Automatic Charging / Manual Payments) */
.page-id-69 .wcs-payment-method-selector label strong,
.page-id-69 .um-account-tab fieldset label strong {
  display: block !important;
  font-size: 16px !important;
  font-weight: var(--font-weight-bold) !important;
  margin-bottom: 5px !important;
}

/* Radio option description text */
.page-id-69 .wcs-payment-method-selector label span:not(:first-child),
.page-id-69 .wcs-payment-method-selector label small,
.page-id-69 .um-account-tab fieldset label span {
  font-size: 14px !important;
  color: var(--color-brown-medium) !important;
  line-height: 1.5 !important;
}

/* ----------------------------------------
   CARD CONTAINER
   ---------------------------------------- */
.page-id-69 .entry-content {
  background: var(--gradient-cream) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 40px 20px !important;
  min-height: 100vh !important;
  position: relative !important;
}

.page-id-69 .entry-content > .um {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 40px !important;
  max-width: 1000px !important;
  width: 100% !important;
  box-shadow: none !important;
}

/* Account page gets wider content area */
.page-id-69 .entry-content > * {
  max-width: 1200px !important;
  width: 100% !important;
}

/* Remove Ultimate Member container width restrictions on account page */
.page-id-69 .um {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Header inside the card */
.bc-account-header {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 0 0 0 !important;
  padding: 0 !important;
}

/* ----------------------------------------
   FORM STYLING WITHIN ACCOUNT TABS
   ---------------------------------------- */

/* Form labels */
.page-id-69 .um-account-tab .um-field-label label {
  font-family: var(--font-body) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-brown-dark) !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

/* Form inputs */
.page-id-69 .um-account-tab input[type="text"],
.page-id-69 .um-account-tab input[type="email"],
.page-id-69 .um-account-tab input[type="password"],
.page-id-69 .um-account-tab textarea,
.page-id-69 .um-account-tab select {
  font-family: var(--font-body) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--color-brown-dark) !important;
  background: #fff !important;
  border: 1px solid var(--color-text-muted) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
}

.page-id-69 .um-account-tab input:focus,
.page-id-69 .um-account-tab textarea:focus,
.page-id-69 .um-account-tab select:focus {
  border-color: var(--color-brown-dark) !important;
  outline: none !important;
}

/* ----------------------------------------
   ACCOUNT PAGE RESPONSIVE
   ---------------------------------------- */

@media (max-width: 900px) {
  .bc-return-3d {
    top: 15px !important;
    right: 20px !important;
    padding: 8px 12px !important;
  }
  
  .bc-return-3d .bc-return-3d-text {
    font-size: 24px !important;
  }
  
  .bc-account-title {
    font-size: 32px !important;
  }
}

@media (max-width: 768px) {
  /* Account header - full width with consistent padding */
  .bc-account-header {
    padding: 0 20px !important;
  }
  
  .bc-account-title {
    font-size: 28px !important;
    padding-right: 0 !important;
    margin-bottom: 50px !important; /* Space for the overlapping button */
  }
  
  /* Banner - position relative and overflow visible for button overlap */
  .bc-account-banner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 60px 20px 60px 20px !important; /* Extra top padding for button overlap area */
    position: relative !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }
  
  /* Return to 3D button - positioned to overlap banner top edge */
  .bc-return-3d {
    position: absolute !important;
    top: -40px !important; /* Half above the banner */
    right: 20px !important;
    left: auto !important;
    padding: 8px 12px !important;
    z-index: 10 !important;
  }
  
  .bc-return-3d .bc-return-3d-text {
    font-size: 24px !important;
  }
  
  .bc-account-avatar img {
    width: 100px !important;
    height: 100px !important;
  }
  
  .bc-account-username {
    font-size: 24px !important;
  }
  
  .bc-account-fullname {
    font-size: 16px !important;
  }
  
  .bc-edit-profile {
    display: inline-flex !important;
    margin-top: 10px !important;
  }
  
  /* Keep tabs horizontal but scrollable on mobile */
  .page-id-69 .um-account-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 5px !important;
  }
  
  .page-id-69 .um-account-nav a {
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 12px 14px !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
  }
  
  .page-id-69 .entry-content > .um {
    padding: 25px !important;
  }
}

@media (max-width: 480px) {
  .bc-account-header {
    padding: 0 15px !important;
  }
  
  .bc-return-3d {
    top: -35px !important;
    right: 15px !important;
    padding: 6px 10px !important;
  }
  
  .bc-return-3d .bc-return-label,
  .bc-return-3d .bc-return-exp {
    font-size: 8px !important;
  }
  
  .bc-return-3d .bc-return-3d-text {
    font-size: 20px !important;
  }
  
  .bc-account-title {
    font-size: 24px !important;
    padding-right: 0 !important;
    margin-bottom: 45px !important;
  }
  
  .bc-account-banner {
    padding: 55px 15px 55px 15px !important;
  }
  
  .page-id-69 .um-account-nav a {
    font-size: 10px !important;
    padding: 10px 12px !important;
  }
  
  .page-id-69 .entry-content > .um {
    padding: 20px 15px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* ----------------------------------------
   FORCE HORIZONTAL TABS AT ALL BREAKPOINTS
   Override UM's uimob classes that switch to vertical
   ---------------------------------------- */
.um.um-account.uimob340 .um-account-nav,
.um.um-account.uimob500 .um-account-nav,
.um.um-account.uimob800 .um-account-nav,
.page-id-69 .um.um-account .um-account-nav {
  display: flex !important;
  flex-direction: row !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  position: relative !important;
}

.um.um-account.uimob340 .um-account-nav a,
.um.um-account.uimob500 .um-account-nav a,
.um.um-account.uimob800 .um-account-nav a,
.page-id-69 .um.um-account .um-account-nav a {
  display: inline-flex !important;
  width: auto !important;
  float: none !important;
  border-bottom: none !important;
}

/* Ensure sidebar stays hidden at all breakpoints */
.um.um-account.uimob340 .um-account-side,
.um.um-account.uimob500 .um-account-side,
.um.um-account.uimob800 .um-account-side,
.page-id-69 .um.um-account .um-account-side {
  display: none !important;
}

/* Ensure main content is full width at all breakpoints */
.um.um-account.uimob340 .um-account-main,
.um.um-account.uimob500 .um-account-main,
.um.um-account.uimob800 .um-account-main,
.page-id-69 .um.um-account .um-account-main {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

/* =========================================================
   ULTIMATE MEMBER LOGIN PAGE STYLING
   ========================================================= */

/* Make page background transparent for iframe overlay */
body.page-template-default,
body.um-page-login {
  background: var(--gradient-cream) !important;
}

.um-page-login .site,
.um-page-login .site-content,
.um-page-login .content-area,
.um-page-login .entry-content,
.um-page-login .inside-article {
  background: var(--gradient-cream) !important;
}

/* Hide the WordPress page title */
.um-page-login .entry-header,
.page .entry-header {
  display: none !important;
}

/* Login page container */
.um-login .um-form {
  max-width: 450px !important;
  width: 90% !important;
  margin: 20px auto !important;
  background: transparent !important;
  padding: 40px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Title moved inside card */
.um-login .um-form .um-login-title,
.um-login .um-form > h1 {
  font-family: var(--font-heading) !important;
  font-size: 42px !important;
  color: var(--color-brown-dark) !important;
  margin: 0 0 10px 0 !important;
  text-align: center !important;
}

/* Signup text moved inside card */
.um-login .um-form .um-signup-text,
.um-login .um-form > p {
  text-align: center !important;
  margin-bottom: 25px !important;
}

/* Style the "Sign up" as a simple link */
.um-login .um-form .um-signup-text a,
.um-login .um-form > p a {
  color: var(--color-brown-dark) !important;
  text-decoration: underline !important;
  font-weight: var(--font-weight-bold) !important;
}

.um-login .um-form .um-signup-text a:hover,
.um-login .um-form > p a:hover {
  text-decoration: none !important;
}

/* Hide asterisks from required fields */
.um-login .um-field-label .um-req {
  display: none !important;
}

/* Form field styling */
.um-login .um-form input[type="text"],
.um-login .um-form input[type="email"],
.um-login .um-form input[type="password"] {
  border: 1px solid #ccc !important;
  border-radius: 25px !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  background: #fff !important;
}

.um-login .um-form input[type="text"]:focus,
.um-login .um-form input[type="email"]:focus,
.um-login .um-form input[type="password"]:focus {
  border-color: var(--color-brown-dark) !important;
  outline: none !important;
}

/* Field labels */
.um-login .um-field-label {
  font-weight: var(--font-weight-bold) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
}

/* Hide "Keep me signed in" checkbox */
.um-login .um-field-type_checkbox {
  display: none !important;
}

/* Login button full width - override UM defaults */
.um-login .um-form .um-center .um-button,
.um-login .um-center .um-button,
.um-login .um-form input[type="submit"].um-button,
.um-login .um-button {
  background: var(--color-brown-dark) !important;
  color: var(--color-cream-light) !important;
  border: none !important;
  border-radius: 25px !important;
  padding: 14px 40px !important;
  font-size: 16px !important;
  font-weight: var(--font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.um-login .um-button:hover {
  opacity: 0.9 !important;
}

/* Center the button container */
.um-login .um-col-alt-b,
.um-login .um-center {
  width: 100% !important;
}

/* Forgot password link - at bottom */
.um-login a.um-link-forgot-password {
  display: block !important;
  text-align: center !important;
  margin-top: 20px !important;
  color: var(--color-brown-dark) !important;
  font-weight: var(--font-weight-bold) !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
}

.um-login a.um-link-forgot-password:hover {
  text-decoration: underline !important;
}

/* =========================================================
   ULTIMATE MEMBER LOGIN PAGE - LOGGED IN STATE
   ========================================================= */

/* Hide "Don't have an account? Sign up" when logged in */
.um-login .um-misc-with-img ~ p,
.um-login .um-form > p:has(+ .um-misc-with-img),
.um-login .um-form .um-signup-text {
  display: none !important;
}

/* Constrain the logged-in container width */
.um-login .um-misc-with-img {
  max-width: 100% !important;
  border-bottom: none !important;
}

/* Make the avatar larger - 150px */
.um-login .um-misc-img img {
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  border: 3px solid var(--color-brown-dark) !important;
  margin-top: 20px !important;
}

/* Style the username */
.um-login .um-misc-user {
  font-family: var(--font-heading) !important;
  color: var(--color-brown-dark) !important;
  margin-top: 15px !important;
}

/* Style "Your account" and "Logout" links as buttons */
.um-login .um-misc-ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.um-login .um-misc-ul li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.um-login .um-misc-ul li::before,
.um-login .um-misc-ul li::marker {
  display: none !important;
  content: none !important;
}

.um-login .um-misc-ul li a {
  display: block !important;
  width: 100% !important;
  background: var(--color-brown-dark) !important;
  color: var(--color-cream-light) !important;
  border: none !important;
  border-radius: 25px !important;
  padding: 14px 40px !important;
  font-size: 16px !important;
  font-weight: var(--font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.um-login .um-misc-ul li a:hover {
  opacity: 0.9 !important;
  text-decoration: none !important;
}

/* Make "Logout" button secondary style (outline) */
.um-login .um-misc-ul li:last-child a {
  background: transparent !important;
  color: var(--color-brown-dark) !important;
  border: 2px solid var(--color-brown-dark) !important;
}

.um-login .um-misc-ul li:last-child a:hover {
  background: var(--color-brown-dark) !important;
  color: var(--color-cream-light) !important;
}

/* =========================================================
   ULTIMATE MEMBER LOGIN PAGE - RESPONSIVE
   ========================================================= */

/* Mobile adjustments */
@media (max-width: 480px) {
  .um-login .um-form {
    width: 95% !important;
    padding: 30px 25px !important;
    margin: 10px auto !important;
  }
  
  .um-login .um-form .um-login-title,
  .um-login .um-form > h1 {
    font-size: 36px !important;
  }

  .um-login .um-form input[type="text"],
  .um-login .um-form input[type="email"],
  .um-login .um-form input[type="password"] {
    padding: 12px 16px !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
  
  .um-login .um-button {
    padding: 14px 30px !important;
  }
}

/* Ensure the form container centers properly */
.um-login {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: auto !important;
}

/* Keep entry-content centered */
.page-id-65 .entry-content,
.page-id-66 .entry-content,
.page-id-1293 .entry-content,
.page-id-70 .entry-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
/* Giveaway Entries Tab Styles - Add to account.css */

.bc-account-entries {
    max-width: 800px;
}

.bc-account-raffle {
    background: #412818;
    border: 4px solid #251208;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
}

.bc-account-raffle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.bc-account-raffle-header h3 {
    color: #E8D5B5;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 1.4em;
    margin: 0;
}

.bc-account-raffle-date {
    color: #E8D5B5;
    opacity: 0.8;
    font-size: 0.9em;
}

.bc-account-entry-count {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}

.bc-account-entry-count .bc-entry-number {
    font-size: 3em;
    font-weight: 700;
    color: #E8D5B5;
    line-height: 1;
}

.bc-account-entry-count .bc-entry-label {
    color: #E8D5B5;
    opacity: 0.8;
    font-size: 1.2em;
}

.bc-account-entries-table {
    width: 100%;
    border-collapse: collapse;
}

.bc-account-entries-table th,
.bc-account-entries-table td {
    padding: 12px;
    text-align: left;
    color: #E8D5B5;
    border-bottom: 1px solid rgba(232, 213, 181, 0.2);
}

.bc-account-entries-table th {
    font-weight: 600;
    opacity: 0.8;
    font-size: 0.85em;
    text-transform: uppercase;
}

.bc-entry-type,
.bc-entry-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85em;
}

.bc-type-purchase {
    background: rgba(232, 213, 181, 0.2);
}

.bc-type-game {
    background: rgba(100, 200, 100, 0.2);
}

.bc-type-mailin {
    background: rgba(100, 150, 200, 0.2);
}

.bc-status-verified {
    background: rgba(100, 200, 100, 0.3);
}

.bc-status-pending {
    background: rgba(255, 200, 100, 0.3);
}

.bc-account-no-entries {
    color: #E8D5B5;
}

.bc-account-no-entries p {
    margin-bottom: 15px;
}

.bc-account-no-entries ul {
    margin-left: 20px;
    opacity: 0.9;
    color: #E8D5B5;
}

.bc-account-no-entries li {
    margin-bottom: 8px;
}

.bc-account-rules-link {
    margin-top: 20px;
}

.bc-account-rules-link a {
    color: inherit;
}

@media (max-width: 600px) {
    .bc-account-raffle {
        padding: 20px;
    }
    .bc-account-raffle-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .bc-account-entries-table th,
    .bc-account-entries-table td {
        padding: 8px;
        font-size: 0.9em;
    }
}
.bc-account-no-entries,
.bc-account-no-entries p,
.bc-account-no-entries ul,
.bc-account-no-entries li,
.bc-account-no-entries strong {
    color: #E8D5B5 !important;
}
.bc-account-no-entries p {
    color: #E8D5B5 !important;
}
.um-account .bc-account-no-entries p {
    color: #E8D5B5 !important;
}