/*
Theme Name: My FarGoox Blog Theme
Author: Hicham07
Version: 1.1
Description: My Gaming Blog.
*/

/* Reset & Basic Setup */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    text-decoration: none;
}
/* Body dynamic style clean white */
body {
    background-color: #f9f9ff;
    color: #4b4b62;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    scroll-behavior: smooth;
}

.site-container {
    max-width: 1140px;
    margin: 50px auto;
    padding: 0 20px;
}

/* Grid Layout 3 columns f-hal image_ec9c45.jpg */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 30px;
}

/* Card Design */
.post-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* Image & Badge position style */
.post-thumbnail-wrapper {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
}
.post-thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.placeholder-thumb {
    width: 100%;
    height: 100%;
    background: #eaeaea;
}

/* Katen Pink/Coral Category Badge */
.category-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #fe4f70; /* Katen main pink accent */
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.category-badge a {
    color: #ffffff !important;
    text-transform: uppercase;
}

/* Card Content Details */
.post-card-content {
    padding: 25px 25px 15px 25px;
    flex-grow: 1;
}
.post-card-meta {
    font-size: 12px;
    color: #8f8f9d;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.post-card-title {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 12px;
    font-weight: 700;
}
.post-card-title a {
    color: #203656;
}
.post-card-title a:hover {
    color: #fe4f70;
}
.post-card-excerpt {
    font-size: 14px;
    color: #707a8a;
    line-height: 1.6;
}

/* Card Footer element border line */
.post-card-footer {
    padding: 15px 25px;
    border-top: 1px solid #f1f1f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8f8f9d;
    font-size: 14px;
}
.share-icon, .more-options {
    cursor: pointer;
    transition: color 0.2s;
}
.share-icon:hover, .more-options:hover {
    color: #fe4f70;
}

/* ==========================================================================
   Header & Navigation Style (Katen Inspired)
   ========================================================================== */
   .site-header {
    background: #ffffff;
    border-bottom: 1px solid #f1f1f7;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 20px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.header-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* Logo Setup */
.site-logo h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
}
.site-logo h1 a {
    color: #203656; /* Dark Blue m-ghlaq */
    font-family: 'Poppins', sans-serif;
}
/* Deek l-noqta l-wardya li f-smiyya d Katen. */
.site-logo h1 a::after {
    content: ".";
    color: #fe4f70; 
    font-size: 32px;
}
.site-logo p {
    font-size: 11px;
    color: #8f8f9d;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* Nav Menu Elements */
.main-navigation {
    display: flex;
    align-items: center;
}
.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
}
.nav-menu li a {
    color: #203656;
    font-weight: 600;
    font-size: 15px;
    position: relative;
    padding: 5px 0;
    transition: color 0.3s ease;
}
/* Hover effect dyal l-links */
.nav-menu li a:hover,
.nav-menu li.current-menu-item > a {
    color: #fe4f70;
}

/* Custom design l-wahed l-button f l-menu (fhal contact masalan) */
.nav-menu li:last-child a {
    background: #fe4f70;
    color: #ffffff !important;
    padding: 8px 20px;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(254, 79, 112, 0.25);
    transition: all 0.3s ease;
}
.nav-menu li:last-child a:hover {
    background: #e03e5d;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(254, 79, 112, 0.35);
}

/* ==========================================================================
   Footer Style (Katen Exact Layout - image_ecfe3f.png)
   ========================================================================== */
   .site-footer {
    background: #ffffff;
    padding: 60px 0 40px 0;
    margin-top: 80px;
    text-align: center;
}

/* Upper part: Instagram Button */
.footer-upper {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
}

/* Gradient Button precise style */
.instagram-btn {
    background: linear-gradient(90deg, #fe4f70 0%, #ffa387 100%);
    color: #ffffff !important;
    padding: 14px 35px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(254, 79, 112, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.instagram-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(254, 79, 112, 0.35);
}

/* Divider Line */
.footer-divider {
    max-width: 1140px;
    height: 1px;
    background-color: #f1f1f7;
    margin: 0 auto 30px auto;
}

/* Main Row Layout */
.footer-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* Left: Info Text */
.footer-info p {
    font-size: 14px;
    color: #8f8f9d;
    margin: 0;
}

/* Center: Social Links style */
.footer-social {
    display: flex;
    gap: 20px;
    align-items: center;
}

.footer-social a {
    color: #203656;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-social a:hover {
    color: #fe4f70;
}

/* Right: Back to Top element */
.back-to-top-btn {
    border: 1px solid #f1f1f7;
    padding: 10px 22px;
    border-radius: 25px;
    color: #8f8f9d !important;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.back-to-top-btn:hover {
    border-color: #fe4f70;
    color: #fe4f70 !important;
    background-color: #fff9f9;
}

/* Responsive design */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        gap: 20px;
    }
}

/* ==========================================================================
   Load More Button Style (image_ecfe3f.png)
   ========================================================================== */
   .load-more-wrapper {
    text-align: center;
    margin: 50px 0 20px 0;
    display: flex;
    justify-content: center;
}

.load-more-btn {
    background: #ffffff;
    color: #8f8f9d !important;
    border: 1px solid #f1f1f7;
    padding: 12px 35px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    border-color: #fe4f70;
    color: #fe4f70 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(254, 79, 112, 0.08);
}

/* ==========================================================================
   Update Back to Top Button (Animation & Style Clean)
   ========================================================================== */
   .back-to-top-btn {
    border: 1px solid #f1f1f7;
    padding: 10px 22px;
    border-radius: 25px;
    color: #8f8f9d !important;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important; /* Hadchi kay-7iyyed dak l-khat lli t7t l-ktaba */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

/* Hover Animation (Katen Style) */
.back-to-top-btn:hover {
    border-color: #fe4f70;
    color: #fe4f70 !important;
    background-color: #fff9f9;
    text-decoration: none !important; /* Darori hna t-kon m-7iyyda hta f-hover */
    transform: translateY(-4px); /* Kay-tla3 l-foq khfîf smoothly */
    box-shadow: 0 6px 15px rgba(254, 79, 112, 0.12);
}

/* Animation khassa b l-icon dyal l-ssahm (arrow) wast l-button */
.back-to-top-btn i {
    transition: transform 0.3s ease;
}

.back-to-top-btn:hover i {
    animation: bounceUp 0.6s infinite alternate; /* L-ssahm welli y-t-bounsa l-foq o l-tah t */
}

/* L-haraka dyal keyframes d l-bounce */
@keyframes bounceUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-3px);
    }
}
/* ==========================================================================
   Single Post Page Style (Katen Inspired)
   ========================================================================== */
   .single-post-wrapper {
    max-width: 800px; /* Layout m-diyeq chwya f l-wost bach y-koun mri7 f l-qraya */
    margin: 0 auto;
}

.single-post-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    padding: 40px;
    margin-bottom: 40px;
}

/* Header Elements */
.single-post-header {
    text-align: center;
    margin-bottom: 30px;
}

.category-badge.single-badge {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    margin-bottom: 15px;
}

.single-post-title {
    font-size: 36px;
    color: #203656;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 15px;
}

.single-post-meta {
    font-size: 13px;
    color: #8f8f9d;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.single-post-meta i {
    color: #fe4f70; /* Icons b lawn wardi khfif */
    margin-right: 3px;
}

/* Large Featured Image Layout */
.single-post-thumbnail {
    width: 100%;
    margin-bottom: 40px;
    border-radius: 12px;
    overflow: hidden;
}

.single-post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Post Content Typography (Very Important for Reading) */
.single-post-content {
    font-size: 16px;
    color: #4b4b62;
    line-height: 1.8;
}

.single-post-content p {
    margin-bottom: 25px; /* Space dyal paragraphs */
}

