/* =========================================================
   FGenio Registration — Membership Pricing
   Scoped only to registration Step 2
   ========================================================= */

.registration-step-two {
    width: 100%;
}

/* ---------------------------------------------------------
   Glass Navy Plan Cards
   --------------------------------------------------------- */

.registration-step-two .registration-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(7, 24, 58, .90) 0%,
            rgba(10, 31, 72, .82) 48%,
            rgba(6, 20, 50, .76) 100%
        );

    border: 1px solid rgba(92, 151, 255, .42);
    border-radius: 18px;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    box-shadow:
        0 22px 58px rgba(0, 0, 0, .74),
        0 8px 25px rgba(0, 0, 0, .52),
        0 0 18px rgba(55, 119, 255, .09),
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 0 34px rgba(35, 94, 210, .10);

    transition:
        border-color .18s ease;
}

.registration-step-two .registration-plan-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(0, 217, 245, .075),
            transparent 31%,
            transparent 69%,
            rgba(120, 69, 235, .08)
        );
}

.registration-step-two .registration-plan-card > * {
    position: relative;
    z-index: 1;
}

.registration-step-two .registration-plan-card:hover {
    transform: none;
    border-color: rgba(94, 159, 255, .68);
}

/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */

.registration-step-two .registration-plan-card h4 {
    font-size: 1.35rem;
}

.registration-step-two .registration-plan-card p,
.registration-step-two .registration-plan-card .fgen-list {
    font-size: 1.05rem;
}

/* Price — closer to homepage pricing hierarchy */
.registration-step-two .registration-plan-card .price {
    font-size: 2.65rem;
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -.035em;
}

.registration-step-two .registration-plan-card .price small {
    font-size: .95rem;
    letter-spacing: 0;
    font-weight: 400;
}

.registration-step-two .registration-plan-card .yearly-note {
    display: block;
    margin-top: .45rem;
    font-size: .88rem;
    line-height: 1.25;
}

/* ---------------------------------------------------------
   Benefits
   --------------------------------------------------------- */

.registration-step-two .registration-plan-card .fgen-list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    min-height: 2.25rem;
    padding-block: .24rem;
    line-height: 1.55;
}

/* Green checks */
.registration-step-two .registration-plan-card .fgen-list li > i {
    flex: 0 0 auto;
    color: #39d98a !important;
    font-size: 1.15rem;
    line-height: 1.45;
}

/* ---------------------------------------------------------
   Keep buttons of top 3 cards aligned at bottom
   --------------------------------------------------------- */

.registration-step-two .registration-plan-card .registration-plan-action {
    margin-top: auto !important;
    padding-top: 1.35rem;
}

/* ---------------------------------------------------------
   Wide bottom plan
   --------------------------------------------------------- */

.registration-step-two .registration-plan-card-wide {
    display: grid;
    grid-template-columns: minmax(220px, .78fr) minmax(0, 2.1fr);
    grid-template-areas:
        "info benefits"
        "action benefits";
    column-gap: 2rem;
    align-items: start;
}

.registration-step-two .registration-plan-card-wide > .d-flex:first-child {
    grid-area: info;
}

.registration-step-two .registration-plan-card-wide > .price {
    grid-area: info;
    margin-top: 3.25rem;
    align-self: start;
}

/*
  Short description is deliberately kept in the left information area.
*/
.registration-step-two .registration-plan-card-wide > p {
    grid-area: info;
    margin-top: 7rem;
}

.registration-step-two .registration-plan-card-wide > .registration-benefits-wrap {
    grid-area: benefits;
    align-self: start;
    margin-top: 0 !important;
}

.registration-step-two .registration-plan-card-wide .registration-wide-benefits {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows:
        repeat(var(--registration-benefit-rows), minmax(2.4rem, auto));
    grid-auto-columns: minmax(0, 1fr);

    column-gap: 2rem;
    row-gap: .3rem;

    margin-top: 0 !important;
    align-self: start;
}

/*
  6 benefits  => 3 left + 3 right
  7 benefits  => 4 left + 3 right
  because --registration-benefit-rows is calculated in Blade.
*/

.registration-step-two .registration-plan-card-wide .registration-plan-action {
    grid-area: action;
    width: min(210px, 100%);
    margin-top: 1.35rem !important;
    padding-top: 0;
}

.registration-step-two .registration-plan-card-wide .registration-plan-action .btn {
    width: 100% !important;
}

/* ---------------------------------------------------------
   Billing Switch — one line / larger / blue
   --------------------------------------------------------- */

