/* Luxury Casino Theme - Modern & Responsive */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --bg-dark: #0f172a;
    --bg-card: #1e293b;
    --bg-card-hover: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --accent-gold: #fbbf24;
    --accent-gold-hover: #d97706;
    --border-color: #334155;
    --table-stripe: #1e293b;
    --primary-blue: #2563eb;
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 4rem;
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word;
    /* Prevent long words from breaking layout */
    word-break: break-word;
}

/* Center and constrain main content width */
body>h1,
body>h2,
body>h3,
body>p,
body>ul,
body>ol,
body>div.casino-table-wrapper,
body>table,
body>.author-section,
body>.bio-section,
body>.review-table-wrapper,
body>.review-img,
body>.footer-container,
/* Footer might want full width, but let's constrain it for now */
body>.au-faq {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    /* Content Padding */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (max-width: 768px) {

    /* Header Mobile Layout */
    .site-header .container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem;
    }

    .site-header .site-logo {
        margin-right: 0 !important;
    }

    .site-header .site-title {
        text-align: center;
        width: 100%;
        margin-bottom: 0.25rem;
    }

    .site-header .site-nav {
        margin-left: 0 !important;
        width: 100%;
    }

    .site-header .site-nav ul {
        justify-content: center;
        gap: 1rem;
        padding-left: 0;
    }

    /* Adjust padding for mobile */
    body>h1,
    body>h2,
    body>h3,
    body>p,
    body>ul,
    body>ol,
    body>div.casino-table-wrapper,
    body>table,
    body>.author-section,
    body>.bio-section,
    body>.review-table-wrapper,
    body>.footer-container,
    body>.au-faq {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
    text-align: center;
    background: linear-gradient(to right, #fff, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    font-size: 1.75rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: var(--accent-gold);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

h3 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1.25rem;
    color: var(--text-secondary);
}

a {
    color: var(--accent-gold);
    text-decoration: none;
    transition: all 0.2s;
}

a:hover {
    color: var(--accent-gold-hover);
    text-decoration: underline;
}

ul,
ol {
    padding-left: 2.5rem;
    /* Ensure bullets/numbers are well within the container */
    margin-bottom: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header */
.site-header {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    box-shadow: var(--shadow-lg);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo img {
    height: 40px;
    width: auto;
}

.site-nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.site-nav a {
    color: var(--text-primary);
    font-weight: 500;
    position: relative;
}

.site-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--accent-gold);
    transition: width 0.3s ease;
}

.site-nav a:hover::after {
    width: 100%;
}

/* Hero Author Section */
.author-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border: 1px solid var(--glass-border);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.author-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--accent-gold);
}

.author-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* Main Top List Table */
.casino-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-bottom: 3rem;
    box-shadow: var(--shadow-lg);
    width: 100%;
}

.casino-table {
    width: 100%;
    border-collapse: collapse;
    /* Remove fixed min-width to let it shrink or card view handle it */
}

.casino-table th {
    background: #1e293b;
    color: var(--accent-gold);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    padding: 1.25rem 1rem;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
}

.casino-table td {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}

.casino-table tr:hover {
    background: var(--bg-card-hover);
}

.casino-name-cell {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    color: #fff;
}

.casino-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
}

/* Comparison Tables in Reviews */
.review-table-wrapper {
    margin: 2rem 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.review-table {
    width: 100%;
    border-collapse: collapse;
}

.review-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}

.review-table tr:last-child td {
    border-bottom: none;
}

.review-table td:first-child {
    font-weight: 600;
    color: var(--accent-gold);
    width: 30%;
    border-right: 1px solid var(--border-color);
}

/* Responsive Styles */
@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    /* Generic Table Responsive Card View */
    .casino-table,
    .casino-table tbody,
    .casino-table tr,
    .casino-table td {
        display: block;
        width: 100%;
    }

    .casino-table thead {
        display: none;
        /* Hide headers on mobile */
    }

    .casino-table tr {
        margin-bottom: 1.5rem;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 1rem;
        position: relative;
        box-shadow: var(--shadow-sm);
    }

    .casino-table td {
        border: none;
        padding: 0.5rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
    }

    /* Add labels via data attributes or careful layout */
    .casino-table td::before {
        content: attr(data-label);
        /* Requires adding data-label to HTML */
        font-weight: 600;
        color: var(--text-secondary);
        text-align: left;
        margin-right: 1rem;
    }

    /* Fallback if we can't edit every TD to add data-label immediately */
    /* Using specific styling since we know the column order */
    .casino-table td:nth-of-type(1)::before {
        content: "Rank";
    }

    .casino-table td:nth-of-type(2)::before {
        content: "Casino";
    }

    .casino-table td:nth-of-type(3)::before {
        content: "Min PayID Deposit";
    }

    .casino-table td:nth-of-type(4)::before {
        content: "Games";
    }

    .casino-table td:nth-of-type(5)::before {
        content: "Withdrawal";
    }

    .casino-table td:nth-of-type(6)::before {
        content: "Bonus";
    }

    .casino-name-cell {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 0.75rem;
        justify-content: flex-start;
    }

    .casino-table td:nth-of-type(2) {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        width: 100%;
        text-align: left;
    }

    .casino-table td:nth-of-type(2)::before {
        display: none;
    }

    /* Hide "Casino" label for the name cell itself as it's the header */

    /* Review Tables Mobile */
    .review-table,
    .review-table tbody,
    .review-table tr,
    .review-table td,
    .review-table th {
        display: block;
        width: 100%;
    }

    /* Hide header row (Feature, Available?, Details) */
    .review-table tr:first-child th {
        display: none;
    }

    /* If the first row is td (legacy), we might need to hide it if it acts as header, 
       but based on HTML it seems to use TH for the first row mostly. 
       Let's just style the TRs as cards. */

    .review-table tr {
        margin-bottom: 2rem;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
        background: var(--bg-card);
    }

    /* Make the first row (headers) hidden if it's just THs */
    .review-table>tbody>tr:first-child>th,
    .review-table>tr:first-child>th {
        display: none;
    }

    /* Specific styling for the cells in the "Card" */
    .review-table td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-color);
    }

    .review-table td:last-child {
        border-bottom: none;
    }

    /* The first cell (Feature Name) */
    .review-table td:nth-child(1) {
        background: var(--bg-card-hover);
        color: var(--accent-gold);
        font-weight: 700;
        border-right: none;
        width: 100%;
    }

    /* The second cell (Available? / Icon) */
    .review-table td:nth-child(2) {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
    }

    .review-table td:nth-child(2)::before {
        content: "Available:";
        color: var(--text-secondary);
        font-weight: normal;
        margin-right: 0.5rem;
    }
}

