/* ============================================================================
   MLPA /start-alert funnel design system
   Loaded only on the submit page (ID 470) and the WooCommerce checkout via
   MlpaStartAlert::enqueueAssets().

   A bolder, on-brand visual language for the four-step funnel
   (Pet Details → Preview → Choose Plan → Payment). Shares the orange brand and
   --mlpa-* tokens with the logged-in dashboard (css/job-dashboard.css) but adds
   a hero band, modern stepper, trust bar, animated package cards, a premium
   comparison table and an order-summary card.

   Tokens are declared on BOTH scopes because checkout is a separate page with
   no .mlpa-start-alert wrapper:
     .mlpa-start-alert         → submit page (hero/stepper/form/packages)
     body.woocommerce-checkout → checkout (stepper/order-summary/terms)

   Mobile-first; the single breakpoint is 668px.
   ========================================================================== */

.mlpa-start-alert,
body.woocommerce-checkout {
    --mlpa-orange: #e89145;
    --mlpa-orange-dark: #cf7a31;
    --mlpa-orange-deep: #b8641f;
    --mlpa-ink: #414042;
    --mlpa-muted: #777;
    --mlpa-line: #e6e7e8;
    --mlpa-bg: #f7f7f8;
    --mlpa-card: #fff;
    --mlpa-success: #4f9d3a;
    --mlpa-success-bg: #eaf5e6;
    --mlpa-warn: #b8860b;
    --mlpa-warn-bg: #fdf3da;
    --mlpa-danger: #c9483b;
    --mlpa-danger-bg: #fbe9e7;
    --mlpa-info: #2f6f9f;
    --mlpa-recommended: #e89145;
    --mlpa-recommended-bg: #fff6ee;
    --mlpa-hero-from: #f39c4b;
    --mlpa-hero-to: #d9772a;
    --mlpa-radius: 12px;
    --mlpa-radius-sm: 8px;
    --mlpa-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 16px rgba(0, 0, 0, .04);
    --mlpa-shadow-lg: 0 10px 30px rgba(0, 0, 0, .10), 0 4px 10px rgba(0, 0, 0, .05);
    --mlpa-ring: 0 0 0 3px rgba(232, 145, 69, .35);
}

.mlpa-start-alert,
.mlpa-start-alert * {
    box-sizing: border-box;
}

.mlpa-start-alert {
    color: var(--mlpa-ink);
    max-width: 1040px;
    margin: 0 auto;
}

/* Respect reduced-motion preferences globally for this stylesheet. */
@media (prefers-reduced-motion: reduce) {

    .mlpa-start-alert *,
    body.woocommerce-checkout .mlpa-steps * {
        animation: none !important;
        transition: none !important;
    }
}

/* ── Legacy step-bar suppression ───────────────────────────────────────────
   The old chevron step bar came from the non-owned `checkout-steps-wizard`
   plugin (a jQuery-Steps #wizard rendered into the parent theme's page-heading
   on pages 470/944). The new `.mlpa-steps` stepper supersedes it. This rule is
   a belt-and-suspenders guard so no duplicate bar appears even if that plugin
   is still active — this stylesheet only loads on the submit page + checkout,
   so the selector is safely scoped to the funnel. The plugin should also be
   deactivated on production. */
#wizard.wizard,
.page-heading #wizard {
    display: none !important;
}

/* ── Hero band ─────────────────────────────────────────────────────────── */
.mlpa-hero {
    background: linear-gradient(135deg, var(--mlpa-hero-from) 0%, var(--mlpa-hero-to) 100%);
    border-radius: var(--mlpa-radius);
    box-shadow: var(--mlpa-shadow-lg);
    color: #fff;
    padding: 30px 22px;
    margin: 0 0 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mlpa-hero::after {
    /* soft radial sheen top-right for depth */
    content: "";
    position: absolute;
    top: -60%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.mlpa-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

.mlpa-hero__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 12px;
}

.mlpa-hero__eyebrow i {
    margin-right: 6px;
}

.mlpa-hero__title {
    color: #fff;
    font-size: 30px;
    line-height: 1.15;
    margin: 0 0 10px;
    font-weight: 800;
}

.mlpa-hero__sub {
    color: rgba(255, 255, 255, .95);
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto 18px;
    max-width: 520px;
}

.mlpa-hero__badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
}

.mlpa-hero__badges li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.mlpa-hero__badges i {
    font-size: 13px;
}

