/*
 * Shared look for pricing, subscription and checkout pages: type tabs and one CTA style,
 * using the site header colours (dark slate) with the header's yellow as the only accent.
 * Selectors use a doubled .price-theme so they win over the older per-page button rules
 * (.subv3 .btn.primary, .subv3.price-page .pricing-box.pop .box-buy-button, .scw .pay, ...).
 * Load this file after each page's own <style> block.
 */
.price-theme {
    --pt-dark-1: #0f172a;
    --pt-dark-2: #1e293b;
    --pt-dark-hover: #334155;
    --pt-line: #cbd5e1;
    --pt-text: #0f172a;
    --pt-muted: #64748b;
    --pt-yellow-1: #fde047;
    --pt-yellow-2: #facc15;
}

/* ---------- Type tabs ---------- */
.price-theme .price-type-wrap { display: flex; justify-content: center; margin: 4px 0 26px; }
.price-theme .price-type-tabs {
    display: inline-flex; align-items: stretch; gap: 4px; max-width: 100%;
    padding: 5px; border-radius: 14px;
    background: #f1f5f9; border: 1px solid #e2e8f0;
}
.price-theme .price-type-tab {
    display: flex; align-items: center; gap: 10px;
    flex: 1 1 230px; min-width: 200px; max-width: 280px;
    padding: 10px 14px; border-radius: 10px; border: 1px solid transparent;
    text-align: left; text-decoration: none; cursor: pointer;
    color: var(--pt-text); background: transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.price-theme .price-type-tab .pt-ic {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
    color: var(--pt-dark-2); background: #fff; border: 1px solid #e2e8f0;
}
.price-theme .price-type-tab .pt-txt { display: flex; flex-direction: column; min-width: 0; }
.price-theme .price-type-tab .tl { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
.price-theme .price-type-tab .ts { display: block; font-size: 11px; font-weight: 500; margin-top: 3px; line-height: 1.3; color: var(--pt-muted); white-space: nowrap; }
.price-theme .price-type-tab:hover { background: #fff; border-color: #e2e8f0; color: var(--pt-text); text-decoration: none; }
.price-theme .price-type-tab.is-active {
    color: #fff; border-color: var(--pt-dark-1);
    background: linear-gradient(135deg, var(--pt-dark-1) 0%, var(--pt-dark-2) 100%);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .22);
}
.price-theme .price-type-tab.is-active .ts { color: #cbd5e1; }
.price-theme .price-type-tab.is-active .pt-ic { color: var(--pt-yellow-2); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.price-theme .price-type-tab:focus-visible { outline: 2px solid #94a3b8; outline-offset: 2px; }

@media (max-width: 720px) {
    .price-theme .price-type-wrap { margin-bottom: 20px; }
    .price-theme .price-type-tabs { flex-direction: column; width: 100%; }
    .price-theme .price-type-tab { max-width: none; min-width: 0; flex-basis: auto; }
    .price-theme .price-type-tab .ts { white-space: normal; }
}

/* ---------- Primary CTA (header dark) ---------- */
.price-theme.price-theme .btn,
.price-theme.price-theme .btn.primary,
.price-theme.price-theme .hub-cta,
.price-theme.price-theme .band .cta,
.price-theme.price-theme .box-buy-button,
.price-theme.price-theme .box-buy-button.box-buy-button--primary,
.price-theme.price-theme .pricing-box.pop .box-buy-button,
.price-theme.price-theme .buy-button,
.price-theme.price-theme .pay,
.price-theme.price-theme .proceed-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: 9px;
    font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1.2;
    color: #fff; text-decoration: none; cursor: pointer;
    border: 1px solid var(--pt-dark-1);
    background: linear-gradient(135deg, var(--pt-dark-1) 0%, var(--pt-dark-2) 100%);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
    text-shadow: none; filter: none;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.price-theme.price-theme .btn,
.price-theme.price-theme .box-buy-button,
.price-theme.price-theme .buy-button,
.price-theme.price-theme .pay,
.price-theme.price-theme .proceed-button { display: flex; width: 100%; }

.price-theme.price-theme .btn:hover,
.price-theme.price-theme .btn.primary:hover,
.price-theme.price-theme .hub-cta:hover,
.price-theme.price-theme .band .cta:hover,
.price-theme.price-theme .box-buy-button:hover,
.price-theme.price-theme .box-buy-button.box-buy-button--primary:hover,
.price-theme.price-theme .pricing-box.pop .box-buy-button:hover,
.price-theme.price-theme .buy-button:hover,
.price-theme.price-theme .pay:hover,
.price-theme.price-theme .proceed-button:hover {
    color: #fff; text-decoration: none; border-color: var(--pt-dark-2);
    background: linear-gradient(135deg, var(--pt-dark-2) 0%, var(--pt-dark-hover) 100%);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .25);
    transform: translateY(-1px); filter: none;
}
.price-theme.price-theme .btn:active,
.price-theme.price-theme .hub-cta:active,
.price-theme.price-theme .band .cta:active,
.price-theme.price-theme .box-buy-button:active,
.price-theme.price-theme .buy-button:active,
.price-theme.price-theme .pay:active,
.price-theme.price-theme .proceed-button:active { transform: none; box-shadow: 0 1px 3px rgba(15, 23, 42, .2); }

.price-theme.price-theme .btn:focus-visible,
.price-theme.price-theme .hub-cta:focus-visible,
.price-theme.price-theme .band .cta:focus-visible,
.price-theme.price-theme .box-buy-button:focus-visible,
.price-theme.price-theme .buy-button:focus-visible,
.price-theme.price-theme .pay:focus-visible,
.price-theme.price-theme .proceed-button:focus-visible,
.price-theme.price-theme .free-cta__btn:focus-visible { outline: 2px solid #94a3b8; outline-offset: 2px; }

/* ---------- Secondary CTA (outline) ---------- */
.price-theme.price-theme .btn.sales,
.price-theme.price-theme .hub-cta.ghost,
.price-theme.price-theme .band .cta.cta-ghost {
    color: var(--pt-text);
    border: 1px solid var(--pt-line);
    background: #fff;
    box-shadow: none;
}
.price-theme.price-theme .btn.sales:hover,
.price-theme.price-theme .hub-cta.ghost:hover,
.price-theme.price-theme .band .cta.cta-ghost:hover {
    color: var(--pt-text); border-color: var(--pt-dark-1);
    background: #f8fafc; box-shadow: none; transform: none;
}

/* ---------- Accent CTA (header yellow): free signup, and the button on the dark enterprise card ---------- */
.price-theme.price-theme .free-cta__btn,
.price-theme.price-theme .band .cta.cta-gold,
.price-theme.price-theme .pricing-box--enterprise .pricing-box__enterprise-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; border-radius: 9px;
    font-weight: 700; font-size: 13px; color: #1a1206; text-shadow: none; text-decoration: none;
    border: 1px solid #eab308;
    background: linear-gradient(135deg, var(--pt-yellow-1) 0%, var(--pt-yellow-2) 100%);
    box-shadow: 0 2px 6px rgba(234, 179, 8, .25); filter: none;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.price-theme.price-theme .pricing-box--enterprise .pricing-box__enterprise-cta { display: flex; width: 100%; }
.price-theme.price-theme .free-cta__btn:hover,
.price-theme.price-theme .band .cta.cta-gold:hover,
.price-theme.price-theme .pricing-box--enterprise .pricing-box__enterprise-cta:hover {
    color: #1a1206; text-decoration: none; transform: translateY(-1px); filter: none;
    background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
    box-shadow: 0 6px 14px rgba(234, 179, 8, .3);
}

/* ---------- API pricing content (/api-pricing and /price?tab=api) ---------- */
.price-theme.price-theme .apr-cta,
.price-theme.price-theme .apr-tier a.tb,
.price-theme.price-theme .apr-tier.feat a.tb,
.price-theme.price-theme .apr-pack .pb,
.price-theme.price-theme .apr-pack.feat .pb {
    color: #fff; text-decoration: none;
    border: 1px solid var(--pt-dark-1);
    background: linear-gradient(135deg, var(--pt-dark-1) 0%, var(--pt-dark-2) 100%);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.price-theme.price-theme .apr-cta:hover,
.price-theme.price-theme .apr-tier a.tb:hover,
.price-theme.price-theme .apr-tier.feat a.tb:hover,
.price-theme.price-theme .apr-pack .pb:hover,
.price-theme.price-theme .apr-pack.feat .pb:hover {
    color: #fff; border-color: var(--pt-dark-2);
    background: linear-gradient(135deg, var(--pt-dark-2) 0%, var(--pt-dark-hover) 100%);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .25);
    transform: translateY(-1px);
}
.price-theme.price-theme .apr-cta.ghost {
    color: var(--pt-text); border: 1px solid var(--pt-line); background: #fff; box-shadow: none;
}
.price-theme.price-theme .apr-cta.ghost:hover {
    color: var(--pt-text); border-color: var(--pt-dark-1); background: #f8fafc; box-shadow: none; transform: none;
}
.price-theme.price-theme .apr-tier.feat,
.price-theme.price-theme .apr-pack.feat { border-color: var(--pt-dark-1); box-shadow: 0 10px 24px rgba(15, 23, 42, .1); }
.price-theme.price-theme .apr-tier .tag,
.price-theme.price-theme .apr-pack .feat-tag { background: var(--pt-dark-1); color: var(--pt-yellow-2); }
.price-theme.price-theme .apr-pack .pi { background: linear-gradient(135deg, var(--pt-dark-1) 0%, var(--pt-dark-2) 100%); color: var(--pt-yellow-2); }
.price-theme.price-theme .apr-pack .pc { color: var(--pt-dark-2); }
.price-theme.price-theme .apr-pill,
.price-theme.price-theme .apr-pill i { color: #334155; }

/* ---------- Disabled / current plan ---------- */
.price-theme.price-theme .btn[disabled],
.price-theme.price-theme .btn.primary[disabled],
.price-theme.price-theme .pay:disabled,
.price-theme.price-theme .proceed-button:disabled {
    cursor: not-allowed; transform: none; opacity: 1;
    color: var(--pt-muted); border: 1px solid #e2e8f0;
    background: #f1f5f9; box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .price-theme .price-type-tab,
    .price-theme.price-theme .btn, .price-theme.price-theme .hub-cta, .price-theme.price-theme .band .cta,
    .price-theme.price-theme .box-buy-button, .price-theme.price-theme .buy-button, .price-theme.price-theme .pay,
    .price-theme.price-theme .proceed-button, .price-theme.price-theme .free-cta__btn { transition: none; }
}