/* Final launch polish: shared controls, icon sizing, touch targets and theme parity. */

:root {
    --fx-control-radius: 12px;
    --fx-touch-target: 44px;
    --fx-control-gap: 10px;
}

/* Font Awesome theme toggle: moon means switch to dark, sun means switch to light. */
.fx-theme-icon {
    width: 1em !important;
    height: 1em !important;
    fill: currentColor !important;
    stroke: none !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
}

.fx-theme-icon-sun { display: none !important; }
html[data-theme="dark"] .fx-theme-icon-moon { display: none !important; }
html[data-theme="dark"] .fx-theme-icon-sun { display: inline-block !important; }

/* Header icon controls share one geometry instead of page-specific glyph sizing. */
.app-mobile-header-actions .app-icon-button,
.app-mobile-header-actions .fx-theme-toggle {
    width: var(--fx-touch-target) !important;
    min-width: var(--fx-touch-target) !important;
    height: var(--fx-touch-target) !important;
    min-height: var(--fx-touch-target) !important;
    display: inline-grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border-radius: 999px !important;
}

.app-mobile-header-actions .fx-mobile-chrome-icon,
.app-mobile-header-actions .fx-theme-icon {
    width: 1em !important;
    font-size: 1.06rem !important;
    line-height: 1 !important;
    text-align: center;
}

.app-mobile-search > .fx-mobile-search-leading,
.app-mobile-search .fx-mobile-search-submit {
    width: 1em !important;
    font-size: 1.14rem !important;
    line-height: 1 !important;
    color: currentColor;
}

.app-mobile-search > .fx-mobile-search-leading {
    margin-inline: 2px 4px;
}

.app-search-submit {
    width: var(--fx-touch-target) !important;
    min-width: var(--fx-touch-target) !important;
    height: var(--fx-touch-target) !important;
    min-height: var(--fx-touch-target) !important;
    display: inline-grid !important;
    place-items: center !important;
}

/* Bottom navigation icons use one Font Awesome family and aligned optical size. */
.app-bottom-nav .fx-bottom-nav-icon {
    width: 1em !important;
    min-width: 1em;
    font-size: 1.18rem !important;
    line-height: 1 !important;
    text-align: center;
}

.app-bottom-nav a {
    min-height: 56px;
}

/* The legacy account wrapper also uses a bare <i> as its unread dot. Once the
   SVG is replaced by Font Awesome, that old selector must not turn fa-user
   into the notification dot. Keep the user icon in the same geometry as the
   other bottom-nav icons and leave only the bare marker positioned as a dot. */
.app-bottom-nav .app-bottom-account-icon {
    position: relative !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
}

.app-bottom-nav .app-bottom-account-icon > i.fa-solid,
.app-bottom-nav .app-bottom-account-icon > i.fx-bottom-nav-icon {
    position: static !important;
    inset: auto !important;
    width: 1em !important;
    min-width: 1em !important;
    height: 1em !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: currentColor !important;
    font-size: 1.18rem !important;
    line-height: 1 !important;
    text-align: center !important;
}

.app-bottom-nav .app-bottom-account-icon > i:not(.fa-solid) {
    position: absolute !important;
    top: -1px !important;
    right: -3px !important;
    width: 8px !important;
    min-width: 8px !important;
    height: 8px !important;
    border: 2px solid #090b0d !important;
    border-radius: 50% !important;
    background: #c8ff63 !important;
}

/* Shared interactive states: clear but quiet. */
:is(
    a,
    button,
    summary,
    input,
    select,
    textarea
):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--fx-blue) 34%, transparent);
    outline-offset: 2px;
}

button,
.button,
.app-header-link,
.app-search-saved-button,
.app-report-login-link {
    -webkit-tap-highlight-color: transparent;
}

.button,
button.button,
a.button {
    min-height: 44px;
    box-sizing: border-box;
    border-radius: var(--fx-control-radius);
}

/* Keep icon-only controls finger-friendly and stop inherited text padding. */
:is(
    .app-icon-button,
    .fx-theme-toggle,
    .app-draft-menu > summary,
    .app-search-submit,
    .fx-image-zoom-trigger
) {
    touch-action: manipulation;
}

/* Standard compact destructive action when it appears inside an overflow menu. */
.app-draft-menu-delete {
    min-height: 44px !important;
}

/* Marketplace cards: predictable image behavior and no accidental crop for product evidence. */
:is(
    .order-row img,
    .order-summary-card img,
    .app-account-order-grid img,
    .app-selling-card-media img,
    .app-draft-thumb img,
    .app-saved-card img
) {
    max-width: 100%;
}

.order-row img,
.order-summary-card img,
.app-account-order-grid img {
    object-fit: contain !important;
}

/* Status pills should stay compact and never stretch entire cards on phones. */
.status-pill {
    width: fit-content;
    max-width: 100%;
    white-space: normal;
}

/* Form feedback and empty states use the same readable width and rhythm. */
.empty-state,
.warning-box,
.message {
    overflow-wrap: anywhere;
}

.empty-state .button,
.warning-box .button {
    min-height: 44px;
}

/* Mobile search keeps only the functional submit magnifier on the right. */
@media (max-width: 900px) {
    .app-mobile-search {
        grid-template-columns: minmax(0, 1fr) 42px !important;
        column-gap: 8px !important;
        padding-left: 18px !important;
    }

    .app-mobile-search > svg:first-child,
    .app-mobile-search > .fx-mobile-search-leading {
        display: none !important;
    }
}

/* Prevent fixed mobile chrome from covering the final actionable row. */
@media (max-width: 900px) {
    body:not(.app-route-checkout) main {
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    .app-mobile-header-actions {
        gap: 8px !important;
    }
}

@media (max-width: 430px) {
    .app-mobile-header-actions .app-icon-button,
    .app-mobile-header-actions .fx-theme-toggle {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    .app-mobile-search {
        grid-template-columns: minmax(0, 1fr) 40px !important;
        column-gap: 7px !important;
        padding-left: 16px !important;
    }

    .app-bottom-nav .fx-bottom-nav-icon {
        font-size: 1.12rem !important;
    }

    .app-bottom-nav .app-bottom-account-icon > i.fa-solid,
    .app-bottom-nav .app-bottom-account-icon > i.fx-bottom-nav-icon {
        font-size: 1.12rem !important;
    }
}

@media (max-width: 350px) {
    .app-mobile-search {
        grid-template-columns: minmax(0, 1fr) 38px !important;
        column-gap: 6px !important;
        padding-left: 14px !important;
    }
}