/* ============================================================================
   Skynyx — Modern content theme
   Restyles page CONTENT only. Deliberately avoids every navbar selector
   (.nav_all, .navbar*, .mega-menu, .dropdown-*, .navbar-brand) and every site
   footer selector (footer, .footerall, .footer-container, .footer-column,
   .footer-unorder-list, .policy-moves) so the header and footer stay exactly
   as they were. Loaded after theme.css to override it; attribute selectors
   override inline styles so no page markup had to change.
   NOTE: .footer_policies / .footer-policy-* below are the LEGAL PAGE card
   (page content), not the site footer.
   ========================================================================== */

:root {
    --m-primary: #5369f8;
    --m-primary-600: #3f51e0;
    --m-accent: #8b5cf6;
    --m-grad: linear-gradient(135deg, #5369f8 0%, #8b5cf6 100%);
    --m-grad-soft: linear-gradient(135deg, rgba(83,105,248,.10), rgba(139,92,246,.10));
    --m-ink: #171b34;
    --m-body: #566089;
    --m-surface: #ffffff;
    --m-surface-2: #f4f6ff;
    --m-line: #e8ebf7;
    --m-radius: 18px;
    --m-radius-sm: 12px;
    --m-shadow: 0 10px 30px rgba(38, 46, 97, .08);
    --m-shadow-lg: 0 24px 60px rgba(83, 105, 248, .18);
    --m-success: linear-gradient(135deg, #16b981 0%, #0ea371 100%);
    --m-warning: linear-gradient(135deg, #ffb020 0%, #ff8a00 100%);
}

/* ---- Layout: soft modern surface + tighter vertical rhythm --------------- */
.main-section { min-height: auto !important; }
[style*="min-height:80vh"], [style*="min-height: 80vh"] { min-height: auto !important; }

.overview-background,
.overview-background-service {
    background: #f7f8fc;
}
.section { padding: 28px 0; }

/* ---- Headings ------------------------------------------------------------ */
.section-title,
.api-usage-text,
.left-head {
    color: var(--m-ink);
    font-weight: 800;
    letter-spacing: -.02em;
}
.section-title {
    background: var(--m-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.sub_api_head { color: var(--m-ink); font-weight: 700; }
.text-size { color: var(--m-body); font-size: 1.02rem; }

/* Override inline heading colours (no markup change needed) */
[style*="color:#5369f8"], [style*="color: #5369f8"],
[style*="color:#4c60df"], [style*="color: #4c60df"],
[style*="color:#4b5fdf"], [style*="color: #4b5fdf"] {
    color: var(--m-primary) !important;
}

/* ---- Hero (kept striking; text modernised) ------------------------------ */
.img-home-value { border-radius: 0 0 32px 32px; }
.display-head {
    font-weight: 800;
    letter-spacing: -.02em;
    text-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

/* ---- Buttons (pill, gradient, hover lift) -------------------------------- */
.convert-button,
.card-read-more,
.button-bolder,
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger,
.form-submit-label,
.list_category {
    border: none;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}
.convert-button,
.btn-primary,
.link-demos.card-read-more {
    background: var(--m-grad) !important;
    color: #fff !important;
    padding: 10px 26px;
    box-shadow: 0 10px 24px rgba(83, 105, 248, .30);
}
.btn-success, .btn-success.button-bolder {
    background: var(--m-success) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(16, 185, 129, .28);
}
.btn-warning, .btn-warning.button-bolder {
    background: var(--m-warning) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(255, 138, 0, .28);
}
.btn-danger { background: linear-gradient(135deg, #f5576c, #e11d48) !important; color: #fff !important; }
.convert-button:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.card-read-more:hover {
    transform: translateY(-2px);
    box-shadow: var(--m-shadow-lg);
    color: #fff;
}
/* Inline text link (used inside sentences, e.g. FAQ intro) */
.main-button {
    display: inline;
    background: none;
    color: var(--m-primary);
    font-weight: 600;
    text-decoration: none;
    padding: 0;
}
.main-button:hover { text-decoration: underline; }

/* Upload button */
.form-submit-label {
    display: inline-block;
    cursor: pointer;
    padding: 11px 26px;
    color: var(--m-primary);
    background: var(--m-surface);
    border: 2px dashed rgba(83, 105, 248, .45) !important;
    box-shadow: var(--m-shadow);
}
.form-submit-label:hover { background: var(--m-surface-2); border-color: var(--m-primary) !important; }

/* Category / filter pills */
.list_category,
.list_category.normal {
    padding: 8px 20px;
    background: var(--m-surface) !important;
    color: var(--m-body) !important;
    border: 1px solid var(--m-line) !important;
    box-shadow: var(--m-shadow);
}
.list_category:hover { color: var(--m-primary) !important; border-color: rgba(83, 105, 248, .4) !important; }
.list_category.active {
    background: var(--m-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 22px rgba(83, 105, 248, .30);
}

/* ---- Cards --------------------------------------------------------------- */
.benefit-card,
.benefit-home-card,
.card_1 {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}
.benefit-card::before,
.card_1::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--m-grad);
    opacity: 0;
    transition: opacity .25s ease;
}
.benefit-card:hover,
.benefit-home-card:hover,
.card_1:hover {
    transform: translateY(-6px);
    box-shadow: var(--m-shadow-lg);
    border-color: rgba(83, 105, 248, .35);
}
.benefit-card:hover::before,
.card_1:hover::before { opacity: 1; }
.benefit-card h3,
.benefit-home-card h3 { color: var(--m-ink); font-weight: 700; }
.benefit-card p,
.benefit-home-card p,
.card-description { color: var(--m-body); }
.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--m-grad-soft);
    font-size: 26px;
    margin-bottom: 10px;
}
.card-title { color: var(--m-ink); font-weight: 700; }
.card-image { border-radius: var(--m-radius-sm); }

/* Equal-height card grid (APIs / Tools listings) so buttons line up */
.card-display {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 8px;
}
@media (max-width: 1199px) { .card-display { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .card-display { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .card-display { grid-template-columns: 1fr; } }
.card_1 {
    cursor: pointer;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 26px 22px;
    text-align: center;
}
.card_1 .card-block { margin-bottom: 6px; }
.card_1 .card-description { flex: 1 1 auto; margin-bottom: 18px; }
.card_1 .mb-2 { margin-top: auto; margin-bottom: 0 !important; }

/* ---- Comparison table (modern) ------------------------------------------- */
.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--m-line);
    box-shadow: 0 12px 34px rgba(38, 46, 97, .07);
}
.comparison-table thead th {
    background: #f7f9fe !important;
    color: var(--m-ink) !important;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .01em;
    padding: 20px 22px;
    text-align: center;
    border-bottom: 1px solid var(--m-line);
}
.comparison-table thead th:first-child { text-align: left; }
.comparison-table td {
    padding: 16px 22px;
    text-align: center;
    color: var(--m-body);
    border-top: 1px solid #f0f3fa;
}
.comparison-table .feature { text-align: left; font-weight: 600; color: var(--m-ink); }
.comparison-table tbody tr:hover { background: #f8f9ff; }
/* Highlight the winning "Us" column */
.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) {
    background: rgba(83, 105, 248, .05);
    box-shadow: inset 1px 0 0 rgba(83, 105, 248, .12), inset -1px 0 0 rgba(83, 105, 248, .12);
}
.comparison-table thead th:nth-child(2) {
    background: var(--m-grad) !important;
    color: #ffffff !important;
    box-shadow: none;
}
.comparison-table tbody tr:hover td:nth-child(2) { background: rgba(83, 105, 248, .09); }
.comparison-table .yes { color: #10b981; font-weight: 700; }
.comparison-table .no { color: #ef4c68; font-weight: 600; }
/* Clean status icons (replace the old emoji) */
.cmp-yes { color: #10b981; margin-right: 4px; }
.cmp-no { color: #f0576f; margin-right: 4px; }
.comparison-table thead .cmp-yes,
.comparison-table thead .cmp-no { font-size: .95em; }

/* ---- "Try It Out" numbered steps ---------------------------------------- */
.pdf_para { color: var(--m-body); }
.num_one img { border-radius: 10px; }

/* ---- Code reference (tabs + panels) ------------------------------------- */
.code-reference {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    padding: 10px;
}
/* tab bar background (was inline #0077cc) */
[style*="#0077cc"] {
    background: var(--m-grad) !important;
    border-radius: 14px !important;
}
.list-style-code { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 4px; }
.list-style-code li {
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    transition: background .2s ease, color .2s ease;
}
.list-style-code li:hover { background: rgba(255, 255, 255, .18); }
.list-style-code li.activate-language { background: #fff; color: var(--m-primary-600); }
.code-panel pre {
    border-radius: 12px !important;
    border: 1px solid var(--m-line);
    margin-top: 10px;
}

/* ---- Feature list -> chips ---------------------------------------------- */
.features-inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    list-style: none;
    padding: 0;
}
.features-inline-list li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: 999px;
    padding: 10px 18px;
    color: var(--m-ink);
    font-weight: 500;
    box-shadow: var(--m-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.features-inline-list li:hover { transform: translateY(-3px); box-shadow: var(--m-shadow-lg); }
.icons-usage-color { color: var(--m-primary); }

/* ---- Forms & tool inputs ------------------------------------------------- */
.form-control {
    border-radius: var(--m-radius-sm);
    border: 1px solid var(--m-line);
    padding: 11px 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 4px rgba(83, 105, 248, .15);
}
.label-text { color: var(--m-ink); font-weight: 600; }
.i-frame-before, .convert-iframe {
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    border: 1px solid var(--m-line);
    background: #ffffff;
}
.i-frame-para { color: var(--m-body); }
.form-check-input:checked { background-color: var(--m-primary); border-color: var(--m-primary); }
.whatsapp-integrate {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    padding: 22px 24px;
}
.whatsapp-integrate h4 { color: var(--m-ink); font-weight: 700; }
.api-heading-value { color: var(--m-ink); font-weight: 700; }
.api-response-pre {
    background: #0f1530;
    color: #d7deff;
    border-radius: var(--m-radius-sm);
    padding: 16px;
    border: 1px solid #1c2550;
}

/* ---- FAQ accordion ------------------------------------------------------- */
.accordion { --bs-accordion-border-color: transparent; }
.accordion-item {
    background: #ffffff;
    border: 1px solid var(--m-line) !important;
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(38, 46, 97, .05);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.accordion-item:hover { border-color: rgba(83, 105, 248, .35); box-shadow: var(--m-shadow); }
.accordion-button {
    padding: 18px 22px;
    font-weight: 600;
    color: var(--m-ink);
    background: #ffffff !important;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    color: var(--m-primary-600);
    background: #ffffff !important;
    box-shadow: inset 4px 0 0 var(--m-primary) !important;
}
.accordion-button:focus { box-shadow: none !important; outline: none; }
.accordion-button:not(.collapsed):focus { box-shadow: inset 4px 0 0 var(--m-primary) !important; }
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235369f8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-size: 1.05rem;
}
.accordion-body { color: var(--m-body); padding: 2px 22px 20px; line-height: 1.65; }
.custom-acc-body { color: var(--m-body); }

/* ---- Contact + generic content cards ------------------------------------ */
.profile-container { padding: 8px 0 40px; }
.profile-top .card,
.card {
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
}

/* ---- Legal / policy pages (page content, not the site footer) ----------- */
.footer_policies { max-width: 980px; margin: 32px auto; }
.footer_policies .card { border-radius: 22px; }
.footer-policy-head { color: var(--m-ink); font-weight: 700; margin-top: 22px; }
.footer-policy-icon { color: var(--m-primary); margin-right: 8px; }
.footer-list-icons { color: var(--m-accent); margin-right: 8px; }
.footer-policy-list { margin-bottom: 10px; color: var(--m-body); list-style: none; }

/* ---- Error-codes table --------------------------------------------------- */
.table-responsive { border-radius: var(--m-radius); overflow: hidden; box-shadow: var(--m-shadow); }
.table thead th { background: var(--m-grad); color: #fff; border: none; }
.table tbody tr:nth-child(even) { background: var(--m-surface-2); }

/* ---- Modal (contact result) --------------------------------------------- */
.modal-content { border: none; border-radius: 20px; box-shadow: var(--m-shadow-lg); overflow: hidden; }
.modal-header { background: var(--m-grad-soft); }
.modal-title { color: var(--m-ink); font-weight: 700; }

/* ==========================================================================
   New page structure (hero + sections). Content unchanged; layout rebuilt.
   ========================================================================== */
.sky-hero {
    position: relative;
    text-align: center;
    padding: 92px 0 150px;
    background: linear-gradient(135deg, #5369f8 0%, #6a5bf6 52%, #8b5cf6 100%);
    overflow: hidden;
}
.sky-hero::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(620px 320px at 18% 8%, rgba(255,255,255,.20), transparent 60%),
        radial-gradient(560px 300px at 86% 18%, rgba(255,255,255,.14), transparent 60%);
    pointer-events: none;
}
.sky-hero-inner { position: relative; z-index: 2; max-width: 840px; }
.sky-eyebrow {
    display: inline-block;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .32);
    padding: 7px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 600; letter-spacing: .4px;
    margin-bottom: 20px; backdrop-filter: blur(6px);
}
.sky-hero-title {
    color: #fff; font-weight: 800; letter-spacing: -.02em;
    font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 16px;
    text-shadow: 0 14px 38px rgba(0, 0, 0, .22);
}
.sky-hero-sub { color: rgba(255, 255, 255, .92); font-size: 1.16rem; max-width: 660px; margin: 0 auto 28px; }
.sky-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sky-hero-actions .btn { padding: 12px 30px; }
.btn-hero-ghost {
    display: inline-flex; align-items: center;
    padding: 11px 28px; border-radius: 999px;
    color: #fff; text-decoration: none; font-weight: 600;
    border: 2px solid rgba(255, 255, 255, .65);
    transition: background .25s ease, color .25s ease, transform .22s ease;
}
.btn-hero-ghost:hover { background: #fff; color: var(--m-primary); transform: translateY(-2px); }
.sky-hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 90px; display: block; z-index: 1; }

/* Sections */
.sky-section { padding: 74px 0; }
.sky-section-alt { background: linear-gradient(180deg, #ffffff 0%, #f1f4ff 100%); }
.sky-sec-head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.eyebrow {
    display: inline-block; margin-bottom: 12px;
    color: var(--m-primary); background: rgba(83, 105, 248, .10);
    padding: 5px 15px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.sky-muted { color: var(--m-body); margin: 4px 0 20px; }

/* Check list */
.sky-check-list { list-style: none; padding: 0; margin: 6px 0 20px; }
.sky-check-list li {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 13px 0; color: var(--m-ink); font-weight: 500;
    border-bottom: 1px dashed var(--m-line);
}
.sky-check-list li i {
    flex: 0 0 auto; margin-top: 3px;
    width: 30px; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--m-primary); background: var(--m-grad-soft);
}

/* Tool page header + features band */
.sky-tool-head { text-align: center; padding: 46px 0 28px; }
.sky-features-band {
    background: linear-gradient(180deg, #ffffff 0%, #f1f4ff 100%);
    border: 1px solid var(--m-line);
    border-radius: 24px;
    padding: 44px 24px;
    margin-top: 44px;
    box-shadow: var(--m-shadow);
}

/* Doc (API) page hero */
.sky-doc-hero {
    position: relative; overflow: hidden;
    padding: 56px 0 46px;
    background: linear-gradient(180deg, #fbfcff 0%, #f1f4ff 100%);
}
.sky-doc-hero .btn-warning.button-bolder { pointer-events: none; }
.sky-table-wrap { overflow-x: auto; }

/* Interior page header band */
.sky-page-head { text-align: center; padding: 58px 0 6px; }
.sky-page-head .section-title { margin-bottom: 6px; }
.sky-heading-ink { color: var(--m-ink); }
.sky-media-frame {
    border-radius: 22px; overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--m-line); box-shadow: var(--m-shadow-lg);
}
.sky-media-frame img { display: block; width: 100%; }

/* Two-up card grid (API made simple) */
.sky-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sky-grid-2 .sky-span-2 { grid-column: 1 / -1; }
@media (max-width: 600px) { .sky-grid-2 { grid-template-columns: 1fr; } }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
    .features-inline-list { gap: 8px; }
    .features-inline-list li { padding: 8px 14px; font-size: 14px; }
    .comparison-table thead th, .comparison-table td { padding: 12px; }
    .sky-hero { padding: 64px 0 120px; }
    .sky-section { padding: 52px 0; }
}