@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Word Problem Solver — self-contained redesign styles.
   Deliberately independent from ai-math-solver.css (own `wps-` namespace)
   so nothing here can affect, or be affected by, the AI Math Solver page. */

/* apply Inter across the whole tool UI, same as ai-math-solver.css does for
   #aiMathSolver — overrides the global `* { font-family: 'Lato' }` reset
   (public/css/custom.css, min.css), which restyles every element directly
   (not just via inheritance), so descendants need the override too, not just
   the containers. No single wrapper id exists for this page's tool UI (unlike
   AMS's #aiMathSolver), so this targets every wps- prefixed class instead —
   already covers #wpsCard, #newInput, #convert, #wpsResults, etc, since they
   all carry a wps- class alongside their id. #after_title_line is a shared,
   page-agnostic id (set by calculator-page.blade.php) — safe to target here
   since this stylesheet only ever loads on the word-problem-solver page. */
[class*="wps-"],
[class*="wps-"] *,
#example-container,
#example-container *,
.wps-page-title,
.wps-page-title *,
#after_title_line,
#after_title_line * {
    font-family: 'Inter', sans-serif;
}

/* :root, not #wpsCard — .wps-examples-title (and anything else outside the card,
   like the examples section) sits as a page-level sibling AFTER </form> closes, so
   it's not a descendant of #wpsCard. A var() that can't resolve doesn't just fail
   silently on that one property: it invalidates the whole declared value, so
   color: var(--wps-muted) fell back to inherited black and background:
   var(--wps-border) fell back to transparent — the muted text and divider lines
   never had a competing rule to lose to, the variables were simply undefined there.
   This file only loads on this page, so :root is still effectively page-scoped. */
:root {
    --wps-blue: #1670a7;
    --wps-border: #e6e9ee;
    --wps-muted: #A4A4A4;
    --wps-text: #2b2f36;
    --wps-soft: #f6f8fb;
}

/* ---------- Main card ---------- */
.wps-card {
    position: relative;
    border: 1px solid var(--wps-border);
    border-radius: 10px;
    background: #fff;
    padding: 20px;
    box-shadow: 0px 0px 6px 0px #158FD966;
}

/* ---------- Question input ---------- */
.wps-input-wrap {
    position: relative;
}
/* #newInput.wps-input[contenteditable] (ID + class + attribute) so this
   reliably beats aitools.css's shared `p#newInput[contenteditable]` rule
   (loaded on every AiTools page, specificity 1-1-1) — that rule otherwise
   wins and silently drops the right-side space this reserves for the
   Sample/Clear button. Do not "fix" this by editing aitools.css; it's
   shared by other calculators. */
#newInput.wps-input[contenteditable] {
    min-height: 120px;
    outline: 0;
    border: none;
    font-size: 14px;
    line-height: 1.6;
    color: var(--wps-text);
    overflow: auto;
    resize: none;
    padding: 4px 90px 4px 2px;
}
/* aitools.css's shared `#newInput.placeholder::before { content: attr(...) !important }`
   still paints its own placeholder text — same specificity-fight as above, plus it uses
   !important, so beating it needs matching !important with higher specificity. We render
   the placeholder as a real <span> in .wps-input-hint instead (so it can sit in a flex row
   next to the Sample button), so the pseudo-element's copy must be suppressed here. */
#newInput.wps-input.placeholder::before {
    content: "" !important;
}

/* placeholder text + Sample chip, overlaid at the top of the (empty) input */
.wps-input-hint {
    position: absolute;
    top: 4px;
    left: 2px;
    right: 2px;
    color: var(--wps-muted);
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    pointer-events: none;
}
.wps-input-hint .wps-sample-btn {
    pointer-events: auto;
}
/* ai-style.css (shared by ~30 tool pages) has its own bare `#exampleLoadBtn { padding,
   background, border:none }` — an ID rule that beats a plain class on specificity.
   Combining the id with our class matches that specificity and wins instead; see the
   longer note on the Solve button above for why the id itself can't be renamed. */
