/* =============================================================================
   ifinsta — Subscription surfaces

   Plan tiles, the billing switch, invoice summaries, and outcome screens.
   Builds on the console kit (console/capybara.css) and adds
   only what billing needs.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Trust strip in the plans hero
   ----------------------------------------------------------------------------- */
.ifinsta-plan-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ifinsta-space-4);
    margin: var(--ifinsta-space-4) 0 0;
    padding: 0;
    list-style: none;
}

.ifinsta-plan-trust li {
    display: inline-flex;
    align-items: center;
    gap: var(--ifinsta-space-1-5);
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-plan-trust .material-symbols-outlined {
    font-size: 16px;
    color: var(--ifinsta-success-500);
}

/* -----------------------------------------------------------------------------
   Monthly / yearly switch
   ----------------------------------------------------------------------------- */
.ifinsta-billing-switch {
    display: inline-flex;
    padding: var(--ifinsta-space-0-5);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-surface);
}

.ifinsta-billing-switch__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ifinsta-space-1-5);
    padding: var(--ifinsta-space-2) var(--ifinsta-space-4);
    border: none;
    border-radius: var(--ifinsta-radius-full);
    background: transparent;
    color: var(--ifinsta-text-secondary);
    font: var(--ifinsta-text-body-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ifinsta-billing-switch__btn:hover {
    color: var(--ifinsta-text-primary);
}

.ifinsta-billing-switch__btn--active {
    background: var(--ifinsta-primary);
    color: var(--ifinsta-white);
    font-weight: var(--ifinsta-font-medium);
}

.ifinsta-billing-switch__save {
    padding: 0 var(--ifinsta-space-1-5);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-success-50);
    color: var(--ifinsta-success-700, #047857);
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
}

.ifinsta-billing-switch__btn--active .ifinsta-billing-switch__save {
    background: rgba(var(--ifinsta-white-rgb), 0.2);
    color: var(--ifinsta-white);
}

/* -----------------------------------------------------------------------------
   Plan tiles
   ----------------------------------------------------------------------------- */
.ifinsta-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--ifinsta-space-4);
    align-items: stretch;
}

.ifinsta-plan-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-5);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
}

/* The recommended tier earns a tinted field and a heavier border — the one
   place on this page where colour is doing persuasion, not status. */
.ifinsta-plan-tile--featured {
    border-color: var(--ifinsta-primary);
    background:
        linear-gradient(160deg, var(--ifinsta-primary-50) 0%, var(--ifinsta-surface) 55%),
        var(--ifinsta-surface);
}

.ifinsta-plan-tile__flag {
    position: absolute;
    top: calc(var(--ifinsta-space-3) * -1);
    left: var(--ifinsta-space-5);
    padding: var(--ifinsta-space-0-5) var(--ifinsta-space-2-5);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-primary);
    color: var(--ifinsta-white);
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
}

.ifinsta-plan-tile__head {
    display: flex;
    align-items: flex-start;
    gap: var(--ifinsta-space-3);
}

.ifinsta-plan-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-primary-50);
    color: var(--ifinsta-primary);
    font-size: 22px;
}

.ifinsta-plan-tile--featured .ifinsta-plan-tile__icon {
    background: var(--ifinsta-primary);
    color: var(--ifinsta-white);
}

.ifinsta-plan-tile__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ifinsta-plan-tile__name {
    margin: 0;
    font: var(--ifinsta-text-h3);
    color: var(--ifinsta-text-primary);
}

.ifinsta-plan-tile__pitch {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-plan-tile__price {
    display: flex;
    align-items: baseline;
    gap: var(--ifinsta-space-1);
    margin: 0;
    padding-bottom: var(--ifinsta-space-3);
    border-bottom: 1px solid var(--ifinsta-border);
}

.ifinsta-plan-tile__currency {
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-muted);
}

.ifinsta-plan-tile__amount {
    font: var(--ifinsta-text-display);
    line-height: 1;
    color: var(--ifinsta-text-primary);
}

.ifinsta-plan-tile__cycle {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-plan-tile__billed {
    margin: calc(var(--ifinsta-space-2) * -1) 0 0;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-plan-tile__features {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
}

.ifinsta-plan-tile__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--ifinsta-space-2);
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-plan-tile__features .material-symbols-outlined {
    font-size: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--ifinsta-success-500);
}

.ifinsta-plan-tile__more {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ifinsta-primary);
    font: var(--ifinsta-text-body-sm);
    cursor: pointer;
}

