:root {
    --color-result-tabs-active:#5001DE;
    --color-result-tabs-border-bottom:#5001DE;
    --badge-purple-text:#5001DE;
    --bg-badge-purple:#F1EBFD;
    --bg-prog-bar:#EFEEF2;
    --color-text-verify-p:#4A495C;
}

[data-theme="dark"] {
    --color-result-tabs-active:#FFFFFF;
    --color-result-tabs-border-bottom:#FFFFFF;
    --badge-purple-text:white;
    --bg-badge-purple:#2E2E2E;
    --bg-prog-bar:#37393A;
    --color-text-verify-p:#BBB4C7;
    --color-bg-chose-icon:    #1D004E;
}

.color-text-verify-p{
    color: var(--color-text-verify-p);
}

.bg-danger{
    background-color: #FF282C !important;
}
.bg-warning{
    background-color: #FC9C21 !important;
}
.bg-success{
    background-color: #18AF7B !important;
}

.bg-badge-purple{
    color: var(--badge-purple-text);
    background-color: var(--bg-badge-purple);
}

.verify-modal {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    max-width: 392px;
    margin: auto;
    background-color: var(--color-bg-white);
}

[data-theme="dark"] .verify-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* .captcha-box {
    min-height: 68px;
    padding: 10px 15px;
    border: 1px solid #D3D3D3;
    border-radius: 15px;
    background-color: #F9F9F9;
    box-shadow: 0px 0px 3.6px 0.9px #00000014;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
} */

/* Turnstile ko box ke andar contain rakho */
.captcha-box .cf-turnstile {
    width: 100%;
    max-width: 304px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Cloudflare iframe */
.captcha-box .cf-turnstile iframe {
    display: block;
    max-width: 80%;
}

.captcha-logo img {
    display: block;
    margin: auto;
}

.form-check-input {
    width: 24px;
    height: 24px;
}

.continue-btn {
    max-width: 165px !important;
    height: 52px;
}

.chose-box-img{
    background-color: var(--color-bg-chose-icon);
}

.card-whychoose:hover .chose-box-img {
    background: var(--grad-main);
}

.tooltip {
    --bs-tooltip-bg: #1E1E1E;
    --bs-tooltip-color: #FFFFFF;
    --bs-tooltip-opacity: 1;
}

.tooltip .tooltip-inner {
    background: #1E1E1E;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 16px 18px;
    max-width: 280px;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.tooltip .tt-title {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}

.tooltip .tt-text {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

/* Tooltip Arrow */
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #1E1E1E;
}
html[data-theme="dark"] .detector-icon {
    filter: brightness(0) saturate(100%) invert(46%) sepia(97%) saturate(2471%) hue-rotate(221deg) brightness(101%) contrast(101%);
}

html[data-theme="light"] .detector-icon {
    filter: brightness(0) saturate(100%) invert(13%) sepia(99%) saturate(7444%) hue-rotate(266deg) brightness(77%) contrast(126%);
}

/* ==========================================================================
   Input Area
   ========================================================================== */

.input-area {
    max-width: 793px;
    min-height: 370px;
    /* margin-top: 2rem; */
    padding: 1.25rem 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-input);
    border-radius: 26px;
}

html[data-theme="dark"] .input-area {
    background: #10002B;
}

.input-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--color-border-tool);
}

#scanText {
    width: 100%;
    min-height: 50px;
    border: 0;
    outline: 0;
    resize: none;
    background: 0;
    color: var(--color-text-body);
    transition: .15s;
}

#scanText::placeholder {
    color: var(--color-text-body);
}

#scanText.has-text {
    flex: 1;
    min-height: 250px;
    max-height: 260px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #b0b0b0 transparent;
}

#scanText.has-text::-webkit-scrollbar {
    width: 5px;
}

#scanText.has-text::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 10px;
}

#scanText.has-text::-webkit-scrollbar-thumb:hover {
    background: #8a8a8a;
}

#chipContainer {
    min-height: 38px;
}

.chip {
    padding: .4rem .9rem;
    border-radius: 20px;
    background: var(--color-bg-scrollbar);
    transition: background 0.2s, color 0.2s;
}

