/* Mobile Responsive CSS - Ana Sayfa ve Modal */

/* ===== ANA SAYFA MOBİL CSS ===== */

/* Sol Panel Mobil Fix */
@media screen and (max-width: 768px) {
  #left-panel {
    display: none !important;
  }
  
  .ui-panel-dismiss-open {
    display: none !important;
  }
  
  /* Ana içerik tam genişlik */
  #content,
  .toto_landint_container {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* Header ve Navigation */
@media screen and (max-width: 350px) {
  #header .txt { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #menu-right .txt { max-width: 90px; }
  .LogoMobilePlatform { background-image: var(--cdn-logo-mob_gif); }
}

@media screen and (max-width: 360px) {
  #accountemail { max-width: 148px; }
  .LogoMobilePlatform { width: 90px; height: 32px; }
  .cookiePopup_txt { font-size: 13px; margin-bottom: 10px; }
  .cookiePopup-btn { max-width: 140px; padding: 5px; height: 28px; font-size: 13px; }
}

@media screen and (max-width: 374px) {
  #left-panel { width: 260px; }
  .ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
  .ui-panel-animate.ui-panel-position-left.ui-panel-display-push { 
    transform: translate3d(-260px, 0px, 0px); 
  }
}

@media screen and (max-width: 375px) {
  .free_spin__line > div { font-size: 3.4vw; }
}

@media screen and (max-width: 400px) {
  #menu-right .txt { max-width: 115px; }
  .header_gif_block.logged .header_gif { margin: 0px 1px; }
  .header_gif_block.logged .header_gif img { height: 35px; }
}

@media only screen and (max-width: 450px) {
  .table-wrapper { width: 280px; overflow-x: scroll; }
}

@media screen and (max-width: 470px) {
  #menu-right .txt { max-width: 150px; }
}

@media screen and (max-width: 490px) {
  #playername { display: none !important; }
  .home-description { max-width: 160px; }
  .inboxtitle { width: 120px; }
  .tgresol { margin-left: 51px !important; }
}

@media screen and (max-width: 580px) {
  .join-popup { width: 85%; }
}

/* Games ve Content */
@media screen and (max-width: 700px) {
  .second_cont { flex-direction: column; width: 100%; }
  .promo_img { max-width: 650px; }
  .tl_prom_filters { margin: 2px 5px; }
}

@media (max-width: 767px) {
  .game-card .game-card__transition .play { font-size: calc(10.9px + 1.59375vw); }
}

@media (max-width: 768px) {
  #rb23-quick-action { left: 20px; bottom: calc(var(--cwNavbarBottomHeight) + 26px); }
}

@media only screen and (max-width: 799px) {
  .games li { 
    text-align: center; 
    width: 45%; 
    min-width: 45%; 
    display: inline-block; 
    float: none; 
  }
  #content { padding: 10px; }
  .list-menu li a i { display: none; }
  .list-menu li a strong { margin-top: 6px; }
}

@media screen and (max-width: 799px) {
  .games li { width: 50%; min-width: 50%; float: left; }
}

@media screen and (max-width: 991px) {
  .bonuses_v1--lobby-wrapper .tournament__games-grid { 
    margin-top: 12px; 
    gap: 4px; 
    grid-template-columns: 1fr 1fr; 
  }
}

/* Fixed Menu */
@media (max-width: 350px) {
  .fixed_menu__li .fixed_menu__text { line-height: 1.2; }
}

@media screen and (max-width: 373px) {
  .nc__heading { font-size: 17px; }
  .games_filter_popup .switcher_label { font-size: 13px; }
}

@media screen and (max-width: 380px) {
  #gameHistory.fixed_menu__li { min-width: 78px; }
}

/* Search */
@media (max-width: 350px) {
  .lca-search-result-title { font-size: 17px; }
}

/* Page Not Found */
@media (max-width: 340px) {
  .page_not_found img { width: 200px; }
}

/* Balance Switcher */
@media only screen and (max-width: 360px) {
  .balance-switcher .info-text { max-width: 220px; }
}

/* ===== MODAL VE ÖDEME YÖNTEMLERİ ===== */

/* Tablet and below */
@media screen and (max-width: 1024px) {
    #depositModal {
        width: 95% !important;
        max-width: 95% !important;
        left: 2.5% !important;
        right: 2.5% !important;
    }
    
    .tl_my_acc_cont {
        flex-direction: column !important;
    }
    
    .tl_my_acc_cont_nav {
        width: 100% !important;
        display: flex;
        overflow-x: auto;
        border-right: none !important;
        border-bottom: 1px solid #000;
    }
    
    .tl_my_acc_nav_item,
    .tl_my_acc_nav_itemsp {
        min-width: 120px;
        text-align: center;
        white-space: nowrap;
    }
}

