/*
Theme Name: FreeCasino INT
Template: blocksy
Text Domain:  freecasino-int
Description:  FreeCasino INT Child theme for the Blocksy theme
*/

/* Age Gate Popup Styling */
.age-gate {
    border-radius: 15px; /* Rounded corners */
}

.age-gate__heading-title .age-gate__heading-title--logo img {
    margin-bottom: 15px !important;
    margin-top: 10px !important;
}

.age-gate__headline {
    font-weight: 600;
    margin-bottom: 5px;
}

.age-gate__subheadline {
    margin-bottom: 25px;
    line-height: 1.4;
    font-weight: lighter;
    padding: 0px 15px 0px 15px;
}

.age-gate__buttons .age-gate__submit--no {
    cursor: pointer !important;
    background-color: #142850 !important; /* Button background color */
}

.age-gate__buttons .age-gate__submit--no:hover {
    cursor: pointer !important;
    background-color: #239ddb !important; /* Button background color */
}

.age-gate__buttons .age-gate__submit--yes {
    cursor: pointer !important;
    background-color: #142850 !important; /* Button background color */
}

.age-gate__buttons .age-gate__submit--yes:hover {
    cursor: pointer !important;
    background-color: #239ddb !important; /* Button background color */
}


/* ACF WYSIWYG Editor Base styles for H2 and H3 within .main-content and .main-content-post-nav */
.main-content h2, .main-content-post-nav h2,
.main-content h3, .main-content-post-nav h3 {
    font-family: 'Montserrat', sans-serif; /* Font family for H2 and H3 */
    color: #142850; /* Common font color for H2 and H3 */
    line-height: 1.3; /* Line height for H2 and H3 */
    margin-top: 20px !important; /* Top margin for H2 and H3 */
    margin-bottom: -15px !important; /* Bottom margin for H2 and H3 */
}

/* ACF WYSIWYG Editor Styles for paragraphs and lists within .main-content and .main-content-post-nav */
.main-content p, .main-content-post-nav p,
.main-content ul, .main-content-post-nav ul,
.main-content ol, .main-content-post-nav ol,
.main-content ul li, .main-content-post-nav ul li,
.main-content ol li, .main-content-post-nav ol li {
    font-family: 'Open Sans', sans-serif; /* Font family for paragraphs and lists */
    letter-spacing: 0; /* Letter spacing for paragraphs and lists */
    color: #73777f; /* Font color for paragraphs and lists */
}

/* Margin-bottom adjustment for UL and OL */
.main-content ul, .main-content-post-nav ul,
.main-content ol, .main-content-post-nav ol {
    margin-bottom: -25px !important; /* Bottom margin for UL and OL */
}

/* ACF WYSIWYG Editor Adjust top margin, left padding for lists, and padding for list items within .main-content and .main-content-post-nav */
.main-content ul li, .main-content-post-nav ul li,
.main-content ol li, .main-content-post-nav ol li {
    margin-top: -35px; /* Top margin for list items */
    padding-right: 10%; /* Right padding for list items */
    padding-top: 10px; /* Top padding for list items */
    padding-bottom: 10px; /* Bottom padding for list items */
}

/* ACF WYSIWYG Editor Styles for strong tags within lists */
.main-content ul li strong, .main-content-post-nav ul li strong,
.main-content ol li strong, .main-content-post-nav ol li strong {
    color: #142850; /* Font color for strong tags within lists */
}

/* ACF WYSIWYG Editor Styles for images within .main-content and .main-content-post-nav */
.main-content img, .main-content-post-nav img {
    border-radius: 5px; /* Rounded corners for images */
}

/* Styles for ACF WYSIWYG Editor YouTube full width */
.main-content iframe, .main-content-post-nav iframe {
    aspect-ratio: 16 / 9; /* Sets the aspect ratio to 16:9 */
    width: 100%; /* Make the iframe take the full width of its container */
    height: auto; /* Optional: Adjust this depending on your needs */
    border: none; /* Optional: Removes the border around iframes */
    border-radius: 5px; /* Adds 5px rounded corners */
}

