/*
 * ShowSync public styles - Enhanced for MadLife Design
 *
 * These rules apply to the ShowSync grid on the front end with enhanced
 * styling to match the MadLife design. Includes search, filters, and
 * responsive grid layout.
 */

/* Make page background transparent when plugin is present - NUCLEAR OPTION */
body:has(.showsync-root),
html:has(.showsync-root),
body,
html,
.wp-site-blocks,
.wp-block-group,
.content-area,
.site-content,
.entry-content,
.page-content,
.post-content,
#page,
.site,
.main,
.container,
.wrapper,
.entry,
.hentry,
.page,
.post,
div,
section,
article,
aside,
header,
footer,
nav,
main,
.content,
.page-wrapper,
.site-wrapper,
.wrapper,
.container-fluid,
.row,
.col,
.column {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Only make page-level elements transparent, not plugin content */
body,
html,
#page,
.site,
.main,
.container,
.wrapper,
.entry,
.hentry,
.page,
.post,
.content-area,
.site-content,
.entry-content,
.page-content,
.post-content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Override any theme backgrounds - including dark ones */
.white,
.bg-white,
.bg-light,
.light-bg,
.bg-dark,
.bg-black,
.black-bg,
.dark-bg,
header,
.header,
nav,
.nav,
footer,
.footer,
.theme-bg,
.page-bg,
.site-bg {
  background: transparent !important;
  background-color: transparent !important;
}

/* Target specific WordPress themes that might have black backgrounds */
.twenty-twenty-four,
.twenty-twenty-three,
.twenty-twenty-two,
.twenty-twenty-one,
.twenty-twenty,
.storefront,
.astra,
.generatepress,
.oceanwp,
.neve,
.kadence,
.blockbase,
.blockify {
  background: transparent !important;
  background-color: transparent !important;
}

/* Root container - Make transparent so customer website shows through */
.showsync-root {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 20px !important;
}

.showsync-root *:not(.showsync-title),
.showsync-root > *:not(.showsync-title) {
  color: var(--ssp-fg, #FFFFFF) !important;
  font-family: var(--ssp-font, 'Oswald', system-ui, sans-serif) !important;
}

/* Container styling moved to main .showsync-wrap rule above */

/* Apply gradient background when section_bg_type is gradient */
/* Removed hardcoded gradient - using simple background color only */

/* Force solid background when section_bg_type is solid */
.showsync-wrap[style*="background:"]:not([style*="background-image"]) {
  background: var(--ssp-bg, transparent) !important;
  background-image: none !important;
}

/* Nuclear option - Force solid background with maximum specificity */
html body .showsync-root .showsync-wrap,
body .showsync-root .showsync-wrap,
.showsync-root .showsync-wrap {
  background: var(--ssp-bg, transparent) !important;
  background-color: var(--ssp-bg, transparent) !important;
  background-image: none !important;
}

/* Override any parent container backgrounds - Make root transparent */
html body .showsync-root,
body .showsync-root,
.wp-block .showsync-root,
.page .showsync-root,
.post .showsync-root,
.content .showsync-root,
.entry-content .showsync-root,
.container .showsync-root,
.wrapper .showsync-root {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Exception: Don't make the wrap transparent - let it use its background */
.showsync-root .showsync-wrap {
  background: var(--ssp-bg, transparent) !important;
  background-color: var(--ssp-bg, transparent) !important;
  background-image: none !important;
}

/* Make all child elements transparent except the main content wrapper and cards */
.showsync-root,
.showsync-root *,
.showsync-root > *,
.showsync-root div:not(.showsync-wrap):not(.showsync-card):not(.showsync-card-media):not(.showsync-card-body),
.showsync-root section,
.showsync-root article {
  background: transparent !important;
  background-color: transparent !important;
}

/* Main content wrapper styling */
.showsync-wrap {
  /* Background will be set by inline styles based on section_bg_type */
}

/* Add styling to the main content wrapper */
.showsync-wrap {
  border: none !important;
  border-radius: var(--ssp-radius, 21px) !important;
  padding: 40px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Floating version number */
.showsync-version {
  position: fixed !important;
  bottom: 10px !important;
  right: 10px !important;
  background: rgba(139, 0, 0, 0.9) !important;
  color: white !important;
  padding: 5px 10px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  z-index: 10000 !important;
  font-family: 'Courier New', monospace !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(5px) !important;
}

/* Also force background with CSS variable as fallback */
.showsync-root,
.showsync-wrap,
.showsync-section {
  background: var(--ssp-bg, transparent) !important;
  background-color: var(--ssp-bg, transparent) !important;
}

/* Nuclear option - override any possible parent background */
* .showsync-root,
* .showsync-wrap,
* .showsync-section {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Override any potential body or html background for the plugin area */
body:has(.showsync-root),
html:has(.showsync-root) {
  background: transparent !important;
}

/* Override any theme input styling */
.showsync-root input,
.showsync-root input[type="text"],
.showsync-root input[type="search"] {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--ssp-fg, #FFFFFF) !important;
  border: 2px solid #333333 !important;
  border-radius: var(--ssp-radius, 21px) !important;
}

.showsync-root input::placeholder {
  color: #CCCCCC !important;
}

/* Override any theme button styling (but not filter buttons) */
.showsync-root button:not(.showsync-filter),
.showsync-root .button:not(.showsync-filter) {
  background-color: var(--ssp-primary, #8B0000) !important;
  color: var(--ssp-fg, #FFFFFF) !important;
  border: 2px solid var(--ssp-fg, #FFFFFF) !important;
  border-radius: 25px !important;
}

/* Header section */
.showsync-headline-wrapper {
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
}

.showsync-headline-line {
  width: 100% !important;
  height: 2px !important;
  background-color: var(--ssp-primary, #8B0000) !important;
  margin: 10px 0 !important;
}

.showsync-headline {
  margin: 0 !important;
  color: var(--ssp-fg, #FFFFFF) !important;
}

/* Search section */
.showsync-search-wrap {
  margin-bottom: 30px !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.showsync-search {
  width: 100% !important;
  max-width: 800px !important;
  border: 2px solid #333333 !important;
  border-radius: 8px !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--ssp-fg, #FFFFFF) !important;
  font-family: inherit !important;
  transition: all 0.3s ease !important;
  text-align: center !important; /* Center the text */
  font-size: 1.2rem !important; /* Make text 20% bigger (from 1rem base) */
  padding: 16px 20px !important; /* Increase padding for bigger text */
}

.showsync-search:focus {
  outline: none !important;
  border-color: var(--ssp-primary, #8B0000) !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.showsync-search::placeholder {
  color: #CCCCCC !important;
}

/* Filter buttons */
.showsync-collections {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-bottom: 40px !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.showsync-filter {
  padding: 12px 20px !important;
  background-color: transparent !important;
  color: var(--ssp-fg, #FFFFFF) !important;
  border: 2px solid var(--ssp-btn-title-color, #8B0000) !important;
  border-radius: 25px !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}

.showsync-filter:hover {
  background-color: var(--ssp-fg, #FFFFFF) !important;
  color: var(--ssp-btn-title-color, #8B0000) !important;
  transform: translateY(-2px) !important;
}

.showsync-filter.active {
  background-color: var(--ssp-fg, #FFFFFF) !important;
  color: var(--ssp-btn-title-color, #8B0000) !important;
}

/* Grid layout */
.showsync-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--showsync-cols, 3), 1fr) !important;
  gap: 30px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Event cards - Uniform heights like MadLife */
.showsync-card {
  background-color: var(--ssp-primary, #8B0000) !important;
  border-radius: var(--ssp-radius, 21px) !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important; /* Force uniform heights */
  min-height: 280px !important; /* Reduced from 400px - more reasonable height */
}

/* Force primary color on all card elements - Nuclear option */
.showsync-root .showsync-card,
.showsync-root .showsync-card-media,
.showsync-root .showsync-card-body {
  background-color: var(--ssp-primary, #8B0000) !important;
}

/* Force transparent background and btn_title_color border on filter buttons - Nuclear option */
.showsync-root .showsync-filter,
.showsync-root .showsync-collections .showsync-filter,
html body .showsync-root .showsync-filter,
body .showsync-root .showsync-filter,
.showsync-root .showsync-collections .showsync-filter,
html body .showsync-root .showsync-collections .showsync-filter,
body .showsync-root .showsync-collections .showsync-filter {
  background-color: transparent !important;
  border-color: var(--ssp-btn-title-color, #8B0000) !important;
  background: transparent !important;
}

/* Force button styling - Nuclear option */
.showsync-root .showsync-btn,
.showsync-root .showsync-cta,
.showsync-root .showsync-card .showsync-btn {
  background-color: var(--ssp-btn-title-color, #8B0000) !important; /* Button & Title Color background */
  color: #FFFFFF !important; /* White text */
  border: none !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-align: center !important;
}

.showsync-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(139, 0, 0, 0.2);
  border-color: var(--ssp-primary, #8B0000);
}

/* Card media */
.showsync-card-media {
  width: 100% !important;
  height: auto !important;
  background-color: var(--ssp-primary, #8B0000) !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.showsync-card-media img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important; /* Changed back to cover to fill width */
  object-position: top center !important;
  display: block !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
}

/* Card body */
.showsync-card-body {
  padding: 8px 12px !important; /* Minimal padding */
  background-color: var(--ssp-primary, #8B0000) !important;
  color: var(--ssp-fg, #FFFFFF) !important;
  flex-grow: 1 !important; /* Make card body take remaining space */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important; /* Distribute content evenly */
  gap: 2px !important; /* Minimal gap between elements */
}

/* Event title */
.showsync-title {
  font-size: 2.2rem !important; /* Aggressively scaled up for better readability */
  font-weight: 700 !important;
  line-height: 1.0 !important; /* Reduced from 1.1 to 1.0 for even tighter spacing */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--ssp-btn-title-color, #8B0000) !important;
  margin: 0 !important;
}

/* Button & Title Color picker - MAXIMUM SPECIFICITY TEST */
html body .showsync-root .showsync-title,
body html .showsync-root .showsync-title,
html .showsync-root .showsync-title,
body .showsync-root .showsync-title,
.showsync-root .showsync-title,
.showsync-title {
  color: #FF0000 !important; /* TEST: Force red color with max specificity */
  font-family: var(--ssp-font, 'Oswald', system-ui, sans-serif) !important;
}

/* Event meta */
.showsync-meta {
  font-size: 1.7rem !important; /* Aggressively scaled up for better readability */
  font-weight: 600 !important;
  opacity: 0.9 !important;
  margin: 0 !important;
  line-height: 1.0 !important; /* Reduced from 1.1 to 1.0 for even tighter spacing */
}

.showsync-meta:first-of-type {
  font-size: 1.7rem !important; /* Aggressively scaled up for better readability */
  margin-bottom: 0 !important; /* Removed margin-bottom */
}

.showsync-meta:last-of-type {
  font-size: 1.5rem !important; /* Aggressively scaled up for better readability */
  opacity: 0.9 !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* CTA button */
.showsync-cta {
  margin: 0 !important; /* Remove all margins */
  padding: 0 !important; /* Remove all padding */
}

.showsync-btn {
  background-color: var(--ssp-btn-title-color, #8B0000) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--ssp-radius, 21px) !important;
  font-family: inherit !important;
  font-size: 1.4rem !important; /* Aggressively scaled up for better readability */
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 8px 16px !important; /* Compact padding */
  margin: 0 !important; /* No margins */
}

/* Default width for buttons (can be overridden by inline styles) */
.showsync-btn:not([style*="width"]) {
  width: 100% !important;
}

.showsync-btn:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px) !important;
  color: var(--ssp-btn-title-color, #8B0000) !important;
  text-decoration: none !important;
}

/* List layout */
.showsync-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.showsync-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  background: var(--ssp-bg, transparent);
  border-radius: var(--ssp-radius, 21px);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.showsync-row-media {
  width: 220px;
  flex: 0 0 220px;
  background: #111;
}

.showsync-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.showsync-row-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* Loading and error states */
.showsync-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--ssp-fg, #FFFFFF);
}

.showsync-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #333333;
  border-top: 4px solid var(--ssp-primary, #8B0000);
  border-radius: 50%;
  animation: showsync-spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes showsync-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.showsync-error {
  text-align: center;
  padding: 20px;
  background-color: rgba(139, 0, 0, 0.1);
  border: 1px solid var(--ssp-primary, #8B0000);
  border-radius: var(--ssp-radius, 21px);
  color: var(--ssp-fg, #FFFFFF);
}

.showsync-retry-button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: var(--ssp-primary, #8B0000);
  color: var(--ssp-fg, #FFFFFF);
  border: none;
  border-radius: var(--ssp-radius, 21px);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}

/* Responsive design - More aggressive breakpoints like MadLife */
@media (max-width: 1024px) {
  .showsync-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 768px) {
  .showsync-root {
    padding: 15px;
  }
  
  .showsync-headline {
    font-size: 2.6rem;
    margin-bottom: 20px;
  }
  
  .showsync-collections {
    gap: 8px;
    margin-bottom: 30px;
  }
  
  .showsync-filter {
    padding: 12px 18px;
    font-size: 1.1rem;
  }
  
  .showsync-wrap {
    padding: 20px !important;
  }
  
  .showsync-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .showsync-card-body {
    padding: 20px;
  }
  
  .showsync-title {
    font-size: 1.6rem;
  }
}

@media (max-width: 600px) {
  .showsync-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  
  .showsync-card {
    min-height: 250px !important; /* Much smaller on mobile */
  }
}

@media (max-width: 480px) {
  .showsync-headline {
    font-size: 2rem;
  }
  
  .showsync-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  
  .showsync-card {
    min-height: 220px !important; /* Even smaller on very small screens */
  }
  
  .showsync-wrap {
    padding: 15px !important;
  }
  
  /* Keep collections in rows but make them smaller and more compact */
  .showsync-collections {
    gap: 6px !important;
    margin-bottom: 20px !important;
  }
  
  .showsync-filter {
    padding: 10px 14px !important;
    font-size: 1rem !important;
    border-radius: 15px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  
  .showsync-search {
    padding: 16px 20px;
    font-size: 1.5rem; /* 20% bigger than previous 1.3rem */
  }
}

/* iPhone-specific styling */
@media (max-width: 375px) {
  .showsync-collections {
    gap: 4px !important;
    margin-bottom: 15px !important;
  }
  
  .showsync-filter {
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
    border-radius: 12px !important;
  }
  
  .showsync-headline {
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
  }
}

/* Force single column layout */
.showsync-root.showsync--oneup .showsync-grid {
  grid-template-columns: 1fr !important;
}

/* Notice styling */
.showsync-notice {
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 16px;
  opacity: 0.8;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--ssp-fg, #FFFFFF);
}

/* Accessibility */
.showsync-filter:focus,
.showsync-btn:focus,
.showsync-search:focus {
  outline: 2px solid var(--ssp-primary, #8B0000);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .showsync-filter {
    border-width: 3px;
  }
  
  .showsync-card {
    border-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .showsync-card,
  .showsync-filter,
  .showsync-btn {
    transition: none;
  }
  
  .showsync-spinner {
    animation: none;
  }
}

/* ULTRA NUCLEAR OPTION - Force transparent collections */
html body .showsync-root .showsync-collections .showsync-filter,
body .showsync-root .showsync-collections .showsync-filter,
.showsync-root .showsync-collections .showsync-filter,
html body .showsync-root .showsync-filter,
body .showsync-root .showsync-filter,
.showsync-root .showsync-filter,
.showsync-filter {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  background-clip: padding-box !important;
  border: 2px solid var(--ssp-btn-title-color, #8B0000) !important;
  color: var(--ssp-fg, #FFFFFF) !important;
}