#exampleLoadBtn.wps-sample-btn {
    display: inline-flex;
    align-items: center;
    gap: 5.63px;
    width: 80px;
    height: 26px;
    padding: 6px 12px;
    border-radius: 5px;
    border: 1px solid #E5E7EB;
    background: #f3f4f6;
    font-size: 12px;
    color: var(--wps-text);
    cursor: pointer;
    transition: all .2s;
}
#exampleLoadBtn.wps-sample-btn:hover {
    border-color: var(--wps-blue);
    color: var(--wps-blue);
}

/* "Clear" — separate, independent button, right-anchored, shown only once there's content */
.wps-clear-btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 6;
    padding: 4px 14px;
    border: 1px solid var(--wps-border);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: var(--wps-text);
    cursor: pointer;
    transition: all .2s;
}
.wps-clear-btn:hover {
    border-color: var(--wps-blue);
    color: var(--wps-blue);
}
.wps-clear-btn.d-none {
    display: none;
}

/* ---------- Toolbar ---------- */
.wps-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--wps-border);
    margin-top: 30px;
    padding-top: 24px;
    flex-wrap: wrap;
}
.wps-tools-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- Free-queries banner (matches AI Math Solver's .ams-queries-banner) ---------- */
.wps-queries-banner {
    text-align: center;
    font-size: 14px;
    color: #5b6470;
    box-shadow: 0 -3px 4px -3px rgba(21, 143, 217, 0.18);
    margin: 16px 0 0;
    padding-top: 14px;
}
.wps-queries-banner.d-none { display: none !important; }
.wps-queries-banner .wps-q-highlight {
    color: var(--wps-blue);
    font-style: italic;
    font-weight: 400;
}
.wps-queries-banner a {
    color: var(--wps-blue);
    font-weight: 600;
    text-decoration: underline;
}
.wps-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    width: 36px;
    /* padding: 0 14px; */
    box-sizing: border-box;
    border: 1.2px solid #DEE0E3;
    border-radius: 5px;
    background: #FFFFFF;
    color: var(--wps-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wps-tool-btn:hover {
    border-color: #c7d0db;
    background: var(--wps-soft);
}
.wps-tool-btn.active {
    border-color: #4495FB;
    background: #EFF6FF;
    color: var(--wps-blue);
    font-weight: 700;
}
.wps-tool-btn--icon {
    padding: 0 10px;
}
.wps-tb-icon {
    object-fit: contain;
}
.wps-tb-icon--math { width: 18px; height: 12px; }
.wps-tb-icon--advance { width: 21px; height: 21px; }

/* tooltips (dark bubble above the element) */
.wps-has-tip { position: relative; }
.wps-has-tip .wps-tip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #4b4b4b;
    color: #fff;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    border-radius: 12px;
    padding: 9px 13px;
    width: max-content;
    max-width: 220px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1000;
    pointer-events: none;
}
.wps-has-tip .wps-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #4b4b4b;
}
.wps-has-tip:hover .wps-tip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.wps-tip--right {
    left: auto !important;
    right: 0;
    transform: translateY(4px) !important;
}
.wps-has-tip .wps-tip--right::after {
    left: auto;
    right: 46px;
    transform: none;
}
.wps-has-tip:hover .wps-tip--right { transform: translateY(0) !important; }

