/* =====================================================================
   DA Checker — Plans & Pricing (Figma redesign)
   Desktop: 10035-22040 | Tablet: 10035-22334 | Mobile: 10035-22628
   NOTE: Visual layer only. No markup/redirection/plan logic touched.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Professional design tokens (scoped to the pricing section so they
   never leak into the rest of the app). Named by role, not by value.
   --------------------------------------------------------------------- */
.pricing_section {
    /* Brand */
    --pp-brand: #323dd6;
    --pp-brand-gradient: linear-gradient(264deg, #323dd6 0%, #ce177b 100%);

    /* Surfaces */
    --pp-surface: #ffffff;
    --pp-surface-muted: #f9fafb;
    --pp-surface-subtle: #f3f4f6;

    /* Ink (text) */
    --pp-ink-strong: #1e2938;
    /* headings */
    --pp-ink: #364153;
    /* body paragraph */
    --pp-ink-muted: #697282;
    /* secondary / disabled */
    --pp-ink-placeholder: #98a1ae;

    /* Lines */
    --pp-border: #e5e7eb;
    --pp-border-soft: #eaecf0;

    /* Accents */
    --pp-accent-positive: #00a500;
    /* feature check / green */
    --pp-accent-danger: #c73b3b;
    /* discount badge text */
    --pp-accent-danger-bg: #e350501f;
    --pp-on-dark: #ffffff;
    --pp-ink-inactive: #d1d5db;
    /* struck-through old price */

    /* Elevation */
    --pp-shadow-card: 0 1px 2px #0a001f0f, 0 1px 3px #0a001f1a;
    --pp-shadow-xs: 0 1px 2px #0a001f0d;

    /* Radii & spacing scale (Figma padding tokens) */
    --pp-radius-sm: 8px;
    --pp-radius: 12px;
    --pp-radius-lg: 16px;
}

/* ---------------------------------------------------------------------
   Section heading
   --------------------------------------------------------------------- */
.pricing_plan_section .title:not(.faq_section_container .title) {
    color: var(--pp-ink-strong);
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
}

.pricing_plan_section>p {
    color: var(--pp-ink);
    font-size: 18px;
    line-height: 28px;
}

/* ---------------------------------------------------------------------
   Monthly / Yearly toggle  (#js-switch-toggle)
   --------------------------------------------------------------------- */
/* Figma 10035:22044 — bg #f3f4f6, radius 10px, 2px padding/gap, tab buttons
   fixed 90px wide, px12/py8, radius 8px. Inactive text = #98a1ae placeholder,
   active = white surface + brand text + Shadow/sm. */
#js-switch-toggle {
    background: var(--pp-surface-subtle);
    border-radius: 10px !important;
    padding: 2px;
    gap: 2px;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 32px;
}

#js-switch-toggle button {
    border: 0;
    background: transparent;
    color: var(--pp-ink-placeholder);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding: 8px 12px;
    border-radius: 8px;
    width: 90px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

#js-switch-toggle button.switch-active {
    background: var(--pp-surface);
    color: var(--pp-brand);
    box-shadow: 0px 1px 1.5px rgba(10, 0, 31, 0.1), 0px 1px 1px rgba(10, 0, 31, 0.06);
}

/* ---------------------------------------------------------------------
   Plan cards   (Figma 10035-22047 — card = 354px, 24px padding)
   --------------------------------------------------------------------- */
#dapa-pricing-plans,
#drur-pricing-plans {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-right: unset;
}

/* Figma: two cards inside a 720px row, gap 12px, each card flex:1 with
   min-width 300px (so they land at 354px on desktop). */
.pricing-plans-row {
    display: flex;
    justify-content: center;
    max-width: 720px;
    margin: 0 auto;
}

#dapa-pricing-plans,
#drur-pricing-plans {
    width: 100%;
}

.plan-pricing-column {
    flex: 1 0 0;
    min-width: 300px;
    max-width: 354px;
}

.features-name {
    height: 100%;
}

/* Figma card: 16px radius, 1px #e5e7eb border, Shadow/xs (single shadow),
   horizontal padding 24px only — vertical spacing comes from the dashed
   sections inside. */
.plan-detail-parent {
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    box-shadow: var(--pp-shadow-xs);
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    justify-content: start !important;
}

/* Recommended / popular card — Figma keeps the same grey border on both
   cards; only the CTA button changes colour (see .recommended button rules) */
.plan-detail-parent.recommended {
    border-color: var(--pp-border);
    box-shadow: var(--pp-shadow-xs);
}

