/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* Product-modal thumbnail strip (repurposed .carousel-indicators) */
#productModalCarousel .product-modal-thumbs {
    position: static;
    margin: .5rem 0 0;
    justify-content: flex-start;
    gap: .5rem;
    flex-wrap: wrap;
}
#productModalCarousel .product-modal-thumbs [data-bs-slide-to] {
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    text-indent: 0;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: .25rem;
    overflow: hidden;
    opacity: .6;
    background: none;
    transition: opacity .15s ease, border-color .15s ease;
}
#productModalCarousel .product-modal-thumbs [data-bs-slide-to] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#productModalCarousel .product-modal-thumbs [data-bs-slide-to]:hover { opacity: 1; }
#productModalCarousel .product-modal-thumbs [data-bs-slide-to].active {
    opacity: 1;
    border-color: var(--cnvs-themecolor, #0d6efd);
}
.product-modal-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 10;
    padding: .5rem;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0,0,0,.15);
    opacity: 1;
}

/* ---- Product edit: TipTap editors ---- */
.tiptap-toolbar { flex-wrap: wrap; }
.tiptap-toolbar .btn { line-height: 1; }
.tiptap-toolbar .btn.active { background-color: #0d6efd; color: #fff; border-color: #0d6efd; }
.tiptap-editor { height: auto; overflow-y: auto; }
.tiptap-editor .ProseMirror { min-height: 180px; outline: none; }
.tiptap-editor .ProseMirror:focus { outline: none; }

/* ---- Rich text (TipTap) content: editor + rendered descriptions ----
   Scoped override of Canvas style.css globals that break authored lists:
   `dl,dt,dd,ol,ul,li{padding:0}` pushes markers off-screen, and
   `p,ul,ol,…{margin-bottom:30px}` inflates spacing (compounded by
   StarterKit's <li><p>text</p></li> shape). Confined to .rich-content so
   nothing leaks site-wide. */
.rich-content ul,
.rich-content ol {
    padding-left: 1.5rem;
    margin-bottom: .75rem;
}
.rich-content ul { list-style: disc; }
.rich-content ol { list-style: decimal; }
.rich-content li { display: list-item; margin-bottom: 0; }
.rich-content li > p { margin-bottom: 0; }
.rich-content p { margin-bottom: .75rem; }
.rich-content p:last-child { margin-bottom: 0; }

/* ---- Quote basket: per-line remove control ----
   Not from a mockup — the Canvas demo cart has no per-line remove. A thin,
   full-width red "Remove" button sits on its own row beneath each item's
   image+desc. Canvas lays .top-cart-item out as display:flex; allowing it to
   wrap lets the full-basis button break onto a second line. */
#top-cart .top-cart-item { flex-wrap: wrap; }
#top-cart .top-cart-item > .btn {
    flex-basis: 100%;
    margin-top: .5rem;
}
#top-cart .top-cart-empty { padding: .5rem 0; }

/* ---- Quote basket: add-to-quote toast ----
   Bottom-right, cleared above Canvas's #gotoTop control (style.css: fixed,
   right:30px, bottom:50px, size 2.5rem/40px at all widths). Offset =
   50 + 40 + 16px gap = 106px so the toast never overlaps #gotoTop; right edge
   aligned to the same 30px. Single rule, no breakpoint branch. Width is capped
   so it reads as a toast, not a full-width banner on narrow screens. */
/* #quote-sent-toast-container is the quote-edit page's approval-sent toast —
   same geometry, its own id so the two never collide in one DOM. */
#quote-added-toast-container,
#quote-sent-toast-container {
    top: auto;
    left: auto;
    right: 30px;
    bottom: 106px;
    z-index: 1090;
    max-width: min(320px, calc(100vw - 60px));
}
#quote-added-toast-container .toast,
#quote-sent-toast-container .toast { max-width: 100%; }

