/**
 * JetSmart Player Exclude & Share - Main Styles
 * Version: 1.5.1
 * Main stylesheet for exclude functionality and shared link overlays
 */

/* ============================================================================
   EXCLUDE CHECKBOX CONTROL (Agent Side)
   ============================================================================ */

.jspe-exclude-control {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 100;
    cursor: pointer;
    display: flex;
    align-items: flex-end; /* Align with bottom of edit button */
}

.jspe-checkbox-label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

/* Hide default checkbox */
.jspe-exclude-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Custom checkbox - White box with gray X */
.jspe-checkbox-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
    border-radius: 3px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.6), 
                0 0px 0px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Gray X icon */
.jspe-checkbox-custom::before {
    content: '\00D7'; /* × multiplication sign - more reliable than special Unicode chars */
    font-size: 14px;
    font-weight: bold;
    color: #b9b9b9;
    line-height: 1;
    transition: color 0.3s ease;
}

/* Hover state - X turns red */
.jspe-checkbox-label:hover .jspe-checkbox-custom::before {
    color: #D50000;
}

/* Checked state - Red X (no background change) */
.jspe-exclude-checkbox:checked ~ .jspe-checkbox-custom::before {
    color: #D50000;
}

/* Checked state - Keep same background */
.jspe-exclude-checkbox:checked ~ .jspe-checkbox-custom {
    background: #ffffff;
}

/* ============================================================================
   EXCLUDED CARD STATE (Agent Side)
   ============================================================================ */

.jet-listing-grid__item.jspe-excluded {
    display: none !important;
}

/* Smooth transitions for exclude animations */
.jet-listing-grid__item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ============================================================================
   CONTROL PANEL & BUTTONS (Agent Side)
   ============================================================================ */

.jspe-control-panel {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #000000;
    border: none;
    border-radius: 0px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.jspe-layout-vertical {
    flex-direction: column;
    align-items: stretch;
}

.jspe-layout-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Excluded counter */
.jspe-excluded-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
}

.jspe-counter-value {
    color: #D50000;
    font-size: 16px;
    font-weight: 400;
}

.jspe-counter-value::after {
    content: ' profiles';
    color: #D50000;
}

/* Button group */
.jspe-button-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

/* Base button styles */
.jspe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-decoration: none;
    flex: 1;
    min-width: 140px;
    background: #fff;
    color: #333;
}

.jspe-btn:hover {
    border-color: #3093b1;
    color: #3093b1;
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 114, 202, 0.15);
}

.jspe-btn:active {
    transform: translateY(0);
}

.jspe-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Clear excluded button */
.jspe-clear-excluded-btn {
    background: #fff;
    color: #333;
    border-color: #ddd;
}

/* Create link button */
.jspe-create-link-btn {
    background: #fff;
    color: #333;
    border-color: #ddd;
}

/* Button icons */
.jspe-btn-icon {
    font-size: 15px;
    line-height: 1;
}

/* Loading state */
.jspe-btn.jspe-loading {
    position: relative;
    color: transparent;
}

.jspe-btn.jspe-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: jspe-spin 0.6s linear infinite;
}

@keyframes jspe-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   TOAST MESSAGES
   ============================================================================ */

.jspe-message {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 15px;
    font-weight: 500;
    z-index: 99999;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
    max-width: 400px;
}

.jspe-message-show {
    opacity: 1;
    transform: translateX(0);
}

.jspe-message-notice {
    border-left: 4px solid #28a745;
    color: #155724;
}

.jspe-message-error {
    border-left: 4px solid #dc3545;
    color: #721c24;
}

/* ============================================================================
   LOADING OVERLAY (For Shared Links - Old System)
   ============================================================================ */

.jspe-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.98);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.jspe-loading-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #dc3545;
    border-radius: 50%;
    animation: jspe-spin 1s linear infinite;
    margin-bottom: 20px;
}