/* FAQ Section */
.au-faq {
    margin-top: 4rem;
    background: var(--bg-card);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid var(--border-color);
}

.faq-item {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item h3 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
    color: var(--accent-gold);
    cursor: pointer;
}

.faq-item p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* Features List in Table fix */
.responsive-casino-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
}

.responsive-casino-table th,
.responsive-casino-table td {
    padding: 1rem;
    border: 1px solid var(--border-color);
    text-align: left;
}

.responsive-casino-table th {
    background: var(--bg-card-hover);
    color: var(--accent-gold);
}

@media (max-width: 600px) {
    .responsive-casino-table thead {
        display: none;
    }

    .responsive-casino-table tr {
        display: block;
        margin-bottom: 1.5rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        background: var(--bg-card);
    }

    .responsive-casino-table td {
        display: block;
        border: none;
        padding: 0.5rem 0;
    }

    .responsive-casino-table td:before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 0.25rem;
        color: var(--text-secondary);
    }

    /* Approximate labels since we might not edit HTML for this one immediately */
    .responsive-casino-table td:nth-of-type(1):before {
        content: "Category";
    }

    .responsive-casino-table td:nth-of-type(2):before {
        content: "Casino";
    }

    .responsive-casino-table td:nth-of-type(3):before {
        content: "Highlights";
    }
}


/* Contact Form Styles */
.contact-form-wrapper {
    max-width: 600px;
    margin: 2rem auto;
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.contact-form-group {
    margin-bottom: 1.5rem;
}

.contact-form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
}

.contact-form-input,
.contact-form-textarea {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.contact-form-input:focus,
.contact-form-textarea:focus {
    outline: none;
    border-color: var(--accent-gold);
}

.contact-form-textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-form-submit {
    background: var(--accent-gold);
    color: #1e293b;
    /* Dark text on gold button for contrast */
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
    width: 100%;
}

.contact-form-submit:hover {
    background: var(--accent-gold-hover);
}

/* Author Full Profile Page */
.author-full-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--bg-card);
    padding: 3rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-bottom: 3rem;
    box-shadow: var(--shadow-lg);
}

.author-full-profile img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 4px solid var(--accent-gold);
    object-fit: cover;
    margin-bottom: 1.5rem;
}

.author-full-profile h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(to right, #fff, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.author-role {
    color: var(--accent-gold);
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.author-bio-text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.author-stats {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Footer */
.footer-container {
    background: #0B1120;
    color: var(--text-secondary);
    padding: 3rem 1.5rem;
    margin-top: 4rem;
    border-top: 1px solid var(--border-color);
}

.footer-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links a {
    color: var(--text-secondary);
}

.footer-links a:hover {
    color: var(--accent-gold);
}

.review-img {
    margin: 1.5rem auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    max-width: 100%;
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    /* Ensure margin auto works */
}

/* Bio / Author Footer Section */
.bio-section {
    display: flex;
    align-items: center;
    max-width: 700px;
    border: 2px solid #f8f8f8;
    border-radius: 24px;
    padding: 24px;
    background: #031653;
    margin: 2rem auto;
    gap: 24px;
    /* Use gap instead of margin-right */
}

.bio-photo {
    width: 165px;
    height: 165px;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
    /* Prevent squishing */
}

.bio-name {
    margin: 0 0 12px 0;
    font-size: 1.5rem;
}

.bio-name a {
    text-decoration: none;
    color: #fff;
    /* Inherit was likely white on that bg */
}

.bio-name a:hover {
    color: var(--accent-gold);
}

.bio-section p {
    margin: 0;
    color: #e2e8f0;
    /* Light text for readability on dark blue */
}

@media (max-width: 600px) {
    .bio-section {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .bio-photo {
        width: 120px;
        height: 120px;
    }
}