/*
 * sib-forms.css — Standard form components
 *
 * Canonical classes:  .sib-label  .sib-input  .sib-select  .sib-textarea  .sib-input-help
 * Modifiers (BEM --): --required  --error  --success  --disabled
 *
 * Legacy overrides: .hInput .hSelect .hLbl .form-control .form-select .form-label .inp .lbl .sel
 *   element-qualified selectors (input.hInput, select.hSelect, …) keep specificity tight and
 *   avoid cross-element cascade (.hInput is used on <input>, <select> and <textarea>).
 *
 * Depends on:
 *   var.css   → --font-color-standard, --color-error, --color-success,
 *               --border-hover, --border-disabled, --bg-disabled, --color-disabled
 *   var.N.css → --prime-color, --prime-color-rgb, --border, --background-color
 *
 * Note: SVG dropdown arrow uses a hardcoded hex — CSS custom properties cannot
 *       be interpolated inside data URIs.
 */

/* ─── Label ──────────────────────────────────────────────────────────────── */

.sib-label,
.hLbl,
.form-label,
.lbl {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--font-color-standard);
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.sib-label--required::after {
    content: ' *';
    color: var(--color-error);
}

/* ─── Shared base ─────────────────────────────────────────────────────────── */

.sib-input,
.sib-select,
.sib-textarea,
input.hInput,
input.form-control,
input.inp,
select.hInput,
select.hSelect,
select.form-control,
select.form-select,
select.sel,
textarea.hInput,
textarea.form-control,
textarea.inp,
button.form-select {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    background: var(--background-color);
    color: #212529;
    transition: border-color .15s ease, box-shadow .15s ease;
    outline: none;
    width: 100%;
}

/* Hover */
.sib-input:hover,
.sib-select:hover,
.sib-textarea:hover,
input.hInput:hover,
input.form-control:hover,
input.inp:hover,
select.hInput:hover,
select.hSelect:hover,
select.form-control:hover,
select.form-select:hover,
select.sel:hover,
textarea.hInput:hover,
textarea.form-control:hover,
textarea.inp:hover,
button.form-select:hover {
    border-color: var(--border-hover);
}

/* Focus */
.sib-input:focus,
.sib-select:focus,
.sib-textarea:focus,
input.hInput:focus,
input.form-control:focus,
input.inp:focus,
select.hInput:focus,
select.hSelect:focus,
select.form-control:focus,
select.form-select:focus,
select.sel:focus,
textarea.hInput:focus,
textarea.form-control:focus,
textarea.inp:focus,
button.form-select:focus {
    /* !important needed to beat Standard.css: .form-control:focus { border-color: #5c9cd4 !important } */
    border-color: var(--prime-color) !important;
    /* !important needed to beat Standard.css: .form-control:focus { box-shadow: unset !important } */
    box-shadow: 0 0 0 3px rgba(var(--prime-color-rgb), .15) !important;
}

/* Disabled */
.sib-input:disabled,
.sib-input--disabled,
.sib-select:disabled,
.sib-select--disabled,
.sib-textarea:disabled,
.sib-textarea--disabled,
input.hInput:disabled,
input.form-control:disabled,
input.inp:disabled,
select.hInput:disabled,
select.hSelect:disabled,
select.form-control:disabled,
select.form-select:disabled,
button.form-select:disabled,
textarea.hInput:disabled,
textarea.form-control:disabled,
textarea.inp:disabled {
    border-color: var(--border-disabled);
    background: var(--bg-disabled);
    color: var(--color-disabled);
    cursor: not-allowed;
}

/* Readonly */
.sib-input[readonly],
.sib-textarea[readonly],
input.hInput[readonly],
input.form-control[readonly],
input.inp[readonly],
textarea.hInput[readonly],
textarea.form-control[readonly],
textarea.inp[readonly] {
    border-color: var(--border-disabled);
    background: var(--bg-disabled);
}

/* ─── Input states ───────────────────────────────────────────────────────── */

.sib-input--error { border-color: var(--color-error); }
.sib-input--error:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}

.sib-input--success { border-color: var(--color-success); }
.sib-input--success:focus {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}

/* ─── Select ─────────────────────────────────────────────────────────────── */

.sib-select,
select.hInput,
select.hSelect,
select.form-control,
select.form-select,
select.sel,
button.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23204769' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: var(--background-color);
    padding-right: 36px;
    cursor: pointer;
}

/* ─── Textarea ───────────────────────────────────────────────────────────── */

.sib-textarea,
textarea.hInput,
textarea.form-control,
textarea.inp {
    resize: vertical;
    min-height: 80px;
}

/* ─── Helper text ────────────────────────────────────────────────────────── */

.sib-input-help {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.sib-input-help--error   { color: var(--color-error); }
.sib-input-help--success { color: var(--color-success); }

/* ─── Dropdown panel (used alongside button.form-select triggers) ─────────── */

button.form-select + .dropdown-menu,
button.form-select ~ .dropdown-menu {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--font-color-standard);
    background: var(--background-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    min-width: 100%;
}

/* ─── Mobile: prevent iOS zoom on focus ──────────────────────────────────── */

@media (max-width: 640px) {
    .sib-input,
    .sib-select,
    .sib-textarea,
    input.hInput,
    input.form-control,
    input.inp,
    select.hInput,
    select.hSelect,
    select.form-control,
    select.form-select,
    textarea.hInput,
    textarea.form-control,
    textarea.inp,
    button.form-select { font-size: 16px; }
}