.ifinsta-plan-tile__more:hover {
    text-decoration: underline;
}

.ifinsta-plan-tile__foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ifinsta-space-2);
    margin-top: auto;
    padding-top: var(--ifinsta-space-3);
    border-top: 1px solid var(--ifinsta-border);
}

.ifinsta-plan-tile__foot .ifinsta-btn {
    width: 100%;
    justify-content: center;
}

.ifinsta-plan-tile__current {
    text-align: center;
    padding: var(--ifinsta-space-2);
}

.ifinsta-plan-tile__trial {
    font: var(--ifinsta-text-caption);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-primary-700);
    text-align: center;
    background: var(--ifinsta-primary-50);
    border: 1px solid var(--ifinsta-primary-100);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    margin-top: var(--ifinsta-space-3);
}

/* -----------------------------------------------------------------------------
   Public pricing composition
   ----------------------------------------------------------------------------- */
.ifinsta-public-plans {
    padding-block: var(--ifinsta-space-8) var(--ifinsta-space-16);
}

.ifinsta-public-plans .ifinsta-dev-console {
    margin-inline: auto;
}

.ifinsta-public-plans__hero {
    flex-direction: column;
    align-items: center;
    padding: var(--ifinsta-space-12) 0 var(--ifinsta-space-8);
    border: none;
    border-radius: var(--ifinsta-radius-none);
    background: transparent;
    text-align: center;
}

.ifinsta-public-plans__hero-copy {
    flex: 0 1 auto;
    max-width: var(--ifinsta-space-160);
}

.ifinsta-public-plans__hero .ifinsta-dev-subhero__lede {
    margin-inline: auto;
}

.ifinsta-public-plans__billing {
    justify-content: center;
    width: 100%;
}

.ifinsta-public-plans .ifinsta-plan-tile--featured {
    background: var(--ifinsta-surface);
}

.ifinsta-plan-tile__offer {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    margin: 0;
    color: var(--ifinsta-text-muted);
    font: var(--ifinsta-text-caption);
}

.ifinsta-plan-tile__offer span,
.ifinsta-plan-tile__billed strong {
    color: var(--ifinsta-success-700);
    font-weight: var(--ifinsta-font-semibold);
}

.ifinsta-public-plans .ifinsta-plan-tile__billed {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--ifinsta-space-2);
}

[data-theme="dark"] .ifinsta-public-plans__hero,
[data-theme="dark"] .ifinsta-public-plans .ifinsta-plan-tile--featured {
    background: var(--ifinsta-surface);
}

/* -----------------------------------------------------------------------------
   Public plan comparison
   ----------------------------------------------------------------------------- */
.ifinsta-plan-comparison {
    width: 100%;
    overflow-x: auto;
}

.ifinsta-plan-comparison__table {
    width: 100%;
    min-width: var(--ifinsta-space-160);
    border-collapse: collapse;
    font: var(--ifinsta-text-body-sm);
}

.ifinsta-plan-comparison__table th,
.ifinsta-plan-comparison__table td {
    padding: var(--ifinsta-space-3) var(--ifinsta-space-4);
    border-bottom: var(--ifinsta-border-width) solid var(--ifinsta-border);
    color: var(--ifinsta-text-secondary);
    text-align: center;
    vertical-align: middle;
}

.ifinsta-plan-comparison__table thead th {
    background: var(--ifinsta-surface-1);
    color: var(--ifinsta-text-primary);
    font-weight: var(--ifinsta-font-semibold);
}

.ifinsta-plan-comparison__table tbody th,
.ifinsta-plan-comparison__feature {
    width: 30%;
    color: var(--ifinsta-text-primary);
    font-weight: var(--ifinsta-font-medium);
    text-align: left;
}

.ifinsta-plan-comparison__table tbody tr:last-child th,
.ifinsta-plan-comparison__table tbody tr:last-child td {
    border-bottom: none;
}

.ifinsta-plan-comparison__highlighted {
    background: var(--ifinsta-primary-50);
}

[data-theme="dark"] .ifinsta-plan-comparison__highlighted {
    background: var(--ifinsta-primary-50);
}

.ifinsta-plan-comparison__check {
    color: var(--ifinsta-success-500);
}

.ifinsta-plan-comparison__value {
    color: var(--ifinsta-text-primary);
}