.registration-step-two .billing-switch-wrap {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    gap: .7rem;

    width: auto;
    max-width: 100%;
    white-space: nowrap;

    font-size: 1.05rem;
}

.registration-step-two .billing-switch-label,
.registration-step-two .billing-save {
    white-space: nowrap;
}

.registration-step-two .billing-save {
    font-size: .95rem;
}

.registration-step-two .billing-switch-wrap .form-check {
    flex: 0 0 auto;
}

.registration-step-two .billing-switch-wrap .form-check-input {
    width: 2.9rem;
    height: 1.45rem;
    margin-top: 0;

    background-color: rgba(63, 107, 185, .55);
    border-color: rgba(93, 151, 255, .72);
}

.registration-step-two .billing-switch-wrap .form-check-input:checked {
    background-color: #2997ff;
    border-color: #2997ff;
}

.registration-step-two .billing-switch-wrap .form-check-input:focus {
    border-color: #2997ff;
    box-shadow: 0 0 0 .2rem rgba(41, 151, 255, .18);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
    .registration-step-two .registration-plan-card-wide {
        grid-template-columns: 1fr;
        grid-template-areas:
            "info"
            "benefits"
            "action";
    }

    .registration-step-two .registration-plan-card-wide > .price,
    .registration-step-two .registration-plan-card-wide > p {
        grid-area: auto;
        margin-top: 0;
    }

    .registration-step-two .registration-plan-card-wide .registration-wide-benefits {
        grid-area: benefits;
        margin-top: 1rem !important;
    }

    .registration-step-two .registration-plan-card-wide .registration-plan-action {
        grid-area: action;
        width: 220px;
    }
}

@media (max-width: 575.98px) {
    .registration-step-two .billing-switch-wrap {
        gap: .45rem;
        font-size: .95rem;
    }

    .registration-step-two .billing-save {
        font-size: .82rem;
    }

    .registration-step-two .registration-plan-card .price {
        font-size: 2.25rem;
    }

    .registration-step-two .registration-plan-card-wide .registration-wide-benefits {
        display: block;
    }

    .registration-step-two .registration-plan-card-wide .registration-plan-action {
        width: 100%;
    }
}

/* =========================================================
   Registration Pricing Refinements
   ========================================================= */

/* Darker navy + slightly more transparent glass */
.registration-step-two .registration-plan-card {
    background:
        linear-gradient(
            145deg,
            rgba(3, 13, 35, .78) 0%,
            rgba(5, 20, 48, .72) 48%,
            rgba(2, 10, 29, .68) 100%
        );

    border-color: rgba(83, 137, 238, .38);

    box-shadow:
        0 22px 58px rgba(0, 0, 0, .76),
        0 8px 25px rgba(0, 0, 0, .54),
        0 0 17px rgba(42, 104, 225, .075),
        inset 0 1px 0 rgba(255, 255, 255, .11),
        inset 0 0 32px rgba(28, 76, 178, .07);
}

/* Normal card copy */
.registration-step-two .registration-plan-card p,
.registration-step-two .registration-plan-card .fgen-list {
    font-size: .94rem;
}

/* Slightly tighter benefit rows */
.registration-step-two .registration-plan-card .fgen-list li {
    min-height: 1.95rem;
    padding-block: .12rem;
    line-height: 1.42;
}

/* Keep green check */
.registration-step-two .registration-plan-card .fgen-list li > i {
    color: #39d98a !important;
}

/* Mobile expander is hidden on tablet/desktop */
.registration-step-two .registration-benefits-toggle {
    display: none;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 575.98px) {

    .registration-step-two .registration-plan-card p,
    .registration-step-two .registration-plan-card .fgen-list {
        font-size: .93rem;
    }

    .registration-step-two .registration-plan-card .fgen-list li {
        min-height: 1.8rem;
        padding-block: .08rem;
        line-height: 1.36;
    }

    /*
     * Wide plans become normal vertical benefit lists on mobile,
     * then the same 3-item expander applies.
     */
    .registration-step-two .registration-plan-card-wide .registration-wide-benefits {
        display: block;
    }

    .registration-step-two
    .registration-benefits-wrap:not(.is-expanded)
    .registration-mobile-extra-benefit {
        display: none !important;
    }

    .registration-step-two
    .registration-benefits-wrap.is-expanded
    .registration-mobile-extra-benefit {
        display: flex !important;
    }

    .registration-step-two .registration-benefits-toggle {
        display: flex;
        width: 100%;
        height: 30px;
        margin: .2rem 0 0;
        padding: 0;

        align-items: center;
        justify-content: center;

        color: rgba(255,255,255,.72);
        background: transparent;
        border: 0;
        outline: 0;
        box-shadow: none;

        cursor: pointer;
    }

    .registration-step-two .registration-benefits-toggle i {
        font-size: 1.55rem;
        line-height: 1;
        transition: transform .18s ease;
    }

    .registration-step-two
    .registration-benefits-wrap.is-expanded
    .registration-benefits-toggle i {
        transform: rotate(180deg);
    }
}

