/* EzeePrinting mobile homepage test: index-v.php only.
   Desktop styling is inherited from css/style.css.
   This stylesheet is loaded only by the test page. */
.mobile-category-toggle { display: none; }

@media screen and (max-width: 767px) {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; max-width: 100%; }
  body { font-size: 14px; line-height: 1.5; overflow-wrap: break-word; }
  #container, #wrapper, #header-cnt, #nav-cnt, #data-box, #footer-cnt {
    width: 100%; max-width: 100%; height: auto;
  }
  #wrapper { margin: 0; }
  img, video { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }

  /* Header: keep logo, account links and banner */
  #header-cnt {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 12px 10px; background: #fff;
  }
  .logo { float: none; width: auto; height: auto; }
  .logo img { width: auto; max-width: min(220px, 100%); height: auto; }
  .top-links { float: none; margin: 0; text-align: center; }
  .custom-printing { float: none; width: 100%; margin: 0; text-align: center; }
  .custom-printing img { max-width: 100%; }

  /* Top navigation: simple wrapping links, account links remain above */
  #nav-cnt { padding: 8px 10px; background: #333; }
  .top-navigtion { display: block; }
  .top-navigtion ul {
    float: none; display: flex; flex-wrap: wrap;
    justify-content: center; gap: 6px; margin: 0; padding: 0;
  }
  .top-navigtion li {
    display: block; background: none; padding: 5px 7px;
  }
  .top-navigtion li a { color: #fff; font-size: 13px; }
  /* Desktop-style inline login table does not fit a phone.
     Login/Register remain available through the header links. */
  .login-box { display: none; }

  /* Flex order of actual sidebar elements, no shared PHP edits */
  #data-box {
    display: flex; flex-direction: column; gap: 12px;
    padding: 12px; min-width: 0;
  }
  .data-box-left { display: contents; }
  .data-box-left > .spacer { display: none; }
  .data-box-left > .clear { display: none; }
  .data-box-left > .product-nav-head,
  .data-box-left > .product-nav-btm { display: none; }

  /* Search bar first */
  .search-product {
    order: 1; float: none; width: 100%; height: auto;
    padding: 10px; background: #f4f6f8;
    border: 1px solid #ddd; border-radius: 8px;
  }
  .search-input-box { margin: 0; }
  .search-input-box form, .search-input-box table { width: 100%; }
  .search-input-box .input-form {
    width: 100%; height: 38px; padding: 7px;
    border: 1px solid #ccc; background: #fff;
  }
  .search-input-box input[type="image"] { max-width: 40px; height: auto; }

  /* Clickable category dropdown */
  .mobile-category-toggle {
    order: 2; display: flex; align-items: center;
    justify-content: space-between; gap: 10px;
    width: 100%; min-height: 46px; padding: 11px 14px;
    border: 0; border-radius: 7px; background: #0f5f87;
    color: #fff; font: 700 14px Arial, sans-serif;
    text-align: left; cursor: pointer;
  }
  .mobile-category-toggle .toggle-arrow { font-size: 20px; }
  .mobile-category-toggle[aria-expanded="true"] .toggle-arrow {
    transform: rotate(180deg);
  }
  .product-nav-mid {
    order: 3; display: none; float: none;
    width: 100%; min-height: 0; margin: -6px 0 0;
    border: 1px solid #dce3e8; border-radius: 0 0 7px 7px;
    background: #f8fafb;
  }
  .product-nav-mid.mobile-menu-open { display: block; }
  .product-nav-mid ul {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 4px; padding: 8px; margin: 0;
  }
  .product-nav-mid li { line-height: 1.4; }
  .product-nav-mid li a {
    display: block; padding: 10px; border-radius: 4px;
    background: #fff; border: 1px solid #e7e7e7;
    font-size: 13px; overflow-wrap: anywhere;
  }

  /* Main content follows menu */
  .data-box-center {
    order: 4; float: none; width: 100%; min-width: 0;
    min-height: 0; padding: 0; text-align: left;
  }
  .data-box-center > div[align="center"] img { max-width: 100%; height: auto; }

  /* Homepage outer product table: stack the two desktop columns.
     Preserve inner tables for product text/image alignment. */
  .view-more { width: 100%; }
  .view-more > table,
  .view-more > table > tbody,
  .view-more > table > tbody > tr,
  .view-more > table > tbody > tr > td {
    display: block; width: 100% !important; max-width: 100%;
  }
  .view-more > table > tbody > tr > td {
    padding: 0 !important;
  }
  .view-more > table > tbody > tr > td > table {
    width: 100% !important; max-width: 100%;
    margin: 0 0 12px; border: 1px solid #e3e7eb;
    background: #fff; border-radius: 7px;
  }
  /* Hide the desktop-only middle gutter cells */
  .view-more > table > tbody > tr > td:nth-child(2):not(:last-child) {
    display: none;
  }
  .view-more h3 { font-size: 16px; line-height: 1.4; }
  .view-more img { max-width: 90px; height: auto; }
  .product-intro { font-size: 13px; }
  .product-text { font-size: 13px; line-height: 1.6; }
  .data-box-center p { line-height: 1.65; }
  .data-box-center > div { max-width: 100%; }

  .interested-in-top, .interested-in-mid, .interested-in-btm {
    float: none; width: 100%; max-width: 100%;
  }
  .interested-in-top, .interested-in-btm { background-size: 100% 100%; }
  .interested-in-mid {
    background: #f5f5f5; padding: 10px;
    border-left: 1px solid #ddd; border-right: 1px solid #ddd;
  }

  /* Original left sidebar payment and quote blocks, after main content */
  .data-box-left > div:has(> img[src*="payment-services"]) {
    order: 5; width: 100%; text-align: center;
    padding: 14px 10px; background: #f8f9fa;
    border: 1px solid #e1e1e1; border-radius: 7px;
  }
  .data-box-left > div:has(> a > img[src*="custom-quote"]) {
    order: 6; width: 100%; text-align: center; padding: 4px 0;
  }

  /* Right sidebar cards after payment widgets */
  .data-box-right {
    order: 7; float: none; width: 100%; max-width: 100%;
    padding: 12px; text-align: center;
    border-top: 1px solid #ddd;
  }
  .data-box-right ul { margin: 8px 0; padding: 0; list-style: none; }
  .data-box-right li { padding: 5px; }
  .data-box-right p { width: 100%; max-width: 100%; }
  .data-box-right img { max-width: 100%; height: auto; }

  /* Footer last */
  #footer-cnt {
    clear: both; width: 100%; height: auto; padding: 20px 12px;
    background: #333; color: #fff; text-align: center;
  }
  .footer-links, .social-media, .copyright, .site-by {
    float: none; width: 100%; height: auto;
    margin: 0 0 12px; text-align: center; line-height: 1.8;
  }
  .social-media img { max-width: 32px; margin: 3px; }

  /* The original marquee can overflow on some browsers */
  marquee { display: block; max-width: 100%; overflow: hidden; }
}

