/**
 * ACES Casino List Block - Frontend Styles
 */

/* CSS Variables */
:root {
    --aces-border-color: rgba(148, 163, 184, 0.3);
}

/* Ensure table has equal left and right padding/margins on mobile */
@media (max-width: 62em) {
    /* Ensure table has equal padding on both sides */
    .aces-org-table.space-organizations-3-archive-items {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure parent wrapper doesn't add extra padding */
    .aces-org-list-block .space-shortcode-wrap,
    .aces-org-list-block .space-shortcode-wrap-ins,
    .aces-org-list-block .space-shortcode-wrap > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure table rows have equal spacing */
    .aces-org-table.space-organizations-3-archive-items tbody tr.space-organizations-3-archive-item-ins {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Ensure first cell doesn't have extra padding */
    .aces-org-table.space-organizations-3-archive-items tbody tr.space-organizations-3-archive-item-ins td:first-child {
        padding-left: 0 !important;
    }
}

/* Unified section spacing for all ACES blocks - use margin-bottom only to avoid double spacing */
.wp-block-aces-intro-section,
.wp-block-aces-casino-list,
.wp-block-aces-authors-block,
.wp-block-aces-user-reviews,
.wp-block-aces-multisite-casino-list,
.aces-intro-section,
.aces-org-list-block,
.aces-authors-block,
.aces-user-reviews {
    margin-top: 0;
    margin-bottom: var(--spacing-section, 3rem);
}

/* Remove margin-bottom from authors block */
.aces-authors-block,
.wp-block-aces-authors-block {
    margin-bottom: 0;
}

/* Remove margin from multisite casino list block as parent section already has padding */
.aces-ms-org-list-block {
    margin-top: 0;
    margin-bottom: 0;
}


.aces-org-list-block {
    font-family: inherit;
}

/* List Title */
.aces-org-list-title {
    margin-bottom: 2rem;
    text-align: center;
}

.aces-org-list-title h3 {
    margin: 0;
    /* Typography uses unified heading styles */
    color: #333;
    position: relative;
    padding-bottom: 1rem;
}

.aces-org-list-title h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--border-radius, 0.6rem);
}

/* List Items Container */
.aces-org-list-items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Individual Casino Item */
.aces-org-list-item {
    display: flex;
    background: white;
    border: none;
    border-radius: var(--border-radius, 0.6rem);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease;
    position: relative;
}

.aces-org-list-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow);
}

/* Column Styles */
.aces-org-column {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.aces-org-column:not(:last-child)::after {
    display: none;
}

/* Logo Column */
.aces-org-column-logo {
    text-align: center;
}

.aces-org-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Center logo, title, and rating under logo in casino list block */
.space-organizations-3-archive-item-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.space-organizations-3-archive-item-logo .space-organizations-3-logo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.space-organizations-3-archive-item-logo .space-organizations-3-logo-box img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.space-organizations-3-archive-item-logo .space-organizations-3-title-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.space-organizations-3-archive-item-logo .space-organizations-3-title-box a {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Align title left when inside title-rating-wrapper */
.space-organizations-3-archive-item-logo .space-organizations-3-title-rating-wrapper .space-organizations-3-title-box {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    display: flex !important;
}

.space-organizations-3-archive-item-logo .space-organizations-3-title-rating-wrapper .space-organizations-3-title-box h3 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.space-organizations-3-archive-item-logo .space-organizations-3-title-box .space-organizations-3-logo-rating {
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex !important;
    align-items: center;
}

.space-organizations-3-archive-item-logo .space-organizations-3-title-box .space-organizations-3-logo-rating .star-rating {
    justify-content: center !important;
    display: inline-flex !important;
    margin-left: auto;
    margin-right: auto;
}

/* Align space-header-accepted-info left on desktop and mobile */
.space-organizations-3-archive-item-logo .space-header-accepted-info {
    text-align: left !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center;
    margin-left: 0 !important;
    margin-right: auto;
    white-space: nowrap !important;
}

/* Remove spacing between country name and flag icon */
.space-header-accepted-info img {
    margin-left: 0 !important;
    margin-right: 0 !important;
    vertical-align: middle !important;
    transform: none !important;
}

/* Prevent text wrapping in geo notice */
.space-header-accepted-info {
    white-space: nowrap !important;
    align-items: center !important;
    display: flex !important;
}

/* Ensure icon, text, and flag are vertically centered */
.space-header-accepted-info i,
.space-header-accepted-info img {
    vertical-align: middle !important;
    align-self: center !important;
}

/* Deposit and withdrawal logo items - add borders and vertical alignment */
.payment-methods-list .aces-payment-method.logo-item,
.payment-methods-list .aces-taxonomy-item.aces-payment-method.logo-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    background: #ffffff !important;
    border: 1px solid var(--aces-border-color, rgba(148, 163, 184, 0.3)) !important;
    border-radius: var(--border-radius, 0.6rem) !important;
    padding: 5px 12px 6px !important;
    margin: 3px 5px 6px 3px !important;
    height: 32px !important;
    min-width: 45px !important;
    box-sizing: border-box !important;
}

.payment-methods-list .aces-payment-method.logo-item img,
.payment-methods-list .aces-taxonomy-item.aces-payment-method.logo-item img {
    display: block !important;
    width: auto !important;
    height: 20px !important;
    max-width: 40px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    margin: 0 auto !important;
}

/* Update border color for all taxonomy items to use unified greyish color */
.aces-taxonomy-item {
    border-color: var(--aces-border-color, rgba(148, 163, 184, 0.3)) !important;
}

/* Display VPN, No KYC, and licensed badges in one row above buttons on desktop */
.space-organizations-3-archive-item-button.aces-buttons-container.aces-buttons-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: center;
    gap: 8px 8px;
}