.jspe-loading-overlay p {
    font-size: 18px;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

/* ============================================================================
   SHARED LINK VIEW - Hide controls
   ============================================================================ */

body.jspe-shared-view .jspe-exclude-control,
body.jspe-shared-view .jspe-control-panel,
body.jspe-shared-view .jspe-checkbox-label {
    display: none !important;
}

/* Hide listing grid initially on shared links to prevent flash */
body.jspe-shared-view .jet-listing-grid {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Show grid after filtering complete */
body.jspe-shared-view.jspe-filtering-complete .jet-listing-grid {
    opacity: 1;
}

/* ============================================================================
   SHARED LINK TEMPLATE STYLES (v1.5.1)
   ============================================================================ */

/* Main wrapper - White background */
.jspe-shared-link-wrapper {
    min-height: 100vh;
    background: #ffffff;
    padding: 0;
    margin: 0;
    padding-bottom: 0; /* Ensure no extra padding at bottom */
}

/* Header section - integrate with site header */
.jspe-shared-link-header {
    background: #ffffff;
    padding: 20px 20px 30px; /* Adjust padding since no border */
    border-bottom: none; /* Remove - site header already has blue line */
    margin-bottom: 40px;
    position: relative;
}

/* Remove gradient overlay - causing duplicate line appearance */
/* .jspe-shared-link-header::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0066cc 0%, #0099ff 100%);
} */

.jspe-shared-link-header .container {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 20px; /* Mobile padding */
    padding-right: 20px;
}

/* Tablet and up - align with site header */
@media (min-width: 768px) {
    .jspe-shared-link-header .container {
        padding-left: 40px; /* Align with logo/header */
        padding-right: 40px;
    }
}

/* Desktop - wider padding */
@media (min-width: 1024px) {
    .jspe-shared-link-header .container {
        padding-left: 60px; /* Match desktop header padding */
        padding-right: 60px;
    }
}

/* Large desktop - max padding */
@media (min-width: 1200px) {
    .jspe-shared-link-header .container {
        padding-left: 80px; /* Maximum padding for alignment */
        padding-right: 80px;
    }
}

/* Remove title, keep only subtitle */
.jspe-shared-title {
    display: none;
}

/* Showing X profiles - White text, professional styling */
.jspe-shared-subtitle {
    font-size: 20px;
    color: #000000;
    margin: 0;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Debug info - only show if WP_DEBUG enabled */
.jspe-debug-info {
    font-size: 11px;
    color: #666666;
    margin-top: 8px;
    text-align: center;
    font-style: italic;
}

/* Content area - no borders or lines */
.jspe-shared-link-content {
    background: #ffffff;
    padding-bottom: 0; /* No padding - let footer border be the divider */
    border: none; /* Ensure no extra borders */
    margin-bottom: 0; /* No margin */
}

.jspe-shared-link-content .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 60px; /* Mobile: 20px sides, 60px bottom */
    border: none; /* Ensure no extra borders */
    width: 100%;
    box-sizing: border-box;
}

/* Tablet and up - match header padding */
@media (min-width: 768px) {
    .jspe-shared-link-content .container {
        padding: 0 40px 60px; /* Align with header */
    }
}

/* Desktop - wider padding */
@media (min-width: 1024px) {
    .jspe-shared-link-content .container {
        padding: 0 60px 60px; /* Match header padding */
    }
}

/* Large desktop - max padding */
@media (min-width: 1200px) {
    .jspe-shared-link-content .container {
        padding: 0 80px 60px; /* Maximum padding, aligned with header */
    }
}

/* ============================================================================
   SITE HEADER/FOOTER INTEGRATION
   ============================================================================ */

/* Ensure site header integrates properly with thick blue line */
body.jspe-shared-view #masthead,
body.jspe-shared-view header,
body.jspe-shared-view .site-header {
    background: #000000;
    border-bottom: 5px solid #3093b1 !important; /* Match shared link header */
}

/* Remove any extra borders/dividers from theme */
body.jspe-shared-view header::after,
body.jspe-shared-view .site-header::after,
body.jspe-shared-view #masthead::after {
    display: none !important;
    border: none !important;
}

/* Ensure site footer integrates properly with thick blue line */
body.jspe-shared-view #colophon,
body.jspe-shared-view footer,
body.jspe-shared-view .site-footer {
    background: #000000;
    border-top: 5px solid #3093b1 !important; /* Blue, not white - same thickness */
    border-bottom: none !important; /* Remove any bottom border */
    color: #ffffff;
}

/* Remove any extra borders/dividers from footer */
body.jspe-shared-view footer::before,
body.jspe-shared-view .site-footer::before,
body.jspe-shared-view #colophon::before {
    display: none !important;
    border: none !important;
}

