/* =============================================================
   Shortcode: Project Inquiry Form  (qb-pif)

   Figma tokens used:
     secondary-10   #fffdfd  field background
     secondary-40   #bea6a4  field border + required star
     secondary-60   #967e7c  alt required star
     secondary-100  #443534  label color
     primary-10     #f1f1f1  submit text
     primary-100    #262221  submit background
     font-40        #cfd0d0  placeholder text
     font-100       #252525  filled text / chosen dropdown value
     error          #c93c3c  inline validation
   ============================================================= */

.qb-pif {
    width: 100%;
    font-family: 'Clash Display', 'Cairo', system-ui, sans-serif;
    color: #252525;
    box-sizing: border-box;
}
.qb-pif *, .qb-pif *::before, .qb-pif *::after { box-sizing: border-box; }

/* ---------- Success banner ---------- */
.qb-pif__success {
    background: #e9f6ee;
    color: #1f6b3a;
    border: 1px solid #bfe4cc;
    padding: 14px 20px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
}

/* ---------- Form layout ---------- */
.qb-pif__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Row — single column by default, 2 columns via modifier */
.qb-pif__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}
.qb-pif__row--2 {
    grid-template-columns: 1fr 1fr;
}

/* Field (label + control + inline error) */
.qb-pif__field {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Label */
.qb-pif__label {
    margin: 0;
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.1;
    color: #443534;
}
.qb-pif__req {
    color: #bea6a4;   /* matches Figma "*" hue */
    margin-inline-start: 4px;
}

/* Inputs, textarea, select share the .qb-pif__input look */
.qb-pif__input {
    width: 100%;
    height: 56px;
    padding: 18px 24px;
    background: #fffdfd;
    border: 1px solid #bea6a4;
    border-radius: 0;
    outline: none;
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.1;
    color: #252525;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    appearance: none;
    -webkit-appearance: none;
}
.qb-pif__input::placeholder {
    color: #cfd0d0;
    font-weight: 500;
    opacity: 1;
}
.qb-pif__input:focus {
    border-color: #967e7c;
    box-shadow: 0 0 0 3px rgba(150, 126, 124, 0.15);
}
.qb-pif__input.is-invalid {
    border-color: #c93c3c;
    background: #fff8f8;
}
.qb-pif__input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(201, 60, 60, 0.15);
}

/* Textarea */
.qb-pif__textarea {
    height: 200px;
    padding: 18px 24px;
    resize: vertical;
    line-height: 1.5;
}

/* Select wrapper (custom caret overlay) */
.qb-pif__select-wrap {
    position: relative;
    width: 100%;
}
.qb-pif__select {
    padding-inline-end: 56px;
    background-image: none;
    cursor: pointer;
    color: #252525;
}
/* Placeholder option (disabled first one) shows muted color */
.qb-pif__select:required:invalid {
    color: #cfd0d0;
}
.qb-pif__select option {
    color: #252525;
    background: #fffdfd;
}
.qb-pif__select option[disabled] {
    color: #cfd0d0;
}

/* Caret */
.qb-pif__caret {
    position: absolute;
    top: 50%;
    inset-inline-end: 24px;
    transform: translateY(-50%);
    color: #252525;
    pointer-events: none;
}

/* Inline error text */
.qb-pif__error {
    margin: 0;
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #c93c3c;
}

/* reCAPTCHA block */
.qb-pif__recaptcha {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---------- Submit button ---------- */
.qb-pif__submit {
    position: relative;
    margin-top: 44px;
    width: 100%;
    height: 48px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #262221;
    color: #f1f1f1;
    border: 1px solid #262221;
    border-radius: 0;
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.qb-pif__submit:hover:not(:disabled) {
    background: #3a3231;
    border-color: #3a3231;
}
.qb-pif__submit:disabled {
    opacity: .65;
    cursor: not-allowed;
}
.qb-pif__submit-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(241, 241, 241, 0.5);
    border-top-color: #f1f1f1;
    border-radius: 50%;
    display: none;
    animation: qbPifSpin .7s linear infinite;
}
.qb-pif__submit.is-loading .qb-pif__submit-spinner {
    display: inline-block;
}
@keyframes qbPifSpin { to { transform: rotate(360deg); } }

/* ---------- RTL ---------- */
.qb-pif--rtl .qb-pif__label,
.qb-pif--rtl .qb-pif__input,
.qb-pif--rtl .qb-pif__error { text-align: right; }

/* Arabic font — Clash Display has no Arabic glyphs, switch everything to Cairo */
.qb-pif--rtl .qb-pif__label,
.qb-pif--rtl .qb-pif__input,
.qb-pif--rtl .qb-pif__error,
.qb-pif--rtl .qb-pif__submit { font-family: 'Ooredoo Arabic', 'Cairo', sans-serif; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .qb-pif__row--2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .qb-pif__label { font-size: 13px; }
    .qb-pif__input { height: 52px; padding: 16px 20px; font-size: 13px; }
    .qb-pif__textarea { height: 180px; padding: 16px 20px; }
    .qb-pif__caret { inset-inline-end: 20px; }
}