/* =============================================================================
   Enquiry form — currency prefix only
   =============================================================================

   SCOPE IS DELIBERATELY TINY. Three rules.

   The ₹ on the budget field is positioned absolutely inside a
   position:relative wrapper. Those two rules lived only inside a <style>
   block in contact-us.blade.php, scoped to a `.pxc-form-card` wrapper that
   only that page has — so anywhere else the partial is included (homepage,
   landing pages) the symbol degraded to a plain inline span and stacked ABOVE
   the input instead of sitting inside it.

   An earlier version of this file lifted all 47 form rules out of that block.
   That was wrong: the homepage form was never unstyled — `.px-contact__form`
   in v2.css already styles it, and it looked better than the contact page's
   treatment. Importing all 47 rules overrode a working design to fix one
   symbol. Only the three rules that position the symbol are here now;
   everything else stays where it was and keeps working as it did.

   Left alone on purpose: `.opt` (the small "Optional" hint beside a label)
   also has no styling outside the contact page, which is why those labels
   read "CITY OPTIONAL" as one uppercase run rather than a label with a quiet
   tag pushed right. That is cosmetic and pre-existing, and fixing it means
   changing how the labels look — a design decision, not a bug fix, so it is
   not being made here.
   ============================================================================= */

.pxc-form .pxc-prefix {
    position: relative;
}

.pxc-form .pxc-prefix__symbol {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    /* Falls back to a literal grey rather than a --pxc-* variable: those were
       defined on the contact page only, and this file must not depend on
       anything that page owns. */
    color: var(--px-gray-500, #64748b);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

/* Room for the symbol, so the typed value does not sit underneath it. */
.pxc-form .pxc-prefix input {
    padding-left: 32px;
}


/* -----------------------------------------------------------------------------
   Required / optional markers on field labels.

   `.req` (the red *) and `.opt` (the quiet "Optional" hint) were styled ONLY
   inside contact-us.blade.php, scoped to its .pxc-form-card wrapper. Every
   other page that includes a form partial -- the service, city, industry and
   solution pages, plus the homepage -- rendered them as bare unstyled text
   sitting in the middle of an uppercase label, which is why labels read
   "CITY OPTIONAL" as one run and the asterisks did not sit where they belong.

   Keyed on `.small-label` rather than a form wrapper class, because the four
   partials that carry these markers do not share one. Two rules, no layout
   properties beyond what positions the markers themselves -- deliberately not
   the 47-rule import that overrode a working design last time.
   -------------------------------------------------------------------------- */
.small-label {
    /* Flex keeps the marker on the label's own line and lets `.opt` sit right.
       The previous `display:block` allowed the marker to wrap beneath the text
       once the label ran long. */
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: nowrap;
}

.small-label .req {
    color: #dc2626;
    font-weight: 700;
    line-height: 1;
    flex: none;
}

.small-label .opt {
    /* Pushed to the right so it reads as a hint rather than part of the label.
       #64748b, not #94a3b8: the lighter grey is 2.56:1 on white and fails
       WCAG AA; this is 4.66:1. */
    color: #64748b;
    font-weight: 500;
    font-size: .84em;
    letter-spacing: .02em;
    text-transform: none;
    margin-left: auto;
    flex: none;
}