.single-post-content h2, 
.single-post-content h3 {
    color: #203656;
    margin: 40px 0 20px 0;
    font-weight: 700;
}

.single-post-content h2 { font-size: 26px; }
.single-post-content h3 { font-size: 22px; }

/* Dynamic layout dyal tsawr wast l-maqal */
.single-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

/* Tags section styling */
.single-post-tags {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #f1f1f7;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tags-title {
    font-weight: 600;
    color: #203656;
    font-size: 14px;
}

.single-post-tags a {
    background: #f1f1f7;
    color: #707a8a !important;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 13px;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.single-post-tags a:hover {
    background: #fe4f70;
    color: #ffffff !important;
}

/* Responsive l-tel-ifounat */
@media (max-width: 768px) {
    .single-post-card {
        padding: 20px;
    }
    .single-post-title {
        font-size: 26px;
    }
}

/* ==========================================================================
   Comments Container Layout (Katen Style)
   ========================================================================== */
   .comments-area {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    padding: 40px;
    margin-top: 40px;
}

.comments-title, .comment-reply-title {
    font-size: 22px;
    color: #203656;
    font-weight: 700;
    margin-bottom: 30px;
    font-family: 'Poppins', sans-serif;
}

/* List dyal l-comments */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.comment-list .comment {
    border-bottom: 1px solid #f1f1f7;
    padding: 25px 0;
}

.comment-list .comment:last-child {
    border-bottom: none;
}

/* Card layout wast l-comment (Avatar + Text) */
.comment-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.comment-meta .avatar {
    border-radius: 50%; /* Image rounded circle */
    object-fit: cover;
}

.comment-meta {
    flex-shrink: 0;
}

.comment-content {
    flex-grow: 1;
}

.comment-author .fn {
    font-size: 16px;
    font-weight: 700;
    color: #203656;
    font-style: normal;
}

.comment-metadata {
    font-size: 12px;
    color: #8f8f9d;
    margin: 4px 0 10px 0;
}

.comment-metadata a {
    color: #8f8f9d;
    text-decoration: none !important; /* No underline */
}

.comment-content p {
    font-size: 15px;
    color: #4b4b62;
    line-height: 1.6;
    margin: 0 0 10px 0;
}

/* Button reply click link */
.reply a {
    background: #f1f1f7;
    color: #203656 !important;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 15px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.reply a:hover {
    background: #fe4f70;
    color: #ffffff !important;
}

/* Child comments indentation (Replies) */
.comment-list .children {
    list-style: none;
    padding-left: 50px;
    margin-top: 10px;
}

/* ==========================================================================
   Comment Form Setup (Inputs & Custom Button)
   ========================================================================== */
.comment-respond {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #f1f1f7;
    background-color: #fff;
    padding: 30px ;
    border-radius: 25px;
}

.comment-form-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Name w Email hada hda hada */
    gap: 20px;
    margin-bottom: 20px;
}

.form-group input, .form-group-textarea textarea {
    width: 100%;
    border: 1px solid #f1f1f7;
    background: #f9f9ff;
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 14px;
    color: #203656;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-group-textarea textarea {
    border-radius: 15px;
    resize: vertical;
    margin-bottom: 20px;
}

.form-group input:focus, .form-group-textarea textarea:focus {
    border-color: #fe4f70;
    background: #ffffff;
}

/* Submit Comment Button Style Precise */
.submit-comment-btn {
    background: #fe4f70;
    color: #ffffff;
    border: none;
    padding: 12px 35px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(254, 79, 112, 0.2);
    transition: all 0.3s ease;
}

.submit-comment-btn:hover {
    background: #e03e5d;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(254, 79, 112, 0.35);
}

/* Hidden elements clean note */
.comment-notes, .logged-in-as {
    font-size: 13px;
    color: #8f8f9d;
    margin-bottom: 15px;
}
.logged-in-as a {
    color: #fe4f70;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .comment-form-inputs {
        grid-template-columns: 1fr; /* Y-rj3o stacked f mobile */
    }
    .comment-list .children {
        padding-left: 20px;
    }
}


/* ==========================================================================
   Exact Column Layout Fix (image_ee7564.png)
   ========================================================================== */

/* 1. L-ab l-asasi (Flex row bach y-koun avatar 3l l-isar w l-ktaba 3l l-imn) */
.comment-list .comment-body {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 0;
    border-bottom: 1px solid #f1f1f7;
    position: relative;
    flex-direction: column;
    gap: 10px;
}

/* 2. Fix dynamic l-vcard dyal WordPress bach t-rjje3 l-ktaba column vertically */
.comment-list .comment-author.vcard {
    display: flex;
    flex-direction: column; /* Hadchi kay-khlli kullchi y-hbat l-tah t dynamic */
    align-items: flex-start;
    gap: 4px;
    font-style: normal;
    margin: 15px 0;
}

/* N-7iyydu sora mn l-column hit bghinaha t-bqa 3l l-isar bohedha */
.comment-list .comment-author .avatar {
    position: absolute;
    left: 0;
    top: 30px; /* Nafs padding-top d l-comment-body */
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
}

/* N-khlqo space l-ktaba 3l l-isar b l-qyas d sora + gap bach ma-t-jich foqha */
.comment-list .comment-text-wrapper,
.comment-list .comment-author.vcard {
    padding-left: 80px; /* Space kafi l-avatar (60px) + gap (20px) */
    width: 100%;
}

/* 3. Smiyyt l-Author (Dark & Bold) */
.comment-list .comment-author .fn {
    font-size: 18px;
    font-weight: 700;
    color: #203656;
    display: block;
    margin: 0;
}

.comment-list .comment-author .fn a {
    color: #203656 !important;
    text-decoration: none !important;
}

/* Khbi "says:" completely */
.comment-list .comment-author .says {
    display: none !important;
}

/* 4. L-Date (t-ji dynamic t7t s-smiyya b-dabt) */
.comment-list .comment-metadata {
    font-size: 13px;
    color: #8f8f9d;
    margin-top: 2px;
    margin-bottom: 10px;
    display: block;
}

.comment-list .comment-metadata a {
    color: #8f8f9d !important;
    text-decoration: none !important;
}

/* 5. Content text (hello / eeeeeee) */
.comment-list .comment-content {
    font-size: 15px;
    color: #4b4b62;
    line-height: 1.6;
    margin-bottom: 15px;
}

.comment-list .comment-content p {
    margin: 0;
}

/* 6. Button d Reply Gradient rounded exact */
.comment-list .reply {
    display: block;
    margin-top: 5px;
}

.comment-list .reply a {
    background: linear-gradient(to right, #fe4f70, #ffa387);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 26px;
    border-radius: 25px;
    text-decoration: none !important;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(254, 79, 112, 0.15);
    transition: all 0.3s ease;
}

.comment-list .reply a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(254, 79, 112, 0.3);
}

/* ==========================================================================
   Header Navigation Menu (Katen Style Clean Layout)
   ========================================================================== */

/* L-Ab d l-menu (Nav wrapper) */
.site-navigation {
    display: flex;
    align-items: center;
}

/* 7iyyed bullet points dyal standard WordPress ul */
.site-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 30px; /* Space bin kull kelma o kelma f l-menu */
}

/* Style dyal kull items (li) */
.site-navigation li {
    position: relative;
}

/* Style d l-links (a) - Dark, Clean, o bla l-khat khfîf */
.site-navigation a {
    color: #203656 !important; /* Lawn ghameq dyal Katen */
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important; /* 7iyyed dak l-khat completely */
    padding: 10px 0;
    display: inline-block;
    transition: color 0.3s ease;
}

/* Hover effect: kay-welli dynamic pink/coral */
.site-navigation a:hover,
.site-navigation .current-menu-item > a {
    color: #fe4f70 !important;
}

