/* JDM Stuff — Sticky CTA Bar
   -----------------------------------------------------------------
   All styles namespaced under .jdmsc- to avoid collisions with the
   wholesale (.jdmw-*), auction (.jdma-*), and gallery (.jdmg-*)
   subsystems.

   Palette (site brand tokens):
     --jdmsc-orange        #E3562F    (primary CTA, SMS outline, email outline)
     --jdmsc-orange-hover  #EC6A43    (CTA hover; ~10% lighter)
     --jdmsc-bg            #231F20    (bar + options-tab background)
     --jdmsc-bg-alt        #2E2A2B    (button surfaces, one step lighter)
     --jdmsc-bg-hover      #3A3536    (drawer hover, etc.)
     --jdmsc-white         #FCFCFA    (text on dark)
     --jdmsc-off-white     #F8F8F7    (subtle off-white for info, etc.)
     --jdmsc-red           #E3302F    (Save/favourite border)
     --jdmsc-blue          #2D7CDB    (Call border)

   Structure:
     .jdmsc-bar            ← fixed full-width container
       .jdmsc-options-tab  ← absolutely positioned button at top edge
       .jdmsc-drawer       ← slides up above the bar when tab clicked
       .jdmsc-inner        ← constrained-width wrapper (desktop)
         .jdmsc-info       ← info row (title, price, countdown, etc.)
         .jdmsc-actions    ← bottom row: CTA + contact buttons (incl. Save + Theme)
*/

.jdmsc-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    width: 100%;
    background: #231F20;
    color: #FCFCFA;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    font-family: inherit;
    /* Pages that need bottom-edge clearance for fixed-position content
       can add `body { padding-bottom: 140px; }` themselves — there's
       no universal value that works for every layout. */
}

.jdmsc-bar *,
.jdmsc-bar *::before,
.jdmsc-bar *::after {
    box-sizing: border-box;
}

/* ── Inner content wrapper ──────────────────────────────────────
   Mobile: full-width, just normal horizontal padding.
   Desktop: constrained to 50% so the CTA doesn't stretch absurdly
   wide on big monitors. Centered inside the full-width bar. */

.jdmsc-inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 900px) {
    .jdmsc-inner {
        max-width: 50%;
        padding: 12px 14px;
    }
}

/* Between 900–1400px, cap inner at a fixed width instead of 50%. */
@media (min-width: 900px) and (max-width: 1400px) {
    .jdmsc-inner {
        max-width: 720px;
    }
}

/* ── Info row ──────────────────────────────────────────────────
   Caller-supplied HTML. Keep styling minimal so caller markup
   has freedom — but apply sane defaults for raw text. */

.jdmsc-info {
    font-size: 14px;
    line-height: 1.4;
    color: #F8F8F7;
    text-align: center;
}

.jdmsc-info strong,
.jdmsc-info b {
    color: #FCFCFA;
    font-weight: 700;
}

.jdmsc-info a {
    color: inherit;
    text-decoration: underline;
}

@media (min-width: 900px) {
    .jdmsc-info {
        font-size: 15px;
    }
}

/* ── Action row: CTA + contact buttons ─────────────────────────
   On mobile, CTA expands to fill remaining space after the contact
   buttons take their natural width. On desktop, the row is centered
   and the CTA is sized only to its content. */