/* ACF WYSIWYG Editor Desktop Styles (992px and above) */
@media (min-width: 992px) {
    .main-content h2, .main-content-post-nav h2 {
        font-size: 42px;
        font-weight: bold;
        letter-spacing: -1.5px;
    }
    .main-content h3, .main-content-post-nav h3 {
        font-size: 32px;
        font-weight: 600; /* Semi-bold */
        letter-spacing: -1.0px;
    }
    .main-content p, .main-content-post-nav p,
    .main-content ul, .main-content-post-nav ul, 
    .main-content ol, .main-content-post-nav ol,
    .main-content ul li, .main-content-post-nav ul li,
    .main-content ol li, .main-content-post-nav ol li {
        font-size: 16px; /* Font size for paragraphs and lists on desktop */
        line-height: 1.7; /* Line height for paragraphs and lists on desktop */
    }
}

/* ACF WYSIWYG Editor Tablet Styles (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .main-content h2, .main-content-post-nav h2 {
        font-size: 35px;
        font-weight: bold;
        letter-spacing: -0.5px;
    }
    .main-content h3, .main-content-post-nav h3 {
        font-size: 27px;
        font-weight: 600; /* Semi-bold */
        letter-spacing: 0.0px;
    }
    .main-content p, .main-content-post-nav p,
    .main-content ul, .main-content-post-nav ul, 
    .main-content ol, .main-content-post-nav ol,
    .main-content ul li, .main-content-post-nav ul li,
    .main-content ol li, .main-content-post-nav ol li {
        font-size: 15px; /* Font size for paragraphs and lists on tablet */
        line-height: 1.6; /* Line height for paragraphs and lists on tablet */
    }
}

/* ACF WYSIWYG Editor Mobile Styles (0px to 767px) */
@media (max-width: 767px) {
    .main-content h2, .main-content-post-nav h2 {
        font-size: 29px;
        font-weight: bold;
        letter-spacing: -0.5px;
    }
    .main-content h3, .main-content-post-nav h3 {
        font-size: 22px;
        font-weight: 600; /* Semi-bold */
        letter-spacing: 0.0px;
    }
    .main-content p, .main-content-post-nav p,
    .main-content ul, .main-content-post-nav ul, 
    .main-content ol, .main-content-post-nav ol,
    .main-content ul li, .main-content-post-nav ul li,
    .main-content ol li, .main-content-post-nav ol li {
        font-size: 15px; /* Font size for paragraphs and lists on mobile */
        line-height: 1.6; /* Line height for paragraphs and lists on mobile */
    }
}

/* ACF WYSIWYG Editor Table Styles */
.main-content table, .main-content-post-nav table {
    width: 100%; /* Ensures the table takes the full width of the container */
    border-collapse: collapse; /* Ensures that borders collapse */
    margin-bottom: 20px; /* Adds some space after the table */
    font-family: 'Open Sans', sans-serif; /* Matches the font family for text */
    color: #73777f; /* Matches the text color for tables */
}

/* Table Header Styling */
.main-content table th, .main-content-post-nav table th {
    background-color: #f2f2f2; /* Light grey background for headers */
    color: #142850; /* Header text color */
    font-weight: bold; /* Make header text bold */
    padding: 10px; /* Adds padding inside the header cells */
    text-align: left; /* Left-aligns the text */
    border: 1px solid #ddd; /* Border for table headers */
}

/* Table Cell Styling */
.main-content table td, .main-content-post-nav table td {
    padding: 10px; /* Padding inside the table cells */
    border: 1px solid #ddd; /* Border around each cell */
    vertical-align: top; /* Ensures text is aligned to the top in case of multiple lines */
}

/* Alternating row colors (zebra stripes) */
.main-content table tr:nth-child(even), .main-content-post-nav table tr:nth-child(even) {
    background-color: #f9f9f9; /* Light grey background for even rows */
}

/* Responsive Table Styling */
@media (max-width: 767px) {
    .main-content table, .main-content-post-nav table {
        display: block;
        overflow-x: auto; /* Enables horizontal scrolling for tables on mobile */
        white-space: nowrap; /* Prevents table from wrapping rows on mobile */
    }
}




/* Styles for Free-To-Play Slot Machines full width */
.slot-machine-iframe iframe {
    aspect-ratio: 16 / 9; /* Sets the aspect ratio to 16:9 */
    width: 100%; /* Make the iframe take the full width of its container */
    height: auto; /* Optional: Adjust this depending on your needs */
    border: none; /* Optional: Removes the border around iframes */
    border-radius: 5px; /* Adds 5px rounded corners */
}



