/* ── CSS Custom Properties for theme-safe card backgrounds ─────────────
   Using CSS variables instead of class selectors for backgrounds ensures
   correct paint even during lazy tile repaints on Android (Samsung GPU bug)
   Variables are resolved at paint time, not via selector re-evaluation */
:root {
    --tc-bg: #ffffff;
    --tc-border: rgba(0,0,0,0.06);
    --tc-color: #111827;
    --tc-sub-color: #9ca3af;
}

html.dark {
    --tc-bg: #1f2937;
    --tc-border: rgba(255,255,255,0.08);
    --tc-color: #f9fafb;
    --tc-sub-color: #9ca3af;
}

/* Reference Styles from aleeshailyas.com/jeshuuupdf/ */

body {
    padding-top: 60px; /* Fixed nav compensation */
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #F5F4F0;
}

.dark body {
    background: #111827;
}

.fdisplay {
    font-family: 'Fraunces', serif;
}

.blob {
    position: absolute;
    border-radius: 50%;
    /* filter:blur() removed: causes GPU compositor tearing on Android (Mali/Adreno)
       when combined with overflow:hidden parent and position:sticky elements above.
       Using opacity alone for the subtle background effect instead. */
    opacity: .07;
    /* animation removed: animating transform on GPU layers while backdrop-filter
       or overflow:hidden is active causes horizontal noise glitch on Samsung */
}

100% { transform: translate(30px,-20px) scale(1.08); }
}


/* ── Tool Grid Cards ─────────────────────────────────────────────────────
   Completely GPU-safe implementation:
   - Solid explicit backgrounds (no variables, no Tailwind dark: selectors)
   - No transform transitions (eliminates 30+ compositor layers during scroll)  
   - No position:relative (no new stacking contexts)
   - No overflow:hidden (no additional stacking contexts)
   - No line-clamp (no -webkit-box stacking contexts)
   This eliminates the Samsung/Android WebView tile corruption during scroll
   ─────────────────────────────────────────────────────────────────────── */
.tool-card-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 16px;
    text-decoration: none;
    background-color: #ffffff;
    border: 1.5px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.tool-card-item:hover {
    border-color: #9333ea;
    box-shadow: 0 4px 20px rgba(147,51,234,0.12);
}

.tool-card-item .tool-card-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: #111827;
    line-height: 1.3;
}

.tool-card-item .tool-card-desc {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 2px;
    overflow: hidden;
    max-height: 2.4em;
    line-height: 1.2;
}

/* Dark mode - explicit selectors, NO Tailwind :is() dependency */
html.dark .tool-card-item {
    background-color: #1f2937 !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: none;
}

html.dark .tool-card-item:hover {
    border-color: rgba(147,51,234,0.6) !important;
}

html.dark .tool-card-item .tool-card-name {
    color: #f9fafb !important;
}

html.dark .tool-card-item .tool-card-desc {
    color: #9ca3af !important;
}

.tc {
    /* Use CSS variable for background - resolves at paint time, bypasses
       Samsung WebView selector evaluation bug during scroll tile repaints */
    background-color: var(--tc-bg) !important;
    color: var(--tc-color) !important;
    border-color: var(--tc-border) !important;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
    position: relative;
}

.tc:hover { box-shadow: 0 8px 24px rgba(147,51,234,.15); }





to { opacity:1; transform:translateY(0); }
}

.fu {}

.d1 { animation-delay: .05s; }
.d2 { animation-delay: .12s; }
.d3 { animation-delay: .2s; }
.d4 { animation-delay: .28s; }

50% { opacity: .5; transform: scale(.8); }
}

