/**
 * DiMA database — lightweight mobile layout + hamburger theme
 * Stacks filter bars, enlarges tap targets, scrolls wide result tables,
 * and replaces the cramped top nav with a hamburger drawer on small screens.
 * Desktop layout unchanged above the breakpoint.
 */

/* Hidden on desktop; shown in the mobile media query below */
.dima-mnav {
  display: none;
}

@media screen and (max-width: 768px) {
  /* Keep page from forcing horizontal scroll; tables scroll inside wrappers */
  body.DiMAPageBODY,
  body.vb-page,
  .l-content,
  .main-content-wrapper,
  #content,
  .site-content {
    max-width: 100% !important;
    overflow-x: hidden;
  }

  html.dima-mnav-lock,
  html.dima-mnav-lock body {
    overflow: hidden;
  }

  /* ----- Hamburger theme ----- */
  .dima-mnav {
    display: block;
    position: sticky;
    top: 0;
    z-index: 10050;
    background: #1a1a1a;
    border-bottom: 3px solid #800000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .dima-mnav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 6px 12px;
    box-sizing: border-box;
  }

  .dima-mnav__brand {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
  }

  .dima-mnav__brand img {
    display: block;
    height: 36px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
  }

  .dima-mnav__toggle {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #555;
    border-radius: 4px;
    background: #2a2a2a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dima-mnav__burger,
  .dima-mnav__burger::before,
  .dima-mnav__burger::after {
    display: block;
    width: 20px;
    height: 2px;
    background: #f2f2f2;
    border-radius: 1px;
    position: relative;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

  .dima-mnav__burger::before,
  .dima-mnav__burger::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .dima-mnav__burger::before {
    top: -6px;
  }

  .dima-mnav__burger::after {
    top: 6px;
  }

  .dima-mnav--open .dima-mnav__burger {
    background: transparent;
  }

  .dima-mnav--open .dima-mnav__burger::before {
    top: 0;
    transform: rotate(45deg);
  }

  .dima-mnav--open .dima-mnav__burger::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .dima-mnav__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10060;
  }

  .dima-mnav__panel {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 88vw);
    z-index: 10070;
    background: #f7f7f7;
    border-left: 1px solid #aaaaaa;
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 64px 0 24px;
    box-sizing: border-box;
  }

  /* Only show drawer when explicitly opened (don't rely on [hidden] — VB CSS can override it) */
  .dima-mnav--open .dima-mnav__backdrop,
  .dima-mnav--open .dima-mnav__panel {
    display: block !important;
  }

  .dima-mnav__user {
    margin: 0 16px 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #cccccc;
    font: 13px/1.4 Verdana, Arial, sans-serif;
    color: #333;
  }

  .dima-mnav__label {
    margin: 14px 16px 6px;
    font: 700 11px/1.2 Verdana, Arial, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #800000;
  }

  .dima-mnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .dima-mnav__list > li > a {
    display: block;
    padding: 12px 16px;
    min-height: 44px;
    box-sizing: border-box;
    font: 15px/1.3 Verdana, Arial, sans-serif;
    color: #222222 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #e2e2e2;
    background: #ffffff;
  }

  .dima-mnav__list > li > a:active,
  .dima-mnav__list > li > a:hover {
    background: #eeeeee;
    color: #800000 !important;
  }

  .dima-mnav__list--row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 16px 8px;
  }

  .dima-mnav__list--row > li {
    flex: 1 1 calc(50% - 8px);
  }

  .dima-mnav__list--row > li > a {
    text-align: center;
    border: 1px solid #cccccc;
    border-radius: 4px;
    min-height: 40px;
    padding: 10px 8px;
  }

  /* Collapse noisy desktop chrome while the mobile bar is active */
  #header-axd,
  #header .site-logo,
  #header .toolbar,
  #channel-tabbar,
  #channel-subtabbar {
    display: none !important;
  }

  .b-top-background__header-mainnav-subnav,
  .b-top-background__header-mainnav,
  #header {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* ----- Section tabs (Quick / Advanced / Trade / Want / Submit) ----- */
  .tabs.settingsTabs,
  div.tabs.settingsTabs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 4px 12px !important;
    box-sizing: border-box;
  }

  .tabs.settingsTabs > a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    flex: 1 1 calc(50% - 8px);
    min-height: 44px;
    margin: 0 !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
    text-align: left !important;
    font-size: 14px !important;
  }

  .tabs.settingsTabs > a img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  /* ----- Filter / sort forms: stack controls ----- */
  form.niceform > table.DiMAFormTABLE,
  form[name="db"] > table.DiMAFormTABLE,
  form[name="sorter"] > table.DiMAFormTABLE {
    display: block;
    width: 100% !important;
    border: 0 !important;
  }

  form.niceform > table.DiMAFormTABLE > tbody,
  form[name="db"] > table.DiMAFormTABLE > tbody,
  form[name="sorter"] > table.DiMAFormTABLE > tbody,
  form.niceform > table.DiMAFormTABLE > tr,
  form[name="db"] > table.DiMAFormTABLE > tr,
  form[name="sorter"] > table.DiMAFormTABLE > tr {
    display: block;
    width: 100%;
  }

  form.niceform > table.DiMAFormTABLE > tbody > tr > td,
  form[name="db"] > table.DiMAFormTABLE > tbody > tr > td,
  form[name="sorter"] > table.DiMAFormTABLE > tbody > tr > td,
  form.niceform > table.DiMAFormTABLE td,
  form[name="db"] > table.DiMAFormTABLE td,
  form[name="sorter"] > table.DiMAFormTABLE td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 6px 4px !important;
    text-align: left !important;
    white-space: normal !important;
  }

  form.niceform select,
  form[name="db"] select,
  form[name="sorter"] select,
  form.niceform input[type="text"],
  form[name="db"] input[type="text"],
  form[name="sorter"] input[type="text"],
  form.niceform input.DiMAInput,
  form[name="db"] input.DiMAInput,
  form[name="sorter"] input.DiMAInput,
  form.niceform .inputbg,
  form[name="db"] .inputbg,
  form[name="sorter"] .inputbg {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px;
    box-sizing: border-box;
    font-size: 16px !important; /* avoids iOS focus zoom */
    padding: 8px 10px !important;
    line-height: 1.3 !important;
  }

  form.niceform input[type="submit"],
  form.niceform input.DiMAButton,
  form[name="db"] input[type="submit"],
  form[name="db"] input.DiMAButton,
  form[name="sorter"] input[type="submit"],
  form[name="sorter"] input.DiMAButton,
  form.niceform .DiMAButton,
  form[name="db"] .DiMAButton {
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    box-sizing: border-box;
    font-size: 16px !important;
    padding: 10px 14px !important;
    margin-top: 4px;
  }

  /* Part# suggest dropdown stays full width under the field */
  #search_suggest {
    left: 4px !important;
    right: 4px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* ----- Result lists: swipe/scroll horizontally ----- */
  #search-results,
  #advanced-results,
  #wantsearch-results,
  #tradesearch-results,
  #collect-results,
  #want-results {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin: 0 0 12px;
    padding-bottom: 4px;
    position: relative;
  }

  #search-results > table.DiMAFormTABLE,
  #advanced-results > table.DiMAFormTABLE,
  #wantsearch-results > table.DiMAFormTABLE,
  #tradesearch-results > table.DiMAFormTABLE,
  #collect-results > table.DiMAFormTABLE,
  #want-results > table.DiMAFormTABLE,
  #search-results table.DiMAFormTABLE,
  #advanced-results table.DiMAFormTABLE,
  #wantsearch-results table.DiMAFormTABLE,
  #tradesearch-results table.DiMAFormTABLE {
    min-width: 560px;
  }

  /* Fixed 450px detail cards were spilling as white “floating” panels on iPhone */
  #search-results .imgbox,
  #advanced-results .imgbox,
  #wantsearch-results .imgbox,
  #tradesearch-results .imgbox,
  #collect-results .imgbox,
  #want-results .imgbox,
  .imgbox {
    width: 100% !important;
    max-width: 260px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding: 4px !important;
  }

  #search-results table.AirlineTABLE,
  #advanced-results table.AirlineTABLE,
  #wantsearch-results table.AirlineTABLE,
  #tradesearch-results table.AirlineTABLE {
    width: 100% !important;
    max-width: 260px !important;
  }

  #search-results td[width],
  #advanced-results td[width],
  #wantsearch-results td[width],
  #tradesearch-results td[width] {
    width: auto !important;
  }

  #search-results .DiMADataTD,
  #advanced-results .DiMADataTD,
  #wantsearch-results .DiMADataTD,
  #tradesearch-results .DiMADataTD {
    vertical-align: top !important;
  }

  /* Header / pager rows inside results: allow wrapping where possible */
  #search-results .DiMAFooterTD,
  #advanced-results .DiMAFooterTD,
  #wantsearch-results .DiMAFooterTD,
  #tradesearch-results .DiMAFooterTD,
  #collect-results .DiMAFooterTD,
  #want-results .DiMAFooterTD {
    white-space: normal !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  #search-results .DiMANavigatorLink,
  #advanced-results .DiMANavigatorLink,
  #wantsearch-results .DiMANavigatorLink,
  #tradesearch-results .DiMANavigatorLink,
  #collect-results .DiMANavigatorLink,
  #want-results .DiMANavigatorLink,
  a.DiMANavigatorLink {
    display: inline-block;
    min-width: 36px;
    min-height: 36px;
    line-height: 36px;
    text-align: center;
    padding: 4px 8px;
    box-sizing: border-box;
  }

  /* Loading overlay panel a bit larger / readable on phones */
  .dima-ajax-loading-panel {
    width: min(260px, 80vw) !important;
    font-size: 14px !important;
  }

  /* Photo column + kill hover-zoom .large imgs (they paint off-screen on touch) */
  #picture,
  #search-results #picture,
  #advanced-results #picture {
    width: 92px !important;
    max-width: 92px !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  #picture:hover {
    z-index: 1 !important;
  }

  #picture a.small,
  #picture a.small:visited {
    width: auto !important;
    max-width: 92px !important;
    overflow: hidden !important;
  }

  #picture a img:not(.large) {
    max-width: 88px !important;
    height: auto !important;
  }

  #picture a .large,
  #picture a.small .large,
  #picture a.small:hover .large,
  a.small .large {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
  }

  /* ----- Model detail page (/model/ID) ----- */
  .dima-model-page,
  .dima-model-page #canvas-layout-30-70,
  .dima-model-page .canvas-layout-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .dima-model-page .dima-model-layout,
  .dima-model-page .canvas-layout-row.has-columns {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Main specs/photos first; sidebar (logos / collection) below */
  .dima-model-page .dima-model-main,
  .dima-model-page .section-1.span8 {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  .dima-model-page .dima-model-sidebar,
  .dima-model-page .section-0.span4 {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 12px 0 0 !important;
    box-sizing: border-box !important;
  }

  .dima-model-page .left-nav,
  .dima-model-page .nav-pane {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .dima-model-page .widget-content {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    box-sizing: border-box !important;
    position: static !important;
    display: block !important;
  }

  /* Absolute eBay/retailer column was overlaying the page */
  .dima-model-page .dima-model-aside {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 !important;
  }

  .dima-model-page h2.main-pane-header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .dima-model-page .private-message-toolbar center > span {
    font-size: 15px !important;
    line-height: 1.35 !important;
    display: block;
    padding: 0 8px;
  }

  /* Specs grid: wrap into readable pairs */
  .dima-model-page .main-pane-container > center > table {
    width: 100% !important;
    max-width: 100% !important;
  }

  .dima-model-page .main-pane-container > center > table > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .dima-model-page .main-pane-container > center > table > tbody > tr > td {
    flex: 1 1 46%;
    min-width: 42%;
    box-sizing: border-box;
    padding: 6px 8px !important;
    text-align: left !important;
    font-size: 13px !important;
    word-break: break-word;
  }

  .dima-model-page .main-pane-container > center > table > tbody > tr > td[colspan] {
    flex: 1 1 100%;
  }

  .dima-model-page iframe {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dima-model-page iframe[src*="galleria"] {
    height: 260px !important;
  }

  .dima-model-page iframe[src*="modelinfo-collect"],
  .dima-model-page iframe[src*="value.php"] {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto;
    display: block;
  }

  .dima-model-page .imgbox,
  .dima-model-page img.imgbox {
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Bottom eBay / graphs strip was a fixed 550px + side-by-side */
  .dima-model-page table[width="100%%"],
  .dima-model-page table[width="100%"] {
    width: 100% !important;
  }

  .dima-model-page table[width="100%%"] > tbody > tr,
  .dima-model-page table[width="100%"] > tbody > tr {
    display: flex;
    flex-direction: column;
  }

  .dima-model-page table[width="100%%"] > tbody > tr > td,
  .dima-model-page table[width="100%"] > tbody > tr > td,
  .dima-model-page table[width="100%%"] td[width="550"],
  .dima-model-page td[width="550"] {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .dima-model-page .adsbygoogle {
    max-width: 100% !important;
  }
}