/* Badges should be in one row - group them together */
.space-organizations-3-archive-item-button.aces-buttons-container.aces-buttons-inner > .aces-vpn-badge,
.space-organizations-3-archive-item-button.aces-buttons-container.aces-buttons-inner > .aces-no-kyc-badge,
.space-organizations-3-archive-item-button.aces-buttons-container.aces-buttons-inner > .licensed-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-bottom: 0 !important;
    width: auto !important;
    text-align: center;
    flex-shrink: 0;
    order: 0 !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
}

/* Force buttons to wrap to new line by taking full width - use more specific selector */
.space-organizations-3-archive-item-button.aces-buttons-container.aces-buttons-inner > .aces-action-btn,
.space-organizations-3-archive-item-button.aces-buttons-container.aces-buttons-inner > .aces-action-btn--primary,
.space-organizations-3-archive-item-button.aces-buttons-container.aces-buttons-inner > .aces-action-btn--secondary,
.space-organizations-3-archive-item-button.aces-buttons-container.aces-buttons-inner > a.space-organizations-archive-item-button-notice {
    order: 1 !important;
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-top: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.aces-org-logo-image {
    position: relative;
    display: inline-block;
}

.aces-org-logo-image img {
    border-radius: var(--border-radius, 0.6rem);
    transition: transform 0.3s ease;
}

.aces-org-logo-image:hover img {
    transform: scale(1.05);
}

.aces-org-rank {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--box-shadow);
}