@media (max-width: 575.98px) {
    .registration-step-two
    input[data-registration-membership-control] + label.btn {
        padding-top: .42rem !important;
        padding-bottom: .42rem !important;
        padding-left: 1.15rem !important;
        padding-right: 1.15rem !important;
        line-height: 1.25;
    }
}

@media (max-width: 575.98px) {

    .registration-step-two .registration-plan-card-wide {
        display: flex;
        flex-direction: column;
    }

    .registration-step-two
    .registration-plan-card-wide
    .registration-benefits-wrap {
        order: 10;
        width: 100%;
    }

    .registration-step-two
    .registration-plan-card-wide
    .registration-plan-action {
        order: 20;
        width: 100%;
        margin-top: .75rem !important;
        padding-top: 0;
    }
}

/* Leader Publisher horizontal benefit layout: 5 + 6 */
@media (min-width: 992px) {
    .registration-step-two
    .registration-plan-card-wide
    .registration-benefits-row-layout {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-template-rows: auto auto;
        column-gap: 1rem;
        row-gap: .45rem;
    }

    .registration-step-two
    .registration-plan-card-wide
    .registration-benefits-row-layout
    li[data-benefit-row="first"] {
        grid-row: 1;
    }

    .registration-step-two
    .registration-plan-card-wide
    .registration-benefits-row-layout
    li[data-benefit-row="second"] {
        grid-row: 2;
    }

    .registration-step-two
    .registration-plan-card-wide
    .registration-benefits-row-layout
    li[data-benefit-row="first"]:first-child {
        grid-column: 1;
    }

    .registration-step-two
    .registration-plan-card-wide
    .registration-benefits-row-layout
    li {
        min-width: 0;
    }
}

/* Leader Publisher: 5 benefits left + 6 benefits right */
@media (min-width: 992px) {
    .registration-step-two
    .registration-plan-card-wide
    .registration-benefits-row-layout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(6, auto);
        grid-auto-flow: row;
        column-gap: 2.25rem;
        row-gap: .22rem;
        align-items: start;
    }

    .registration-step-two
    .registration-plan-card-wide
    .registration-benefits-row-layout
    li[data-benefit-column="left"] {
        grid-column: 1;
        grid-row: calc(var(--benefit-index) + 1);
    }

    .registration-step-two
    .registration-plan-card-wide
    .registration-benefits-row-layout
    li[data-benefit-column="right"] {
        grid-column: 2;
        grid-row: calc(var(--benefit-index) - 4);
    }
}

/* Registration plan secondary copy */
.registration-step-two .registration-plan-card > p,
.registration-step-two .registration-plan-card .fgen-list li {
    color: #94a8c1 !important;
}

/* Keep benefit check icons green */
.registration-step-two .registration-plan-card .fgen-list li > i {
    color: #39d98a !important;
}


/* Registration cards — tighter spacing without breaking CTA alignment */
.registration-step-two .registration-plan-card .fgen-list {
    margin-top: .75rem !important;
    margin-bottom: 0 !important;
}

.registration-step-two .registration-plan-card .registration-plan-action {
    margin-top: auto !important;
    padding-top: .68rem !important;
}

/* =========================================================
   Registration Step 2 Control Bar
   ========================================================= */

.registration-step-two .registration-control-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 1rem;

    width: 100%;
    padding: .7rem .9rem;

    border: 1px solid rgba(83, 137, 238, .28);
    border-radius: 14px;

    background: rgba(3, 13, 35, .55);

    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    box-shadow:
        0 12px 34px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

.registration-step-two .registration-control-section {
    display: flex;
    align-items: center;
    min-width: 0;
}

.registration-step-two .registration-control-section + .registration-control-section {
    position: relative;
    padding-left: 1rem;
}

.registration-step-two .registration-control-section + .registration-control-section::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    width: 1px;
    height: 60%;
    background: rgba(148, 168, 193, .20);
}

