/*
Theme Name: JFC Games
Theme URI: https://github.com/jfcgames
Author: JFC Games
Author URI: https://jfcgames.com
Description: A professional WordPress theme for online game portals. Fully manageable game sections (Hot, Trending, Popular, New), dynamic menus with icon support, ACF-powered game pages with iframe embed, ratings, fullscreen mode, and more.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jfc-games
Tags: games, gaming, arcade, entertainment, custom-menu, custom-logo, custom-header, full-width-template, one-column, two-columns, three-columns, left-sidebar, right-sidebar, grid-layout
*/

/* ── Custom Logo ─────────────────────────────────────────────────────────── */
.custom-logo-link { display: block; }
.custom-logo-link img { display: block; height: 41px; width: auto; }

/* ── Star Ratings ────────────────────────────────────────────────────────── */
.rating { display: inline-flex; gap: 2px; }
.rating .star { font-size: 1.2rem; line-height: 1; }
.rating .star-filled { color: #FCCC00; }
.rating .star-half { color: #FCCC00; opacity: 0.7; }
.rating .star-empty { color: #555; }

/* ── Like Button Active State ────────────────────────────────────────────── */
#likegame.liked path { fill: #FCCC00; }
#add-to-favourites.active path { fill: #f8cb00; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.jfc-pagination { margin: 1.5rem 0; width: 100%; }
.jfc-pagination .page-numbers { display: inline-flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.jfc-pagination .page-numbers li a,
.jfc-pagination .page-numbers li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 6px;
    background: #2a2b2e;
    color: #fff;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s;
}
.jfc-pagination .page-numbers li a:hover,
.jfc-pagination .page-numbers li span.current {
    background: #f8cb00;
    color: #1a1b1e;
}

/* ── Mobile Menu Styling ──────────────────────────────────────────────────── */
.fixed-menu-mobile .inner-mobile-menu {
    padding: 0 15px;
}
.fixed-menu-mobile .inner-mobile-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* ── Play Game Button Styling ─────────────────────────────────────────────── */
#play-game-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(248, 203, 0, 0.6);
}

#play-game-btn:active {
    transform: scale(0.98);
}

/* ── Theater Mode ────────────────────────────────────────────────────────── */
.theater-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: #000 !important;
    display: flex;
    flex-direction: column;
}
.theater-mode #iframehtml5 {
    flex: 1;
    height: calc(100vh - 60px) !important;
}
body.theater-active .game-box-left,
body.theater-active .game-box-right {
    display: none;
}

/* ── Game Description ────────────────────────────────────────────────────── */
.game-description {
    padding: 1rem 1rem 2rem;
    color: #ccc;
    line-height: 1.8;
    font-size: 1rem;
}
.game-description h1,
.game-description h2,
.game-description h3,
.game-description h4,
.game-description h5,
.game-description h6 {
    color: #fff;
    margin: 1.5rem 0 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}
.game-description h2 {
    font-size: 1.4rem;
    border-left: 3px solid #f8cb00;
    padding-left: 12px;
}
.game-description h3 {
    font-size: 1.15rem;
}
.game-description p {
    margin: 0.75rem 0;
}
.game-description ul,
.game-description ol {
    padding-left: 1.75rem;
    margin: 0.75rem 0;
}
.game-description ul li,
.game-description ol li {
    margin: 0.35rem 0;
    padding-left: 0.25rem;
}
.game-description ul {
    list-style-type: disc;
}
.game-description ul li::marker {
    color: #f8cb00;
}
.game-description ol {
    list-style-type: decimal;
}
.game-description a {
    color: #f8cb00;
    text-decoration: none;
    transition: opacity 0.2s, text-decoration 0.2s;
}
.game-description a:hover {
    opacity: 0.85;
    text-decoration: underline;
}
.game-description img,
.game-description figure,
.game-description .wp-caption {
    max-width: 100% !important;
    height: auto !important;
    margin: 1.5rem 0 !important;
}
.game-description figure img,
.game-description .wp-caption img {
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}
.game-description figcaption,
.game-description .wp-caption-text {
    color: #aaa;
    font-size: 0.875rem;
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
}
.game-description .aligncenter {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}
.game-description blockquote {
    border-left: 3px solid #f8cb00;
    padding-left: 1rem;
    margin: 1.25rem 0;
    color: #bbb;
    font-style: italic;
}
.game-description table,
.game-description .wp-block-table table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
}
.game-description table th,
.game-description table td {
    padding: 12px 16px;
    text-align: left;
    border: 1px solid #3a3b3e;
}
.game-description table th {
    background: #2a2b2e;
    color: #f8cb00;
    font-weight: 600;
}
.game-description table td {
    background: #1a1b1e;
    color: #ccc;
}
.game-description table tr:nth-child(even) td {
    background: #2a2b2e;
}

