* {
    font-family: Helvetica, sans-serif;
}
/* Dashboard Buttons Login and create */
.login-button {
    border-radius: 9px;
    background-color: white;
    padding: 5px 10px;
}

.create-button {
    border-radius: 9px;
    background-color: #4242fc;
}

.large-button-create {
    border-radius: 9px;
    background-color: #4242fc;
}

.webhooks-99 {
    background-image: linear-gradient(90deg, #367ee2, #14e7ee);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-item-hover:hover {
    border-radius: 9px;
    background-color: #f0f0f1;
}

.feature-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.zoom-img {
    height: auto;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgb(216, 215, 215);
}

.zoom-img:hover {
    height: auto;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgb(0, 0, 0);
}

.zoom-img img {
    width: 100%;
    transition: all 0.3s ease-in-out;
}

.zoom-img img:hover {
    transform: scale(1.05);
}

.marquee-container {
    width: 100%;
    background-color: #0080ff;
    padding: 15px 0;
}

.marquee-content {
    display: flex;
    animation: marquee 20s linear infinite;
}

.marquee-content:hover {
    animation-play-state: paused;
}

.marquee-item {
    flex: 0 0 auto;
    padding: 0 20px;
    font-size: 1.2rem;
    color: #495057;
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-50%);
    }
}

.image {
    float: left;
    width: 100vw;
    height: 205px;
    object-fit: cover;
    object-position: center;
}

.circle-icon {
    background-color: #b2cdaf;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
    padding: 7px;
}

.circle {
    background-color: #000000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
    padding: 7px;
}

.content p {
    font-size: 18px;
    color: #000000;
}

.content-size {
    font-size: 18px;
}

.content p img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.content ul,
.content ol {
    padding-left: 2rem;
}

.dropdown-toggle:hover::after {
    transform: rotate(-180deg);
}

.dropdown-menu-heading {
    color: #283338;
    font-size: 14px;
    font-weight: normal;
}

.dropdown-menu-sub-heading {
    color: #757575;
    font-size: 12px;
}

.apps-list {
    background: #f8f8f9;
    padding: 10px;
    padding-bottom: 15px;
}

.apps-list a {
    padding-right: 70px;
    padding-left: 10px;
    padding-bottom: 10px;
}

.apps-list a:hover {
    padding-right: 70px;
    padding-left: 10px;
    border-radius: 5px;
    background-color: #e8476929;
    padding-bottom: 10px;
}

.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown > .dropdown-toggle:active {
    pointer-events: none;
}

@media only screen and (max-width: 830px) {
    .image {
        float: left;
        width: 300px;
        height: 375px;
        object-fit: cover;
        object-position: center;
    }
}

@media only screen and (max-width: 530px) {
    .image {
        float: left;
        width: 300px;
        height: 195px;
        object-fit: cover;
        object-position: center;
    }
}

@media screen and (min-device-width: 300px) and (max-device-width: 530px) {
    .feature-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
}

