/* ========================================
/* ========================================
   ESSAY REWRITER — Tool-specific styles
   ======================================== */

.tool-section .textarea {
    height: 370px;
}

.synonyms {
    font-weight: var(--font-weight-normal) !important;
    color: #147bcf !important;
}

.bottom_img {
    justify-content: start !important;
}

/* ── Input/Output box dimensions (Figma: h-430px, min-w-480px each) ── */
@media (min-width: 993px) {
    .essayRewriter .input__box,
    .essayRewriter .output__box {
        min-width: 480px;
    }
}

/* ── Keep dropdowns inline and left-aligned on all screen sizes ── */
/* Global style.css @media(≤1024px) adds flex-direction:column + items-center
   to .tool_options, and @media(≤992px) adds flex-direction:column to .flex-row.
   Both must be overridden so the two dropdown pills stay in a row, left-aligned. */

.dropdown___container {
    width: 155px;
}

.essayRewriter .tool_options {
    align-items: flex-start !important;
    text-align: left !important;
}

.essayRewriter .tool_options > .flex-row {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: auto !important;
    flex-wrap: wrap;
    gap: 5px;
}

/* ── Dropdown sizing ─────────────────────── */


/* Academic Level dropdown — max ~150px (Figma) */
.essayRewriter .academic-level-dropdown .dropdown___container .selected__option__container {
    min-width: 135px;
    max-width: 155px;
    width: 155px;
}





.essayRewriter .dropdown___container .options__list {
    bottom: auto !important;
    top: calc(100% + 6px) !important;
    left: 0;
    right: auto;
    min-width: 100%;
}

/* ── Output action buttons (icon style) ─── */
.essayRewriter #feedbackDiv:has(.feedback-form-container.d-none)::after {
    display: none !important;
}

/* ── Tooltip overrides ─────────────────── */
.essayRewriter .download-text-button.tooltip:hover::before,
.essayRewriter .download-text-button.tooltip:hover::after,
.essayRewriter #downloadButton.tooltip:hover::before,
.essayRewriter #downloadButton.tooltip:hover::after,
.essayRewriter #copy-text-btn.tooltip:hover::before,
.essayRewriter #copy-text-btn.tooltip:hover::after {
    display: flex !important;
}

.essayRewriter #feedbackButton.tooltip.hide:hover::before,
.essayRewriter #feedbackButton.tooltip.hide:hover::after {
    display: flex !important;
}

/* ── Setting bar ───────────────────────── */
.essayRewriter .input_setting_bar > div.flex-row.items-center.gap-10 {
    min-height: 34px;
}

.essayRewriter #copy-text-btn {
    min-width: fit-content;
}

.essayRewriter #feedbackDiv .feedback-form-container {
    left: unset !important;
    right: 0 !important;
    transform: translateX(0) !important;
}

/* ── Input/Output box border radii on mobile ── */
.essayRewriter .input__box #ajaxloaderwrapper {
    border-radius: 11px 0 0 11px !important;
}

.essayRewriter .output__box #ajaxloaderwrapper {
    border-radius: 0 11px 11px 0 !important;
}

@media (max-width: 992px) {
    .essayRewriter .input__box {
        padding-top: 6px;
    }

    .essayRewriter .input__box #ajaxloaderwrapper,
    .essayRewriter .output__box #ajaxloaderwrapper {
        border-radius: 11px !important;
    }
}

/* ── Bottom image ──────────────────────── */
@media (max-width: 992px) {
    .essayRewriter .bottom_img {
        width: 100%;
        max-width: 668px;
    }
}

/* ── Input setting bar responsive ─────── */
@media (max-width: 565px) {
    .essayRewriter .input_setting_bar {
        justify-content: space-between;
        padding: 10px;
        gap: 0;
    }

    .essayRewriter .input_setting_bar > div {
        min-width: fit-content;
    }

    .essayRewriter .upload_txt_File_btn {
        color: transparent !important;
        font-size: 0 !important;
        gap: 0 !important;
    }

    .essayRewriter .upload-icon label {
        color: transparent !important;
        font-size: 0 !important;
    }
}

@media (max-width: 370px) {
    .essayRewriter .input_setting_bar {
        justify-content: center;
        padding: 10px;
        gap: 10px;
        flex-direction: column;
    }
    .dropdown___container {
        width: 130px;
    }

}

/* ── Content section typography (mobile) ─ */
@media (max-width: 768px) {
    .essayRewriter .tool-content-wrapper h2,
    .essayRewriter .tool-content-wrapper h3,
    .essayRewriter .tool-content-wrapper h4,
    .essayRewriter .tool-content-wrapper h5,
    .essayRewriter .tool-content-wrapper h6,
    .essayRewriter .tool-content-wrapper p {
        text-align: left !important;
    }

    .essayRewriter .tool-content-wrapper .faq__section h2 {
        text-align: center !important;
    }
}