/* ── Progress stepper ──────────────────────────────────────────────────────
   Scoped to .mlpa-steps directly (not under the wrapper) so it also renders on
   the checkout page. Numbered nodes joined by a connector that fills as the
   user advances.
   ───────────────────────────────────────────────────────────────────────── */
.mlpa-steps {
    max-width: 1040px;
    margin: 0 auto 26px;
    padding: 0 4px;
}

.mlpa-steps *,
body.woocommerce-checkout .mlpa-steps * {
    box-sizing: border-box;
}

.mlpa-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.mlpa-steps__item {
    position: relative;
    flex: 1 1 0;
    text-align: center;
    padding-top: 4px;
    min-width: 0;
}

/* connector line to the previous node */
.mlpa-steps__item::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 50%;
    width: 100%;
    height: 3px;
    background: var(--mlpa-line, #e6e7e8);
    z-index: 0;
}

.mlpa-steps__item:first-child::before {
    display: none;
}

.mlpa-steps__item.is-done::before,
.mlpa-steps__item.is-current::before {
    background: var(--mlpa-orange, #e89145);
}

.mlpa-steps__node {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--mlpa-line, #e6e7e8);
    color: var(--mlpa-muted, #777);
    font-weight: 700;
    font-size: 15px;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.mlpa-steps__item.is-done .mlpa-steps__node {
    background: var(--mlpa-orange, #e89145);
    border-color: var(--mlpa-orange, #e89145);
    color: #fff;
}

.mlpa-steps__item.is-current .mlpa-steps__node {
    background: #fff;
    border-color: var(--mlpa-orange, #e89145);
    color: var(--mlpa-orange-dark, #cf7a31);
    box-shadow: var(--mlpa-ring, 0 0 0 3px rgba(232, 145, 69, .35));
    transform: scale(1.08);
}

.mlpa-steps__label {
    display: block;
    margin-top: 8px;
    line-height: 1.25;
}

.mlpa-steps__count {
    display: block;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mlpa-muted, #777);
}

.mlpa-steps__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--mlpa-ink, #414042);
}

.mlpa-steps__item.is-upcoming .mlpa-steps__name {
    color: var(--mlpa-muted, #777);
    font-weight: 500;
}

/* ── Trust bar ─────────────────────────────────────────────────────────── */
.mlpa-trustbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    background: var(--mlpa-bg);
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius-sm);
    padding: 12px 16px;
    margin: 0 0 22px;
}

.mlpa-trustbar__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mlpa-ink);
}

.mlpa-trustbar__item i {
    color: var(--mlpa-orange);
    font-size: 15px;
}

/* ── Submit form ───────────────────────────────────────────────────────── */
.mlpa-start-alert .job-manager-form {
    background: var(--mlpa-card);
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius);
    box-shadow: var(--mlpa-shadow);
    padding: 26px 24px;
}

.mlpa-start-alert .job-manager-form fieldset {
    border: 0;
    margin: 0 0 18px;
    padding: 0;
}

.mlpa-start-alert .job-manager-form label {
    display: block;
    font-weight: 600;
    color: var(--mlpa-ink);
    margin-bottom: 6px;
}

.mlpa-start-alert .job-manager-form label small {
    font-weight: 400;
    color: var(--mlpa-muted);
}

/* required-field cue */
.mlpa-start-alert .job-manager-form .field.required-field {
    position: relative;
}

.mlpa-start-alert .job-manager-form fieldset:has(.required-field) > label::after {
    content: " *";
    color: var(--mlpa-danger);
    font-weight: 700;
}

.mlpa-start-alert .job-manager-form input[type="text"],
.mlpa-start-alert .job-manager-form input[type="email"],
.mlpa-start-alert .job-manager-form input[type="tel"],
.mlpa-start-alert .job-manager-form input[type="url"],
.mlpa-start-alert .job-manager-form input[type="password"],
.mlpa-start-alert .job-manager-form input[type="number"],
.mlpa-start-alert .job-manager-form textarea,
.mlpa-start-alert .job-manager-form select {
    width: 100%;
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius-sm);
    padding: 11px 13px;
    font-size: 15px;
    color: var(--mlpa-ink);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mlpa-start-alert .job-manager-form input:focus,
.mlpa-start-alert .job-manager-form textarea:focus,
.mlpa-start-alert .job-manager-form select:focus {
    border-color: var(--mlpa-orange);
    box-shadow: var(--mlpa-ring);
    outline: none;
}

.mlpa-start-alert .job-manager-form h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 6px 0 4px;
    color: var(--mlpa-ink);
}

.mlpa-start-alert .job-manager-form hr.lg {
    border: 0;
    border-top: 1px solid var(--mlpa-line);
    margin: 26px 0 20px;
}

/* description character counter */
.mlpa-charcount {
    text-align: right;
    font-size: 12px;
    color: var(--mlpa-muted);
    margin-top: 6px;
}

.mlpa-charcount__num {
    font-weight: 700;
    color: var(--mlpa-ink);
}

.mlpa-charcount.is-near {
    color: var(--mlpa-warn);
}

.mlpa-charcount.is-near .mlpa-charcount__num {
    color: var(--mlpa-warn);
}

/* submit button + spinner */
.mlpa-start-alert .job-manager-form input[type="submit"],
.mlpa-start-alert .job-manager-form .button {
    background: var(--mlpa-orange);
    border: 0;
    border-radius: var(--mlpa-radius-sm);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 13px 26px;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
    box-shadow: 0 3px 10px rgba(232, 145, 69, .3);
}

.mlpa-start-alert .job-manager-form input[type="submit"]:hover,
.mlpa-start-alert .job-manager-form .button:hover {
    background: var(--mlpa-orange-dark);
    transform: translateY(-1px);
}

.mlpa-start-alert .job-manager-form input[type="submit"]:focus-visible {
    outline: none;
    box-shadow: var(--mlpa-ring);
}

.mlpa-start-alert .account-sign-in {
    background: var(--mlpa-bg);
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius-sm);
    padding: 14px 16px;
    margin-bottom: 18px;
}