.aces-org-title {
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

.aces-org-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.aces-org-title a:hover {
    color: #667eea;
}

/* Terms Column */
.aces-org-column-terms {
    text-align: center;
}

.aces-org-terms {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Rating Column */
.aces-org-column-rating {
    text-align: center;
}

.aces-org-rating {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.aces-org-rating-stars {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.aces-org-rating-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
}

.aces-org-tc-notice {
    margin-top: 1rem;
    text-align: center;
}

.aces-tc-apply {
    display: inline-block;
    background: #f8f9fa;
    color: #666;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius, 0.6rem);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.aces-tc-apply:hover {
    background: #e9ecef;
    border-color: #667eea;
}

.aces-tc-desc {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius, 0.6rem);
    padding: 1rem;
    box-shadow: var(--box-shadow);
    z-index: var(--zindex-tooltip, 1080) !important;
    min-width: 250px;
    max-width: 350px;
    margin-top: 0.5rem;
}

.aces-tc-apply:hover + .aces-tc-desc,
.aces-tc-desc:hover {
    display: block;
    z-index: var(--zindex-tooltip, 1080) !important;
}

.aces-org-button-notice {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: var(--border-radius, 0.6rem);
    border-left: 3px solid #667eea;
    font-size: 0.85rem;
    color: #666;
}

/* Buttons Column */
.aces-org-column-buttons {
    text-align: center;
}

.aces-org-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.aces-org-play-now,
.aces-org-read-review {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-pill, 999px);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    min-width: auto;
    justify-content: center;
}
.aces-org-play-now i,
.aces-org-read-review i,
.aces-org-play-now .fas,
.aces-org-read-review .fas,
.aces-org-play-now .far,
.aces-org-read-review .far,
.aces-org-play-now .fab,
.aces-org-read-review .fab {
    margin-right: 6px;
}

.aces-org-play-now {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.aces-org-play-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    color: white;
}

.aces-org-read-review {
    background: transparent;
    color: #666;
    border: 1px solid #e0e0e0;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
}

.aces-org-read-review:hover {
    background: transparent;
    border-color: #667eea;
    color: #667eea;
}

.aces-org-website {
    display: inline-block;
    color: #667eea;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius, 0.6rem);
    background: white;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.aces-org-website:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* Load More Button */
.aces-load-more-button {
    text-align: center;
    margin-top: 2rem;
}

.aces-load-more-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--border-radius-pill, 999px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.aces-load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

/* Placeholder Columns */
.aces-org-column-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    background: #f8f9fa;
    border: 2px dashed #e0e0e0;
    border-radius: var(--border-radius, 0.6rem);
    color: #999;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 62em) {
    .aces-org-list-item {
        flex-wrap: wrap;
    }
    
    .aces-org-column {
        min-width: 200px;
        flex: 1 1 calc(50% - 1rem);
    }
    
    /* Center logo, title, and rating on tablet */
    .space-organizations-3-archive-item-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .space-organizations-3-archive-item-logo .space-organizations-3-logo-box {
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .space-organizations-3-archive-item-logo .space-organizations-3-title-box {
        text-align: center;
        align-items: center;
    }
    
    /* Align title left when inside title-rating-wrapper on tablet */
    .space-organizations-3-archive-item-logo .space-organizations-3-title-rating-wrapper .space-organizations-3-title-box {
        text-align: left !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        display: flex !important;
    }
    
    .space-organizations-3-archive-item-logo .space-organizations-3-title-rating-wrapper .space-organizations-3-title-box h3 {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    .space-organizations-3-archive-item-logo .space-organizations-3-title-box .space-organizations-3-logo-rating {
        justify-content: center !important;
        text-align: center !important;
        display: flex !important;
        align-items: center;
    }
    
    .space-organizations-3-archive-item-logo .space-organizations-3-title-box .space-organizations-3-logo-rating .star-rating {
        justify-content: center !important;
        display: inline-flex !important;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Align space-header-accepted-info left on tablet */
    .space-organizations-3-archive-item-logo .space-header-accepted-info {
        text-align: left !important;
        justify-content: flex-start !important;
        display: flex !important;
        align-items: center;
        margin-left: 0 !important;
        margin-right: auto;
    }
}

@media (max-width: 48em) {
    .aces-org-list-item {
        flex-direction: column;
    }
    
    .aces-org-column {
        width: 100% !important;
        flex: none;
        border-bottom: none;
    }
    
    .aces-org-column:last-child {
        border-bottom: none;
    }
    
    .aces-org-column::after {
        display: none;
    }
    
    .aces-org-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .aces-org-play-now,
    .aces-org-read-review {
        min-width: 120px;
    }
    
    /* Center logo, title, and rating on mobile */
    .space-organizations-3-archive-item-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .space-organizations-3-archive-item-logo .space-organizations-3-logo-box {
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .space-organizations-3-archive-item-logo .space-organizations-3-title-box {
        text-align: center;
        align-items: center;
        width: 100%;
    }
    
    .space-organizations-3-archive-item-logo .space-organizations-3-title-box a {
        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Align title left when inside title-rating-wrapper on mobile */
    .space-organizations-3-archive-item-logo .space-organizations-3-title-rating-wrapper .space-organizations-3-title-box {
        text-align: left !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        display: flex !important;
    }
    
    .space-organizations-3-archive-item-logo .space-organizations-3-title-rating-wrapper .space-organizations-3-title-box h3 {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    .space-organizations-3-archive-item-logo .space-organizations-3-title-box .space-organizations-3-logo-rating {
        justify-content: center !important;
        text-align: center !important;
        width: 100%;
        display: flex !important;
        align-items: center;
    }
    
    .space-organizations-3-archive-item-logo .space-organizations-3-title-box .space-organizations-3-logo-rating .star-rating {
        justify-content: center !important;
        display: inline-flex !important;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Align space-header-accepted-info left on mobile */
    .space-organizations-3-archive-item-logo .space-header-accepted-info {
        text-align: left !important;
        justify-content: flex-start !important;
        display: flex !important;
        align-items: center;
        margin-left: 0 !important;
        margin-right: auto;
        white-space: nowrap !important;
    }
}

@media (max-width: 36em) {
    /* Additional mobile styles can be added here */
    
    .aces-org-column {
        padding: 0 1rem;
    }
    
    .aces-org-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .aces-org-play-now,
    .aces-org-read-review {
        min-width: auto;
        width: 100%;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .aces-org-list-block {
        background: #1a1a1a;
        color: #e0e0e0;
    }
    
    .aces-org-list-item {
        background: #2d2d2d;
        border-color: #404040;
    }
    
    .aces-org-list-title h3 {
        color: #e0e0e0;
    }
    
    .aces-org-title a {
        color: #e0e0e0;
    }
    
    .aces-org-terms {
        color: #b0b0b0;
    }
    
    .aces-org-rating-value {
        color: #e0e0e0;
    }
    
    .aces-tc-apply {
        background: #404040;
        color: #b0b0b0;
        border-color: #555;
    }
    
    .aces-org-button-notice {
        background: #404040;
        color: #b0b0b0;
    }
    
    .aces-org-read-review {
        background: transparent;
        color: #b0b0b0;
        border-color: #555;
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
    }
    .aces-org-read-review:hover {
        background: transparent;
        border-color: #667eea;
        color: #667eea;
    }
    
    .aces-org-website {
        background: #2d2d2d;
        color: #667eea;
        border-color: #555;
    }
}

/* Animation Classes */
.aces-org-list-item {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for multiple items */
.aces-org-list-item:nth-child(1) { animation-delay: 0.1s; }
.aces-org-list-item:nth-child(2) { animation-delay: 0.2s; }
.aces-org-list-item:nth-child(3) { animation-delay: 0.3s; }
.aces-org-list-item:nth-child(4) { animation-delay: 0.4s; }
.aces-org-list-item:nth-child(5) { animation-delay: 0.5s; }

/* Section Background Feature */
.space-shortcode-wrap.has-section-background {
    position: relative;
    isolation: isolate;
}

/* Provide vertical breathing room inside section backgrounds */
.space-shortcode-wrap.has-section-background {
    padding-top: 2.5rem; /* ~40px */
    padding-bottom: 2.5rem;
}

.space-shortcode-wrap.has-section-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: var(--wp-section-background, #f2f4f7);
    z-index: -1;
    pointer-events: none;
}

/* Ensure the shortcode title (h2) renders above sticky toolbars/filters */
.space-shortcode-title {
    position: relative;
    z-index: 1050; /* higher than .aces-toolbar (1020) so title sits on top */
}

/* Slightly separate the title from the table header inside the section */
.space-shortcode-title { margin-bottom: 1rem; }

/* Arrange theme chip navigation + toolbar directly under the heading */
.aces-org-toolbar-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1040;
}

.aces-org-toolbar-wrap .space-categories-list-box {
    margin: 0;
}

.aces-org-toolbar-wrap .aces-toolbar {
    top: auto;
}

/* Ensure table rows have white background for contrast */
.space-shortcode-wrap.has-section-background .aces-org-table tbody tr,
.space-shortcode-wrap.has-section-background .space-organizations-3-archive-item-ins {
    background-color: #ffffff;
}