.chip:hover {
    background: var(--color-bg-chip);
    color: var(--color-text-black);
}

.chip:hover span {
    color: var(--color-text-black);
}

.chip:hover img.icon-dark-white {
    filter: brightness(0) !important;
}

html[data-theme="dark"] .chip:hover img.icon-dark-white,
html[data-theme="dark"] .chip.active img.icon-dark-white {
    filter: brightness(0) invert(1) !important;
}

html[data-theme="dark"] .spinner-border {
    color: #fff !important;
}


/* ==========================================================================
   Result — Score Ring
   ========================================================================== */

.ring {
    position: relative;
    width: 110px;
    height: 84px;
}

.ring.ring-sm {
    width: 64px;
    height: 64px;
}

.ring svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.ring-track {
    fill: none;
    stroke: var(--color-ring-track);
    stroke-width: 7;
}

.ring-value {
    fill: none;
    stroke-width: 7;
    /* stroke-linecap: round; */
    /* transition: stroke-dashoffset 1.1s cubic-bezier(.34, 1.4, .5, 1); */
    transition: stroke-dashoffset 1.1s ease-out;
}

.ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.progress {
    height: 6px;
    background-color: var(--bg-prog-bar);
}


/* ==========================================================================
   Result — Tabs & Summary Panel
   ========================================================================== */

.result-tabs {
    border-bottom: 1px solid var(--color-ring-track);
    gap: 1.5rem;
}

.result-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .85rem 0;
    font-weight: 600;
    font-size: .9rem;
    color: var(--color-text-body);
}

.result-tabs .nav-link.active {
    color: var(--color-result-tabs-active);
    border-bottom-color: var(--color-result-tabs-border-bottom);
    background: none;
}
.result-tabs .nav-link:hover {
    color: var(--color-result-tabs-active);
}


.summary-panel {
    display: none;
}

.summary-panel.active {
    display: block;
}

.content-body {
    position: relative;
    height: auto;
    min-height: 450px;
    max-height: 640px;
    overflow-y: auto;
}

.content-blur {
    filter: blur(3.5px);
    user-select: none;
}

.paywall-modal {
    max-width: 400px;
    width: 100%;
    margin: 18px auto 0;
    box-shadow: var(--color-paywall-shadow);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -11px;
}

.lock-overlay {
    max-width: 400px;
    width: 100%;
    margin: 18px auto 0;
    box-shadow: var(--color-paywall-shadow);
}
/* ==========================================================================
   Result — Sentence List
   ========================================================================== */

.sentence-list {
    max-height: 640px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b0b0b0 transparent;
}
.sentence-item {
    border-color: var(--color-ring-track) !important;
    transition: border-color .15s ease;
}

.sentence-item.open {
    border-color: var(--color-card-border-light) !important;
}

.sentence-item.locked {
    filter: blur(3.5px);
    user-select: none;
    pointer-events: none;
}

.sentence-item:not(.locked) .sentence-row {
    cursor: pointer;
}

.sentence-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sentence-detail {
    display: none;
}

.sentence-item.open .sentence-detail {
    display: block;
}

.sentence-row i.bi-chevron-down {
    transition: transform .2s ease;
}

.sentence-item.open .sentence-row i.bi-chevron-down {
    transform: rotate(180deg);
}

.accordion-icon-res {
    transition: transform .2s ease;
}

.sentence-item.open .accordion-icon-res {
    transform: rotate(180deg);
}

html[data-theme="dark"] .accordion-icon-res {
    filter: brightness(0) saturate(100%) invert(100%);
}

.bar-track-mini {
    width: 100px;
    height: 5px;
}

/* ==========================================================================
   Result — Filter Pills
   ========================================================================== */

.filter-pill {
    border: 1px solid var(--color-card-border-light);
    background: var(--color-bg-white);
    color: var(--color-text-black);
    font-weight: 600;
    font-size: .78rem;
}

.filter-pill .count {
    color: inherit;
}

.filter-pill.active {
    background: #efe9fb;
    border: 1px solid var(--color-border-primary);
    border-color: #efe9fb;
    color: var(--color-text-black);
}