/* ── "Already posted this pet?" duplicate screen ───────────────────────── */
.mlpa-dupe {
    background: var(--mlpa-card);
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius);
    box-shadow: var(--mlpa-shadow);
    padding: 22px 20px;
    margin: 0 0 22px;
}

.mlpa-dupe__title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--mlpa-ink);
}

.mlpa-dupe__lead {
    margin: 0 0 16px;
    color: var(--mlpa-muted);
    font-size: 14px;
}

.mlpa-dupe__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 18px;
}

.mlpa-dupe__card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius-sm);
    padding: 12px 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.mlpa-dupe__card:hover {
    border-color: var(--mlpa-orange);
    box-shadow: var(--mlpa-shadow);
    transform: translateY(-1px);
}

.mlpa-dupe__photo img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--mlpa-line);
    display: block;
}

.mlpa-dupe__name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    color: var(--mlpa-ink);
    font-size: 16px;
}

.mlpa-dupe__name small {
    display: block;
    font-weight: 400;
    color: var(--mlpa-muted);
    font-size: 12px;
    margin-top: 2px;
}

.mlpa-dupe__select {
    flex: 0 0 auto;
    background: var(--mlpa-orange);
    color: #fff;
    border-radius: var(--mlpa-radius-sm);
    padding: 9px 16px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.mlpa-dupe__select:hover {
    background: var(--mlpa-orange-dark);
    color: #fff;
}

.mlpa-dupe__dismiss {
    background: none;
    border: 0;
    color: var(--mlpa-info);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 2px;
    text-decoration: underline;
}

.mlpa-dupe__dismiss:hover {
    color: var(--mlpa-orange-dark);
}

.mlpa-dupe.is-dismissed {
    display: none;
}

/* ── Choose Plan page chrome ───────────────────────────────────────────── */
/* Hide the plugin's default title bar (heading + top continue button). Its
   hidden job_id/step/form inputs live here too — display:none still submits
   them, and this template renders its own stepper, heading and CTA. */
#job_package_selection .job_listing_packages_title {
    display: none;
}

/* The plugin wraps the template in .job_listing_packages with a 5px border +
   padding; neutralise it so the full-width plan chooser sits clean (otherwise
   the old 790px column's edges show as faint vertical lines behind the cards). */
#job_package_selection .job_listing_packages {
    border: 0;
    padding: 0;
    margin: 0;
}

.mlpa-choose-plan__cta {
    text-align: center;
    margin: 22px 0 8px;
}

.mlpa-choose-plan__continue {
    background: var(--mlpa-orange);
    border: 0;
    border-radius: var(--mlpa-radius-sm);
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    padding: 15px 40px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(232, 145, 69, .35);
    transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}

.mlpa-choose-plan__continue:hover {
    background: var(--mlpa-orange-dark);
    transform: translateY(-1px);
}

.mlpa-choose-plan__continue:focus-visible {
    outline: none;
    box-shadow: var(--mlpa-ring);
}

.mlpa-choose-plan__reassure {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--mlpa-muted);
}

.mlpa-choose-plan__reassure i {
    color: var(--mlpa-success);
    margin-right: 5px;
}

