/* ============================================================
   SERVICE INQUIRY MODAL
   FINAL RESPONSIVE VERSION

   Brand Blue (only button/accent color) : #303e5f

   Typography:
   Inherits existing website/theme typography
   ============================================================ */


/* ============================================================
   GLOBAL MODAL
   ============================================================ */

#serviceInquiryModal {
    --inquiry-blue: #303e5f;
    --inquiry-border: #d9d9d9;

    overflow: hidden !important;
}


/* ============================================================
   MODAL DIALOG
   ============================================================ */

#serviceInquiryModal .inquiry-modal-dialog {

    width: 100%;
    max-width: 600px;

    margin: 1rem auto;

    min-height: calc(100% - 2rem);

    display: flex;
    align-items: center;
}


/* ============================================================
   MODAL CONTENT
   ============================================================ */

#serviceInquiryModal .inquiry-modal-content {

    width: 100%;
    max-width: 100%;

    border: 0;
    border-radius: 12px;

    background: #ffffff;

    overflow: hidden;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.20);

    font-family: inherit;
}


/* ============================================================
   INHERIT WEBSITE FONT
   ============================================================ */

#serviceInquiryModal .inquiry-modal-content,
#serviceInquiryModal .inquiry-modal-content * {

    font-family: inherit;
}


/* ============================================================
   HEADER
   ============================================================ */

#serviceInquiryModal .modal-header {

    flex-shrink: 0;

    padding: 15px 20px;

    background: var(--inquiry-blue) !important;
    background-image: none !important;

    color: #ffffff !important;

    border: 0 !important;
}


/* TITLE */

#serviceInquiryModal .modal-title {

    margin: 0;

    padding: 0;

    color: #ffffff !important;

    font-family: inherit;

    font-size: inherit;

    font-weight: 600;

    line-height: 1.3;
}


/* ============================================================
   CLOSE BUTTON
   ============================================================ */

#serviceInquiryModal .btn-close {

    flex-shrink: 0;

    margin: 0;

    padding: 0.5rem;

    width: 1rem;
    height: 1rem;

    opacity: 1 !important;

    filter: brightness(0) invert(1) !important;

    box-shadow: none !important;
}


#serviceInquiryModal .btn-close:hover,
#serviceInquiryModal .btn-close:focus {

    opacity: 0.85 !important;

    box-shadow: none !important;

    outline: none !important;
}


/* ============================================================
   MODAL BODY
   ============================================================ */

#serviceInquiryModal .modal-body {

    padding: 20px;

    background: #ffffff;

    overflow-x: hidden;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   INTRO
   ============================================================ */

#serviceInquiryModal .inquiry-intro {

    margin: 0 0 16px;

    padding: 0;

    color: inherit;

    font-family: inherit;

    font-size: inherit;

    line-height: 1.5;
}


/* ============================================================
   FORM ROW
   ============================================================ */

#serviceInquiryModal .inquiry-form-row {

    margin-top: 0;

    margin-right: -0.5rem;

    margin-left: -0.5rem;

    row-gap: 14px;
}


/* ============================================================
   FORM FIELD
   ============================================================ */

#serviceInquiryModal .inquiry-field {

    min-width: 0;
}


/* ============================================================
   LABEL
   ============================================================ */

#serviceInquiryModal .form-label {

    display: block;

    width: 100%;

    margin-bottom: 6px;

    font-family: inherit;

    font-size: inherit;

    font-weight: 500;

    line-height: 1.4;

    color: inherit;
}


/* REQUIRED STAR */

#serviceInquiryModal .text-danger {

    color: #dc3545 !important;
}


/* ============================================================
   INPUT + SELECT
   ============================================================ */

#serviceInquiryModal .form-control,
#serviceInquiryModal .form-select {

    display: block;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    min-height: 42px;

    padding: 8px 12px;

    font-family: inherit;

    font-size: inherit;

    line-height: 1.5;

    color: var(--inquiry-blue) !important;

    background-color: #ffffff !important;

    background-clip: padding-box;

    border: 1px solid var(--inquiry-border) !important;

    border-radius: 6px;

    box-shadow: none;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* ============================================================
   PLACEHOLDER
   ============================================================ */

