/* ==========================================================================
   Metro — popup forms and alerts
   ==========================================================================

   A complete visual replacement for the Bootstrap look on every popup form on
   the site: the catalogue download modal, the per-product download modal, the
   product enquiry modal and the share modal, plus the toasts and inline
   messages they raise.

   WHAT THIS DOES NOT TOUCH
   Bootstrap's modal JavaScript still opens and closes these dialogs, traps
   focus, handles Escape, locks scroll and manages the backdrop and ARIA. That
   code is correct and well tested; replacing it would mean rewriting focus
   trapping on four live forms, which is exactly the kind of thing that breaks
   quietly for keyboard and screen-reader users. So the markup and behaviour
   stay, and every visual rule below overrides Bootstrap's appearance.

   The result should read as purpose-built, with nothing recognisably
   Bootstrap left. Removing the one <link> reverts it completely.

   Loaded after stylev2.css, so equal-specificity rules win on order.
   ========================================================================== */

.modal {
    --mm-red: #e31e24;
    --mm-red-dark: #c4181d;
    --mm-red-wash: #fdecec;
    --mm-ink: #1d1d1f;
    /* #86868b, used site-wide for secondary text, is 3.62:1 on white and
       fails WCAG AA. Darkened here to clear 4.5:1 without reading as a
       different colour. */
    --mm-grey: #6e6e73;
    --mm-line: #e3e3e5;
    --mm-surface: #ffffff;
    --mm-canvas: #f7f7f5;
    --mm-ok: #1a7f4b;
    --mm-radius: 16px;
    --mm-radius-sm: 10px;
}

/* --- Backdrop ------------------------------------------------------------ */

.modal-backdrop.show {
    background-color: #14141a;
    opacity: .55;
}

/* --- Shell --------------------------------------------------------------- */

.modal-dialog {
    max-width: 460px;
    margin: 1.75rem auto;
}

.modal-content {
    border: none;
    border-radius: var(--mm-radius);
    background: var(--mm-surface);
    /* Layered rather than one hard shadow: the near shadow defines the edge,
       the far one lifts the panel off the page. */
    box-shadow:
        0 1px 3px rgba(20, 20, 26, .10),
        0 18px 50px rgba(20, 20, 26, .22);
    overflow: hidden;
}

/* --- Header -------------------------------------------------------------- */

.modal-header {
    border-bottom: 1px solid var(--mm-line);
    padding: 22px 26px 18px;
    align-items: center;
}

.modal-header .modal-title,
.modal-header .modal-title.h4,
.modal-header span.modal-title {
    font-family: Inter, sans-serif;
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--mm-ink);
    line-height: 1.25;
    margin: 0;
}

/* Close: a real 40px target rather than Bootstrap's small tinted glyph. */
.modal-header .btn-close {
    width: 40px;
    height: 40px;
    margin: -6px -8px -6px 0;
    padding: 0;
    border-radius: 50%;
    opacity: 1;
    background: none;
    position: relative;
    transition: background-color .16s ease;
}

.modal-header .btn-close::before,
.modal-header .btn-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 15px;
    height: 1.5px;
    background: var(--mm-ink);
    border-radius: 2px;
}
.modal-header .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-header .btn-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-header .btn-close:hover   { background-color: var(--mm-canvas); }
.modal-header .btn-close:focus   { box-shadow: none; }
.modal-header .btn-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(227, 30, 36, .30);
}

/* --- Body ---------------------------------------------------------------- */

.modal-body {
    padding: 24px 26px;
}

/* Consistent rhythm between fields, set by the container rather than by
   per-field margins that drift as markup is edited. */
.modal-body form,
.modal-content form .modal-body {
    display: block;
}

.modal-body .mb-3,
.modal-body .form-group {
    margin-bottom: 16px !important;
}

/* --- Labels and fields --------------------------------------------------- */

.modal-body .form-label,
.modal-body label:not(.form-check-label) {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 12.5px;
    font-weight: 550;
    letter-spacing: .01em;
    color: var(--mm-grey);
    margin: 0 0 6px;
}

.modal-body .form-control,
.modal-body input[type="text"],
.modal-body input[type="tel"],
.modal-body input[type="email"],
.modal-body select,
.modal-body textarea {
    width: 100%;
    font-family: Inter, sans-serif;
    font-size: 15px;
    color: var(--mm-ink);
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    /* 46px tall: comfortably above the 44px minimum touch target, and these
       forms are filled on phones in showrooms as often as on desktop. */
    padding: 12px 14px;
    min-height: 46px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
    -webkit-appearance: none;
}

.modal-body .form-control::placeholder,
.modal-body input::placeholder,
.modal-body textarea::placeholder {
    color: #a3a3a9;
}

.modal-body .form-control:focus,
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
    outline: none;
    border-color: var(--mm-red);
    box-shadow: 0 0 0 3px rgba(227, 30, 36, .16);
}