/* Sub-menus (Dropdowns) layout ila 3ndek categories m-chebka */
.site-navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 15px;
    min-width: 200px;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 999;
}

.site-navigation ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-navigation ul ul a {
    font-size: 14px;
    font-weight: 500;
    padding: 5px 0;
    width: 100%;
}
/* ==========================================================================
   Full Header Layout (Katen Concept)
   ========================================================================== */
   .site-header {
    background: #ffffff;
    border-bottom: 1px solid #f1f1f7;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between; /* Farraq l-elements (Logo l-isar, Menu f-wost, Search l-imn) */
    align-items: center;
}

/* Style d l-Logo */
.site-logo a {
    font-size: 24px;
    font-weight: 800;
    color: #203656;
    text-decoration: none !important;
    letter-spacing: -0.5px;
}

.site-logo a:hover {
    color: #fe4f70 !important;
}

/* Section Right (Search icon) */
.header-right {
    display: flex;
    align-items: center;
    color: #203656;
    cursor: pointer;
    font-size: 18px;
    transition: color 0.2s ease;
}

.header-right:hover {
    color: #fe4f70;
}

/* Dropdown indicators dynamic logic */
.site-navigation .menu-item-has-children > a::after {
    content: " ▾";
    font-size: 11px;
    vertical-align: middle;
    opacity: 0.7;
}

/* Responsive Mobile setup khfif */
@media (max-width: 768px) {
    .header-container {
        flex-direction: row;
        gap: 15px;

    }
    .site-navigation ul {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* ==========================================================================
   Responsive Mobile Menu (Burger Setup)
   ========================================================================== */

/* Standard Desktop setup (Khbi burger icon f PC) */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.menu-toggle .bar {
    width: 22px;
    height: 2px;
    background-color: #203656;
    transition: all 0.3s ease;
}

/* @media screen for Mobile Devices */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex; /* Biyyen burger icon f mobile */
    }

    /* Rjje3 l-container flex-row m-gadd f mobile hta howa */
    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
    }

    /* Structural fix l-navigation f mobile (Overlay Slide Down) */
    .site-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #ffffff;
        border-bottom: 1px solid #f1f1f7;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        max-height: 0; /* Hidden by default */
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        z-index: 999;
    }

    /* Mlli welli active y-t-fteh dynamic */
    .site-navigation.is-active {
        max-height: 400px; /* L-towl d-slide layout */
    }

    .site-navigation ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 10px 20px;
    }

    .site-navigation li {
        width: 100%;
        border-bottom: 1px solid #f9f9ff;
    }

    .site-navigation li:last-child {
        border-bottom: none;
    }

    .site-navigation a {
        width: 100%;
        padding: 12px 0;
        font-size: 16px;
    }

    /* Animation d l-burger transformation l-X icon (Optional & Pro) */
    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* ==========================================================================
   Exact Katen Header Style (image_15f345.png)
   ========================================================================== */
   .site-header {
    background: #ffffff;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.header-container {
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 1. Logo Style (Dark Navy + Pink/Coral Dot) */
.site-logo a {
    font-size: 26px;
    font-weight: 700;
    color: #203656 !important;
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif;
}
.site-logo .logo-dot {
    color: #fe4f70;
    font-size: 32px;
    line-height: 0;
    margin-left: 1px;
}

/* 2. Middle Navigation Menu */
.site-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 25px;
}

