/* ============================================================
   responsive.css — 123flashchat.gr
   Strictly inside media queries — desktop αμετάβλητο
   ============================================================ */

/* ==========================================================
   TABLET: 769px – 990px
   ========================================================== */
@media screen and (max-width: 990px) {

    html, body { overflow-x: hidden; }

    #header_head, #keyword_head, .menubar,
    #nav_optimize_head, .nav_path_bar, #body,
    .bigbanner, section.home_main, .jiew_optimize2,
    #luj_optimize, #line2_optimize, #line2_optimize_new, #jiew_optimize {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .bigbanner {
        height: auto !important;
        background-size: cover !important;
    }

    img { max-width: 100%; height: auto; }
}

/* ==========================================================
   MOBILE: έως 768px
   ========================================================== */
@media screen and (max-width: 768px) {

    /* ---- HEADER ---- */
    #header_head {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    #logo_head {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        display: block;
        text-align: center;
        padding: 10px 0;
    }

    #logo_head img {
        height: 60px !important;
        width: auto !important;
        max-width: 100%;
    }

    #keyword_head {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        display: block;
    }

    #menu_head {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        text-align: center;
    }

    #menu_head .contect,
    #menu_head .livehelp-menu { display: none !important; }

    /* ---- SEARCH ---- */
    .menubar {
        width: 100% !important;
        height: auto !important;
    }

    #search_head {
        width: 100% !important;
        float: none !important;
        display: block;
        padding: 6px 10px;
        box-sizing: border-box;
    }

    #browser_head { width: 100% !important; }

    /* ---- NAVIGATION ---- */
    #nav_optimize_head {
        width: 100% !important;
        display: block;
        overflow: visible;
        box-sizing: border-box;
    }

    /* Top-level nav items */
    #nav_optimize_head > li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        border-bottom: 1px solid #bbb;
        position: relative;
        box-sizing: border-box;
    }

    /* Top-level nav links — uniform style */
    #nav_optimize_head > li > a {
        display: block !important;
        width: 100% !important;
        padding: 11px 16px !important;
        font-size: 14px !important;
        font-weight: bold !important;
        line-height: 1.4 !important;
        color: #fff !important;
        background: #2b8fc9 !important;
        text-decoration: none !important;
        box-sizing: border-box;
    }

    #nav_optimize_head > li > a:hover {
        background: #1a6fa0 !important;
    }

    /* Dropdown UL — always visible on mobile, full width */
    #nav_optimize_head li ul {
        position: static !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #f0f4f8 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        box-sizing: border-box;
    }

    /* Dropdown LI */
    #nav_optimize_head li ul > li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        border-bottom: 1px solid #ddd !important;
        box-sizing: border-box;
    }

    /* Dropdown links */
    #nav_optimize_head li ul > li > a {
        display: block !important;
        width: 100% !important;
        padding: 9px 20px !important;
        font-size: 13px !important;
        font-weight: normal !important;
        color: #333 !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
        background: transparent !important;
        box-sizing: border-box;
    }

    #nav_optimize_head li ul > li > a:hover {
        background: #e0ecf5 !important;
        color: #1a6fa0 !important;
    }

    /* ---- BANNER ---- */
    .bigbanner {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        background-size: cover !important;
        display: block;
        box-sizing: border-box;
    }

    .bigbanner .version { display: none !important; }

    .banner_link {
        width: 100% !important;
        float: none !important;
        padding: 20px 15px !important;
        box-sizing: border-box;
    }

    .banner_link h3.big  { font-size: 22px !important; line-height: 1.3 !important; }
    .banner_link h3.small { font-size: 16px !important; padding-top: 8px !important; }

    /* Banner demo image div (inline margin-left:405px) */
    .bigbanner > div[style*="margin-left"] {
        margin-left: 0 !important;
        padding-top: 10px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .bigbanner > div[style*="margin-left"] img {
        max-width: 100% !important;
        height: auto !important;
        width: 100% !important;
    }

    /* ---- MAIN 2-COLUMN → 1 COLUMN ---- */
    section.home_main {
        width: 100% !important;
        display: block !important;
    }

    article.home_article.left {
        width: 100% !important;
        float: none !important;
        display: block;
        box-sizing: border-box;
    }

    section.article_right.right {
        width: 100% !important;
        float: none !important;
        display: block;
        margin-top: 15px;
        box-sizing: border-box;
    }

    /* Chat detail area */
    .home_main .home_article .chat_detail {
        height: auto !important;
        background-size: cover !important;
        position: relative;
    }

    .home_main .home_article .chat_detail .chat_info {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 15px !important;
        box-sizing: border-box;
        background: rgba(255,255,255,0.93) !important;
        height: auto !important;
    }

    /* ---- SIDEBAR CONTENT (full width) ---- */
    .tiao_new_optimize {
        width: 100% !important;
        box-sizing: border-box;
    }

    .tiao_new_optimize > a[style*="float"] {
        float: none !important;
        display: none !important; /* κρύβω το τεράστιο RSS image */
    }

    .di_new {
        width: 100% !important;
        box-sizing: border-box;
    }

    .di_new table {
        width: 100% !important;
    }

    .customer,
    .customer img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Block-level divs inside article_right */
    section.article_right > div {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* ---- AWARDS / FEATURES halves ---- */
    .feature_award { width: 100% !important; }

    .half_chat.left,
    .half_chat.right {
        width: 100% !important;
        float: none !important;
        display: block;
        margin-bottom: 15px;
        box-sizing: border-box;
    }

    /* Quotes */
    .quote.left, .quote.right {
        width: 100% !important;
        float: none !important;
        display: block;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    /* ---- DECORATIVE BARS ---- */
    .nav_path_bar,
    #luj_optimize, #jiew_optimize,
    #line2_optimize, #line2_optimize_new {
        width: 100% !important;
        background-size: cover !important;
        box-sizing: border-box;
    }

    #line2_optimize_new h1 {
        width: 100% !important;
        float: none !important;
    }

    .flag { width: 100% !important; float: none !important; }

    /* ---- FOOTER ---- */
    .jiew_optimize2 {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box;
    }

    .jiew_optimize2 .sharelib span {
        float: none !important;
        display: block;
        margin-bottom: 5px;
    }

    /* ---- GENERIC ---- */
    img { max-width: 100%; height: auto; }

    table { width: 100% !important; }
    td, th { word-break: break-word; }

    /* Inline style overrides */
    div[style*="margin-left:405"] { margin-left: 0 !important; }
    div[style*="width:990"], div[style*="width: 990"] { width: 100% !important; }
    div[style*="width:776"], div[style*="width: 776"] { width: 100% !important; }
}

/* ==========================================================
   SMALL MOBILE: έως 480px
   ========================================================== */
@media screen and (max-width: 480px) {

    #logo_head img { height: 50px !important; }

    .banner_link h3.big  { font-size: 18px !important; }
    .banner_link h3.small { font-size: 14px !important; }

    /* CMS logos — 2 ανά γραμμή */
    .joomlachatcms, .skadatechatcms, .vbbchatcms,
    .jomsocialchatcms, .phpchatchatcms, .dnnchatcms,
    .phpfoxchatcms, .drupalchatcms, .phpbbchatcms,
    .datingchatcms, .ipbchatcms, .wpchatcms {
        display: inline-block !important;
        width: 47% !important;
        float: none !important;
        vertical-align: top;
    }
}