/* ---------- Dropdown menu ---------- */
.wps-dropdown {
    position: relative;
}
.wps-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--wps-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
    /* padding: 10px 17px; */
    z-index: 50;
    display: none;
}
.wps-menu.open {
    display: block;
}
.wps-menu-item {
    padding: 10px 17px;
    border-radius: 7px;
    font-size: 12px;
    color: var(--wps-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.wps-menu-item .wps-tb-icon{
    width: 16px;
    height: 16px;
}
.wps-menu-item:hover {
    background: var(--wps-soft);
}

/* "Language" row opens a flyout grid of short language codes */
.wps-menu-item--sub {
    position: relative;
}
.wps-submenu-caret {
    height: 7px;
    width: 5px;
    margin-left: auto;
}
.wps-lang-grid {
    top: -6px;
    left: 100%;
    margin-left: 6px;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    min-width: 160px;
    padding: 10px;
}
.wps-lang-grid.open {
    display: grid;
}
.wps-lang-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wps-text);
    text-decoration: none;
    /* background: #F9FAFB; */
    transition: all .15s ease;
}
.wps-lang-cell:hover {
    background: #EFF6FF;
    color: var(--wps-blue);
}
.wps-lang-cell.active {
    background: #EFF6FF;
    color: var(--wps-blue);
    border: 1px solid var(--wps-blue);
}
@media (max-width: 600px) {
    .wps-lang-grid {
        left: auto;
        right: 0;
        top: calc(100% + 4px);
        margin-left: 0;
    }
    #convert.wps-solve-btn {
        width: 76px !important;
        height: 32px !important;
        font-size: 16px !important;
    }
    .page-word-problem-solver{
        padding: 20px 0px 0px;
    }
    .wps-tool-btn{
        width: 26px;
        height: 26px;
        padding: 0px;
    }
    .wps-tb-icon--math{
        width:14.45px;
        height: 14.45px;
    }
    .wps-tool-btn svg{
        width: 10px;
        height: 10px;
    }
    .wps-tb-icon--advance{
        width: 12px;
        height: 12px;
    }
}

/* ---------- Solve button ----------
   resources/css/ai-style.css (shared by ~30 tool pages via <x-ai-style>, so it can't
   be edited for a word-problem-solver-only change) ships a bare `#convert { ... }`
   rule with its own gradient/height/padding/font-size — an ID selector, which beats
   a plain class selector on specificity regardless of load order. #convert is the
   shared submit script's own id (its Turnstile-gate + click handler + enable/disable
   logic all do getElementById('convert') directly), so it must stay put — renaming it
   would silently break Solve on this page instead. Combining the existing id with our
   class (#convert.wps-solve-btn) matches that specificity and wins instead. */
#convert.wps-solve-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10.71px;
    width: 105px;
    height: 45px;
    padding: 11.79px 28px;
    border: none;
    border-radius: 5px;
    background: #2277AB;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    transition: filter .2s, transform .05s;
}
#convert.wps-solve-btn:hover {
    filter: brightness(1.05);
}
#convert.wps-solve-btn:active {
    transform: translateY(1px);
}
/* disabled until there's a question or an image (wpsSyncSolveBtn() in
   word-problem-solver.js) — also covers the shared upload()'s own brief
   disable while a file is mid-upload. ai-style.css has its own bare
   #convert:disabled rule; the id+class combo here wins on specificity same
   as the base rule above. */
#convert.wps-solve-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    background: #2277AB;
    color: #fff;
    filter: none;
}
/* the shared script overwrites #convert's innerHTML with its own old
   text+icon markup after every request — hide that icon so only "Solve" shows,
   exactly like before the first query */
#convert.wps-solve-btn img {
    display: none !important;
}

/* ---------- Examples ---------- */
.wps-examples {
    margin-top: 20px;
}
.wps-examples-title {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: center;
    color: var(--wps-muted) !important;
    font-size: 16px;
    margin-bottom: 18px;
}
.wps-examples-title::before,
.wps-examples-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wps-border);
}
.wps-example-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    transition: opacity .2s ease;
}
/* dimmed while the "+" toolbar menu is open */
.wps-example-grid.wps-dimmed {
    opacity: .35;
    pointer-events: none;
}
.wps-example-card {
    border: 1px solid transparent;
    border-radius: 10px;
    background: #f6f7f9;
    padding: 10px 12px;
    cursor: pointer;
    transition: box-shadow .2s, transform .2s, background .2s;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wps-example-card:hover {
    background: #eef1f5;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .06);
    transform: translateY(-2px);
}
.wps-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    background: #2277AB33;
    color: #2277AB;
    font-size: 12px;
    font-weight: 400;
    padding: 0 8px;
    border-radius: 5px;
}
.wps-tag-icon {
    width: 15px;
    height: 15px;
    object-fit: contain;
    flex-shrink: 0;
}
.wps-example-body {
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.55;
    flex: 1;
    display: flex;
    align-items: flex-start;
}
/* image-only card (e.g. Chemistry) — image fills the body, centered */
.wps-example-body.center {
    padding: 0px !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: transparent;
}
.wps-example-body img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
    object-fit: contain;
}
/* image + caption card (e.g. Physics) — image on top, text below, same 12px body style */
.wps-example-body--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
}
.wps-example-body--stack img {
    max-height: 45px;
    object-fit: contain;
}
.wps-example-body--stack p {
    margin: 0;
    padding: 0 4px;
}

