/* ==========================================================================
   Custom Quote & Contact Forms - front-end styles
   Scoped under .cqcf-form-wrap so it never leaks into the rest of the theme,
   and written defensively so the form always fits inside whatever container
   (div) it is dropped into, regardless of the active theme's own CSS.
   ========================================================================== */

.cqcf-form-wrap,
.cqcf-form-wrap * {
    box-sizing: border-box;
}

.cqcf-form-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
    font-family: inherit;
}

.cqcf-form-wrap .cqcf-form {
    width: 100%;
    max-width: 100%;
}

.cqcf-form-wrap .cqcf-response {
    display: none;
    width: 100%;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
}

.cqcf-form-wrap .cqcf-response.cqcf-success {
    display: block;
    background: #e6f6ea;
    color: #1e7e34;
    border: 1px solid #b7e4c7;
}

.cqcf-form-wrap .cqcf-response.cqcf-error {
    display: block;
    background: #fdecea;
    color: #c0392b;
    border: 1px solid #f5c6cb;
}

.cqcf-form-wrap .cqcf-field {
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
}

.cqcf-form-wrap .cqcf-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.cqcf-form-wrap .cqcf-row .cqcf-col {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 100%;
}

.cqcf-form-wrap label {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.cqcf-form-wrap .cqcf-required {
    color: #e63946;
}

.cqcf-form-wrap .cqcf-input,
.cqcf-form-wrap input[type="text"],
.cqcf-form-wrap input[type="email"],
.cqcf-form-wrap select,
.cqcf-form-wrap textarea {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto;
    margin: 0;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    background-color: #fff;
    border: 1px solid #d7dbe0;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
}

.cqcf-form-wrap select.cqcf-input {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23555'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.293l3.71-4.06a.75.75 0 111.08 1.04l-4.24 4.64a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 32px;
}

.cqcf-form-wrap textarea.cqcf-input {
    resize: vertical;
    min-height: 100px;
}

.cqcf-form-wrap .cqcf-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15);
}

.cqcf-form-wrap .cqcf-recaptcha-field {
    max-width: 100%;
    overflow-x: auto;
}

.cqcf-form-wrap .cqcf-recaptcha-widget {
    transform-origin: left top;
}

/* Screen-reader/JS-only style visually-hidden state for the real Country
   <select> once forms.js has replaced its visible UI with the custom flag
   dropdown below - it stays in the DOM (and fully valid/submittable) so
   the form still works even with JS disabled, or before enhancement runs. */
.cqcf-form-wrap select.cqcf-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Custom flag dropdown for the Country field - uses real SVG flag icons
   (flag-icons library) instead of emoji, since a native <select>'s options
   can't reliably show flag emoji on every OS/browser (notably Windows
   Chrome's native dropdown popup, which doesn't apply a color-emoji font
   there at all). */
.cqcf-form-wrap .cqcf-flag-select {
    position: relative;
    width: 100%;
}

.cqcf-form-wrap .cqcf-flag-select-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    font-family: inherit;
    color: #333;
    background-color: #fff;
    border: 1px solid #d7dbe0;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
}

.cqcf-form-wrap .cqcf-flag-select-toggle:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15);
}

.cqcf-form-wrap .cqcf-flag-select-current {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    min-width: 0;
}

.cqcf-form-wrap .cqcf-flag-select-current span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cqcf-form-wrap .cqcf-flag-select-placeholder {
    color: #7a7f87;
}

.cqcf-form-wrap .cqcf-flag-select-caret {
    flex-shrink: 0;
    margin-left: 8px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    transform: rotate(45deg);
    margin-top: -4px;
}

.cqcf-form-wrap .cqcf-flag-select-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d7dbe0;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.cqcf-form-wrap .cqcf-flag-select-search {
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid #eceef1 !important;
    border-radius: 0 !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
}

.cqcf-form-wrap .cqcf-flag-select-search:focus {
    outline: none;
    box-shadow: none;
}

.cqcf-form-wrap .cqcf-flag-select-list {
    overflow-y: auto;
    max-height: 230px;
}

.cqcf-form-wrap .cqcf-flag-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
}

.cqcf-form-wrap .cqcf-flag-select-option:hover {
    background: #f2f6ff;
}

.cqcf-form-wrap .cqcf-flag-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 15px;
    background-size: cover !important;
    border-radius: 2px;
}

/* Phone / Mobile field (intl-tel-input: flag + dial-code prefix box). Kept
   generic (no reliance on the library's internal class names, which can
   change between versions) so this keeps working across library updates -
   it just needs the widget's outer wrapper to behave like our other
   full-width fields. */
.cqcf-form-wrap .cqcf-phone-field .iti {
    display: flex;
    width: 100%;
    max-width: 100%;
}

.cqcf-form-wrap .cqcf-phone-field .iti input.cqcf-phone-input {
    width: 100% !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.cqcf-form-wrap .cqcf-submit-btn {
    display: inline-block;
    width: auto;
    min-width: 140px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    background-color: #2f6fed;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.cqcf-form-wrap .cqcf-submit-btn:hover {
    background-color: #2559c4;
}

.cqcf-form-wrap .cqcf-submit-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Small screens: stack the Country / Phone row */
@media (max-width: 480px) {
    .cqcf-form-wrap .cqcf-row {
        flex-direction: column;
        gap: 16px;
    }
    .cqcf-form-wrap .cqcf-row .cqcf-col {
        flex: 1 1 100%;
    }
}