/* =============================================================================
   Fashion Dot - shared site stylesheet.  Linked once from Site.master.

   Currently holds ONLY the nested "Pattern Printer models" submenu styles that
   the shared nav needs on every page. The bulk design-system CSS still lives
   inline per page (it has diverged across pages, so it can't be consolidated
   here without visual testing). var() fallbacks are used because the :root
   tokens are not identical on every page.
   ============================================================================= */

/* Nested submenu under "Tailoring CAD Pattern Printer" -> Mini / Pro / Max */
.nav__subwrap { position: relative; }
.nav__subwrap > .nav__dropdown-item { display: flex; align-items: center; }
.nav__sub-caret { margin-left: auto; font-size: 0.62rem; opacity: 0.55; }
.nav__submenu {
    position: absolute;
    top: -8px;
    left: calc(100% + 6px);
    background: var(--white, #ffffff);
    border: 1px solid var(--border, #e6e6e6);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
    padding: 8px;
    min-width: 210px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: all 0.2s;
    z-index: 110;
}
.nav__subwrap:hover .nav__submenu { opacity: 1; visibility: visible; transform: translateX(0); }
.nav__submenu-item {
    display: block;
    padding: 10px 16px;
    font-size: 0.875rem;
    color: var(--ink-light, #2a3a4a);
    border-radius: 6px;
    transition: all 0.2s;
}
.nav__submenu-item:hover { background: var(--gold-pale, #f5ede0); color: var(--gold, #b8843a); padding-left: 20px; }

/* Mobile: the nav collapses (.nav.active), so show the submenu inline */
.nav.active .nav__submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    margin: 4px 0 4px 18px;
    padding: 4px;
    min-width: 0;
}
.nav.active .nav__sub-caret { display: none; }

/* =============================================================================
   Bootstrap 5 modal subset.
   Several form pages (book-demo, upcoming, contact-us, partner-with-us,
   tailoring-cad-software-price, blog) use a Bootstrap-5 modal for their success
   ("Thank you / Application submitted") popup and load the Bootstrap JS bundle,
   but NOT the Bootstrap CSS. Without these rules the modal has no styles and
   renders inline / always-visible at the bottom of the page. Defining the subset
   here (loaded on every page via Site.master) restores it everywhere: hidden by
   default, shown as a centered overlay when the JS sets display:block / .show.
   ============================================================================= */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
}
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}
.modal.show .modal-dialog { transform: none; }
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-clip: padding-box;
    outline: 0;
}
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}
.modal-backdrop.fade { opacity: 0; transition: opacity 0.15s linear; }
.modal-backdrop.show { opacity: 0.5; }
body.modal-open { overflow: hidden; }
@media (min-width: 576px) {
    .modal-dialog { max-width: 500px; margin: 1.75rem auto; }
    .modal-dialog-centered { min-height: calc(100% - 3.5rem); }
}

/* Bootstrap utility classes used inside the modal / form markup on those pages */
.text-center { text-align: center; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.justify-content-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.w-100 { width: 100%; }
.p-5 { padding: 3rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.opacity-75 { opacity: 0.75; }