@media (max-width: 991px) {
    .wps-example-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .wps-card { padding: 14px; }
    .wps-toolbar {
        flex-wrap: nowrap;
        gap: 6px;
        padding-top: 12px;
    }
    .wps-tools-left {
        gap: 6px;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .wps-tools-left::-webkit-scrollbar { display: none; }
    .wps-tools-left:has(.wps-menu.open) { overflow: visible; }
    .wps-tool-btn .wps-tip { display: none !important; }
    .wps-menu--lang-fixed,
    .wps-lang-grid {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        margin-left: 0;
        transform: translate(-50%, -50%);
        width: 86vw;
        max-width: 340px;
        min-width: 0;
    }

    /* examples become a horizontal swipeable slider */
    .wps-examples-title { font-size: 12px; }
    .wps-example-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        scrollbar-width: none;
    }
    .wps-example-grid::-webkit-scrollbar { display: none; }
    .wps-example-card {
        flex: 0 0 200px;
        width: 200px;
        min-height: auto;
        scroll-snap-align: start;
    }

    .wps-q-tag { font-size: 11px; height: 22px; padding: 0 8px; }
    .wps-q-text { font-size: 15px; }
}

/* =========================================================
   Answer card — restyles the shared sendMessage()/.resultBox
   markup (from ai-solver-script.blade.php + calculator-page.blade.php)
   to match AI Math Solver's look. This file is only <link>ed on the
   word-problem-solver page, so none of this reaches the ~20 other
   tools that share that same markup/JS — no shared file is edited
   for any of this.
   ========================================================= */

/* Result card — a bespoke clonable template (word-problem-solver/result.blade.php),
   the same architecture AI Math Solver uses: no more DOM surgery on a shared
   .resultBox, so these rules target the template's own markup directly. */
.wps-result {
    margin-top: 16px;
}
.wps-result-card {
    border: 1px solid var(--wps-border);
    border-radius: 14px;
    background: #FCFCFD;
    overflow: visible; /* let action tooltips show without being clipped */
}

/* question — its own white box inside the answer card */
.wps-question {
    margin: 26px 27px;
    padding: 14.2px;
    background: #fff;
    border: 1px solid var(--wps-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 100%;
}
.wps-q-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    background: #1670A71A;
    color: #000;
    font-size: 13px;
    font-weight: 600;
    padding: 0 10px;
    border-radius: 8px;
    flex-shrink: 0;
}
.wps-q-body {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    color: var(--wps-text);
    line-height: 1.6;
    word-break: break-word;
}
.wps-q-text {
    font-size: 16px;
}
.wps-q-img {
    width: 130px;
    height: 65px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 8px;
    margin-top: 8px;
    display: block;
}
.wps-q-img.d-none {
    display: none !important;
}
.wps-q-text + .wps-q-img {
    margin-top: 10px;
}

/* solutions */
.wps-solutions {
    padding: 0;
}
.wps-sol-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    position: relative;
    z-index: 6; /* keep header (and its action tooltips) above the answer content */
}
.wps-sol-head::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 1px;
    background: var(--wps-border);
}
.wps-sol-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    color: var(--wps-text);
}
.wps-sol-icon { width: 28px; height: 28px; object-fit: contain; }
.wps-sol-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* action icons — copy/download/regenerate/delete */
.wps-act {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    transition: background .15s, color .15s;
}
.wps-act:hover {
    background: var(--wps-soft);
    color: var(--wps-blue);
}
.wps-act img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.wps-act-spinning { pointer-events: none; }
.wps-act-spinning img { animation: wps-spin .8s linear infinite; }

/* answer body */
.wps-answer {
    padding: 16px 28px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--wps-text);
}
.wps-answer:empty { padding: 0; }
.wps-answer h1, .wps-answer h2, .wps-answer h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 16px 0 8px;
    color: var(--wps-text);
}
.wps-answer p { margin: 10px 0; }
.wps-answer ul, .wps-answer ol { margin: 10px 0; padding-left: 22px; }
.wps-answer strong { font-weight: 700; }

