/* ==========================================================================
   Form controls (site-wide)
   --------------------------------------------------------------------------
   One source of truth for every input, select, textarea, upload, stepper,
   chip and checkbox on the storefront: the product quote card, the full quote
   request page, contact, checkout and the cart.

   It restyles the theme's existing `.single_input` wrapper rather than adding
   new classes, so every form picks the design up without markup changes: the
   wrapper carries the border and focus ring, and the label sits in a notch cut
   into its top edge.

   Colours come from the hp-* tokens in public/css/home.css so the whole site
   recolours from one place. Load order matters: this file comes after
   product.css and cart.css in resources/views/components/head.blade.php.
   ========================================================================== */

:root {
    --tbp-field-border: #e2e2ea;
    --tbp-field-radius: 12px;
    --tbp-field-danger: #dc3545;
    --tbp-field-ring: rgba(114, 2, 255, .10);
    --tbp-field-ring-danger: rgba(220, 53, 69, .12);
    --tbp-placeholder: #a8adb9;
    /* What sits behind a field, so the notch label can mask the border
       against it. Overridden inside tinted panels. */
    --tbp-notch-bg: #fff;
}

/* --------------------------------------------------------------------------
   Field shell: notch label cut into the top border
   -------------------------------------------------------------------------- */

.single_input {
    position: relative;
    display: block;
    margin-top: 26px;
    background: #fff;
    border: 1.5px solid var(--tbp-field-border);
    border-radius: var(--tbp-field-radius);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.single_input:hover { border-color: #cfcfdb; }

.single_input label {
    position: absolute;
    top: -9px;
    left: 13px;
    z-index: 1;
    margin: 0;
    padding: 0 6px;
    background: var(--tbp-notch-bg);
    color: var(--hp-muted);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .01em;
    text-transform: none;
    white-space: nowrap;
    max-width: calc(100% - 26px);
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s ease;
}

/* A secondary hint inside the label, e.g. "Length (L to R)". */
.single_input label .tbp-label-hint,
.tbp-label-hint {
    font-weight: 500;
    opacity: .8;
}

.single_input input,
.single_input select,
.single_input textarea {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--hp-text);
    font-size: .9rem;
    line-height: 1.5;
    padding: .85rem 1rem;
    border-radius: var(--tbp-field-radius);
}

.single_input input::placeholder,
.single_input textarea::placeholder {
    color: var(--tbp-placeholder);
    opacity: 1;
}

/* The wrapper owns the focus ring, so the control itself shows none. */
.single_input input:focus,
.single_input select:focus,
.single_input textarea:focus {
    outline: none;
    box-shadow: none;
}

.single_input:focus-within {
    border-color: var(--hp-accent);
    box-shadow: 0 0 0 4px var(--tbp-field-ring);
}

.single_input:focus-within label { color: var(--hp-accent); }

/* Required marker */
.single_input label .text-danger { color: var(--tbp-field-danger) !important; }

/* Error state, set by @error(...) is-invalid on the wrapper */
.single_input.is-invalid { border-color: var(--tbp-field-danger); }
.single_input.is-invalid label { color: var(--tbp-field-danger); }
.single_input.is-invalid:focus-within {
    border-color: var(--tbp-field-danger);
    box-shadow: 0 0 0 4px var(--tbp-field-ring-danger);
}

.single_input input[readonly],
.single_input input:disabled,
.single_input select:disabled,
.single_input textarea:disabled {
    color: var(--hp-muted);
    cursor: not-allowed;
}

.single_input:has(input[readonly]),
.single_input:has(input:disabled),
.single_input:has(select:disabled),
.single_input:has(textarea:disabled) { background: var(--hp-gray); }

/* --------------------------------------------------------------------------
   Selects — native arrow replaced with a chevron that follows the palette
   -------------------------------------------------------------------------- */

.single_input select,
.hp-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
    padding-right: 2.5rem !important;
}

.single_input:focus-within select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237202ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.single_input select option { color: var(--hp-text); }

