/* PRECISE TARGETING - Only wp-block-list ON ALLOWED CATEGORIES, preserve copy functionality */

/* Target ONLY wp-block-list specifically ON ALLOWED CATEGORY POSTS */
.oc-list-enhance .wp-block-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 1.5rem 0 !important;
  line-height: 1.6 !important;
  color: #333 !important;
  counter-reset: list-counter !important;
}

/* Style only wp-block-list items ON ALLOWED CATEGORY POSTS */
.oc-list-enhance .wp-block-list li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 2.5rem !important;
  padding: 0.75rem 2.5rem 0.75rem 3.5rem !important;
  margin-bottom: 0.5rem !important;
  background: #f9f9f9 !important;
  border-left: 4px solid #ff006e !important;
  border-radius: 3px !important;
  color: #333 !important;
  transition: background-color .25s, border-color .25s, box-shadow .25s !important;
}

/* Number bubble for wp-block-list only ON ALLOWED CATEGORY POSTS */
.oc-list-enhance .wp-block-list li::before {
  counter-increment: list-counter !important;
  content: counter(list-counter) !important;
  position: absolute !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #ff006e !important;
  border: 2px solid #003049 !important;
  display: grid !important;
  place-items: center !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  transition: background-color .25s, color .25s, border-color .25s !important;
  z-index: 1 !important;
}

/* Copy button - positioned to align with border radius naturally */
.oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique {
  position: absolute !important;
  right: 0.25rem !important;
  top: 0.25rem !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0.4rem !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  opacity: .7 !important;
  transition: opacity .2s, background-color .2s, transform .2s !important;
  z-index: 2 !important;
  width: 2.2rem !important;
  height: 2.2rem !important;
  box-shadow: none !important;
}

.oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique svg {
  width: 16px !important;
  height: 16px !important;
  fill: #666 !important;
  transition: fill .2s !important;
}

/* Hover states for wp-block-list only ON ALLOWED CATEGORY POSTS */
@media (hover:hover) and (pointer:fine) {
  .oc-list-enhance .wp-block-list li:hover {
    background: #fff !important;
    border-left-color: #003049 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.10) !important;
  }
  
  .oc-list-enhance .wp-block-list li:hover::before {
    background: #003049 !important;
    color: #ffffff !important;
    border-color: #ff006e !important;
  }
  
  .oc-list-enhance .wp-block-list li:hover .wp-custom-list-copy-btn-unique {
    opacity: 1 !important;
    background: rgba(255, 0, 110, 0.1) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.15) !important;
  }
}

/* Success state for copy button */
.oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique.copied {
  background: rgba(40,167,69,.10) !important;
}

.oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique.copied svg {
  fill: #28a745 !important;
}

/* Pulse animation respects reduced motion */
@media (prefers-reduced-motion:no-preference) {
  @keyframes wp-custom-pulse-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  .oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique.copied {
    animation: wp-custom-pulse-animation .6s ease-in-out !important;
  }
}

/* Focus ring for keyboard users */
.oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique:focus-visible {
  outline: 2px solid #003049 !important;
  outline-offset: 2px !important;
  opacity: 1 !important;
}

/* ============================================
   DARK MODE - COMPREHENSIVE FIX
   ============================================ */

/* Multiple selector patterns to ensure dark mode works regardless of DOM structure */