/* The select needs its own arrow once appearance is stripped. */
.modal-body select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

.modal-body textarea,
.modal-body textarea.form-control {
    min-height: 110px;
    line-height: 1.6;
    resize: vertical;
}

/* --- reCAPTCHA ----------------------------------------------------------- */

/* The widget is a fixed-size iframe from Google and cannot be restyled, so it
   is framed instead: given the same border radius as the fields so it sits in
   the form rather than on top of it, and scaled down on narrow screens where
   304px would otherwise overflow the dialog. */
.modal-body .g-recaptcha,
.modal-body #dlRecaptcha,
.modal-body #inqRecaptcha,
.modal-body #downloadRecaptcha {
    margin: 4px 0 2px;
}

.modal-body .g-recaptcha > div,
.modal-body #dlRecaptcha > div,
.modal-body #inqRecaptcha > div,
.modal-body #downloadRecaptcha > div {
    border-radius: var(--mm-radius-sm);
    overflow: hidden;
}

/* --- Footer and buttons -------------------------------------------------- */

.modal-footer {
    border-top: 1px solid var(--mm-line);
    padding: 18px 26px;
    background: var(--mm-canvas);
    gap: 10px;
}

/* Metro red for the primary action. The green currently used reads as a
   success state rather than a call to action, and it is not a brand colour. */
.modal .btn-success,
.modal .magic-btn,
.modal button[type="submit"],
.modal .download_model_submit,
.modal input[type="submit"] {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.004em;
    color: #fff;
    background: var(--mm-red);
    border: none;
    border-radius: var(--mm-radius-sm);
    padding: 13px 26px;
    min-height: 48px;
    box-shadow: none;
    transition: background-color .16s ease, transform .08s ease;
    cursor: pointer;
}

.modal .btn-success:hover,
.modal .magic-btn:hover,
.modal button[type="submit"]:hover,
.modal .download_model_submit:hover {
    background: var(--mm-red-dark);
    color: #fff;
}

.modal .btn-success:active,
.modal button[type="submit"]:active,
.modal .download_model_submit:active {
    transform: scale(.985);
}

.modal button[type="submit"]:focus-visible,
.modal .download_model_submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(227, 30, 36, .30);
}

.modal button[type="submit"]:disabled,
.modal .btn-success:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* Full width inside the body, natural width when it sits in a footer row. */
.modal-body button[type="submit"],
.modal-body .download_model_submit,
.modal-body .btn-success {
    width: 100%;
}

/* --- Inline messages ----------------------------------------------------- */

.modal .alert,
.modal #inqSuccessMessage,
.modal #inqErrorMessage {
    border: none;
    border-radius: var(--mm-radius-sm);
    padding: 12px 15px;
    font-size: 14px;
    line-height: 1.55;
    margin-top: 14px;
}

.modal .alert-success,
.modal #inqSuccessMessage {
    background: #e9f6ef;
    color: var(--mm-ok);
}

.modal .alert-danger,
.modal #inqErrorMessage {
    background: var(--mm-red-wash);
    color: var(--mm-red-dark);
}

/* --- Toasts -------------------------------------------------------------- */

.toast {
    font-family: Inter, sans-serif;
    border: none !important;
    border-radius: var(--mm-radius-sm, 10px);
    box-shadow: 0 2px 8px rgba(20, 20, 26, .10), 0 12px 32px rgba(20, 20, 26, .16);
    backdrop-filter: none;
}

.toast .toast-body {
    font-size: 14.5px;
    line-height: 1.5;
    padding: 14px 16px;
    font-weight: 500;
}

.toast.bg-success { background: #10693f !important; }
.toast.bg-danger  { background: #b3161b !important; }

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 575.98px) {
    .modal-dialog {
        max-width: none;
        margin: 12px;
    }

    .modal-header { padding: 18px 18px 14px; }
    .modal-header .modal-title { font-size: 17px; }
    .modal-body   { padding: 18px; }
    .modal-footer { padding: 14px 18px; }

    /* 304px is the reCAPTCHA's fixed width; below roughly 360px of usable
       dialog it would push the layout sideways. Scaling from the left edge
       keeps it aligned with the fields above it. */
    .modal-body .g-recaptcha > div,
    .modal-body #dlRecaptcha > div,
    .modal-body #inqRecaptcha > div,
    .modal-body #downloadRecaptcha > div {
        transform: scale(.88);
        transform-origin: 0 0;
        margin-bottom: -9px;
    }

    .modal-footer button[type="submit"],
    .modal-footer .btn-success { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .modal .btn-success,
    .modal button[type="submit"],
    .modal-header .btn-close,
    .modal-body .form-control { transition: none; }
    .modal .btn-success:active,
    .modal button[type="submit"]:active { transform: none; }
}