#serviceInquiryModal .form-control::placeholder {

    color: #6c757d;

    opacity: 0.8;
}


/* ============================================================
   FOCUS
   ============================================================ */

#serviceInquiryModal .form-control:focus,
#serviceInquiryModal .form-select:focus {

    color: var(--inquiry-blue) !important;

    background-color: #ffffff !important;

    border-color: var(--inquiry-blue) !important;

    outline: none !important;

    box-shadow:
        0 0 0 0.15rem rgba(48, 62, 95, 0.15) !important;
}


/* ============================================================
   TEXTAREA
   ============================================================ */

#serviceInquiryModal textarea.form-control {

    width: 100%;

    max-width: 100%;

    min-height: 80px;

    height: auto;

    resize: vertical;
}


/* ============================================================
   SELECT
   ============================================================ */

#serviceInquiryModal .form-select {

    cursor: pointer;

    text-overflow: ellipsis;
}


/* Native options */

#serviceInquiryModal .form-select option {

    background: #ffffff;

    color: var(--inquiry-blue);
}


/* ============================================================
   SUBMIT WRAPPER
   ============================================================ */

#serviceInquiryModal .inquiry-submit-wrap {

    width: 100%;

    margin-top: 18px;
}


/* ============================================================
   SUBMIT BUTTON
   Only #303e5f is used — normal, hover, focus, active, disabled.
   ============================================================ */

#serviceInquiryModal #inquirySubmitBtn,
#serviceInquiryModal #inquirySubmitBtn:hover,
#serviceInquiryModal #inquirySubmitBtn:focus,
#serviceInquiryModal #inquirySubmitBtn:focus-visible,
#serviceInquiryModal #inquirySubmitBtn:active,
#serviceInquiryModal #inquirySubmitBtn:visited {

    color: #ffffff !important;

    background: var(--inquiry-blue) !important;
    background-color: var(--inquiry-blue) !important;
    background-image: none !important;

    border: 1px solid var(--inquiry-blue) !important;
    border-color: var(--inquiry-blue) !important;

    box-shadow: none !important;

    outline: none !important;

    transform: none !important;

    transition: none !important;
}

#serviceInquiryModal #inquirySubmitBtn {

    display: block;

    width: 100%;

    min-height: 44px;

    padding: 9px 16px;

    margin: 0;

    font-family: inherit;

    font-size: inherit;

    font-weight: 600;

    line-height: 1.5;

    cursor: pointer;
}


/* DISABLED */

#serviceInquiryModal #inquirySubmitBtn:disabled {

    color: #ffffff !important;

    background: var(--inquiry-blue) !important;

    border-color: var(--inquiry-blue) !important;

    opacity: 0.65;

    cursor: not-allowed;
}


/* ============================================================
   VALIDATION
   ============================================================ */

#serviceInquiryModal .invalid-feedback {

    margin-top: 4px;

    font-family: inherit;

    font-size: 0.875em;

    line-height: 1.4;
}


/* ============================================================
   RESPONSE
   ============================================================ */

#serviceInquiryModal #formResponseMsg {

    width: 100%;

    margin-top: 12px;
}


#serviceInquiryModal #formResponseMsg .alert {

    margin-bottom: 0;

    border-radius: 6px;

    font-family: inherit;

    font-size: inherit;
}


/* ============================================================
   BACKDROP
   ============================================================ */

