/* ==========================================================================
   Subscription popup (components/common/SubscriptionUpgradeModal.vue): opened by
   My Account → Subscriptions "Update Seats" / "Subscribe" and by the header's Upgrade.
   It mounts on <body>, outside .pp-shell, so every rule keys off its id. Its scoped styles
   and main.css (.color-pink #ff005e !important) paint it the classic pink/purple.
   ========================================================================== */

/* ---------- Head ---------- */
html.pie-premium #subscriptionUpgradeModal .modal-header {
    align-items: center;
    padding: 24px 28px 6px;
}

html.pie-premium #subscriptionUpgradeModal .modal-title {
    display: flex;
    align-items: center;
    margin: 0;
    font: 20px/1.2 var(--pp-bold);
    letter-spacing: -.01em;
    color: var(--pp-ink);
}

html.pie-premium #subscriptionUpgradeModal .modal-title > .fa {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    margin-right: 12px !important;
    border-radius: 10px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc) !important;
    font-size: 15px;
}

html.pie-premium #subscriptionUpgradeModal .modal-header .btn-close {
    width: 36px;
    height: 36px;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 999px;
    background-size: 12px;
    opacity: .6;
}

html.pie-premium #subscriptionUpgradeModal .modal-header .btn-close:hover {
    background-color: var(--pp-hover);
    opacity: 1;
}

html.pie-premium #subscriptionUpgradeModal .modal-body {
    padding: 14px 28px 24px;
}

/* ---------- Accent: classic pink/purple → new-look accent ---------- */
html.pie-premium #subscriptionUpgradeModal .color-pink,
html.pie-premium #subscriptionUpgradeModal .plan-price {
    color: var(--pp-acc) !important;
}

html.pie-premium #subscriptionUpgradeModal .btn-brand {
    border-color: var(--pp-acc);
    color: var(--pp-acc);
}

html.pie-premium #subscriptionUpgradeModal .btn-brand:is(:hover, :focus) {
    border-color: var(--pp-acc);
    background: var(--pp-acc);
    color: #fff;
}

html.pie-premium #subscriptionUpgradeModal .btn-brand:disabled {
    background: transparent;
    color: var(--pp-acc);
}

/* ---------- Step: Select Payment Schedule ---------- */
html.pie-premium #subscriptionUpgradeModal .frequency-selection-step > .mb-3:first-child h5 {
    margin-bottom: 6px !important;
    font: 18px/1.3 var(--pp-bold);
    color: var(--pp-ink);
}

html.pie-premium #subscriptionUpgradeModal .frequency-selection-step > .mb-3:first-child small {
    font-size: 12.5px;
    color: var(--pp-ink-3) !important;
}

html.pie-premium #subscriptionUpgradeModal .frequency-selection-step > .mb-3:first-child small.text-danger {
    color: var(--pp-acc) !important;
}

html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card {
    margin-bottom: 8px !important;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: #fff;
    transition: border-color .15s, background-color .15s;
}

html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card:hover {
    border-color: var(--pp-acc-line);
}

html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card:has(input[type="radio"]:checked) {
    border-color: var(--pp-acc);
    background: color-mix(in srgb, var(--pp-acc) 4%, #fff);
}

html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card-body {
    padding: 12px 18px !important;
}

/* Radio: grey ring, accent ring when chosen (same as the dashboard radios) */
html.pie-premium #subscriptionUpgradeModal .custome-radiobtn .checkmark {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--pp-line-2);
    background: #fff;
}

html.pie-premium #subscriptionUpgradeModal .custome-radiobtn input[type="radio"]:checked ~ .checkmark {
    border: 5px solid var(--pp-acc) !important;
    background: #fff;
}

html.pie-premium #subscriptionUpgradeModal .custome-radiobtn .checkmark::after {
    display: none;
}

html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .sub-name {
    font: 15px/1.3 var(--pp-bold);
    color: var(--pp-ink);
}

html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card h5 {
    font: 18px/1.2 var(--pp-bold);
    color: var(--pp-ink);
}