/* ====================================================
   V3 - RIGHT SIDEBAR AS OFFER CARDS BELOW MAIN CONTENT
   The right_nav.php include remains untouched.
   ==================================================== */
@media screen and (max-width: 767px) {
  /* Main content includes the interested-in-mid section.
     The right sidebar follows the complete center section. */
  #data-box > .data-box-center {
    order: 4;
    margin-bottom: 0;
  }

  #data-box > .mobile-offers-anchor {
    display: none;
  }

  #data-box > .data-box-right {
    order: 7;
    float: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 16px 0 6px;
    margin: 4px 0 0;
    border: 0;
    border-top: 1px solid #dfe6ec;
    background: transparent;
    text-align: center;
    min-width: 0;
  }

  #data-box > .data-box-right::before {
    content: "More Printing Services & Offers";
    display: block;
    grid-column: 1 / -1;
    margin: 0 0 2px;
    font-size: 17px;
    font-weight: 700;
    color: #193b50;
    text-align: left;
  }

  /* Convert existing right_nav.php blocks into clean cards */
  #data-box > .data-box-right > div,
  #data-box > .data-box-right > p,
  #data-box > .data-box-right > a,
  #data-box > .data-box-right > table {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 14px 12px !important;
    border: 1px solid #e2e8ee;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(20, 50, 70, .06);
    overflow: hidden;
  }

  #data-box > .data-box-right img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
  }

  #data-box > .data-box-right a {
    overflow-wrap: anywhere;
  }

  #data-box > .data-box-right > div:empty,
  #data-box > .data-box-right > p:empty {
    display: none;
  }

  /* Keep the footer below the offer cards */
  #footer-cnt {
    clear: both;
  }
}

/* PRODUCT / LANDING PAGE ONLY */
@media screen and (max-width: 767px) {
  .data-box-center .bred-crum,
  .data-box-center .editor {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    float: none;
    padding: 12px;
    margin: 0 0 12px;
  }
  .data-box-center .bred-crum {
    background: #f4f6f8;
    border-radius: 6px;
    overflow-wrap: anywhere;
  }
  .data-box-center .editor {
    overflow-wrap: anywhere;
    line-height: 1.65;
  }
  .data-box-center .editor img,
  .data-box-center .editor video,
  .data-box-center .editor iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  /* DB HTML sometimes contains tables with fixed widths.
     Allow horizontal scrolling rather than cutting off forms. */
  .data-box-center .editor table {
    max-width: 100%;
  }
  .data-box-center .editor {
    overflow-x: auto;
  }
  .data-box-center .editor input,
  .data-box-center .editor select,
  .data-box-center .editor textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Spacer divs should not turn into cards. */
  #data-box > .data-box-right > .spacer {
    display: none;
  }
  #data-box > .data-box-right > ul {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px;
    list-style: none;
    background: #fff;
    border: 1px solid #e2e8ee;
    border-radius: 10px;
  }
  #data-box > .data-box-right > ul li { padding: 6px; }
}

/* ==========================================
   EZEEPRINTING - RESPONSIVE INTERNAL TABLES
   Product pages only
   ========================================== */