.pdot { width:8px; height:8px; background:#9333ea; border-radius:50%; display:inline-block; }

/* Feedback Slider Styles */
.fb-slider-outer {
    background: #f8f7ff;
    border-top: 2px solid #9333ea;
    border-bottom: 2px solid #9333ea;
    overflow: hidden;
    padding: 22px 0;
    position: relative;
}

.dark .fb-slider-outer {
    background: #0e0e16;
}

.fb-slider-outer::before, .fb-slider-outer::after {
    content: '';
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.fb-slider-outer::before {
    left: 0;
    background: linear-gradient(to right, #f8f7ff, transparent);
}

.fb-slider-outer::after {
    right: 0;
    background: linear-gradient(to left, #f8f7ff, transparent);
}

.dark .fb-slider-outer::before {
    background: linear-gradient(to right, #0e0e16, transparent);
}

.dark .fb-slider-outer::after {
    background: linear-gradient(to left, #0e0e16, transparent);
}

.fb-track {
    display: flex;
    gap: 18px;
    width: max-content;
}


100% { transform: translateX(-50%); }
}

.fb-card {
    background: #fff;
    border: 1.5px solid rgba(147,51,234,.12);
    border-radius: 16px;
    padding: 18px 20px;
    min-width: 270px;
    max-width: 290px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.dark .fb-card {
    background: #141420;
    border-color: rgba(147,51,234, .2);
}

.fb-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #9333ea, #c084fc);
}

.fb-stars {
    color: #f59e0b;
    font-size: .85rem;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.fb-text {
    font-size: .83rem;
    color: #6b7280;
    line-height: 1.65;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dark .fb-text {
    color: #888;
}

.fb-author {
    display: flex;
    align-items: center;
    gap: 9px;
}

.fb-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9333ea, #c084fc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .78rem;
    color: #fff;
    flex-shrink: 0;
}

.fb-name {
    font-weight: 700;
    font-size: .83rem;
    color: #111;
}

.dark .fb-name {
    color: #f0f0f0;
}

.fb-date {
    font-size: .7rem;
    color: #9ca3af;
}

.fb-form-wrap {
    background: #fff;
    border: 1.5px solid rgba(147,51,234, .12);
    border-radius: 20px;
    padding: 32px 30px;
    max-width: 600px;
    margin: 0 auto;
}

.dark .fb-form-wrap {
    background: #111;
    border-color: rgba(147,51,234, .25);
}

.fb-star-btn {
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .15s, filter .15s;
    
    line-height: 1;
}

.fb-star-btn.lit {
    
}

.fb-input {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 11px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: .92rem;
    color: #111;
    background: #f9fafb;
    outline: none;
    transition: all .2s;
}

.fb-input:focus {
    border-color: #9333ea;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(147,51,234, .08);
}

.dark .fb-input {
    background: #1a1a1a;
    border-color: rgba(255,255,255, .1);
    color: #f0f0f0;
}

.dark .fb-input:focus {
    background: #222;
    border-color: #9333ea;
}

textarea.fb-input {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

/* Toast Bar */
.toast-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: #1e1e1e;
    border: 1px solid #9333ea;
    color: #f0f0f0;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: .87rem;
    transition: transform .3s;
    z-index: 9999;
    white-space: nowrap;
    pointer-events: none;
}

.toast-bar.show {
    transform: translateX(-50%) translateY(0);
}

/* Chatbot Styles from Source */
#chatFab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #9333ea, #a855f7);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(147,51,234, .4);
    z-index: 998;
    transition: all .25s;
    font-size: 1.4rem;
}

#chatFab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 36px rgba(147,51,234, .5);
}

#chatFab .fab-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 14px;
    height: 14px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid white;
    /* animation removed - see reviews.css */
}

#chatBox {
    position: fixed;
    bottom: 96px;
    right: 28px;
    width: 360px;
    max-height: 520px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 72px rgba(0,0,0, .18);
    z-index: 997;
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1.5px solid rgba(147,51,234, .12);
    transition: all .25s;
}

.dark #chatBox {
    background: #111;
    border-color: rgba(147,51,234, .25);
}

#chatBox.open {
    display: flex;
    /* animation removed - see reviews.css */
}

