body {
}
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
}

.card_effect {
    overflow: hidden !important;
    cursor: default !important;
    transition: all 350ms ease !important;
}

.single_jobs:hover,
.job_listing_area .job_lists .single_jobs:hover {
    /* Hover: Zyla purple border + soft purple-tinted elevation.
       The second selector mirrors custom.css's more-specific rule so we
       can beat its !important on the cascade. */
    border-color: #693bf5 !important;
    box-shadow: 0 8px 24px -12px rgba(112, 81, 251, 0.28) !important;
    transform: translateY(-1px);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

@media screen and (max-width: 448px) {
    .tab {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-content: stretch;
        align-items: center;
    }
}

.collapse-arrow .icon {
    transform: rotate(-180deg);
    transition: 0.3s transform ease-in-out;
    display: inline-block;
}

.collapse-arrow .collapsed .icon {
    transform: rotate(0deg);
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}
.tab button:hover {
    background-color: #000000;
    color: #fff;
}
.tab button.active {
    background-color: #000000;
    color: white;
}
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

@media screen and (max-width: 412px) {
    .g-recaptcha {
        -webkit-transform: scale(0.85);
        margin-right: 100%;
    }
}

.card_tag_category {
    overflow: hidden !important;
    cursor: default !important;
    transition: all 300ms ease !important;
}

.card_tag_category:hover {
    box-shadow: 5px 5px 20px rgb(0 0 0 / 40%) !important;
    transform: translateY(-2%) !important;
}

.codebox pre {
    font-size: 14px;
}

.codebox .card-header {
    height: 29px;
}

.codebox .card-header .apple_button {
    width: 10px;
    height: 10px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    display: inline-block;
    background-color: #47c652;
    margin-right: 5px;
}

.codebox .card-header .apple_button.red {
    background-color: #fa6454;
    margin-bottom: 0.5%;
    margin-top: 0.5%;
}
.codebox .card-header .apple_button.yellow {
    background-color: #febf40;
    margin-bottom: 0.5%;
    margin-top: 0.5%;
}
.codebox .card-header .apple_button.green {
    background-color: #47c652;
    margin-bottom: 0.5%;
    margin-top: 0.5%;
}
.code-line-numbers {
    width: 25px;
}
.code-line-numbers ul {
    list-style: none;
    border-right: 1px solid #e8edef;
}

@media (max-width: 1200px) {
    .seccion {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 414px) {
    .li_card_code {
        display: none;
    }
    .pre_http {
        margin-left: 0% !important;
    }
}

.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.1);
}

.test_endpoint:hover {
    background-color: rgb(41, 143, 133) !important;
    color: white !important;
    transition: background-color 0.3s linear;
}

/* .pricing {
    background: #007bff;
    background: linear-gradient(to right, #0062E6, #33AEFF);
} */

.pricing_card .card {
    border: none;
    border-radius: 20px;
    transition: all 0.2s;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.pricing_card hr {
    margin: 1.5rem 0;
}

.pricing_card .card-title {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    letter-spacing: 0.1rem;
    font-weight: bold;
}

.pricing_card .card-price {
    font-size: 2rem;
    margin: 0;
}

.pricing_card .card-price .period {
    font-size: 0.8rem;
}

.pricing_card ul li {
    margin-bottom: 1rem;
}

.pricing_card .text-muted {
    opacity: 0.7;
}

.pricing_card .btn {
    font-size: 80%;
    border-radius: 5rem;
    letter-spacing: 0.1rem;
    font-weight: bold;
    padding: 1rem;
    opacity: 1;
    transition: all 0.2s;
    background-color: #000000;
    border-color: #000000;
}

/* Hover Effects on Card */

@media (min-width: 992px) {
    .pricing_card .card:hover {
        box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
    }
    .pricing_card .card:hover .btn {
        opacity: 0.85;
    }
}

.collapsible-link::before {
    content: "";
    width: 14px;
    height: 2px;
    background: #333;
    position: absolute;
    top: calc(50% - 1px);
    right: 1rem;
    display: block;
    transition: all 0.3s;
}

/* Vertical line */
.collapsible-link::after {
    content: "";
    width: 2px;
    height: 14px;
    background: #333;
    position: absolute;
    top: calc(50% - 7px);
    right: calc(1rem + 6px);
    display: block;
    transition: all 0.3s;
}

.collapsible-link[aria-expanded="true"]::after {
    transform: rotate(90deg) translateX(-1px);
}

.collapsible-link[aria-expanded="true"]::before {
    transform: rotate(180deg);
}

.endpoint-title-row {
    padding-right: 2.2rem;
}

.endpoint-header-id-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.28rem;
    margin-left: 0.32rem;
    color: #9ca3af;
}

.endpoint-header-id-text {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

.endpoint-header-id-copy-btn {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-1px);
    transition: color 0.2s ease, transform 0.2s ease;
}

.endpoint-header-id-copy-btn:hover {
    color: #000000;
}

.endpoint-header-id-copy-btn.copied {
    color: #22c55e;
    transform: translateY(-1px) scale(1.08);
}

@media (min-width: 375px) {
    .title_faq {
        font-size: 15px;
    }
}

#accordionExample {
    -webkit-box-shadow: 0px 25px 10px -22px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 25px 10px -22px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 25px 10px -22px rgba(0, 0, 0, 0.5);
}

.btn_subscribe {
    background-color: #2ac4b5;
    border-color: #2ac4b5;
    display: inline-block;
    color: white;
    cursor: pointer !important;
    padding: 13px 29px 13px 29px;
    text-align: center;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 125%;
    font-weight: 500;
    transition: background-color 0.3s linear;
}

.btn_subscribe:hover {
    background-color: rgb(37, 172, 158);
    border-color: rgb(37, 172, 158);
    display: inline-block;
    color: white;
    padding: 13px 29px 13px 29px;
    text-align: center;
    border-radius: 5px;
    text-transform: uppercase;
    cursor: pointer !important;
    font-size: 125%;
    font-weight: 500;
    transition: background-color 0.3s linear;
}

.swal2-select {
    margin: 10px auto 0px auto !important;
}

.input-group {
    align-items: baseline !important;
}
#swal2-validation-message {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em 0 0;
    padding: 0.625em;
    overflow: hidden;
    background: #f0f0f0;
    color: #666;
    font-size: 1em;
    font-weight: 300;
}

@media (max-width: 768px) {
    .tags-related {
        display: none !important;
    }
    /* .card-related-apis{
        height: 2rem !important;
    } */
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2ac4b5;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #2ac4b5;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2ac4b5;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.arrow-right {
    position: absolute;
    cursor: pointer;
    top: 55%;
    right: -1.5%;
    transform: translateY(-55%);
    color: #000000;
    z-index: 999;
    font-size: xx-large;
}

.arrow-right-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-color: #e1e5fc;
    border-radius: 50%;
    /* margin-right: 10px; */
    position: relative;
}

.arrow-left {
    position: absolute;
    cursor: pointer;
    top: 55%;
    left: -1.5%;
    transform: translateY(-55%);
    color: #000000;
    z-index: 999;
    font-size: xx-large;
}

.arrow-left-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-color: #e1e5fc;
    border-radius: 50%;
    /* margin-right: 10px; */
    position: relative;
}

/* @keyframes translate-right {
    0% {
        left: 15%;
        transform: rotate(45deg)
    }
    25% {
        left: 40%;
        transform: rotate(45deg)
    }
    100% {
        left: 15%;
        transform: rotate(45deg)
    }
}

@keyframes translate-left {
    0% {
        left: 20%;
        transform: rotate(45deg)
    }
    25% {
        left: 50%;
        transform: rotate(45deg)
    }
    100% {
        left: 20%;
        transform: rotate(45deg)
    }
} */

.arrow-right-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 0.5em;
    height: 0.5em;
    border-right: 0.1em solid #000000;
    border-top: 0.1em solid #000000;
    /* animation-name: translate-right;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; */
}

.arrow-left-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 0.5em;
    height: 0.5em;
    border-left: 0.1em solid #000000;
    border-bottom: 0.1em solid #000000;
    /* animation-name: translate-left;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; */
}

.ribbon {
    position: absolute;
    right: -5px;
    top: -5px;
    /* z-index: 1; */
    overflow: hidden;
    width: 165px;
}

.ribbon-top-right {
    right: -50px;
    top: 20px;
    overflow: hidden;
    background-color: #4bc5b9;
    transform: rotate(45deg);
}

.book-a-call {
    width: 100%;
    background-color: #2ac4b5 !important;
    border-color: #2ac4b5 !important;
    transition: all 0.3s;
}

.book-a-call:hover {
    background-color: #fff !important;
    border-color: #2ac4b5 !important;
    color: #2ac4b5 !important;
}

/* Code Snippets */

.codebox pre {
    font-size: 14px;
}

.codebox .card-header {
    height: 29px;
}

.codebox .card-header .apple_button {
    width: 10px;
    height: 10px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    display: inline-block;
    background-color: #47c652;
    margin-right: 5px;
}

.codebox .card-header .apple_button.red {
    background-color: #fa6454;
    margin-bottom: 0.5%;
    margin-top: 0.5%;
}
.codebox .card-header .apple_button.yellow {
    background-color: #febf40;
    margin-bottom: 0.5%;
    margin-top: 0.5%;
}
.codebox .card-header .apple_button.green {
    background-color: #47c652;
    margin-bottom: 0.5%;
    margin-top: 0.5%;
}
.code-line-numbers {
    width: 25px;
}
.code-line-numbers ul {
    list-style: none;
    border-right: 1px solid #e8edef;
}

@media (max-width: 1200px) {
    .seccion {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 414px) {
    .li_card_code {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .dynamic-text-height {
        height: 7rem;
    }
}

@media screen and (min-width: 1024px) {
    .dynamic-height {
        height: 100%;
    }
}

/* of style.css */

/* line 1, ../../Arafath/CL/December/235. Job board/HTML/scss/_extend.scss */
.flex-center-start {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
}

/* Normal desktop :1200px. */
/* Normal desktop :992px. */
/* Tablet desktop :768px. */
/* small mobile :320px. */
/* Large Mobile :480px. */
/* 1. Theme default css */
/* Normal desktop :1200px. */
/* Normal desktop :992px. */
/* Tablet desktop :768px. */
/* small mobile :320px. */
/* Large Mobile :480px. */
/* line 6, ../../Arafath/CL/December/235. Job board/HTML/scss/theme-default.scss */
body {
    font-weight: normal;
    font-style: normal;
}

/* line 13, ../../Arafath/CL/December/235. Job board/HTML/scss/theme-default.scss */
.img {
    max-width: 100%;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

/* line 17, ../../Arafath/CL/December/235. Job board/HTML/scss/theme-default.scss */
a,
.button {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

/* line 21, ../../Arafath/CL/December/235. Job board/HTML/scss/theme-default.scss */
a:focus,
.button:focus,
button:focus {
    text-decoration: none;
    outline: none;
}

/* line 26, ../../Arafath/CL/December/235. Job board/HTML/scss/theme-default.scss */
a:focus {
    text-decoration: none;
}

/* line 29, ../../Arafath/CL/December/235. Job board/HTML/scss/theme-default.scss */
a:focus,
a:hover,
.portfolio-cat a:hover,
.footer -menu li a:hover {
    text-decoration: none;
}

/* line 35, ../../Arafath/CL/December/235. Job board/HTML/scss/theme-default.scss */
a,
button {
    color: #1f1f1f;
    outline: medium none;
}

/* line 40, ../../Arafath/CL/December/235. Job board/HTML/scss/theme-default.scss */
h1,
h2,
h3,
h4,
h5 {
    color: #191d34;
}

/* line 44, ../../Arafath/CL/December/235. Job board/HTML/scss/theme-default.scss */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}

/* line 53, ../../Arafath/CL/December/235. Job board/HTML/scss/theme-default.scss */
ul {
    margin: 0px;
    padding: 0px;
}

/* line 57, ../../Arafath/CL/December/235. Job board/HTML/scss/theme-default.scss */
li {
    list-style: none;
}

/* line 60, ../../Arafath/CL/December/235. Job board/HTML/scss/theme-default.scss */
p {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #7a838b;
    margin-bottom: 13px;
}

/* line 69, ../../Arafath/CL/December/235. Job board/HTML/scss/theme-default.scss */
label {
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2em;
}
h1 {
    font-size: 36px;
}

.job_details_area .job_sumary .summery_header {
    padding: 20px;
}

h4 {
    font-size: 18px;
}

.job_details_area .single_jobs .jobs_left .thumb {
    float: left;
    width: 82px;
    height: 82px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px;
    /* background: #F5F7FA; */
    margin-right: 25px;
    border: 1px solid #f0f0f0;
}

.boxed-btn {
    background: #000000;
    color: #fff !important;
    display: inline-block;
    padding: 13px 29px 13px 29px;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid #000000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.boxed-btn:hover {
    background: #374151;
    border-color: #374151;
    color: #fff !important;
}

.boxed-btn4 {
    display: inline-block;
    padding: 11px 29px 13px 29px;
    font-size: 24px;
    font-weight: 500;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    color: #fff !important;
    text-transform: capitalize;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    cursor: pointer;
    color: #00d363 !important;
    background: transparent;
}

.boxed-btn4 {
    background: #000000 !important;
    color: #fff !important;
    font-size: 24px;
}

.single-textarea {
    display: block;
    width: 100%;
    line-height: 40px;
    border: none;
    outline: none;
    background: #f9f9ff;
    padding: 0 20px;
    resize: none;
    font-size: 1.2em;
}

.job_details_area .job_sumary .job_content {
    padding: 15px;
}

/* end of style.css */

.containerColReverse {
    padding: 0 0.3rem;
}

.singleJobs {
    padding: 2rem 0 !important;
}

.documentationCard {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 15%);
    -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 15%);
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 15%);
    border-radius: 0.75rem;
}

.pricingSelect {
    display: flex;
    justify-content: end;
    padding-bottom: 3%;
}

/* Right-aligned variant used when the Monthly/Annually toggle is NOT
   rendered (no yearly plans). The currency selector still sits above
   the plan cards, anchored to the right edge. */
.pricingSelect.pricingSelect--right {
    justify-content: flex-end;
    padding-bottom: 0;
    margin: 8px 0 24px;
}

.pricingSelect.pricingSelect--right .selectize-control,
.pricingSelect.pricingSelect--inline .selectize-control {
    width: 140px;
}

/* Loading skeleton shown by pricing-currency-ajax.js while fetching the
   re-rendered pricing panes after a currency change. Mirrors the real
   card outline so the layout doesn't shift when the real HTML arrives. */
.pricing-skeleton__card {
    background: #ffffff !important;
    border: 1px solid rgba(20, 17, 60, 0.08) !important;
    border-radius: 18px !important;
    padding: 28px 22px 24px !important;
    width: 100%;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pricing-skeleton__line {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef0f4 0%, #f7f8fa 50%, #eef0f4 100%);
    background-size: 200% 100%;
    animation: pricingSkeletonShimmer 1.2s ease-in-out infinite;
}

.pricing-skeleton__line--title {
    width: 38%;
    height: 18px;
    margin: 0 auto 6px;
}

.pricing-skeleton__line--price {
    width: 60%;
    height: 34px;
    margin: 6px auto 24px;
    border-radius: 8px;
}

.pricing-skeleton__line--cta {
    height: 44px;
    margin-top: auto;
    border-radius: 999px;
}

@keyframes pricingSkeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.forSpanTitle {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.apiTitle {
    font-size: 28px;
}

.jobs_content .apiTitle {
    margin-bottom: 0.35rem;
    line-height: 1.2;
}

.jobs_content .api-title-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-left: 0.4rem;
}

.jobs_content .api-id-inline {
    display: inline-block;
    color: #9ca3af;
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
}

.jobs_content .api-id-copy-btn {
    border: 0;
    background: transparent;
    color: #9ca3af;
    padding: 0 0 0 1px;
    line-height: 1;
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-1px);
    transition: color 0.2s ease, transform 0.2s ease;
}

.jobs_content .api-id-copy-btn:hover {
    color: #000000;
}

.jobs_content .api-id-copy-btn.copied {
    color: #22c55e;
    transform: translateY(-1px) scale(1.08);
}

.apiDesc {
    font-size: 16px;
}

@media screen and (max-width: 550px) {
    .pricingSelect {
        justify-content: center !important;
    }
    .code-text {
        padding: 0;
    }
    #response {
        padding: 3px 5px !important;
    }
    /* Scoped to .job_details_area so the global .container (used by the
       header) keeps Bootstrap's 15px gutter at mobile widths and stays
       aligned with the listing page. The 0.3rem here only tightens the
       item-detail content column. */
    .job_details_area .container {
        padding: 0.3rem;
    }
    .secondContainer {
        padding: 0;
    }
    .cardBody {
        padding: 0 !important;
    }
    .documentationCard {
        border: none !important;
        box-shadow: none !important;
        margin-top: 0 !important;
    }
    .leftRightBorder {
        border-left: none !important;
        border-right: none !important;
        border-top-right-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        padding: 0 !important;
    }
    .theTab {
        display: flex;
        flex-direction: row !important;
        margin-bottom: 1.5rem;
    }
    #documentation span.full-text {
        display: none;
    }
    #documentation span.short-text {
        display: inline;
    }

    .borderBottom {
        border-bottom: none !important;
    }

    .responsiveButtonContainer {
        padding: 24px 6px !important;
    }

    .responsiveButton {
        width: 100% !important;
    }

    .displayNone {
        display: none !important;
    }
    .apiTitle {
        font-size: 20px;
    }
    .jobs_content .api-title-meta {
        margin-left: 0.25rem;
    }
    .jobs_content .api-id-inline {
        font-size: 12px;
    }
    .jobs_content .api-id-copy-btn {
        font-size: 12px;
    }
    .apiDesc {
        font-size: 14px;
    }
}

@media (min-width: 551px) {
    #documentation span.full-text {
        display: inline;
    }
    #documentation span.short-text {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .dynamic-text-height {
        height: 7rem;
    }
}

@media screen and (max-width: 990px) {
    .containerColReverse {
        display: flex;
        flex-direction: column;
    }
}

@media screen and (min-width: 1024px) {
    .dynamic-height {
        height: 100%;
    }
}
.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #000000;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
    z-index: 9999;
    display: none;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.tooltipselect {
    position: relative;
    display: inline-block;
}

