/* ==========================================================================
   eFoam - Use-case landing page shared styles
   --------------------------------------------------------------------------
   Used by:
     - narrowboat-cushions.php
     - campervan-cushions.php
     - church-pew-cushions.php
     - static-caravan-cushions.php
     - garden-furniture-cushions.php
     - window-seat-cushions.php
   --------------------------------------------------------------------------
   Contains:
     - Mobile padding fix for #deskpadd (covers _menu.php's tight default)
     - Horizontal shape selector CSS (.shape-selector-section,
       .shape-strip-track, .shape-thumb-h, .shape-strip-arrow etc)
     - Iframe wrapper styling

   Page-specific data (the shape ORDER) is passed via window.pageShapes
   in each landing page; see use-case-page.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile padding fix
   --------------------------------------------------------------------------
   _menu.php wraps content in #deskpadd with only 4-8px horizontal padding,
   which lets text run right up to the screen edge on phones. This widens
   that to a comfortable 10-12px on small screens without touching desktop.
   Same approach as acoustic-foam-tiles-panels.php.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    #deskpadd { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (max-width: 600px) {
    #deskpadd { padding-left: 10px !important; padding-right: 10px !important; }
}

/* --------------------------------------------------------------------------
   Shape selector section wrapper
   -------------------------------------------------------------------------- */
.shape-selector-section {
    margin: 25px 0 20px;
    padding: 18px 8px;
    background: #FFE964;
    border-radius: 6px;
    text-align: center;
}
.shape-selector-section h2.shape-selector-title {
    margin: 0 0 12px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Horizontal shape selector strip
   --------------------------------------------------------------------------
   Mirrors homepage style.css .hconveyor rules for visual consistency.
   Two duplicate sections (#nbsection / #nbsection2) scroll horizontally;
   the conveyor algorithm lives in use-case-page.js.
   -------------------------------------------------------------------------- */
.shape-strip-container {
    position: relative;
    width: 100%;
    height: 110px;
    margin: 0 0 12px;
}
.shape-strip-container * {
    -moz-user-select: none;
    user-select: none;
    font-family: Arial;
    text-shadow: none;
}
.shape-strip-track {
    position: absolute;
    top: 0;
    left: 40px;
    right: 40px;
    bottom: 0;
    overflow: hidden;
    background: linear-gradient(#ffc800,#ffc800,#fff700,#fff700,#ffc800,#ffc800);
    white-space: nowrap;
}
#nbsection, #nbsection2 {
    position: absolute;
    top: 0;
    left: 0;
    height: 110px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Left / right scroll arrows
   -------------------------------------------------------------------------- */
.shape-strip-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    background: #fd9a19;
    border: 0;
    color: #000;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    z-index: 5;
    padding: 0;
    margin: 0;
    line-height: 110px;
    text-align: center;
}
.shape-strip-arrow:hover { background: #e08510; }
.shape-strip-arrow.left-arrow  { left: 0; }
.shape-strip-arrow.right-arrow { right: 0; }

/* --------------------------------------------------------------------------
   Thumbnail buttons inside the strip
   --------------------------------------------------------------------------
   Fixed 110px width is important - it makes section.offsetWidth deterministic
   even before the 23 PNG icons have loaded, which is what lets us use
   loading="lazy" on each <img> tag (in use-case-page.js) without the carousel
   geometry breaking.
   -------------------------------------------------------------------------- */
.shape-thumb-h {
    display: inline-block;
    width: 110px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    padding: 4px 15px 4px 0;
    vertical-align: top;
    background: 0 0;
    color: #000;
}
.shape-thumb-h img {
    display: block;
    margin: auto;
    border: 0;
    max-width: 80px;
    max-height: 80px;
}
.shape-thumb-h span {
    display: inline-block;
    text-align: center;
    color: black;
    width: 100%;
    font-size: 12px;
    font-family: Arial;
}

/* --------------------------------------------------------------------------
   Iframe wrapper (containing shapes.php cut-to-size configurator)
   -------------------------------------------------------------------------- */
.shape-iframe-wrapper {
    max-width: 100%;
    overflow-x: auto;
    text-align: center;
    -webkit-overflow-scrolling: touch;
    margin-top: 5px;
}
.shape-iframe-wrapper iframe {
    display: inline-block;
    background-color: #FFE964;
    max-width: 100%;
    border: 0;
}

/* --------------------------------------------------------------------------
   Small-screen tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
    .shape-strip-arrow { width: 32px; font-size: 18px; }
    .shape-strip-track { left: 32px; right: 32px; }
}

/* --------------------------------------------------------------------------
   #preview popup overlay
   --------------------------------------------------------------------------
   The dimension-preview popup from shapes.php (#preview) is defined in
   style.css as position:absolute, width:100%, z-index:2, transparent.

   On desktop the popup lands over the iframe area (away from the carousel
   arrows) and the 100% width is fine - the image inside is centred and the
   transparent surround doesn't matter because nothing it covers shows
   through visibly.

   On mobile the popup ends up overlapping the horizontal shape strip,
   so the carousel arrows (z-index: 5) would otherwise either sit in
   front of the popup or poke through its transparent edges. Two overrides:

   1. z-index bump to 10 (all viewports) - cheap, harmless on desktop,
      puts #preview in front of the arrows where they overlap.
   2. Yellow background (mobile only) - opaque cover for the transparent
      edges of the 100%-wide div so arrows don't show through the gaps
      either side of the cushion image. NOT applied on desktop because
      the 100%-wide div would paint a giant yellow rectangle across the
      page where the preview is just a small image in the middle.

   Both overrides scoped to use-case pages (homepage doesn't load this css).
   -------------------------------------------------------------------------- */
#preview {
    z-index: 10;
}
@media (max-width: 900px) {
    #preview {
        background: #FFE964;
    }
}