/* ==========================================================================
   LABSINCU — forms and buttons
   ==========================================================================

   The site had grown a different button in every module: .cart-btn,
   .auth-submit-btn, .btn-solid, .li-btn-solid, .btn-add-cart,
   .btn-outline-primary-custom, .cfc-btn — each with its own radius, height and
   padding. They still keep their own class names (nothing was renamed), but
   the shape, height and focus behaviour are set once here so a button looks
   like a LABSINCU button wherever it appears.

   The new shape is a full pill. It reads deliberately against the 10–18px
   radius the cards use, and it is what makes an action look like an action at
   a glance.

   Loaded globally, after the module stylesheets, so these rules land last.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.cart-btn,
.auth-submit-btn,
.btn-solid,
.btn-add-cart,
.btn-outline-primary-custom,
.li-btn-solid,
.li-btn-outline-dark,
.li-btn-outline-light,
.li-btn-service-order,
.cfc-btn,
.shop-page .btn-primary,
.contact-page .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease,
        box-shadow .18s ease, transform .12s ease;
}

/* Comfortable default. Individual modules can still change colour; this is
   only the geometry. */
.cart-btn,
.auth-submit-btn,
.btn-solid,
.btn-outline-primary-custom,
.li-btn-solid,
.li-btn-outline-dark,
.li-btn-outline-light,
.cfc-btn {
    min-height: 46px;
    padding: 12px 26px;
    font-size: 15px;
}

.btn-add-cart,
.li-btn-service-order {
    min-height: 42px;
    padding: 10px 20px;
    font-size: 14px;
    width: 100%;
}

.cart-btn-sm,
.btn-outline-primary-custom.btn-sm {
    min-height: 36px;
    padding: 8px 18px;
    font-size: 13.5px;
}

/* A pressed button should feel pressed. */
.cart-btn:active:not(:disabled),
.auth-submit-btn:active:not(:disabled),
.btn-solid:active:not(:disabled),
.btn-add-cart:active:not(:disabled),
.li-btn-solid:active:not(:disabled),
.cfc-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.cart-btn:focus-visible,
.auth-submit-btn:focus-visible,
.btn-solid:focus-visible,
.btn-add-cart:focus-visible,
.btn-outline-primary-custom:focus-visible,
.li-btn-solid:focus-visible,
.li-btn-outline-dark:focus-visible,
.li-btn-outline-light:focus-visible,
.li-btn-service-order:focus-visible,
.cfc-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 124, 92, 255), .32);
}

.cart-btn:disabled,
.auth-submit-btn:disabled,
.btn-solid:disabled,
.btn-add-cart:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.auth-submit-btn:disabled { cursor: progress; opacity: .7; }

/* Bootstrap buttons that appear inside site pages follow the same shape rather
   than sitting there as 6px rectangles. */