/* ---- Product edit: Dropzone thumbnail tiles ---- */
/* Tiles are Bootstrap columns; neutralize dropzone.min.css's inline-block
   margin/min-height so the col-* wrapper controls width (row g-2 = gutters). */
#product-image-thumbs .dz-preview {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    margin: 0;
}
/* Uniform small thumbnail: fills the tile width, fixed height, cropped. */
#product-image-thumbs .dz-image {
    width: 100%;
    height: auto;
    border-radius: 4px;
    overflow: hidden;
}
#product-image-thumbs .dz-image img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: cover;
}
/* Small gap between the thumbnail and its full-width delete button. */
#product-image-thumbs .dz-image-remove {
    margin-top: .35rem;
}

/* ---- Quote-list status filter switches ----
   Lifted verbatim from the admin-quote-list mockup's inline <style>. Each filter
   switch tints its active track to the matching status badge colour. */
#content .switch .switch-label {
    cursor: default;
    font-weight: 600;
    line-height: 1;
}

#content .filter-received  { --cnvs-switch-active-bg: var(--bs-info); }
#content .filter-invoiced  { --cnvs-switch-active-bg: var(--bs-warning); }
#content .filter-completed  { --cnvs-switch-active-bg: var(--bs-success); }
#content .filter-declined  { --cnvs-switch-active-bg: var(--bs-danger); }


/* ---- Rental-agreement signing page ----
   Lifted verbatim from the signing mockup's inline <style>. The three .sig-*
   faces are the adopt-and-sign choices; SignatureFont::cssClass() is what picks
   one, so these class names are load-bearing and must match the enum. The PDF
   renders the same three faces from vendored .ttf files, not from these rules. */
.signature-script {
    line-height: 1.4;
    color: #222;
}
.sig-great-vibes { font-family: 'Great Vibes', cursive; font-size: 2.25rem; }
.sig-mr-dafoe    { font-family: 'Mr Dafoe', cursive;    font-size: 2.1rem;  }
.sig-caveat      { font-family: 'Caveat', cursive;      font-size: 2.4rem; font-weight: 600; }
.signature-line {
    border-bottom: 1px solid #ccc;
    min-height: 64px;
}
#agreement-text h2 { font-size: 1.25rem; margin-top: 1.75rem; }
#agreement-text h3 { font-size: 1.05rem; margin-top: 1.25rem; }


/* ---- bs-select pickers styled as form fields ----
   bootstrap-select renders its closed state as a btn-light button (gray fill,
   no border), which reads out of place beside real form controls. Restyle the
   toggle to match a standard field: white background, form border, body text.
   Applies to every .selectpicker site-wide (state dropdowns, Add-Product). */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:hover,
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select > .dropdown-toggle:active {
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color, #212529);
}


/* ---- MM header logo guard ----
   Canvas pins the header logo to the header-height var (100px today), so the
   provisional MM mark (assets/img/mm-logo.png, 400x182) renders ~220px wide.
   These caps change nothing at current values; they exist so a future theme or
   header-var change can't blow the wide logo up past its approved size. */
#header-wrap #logo img {
    max-height: 100px;
    max-width: 240px;
}


/* ---- Legal pages (Terms of Service, Privacy Policy) ----
   Canvas's global resets strip list markers and inflate block spacing, which
   makes long legal copy hard to read. Scope readable defaults to these pages
   only, mirroring what .rich-content does for authored product HTML. */
.legal-content { padding-bottom: 2rem; }
.legal-content h3,
.legal-content h4 { font-weight: 600; }
.legal-content p { margin-bottom: 1rem; line-height: 1.7; }
.legal-content ul { padding-left: 1.5rem; margin-bottom: 1rem; list-style: disc; }
.legal-content li { margin-bottom: 0.5rem; line-height: 1.7; }


/* ---- Sticky quote pill (browse surfaces) ----
   An invisible sticky rail carrying one centered pill. The rail spans the full
   width, so it MUST stay click-through or it swallows every click on the
   content behind it; only the pill takes pointer events. Ported from
   template/cartbutton.html. */
