/* ============================================================
   SHARED FORM SYSTEM — customer storefront
   ============================================================

   The storefront had grown two unrelated input treatments:

     checkout (jumia-checkout.css)  8px radius, 1.5px #d5d5d5, 48px tall,
                                    focus ring, #aaa placeholder
     auth     (jumia-auth.css)      4px radius, 1px #c8c8c8, ~46px tall,
                                    NO focus ring, #999 placeholder

   so a customer moving from sign-in to checkout met visibly different
   fields, neither of which had an error, disabled or success state worth
   the name — auth had none at all.

   This file owns the STATES every input must communicate, in one place, as
   tokens. Page-level files keep their own geometry; nothing here restyles
   an input's size or shape, so no existing layout shifts. It is registered
   immediately after theme.css and before the page CSS, so a page can still
   override it deliberately.
   ============================================================ */

:root {
    --field-border: #d5d5d5;
    --field-border-hover: #b4b4b4;
    --field-border-focus: #094bd9;
    --field-ring: rgba(9, 75, 217, 0.12);

    /* #aaa and #999 on white are ~2.3:1 and ~2.8:1 — both under the 4.5:1
       a placeholder needs to be read. #767676 is the lightest grey that
       clears it on white. */
    --field-placeholder: #767676;

    --field-text: #282828;
    --field-bg: #ffffff;
    --field-disabled-bg: #f4f4f4;
    --field-disabled-text: #8a8a8a;

    --field-danger: #c81e1e;
    --field-danger-ring: rgba(200, 30, 30, 0.12);
    --field-success: #0f7b3d;
    --field-success-ring: rgba(15, 123, 61, 0.12);

    --field-radius: 8px;
}

/* ------------------------------------------------------------
   PLACEHOLDER — contrast fix, applied everywhere.
   ------------------------------------------------------------ */
.form-control::placeholder,
.jumia-input-wrap input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--field-placeholder);
    opacity: 1;
}

/* ------------------------------------------------------------
   FOCUS — a ring in addition to the border colour, so focus is not
   signalled by hue alone and stays visible in forced-colours mode.
   :focus-visible keeps the ring off mouse clicks on buttons/links.
   ------------------------------------------------------------ */
.form-control:focus,
.jumia-input-wrap:focus-within,
.checkout-form .form-control:focus {
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 3px var(--field-ring);
    outline: none;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--field-border-focus);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   ERROR — border, ring AND an icon, never colour on its own.
   ------------------------------------------------------------ */
.form-control.is-invalid,
.form-control.error,
.has-error .form-control,
.jumia-input-wrap.is-invalid,
.jumia-input-wrap.has-error {
    border-color: var(--field-danger);
    box-shadow: 0 0 0 3px var(--field-danger-ring);
}

/* The mark is a shape, not a colour, so it survives colour-blindness and
   greyscale printing. Kept off textareas and selects, which have their own
   affordances in the corner already. */
input.form-control.is-invalid,
input.form-control.error {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c81e1e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 38px;
}

/* Scoped to form contexts ONLY.
   This block once included a bare `.text-danger`, which is a Bootstrap colour
   utility the storefront uses on PRICES — `<del class="text-danger">`,
   `<h3 class="text-danger">{{ format_price(...) }}</h3>`. Styling it here
   forced every such price to display:block at 13px in the error colour, which
   broke price layout across the site. A validation message is identified by
   its own class, never by a shared utility. */
.invalid-feedback,
.error-message,
.help-block.error,
.checkout-form .field-error,
.jumia-auth-form .field-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--field-danger);
}

/* ------------------------------------------------------------
   SUCCESS — quieter than the error; confirmation, not an alarm.
   ------------------------------------------------------------ */
.form-control.is-valid,
.jumia-input-wrap.is-valid {
    border-color: var(--field-success);
}

.valid-feedback {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--field-success);
}

/* ------------------------------------------------------------
   HOVER / DISABLED / READONLY
   ------------------------------------------------------------ */
.form-control:hover:not(:focus):not(:disabled):not([readonly]) {
    border-color: var(--field-border-hover);
}

.form-control:disabled,
.form-control[readonly],
.jumia-input-wrap input:disabled {
    background-color: var(--field-disabled-bg);
    color: var(--field-disabled-text);
    cursor: not-allowed;
    -webkit-text-fill-color: var(--field-disabled-text);
    opacity: 1;
}

/* ------------------------------------------------------------
   OVERFLOW GUARDS
   Long values, long option labels and native date/number pickers were the
   three ways a field could push its own card sideways on a narrow screen.
   ------------------------------------------------------------ */
.form-control,
.jumia-input-wrap,
select.form-control {
    max-width: 100%;
}

select.form-control,
.form-select {
    text-overflow: ellipsis;
}

/* iOS zooms the page in when a focused field is under 16px. Applied only
   at phone widths so the desktop type scale is untouched. */
@media (max-width: 767px) {
    .form-control,
    .jumia-input-wrap input,
    select.form-control,
    textarea.form-control {
        font-size: 16px;
    }
}

/* ------------------------------------------------------------
   TOUCH TARGETS — 44px is the smallest comfortable tap area.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .btn,
    .jumia-auth-form button[type="submit"],
    .checkout-form button[type="submit"] {
        min-height: 44px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-width: 18px;
        min-height: 18px;
    }
}