/*
 * aysos.com - Mobile Responsive CSS
 * Upload to: /templates/frontend/Default/mobile.css
 */

/* =============================================
   DESKTOP SAFETY RULES (always applied, no media query)
   ============================================= */
.media_ajax_list { width: 100%; }
.media_ajax_list tbody { display: table-row-group; }
.media_ajax_list tr { display: table-row; }
.media_ajax_list td { display: table-cell !important; width: auto !important; padding: 3px !important; border-bottom: 1px solid #cfcfcf !important; vertical-align: top !important; }
.media_ajax_list td img { width: 90px !important; height: 70px !important; max-width: none !important; min-width: 90px !important; }
.media_thumb_detailed { border: 3px double #cfcfcf; margin: 0 12px 8px 0; }
div#header1 img { width: 56px !important; height: 42px !important; max-width: none !important; }

/* =============================================
   VIEWPORT & BASE
   ============================================= */
* {
  box-sizing: border-box;
}

/* Make images fluid EXCEPT fixed-size thumbnails */
img:not(.media_ajax_list td img):not(#header1 img) {
  max-width: 100%;
  height: auto;
}

/* =============================================
   HAMBURGER BUTTON (hidden on desktop)
   ============================================= */
#mobile-menu-btn {
  display: none;
  background: #333;
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 8px 14px;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
  border-radius: 4px;
  z-index: 1000;
  line-height: 1;
}

/* =============================================
   MOBILE BREAKPOINT — 768px and below
   ============================================= */
@media screen and (max-width: 768px) {

  /* --- Base layout --- */
  body {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
  }

  /* Force all fixed-width wrappers to be fluid */
  #wrapper, #container, #content,
  div[id*="wrap"], div[id*="main"] {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
  }

  /* --- Banner / logo area --- */
  #banner, #banner_content {
    width: 100% !important;
    text-align: center;
    position: relative;
    padding: 8px 4px 4px !important;
  }

  #banner_content > div[style*="float:left"] {
    float: none !important;
    display: block;
    text-align: center;
  }

  #banner_content img {
    max-width: 280px !important;
    height: auto !important;
  }

  /* Hide banner ad on mobile to save space */
  #banner_ads_right {
    display: none !important;
  }

  /* --- Top user bar --- */
  .top_user, p.top_user {
    font-size: 11px;
    padding: 4px 6px;
    text-align: center;
    line-height: 1.6;
  }

  /* --- Hamburger button --- */
  #mobile-menu-btn {
    display: block;
  }

  /* --- Navigation tabs --- */
  #tabs {
    width: 100% !important;
    position: relative;
  }

  #tabs ul {
    display: none;          /* hidden until hamburger tapped */
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #222;
  }

  #tabs ul.mobile-open {
    display: flex;
  }

  #tabs ul li {
    display: block;
    width: 100%;
    border-bottom: 1px solid #444;
  }

  #tabs ul li a {
    display: block;
    padding: 12px 16px;
    color: #fff !important;
    text-decoration: none;
    font-size: 14px;
  }

  #tabs ul li a.active,
  #tabs ul li a:hover {
    background: #555;
  }

  #tabs ul li a span {
    display: inline;
  }

  /* --- Tab end / sort bar --- */
  #tab_end {
    font-size: 12px;
    padding: 6px 4px;
    line-height: 2;
    text-align: center;
  }

  #tab_end a {
    display: inline-block;
    margin: 2px 3px;
  }

  /* --- Layout tables only — make them stack.
       Scoped to known layout containers so thumbnail
       grid tables are NOT affected. --- */
  #content > table,
  #content > table > tbody > tr,
  #content > table > tr,
  table[cellpadding='0'][cellspacing='0'] > tbody > tr,
  table[cellpadding='0'][cellspacing='0'] > tr {
    display: block !important;
    width: 100% !important;
  }

  /* Only block-ify td's inside the outer layout table,
     not inside #header1 (featured thumbs) or media grids */
  #content > table td,
  table[cellpadding='0'][cellspacing='0'] > tbody > tr > td,
  table[cellpadding='0'][cellspacing='0'] > tr > td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 4px 2px !important;
  }

  /* Restore thumbnail tables inside #header1 — never stack these */
  #header1 table, #header1 tr, #header1 td,
  #header1 tbody {
    display: inline !important;
    width: auto !important;
  }

  /* Restore .media_ajax_list — ajax thumbnail rows must stay as table cells */
  .media_ajax_list,
  .media_ajax_list tbody,
  .media_ajax_list tr {
    display: table !important;
    width: 100% !important;
  }

  .media_ajax_list td {
    display: table-cell !important;
    width: auto !important;
    padding: 3px !important;
    border-bottom: 1px solid #cfcfcf !important;
    vertical-align: top !important;
  }

  /* Keep ajax thumbnail images at their original size */
  .media_ajax_list td img {
    width: 90px !important;
    height: 70px !important;
  }

  /* --- Featured thumbnails strip --- */
  #header1 {
    text-align: center;
    padding: 4px 0;
  }

  #header1 img {
    width: 56px !important;
    height: 42px !important;
  }

  /* --- Media grid items --- */
  .media_thumb_detailed {
    max-width: 100% !important;
    height: auto !important;
  }

  /* --- Left sidebar: hide on mobile --- */
  #left_menu, #lnav, td#left_menu,
  td[id*="left"], td[id*="sidebar"] {
    display: none !important;
  }

  /* --- Content column: full width --- */
  td#main_content, td[id*="content"],
  #main_content {
    width: 100% !important;
    padding: 4px !important;
  }

  /* --- Popular tags: wrap nicely --- */
  #pop_tags, .pop_tags {
    word-break: break-word;
    line-height: 2;
  }

  /* --- Footer tables --- */
  #footer table, #footer tr, #footer td {
    display: block !important;
    width: 100% !important;
    text-align: center;
    padding: 4px 0;
  }

  /* --- Search box --- */
  input[name="search_term"],
  input[type="text"],
  input[type="search"] {
    max-width: 100%;
    width: 100% !important;
  }

  /* --- Pagination links --- */
  .pagination, #pagination {
    text-align: center;
    font-size: 13px;
    line-height: 2.2;
  }

  /* --- Index tabs (Latest / Most Viewed etc.) --- */
  #index_tabs, .index_tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
  }
}

/* =============================================
   SMALL PHONES — 480px and below
   ============================================= */
@media screen and (max-width: 480px) {

  #banner_content img {
    max-width: 220px !important;
  }

  #header1 img {
    width: 46px !important;
    height: 35px !important;
  }

  .top_user, p.top_user {
    font-size: 10px;
  }

  #tab_end {
    font-size: 11px;
  }
}