.filter-pill.active[data-filter="supported"] {
    background: var(--color-success-bg);
    border: 1px solid var(--color-border-success) !important;
    border-color: var(--color-success-bg);
}

.filter-pill.active[data-filter="unsupported"] {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-border-warning) !important;
    border-color: var(--color-warning-bg);
}

.filter-pill.active[data-filter="refuted"] {
    background: var(--color-danger-highlight);
    border: 1px solid var(--color-border-danger) !important;
    border-color: var(--color-danger-highlight);
}

.filter-pill.active[data-filter="summary"] {
    background: var(--color-result-purple-light);
    border: 1px solid var(--color-border-primary) !important;
    border-color: var(--color-result-primary);
    color: #000;
}

/* Count color only when pill is active */
.filter-pill.active[data-filter="all"] .count { color: var(--color-result-primary); }
.filter-pill.active[data-filter="supported"] .count { color: var(--color-success); }
.filter-pill.active[data-filter="unsupported"] .count { color: var(--color-warning); }
.filter-pill.active[data-filter="refuted"] .count { color: var(--color-danger); }

.filter-pill:hover {
    border-color: #4A495C;
}

html[data-theme="dark"] .filter-pill:hover {
    border-color: #FFFFFF;
}

/* Dark mode */
html[data-theme="dark"] .filter-pill {
    background: #171919;
    border-color: #37393A;
    color: #C7BFD0;
}

html[data-theme="dark"] .filter-pill.active[data-filter="all"] {
    background: #261644;
    border-color: #5001DE;
    color: #fff;
}

html[data-theme="dark"] .filter-pill.active[data-filter="supported"] {
    background: #1B3930;
    border-color: #18AF7B;
    color: #fff;
}

html[data-theme="dark"] .filter-pill.active[data-filter="unsupported"] {
    background: #3F301E;
    border-color: #FC9C21;
    color: #fff;
}

html[data-theme="dark"] .filter-pill.active[data-filter="refuted"] {
    background: #401D20;
    border-color: #FF282C;
    color: #fff;
}

html[data-theme="dark"] .filter-pill.active[data-filter="summary"] {
    background: #261644;
    border-color: #5001DE;
    color: #fff;
}