@media screen and (min-device-width: 530px) and (max-device-width: 730px) {
    .feature-image {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
}

@media screen and (min-device-width: 300px) and (max-device-width: 990px) {
    .feature-image {
        border-top-left-radius: 25px;
        border-bottom-right-radius: 0px !important;
    }
}

/* Optional: Pause animation on hover */
.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

/* ************************Apppd******************** */
.ggg {
    background-color: #0080ff;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
    grid-auto-rows: minmax(100px, auto);
    grid-auto-columns: minmax(50px, auto);
}

@media only screen and (max-device-width: 480px) {
    .content p {
        font-size: 16px;
        line-height: 165%;
    }
}

.commerce-section {
    margin-top: 75px;
}

/* Guide */
.support-text {
    color: #e84769;
    font-size: 16px !important;
    cursor: pointer;
    margin-top: 3px;
    font-weight: 800;
}

.supportBox ul {
    list-style: none;
}

.support-index {
    font-weight: 800;
    font-size: 20px;
    line-height: 28px;
    color: #222222;
    margin-bottom: 10px;
}

.support-items {
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    min-height: 18px;
    color: #222222;
    align-items: center;
}

.support-items:hover {
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    color: #e84769;
    align-items: center;
}

.icon {
    font-size: 30px;
}

.supportBox ul,
.supportBox li {
    padding-left: 0rem;
}

.collapse-text {
    color: #212121;
    text-decoration: none;
}

.collapse-text:hover {
    color: #e84769;
    text-decoration: none;
}

hr {
    margin: 0px;
}

.breadcrumb li a {
    color: #e84769;
}

.sub_category_text {
    color: #e84769;
}

.sub_category_capitalize {
    text-transform: capitalize;
}

.sub_category {
    text-decoration: none;
}

.category_information {
    font-size: 16px;
    color: #34495e;
    margin-left: 30px;
}

.sub_category_title {
    font-size: 16px;
    color: #e84769;
    font-weight: 800;
}

.introduction {
    font-size: 18px;
    line-height: 32px;
    color: rgba(34, 34, 34, 0.6) !important;
}

.title {
    font-size: 44px;
    line-height: 60px;
    letter-spacing: -0.015em;
    color: #222222;
    margin-top: 0 !important;
}

.list-group-item-li a {
    color: #e84769;
    text-decoration: none;
}

.guide-sub-title p {
    font-size: 18px !important;
    color: rgba(34, 34, 34, 0.6) !important;
    margin-bottom: 20px !important;
    width: 100%;
    height: auto;
}

.guide-sub-title p img {
    width: 100%;
    height: auto;
}

.list-h2 {
    font-weight: 700;
    font-size: 25px;
    line-height: 1.2;
    color: #222222 !important;
    padding-bottom: 5px !important;
}

.ri-add-circle-fill {
    color: #e84769;
}

.sub_guides {
    font-weight: bold !important;
    font-size: 20px !important;
    line-height: 28px !important;
    margin-bottom: 32px !important;
    margin-top: 44px !important;
}

.sub_guides_link {
    text-decoration: none;
    font-weight: 800;
    font-size: 16px;
    line-height: 24px;
    color: #e84769;
}

.sub_guides_introduction {
    box-sizing: border-box;
    font-size: 17px;
    line-height: 22px;
    color: rgba(34, 34, 34, 0.8);
    margin-top: 8px;
}

.feature_article_title {
    font-weight: 700 !important;
    padding-top: 24px !important;
    font-size: 25px !important;
    color: #222222;
}

.form-select {
    font-weight: 800;
    background-color: #f1f0f0;
    border: 2px solid #cecece !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.form-select:hover {
    font-weight: 800;
    background-color: #f1f0f0;
    border: 2px solid #e84769 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.press {
    text-decoration: none;
}

.press h3 {
    color: #000000;
}

.press p {
    color: #545454;
}

.press-div {
    padding: 15px;
}

.press-div:hover {
    background-color: #eee;
    text-decoration: dotted;
    padding: 15px;
}

.press-div a:hover {
    text-decoration: underline;
    color: black;
}

.footer-btn a {
    text-decoration: none;
    color: black;
    font-weight: 600;
}

.height {
    min-height: 100vh;
}

/* =============================================================
   ACCESSIBILITY - Contrast Fixes
   ============================================================= */

/* Testimonial badges - improve contrast */
.badge.testimonial-badge {
    font-weight: 600;
}

.bg-primary-subtle.text-primary {
    background-color: #cfe2ff !important;
    color: #0a58ca !important;
}

.bg-success-subtle.text-success {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
}

/* Improve contrast for text-secondary on light backgrounds */
div.height .text-secondary,
.card .text-secondary,
.bg-light .text-secondary,
[style*="background-color: #f8f8f9"] .text-secondary {
    color: #495057 !important;
}

/* Ensure footer headings have sufficient contrast */
.footer-link {
    text-decoration: none;
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.footer-link {
    text-decoration: none;
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.footer-link:hover {
    text-decoration: underline;
}

.jumbotron {
    margin-top: 30px;
    background: #ede7e8a1;
    color: #FFF;
    border-radius: 0px;
}

.jumbotron-sm {
    padding-top: 24px;
    padding-bottom: 24px;
}

.jumbotron small {
    color: #FFF;
}

.h1 small {
    font-size: 24px;
}


/* =============================================================
   QUILL TABLE STYLES — Full Inline Style Preservation
   Goal: Editor-set width, height, padding, font-size, font-weight
         on tables, rows, and cells are NEVER overridden.
   ============================================================= */

/* ── Content area ── */
.content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    /* Ensure content doesn't constrain children */
    flex-shrink: 1;
    flex-grow: 1;
    /* Wrap long content properly */
    word-wrap: normal;
    overflow-wrap: normal;
    hyphens: none;
    word-break: normal;
    /* Prevent content from escaping */
    position: relative;
}

/* Ensure Bootstrap columns allow table scrolling */
.col-lg-7 .content,
.col-lg-8 .content,
.col-lg-9 .content,
.col-lg-10 .content,
.col-lg-11 .content,
.col-lg-12 .content,
.col-md-7 .content,
.col-md-8 .content,
.col-md-9 .content,
.col-md-10 .content,
.col-md-11 .content,
.col-md-12 .content {
    overflow-x: visible !important;
}

/* Blog page content width constraint and wrapping */
.col-lg-7 .content {
    width: 100% !important;
    max-width: 720px !important;
    display: block !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    white-space: normal !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    position: relative !important;
}

/* Rich text editor content - prevent overlapping and ensure wrapping */
.content img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

.content video,
.content iframe,
.content embed,
.content object {
    max-width: 100% !important;
    height: auto !important;
}

.content pre,
.content code {
    max-width: 100% !important;
    overflow-x: hidden !important;
    white-space: pre-wrap !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

/* Table wrapper - make tables scrollable */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.content table {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    display: table;
    margin-bottom: 1rem;
}

.content p,
.content div,
.content span,
.content li {
    width: auto !important;
    max-width: 100% !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    overflow: visible !important;
}

.content td,
.content th {
    width: auto !important;
    max-width: 100% !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

.content a {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
}

/* Fix absolute positioned elements in rich text */
.content [style*="position: absolute"],
.content [style*="position: fixed"] {
    position: static !important;
}

/* Ensure all rich text elements stay within container */
.content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure wrapper works inside columns */
.col-lg-7 .ql-table-wrapper,
.col-lg-8 .ql-table-wrapper,
.col-lg-9 .ql-table-wrapper,
.col-lg-10 .ql-table-wrapper,
.col-lg-11 .ql-table-wrapper,
.col-lg-12 .ql-table-wrapper,
.col-md-7 .ql-table-wrapper,
.col-md-8 .ql-table-wrapper,
.col-md-9 .ql-table-wrapper,
.col-md-10 .ql-table-wrapper,
.col-md-11 .ql-table-wrapper,
.col-md-12 .ql-table-wrapper {
    overflow-x: scroll !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Blog page specific - ensure paragraphs wrap properly */
.col-lg-7 .content p,
.col-lg-7 .content div,
.col-lg-7 .content span {
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    display: block !important;
    overflow: visible !important;
}

/* Blog page specific - ensure tables wrap and scroll properly */
.col-lg-7 .content {
    overflow-x: hidden !important;
}

/* Scrollable table wrapper */
.table-responsive {
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

/* Tables inside wrapper */
.col-lg-7 .content .table-responsive table {
    display: table !important;
    width: 100%;
    min-width: 100%;
    table-layout: auto;
    margin: 0;
}

/* Table cells */
.col-lg-7 .content .table-responsive table td,
.col-lg-7 .content .table-responsive table th {
    word-wrap: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Blog page specific - contain all rich text elements except tables */
.col-lg-7 .content *:not(table):not(tbody):not(tr):not(td):not(th) {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    white-space: normal !important;
}

/* Guide page specific - ensure tables scroll properly */
.col-12.col-lg-8 .ql-table-wrapper,
.col-lg-8.gx-5 .ql-table-wrapper,
.col-12.col-lg-8 .content table {
    overflow-x: scroll !important;
    width: 100% !important;
}

/* Guide page content width constraint and wrapping */
.col-12.col-lg-8 .content,
.col-lg-8.gx-5 .content {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    white-space: normal !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    position: relative !important;
}

/* Guide page - all text elements */
.col-12.col-lg-8 .content *,
.col-lg-8.gx-5 .content * {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    white-space: normal !important;
}

/* Guide page - specific text elements */
.col-12.col-lg-8 .content p,
.col-12.col-lg-8 .content div,
.col-12.col-lg-8 .content span,
.col-12.col-lg-8 .content li,
.col-lg-8.gx-5 .content p,
.col-lg-8.gx-5 .content div,
.col-lg-8.gx-5 .content span,
.col-lg-8.gx-5 .content li {
    width: auto !important;
    max-width: 100% !important;
    word-wrap: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    white-space: normal !important;
    overflow: visible !important;
}

/* Guide page - links */
.col-12.col-lg-8 .content a,
.col-lg-8.gx-5 .content a {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
}

/* Guide page - table cells */
.col-12.col-lg-8 .content td,
.col-12.col-lg-8 .content th,
.col-lg-8.gx-5 .content td,
.col-lg-8.gx-5 .content th {
    word-wrap: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
}

.col .content {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
}

/* ── Table wrapper ── */
.ql-table-wrapper,
.table-responsive-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: scroll !important; /* Changed from auto to scroll - always show scrollbar if needed */
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 1em 0;
    display: block !important;
    position: relative !important;
    border-radius: 4px;
    padding: 2px;
    /* Force overflow to work */
    flex-shrink: 1;
    flex-grow: 1;
}

/* Ensure wrapper works inside content areas - MAXIMUM SPECIFICITY */
.content .ql-table-wrapper,
.blog-content .ql-table-wrapper,
.guide-content .ql-table-wrapper,
.article-content .ql-table-wrapper,
body .ql-table-wrapper,
* > .ql-table-wrapper {
    overflow-x: scroll !important; /* Force scroll */
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* ── TABLE element ──
   border-collapse lives here (NOT on td/th).
   table-layout:auto allows content to determine width, enabling scroll.
   Width is controlled by inline style from the editor.        */
table.ql-table,
.content table,
.ql-editor table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    table-layout: auto;   /* CRITICAL: Auto-sizes columns based on content */
    display: table;
    box-sizing: border-box;
    /* Allow table to size naturally */
    width: auto;
    height: auto;
}

/* Tables inside wrappers - CRITICAL for scrolling */
.ql-table-wrapper > table,
.table-responsive-wrapper > table {
    /* CRITICAL: Force table to expand to its natural content width */
    display: table !important;
    width: max-content !important; /* Force table to fit content exactly */
    max-width: none !important;
    min-width: 100% !important; /* But at minimum fill the wrapper */
    height: auto !important;
    table-layout: auto !important;
    flex-shrink: 0 !important;
}

/* Fallback: if max-content not supported */
@supports not (width: max-content) {
    .ql-table-wrapper > table,
    .table-responsive-wrapper > table {
        width: auto !important;
        min-width: 100% !important;
    }
}

/* Blog page tables inside wrappers - same dimensions */
.col-lg-7 .ql-table-wrapper > table {
    display: table !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 100% !important;
    height: auto !important;
    table-layout: auto !important;
    flex-shrink: 0 !important;
}

/* Guide page tables inside wrappers - same dimensions as blog */
.col-12.col-lg-8 .ql-table-wrapper > table,
.col-lg-8.gx-5 .ql-table-wrapper > table {
    display: table !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 100% !important;
    height: auto !important;
    table-layout: auto !important;
    flex-shrink: 0 !important;
}

/* ── colgroup / col — preserve inline widths ── */
table.ql-table colgroup,
.content table colgroup {
    display: table-column-group;
}

table.ql-table col,
.content table col,
.ql-editor table col {
    display: table-column;
    /* CRITICAL: Let columns auto-size based on content */
    width: auto;
    min-width: auto;
    max-width: none;
}

/* Blog page table columns - consistent width behavior */
.col-lg-7 table col {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
}

/* Guide page table columns - same width behavior as blog */
.col-12.col-lg-8 table col,
.col-lg-8.gx-5 table col {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
}

/* ── TABLE ROWS ──
   Let rows size based on their content.                      */
table.ql-table tr,
.content table tr,
.ql-editor table tr {
    /* CRITICAL: Allow rows to auto-size based on cell content */
    height: auto;
    min-height: auto;
    max-height: none;
    box-sizing: border-box;
}

/* Blog page table rows - consistent height behavior */
.col-lg-7 table tr {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Guide page table rows - same height behavior as blog */
.col-12.col-lg-8 table tr,
.col-lg-8.gx-5 table tr {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* ── TABLE CELLS (td / th) ──
   KEY RULE: Let content determine size, no forced dimensions.   */

/* Default appearance for ALL cells */
table.ql-table td,
table.ql-table th,
.content table td,
.content table th,
.ql-editor table td,
.ql-editor table th {
    border: 1px solid #a1a1aa;
    vertical-align: top;
    word-break: normal;
    box-sizing: border-box;
    /* CRITICAL: Allow cells to size based on content */
    width: auto;
    height: auto;
    /* Default padding - added 2px more spacing */
    padding: 6px 8px !important;
    /* Allow text to wrap naturally */
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

/* Cells WITH inline padding style: let inline padding win */
table.ql-table td[style*="padding"],
table.ql-table th[style*="padding"],
.content table td[style*="padding"],
.content table th[style*="padding"],
.ql-editor table td[style*="padding"],
.ql-editor table th[style*="padding"] {
    padding: unset !important; /* let inline style win */
}

/* Cells WITH inline style but NO inline padding: keep our default padding */
table.ql-table td[style]:not([style*="padding"]),
table.ql-table th[style]:not([style*="padding"]),
.content table td[style]:not([style*="padding"]),
.content table th[style]:not([style*="padding"]),
.ql-editor table td[style]:not([style*="padding"]),
.ql-editor table th[style]:not([style*="padding"]) {
    padding: 6px 8px !important; /* Keep our padding */
}

/* Cells WITHOUT any inline style: use our defaults */
table.ql-table td:not([style]),
table.ql-table th:not([style]),
.content table td:not([style]),
.content table th:not([style]),
.ql-editor table td:not([style]),
.ql-editor table th:not([style]) {
    padding: 6px 8px !important;
}

/* Additional specificity for table cells inside wrappers */
.ql-table-wrapper table td,
.ql-table-wrapper table th,
.table-responsive-wrapper table td,
.table-responsive-wrapper table th {
    padding: 6px 8px !important;
}

/* Guide page tables - ensure same styling as blog */
.col-12.col-lg-8 table td,
.col-12.col-lg-8 table th,
.col-lg-8.gx-5 table td,
.col-lg-8.gx-5 table th {
    padding: 6px 8px !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    max-width: none !important;
}

/* Guide page table dimensions */
.col-12.col-lg-8 table,
.col-lg-8.gx-5 table {
    table-layout: auto !important;
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    height: auto !important;
}

/* Blog page tables - ensure same styling */
.col-lg-7 table td,
.col-lg-7 table th {
    padding: 6px 8px !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    max-width: none !important;
}

/* Blog page table dimensions */
.col-lg-7 table {
    table-layout: auto !important;
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    height: auto !important;
}

/* Cells inside wrappers WITH inline padding: let inline win */
.ql-table-wrapper table td[style*="padding"],
.ql-table-wrapper table th[style*="padding"],
.table-responsive-wrapper table td[style*="padding"],
.table-responsive-wrapper table th[style*="padding"] {
    padding: unset !important;
}

/* Cells inside wrappers WITH other inline styles: keep default padding */
.ql-table-wrapper table td[style]:not([style*="padding"]),
.ql-table-wrapper table th[style]:not([style*="padding"]),
.table-responsive-wrapper table td[style]:not([style*="padding"]),
.table-responsive-wrapper table th[style]:not([style*="padding"]) {
    padding: 6px 8px !important;
    /* Ensure consistent width/height behavior */
    width: auto !important;
    height: auto !important;
}

/* Blog page table cells - ensure consistent dimensions */
.col-lg-7 table td,
.col-lg-7 table th {
    padding: 6px 8px !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    max-width: none !important;
}

/* Guide page table cells - ensure consistent dimensions as blog */
.col-12.col-lg-8 table td,
.col-12.col-lg-8 table th,
.col-lg-8.gx-5 table td,
.col-lg-8.gx-5 table th {
    padding: 6px 8px !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    max-width: none !important;
}

/* Remove margins from p tags inside table cells */
table.ql-table td p,
table.ql-table th p,
.content table td p,
.content table th p,
.ql-editor table td p,
.ql-editor table th p {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

/* Remove margins from first/last p inside table cells */
table.ql-table td p:first-child,
table.ql-table th p:first-child,
.content table td p:first-child,
.content table th p:first-child,
.ql-editor table td p:first-child,
.ql-editor table th p:first-child {
    margin-top: 0;
}

table.ql-table td p:last-child,
table.ql-table th p:last-child,
.content table td p:last-child,
.content table th p:last-child,
.ql-editor table td p:last-child,
.ql-editor table th p:last-child {
    margin-bottom: 0;
}

/* Remove margins from list items inside table cells */
table.ql-table td li,
table.ql-table th li,
.content table td li,
.content table th li,
.ql-editor table td li,
.ql-editor table th li {
    margin: 0;
    padding: 0;
}

/* Remove margins from lists inside table cells */
table.ql-table td ul,
table.ql-table th ul,
table.ql-table td ol,
table.ql-table th ol,
.content table td ul,
.content table th ul,
.content table td ol,
.content table th ol,
.ql-editor table td ul,
.ql-editor table th ul,
.ql-editor table td ol,
.ql-editor table th ol {
    margin: 0;
    padding-left: 20px;
}

/* Remove margins from first/last elements inside table cells */
table.ql-table td > *:first-child,
table.ql-table th > *:first-child,
.content table td > *:first-child,
.content table th > *:first-child,
.ql-editor table td > *:first-child,
.ql-editor table th > *:first-child {
    margin-top: 0;
}

table.ql-table td > *:last-child,
table.ql-table th > *:last-child,
.content table td > *:last-child,
.content table th > *:last-child,
.ql-editor table td > *:last-child,
.ql-editor table th > *:last-child {
    margin-bottom: 0;
}

/* Remove margins from other block elements inside table cells */
table.ql-table td h1,
table.ql-table td h2,
table.ql-table td h3,
table.ql-table td h4,
table.ql-table td h5,
table.ql-table td h6,
table.ql-table td ul,
table.ql-table td ol,
table.ql-table td blockquote,
table.ql-table th h1,
table.ql-table th h2,
table.ql-table th h3,
table.ql-table th h4,
table.ql-table th h5,
table.ql-table th h6,
table.ql-table th ul,
table.ql-table th ol,
table.ql-table th blockquote,
.content table td h1,
.content table td h2,
.content table td h3,
.content table td h4,
.content table td h5,
.content table td h6,
.content table td ul,
.content table td ol,
.content table td blockquote,
.content table th h1,
.content table th h2,
.content table th h3,
.content table th h4,
.content table th h5,
.content table th h6,
.content table th ul,
.content table th ol,
.content table th blockquote,
.ql-editor table td h1,
.ql-editor table td h2,
.ql-editor table td h3,
.ql-editor table td h4,
.ql-editor table td h5,
.ql-editor table td h6,
.ql-editor table td ul,
.ql-editor table td ol,
.ql-editor table td blockquote,
.ql-editor table th h1,
.ql-editor table th h2,
.ql-editor table th h3,
.ql-editor table th h4,
.ql-editor table th h5,
.ql-editor table th h6,
.ql-editor table th ul,
.ql-editor table th ol,
.ql-editor table th blockquote {
    margin-top: 0;
    margin-bottom: 0;
}

/* th default styling — only when editor hasn't overridden */
table.ql-table th:not([style*="font-weight"]),
.content table th:not([style*="font-weight"]),
.ql-editor table th:not([style*="font-weight"]) {
    font-weight: bold;
}

table.ql-table th:not([style*="background"]),
.content table th:not([style*="background"]),
.ql-editor table th:not([style*="background"]) {
    background-color: #f8f8f8;
}

table.ql-table th:not([style*="text-align"]),
.content table th:not([style*="text-align"]),
.ql-editor table th:not([style*="text-align"]) {
    text-align: left;
}

/* ── Cell inner wrapper (quill-table-up specific) ── */
table.ql-table .ql-table-cell-inner,
.content table .ql-table-cell-inner {
    display: inline-block;
    min-width: 100%;
    word-break: normal;
    hyphens: none;
    /* font-size and font-weight come from inline style — do not set here */
}

/* ── Scrollbar styling ── */
.ql-table-wrapper,
.table-responsive-wrapper,
.table-responsive,
.content {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.ql-table-wrapper::-webkit-scrollbar,
.table-responsive-wrapper::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.content::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.ql-table-wrapper::-webkit-scrollbar-track,
.table-responsive-wrapper::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
    margin: 2px;
}

.ql-table-wrapper::-webkit-scrollbar-thumb,
.table-responsive-wrapper::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #888, #666);
    border-radius: 10px;
    border: 2px solid #f1f1f1;
    min-height: 20px;
}

.ql-table-wrapper::-webkit-scrollbar-thumb:hover,
.table-responsive-wrapper::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to right, #666, #444);
    cursor: grab;
}

.ql-table-wrapper::-webkit-scrollbar-thumb:active,
.table-responsive-wrapper::-webkit-scrollbar-thumb:active,
.table-responsive::-webkit-scrollbar-thumb:active,
.content::-webkit-scrollbar-thumb:active {
    background: #444;
    cursor: grabbing;
}

/* ── Scroll-edge fade indicator ── */
.ql-table-wrapper {
    position: relative !important;
}

.ql-table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0 4px 4px 0;
}

.ql-table-wrapper:hover::after,
.ql-table-wrapper[data-table-scrollable="true"]::after {
    opacity: 1;
}

.ql-table-wrapper.scrolled-to-right::after {
    opacity: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ql-table-wrapper {
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }

    .ql-table-wrapper::after {
        width: 40px;
        background: linear-gradient(to left, rgba(0, 0, 0, 0.15), transparent);
    }

    /* Tables can be wider than screen — scroll handles it */
    .content table,
    table.ql-table {
        width: auto;
        min-width: 100%; /* At minimum fill container, but can grow */
        display: table;
        table-layout: auto; /* Maintain auto-sizing */
    }

    /* Default font/padding for cells WITHOUT editor inline styles */
    table.ql-table td:not([style]),
    table.ql-table th:not([style]),
    .content table td:not([style]),
    .content table th:not([style]) {
        padding: 5px 7px !important;
        font-size: 14px;
    }

    /* Ensure p tags and block elements have no margin inside table cells on mobile */
    table.ql-table td p,
    table.ql-table th p,
    .content table td p,
    .content table th p,
    table.ql-table td h1,
    table.ql-table td h2,
    table.ql-table td h3,
    table.ql-table td ul,
    table.ql-table td ol,
    .content table td h1,
    .content table td h2,
    .content table td h3,
    .content table td ul,
    .content table td ol {
        margin: 0;
        padding: 0;
    }

    /* Scroll hint on mobile */
    .ql-table-wrapper[data-table-scrollable="true"]::before {
        content: '⟨ Scroll ⟩';
        position: absolute;
        bottom: -20px;
        right: 10px;
        font-size: 11px;
        color: #666;
        background: rgba(255, 255, 255, 0.9);
        padding: 2px 8px;
        border-radius: 10px;
        pointer-events: none;
        opacity: 0;
        animation: fadeInOut 3s ease-in-out;
        animation-delay: 1s;
    }

    @keyframes fadeInOut {
        0%, 100% { opacity: 0; }
        20%, 80% { opacity: 1; }
    }

    .ql-table-wrapper.scrolled::before {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .ql-table-wrapper {
        -webkit-overflow-scrolling: touch !important;
        overflow-x: scroll !important;
    }

    .content table,
    table.ql-table {
        width: auto; /* Auto-size based on content */
        min-width: 100%; /* At minimum fill container */
        display: table;
        table-layout: auto; /* Maintain auto-sizing */
    }
}

@media (max-width: 480px) {
    /* Only apply compact defaults when editor has NOT set values */
    table.ql-table td:not([style]),
    table.ql-table th:not([style]),
    .content table td:not([style]),
    .content table th:not([style]) {
        padding: 4px 6px !important;
        font-size: 13px;
        width: auto;
        height: auto;
    }

    /* Ensure p tags and block elements have no margin inside table cells */
    table.ql-table td p,
    table.ql-table th p,
    .content table td p,
    .content table th p {
        margin: 0;
        padding: 0;
    }

    .content table,
    table.ql-table {
        width: auto; /* Auto-size based on content */
        min-width: 100%; /* At minimum fill container */
        display: table;
        table-layout: auto; /* Maintain auto-sizing */
    }
}

@media (min-width: 992px) {
    /* Allow quill tables to be exactly their editor width */
    .content table.ql-table {
        table-layout: auto;
    }

    /* Plain tables auto-size but can scroll if needed */
    .content table:not(.ql-table) {
        width: auto; /* Auto-size based on content */
        min-width: 100%; /* At minimum fill container */
        table-layout: auto;
    }
}

/* App Banner Styles - Matching Tools Page Colors */
.app-banner-container {
    margin: 20px 0;
    padding: 0;
}

.app-banner-card {
    background: linear-gradient(135deg, #EBF4F6 0%, #f0f9fa 100%);
    border-radius: 16px;
    padding: 16px 24px;
    border: 2px solid #7AB2B2;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.app-banner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #09637E, #7AB2B2);
}

.app-banner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(9, 99, 126, 0.15);
    border-color: #088395;
}

.app-banner-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-banner-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.app-banner-info {
    flex: 1;
    min-width: 0;
}

.app-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #09637E, #088395);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.app-banner-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.app-banner-subtitle {
    font-size: 0.875rem;
    color: #626365;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #09637E, #088395);
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.app-banner-btn img {
    width: 20px;
    height: 20px;
}

.app-banner-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(9, 99, 126, 0.3);
    color: white;
}

.app-banner-btn:active {
    transform: scale(0.98);
}

@media (max-width: 768px) {
    .app-banner-container {
        margin: 15px 0;
    }

    .app-banner-card {
        padding: 12px 16px;
    }

    .app-banner-content {
        flex-wrap: wrap;
        gap: 12px;
    }

    .app-banner-icon {
        width: 48px;
        height: 48px;
    }

    .app-banner-name {
        font-size: 1rem;
    }

    .app-banner-subtitle {
        font-size: 0.8rem;
    }

    .app-banner-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
    }

    .app-banner-info {
        flex-basis: calc(100% - 60px);
    }
}