/* "Solving..." spinner, matching AI Math Solver's loading state */
.wps-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 18px;
}
.wps-spinner {
    width: 38px;
    height: 38px;
    border: 4px solid #e8eef5;
    border-top-color: var(--wps-blue, #1670a7);
    border-radius: 50%;
    animation: wps-spin 1s linear infinite;
}
.wps-loading p {
    color: #6b7280;
    font-size: 13px;
    margin: 0;
}
@keyframes wps-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* footer — "Ask more questions" + the like/dislike feedback row */
.wps-result-foot {
    border-top: 1px solid var(--wps-border);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}
.wps-result-foot.d-none {
    display: none !important;
}
.wps-result-foot .wps-ask-more {
    align-self: center;
}
.wps-result-foot .wps-feedback {
    justify-content: flex-end;
}
.wps-ask-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: #fff;
    color: #000;
    font-weight: 400;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .25);
    transition: box-shadow .15s, color .15s;
}
.wps-ask-more:hover {
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .3);
    color: var(--wps-blue);
}
.wps-feedback {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #000;
}
.wps-feedback strong {
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    color: #000;
}
.wps-fb-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .2);
}
.wps-fb {
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    color: #000;
    border-radius: 6px;
    transition: color .15s;
}
.wps-fb:hover { color: var(--wps-blue); }
.wps-fb.active { color: var(--wps-blue); font-weight: 600; }
.wps-fb-sep { color: #000; }

/* text-selection floating toolbar (Copy / Ask), mirrors AI Math Solver's own */
.wps-sel-toolbar {
    position: absolute;
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: #1f2330;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.wps-sel-toolbar::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f2330;
}
.wps-sel-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s;
}
.wps-sel-btn:hover {
    background: rgba(255, 255, 255, .14);
}

/* disclaimer, matching AI Math Solver's own line under the toolbar */
.wps-disclaimer {
    text-align: center;
    color: #aab2bd;
    font-size: 14px;
    margin: 12px 0 0;
}

/* @media (min-width:900px) {
    .page-word-problem-solver{
        width: 1005px;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
} */

/* =========================================================
   Content sections (word-problem-solver/content.blade.php) —
   mirrors AI Math Solver's .ams-c-* family (public/css/ai-math-solver-content.css),
   same structure/values, just under the wps- namespace and reusing this file's
   own --wps-* tokens instead of re-declaring separate --amsc-* ones.
   ========================================================= */
.wps-content {
    font-family: 'Inter', sans-serif;
    color: var(--wps-text);
}
.wps-c-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
.wps-content h2,
.wps-content h3 {
    font-family: 'Inter', sans-serif;
    color: var(--wps-text);
}
.wps-c-section {
    padding: 70px 0;
}
.wps-c-section:first-of-type { border-top: none; }
.wps-c-title {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 10px;
}
.wps-c-subtitle {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
    /* color: var(--wps-muted); */
}
.wps-c-intro p:last-child { margin-bottom: 0; }

/* ---------- How To Use — full-width shaded section, numbered steps ---------- */
.wps-c-steps {
    background: #F6F8FBDD;
}
.wps-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.wps-step-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 30px 20px;
}
.wps-step-badge {
    position: absolute;
    top: 0;
    left: 11px;
    z-index: 2;
    background: #CFE3FB;
    color: var(--wps-blue);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
    width: 31.78px;
    height: 46.39px;
}
.wps-step-img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--wps-border);
    margin-bottom: 20px;
    padding: 10px;
    box-sizing: border-box;
}
.wps-step-card h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    margin: 0 0 10px;
}
.wps-step-card p {
    font-weight: 400;
    font-size: 16px;
    line-height: 27px;
    margin: 0;
}