/* Standalone selects (sort dropdowns on the listing pages) */
.hp-select {
    border: 1.5px solid var(--tbp-field-border);
    border-radius: 999px;
    background-color: #fff;
    color: var(--hp-text);
    font-size: .85rem;
    padding: .5rem 2.25rem .5rem 1rem;
    background-position: right .9rem center;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hp-select:hover { border-color: #cfcfdb; }
.hp-select:focus {
    outline: none;
    border-color: var(--hp-accent);
    box-shadow: 0 0 0 4px var(--tbp-field-ring);
}

/* --------------------------------------------------------------------------
   Textareas and number inputs
   -------------------------------------------------------------------------- */

.single_input textarea {
    display: block;
    min-height: 120px;
    resize: vertical;
    line-height: 1.65;
}

.single_input input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.single_input input[type="number"]::-webkit-outer-spin-button,
.single_input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --------------------------------------------------------------------------
   Grouped panel — a set of related fields, e.g. Box Dimensions
   -------------------------------------------------------------------------- */

.tbp-fieldgroup { margin-top: 26px; }

.tbp-fieldgroup-title {
    margin: 0 0 .6rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hp-text);
}

/* Brand tint rather than a gradient: the notch labels inside this panel mask
   against a single flat colour, so the fill has to stay solid. The gradient
   lives on the panel's border instead. */
.tbp-fieldgroup-body {
    position: relative;
    padding: 1.1rem 1.15rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(var(--hp-purple-soft), var(--hp-purple-soft)) padding-box,
        linear-gradient(135deg, var(--hp-accent) 0, var(--hp-green) 100%) border-box;
    --tbp-notch-bg: var(--hp-purple-soft);
}

.tbp-fieldgroup-hint {
    margin: 0 0 .2rem;
    font-size: .82rem;
    color: var(--hp-muted);
}

/* Axis guidance: which edge each measurement runs along. */
.tbp-fieldgroup-axes { font-size: .74rem; opacity: .85; }

/* Fields sit in a grid inside the panel, so the stacked top margin only has
   to clear the notch label. */
.tbp-fieldgroup-body .single_input { margin-top: 16px; }

/* --------------------------------------------------------------------------
   Quantity stepper
   -------------------------------------------------------------------------- */

.tbp-stepper {
    max-width: 240px;
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--tbp-field-border);
    border-radius: var(--tbp-field-radius);
    background: #fff;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tbp-stepper:hover { border-color: #cfcfdb; }
.tbp-stepper:focus-within {
    border-color: var(--hp-accent);
    box-shadow: 0 0 0 4px var(--tbp-field-ring);
}

.tbp-stepper input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding-left: .25rem;
    padding-right: .25rem;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
    font-size: .95rem;
    font-weight: 600;
    color: var(--hp-text);
    padding: .72rem .5rem;
    -moz-appearance: textfield;
    appearance: textfield;
}
.tbp-stepper input::-webkit-outer-spin-button,
.tbp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tbp-stepper input:focus { outline: none; }

.tbp-stepper-btn {
    flex: 0 0 38px;
    width: 38px;
    border: none;
    background: var(--hp-gray);
    color: var(--hp-text);
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease;
}
.tbp-stepper-btn:hover { background: var(--hp-accent); color: #fff; }
.tbp-stepper-btn:active { background: var(--hp-purple-dark); }
.tbp-stepper-btn:disabled { opacity: .45; cursor: not-allowed; background: var(--hp-gray); color: var(--hp-muted); }

.single_input.is-invalid .tbp-stepper { border-color: var(--tbp-field-danger); }

/* A stepper brings its own border, so the wrapper around it stays flat. */
.single_input:has(.tbp-stepper) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
.single_input:has(.tbp-stepper) label { background: var(--tbp-notch-bg); }

/* --------------------------------------------------------------------------
   File uploads — the quote page and the product card share one dropzone
   -------------------------------------------------------------------------- */

.hp-upload-label,
.ct-upload {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    margin: 0;
    padding: 1.05rem 1.15rem;
    border: 1.5px dashed #d3d3de;
    border-radius: var(--tbp-field-radius);
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.hp-upload-label:hover,
.ct-upload:hover,
.hp-upload-label[data-dragging],
.ct-upload[data-dragging] {
    border-color: var(--hp-accent);
    background: var(--hp-accent-soft);
}

.hp-upload-label i,
.ct-upload > i {
    flex: 0 0 auto;
    font-size: 1.5rem;
    color: var(--hp-accent);
}

.hp-upload-label span,
.ct-upload-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-size: .78rem;
    color: var(--hp-muted);
    line-height: 1.5;
}

/* The first line reads as the action. */
.hp-upload-label span strong,
.ct-upload-text strong {
    font-size: .9rem;
    font-weight: 700;
    color: var(--hp-accent);
}

.ct-upload-text .tbp-upload-formats,
.hp-upload-label span .tbp-upload-formats { font-size: .72rem; }

.hp-upload input[type="file"],
.ct-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Field messages
   -------------------------------------------------------------------------- */

.single_input + small.text-danger,
small.text-danger.d-block {
    font-size: .76rem;
    font-weight: 500;
    margin-top: .3rem;
}

.tbp-field-hint {
    display: block;
    margin-top: .35rem;
    font-size: .76rem;
    color: var(--hp-muted);
}

/* Confirmation shown in place of a flash message after a form is sent. */
.tbp-form-success {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: 1.25rem 0 .5rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--hp-mint);
    border-radius: var(--tbp-field-radius);
    background: var(--hp-mint-soft);
    color: var(--hp-green-dark);
    font-size: .85rem;
    line-height: 1.55;
}
.tbp-form-success i { margin-top: .15rem; font-size: 1rem; }
.tbp-form-success strong { display: block; color: var(--hp-text); }

