/* =====================================================================
   KlinikPlus – General Inquiry Form modal (mobile-first)
   ---------------------------------------------------------------------
   Brand colours: coral #FF8E6C, ink #150F02. One shared sheet for every
   regular CTA; the dialog is centred and scrolls on short viewports.
   ===================================================================== */

.inquiry-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(21, 15, 2, 0.55);
    overflow-y: auto;
}

.inquiry-modal[hidden] {
    display: none !important;
}

@media (min-width: 640px) {
    .inquiry-modal {
        align-items: center;
        padding: 14px 16px;
    }
}

.inquiry-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 100%;
    overflow-y: auto;
    background: #FFFFFF;
    border-radius: 24px 24px 0 0;
    padding: 22px 18px 20px;
    box-shadow: 0 24px 80px rgba(21, 15, 2, 0.22);
    font-family: Outfit, sans-serif;
    color: #150F02;
}

@media (min-width: 640px) {
    .inquiry-modal__dialog {
        border-radius: 20px;
        padding: 18px 30px 16px;
        max-height: min(95vh, 920px);
    }
}

.inquiry-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 9999px;
    background: #F4F1EF;
    color: #150F02;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inquiry-modal__icon {
    width: 30px;
    height: 30px;
    margin: 0 auto 5px;
    border-radius: 9999px;
    background: rgba(255, 142, 108, 0.14);
    color: #FF8E6C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
}

.inquiry-modal__title {
    margin: 0 0 6px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: #150F02;
}

@media (min-width: 640px) {
    .inquiry-modal__title {
        font-size: 1.375rem;
    }
}

.inquiry-modal__subtitle {
    margin: 0 auto 10px;
    max-width: 600px;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.45;
    font-weight: 400;
    color: #6B6B6B;
}

.inquiry-form__honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.inquiry-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 14px;
}

@media (min-width: 640px) {
    .inquiry-form__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.inquiry-form__field {
    margin: 0 0 10px;
    border: 0;
    min-width: 0;
    padding: 0;
}

.inquiry-form__grid .inquiry-form__field {
    margin-bottom: 0;
}

/* Country + Services sit on one row. `align-items: start` keeps the country
   control at the top of its cell when the services panel opens and grows
   the row; without it the cell would stretch and the two labels would stop
   lining up. The row still needs the bottom margin a standalone field has,
   which `.inquiry-form__grid .inquiry-form__field` zeroes out. */
.inquiry-form__grid--pair {
    align-items: start;
    margin-bottom: 10px;
}

/* Direct child only: the service checkboxes are <label>s too, nested
   inside the services fieldset, and a descendant selector here beat
   `.inquiry-form__service` on specificity and resized every chip. */
.inquiry-form__field > label,
.inquiry-form__field > legend {
    display: block;
    margin-bottom: 5px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #150F02;
}

.inquiry-form__req {
    color: #E5484D;
}

.inquiry-form__control {
    position: relative;
}

.inquiry-form__control i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9A9590;
    font-size: 0.75rem;
    pointer-events: none;
    z-index: 1;
}

.inquiry-form__control input,
.inquiry-form__control select,
.inquiry-form textarea {
    width: 100%;
    height: 38px;
    border: 1px solid #E5E1DC;
    border-radius: 9px;
    padding: 0 12px 0 34px;
    background: #FFFFFF;
    color: #150F02;
    font-family: Outfit, sans-serif;
    font-size: 0.8125rem;
    outline: none;
    appearance: none;
}

.inquiry-form textarea {
    height: auto;
    min-height: 52px;
    padding: 8px 12px;
    resize: vertical;
    line-height: 1.5;
}

.inquiry-form__control input:focus,
.inquiry-form__control select:focus,
.inquiry-form textarea:focus,
.inquiry-form input[type="tel"]:focus {
    border-color: #FF8E6C;
    box-shadow: 0 0 0 3px rgba(255, 142, 108, 0.18);
}

.inquiry-form__control--select select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236B6B6B' d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* intl-tel-input lives on the raw tel input (no left icon), same as checkout */
.inquiry-form__field .iti {
    width: 100%;
}

.inquiry-form__field .iti input[type="tel"] {
    padding-left: var(--iti-pad-left, 82px);
    height: 38px;
}

/* The service picker is a collapsed dropdown at EVERY width. Open, the
   fifteen checkboxes buried the message field and the submit button on a
   phone and made the modal a long scroll on desktop. This reads like a
   select and opens into the checkbox list; a native <select multiple>
   cannot do it because more than one service can be picked. */
.inquiry-form__services-dd {
    position: relative;
}

.inquiry-form__services-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid #E5E1DC;
    border-radius: 9px;
    background: #FFFFFF;
    color: #9A9590;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

/* once something is picked the label is a value, not a placeholder */
.inquiry-form__services-dd.has-selection .inquiry-form__services-toggle {
    color: #150F02;
}