/* --- Card head: name + badge + price + CTA --- */
/* Figma: head is py 24px with a dashed bottom rule (top sits flush against
   the card edge, so no top border here). Name↔price gap = 16px; the CTA
   carries an extra 8px top margin so it sits 24px below the price block. */
.plan-detail-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0;
}

/* name + discount badge row */
.plan-detail-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.plan-detail-title {
    color: var(--pp-ink);
    /* Figma title = #364153 */
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

/* Discount badge ("30% OFF") */
.discount-badge,
.plan-discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--pp-accent-danger-bg);
    border: 1px solid var(--pp-accent-danger-bg);
    color: var(--pp-accent-danger);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
    flex: none;
}

.plan-discount-badge img,
.plan-discount-badge svg {
    width: 12px;
    height: 12px;
    flex: none;
}

/* Price block: price row over "Billed monthly" caption */
.plan-detail-price {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-detail-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4px;
}

.plan-detail-price .discounted-price {
    color: var(--pp-ink-strong);
    font-size: 36px;
    font-weight: 600;
    line-height: 44px;
}

.plan-detail-price .original_price {
    color: var(--pp-ink-muted);
    text-decoration: line-through;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    margin: 0;
}

.plan-detail-price .plan-detail-unit,
.plan-detail-price .plan-detail-des {
    color: var(--pp-ink-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* CTA buttons */
.plan-access-action,
.price-card-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 10px 16px;
    gap: 8px;
    background: #1E2938;
    box-shadow: 0px 1px 3px rgba(10, 0, 31, 0.1), 0px 1px 2px rgba(10, 0, 31, 0.06);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    transition: filter .15s ease, opacity .15s ease;

    &:hover {
        background: #1E2938;
    }
}

/* Default CTA = dark (Basic) */
.plan-access-action {
    background: var(--pp-ink-strong);
    color: var(--pp-on-dark);
}

.plan-access-action .plan-access-text,
.price-card-action-btn .action-btn {
    color: inherit;
}

/* Recommended CTA = solid brand (Growth) — Figma is solid #323dd6, not a
   gradient. !important defeats the global .btn-primary-gradient background. */
.plan-access-action.recommended,
.price-card-action-btn.recommended,
.plan-detail-parent.recommended .plan-access-action,
.plan-detail-parent.recommended .price-card-action-btn {
    background: var(--pp-brand) !important;
    background-image: none !important;
    color: var(--pp-on-dark);
}

.plan-access-action:hover,
.price-card-action-btn:hover {
    filter: brightness(1.08);
}

/* ---------------------------------------------------------------------
   Card sections — Credits / What's Included / Tools Included
   Each separated by a dashed rule (Figma: border-top dashed, py 16px)
   --------------------------------------------------------------------- */
.pp-card-section {
    display: flex;
    flex-direction: column;
    border-top: 1px dashed var(--pp-border);
    padding: 16px 0;
}

.pp-card-section:last-child {
    padding-bottom: 0;
}

.pp-section-heading {
    color: var(--pp-ink-strong);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    padding: 8px 0;
}

/* generic icon + text row (credits, features, tools) */
.pp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.pp-row-ico {
    width: 24px;
    height: 24px;
    flex: none;
    object-fit: contain;
}

.pp-row-text {
    color: var(--pp-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    word-break: break-word;
}

.pp-row-text .muted {
    color: var(--pp-ink-placeholder);
    font-weight: 500;
}

/* tooltip info icon kept inline in a row */
.pp-row .data-info-icon {
    display: inline-flex;
    align-items: center;
}

/* show the data-tooltip text on hover (to the right of the info icon) */
.pp-row .data-info-icon[data-tooltip] {
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.pp-row .data-info-icon[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 6px);
    bottom: 50%;
    transform: translateY(50%);
    width: max-content;
    padding: 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #fff;
    background: #0A0909;
    border-radius: 8px;
    box-shadow: 0px 4px 8px 0px #00000014;
    z-index: 9999;
}

.pp-row .data-info-icon[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    left: 100%;
    bottom: 50%;
    transform: translateY(50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #0A0909;
    z-index: 9999;
}

/* ---------------------------------------------------------------------
   Trust bar (Trusted by / Used by / Save hours)
   --------------------------------------------------------------------- */
/* Figma 10035:22158 — full-width (max 720px) bordered card, items spread
   with space-between, px16/py12, radius 12px, Shadow/xs. Text 12px/500. */
.pp-trust-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    padding: 12px 16px;
    margin: 32px auto 0;
    width: 100%;
    max-width: 720px;
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow-xs);
}

.pp-trust-bar .pp-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pp-ink) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px;
}

.pp-trust-bar .pp-trust-item img {
    flex: none;
}