html[data-theme="dark"] .filter-pill.active[data-filter="all"] .count { color: #7E3BFF; }
html[data-theme="dark"] .filter-pill.active[data-filter="supported"] .count { color: #18AF7B; }
html[data-theme="dark"] .filter-pill.active[data-filter="unsupported"] .count { color: #FC9C21; }
html[data-theme="dark"] .filter-pill.active[data-filter="refuted"] .count { color: #FF282C; }


/* ==========================================================================
   Result — Highlights & Status Text
   ========================================================================== */

.alert-wrap {
    max-width: 793px !important;
}

.highlight-danger,
.highlight-warning,
.highlight-human {
    padding: 2px 4px;
    line-height: 1.8;
}

.highlight-human{
    background-color: var(--color-success-bg) !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration: underline;
    text-decoration-color: var(--color-success);
}

.highlight-danger {
    background: var(--color-danger-highlight);
    text-decoration: underline;
    text-decoration-color: var(--color-danger);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.highlight-warning {
    background: var(--color-warning-bg);
    text-decoration: underline;
    text-decoration-color: var(--color-warning);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.text-danger  { color: var(--color-danger)  !important; }
.text-warning { color: var(--color-warning) !important; }
.text-success { color: var(--color-success) !important; }

.text-purple     { color: var(--color-result-primary); }
.bg-purple-light { background: var(--color-result-purple-light); }
.color-4A495C    { color: var(--color-text-body); }


/* ==========================================================================
   Utility Backgrounds
   ========================================================================== */

.bg-EFEEF2 { background-color: var(--color-section-bg); }
.bg-E4F7F0 { background-color: var(--color-success-bg); }
.bg-FFF0E2 { background-color: var(--color-warning-bg); }
.bg-FFE5E5 { background-color: var(--color-danger-bg); }
.bg-F4F4F6 { background-color: var(--color-info-bg); }
.bg-FFF3E8 { background-color: var(--color-warning-bg-light); }

.bg-dark-gradient-ai-content {
    background: var(--color-bg-tools-sec);
}

.pad-10{
    padding: 10px;
}

html[data-theme="dark"] .bg-FAF7FE {
    background-color: #171919;
}

.bg-grad-res {
    background-image: url("../images/ai-detector-free/gradient-result.svg");
    background-repeat: no-repeat;
    background-position: center top 0px;
}

/* ==========================================================================
   Cards & Borders
   ========================================================================== */

.card {
    background-color: var(--color-bg-171919);
    border-color: var(--color-card-border);
    box-shadow: var(--color-card-shadow);
}

html[data-theme="dark"] .card {
    border: 1px solid #37393A !important;
}

.card-body {
    padding: 15px !important;
    background-color: var(--color-bg-171919);
    max-height: 640px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b0b0b0 transparent;
}

html[data-theme="dark"] .card-body {
    border-color: #37393A;
}

.card-footer {
    background-color: transparent;
}

.btn-recheck {
    background-color: var(--color-bg-white);
    border: 1px solid transparent !important;
}

.btn-recheck img {
    filter: brightness(0) saturate(100%) invert(31%) sepia(8%) saturate(500%) hue-rotate(202deg) brightness(90%);
}

[data-theme="dark"] .btn-recheck img {
    filter: brightness(0) saturate(100%) invert(80%) sepia(5%) saturate(500%) hue-rotate(230deg) brightness(90%);
}

.btn-recheck:hover {
    background-color: #fff !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
}

.btn-recheck:hover span {
    color: var(--color-primary) !important;
}

.btn-recheck:hover img {
    filter: brightness(0) saturate(100%) invert(17%) sepia(96%) saturate(6500%) hue-rotate(255deg) brightness(90%) contrast(115%) !important;
}

.border-right { border-right: 1px solid var(--color-card-border); }
.border-DAD6E0 { border: 1px solid var(--color-border-input); }
.border-EBE8EE {
    border: 1px solid var(--color-card-border);
    border-radius: 20px;
}

.border-md-right {
    border-right: 0;
    border-bottom: 1px solid var(--color-card-border);
    padding-bottom: 1rem;
    margin-bottom: .5rem;
}

html[data-theme="dark"] .excerpt-box {
    border: 1px solid #37393A;
}

/* ==========================================================================
   Icons (light / dark toggle)
   ========================================================================== */

.your-content-light-icon { display: inline-block; }
.your-content-dark-icon  { display: none; }

html[data-theme="dark"] .your-content-light-icon { display: none; }
html[data-theme="dark"] .your-content-dark-icon  { display: inline-block; }

html[data-theme="dark"] .dark-logo {
    filter: brightness(0) invert(1);
}

html[data-theme="dark"] .recheck-icon {
    filter: brightness(0) saturate(100%) invert(83%) sepia(8%) saturate(510%) hue-rotate(210deg) brightness(92%) contrast(90%);
}

html[data-theme="dark"] .detail-top-icon {
    filter: brightness(0) saturate(100%) invert(83%) sepia(8%) saturate(510%) hue-rotate(210deg) brightness(92%) contrast(90%);
}

.min-450{
    min-height: 450px !important;
}

#hallu-top {
    position: absolute;
    top: 185px;
    left: 50%;
    transform: translateX(-50%);
}
/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 1300px) and (max-width: 1500px) {
    .input-area {
        min-height: 300px !important;
    }
}

@media (min-width: 768px) {
    .border-md-right {
        border-right: 1px solid var(--color-card-border);
        border-bottom: 0;
        padding-bottom: 0;
        padding-right: 1rem;
        margin-bottom: 0;
        height: 105px;
    }
}


@media (max-width: 767px) {

    .paywall-modal {
        max-width: 330px !important;
    }

    .captcha-box {
        max-width: 100% !important;
        /* min-height: 68px;
        padding: 10px 15px;
        border: 1px solid #D3D3D3;
        border-radius: 15px;
        background-color: #F9F9F9;
        box-shadow: 0px 0px 3.6px 0.9px #00000014;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden; */
    }

    .input-footer {
        display: block;
}

}