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

[class*="chem-"],
[class*="chem-"] *,
#example-container,
#example-container *,
.chem-page-title,
.chem-page-title *,
#after_title_line,
#after_title_line * {
    font-family: 'Inter', sans-serif;
}
#after_title_line{
    font-size: 16px !important;
}
h1{
    font-size: 34px;
    font-weight: 700 !important;
}
:root {
    --chem-blue: #1670a7;
    --chem-border: #e6e9ee;
    --chem-muted: #A4A4A4;
    --chem-text: #2b2f36;
    --chem-soft: #f6f8fb;
}

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

/* ---------- Question input ---------- */
.chem-input-wrap {
    position: relative;
}
/* #newInput.chem-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.chem-input[contenteditable] {
    min-height: 120px;
    outline: 0;
    border: none;
    font-size: 14px;
    line-height: 1.6;
    
    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 .chem-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.chem-input.placeholder::before {
    content: "" !important;
}

/* placeholder text + Sample chip, overlaid at the top of the (empty) input */
.chem-input-hint {
    position: absolute;
    top: 4px;
    left: 2px;
    right: 2px;
    color: var(--chem-muted);
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    pointer-events: none;
}
.chem-input-hint .chem-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.chem-sample-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5.63px;
    width: 76px;
    flex: 0 0 76px;
    height: 26px;
    padding: 6px 12px;
    white-space: nowrap;
    border-radius: 5px;
    border: 1px solid #E5E7EB;
    background: #f3f4f6;
    font-size: 12px !important;
    font-family: 'Inter', 'sans-serif' ;
    cursor: pointer;
    transition: all .2s;
}
#exampleLoadBtn.chem-sample-btn:hover {
    border-color: var(--chem-blue);
    color: var(--chem-blue);
}

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

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

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

/* tooltips (dark bubble above the element) */
.chem-has-tip { position: relative; }
.chem-has-tip .chem-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;
}
.chem-has-tip .chem-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #4b4b4b;
}
.chem-has-tip:hover .chem-tip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.chem-tip--right {
    left: auto !important;
    right: 0;
    transform: translateY(4px) !important;
}
.chem-has-tip .chem-tip--right::after {
    left: auto;
    right: 46px;
    transform: none;
}
.chem-has-tip:hover .chem-tip--right { transform: translateY(0) !important; }

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

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

/* ---------- Solve button ---------- */
#convert.chem-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.chem-solve-btn:hover {
    filter: brightness(1.05);
}
#convert.chem-solve-btn:active {
    transform: translateY(1px);
}
/* disabled until there's a question or an image (chemSyncSolveBtn() 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.chem-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.chem-solve-btn img {
    display: none !important;
}

/* ---------- Examples ---------- */
.chem-examples {
    margin-top: 20px;
}
.chem-examples-title {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: center;
    color: var(--chem-muted) !important;
    font-size: 16px;
    margin-bottom: 18px;
}
.chem-examples-title::before,
.chem-examples-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--chem-border);
}
.chem-example-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    transition: opacity .2s ease;
}
/* dimmed while the "+" toolbar menu is open */
.chem-example-grid.chem-dimmed {
    opacity: .35;
    pointer-events: none;
}
.chem-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;
}
.chem-example-card:hover {
    background: #eef1f5;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .06);
    transform: translateY(-2px);
}
.chem-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;
}
.chem-tag-icon {
    width: 15px;
    height: 15px;
    object-fit: contain;
    flex-shrink: 0;
}
.chem-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 */
.chem-example-body.center {
    padding: 0px !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: transparent;
}
.chem-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 */
.chem-example-body--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
}
.chem-example-body--stack img {
    max-height: 45px;
    object-fit: contain;
}
.chem-example-body--stack p {
    margin: 0;
    padding: 0 4px;
}

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

@media (max-width: 767px) {
    h1{
        font-size: 24px;
    }
    .chem-input-hint,.chem-queries-banner{
        font-size: 12px;
    }
    .chem-card { padding: 14px; }
    .chem-input-hint { flex-wrap: nowrap; }
    .chem-input-hint span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .chem-toolbar {
        flex-wrap: nowrap;
        gap: 6px;
        padding-top: 12px;
    }
    .chem-tools-left {
        gap: 6px;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .chem-tools-left::-webkit-scrollbar { display: none; }
    .chem-tools-left:has(.chem-menu.open) { overflow: visible; }
    .chem-tool-btn .chem-tip { display: none !important; }
    .chem-menu--lang-fixed,
    .chem-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 */
    .chem-examples-title { font-size: 12px; }
    .chem-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;
    }
    .chem-example-grid::-webkit-scrollbar { display: none; }
    .chem-example-card {
        flex: 0 0 195px;
        width: 195px;
        min-height: auto;
        scroll-snap-align: start;
    }

    .chem-q-tag { font-size: 12px; height: 25px; padding: 0 8px; }
    .chem-q-text { font-size: 12px !important;}
    .wps-reviews-grid { grid-template-columns: 1fr; }
    .chem-feedback strong {
        font-size: 14px;
    }
    .chem-ask-more{
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* ---------- 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);
}