/* Footer copyright text - white color */
body.jspe-shared-view footer p,
body.jspe-shared-view .site-footer p {
    color: #ffffff;
}

/* Footer links styling */
body.jspe-shared-view footer a,
body.jspe-shared-view .site-footer a {
    color: #ffffff;
    text-decoration: none;
}

body.jspe-shared-view footer a:hover,
body.jspe-shared-view .site-footer a:hover {
    color: #0066cc;
}

/* Override any theme dividers/separators */
body.jspe-shared-view .site-header-divider,
body.jspe-shared-view .site-footer-divider,
body.jspe-shared-view .header-divider,
body.jspe-shared-view .footer-divider {
    display: none !important;
}

/* ============================================================================
   PLAYER GRID - 5 COLUMNS
   ============================================================================ */

.jspe-player-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Responsive breakpoints */
@media (max-width: 1400px) {
    .jspe-player-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 1024px) {
    .jspe-player-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .jspe-shared-link-wrapper .jspe-player-grid,
    .jspe-player-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
    }
    
    .jspe-shared-link-wrapper .jspe-player-card,
    .jspe-player-card {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .jspe-shared-link-wrapper .jspe-player-grid,
    .jspe-player-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .jspe-shared-link-wrapper .jspe-player-card,
    .jspe-player-card {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================================
   PLAYER CARD - Match Agent Side Design
   ============================================================================ */

.jspe-player-card {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #3093b1; /* Blue border */
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.jspe-player-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 102, 204, 0.3);
    border-color: #3093b1;
}

.jspe-player-link {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

/* Player image - Full width, proper aspect ratio */
.jspe-player-image {
    position: relative;
    width: 100%;
    padding-bottom: 125%; /* 4:5 aspect ratio (taller) */
    background: #f0f0f0;
    overflow: hidden;
}

.jspe-player-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* Keep face visible */
}

/* Placeholder for missing images */
.jspe-no-image .jspe-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.jspe-no-image .jspe-placeholder span {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
}

/* Player info section */
.jspe-player-info {
    padding: 16px;
    background: #ffffff;
}

/* Player name - HIDDEN (shown on image overlay instead) */
/* Styles commented out as name is removed from template
.jspe-player-name {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 12px 0;
    line-height: 1.3;
    text-align: left;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
*/

/* Meta fields container */
.jspe-player-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Individual meta item */
.jspe-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333333;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; /* Match agent side system font */
}

/* Meta icon - FontAwesome icons - DISABLE FILTERS */
.jspe-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #ac8503 !important; /* Color to match site theme - force override */
    min-width: 16px;
    font-style: normal; /* Prevent italic */
    filter: none !important; /* Disable any hue-rotate or other filters */
    -webkit-filter: none !important; /* Safari */
}

/* CRITICAL: Target the ::before pseudo-element where FontAwesome renders */
.jspe-meta-icon::before {
    color: #ac8503 !important;
    filter: none !important; /* Disable filters on pseudo-element too */
    -webkit-filter: none !important;
}

.jspe-meta-icon::after {
    color: #ac8503 !important;
    filter: none !important;
}

/* FontAwesome icon styling - ULTRA SPECIFIC */
.jspe-player-card .jspe-meta-icon.fas,
.jspe-player-card .jspe-meta-icon.far,
.jspe-player-card .jspe-meta-icon.fa {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
    font-weight: 900; /* Solid icons */
    color: #ac8503 !important; /* Force blue color */
    filter: none !important; /* Disable filters */
}