/* ── Package cards (Choose Plan) ───────────────────────────────────────── */
.mlpa-package-intro {
    text-align: center;
    margin: 0 0 20px;
}

.mlpa-package-intro__title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 6px;
}

.mlpa-package-intro__sub {
    color: var(--mlpa-muted);
    margin: 0;
    font-size: 15px;
}

ul.job_packages.mlpa-package-cards {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.mlpa-package-card {
    position: relative;
    margin: 0;
    padding: 0;
}

/* clip the real radio — keep it submittable + keyboard-focusable */
.mlpa-package-card__radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.mlpa-package-card__label {
    display: block;
    position: relative;
    height: 100%;
    background: var(--mlpa-card);
    border: 2px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius);
    box-shadow: var(--mlpa-shadow);
    padding: 20px 20px 18px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .18s ease, transform .15s ease;
    font-weight: 400;
    margin: 0;
}

.mlpa-package-card__label:hover {
    transform: translateY(-3px);
    box-shadow: var(--mlpa-shadow-lg);
    border-color: var(--mlpa-orange);
}

/* selected state */
.mlpa-package-card__radio:checked + .mlpa-package-card__label {
    border-color: var(--mlpa-orange);
    box-shadow: var(--mlpa-ring), var(--mlpa-shadow);
    background: var(--mlpa-recommended-bg);
}

/* keyboard focus */
.mlpa-package-card__radio:focus-visible + .mlpa-package-card__label {
    outline: 3px solid var(--mlpa-orange);
    outline-offset: 2px;
}

/* ── Card header: name + tagline (left), price readout (right) ─────────── */
.mlpa-package-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--mlpa-line);
    padding-bottom: 14px;
    margin-bottom: 6px;
}

.mlpa-package-card__heading {
    min-width: 0;
}

.mlpa-package-card__name {
    display: block;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.1;
    color: var(--mlpa-ink);
}

.mlpa-package-card__tagline {
    display: block;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--mlpa-muted);
    margin-top: 5px;
}

.mlpa-package-card__price {
    flex: 0 0 auto;
    text-align: right;
    line-height: 1;
    white-space: nowrap;
}

.mlpa-package-card__amount {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--mlpa-orange-dark);
}

.mlpa-package-card__amount--free {
    font-family: inherit;
    letter-spacing: 0;
    color: var(--mlpa-success);
}

.mlpa-package-card__per {
    display: block;
    font-size: 10px;
    color: var(--mlpa-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-top: 3px;
}

.mlpa-package-card__features {
    display: block;
}

/* ── Headline reach figure — the card's focal point ────────────────────── */
.mlpa-plan-reach {
    text-align: center;
    padding: 14px 0 2px;
}

.mlpa-plan-reach__num {
    display: block;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--mlpa-orange-dark);
}

.mlpa-plan-reach__label {
    display: block;
    max-width: 15em;
    margin: 7px auto 0;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: .01em;
    color: var(--mlpa-muted);
}

/* ── Reach meters: the fill shows how far this plan's alert travels ─────── */
.mlpa-meters {
    list-style: none;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--mlpa-line);
}

.mlpa-meter {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label label"
        "track val";
    align-items: center;
    column-gap: 12px;
    row-gap: 7px;
    padding: 12px 0;
}

.mlpa-meter + .mlpa-meter {
    border-top: 1px solid var(--mlpa-line);
}

.mlpa-meter__label {
    grid-area: label;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mlpa-ink);
}

.mlpa-meter__label i.fa {
    width: 16px;
    margin-right: 8px;
    text-align: center;
    color: var(--mlpa-orange);
}

.mlpa-meter__track {
    grid-area: track;
    position: relative;
    height: 7px;
    border-radius: 99px;
    background: var(--mlpa-line);
}

.mlpa-meter__fill {
    display: block;
    height: 100%;
    width: var(--mlpa-fill, 0%);
    border-radius: 99px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%),
        linear-gradient(90deg, var(--mlpa-orange), var(--mlpa-orange-deep));
    box-shadow: 0 1px 4px rgba(207, 122, 49, .35);
    transform-origin: left center;
    transform: scaleX(1);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .15s ease;
}

/* Scroll-reveal: JS hides the fills, then fills them as the cards enter view.
   Gated behind .js-anim so a no-JS (or reduced-motion) visitor just sees them. */
.mlpa-package-cards.js-anim .mlpa-meter__fill {
    transform: scaleX(0);
}