/* Standalone label for controls not wrapped in .single_input. */
.tbp-label {
    display: block;
    margin-bottom: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--hp-text);
}

/* --------------------------------------------------------------------------
   Checkboxes, radios and chips
   -------------------------------------------------------------------------- */

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: .15em;
    border: 1.5px solid var(--tbp-field-border);
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.form-check-input:hover { border-color: var(--hp-accent); }
.form-check-input:checked { background-color: var(--hp-accent); border-color: var(--hp-accent); }
.form-check-input:focus { border-color: var(--hp-accent); box-shadow: 0 0 0 4px var(--tbp-field-ring); }
.form-check-label { cursor: pointer; color: var(--hp-text); }
.form-check-label a { color: var(--hp-accent); text-decoration: underline; text-underline-offset: 2px; }

.hp-chip {
    border: 1.5px solid var(--tbp-field-border);
    border-radius: 999px;
    padding: .5rem 1.15rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--hp-muted);
    background: #fff;
    cursor: pointer;
    transition: all .2s ease;
    margin: 0;
}
.hp-chip:hover { border-color: var(--hp-accent); color: var(--hp-accent); background: var(--hp-accent-soft); }
.hp-chip-input:checked + .hp-chip { background: var(--hp-accent); border-color: var(--hp-accent); color: #fff; }
.hp-chip-input:focus-visible + .hp-chip { box-shadow: 0 0 0 4px var(--tbp-field-ring); }

/* --------------------------------------------------------------------------
   reCAPTCHA
   -------------------------------------------------------------------------- */

.pd-captcha { margin-top: 22px; }

/* The widget is a fixed-size iframe; scale it on very narrow screens so it
   never pushes the card wider than its column. */
@media (max-width: 359.98px) {
    .pd-captcha > div { transform: scale(.87); transform-origin: 0 0; }
}

/* --------------------------------------------------------------------------
   Search fields (header bar)
   -------------------------------------------------------------------------- */

.tbp-search .form-control,
.tbp-search .btn { border: none; }
.tbp-search .form-control:focus { box-shadow: none; }

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .single_input input,
    .single_input select,
    .single_input textarea { font-size: .875rem; padding: .65rem .85rem; }
    .tbp-fieldgroup-body { padding: .9rem .9rem 1.1rem; }
    .tbp-stepper-btn { flex: 0 0 38px; width: 38px; }
}

/* --------------------------------------------------------------------------
   Contact card — same brand wash as the other form cards
   -------------------------------------------------------------------------- */

.contact_form {
    position: relative;
    background:
        linear-gradient(160deg, #fff 0%, #fbf8ff 42%, #f6fdfa 100%);
    border: 1px solid var(--hp-border);
    overflow: hidden;
}
.contact_form::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--hp-accent) 0, var(--hp-green) 100%);
}