/* ── Sticker Category Links ──────────────────────────────────────────────── */
.us-sticker {
    display: inline-block;
    background: #2a2b2e;
    color: #ccc;
    padding: 4px 12px;
    border-radius: 20px;
    margin: 4px 4px 4px 0;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: background 0.2s;
}
.us-sticker:hover { background: #f8cb00; color: #1a1b1e !important; }

/* Simple rating stars */
.jfc-star {
    font-size: 24px;
    line-height: 1;
    display: inline-block;
}
.jfc-star-full {
    color: #FCCC00;
}
.jfc-star-half-container {
    position: relative;
    display: inline-block;
    font-size: 24px;
    line-height: 1;
}
.jfc-star-half-container .jfc-star-empty {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
}
.jfc-star-half-container .jfc-star-half {
    position: relative;
    overflow: hidden;
    display: inline-block;
    color: #FCCC00;
}
.jfc-star-empty {
    color: #fff;
}

/* Make the title and rating appear on the same line */
.box-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.box-header h1 {
    margin: 0;
}


/* ── Comments area ───────────────────────────────────────────────────────── */
#append-comment { margin-top: 1.5rem; }
.comment-company { background: #1a1b1e; border-radius: 8px; padding: 1rem; }
.comment-company .comment-form-comment label { color: #ccc; display: block; margin-bottom: 6px; }
.comment-company input[type="text"],
.comment-company input[type="email"],
.comment-company textarea {
    width: 100%;
    background: #2a2b2e;
    border: 1px solid #444;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.comment-company input[type="text"]::placeholder,
.comment-company input[type="email"]::placeholder,
.comment-company textarea::placeholder { color: #888; }
.comment-company .submit,
.comment-company .btn-primary {
    background: #f8cb00;
    color: #1a1b1e;
    border: none;
    padding: 8px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: opacity 0.2s;
}
.comment-company .submit:hover { opacity: 0.85; }
.comment-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.comment-list .comment { margin-bottom: 1rem; padding: 0.75rem; background: #2a2b2e; border-radius: 6px; }
.comment-list .fn { font-weight: bold; color: #fff; }
.comment-list .comment-date { font-size: 0.75rem; color: #888; }
.comment-list .comment-content { color: #ccc; margin-top: 0.25rem; }

/* ── Page Content ────────────────────────────────────────────────────────── */
.page-content { color: #ccc; line-height: 1.8; font-size:1rem; padding:1rem 1rem 2rem; }
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 {
    color: #fff;
    margin: 1.5rem 0 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}
.page-content h2 {
    font-size: 1.4rem;
    border-left: 3px solid #f8cb00;
    padding-left: 12px;
}
.page-content h3 { font-size:1.15rem; }
.page-content p { margin:0.75rem 0; }
.page-content ul, .page-content ol {
    padding-left:1.75rem;
    margin:0.75rem 0;
}
.page-content ul { list-style-type:disc; }
.page-content ul li::marker, .page-content ol li::marker { color:#f8cb00; }
.page-content a {
    color: #f8cb00;
    text-decoration: none;
    transition:opacity 0.2s, text-decoration 0.2s;
}
.page-content a:hover {
    opacity:0.85;
    text-decoration:underline;
}
.page-content img, .page-content figure, .page-content .wp-caption {
    max-width:100% !important;
    height:auto !important;
    width:100% !important;
    margin:1.5rem 0 !important;
}
.page-content figure img, .page-content .wp-caption img {
    border-radius:8px;
    display:block;
    margin:0 auto;
}
.page-content figcaption, .page-content .wp-caption-text {
    color:#aaa;
    font-size:0.875rem;
    text-align:center;
    margin-top:0.75rem;
    font-style:italic;
}
.page-content blockquote {
    border-left:3px solid #f8cb00;
    padding-left:1rem;
    margin:1.25rem 0;
    color:#bbb;
    font-style:italic;
}
.page-content table, .page-content .wp-block-table table {
    width:100%;
    margin:1.5rem 0;
    border-collapse:collapse;
    border-radius:8px;
    overflow:hidden;
}
.page-content table th, .page-content table td {
    padding:12px 16px;
    text-align:left;
    border:1px solid #3a3b3e;
}
.page-content table th {
    background:#2a2b2e;
    color:#f8cb00;
    font-weight:600;
}
.page-content table td {
    background:#1a1b1e;
    color:#ccc;
}
.page-content table tr:nth-child(even) td {
    background:#2a2b2e;
}

/* ── Archive (Category/Tag) Content Styling ────────────────────────────────── */
.us-content {
    padding: 1rem 1rem 2rem;
    color: #ccc;
    line-height: 1.8;
    font-size: 1rem;
}
.us-content h1,
.us-content h2,
.us-content h3,
.us-content h4,
.us-content h5,
.us-content h6 {
    color: #fff;
    margin: 1.5rem 0 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}
.us-content h2 {
    font-size: 1.4rem;
    border-left: 3px solid #f8cb00;
    padding-left: 12px;
}
.us-content h3 {
    font-size: 1.15rem;
}
.us-content p {
    margin: 0.75rem 0;
}
.us-content ul,
.us-content ol {
    padding-left: 1.75rem;
    margin: 0.75rem 0;
}
.us-content ul li,
.us-content ol li {
    margin: 0.35rem 0;
    padding-left: 0.25rem;
}
.us-content ul {
    list-style-type: disc;
}
.us-content ul li::marker {
    color: #f8cb00;
}
.us-content ol {
    list-style-type: decimal;
}
.us-content a {
    color: #f8cb00;
    text-decoration: none;
    transition: opacity 0.2s, text-decoration 0.2s;
}
.us-content a:hover {
    opacity: 0.85;
    text-decoration: underline;
}
.us-content img,
.us-content figure,
.us-content .wp-caption {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
    margin: 1.5rem 0 !important;
}
.us-content figure img,
.us-content .wp-caption img {
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}
.us-content figcaption,
.us-content .wp-caption-text {
    color: #aaa;
    font-size: 0.875rem;
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
}
.us-content .aligncenter {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}
.us-content blockquote {
    border-left: 3px solid #f8cb00;
    padding-left: 1rem;
    margin: 1.25rem 0;
    color: #bbb;
    font-style: italic;
}
.us-content table,
.us-content .wp-block-table table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
}
.us-content table th,
.us-content table td {
    padding: 12px 16px;
    text-align: left;
    border: 1px solid #3a3b3e;
}
.us-content table th {
    background: #2a2b2e;
    color: #f8cb00;
    font-weight: 600;
}
.us-content table td {
    background: #1a1b1e;
    color: #ccc;
}
.us-content table tr:nth-child(even) td {
    background: #2a2b2e;
}

/* ── No iframe placeholder ───────────────────────────────────────────────── */
.jfc-no-iframe {
    border: 2px dashed #444;
    border-radius: 8px;
}

/* ── Embed box ───────────────────────────────────────────────────────────── */
.az-games__embed { padding: 0.5rem 1rem; }
.az-games__embed-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2a2b2e;
    border-radius: 6px;
    padding: 8px 12px;
}
.az-games__embed-title { color: #aaa; font-size: 0.8rem; white-space: nowrap; }
.az-games__embed-link {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    cursor: text;
}
.az-games__embed-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}
.az-games__embed-button svg { width: 18px; height: 18px; fill: #aaa; }
.az-games__embed-button:hover svg { fill: #fff; }

/* ── Sticky Sidebars ─────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    .game-suggestion {
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
}

/* ── Exit fullscreen button visibility ───────────────────────────────────── */
body.theater-active #_exit_full_screen {
    display: block !important;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100000;
    cursor: pointer;
}

#_exit_full_screen {
    display: none;
}

.live-search-results {
    width: 237px; /* Same as search form width */
    padding-bottom: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 12px;
    overflow: hidden;
}

.live-search-result-item {
    padding: 10px 12px !important;
}

.live-search-result-item:hover {
    background-color: #3a3a3a;
    transition: background-color 0.2s ease;
}

.live-search-result-item:last-child {
    border-bottom: none !important;
}

/* Mobile search results styling */
.fixed-menu-mobile .live-search-results {
    width: 100% !important;
    max-width: 300px;
    left: 0;
    right: 0;
}

/* ── WP Admin bar offset ─────────────────────────────────────────────────── */
@media screen and (min-width: 783px) {
    body.admin-bar header { top: 32px; }
    body.admin-bar .game-suggestion { top: 52px; }
}
@media screen and (max-width: 782px) {
    body.admin-bar header { top: 46px; }
    body.admin-bar .game-suggestion { top: 66px; }
}
div#respond , div#comments_area {
    padding: 10px;
}
.widget.wiget-title svg {
    margin-right: 10px;
}