/*
 * UX fixes from the Meta marketing review (Sept 2026).
 *
 * Kept in a separate file loaded after style.css rather than edited into it:
 * style.css is a large vendor theme, so isolating these overrides makes them easy
 * to audit, revert, or carry across a theme upgrade.
 */

/* ---------------------------------------------------------------------------
 * 1. Input labels visible before AND after typing
 *
 * style.css sets `.form-label label { opacity: 0 }` and custom.js only adds
 * `.form-label-active` once the field has a value, so "PHONE NUMBER" and
 * "PASSWORD" were invisible on an empty form — the user saw two unlabelled
 * boxes. Showing them always removes the guesswork and costs nothing, since
 * the label already occupies that space in the layout.
 * ------------------------------------------------------------------------- */
.form-custom.form-label label {
    opacity: 1;
}

/* The label sits on the field's top border and paints a background to punch a
 * gap in it. style.css hardcodes #FFF, which is a white smear in dark mode. */
.theme-dark .form-custom.form-label label {
    background-color: #1c1c1e !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ---------------------------------------------------------------------------
 * 2. Secondary text legibility
 *
 * Register / Recover Account / Resend OTP were set to opacity 30, which on a
 * dark background is roughly 2:1 contrast — below the WCAG 4.5:1 minimum and
 * genuinely hard to read outdoors, which is where plumbers use this app.
 * Raised to ~0.75, still clearly secondary to the primary CTA.
 * ------------------------------------------------------------------------- */
.auth-secondary-link {
    opacity: 0.75 !important;
    font-weight: 500;
}

.auth-secondary-link:hover,
.auth-secondary-link:active {
    opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
 * 3. Font hierarchy
 *
 * Headings, labels and body text were close in weight and brightness, so
 * nothing led the eye. This separates the tiers by brightness rather than by
 * size, so no layout shifts.
 * ------------------------------------------------------------------------- */
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5 {
    color: #ffffff;
}

.theme-dark .ux-body-text {
    color: rgba(255, 255, 255, 0.82);
}

.theme-dark .ux-muted-text {
    color: rgba(255, 255, 255, 0.55);
}

/* ---------------------------------------------------------------------------
 * 4. Primary CTA — keep the yellow, calm the glow
 *
 * shadow-bg paints a blurred copy of the button behind itself. At blur(12px)
 * and scale(0.8) the yellow bloomed well past the button edge. Tightened, not
 * removed, so the button still lifts off the page.
 * ------------------------------------------------------------------------- */
.btn.shadow-bg.shadow-bg-s::after,
.btn.shadow-bg.shadow-bg-m::after {
    transform: scale(0.9) translateY(3px) translateZ(0px);
    filter: blur(7px);
    opacity: 0.45;
}

/* ---------------------------------------------------------------------------
 * 5. Segmented control separation (Withdraw)
 *
 * Both tabs shared one container with no gap, so "Withdraw Transaction" and
 * "Make Withdraw Request" read as a single smeared control. A gap plus a
 * divider makes the boundary obvious and the inactive half clearly tappable.
 * ------------------------------------------------------------------------- */
.tabs-pill .tab-controls {
    gap: 6px;
    padding: 5px !important;
}

.tabs-pill .tab-controls a {
    border-radius: 10px;
    position: relative;
}

.theme-dark .tabs-pill .tab-controls a[aria-expanded="false"] {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background-color: rgba(255, 255, 255, 0.03);
}

.tabs-pill .tab-controls a[aria-expanded="false"] {
    border: 1px solid rgba(0, 0, 0, 0.12);
}

/* The active pill carried the same heavy glow as the primary CTA. A tab is not
 * a call to action, so it gets no bloom at all. */
.tabs-pill .tab-controls a.shadow-bg::after {
    display: none;
}

/* ---------------------------------------------------------------------------
 * 6. Home screen referral card
 *
 * Referral was reachable only through the side menu, so most plumbers never
 * found it. This styles the card promoted onto the home screen.
 * ------------------------------------------------------------------------- */
.referral-card {
    border: 1px solid rgba(255, 193, 7, 0.35);
    background: rgba(255, 193, 7, 0.07);
}

.referral-code-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 5px 10px;
    font-family: monospace;
    letter-spacing: 0.5px;
}

.theme-light .referral-code-chip {
    background: rgba(0, 0, 0, 0.06);
}