.mlpa-package-cards.js-anim.is-live .mlpa-meter__fill {
    transform: scaleX(1);
    transition-delay: calc(var(--mlpa-i, 0) * .09s + .05s);
}

/* a "live signal" ping at each meter's reach frontier */
.mlpa-meter:not(.is-off) .mlpa-meter__track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--mlpa-fill, 0%);
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--mlpa-orange);
    box-shadow: 0 0 0 0 rgba(232, 145, 69, .5);
    animation: mlpa-ping 2.4s ease-out infinite;
    animation-delay: calc(var(--mlpa-i, 0) * .2s + .7s);
}

@keyframes mlpa-ping {
    0%        { box-shadow: 0 0 0 0 rgba(232, 145, 69, .5); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(232, 145, 69, 0); }
}

/* hover: the reach fills brighten a touch */
.mlpa-package-card__label:hover .mlpa-meter__fill {
    filter: brightness(1.08);
}

.mlpa-meter__val {
    grid-area: val;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--mlpa-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* a channel this plan lacks — empty meter + em-dash makes the gap felt */
.mlpa-meter.is-off .mlpa-meter__label,
.mlpa-meter.is-off .mlpa-meter__label i.fa {
    color: var(--mlpa-muted);
}

.mlpa-meter.is-off .mlpa-meter__val {
    color: var(--mlpa-muted);
    font-weight: 600;
}

/* the one constant across every tier — one quiet footer, never repeated */
.mlpa-plan-flyer {
    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px dashed var(--mlpa-line);
    font-size: 12px;
    color: var(--mlpa-muted);
    line-height: 1.4;
}

.mlpa-plan-flyer i.fa {
    color: var(--mlpa-success);
    margin-right: 5px;
}

/* explanatory note when the Free plan isn't offered */
.mlpa-plan-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--mlpa-bg);
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius-sm);
    padding: 12px 14px;
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mlpa-muted);
}

.mlpa-plan-note i {
    color: var(--mlpa-info);
    font-size: 16px;
    margin-top: 1px;
    flex: 0 0 auto;
}

/* selected check badge (top-right) */
.mlpa-package-card__check {
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--mlpa-orange);
    font-size: 20px;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}

.mlpa-package-card__radio:checked + .mlpa-package-card__label .mlpa-package-card__check {
    opacity: 1;
    transform: scale(1);
}

/* free tier — visually distinct (calmer) */
.mlpa-package-card--free .mlpa-package-card__label {
    background: var(--mlpa-bg);
    border-style: dashed;
}

.mlpa-package-card--free .mlpa-package-card__radio:checked + .mlpa-package-card__label {
    background: var(--mlpa-success-bg);
    border-color: var(--mlpa-success);
    box-shadow: 0 0 0 3px rgba(79, 157, 58, .3), var(--mlpa-shadow);
}

/* ── Featured tier (Bark): a warm "broadcast" — the one bold moment ─────── */
.mlpa-package-card--recommended .mlpa-package-card__label {
    background: linear-gradient(158deg, #f4a259 0%, #e0812f 52%, #c9701f 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 18px 42px rgba(180, 100, 31, .38), 0 5px 14px rgba(0, 0, 0, .12);
    overflow: hidden;
}

/* faint concentric signal rings echoing the logo, emanating past the price */
.mlpa-package-card--recommended .mlpa-package-card__label::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(circle at 86% 4%,
            rgba(255, 255, 255, .14) 0 1.5px, transparent 1.5px 20px);
    pointer-events: none;
}

.mlpa-package-card--recommended .mlpa-package-card__head {
    position: relative;
    z-index: 1;
    border-bottom-color: rgba(255, 255, 255, .28);
}

.mlpa-package-card--recommended .mlpa-package-card__name,
.mlpa-package-card--recommended .mlpa-package-card__amount {
    color: #fff;
}

.mlpa-package-card--recommended .mlpa-package-card__tagline,
.mlpa-package-card--recommended .mlpa-package-card__per {
    color: rgba(255, 255, 255, .88);
}

.mlpa-package-card--recommended .mlpa-plan-reach,
.mlpa-package-card--recommended .mlpa-meters,
.mlpa-package-card--recommended .mlpa-plan-flyer {
    position: relative;
    z-index: 1;
}

.mlpa-package-card--recommended .mlpa-plan-reach__num {
    color: #fff;
}

.mlpa-package-card--recommended .mlpa-plan-reach__label {
    color: rgba(255, 255, 255, .85);
}

.mlpa-package-card--recommended .mlpa-meters {
    border-top-color: rgba(255, 255, 255, .28);
}