.inquiry-form__services-toggle i {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    color: #9A9590;
    transition: transform 0.2s ease;
}

.inquiry-form__services-dd.is-open .inquiry-form__services-toggle {
    border-color: #FF8E6C;
}

.inquiry-form__services-dd.is-open .inquiry-form__services-toggle i {
    transform: rotate(180deg);
}

/* The panel expands in flow rather than floating over the form: the modal
   is its own scroll container, so an absolutely positioned menu would be
   clipped by it. */
.inquiry-form__services {
    display: none;
    margin-top: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #E5E1DC;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.inquiry-form__services-dd.is-open .inquiry-form__services {
    display: block;
}

/* --- category groups, mirroring the header's Services mega-menu ------- */
.inquiry-form__services-group + .inquiry-form__services-group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #F0ECE8;
}

.inquiry-form__services-group-title {
    margin: 0 0 7px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #FF8E6C;
}

.inquiry-form__services-items {
    /* auto-fit against a 200px floor, not a fixed column count: the panel
       now sits in a half-width grid cell on wide screens and full width on
       a phone, so the columns have to follow the panel, not the viewport.
       200px is what the longest label ("Medical Facilitator Networking")
       needs beside its checkbox, so in practice this resolves to a single
       column at both widths and every chip is one line, 32px. At the 132px
       floor a phone fitted two columns and a third of the labels wrapped,
       leaving a ragged 48px/32px mix. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 6px;
}

.inquiry-form__service {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 9px;
    border: 1px solid #E5E1DC;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    color: #150F02;
    cursor: pointer;
    background: #FFFFFF;
}

.inquiry-form__service:has(input:checked),
.inquiry-form__service.is-checked {
    border-color: #FF8E6C;
    background: rgba(255, 142, 108, 0.08);
}

.inquiry-form__service input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #FF8E6C;
    flex: 0 0 auto;
}

/* Label on the left, counter on the right, textarea across both. */
.inquiry-form__field--message {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 10px;
}

.inquiry-form__field--message > textarea {
    grid-column: 1 / -1;
}

.inquiry-form__counter {
    margin: 0 0 5px;
    text-align: right;
    font-size: 0.6875rem;
    color: #9A9590;
}

.inquiry-form__agree {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 8px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #373737;
}

.inquiry-form__agree input {
    margin-top: 3px;
    accent-color: #FF8E6C;
    flex: 0 0 auto;
}

.inquiry-form__agree a {
    color: #FF8E6C;
    text-decoration: underline;
}

.inquiry-form__gdpr {
    margin: 0 0 10px;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: #8A8580;
}

.inquiry-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 11px;
    background: #FF8E6C;
    color: #FFFFFF;
    font-family: Outfit, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 142, 108, 0.32);
}

.inquiry-form__submit:hover {
    background: #FF7A5C;
}

body.inquiry-modal-open {
    overflow: hidden;
}

/* Global `button { height: 54px }` rules must not stretch the close control
   or the service checkboxes. */
.inquiry-modal button.inquiry-modal__close,
.inquiry-form .inquiry-form__submit {
    height: auto !important;
}

/* =====================================================================
   Type sizes, pinned against the site-wide `!important` rules
   ---------------------------------------------------------------------
   klinikplus.css and updated.css set element-level sizes with
   `!important` — `h2 { font-size: 48px !important }`, and inside
   1024–1500px `p { 14px !important }` plus a bare
   `textarea, select { 14px !important }` (it rides along on
   `form.transform-form-fields input, textarea, select`). Those out-rank
   the plain class rules above, so the modal title rendered at 32px
   against the 24px asked for here, and the select, the textarea and the
   category captions all snapped back to 14px.

   Repeating the intended values with `!important` is the only thing that
   holds. Every selector is scoped inside the modal, so nothing here can
   reach the rest of the page.
   ===================================================================== */
.inquiry-modal .inquiry-modal__title {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
}

@media (min-width: 640px) {
    .inquiry-modal .inquiry-modal__title {
        font-size: 1.375rem !important;
    }
}

.inquiry-modal .inquiry-modal__subtitle {
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
}

.inquiry-modal .inquiry-form__gdpr {
    font-size: 0.6875rem !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
}

/* The agree row is a <label>, so the global label sizing does not reach it,
   but the paragraph rules do reach the text inside. */
.inquiry-modal .inquiry-form__agree {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
}

.inquiry-modal .inquiry-form__services-group-title {
    font-size: 0.6875rem !important;
    line-height: 1.4 !important;
}

.inquiry-modal .inquiry-form__control select,
.inquiry-modal .inquiry-form textarea {
    font-size: 0.8125rem !important;
}

/* Same global `button` height rule that already needed pinning above. */
.inquiry-modal button.inquiry-form__services-toggle {
    height: auto !important;
}