/* Pattern 1: Theme attribute on body or html */
[data-theme="dark"] .oc-list-enhance .wp-block-list,
body[data-theme="dark"] .oc-list-enhance .wp-block-list,
html[data-theme="dark"] .oc-list-enhance .wp-block-list {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .oc-list-enhance .wp-block-list li,
body[data-theme="dark"] .oc-list-enhance .wp-block-list li,
html[data-theme="dark"] .oc-list-enhance .wp-block-list li {
  background: #2a2a2a !important;
  color: #e0e0e0 !important;
  box-shadow: 0 2px 4px rgba(255,255,255,.05) !important;
}

[data-theme="dark"] .oc-list-enhance .wp-block-list li:hover,
body[data-theme="dark"] .oc-list-enhance .wp-block-list li:hover,
html[data-theme="dark"] .oc-list-enhance .wp-block-list li:hover {
  background: #3a3a3a !important;
  box-shadow: 0 2px 8px rgba(255,255,255,.10) !important;
}

[data-theme="dark"] .oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique svg,
body[data-theme="dark"] .oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique svg,
html[data-theme="dark"] .oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique svg {
  fill: #b0b0b0 !important;
}

/* Pattern 2: Theme attribute directly on oc-list-enhance */
.oc-list-enhance[data-theme="dark"] .wp-block-list {
  color: #e0e0e0 !important;
}

.oc-list-enhance[data-theme="dark"] .wp-block-list li {
  background: #2a2a2a !important;
  color: #e0e0e0 !important;
  box-shadow: 0 2px 4px rgba(255,255,255,.05) !important;
}

.oc-list-enhance[data-theme="dark"] .wp-block-list li:hover {
  background: #3a3a3a !important;
  box-shadow: 0 2px 8px rgba(255,255,255,.10) !important;
}

.oc-list-enhance[data-theme="dark"] .wp-block-list .wp-custom-list-copy-btn-unique svg {
  fill: #b0b0b0 !important;
}

/* System dark mode fallback with multiple patterns */
@media (prefers-color-scheme: dark) {
  .oc-list-enhance .wp-block-list {
    color: #e0e0e0 !important;
  }
  
  .oc-list-enhance .wp-block-list li {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    box-shadow: 0 2px 4px rgba(255,255,255,.05) !important;
  }
  
  .oc-list-enhance .wp-block-list li:hover {
    background: #3a3a3a !important;
    box-shadow: 0 2px 8px rgba(255,255,255,.10) !important;
  }
  
  .oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique svg {
    fill: #b0b0b0 !important;
  }
}

/* Force light mode when explicitly set - multiple patterns */
[data-theme="default"] .oc-list-enhance .wp-block-list,
[data-theme="light"] .oc-list-enhance .wp-block-list,
body[data-theme="default"] .oc-list-enhance .wp-block-list,
body[data-theme="light"] .oc-list-enhance .wp-block-list,
html[data-theme="default"] .oc-list-enhance .wp-block-list,
html[data-theme="light"] .oc-list-enhance .wp-block-list {
  color: #333 !important;
}

[data-theme="default"] .oc-list-enhance .wp-block-list li,
[data-theme="light"] .oc-list-enhance .wp-block-list li,
body[data-theme="default"] .oc-list-enhance .wp-block-list li,
body[data-theme="light"] .oc-list-enhance .wp-block-list li,
html[data-theme="default"] .oc-list-enhance .wp-block-list li,
html[data-theme="light"] .oc-list-enhance .wp-block-list li {
  background: #f9f9f9 !important;
  color: #333 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.08) !important;
}

[data-theme="default"] .oc-list-enhance .wp-block-list li:hover,
[data-theme="light"] .oc-list-enhance .wp-block-list li:hover,
body[data-theme="default"] .oc-list-enhance .wp-block-list li:hover,
body[data-theme="light"] .oc-list-enhance .wp-block-list li:hover,
html[data-theme="default"] .oc-list-enhance .wp-block-list li:hover,
html[data-theme="light"] .oc-list-enhance .wp-block-list li:hover {
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.10) !important;
}

[data-theme="default"] .oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique svg,
[data-theme="light"] .oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique svg,
body[data-theme="default"] .oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique svg,
body[data-theme="light"] .oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique svg,
html[data-theme="default"] .oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique svg,
html[data-theme="light"] .oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique svg {
  fill: #666 !important;
}

/* Additional pattern for oc-list-enhance with light theme attribute */
.oc-list-enhance[data-theme="default"] .wp-block-list,
.oc-list-enhance[data-theme="light"] .wp-block-list {
  color: #333 !important;
}

.oc-list-enhance[data-theme="default"] .wp-block-list li,
.oc-list-enhance[data-theme="light"] .wp-block-list li {
  background: #f9f9f9 !important;
  color: #333 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.08) !important;
}

.oc-list-enhance[data-theme="default"] .wp-block-list li:hover,
.oc-list-enhance[data-theme="light"] .wp-block-list li:hover {
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.10) !important;
}

.oc-list-enhance[data-theme="default"] .wp-block-list .wp-custom-list-copy-btn-unique svg,
.oc-list-enhance[data-theme="light"] .wp-block-list .wp-custom-list-copy-btn-unique svg {
  fill: #666 !important;
}

/* ============================================
   SOCIAL POPUP STYLES
   ============================================ */

.wp-custom-social-popup-overlay-unique {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.5) !important;
  z-index: 9998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .3s, visibility .3s !important;
}

.wp-custom-social-popup-overlay-unique.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.wp-custom-social-popup-unique {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  background: #fff !important;
  color: #333 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.3) !important;
  padding: 1.5rem !important;
  z-index: 9999 !important;
  min-width: 300px !important;
  max-width: 90vw !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .3s, visibility .3s !important;
}

.wp-custom-social-popup-unique.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.wp-custom-social-popup-header-unique {
  text-align: center !important;
  margin-bottom: 1rem !important;
}

.wp-custom-social-popup-title-unique {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #333 !important;
  margin: 0 0 .5rem 0 !important;
}

.wp-custom-social-popup-subtitle-unique {
  font-size: .9rem !important;
  color: #666 !important;
  margin: 0 !important;
}

.wp-custom-social-buttons-unique {
  display: flex !important;
  gap: 1rem !important;
  justify-content: center !important;
  margin-bottom: 1rem !important;
}

.wp-custom-social-btn-unique {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.9rem 1.25rem !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: transform .2s, filter .2s !important;
  min-width: 120px !important;
  justify-content: center !important;
}

.wp-custom-social-btn-unique.whatsapp {
  background: #25D366 !important;
  color: #fff !important;
}

.wp-custom-social-btn-unique.facebook {
  background: #1877F2 !important;
  color: #fff !important;
}

@media (hover:hover) and (pointer:fine) {
  .wp-custom-social-btn-unique:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.05) !important;
  }
}

.wp-custom-social-skip-unique {
  text-align: center !important;
  margin-top: .5rem !important;
}