.mlpa-package-card--recommended .mlpa-meter + .mlpa-meter {
    border-top-color: rgba(255, 255, 255, .2);
}

.mlpa-package-card--recommended .mlpa-meter__label,
.mlpa-package-card--recommended .mlpa-meter__label i.fa,
.mlpa-package-card--recommended .mlpa-meter__val {
    color: #fff;
}

.mlpa-package-card--recommended .mlpa-meter__track {
    background: rgba(255, 255, 255, .28);
}

.mlpa-package-card--recommended .mlpa-meter__fill {
    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .82));
    box-shadow: 0 1px 6px rgba(255, 255, 255, .5);
}

.mlpa-package-card--recommended .mlpa-meter:not(.is-off) .mlpa-meter__track::after {
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
    animation-name: mlpa-ping-white;
}

@keyframes mlpa-ping-white {
    0%        { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}

.mlpa-package-card--recommended .mlpa-plan-flyer {
    color: rgba(255, 255, 255, .9);
    border-top-color: rgba(255, 255, 255, .3);
}

.mlpa-package-card--recommended .mlpa-plan-flyer i.fa {
    color: #fff;
}

.mlpa-package-card--recommended .mlpa-package-card__check {
    color: #fff;
    z-index: 2;
}

/* selected state on the featured card: a crisp white + orange frame */
.mlpa-package-card--recommended .mlpa-package-card__radio:checked + .mlpa-package-card__label {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--mlpa-orange-deep), 0 18px 42px rgba(180, 100, 31, .4);
}

.mlpa-package-card--recommended .mlpa-package-card__label:hover {
    border-color: transparent;
}

/* "Most Popular" ribbon — white pill so it pops above the warm card */
.mlpa-package-card__ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: var(--mlpa-orange-deep);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
    white-space: nowrap;
    z-index: 3;
}


/* urgency / social-proof callout under the cards */
.mlpa-upgrade-nudge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--mlpa-warn-bg);
    border: 1px solid #f0dca0;
    border-radius: var(--mlpa-radius-sm);
    padding: 14px 16px;
    margin: 16px 0 22px;
    font-size: 14px;
    color: #7a5b12;
}

.mlpa-upgrade-nudge i {
    font-size: 22px;
    color: var(--mlpa-warn);
    flex: 0 0 auto;
}

/* ── Checkout order-summary card + trust signals ───────────────────────── */
.mlpa-order-review {
    background: var(--mlpa-card);
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius);
    box-shadow: var(--mlpa-shadow);
    overflow: hidden;
}

.mlpa-order-review .product-name b {
    font-size: 17px;
    color: var(--mlpa-ink);
}

.mlpa-order-review .product-name p {
    color: var(--mlpa-muted);
    font-size: 13px;
    margin: 6px 0 0;
    line-height: 1.5;
}

.mlpa-order-review th,
.mlpa-order-review td {
    padding: 14px 16px;
}

.mlpa-order-review thead th {
    background: var(--mlpa-bg);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mlpa-muted);
}

.mlpa-order-review .product-total,
.mlpa-order-review__total td {
    text-align: right;
    font-weight: 700;
    color: var(--mlpa-orange-dark);
    white-space: nowrap;
}

.mlpa-order-review__total th {
    text-align: left;
    font-size: 16px;
    color: var(--mlpa-ink);
    border-top: 2px solid var(--mlpa-line);
}

.mlpa-order-review__total td {
    font-size: 18px;
    border-top: 2px solid var(--mlpa-line);
}

.mlpa-secure-note {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mlpa-success-bg);
    border: 1px solid #cbe6bf;
    border-radius: var(--mlpa-radius-sm);
    padding: 12px 14px;
    margin: 14px 0;
    font-size: 13px;
    color: #2f5e22;
}

.mlpa-secure-note i {
    color: var(--mlpa-success);
    font-size: 18px;
    flex: 0 0 auto;
}

.mlpa-terms {
    background: var(--mlpa-bg);
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius-sm);
    padding: 12px 14px;
    margin: 14px 0;
    font-size: 13px;
    color: var(--mlpa-muted);
    line-height: 1.5;
}

.mlpa-terms .required {
    color: var(--mlpa-danger);
}

/* ── Preview step ──────────────────────────────────────────────────────── */
.mlpa-preview-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--mlpa-warn-bg);
    border: 1px solid #f0dca0;
    border-radius: var(--mlpa-radius-sm);
    padding: 14px 16px;
    margin: 0 0 20px;
    color: #7a5b12;
    font-size: 15px;
}

.mlpa-preview-banner i {
    font-size: 24px;
    color: var(--mlpa-warn);
    flex: 0 0 auto;
}

.mlpa-preview-banner strong {
    color: #5f4708;
}

.mlpa-preview-card {
    background: var(--mlpa-card);
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius);
    box-shadow: var(--mlpa-shadow);
    padding: 24px 22px;
    margin-bottom: 20px;
}

.mlpa-preview-card > h1:first-child,
.mlpa-preview-card .job_listing_preview_title h2 {
    margin-top: 0;
}

.mlpa-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    background: var(--mlpa-card);
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius);
    box-shadow: var(--mlpa-shadow);
    padding: 16px 20px;
    margin-bottom: 24px;
}

.mlpa-preview-actions__hint {
    color: var(--mlpa-muted);
    font-size: 14px;
    margin: 0;
    flex: 1 1 200px;
}

.mlpa-preview-actions .button,
.mlpa-preview-actions input[type="submit"] {
    border: 0;
    border-radius: var(--mlpa-radius-sm);
    font-weight: 700;
    font-size: 15px;
    padding: 12px 22px;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}

.mlpa-preview-actions .job-manager-button-submit-listing {
    background: var(--mlpa-orange);
    color: #fff;
    box-shadow: 0 3px 10px rgba(232, 145, 69, .3);
    order: 3;
}

.mlpa-preview-actions .job-manager-button-submit-listing:hover {
    background: var(--mlpa-orange-dark);
    transform: translateY(-1px);
}

.mlpa-preview-actions .job-manager-button-edit-listing {
    background: #fff;
    color: var(--mlpa-ink);
    border: 1px solid var(--mlpa-line) !important;
    order: 2;
}

.mlpa-preview-actions .job-manager-button-edit-listing:hover {
    border-color: var(--mlpa-orange) !important;
    color: var(--mlpa-orange-dark);
}

/* ── "Why upgrade?" — sell the paid channels (FA icons) ────────────────── */
.mlpa-why {
    margin-top: 34px;
}

.mlpa-why__head {
    text-align: center;
    margin-bottom: 22px;
}

.mlpa-why__head h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--mlpa-ink);
}

.mlpa-why__head p {
    color: var(--mlpa-muted);
    margin: 0 auto;
    max-width: 560px;
    font-size: 15px;
}

.mlpa-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.mlpa-why__card {
    background: var(--mlpa-card);
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius);
    box-shadow: var(--mlpa-shadow);
    padding: 26px 22px;
    text-align: center;
    transition: transform .15s ease, box-shadow .18s ease, border-color .15s ease;
}

.mlpa-why__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mlpa-shadow-lg);
    border-color: var(--mlpa-orange);
}

.mlpa-why__icon {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mlpa-hero-from), var(--mlpa-hero-to));
    color: #fff;
    font-size: 26px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(216, 119, 42, .3);
}

/* concentric signal rings behind the icon — the same broadcast motif as the
   plan cards, tying the whole page together */
.mlpa-why__icon::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -13px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, rgba(232, 145, 69, .17) 0 1px, transparent 1px 8px);
}

.mlpa-why__card h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--mlpa-ink);
}

.mlpa-why__card p {
    color: var(--mlpa-ink);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.mlpa-why__proof {
    text-align: center;
    margin: 22px 0 0;
    font-size: 15px;
    color: var(--mlpa-ink);
}

.mlpa-why__proof i {
    color: var(--mlpa-orange);
    margin-right: 5px;
}

.mlpa-why__proof a {
    color: var(--mlpa-info);
    font-weight: 700;
    text-decoration: none;
}

.mlpa-why__proof a:hover {
    text-decoration: underline;
}

/* ── Softened preview address notice ───────────────────────────────────── */
.mlpa-address-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #eef4fb;
    border: 1px solid #cfe0f0;
    border-radius: var(--mlpa-radius-sm);
    padding: 14px 16px;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
    color: #2f5a7d;
}

.mlpa-address-note i {
    color: var(--mlpa-info);
    font-size: 20px;
    margin-top: 1px;
    flex: 0 0 auto;
}

.mlpa-address-note strong {
    color: #244a68;
}

.mlpa-address-note em {
    font-style: normal;
    font-weight: 700;
    color: var(--mlpa-ink);
}

/* ── Preview tabs (Website / Flyer / Facebook) ─────────────────────────── */
.mlpa-preview-tabs__nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--mlpa-line);
    margin-bottom: 18px;
}