.tooltipselect .tooltipselecttext {
    visibility: hidden;
    width: 100px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    font-size: 15px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltipselect:hover .tooltipselecttext {
    visibility: visible;
}

.jobs_left {
    width: 100%;
}

.jobs_content {
    word-wrap: break-word;
    width: 100%;
}

.arrow-right {
    right: -4% !important;
}

.arrow-left {
    left: -4% !important;
}

.responseCode {
    display: block;
    white-space: pre-wrap;
}

/* Normalize rich HTML endpoint descriptions from translations/AI generation */
.marketplace-endpoint-description {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #7a838b;
    margin-bottom: 13px;
}

.marketplace-endpoint-description pre.marketplace-description-pre code {
    color: #1f273c !important;
}

.marketplace-endpoint-description pre.marketplace-description-pre {
    margin: 0.5rem 0 1rem 0;
    border-radius: 2px;
    overflow-x: auto;
}

.marketplace-endpoint-description h2, h3{
 font-size: 18px;
}

@media (max-width: 1100px) {
    .arrow-right {
        display: none !important;
    }

    .arrow-left {
        display: none !important;
    }
}

.owl-dots {
    text-align: center;
}
.owl-dot {
    width: 10px;
    height: 10px;
    margin: 5px;
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}
.owl-dot.active {
    background: #000;
}

/* Modal Title */

.swal2-title {
    text-align: center !important;
}

/* Selectize */
.selectize-dropdown .selected{
    background-color: #000000 !important;
}

.selectize-input.dropdown-active::before {
    display: none !important;
}

.selectize-control.single .selectize-input{
    background-image: none !important;
    background-color: white !important;
    border-color: #ebedf2 !important;
}

.selectize-dropdown{
    margin-top: 10px !important;
    border-color: #ebedf2 !important;

}

.selectize-input .item{
    font-size: 13px !important;
}

.selectize-dropdown-content .option{
    font-size: 13px !important;
}

.selectize-dropdown-content{
    border-top: 1px solid #ebedf2 !important;
    padding:0 !important;
}

.selectize-input{
    padding: 13px 22px 13px 12px !important;
}

.pricingSelect .selectize-control{
    width: 100px;
}


#binaryFile{
    border-radius: 0px !important;
}

/* End Selectize */

.confirmButtonClass{
    background-color: #000000 !important;
    color: #fff !important;
    border-radius: 50px !important;
}

.confirmButtonClass:hover{
    background-color: #5a42d9 !important;
}


@media (max-width: 1200px) {
    .single_jobs {
        flex-direction: column !important;
    }
    
    .single_jobs .buttonAndInfoContainer {
        order: 999;
        margin-top: 1rem;
        width: 100%;
    }
    
    .single_jobs .jobs_left {
        width: 100%;
    }

    .buttonAndInfoContainer{
        display: flex;
        flex-direction: column-reverse;
    }

    .buttonAndInfoContainer .border-bottom{
        border-top: 1px solid #dee2e6 !important;
    }

    .containerColReverse{
        gap: 1rem;
    }
}

.endpoint-actions-buttons .endpoint-action-btn {
    margin-right: 0.9rem;
}

.endpoint-actions-buttons .endpoint-action-btn:last-child {
    margin-right: 0;
}

/* Copy Endpoint button — flat lavender #6E56F8, pill 999px, no gradient
   and no ::before shine overlay inherited from .btn-primary (custom.css).
   Note: kept on the legacy lavender; the top-header pill family
   (.api-pill.is-active) was migrated to #5b34f0 to match the hero CTA. */
.endpoint-actions-buttons .endpoint-action-btn.btn-primary,
.endpoint-actions-buttons a.endpoint-action-btn.btn-primary,
.endpoint-actions-buttons button.endpoint-action-btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #6E56F8 !important;
    background-image: none !important;
    background-color: #6E56F8 !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    min-height: 36px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(110, 86, 248, 0.28) !important;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.18s ease !important;
}
.endpoint-actions-buttons .endpoint-action-btn.btn-primary::before {
    content: none !important;
    display: none !important;
}
.endpoint-actions-buttons .endpoint-action-btn.btn-primary:hover,
.endpoint-actions-buttons .endpoint-action-btn.btn-primary:focus,
.endpoint-actions-buttons .endpoint-action-btn.btn-primary:focus-visible {
    background: #5b3cfb !important;
    background-image: none !important;
    background-color: #5b3cfb !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(110, 86, 248, 0.40) !important;
}
.endpoint-actions-buttons .endpoint-action-btn.btn-primary:active {
    background: #5128f0 !important;
    background-color: #5128f0 !important;
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(110, 86, 248, 0.35) !important;
}

/* Copy buttons (COPY RESPONSE + COPY CODE) — match endpoint-action-btn flat-lavender pill.
   Targets by ID/onclick so we don't have to touch ~15 individual button definitions. */
button[id^="copy_response"],
button[onclick^="copyResponse"],
button[onclick^="copyCodeSnippet"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #6E56F8 !important;
    background-image: none !important;
    background-color: #6E56F8 !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    min-height: 36px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(110, 86, 248, 0.28) !important;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.18s ease !important;
}
button[id^="copy_response"]::before,
button[onclick^="copyResponse"]::before,
button[onclick^="copyCodeSnippet"]::before {
    content: none !important;
    display: none !important;
}
button[id^="copy_response"] label,
button[onclick^="copyResponse"] label,
button[onclick^="copyCodeSnippet"] label {
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
}
button[id^="copy_response"]:hover,
button[onclick^="copyResponse"]:hover,
button[onclick^="copyCodeSnippet"]:hover,
button[id^="copy_response"]:focus,
button[onclick^="copyResponse"]:focus,
button[onclick^="copyCodeSnippet"]:focus,
button[id^="copy_response"]:focus-visible,
button[onclick^="copyResponse"]:focus-visible,
button[onclick^="copyCodeSnippet"]:focus-visible {
    background: #5b3cfb !important;
    background-image: none !important;
    background-color: #5b3cfb !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(110, 86, 248, 0.40) !important;
}
button[id^="copy_response"]:active,
button[onclick^="copyResponse"]:active,
button[onclick^="copyCodeSnippet"]:active {
    background: #5128f0 !important;
    background-color: #5128f0 !important;
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(110, 86, 248, 0.35) !important;
}