.ifinsta-plan-comparison__empty {
    color: var(--ifinsta-text-muted);
}

/* -----------------------------------------------------------------------------
   FAQ
   ----------------------------------------------------------------------------- */
.ifinsta-faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--ifinsta-space-5);
    margin: 0;
}

.ifinsta-faq__item dt {
    margin-bottom: var(--ifinsta-space-1);
    font: var(--ifinsta-text-label);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
}

.ifinsta-faq__item dd {
    margin: 0;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-secondary);
}

/* -----------------------------------------------------------------------------
   Invoice / money summaries
   ----------------------------------------------------------------------------- */
.ifinsta-money-rows {
    margin: 0;
}

.ifinsta-money-rows__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ifinsta-space-4);
    padding: var(--ifinsta-space-2-5) 0;
    border-top: 1px solid var(--ifinsta-border);
}

.ifinsta-money-rows__row:first-child {
    border-top: none;
}

.ifinsta-money-rows__row--total {
    border-top: 1px solid var(--ifinsta-border);
    padding-top: var(--ifinsta-space-3);
}

.ifinsta-money-rows dt {
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-money-rows dd {
    margin: 0;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-primary);
    text-align: right;
}

.ifinsta-money-rows__row--total dt {
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
}

.ifinsta-money-rows__row--total dd {
    font: var(--ifinsta-text-h3);
    color: var(--ifinsta-text-primary);
}

/* -----------------------------------------------------------------------------
   Outcome screens (payment status, checkout success, cancel)
   ----------------------------------------------------------------------------- */
.ifinsta-outcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ifinsta-space-3);
    max-width: 34rem;
    margin: 0 auto;
    padding: var(--ifinsta-space-10) var(--ifinsta-space-6);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-xl);
    background:
        linear-gradient(160deg, var(--ifinsta-primary-50) 0%, var(--ifinsta-surface) 55%),
        var(--ifinsta-surface);
    text-align: center;
}

.ifinsta-outcome__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-surface);
    border: 1px solid var(--ifinsta-border);
    color: var(--ifinsta-primary);
    font-size: 30px;
}

.ifinsta-outcome--ok .ifinsta-outcome__icon {
    color: var(--ifinsta-success-500);
}

.ifinsta-outcome--warn .ifinsta-outcome__icon {
    color: var(--ifinsta-warning-500);
}

.ifinsta-outcome--error .ifinsta-outcome__icon {
    color: var(--ifinsta-danger-500);
}

.ifinsta-outcome__title {
    margin: 0;
    font: var(--ifinsta-text-h1);
    color: var(--ifinsta-text-primary);
}

.ifinsta-outcome__text {
    margin: 0;
    max-width: 46ch;
    font: var(--ifinsta-text-body);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-outcome__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ifinsta-space-2);
    margin-top: var(--ifinsta-space-2);
}

.ifinsta-outcome__detail {
    width: 100%;
    margin-top: var(--ifinsta-space-4);
    padding: var(--ifinsta-space-4);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
    text-align: left;
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .ifinsta-billing-switch {
        width: 100%;
    }

    .ifinsta-billing-switch__btn {
        flex: 1;
        justify-content: center;
    }
}

/* Polling line under an outcome card. */
.ifinsta-outcome__poll {
    font: var(--ifinsta-text-caption);
}

.ifinsta-outcome__poll strong {
    color: var(--ifinsta-primary);
}

/* Spinner for the pending payment state. */
.ifinsta-outcome__spin {
    animation: ifinsta-outcome-spin 1.1s linear infinite;
}

@keyframes ifinsta-outcome-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ifinsta-outcome__spin { animation: none; }
}

/* -----------------------------------------------------------------------------
   Vertical step list (verification progress)
   ----------------------------------------------------------------------------- */