/* Mobile - Large */
@media screen and (max-width: 768px) {
    #depositModal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
    }
    
    .tl_my_acc_cont_content {
        padding: 16px 0 !important;
    }
    
    .tl_payment_block {
        margin-bottom: 10px;
    }
    
    .tl_payment_head {
        flex-wrap: wrap;
        padding: 12px !important;
    }
    
    .tl_payment_col {
        width: 100% !important;
        margin-bottom: 8px;
    }
    
    .tl_icon_col {
        width: 40px !important;
        margin-right: 10px;
    }
    
    .tl_icon_col > div {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }
    
    .tl_desc_col {
        flex: 1;
    }
    
    .tl_info_col,
    .tl_min_max_col {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .tl_payment_body {
        padding: 12px !important;
    }
    
    .methods {
        flex-direction: column !important;
    }
    
    .tl_payment_padd {
        width: 100% !important;
        padding: 8px 0 !important;
    }
    
    /* IBAN Box Mobile */
    .tl_payment_body strong {
        font-size: 13px !important;
        word-break: break-all;
    }
    
    .tl_deposit_button {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
    }
}

/* Mobile - Medium */
@media screen and (max-width: 480px) {
    .tl_my_acc_nav_item,
    .tl_my_acc_nav_itemsp {
        min-width: 100px;
        font-size: 13px;
        padding: 12px 8px;
    }
    
    .tl_payment_desc p {
        font-size: 14px;
    }
    
    .tl_min_max {
        font-size: 12px;
    }
    
    .tl_input_popup {
        font-size: 16px !important;
        padding: 10px !important;
    }
    
    /* Crypto address mobile */
    .tl_payment_body strong {
        font-size: 11px !important;
        letter-spacing: 0.3px !important;
    }
    
    .btnSec {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

/* Mobile - Small */
@media screen and (max-width: 375px) {
    .tl_my_acc_nav_item,
    .tl_my_acc_nav_itemsp {
        min-width: 90px;
        font-size: 12px;
        padding: 10px 6px;
    }
    
    .tl_payment_head {
        padding: 10px !important;
    }
    
    .tl_icon_col > div {
        width: 35px !important;
        height: 35px !important;
        font-size: 12px !important;
    }
    
    .tl_payment_desc p {
        font-size: 13px;
    }
    
    .tl_info_link {
        font-size: 11px;
    }
    
    .tl_payment_body strong {
        font-size: 10px !important;
    }
}

/* Mobile - Extra Small */
@media screen and (max-width: 350px) {
    .tl_my_acc_nav_item,
    .tl_my_acc_nav_itemsp {
        min-width: 80px;
        font-size: 11px;
        padding: 8px 4px;
    }
    
    .tl_payment_desc p {
        font-size: 12px;
    }
    
    .tl_min_max_value {
        font-size: 11px;
    }
    
    .tl_deposit_button {
        font-size: 14px !important;
        padding: 10px !important;
    }
}

/* Landscape mode fixes */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #depositModal {
        height: 100vh !important;
        overflow-y: auto !important;
    }
    
    .tl_my_acc_cont_nav {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #222907;
    }
}

/* Fix for very small screens */
@media screen and (max-width: 320px) {
    .tl_payment_head {
        font-size: 11px;
    }
    
    .tl_icon_col > div {
        width: 30px !important;
        height: 30px !important;
        font-size: 11px !important;
    }
    
    .btnSec {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}