.jdmsc-actions {
    display: flex;
    gap: 6px;
    align-items: stretch;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.jdmsc-cta {
    flex: 0 0 auto;  /* size to content — never stretch */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E3562F;
    color: #FCFCFA;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 9px 18px;
    border-radius: 6px;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.15s ease, transform 0.1s ease;
    min-height: 36px;
    white-space: nowrap;
}

.jdmsc-cta:hover,
.jdmsc-cta:focus-visible {
    background: #EC6A43;
    color: #FCFCFA;
    text-decoration: none;
    outline: none;
}

.jdmsc-cta:active {
    transform: translateY(1px);
}

/* ── Contact buttons ──────────────────────────────────────────
   75% the previous size: 36×36 desktop, 33×33 mobile.
   All contact-row buttons (call, sms, whatsapp, email, fav, theme)
   share this base and diverge via .jdmsc-contact--{modifier}. */

.jdmsc-contacts {
    display: flex;
    gap: 5px;
    flex: 0 0 auto;
    align-items: stretch;
}

.jdmsc-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 6px;
    background: #2E2A2B;
    color: #FCFCFA;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    border: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.jdmsc-contact:hover,
.jdmsc-contact:focus-visible {
    color: #FCFCFA;
    text-decoration: none;
    outline: none;
}

.jdmsc-contact svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Brand styling — outline by default, fill on hover (matches the
   existing .reachout-button-* pattern on b-pro.ca).

   - call     : blue outline  (phone icon, tel: link)
   - sms      : blue outline  (chat-bubble icon, sms: link)
     (Both use blue to group them as "messaging you back via phone";
      both are distinct-looking from whatsapp/email which have their
      own brand colours.)
   - whatsapp : brand green
   - facebook : brand blue
   - instagram: brand magenta
   - email    : orange (brand)
   - fav      : red (Save)
   - theme    : neutral — grey outline, filled on hover */

.jdmsc-contact--call     { border-color: #2D7CDB; }
.jdmsc-contact--sms      { border-color: #2D7CDB; }
.jdmsc-contact--whatsapp { border-color: #25d366; }
.jdmsc-contact--facebook { border-color: #1877f2; }
.jdmsc-contact--instagram{ border-color: #e1306c; }
.jdmsc-contact--email    { border-color: #E3562F; }
.jdmsc-contact--fav      { border-color: #E3302F; }
.jdmsc-contact--theme    { border-color: #6A6565; }

.jdmsc-contact--call:hover,
.jdmsc-contact--call:focus-visible     { background: #2D7CDB; }
.jdmsc-contact--sms:hover,
.jdmsc-contact--sms:focus-visible      { background: #2D7CDB; }
.jdmsc-contact--whatsapp:hover,
.jdmsc-contact--whatsapp:focus-visible { background: #25d366; }
.jdmsc-contact--facebook:hover,
.jdmsc-contact--facebook:focus-visible { background: #1877f2; }
.jdmsc-contact--instagram:hover,
.jdmsc-contact--instagram:focus-visible{ background: #e1306c; }
.jdmsc-contact--email:hover,
.jdmsc-contact--email:focus-visible    { background: #E3562F; }
.jdmsc-contact--theme:hover,
.jdmsc-contact--theme:focus-visible    { background: #3A3536; border-color: #8A8585; }

/* ── Favourite (Save) button ──────────────────────────────────
   Inherits .jdmsc-contact base. Extra wide because it shows heart
   icon; becomes filled red when active. */

.jdmsc-contact--fav:hover,
.jdmsc-contact--fav:focus-visible {
    background: rgba(227, 48, 47, 0.15);
    border-color: #E3302F;
}

.jdmsc-fav-icon--filled { display: none; }

.jdmsc-contact--fav.is-active .jdmsc-fav-icon--empty  { display: none; }
.jdmsc-contact--fav.is-active .jdmsc-fav-icon--filled { display: inline-flex; }
.jdmsc-contact--fav.is-active                          { background: #E3302F; color: #FCFCFA; }
.jdmsc-contact--fav.is-active:hover                    { background: #C52524; }

/* ── Theme toggle (in action row, not drawer) ─────────────────
   Shows the icon of the mode you'd switch TO, plus a short label
   ("Dark" when in light mode, "Light" when in dark mode).
   On mobile the label is hidden (icon-only). */

.jdmsc-contact--theme {
    width: auto;
    padding: 0 10px 0 8px;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.jdmsc-theme-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Default (light mode): show moon (you'd switch to dark). */
.jdmsc-theme-icon--sun  { display: none; }
.jdmsc-theme-icon--moon { display: inline-flex; }

/* Dark mode: show sun (you'd switch to light). */
html[data-theme="dark"] .jdmsc-theme-icon--moon,
html.jdm-dark            .jdmsc-theme-icon--moon { display: none; }

html[data-theme="dark"] .jdmsc-theme-icon--sun,
html.jdm-dark            .jdmsc-theme-icon--sun  { display: inline-flex; }

/* Mobile: icon-only for theme toggle (drop the label + extra padding). */
@media (max-width: 599px) {
    .jdmsc-contact--theme {
        width: 33px;
        padding: 0;
        gap: 0;
    }
    .jdmsc-theme-label { display: none; }
}

/* ── Options tab (sits above the bar at the left edge) ──────── */

.jdmsc-options-tab {
    position: absolute;
    top: -32px;
    left: 12px;
    height: 32px;
    padding: 0 12px 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #231F20;
    color: #FCFCFA;
    border: none;
    border-radius: 8px 8px 0 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.15s ease;
}

.jdmsc-options-tab:hover,
.jdmsc-options-tab:focus-visible {
    background: #2E2A2B;
    outline: none;
}

.jdmsc-options-tab__chev {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 10px;
}

.jdmsc-options-tab[aria-expanded="true"] .jdmsc-options-tab__chev {
    transform: rotate(180deg);
}

/* Desktop: anchor tab to the LEFT edge of the constrained inner content. */
@media (min-width: 900px) {
    .jdmsc-options-tab {
        left: 25%;
    }
}

@media (min-width: 900px) and (max-width: 1400px) {
    .jdmsc-options-tab {
        left: calc(50% - 360px);
    }
}

/* ── Drawer ──────────────────────────────────────────────────
   Currently only holds the gallery view toggle. The theme and
   favourite buttons have moved to the action row. */

.jdmsc-drawer {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #2E2A2B;
    border-top: 1px solid #3A3536;
    border-bottom: 1px solid #3A3536;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}

.jdmsc-drawer:not([hidden]) {
    max-height: 200px;
}

.jdmsc-drawer[hidden] {
    display: block !important;  /* override hidden so transition works */
    max-height: 0;
    border-top-width: 0;
    border-bottom-width: 0;
}

.jdmsc-drawer__inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

@media (min-width: 900px) {
    .jdmsc-drawer__inner {
        max-width: 50%;
        justify-content: flex-start;
    }
}

@media (min-width: 900px) and (max-width: 1400px) {
    .jdmsc-drawer__inner {
        max-width: 720px;
    }
}

/* ── Drawer option buttons ─────────────────────────────────── */

.jdmsc-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    background: #3A3536;
    color: #FCFCFA;
    border: 1px solid #4A4546;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
    min-height: 30px;
    font-family: inherit;
}

.jdmsc-opt:hover,
.jdmsc-opt:focus-visible {
    background: #4A4546;
    border-color: #5A5556;
    outline: none;
}

.jdmsc-opt[hidden] {
    display: none !important;
}

.jdmsc-opt__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.jdmsc-opt__icon svg {
    width: 15px;
    height: 15px;
}

.jdmsc-opt__label {
    white-space: nowrap;
}

/* ── Mobile tweaks ───────────────────────────────────────────── */

@media (max-width: 599px) {
    .jdmsc-cta {
        font-size: 13px;
        padding: 9px 12px;
        min-height: 33px;
    }

    .jdmsc-contact {
        width: 33px;
        min-height: 33px;
    }

    .jdmsc-contact svg {
        width: 15px;
        height: 15px;
    }

    .jdmsc-info {
        font-size: 13px;
    }

    .jdmsc-options-tab {
        font-size: 11px;
        padding: 0 10px 0 8px;
        height: 28px;
        top: -28px;
    }
}

/* ── Very small screens: tighter spacing ─────────── */
@media (max-width: 380px) {
    .jdmsc-actions { gap: 4px; }
    .jdmsc-contacts { gap: 3px; }
    .jdmsc-contact {
        width: 31px;
        min-height: 33px;
    }
}