/* Signup wizard v2 desktop layout. Every rule is scoped to body.wizard-v2 and applies from 768px up,
   narrower screens keep the mobile rules of signup-wizard.css. Brand accents come from --main-color. */

@media (min-width: 768px) {

    /* Page frame and heading */
    .wizard-v2 .mpl__content-wrapper {
        width: calc(100% - 32px);
        max-width: 1248px;
        box-sizing: border-box;
        padding: 32px 24px;
    }

    .wizard-v2 .mpl__align-center-col h4 {
        margin: 12px 0 0;
        font-size: 16px;
        font-weight: 600;
    }

    /* Stepper */
    .wizard-v2 .wizard-container .wizard-navigation {
        background-color: #FAFAFA;
        padding: 16px 48px;
        margin: 20px 0 24px;
    }

    .wizard-v2 .wizard-container .wizard-divider {
        flex: 1 1 auto;
        padding: 0 16px;
    }

    .wizard-v2 .wizard-container .wizard-divider div {
        width: 100%;
        border-width: 1px 0 0;
    }

    .wizard-v2 .wizard-container .wizard-divider.done div {
        border-color: #212529;
    }

    .wizard-v2 .wizard-container .wizard-point.active,
    .wizard-v2 .wizard-container .wizard-point.done {
        color: #212529;
    }

    .wizard-v2 .wizard-container .wizard-point.active .wizard-icon,
    .wizard-v2 .wizard-container .wizard-point.done .wizard-icon {
        border-color: #212529;
    }

    .wizard-v2 .wizard-container .wizard-point.done .step-icon {
        display: block;
    }

    .wizard-v2 .wizard-container .wizard-point.done .step-done {
        display: none;
    }

    .wizard-v2 .wizard-container .wizard-point[data-step="billing-information"] .step-icon {
        display: none;
    }

    .wizard-v2 .wizard-container .wizard-point[data-step="billing-information"] .step-done {
        display: block;
    }

    .wizard-v2 .wizard-container .wizard-content {
        border-top: 1px solid #E8E8E8;
        padding-top: 24px;
    }

    /* Frequency switch */
    .wizard-v2 .select-services-card > .pb-cont-head {
        height: auto;
        border: 0;
        padding: 18px 0 16px;
        align-items: flex-end;
    }

    .wizard-v2 .subscription-type-radio-button {
        margin: 0 !important;
        padding: 0;
        border: 1px solid #E0E0E0;
        border-left-width: 0;
        background-color: #FFFFFF;
    }

    .wizard-v2 .subscription-type-radio-button:first-child {
        border-left-width: 1px;
    }

    .wizard-v2 .subscription-type-radio-button .radio_label {
        display: block;
        box-sizing: border-box;
        min-width: 122px;
        margin: 0;
        padding: 10px 16px 10px 42px;
        line-height: 24px;
    }

    .wizard-v2 .subscription-type-radio-button .radio_label:before {
        top: 12px;
        left: 12px;
    }

    .wizard-v2 .subscription-type-radio-button .radio_label:after {
        top: 16px;
        left: 16px;
    }

    .wizard-v2 .subscription-type-radio-button .radio_input:checked + .radio_label {
        background-color: color-mix(in srgb, var(--main-color) 8%, #FFFFFF);
    }

    .wizard-v2 .subscription-type-radio-button .subscription-discount {
        position: absolute;
        top: -13px;
        right: 8px;
        padding: 0 8px;
        font-size: 12px;
        line-height: 20px;
    }

    /* Select services card and bundle cards */
    .wizard-v2 .select-services-card {
        border: 0;
        box-shadow: none;
        min-height: 0;
    }

    .wizard-v2 .select-services-step.products-mode {
        border: 1px solid #E0E0E0;
        border-radius: 4px;
        padding: 0 20px 20px;
    }

    .wizard-v2 #templates-header {
        display: none;
    }

    .wizard-v2 #bundles-container {
        padding: 0;
    }

    .wizard-v2 #bundle-templates-container {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .wizard-v2 .bundle-templates-viewport {
        flex: 1 1 auto;
        display: flex;
    }

    .wizard-v2 #bundle-templates {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
    }

    .wizard-v2 #bundle-templates > div {
        flex-shrink: 0;
        width: calc(var(--bundle-page-count) * 100%);
    }

    .wizard-v2 #bundle-templates .pb-item-cont {
        width: calc(100% / var(--bundle-card-count) - 8px);
    }

    .wizard-v2 #own-bundle-container {
        flex: 0 0 calc((100% - 24px) / 4);
        margin-left: 0;
        display: flex;
    }

    .wizard-v2 #own-bundle-container:empty {
        display: none;
    }

    .wizard-v2 #own-bundle-container .pb-item-cont {
        width: 100%;
        margin-right: 0;
    }

    .wizard-v2 .pb-item-cont {
        box-sizing: border-box;
        min-width: 0;
        min-height: 380px;
        height: auto;
        margin: 0 8px 0 0;
        display: flex;
        flex-direction: column;
        box-shadow: none;
    }

    .wizard-v2 .pb-item-header {
        box-sizing: border-box;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 12px 16px;
    }

    .wizard-v2 #bundles-pagination-indicator:empty {
        display: none;
    }

    /* jQuery show() sets an inline display: block, which stacks the dots vertically */
    .wizard-v2 #bundles-pagination-indicator:not(:empty) {
        display: flex !important;
    }

    .wizard-v2 .pb-item-header .pb-v2-title {
        order: -1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 28px;
    }

    .wizard-v2 .pb-item-header .pb-v2-title .pb-pr-base-text {
        font-size: 14px;
        font-weight: 600;
    }

    .wizard-v2 .pb-item-header .pb-v2-price {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
    }

    .wizard-v2 .pb-item-header .pb-v2-price .pb-pr-total-price {
        margin: 0 6px 0 0;
        font-size: 24px;
    }

    .wizard-v2 .pb-item-header .pb-v2-price .pb-pr-pay-period {
        margin: 0;
        font-size: 14px;
        font-weight: 400;
    }

    .wizard-v2 .pb-popular {
        display: inline-block;
        padding: 4px 14px;
        border-radius: 16px;
        background-color: #111111;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    .wizard-v2 .pb-item-body {
        flex: 1 1 auto;
        height: auto;
        display: block;
        padding: 12px 16px;
        overflow: visible;
    }

    .wizard-v2 .pb-item-body .product-row {
        display: flex;
        align-items: flex-start;
        margin: 0;
        padding: 8px 0;
    }

    .wizard-v2 .pb-item-body .product-row > div:first-child {
        flex: 0 0 18px;
        margin-right: 10px;
    }

    .wizard-v2 .pb-item-body .pb-icon-selected {
        width: 18px;
        height: 18px;
        margin: 1px 0 0;
    }

    .wizard-v2 .pb-item-body .product-row-name {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        overflow: visible;
    }

    .wizard-v2 .pb-item-body .product-row-name span {
        margin-left: 0;
        vertical-align: baseline;
        font-size: 14px;
    }

    .wizard-v2 .pb-item-footer {
        height: auto;
        padding: 0 16px 16px;
    }

    .wizard-v2 .pb-item-btn {
        height: 40px;
        margin: 0;
    }

    .wizard-v2 .pb-own-item-body {
        flex: 1 1 auto;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 16px;
        font-size: 14px;
        color: #212529;
    }

    .wizard-v2 .pb-own-item-body span.material-icons-outlined {
        width: 44px;
        height: 44px;
        margin-bottom: 12px;
        border: 1px solid #E8E8E8;
        border-radius: 4px;
        background-color: #F5F6F8;
        color: #212529;
        font-size: 24px;
        line-height: 44px;
        text-align: center;
    }

    .wizard-v2 .pb-own-item-body .secondary-label {
        font-size: 14px;
        color: #212529;
    }

    /* Custom bundle: services list */
    .wizard-v2 #products-view > div > div:first-child {
        flex: 1 1 0;
        min-width: 0;
    }

    .wizard-v2 #products-view .link-button {
        display: none;
    }

    .wizard-v2 #products-container {
        width: auto;
        margin: 0;
    }

    .wizard-v2 #products-container .pb-cont-wizard {
        min-height: 0;
        box-shadow: none;
    }

    .wizard-v2 #products-container .pb-cont-head {
        box-sizing: border-box;
        height: auto;
        padding: 12px 16px;
        border-bottom: 1px dotted #E0E0E0;
    }

    .wizard-v2 #products-container .pb-cont-head .price-col,
    .wizard-v2 #products-container .free-trial-col {
        display: none;
    }

    .wizard-v2 #products-container .product-col {
        width: auto;
        flex: 1 1 auto;
    }

    .wizard-v2 #products-container .price-col {
        width: auto;
        font-weight: 600;
    }

    .wizard-v2 #products-list {
        height: auto;
        padding: 4px 16px;
    }

    .wizard-v2 #products-list .product-item {
        border-bottom: 0;
        padding: 8px 0;
    }

    .wizard-v2 #cart-container {
        flex: 1 1 0;
        min-width: 0;
        margin-left: 24px;
    }

    /* Cart card (shared by custom bundle, contact and billing steps).
       The card is flattened with display: contents so the static promo block can be ordered between the dynamic rows and the total. */
    .wizard-v2 .cart-card {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        border: 1px solid #E0E0E0;
        border-radius: 4px;
        background-color: #FFFFFF;
    }

    .wizard-v2 .cart-card .pr-crd-cont,
    .wizard-v2 .cart-card .cart-content {
        display: contents;
    }

    .wizard-v2 .cart-card .pr-crd-title {
        order: 0;
        height: auto;
        min-height: 44px;
        margin: 0;
        padding: 10px 16px;
        justify-content: space-between;
    }

    .wizard-v2 .cart-card .pr-crd-title .pb-pr-base-text {
        font-size: 14px;
        font-weight: 600;
    }

    .wizard-v2 .cart-card .pr-crd-title .cart-trial {
        font-size: 13px;
    }

    .wizard-v2 .cart-card .pr-crd-body {
        order: 1;
        flex: 0 0 auto;
        padding: 8px 16px;
    }

    .wizard-v2 .cart-card #selected-products {
        height: auto;
        overflow: visible;
    }

    .wizard-v2 .cart-card .empty-basket-container {
        order: 1;
        flex: 1 1 auto;
        height: auto;
        min-height: 240px;
    }

    .wizard-v2 .cart-card .basket-text {
        width: auto;
    }

    .wizard-v2 .pr-v2-row {
        display: flex;
        align-items: center;
        padding: 8px 0;
        font-size: 14px;
    }

    .wizard-v2 .pr-v2-row .pb-icon-selected {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }

    .wizard-v2 .pr-v2-row .pr-v2-name {
        flex: 1 1 auto;
    }

    .wizard-v2 .pr-v2-row .pr-v2-price b {
        margin-left: 10px;
        font-size: 14px;
        font-weight: 600;
    }

    .wizard-v2 .pr-v2-row .pr-v2-price .pb-pr-base-price-cr {
        margin-right: 0;
        font-size: 14px;
        font-weight: 400;
        color: #767676;
    }

    .wizard-v2 .pr-v2-row .pr-v2-included {
        color: var(--main-color);
    }

    .wizard-v2 .cart-card .discount-offer-message {
        order: 3;
        margin: auto 0 0;
        padding: 6px 16px;
        background-color: #4C9A4F;
        color: #FFFFFF;
        font-size: 12px;
    }

    .wizard-v2 .cart-card .discount-offer-message:before {
        content: "local_offer";
        display: inline-block;
        margin-right: 8px;
        vertical-align: middle;
        font-family: 'Material Icons Outlined';
        font-size: 16px;
    }

    .wizard-v2 .cart-card .discount-offer-message .discount-offer {
        color: #FFFFFF;
        font-weight: 700;
    }

    .wizard-v2 .cart-card .pr-promo-cont {
        order: 2;
        width: auto;
        margin: 0;
        padding: 12px 16px;
        border-top: 1px solid #EEEEEE;
        font-size: 14px;
    }

    .wizard-v2 .cart-card .pr-v2-total {
        order: 4;
        height: auto;
        margin-top: auto;
        padding: 12px 16px;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
    }

    .wizard-v2 .cart-card .discount-offer-message + .pr-v2-total {
        margin-top: 0;
    }

    .wizard-v2 .cart-card .pr-v2-total .pr-v2-total-label {
        font-size: 14px;
    }

    .wizard-v2 .cart-card .pr-v2-total .pr-v2-total-value {
        font-size: 16px;
        font-weight: 700;
    }

    .wizard-v2 .cart-card .pr-v2-total .pr-v2-period {
        font-size: 12px;
    }

    /* Contact and billing forms */
    .wizard-v2 #contact-info-form,
    .wizard-v2 #billing-info-form {
        border: 1px solid #E0E0E0;
        border-radius: 4px;
        padding-bottom: 16px;
    }

    .wizard-v2 #contact-info-form .pb-cont-wizard,
    .wizard-v2 #billing-info-form .pb-cont-wizard {
        border: 0;
        box-shadow: none;
        min-height: 0;
    }

    .wizard-v2 #contact-info-form .pb-cont-head,
    .wizard-v2 #billing-info-form .pb-cont-head {
        box-sizing: border-box;
        height: auto;
        padding: 16px 20px;
        border-bottom: 1px dotted #E0E0E0;
    }

    .wizard-v2 #contact-info-form .pb-cont-body,
    .wizard-v2 #billing-info-form .pb-cont-body {
        padding: 0 20px;
    }

    .wizard-v2 .cn-inf-container {
        margin-top: 20px;
    }

    .wizard-v2 .cn-inf-lf {
        flex: 1 1 50%;
        width: auto;
        min-width: 0;
        margin-right: 28px;
        padding-right: 28px;
        border-right: 1px solid #EEEEEE;
    }

    .wizard-v2 .cn-inf-rt {
        flex: 1 1 50%;
        width: auto;
        min-width: 0;
        align-items: stretch;
    }

    .wizard-v2 .inp-scope {
        margin: 0 0 16px;
    }

    .wizard-v2 .inp-title {
        padding-left: 0;
        font-size: 14px;
        line-height: 20px;
    }

    .wizard-v2 .req-mark {
        color: var(--main-color);
    }

    .wizard-v2 .inp-con-inf,
    .wizard-v2 .inp-bill-inf,
    .wizard-v2 .inp-con-promo {
        width: 100%;
        box-sizing: border-box;
        margin-top: 6px;
    }

    .wizard-v2 input[type="text"].wizard-input,
    .wizard-v2 input[type="password"].wizard-input {
        height: 36px;
    }

    .wizard-v2 .input-with-post-icon {
        width: auto;
    }

    .wizard-v2 .input-with-post-icon [class*=ic-] {
        top: 34px;
    }

    .wizard-v2 .promo-inp-bl .inp-scope {
        flex: 1 1 0;
        min-width: 0;
    }

    .wizard-v2 .promo-inp-bl .inp-scope:first-child {
        margin-right: 8px;
    }

    .wizard-v2 .con-inf-mb {
        display: block;
        padding-top: 16px;
        border-top: 1px dotted #E0E0E0;
        font-size: 14px;
        font-weight: 600;
    }

    .wizard-v2 #terms-checkbox-wz {
        width: auto;
        padding-right: 0;
    }

    .wizard-v2 #billing-preview {
        width: auto;
        margin: 8px 0 0;
        padding: 12px 16px;
        border-radius: 4px;
        background-color: #F1F3F6;
        font-size: 13px;
        line-height: 1.5;
    }

    .wizard-v2 #billing-preview:empty {
        display: none;
    }

    /* Buttons */
    .wizard-v2 .button-container {
        margin: 8px 20px 0;
        padding-top: 16px;
        border-top: 1px dotted #E0E0E0;
    }

    .wizard-v2 .select-services-step.products-mode .button-container {
        margin: 24px 0 0;
    }

    .wizard-v2 .button-container .btn {
        height: 36px;
        min-width: 156px;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 13px;
    }

    .wizard-v2 .button-container .btn.mr-16 {
        margin-right: 8px;
    }

    .wizard-v2 .button-container .con-inf-btn,
    .wizard-v2 .button-container .bill-inf-btn {
        width: auto;
    }
}