/* Result card */
.chem-result {
    margin-top: 16px;
}
.chem-result-card {
    border: 1px solid var(--chem-border);
    border-radius: 14px;
    background: #FCFCFD;
    overflow: visible; /* let action tooltips show without being clipped */
}

/* question — its own white box inside the answer card */
.chem-question {
    margin: 26px 27px;
    padding: 14.2px;
    background: #fff;
    border: 1px solid var(--chem-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 100%;
}
.chem-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;
}
.chem-q-body {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    
    line-height: 1.6;
    word-break: break-word;
}
.chem-q-text {
    font-size: 20px;
    font-weight: 700;
}
.chem-q-img {
    width: 130px;
    height: 65px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 8px;
    margin-top: 8px;
    display: block;
}
.chem-q-img.d-none {
    display: none !important;
}
.chem-q-text + .chem-q-img {
    margin-top: 10px;
}

/* solutions */
.chem-solutions {
    padding: 0;
}
.chem-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 */
}
.chem-sol-head::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 1px;
    background: var(--chem-border);
}
.chem-sol-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    
}
.chem-sol-icon { width: 28px; height: 28px; object-fit: contain; }
.chem-sol-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* action icons — copy/download/regenerate/delete */
.chem-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;
}
.chem-act:hover {
    background: var(--chem-soft);
    color: var(--chem-blue);
}
.chem-act img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.chem-act-spinning { pointer-events: none; }
.chem-act-spinning img { animation: chem-spin .8s linear infinite; }

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

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

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

/* text-selection floating toolbar (Copy / Ask), mirrors AI Math Solver's own */
.chem-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);
}
.chem-sel-toolbar::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f2330;
}
.chem-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;
}
.chem-sel-btn:hover {
    background: rgba(255, 255, 255, .14);
}

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

/* =========================================================
   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 chem- namespace and reusing this file's
   own --chem-* tokens instead of re-declaring separate --amsc-* ones.
   ========================================================= */
.chem-content {
    font-family: 'Inter', sans-serif;
    
}
.chem-c-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
.chem-content h2,
.chem-content h3 {
    /* font-family: 'Inter', sans-serif; */
    
}
.chem-c-section {
    padding: 70px 0;
}
.chem-c-section:first-of-type { border-top: none; }
.chem-c-title {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 10px;
}
.chem-c-subtitle {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
    /* color: var(--chem-muted); */
}
.chem-c-intro p:last-child { margin-bottom: 0; }

/* ---------- How To Use — full-width shaded section, numbered steps ---------- */
.chem-c-steps {
    background: #F6F8FBDD;
}
.chem-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 334px);
    gap: 15px;
    justify-content: center;
}
.chem-step-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20.99px;
    background: #fff;
    border-radius: 10.49px;
    padding: 15px;
}
.chem-step-badge {
    position: absolute;
    top: 0;
    left: 11px;
    z-index: 2;
    background: #CFE3FB;
    color: var(--chem-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;
}
.chem-step-img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--chem-border);
    padding: 10px;
    box-sizing: border-box;
}
.chem-step-card h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    margin: 0;
}
.chem-step-card p {
    font-weight: 400;
    font-size: 16px;
    line-height: 27px;
    margin: 0;
}

/* ---------- Features — 2-col bordered icon cards ---------- */
.chem-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 505px);
    gap: 22px;
    justify-content: center;
}
.chem-feature-card {
    border: 1px solid var(--chem-border);
    border-radius: 10px;
    padding: 24px 27px;
    background: #fff;
    display: inline-flex;
    gap:10px;
}
.chem-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;
}
/* freemium.svg is a wide 30x12 wordmark, not a square icon like the other five —
   object-fit on .chem-feature-icon is a no-op (it's a div, not a replaced element),
   so every other icon just renders at its own natural (roughly square, already
   centered-looking) size, but this one renders tiny and stuck in a corner unless
   its own box is explicitly flex-centered. Scoped to this one icon only, via
   content.blade.php's dedicated class, so the other five keep their original look. */
