/* TN Seatics Custom Styling */

/* Pre-checkout "Add to Cart" button styling */
.pre-checkout-price-cta {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    align-items: center;
    background-color: #0051FE !important;
    border-color: #0051FE !important;
    border-radius: 0.5rem;
    border-width: 1px;
    color: #ffffff;
    color: rgb(31 31 31 / var(--tw-text-opacity, 1));
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    font-weight: 500;
    justify-content: center;
    line-height: 1.5rem;
    padding: 0.5rem 2rem;
    text-align: center;
    transition-duration: 0.15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    width: 100%;
    margin-top: 8px;
}

/* More specific styling for event pages */
.page-event .mapHolder .pre-checkout-price-cta {
    width: 100%;
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    align-items: center;
    background-color: #0051FE !important;
    border-color: #0051FE !important;
    border-radius: 0.5rem;
    border-width: 1px;
    color: #ffffff !important;
    display: flex;
    font-size: 1rem;
    font-weight: 500;
    justify-content: center;
    line-height: 1.5rem;
    padding: 0.5rem 2rem;
    text-align: center;
    transition-duration: 0.15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

/* Hover effects */
.pre-checkout-price-cta:hover {
    background-color: #0051FF !important;
    border-color: #FFFFFF !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Base Seatics button styling */
.seatics .sea-btn {
    background-image: none;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    user-select: none;
}

/* Quantity selector styling */
.sea-quantity-items .sea-listItem {
    background-color: #0051FE !important;
    border: solid 1px #000000 !important;
    border-radius: 50%;
    color: #ffffff !important;
    cursor: pointer;
    height: 52px;
    margin-right: 8px;
    outline: none;
    padding: 15px 0;
    width: 52px;
    transition: .3s;
}
.sea-quantity-items .sea-listItem:hover {
    background-color: #2C6A74 !important;
    border: solid 1px #000000 !important;
    color: #ffffff !important;
    transform: scale(1.05);
    transition: 0.3s;
}

.sea-quantity-items .sea-selected {
    background: #FFFFFF !important;
    border: .5px solid #0051FE !important;
    color: #000000 !important;
    transition: .3s;
}


/* Seatics outline fixes */
.seatics button, 
.seatics [role=button], 
.seatics .btn, 
.seatics li.slick-slide {
    outline-offset: -3px;
}

.seatics *:not(:focus) {
    outline: none;
}

/* Additional outline fixes for all interactive elements */
.seatics button:not(:focus),
.seatics [role=button]:not(:focus),
.seatics .btn:not(:focus),
.seatics .pre-checkout-price-cta:not(:focus) {
    outline: none;
}

/* Price display styling */
.btn-price {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

@media (max-width: 640px) {
    .btn-price {
        justify-content: flex-start;
    }
}

.btn-price .price {
    font-weight: 600;
    margin-right: 0.5rem;
    flex: 1;
}

/* Buy button next to price styling */
.btn-price-buy {
    background-color: #0051FE !important;
    border: 2px solid #000000 !important;
    border-radius: 0.5rem !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.25rem !important;
    padding: 0.5rem 1rem !important;
    text-align: center !important;
    text-transform: uppercase !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    outline: none !important;
    user-select: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Buy button hover effect - matching Add to Cart style */
.btn-price-buy:hover {
    background-color: #2C6A74 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Focus state for accessibility */
.btn-price-buy:focus {
    outline: 2px solid #f7c700 !important;
    outline-offset: 2px !important;
}

/* Active state */
.btn-price-buy:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 640px) {
    .btn-price-buy {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
    }
}

/* TN Seatics fold-out interface styling */
.seatics .ticket-group-details {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 1rem;
}

/* Hide estimated fees text and related elements */
.seatics .estimated-fees,
.seatics .fee-disclaimer,
.seatics .pricing-disclaimer,
.seatics .fee-information,
.seatics .service-fee-text,
.seatics .total-fees,
.seatics .fee-breakdown {
    display: none !important;
}

/* Hide elements containing fee-related text */
.seatics div:has([text*="Includes"]):has([text*="fees"]),
.seatics span:has([text*="estimated fees"]),
.seatics p:has([text*="$0 in estimated fees"]) {
    display: none !important;
}

/* Generic fee text hiding - target common patterns */
.seatics *[class*="fee"],
.seatics *[class*="estimated"],
.seatics *[class*="service"],
.seatics *[class*="total-fee"] {
    display: none !important;
}

/* Hide any small text that might contain fee information */
.seatics .small-text:has([text*="fee"]),
.seatics .disclaimer:has([text*="Includes"]),
.seatics .note:has([text*="estimated"]) {
    display: none !important;
}

/* Mobile responsiveness */
@media (max-width: 991px) {
    .pre-checkout-price-cta {
        font-size: 0.875rem;
        padding: 0.375rem 1.5rem;
    }
} 

/* Seatics Table Styling */
.seatics table tr:nth-child(odd) {
    background-color: #ffffff !important;
}

.seatics table tr:nth-child(even) {
    background-color: #f7f7f7 !important;
}

.seatics table tr:hover {
    background-color: #e0e0e0 !important;
}

.seatics table td,
.seatics table th {
    padding: 0 !important;
    border: 1px solid transparent !important;
}

/* Loading Screen Styling */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out;
}

#loading-screen .logo-container {
    margin-bottom: 30px;
    max-width: 300px;
    text-align: center;
}

#loading-screen .logo-container img {
    max-width: 100%;
    height: auto;
}

#loading-screen .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Base Page Styling */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
}