@media (max-width: 576px) {
    .endpoint-header-id-meta {
        display: block;
        margin-left: 0;
        margin-top: 0.2rem;
    }

    .endpoint-header-id-text,
    .endpoint-header-id-copy-btn {
        font-size: 11px;
    }

    .endpoint-actions-row {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .endpoint-actions-buttons {
        width: auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start !important;
        margin-top: 0.35rem;
    }

    .endpoint-actions-buttons .endpoint-action-btn {
        width: auto;
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .endpoint-actions-buttons .endpoint-action-btn:last-child {
        margin-bottom: 0;
    }
}
/* ↑ closes the @media (max-width: 576px) block opened at line 1280 (it was missing
   its closing brace in the original file, which silently nested everything below
   into the mobile-only query). */

/* ============================================================
   Tabs (Info / API Documentation / Pricing / FAQs) monochrome
   ============================================================ */
/* The active tab is set via JS (openTab) which adds the .active class.
   No prior CSS rule existed for .tablinks.active; the visible purple
   came from an inline style on #documentation in item_js.blade.php
   (which we updated to #000000). This CSS rule makes the active state
   consistent across all tabs and survives re-clicks. */
.tablinks.active,
button.tablinks.active {
    background-color: #000000 !important;
    color: #ffffff !important;
}
.tablinks {
    transition: background-color 0.15s ease, color 0.15s ease;
}
.tablinks:hover:not(.active) {
    background-color: #f3f4f6;
    color: #000000;
}

/* ============================================================
   HEADER monochrome on the API item page
   ============================================================ */
/* ZYLA logo monochrome filter now lives in public/css/new_header.css so it
   applies site-wide instead of just the marketplace item page. */

/* Header search input — neutralize any leftover accent borders */
.header_search_form .form-control:focus,
.header_search_form input:focus {
    border-color: #000000 !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
}

/* ============================================================
   API Hero v2 — light left column + dark terminal right column
   + horizontal endpoint pills + no-refresh response switcher
   + metric badges underneath.
   Scoped under .api-hero-v2 so nothing else on the page is affected.
   ============================================================ */
.api-hero-v2-wrapper {
    margin-bottom: 1.25rem;
}

.api-hero-v2,
.api-hero-v2 * {
    /* Inherits Manrope from global-font.css; kept here to override any
       legacy per-component font-family declarations inside the hero. */
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}
.api-hero-v2 {
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #1a1a2e;
}
/* Card-style chrome only applies to the legacy single-column hero.
   The split layout (.api-hero-v2--split) sits flush on the page so
   only the inner pricing card carries visible chrome. Using :not()
   here means no !important overrides are needed downstream. */
.api-hero-v2:not(.api-hero-v2--split) {
    background: #ffffff;
    border: 1px solid #ececf4;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0px 0px 14px 0px rgba(50, 50, 50, 0.06);
}
/* Keep mono families on the code-ish parts inside the hero */
.api-hero-v2 .api-hero-v2__subtitle,
.api-hero-v2 .api-hero-v2__subtitle *,
.api-hero-v2 .api-hero-v2__tab,
.api-hero-v2 .api-hero-v2__tab *,
.api-hero-v2 .api-hero-v2__pre,
.api-hero-v2 .api-hero-v2__pre code,
.api-hero-v2 .api-hero-v2__playground,
.api-hero-v2 .api-hero-v2__playground * {
    font-family: 'JetBrains Mono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}
/* Preserve Font Awesome icon font wherever it's still used inside the hero */
.api-hero-v2 .fa,
.api-hero-v2 .fas,
.api-hero-v2 .far,
.api-hero-v2 .fal,
.api-hero-v2 .fab,
.api-hero-v2 [class^="fa-"],
.api-hero-v2 [class*=" fa-"] {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}

/* Reusable inline-icon spec — keeps SVGs consistent across the hero */
.api-hero-v2__icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -2px;
}

.api-hero-v2__grid {
    display: grid;
    /* Left grows horizontally; right is a fixed-width pricing card column. */
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: 32px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .api-hero-v2__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

/* --- LEFT column (light, matches current site) --- */
.api-hero-v2__left {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    min-width: 0;
}

.api-hero-v2__icon {
    flex-shrink: 0;
    padding: 6px;
    border: 1px solid #ececf4;
    border-radius: 12px;
    background: #fff;
}
.api-hero-v2__icon img {
    display: block;
    border-radius: 8px;
    width: 72px;
    height: 72px;
    object-fit: cover;
}

.api-hero-v2__content {
    min-width: 0;
    flex: 1 1 auto;
}

.api-hero-v2__title.apiTitle {
    margin: 0 0 8px 0;
    font-size: 2.5rem;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.025em;
    word-break: break-word;
    color: #000000;
}
@media (max-width: 900px) {
    .api-hero-v2__title.apiTitle { font-size: 2rem; }
}

/* Reference-style subtitle: "ID 1234  ·  Tools & Utilities" in muted mono caps */
.api-hero-v2__subtitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6a737d;
    font-weight: 500;
}
.api-hero-v2__subtitle-id {
    color: #6a737d;
    font-weight: 600;
}
.api-hero-v2__subtitle-copy {
    background: none;
    border: 0;
    color: #8b95a7;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 11px;
    line-height: 1;
    border-radius: 3px;
    transition: color 0.15s ease, background 0.15s ease;
}
.api-hero-v2__subtitle-copy:hover {
    color: #111111;
    background: rgba(17, 17, 17, 0.05);
}
.api-hero-v2__subtitle-sep {
    color: #c1c8d1;
    margin: 0 2px;
}
.api-hero-v2__subtitle-category {
    color: #6a737d;
}

.api-hero-v2__desc.apiDesc {
    display: block;
    margin: 0;
    color: #4b4b6b;
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 72ch;
    font-weight: 400;
}

/* --- RIGHT column: light terminal-style panel (monochrome) --- */
.api-hero-v2__terminal {
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.08);
}

/* --- Tabs / pills (Vercel-style rounded pills, monochrome) --- */
.api-hero-v2__tabs {
    display: flex;
    gap: 4px;
    padding: 10px 10px 12px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #d1d5da transparent;
    border-bottom: 1px solid #ececec;
    background: #fafafa;
}
.api-hero-v2__tabs::-webkit-scrollbar { height: 6px; }
.api-hero-v2__tabs::-webkit-scrollbar-thumb { background: #d1d5da; border-radius: 3px; }

.api-hero-v2__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid transparent;  /* reserve space so size doesn't jump on active */
    color: #6b7280;
    padding: 6px 12px 6px 8px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 999px;          /* full rounded pill */
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.4;
}
.api-hero-v2__tab:hover {
    color: #000000;
    background: rgba(0, 0, 0, 0.035);
}
.api-hero-v2__tab.is-active {
    color: #000000;
    background: #ffffff;
    border-color: #d4d4d8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.02);
    font-weight: 600;
}
.api-hero-v2__tab:focus-visible {
    outline: 2px solid rgba(17, 17, 17, 0.25);
    outline-offset: 2px;
}

/* HTTP method chip — small monospaced label that sits inside the tab */
.api-hero-v2__method {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    background: #f4f4f5;
    color: #52525b;
    border: 1px solid #e4e4e7;
}
.api-hero-v2__tab.is-active .api-hero-v2__method {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}
.api-hero-v2__method--get,
.api-hero-v2__method--post,
.api-hero-v2__method--put,
.api-hero-v2__method--patch,
.api-hero-v2__method--delete {
    /* All methods share the neutral palette (monochrome decision) */
    background: #f4f4f5;
    color: #52525b;
    border-color: #e4e4e7;
}

.api-hero-v2__endpoint-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* --- Terminal body --- */
.api-hero-v2__terminal-body {
    flex: 1 1 auto;
    padding: 14px 16px;
    min-height: 200px;
    max-height: 360px;
    overflow: auto;
    background: #ffffff;
}
.api-hero-v2__terminal-body::-webkit-scrollbar { width: 8px; height: 8px; }
.api-hero-v2__terminal-body::-webkit-scrollbar-thumb { background: #d1d5da; border-radius: 4px; }

.api-hero-v2__response {
    display: none;
}
.api-hero-v2__response.is-active {
    display: block;
}

.api-hero-v2__pre {
    margin: 0;
    padding: 0;
    background: transparent !important;
    color: #24292e;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.api-hero-v2__pre code {
    background: transparent !important;
    color: inherit;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    display: block;
}
.api-hero-v2__pre--empty {
    color: #6a737d;
    font-style: italic;
}
.api-hero-v2__response-img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* hljs JSON tokens — all monochrome, distinguished by weight + tone of gray only */
.api-hero-v2__pre code.hljs {
    background: transparent !important;
    color: #24292e !important;
}
.api-hero-v2__pre .hljs-attr,
.api-hero-v2__pre .hljs-name      { color: #111111 !important; font-weight: 600; }
.api-hero-v2__pre .hljs-string    { color: #374151 !important; }
.api-hero-v2__pre .hljs-number,
.api-hero-v2__pre .hljs-literal   { color: #000000 !important; font-weight: 600; }
.api-hero-v2__pre .hljs-keyword,
.api-hero-v2__pre .hljs-built_in  { color: #111111 !important; font-weight: 700; }
.api-hero-v2__pre .hljs-comment   { color: #9ca3af !important; font-style: italic; }
.api-hero-v2__pre .hljs-punctuation { color: #6b7280 !important; }

/* --- Metric badges (now sit under the title/description in the left column) --- */
.api-hero-v2__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* --- Right column wrapper: holds CTA row at top + terminal below --- */
.api-hero-v2__right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* --- Primary CTA row.
   Default keeps the legacy right-column behaviour (flex-end) for any callers
   that still rely on it. The `--left` modifier is the Instagram-style row that
   sits under the badges in the left column (above-the-fold primary action). --- */
.api-hero-v2__cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.api-hero-v2__cta-row--left {
    justify-content: flex-start;
    margin-top: 18px;
}
.api-hero-v2__cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    background: linear-gradient(135deg, #693bf5 0%, #5b34f0 100%);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(91, 60, 251, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.20);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    cursor: pointer;
    line-height: 1.2;
    position: relative;
    overflow: hidden;
}
.api-hero-v2__cta-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
    z-index: 0;
}
.api-hero-v2__cta-primary > * { position: relative; z-index: 1; }
.api-hero-v2__cta-primary:hover {
    color: #ffffff !important;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(91, 60, 251, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.20);
    transform: translateY(-1px);
}
.api-hero-v2__cta-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(91, 60, 251, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
.api-hero-v2__cta-primary:focus {
    outline: 3px solid rgba(91, 60, 251, 0.35);
    outline-offset: 2px;
}

.api-hero-v2__cta-secondary {
    background: transparent;
    border: 0;
    color: #374151;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 8px 4px;
    transition: color 0.15s ease, gap 0.15s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.api-hero-v2__cta-secondary:hover {
    color: #111111;
    gap: 9px;
}
.api-hero-v2__cta-secondary svg {
    transition: transform 0.15s ease;
}
.api-hero-v2__cta-secondary:hover svg {
    transform: translateX(2px);
}
.api-hero-v2__cta-secondary:focus {
    outline: 2px solid rgba(17, 17, 17, 0.30);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (max-width: 575.98px) {
    .api-hero-v2__cta-primary {
        font-size: 13px;
        padding: 10px 20px;
        width: 100%;
        justify-content: center;
    }
}
.api-hero-v2__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #ececf4;
    border-radius: 999px;
    color: #4b4b6b;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(50, 50, 50, 0.04);
}
.api-hero-v2__badge strong {
    color: #1a1a2e;
    font-weight: 700;
}
.api-hero-v2__badge-icon {
    color: #374151;
    flex-shrink: 0;
}
.api-hero-v2__badge--mcp .api-hero-v2__badge-icon { color: #374151; }
.api-hero-v2__badge svg.api-hero-v2__badge-icon { vertical-align: -2px; }

/* --- Responsive: stack columns on tablets/mobile --- */
@media (max-width: 991.98px) {
    .api-hero-v2__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
    .api-hero-v2__terminal-body {
        max-height: 320px;
    }
}

@media (max-width: 575.98px) {
    .api-hero-v2 {
        padding: 18px 16px;
    }
    .api-hero-v2__left {
        gap: 12px;
    }
    .api-hero-v2__icon img {
        width: 56px;
        height: 56px;
    }
    .api-hero-v2__title.apiTitle {
        font-size: 1.35rem;
    }
    .api-hero-v2__endpoint-name {
        max-width: 140px;
    }
    .api-hero-v2__badges {
        gap: 8px;
    }
    .api-hero-v2__badge {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* --- MCP badge chevron + open state (mono) --- */
.api-hero-v2__badge--mcp {
    cursor: pointer;
    background: #ffffff;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.api-hero-v2__badge--mcp:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
.api-hero-v2__badge--mcp.is-open {
    background: #e5e7eb;
    border-color: #9ca3af;
}
.api-hero-v2__badge-chevron {
    color: #6b7280;
    margin-left: 2px;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.api-hero-v2__badge--mcp.is-open .api-hero-v2__badge-chevron {
    transform: rotate(180deg);
}

/* --- LIVE PLAYGROUND footer (inside the terminal) --- */
.api-hero-v2__playground {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    background: #f6f8fa;
    border-top: 1px solid #e1e4e8;
    color: #24292e;
    font-size: 12px;
}
.api-hero-v2__playground-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.api-hero-v2__playground-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #374151;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}
.api-hero-v2__playground-label {
    color: #1a1a2e;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 11px;
    flex-shrink: 0;
}
.api-hero-v2__playground-desc {
    color: #586069;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.api-hero-v2__playground-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.api-hero-v2__playground-quota {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-weight: 600;
    font-size: 11px;
    border: 1px solid #e5e7eb;
}
.api-hero-v2__playground-quota strong {
    color: #111111;
}
.api-hero-v2__playground-quota-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #374151;
    display: inline-block;
}
.api-hero-v2__playground-btn {
    background: linear-gradient(135deg, #693bf5 0%, #5b34f0 100%);
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    padding: 7px 14px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(91, 60, 251, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.20);
    position: relative;
    overflow: hidden;
}
.api-hero-v2__playground-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
    z-index: 0;
}
.api-hero-v2__playground-btn > * { position: relative; z-index: 1; }
.api-hero-v2__playground-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(91, 60, 251, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.api-hero-v2__playground-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(91, 60, 251, 0.30), inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
.api-hero-v2__playground-btn:focus {
    outline: 2px solid rgba(91, 60, 251, 0.35);
    outline-offset: 2px;
}

/* On narrow screens, stack the playground footer rows */
@media (max-width: 575.98px) {
    .api-hero-v2__playground {
        flex-direction: column;
        align-items: stretch;
    }
    .api-hero-v2__playground-desc {
        white-space: normal;
    }
    .api-hero-v2__playground-actions {
        justify-content: space-between;
    }
}

/* ============================================================
   Featured price card (replaces the prior example-response terminal
   in the hero right column). Annual-by-default with a Monthly toggle.
   ============================================================ */
.api-hero-v2__pricecard {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.08);
    min-width: 0;
}
.api-hero-v2__pricecard-head {
    padding: 14px 18px 12px;
    border-bottom: 1px solid #ececec;
}
.api-hero-v2__pricecard-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.api-hero-v2__pricecard-recommended {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #6a737d;
    text-transform: uppercase;
}
.api-hero-v2__pricecard-popular {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}
.api-hero-v2__pricecard-popular svg { color: #f59e0b; }

.api-hero-v2__pricecard-name {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    color: #000;
    letter-spacing: -0.01em;
}
.api-hero-v2__pricecard-price {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin: 0 0 2px;
    color: #000;
}
.api-hero-v2__pricecard-currency {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
}
.api-hero-v2__pricecard-amount {
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.api-hero-v2__pricecard-period {
    font-size: 0.875rem;
    color: #8b95a7;
    margin-left: 2px;
}
.api-hero-v2__pricecard-billing {
    margin: 1px 0 4px;
    font-size: 12px;
    color: #6a737d;
    line-height: 1.35;
}
.api-hero-v2__pricecard-strike {
    margin: 0 0 6px;
    font-size: 11.5px;
    color: #b0b6bf;
    text-decoration: line-through;
    line-height: 1.35;
}
.api-hero-v2__pricecard-save {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #15803d;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    padding: 3px 8px;
    border-radius: 7px;
    margin: 0 0 8px;
}

.api-hero-v2__pricecard-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 8px;
    padding: 3px;
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 9px;
}
.api-hero-v2__pricecard-toggle-btn {
    background: transparent;
    border: 0;
    color: #6a737d;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.api-hero-v2__pricecard-toggle-btn:hover { color: #111; }
.api-hero-v2__pricecard-toggle-btn.is-active {
    background: #000;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.api-hero-v2__pricecard-toggle-pct {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.9;
}

.api-hero-v2__pricecard-ctas {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 18px;
    border-bottom: 1px solid #ececec;
}
.api-hero-v2__pricecard-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff !important;
    border: 1px solid #000;
    border-radius: 9px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}
.api-hero-v2__pricecard-cta-primary:hover { background: #111; color: #fff !important; text-decoration: none; }
.api-hero-v2__pricecard-cta-primary:active { transform: translateY(1px); }
.api-hero-v2__pricecard-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #111;
    border: 1px solid #d4d4d8;
    border-radius: 9px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.api-hero-v2__pricecard-cta-secondary:hover {
    background: #f6f8fa;
    border-color: #b0b6bf;
}

.api-hero-v2__pricecard-features {
    padding: 10px 18px 14px;
    background: #fafafa;
}
.api-hero-v2__pricecard-features-title {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #6a737d;
    text-transform: uppercase;
    margin-bottom: 7px;
}
.api-hero-v2__pricecard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.api-hero-v2__pricecard-list li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #1f2937;
}
.api-hero-v2__pricecard-list li svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.api-hero-v2__pricecard--subscribed .api-hero-v2__pricecard-head {
    border-bottom: 0;
}

@media (max-width: 900px) {
    .api-hero-v2__pricecard { max-width: 420px; margin: 0 auto; width: 100%; }
}

/* ============================================================
   HERO LAYOUT v3 — single-column flow + Quick Plan Select.
   Replaces the 2-column grid: hero card is now a vertical stack
   (header row → meta row → desc → quick plan tiles), and the
   detailed pricecard lives in its own wrapper below the hero.
   ============================================================ */

/* Override v2 grid (kept for any callers still relying on the class). */
.api-hero-v2__grid {
    display: block;
}

/* ---- Header row: icon + title block (left) | CTAs (right) ---- */
.api-hero-v2__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.api-hero-v2__header-left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
}
.api-hero-v2__header-titlewrap {
    flex: 1 1 auto;
    min-width: 0;
}
.api-hero-v2__title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.api-hero-v2__title-row .api-hero-v2__title.apiTitle {
    margin: 0;
    font-size: 2.25rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #000;
}
@media (max-width: 900px) {
    .api-hero-v2__title-row .api-hero-v2__title.apiTitle { font-size: 1.6rem; }
}

/* ---- Meta row: dot-separated metrics ---- */
.api-hero-v2__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 8px;
    font-size: 13px;
    color: #4b4b6b;
    line-height: 1.5;
}
.api-hero-v2__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: default;
}
.api-hero-v2__meta-item--id {
    color: #6a737d;
    font-size: 12px;
    letter-spacing: 0.04em;
    font-weight: 600;
    text-transform: uppercase;
}
.api-hero-v2__meta-item--mcp {
    cursor: pointer;
    color: #4b4b6b;
    transition: color 0.15s ease;
}
.api-hero-v2__meta-item--mcp:hover { color: #111; }
.api-hero-v2__meta-item strong { font-weight: 700; color: #1a1a2e; }
.api-hero-v2__meta-sep { color: #c1c8d1; }

/* ---- Header right: MCP URL chip + Subscribe button + annual note ---- */
.api-hero-v2__header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}
.api-hero-v2__header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.api-hero-v2__subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #000;
    color: #fff !important;
    border: 1px solid #000;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}
.api-hero-v2__subscribe-btn:hover { background: #111; color: #fff !important; text-decoration: none; }
.api-hero-v2__subscribe-btn:active { transform: translateY(1px); }
.api-hero-v2__annual-note {
    margin: 0;
    font-size: 11.5px;
    color: #8b95a7;
    text-align: right;
}

/* ---- Description (full-width) ---- */
.api-hero-v2__desc--full {
    margin-top: 16px;
    max-width: 80ch;
    font-size: 1rem;
    line-height: 1.55;
    color: #4b4b6b;
}

@media (max-width: 575.98px) {
    .api-hero-v2__header-right { width: 100%; align-items: stretch; }
    .api-hero-v2__header-actions { justify-content: flex-start; }
    .api-hero-v2__annual-note { text-align: left; }
}

/* ---- Subscribed strip (compact usage info for already-subscribed users) ---- */
.api-hero-v2__subscribed-strip {
    margin-top: 20px;
    padding: 14px 16px;
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.api-hero-v2__subscribed-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #6a737d;
    text-transform: uppercase;
}
.api-hero-v2__subscribed-name {
    display: block;
    font-size: 1rem;
    color: #000;
    font-weight: 700;
}
.api-hero-v2__subscribed-usage {
    font-size: 12.5px;
    color: #6a737d;
}

/* ============================================================
   Sweep all remaining purple/violet accents on the item page.
   Use !important because most of these come from Bootstrap defaults
   or site-wide theme rules with their own !important / specificity.
   ============================================================ */

/* Bootstrap .btn-primary (Copy Endpoint, code-language tabs, etc.) */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:focus {
    background: var(--grad-1, linear-gradient(135deg, #693bf5 0%, #8B5CF6 100%)) !important;
    background-color: #693bf5 !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(91, 60, 251, .3), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:hover {
    background: var(--grad-1-hover, linear-gradient(135deg, #4A2EE0 0%, #7C4DEC 100%)) !important;
    background-color: #4A2EE0 !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(91, 60, 251, .4), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

/* Related APIs / "You might also like" carousel arrows */
.arrow-right,
.arrow-left {
    color: #000000 !important;
}
.arrow-right-icon,
.arrow-left-icon {
    background: #f3f4f6 !important;
    color: #000000 !important;
    border-color: #e5e7eb !important;
}

/* Category / tag pills on the API cards (Finance & Payments, Location & Mapping, etc.) */
.category_box {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #e5e7eb !important;
}
.card_tag_category {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #e5e7eb !important;
}
/* "Free 7-Day Trial" badge variant uses .tagT — keep as a soft chip too */
.card_tag_category.tagT,
.category_box.tagT {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

/* Featured / accent tags inside card descriptions also use purple in legacy CSS */
.tag_pricing,
.featured_tag,
.card-tag {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #e5e7eb !important;
}

/* Footer social media icons — they're PNG images of white-on-purple circles.
   Convert to grayscale so the purple becomes dark gray. */
ul.footer-social li a.ln img,
.footer-social a.ln img {
    filter: grayscale(100%) brightness(0.45);
    transition: filter 0.15s ease;
}
ul.footer-social li a.ln:hover img,
.footer-social a.ln:hover img {
    filter: grayscale(100%) brightness(0.15);
}

/* ============================================================
   Delicate monochrome HOVER overrides — replaces the Bootstrap
   default a:hover blue (#0056b3) and any leftover purple :hover
   accents with subtle dark-gray transitions.
   ============================================================ */
/* Card titles / descriptions / icons inside related-APIs cards */
.single_jobs a,
.single_jobs a:visited,
.single_jobs a:focus {
    color: #1f1f1f;
    transition: color 0.18s ease;
}
.single_jobs:hover a,
.single_jobs a:hover {
    color: #1a1a2e !important;
    text-decoration: none !important;
}
.single_jobs .cardDescription:hover,
.single_jobs:hover .cardDescription {
    color: #3a505f !important;
}

/* Carousel arrows on .owl-carousel — the chevron should not turn purple/blue */
.owl-carousel .owl-nav button,
.owl-carousel .owl-prev,
.owl-carousel .owl-next,
.arrow-left,
.arrow-right,
.related-left,
.related-right {
    color: #1a1a2e !important;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.owl-carousel .owl-nav button:hover,
.owl-carousel .owl-prev:hover,
.owl-carousel .owl-next:hover,
.arrow-left:hover,
.arrow-right:hover,
.related-left:hover,
.related-right:hover {
    color: #000000 !important;
    background: transparent;
}
.arrow-left-icon,
.arrow-right-icon,
.owl-carousel .owl-nav button span,
.related-left .arrow-left-icon,
.related-right .arrow-right-icon {
    background: #f3f4f6 !important;
    color: #000000 !important;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.arrow-left:hover .arrow-left-icon,
.arrow-right:hover .arrow-right-icon,
.related-left:hover .arrow-left-icon,
.related-right:hover .arrow-right-icon,
.like-left:hover .arrow-left-icon,
.like-right:hover .arrow-right-icon {
    background: #e5e7eb !important;
    color: #000000 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* CRITICAL: the actual chevron shape (V) is drawn by ::after pseudo-elements
   using `border-color: #000000`. Override those too — they're what the user
   actually sees as the purple arrow. Applies to BOTH carousels (Related APIs
   and You might also like, identified by .related-* and .like-* wrappers). */
.arrow-right-icon::after,
.related-right .arrow-right-icon::after,
.like-right .arrow-right-icon::after {
    border-right-color: #000000 !important;
    border-top-color: #000000 !important;
}
.arrow-left-icon::after,
.related-left .arrow-left-icon::after,
.like-left .arrow-left-icon::after {
    border-left-color: #000000 !important;
    border-bottom-color: #000000 !important;
}
/* Also kill the legacy purple text color on the outer .arrow-* wrapper
   (legacy rule sets color: #000000 on .arrow-left at line 474). */
.arrow-left,
.arrow-right,
.related-left,
.related-right,
.like-left,
.like-right {
    color: #1a1a2e !important;
}

/* Footer link hover — replace Bootstrap's blue (#0056b3) + custom.css's
   `.single-footer > ul li a:hover` purple with subtle dark gray.
   Use higher-specificity selectors to beat the existing !important rules. */
footer a,
.footer-section a,
.footer-widget a,
.single-footer a,
.single-footer > ul li a,
.single-footer ul li a,
.footer a {
    color: #3a505f;
    transition: color 0.18s ease;
}
footer a:hover,
.footer-section a:hover,
.footer-widget a:hover,
.single-footer a:hover,
.single-footer > ul li a:hover,
.single-footer ul li a:hover,
.footer a:hover {
    color: #000000 !important;
    text-decoration: none !important;
}

/* Generic Bootstrap-link override for the item page — never use blue/purple on hover */
.job_details_area a:hover,
.descript_wrap a:hover {
    color: #000000;
    text-decoration: none;
}

/* Run in Postman / .btn-gradient-primary — Postman brand orange.
   Pill shape matches the top header pills (.api-pill / .register-btn aesthetic):
   solid color, no gradient, rounded 999px, soft shadow, lift-on-hover. */
.btn-gradient-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    background: #FF6C37 !important;
    background-image: none !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 12px 22px !important;
    min-height: 44px;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 16px rgba(255, 108, 55, 0.32) !important;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.18s ease !important;
}
.btn-gradient-primary:hover {
    background: #E85A2A !important;
    background-image: none !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(255, 108, 55, 0.40) !important;
}
.btn-gradient-primary:focus,
.btn-gradient-primary:focus-visible {
    outline: 3px solid rgba(255, 108, 55, 0.35);
    outline-offset: 2px;
}
/* Postman planet icon inside the pill */
.btn-gradient-primary .postman-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: currentColor;
}

/* Bootstrap default link color used inside the docs body */
.descript_wrap a:not(.btn):not(.tablinks):not(.api-hero-v2__cta-primary):not(.api-hero-v2__cta-secondary):not(.api-pill) {
    color: #000000;
}
.descript_wrap a:not(.btn):not(.tablinks):not(.api-pill):hover {
    color: #374151;
}

/* ==========================================================================
   Endpoint card v2 — pill + path header, dark code boxes
   ========================================================================== */

.endpoint-accordion-v2 {
    box-shadow: none;
    background: transparent;
}

.endpoint-card-v2 {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Selected/expanded state — purple outline matching the screenshot */
.endpoint-card-v2:has(.endpoint-header-v2__link[aria-expanded="true"]) {
    border-color: #818cf8;
    box-shadow: 0 0 0 1px #818cf8;
}

.endpoint-header-v2 {
    background-color: #ffffff !important;
    border: 0 !important;
    padding: 0;
}

.endpoint-header-v2__link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    color: #000000;
    text-decoration: none;
    text-transform: none;
    font-weight: 500;
    width: 100%;
}

.endpoint-header-v2__link:hover,
.endpoint-header-v2__link:focus {
    background-color: #fafafa;
    color: #000000;
    text-decoration: none;
}

/* Method pill — color-coded by HTTP verb */
.endpoint-method-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 0.22rem 0.55rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 6px;
    flex-shrink: 0;
}

.endpoint-method-pill--get    { background-color: #d1fae5; color: #065f46; }
.endpoint-method-pill--post   { background-color: #dbeafe; color: #1e40af; }
.endpoint-method-pill--put    { background-color: #fef3c7; color: #92400e; }
.endpoint-method-pill--patch  { background-color: #ede9fe; color: #5b21b6; }
.endpoint-method-pill--delete { background-color: #fee2e2; color: #991b1b; }

/* Stacked text block: name (primary) on top, path (secondary) below */
.endpoint-header-v2__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

.endpoint-name-text {
    color: #111827;
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.endpoint-path-text {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.endpoint-deprecated-badge {
    margin-left: 0.4rem;
    position: relative;
    top: -1px;
}

/* Kill the legacy "+" pseudo-element from .collapsible-link — we draw our own chevron below. */
.endpoint-header-v2__link.collapsible-link::before {
    content: none !important;
}

/* Chevron indicator on the endpoint header — rotates 90° when expanded.
   Replaces the legacy "+"/"−" caret with a cleaner triangle that matches the
   purple-outline card redesign. Drawn with a CSS triangle so we don't depend
   on Font Awesome for this lightweight affordance. */
.endpoint-header-v2__link.collapsible-link::after {
    content: "";
    width: 0;
    height: 0;
    background: transparent;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #6b7280;
    position: absolute;
    top: 50%;
    right: 1.1rem;
    transform: translateY(-50%);
    transition: transform 0.25s ease;
    opacity: 0.85;
}

.endpoint-header-v2__link.collapsible-link[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(90deg);
    opacity: 1;
}

.endpoint-header-v2__link.collapsible-link:hover::after,
.endpoint-header-v2__link.collapsible-link:focus::after {
    border-left-color: #4b5563;
    opacity: 1;
}

/* Reserve space on the right so the chevron never overlaps the path/name text. */
.endpoint-header-v2__link.collapsible-link {
    position: relative;
    padding-right: 2.5rem;
}

/* Endpoint ID badge — moved into the expanded body */
.endpoint-body-id-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: #9ca3af;
}

.endpoint-body-id-text {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Dark code box variant — used for URL line and JSON examples in descriptions */
.codebox.codebox--dark {
    background-color: #0d1117 !important;
    border: 1px solid #1f2937 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #c9d1d9 !important;
    overflow: hidden;
}

.codebox.codebox--dark .card-body {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
    max-height: 495px;
    overflow: auto;
}

.codebox--dark__pre {
    background-color: transparent !important;
    color: #c9d1d9 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.codebox--dark__pre code,
.codebox--dark__pre .responseCode {
    background-color: transparent !important;
    color: #c9d1d9 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.codebox--dark__method {
    display: inline-block;
    font-weight: 700;
    margin-right: 0.5rem;
}
.codebox--dark__method--get    { color: #7ee787; }
.codebox--dark__method--post   { color: #79c0ff; }
.codebox--dark__method--put    { color: #ffd866; }
.codebox--dark__method--patch  { color: #d2a8ff; }
.codebox--dark__method--delete { color: #ff7b72; }

.codebox--dark__url {
    color: #c9d1d9;
    word-break: break-all;
}

/* Responsive: allow text to wrap on small screens — keeps the name/path stack readable */
@media (max-width: 640px) {
    .endpoint-header-v2__link {
        gap: 0.7rem;
        align-items: flex-start;
    }
    .endpoint-name-text {
        white-space: normal;
        font-size: 13.5px;
    }
    .endpoint-path-text {
        font-size: 11.5px;
        white-space: normal;
        word-break: break-all;
    }
}

/* Force white text/icon on the "Run in Postman" button regardless of cascade.
   Ultra-specific selectors so any later rule can't accidentally re-darken the label. */
a.btn.btn-gradient-primary,
a.btn.btn-gradient-primary:link,
a.btn.btn-gradient-primary:visited,
a.btn.btn-gradient-primary:hover,
a.btn.btn-gradient-primary:focus,
a.btn.btn-gradient-primary:active,
.descript_wrap a.btn.btn-gradient-primary,
.descript_wrap a.btn.btn-gradient-primary:hover,
.tabcontent a.btn.btn-gradient-primary,
.tabcontent a.btn.btn-gradient-primary:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}
a.btn.btn-gradient-primary i,
a.btn.btn-gradient-primary .fa,
a.btn.btn-gradient-primary svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ===============================================================
   HERO v6 — split layout (big identity on the left, pricing card
   on the right). Scoped under .api-hero-v2--split so the older
   classes that still ship with item.blade.php for backwards-
   compatibility don't get restyled.
   =============================================================== */

.api-hero-v2--split .api-hero-v2__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .api-hero-v2--split .api-hero-v2__split {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

/* --- LEFT column ----------------------------------------------- */
.api-hero-v2__split-left { min-width: 0; }

.api-hero-v2__identity { margin-bottom: 18px; }

.api-hero-v2__icon--big {
    width: 96px;
    height: 96px;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(135deg, #ff6f9a 0%, #c84cff 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 24px -10px rgba(200, 76, 255, 0.45);
}
.api-hero-v2__icon--big a { display: block; line-height: 0; }
.api-hero-v2__icon--big img,
.api-hero-v2__icon--big picture {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 22px;
    display: block;
}

/* Big title (overrides default 2.5rem; uses tighter tracking) */
.api-hero-v2__title--xl.apiTitle {
    font-size: 3.25rem;
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
    color: #0b0b16;
    word-break: break-word;
}
@media (max-width: 1100px) {
    .api-hero-v2__title--xl.apiTitle { font-size: 2.5rem; }
}
@media (max-width: 600px) {
    .api-hero-v2__title--xl.apiTitle { font-size: 2rem; }
}

/* Thin underline accent under the title — matches reference image. */
.api-hero-v2__title--xl.apiTitle::after {
    content: "";
    display: block;
    width: 96px;
    height: 4px;
    margin-top: 12px;
    background: #5b34f0;
    border-radius: 2px;
}

/* Small meta line under the title: "★ 4.9 · 100+ reviews · API ID 11149" */
.api-hero-v2__meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 14px 0 16px;
    color: #6a737d;
    font-size: 14px;
    font-weight: 500;
}
.api-hero-v2__meta-line-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.api-hero-v2__meta-line-item strong {
    color: #1a1a2e;
    font-weight: 700;
}
.api-hero-v2__meta-line-sep {
    color: #c1c8d1;
    margin: 0 2px;
}

/* Larger description on the split hero */
.api-hero-v2__desc--xl.apiDesc {
    font-size: 1.125rem;
    line-height: 1.55;
    color: #4b4b6b;
    margin: 0 0 22px;
    max-width: 56ch;
}

/* Pill-style badges row spacing override (uptime / avg response / MCP-ready).
   The base badge + icon styling lives in the earlier .api-hero-v2__badge block
   (around line 1791); this only widens the row gap + bottom margin so the hero
   layout breathes more than the marketplace card row. */
.api-hero-v2__badges {
    gap: 10px;
    margin-bottom: 22px;
}

/* Action buttons (View pricing primary + Copy MCP URL ghost) */
.api-hero-v2__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.api-hero-v2__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
    font-family: inherit;
}
.api-hero-v2__action:active { transform: translateY(1px); }
.api-hero-v2__action--primary {
    background: #5b34f0;
    color: #ffffff;
    border-color: #5b34f0;
}
.api-hero-v2__action--primary:hover {
    background: #4a26e0;
    border-color: #4a26e0;
    color: #ffffff;
}
.api-hero-v2__action--ghost {
    background: #ffffff;
    color: #1a1a2e;
    border-color: #d6dae1;
}
.api-hero-v2__action--ghost:hover {
    background: #f7f8fa;
    border-color: #b9bfca;
    color: #1a1a2e;
}
.api-hero-v2__action--ghost svg { color: #4b4b6b; }

/* Ask AI variant — soft lavender ghost with a vivid badge so it reads
   as an LLM-backed action, distinct from "View pricing" / "Copy MCP". */
.api-hero-v2__action--ask {
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%);
    color: #4f3fd1;
    border-color: rgba(110, 86, 248, 0.35);
    position: relative;
    padding-right: 14px;
}
.api-hero-v2__action--ask:hover {
    background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
    border-color: #6E56F8;
    color: #4f3fd1;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(110, 86, 248, 0.18);
}
.api-hero-v2__action--ask svg { color: #6E56F8; }
.api-hero-v2__action-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6E56F8, #4f3fd1);
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 3px 6px;
    border-radius: 999px;
    line-height: 1;
    margin-left: 2px;
    box-shadow: 0 2px 6px rgba(110, 86, 248, 0.35);
}

/* --- RIGHT column: pricing card -------------------------------- */
.api-hero-v2__pricing-card {
    background: #ffffff;
    border: 1px solid #ececf4;
    border-radius: 20px;
    padding: 24px 22px;
    box-shadow: 0 12px 32px -16px rgba(91, 52, 240, 0.18);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

/* Discount ribbon — top-right badge that signals "−X% OFF" when the
   annual plan saves vs the same-tier monthly. Uses solid brand gradient
   so it pops without overpowering the price. */
.api-hero-v2__pricing-card-ribbon {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 6px 16px -6px rgba(4, 120, 87, 0.45);
    text-transform: uppercase;
    z-index: 1;
}

.api-hero-v2__pricing-card-eyebrow {
    color: #5b34f0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-right: 88px; /* leave room for the ribbon when present */
}

.api-hero-v2__pricing-card-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-top: 2px;
    color: #0b0b16;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.api-hero-v2__pricing-card-symbol {
    font-size: 24px;
    color: #6b7280;
    font-weight: 700;
    margin-right: 2px;
}
.api-hero-v2__pricing-card-whole {
    font-size: 64px;
    line-height: 1;
}
.api-hero-v2__pricing-card-frac {
    font-size: 28px;
    color: #1a1a2e;
}
.api-hero-v2__pricing-card-per {
    font-size: 16px;
    color: #6b7280;
    font-weight: 600;
    margin-left: 4px;
}

.api-hero-v2__pricing-card-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}

/* Row that sits directly under the big price: regular monthly price
   crossed out + savings pill. Communicates the discount in $ at a
   glance, so users don't have to do the math themselves. */
.api-hero-v2__pricing-card-compare {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: -2px;
}
.api-hero-v2__pricing-card-strike {
    color: #9ca3af;
    font-size: 15px;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.api-hero-v2__pricing-card-save {
    background: #ecfdf5;
    color: #047857;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.api-hero-v2__pricing-card-cta,
a.api-hero-v2__pricing-card-cta:link,
a.api-hero-v2__pricing-card-cta:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #5b34f0;
    color: #ffffff !important;
    border-radius: 999px;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    margin-top: 4px;
    box-shadow: 0 0 0 rgba(91, 52, 240, 0);
}
a.api-hero-v2__pricing-card-cta:hover,
a.api-hero-v2__pricing-card-cta:focus,
a.api-hero-v2__pricing-card-cta:focus-visible {
    background: #4a26e0;
    color: #ffffff !important;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(91, 52, 240, 0.28);
    transform: translateY(-1px);
}
a.api-hero-v2__pricing-card-cta:active {
    color: #ffffff !important;
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(91, 52, 240, 0.22);
}

/* Subtle escape hatch placed at the very bottom of the pricing card — links
   to the full pricing table. Intentionally low-contrast vs the primary CTA:
   no background, small chevron, muted text. Centered on its own row so it
   reads as a tertiary action under the features list. Hover reveals brand
   color + a soft pill background so it still feels interactive. */
.api-hero-v2__pricing-card-viewall,
a.api-hero-v2__pricing-card-viewall:link,
a.api-hero-v2__pricing-card-viewall:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 12px auto 0;
    padding: 8px 12px;
    background: transparent;
    color: #6b6b85;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 999px;
    transition: color 0.18s ease, background 0.18s ease;
}
a.api-hero-v2__pricing-card-viewall:hover,
a.api-hero-v2__pricing-card-viewall:focus,
a.api-hero-v2__pricing-card-viewall:focus-visible {
    color: #5b34f0;
    background: rgba(91, 52, 240, 0.06);
    text-decoration: none;
}
a.api-hero-v2__pricing-card-viewall:hover svg,
a.api-hero-v2__pricing-card-viewall:focus svg {
    transform: translateX(2px);
}
.api-hero-v2__pricing-card-viewall svg {
    transition: transform 0.18s ease;
}

/* Features list inherits from marketplace/pricing/features.blade.php
   (fa-ul style). Tighten spacing and align checks to the card style. */
.api-hero-v2__pricing-card-features {
    border-top: 1px solid #ececf4;
    padding-top: 14px;
    margin-top: 4px;
}
.api-hero-v2__pricing-card-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.api-hero-v2__pricing-card-features ul li {
    display: block;
    position: relative;
    padding: 6px 0 6px 26px;
    font-size: 14px;
    color: #1a1a2e;
    line-height: 1.45;
}
.api-hero-v2__pricing-card-features ul li .fa-li {
    position: absolute;
    left: 0;
    top: 9px;
    width: 16px;
    color: #1a1a2e;
    margin-top: 0;
}
.api-hero-v2__pricing-card-features ul li .fa-li i { color: #1a1a2e; font-size: 12px; }
.api-hero-v2__pricing-card-features ul li .fa-info-circle {
    display: inline-block;
    background: #1a1a2e;
    color: #ffffff;
    border-radius: 999px;
    font-size: 9px;
    padding: 3px;
    margin-left: 6px;
    vertical-align: middle;
    cursor: help;
}

/* ============================================================
   SINGLE-PAGE LAYOUT v2 — Sticky pills nav + open sections
   ============================================================
   Replaces the old .tab / .tabcontent (hide/show) pattern with
   a floating sticky pill nav and always-visible page sections. */

html {
    scroll-padding-top: 110px;
}

.api-pills-wrap {
    position: sticky;
    top: 84px;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 8px 0 24px;
    pointer-events: none;
    background: transparent;
}

.api-pills {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    border-radius: 999px;
    padding: 6px;
    box-shadow:
        0 1px 2px rgba(20, 17, 60, 0.06),
        0 8px 28px rgba(20, 17, 60, 0.10);
    border: 1px solid rgba(20, 17, 60, 0.05);
    max-width: 95vw;
    overflow-x: auto;
    scrollbar-width: none;
}
.api-pills::-webkit-scrollbar { display: none; }

.api-pills .api-pill,
a.api-pill,
button.api-pill {
    appearance: none;
    border: 0;
    background: transparent;
    color: #0f1226;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 14px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
}
/* Pill icon — inherits color from the pill so it flips correctly on active. */
.api-pills .api-pill .api-pill__icon {
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.85;
    transition: opacity 0.18s ease;
}
.api-pills .api-pill:hover .api-pill__icon,
.api-pills .api-pill.is-active .api-pill__icon { opacity: 1; }

.api-pills .api-pill:hover:not(.is-active),
a.api-pill:hover:not(.is-active) {
    color: #5b34f0;
    background: rgba(91, 52, 240, 0.08);
    text-decoration: none;
}
.api-pills .api-pill.is-active,
a.api-pill.is-active,
button.api-pill.is-active {
    background: #5b34f0;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(91, 52, 240, 0.35);
    text-decoration: none;
}
.api-pills .api-pill.is-admin { color: #92400e; }
.api-pills .api-pill.is-admin:hover:not(.is-active) { color: #b45309; background: rgba(245, 158, 11, 0.10); }
.api-pills .api-pill.is-admin.is-active {
    background: #f59e0b;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
    color: #ffffff !important;
}

/* "Ask anything" pill — visually identical to the other pills (no
   gradient) so it doesn't shout. The "AI" micro-badge after the
   label is the only differentiator, signaling LLM-backed action.
   Never enters .is-active (no section to scroll-spy to). */
.api-pills .api-pill.is-ask::after {
    content: "AI";
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    background: #ede9fe;
    color: #5b34f0;
    padding: 3px 6px;
    border-radius: 999px;
    line-height: 1;
    margin-left: 4px;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.api-pills .api-pill.is-ask:hover::after {
    background: #5b34f0;
    color: #ffffff;
}
.api-pills .api-pill.is-ask .api-pill__icon {
    /* Robot icon stays violet to keep the AI signal visible at a glance. */
    color: #5b34f0;
    opacity: 1;
}
.api-pills .api-pill.is-ask:hover .api-pill__icon { color: #4a26e0; }

@media (max-width: 768px) {
    .api-pills .api-pill { padding: 10px 14px; font-size: 13.5px; min-height: 42px; gap: 6px; }
    .api-pills .api-pill .api-pill__icon { width: 14px; height: 14px; }
    .api-pills .api-pill.is-ask::after { font-size: 8px; padding: 2px 5px; }
}

.api-section.tabcontent,
#Info.tabcontent,
#Documentation.tabcontent,
#Pricing.tabcontent,
#FAQs.tabcontent,
#Support.tabcontent {
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 32px 0 24px !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 16px;
}
#chooseTabMessage.tabcontent { display: none !important; }

.single_wrap.text-wrap > .documentationCard {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 8px !important;
}
.single_wrap.text-wrap > .documentationCard > .tab.theTab { display: none !important; }

#Info, #Documentation, #Pricing, #FAQs, #Support {
    scroll-margin-top: 110px;
}

@media (max-width: 768px) {
    /* Push pills lower so they don't kiss the navbar; mobile navbar ~64px tall,
       + 12px gap = pills start at 76px from viewport top. */
    .api-pills-wrap { top: 76px; padding: 8px 12px 14px; margin: 14px 0 24px; }
    .api-pill { padding: 10px 16px; font-size: 14px; }
    /* Section anchors must clear navbar (64px) + pills bar (~62px) + buffer. */
    html { scroll-padding-top: 148px; }
    #Info, #Documentation, #Pricing, #FAQs, #Support { scroll-margin-top: 148px; }
}

/* ----------------------------------------------------------------
   Small phones (<= 480px): iPhone 16 Pro (402px), Pixel, Galaxy.
   Reduces internal card padding and tightens type so the cards
   keep ~16px breathing room from the viewport edges (governed by
   --zyla-layout-max: clamp(320px, 92vw, 1600px) in marketplace.css)
   without their content feeling cramped.
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Pricing card (Subscribe + features list) */
    .api-hero-v2__pricing-card { padding: 20px 16px; border-radius: 16px; gap: 10px; }
    .api-hero-v2__pricing-card-eyebrow { padding-right: 76px; font-size: 11px; }
    .api-hero-v2__pricing-card-ribbon { top: 12px; right: 12px; font-size: 10px; padding: 5px 10px; }
    .api-hero-v2__pricing-card-symbol { font-size: 20px; }
    .api-hero-v2__pricing-card-whole { font-size: 52px; }
    .api-hero-v2__pricing-card-frac { font-size: 24px; }
    .api-hero-v2__pricing-card-per { font-size: 14px; }
    .api-hero-v2__pricing-card-cta { padding: 13px 16px; font-size: 15px; }
    .api-hero-v2__pricing-card-features { padding-top: 12px; }

    /* Pills tab bar (Ask anything / Overview / API Docs ...) — give it
       extra breathing room from the navbar so it doesn't feel cramped. */
    .api-pills-wrap { top: 76px; padding: 8px 10px 12px; margin: 14px 0 20px; }
    .api-pills { padding: 4px; gap: 3px; }
    .api-pills .api-pill { padding: 9px 12px; font-size: 12.5px; min-height: 40px; gap: 5px; }
    /* Pills @480px shrink to ~50px tall; navbar 64 + pills 50 + 12 buffer + 14 gap = 140px */
    html { scroll-padding-top: 140px; }
    #Info, #Documentation, #Pricing, #FAQs, #Support { scroll-margin-top: 140px; }

    /* Description / Overview / Docs / Pricing / FAQ / Support card */
    .api-section.tabcontent,
    #Info.tabcontent,
    #Documentation.tabcontent,
    #Pricing.tabcontent,
    #FAQs.tabcontent,
    #Support.tabcontent {
        padding: 24px 4px 20px !important;
    }
    .api-overview__body { font-size: 15px; line-height: 1.65; }

    /* Column padding (px-2 = 8px) bumped to 12px for better edge feel */
    .job_details_area > .container > .row > .col-xl-12.px-2 {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ----------------------------------------------------------------
   Ultra-small phones (<= 360px): iPhone SE 1st gen, older Androids.
   Last line of defense — prevents horizontal overflow on the tiniest
   screens while keeping all CTAs and price legible.
   ---------------------------------------------------------------- */
@media (max-width: 360px) {
    .api-hero-v2__pricing-card { padding: 18px 14px; }
    .api-hero-v2__pricing-card-eyebrow { padding-right: 70px; }
    .api-hero-v2__pricing-card-whole { font-size: 44px; }
    .api-hero-v2__pricing-card-frac { font-size: 20px; }
    .api-hero-v2__pricing-card-cta { padding: 12px 14px; font-size: 14px; }

    .api-pills-wrap { top: 72px; padding: 6px 8px 10px; margin: 12px 0 18px; }
    .api-pills .api-pill { padding: 8px 10px; font-size: 12px; min-height: 38px; }
    html { scroll-padding-top: 132px; }
    #Info, #Documentation, #Pricing, #FAQs, #Support { scroll-margin-top: 132px; }

    .api-section.tabcontent,
    #Info.tabcontent,
    #Documentation.tabcontent,
    #Pricing.tabcontent,
    #FAQs.tabcontent,
    #Support.tabcontent {
        padding: 20px 2px 16px !important;
    }
}

/* ============================================================
   PRICING v2 — "Plans built for makers"
   ============================================================ */
.pricing-v2 { padding-top: 8px; }

.pricing-v2__head { text-align: center; margin-bottom: 28px; }
.pricing-v2__title {
    font-size: 40px;
    line-height: 1.1;
    font-weight: 800;
    color: #0f1226;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}
.pricing-v2__sub { color: #6b7280; font-size: 16px; margin: 0; }

.pricing-v2__toggle-wrap { display: flex; justify-content: center; margin: 24px auto 36px; }

/* When the currency selector is rendered next to the toggle, switch the
   wrap to a 3-column grid so the toggle stays visually centered (middle
   column = auto) while the currency pill is anchored to the right edge
   (column 3). Empty 1fr column on the left keeps the toggle perfectly
   centered regardless of the currency pill's width. */
.pricing-v2__toggle-wrap--with-aside {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
.pricing-v2__toggle-wrap--with-aside .pricing-v2__toggle {
    grid-column: 2;
    justify-self: center;
}
.pricing-v2__toggle-wrap--with-aside .pricingSelect--inline {
    grid-column: 3;
    justify-self: end;
    margin: 0;
    padding: 0;
}

.pricing-v2__toggle {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border-radius: 999px;
    padding: 6px;
    border: 1px solid rgba(20, 17, 60, 0.06);
    box-shadow: 0 4px 16px rgba(20, 17, 60, 0.08);
}

/* Currency selectize styled as a pill that mirrors the Monthly/Annually
   toggle so they read as a unified control row. Targets the rendered
   Selectize wrapper (`.selectize-input`) — same white bg, pill radius,
   border, shadow, and typography (15px / 600). */
.pricingSelect--inline .selectize-control,
.pricingSelect--right .selectize-control {
    min-width: 140px;
}
.pricingSelect--inline .selectize-input,
.pricingSelect--right .selectize-input {
    background: #ffffff !important;
    border: 1px solid rgba(20, 17, 60, 0.06) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 16px rgba(20, 17, 60, 0.08) !important;
    padding: 10px 36px 10px 18px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    line-height: 1.2 !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.pricingSelect--inline .selectize-input:hover,
.pricingSelect--right .selectize-input:hover {
    border-color: rgba(110, 86, 248, 0.35) !important;
    box-shadow: 0 6px 20px rgba(110, 86, 248, 0.18) !important;
}
.pricingSelect--inline .selectize-input.focus,
.pricingSelect--right .selectize-input.focus {
    border-color: #6E56F8 !important;
    box-shadow: 0 0 0 3px rgba(110, 86, 248, 0.18) !important;
}
.pricingSelect--inline .selectize-input::after,
.pricingSelect--right .selectize-input::after {
    border-color: #6E56F8 transparent transparent transparent !important;
    right: 14px !important;
}
.pricingSelect--inline .selectize-dropdown,
.pricingSelect--right .selectize-dropdown {
    border-radius: 12px !important;
    border: 1px solid rgba(20, 17, 60, 0.08) !important;
    box-shadow: 0 12px 32px rgba(20, 17, 60, 0.12) !important;
    margin-top: 4px !important;
    overflow: hidden;
}
.pricingSelect--inline .selectize-dropdown .option,
.pricingSelect--right .selectize-dropdown .option {
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500;
}
.pricingSelect--inline .selectize-dropdown .option.active,
.pricingSelect--right .selectize-dropdown .option.active {
    background: rgba(110, 86, 248, 0.08) !important;
    color: #1f2937 !important;
}

/* Mobile: stack toggle and currency vertically, both centered. */
@media (max-width: 768px) {
    .pricing-v2__toggle-wrap--with-aside {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
    .pricing-v2__toggle-wrap--with-aside .pricing-v2__toggle {
        grid-column: 1;
    }
    .pricing-v2__toggle-wrap--with-aside .pricingSelect--inline {
        grid-column: 1;
        justify-self: center;
    }
}
.pricing-v2__toggle-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #4b5563;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pricing-v2__toggle-btn.is-active {
    background: #6E56F8;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(110, 86, 248, 0.35);
}
.pricing-v2__toggle-save {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 999px;
    background: #ede9fe;
    color: #6E56F8;
}
.pricing-v2__toggle-btn.is-active .pricing-v2__toggle-save {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.pricing-v2 .row.justify-content-center { align-items: stretch; }
.pricing-v2 .pricing_card { padding: 0 12px !important; display: flex; margin-bottom: 24px; }
.pricing-v2 .pricing_card .card {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(20, 17, 60, 0.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 2px rgba(20, 17, 60, 0.03);
    padding: 28px 22px 24px !important;
    width: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: visible;
    margin-bottom: 0 !important;
}
.pricing-v2 .pricing_card .card-body {
    padding: 0 !important;
    background: transparent !important;
    height: auto !important;
}

/* Force visible overflow so the "MOST POPULAR" pill isn't clipped
   by inline `style="overflow:hidden"` on the .card element in
   resources/views/marketplace/pricing/plans.blade.php. */
.pricing-v2 .pricing_card .card { overflow: visible !important; }

/* Hide the legacy diagonal "Popular" ribbon inside pricing v2 —
   the .is-featured pill below is the canonical badge. */
.pricing-v2 .pricing_card .ribbon,
.pricing-v2 .pricing_card .ribbon-top-right { display: none !important; }

.pricing-v2 .pricing_card.is-featured .card {
    border: 2px solid #6E56F8 !important;
    box-shadow:
        0 4px 14px rgba(110, 86, 248, 0.15),
        0 22px 48px rgba(110, 86, 248, 0.14);
    transform: translateY(-8px);
}
.pricing-v2 .pricing_card.is-featured .card::before {
    content: "\26A1 MOST POPULAR";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #6E56F8;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    padding: 7px 16px;
    border-radius: 999px;
    box-shadow:
        0 6px 18px rgba(110, 86, 248, 0.38),
        0 2px 4px rgba(110, 86, 248, 0.22);
    white-space: nowrap;
    text-transform: uppercase;
    line-height: 1;
    z-index: 2;
}

/* Mobile: the negative-translate looks awkward when cards stack vertically.
   Drop the lift on small screens but keep the badge. */
@media (max-width: 991.98px) {
    .pricing-v2 .pricing_card.is-featured .card { transform: none; margin-top: 18px; }
}

.pricing-v2 .pricing_card .card-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    color: #6E56F8 !important;
    text-align: left !important;
    margin-bottom: 18px !important;
    text-transform: uppercase;
}

.pricing-v2 .pricing_card .card-price {
    text-align: left !important;
    color: #0f1226 !important;
    font-weight: 800 !important;
    margin: 0 0 4px !important;
    font-size: 48px !important;
    line-height: 1 !important;
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.pricing-v2 .pricing_card .card-price .period {
    font-size: 16px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}

.pricing-v2 .pricing_card .fa-ul,
.pricing-v2 .pricing_card ul.fa-ul { margin: 18px 0 0 1.4em !important; }
.pricing-v2 .pricing_card .fa-ul li {
    margin: 10px 0 !important;
    color: #1f2937;
    font-size: 14.5px;
    line-height: 1.5;
}
.pricing-v2 .pricing_card .fa-ul li .fa-check,
.pricing-v2 .pricing_card .fa-ul li .fas.fa-check,
.pricing-v2 .pricing_card .fa-ul li .fa-li i {
    color: #6E56F8 !important;
    background: rgba(110, 86, 248, 0.12);
    border-radius: 999px;
    width: 18px;
    height: 18px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.pricing-v2 .pricing_card .btn,
.pricing-v2 .pricing_card a.btn,
.pricing-v2 .pricing_card button.btn {
    margin-top: 16px !important;
    width: 100%;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-weight: 700 !important;
    background: #0f1226 !important;
    border-color: #0f1226 !important;
    color: #ffffff !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.pricing-v2 .pricing_card .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 18, 38, 0.25);
}
.pricing-v2 .pricing_card.is-featured .btn {
    background: #6E56F8 !important;
    border-color: #6E56F8 !important;
}
.pricing-v2 .pricing_card.is-featured .btn:hover {
    box-shadow: 0 8px 20px rgba(110, 86, 248, 0.40);
}

/* Keep the redesign's 12px CTA radius on click.
   The legacy "pill" override (line ~6779) re-applies border-radius:999px on
   :focus/:active with specificity (0,5,0), so clicking Subscribe snapped the
   button back to the old fully-rounded pill. We re-assert the 12px radius for
   the interaction states scoped under .pricing-v2 with the same :not() guards,
   reaching specificity (0,6,0) so it wins — without touching the legacy pill
   used by .modal .pricing_card / .my-apis-page. */
.pricing-v2 .pricing_card .btn:not(:disabled):not(.disabled):active,
.pricing-v2 .pricing_card .btn:not(:disabled):not(.disabled):focus,
.pricing-v2 .pricing_card .btn:not(:disabled):not(.disabled):focus-visible {
    border-radius: 12px !important;
}

/* Unsubscribe button — "ghost rojo" (outlined destructive).
   The generic .pricing-v2 .pricing_card .btn rule above forces every CTA
   to a solid navy fill, which made the Unsubscribe button (rendered as
   button.btn.btn-danger in plans.blade.php) visually indistinguishable
   from the Subscribe CTA. We bump specificity with .btn-danger to win
   over the navy/purple !important fills, and switch to a white background
   with a red border + red text so the destructive action reads clearly
   without shouting like a solid red filled button. */
.pricing-v2 .pricing_card button.btn.btn-danger,
.pricing-v2 .pricing_card.is-featured button.btn.btn-danger {
    background: #ffffff !important;
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}
.pricing-v2 .pricing_card button.btn.btn-danger:hover,
.pricing-v2 .pricing_card.is-featured button.btn.btn-danger:hover {
    background: #fff5f5 !important;
    border-color: #b02a37 !important;
    color: #b02a37 !important;
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.20);
}
.pricing-v2 .pricing_card button.btn.btn-danger:focus-visible {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

.pricing-v2__pane { display: none; }
.pricing-v2__pane.is-active { display: block; }

/* ============================================================
   OVERVIEW (Info section) — creator-authored free HTML
   ============================================================
   Wrapper applies sensible typography defaults to whatever
   markup an API creator pasted in (paragraphs, headings,
   lists, blockquotes, code, images, iframes). Anchored under
   .api-overview__body so other free-HTML pages stay unaffected. */

.api-overview__body {
    color: #1f2937;
    font-size: 16px;
    line-height: 1.7;
    word-break: break-word;
}
.api-overview__body > *:first-child { margin-top: 0; }
.api-overview__body > *:last-child  { margin-bottom: 0; }

.api-overview__body h1,
.api-overview__body h2,
.api-overview__body h3,
.api-overview__body h4,
.api-overview__body h5,
.api-overview__body h6 {
    color: #0f1226;
    font-weight: 700;
    line-height: 1.25;
    margin: 1.6em 0 0.5em;
    letter-spacing: -0.01em;
}
.api-overview__body h1 { font-size: 30px; }
.api-overview__body h2 { font-size: 26px; }
.api-overview__body h3 { font-size: 22px; }
.api-overview__body h4 { font-size: 18px; }
.api-overview__body h5 { font-size: 16px; }
.api-overview__body h6 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }

.api-overview__body p {
    margin: 0 0 14px;
    color: #1f2937;
}
.api-overview__body strong, .api-overview__body b { color: #0f1226; font-weight: 700; }
.api-overview__body em, .api-overview__body i { color: inherit; }

.api-overview__body a {
    color: #6E56F8;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.api-overview__body a:hover { color: #4f3fd1; text-decoration-thickness: 2px; }

.api-overview__body ul,
.api-overview__body ol {
    margin: 0 0 16px;
    padding-left: 1.4em;
}
.api-overview__body ul { list-style: disc; }
.api-overview__body ol { list-style: decimal; }
.api-overview__body li { margin: 6px 0; }
.api-overview__body li > ul,
.api-overview__body li > ol { margin-top: 6px; margin-bottom: 6px; }

.api-overview__body blockquote {
    margin: 16px 0;
    padding: 12px 18px;
    border-left: 4px solid #6E56F8;
    background: #f5f3ff;
    border-radius: 0 10px 10px 0;
    color: #1f2937;
    font-style: normal;
}
.api-overview__body blockquote p:last-child { margin-bottom: 0; }

.api-overview__body code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: #f3f0ff;
    color: #4f3fd1;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(110, 86, 248, 0.12);
}
.api-overview__body pre {
    background: #0f1226;
    color: #e5e7eb;
    padding: 16px 18px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 16px 0;
    font-size: 14px;
    line-height: 1.55;
}
.api-overview__body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: inherit;
}

.api-overview__body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 16px 0;
    display: block;
    box-shadow: 0 1px 2px rgba(20, 17, 60, 0.04), 0 8px 24px rgba(20, 17, 60, 0.06);
}
.api-overview__body figure { margin: 16px 0; }
.api-overview__body figcaption {
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    margin-top: 8px;
}

.api-overview__body iframe,
.api-overview__body video,
.api-overview__body embed,
.api-overview__body object {
    max-width: 100%;
    width: 100%;
    border-radius: 12px;
    margin: 16px 0;
    border: 0;
    aspect-ratio: 16 / 9;
    display: block;
}

.api-overview__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14.5px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(20, 17, 60, 0.08);
}
.api-overview__body table th,
.api-overview__body table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(20, 17, 60, 0.06);
    text-align: left;
    vertical-align: top;
}
.api-overview__body table th {
    background: #f5f3ff;
    color: #0f1226;
    font-weight: 700;
}
.api-overview__body table tr:last-child td { border-bottom: 0; }

.api-overview__body hr {
    border: 0;
    height: 1px;
    background: rgba(20, 17, 60, 0.08);
    margin: 24px 0;
}

/* Neutralize legacy inline styles the WYSIWYG might paste in. */
.api-overview__body [style*="font-family"] { font-family: inherit !important; }
.api-overview__body [style*="background-color: rgb(255, 255, 255)"],
.api-overview__body [style*="background:#fff"] { background: transparent !important; }
.api-overview__body [style*="color: rgb(0, 0, 0)"] { color: inherit !important; }

@media (max-width: 768px) {
    .api-overview__body { font-size: 15px; }
    .api-overview__body h1 { font-size: 24px; }
    .api-overview__body h2 { font-size: 22px; }
    .api-overview__body h3 { font-size: 19px; }
    .api-overview__body pre { font-size: 13px; }
}

/* ------------------------------------------------------------
   OVERVIEW frame card
   ------------------------------------------------------------
   The creator-authored HTML can mix random fonts, sizes,
   images and embeds. We already normalize typography on
   .api-overview__body — here we *visually encapsulate* the
   whole block in a soft card so it stops "floating" on the
   page and stops feeling jarring against the surrounding UI.

   Specificity note: the global rule at #Info.tabcontent /
   #Documentation.tabcontent (above) strips border, padding,
   bg and radius from ALL tab panels with !important. We
   intentionally re-introduce the card *only* for #Info
   (Overview) by matching the same specificity + !important.
   The other tabs (Docs, Pricing, FAQs, Support) keep their
   borderless layout. */
#Info.tabcontent.api-overview {
    background: #ffffff !important;
    border: 1px solid rgba(20, 17, 60, 0.08) !important;
    border-radius: 16px !important;
    padding: 28px 32px !important;
    margin: 4px 0 28px !important;
    box-shadow:
        0 1px 2px rgba(20, 17, 60, 0.03),
        0 8px 24px rgba(20, 17, 60, 0.04) !important;
}

@media (max-width: 768px) {
    #Info.tabcontent.api-overview {
        padding: 20px 18px !important;
        border-radius: 14px !important;
        margin: 4px 0 20px !important;
    }
}

@media (max-width: 991px) {
    .pricing-v2 .pricing_card.is-featured .card { transform: none; }
    .pricing-v2__title { font-size: 32px; }
}

/* ============================================================
   ASK AI — Floating Action Button + Drawer (chat-style)
   ============================================================ */

/* FAB was removed — Ask AI is now a pill in the sticky nav and a CTA in
   the hero. Both call openAskAIDrawer(). Drawer + backdrop stay below. */

/* --- Backdrop ------------------------------------------------- */
/* Sutil a propósito: tinte muy bajo + blur ligero. La idea es NO
   competir visualmente con el widget de HubSpot (esquina inferior
   derecha) — el modal aparece centrado y el backdrop solo da foco. */
.ask-ai-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 38, 0.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 1090;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.ask-ai-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* --- Modal centrado ------------------------------------------- */
/* Antes era un drawer lateral (entraba desde la derecha, full-height)
   y se confundía con el chat de HubSpot. Ahora es un modal centrado
   con fade + scale: rompe el patrón de "panel pegado a un borde". */
.ask-ai-drawer {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 640px;
    max-width: calc(100vw - 32px);
    max-height: min(88vh, 820px);
    background: #ffffff;
    border-radius: 18px;
    box-shadow:
        0 24px 60px rgba(15, 18, 38, 0.22),
        0 4px 12px rgba(15, 18, 38, 0.08);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* recorta head/foot al border-radius */
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
    transition:
        opacity 0.22s ease,
        transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}
.ask-ai-drawer.is-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.ask-ai-drawer__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(20, 17, 60, 0.06);
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 80%);
}
.ask-ai-drawer__head-icon {
    /* Now hosts the Zyla wordmark (~2:1 aspect) instead of a square robot
       icon — gradient pill removed because the black-on-light logo needs a
       clean transparent background to render correctly. */
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ask-ai-drawer__head-logo-img {
    height: 28px;
    width: auto;
    display: block;
}
.ask-ai-drawer__head-text { flex: 1; min-width: 0; }
.ask-ai-drawer__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0f1226;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Robot capsule next to the title. Mirrors .ask-ai-msg__avatar so the
   header and the AI bubbles share one visual cue. */
.ask-ai-drawer__title-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6E56F8, #4f3fd1);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ask-ai-drawer__badge {
    background: linear-gradient(135deg, #6E56F8, #4f3fd1);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 3px 7px;
    border-radius: 999px;
    line-height: 1;
}
.ask-ai-drawer__subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ask-ai-drawer__close {
    background: transparent;
    border: 0;
    color: #6b7280;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
    align-self: flex-start;
}
.ask-ai-drawer__close:hover { background: rgba(20, 17, 60, 0.06); color: #0f1226; }

/* --- Thread / body ------------------------------------------- */
.ask-ai-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 18px 8px;
    background: #fafaff;
    scroll-behavior: smooth;
}

.ask-ai-msg {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
    max-width: 100%;
}
.ask-ai-msg--ai { justify-content: flex-start; }
.ask-ai-msg--user {
    justify-content: flex-end;
}
.ask-ai-msg__avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6E56F8, #4f3fd1);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.ask-ai-msg__body {
    background: #ffffff;
    border: 1px solid rgba(20, 17, 60, 0.06);
    padding: 10px 14px;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    color: #0f1226;
    font-size: 14.5px;
    line-height: 1.5;
    max-width: 84%;
    box-shadow: 0 1px 2px rgba(20, 17, 60, 0.03);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.ask-ai-msg--user .ask-ai-msg__body {
    background: #6E56F8;
    color: #ffffff;
    border-color: #6E56F8;
    border-radius: 14px;
    border-bottom-right-radius: 4px;
}
.ask-ai-msg.is-error .ask-ai-msg__body {
    background: #fef2f2;
    color: #991b1b;
    border-color: rgba(220, 38, 38, 0.2);
}

.ask-ai-msg__tag {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #ede9fe;
    color: #4f3fd1;
    padding: 2px 6px;
    border-radius: 999px;
    vertical-align: middle;
}

/* ----------------------------------------------------------------
 * AI reply markdown rendering — fenced code blocks + inline code.
 * Convention follows ChatGPT / GitHub / Slack: dark code surface
 * inside the lighter bubble so code is easy to spot and read.
 * ---------------------------------------------------------------- */
/* Code block — unified with the item page's `.endpoint-response-light`
   look so the chat doesn't switch theme mid-page. Light surface, dark
   text, soft border, fixed copy + lang chips in the top-right corner. */
.ask-ai-msg__body pre.ask-ai-codeblock {
    position: relative;
    margin: 10px 0 6px;
    padding: 36px 14px 14px;
    background: #ffffff;
    color: #1f273c;
    border: 1px solid rgba(20, 17, 60, 0.08);
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.6;
    overflow-x: auto;
    max-width: 100%;
    box-shadow: 0 1px 2px rgba(20, 17, 60, 0.03);
}
.ask-ai-msg__body pre.ask-ai-codeblock code {
    font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
                 'Liberation Mono', 'Courier New', monospace;
    background: transparent;
    color: inherit;
    padding: 0;
    white-space: pre;
    display: block;
    border: 0;
}
.ask-ai-msg__body pre.ask-ai-codeblock .ask-ai-codeblock__lang {
    position: absolute;
    top: 8px;
    left: 10px;
    font-family: 'SFMono-Regular', 'Menlo', 'Monaco', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: #6757d1;
    background: rgba(110, 86, 248, 0.10);
    border: 1px solid rgba(110, 86, 248, 0.20);
    padding: 2px 8px;
    border-radius: 6px;
    user-select: none;
}
/* Copy button — mirrors the .spec-copy__btn vocabulary used elsewhere
   on the item page, but scoped to chat code blocks. Top-right corner,
   ghost-button until hover. */
.ask-ai-msg__body pre.ask-ai-codeblock .ask-ai-codeblock__copy {
    position: absolute;
    top: 6px;
    right: 6px;
    appearance: none;
    border: 1px solid rgba(20, 17, 60, 0.10);
    background: rgba(255, 255, 255, 0.85);
    color: #4b5163;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease,
                border-color 0.15s ease, transform 0.15s ease;
}
.ask-ai-msg__body pre.ask-ai-codeblock .ask-ai-codeblock__copy:hover {
    color: #0f1226;
    background: #ffffff;
    border-color: rgba(20, 17, 60, 0.20);
    transform: translateY(-1px);
}
.ask-ai-msg__body pre.ask-ai-codeblock .ask-ai-codeblock__copy:focus-visible {
    outline: 2px solid #6E56F8;
    outline-offset: 2px;
}
.ask-ai-msg__body pre.ask-ai-codeblock .ask-ai-codeblock__copy.is-copied {
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.30);
    background: rgba(22, 163, 74, 0.06);
}
.ask-ai-msg__body pre.ask-ai-codeblock .ask-ai-codeblock__copy i {
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
}

/* Markdown headers inside an AI bubble — kept smaller than the drawer
   title so they read as section labels, not page titles. The accent
   border-bottom echoes the purple in the rest of the drawer chrome. */
.ask-ai-msg__body .ask-ai-h {
    margin: 14px 0 6px;
    color: #1f273c;
    font-weight: 700;
    line-height: 1.3;
}
.ask-ai-msg__body .ask-ai-h:first-child { margin-top: 2px; }
.ask-ai-msg__body .ask-ai-h--1 {
    font-size: 15px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(110, 86, 248, 0.18);
}
.ask-ai-msg__body .ask-ai-h--2 { font-size: 14px; }
.ask-ai-msg__body .ask-ai-h--3 {
    font-size: 13px;
    color: #4f3fd1;
    text-transform: none;
    letter-spacing: 0;
}

/* Inline `code` — soft purple chip, monospace, smaller. */
.ask-ai-msg__body code.ask-ai-inline-code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
    background: rgba(110, 86, 248, 0.10);
    color: #4f3fd1;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 0.92em;
    border: 1px solid rgba(110, 86, 248, 0.15);
}

/* Inside the purple user bubble, soften the inline-code chip so it
   stays legible against the purple background. */
.ask-ai-msg--user .ask-ai-msg__body code.ask-ai-inline-code {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Typing dots for pending state */
.ask-ai-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 2px;
    background: #6E56F8;
    border-radius: 999px;
    animation: ask-ai-typing 1.2s infinite ease-in-out both;
}
.ask-ai-dot:nth-child(2) { animation-delay: 0.15s; }
.ask-ai-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes ask-ai-typing {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
    40%           { transform: scale(1.0); opacity: 1;   }
}

/* Welcome bubble (special — gets hidden after first user msg) */
.ask-ai-welcome.is-hidden { display: none; }

.ask-ai-starters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.ask-ai-starter {
    appearance: none;
    border: 1px solid rgba(110, 86, 248, 0.25);
    background: rgba(110, 86, 248, 0.06);
    color: #4f3fd1;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.ask-ai-starter:hover {
    background: #6E56F8;
    color: #ffffff;
    transform: translateY(-1px);
}

/* --- Subtle suggestion strip (above input, post-first-message) ------ */
/* Hidden by default — revealed by JS once the welcome bubble is gone.   */
/* Single-row horizontal scroll keeps the footer compact even with 8     */
/* chips, while sitting below the chat thread so it never competes with  */
/* the AI's response for visual hierarchy.                               */
.ask-ai-suggest {
    display: none;
    margin: 0 -2px 8px;
    padding: 0 2px;
}
.ask-ai-suggest.is-visible {
    display: block;
    animation: askAiSuggestFadeIn 220ms ease both;
}
.ask-ai-suggest__scroller {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.ask-ai-suggest__scroller::-webkit-scrollbar { display: none; }

.ask-ai-suggest__chip {
    appearance: none;
    flex: 0 0 auto;
    border: 1px solid rgba(110, 86, 248, 0.18);
    background: transparent;
    color: #6757d1;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ask-ai-suggest__chip:hover {
    background: rgba(110, 86, 248, 0.08);
    color: #4f3fd1;
    border-color: rgba(110, 86, 248, 0.35);
}
.ask-ai-suggest__chip:focus-visible {
    outline: 2px solid #6E56F8;
    outline-offset: 2px;
}

@keyframes askAiSuggestFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Footer / input area ------------------------------------- */
.ask-ai-drawer__foot {
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(20, 17, 60, 0.06);
    background: #ffffff;
}
.ask-ai-form {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f3ff;
    border: 1px solid rgba(110, 86, 248, 0.18);
    border-radius: 14px;
    padding: 6px 6px 6px 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ask-ai-form:focus-within {
    border-color: #6E56F8;
    box-shadow: 0 0 0 3px rgba(110, 86, 248, 0.15);
}
.ask-ai-form.is-loading { opacity: 0.85; }

.ask-ai-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ask-ai-input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 14.5px;
    color: #0f1226;
    padding: 6px 0;
    min-width: 0;
}
.ask-ai-input::placeholder { color: #9ca3af; }
.ask-ai-input.is-shake { animation: ask-ai-shake 0.4s ease; }
@keyframes ask-ai-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.ask-ai-send {
    appearance: none;
    border: 0;
    background: linear-gradient(135deg, #6E56F8, #4f3fd1);
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 12px rgba(110, 86, 248, 0.35);
}
.ask-ai-send:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(110, 86, 248, 0.45); }
.ask-ai-send:disabled,
.ask-ai-form.is-loading .ask-ai-send { opacity: 0.6; cursor: not-allowed; transform: none; }

.ask-ai-drawer__meta {
    margin-top: 8px;
    text-align: center;
    font-size: 11.5px;
    color: #6b7280;
}
.ask-ai-drawer__meta-ai {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #4f3fd1;
    font-weight: 600;
}
.ask-ai-drawer__meta-sep { margin: 0 6px; opacity: 0.6; }
.ask-ai-drawer__meta-link {
    color: #6b7280;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.ask-ai-drawer__meta-link:hover { color: #0f1226; }

@media (max-width: 768px) {
    /* En mobile el modal usa casi todo el ancho con un pequeño margen
       lateral. Mantengo el centrado para no chocar con el FAB de HubSpot. */
    .ask-ai-drawer {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: 86vh;
        border-radius: 16px;
    }
    .ask-ai-drawer__head { padding: 14px 14px 12px; }
    .ask-ai-drawer__title { font-size: 17px; }
}

/* ==========================================================================
   FAQ accordion v2 — modern card-style rows, brand-purple open state
   --------------------------------------------------------------------------
   Scoped to #FAQs on the marketplace item page so it overrides the legacy
   Bootstrap .list-group-item / .card.card-body look (a border that visually
   "closed" the answer) without touching markup. Matches the visual language
   of .endpoint-card-v2 above for consistency.
   ========================================================================== */

#FAQs.api-section {
    padding-left: 0;
    padding-right: 0;
}

#FAQs h2 {
    padding-left: 4px !important;
    color: #0f1226;
    letter-spacing: -0.01em;
}

/* Each FAQ row — rounded card, soft border, no shared dividers */
#FAQs .list-group-item.collapse-arrow {
    position: relative;
    display: block;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 0;
    margin: 0 0 10px 0;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#FAQs .list-group-item.collapse-arrow:hover {
    border-color: #c7bef9;
    box-shadow: 0 6px 18px -12px rgba(105, 59, 245, 0.22);
}

/* Question trigger */
#FAQs .list-group-item.collapse-arrow > a {
    display: block;
    padding: 18px 22px;
    text-decoration: none !important;
    color: inherit;
    border-radius: 14px;
}

#FAQs .list-group-item.collapse-arrow > a:focus-visible {
    outline: 2px solid var(--zyla-brand, #693bf5);
    outline-offset: -2px;
}

#FAQs .list-group-item.collapse-arrow > a h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #1f2937;
    align-items: center;
    transition: color 0.2s ease;
}

#FAQs .list-group-item.collapse-arrow > a .icon {
    color: #9ca3af;
    font-size: 13px;
    align-self: center;
    transition: color 0.25s ease, transform 0.25s ease;
}

/* Open state — purple ring + soft tinted background.
   :has() handles modern browsers; aria-expanded fallback covers the trigger. */
#FAQs .list-group-item.collapse-arrow:has(> a[aria-expanded="true"]),
#FAQs .list-group-item.collapse-arrow:has(.collapse.show),
#FAQs .list-group-item.collapse-arrow:has(.collapsing) {
    border-color: #818cf8;
    box-shadow: 0 0 0 1px #818cf8, 0 12px 30px -18px rgba(105, 59, 245, 0.28);
    background: linear-gradient(180deg, #fbfaff 0%, #ffffff 60%);
}

#FAQs .list-group-item.collapse-arrow:has(> a[aria-expanded="true"]) > a h4,
#FAQs .list-group-item.collapse-arrow:has(.collapse.show) > a h4 {
    color: var(--zyla-brand, #693bf5);
}

#FAQs .list-group-item.collapse-arrow:has(> a[aria-expanded="true"]) > a .icon,
#FAQs .list-group-item.collapse-arrow:has(.collapse.show) > a .icon {
    color: var(--zyla-brand, #693bf5);
}

/* Answer body — strip Bootstrap card chrome so the answer flows from the
   question instead of being boxed in. This is the main UX fix. */
#FAQs .list-group-item.collapse-arrow .card.card-body {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 22px 20px 22px !important;
    border-radius: 0 !important;
    color: #1f2937;
    line-height: 1.65;
    font-size: 15px;
}

#FAQs .list-group-item.collapse-arrow .card.card-body p {
    margin-bottom: 10px;
}

#FAQs .list-group-item.collapse-arrow .card.card-body p:last-child {
    margin-bottom: 0;
}

#FAQs .list-group-item.collapse-arrow .card.card-body a {
    color: var(--zyla-brand, #693bf5);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#FAQs .list-group-item.collapse-arrow .card.card-body a:hover {
    color: var(--zyla-brand-2, #5b34f0);
}

@media (max-width: 576px) {
    #FAQs .list-group-item.collapse-arrow > a { padding: 16px 18px; }
    #FAQs .list-group-item.collapse-arrow .card.card-body { padding: 0 18px 16px 18px !important; }
    #FAQs .list-group-item.collapse-arrow > a h4 { font-size: 15px; }
}

/* ============================================================
   Enterprise plan – trigger sutil + acordeón + card estilo plan
   ============================================================ */
/* --------- Enterprise banner CTA (third-tier feel) --------- */
.enterprise-banner-wrap {
    max-width: 720px;
    margin: 0 auto 1.25rem;
}
.enterprise-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 18px 24px;
    background: linear-gradient(135deg, #f8f7ff 0%, #ffffff 100%);
    border: 1px solid #e4e0ff;
    border-left: 4px solid #6c5ce7;
    border-radius: 12px;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    cursor: pointer;
}
.enterprise-banner > * {
    /* el click siempre va al <a> contenedor */
    pointer-events: none;
}
.enterprise-banner:hover,
.enterprise-banner:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.18);
    border-left-color: #5849c2;
    text-decoration: none;
}
.enterprise-banner__icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}
.enterprise-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.enterprise-banner__title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #2d2f3a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
.enterprise-banner__subtitle {
    font-weight: 400;
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.3;
}
.enterprise-banner__chevron {
    font-size: 0.9rem;
    color: #6c5ce7;
    transition: transform .25s ease;
    flex-shrink: 0;
}
.enterprise-banner:not(.collapsed) .enterprise-banner__chevron,
.enterprise-banner[aria-expanded="true"] .enterprise-banner__chevron {
    transform: rotate(180deg);
}
@media (max-width: 576px) {
    .enterprise-banner { padding: 14px 16px; gap: 0.75rem; }
    .enterprise-banner__icon { font-size: 1.4rem; }
    .enterprise-banner__title { font-size: 0.85rem; }
    .enterprise-banner__subtitle { font-size: 0.78rem; }
}

/* --------- card estilo "plan" (col-lg-4, fondo blanco) --------- */
.enterprise-card-v2 {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
.enterprise-card-v2__title {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
}
.enterprise-card-v2__hero {
    color: #2d2f3a;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.01em;
    margin: 0.25rem 0 0.5rem;
}
.enterprise-card-v2__features {
    margin: 0 0 0.5rem;
    padding: 0;
}
.enterprise-card-v2__features li {
    color: #3a3d49;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0.3rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}
.enterprise-card-v2__features li i.fas.fa-check {
    color: #6c5ce7;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.enterprise-card-v2__cta-btn {
    width: 100% !important;
    padding: 12px 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.enterprise-card-v2__cta-btn .fa-arrow-right {
    font-size: 0.75rem;
    transition: transform .2s ease;
}
.enterprise-card-v2__cta-btn:hover .fa-arrow-right {
    transform: translateX(3px);
}
.enterprise-card-v2__min-contract {
    color: #8a8f99;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    font-style: italic;
}

/* --------- trusted by (afuera del card) --------- */
.enterprise-trusted {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.enterprise-trusted__label {
    color: #adb5bd;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    font-weight: 600;
}
.enterprise-trusted__brands {
    gap: 56px;
}
.enterprise-trusted__brand-logo {
    max-height: 42px;
    width: auto;
    opacity: 0.7;
    filter: grayscale(100%);
    transition: opacity .2s ease, filter .2s ease;
}
.enterprise-trusted__brand-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
}

@media (max-width: 768px) {
    .enterprise-trusted__brands { gap: 32px; }
    .enterprise-trusted__brand-logo { max-height: 30px; }
}

/* ────────────────────────────────────────────────────────────────────────
   Ask-AI FAQ entry-point CTA
   Rendered under each FAQ section title. Matches the h2 left-padding
   (20px) so it visually aligns with the FAQ accordion below it.
   ──────────────────────────────────────────────────────────────────────── */
.ask-ai-faq-cta-wrap {
    padding-left: 20px;
    margin: -8px 0 18px;
}
.ask-ai-faq-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(110, 86, 248, 0.25);
    border-radius: 999px;
    background: linear-gradient(135deg, #f3f0ff 0%, #ffffff 100%);
    color: #2a1f7a;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 1px 2px rgba(20, 17, 60, 0.04);
}
.ask-ai-faq-cta:hover {
    transform: translateY(-1px);
    border-color: rgba(110, 86, 248, 0.55);
    box-shadow: 0 8px 20px rgba(110, 86, 248, 0.18);
}
.ask-ai-faq-cta:focus-visible {
    outline: 2px solid #6E56F8;
    outline-offset: 2px;
}
.ask-ai-faq-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6E56F8, #4f3fd1);
    color: #ffffff;
    flex-shrink: 0;
}
.ask-ai-faq-cta__arrow {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.18s ease;
}
.ask-ai-faq-cta:hover .ask-ai-faq-cta__arrow { transform: translateX(3px); }

@media (max-width: 576px) {
    .ask-ai-faq-cta-wrap { padding-left: 12px; }
    .ask-ai-faq-cta { font-size: 13px; padding: 9px 14px; }
}

/* ============================================================
   SPEC v2 — Reusable card + table chrome for API documentation
   Used by AUTH (API Access Key & Authentication) and PARAMS
   (Endpoint parameters) blocks. Matches the pricing-v2 visual
   language: bold headings, #0f1226 / #6b7280 palette,
   soft-bordered cards, code pills, badges.
   ============================================================ */

/* --- Reusable card chrome ----------------------------------- */
.spec-card {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 18, 38, 0.03);
}
.spec-card + .spec-card { margin-top: 16px; }

.spec-card__head {
    padding: 14px 20px;
    border-bottom: 1px solid #eef0f3;
    background: #fafbfc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.spec-card__title {
    font-size: 14px;
    font-weight: 700;
    color: #0f1226;
    letter-spacing: -0.005em;
}
.spec-card__meta {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 14px;
}
.spec-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #eef0f3;
}
.spec-table tbody td {
    padding: 16px 20px;
    color: #1f2330;
    line-height: 1.6;
    vertical-align: top;
    border-bottom: 1px solid #f1f3f5;
}
.spec-table tbody tr:last-child td { border-bottom: 0; }

/* First column (param name) — keeps the <code> pill tight */
.spec-table tbody td:first-child { white-space: nowrap; width: 1%; }

/* Code pills — used for header/param names and inline values. */
.spec-code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    background: #f3f4f6;
    color: #0f1226;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
    word-break: normal;
}
.spec-code--name {
    color: #be185d;
    background: #fdf2f8;
    border-color: #fbcfe8;
    font-weight: 600;
}
.spec-code--value { margin: 0 2px; }

/* Required / Optional badges — pill, compact, uppercase */
.spec-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 999px;
    margin-right: 8px;
    line-height: 1.5;
    vertical-align: baseline;
}
.spec-badge--required {
    color: #be123c;
    background: #fff1f3;
    border: 1px solid #fecdd3;
}
.spec-badge--optional {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.spec-desc { color: #1f2330; }

/* Inline copy pill — wraps a <code> value + copy button so the
   user can grab "Bearer access_key" (or any code value) with
   one click. Uses the same vanilla pattern as apiHeroV2CopyMcpUrl. */
.spec-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0 2px 0 8px;
    margin: 0 2px;
    vertical-align: middle;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.spec-copy:hover { background: #eef0f3; border-color: #d1d5db; }
.spec-copy > .spec-code {
    background: transparent;
    border: 0;
    padding: 3px 0;
}
.spec-copy__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    transition: color 0.15s ease, background 0.15s ease;
}
.spec-copy__btn:hover { color: #0f1226; background: rgba(15, 18, 38, 0.06); }
.spec-copy__btn:focus-visible { outline: 2px solid #be185d; outline-offset: 1px; }
.spec-copy__btn i { font-size: 12px; line-height: 1; pointer-events: none; }
.spec-copy__btn.is-copied { color: #16a34a; }

/* Mobile: collapse spec tables into stacked rows (no horizontal
   scroll). data-label on each <td> stands in for the hidden <th>. */
@media (max-width: 640px) {
    .spec-card__head { padding: 12px 16px; }
    .spec-table thead { display: none; }
    .spec-table tbody td { display: block; padding: 12px 16px; border-bottom: 0; white-space: normal; width: auto; }
    .spec-table tbody td:first-child { padding-bottom: 4px; }
    .spec-table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 6px;
    }
    .spec-table tbody tr { border-bottom: 1px solid #f1f3f5; padding: 6px 0; }
    .spec-table tbody tr:last-child { border-bottom: 0; }
}

/* --- AUTH v2 wrapper (outer title + description) ------------ */
.auth-v2 {
    margin-top: 64px;
    margin-bottom: 48px;
    padding-top: 8px;
}
.auth-v2__head { margin-bottom: 20px; }
.auth-v2__title {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
    color: #0f1226;
    margin: 0 0 10px;
    letter-spacing: -0.015em;
}
.auth-v2__sub {
    color: #6b7280;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 760px;
}
.auth-v2__api-name {
    color: #0f1226;
    font-weight: 600;
    margin: 0 4px;
}
@media (max-width: 640px) {
    .auth-v2 { margin-top: 40px; margin-bottom: 32px; }
    .auth-v2__title { font-size: 24px; }
}

/* --- PARAMS v2 wrapper (per-endpoint parameter table) ------- */
.params-v2 {
    margin-top: 8px;
    margin-bottom: 8px;
}
.params-v2__title {
    font-size: 14px;
    font-weight: 700;
    color: #0f1226;
    margin: 0 0 12px;
    letter-spacing: -0.005em;
}
.params-v2__title-api {
    color: #6b7280;
    font-weight: 500;
}

/* =============================================================
   Subscription sub-card (hero v2, right column when subscribed)
   ----------------------------------------------------------------
   Replaces the legacy hidden sidebar (col-xl-3 display:none) when
   the user is subscribed. Mirrors .api-hero-v2__pricing-card
   shell (rounded white card, soft shadow) but renders plan name +
   horizontal usage bar + actions (Upgrade / Pay Additional /
   View calls / Billing / Unsubscribe).
   ============================================================= */
.api-hero-v2__sub-card {
    background: #ffffff;
    border: 1px solid #ececf4;
    border-radius: 20px;
    padding: 22px 22px 18px;
    box-shadow: 0 12px 32px -16px rgba(91, 52, 240, 0.14);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

.api-hero-v2__sub-card-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f1f8;
}

.api-hero-v2__sub-card-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #6b7280;
    text-transform: uppercase;
}

.api-hero-v2__sub-card-plan {
    font-size: 22px;
    font-weight: 800;
    color: #0f1226;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.api-hero-v2__sub-card-trial {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}
.api-hero-v2__sub-card-trial strong {
    color: #0f1226;
    font-weight: 700;
}

/* Horizontal usage indicator. Color tones (.is-low / .is-mid /
   .is-high) match the legacy donut's intent: green when usage is
   safe, amber when ≥70%, red when ≥90%. */
.api-hero-v2__sub-card-usage {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.api-hero-v2__sub-card-usage-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.api-hero-v2__sub-card-usage-nums {
    font-size: 18px;
    font-weight: 800;
    color: #0f1226;
    letter-spacing: -0.01em;
}

.api-hero-v2__sub-card-usage-sep {
    color: #c4c4d4;
    margin: 0 2px;
    font-weight: 600;
}

.api-hero-v2__sub-card-usage-pct {
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
}

.api-hero-v2__sub-card-bar {
    width: 100%;
    height: 8px;
    background: #f1f1f8;
    border-radius: 999px;
    overflow: hidden;
}

.api-hero-v2__sub-card-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.api-hero-v2__sub-card-bar-fill.is-low {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}
.api-hero-v2__sub-card-bar-fill.is-mid {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}
.api-hero-v2__sub-card-bar-fill.is-high {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.api-hero-v2__sub-card-usage-foot {
    font-size: 12px;
    color: #6b7280;
}
.api-hero-v2__sub-card-usage-foot .js-api-remaining {
    color: #0f1226;
    font-weight: 700;
}

/* Soft-limit notice — red variant when the user has spilled into
   overage charges, info variant when soft-limit is enabled but not
   yet billed. Matches the legacy paragraphs in tone. */
.api-hero-v2__sub-card-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
}
.api-hero-v2__sub-card-alert--info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

/* Primary action — Upgrade plan. Matches the gradient used by the
   hero "Subscribe" CTA so the visual rhythm stays consistent. */
.api-hero-v2__sub-card-cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #5b34f0 0%, #7051fb 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    box-shadow: 0 6px 16px -6px rgba(91, 52, 240, 0.55);
}
.api-hero-v2__sub-card-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(91, 52, 240, 0.6);
}
.api-hero-v2__sub-card-cta:active { transform: translateY(0); }

/* Stacked variant — used when the CTA needs a primary label (e.g.
   "Upgrade to Basic") + a secondary line ("10,000 calls · $24.99/mo").
   Keeps the gradient/box-shadow from the base style but switches the
   inner layout from a single inline row to two stacked rows so both
   pieces of info are legible without truncation. Also used by the
   "Contact sales" fallback when no higher tier exists. */
.api-hero-v2__sub-card-cta--stack {
    flex-direction: column;
    gap: 4px;
    padding: 10px 16px 12px;
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
}
.api-hero-v2__sub-card-cta--stack:hover { text-decoration: none; color: #ffffff; }
.api-hero-v2__sub-card-cta--stack:focus { text-decoration: none; color: #ffffff; }
.api-hero-v2__sub-card-cta-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}
.api-hero-v2__sub-card-cta-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.1px;
}

/* Pay Additional & Renew — appears only when the legacy gate fires
   (zylalabs.com email + requests_soft_limit hit). Solid dark like the
   legacy "Renew" button so it reads as a payment action. */
.api-hero-v2__sub-card-renew {
    width: 100%;
    background: #0f1226;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.api-hero-v2__sub-card-renew:hover { background: #1c1f3f; }

/* Secondary links — View API calls, Billing portal. Quiet, inline,
   with small icons. Sit between the primary CTAs and the cancel form
   so the action priority reads top→bottom: Upgrade ▸ links ▸ Cancel. */
.api-hero-v2__sub-card-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid #f1f1f8;
}

.api-hero-v2__sub-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #5b34f0;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.15s ease;
}
.api-hero-v2__sub-card-link:hover {
    color: #4322c4;
    text-decoration: none;
}

/* Unsubscribe — destructive, ghost style by default. Hover reveals
   the red intent without screaming it from the start. */
.api-hero-v2__sub-card-cancel-form {
    margin: 0;
}

.api-hero-v2__sub-card-cancel {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.api-hero-v2__sub-card-cancel:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

@media (max-width: 768px) {
    .api-hero-v2__sub-card { padding: 18px 18px 16px; gap: 12px; }
    .api-hero-v2__sub-card-plan { font-size: 20px; }
    .api-hero-v2__sub-card-usage-nums { font-size: 16px; }
}

/* ============================================================
   ENDPOINT DOC SECTIONS v2 — Consistent vertical rhythm inside
   the expanded endpoint card body. Each logical block (request,
   params, response, snippets) is wrapped in
   `.endpoint-doc-section`, which replaces the old <hr> dividers
   with a clean top-border, a small lavender marker icon, and a
   bold section title. Matches the .spec-card chrome already used
   by the AUTH/PARAMS tables, so the whole documentation reads
   like one design system instead of stacked legacy snippets.
   ============================================================ */

.endpoint-doc-section {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid #eef0f3;
}

/* First section inside the body has no divider — the accordion
   header already provides the visual break. */
.endpoint-card-v2 .card-body > .endpoint-doc-section:first-child,
.endpoint-doc-section.endpoint-doc-section--first {
    padding-top: 0.25rem;
    margin-top: 0;
    border-top: 0;
}

.endpoint-doc-section__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.95rem;
    flex-wrap: wrap;
}

.endpoint-doc-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(110, 86, 248, 0.14), rgba(110, 86, 248, 0.06));
    color: #6E56F8;
    font-size: 13px;
    flex-shrink: 0;
}

.endpoint-doc-section__title {
    font-size: 15px;
    font-weight: 700;
    color: #0f1226;
    letter-spacing: -0.005em;
    line-height: 1.3;
    margin: 0;
    text-transform: none;
}

.endpoint-doc-section__hint {
    margin: 0.25rem 0 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
    flex-basis: 100%;
}

/* Right-aligned action slot inside the section head — pushes the
   Copy button (or any other inline action) to the far end of the
   row, so we don't need a separate toolbar row between the title
   and the code box. Eliminates the dead horizontal space the
   user complained about. */
.endpoint-doc-section__head-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Compact copy button living in the section head — same lavender
   pill family used by other COPY buttons but trimmed for the
   header context (smaller padding, no shadow). */
.endpoint-doc-section__head-copy.btn.btn-primary,
.endpoint-doc-section__head-copy.btn-sm.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #6E56F8 !important;
    background-image: none !important;
    background-color: #6E56F8 !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    min-height: 32px !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 8px rgba(110, 86, 248, 0.22) !important;
    margin: 0 !important;
}
.endpoint-doc-section__head-copy.btn.btn-primary::before,
.endpoint-doc-section__head-copy.btn-sm.btn-primary::before {
    content: none !important;
    display: none !important;
}
.endpoint-doc-section__head-copy.btn.btn-primary:hover,
.endpoint-doc-section__head-copy.btn-sm.btn-primary:hover,
.endpoint-doc-section__head-copy.btn.btn-primary:focus,
.endpoint-doc-section__head-copy.btn-sm.btn-primary:focus {
    background: #5b3cfb !important;
    background-color: #5b3cfb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(110, 86, 248, 0.32) !important;
}

/* Unified response card wrapper — one shared GitHub-dark surface
   (#0d1117) for both the static Example Response and the live AJAX
   Test Response. This matches the request URL bar (.codebox--dark)
   upstream, so the endpoint doc has a single "code surface" palette:
   dark for everything that displays code (URL, example payload,
   live payload), light only for the input parameter form.
   The historical `.endpoint-response-card--dark` modifier is kept as
   a no-op alias for the live AJAX markup, so existing JS that toggles
   it keeps working without edits. */
.endpoint-response-card {
    border: 1px solid #1f2937;
    border-radius: 12px;
    background: #0d1117;
    overflow: auto;
    max-height: 495px;
    box-shadow: 0 1px 2px rgba(15, 18, 38, 0.20);
}
.endpoint-response-card--dark {
    /* alias — retained for compat with markup that still applies it */
    border-color: #1f2937;
    background: #0d1117;
}
.endpoint-response-card__image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Example Response pre — historically called `endpoint-response-light`
   when the Example Response had a white body. It now mirrors
   `endpoint-response-dark` so the static example and the live test
   response are visually identical. The class name is intentionally
   kept to avoid touching every blade reference. */
.pre_http.endpoint-response-light {
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    white-space: pre-wrap;
    word-break: break-word;
    border: 0 !important;
    box-shadow: none !important;
}
.pre_http.endpoint-response-light code,
.pre_http.endpoint-response-light .responseCode {
    background: transparent !important;
    color: #e6edf3 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
}

/* Scrollbar polish — same treatment as `.endpoint-response-dark` so
   the two response surfaces look the same on overflow. */
.pre_http.endpoint-response-light::-webkit-scrollbar { width: 10px; height: 10px; }
.pre_http.endpoint-response-light::-webkit-scrollbar-track { background: #0d1117; }
.pre_http.endpoint-response-light::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 6px;
    border: 2px solid #0d1117;
}
.pre_http.endpoint-response-light::-webkit-scrollbar-thumb:hover { background: #484f58; }

.endpoint-doc-section__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.9rem 0 0.5rem;
}

/* Hide the legacy <h4> heading that ships inside
   codeSnippets/index.blade.php — we render our own consistent
   section header outside the include, so the legacy one would
   double up. */
.endpoint-doc-section--snippets > h4.text-uppercase,
.endpoint-doc-section--snippets .single_wrap > h4.text-uppercase {
    display: none !important;
}

/* Hide the legacy <h4> "Try this endpoint" heading that ships
   above the input fields — the section header replaces it. */
.endpoint-doc-section--params > h4.mb-3 {
    display: none !important;
}

/* Hide the legacy <hr> dividers that used to separate body
   blocks. Doc-section wrappers now own that vertical rhythm. */
.endpoint-card-v2 .card-body > hr,
.endpoint-doc-section + hr,
.endpoint-doc-section hr {
    display: none;
}

/* Input parameter fields — replace the plain Bootstrap form-control
   that was floating in the marketplace endpoint body. Boxed,
   labeled, focus ring in lavender — consistent with the rest of
   the spec-card chrome. */
.endpoint-doc-section--params .form-group {
    margin-bottom: 1rem;
}

.endpoint-doc-section--params .form-group > span,
.endpoint-doc-section--params .form-group > label {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: #be185d;
    background: #fdf2f8;
    border: 1px solid #fbcfe8;
    padding: 3px 10px;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    line-height: 1.45;
}

.endpoint-doc-section--params .form-control,
.endpoint-doc-section--params .form-control-file {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    font-size: 14px;
    color: #0f1226;
    background-color: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}

.endpoint-doc-section--params .form-control:focus {
    border-color: #6E56F8;
    box-shadow: 0 0 0 3px rgba(110, 86, 248, 0.12);
    outline: none;
}

.endpoint-doc-section--params textarea.form-control {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    line-height: 1.55;
    min-height: 120px;
}

/* "No input parameters" empty state — pill-style hint */
.endpoint-doc-section__empty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    border-radius: 10px;
    color: #6b7280;
    font-size: 13.5px;
    margin: 0;
}
.endpoint-doc-section__empty i {
    color: #9ca3af;
    font-size: 13px;
}

/* TEST ENDPOINT primary action — large lavender pill with arrow.
   Sits in its own row at the bottom of the INPUT PARAMETERS
   section so it reads as the natural CTA of that block. */
.endpoint-test-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #6E56F8 !important;
    background-image: none !important;
    background-color: #6E56F8 !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    min-height: 46px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 18px rgba(110, 86, 248, 0.30) !important;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.18s ease !important;
    text-decoration: none !important;
    cursor: pointer;
}

.endpoint-test-btn::before {
    content: none !important;
    display: none !important;
}

.endpoint-test-btn:hover,
.endpoint-test-btn:focus,
.endpoint-test-btn:focus-visible {
    background: #5b3cfb !important;
    background-color: #5b3cfb !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(110, 86, 248, 0.42) !important;
    text-decoration: none !important;
}

.endpoint-test-btn:active {
    background: #5128f0 !important;
    background-color: #5128f0 !important;
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(110, 86, 248, 0.38) !important;
}

.endpoint-test-btn.disabled,
.endpoint-test-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

.endpoint-test-btn__arrow {
    font-size: 14px;
    line-height: 1;
    transition: transform 0.18s ease;
}

.endpoint-test-btn:hover .endpoint-test-btn__arrow,
.endpoint-test-btn:focus .endpoint-test-btn__arrow {
    transform: translateX(4px);
}

/* Guest free-test exhausted state — compact inline card with subtle amber
   accent and a single primary lavender CTA. Uses the brand lavender
   (#6E56F8) so the register button reads as the same action color as
   the rest of the doc (Test Endpoint, Copy Response, Copy Code). The
   previous dark-slate CTA looked muddy on the amber banner. */
.endpoint-test-limit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem 1.1rem;
    padding: 0.85rem 1rem;
    margin-top: 1.25rem;
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 3px solid #f59e0b;
    border-radius: 10px;
}

.endpoint-test-limit__body {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
}

.endpoint-test-limit__icon {
    color: #b45309;
    font-size: 16px;
    line-height: 1.45;
    flex-shrink: 0;
    margin-top: 1px;
}

.endpoint-test-limit__text {
    color: #78350f;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 500;
}

.endpoint-test-limit__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #6E56F8 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 0;
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(110, 86, 248, 0.28);
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.endpoint-test-limit__cta:hover,
.endpoint-test-limit__cta:focus,
.endpoint-test-limit__cta:focus-visible {
    background-color: #5b3cfb !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(110, 86, 248, 0.36);
    text-decoration: none !important;
}

.endpoint-test-limit__cta:active {
    background-color: #4c2ee0 !important;
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(110, 86, 248, 0.28);
}

/* Anchor-specific reinforcement — the CTA renders as <a href="#">, and some
   global anchor resets (theme stylesheets, Bootstrap link colours, visited
   styles) can win over the BEM rule above and turn the pill into a dark
   indigo. Re-state the brand purple on every link state with the higher
   `a.<class>` specificity so the CTA is byte-identical to the canonical
   COPY RESPONSE / lang pill purple (#6E56F8). */
a.endpoint-test-limit__cta,
a.endpoint-test-limit__cta:link,
a.endpoint-test-limit__cta:visited {
    background: #6E56F8 !important;
    background-color: #6E56F8 !important;
    background-image: none !important;
    color: #ffffff !important;
}
a.endpoint-test-limit__cta:hover,
a.endpoint-test-limit__cta:focus,
a.endpoint-test-limit__cta:focus-visible {
    background: #5b3cfb !important;
    background-color: #5b3cfb !important;
    color: #ffffff !important;
}
a.endpoint-test-limit__cta:active {
    background: #4c2ee0 !important;
    background-color: #4c2ee0 !important;
    color: #ffffff !important;
}

.endpoint-test-limit__arrow {
    font-size: 14px;
    line-height: 1;
    transition: transform 0.18s ease;
}

.endpoint-test-limit__cta:hover .endpoint-test-limit__arrow,
.endpoint-test-limit__cta:focus .endpoint-test-limit__arrow {
    transform: translateX(3px);
}

@media (max-width: 560px) {
    .endpoint-test-limit {
        flex-direction: column;
        align-items: stretch;
    }
    .endpoint-test-limit__cta {
        justify-content: center;
    }
}

/* Action bar wrapping the Test Endpoint button. Adds the
   "free calls remaining" hint on the right when present. */
.endpoint-test-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.25rem;
}
.endpoint-test-actions .js-guest-counter {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

/* Decorated empty state for "No response example available"
   so it doesn't look like an unloved leftover block.
   Pure white bg (user request) + dashed border owns the visual,
   so we suppress the outer .endpoint-response-card chrome via
   :has() to avoid the double-border effect. */
.endpoint-response-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    padding: 1.1rem 1.25rem;
    color: #6b7280;
    font-size: 13.5px;
    line-height: 1.55;
}
.endpoint-response-card:has(.endpoint-response-empty) {
    border: 0;
    background: transparent;
    box-shadow: none;
    max-height: none;
    overflow: visible;
}
.endpoint-response-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #9ca3af;
    flex-shrink: 0;
    font-size: 14px;
}
.endpoint-response-empty__text {
    flex: 1;
    min-width: 0;
}
.endpoint-response-empty__title {
    display: block;
    color: #374151;
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 1px;
}
.endpoint-response-empty__sub {
    display: block;
    color: #6b7280;
    font-size: 12.5px;
}

/* Card-body padding refresh — give the expanded body real
   breathing room instead of the old `pb-4 pt-1` jam. The
   wrapper class is added on the outer .card-body so we don't
   collide with other Bootstrap usage. */
.endpoint-card-v2 .card-body {
    padding: 1.25rem 1.4rem 1.75rem !important;
}

/* Legacy .card.codebox wrapper is no longer rendered in
   .endpoint-doc-section--response (the new .endpoint-response-card
   replaces it), but the original AJAX renderer in
   item_js.blade.php still injects raw <pre class="endpoint-
   response-dark"> nodes — those are now hosted directly in
   .endpoint-response-card--dark with no extra Bootstrap chrome. */

/* Inter-card spacing — replaces the legacy <hr> that used to
   sit between endpoint cards in the accordion. The card already
   draws its own border, so we only need breathing room. */
.endpoint-card-row-v2 {
    margin-top: 1.25rem;
}

/* Hide the internal <h4> "API EXAMPLE RESPONSE" inside the AJAX
   response and server-rendered response cards — the external
   .endpoint-doc-section__head provides the unified title now.
   The Copy button toolbar is then right-aligned with !important
   since the legacy row used Bootstrap's justify-content-between. */
.endpoint-doc-section--response .row.mx-1.mb-2 > h4.mb-0,
.endpoint-doc-section--response #endpoint_response_h4 {
    display: none !important;
}
.endpoint-doc-section--response .row.justify-content-between {
    justify-content: flex-end !important;
    margin: 0 0 0.6rem !important;
}

/* Responsive */
@media (max-width: 640px) {
    .endpoint-card-v2 .card-body {
        padding: 1rem 1rem 1.4rem !important;
    }
    .endpoint-card-row-v2 {
        margin-top: 1rem;
    }
    .endpoint-doc-section {
        padding-top: 1.25rem;
        margin-top: 1.25rem;
    }
    .endpoint-doc-section__head {
        gap: 0.55rem;
        margin-bottom: 0.75rem;
    }
    .endpoint-doc-section__icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .endpoint-doc-section__title {
        font-size: 14px;
    }
    .endpoint-doc-section__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .endpoint-test-btn {
        width: 100%;
        padding: 12px 18px !important;
        font-size: 13.5px;
    }
    .endpoint-test-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =========================================================================
   Test-Endpoint status card (success / error / warning / info)
   Replaces the plain Bootstrap alert for AJAX test feedback so the outcome
   reads at a glance: left accent bar, soft tinted background, inline icon.
   ========================================================================= */
.endpoint-status-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    border-left-width: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: opacity 0.18s ease;
}

.endpoint-status-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
}

.endpoint-status-card__text {
    flex: 1 1 auto;
    color: inherit;
}

/* Success — green */
.endpoint-status-card--success {
    background: linear-gradient(180deg, #ecfdf3 0%, #d1fadf 100%);
    border-color: #a6f4c5;
    border-left-color: #12b76a;
    color: #054f31;
}
.endpoint-status-card--success .endpoint-status-card__icon { color: #12b76a; }

/* Error — red */
.endpoint-status-card--error {
    background: linear-gradient(180deg, #fef3f2 0%, #fee4e2 100%);
    border-color: #fecdca;
    border-left-color: #f04438;
    color: #7a271a;
}
.endpoint-status-card--error .endpoint-status-card__icon { color: #f04438; }

/* Warning — amber */
.endpoint-status-card--warning {
    background: linear-gradient(180deg, #fffaeb 0%, #fef0c7 100%);
    border-color: #fedf89;
    border-left-color: #f79009;
    color: #7a2e0e;
}
.endpoint-status-card--warning .endpoint-status-card__icon { color: #f79009; }

/* Info — neutral lavender (matches existing brand accent) */
.endpoint-status-card--info {
    background: linear-gradient(180deg, #f4f3ff 0%, #ebe9fe 100%);
    border-color: #d9d6fe;
    border-left-color: #6938ef;
    color: #2d1c80;
}
.endpoint-status-card--info .endpoint-status-card__icon { color: #6938ef; }

/* =========================================================================
   Dark JSON response box — GitHub-Dark inspired surface so the existing
   syntax-highlight token colors (set in highlightJson) reach proper
   contrast. Applied via .endpoint-response-dark on the <pre>.
   ========================================================================= */
.pre_http.endpoint-response-dark {
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
    border-radius: 0 0 6px 6px;
    padding: 14px 16px !important;
    margin: 0 !important;
    font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid #1f2937;
    border-top: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.pre_http.endpoint-response-dark code.responseCode,
.pre_http.endpoint-response-dark .responseCode {
    color: #e6edf3 !important;
    background: transparent !important;
}

/* Scrollbar polish inside the dark code box */
.pre_http.endpoint-response-dark::-webkit-scrollbar { width: 10px; height: 10px; }
.pre_http.endpoint-response-dark::-webkit-scrollbar-track { background: #0d1117; }
.pre_http.endpoint-response-dark::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 6px;
    border: 2px solid #0d1117;
}
.pre_http.endpoint-response-dark::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* Card-body wrapper that contains a dark response pre: kill default Bootstrap
   padding and white bg so the dark surface reaches the green header cleanly.
   :has() is supported in all modern browsers (2023+). */
.codebox .card-body:has(.endpoint-response-dark) {
    padding: 0 !important;
    background-color: #0d1117 !important;
    border-radius: 0 0 6px 6px;
}

/* ============================================================================
   Code Snippets — searchable language selector + Prism syntax highlighting.
   Markup lives in resources/views/codeSnippets/_lang_selector.blade.php
   (included from index.blade.php and ai_endpoint.blade.php). The selector is
   a <select id="mySelect{id}"> turned into a Selectize dropdown by
   initSnippetLangSelectors() in marketplace/js/item_js.blade.php; changing
   the value calls codeSnippets(id) which toggles the per-language container
   and asks Prism to (re)highlight the active <code> block.
   ============================================================================ */

/* ---- Searchable language selector (Selectize-driven) ----
   Replaces the older horizontal pill-tabs row. The native <select> is hidden
   by Selectize itself; we only need to constrain the wrapper width and brand
   the rendered .selectize-control. Custom render callbacks live in
   item_js.blade.php (renderSnippetLangOption). */

.snippet-lang-wrap {
    max-width: 280px;
    margin: 0 0 18px;
}

@media (max-width: 576px) {
    .snippet-lang-wrap { max-width: 100%; }
}

/* Scope all selectize overrides to our wrapper so we don't touch the
   Pricing currency selector or any other selectize instance on the page. */
.snippet-lang-wrap .selectize-control.single .selectize-input {
    border: 1px solid #E5E5EC;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(20, 20, 35, 0.04);
    padding: 8px 36px 8px 12px;
    min-height: 40px;
    font-size: 13px;
    font-weight: 500;
    color: #1F1F2E;
    transition: border-color .15s ease, box-shadow .15s ease;
    cursor: pointer;
}

.snippet-lang-wrap .selectize-control.single .selectize-input:hover {
    border-color: #C8BBFC;
}

.snippet-lang-wrap .selectize-control.single .selectize-input.focus,
.snippet-lang-wrap .selectize-control.single .selectize-input.input-active {
    border-color: #7F63FC;
    box-shadow: 0 0 0 3px rgba(127, 99, 252, 0.15);
}

.snippet-lang-wrap .selectize-control.single .selectize-input::after {
    /* Replace selectize default caret with a chevron in our brand purple. */
    border: 0 !important;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    right: 14px;
    transform: rotate(45deg);
    border-right: 2px solid #7F63FC !important;
    border-bottom: 2px solid #7F63FC !important;
}

.snippet-lang-wrap .selectize-dropdown {
    border: 1px solid #E5E5EC;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20, 20, 35, 0.10);
    margin-top: 4px;
    overflow: hidden;
    font-size: 13px;
}

.snippet-lang-wrap .selectize-dropdown .option {
    padding: 9px 12px;
    color: #1F1F2E;
}

.snippet-lang-wrap .selectize-dropdown .option.active {
    background: #F5F2FF;
    color: #4732BE;
}

.snippet-lang-wrap .selectize-dropdown .option.selected {
    background: linear-gradient(135deg, rgba(127, 99, 252, 0.10), rgba(100, 71, 240, 0.10));
    color: #4732BE;
    font-weight: 600;
}

/* The custom option/item template rendered by renderSnippetLangOption. */
.snippet-lang-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.snippet-lang-option__icon {
    /* <i> is inline by default, so text-align: center doesn't center the
       font glyph inside our 22px reserved width — the glyph stays glued to
       the left edge. Inline-flex + center justification fixes that and gives
       us a real, visually consistent icon-to-label gap regardless of which
       devicon (narrow Dart diamond vs wide Java cup) is rendered. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    width: 24px;
    height: 20px;
    flex: 0 0 24px;
    color: #6447F0;
}

/* Slightly more padding inside dropdown rows so the icon isn't kissing the
   row edge and the label has room to breathe. */
.snippet-lang-wrap .selectize-dropdown .option { padding: 10px 14px; }

/* Devicon ships its own colours; only fall back to brand purple for the
   FontAwesome glyphs used for cURL / Shell. */
.snippet-lang-option__icon[class*="devicon-"] { color: inherit; }

.snippet-lang-option__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- IDE-style toolbar inside each .codebox ----
   Injected by injectSnippetCardChrome(endpointId). Lives at the top of every
   .codebox and holds: language badge on the left (icon + short name) and the
   relocated Copy button on the right. The toolbar replaces both the legacy
   apple-traffic-light header and the floaty external "COPY CODE" button. */

.endpoint-doc-section--snippets .codebox {
    box-shadow: 0 1px 3px rgba(20, 20, 35, 0.20), 0 1px 2px rgba(20, 20, 35, 0.16) !important;
    border: 1px solid #1f2937 !important;
    background: #0d1117 !important;
}

.snippet-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #161b22;
    border-bottom: 1px solid #1f2937;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    min-height: 38px;
}

/* Sticky lang/copy toolbar for the Example Response and any other
   in-card toolbar. Without this, the toolbar — and the JSON's opening
   `[ {` braces — scroll out of view when the user pages through a long
   response, leaving no structural anchor for where the payload starts.
   Pinning the toolbar to the top of the scroll container keeps the
   GitHub-style header visible (lang pill on the left, COPY RESPONSE on
   the right) and acts as a stand-in for the missing opening braces. */
.endpoint-response-card .snippet-toolbar,
.endpoint-response-card .snippet-toolbar--response {
    position: sticky;
    top: 0;
    z-index: 2;
}

.snippet-toolbar__lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 8px;
    background: #0d1117;
    border: 1px solid #1f2937;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #e6edf3;
}

.snippet-toolbar__icon {
    /* Same centering trick as .snippet-lang-option__icon — see comment there. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    width: 16px;
    height: 14px;
    flex: 0 0 16px;
    color: #a78bfa;
}

.snippet-toolbar__icon[class*="devicon-"] { color: inherit; }

.snippet-toolbar__label { letter-spacing: 0.2px; }

.snippet-toolbar__spacer { flex: 1 1 auto; }

/* Relocated Copy button inherits EVERYTHING from the global lavender-pill
   rule at `button[onclick^="copyCodeSnippet"]` (~L1389) — same rule the
   COPY RESPONSE button uses, so the two are byte-identical visually. We
   only zero out the spacing the template added (`mt-2`, `margin-bottom: 1rem`)
   so it sits flush inside the toolbar bar. Do NOT override background /
   color / box-shadow / padding here — that's exactly what was making the
   two purples look different. */
.snippet-toolbar .snippet-toolbar__copy.btn {
    margin: 0 !important;
}

/* Tighten the card-body now that the toolbar provides the top chrome — and
   give the code itself a touch more breathing room. Dark surface matches
   the Example/Test Response and the request URL bar upstream. */
.endpoint-doc-section--snippets .codebox .card-body {
    padding: 14px 18px 16px !important;
    background: #0d1117 !important;
}

/* Each per-language container had `padding-top: 15px;` inline so the floating
   Copy button had room to breathe. Now the button lives inside the card, so
   we collapse that gap and rely on the section's own spacing. */
.endpoint-doc-section--snippets > .single_wrap > div[id] {
    padding-top: 0 !important;
}

/* Hide the now-unused legacy external Copy button rule (it ONLY applied when
   the button was outside the codebox). The JS relocates the button into the
   toolbar so this selector usually matches nothing — kept here just to make
   sure any stray copies stay hidden if the JS hasn't run yet. */
.endpoint-doc-section--snippets > .single_wrap > div[id] > button.btn.btn-primary:not(.snippet-toolbar__copy) {
    display: none;
}

@media (max-width: 576px) {
    .snippet-toolbar__label { display: none; }
    .snippet-toolbar { padding: 6px 10px; }
    .endpoint-doc-section--snippets .codebox .card-body { padding: 12px 14px !important; }
}

/* Hide the legacy internal <h4> if any older include still emits it — the
   parent .endpoint-doc-section__head now provides the canonical heading. */
.endpoint-doc-section--snippets > .single_wrap > h4 {
    display: none;
}

/* ---- Per-language code card polish (inside the snippets section only) ----
   - Hide the macOS apple traffic-light decoration (the tabs above already
     communicate "this is code", and the dots clashed with the new chrome).
   - Tighter, neutral card with a subtle border instead of the heavy shadow.
   - Monospace, smaller font, comfortable line-height. */

.endpoint-doc-section--snippets .codebox {
    border: 1px solid #1f2937 !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.endpoint-doc-section--snippets .codebox .card-header {
    display: none !important;
}

.endpoint-doc-section--snippets .codebox .card-body {
    padding: 14px 16px !important;
    background: #0d1117 !important;
}

.endpoint-doc-section--snippets .codebox pre {
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #1F1F2E !important;
    background: transparent !important;
    margin: 0 !important;
    text-shadow: none !important;
}

.endpoint-doc-section--snippets .codebox pre code {
    font-family: inherit !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    text-shadow: none !important;
}

/* ---- Prism.js GitHub-Dark theme overrides (scoped to snippets) ----
   The CDN ships `themes/prism.min.css` (light). We strip its bg/padding
   /text-shadow so the highlighted code blends with our dark card chrome,
   then re-tune the token palette to GitHub-Dark so the snippets match
   the other code surfaces (URL bar, Example/Test Response). */

.endpoint-doc-section--snippets .codebox pre[class*="language-"],
.endpoint-doc-section--snippets .codebox code[class*="language-"] {
    background: transparent !important;
    text-shadow: none !important;
    color: #e6edf3 !important;
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.endpoint-doc-section--snippets .codebox pre[class*="language-"] {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Token palette — GitHub-Dark canonical colors. Same hues the JSON
   highlighter emits inline in the Example/Test Response, so all three
   code surfaces feel like one editor. */
.endpoint-doc-section--snippets .codebox .token.comment,
.endpoint-doc-section--snippets .codebox .token.prolog,
.endpoint-doc-section--snippets .codebox .token.doctype,
.endpoint-doc-section--snippets .codebox .token.cdata        { color: #8b949e; font-style: italic; }

.endpoint-doc-section--snippets .codebox .token.punctuation  { color: #c9d1d9; }

.endpoint-doc-section--snippets .codebox .token.property,
.endpoint-doc-section--snippets .codebox .token.tag,
.endpoint-doc-section--snippets .codebox .token.constant,
.endpoint-doc-section--snippets .codebox .token.symbol,
.endpoint-doc-section--snippets .codebox .token.deleted      { color: #7ee787; }

.endpoint-doc-section--snippets .codebox .token.boolean,
.endpoint-doc-section--snippets .codebox .token.number       { color: #79c0ff; }

.endpoint-doc-section--snippets .codebox .token.selector,
.endpoint-doc-section--snippets .codebox .token.attr-name,
.endpoint-doc-section--snippets .codebox .token.string,
.endpoint-doc-section--snippets .codebox .token.char,
.endpoint-doc-section--snippets .codebox .token.builtin,
.endpoint-doc-section--snippets .codebox .token.inserted     { color: #a5d6ff; }

.endpoint-doc-section--snippets .codebox .token.operator,
.endpoint-doc-section--snippets .codebox .token.entity,
.endpoint-doc-section--snippets .codebox .token.url,
.endpoint-doc-section--snippets .codebox .language-css .token.string,
.endpoint-doc-section--snippets .codebox .style .token.string { color: #c9d1d9; background: transparent !important; }

.endpoint-doc-section--snippets .codebox .token.atrule,
.endpoint-doc-section--snippets .codebox .token.attr-value,
.endpoint-doc-section--snippets .codebox .token.keyword       { color: #ff7b72; font-weight: 600; }

.endpoint-doc-section--snippets .codebox .token.function,
.endpoint-doc-section--snippets .codebox .token.class-name    { color: #d2a8ff; }

.endpoint-doc-section--snippets .codebox .token.regex,
.endpoint-doc-section--snippets .codebox .token.important,
.endpoint-doc-section--snippets .codebox .token.variable      { color: #ffa657; }

@media (max-width: 576px) {
    .endpoint-doc-section--snippets .codebox pre,
    .endpoint-doc-section--snippets .codebox code[class*="language-"] {
        font-size: 12px !important;
    }
}

/* ============================================================
   Pricing CTA — flat, solid pill (OpenAI-style).
   Removes the gradient + glow + inset shine that .btn-primary
   inherits from the global Bootstrap override (line ~2587).
   Pill radius = 999px to match the Copy Endpoint convention
   (.endpoint-actions-buttons .endpoint-action-btn at line ~1355).
   Scope:
     - .pricing_card .btn-primary           → item page pricing cards
     - .pricing-v2__panes .btn-primary      → AJAX-rendered pricing panes
     - .modal .pricing_card .btn-primary    → pricing inside modals
     - .myapis-page .btn-primary, .my-apis-page .btn-primary
                                            → /api (My APIs) page CTAs
   ============================================================ */
.pricing_card .btn,
.pricing_card .btn-primary,
.pricing_card a.btn-primary,
.pricing_card button.btn-primary,
.pricing_card .btn-primary:not(:disabled):not(.disabled):active,
.pricing_card .btn-primary:not(:disabled):not(.disabled):focus,
.pricing_card .btn-primary:focus,
.pricing-v2__panes .btn-primary,
.modal .pricing_card .btn-primary,
.modal .pricing_card .btn,
.my-apis-page .btn-primary,
.myapis-page .btn-primary,
.content-wrapper.my-apis-page .btn-primary {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
}

/* Hover: swap solid black → brand purple. No glow, no gradient, no 3D. */
.pricing_card .btn-primary:not(:disabled):not(.disabled):hover,
.pricing_card .btn-primary:hover,
.pricing_card .btn:hover,
.pricing_card .btn:focus,
.pricing_card .btn:focus-visible,
.pricing-v2__panes .btn-primary:hover,
.modal .pricing_card .btn-primary:hover,
.modal .pricing_card .btn:hover,
.my-apis-page .btn-primary:hover,
.myapis-page .btn-primary:hover,
.content-wrapper.my-apis-page .btn-primary:hover {
    background: #693bf5 !important;
    background-color: #693bf5 !important;
    background-image: none !important;
    border-color: #693bf5 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Suppress any decorative shine pseudo-element inherited from .btn-primary */
.pricing_card .btn-primary::before,
.pricing_card .btn-primary::after,
.pricing-v2__panes .btn-primary::before,
.pricing-v2__panes .btn-primary::after,
.modal .pricing_card .btn-primary::before,
.modal .pricing_card .btn-primary::after,
.my-apis-page .btn-primary::before,
.my-apis-page .btn-primary::after,
.myapis-page .btn-primary::before,
.myapis-page .btn-primary::after {
    display: none !important;
    content: none !important;
}

/* Hover effect on the card should no longer toggle button opacity */
@media (min-width: 992px) {
    .pricing_card .card:hover .btn {
        opacity: 1 !important;
    }
}