.modal-backdrop.show {

    opacity: 0.65;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 767.98px) {

    #serviceInquiryModal .inquiry-modal-dialog {

        max-width: calc(100% - 24px);

        margin: 12px auto;

        min-height: calc(100% - 24px);
    }

    #serviceInquiryModal .modal-body {

        padding: 18px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 575.98px) {

    #serviceInquiryModal .inquiry-modal-dialog {

        width: calc(100% - 16px);

        max-width: none;

        margin: 8px auto;

        min-height: calc(100% - 16px);
    }


    #serviceInquiryModal .inquiry-modal-content {

        width: 100%;

        max-height: calc(100vh - 16px);

        border-radius: 10px;
    }


    #serviceInquiryModal .modal-header {

        padding: 13px 15px;
    }


    #serviceInquiryModal .modal-body {

        padding: 15px;

        max-height: calc(100vh - 70px);

        overflow-y: auto;
    }


    #serviceInquiryModal .modal-title {

        font-size: 1rem;

        line-height: 1.3;
    }


    #serviceInquiryModal .inquiry-intro {

        margin-bottom: 13px;

        line-height: 1.4;
    }


    /* STACK ALL FIELDS */

    #serviceInquiryModal .inquiry-field {

        width: 100%;

        flex: 0 0 100%;

        max-width: 100%;
    }


    #serviceInquiryModal .inquiry-form-row {

        margin-right: 0;

        margin-left: 0;

        row-gap: 11px;
    }


    #serviceInquiryModal .form-label {

        margin-bottom: 5px;
    }


    #serviceInquiryModal .form-control,
    #serviceInquiryModal .form-select {

        width: 100%;

        min-height: 40px;

        padding: 7px 11px;
    }


    #serviceInquiryModal textarea.form-control {

        min-height: 75px;
    }


    #serviceInquiryModal .inquiry-submit-wrap {

        margin-top: 14px;
    }


    #serviceInquiryModal #inquirySubmitBtn {

        width: 100%;

        min-height: 42px;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 400px) {

    #serviceInquiryModal .inquiry-modal-dialog {

        width: calc(100% - 10px);

        margin: 5px auto;
    }


    #serviceInquiryModal .inquiry-modal-content {

        max-height: calc(100vh - 10px);

        border-radius: 8px;
    }


    #serviceInquiryModal .modal-header {

        padding: 11px 13px;
    }


    #serviceInquiryModal .modal-body {

        padding: 13px;
    }


    #serviceInquiryModal .modal-title {

        font-size: 0.95rem;
    }


    #serviceInquiryModal .inquiry-intro {

        font-size: 0.9rem;

        margin-bottom: 11px;
    }


    #serviceInquiryModal .form-control,
    #serviceInquiryModal .form-select {

        min-height: 39px;

        padding: 6px 10px;
    }


    #serviceInquiryModal textarea.form-control {

        min-height: 70px;
    }


    #serviceInquiryModal #inquirySubmitBtn {

        min-height: 40px;

        padding: 8px 12px;
    }

}


/* ============================================================
   EXTRA SMALL DEVICES
   ============================================================ */

@media (max-width: 320px) {

    #serviceInquiryModal .inquiry-modal-dialog {

        width: calc(100% - 6px);

        margin: 3px auto;
    }


    #serviceInquiryModal .modal-body {

        padding: 11px;
    }


    #serviceInquiryModal .modal-header {

        padding: 10px 11px;
    }


    #serviceInquiryModal .inquiry-intro {

        font-size: 0.85rem;
    }

}


/* ================================================================
   ================================================================
   STANDALONE / SMALL FORM WIDGET VERSION
   For embedding the same enquiry form OUTSIDE the modal —
   sidebars, footer widgets, narrow columns, small cards.

   This version reacts to the width of ITS OWN CONTAINER
   (via CSS container queries), not just the browser viewport.
   So even on a wide desktop screen, if this widget sits inside
   a narrow 260px sidebar, it will still stack and shrink
   correctly — a plain @media query cannot do that.
   ================================================================
   ================================================================ */

.inquiry-widget-wrap {

    /* Turns this element into a "container" so children can
       query ITS width instead of the viewport width. */
    container-type: inline-size;
    container-name: inquiryWidget;

    width: 100%;
    max-width: 100%;

    /* Never scroll — the widget grows to whatever height its
       content needs. No max-height/overflow-y is ever set on
       this wrapper or on .inquiry-widget below. */
    overflow: visible;
}


.inquiry-widget {

    --inquiry-blue: #303e5f;
    --inquiry-border: #d9d9d9;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid var(--inquiry-border);
    border-radius: 10px;

    /* visible (not hidden/auto/scroll) — the box's own height
       is always intrinsic to its content, so it never clips
       and never grows a scrollbar, at any width. */
    overflow: visible;

    font-family: inherit;
}