/* Styling for .acf-link-shortcode */
.acf-link-shortcode {
    font-family: 'Montserrat', sans-serif; /* Font family */
    font-size: 14px; /* Font size */
    font-weight: 500; /* Medium weight */
    line-height: 1.4; /* Line height */
    letter-spacing: 0; /* Letter spacing */
    color: #239ddb !important; /* Font color */
    text-decoration: none; /* Remove underline by default */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Optional: Hover effect */
.acf-link-shortcode:hover {
    color: #1a7ab0; /* Darker shade on hover */
    text-decoration: underline; /* Underline on hover */
}

/* Center alignment for Tablet (768px to 991px) 
@media (min-width: 768px) and (max-width: 991px) {
    .acf-link-shortcode {
        text-align: center !important; /* Center text on Tablet 
    }
}
*/

/* Center alignment for Mobile (0px to 767px) 
@media (max-width: 767px) {
    .acf-link-shortcode {
        text-align: center !important; /* Center text on Mobile 
    }
}
*/



/* Adjust the width of the .brz-ed-listbox. This is for the List Box in the Brizy Builder, not for front end CSS */
.brz-ed-listbox {
    width: 250px !important; /* Set the width to 250px */
}

/* Adjust the max-height of the div inside .brz-ed-listbox. This is for the List Box in the Brizy Builder, not for front end CSS*/
.brz-ed-listbox div {
    max-height: 500px !important; /* Set the max-height to 500px */
    overflow-y: auto; /* Ensure the content is scrollable if it exceeds max-height */
}




/* General Grid Layout for License Countries and Accept Players From Countries - Casino Review CPT */
/* Mobile-first: 5 columns on mobile */
.license-countries,
.accept-players-from {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 10px;
    row-gap: 10px;
    justify-content: center;
    align-items: start;
}

/* ── Individual PM / CG section header ───────────────────────────────────────
   Mirrors Game Providers (.gp / .gp__head / .gp__title / .gp__rule) exactly so
   the three casino-review sections read consistently: same H5 semibold primary-
   dark title, same 1px mid-gray rule, same 12px title↔rule and 28px head↔grid
   gaps. Tokens only — no new values. */
.cri-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);                        /* 20 head ↔ grid (mobile; ≥768 → 28, = .gp) */
    font-family: var(--font-family-paragraph);
    box-sizing: border-box;
}
.cri-block *, .cri-block *::before, .cri-block *::after { box-sizing: border-box; }
.cri-head { display: flex; flex-direction: column; gap: var(--spacing-3); }  /* 12 title ↔ rule */
.cri-title {
    margin: 0;
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
    color: var(--color-primary-dark);
}
.cri-rule {
    display: block;
    width: 100%;
    height: var(--border-width-thin);
    background: var(--color-base-mid-gray);
}

/* Payment Logos / Game Icons Grid - Casino Review CPT (Figma: Volt DS v1.0)
   Mobile-first. Cols 4 / 5 / 5 at base / 768 / 1280. Box height 52 / 64 / 52. */
.payment-logos,
.game-icons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* mobile: 4 cols */
    column-gap: var(--spacing-2);                     /* 8 */
    row-gap: var(--spacing-4);                        /* 16 */
    justify-content: center;
    align-items: start;
}

/* General Styles for Items */
.license-country,
.accept-country {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payment-logo,
.game-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);                 /* 4 box↔label (Figma 4-5px) */
    text-align: center;
}

/* Icon/Image Sizing - Mobile first */
.license-country img,
.accept-country img {
    max-width: 50px;
    height: auto;
}

/* Gray logo box (Figma "Placeholder"): fixed height, logo centered via object-fit.
   bg #fafafa, radius 12px — both exact tokens. Height 52 (mobile) → 64 → 52. */
.payment-logo img,
.game-icon img {
    width: 100%;
    height: var(--spacing-13);             /* 52 box height (mobile) */
    object-fit: contain;
    background: var(--color-base-ghost-white); /* #fafafa — exact */
    border-radius: var(--radius-xl);           /* 12px — exact */
    padding: var(--spacing-2);                 /* 8 logo inset */
}

/* Description Text Styles - Visible on all breakpoints */
.license-description,
.accept-description {
    display: block;
    font-size: 10px;
    color: #73777f;
    margin-top: 5px;
    max-width: 80px;
    text-align: center;
}

.payment-description,
.game-description {
    display: block;
    margin: 0;
    text-align: center;
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-p3-caption);    /* 11 / 12 / 13 — exact */
    line-height: var(--line-height-p3-caption);/* 17 / 18 / 20 — exact */
    color: var(--color-default-text);          /* #57595d — exact (Figma default; hover → primary) */
}