.registration-step-two .registration-control-membership .btn {
    padding: .46rem 1rem;
    line-height: 1.2;
    white-space: nowrap;
}

.registration-step-two .registration-control-bar .lang-switcher-btn {
    white-space: nowrap;
}

.registration-step-two .registration-control-bar .billing-switch-wrap {
    margin: 0;
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
    .registration-step-two .registration-control-bar {
        gap: .6rem;
        padding-inline: .7rem;
    }

    .registration-step-two .registration-control-section + .registration-control-section {
        padding-left: .6rem;
    }

    .registration-step-two .registration-control-membership .btn {
        padding-inline: .65rem;
    }

    .registration-step-two .registration-control-bar .billing-switch-wrap {
        gap: .4rem;
        font-size: .94rem;
    }

    .registration-step-two .registration-control-bar .billing-save {
        font-size: .82rem;
    }
}

/* Mobile keeps the existing registration controls,
   language/currency remain hidden for now. */
@media (max-width: 575.98px) {
    .registration-step-two .registration-control-bar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;

        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .registration-step-two .registration-control-section {
        justify-content: center;
        width: 100%;
    }

    .registration-step-two .registration-control-section + .registration-control-section {
        padding-left: 0;
    }

    .registration-step-two .registration-control-section + .registration-control-section::before {
        display: none;
    }

    .registration-step-two .registration-control-billing {
        order: 2;
    }

    .registration-step-two .registration-control-membership {
        order: 1;
    }
}

/* =========================================================
   Registration Control Bar — Desktop positioning
   Billing = left / Membership = center / Locale+Currency = right
   ========================================================= */

@media (min-width: 992px) {
    .registration-step-two .registration-control-bar {
        position: relative;
        justify-content: flex-start;
        gap: 0;
    }

    /* Billing: left */
    .registration-step-two .registration-control-billing {
        margin-right: auto;
    }

    /* Membership: true center */
    .registration-step-two .registration-control-membership {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Language: start right-side cluster */
    .registration-step-two .registration-control-language {
        margin-left: auto;
        padding-left: 0 !important;
    }

    .registration-step-two .registration-control-language::before {
        display: none;
    }

    /* Currency stays close to language */
    .registration-step-two .registration-control-currency {
        margin-left: .35rem;
        padding-left: .35rem !important;
    }

    .registration-step-two .registration-control-currency::before {
        display: none;
    }
}

/* Registration controls — stable 3-zone desktop layout */
@media (min-width: 992px) {
    .registration-step-two .registration-control-bar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 1rem;
    }

    .registration-step-two .registration-control-billing {
        grid-column: 1;
        justify-self: start;
        margin: 0;
    }

    .registration-step-two .registration-control-membership {
        grid-column: 2;
        position: static;
        left: auto;
        transform: none;
        justify-self: center;
        margin: 0;
        padding-left: 0 !important;
    }

    .registration-step-two .registration-control-membership::before {
        display: none;
    }

    .registration-step-two .registration-control-right {
        grid-column: 3;
        justify-self: end;
        align-items: center;
        gap: .35rem;
        margin: 0;
    }

    .registration-step-two .registration-control-language,
    .registration-step-two .registration-control-currency {
        margin: 0 !important;
        padding-left: 0 !important;
    }

    .registration-step-two .registration-control-language::before,
    .registration-step-two .registration-control-currency::before {
        display: none !important;
    }
}

@media (max-width: 575.98px) {

    .registration-step-two .registration-control-bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: .55rem;
    }

    /* Trader / Publisher stays on its own row */
    .registration-step-two .registration-control-membership {
        grid-row: 1;
        width: 100%;
        justify-content: center;
    }

    /*
     * Billing + Language + Currency in one mobile row
     */
    .registration-step-two .registration-control-billing {
        grid-row: 2;
        width: auto;
        justify-self: start;
        align-self: center;
    }

    .registration-step-two .registration-control-right {
        grid-row: 2;
        justify-self: end;
        align-self: center;

        display: flex !important;
        align-items: center;
        gap: .25rem;

        width: auto;
    }

    .registration-step-two .registration-control-language,
    .registration-step-two .registration-control-currency {
        display: flex !important;
        width: auto;
    }

    .registration-step-two .registration-control-bar .billing-switch-wrap {
        gap: .3rem;
        font-size: .88rem;
    }

    .registration-step-two .registration-control-bar .billing-switch-label {
        font-size: .88rem;
    }

    .registration-step-two
    .registration-control-bar
    .billing-switch-wrap
    .form-check-input {
        width: 2.45rem;
        height: 1.25rem;
    }

    .registration-step-two .registration-control-right .lang-switcher-btn {
        padding: .34rem .48rem;
        font-size: .86rem;
        line-height: 1.2;
    }

    .registration-step-two .registration-control-right .dropdown-toggle::after {
        margin-left: .25rem;
    }
}