.inquiry-widget * {

    box-sizing: border-box;

    font-family: inherit;

    /* Safety net: long/unbroken words (e.g. a long email typed
       in without spaces) wrap instead of forcing a horizontal
       scrollbar on very narrow widths. */
    overflow-wrap: break-word;
    word-break: break-word;
}


/* HEADER (optional small title bar for the widget) */

.inquiry-widget .inquiry-widget-header {

    padding: 12px 16px;

    background: var(--inquiry-blue);

    color: #ffffff;

    font-weight: 600;

    font-size: 0.95rem;

    line-height: 1.3;

    /* Rounds only the top corners, since the wrapper itself
       no longer clips (overflow: visible) */
    border-radius: 10px 10px 0 0;
}


/* BODY */

.inquiry-widget .inquiry-widget-body {

    padding: 16px;

    /* Rounds only the bottom corners to match the wrapper */
    border-radius: 0 0 10px 10px;

    overflow: visible;
}


.inquiry-widget .inquiry-intro {

    margin: 0 0 12px;

    font-size: 0.9rem;

    line-height: 1.45;

    color: inherit;
}


/* FORM ROW — always stacked by default in the widget,
   since widgets are usually placed in narrow spaces. */

.inquiry-widget .inquiry-form-row {

    display: flex;

    flex-wrap: wrap;

    margin: 0 -0.4rem;

    row-gap: 12px;
}


.inquiry-widget .inquiry-field {

    width: 100%;

    flex: 0 0 100%;

    max-width: 100%;

    padding: 0 0.4rem;

    min-width: 0;
}


.inquiry-widget .form-label {

    display: block;

    width: 100%;

    margin-bottom: 5px;

    font-size: 0.85rem;

    font-weight: 500;

    line-height: 1.35;

    color: inherit;
}


.inquiry-widget .text-danger {

    color: #dc3545;
}


.inquiry-widget .form-control,
.inquiry-widget .form-select {

    display: block;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    min-height: 38px;

    padding: 7px 10px;

    font-size: 0.9rem;

    line-height: 1.4;

    color: var(--inquiry-blue) !important;

    background-color: #ffffff !important;

    border: 1px solid var(--inquiry-border) !important;

    border-radius: 6px;

    box-shadow: none;

    outline: none;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


.inquiry-widget .form-control::placeholder {

    color: #6c757d;

    opacity: 0.8;
}


.inquiry-widget .form-control:focus,
.inquiry-widget .form-select:focus {

    color: var(--inquiry-blue) !important;

    border-color: var(--inquiry-blue) !important;

    outline: none !important;

    box-shadow: 0 0 0 0.15rem rgba(48, 62, 95, 0.15) !important;
}


.inquiry-widget textarea.form-control {

    min-height: 70px;

    height: auto;

    resize: vertical;
}


.inquiry-widget .form-select {

    cursor: pointer;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.inquiry-widget .form-select option {

    background: #ffffff;

    color: var(--inquiry-blue);
}


.inquiry-widget .invalid-feedback {

    margin-top: 4px;

    font-size: 0.8em;

    line-height: 1.35;
}


/* SUBMIT — same single brand color in every state */

.inquiry-widget .inquiry-submit-wrap {

    width: 100%;

    margin-top: 14px;
}


.inquiry-widget #inquirySubmitBtnWidget,
.inquiry-widget #inquirySubmitBtnWidget:hover,
.inquiry-widget #inquirySubmitBtnWidget:focus,
.inquiry-widget #inquirySubmitBtnWidget:focus-visible,
.inquiry-widget #inquirySubmitBtnWidget:active,
.inquiry-widget #inquirySubmitBtnWidget:visited {

    color: #ffffff !important;

    background: var(--inquiry-blue) !important;
    background-color: var(--inquiry-blue) !important;
    background-image: none !important;

    border: 1px solid var(--inquiry-blue) !important;
    border-color: var(--inquiry-blue) !important;

    box-shadow: none !important;

    outline: none !important;

    transform: none !important;

    transition: none !important;
}

.inquiry-widget #inquirySubmitBtnWidget {

    display: block;

    width: 100%;

    min-height: 40px;

    padding: 8px 14px;

    margin: 0;

    font-size: 0.9rem;

    font-weight: 600;

    line-height: 1.4;

    cursor: pointer;

    border-radius: 6px;
}