.chem-feature-icon--center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.chem-feature-icon--freemium-img {
    width: 24px;
    height: auto;
}
.chem-feature-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
}
.chem-feature-card p {
    font-size: 16px;
    line-height: 23px;
    /* color: var(--chem-muted); */
    margin: 0;
}

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

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

/* ---------- Who Can Use Our Chemistry AI Solver — 2x2 bordered cards ---------- */
.chem-c-who {
    background: #F6F8FBDD;
}
.chem-who-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.chem-who-card {
    width: 100%;
    min-height: 138px;
    box-sizing: border-box;
    border: 1px solid var(--chem-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. */
.chem-who-icon {
    flex: 0 0 auto;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EAF1FE;
    box-sizing: border-box;
}
.chem-who-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.chem-who-body{
    padding: 21px 27px 21px 15px;
}
.chem-who-body h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
}
.chem-who-body p {
    font-size: 16px;
    line-height: 22px;
    /* color: var(--chem-muted); */
    margin: 0;
}

/* ---------- What Types of Chemistry Problems Can This Tool Solve — bordered card grid,
   each card an icon badge + title + a bullet list of sub-topics (not a single paragraph,
   and not WPS's inset-divider "floating table" look — this reference shows plain
   individually-bordered cards). ---------- */
.chem-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 275px);
    gap: 25px;
    justify-content: center;
}
.chem-type-item {
    border: 1px solid var(--chem-border);
    border-radius: 10px;
    padding: 25px 22px 24px 22px;
    background: #fff;
    height: 298px;
}
.chem-type-item div{
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
}
.chem-type-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 4px;
    background: #EAF1FE;
    padding: 6px;
    box-sizing: border-box;
}
.chem-type-item h3 {
    font-size: 16px;
    font-weight: 700;
}
.chem-type-item ul {
    margin: 0;
    gap: 10px;
    padding: 0 0 0 18px;
    display: flex;
    flex-direction: column;
}
.chem-type-item li {
    font-size: 14px;
    line-height: 24px;
}

@media (max-width: 767px) {
    .chem-features-grid { grid-template-columns: 1fr; }
    .chem-howto-grid { grid-template-columns: 1fr; }
    .chem-c-title { font-size: 20px; }
    .chem-c-section { padding: 32px 0; }
    .chem-c-inner { padding: 0 12px; }
    .chem-c-subtitle, .chem-faq-a p, .chem-c-intro p, .chem-step-card p, .chem-feature-card p, .chem-howto-step p, .chem-who-body p, .chem-type-item p {
        font-size: 14px !important;
    }
    .chem-faq-q span, .chem-step-card h3, .chem-feature-card h3, .chem-howto-step h3, .chem-who-body h3, .chem-type-item h3 {
        font-size: 16px;
    }
    /* "How To Use" steps + "Who Can Use" become horizontal swipeable sliders,
       same pattern as .chem-example-grid above. */
    .chem-steps-grid,
    .chem-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;
    }
    .chem-steps-grid::-webkit-scrollbar,
    .chem-who-grid::-webkit-scrollbar { display: none; }
    .chem-step-card {
        flex: 0 0 338px;
        width: 338px;
        scroll-snap-align: start;
        gap: 10px;
    }
    .chem-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
       .chem-who-body sizing above is untouched. */
    .chem-who-body {
        padding: 14px 16px 14px 14px;
    }
    .chem-who-body h3 {
        font-size: 15px;
        margin: 0 0 4px;
    }

    /* single column: each .chem-type-item already has its own border (bordered
       card, not WPS's inset-divider table), so stacking needs no extra rules. */
    .chem-types-grid { grid-template-columns: 1fr; }

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

/* ---------- FAQ accordion ---------- */
.chem-c-faq {
    background: #F6F8FBDD;
}
.chem-faq-list {
    max-width: 812px;
    margin: 0 auto;
}
.chem-faq-item {
    border-bottom: 1px solid var(--chem-border);
    margin-bottom: 12px;
    overflow: hidden;
    background: transparent;
}
.chem-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: 18px;
    font-weight: 600;
    padding: 16px 18px;
    cursor: pointer;
}
.chem-faq-q span{
    font-weight: 600;
}
.chem-faq-caret {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1.82px solid #000000;
    border-radius: 50%;

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

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

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