/* Styles for payment methods for Casino Top List Post */
.payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Responsive columns */
    column-gap: 15px; /* Space between columns */
    row-gap: 0px; /* Space between rows */
    justify-content: center; /* Centers content horizontally */
    align-items: start; /* Aligns content to top */
}

.payment-method img {
    max-width: 85px;
    height: auto;
}

/* Styles for game types for Casino Top List Post */
.game-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, max-content)); /* Responsive columns */
    gap: 0px; /* Space between items */
    justify-content: start; /* Aligns items to the left */
    align-items: center; /* Ensures proper vertical alignment */
    text-align: center;
}

.game-type {
    display: grid;
    grid-template-rows: auto auto; /* Two rows: icon and text */
    justify-items: center; /* Centers items in each grid cell */
}

.game-type img {
    max-width: 60px;
    height: auto;
}

/* Tablet breakpoint (768px and up) */
@media (min-width: 768px) {
    .license-countries,
    .accept-players-from {
        grid-template-columns: repeat(5, 1fr);
        column-gap: 12px;
        row-gap: 12px;
    }

    .cri-block { gap: var(--spacing-7); }  /* 28 head ↔ grid */

    .payment-logos,
    .game-icons {
        grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 cols */
        column-gap: var(--spacing-6);      /* 24 */
        row-gap: var(--spacing-3);         /* 12 */
    }

    .payment-logo img,
    .game-icon img {
        height: var(--spacing-16);         /* 64 box height */
    }

    .license-country img,
    .accept-country img {
        max-width: 65px;
    }

    .payment-method img,
    .game-type img {
        max-width: 65px;
    }

    .payment-methods,
    .game-types {
        gap: 12px;
    }
}

/* Desktop breakpoint (1280px+) — payment & games sit side-by-side (half column),
   so boxes narrow back to 52px. Figma: 5 cols, col-gap 12, row-gap 16. */
@media (min-width: 1280px) {
    .payment-logos,
    .game-icons {
        grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 cols */
        column-gap: var(--spacing-3);      /* 12 */
        row-gap: var(--spacing-4);         /* 16 */
    }

    .payment-logo img,
    .game-icon img {
        height: var(--spacing-13);         /* 52 box height */
    }
}

/* Desktop breakpoint (1440px and up) */
@media (min-width: 1440px) {
    .license-countries,
    .accept-players-from {
        grid-template-columns: repeat(5, 1fr);
        column-gap: 15px;
        row-gap: 15px;
    }

    .license-country img,
    .accept-country img {
        max-width: 85px;
    }

    .payment-method img,
    .game-type img {
        max-width: 85px;
    }

    .payment-methods,
    .game-types {
        gap: 15px;
    }
}




/* Styles for Author Article Count on Desktop */
.author-article-count {
    font-family: var(--font-family-paragraph);
    font-size: var(--font-size-p3-caption);
    line-height: var(--line-height-p3-caption);
    font-weight: var(--font-weight-p3-caption);
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--color-primary-light);
}

/* Targeting the img tag within .acf-author-profile-img to make it round */
.acf-author-profile-img img {
    border-radius: 50%; /* Makes the image round */
    width: 100%; /* Ensures the image takes the full width of its container */
    height: auto; /* Maintains the aspect ratio of the image */
}




/* Styling to hide the Brizy List Blocks by default before showing the blocks with content using JavaScript - REMEMBER TO DISABLE when editing the Brizy Templates*/
.casino-bonus-1, 
.casino-bonus-2, 
.casino-bonus-3, 
.casino-bonus-4, 
.casino-bonus-5 {
    display: none !important; /* Override Brizy's flex */
}

.casino-bonus-1:not([style*="display: none"]),
.casino-bonus-2:not([style*="display: none"]),
.casino-bonus-3:not([style*="display: none"]),
.casino-bonus-4:not([style*="display: none"]),
.casino-bonus-5:not([style*="display: none"]) {
    display: flex !important; /* Only show if content is found */
}







/* Custom ACF WYSIWYG Field and Brizy Text Field ToC Styling - for ACF Post and Archive ToC */
.custom-toc {
    background: #fafbfc; /* Updated background color */
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px; /* Rounded corners */
}

.custom-toc h2 {
    margin-top: 0;
    font-size: 20px; /* Reduced font size for ToC header */
}

