/* Forms on redesigned pages in Daylight Glass: fields, the password show/hide button and alerts. Loads after
   tokens.css and site.css on pages that list 'forms' in $vcPageCss (client login, password reset, order). The
   class names match the staff panel's (support/staff/css/daylight/components.css), sized for the public site;
   the account panel and support portal can use the same file. */

/* Field: a label above its control, with an optional hint or error under it. */
.vc-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vc-field__label { color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 700; }
.vc-field__optional { color: var(--mut2); font-weight: 400; }
.vc-field__help { margin: 0; color: var(--mut2); font-size: 14px; line-height: 20px; }
.vc-field__error { margin: 0; color: var(--danger); font-size: 14px; line-height: 20px; }
.vc-field__error[hidden] { display: none; }

/* 16px text keeps iOS from zooming into the field. */
.vc-input, .vc-select { display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px; border: 1px solid var(--line-control); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-family: var(--font-sans); font-stretch: 96%; font-size: 16px; line-height: 24px; box-shadow: inset 0 1px 2px rgba(15,22,38,.05); -webkit-appearance: none; appearance: none; transition: border-color .15s ease; }
.vc-input::placeholder { color: var(--mut3); opacity: 1; }
.vc-input:hover, .vc-select:hover { border-color: var(--ink2); }
.vc-site .vc-input:focus-visible, .vc-site .vc-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.vc-input[aria-invalid="true"] { border-color: var(--danger); }
.vc-select { padding-right: 46px; 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 1.5l5 5 5-5' fill='none' stroke='%234a5468' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; text-overflow: ellipsis; cursor: pointer; }

/* Password with a Show button inside it (js/checkout-form.js reveals the button and adds has-toggle). */
.vc-password-input { position: relative; }
.vc-password-input.has-toggle .vc-input { padding-right: 84px; }
.vc-password-toggle { position: absolute; top: 4px; right: 4px; bottom: 4px; min-width: 64px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--neutral-soft); color: var(--ink); font-family: var(--font-sans); font-stretch: 96%; font-size: 14px; font-weight: 700; cursor: pointer; }
.vc-password-toggle:hover { background: var(--neutral-line); }
.vc-password-toggle[hidden] { display: none; }

/* Buttons a form switches off (the order form in the local preview). */
.vc-btn:disabled, .vc-btn:disabled:hover { opacity: .55; box-shadow: none; cursor: not-allowed; }

/* Alert: a coloured note above a form. role="alert" for errors, role="status" for the rest. */
.vc-alert { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 18px; border: 1px solid var(--neutral-line); border-radius: var(--radius-md); background: var(--neutral-soft); color: var(--ink); font-size: 15px; line-height: 22px; text-wrap: pretty; }
.vc-alert::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--mut3); }
.vc-alert > div { min-width: 0; }
.vc-alert strong { display: block; }
.vc-alert--danger { border-color: var(--danger-line); background: var(--danger-soft); }
.vc-alert--danger::before { background: var(--danger); }
.vc-alert--success { border-color: var(--lime-line); background: var(--lime-soft); }
.vc-alert--success::before { background: var(--lime); }
.vc-alert--attention { border-color: var(--amber-line); background: var(--amber-soft); }
.vc-alert--attention::before { background: var(--amber); }
.vc-alert:focus { outline: none; }
.vc-alert:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }