/* ============================================================
   FILEXFLOW INLINE CONVERTER V4
   Functional component only.
   Global theme and shell belong to layout.css.
   ============================================================ */

.fx-seo-inline-converter,
.fx-seo-inline-converter * {
    box-sizing: border-box;
}

.fx-seo-inline-converter {
    color: var(--fx-text);
    font-family: inherit;
}


/* Main functional surface */

.fx-free-card {
    padding: clamp(22px, 4vw, 42px);

    border: 1px solid var(--fx-line);
    border-radius: var(--fx-radius-xl);

    background: var(--fx-surface);

    box-shadow: var(--fx-shadow);
}


/* Standalone heading remains supported.
   SEO embedded mode does not render it. */

.fx-free-heading {
    margin-bottom: 24px;

    text-align: center;
}

.fx-free-heading h2 {
    margin: 12px 0 8px;

    color: var(--fx-text);

    font-size: clamp(1.6rem, 4vw, 2.5rem);

    line-height: 1.08;
}

.fx-free-heading p {
    margin: 0;

    color: var(--fx-text-soft);
}

.fx-free-kicker {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--fx-text-soft);

    font-size: .72rem;

    letter-spacing: .05em;
    text-transform: uppercase;
}

.fx-free-kicker > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--fx-success);
}


/* Disabled */

.fx-free-disabled {
    display: grid;

    gap: 5px;

    margin-bottom: 20px;

    padding: 14px 16px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--fx-warning) 35%,
            var(--fx-line)
        );

    border-radius: var(--fx-radius-md);

    background:
        color-mix(
            in srgb,
            var(--fx-warning) 8%,
            transparent
        );

    color: var(--fx-warning);
}

.fx-free-disabled span {
    color: var(--fx-text-soft);
}


/* Dropzone */

.fx-free-drop {
    min-height: 300px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 30px;

    border: 1.5px dashed
        color-mix(
            in srgb,
            var(--fx-primary) 48%,
            var(--fx-line)
        );

    border-radius: var(--fx-radius-lg);

    background:
        radial-gradient(
            circle at 50% 18%,
            var(--fx-primary-soft),
            var(--fx-surface-raised) 66%
        );

    text-align: center;

    cursor: pointer;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.fx-free-drop:hover,
.fx-free-drop.is-drag {
    transform: translateY(-1px);

    border-color: var(--fx-primary);
}

.fx-free-upload-icon {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    margin-bottom: 14px;

    border-radius: 50%;

    background: var(--fx-primary-soft);
    color: var(--fx-primary);

    font-size: 1.75rem;
    font-weight: 900;
}

.fx-free-drop strong {
    color: var(--fx-text);

    font-size: 1.16rem;
}

.fx-free-drop > span {
    margin: 7px 0 18px;

    color: var(--fx-text-soft);
}

.fx-free-drop small {
    margin-top: 13px;

    color: var(--fx-text-muted);
}


/* Buttons */

.fx-free-primary,
.fx-free-secondary {
    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 11px 18px;

    border-radius: var(--fx-radius-pill);

    font: inherit;
    font-size: .92rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .12s ease,
        background .15s ease,
        border-color .15s ease;
}

.fx-free-primary {
    border: 1px solid var(--fx-primary);

    background: var(--fx-primary);
    color: #fff;

    box-shadow:
        0 10px 26px
        rgba(37, 99, 235, .20);
}

.fx-free-primary:hover {
    transform: translateY(-1px);

    background: var(--fx-primary-hover);
}

.fx-free-primary:disabled {
    opacity: .45;

    cursor: not-allowed;
}

.fx-free-secondary {
    border: 1px solid var(--fx-primary);

    background: var(--fx-primary);
    color: #fff;
}

.fx-free-secondary:hover {
    transform: translateY(-1px);

    background: var(--fx-primary-hover);
}


/* Selected file */

.fx-free-file {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 18px;

    padding: 15px;

    border: 1px solid var(--fx-line);
    border-radius: var(--fx-radius-md);

    background: var(--fx-surface-raised);
}

.fx-free-file-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 11px;

    background: var(--fx-primary-soft);
    color: var(--fx-primary);

    font-size: .7rem;
    font-weight: 900;
}

.fx-free-file-main {
    min-width: 0;

    display: grid;

    gap: 4px;

    flex: 1;
}

.fx-free-file-main strong {
    overflow: hidden;

    color: var(--fx-text);

    white-space: nowrap;
    text-overflow: ellipsis;
}

.fx-free-file-main span {
    color: var(--fx-text-soft);

    font-size: .84rem;
}

.fx-free-icon-button {
    appearance: none;

    border: 0;

    background: transparent;
    color: var(--fx-text-soft);

    font-size: 1.4rem;

    cursor: pointer;
}

.fx-free-convert {
    width: 100%;

    margin-top: 18px;

    padding: 14px;
}


/* Journey */

.fx-free-processing,
.fx-free-result,
.fx-free-upgrade,
.fx-free-donation {
    margin-top: 18px;

    border: 1px solid var(--fx-line);
    border-radius: var(--fx-radius-lg);

    background: var(--fx-surface-raised);
    color: var(--fx-text);
}

.fx-free-processing {
    min-height: 104px;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 19px;
}

.fx-free-journey-copy {
    min-width: 0;

    flex: 1;
}

.fx-free-journey-copy strong {
    color: var(--fx-text);
}

.fx-free-journey-copy p {
    margin: 6px 0 0;

    color: var(--fx-text-soft);
}

.fx-free-journey-copy small {
    display: block;

    margin-top: 9px;

    color: var(--fx-text-muted);

    line-height: 1.45;

    transition: opacity .18s ease;
}

.fx-free-journey-copy small.is-changing {
    opacity: .15;
}


/* Progress */

.fx-free-donut {
    --progress: 0;

    position: relative;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--fx-primary)
            calc(var(--progress) * 1%),
            var(--fx-line)
            0
        );
}

.fx-free-donut::after {
    content: "";

    position: absolute;

    inset: 6px;

    border-radius: 50%;

    background: var(--fx-surface-raised);
}

.fx-free-donut span {
    position: relative;

    z-index: 2;

    color: var(--fx-text-soft);

    font-size: .68rem;
    font-weight: 800;
}


/* Result and commercial bridge */

.fx-free-result {
    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr) auto;

    align-items: center;

    gap: 14px;

    padding: 19px;
}

.fx-free-precta {
    border-color:
        color-mix(
            in srgb,
            var(--fx-primary) 35%,
            var(--fx-line)
        );
}

.fx-free-result-check {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--fx-success) 13%,
            transparent
        );

    color: var(--fx-success);

    font-size: 1.35rem;
    font-weight: 900;
}

.fx-free-result-arrow {
    background: var(--fx-primary-soft);
    color: var(--fx-primary);
}

.fx-free-result-copy {
    min-width: 0;

    display: grid;

    gap: 4px;
}

.fx-free-result-copy strong {
    color: var(--fx-text);
}

.fx-free-result-copy span {
    overflow: hidden;

    color: var(--fx-text-soft);

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* Upgrade */

.fx-free-upgrade {
    display: grid;

    gap: 8px;

    padding: 19px;
}

.fx-free-upgrade > span {
    color: var(--fx-text-soft);

    line-height: 1.5;
}

.fx-free-upgrade > div {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 5px;
}


/* Donation */

.fx-free-donation {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;

    gap: 14px 18px;

    padding: 18px;

    border-color:
        color-mix(
            in srgb,
            var(--fx-success) 28%,
            var(--fx-line)
        );
}

.fx-free-donation-copy {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.fx-free-donation-copy strong {
    color: var(--fx-text);
}

.fx-free-donation-copy span,
.fx-free-donation-status {
    color: var(--fx-text-soft);

    font-size: 13px;

    line-height: 1.45;
}

.fx-free-donation-amounts {
    display: flex;

    gap: 8px;
}

.fx-free-donation-amount {
    min-width: 52px;

    padding: 9px 13px;

    border: 1px solid var(--fx-line);
    border-radius: var(--fx-radius-pill);

    background: var(--fx-surface);
    color: var(--fx-text);

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}

.fx-free-donation-amount:hover,
.fx-free-donation-amount.is-selected {
    border-color: var(--fx-primary);

    background: var(--fx-primary);
    color: #fff;
}

.fx-free-paypal-button {
    grid-column: 1 / -1;

    width: min(100%, 520px);

    justify-self: center;
}

.fx-free-paypal-card[hidden] {
    display: none !important;
}

.fx-free-donation-secure {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: var(--fx-text-muted);

    font-size: 12px;
}

.fx-free-donation-status {
    grid-column: 1 / -1;

    text-align: center;
}


/* Messages / trust */

.fx-free-message {
    margin-top: 18px;

    padding: 14px 16px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--fx-danger) 30%,
            var(--fx-line)
        );

    border-radius: var(--fx-radius-md);

    background:
        color-mix(
            in srgb,
            var(--fx-danger) 8%,
            transparent
        );

    color: var(--fx-danger);
}

.fx-free-trust {
    display: flex;
    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

    margin-top: 25px;

    color: var(--fx-text-soft);

    font-size: .82rem;
}

.fx-free-trust span {
    display: flex;

    gap: 5px;
}

.fx-free-trust b {
    color: var(--fx-text-soft);
}


/* Hidden */

.fx-free-result[hidden],
.fx-free-upgrade[hidden],
.fx-free-file[hidden],
.fx-free-convert[hidden],
.fx-free-donation[hidden] {
    display: none !important;
}


/* Responsive */

@media (max-width: 768px) {

    .fx-free-card {
        padding: 24px 18px;

        border-radius: var(--fx-radius-lg);
    }

    .fx-free-drop {
        min-height: 260px;

        padding: 24px 16px;
    }

    .fx-free-processing {
        align-items: flex-start;
    }

    .fx-free-result {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .fx-free-result > .fx-free-primary {
        grid-column: 1 / -1;

        width: 100%;
    }

    .fx-free-donation {
        grid-template-columns: 1fr;
    }

    .fx-free-donation-secure,
    .fx-free-donation-status {
        grid-column: 1;
    }
}

@media (max-width: 480px) {

    .fx-free-card {
        padding: 20px 14px;
    }

    .fx-free-drop {
        min-height: 235px;
    }

    .fx-free-trust {
        gap: 10px 14px;
    }

    .fx-free-upgrade > div {
        display: grid;

        grid-template-columns: 1fr;
    }

    .fx-free-upgrade .fx-free-primary,
    .fx-free-upgrade .fx-free-secondary {
        width: 100%;
    }
}


/* ============================================================
   FILEXFLOW SEO INLINE UX V4.1C
   Component geometry only
   ============================================================ */

.fx-seo-inline-converter {
    min-width:0;

    display:flex;

    align-items:stretch;
}

.fx-seo-inline-converter > .fx-free-card {
    width:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;

    margin:0;

    border-radius:var(--fx-radius-lg);
}

.fx-seo-inline-converter .fx-free-drop {
    min-height:clamp(285px,28vw,390px);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
}

.fx-seo-inline-converter .fx-free-upload-icon {
    margin-bottom:8px;
}

.fx-seo-inline-converter .fx-free-drop > strong {
    max-width:460px;

    font-size:clamp(1.1rem,1.6vw,1.38rem);
    line-height:1.28;
}

.fx-seo-inline-converter .fx-free-drop > span {
    max-width:440px;
}

.fx-seo-inline-converter .fx-free-primary {
    min-height:42px;
}


/* Keep state panels aligned with the same card geometry */

.fx-seo-inline-converter :is(
    .fx-free-file,
    .fx-free-processing,
    .fx-free-result,
    .fx-free-donation,
    .fx-free-upgrade,
    .fx-free-message
) {
    width:100%;
}


/* Mobile conversion-first */

@media (max-width:768px) {

    .fx-seo-inline-converter {
        margin:0 0 18px;
    }

    .fx-seo-inline-converter > .fx-free-card {
        border-radius:var(--fx-radius-md);
    }

    .fx-seo-inline-converter .fx-free-drop {
        min-height:235px;

        padding:18px 14px;
    }

    .fx-seo-inline-converter .fx-free-upload-icon {
        margin-bottom:4px;
    }

    .fx-seo-inline-converter .fx-free-drop > strong {
        font-size:1.08rem;
    }

    .fx-seo-inline-converter .fx-free-drop > span {
        font-size:.77rem;
    }

    .fx-seo-inline-converter .fx-free-primary {
        min-height:40px;
    }

    .fx-seo-inline-converter .fx-free-trust {
        gap:6px;
    }
}


@media (max-width:430px) {

    .fx-seo-inline-converter .fx-free-drop {
        min-height:210px;
    }
}