.custom-toc ul {
    list-style: disc; /* Unordered list style */
    padding-left: 20px; /* Space for list markers */
}

.custom-toc li {
    margin: 5px 0;
}

.custom-toc li:last-child {
    margin-bottom: 15px !important;
}

.custom-toc a {
    text-decoration: none;
    color: #239ddb; /* Updated link color */
}

.custom-toc a:hover {
    text-decoration: underline;
    color: #0073aa; /* Optional hover color for better UX */
}



/* Tooltip container */
.bonus-code-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.3;
    color: #142850;
    border: 2px dashed orange;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center; /* Center the text inside the container */
}

/* Tooltip text (hidden by default) */
.bonus-code-tooltip .tooltip-text {
    font-size: 12px;
    line-height: 1.7;
    font-weight: 500;
    font-family: Montserrat, sans-serif;
    letter-spacing: 0.5px;
    visibility: hidden;
    width: 250px;
    background-color: #0a2d53; /* Dark blue background */
    color: white;
    text-align: left;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    z-index: 800; /* Ensure the tooltip sits above all other elements */
    top: 150%; /* Position the tooltip below the element */
    left: 50%;
    transform: translateX(-50%); /* Center the tooltip horizontally */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Tooltip shadow */
    white-space: wrap; 
    display: flex;
    align-items: center;
}

/* Tooltip arrow */
.bonus-code-tooltip .tooltip-text::before {
    content: '';
    position: absolute;
    bottom: 100%; /* Place arrow at the bottom of the tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #0a2d53 transparent; /* Tooltip arrow color */
}

/* Show the tooltip text when hovering */
.bonus-code-tooltip:hover .tooltip-text {
    visibility: visible;
}

/* Styling the trigger text (hover element) */
.country-tooltip .trigger-text {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.3;
    color: #142850;
    border-radius: 5px;
    cursor: pointer;
    padding-left: 14px
}

/* Tooltip container */
.country-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Tooltip text (hidden by default) */
.country-tooltip .tooltip-text {
    font-size: 12px;
    line-height: 1.7;
    font-weight: 500;
    font-family: Montserrat, sans-serif;
    letter-spacing: 0.5px;
    visibility: hidden;
    width: 300px;
    background-color: #0a2d53;
    color: white;
    text-align: left;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    z-index: 900; /* More than the Bonus Code Z-Index */
    top: 150%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: wrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Tooltip arrow */
.country-tooltip .tooltip-text::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #0a2d53 transparent;
}

/* Show the tooltip text on hover */
.country-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Media Query for Tablet and Mobile (screens up to 991px) */
@media (max-width: 991px) {
    /* Tooltip for Tablet and Mobile - Top Position */
    .bonus-code-tooltip .tooltip-text, 
    .country-tooltip .tooltip-text {
        top: auto; /* Remove the default top position */
        bottom: 150%; /* Place the tooltip above the element */
    }
    /* Adjust tooltip arrow for Tablet and Mobile */
    .bonus-code-tooltip .tooltip-text::before,
    .country-tooltip .tooltip-text::before {
        bottom: auto; /* Remove bottom arrow position */
        top: 100%; /* Place the arrow at the top */
        border-color: #0a2d53 transparent transparent transparent; /* Arrow points down */
    }
}

/* Disable the -webkit-box-sizing and box-sizing for the AJAX Search Lite container inside Brizy */
.probox {
    -webkit-box-sizing: content-box !important; /* Disable the webkit box-sizing */
}

/* Styling the [user_countries] short code */
.user-country-text {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.3;
    color: #142850;
    border-radius: 5px;
    cursor: pointer;
    padding-left: 14px ;
    cursor: default; /* Ensures the text doesn't appear clickable */
    text-align: right !important;
    display: block;
}

/* Styling the [list_rank] short code */
.user-country-flags {
    border-radius: 5px;
    display: inline-block;
}

/* Clickable payment/game icons -> internal links (published posts only).
   When linked, the box + caption live inside this <a>, so the box↔label gap
   lives here too (mirrors .payment-logo / .game-icon). */
.payment-logo-link,
.game-icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);                 /* 4 box↔label */
    width: 100%;
    text-decoration: none;
    color: inherit;
}

/* Same hover as Game Providers: the caption turns primary blue */
.payment-logo-link:hover .payment-description,
.game-icon-link:hover .game-description {
    color: var(--color-primary);
}