.wp-custom-social-skip-unique button {
  background: none !important;
  border: none !important;
  color: #999 !important;
  font-size: .85rem !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  padding: 0 !important;
}

.wp-custom-social-skip-unique button:hover {
  color: #666 !important;
}

.wp-custom-social-btn-unique svg {
  width: 22px !important;
  height: 22px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex: 0 0 22px !important;
}

.wp-custom-social-btn-unique span {
  line-height: 1 !important;
  font-weight: 600 !important;
}

/* Dark mode for popups - comprehensive fix */
[data-theme="dark"] .wp-custom-social-popup-unique,
body[data-theme="dark"] .wp-custom-social-popup-unique,
html[data-theme="dark"] .wp-custom-social-popup-unique {
  background: #2a2a2a !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .wp-custom-social-popup-title-unique,
body[data-theme="dark"] .wp-custom-social-popup-title-unique,
html[data-theme="dark"] .wp-custom-social-popup-title-unique {
  color: #ffffff !important;
}

[data-theme="dark"] .wp-custom-social-popup-subtitle-unique,
body[data-theme="dark"] .wp-custom-social-popup-subtitle-unique,
html[data-theme="dark"] .wp-custom-social-popup-subtitle-unique {
  color: #b0b0b0 !important;
}

[data-theme="dark"] .wp-custom-social-skip-unique button,
body[data-theme="dark"] .wp-custom-social-skip-unique button,
html[data-theme="dark"] .wp-custom-social-skip-unique button {
  color: #888 !important;
}

[data-theme="dark"] .wp-custom-social-skip-unique button:hover,
body[data-theme="dark"] .wp-custom-social-skip-unique button:hover,
html[data-theme="dark"] .wp-custom-social-skip-unique button:hover {
  color: #aaa !important;
}

@media (max-width: 480px) {
  .wp-custom-social-popup-unique {
    padding: 1rem !important;
    min-width: 280px !important;
  }
  
  .wp-custom-social-buttons-unique {
    flex-direction: column !important;
    gap: .75rem !important;
  }
  
  .wp-custom-social-btn-unique {
    width: 100% !important;
  }
}


/* FIX FOR TEXT ALIGNMENT - Add this to your existing CSS */

/* Override the flex alignment to fix text wrapping issues */
.oc-list-enhance .wp-block-list li {
  display: block !important; /* Change from flex to block */
  align-items: unset !important; /* Remove flex alignment */
  padding: 0.75rem 2.5rem 0.75rem 3.5rem !important; /* Keep existing padding */
  line-height: 1.6 !important; /* Ensure good line height for readability */
  word-wrap: break-word !important; /* Handle long words properly */
  overflow-wrap: break-word !important; /* Modern property for word wrapping */
}

/* Ensure the numbered circle stays properly positioned */
.oc-list-enhance .wp-block-list li::before {
  counter-increment: list-counter !important;
  content: counter(list-counter) !important;
  position: absolute !important;
  left: 1rem !important;
  top: 0.75rem !important; /* Align with the first line of text */
  transform: none !important; /* Remove the translateY centering */
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #ff006e !important;
  border: 2px solid #003049 !important;
  display: grid !important;
  place-items: center !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  transition: background-color .25s, color .25s, border-color .25s !important;
  z-index: 1 !important;
  flex-shrink: 0 !important; /* Prevent shrinking */
}

/* Ensure copy button positioning works with new layout */
.oc-list-enhance .wp-block-list .wp-custom-list-copy-btn-unique {
  position: absolute !important;
  right: 0.25rem !important;
  top: 0.25rem !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0.4rem !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  opacity: .7 !important;
  transition: opacity .2s, background-color .2s, transform .2s !important;
  z-index: 2 !important;
  width: 2.2rem !important;
  height: 2.2rem !important;
  box-shadow: none !important;
}

/* Additional text formatting for better readability */
.oc-list-enhance .wp-block-list li strong,
.oc-list-enhance .wp-block-list li b {
  font-weight: 700 !important;
  color: inherit !important; /* Maintain color consistency */
}

/* Ensure proper spacing for multi-line content */
.oc-list-enhance .wp-block-list li p {
  margin: 0 !important;
  line-height: inherit !important;
}

/* Handle nested elements properly */
.oc-list-enhance .wp-block-list li > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ============================================
   OPTION 1: REFINED & SMALLER (RECOMMENDED)
   ============================================ */
.oc-list-enhance .wp-block-list li {
  font-size: 0.9rem !important; /* Slightly smaller than default */
  line-height: 1.5 !important; /* Tighter line spacing */
  font-weight: 400 !important; /* Normal weight for better readability */
  letter-spacing: 0.02em !important; /* Subtle letter spacing */
  padding: 0.7rem 2.5rem 0.7rem 3.5rem !important; /* Reduced vertical padding */
}

/* Adjust numbered circle for smaller text */
.oc-list-enhance .wp-block-list li::before {
  top: 0.7rem !important; /* Match new padding */
  width: 1.6rem !important; /* Slightly smaller circle */
  height: 1.6rem !important;
  font-size: 0.8rem !important; /* Smaller number */
}