.cb-header {
    background: linear-gradient(135deg, #7e22ce, #9333ea);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cb-avatar {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255, .2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cb-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
}

.cb-msg-ai {
    background: #f3f0ff;
    border: 1px solid rgba(147,51,234, .12);
    border-radius: 12px 12px 12px 3px;
    padding: 10px 13px;
    font-size: .84rem;
    line-height: 1.6;
    color: #1a1a1a;
    max-width: 88%;
    align-self: flex-start;
}

.dark .cb-msg-ai {
    background: #1e1a2e;
    color: #f0f0f0;
    border-color: rgba(147,51,234, .2);
}

.cb-msg-user {
    background: linear-gradient(135deg, #7e22ce, #9333ea);
    color: #fff;
    border-radius: 12px 12px 3px 12px;
    padding: 10px 13px;
    font-size: .84rem;
    line-height: 1.6;
    max-width: 88%;
    align-self: flex-end;
}

.cb-typing {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 8px 12px;
}

.cb-typing span {
    width: 7px;
    height: 7px;
    background: #9333ea;
    border-radius: 50%;
    /* animation removed - see reviews.css */
}

.cb-typing span:nth-child(2) { animation-delay: .2s; }
.cb-typing span:nth-child(3) { animation-delay: .4s; }

30% { transform: translateY(-6px); }
}

.cb-input-wrap {
    padding: 12px;
    border-top: 1px solid #f3f0ff;
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.dark .cb-input-wrap {
    border-color: rgba(147,51,234, .15);
}

.cb-input {
    flex: 1;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 9px 13px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .84rem;
    outline: none;
    background: #f9fafb;
    color: #111;
    transition: border-color .2s;
}

.dark .cb-input {
    background: #1a1a2e;
    border-color: rgba(147,51,234, .2);
    color: #f0f0f0;
}

.cb-input:focus { border-color: #9333ea; }

.cb-send {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #7e22ce, #9333ea);
    border: none;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    flex-shrink: 0;
}

.cb-send:hover { transform: scale(1.05); }
.cb-send:disabled { opacity: .4; cursor: not-allowed; }

.cb-quick {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 14px 10px;
}

.cb-qbtn {
    padding: 5px 11px;
    border-radius: 100px;
    border: 1.5px solid rgba(147,51,234, .25);
    background: transparent;
    color: #9333ea;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.cb-qbtn:hover { background: rgba(147,51,234, .08); }

100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* .pop-in moved to reviews.css */

.new-badge {
    background: #9333ea;
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 100px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ========== TOOL ICONS ========== */
.tool-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.iw .tool-icon {
    width: 36px;
    height: 36px;
}

/* Dashicons fallback */
.dashicons-pdf:before { content: "📄"; font-style: normal; }

/* ========== DROP ZONE ========== */
.drop-zone {
    background: #faf5ff;
    border: 2px dashed rgba(147,51,234,0.3);
    border-radius: 20px;
    cursor: pointer;
    padding: 40px 20px;
    transition: all 0.3s ease;
}

.drop-zone:hover {
    border-color: #9333ea;
    background: #f3e8ff;
}

/* ========== PROGRESS BAR ========== */
.progress-bar {
    background: #e5e7eb;
    border-radius: 99px;
    height: 8px;
    overflow: hidden;
    margin: 16px 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7e22ce, #a855f7);
    border-radius: 99px;
    transition: width 0.3s ease;
    width: 0%;
}

/* ========== SECTION COMMON ========== */
.section-padding { padding: 80px 0; }
.gray-bg { background: #f9fafb; }
.section-title {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 2.25rem;
    color: var(--text-primary, #111827);
    margin-bottom: 12px;
}
.section-subtitle {
    color: var(--text-muted, #6b7280);
    font-size: 1.05rem;
}

/* ========== BTN PURPLE ========== */
.btn-purple {
    background: linear-gradient(135deg, #7e22ce, #9333ea);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 28px;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    text-decoration: none;
}

.btn-purple:hover:not(:disabled) {
    background: linear-gradient(135deg, #6b21a8, #7e22ce);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(147,51,234,0.35);
    color: #fff;
}

.btn-purple:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ========== PAGINATION ========== */
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.1);
    background: #fff;
    color: #374151;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-numbers:hover,
.page-numbers.current {
    background: #9333ea;
    border-color: #9333ea;
    color: #fff;
}

.page-numbers.dots { background: transparent; border: none; }

/* ========================================
   LAYOUT UTILITIES
   ======================================== */
.container {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.tool-interface-section {
    padding: 40px 0 60px;
    min-height: 400px;
    background: var(--bg-white);
}

/* dark-mode.css handles .dark .tool-interface-section via !important */

.tool-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* Auto-Save Toggle Switch */
.toggle-checkbox:checked {
    right: 0;
    border-color: #9333ea;
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #9333ea;
}

/* Input focus styles */
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus {
    outline: none;
    border-color: #9333ea;
    box-shadow: 0 0 0 3px rgba(147,51,234,.12);
}

/* ── Prevent horizontal scroll without breaking sticky nav ────────────────
   overflow-x:hidden must be on <html>, NOT <body>.
   Setting it on <body> creates a new scroll container which breaks
   position:sticky and causes GPU compositor conflicts on Android. */
html {
    overflow-x: hidden;
}

.fb-slider-outer::-webkit-scrollbar { display: none; }