/* SA Inquiry Form — Sabbir Ahmed */
.sa-if-form {
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 24px;
    padding: 40px;
    box-sizing: border-box;
    position: relative;
}

.sa-if-grid {
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 20px;
    width: 100%;
    align-items: flex-start;
}

.sa-if-field {
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;
}

/* Column widths — using calc with fixed fallback gap.
   Formula: width = X% - (column-gap) × (1 - X/100).
   CSS column-gap isn't readable from calc, so we compensate by
   taking slightly less than X% — the flex wrap + column-gap handles the rest. */
.sa-if-col-10  { flex-basis: calc(10%  - 18px); max-width: calc(10%  - 18px); }
.sa-if-col-20  { flex-basis: calc(20%  - 16px); max-width: calc(20%  - 16px); }
.sa-if-col-25  { flex-basis: calc(25%  - 15px); max-width: calc(25%  - 15px); }
.sa-if-col-30  { flex-basis: calc(30%  - 14px); max-width: calc(30%  - 14px); }
.sa-if-col-33  { flex-basis: calc(33.333% - 13.33px); max-width: calc(33.333% - 13.33px); }
.sa-if-col-40  { flex-basis: calc(40%  - 12px); max-width: calc(40%  - 12px); }
.sa-if-col-50  { flex-basis: calc(50%  - 10px); max-width: calc(50%  - 10px); }
.sa-if-col-60  { flex-basis: calc(60%  - 8px);  max-width: calc(60%  - 8px); }
.sa-if-col-66  { flex-basis: calc(66.666% - 6.67px); max-width: calc(66.666% - 6.67px); }
.sa-if-col-70  { flex-basis: calc(70%  - 6px);  max-width: calc(70%  - 6px); }
.sa-if-col-75  { flex-basis: calc(75%  - 5px);  max-width: calc(75%  - 5px); }
.sa-if-col-80  { flex-basis: calc(80%  - 4px);  max-width: calc(80%  - 4px); }
.sa-if-col-90  { flex-basis: calc(90%  - 2px);  max-width: calc(90%  - 2px); }
.sa-if-col-100 { flex-basis: 100%; max-width: 100%; }

/* Tablet */
@media (max-width: 1024px) {
    .sa-if-col-10, .sa-if-col-20, .sa-if-col-25, .sa-if-col-30,
    .sa-if-col-33, .sa-if-col-40 {
        flex-basis: calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
    .sa-if-col-60, .sa-if-col-66, .sa-if-col-70, .sa-if-col-75,
    .sa-if-col-80, .sa-if-col-90 {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Mobile */
@media (max-width: 767px) {
    [class*="sa-if-col-"] {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

.sa-if-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.3;
}

.sa-if-req {
    color: #ffffff;
    margin-left: 2px;
}

/* ── Inputs ── */
.sa-if-input {
    width: 100%;
    padding: 14px 22px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 100px;
    color: #ffffff;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.25s ease, background 0.25s ease;
    appearance: none;
    -webkit-appearance: none;
}

.sa-if-input::placeholder {
    color: rgba(255,255,255,0.40);
}

.sa-if-input:focus {
    border-color: rgba(255,255,255,0.40);
    background: rgba(255,255,255,0.06);
}

.sa-if-textarea {
    border-radius: 20px;
    resize: vertical;
    min-height: 120px;
    padding: 16px 22px;
}

/* ── Pills ── */
.sa-if-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sa-if-pill {
    padding: 12px 22px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 100px;
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
    outline: none;
}

.sa-if-pill:hover {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
}

.sa-if-pill.is-active {
    background: #ffffff;
    color: #111111;
    border-color: #ffffff;
    font-weight: 600;
}

/* ── Checkbox ── */
.sa-if-cb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.sa-if-cb input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #ffffff;
    cursor: pointer;
    margin: 0;
}

.sa-if-cb-label {
    font-size: 14px;
    color: rgba(255,255,255,0.80);
    line-height: 1.4;
}

/* ── Submit ── */
.sa-if-container {
    display: block;
    width: 100%;
}

.sa-if-submit-wrap {
    display: flex;
    justify-content: flex-start;
    margin-top: 24px;
    /* Now outside form-box border */
}

.sa-if-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(90deg, #6366f1, #3b82f6);
    color: #ffffff;
    border: none;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    outline: none;
}

.sa-if-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.sa-if-submit:active { transform: translateY(0); }
.sa-if-submit:disabled { opacity: 0.7; cursor: wait; transform: none; }

.sa-if-submit-icon { display: inline-flex; align-items: center; }
.sa-if-submit-icon svg, .sa-if-submit-icon i { width: 16px; height: 16px; font-size: 14px; }

.sa-if-spinner {
    display: none;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: sa-if-spin 0.7s linear infinite;
}
.sa-if-submit.is-loading .sa-if-submit-icon { display: none; }
.sa-if-submit.is-loading .sa-if-spinner { display: inline-block; }
@keyframes sa-if-spin { to { transform: rotate(360deg); } }

.sa-if-message {
    margin-top: 16px;
    padding: 0;
    min-height: 0;
    font-size: 14px;
    line-height: 1.5;
}
.sa-if-message.is-success {
    padding: 14px 18px;
    background: rgba(34,197,94,0.12);
    border: 1px solid rgba(34,197,94,0.35);
    border-radius: 12px;
    color: #22c55e;
}
.sa-if-message.is-error {
    padding: 14px 18px;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.35);
    border-radius: 12px;
    color: #ef4444;
}