.inquiry-widget #inquirySubmitBtnWidget:disabled {

    color: #ffffff !important;

    background: var(--inquiry-blue) !important;

    border-color: var(--inquiry-blue) !important;

    opacity: 0.65;

    cursor: not-allowed;
}


.inquiry-widget #formResponseMsgWidget {

    width: 100%;

    margin-top: 10px;
}


.inquiry-widget #formResponseMsgWidget .alert {

    margin-bottom: 0;

    padding: 8px 10px;

    border-radius: 6px;

    font-size: 0.85rem;
}


/* ----------------------------------------------------------------
   CONTAINER QUERY: MEDIUM WIDGET (e.g. wider sidebar, ~480px+)
   Two fields side by side, since there's enough room.
   ---------------------------------------------------------------- */

@container inquiryWidget (min-width: 420px) {

    .inquiry-widget .inquiry-field[data-pair="half"] {

        flex: 0 0 calc(50% - 0.8rem);

        max-width: calc(50% - 0.8rem);
    }
}


/* ----------------------------------------------------------------
   CONTAINER QUERY: COMPACT WIDGET (below ~360px)
   Tighter padding, smaller type — e.g. a narrow footer column.
   ---------------------------------------------------------------- */

@container inquiryWidget (max-width: 360px) {

    .inquiry-widget .inquiry-widget-header {

        padding: 10px 13px;

        font-size: 0.88rem;
    }

    .inquiry-widget .inquiry-widget-body {

        padding: 13px;
    }

    .inquiry-widget .inquiry-intro {

        font-size: 0.85rem;

        margin-bottom: 10px;
    }

    .inquiry-widget .form-label {

        font-size: 0.8rem;
    }

    .inquiry-widget .form-control,
    .inquiry-widget .form-select {

        min-height: 36px;

        padding: 6px 9px;

        font-size: 0.85rem;
    }

    .inquiry-widget textarea.form-control {

        min-height: 60px;
    }

    .inquiry-widget #inquirySubmitBtnWidget {

        min-height: 38px;

        font-size: 0.85rem;
    }
}


/* ----------------------------------------------------------------
   CONTAINER QUERY: MICRO WIDGET (below ~260px)
   Smallest realistic size — a tight corner card or a mobile
   sidebar drawer.
   ---------------------------------------------------------------- */

@container inquiryWidget (max-width: 260px) {

    .inquiry-widget {

        border-radius: 8px;
    }

    .inquiry-widget .inquiry-widget-header {

        padding: 9px 11px;

        font-size: 0.82rem;
    }

    .inquiry-widget .inquiry-widget-body {

        padding: 11px;
    }

    .inquiry-widget .inquiry-form-row {

        row-gap: 9px;
    }

    .inquiry-widget .inquiry-intro {

        font-size: 0.78rem;

        margin-bottom: 9px;
    }

    .inquiry-widget .form-control,
    .inquiry-widget .form-select {

        min-height: 34px;

        padding: 5px 8px;

        font-size: 0.8rem;
    }

    .inquiry-widget textarea.form-control {

        min-height: 54px;
    }

    .inquiry-widget #inquirySubmitBtnWidget {

        min-height: 36px;

        height: auto;

        padding: 8px 10px;

        font-size: 0.8rem;

        white-space: normal;

        line-height: 1.3;
    }
}


/* ----------------------------------------------------------------
   FALLBACK for browsers without container-query support:
   behaves like a normal responsive block using viewport width.
   Safe no-op on modern browsers since container queries win
   when supported.
   ---------------------------------------------------------------- */

@supports not (container-type: inline-size) {

    @media (max-width: 480px) {

        .inquiry-widget .inquiry-widget-body {

            padding: 13px;
        }

        .inquiry-widget .form-control,
        .inquiry-widget .form-select {

            min-height: 36px;

            font-size: 0.85rem;
        }
    }
}