/* Account navigation ------------------------------------------------------ */

/* The class is added after identifying the Moonbase tab by its label. */
#moonbase [role="tab"].mban-hidden-tab {
    display: none !important;
}

/* Give account navigation the same typographic weight as primary actions. */
#moonbase .moonbase\:customer > [role="tablist"] > [role="tab"] {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}

/* Use a gentler hover surface for the inactive account tab. */
#top #moonbase .moonbase\:customer
> [role="tablist"] > [role="tab"]:not([aria-selected="true"]):hover {
    background-color: var(--moonbase-bg-secondary-hover) !important;
}

/* Keep account-tab focus aligned with the Tritik brand palette. */
#moonbase [role="tab"]:focus,
#moonbase [role="tab"]:focus-visible {
    outline: 0px solid var(--mbsc-brand-primary, #ae4d3f) !important;
    outline-offset: 0px;
    box-shadow: none !important;
}

#moonbase .moonbase\:account > .mban-password-heading {
    color: #1e2127 !important;
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

#moonbase .moonbase\:account > .mban-password-heading + form {
    margin-top: 16px !important;
}

#moonbase .moonbase\:account > .mban-logout-divider {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 1px !important;
    border: 0 !important;
    background-color: var(--moonbase-border-primary) !important;
}

#moonbase .moonbase\:account
> .mban-logout-divider + button[data-variant="subtle"] {
    margin-top: 24px !important;
}

/* Keep account and authentication inputs identical despite Enfold's type rules. */
#top #moonbase :is(
    .moonbase\:account,
    .moonbase\:sign-in,
    .moonbase\:sign-up
)
.moonbase\:input > .moonbase\:input-field > input {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 11px !important;
    border: 1px solid var(--moonbase-border-secondary) !important;
    border-radius: 8px !important;
    line-height: 24px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition-property: color, background-color, border-color, box-shadow !important;
}

/* Reserve a stable icon gutter in both concealed and revealed states. */
#top #moonbase :is(
    .moonbase\:account,
    .moonbase\:sign-in,
    .moonbase\:sign-up
)
.moonbase\:input[data-revealable] > .moonbase\:input-field > input {
    padding-right: 40px !important;
}

/* Keep the focused border unchanged when password visibility is toggled. */
#top #moonbase :is(
    .moonbase\:account,
    .moonbase\:sign-in,
    .moonbase\:sign-up
)
.moonbase\:input > .moonbase\:input-field > input:focus,
#top #moonbase :is(
    .moonbase\:account,
    .moonbase\:sign-in,
    .moonbase\:sign-up
)
.moonbase\:input > .moonbase\:input-field > input:focus-visible {
    border-color: var(--moonbase-border-tertiary) !important;
    box-shadow: none !important;
}

/* Keep form actions readable while giving navigation the stronger type scale. */
#top #moonbase .moonbase\:account form
> .moonbase\:button[type="submit"] {
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding: 12px 13px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
}

/* Soften the newsletter checkboxes and the account product-updates checkbox. */
#top #moonbase .moonbase\:sign-up
.moonbase\:checkbox > input[name="mb-newsletter-opt-in"],
#top #moonbase .moonbase\:account
.moonbase\:checkbox > input[name="mb-newsletter-opt-in"],
#top #moonbase .moonbase\:account
.moonbase\:checkbox > input[name="mb-product-updates-opt-in"] {
    border-radius: 4px !important;
}

/* Keep preference hints in the regular UI face and reduce their emphasis. */
#top #moonbase .moonbase\:account
.moonbase\:checkbox .moonbase\:checkbox-description > p {
    color: var(--moonbase-text-secondary) !important;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: -0.01em !important;
}

/* Tighten only the gap between the two communication preferences. */
#top #moonbase .moonbase\:account form
> .moonbase\:checkbox:has(> input[name="mb-newsletter-opt-in"])
+ .moonbase\:checkbox:has(> input[name="mb-product-updates-opt-in"]) {
    margin-top: 12px !important;
}

/* Purchase shortcode ------------------------------------------------------ */

.moba-purchase {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.moba-purchase__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 34px;
}

.moba-purchase__current-price {
    color: #1e2127;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.moba-purchase__original-price {
    color: #7d8595;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
}

.moba-purchase [hidden] {
    display: none !important;
}

/* Match Moonbase's primary checkout button. */
body .moba-purchase .moba-add-to-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px;
    border: 1px solid var(--mbsc-brand-primary, #ae4d3f);
    border-radius: 8px;
    background-color: var(--mbsc-brand-primary, #ae4d3f);
    color: var(--mbsc-brand-contrast, #fff);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    filter: none;
    transition:
        color 0.2s ease-in-out,
        background-color 0.2s ease-in-out,
        border-color 0.2s ease-in-out;
}

body .moba-purchase .moba-add-to-cart-btn:hover,
body .moba-purchase .moba-add-to-cart-btn:focus {
    border-color: var(--mbsc-brand-primary-hover, #d5615b);
    background-color: var(--mbsc-brand-primary-hover, #d5615b);
    color: var(--mbsc-brand-contrast, #fff);
    filter: none;
}

body .moba-purchase .moba-add-to-cart-btn:focus-visible {
    outline: 2px solid var(--mbsc-brand-primary, #ae4d3f);
    outline-offset: 3px;
}

/* Moonbase upstream overrides -------------------------------------------- */

/*
 * These selectors depend on Moonbase's internal rendered markup. They are
 * intentionally isolated here because an upstream markup change may require
 * them to be updated.
 */

/* Increase the side-panel title weight. */
#moonbase .moonbase\:text-display {
    font-weight: 600 !important;
}

/* Show only the download button inside file-based license cards. */
#moonbase .moonbase\:product-licenses
.moonbase\:product-license:has(
    > .moonbase\:product-license-external-content > a[download]
)
> .moonbase\:card-content,
#moonbase .moonbase\:product-licenses
.moonbase\:product-license-external-content:has(> a[download])
> :not(a[download]) {
    display: none;
}

#moonbase .moonbase\:product-licenses
.moonbase\:product-license-external-content:has(> a[download]) {
    margin-top: 16px;
}

/* Keep license download buttons the same width in every state. */
#moonbase .moonbase\:product-license-external-content .moonbase\:button,
#moonbase .moonbase\:product-license-external-content .moonbase\:button:hover,
#moonbase .moonbase\:product-license-external-content .moonbase\:button:focus,
#moonbase .moonbase\:product-license-external-content .moonbase\:button:active {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
}

#moonbase .moonbase\:button[data-variant="secondary-light"] {
    color: #222 !important;
}

/* Match license downloads to the account panel's neutral surfaces. */
#moonbase .moonbase\:product-license-external-content
> a[download].moonbase\:button[data-variant="secondary-light"] {
    background-color: #f5f6f7 !important;
    color: #1e2127 !important;
}

#moonbase .moonbase\:product-license-external-content
> a[download].moonbase\:button[data-variant="secondary-light"] svg {
    color: #1e2127 !important;
}

#moonbase .moonbase\:product-license-external-content
> a[download].moonbase\:button[data-variant="secondary-light"]:hover {
    background-color: #e9ebee !important;
    color: #1e2127 !important;
}

#moonbase .moonbase\:product-license-external-content
> a[download].moonbase\:button[data-variant="secondary-light"]:active {
    background-color: #dfe2e6 !important;
    color: #1e2127 !important;
}

#moonbase .moonbase\:product-license-external-content
> a[download].moonbase\:button[data-variant="secondary-light"]:focus-visible {
    outline: 2px solid #ae4d3f !important;
    outline-offset: 3px;
}