.mlpa-preview-tabs__tab {
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 11px 16px;
    margin-bottom: -2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--mlpa-muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.mlpa-preview-tabs__tab i {
    margin-right: 6px;
}

.mlpa-preview-tabs__tab:hover {
    color: var(--mlpa-ink);
}

.mlpa-preview-tabs__tab.is-active {
    color: var(--mlpa-orange-dark);
    border-bottom-color: var(--mlpa-orange);
}

/* Without JS every panel shows stacked; once JS marks the container, inactive
   panels (which carry the [hidden] attribute) collapse. */
.mlpa-preview-tabs.js-tabs .mlpa-preview-tabs__panel[hidden] {
    display: none;
}

.mlpa-preview-tabs__panel {
    margin-bottom: 8px;
}

/* ── Flyer preview ─────────────────────────────────────────────────────── */
.mlpa-flyer-preview {
    text-align: center;
}

.mlpa-flyer-preview__hint {
    color: var(--mlpa-muted);
    font-size: 14px;
    margin: 0 0 16px;
}

.mlpa-flyer-preview__hint i {
    color: var(--mlpa-orange);
    margin-right: 6px;
}

.mlpa-flyer-preview__img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius-sm);
    box-shadow: var(--mlpa-shadow);
}

.mlpa-flyer-preview__actions {
    margin: 18px 0 0;
}

.mlpa-flyer-preview__actions .button {
    display: inline-block;
    background: var(--mlpa-orange);
    color: #fff;
    border: 0;
    border-radius: var(--mlpa-radius-sm);
    padding: 11px 20px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease;
}

.mlpa-flyer-preview__actions .button:hover {
    background: var(--mlpa-orange-dark);
}

.mlpa-flyer-preview__actions i {
    margin-right: 6px;
}

/* ── Facebook post mock ────────────────────────────────────────────────── */
.mlpa-fbpost {
    max-width: 500px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #dcdfe4;
    border-radius: 10px;
    overflow: hidden;
    text-align: left;
    box-shadow: var(--mlpa-shadow);
}

.mlpa-fbpost__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.mlpa-fbpost__avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mlpa-hero-from), var(--mlpa-hero-to));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.mlpa-fbpost__page {
    display: block;
    font-weight: 700;
    color: #050505;
    font-size: 15px;
}

.mlpa-fbpost__page .fa-check-circle {
    color: #1877f2;
    font-size: 13px;
}

.mlpa-fbpost__meta {
    display: block;
    color: #65676b;
    font-size: 12px;
}

.mlpa-fbpost__text {
    padding: 0 14px 12px;
    color: #050505;
    font-size: 15px;
    line-height: 1.45;
}

.mlpa-fbpost__image {
    display: block;
    width: 100%;
    height: auto;
}

.mlpa-fbpost__bar {
    display: flex;
}

.mlpa-fbpost__bar span {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    color: #65676b;
    font-weight: 600;
    font-size: 14px;
    border-top: 1px solid #eceef1;
}

.mlpa-fbpost__bar i {
    margin-right: 6px;
}

/* ── Breakpoint: 668px and up ──────────────────────────────────────────── */
@media (min-width: 668px) {
    .mlpa-hero {
        padding: 44px 40px;
    }

    .mlpa-hero__title {
        font-size: 40px;
    }

    .mlpa-hero__sub {
        font-size: 18px;
    }

    .mlpa-steps__count {
        font-size: 11px;
    }

    .mlpa-steps__name {
        font-size: 14px;
    }

    .mlpa-dupe__grid {
        grid-template-columns: 1fr 1fr;
    }

    .mlpa-why__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    ul.job_packages.mlpa-package-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    /* elevate the recommended card on wider screens */
    .mlpa-package-card--recommended {
        z-index: 1;
    }

    .mlpa-package-card--recommended .mlpa-package-card__label {
        transform: scale(1.045);
    }

    .mlpa-package-card--recommended .mlpa-package-card__label:hover {
        transform: scale(1.045) translateY(-3px);
    }
}

@media (min-width: 980px) {
    ul.job_packages.mlpa-package-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* On desktop, let the plan chooser use the page's real width instead of the
   theme's narrow ~790px content column — that flanking emptiness was the worst
   of the wasted whitespace. Viewport-capped so it can never overflow, and every
   ancestor is overflow-x:visible, so breaking out is safe. */
@media (min-width: 900px) {
    .mlpa-start-alert.mlpa-choose-plan {
        width: min(1080px, calc(100vw - 64px));
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .mlpa-choose-plan ul.job_packages.mlpa-package-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }
}