.site-navigation li a {
    color: #707a8a !important; /* Standard grey-blue lawn */
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    padding: 8px 16px;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Hover dynamic setup */
.site-navigation li a:hover {
    color: #fe4f70 !important;
}

/* Active Link Capsule / Current Page (b-hal "Lifestyle" f sora) */
.site-navigation .current-menu-item > a {
    background: linear-gradient(to right, #fe4f70, #ffa387);
    color: #ffffff !important;
    border-radius: 20px;
    padding: 8px 20px;
    box-shadow: 0 4px 10px rgba(254, 79, 112, 0.2);
}

/* Indicator d dropdowns (v hda kelma) */
.site-navigation .menu-item-has-children > a::after {
    content: " ▾";
    font-size: 10px;
    opacity: 0.6;
    margin-left: 4px;
}

/* 3. Right Group (Socials + Buttons) */
.header-right-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Social icons layout grid */
.header-socials {
    display: flex;
    align-items: center;
    gap: 15px;
}
.header-socials a {
    color: #203656 !important;
    font-size: 14px;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.header-socials a:hover {
    color: #fe4f70 !important;
}

/* Rounded Action Buttons (Search & Burger Menu) */
.header-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(to right, #fe4f70, #ffa387);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(254, 79, 112, 0.15);
    transition: all 0.3s ease;
}

.header-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(254, 79, 112, 0.3);
}

/* Hamburger lines style precise */
.burger-btn-round {
    flex-direction: column;
    gap: 4px;
}
.burger-line {
    width: 16px;
    height: 2px;
    background-color: #ffffff;
    display: block;
    transition: all 0.3s ease;
}

/* Mobile responsive optimization */
@media (max-width: 992px) {
    .header-socials {
        display: none; /* Khbi social icons f tab / mobile */
    }
}


/* ==========================================================================
   CHISTA GAMING - CPA Content Box (1000045334.png)
   ========================================================================== */
   .chista-cpa-box {
    background: linear-gradient(135deg, #09031c 0%, #15093a 100%); /* Deep gradient dark purple */
    border-radius: 12px;
    padding: 25px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 35px 0;
    border: 1px solid rgba(254, 79, 112, 0.1); /* Touch khfif d neon glare */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Left components alignment */
.cpa-left-side {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* Rounded Circle Icon Container */
.cpa-icon-wrapper {
    width: 60px;
    height: 60px;
    background: rgba(254, 79, 112, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cpa-gift-icon {
    width: 28px;
    height: 28px;
    color: #fe4f70; /* Pink / Crimson neon color */
}

/* Typography alignment */
.cpa-text-content h3 {
    color: #ffffff !important;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 5px 0 !important;
    font-family: 'Poppins', sans-serif;
}

.cpa-text-content p {
    color: #a3a3c2 !important; /* Soft grey blue font text */
    font-size: 14px;
    margin: 0 !important;
    line-height: 1.5;
}

/* 4. Right Side Button - Dynamic Gradient Capsule */
.cpa-continue-btn {
    background: linear-gradient(90deg, #ec1a53 0%, #ff5e62 100%); /* Vibrant neon button */
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 35px;
    border-radius: 30px;
    text-decoration: none !important; /* No underline text */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(236, 26, 83, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.cpa-continue-btn i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

/* Hover Animation effect */
.cpa-continue-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 22px rgba(236, 26, 83, 0.5);
    opacity: 0.95;
}

.cpa-continue-btn:hover i {
    transform: translateX(3px); /* Arrow dynamic shift */
}

/* Responsive design optimized for mobile phones */
@media (max-width: 768px) {
    .chista-cpa-box {
        flex-direction: column;
        align-items: stretch;
        padding: 25px;
        text-align: center;
    }
    .cpa-left-side {
        flex-direction: column;
        gap: 15px;
    }
    .cpa-continue-btn {
        justify-content: center;
        width: 100%;
    }
}

/* ==========================================================================
   Katen Interactivity Styles (Search Overlay & Slide-out Sidebar)
   ========================================================================== */

/* --- 1. Full Screen Search Overlay --- */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(32, 54, 86, 0.98); /* Deep navy background b opacité */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Close Button d Search */
.close-search {
    position: absolute;
    top: 40px;
    right: 40px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 50px;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.3s ease;
}
.close-search:hover {
    transform: rotate(90deg);
    color: #fe4f70;
}

/* Search Form Input Container */
.search-overlay-content {
    width: 90%;
    max-width: 600px;
}

.search-overlay-content .search-form {
    display: flex;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 10px;
}

.search-overlay-content .search-field {
    width: 100%;
    background: none;
    border: none;
    font-size: 24px;
    color: #ffffff;
    outline: none;
    padding: 10px 0;
}

.search-overlay-content .search-field::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-overlay-content .search-submit-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    transition: color 0.2s ease;
}
.search-overlay-content .search-submit-btn:hover {
    color: #fe4f70;
}


/* --- 2. Slide-out Sidebar Panel --- */
.sidebar-panel {
    position: fixed;
    top: 0;
    right: -350px; /* Hidden off-screen by default */
    width: 350px;
    height: 100%;
    background: #ffffff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
    z-index: 10001;
    transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.sidebar-panel.is-open {
    right: 0; /* Slide-in dynamic */
}

/* Sidebar header style */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.sidebar-logo {
    font-size: 24px;
    font-weight: 700;
    color: #203656;
}

.sidebar-logo .logo-dot {
    color: #fe4f70;
}

.close-sidebar {
    background: none;
    border: none;
    color: #203656;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}
.close-sidebar:hover {
    color: #fe4f70;
}

.sidebar-about {
    font-size: 14px;
    color: #8f8f9d;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Blur/dark cover backgound for body */
.sidebar-overlay-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(32, 54, 86, 0.4);
    backdrop-filter: blur(3px); /* Blur elegant effect */
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-overlay-bg.is-open {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 480px) {
    .sidebar-panel {
        width: 100%;
        right: -100%;
    }
}

/* ==========================================================================
   Exact Katen Sidebar Navigation (With Dropdown Boxes)
   ========================================================================== */

/* 1. Sidebar Container Layout styling */
.sidebar-panel {
    padding: 40px 30px !important;
}

/* Close Button positioning top-right corner */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px; /* Spacing mzyan taht l-logo */
}

/* 2. Style l-Menu list items */
.sidebar-panel .site-navigation {
    margin: 30px 0;
    width: 100%;
}

.sidebar-panel .site-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Parent Li element structure */
.sidebar-panel .site-navigation li {
    width: 100%;
    position: relative;
    border-bottom: 1px solid #f6f6fb; /* Khat r9i9 o dawi identical */
    padding: 15px 0;
}

.sidebar-panel .site-navigation li:last-child {
    border-bottom: none;
}

/* 3. Parent Link Item Typography (Home, Culture...) */
.sidebar-panel .site-navigation li a {
    color: #203656 !important; /* Katen dark navy */
    font-size: 16px;
    font-weight: 500;
    text-decoration: none !important;
    display: inline-block;
    transition: color 0.2s ease;
}

/* Active or hover state d link */
.sidebar-panel .site-navigation li.current-menu-item > a,
.sidebar-panel .site-navigation li a:hover {
    color: #fe4f70 !important; /* Coral Pink/Red */
}

/* 4. Dropdown Indicator Boxes (S-shm m-froz f box) */
/* (Ila konti khdam b core WordPress, had classification kat-طبق automatic 3la dynamic menu-item-has-children) */
.sidebar-panel .site-navigation .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* S-shm box wrapper style */
.sidebar-panel .site-navigation .menu-item-has-children::after {
    content: "\f078"; /* FontAwesome chevron-down icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    color: #fe4f70; /* Target color */
    width: 34px;
    height: 34px;
    border: 1px solid #ebebeb; /* Clear light grey box border */
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* State dyal open/active chevron change code (direction up) */
.sidebar-panel .site-navigation .menu-item-has-children.is-active::after {
    content: "\f077"; /* Chevron-up direction */
    color: #fe4f70;
    border-color: #fe4f70;
}


/* 5. Submenu Style (Post Layouts, Post Formats...) */
.sidebar-panel .site-navigation ul class-sub-menu,
.sidebar-panel .site-navigation ul ul {
    display: none; /* Hide by default inside accordion */
    width: 100%;
    margin-top: 15px;
    padding-left: 20px; /* Indent l-dakhlyin */
    background: transparent;
}

/* Show open submenus */
.sidebar-panel .site-navigation .menu-item-has-children.is-active > ul {
    display: flex;
    flex-direction: column;
}

.sidebar-panel .site-navigation ul ul li {
    padding: 10px 0;
    border-bottom: none; /* No line under inner items */
}

.sidebar-panel .site-navigation ul ul li a {
    color: #707a8a !important; /* Soft steel blue font */
    font-size: 14px;
    font-weight: 400;
}

/* Hover dynamic state of inner submenu links */
.sidebar-panel .site-navigation ul ul li a:hover {
    color: #fe4f70 !important;
}

/* ==========================================================================
   Exact Sidebar Menu Design (image_c2d9c6.png)
   ========================================================================== */

/* 1. Reset sidebar background w padding */
.sidebar-panel {
    background: #ffffff !important;
    padding: 30px 24px !important;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-iyyahom f l-wost */
}

/* 2. Logo w Close button layout alignment */
.sidebar-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.sidebar-logo {
    font-size: 26px;
    font-weight: 700;
    color: #203656;
    font-family: 'Poppins', sans-serif;
}

.sidebar-logo .logo-dot {
    color: #fe4f70;
}

.close-sidebar {
    background: none;
    border: none;
    color: #203656;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* 3. Centralized Navigation Layout */
.sidebar-panel .site-navigation {
    width: 100%;
    margin: 0 auto;
}

.sidebar-panel .site-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centering ga3 l-items */
    width: 100%;
}

.sidebar-panel .site-navigation li {
    width: 100%;
    max-width: 240px; /* Limit direct width d l-khat */
    position: relative;
    border-bottom: 1px dashed #eaeaf4; /* Line dashed soft matching style */
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sidebar-panel .site-navigation li:last-child {
    border-bottom: none;
}

/* 4. Menu Links Styling */
.sidebar-panel .site-navigation li a {
    color: #203656 !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* 5. Active Link Capsule Style (Exact "Home" f sora) */
.sidebar-panel .site-navigation .current-menu-item > a {
    background: linear-gradient(135deg, #ff5e62, #ffa387) !important; /* Soft gradient rounded capsule */
    color: #ffffff !important;
    padding: 10px 30px !important;
    border-radius: 25px !important;
    box-shadow: 0 8px 20px rgba(255, 94, 98, 0.25);
    font-weight: 600;
}

/* Hover style */
.sidebar-panel .site-navigation li a:hover {
    color: #fe4f70 !important;
}

/* 6. Styled Dropdown Toggle Box (f-hal "Level 3a" arrow) */
.sidebar-panel .site-navigation .menu-item-has-children {
    position: relative;
}

/* 7. Arrow container box setup */
.sidebar-panel .site-navigation .menu-item-has-children > a {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Dropdown arrow customized box */
.sidebar-panel .site-navigation .menu-item-has-children > a::after {
    content: "▾" !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #eaeaf4; /* Border khfif swina rounded */
    border-radius: 6px;
    color: #fe4f70; /* Soft pink arrow color */
    font-size: 12px;
    background: #ffffff;
    transition: all 0.2s ease;
}

.sidebar-panel .site-navigation .menu-item-has-children > a:hover::after {
    background: #fe4f70;
    color: #ffffff;
    border-color: #fe4f70;
}

/* 8. Inner dropdown menu centering */
.sidebar-panel .site-navigation ul ul {
    margin-top: 15px;
    padding: 0;
    gap: 10px;
    display: none; /* Hide submenus, dynamic click */
}

.sidebar-panel .site-navigation ul ul li {
    border-bottom: none;
    padding: 8px 0;
}

.sidebar-panel .site-navigation ul ul a {
    font-size: 14px;
    color: #707a8a !important;
}
/* ==========================================================================
   Exact Sidebar Menu Design (Fixed & Isolated)
   ========================================================================== */

/* 1. Reset sidebar background w padding */
.sidebar-panel {
    background: #ffffff !important;
    padding: 30px 24px !important;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* 2. Logo w Close button layout alignment */
.sidebar-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.sidebar-logo {
    font-size: 26px;
    font-weight: 700;
    color: #203656;
    font-family: 'Poppins', sans-serif;
}

.sidebar-logo .logo-dot {
    color: #fe4f70;
}

.close-sidebar {
    background: none;
    border: none;
    color: #203656;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* 3. Centralized Navigation Layout (FORCED DISPLAY) */
.sidebar-panel .sidebar-navigation {
    display: block !important; /* Force to show on mobile */
    width: 100%;
    margin: 0 auto;
}

.sidebar-panel .sidebar-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex !important; /* Force flex display */
    flex-direction: column !important;
    align-items: center; 
    width: 100%;
}

.sidebar-panel .sidebar-navigation li {
    width: 100%;
    max-width: 240px; 
    position: relative;
    border-bottom: 1px dashed #eaeaf4; 
    padding: 20px 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sidebar-panel .sidebar-navigation li:last-child {
    border-bottom: none;
}

/* 4. Menu Links Styling */
.sidebar-panel .sidebar-navigation li a {
    color: #203656 !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* 5. Active Link Capsule Style */
.sidebar-panel .sidebar-navigation .current-menu-item > a {
    background: linear-gradient(135deg, #ff5e62, #ffa387) !important; 
    color: #ffffff !important;
    padding: 10px 30px !important;
    border-radius: 25px !important;
    box-shadow: 0 8px 20px rgba(255, 94, 98, 0.25);
    font-weight: 600;
}

/* Hover style */
.sidebar-panel .sidebar-navigation li a:hover {
    color: #fe4f70 !important;
}

/* 6. Styled Dropdown Toggle Box */
.sidebar-panel .sidebar-navigation .menu-item-has-children > a {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-panel .sidebar-navigation .menu-item-has-children > a::after {
    content: "▾" !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #eaeaf4; 
    border-radius: 6px;
    color: #fe4f70; 
    font-size: 12px;
    background: #ffffff;
    transition: all 0.2s ease;
}

.sidebar-panel .sidebar-navigation .menu-item-has-children > a:hover::after {
    background: #fe4f70;
    color: #ffffff;
    border-color: #fe4f70;
}

/* 7. Inner dropdown menu centering */
.sidebar-panel .sidebar-navigation ul ul {
    margin-top: 15px;
    padding: 0;
    gap: 10px;
    display: none !important; 
}

.sidebar-panel .sidebar-navigation ul ul li {
    border-bottom: none;
    padding: 8px 0;
}

.sidebar-panel .sidebar-navigation ul ul a {
    font-size: 14px;
    color: #707a8a !important;
}


/* Footer Custom Links Style */
.footer-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-copyright p {
    margin: 0;
    color: #8f9bad;
    font-size: 14px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-links ul li {
    margin: 0;
}

.footer-links ul li a {
    color: #8f9bad;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links ul li a:hover {
    color: #fe4f70; /* Lawn l-werdi d Katen */
}

/* responsive d l-menu f screens l-kbaar */
@media (min-width: 768px) {
    .footer-info {
        flex-direction: row;
        align-items: center;
        gap: 30px;
    }
}








/* --- Custom Container for 100% Match with Home --- */
.katen-main-container {
    max-width: 1170px; /* Width sghira bach l-cards mayjioch kbaar bzzaf */
    margin: 0 auto;
    padding-left: 35px;  /* Padding kbir mn l-isr */
    padding-right: 35px; /* Padding kbir mn l-imin */
    box-sizing: border-box;
}

.category-page-header {
    background: transparent;
    padding: 40px 0 20px 0;
    margin-bottom: 20px;
    text-align: left;
}

.category-archive-meta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fe4f70;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

.category-page-title {
    font-size: 30px;
    font-weight: 800;
    color: #203656;
    margin: 0;
}

/* Grid dyal l-cards */
.category-posts-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 30px; /* L-khla bin l-cards */
    margin-bottom: 50px;
}

@media (min-width: 768px) {
    .category-posts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .category-posts-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns sghar o mziptin */
    }
}

/* Rounded Cards */
.katen-post-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.katen-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(32, 54, 86, 0.08);
}

.post-card-thumbnail {
    position: relative;
    overflow: hidden;
    padding-top: 62%; /* Ratio d t-swira tji sghira o m9ada */
}

.post-card-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card-categories {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
}

.category-badge {
    background: linear-gradient(45deg, #fe4f70, #ffa385);
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 30px;
    text-decoration: none;
}

.post-card-body {
    padding: 20px; /* Padding dakhili d card sgher */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-card-meta {
    font-size: 11px;
    color: #8f9bad;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-card-title {
    font-size: 17px; /* Sghrna l-unwan d card */
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 12px 0;
}

.post-card-title a {
    color: #203656;
    text-decoration: none;
}

.post-card-title a:hover {
    color: #fe4f70;
}

.post-card-excerpt {
    color: #8f9bad;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.post-card-footer {
    margin-top: auto;
    border-top: 1px solid #f2f5fb;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8f9bad;
}

.share-btn-card {
    color: #8f9bad;
    font-size: 12px;
}

.share-btn-card:hover {
    color: #fe4f70;
}

.more-dots {
    letter-spacing: 1.5px;
    font-size: 13px;
}

/* Mobile responsive padding */
@media (max-width: 767px) {
    .katen-main-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}
/* --- Pagination Style (Katen Rounded Style) --- */
.katen-pagination {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}

.katen-pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* الفراغ بين الأرقام */
}

/* ستايل الأرقام العادية */
.katen-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border: 1px solid #eceff8;
    border-radius: 50%; /* دائرة كاملة */
    color: #203656 !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
}

/* ستايل الرقم النشط (الصحفة الحالية) وعند تمرير الماوس */
.katen-pagination .page-numbers.current,
.katen-pagination .page-numbers:hover {
    background: linear-gradient(45deg, #fe4f70, #ffa385) !important; /* الـ Gradient الوردي */
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 10px 20px rgba(254, 79, 112, 0.2);
    transform: translateY(-2px);
}
/* --- 404 Page Styling --- */
.error-404-container {
    padding: 100px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #fbfbfd; /* Background nqi bhal background d site */
    min-height: 70vh;
}

.error-404-content {
    max-width: 600px;
    width: 100%;
}

/* 404 text gradient or pink color */
.error-title {
    font-size: 130px;
    font-weight: 800;
    line-height: 1;
    margin: 0 0 10px 0;
    color: #fe4f70;
    background: linear-gradient(45deg, #fe4f70, #ffa385);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Poppins', sans-serif;
}

.error-subtitle {
    font-size: 28px;
    font-weight: 700;
    color: #203656; /* Navy color d l-posts links */
    margin-bottom: 15px;
}

.error-text {
    font-size: 16px;
    color: #8f9bad; /* Grey color dyal text f cards */
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Search Bar style in 404 */
.error-search-form {
    max-width: 450px;
    margin: 0 auto 40px auto;
}

.error-search-form .search-form {
    position: relative;
    display: flex;
    align-items: center;
}

.search-field-404 {
    width: 100%;
    padding: 15px 60px 15px 25px;
    border: 1px solid #eceff8;
    border-radius: 30px; /* Rounded corners bhal cards d site */
    font-size: 15px;
    color: #203656;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* Soft shadow bhal cards */
    outline: none;
    transition: all 0.3s ease;
}

.search-field-404:focus {
    border-color: #fe4f70;
}

.search-submit-404 {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    width: 45px;
    height: 45px;
    border: none;
    background: linear-gradient(45deg, #fe4f70, #ffa385); /* Gradient d button index.png */
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.search-submit-404:hover {
    transform: scale(1.05);
}

/* Button back to home */
.back-home-btn {
    display: inline-block;
    padding: 14px 35px;
    background: linear-gradient(45deg, #fe4f70, #ffa385); /* Same button pink gradient */
    color: #ffffff !important;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(254, 79, 112, 0.15);
    transition: all 0.3s ease;
}

.back-home-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(254, 79, 112, 0.25);
}

/* Responsive screen adjustment */
@media (max-width: 576px) {
    .error-title {
        font-size: 90px;
    }
    .error-subtitle {
        font-size: 22px;
    }
}

/* ==========================================================================
   New Elegant Page.php Card Layout (Privacy, Terms, etc.)
   ========================================================================== */

/* L-card l-kbira fin t-t-7tt l-kitaba */
.custom-page-card {
    background: #ffffff;
    border: 1px solid #eaeaf4;
    border-radius: 16px;
    padding: 50px 60px; /* Padding kafi w mri7 3l l-jnab */
    box-shadow: 0 10px 30px rgba(32, 54, 86, 0.03); /* Soft shadow elegant */
}

/* Page Title (H1) */
.custom-page-card .page-title {
    color: #203656 !important; /* Lawn navy blue */
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
}

/* Pink divider hda l-3onwan */
.custom-page-card .title-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #fe4f70, #ffa387); /* Gradient pink modern */
    margin: 0 auto;
    border-radius: 10px;
}

/* Body context styling */
.page-content-body {
    color: #707a8a; /* Soft grey blue colour */
    font-size: 16px;
    line-height: 1.8;
}

/* Spacing between paragraphs */
.page-content-body p {
    margin-bottom: 25px;
}

/* Styling dynamic h2 inside page content */
.page-content-body h2 {
    color: #203656;
    font-size: 22px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #eaeaf4;
    padding-bottom: 10px;
}

/* Bullets styling */
.page-content-body ul {
    margin-bottom: 25px;
    padding-left: 20px;
    list-style-type: none;
}

.page-content-body ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
}

/* Custom Pink bullet points */
.page-content-body ul li::before {
    content: "•";
    color: #fe4f70;
    font-size: 22px;
    position: absolute;
    left: 0;
    top: -3px;
}

/* Responsive adjustment for Mobile screens */
@media (max-width: 768px) {
    .custom-page-card {
        padding: 30px 20px; /* Spacing d l-jnab sghir f l-mobile */
    }
    .custom-page-card .page-title {
        font-size: 26px;
    }
}

.share-btn {
    
    
    color: #ffffff !important;
    border: none;
    padding: 12px 25px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    
    transition: all 0.3s ease;
}

.share-btn:hover {
    transform: translateY(-2px);
    
    
}

/* ==========================================================================
   Featured / Sticky Post Layout (CHISTA GAMING)
   ========================================================================== */

   .featured-hero-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    background: #ffffff;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

/* Kheliha horizontal f screen l-kbaat (Desktop) */
@media (min-width: 768px) {
    .featured-hero-card {
        grid-template-columns: 1.2fr 1fr;
        align-items: center;
    }
}

.featured-hero-thumb {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16/9;
}

.featured-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.featured-hero-thumb:hover img {
    transform: scale(1.05);
}

/* Category Badge f-wst sora */
.hero-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fe4f70;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.hero-badge a {
    color: #ffffff !important;
    text-transform: uppercase;
    text-decoration: none;
}

/* Content settings */
.featured-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.featured-hero-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin: 5px 0;
}

.featured-hero-title a {
    color: #203656;
    text-decoration: none;
    transition: color 0.3s ease;
}

.featured-hero-title a:hover {
    color: #fe4f70;
}

.featured-hero-excerpt {
    color: #707a8a;
    font-size: 14px;
    line-height: 1.6;
}

.read-more-link {
    color: #fe4f70;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.3s ease;
}

.read-more-link:hover {
    gap: 10px;
}

.chista-cpa-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid #fe4f70;
    border-radius: 16px;
    padding: 20px;
    margin: 30px 0;
    gap: 20px;
    box-shadow: 0 10px 25px rgba(254, 79, 112, 0.15);
}

@media (min-width: 768px) {
    .chista-cpa-box {
        flex-direction: row;
        padding: 25px;
    }
}

.cpa-left-side {
    display: flex;
    align-items: center;
    gap: 18px;
}

.cpa-icon-wrapper {
    background: rgba(254, 79, 112, 0.1);
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconPulse 2s infinite ease-in-out;
}

.cpa-gift-icon {
    width: 32px;
    height: 32px;
    stroke: #fe4f70;
}

.cpa-text-content h3 {
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.cpa-text-content p {
    color: #94a3b8;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

.cpa-continue-btn {
    background: #fe4f70;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(254, 79, 112, 0.4);
    transition: all 0.3s ease;
}

.cpa-continue-btn:hover {
    background: #ff6b85;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(254, 79, 112, 0.6);
}

.btn-arrow {
    transition: transform 0.3s ease;
}

.cpa-continue-btn:hover .btn-arrow {
    transform: translateX(4px);
}

/* Animations dyal l-clicks rate */
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); box-shadow: 0 0 15px rgba(254, 79, 112, 0.3); }
}

/* ==========================================================================
   FORTNITE ITEM SHOP INSPIRED CPA BOX
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Oswald:wght@500;700&display=swap');

   .chista-cpa-box {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       align-items: center;
       /* Background gradient dark blue/purple mixed b-hal Fortnite main lobby menu */
       background: linear-gradient(135deg, #120c1f 0%, #1a1135 50%, #0b0716 100%);
       /* Sharp borders cut slant angled design */
       border: 3px solid #f9d804; /* Yellow Legendary V-Bucks Highlight color */
       border-radius: 4px; /* Fortnite UI holds mostly sharp corners, no full roundness */
       padding: 24px;
       margin: 35px 0;
       gap: 20px;
       position: relative;
       overflow: hidden;
       /* Box shadow reflecting Fortnite cosmic energy gradient background */
       box-shadow: 0 0 25px rgba(147, 51, 234, 0.25), inset 0 0 15px rgba(249, 216, 4, 0.1);
   }
   
   /* Background diagonal accent shape lines */
   .chista-cpa-box::before {
       content: '';
       position: absolute;
       top: 0;
       left: -50%;
       width: 200%;
       height: 100%;
       background: repeating-linear-gradient(60deg, transparent, transparent 40px, rgba(147, 51, 234, 0.04) 40px, rgba(147, 51, 234, 0.04) 80px);
       z-index: 1;
       pointer-events: none;
   }
   
   @media (min-width: 768px) {
       .chista-cpa-box {
           flex-direction: row;
           padding: 25px 35px;
       }
   }
   
   .cpa-left-side {
       display: flex;
       align-items: center;
       gap: 22px;
       z-index: 2;
   }
   
   /* Iconic Epic Rarity Purple Background glow for the asset icon box */
   .cpa-icon-wrapper {
       background: radial-gradient(circle, #bc25ef 0%, #760fa3 100%);
       padding: 14px;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 2px solid #e276ff;
       box-shadow: 0 0 15px rgba(188, 37, 239, 0.6);
       transform: rotate(-3deg); /* Angled item shop presentation style */
       animation: fortniteItemFloat 3s infinite ease-in-out;
   }
   
   .cpa-gift-icon {
       width: 36px;
       height: 36px;
       stroke: #ffffff;
       filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
   }
   
   /* Texts using skewed bold fonts matching Fortnite typography style */
   .cpa-text-content h3 {
       font-family: 'Oswald', 'Bangers', sans-serif;
       color: #ffffff;
       font-size: 24px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin: 0 0 4px 0;
       text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
   }
   
   .cpa-text-content p {
       font-family: 'Oswald', sans-serif;
       color: #eadfff;
       font-size: 14px;
       font-weight: 500;
       margin: 0;
       line-height: 1.4;
   }
   
   /* CTA "CONTINUE" Button styled exactly like Fortnite Main Action "CLAIM / EQUIP" Button */
   .cpa-continue-btn {
       font-family: 'Oswald', 'Bangers', sans-serif;
       background: linear-gradient(180deg, #ffd700 0%, #f9a602 100%); /* Solid item shop gold dynamic gradient */
       color: #231200 !important; /* High contrast black/brown font color */
       text-decoration: none !important;
       padding: 14px 40px;
       border-radius: 0px; /* Zero roundness for full military style UI button edges */
       font-weight: 700;
       font-size: 20px;
       text-transform: uppercase;
       letter-spacing: 1px;
       display: inline-flex;
       align-items: center;
       gap: 10px;
       z-index: 2;
       border-bottom: 4px solid #b76b00;
       border-right: 2px solid #b76b00;
       transform: skewX(-6deg); /* Slanted gaming button theme */
       box-shadow: 0 5px 0px rgba(0, 0, 0, 0.3);
       transition: all 0.15s ease-in-out;
   }
   
   .cpa-continue-btn span {
       transform: skewX(6deg); /* Keeps text upright */
   }
   
   .cpa-continue-btn .btn-arrow {
       transform: skewX(6deg);
       transition: transform 0.2s ease;
   }
   
   /* Hover effects imitating clicking an item menu card */
   .cpa-continue-btn:hover {
       background: linear-gradient(180deg, #fff263 0%, #f9b602 100%);
       transform: skewX(-6deg) translateY(2px);
       border-bottom-width: 2px;
       box-shadow: 0 2px 0px rgba(0, 0, 0, 0.3);
   }
   
   .cpa-continue-btn:hover .btn-arrow {
       transform: skewX(6deg) translateX(4px);
   }
   
   /* Fortnite continuous floating item animation frame */
   @keyframes fortniteItemFloat {
       0%, 100% { transform: rotate(-3deg) translateY(0); }
       50% { transform: rotate(1deg) translateY(-6px); }
   }

   /* Fortnite Item Image Wrapper style instead of icon */
.cpa-image-wrapper {
    background: radial-gradient(circle, #bc25ef 0%, #760fa3 100%);
    width: 75px;
    height: 75px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e276ff;
    box-shadow: 0 0 15px rgba(188, 37, 239, 0.6);
    transform: rotate(-3deg);
    overflow: hidden; /* bach sora matsylsh 3la sndoq */
    flex-shrink: 0; /* t-7mi sora mat-comprosh f mobile */
    animation: fortniteItemFloat 3s infinite ease-in-out;
}

.cpa-custom-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* sora kat-ched l-box kamel flawlessly */
}


/* ==========================================================================
   CHISTA ARTICLES SHARE BOX STYLE 
   ========================================================================== */

   .chista-share-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin: 35px 0;
    font-family: inherit;
}

.share-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.share-icon-main {
    background: #fff1f3; /* Soft red tint */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.share-icon-main svg {
    width: 22px;
    height: 22px;
    stroke: #fe4f70; /* Coral Red matching Katen */
}

.share-title-text h3 {
    font-size: 18px;
    color: #203656;
    margin: 0 0 3px 0;
    font-weight: 700;
}

.share-title-text p {
    font-size: 13.5px;
    color: #707a8a;
    margin: 0;
}

/* Icons Network Grid Row */
.share-social-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    text-align: center;
    margin-bottom: 25px;
}

/* responsive grid layout for tiny screens */
@media (max-width: 480px) {
    .share-social-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px 5px;
    }
    .share-social-grid .share-btn:last-child {
        display: none; /* khbi l-khmsa f small space */
    }
}

.share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    gap: 8px;
    transition: transform 0.2s ease;
}

.share-btn:hover {
    transform: translateY(-3px);
}

.share-btn .icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.share-btn span {
    font-size: 12px;
    color: #707a8a;
    font-weight: 500;
}

/* Colors based on original branding brands */
.whatsapp .icon-circle { background-color: #25D366; }
.facebook .icon-circle { background-color: #1877F2; }
.twitter .icon-circle { background-color: #1DA1F2; }
.instagram .icon-circle { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.telegram .icon-circle { background-color: #0088cc; }

/* Copy Button Styling */
.share-action-row {
    width: 100%;
}

.copy-link-btn {
    width: 100%;
    border: none;
    background: linear-gradient(90deg, #fe4f70 0%, #ffa387 100%);
    color: #ffffff;
    padding: 14px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(254, 79, 112, 0.25);
    transition: all 0.3s ease;
}

.copy-link-btn:hover {
    opacity: 0.95;
    box-shadow: 0 8px 25px rgba(254, 79, 112, 0.35);
}

.btn-link-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Default Desktop layout: 5 columns */
.share-social-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    text-align: center;
    margin-bottom: 25px;
}

.telegram-more .icon-circle {
    background-color: #747d8c; /* Grey professional color for 'More' button */
}

/* Mobile Responsive Tweaks (Screens smaller than 768px) */
@media (max-width: 767px) {
    .share-social-grid {
        /* 4 columns: 3 networks + 1 more */
        grid-template-columns: repeat(4, 1fr) !important; 
        gap: 8px;
    }
    
    /* Khbi Instagram completely f mobile bach may-di3ch d-design */
    .share-social-grid .instagram {
        display: none !important;
    }
}

/* Base Desktop Grid (Show 5 icons, hide More button) */
.share-social-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    text-align: center;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.more-trigger {
    display: none !important; /* Khbiha f Desktop completely */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.more-trigger .icon-circle {
    background-color: #747d8c;
}

/* Mobile Layout Responsive (Screens smaller than 768px) */
@media (max-width: 767px) {
    .share-social-grid {
        /* Keep it 4 columns: 3 main networks + More button */
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px 8px;
    }

    /* Hide Instagram and Telegram initially on mobile */
    .share-social-grid .mobile-hidden {
        display: none !important;
    }

    /* Show the More button on mobile */
    .share-social-grid .more-trigger {
        display: flex !important;
        justify-content: center;
    }

    /* When active class is triggered via JS */
    .share-social-grid.show-all {
        grid-template-columns: repeat(3, 1fr) !important; /* Switch to clean 3x2 grid layout */
    }

    .share-social-grid.show-all .mobile-hidden {
        display: flex !important;
        animation: fadeInIcon 0.3s ease forwards;
    }

    /* Change More button color or style when active if you want */
    .share-social-grid.show-all .more-trigger .icon-circle {
        background-color: #203656;
        transform: rotate(90deg);
    }
}

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

/* ==========================================================================
   CHISTA GAMING NEW COMMENTS REGION DESIGN
   ========================================================================== */

   .chista-comments-area {
    margin: 45px 0;
    font-family: inherit;
}

/* Base Card Styles container */
.comments-section-card,
.chista-comment-form-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 24px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02);
    margin-bottom: 35px;
    border: 1px solid rgba(0, 0, 0, 0.01);
}

/* Header style for display previews */
.comments-header-main {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.comment-eye-icon {
    background: #fff1f3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-eye-icon svg {
    width: 22px;
    height: 22px;
    stroke: #fe4f70;
}

.comment-header-text h3 {
    font-size: 18px;
    color: #203656;
    margin: 0;
    font-weight: 700;
}

.comment-header-text p {
    font-size: 13px;
    color: #707a8a;
    margin: 0;
}

/* Inside single comment bubble loop styling */
.comment-list-wrapper {
    list-style: none;
    padding: 0;
    margin: 0;
}

.chista-single-comment-item {
    margin-bottom: 20px;
}

.comment-body-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #f1f5f9;
}

.comment-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    margin-bottom: 12px;
}

.comment-avatar-box img {
    border-radius: 50%;
    object-fit: cover;
    background: #e2e8f0;
}

.comment-author-info {
    display: flex;
    flex-direction: column;
}

.comment-author-name {
    font-weight: 700;
    color: #203656;
    font-size: 15px;
}

.comment-time-meta {
    font-size: 12px;
    color: #94a3b8;
}

.comment-options-dots {
    position: absolute;
    right: 0;
    top: 5px;
    color: #94a3b8;
    cursor: pointer;
    letter-spacing: 1px;
}

.comment-text-content {
    color: #475569;
    font-size: 14.5px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.comment-actions-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13.5px;
    color: #64748b;
}

.comment-actions-bar span, 
.comment-actions-bar a {
    cursor: pointer;
    text-decoration: none !important;
    color: #64748b !important;
    font-weight: 500;
}

.comment-actions-bar a:hover {
    color: #fe4f70 !important;
}

/* Form Structure design elements */
.comment-reply-title {
    font-size: 20px;
    color: #203656;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.comment-notes-desc {
    font-size: 13.5px;
    color: #707a8a;
    margin: 0 0 25px 0;
}

/* Fields & inputs formatting grid */
.comment-textarea-wrapper textarea {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 16px;
    color: #203656;
    font-size: 14.5px;
    resize: vertical;
    outline: none;
    transition: all 0.25s ease;
    margin-bottom: 15px;
}

.comment-input-wrapper {
    position: relative;
    margin-bottom: 15px;
}

.comment-input-wrapper .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.6;
}

.comment-input-wrapper input {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 30px; /* Fully pill-rounded inputs like standard image layout */
    padding: 14px 16px 14px 45px;
    color: #203656;
    font-size: 14px;
    outline: none;
    transition: all 0.25s ease;
}

.comment-textarea-wrapper textarea:focus,
.comment-input-wrapper input:focus {
    background: #ffffff;
    border-color: #fe4f70;
    box-shadow: 0 0 12px rgba(254, 79, 112, 0.08);
}

/* Cookies consent text option row */
.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 15px 0 25px 0;
}

.comment-form-cookies-consent input[type="checkbox"] {
    margin-top: 4px;
    border-radius: 4px;
    accent-color: #fe4f70;
}

.comment-form-cookies-consent label {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.4;
    cursor: pointer;
}

/* Solid red pink action trigger button */
.comment-submit-btn-solid {
    background: linear-gradient(90deg, #fe4f70 0%, #ffa387 100%);
    color: #ffffff;
    border: none;
    padding: 14px 35px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(254, 79, 112, 0.2);
    transition: all 0.3s ease;
}

.comment-submit-btn-solid:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 20px rgba(254, 79, 112, 0.35);
}
/* Realignment for the pen title icon display alignment */
.reply-title-flex {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    color: #203656;
    font-weight: 700;
}

.pen-icon-title {
    vertical-align: middle;
}

/* Time meta row tracking options adjustment */
.meta-reply-btn a {
    color: #fe4f70 !important;
    text-decoration: none !important;
    font-weight: 600;
}

/* Aligning Like and Dislike actions rows with SVGs elements */
.comment-actions-bar {
    display: flex;
    align-items: center;
    gap: 20px;
}

.action-like, .action-dislike {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.like-count {
    color: #fe4f70;
    font-weight: 600;
    font-size: 14px;
}

.action-reply-link-bottom a {
    font-size: 13.5px;
    color: #64748b !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: color 0.2s;
}

.action-reply-link-bottom a:hover {
    color: #fe4f70 !important;
}

/* ==========================================================================
   Contact Us Page Template Styling
   ========================================================================== */

   .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr 1.2fr; /* Jha d l-form kbar khfif mn jha d l-info */
    }
}

.contact-info-side h2 {
    color: #203656;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.contact-info-side p {
    color: #707a8a;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    background: #f8fafc;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #eaeaf4;
}

.info-icon {
    font-size: 24px;
    background: rgba(254, 79, 112, 0.1);
    padding: 10px;
    border-radius: 8px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-text {
    display: flex;
    flex-direction: column;
}

.info-text strong {
    color: #203656;
    font-size: 15px;
}

.info-text span {
    color: #707a8a;
    font-size: 14px;
}

/* Base style styling for form inputs dynamic generated by WordPress plugins */
.contact-form-side input[type="text"],
.contact-form-side input[type="email"],
.contact-form-side textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #eaeaf4;
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #203656;
    transition: all 0.3s ease;
}

.contact-form-side input:focus,
.contact-form-side textarea:focus {
    border-color: #fe4f70;
    outline: none;
    box-shadow: 0 0 10px rgba(254, 79, 112, 0.1);
}

.contact-form-side input[type="submit"] {
    background: #fe4f70;
    color: #ffffff;
    border: none;
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.contact-form-side input[type="submit"]:hover {
    background: #ff6b85;
}

/* Container Overlay */
.inapp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  
  /* Modal Box */
  .inapp-modal-card {
    background: #ffffff;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 28px;
    padding: 24px 18px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
  }
  
  /* Close Button */
  .inapp-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    color: #64748b;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }
  .inapp-modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
  }
  
  /* Modern Header Icon */
  .inapp-header-icon {
    display: flex;
    justify-content: center;
    margin-top: 8px;
  }
  .globe-icon-wrapper {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #3b82f6;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2);
  }
  
  /* Typography */
  .inapp-title {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    margin: 14px 0 6px;
  }
  .inapp-title span {
    color: #4f46e5;
  }
  .inapp-subtitle {
    text-align: center;
    font-size: 13px;
    color: #64748b;
    margin: 0 0 20px;
    padding: 0 12px;
    line-height: 1.4;
  }
  
  /* Steps List Layout */
  .inapp-steps-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .inapp-step-item {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: row;
    gap: 12px;
  }
  
  .inapp-step-content {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .inapp-step-num {
    background: #4f46e5;
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .inapp-step-text h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
  }
  .inapp-step-text h3 span {
    color: #4f46e5;
  }
  .inapp-step-text p {
    margin: 2px 0 0;
    font-size: 11px;
    color: #64748b;
  }
  
  /* Placeholder Container for your Images */
  .inapp-image-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #e2e8f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 110px; /* Placeholder height before image loads */
  }
  
  .inapp-step-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 12px;
  }
  
  /* Bottom Tip Styling */
  .inapp-tip-box {
    background: #f0fdf4;
    border: 1px solid #dcfce7;
    border-radius: 18px;
    padding: 12px 14px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .inapp-tip-icon {
    background: #e0e7ff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .inapp-tip-text {
    flex: 1;
    font-size: 11px;
    color: #334155;
    line-height: 1.35;
  }
  .inapp-tip-logos {
    display: flex;
    gap: 6px;
  }

  /* Container Overlay */
.inapp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  
  /* Modal Box */
  .inapp-modal-card {
    background: #ffffff;
    width: 100%;
    max-width: 380px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 24px;
    padding: 24px 18px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    text-align: center;
  }
  
  /* Close Button */
  .inapp-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    color: #64748b;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
  }
  
  /* Header Icon */
  .inapp-header-icon {
    display: flex;
    justify-content: center;
    margin-top: 6px;
  }
  .globe-icon-wrapper {
    background: #e0e7ff;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Typography */
  .inapp-title {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    margin: 12px 0 6px;
  }
  .inapp-title span {
    color: #4f46e5;
  }
  .inapp-subtitle {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 16px;
    line-height: 1.4;
  }
  
  /* GIF Media Container */
  .inapp-gif-wrapper {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .inapp-gif-media {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    object-fit: contain;
  }