/* ---------- Features — 2-col bordered icon cards ---------- */
.wps-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.wps-feature-card {
    border: 1px solid var(--wps-border);
    border-radius: 10px;
    padding: 24px;
    background: #fff;
    display: inline-flex;
    gap:10px;
}
.wps-feature-icon {
    display: block;
    width: 45px;
    height: 45px;
    object-fit: contain;
    border-radius: 10px;
    background: #EAF1FE;
    padding: 15px 14px;
    box-sizing: border-box;
    margin-bottom: 14px;
}
.wps-feature-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
}
.wps-feature-card p {
    font-size: 16px;
    line-height: 23px;
    /* color: var(--wps-muted); */
    margin: 0;
}

/* ---------- How to Solve Word Problems Step-by-Step — steps + worked example ---------- */
.wps-c-howto{
    background: #F6F8FBDD;
}
.wps-howto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    align-items: start;
}
.wps-howto-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.wps-howto-step {
    position: relative;
    border: 1px solid var(--wps-border);
    border-radius: 10px;
    padding: 15px;
    background: #fff;
    display: flex;
    gap: 15px;
    height: 102px;
}
.wps-howto-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 30px;
    bottom: -24px;
    height: 24px;
    border-left: 1px dashed var(--wps-blue);
}
.wps-howto-num {
    /* position: absolute;
    top: -16px;
    left: 20px; */
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: #CFE3FB;
    color: var(--wps-blue);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-sizing: border-box;
}
.wps-howto-step h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 4px 0 6px;
}
.wps-howto-step p {
    font-size: 16px;
    line-height: 23px;
    /* color: var(--wps-muted); */
    margin: 0;
}
.wps-howto-example {
    border: 1px solid var(--wps-border);
    border-radius: 12px;
    padding: 15px 30px;
    background: #fff;
    font-size: 18px;
    line-height: 1.7;
    color: var(--wps-text);
    /* height: 513px; */
}
.wps-howto-example p {
    margin: 0 0 14px;
}
.wps-howto-example p:last-child {
    margin-bottom: 0;
}
.wps-howto-example strong {
    font-weight: 700;
}

/* ---------- Use AI Word Problem Calculator — centered copy ---------- */
.wps-c-use-ai .wps-c-subtitle {
    margin-bottom: 0;
}

/* ---------- Who Can Use Our Word Problem Solver — 2x2 bordered cards ---------- */
.wps-c-who {
    background: #F6F8FBDD;
}
.wps-who-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.wps-who-card {
    width: 100%;
    min-height: 138px;
    box-sizing: border-box;
    border: 1px solid var(--wps-border);
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
/* icon panel fills the card's full height (via the parent's align-items: stretch)
   instead of a fixed padding — so it always matches the card's actual height,
   however tall the card grows for its description text, on desktop and in the
   mobile slider alike. overflow: hidden on the card clips it to the shared
   border-radius, so it doesn't need its own corner radii. */
.wps-who-icon {
    flex: 0 0 auto;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EAF1FE;
    box-sizing: border-box;
}
.wps-who-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.wps-who-body{
    padding: 21px 27px 21px 15px;
}
.wps-who-body h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
}
.wps-who-body p {
    font-size: 16px;
    line-height: 22px;
    /* color: var(--wps-muted); */
    margin: 0;
}

/* ---------- What Types of Word Problems Can This Tool Solve — bordered table grid ---------- */
.wps-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.wps-type-item {
    position: relative;
    padding: 24px;
}
/* dividers are inset (shorter than the cell) rather than full-bleed borders,
   so the vertical and horizontal lines stop short instead of meeting at the
   intersections — the "floating segment" look from the reference, not a
   boxed table. */
.wps-type-item:not(:nth-child(3n))::after {
    content: '';
    position: absolute;
    top: 24px;
    bottom: 24px;
    right: 0;
    width: 1px;
    background: var(--wps-border);
}
.wps-type-item:not(:nth-last-child(-n+3))::before {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background: var(--wps-border);
}
.wps-type-item h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px;
}
.wps-type-item p {
    font-size: 16px;
    line-height: 27px;
    /* color: var(--wps-muted); */
    margin: 0;
}