.jspe-player-card .jspe-meta-icon.fas::before,
.jspe-player-card .jspe-meta-icon.far::before,
.jspe-player-card .jspe-meta-icon.fa::before {
    color: #ac8503 !important; /* Target pseudo-element directly */
    filter: none !important; /* Disable filters */
}

.jspe-player-card .jspe-meta-icon.far {
    font-weight: 400; /* Regular icons */
    color: #ac8503 !important; /* Force blue color */
    filter: none !important;
}

.jspe-player-card .jspe-meta-icon.far::before {
    color: #ac8503 !important; /* Target pseudo-element */
    filter: none !important;
}

/* Nuclear option - target by element and classes */
.jspe-player-card .jspe-meta-item .jspe-meta-icon {
    color: #ac8503 !important;
    filter: none !important;
}

.jspe-player-card .jspe-meta-item .jspe-meta-icon::before {
    color: #ac8503 !important;
    filter: none !important;
}

.jspe-player-card .jspe-meta-item i.jspe-meta-icon {
    color: #ac8503 !important;
    filter: none !important;
}

.jspe-player-card .jspe-meta-item i.jspe-meta-icon::before {
    color: #ac8503 !important;
    filter: none !important;
}

/* Override any FontAwesome defaults */
i.fa,
i.fas,
i.far {
    color: inherit;
}

i.fa::before,
i.fas::before,
i.far::before {
    color: inherit;
}

.jspe-player-card i.jspe-meta-icon.fa,
.jspe-player-card i.jspe-meta-icon.fas,
.jspe-player-card i.jspe-meta-icon.far {
    color: #ac8503 !important;
    filter: none !important;
}

.jspe-player-card i.jspe-meta-icon.fa::before,
.jspe-player-card i.jspe-meta-icon.fas::before,
.jspe-player-card i.jspe-meta-icon.far::before {
    color: #ac8503 !important;
    filter: none !important;
}

/* In case FontAwesome is using SVG (some versions do) */
.jspe-meta-icon svg {
    fill: #ac8503 !important;
    filter: none !important;
}

.jspe-meta-icon svg path {
    fill: #ac8503 !important;
    filter: none !important;
}

/* Meta icons - Gold color */
.jspe-meta-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    filter: hue-rotate(200deg) saturate(150%); /* Make icons blue */
}

/* Meta value text */
.jspe-meta-value {
    color: #333333;
    font-weight: 400;
    line-height: 1.4;
}

/* ============================================================================
   NO RESULTS STATE
   ============================================================================ */

.jspe-no-results {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid ##3093b1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.jspe-no-results p {
    font-size: 18px;
    color: #666666;
    margin: 0;
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

.jspe-btn:focus,
.jspe-checkbox-label:focus-within .jspe-checkbox-custom {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .jspe-checkbox-custom {
        border-width: 3px;
    }
    
    .jspe-btn {
        border: 2px solid currentColor;
    }
    
    .jspe-player-card {
        border-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .jspe-exclude-control,
    .jspe-checkbox-custom,
    .jspe-btn,
    .jspe-message,
    .jet-listing-grid__item,
    .jspe-player-card {
        transition: none;
    }
    
    .jspe-loading-spinner,
    .jspe-btn.jspe-loading::after {
        animation: none;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .jspe-shared-link-header {
        border-bottom: 1px solid #000000;
        page-break-after: avoid;
    }
    
    .jspe-player-card {
        page-break-inside: avoid;
        border: 1px solid #000000;
    }
    
    .jspe-debug-info {
        display: none;
    }
}

/* ============================================================================
   CRITICAL MOBILE GRID FIX - Ultra-specific rules to override theme interference
   Must be at the end of the file to ensure highest priority
   ============================================================================ */

@media screen and (max-width: 767px) {
    /* Force grid layout on mobile */
    body .jspe-shared-link-wrapper .jspe-shared-link-content .container .jspe-player-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure cards fit in grid */
    body .jspe-shared-link-wrapper .jspe-player-grid .jspe-player-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

@media screen and (max-width: 480px) {
    /* Extra small mobile - still 2 columns with smaller gap */
    body .jspe-shared-link-wrapper .jspe-shared-link-content .container .jspe-player-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
    }
}