html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card h5.color-pink {
    color: var(--pp-acc) !important;
}

html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card .fs-11 {
    font-size: 11.5px !important;
}

html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card .fs-12 p {
    font-size: 11.5px;
    color: var(--pp-ink-3) !important;
}

html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card .fs-12 span {
    font: 14px var(--pp-bold);
    color: var(--pp-ink);
}

/* Seat counter: soft round steppers either side of the count */
html.pie-premium #subscriptionUpgradeModal .counter-container {
    gap: 6px;
}

html.pie-premium #subscriptionUpgradeModal .counter-container .btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 999px !important;
    background: var(--pp-panel-2) !important;
    box-shadow: none !important;
    color: var(--pp-ink) !important;
    font: 16px/1 var(--pp-bold) !important;
    letter-spacing: 0;
}

html.pie-premium #subscriptionUpgradeModal .counter-container .btn:hover {
    border-color: var(--pp-acc-line) !important;
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium #subscriptionUpgradeModal .counter-container .number {
    width: 48px !important;
    height: 32px;
    margin: 0 !important;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: #fff;
    color: var(--pp-ink);
    font: 14px var(--pp-bold);
}

/* "N seats will be added / removed" (inline color: red) */
html.pie-premium #subscriptionUpgradeModal .counter-container ~ .fs-11 {
    color: var(--pp-acc) !important;
}

/* Footer: Back link, Confirm the order */
html.pie-premium #subscriptionUpgradeModal .frequency-selection-step > .mt-3 {
    align-items: center;
    margin-top: 18px !important;
}

html.pie-premium #subscriptionUpgradeModal .frequency-selection-step > .mt-3 > a {
    display: inline-flex;
    align-items: center;
    font: 13.5px var(--pp-bold);
    text-decoration: none;
}

/* Same primary pill on every step's footer (Order Summary "Proceed to Checkout", Checkout
   "Pay & Subscribe") and on the card form's "Add card"; they kept the classic purple */
html.pie-premium #subscriptionUpgradeModal :is(.frequency-selection-step, .order-summary-step, .checkout-step) > .mt-3 > .btn-primary,
html.pie-premium #subscriptionUpgradeModal .add-btn.btn-primary {
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
    color: #fff;
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
}

/* Disabled until a schedule is picked: opacity-25 made it near invisible */
html.pie-premium #subscriptionUpgradeModal :is(.frequency-selection-step, .checkout-step) > .mt-3 > .btn-primary:disabled {
    opacity: 1 !important;
    background: var(--pp-line) !important;
    box-shadow: none;
    color: var(--pp-muted) !important;
    cursor: not-allowed;
    pointer-events: auto;
}

/* Inline max-width: 1140px fills the whole window below 1172px: keep a 16px gutter */
@media (min-width: 576px) {
    html.pie-premium #subscriptionUpgradeModal .modal-dialog {
        max-width: min(1140px, calc(100vw - 32px)) !important;
    }
}

/* Tablet: the 1-col "Current" / "Total" cells are ~40px wide and broke "Curre-nt";
   size them to their text and let the empty discount column give up the room */
@media (min-width: 768px) and (max-width: 1199px) {
    html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card .row > .col-md-1.fs-12 {
        flex: 0 0 auto;
        width: 64px;
        white-space: nowrap;
    }

    html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card .row > .col-md-2:not(:has(> *)) {
        flex: 1 1 0;
        width: auto;
    }

    html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card .row > .col-md-2:has(.counter-container) {
        flex: 0 0 auto;
        width: 160px;
    }

    /* No "Total" cell on this row: keep its room so the rows line up */
    html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card .row > .col-md-2:last-child {
        margin-right: 64px;
    }
}

@media (max-width: 767px) {
    html.pie-premium #subscriptionUpgradeModal .modal-header {
        padding: 18px 18px 4px;
    }

    html.pie-premium #subscriptionUpgradeModal .modal-body {
        padding: 12px 18px 18px;
    }

    html.pie-premium #subscriptionUpgradeModal .frequency-selection-step .card .row {
        row-gap: 10px;
    }
}