.shop-page .btn,
.contact-page .btn,
.auth-page .btn {
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Form fields
   --------------------------------------------------------------------------
   Inputs keep a softer radius than the buttons on purpose: the contrast is
   what makes the action read as the action.
   -------------------------------------------------------------------------- */

.shop-page .form-control,
.shop-page .form-select,
.auth-page .form-control,
.auth-page .form-select,
.contact-page .form-control,
.contact-page .form-select,
.site-form .form-control,
.site-form .form-select {
    min-height: 46px;
    border: 1px solid var(--color-border, #e7e6ef);
    border-radius: 12px;
    background: #fff;
    padding: 11px 15px;
    font-size: 14.5px;
    color: var(--color-heading, #101828);
    transition: border-color .16s ease, box-shadow .16s ease;
    box-shadow: none;
}

.shop-page textarea.form-control,
.auth-page textarea.form-control,
.contact-page textarea.form-control,
.site-form textarea.form-control {
    min-height: auto;
}

.shop-page .form-control:focus,
.shop-page .form-select:focus,
.auth-page .form-control:focus,
.auth-page .form-select:focus,
.contact-page .form-control:focus,
.contact-page .form-select:focus,
.site-form .form-control:focus,
.site-form .form-select:focus {
    outline: none;
    border-color: var(--brand, #7c5cff);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 124, 92, 255), .16);
}

.shop-page .form-control::placeholder,
.auth-page .form-control::placeholder,
.contact-page .form-control::placeholder,
.site-form .form-control::placeholder {
    color: #b0b7c3;
}

.shop-page .form-control.is-invalid,
.auth-page .form-control.is-invalid,
.contact-page .form-control.is-invalid,
.site-form .form-control.is-invalid,
.shop-page .form-select.is-invalid,
.auth-page .form-select.is-invalid,
.contact-page .form-select.is-invalid {
    border-color: #a81f2d;
    background-image: none;
}

.shop-page .form-control.is-invalid:focus,
.auth-page .form-control.is-invalid:focus,
.contact-page .form-control.is-invalid:focus,
.site-form .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(168, 31, 45, .14);
}

/* Labels sit above their field, always visible. A placeholder is a hint, not
   a label - it disappears exactly when the user needs it. */
.shop-page .form-label,
.auth-page .form-label,
.contact-page .form-label,
.site-form .form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-heading, #101828);
    margin-bottom: 6px;
}

.form-optional,
.form-hint {
    font-weight: 400;
    color: var(--color-text-light, #8a94a6);
}

.form-hint {
    display: block;
    font-size: 12.5px;
    margin-top: 5px;
}

.shop-page .invalid-feedback,
.auth-page .invalid-feedback,
.contact-page .invalid-feedback,
.site-form .invalid-feedback {
    font-size: 12.5px;
    color: #a81f2d;
    margin-top: 5px;
}

/* Checkboxes and radios */
.shop-page .form-check-input:checked,
.auth-page .form-check-input:checked,
.contact-page .form-check-input:checked,
.site-form .form-check-input:checked {
    background-color: var(--brand, #7c5cff);
    border-color: var(--brand, #7c5cff);
}

.shop-page .form-check-input:focus,
.auth-page .form-check-input:focus,
.contact-page .form-check-input:focus,
.site-form .form-check-input:focus {
    border-color: var(--brand, #7c5cff);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 124, 92, 255), .16);
}

/* An input group's addon should not lose its outline on focus - this was an
   inline !important override in two support views. */
.input-group-text:focus,
.input-group-text:focus-visible {
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .cart-btn,
    .auth-submit-btn,
    .btn-solid,
    .btn-add-cart,
    .li-btn-solid,
    .cfc-btn,
    .shop-page .form-control,
    .auth-page .form-control,
    .contact-page .form-control {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Small utilities
   --------------------------------------------------------------------------
   These replace the handful of inline style="" declarations that were repeated
   across the page templates - a heading colour, a fixed-width filter select, a
   large empty-state icon, and the danger colour. Everything here was measured
   from what the templates were actually doing inline.
   -------------------------------------------------------------------------- */

/* Buttons carry no border of their own, so the templates no longer need to
   switch one off with style="border:none". */
.btn-solid,
.cart-btn-solid,
.li-btn-solid,
.li-btn-service-order,
.btn-add-cart {
    border: 0;
}

.text-heading { color: var(--color-heading, #101828); }
.text-brand { color: var(--brand-text, #5b3df0); }
.text-danger-strong { color: #ef4444; }
.border-danger-strong { border-color: #ef4444 !important; }

.filter-select {
    width: 220px;
    max-width: 100%;
}

.filter-select-sm {
    width: 200px;
    max-width: 100%;
}

.empty-state-icon {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-text-light, #8a94a6);
}

.measure-sm { max-width: 520px; }
.measure-md { max-width: 640px; }
.measure-lg { max-width: 760px; }

@media (max-width: 575.98px) {
    .filter-select,
    .filter-select-sm { width: 100%; }
}

.nowrap { white-space: nowrap; }