.pp-trust-bar .pp-trust-ico {
    flex: none;
    color: var(--pp-ink-muted);
}

/* vertical divider between trust items (Figma: 1px × 12px) */
.pp-trust-bar .pp-trust-sep {
    width: 1px;
    height: 12px;
    background: var(--pp-border);
    flex: none;
}

/* ---------------------------------------------------------------------
   Approved payment methods
   --------------------------------------------------------------------- */
/* Figma 10035:22174 — icons row gap 32px, 24px above the label.
   Icons rendered desaturated (mix-blend-luminosity + opacity .6). */
.pp-payments {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin: 24px auto 0;
    max-width: 720px;
}

.pp-payments-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
}

.pp-payments-icons img {
    object-fit: contain;
    mix-blend-mode: luminosity;
    opacity: .6;
    filter: grayscale(100%);
}

.pp-payments-label {
    color: var(--pp-ink-placeholder);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   Compare Plans table + Credit Overview table
   --------------------------------------------------------------------- */
.pricing_container {
    max-width: 720px;
    margin: 0 auto;
}

/* Figma renders both tables as a full grid: every cell carries a 1px
   #e5e7eb border, header + first column sit on the muted #f9fafb surface,
   and the outer container is 16px-radius with a #eaecf0 hairline. We use
   border-collapse:separate so the per-cell borders read as grid lines. */
.pricing-table,
.compare-plans-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--pp-surface);
    border: 1px solid var(--pp-border-soft);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
}

/* NOTE: !important is required below because style.css defines global
   `th { padding;font-weight }`, `td { padding }`, `thead { background }`,
   `td,th { text-align }` and `th:first/last-child { border-radius }`
   rules that would otherwise override these component styles. */
.pricing-table thead th,
.compare-plans-table thead th {
    background: var(--pp-surface-muted) !important;
    color: var(--pp-ink-strong);
    font-size: 16px;
    font-weight: 700 !important;
    line-height: 24px;
    text-align: left !important;
    padding: 16px !important;
    vertical-align: middle;
    border: 1px solid var(--pp-border) !important;
    border-radius: 0 !important;
}

/* Figma column split: label column grows (~ half), two plan columns capped
   at 200px each. */
.compare-plans-table thead th:first-child,
.compare-plans-table tbody td:first-child {
    width: auto;
}

.compare-plans-table thead th:not(:first-child),
.compare-plans-table tbody td:not(:first-child) {
    width: 200px;
    max-width: 200px;
}

/* the Compare Plans header cell holds the title + toggle, bottom-aligned */
.compare-plans-table thead th:first-child {
    vertical-align: bottom;
}

/* horizontal scroll wrapper so the table never breaks layout on small screens */
.compare-plans-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--pp-border-soft);
    border-radius: var(--pp-radius-lg);
}

.compare-plans-scroll .compare-plans-table {
    border: 0;
    border-radius: 0;
    min-width: 640px;
}

/* header first cell: title stacked over the Monthly/Yearly toggle (18px/600) */
.compare-plans-title {
    color: var(--pp-ink-strong);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 12px;
}

/* plan column heads: name (18px/600) + per-month price (14px/400 muted) */
.compare-plans-table thead th .compare-plan-name {
    display: block;
    color: var(--pp-ink-strong);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

.compare-plans-table thead th .compare-plan-price {
    display: block;
    color: var(--pp-ink-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 32px;
}

/* Section sub-heading row inside compare table (16px/700, py 24px, full grid) */
.compare-plans-table .section-heading td {
    background: var(--pp-surface) !important;
    color: var(--pp-ink-strong);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    padding: 24px 16px !important;
    border: 1px solid var(--pp-border) !important;
}

/* feature checkmark cells — left-aligned under each plan column (Figma) */
.compare-plans-table tbody td.feature-check {
    color: var(--pp-brand);
    font-weight: 700;
    text-align: left !important;
}

.pricing-table tbody td,
.compare-plans-table tbody td {
    color: var(--pp-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    min-height: 56px;
    height: 56px;
    padding: 16px !important;
    /* style.css `td { padding:10px }` */
    text-align: left !important;
    border: 1px solid var(--pp-border) !important;
}

/* first column = row label, sits on the muted surface (Figma) */
.pricing-table tbody td:first-child,
.compare-plans-table tbody td:first-child {
    background: var(--pp-surface-muted);
}

.compare-plans-wrapper {
    margin: 32px auto;
    margin-top: 96px;
}

/* Monthly/Yearly pill toggle living inside the compare-table header —
   same segmented style as the page toggle (Figma 10035:22262 → 9925:11669):
   #f3f4f6 track, white active pill, brand text, 90px tabs. */
#js-compare-switch-toggle {
    background: var(--pp-surface-subtle);
    border-radius: 10px;
    padding: 2px;
    gap: 2px;
    width: fit-content;
}

#js-compare-switch-toggle button {
    border: 0;
    background: transparent;
    color: var(--pp-ink-placeholder);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding: 8px 12px;
    border-radius: 8px;
    width: 90px;
    cursor: pointer;
}

#js-compare-switch-toggle button.switch-active {
    background: var(--pp-surface);
    color: var(--pp-brand);
    box-shadow: 0px 1px 1.5px rgba(10, 0, 31, 0.1), 0px 1px 1px rgba(10, 0, 31, 0.06);
}