@media (max-width: 575.98px) {

    /* Trader / Publisher row */
    .registration-step-two .registration-control-membership {
        justify-self: center;
        justify-content: center;
        width: auto;
    }

    /* M/Y + Language + Currency row */
    .registration-step-two .registration-control-billing {
        justify-self: center;
    }

    .registration-step-two .registration-control-right {
        justify-self: center;
    }

    .registration-step-two .registration-control-bar {
        justify-items: center;
    }
}

/* Exact centering of both registration control rows on mobile */
@media (max-width: 575.98px) {

    .registration-step-two .registration-control-bar {
        display: grid !important;
        grid-template-columns: auto auto !important;
        justify-content: center !important;
        justify-items: initial !important;
        align-items: center;
        column-gap: .45rem;
        row-gap: .55rem;
        width: 100%;
    }

    /* Row 1: Trader / Publisher exactly centered */
    .registration-step-two .registration-control-membership {
        grid-row: 1;
        grid-column: 1 / -1;
        justify-self: center !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Row 2 left side: M / Y */
    .registration-step-two .registration-control-billing {
        grid-row: 2;
        grid-column: 1;
        justify-self: end !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Row 2 right side: Language + Currency */
    .registration-step-two .registration-control-right {
        grid-row: 2;
        grid-column: 2;
        justify-self: start !important;
        width: auto !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        gap: .25rem;
    }
}

@media (max-width: 575.98px) {
    .registration-step-two
    .registration-control-billing
    .billing-switch-label:first-child {
        margin-right: .3rem;
    }
}

/* Keep language/currency dropdowns above pricing cards */
.registration-step-two .registration-control-bar {
    position: relative;
    z-index: 50;
    overflow: visible;
}

.registration-step-two .registration-control-right,
.registration-step-two .registration-control-language,
.registration-step-two .registration-control-currency,
.registration-step-two .registration-control-right .dropdown {
    position: relative;
    z-index: 60;
    overflow: visible;
}

.registration-step-two .registration-control-right .dropdown-menu {
    z-index: 2000 !important;
}

.registration-step-two [data-registration-plan-group] {
    position: relative;
    z-index: 1;
}

.registration-step-two .registration-plan-card {
    z-index: 1;
}

/* RTL registration membership selector */
html[dir="rtl"]
.registration-step-two
.registration-control-membership
.btn-group {
    gap: .35rem;
}

html[dir="rtl"]
.registration-step-two
.registration-control-membership
.btn-group > .btn,
html[dir="rtl"]
.registration-step-two
.registration-control-membership
.btn-group > input + .btn {
    border-radius: .375rem !important;
    margin: 0 !important;
}

@media (max-width: 575.98px) {

    /* Space between Y and billing toggle */
    .registration-step-two
    .registration-control-billing
    .billing-switch-label:last-child {
        margin-left: .3rem;
    }

    /* More breathing room between billing and language/currency */
    .registration-step-two .registration-control-bar {
        column-gap: .9rem !important;
    }

    .registration-step-two .registration-control-right {
        margin-left: .25rem !important;
    }
}

/* Final mobile spacing override */
@media (max-width: 575.98px) {

    /* Billing group <> Language/Currency group */
    .registration-step-two .registration-control-bar {
        column-gap: 1.4rem !important;
    }

    /* M <> toggle <> Y */
    .registration-step-two
    .registration-control-billing
    .billing-switch-wrap {
        display: flex !important;
        align-items: center !important;
        gap: .55rem !important;
    }

    /* Remove previous individual margins; gap controls spacing */
    .registration-step-two
    .registration-control-billing
    .billing-switch-label {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .registration-step-two .registration-control-right {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Registration plan card title */
.registration-step-two .registration-plan-card h5 {
    font-size: 1.2rem;
}

/* Registration Step 2 — performance isolation test */
.registration-step-two .registration-plan-card {
    box-shadow: none !important;
    transition: none !important;
}

.registration-step-two .registration-plan-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.registration-step-two .registration-plan-card::before {
    display: none !important;
}