#tn-maps { 
    width: 100%; 
    height: 100vh; 
}

@media (max-width: 991px) { 
    #tn-maps { 
        height: 100vh; 
    } 
}

/* Touch Spinner */
#touch-spinner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
}

#touch-spinner div {
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Beautiful Owned Ticket Highlighting */

/* Target the venue-ticket-list-section-row-text div for owned tickets */
.seatics .venue-ticket-list-section-row-text.owned-best-deal {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%) !important;
    border-left: 5px solid #ffc107 !important;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    margin: 4px 0 !important;
}

.seatics .venue-ticket-list-section-row-text.owned-best-deal:hover {
    background: linear-gradient(135deg, #ffeaa7 0%, #ffeb3b 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3) !important;
    transition: all 0.2s ease !important;
}

.seatics .venue-ticket-list-section-row-text.owned-ticket {
    background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e8 100%) !important;
    border-left: 5px solid #28a745 !important;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    margin: 4px 0 !important;
}

.seatics .venue-ticket-list-section-row-text.owned-ticket:hover {
    background: linear-gradient(135deg, #d4edda 0%, #c8e6c9 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3) !important;
    transition: all 0.2s ease !important;
}

/* Add subtle animation to badges */
.seatics span[style*="background-color: #ffc107"],
.seatics span[style*="background-color: #28a745"] {
    animation: subtle-pulse 2s ease-in-out infinite !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

@keyframes subtle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* FALLBACK: Target any element containing "BEST DEAL" text directly */
.seatics td:contains("BEST DEAL"),
.seatics div:contains("BEST DEAL"),
.seatics span:contains("BEST DEAL") {
    background-color: #fff3cd !important;
    border-left: 4px solid #ffc107 !important;
}

/* Target table rows containing BEST DEAL text */
.seatics table tr:has(td:contains("BEST DEAL")),
.seatics table tr:has(div:contains("BEST DEAL")),
.seatics table tr:has(span:contains("BEST DEAL")) {
    background-color: #fff3cd !important;
    border-left: 4px solid #ffc107 !important;
}

/* Alternative approach using attribute selectors for any element with "BEST DEAL" in text content */
.seatics [title*="BEST DEAL"],
.seatics [data-notes*="BEST DEAL"],
.seatics [alt*="BEST DEAL"] {
    background-color: #fff3cd !important;
    border-left: 4px solid #ffc107 !important;
}

/* Hide Seatics logo when setting is enabled - Multiple approaches for maximum coverage */
.hide-seatics-logo .sea-map-branding-link,
.hide-seatics-logo #sea-seatics-link,
.hide-seatics-logo a[href*="seatics.com"],
.hide-seatics-logo a.sea-map-branding-link,
.hide-seatics-logo #sea-seatics-link img,
.hide-seatics-logo .sea-map-branding-link img,
.hide-seatics-logo a[href*="seatics.com"] img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}