@media screen and (max-width: 767px) {

    /* Main product content */
    .data-box-center,
    .data-box-center .editor {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .data-box-center .editor {
        padding: 10px;
        overflow-x: auto;
        overflow-wrap: anywhere;
    }

    /* Override fixed widths in old HTML tables */
    .editor table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: auto;
        box-sizing: border-box;
    }

    /* Make table cells fit smaller screens */
    .editor th,
    .editor td {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: anywhere;
        word-break: normal;
        white-space: normal !important;
    }

    /* Images inside product tables */
    .editor table img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Other fixed-width elements */
    .editor div,
    .editor p,
    .editor section {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Forms and controls */
    .editor input,
    .editor textarea,
    .editor select {
        max-width: 100% !important;
        box-sizing: border-box;
    }

}

@media screen and (max-width: 767px) {

    .editor .responsive-table-scroll {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 12px 0;
    }

    .editor .responsive-table-scroll table.wide-data-table {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
    }

    .editor .responsive-table-scroll table.wide-data-table th,
    .editor .responsive-table-scroll table.wide-data-table td {
        min-width: 85px;
        overflow-wrap: normal;
    }

}

@media screen and (max-width: 767px) {

    /* Keep the table structure stable */
    .editor tr.mobile-image-below {
        display: table-row !important;
    }

    /* Show description and image as separate rows visually */
    .editor tr.mobile-image-below > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        float: none !important;
        clear: both !important;
        position: static !important;
        height: auto !important;
        vertical-align: top;
    }

    /* Image appears after description */
    .editor tr.mobile-image-below > td:has(img) {
        padding: 15px 5px !important;
        text-align: center !important;
    }

    .editor tr.mobile-image-below > td:has(img) img {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 350px;
        margin: 0 auto !important;
        float: none !important;
        position: static !important;
        object-fit: contain;
    }

}

/* ==========================================
   MOBILE PRODUCT SPECIFICATION CARDS
   ========================================== */

@media screen and (max-width: 767px) {

    /* Remove fixed dimensions from old nested tables */
    .editor table.mobile-spec-wrapper,
    .editor table.mobile-spec-table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        box-sizing: border-box;
    }

    /* Remove old background image on mobile */
    .editor .mobile-spec-container {
        background-image: none !important;
        background: #f8fafc !important;
        border: 1px solid #dce5ec !important;
        border-radius: 10px;
        padding: 12px !important;
        height: auto !important;
    }

    /* Specification table */
    .editor table.mobile-spec-table {
        border-collapse: collapse;
        margin: 0 !important;
        background: transparent;
    }

    .editor table.mobile-spec-table tr {
        height: auto !important;
    }

    .editor table.mobile-spec-table td {
        width: auto !important;
        height: auto !important;
        padding: 10px 6px !important;
        vertical-align: top !important;
        border-bottom: 1px solid #e3e9ef;
        background: transparent !important;
        text-align: left !important;
        font-size: 13px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    /* Label column */
    .editor table.mobile-spec-table tr > td:first-child {
        width: 38% !important;
        font-weight: 600;
        color: #183b56;
    }

    /* Value column */
    .editor table.mobile-spec-table tr > td:last-child {
        width: 62% !important;
        color: #344054;
    }

    /* Last row without border */
    .editor table.mobile-spec-table tr:last-child td {
        border-bottom: none;
    }

}

/* ========================================
   MOBILE FEATURE CARDS
   Custom Printing / Free Designing / Urgent
   ======================================== */

@media screen and (max-width: 767px) {

    /* Only the identified three-card table */
    .editor table.mobile-feature-cards {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-spacing: 0 !important;
        margin: 15px 0 !important;
    }

    .editor table.mobile-feature-cards > tbody {
        display: block !important;
        width: 100% !important;
    }

    .editor table.mobile-feature-cards > tbody > tr {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Each card becomes a separate block */
    .editor table.mobile-feature-cards
    > tbody > tr > td.mobile-feature-card {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
        margin: 0 0 12px !important;
        padding: 15px 12px !important;

        background: #ffffff !important;
        background-image: none !important;

        border: 1px solid #e1e6ec;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);

        float: none !important;
        vertical-align: top;
    }

    /* Inner card table */
    .editor .mobile-feature-card > table {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-collapse: collapse;
        table-layout: auto;
    }

    .editor .mobile-feature-card > table td {
        height: auto !important;
        padding: 4px 6px !important;
        vertical-align: top !important;
    }

    /* Image column */
    .editor .mobile-feature-card
    > table tr:first-child > td:first-child[rowspan] {
        width: 65px !important;
        min-width: 65px;
        vertical-align: middle !important;
        text-align: center;
    }

    /* Image */
    .editor .mobile-feature-card img {
        display: block;
        width: 54px !important;
        max-width: 54px !important;
        height: auto !important;
        margin: 0 auto;
    }

    /* Heading */
    .editor .mobile-feature-card strong {
        font-size: 15px !important;
        color: #e66b12 !important;
        line-height: 1.4;
    }

    /* Description */
    .editor .mobile-feature-card span {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

}