.quote-bar {
    position: sticky;
    top: 10px;                      /* below 992px Canvas un-fixes the header, so it pins near the top */
    z-index: 99;                    /* under the header (199) and its mega menus (399) */
    display: none;
    background-color: transparent;
    pointer-events: none;
}

.quote-bar.is-visible { display: block; }

@media (min-width: 992px) {
    .quote-bar { top: 95px; }       /* 15px float offset + 70px header height + 10px gap */
}

.quote-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .625rem 0;
}

.quote-bar-pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    height: 3rem;
    padding: 0 .375rem 0 1.25rem;
    border-radius: 3rem;
    background-color: var(--cnvs-themecolor);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
    transition: background-color .2s linear, box-shadow .2s linear;
}

.quote-bar-pill:hover,
.quote-bar-pill:focus-visible {
    color: #fff;
    background-color: #000;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
}

.quote-bar-pill:focus-visible { outline: 2px solid var(--cnvs-themecolor); outline-offset: 3px; }

.quote-bar-pill i { font-size: 1.125rem; }

.quote-bar-sep {
    width: 1px;
    height: 1.25rem;
    background-color: rgba(255, 255, 255, .25);
}

.quote-bar-cta {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 1.125rem;
    border-radius: 2rem;
    background-color: #fff;
    color: var(--cnvs-themecolor);
}

@media (max-width: 575.98px) {
    .quote-bar-inner { padding: .5rem 0; }
    .quote-bar-pill {
        gap: .5rem;
        height: 2.75rem;
        padding: 0 .3125rem 0 1rem;
        font-size: .75rem;
    }
    .quote-bar-pill i { font-size: 1rem; }
    .quote-bar-cta { height: 2.125rem; padding: 0 .875rem; }
}


/* ---- Cart panel action button ----
   .button-dark paints var(--cnvs-btn-color-dark) = --bs-gray-900 = #212529, a
   FIXED colour that does not follow data-bs-theme. On the dark panel that is
   the same value the panel itself paints, so the button loses its shape and
   only its label shows. Its hover state is var(--cnvs-btn-color) = #222 via
   store.css, which is dark too - so both states vanish, not just one.

   Under the dark theme, flip it to Canvas's own light button treatment rather
   than inventing colours. The light theme (the header's hover-light state)
   already reads correctly and is left alone. */
[data-bs-theme="dark"] .top-cart-action .button.button-dark {
    background-color: var(--cnvs-btn-color-light);
    color: var(--cnvs-btn-color-dark);
}

[data-bs-theme="dark"] .top-cart-action .button.button-dark:hover {
    background-color: #fff;
    color: var(--cnvs-btn-color-dark);
}


/* ---- Rotating hero background ----
   Sits where .parallax-bg used to, and copies its positioning exactly: absolute
   and z-index -1. The negative index is load-bearing - it puts the images BELOW
   .bg-overlay-mask's ::before, which carries no z-index of its own. At 0 or auto
   the slider would paint over the mask and the headline would lose its contrast. */
.page-title-slider {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
}

/* The section paints an opaque background of its own (rgb(52,58,64)), and a
   negative z-index child paints BENEATH a block-level descendant's background -
   so at z-index -1 the slider was buried and the band rendered flat dark. It
   sits at 0 instead, which puts it above that background but also above
   .bg-overlay-mask's ::before, since both are positioned with z-index auto and
   the slider comes later in the DOM. Lifting the mask to 1 restores the order:
   images, then mask, then the .container at z-index 5. */
.page-title-rotating::before {
    z-index: 1;
}

.page-title-slider .swiper,
.page-title-slider .swiper-wrapper,
.page-title-slider .swiper-slide {
    height: 100%;
}