@media (max-width: 767px) {
    .wps-features-grid { grid-template-columns: 1fr; }
    .wps-howto-grid { grid-template-columns: 1fr; }
    .wps-c-title { font-size: 22px; }
    .wps-c-section { padding: 32px 0; }
    .wps-c-inner { padding: 0 12px; }

    /* "How To Use" steps + "Who Can Use" become horizontal swipeable sliders,
       same pattern as .wps-example-grid above. */
    .wps-steps-grid,
    .wps-who-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        scrollbar-width: none;
        justify-content: flex-start;
    }
    .wps-steps-grid::-webkit-scrollbar,
    .wps-who-grid::-webkit-scrollbar { display: none; }
    .wps-step-card {
        flex: 0 0 240px;
        width: 240px;
        scroll-snap-align: start;
    }
    .wps-who-card {
        flex: 0 0 348px;
        width: 348px;
        height: 140px;
        scroll-snap-align: start;
    }
    /* fixed 140px height leaves less room than the desktop card (which grows
       to fit), so shrink the body copy just for this breakpoint — desktop's
       .wps-who-body sizing above is untouched. */
    .wps-who-body {
        padding: 14px 16px 14px 14px;
    }
    .wps-who-body h3 {
        font-size: 15px;
        margin: 0 0 4px;
    }
    .wps-who-body p {
        font-size: 12.5px;
        line-height: 16px;
    }

    /* single column: no vertical dividers, and the inset horizontal divider
       from desktop becomes a plain full-width one between stacked items. */
    .wps-types-grid { grid-template-columns: 1fr; }
    .wps-type-item::after { display: none; }
    .wps-type-item::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--wps-border);
    }
    .wps-type-item:last-child::before { display: none; }

    .wps-reviews-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ accordion ---------- */
.wps-c-faq {
    background: #F6F8FBDD;
}
.wps-faq-list {
    max-width: 812px;
    margin: 0 auto;
}
.wps-faq-item {
    border-bottom: 1px solid var(--wps-border);
    margin-bottom: 12px;
    overflow: hidden;
    background: transparent;
}
.wps-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: transparent;
    border: none;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    /* color: var(--wps-text); */
    padding: 16px 18px;
    cursor: pointer;
}
.wps-faq-caret {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1.82px solid #000000;
    border-radius: 50%;

}
.wps-faq-caret::before,
.wps-faq-caret::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--wps-text);
    transform: translate(-50%, -50%);
    
}
.wps-faq-caret::before {
    width: 12px;
    height: 2px;
}
.wps-faq-caret::after {
    width: 2px;
    height: 12px;
    transition: transform .2s ease, opacity .2s ease;
}
.wps-faq-item.is-open .wps-faq-caret::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}
.wps-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    padding: 0 18px;
}
.wps-faq-item.is-open .wps-faq-a {
    max-height: 300px;
    padding: 0 18px 16px;
}
.wps-faq-a p { margin: 0 0 8px; font-size: 16px; }
.wps-faq-a p:last-child { margin-bottom: 0; }
.wps-faq-a ul {
    margin: 0 0 8px;
    padding-left: 18px;
}
.wps-faq-a li {
    margin-bottom: 4px;
}

/* ---------- User Reviews ---------- */
.wps-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.wps-review-card {
    background: #fdfdfd;
    border: 1px solid var(--wps-border);
    border-radius: 10px;
    padding: 19px;
}
.wps-review-stars {
    display: flex;
    gap: 2px;
    color: var(--wps-blue);
    margin-bottom: 10px;
}
.wps-review-card > p {
    font-size: 15px;
    color: var(--wps-text);
    margin: 0 0 16px;
}
.wps-review-author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wps-review-author img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.wps-review-author strong {
    display: block;
    font-size: 14px;
    color: var(--wps-text);
}
.wps-review-author span {
    font-size: 13px;
    color: var(--wps-muted);
}

/* ---------- Wide desktops (>=1400px) — center these grids at a fixed
   comfortable width instead of letting them stretch to fill .wps-c-inner. ---------- */
@media (min-width: 1400px) {
    .wps-steps-grid {
        width: 1029px;
        margin: auto;
    }
    .wps-features-grid {
        width: 1025px;
        margin: auto;
    }
    .wps-howto-grid {
        width: 1036px;
        margin: auto;
    }
    .wps-who-grid {
        width: 1030px;
        margin: auto;
    }
    .wps-types-grid {
        width: 1030px;
        margin: auto;
    }
}