.ifinsta-steps {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-3);
    margin: var(--ifinsta-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.ifinsta-steps__item {
    display: flex;
    align-items: flex-start;
    gap: var(--ifinsta-space-3);
}

.ifinsta-steps__marker {
    font-size: 20px;
    flex: 0 0 auto;
    color: var(--ifinsta-gray-400);
}

.ifinsta-steps__item--done .ifinsta-steps__marker {
    color: var(--ifinsta-success-500);
}

.ifinsta-steps__item--active .ifinsta-steps__marker {
    color: var(--ifinsta-primary);
    animation: ifinsta-outcome-spin 1.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ifinsta-steps__item--active .ifinsta-steps__marker { animation: none; }
}

.ifinsta-steps__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ifinsta-steps__title {
    font: var(--ifinsta-text-body-sm);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
}

.ifinsta-steps__text {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

/* -----------------------------------------------------------------------------
   Subscription checkout (Capybara adapter)
   ----------------------------------------------------------------------------- */
.ifinsta-subscription-checkout {
    width: 100%;
    box-sizing: border-box;
    margin-inline: auto;
    padding: var(--ifinsta-space-6);
}

.ifinsta-subscription-checkout .ifinsta-subscription-breadcrumb {
    align-self: flex-start;
    margin-bottom: 0;
}

.ifinsta-subscription-checkout .ifinsta-checkout-grid {
    width: 100%;
}

.ifinsta-subscription-checkout__currency-control,
.ifinsta-subscription-checkout__currency-control .ifinsta-smart-select {
    width: 100%;
}

.ifinsta-subscription-checkout__currency-control .ifinsta-smart-select__control {
    min-height: var(--ifinsta-touch-target-lg);
    padding-inline: var(--ifinsta-space-4);
    border: var(--ifinsta-border-width) solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
    color: var(--ifinsta-text-primary);
    font: var(--ifinsta-text-body);
    transition: border-color var(--ifinsta-duration-fast) var(--ifinsta-ease-out);
}

.ifinsta-subscription-checkout__currency-control .ifinsta-smart-select__control:hover {
    border-color: var(--ifinsta-border-focus);
}

.ifinsta-subscription-checkout__currency-control .ifinsta-smart-select:focus-within .ifinsta-smart-select__control {
    border-color: var(--ifinsta-primary);
    outline: var(--ifinsta-focus-outline);
    outline-offset: var(--ifinsta-focus-ring-offset);
}

.ifinsta-subscription-checkout__currency-control .ifinsta-smart-select--open .ifinsta-smart-select__control {
    border-radius: var(--ifinsta-radius-lg) var(--ifinsta-radius-lg) 0 0;
    outline-offset: 0;
}

.ifinsta-subscription-checkout__currency-control .ifinsta-smart-select--open.ifinsta-smart-select--above .ifinsta-smart-select__control {
    border-radius: 0 0 var(--ifinsta-radius-lg) var(--ifinsta-radius-lg);
}

.ifinsta-subscription-checkout .ifinsta-checkout-form,
.ifinsta-subscription-checkout .ifinsta-checkout-summary {
    border: var(--ifinsta-border-width) solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
}

.ifinsta-subscription-checkout__trial-banner {
    grid-column: 1 / -1;
    margin-bottom: var(--ifinsta-space-4);
    border-color: var(--ifinsta-success-500);
    background: var(--ifinsta-success-50);
}

.ifinsta-subscription-checkout__trial-banner svg {
    flex: 0 0 auto;
    color: var(--ifinsta-success-700);
}

.ifinsta-subscription-checkout__trial-banner p {
    margin: var(--ifinsta-space-1) 0 0;
}

.ifinsta-subscription-checkout__future-methods {
    display: flex;
    grid-column: 1 / -1;
    flex-direction: column;
    gap: var(--ifinsta-space-3);
    padding-top: var(--ifinsta-space-2);
}

.ifinsta-subscription-checkout__future-methods-head h2 {
    margin: 0;
    font: var(--ifinsta-text-label);
    color: var(--ifinsta-text-primary);
}

.ifinsta-subscription-checkout__future-methods-head p {
    margin: var(--ifinsta-space-1) 0 0;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-checkout-summary__icon--professional {
    background: var(--ifinsta-text-primary);
    color: var(--ifinsta-white);
}

.ifinsta-subscription-checkout__due-amount {
    color: var(--ifinsta-primary);
}

.ifinsta-subscription-checkout__trust {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-2);
    margin-top: var(--ifinsta-space-6);
    padding-top: var(--ifinsta-space-6);
    border-top: var(--ifinsta-border-width) solid var(--ifinsta-border);
}

.ifinsta-subscription-checkout__trust-row {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-subscription-checkout__trial-summary {
    margin-top: var(--ifinsta-space-4);
    border: var(--ifinsta-border-width) solid var(--ifinsta-success-100);
    background: var(--ifinsta-success-50);
    color: var(--ifinsta-success-800);
}

.ifinsta-subscription-checkout__trial-summary strong {
    display: block;
    margin-bottom: var(--ifinsta-space-1);
}