/* Each slide must contain its own background. .swiper-slide-bg carries
   z-index: -1, and a slide with no stacking context lets that escape upward -
   the backgrounds then paint against .page-title-slider instead, all five stay
   visible at once, the fade has nothing to act on, transitionend never fires
   and Swiper wedges with animating = true. isolation gives each slide its own
   context without touching z-index. */
.page-title-slider .swiper-slide {
    isolation: isolate;
}


/* ---- Plain variant of <x-page-title>: ADMIN ONLY ----
   No hero image at all, just a black band a little taller than the text.
   Chad, 2026-08-25: "ditch the hero for admin all together and just have a
   page title in a black band just a bit taller than the text. it looks really
   odd now."

   The band does NOT need padding for the fixed header: Canvas's
   `.include-header .container` already adds `--cnvs-header-height` as
   padding-top, which is why the old inline 125px was stacking on top of it.
   The section padding here is the air around the text and nothing else. */
.page-title-plain {
    background-color: #000;
    background-image: none;
}

/* ---- Inner variant of <x-page-title> ----
   PUBLIC interior pages carry the homepage's hero typography instead of
   Canvas's centered uppercase band. Chad, 2026-08-25: "we need to get the text
   style of the heros of all other public pages inline with the index." The
   breadcrumb goes for the same reason it went from home ("ditch the
   breadcrumb"). ADMIN bands deliberately keep .page-title-center - Chad:
   "we will work on the dashboard seporatley".

   Values are the hero's, deliberately duplicated rather than shared: the hero
   markup is .hero-lead/.hero-h1 and this is Canvas's h1/span, so there is no
   common selector to hang one rule on. Change both together. */
.page-title-inner .container { text-align: left; }

.page-title-inner .page-title-row {
    flex-direction: column;
    align-items: flex-start;
}

.page-title-inner .page-title-content {
    text-align: left;
    max-width: 660px;
}

.page-title-inner .page-title-content h1 {
    font-size: 3rem;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #fff;
    margin: 0 0 1rem;
    text-wrap: balance;
}

.page-title-inner .page-title-content span {
    display: block;
    font-size: 1.1875rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .82);
    max-width: 34em;
}

@media (max-width: 991.98px) {
    .page-title-inner .page-title-content h1 { font-size: 2.25rem; }
    .page-title-inner .page-title-content span { font-size: 1.0625rem; }
}

@media (max-width: 575.98px) {
    .page-title-inner .page-title-content h1 { font-size: 1.875rem; }
    .page-title-inner .page-title-content span { font-size: 1rem; }
    .page-title-inner .page-title-content { max-width: none; }
}

/* ---- Hero variant of <x-page-title> ----
   Only active when the component is given a `lead`. The visually dominant line
   is a plain <p>; the h1 sits under it at subhead size so it can carry the
   keyword and suburb string without having to be the design. Borrowed from
   freedomfunusa.com, which does the same inversion. */
.page-title-hero .container { text-align: left; }

.hero-copy { max-width: 660px; }

.hero-lead {
    font-size: 3rem;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 1rem;
    text-wrap: balance;
}

.hero-h1 {
    font-size: 1.1875rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 1.75rem;
    max-width: 34em;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
}

/* Pill, per Chad 2026-08-18. 50rem rather than a fixed radius so the shape
   holds if the label or the font size changes. */
.hero-cta {
    background-color: #fff;
    color: #222;
    font-size: .8125rem;
    letter-spacing: .5px;
    padding: 0 1.875rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 50rem;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}

.hero-cta:hover {
    background-color: #f1f3f5;
    color: #000;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
}

.hero-note {
    font-size: .875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
}

@media (max-width: 991.98px) {
    .hero-lead { font-size: 2.25rem; }
    .hero-h1   { font-size: 1.0625rem; }
}

@media (max-width: 575.98px) {
    .hero-lead { font-size: 1.875rem; }
    .hero-h1   { font-size: 1rem; }
    .hero-note { font-size: .8125rem; }
    .hero-copy { max-width: none; }
}