/* Credit Overview heading + subtitle (Figma 10035:22286 — H2 30/700 + P1 18/400) */
.credit-overview-block {
    text-align: center;
    margin-bottom: 96px;
}

.creditHeadingText {
    color: var(--pp-ink-strong);
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    text-align: center;
    margin: 0 0 12px;
}

.creditSubText {
    color: var(--pp-ink);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    text-align: center;
    margin: 0 0 24px;
}

.credit-table-container {
    border: 1px solid var(--pp-border-soft);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
}

.credit-table-container .pricing-table {
    border: 0;
    border-radius: 0;
}

.faq_section_container {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    margin-bottom: 56px;
}

.faq_section_container .faq_section {
    flex-direction: column;
    flex-wrap: nowrap;
    margin: auto;
    align-items: center;
}

.faq_section .header {
    flex-basis: unset;

    .title {
        text-align: center;
        margin-bottom: 12px;
        font-weight: 700;
        font-size: 30px;
        line-height: 36px;
        color: #1E2938;
    }

    p {
        text-align: center !important;
        margin-bottom: 32px;
        font-weight: 400;
        font-size: 18px !important;
        line-height: 28px;
        text-align: center;
        color: #364153;
    }
}

.faq_section .faq_list {
    flex-basis: unset;
    width: 100%;
}

.faq_section .faq_list .accordion_container,
.parent_menu .child_menu a div {
    gap: 16px;
}

.faq_section .faq_list .accordion_container .accordion {
    border-radius: 16px;
}

.faq_section .faq_list .accordion_container .accordion .heading .accordion_arrow {
    height: 24px;
}

.faq_section .faq_list .accordion_container .accordion.active .heading .accordion_arrow {
    transform: rotate(180deg) !important;
}

/* ---------------------------------------------------------------------
   Tablet  ( <= 991px )  — Figma 10035-22334
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .pricing_plan_section .title:not(.faq_section_container .title) {
        font-size: 30px;
        line-height: 38px;
    }

    #dapa-pricing-plans,
    #drur-pricing-plans {
        flex-wrap: wrap;
        gap: 16px;
    }

    .plan-pricing-column {
        flex: 1 1 280px;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------
   Mobile  ( <= 600px )  — Figma 10035-22628
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
    .pricing_plan_section .title:not(.faq_section_container .title) {
        font-size: 26px;
        line-height: 34px;
    }

    #dapa-pricing-plans,
    #drur-pricing-plans {
        flex-direction: column;
        align-items: center;
    }

    .plan-pricing-column {
        flex: 1 1 auto;
        width: 100%;
        max-width: 420px;
    }

    .plan-detail-parent {
        padding: 0 20px;
    }

    .plan-detail-price .discounted-price {
        font-size: 32px;
        line-height: 40px;
    }

    .pp-trust-bar {
        flex-direction: column;
        align-items: flex-start;
        border-radius: var(--pp-radius);
        gap: 12px;
        width: 100%;
    }

    /* stacked layout — separators become full-width horizontal rules (Figma mobile) */
    .pp-trust-bar .pp-trust-sep {
        width: 100%;
        height: 1px;
    }

    .pp-payments-icons {
        gap: 16px;
    }

    .pricing-table thead th,
    .compare-plans-table thead th {
        font-size: 14px;
        padding: 12px !important;
    }

    .pricing-table tbody td,
    .compare-plans-table tbody td {
        padding: 14px 12px !important;
    }

    .creditHeadingText {
        font-size: 24px;
        line-height: 30px;
    }
}

/* ---------------------------------------------------------------------
   Billing-cycle visibility (Credit Overview + Compare Plans + anywhere
   using the toggle). Default render = yearly active (matches the default
   switch-active button). jQuery .toggle() on click overrides this with an
   inline display, so we only style the initial (no-JS) state: hide monthly,
   leave yearly at its natural display (span -> inline, td/th -> table-cell).
   --------------------------------------------------------------------- */