/* ============================================================
   GoodnessLovers — contact-form.css
   Styles for the public contact section (section#contact).
   Depends on variables.css being loaded first.
   ============================================================ */

/* ?? Section wrapper ??????????????????????????????????????????? */
.cf-section {
    background-color: var(--gl-light);
}

/* ?? Card shell ???????????????????????????????????????????????? */
.cf-card {
    background: #fff;
    border-radius: var(--gl-border-radius-lg);
    box-shadow: var(--gl-shadow-lg);
    padding: 2.5rem 2rem;
}

@media (min-width: 576px) {
    .cf-card { padding: 3rem 3rem; }
}

/* ?? Labels ???????????????????????????????????????????????????? */
.cf-card .form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gl-dark);
    margin-bottom: 0.35rem;
}

[dir="rtl"] .cf-card .form-label {
    font-family: var(--gl-font-arabic);
}

/* ?? Inputs & selects ?????????????????????????????????????????? */
.cf-card .form-control,
.cf-card .form-select {
    border-color: var(--gl-border-color);
    border-radius: var(--gl-border-radius);
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    color: var(--gl-dark);
    background-color: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cf-card .form-control:focus,
.cf-card .form-select:focus {
    border-color: var(--gl-primary);
    box-shadow: 0 0 0 0.18rem rgba(26, 127, 100, 0.22);
    outline: none;
}

.cf-card .form-control.is-valid,
.cf-card .form-select.is-valid {
    border-color: #198754;
    background-image: none;
    padding-inline-end: 0.875rem;
}

.cf-card .form-control.is-invalid,
.cf-card .form-select.is-invalid {
    border-color: #dc3545;
    background-image: none;
    padding-inline-end: 0.875rem;
}

/* ?? Topic select — accent left border ???????????????????????? */
.cf-topic-select {
    border-inline-start: 3px solid var(--gl-accent) !important;
}

/* ?? Textarea ?????????????????????????????????????????????????? */
.cf-card textarea.form-control {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* ?? Character counter ????????????????????????????????????????? */
.cf-char-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.3rem;
    min-height: 1.25rem;
}

.cf-char-count {
    font-size: 0.78rem;
    color: var(--gl-muted);
    font-variant-numeric: tabular-nums;
}

.cf-char-count.cf-char-near  { color: var(--gl-accent-dark); }
.cf-char-count.cf-char-limit { color: #dc3545; font-weight: 600; }

/* ?? Inline field error ???????????????????????????????????????? */
.cf-field-error {
    font-size: 0.8rem;
    color: #dc3545;
    margin-top: 0.3rem;
    min-height: 1rem;
}

/* ?? Required asterisk ????????????????????????????????????????? */
.cf-required {
    color: #dc3545;
    margin-inline-start: 0.15em;
    font-weight: 700;
}

/* ?? Submit button ????????????????????????????????????????????? */
.cf-submit-btn {
    min-width: 200px;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--gl-border-radius);
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.cf-submit-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(26, 127, 100, 0.3);
}

.cf-submit-btn:active {
    transform: translateY(0);
}

.cf-submit-btn:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

[dir="rtl"] .cf-submit-btn {
    font-family: var(--gl-font-arabic);
    letter-spacing: 0;
}

/* ?? Phone input — enforce LTR even in RTL page ???????????????? */
[dir="rtl"] .cf-phone-input {
    direction: ltr;
    text-align: right;
}

/* ?? Divider ??????????????????????????????????????????????????? */
.cf-divider {
    border: none;
    border-top: 1px solid var(--gl-border-color);
    margin: 1.5rem 0;
}

/* ?? Optional badge on phone label ???????????????????????????? */
.cf-optional {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--gl-muted);
    margin-inline-start: 0.4em;
}

/* ?? Focus-ring override (brand colour) ???????????????????????? */
.cf-card .form-control:focus-visible,
.cf-card .form-select:focus-visible {
    box-shadow: 0 0 0 0.18rem rgba(26, 127, 100, 0.22);
}

/* ?? RTL text direction for inputs ???????????????????????????? */
[dir="rtl"] .cf-card .form-control,
[dir="rtl"] .cf-card .form-select {
    font-family: var(--gl-font-arabic);
}