/* Visbl New Subscriber Experience - General Styles */ /* Container */ .visbl-nse { box-sizing: border-box; padding: 24px; } /* Headings and text spacing */ .visbl-nse h1, .visbl-nse h2, .visbl-nse h3 { margin: 0 0 12px 0; } .visbl-nse p { margin: 0 0 10px 0; } /* Buttons (matches WP admin-ish style) */ .visbl-nse.button, .visbl-nse .button, .visbl-nse a.button, .visbl-nse button.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 158px; height: 48px; padding: 8px 26px; background-color: #FFFFFF; color: Gray; angle: 0 deg; border-radius: 16px; text-decoration: none; border: 0; cursor: pointer; opacity: 1; transition: background-color 160ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-weight: 700; font-style: normal; font-size: 14px; line-height: 131%; text-transform: uppercase; } /* Hover/Focus states */ .visbl-nse.button:focus, .visbl-nse.button:hover, .visbl-nse .button:focus, .visbl-nse .button:hover { background-color: rgba(162, 177, 230, 0.11); color: rgba(0, 43, 198, 0.66); } /* Active (click) feedback approximating a spring tap */ .visbl-nse.button:active, .visbl-nse .button:active { transform: scale(0.98); background-color: rgba(162, 177, 230, 0.22) !important; color: #002BC6 !important; } /* Secondary success button helper */ .visbl-nse .button-success { background: #46b450; } .visbl-nse .button-success:hover { background: #3da246; } /* Panels / Modals used in test content */ .nse-modal, .nse-submodal, .nse-subsubmodal { /*background: #fff;*/ border-radius: 6px; padding: 12px; } /* nse-modal row and container nested styles */ .nse-modal .visbl-container { padding: 10px; border-radius: 8px; margin: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 0 0; border: 1px solid var(--Gray-300, #A8ADBF); background: #FFF; min-width: 251px; } .visbl-container > last-child { /* This removes the bottom gap from the last row of items. */ margin-bottom: 0; } /* nse-modal row and container nested styles */ .nse-modal .individual-license{ padding: 24px !important; border-radius: 8px; /* background-color: rgba(245, 247, 252, 1);*/ display: flex; flex-direction: column; align-items: center; gap: 11px; align-self: stretch; background: var(--Gray-50, #F5F7FC); } .signing-details-container { display: flex; padding: 10px; flex-direction: column; align-items: flex-start; gap: 10px; align-self: stretch; } .signing-details { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 17px; align-self: stretch; } /* ===== NSE: Promo Price Display (moved from plan-modal-shared.php) ===== */ .plan-price.promo { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; width: 100%; } .original-price-container { display: flex; flex-direction: column; align-items: center; gap: 4px; } .original-price { font-size: 24px; font-weight: 600; color: #B3261E; text-decoration: line-through; line-height: 1; } .discount-badge { background-color: #14AE5C; color: #fff; padding: 10px; border-radius: 10px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; line-height: 1; } .discount-badge::before { content: ''; display: inline-block; width: 12px; height: 12px; background-image: url("data:image/svg+xml,%3Csvg viewBox='1 2 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.94551 6.05499L6.22051 5.77998' stroke='white' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.28497 7.71504L4.00996 7.99004' stroke='white' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.00686 7.03547C3.96136 7.22397 4.00236 7.42697 4.14986 7.57447L4.28786 7.71248L4.45237 7.87698C4.66637 8.09098 5.01338 8.09098 5.22738 7.87698C5.40488 7.69948 5.43938 7.42347 5.30988 7.20797L4.92237 6.56096C4.79337 6.34545 4.82737 6.06945 5.00488 5.89195C5.21888 5.67794 5.56588 5.67794 5.77989 5.89195L5.94439 6.05645L6.08239 6.19445C6.22939 6.34145 6.27039 6.54396 6.22589 6.73196' stroke='white' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.90363 4.09637C7.97608 4.16882 7.97608 4.28627 7.90363 4.35871C7.83119 4.43116 7.71374 4.43116 7.64129 4.35871C7.56885 4.28627 7.56885 4.16882 7.64129 4.09637C7.71374 4.02393 7.83119 4.02393 7.90363 4.09637' stroke='white' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.75595 2H8.94849C9.5295 2 10 2.47051 10 3.05102V5.24355C10 5.52255 9.889 5.78956 9.692 5.98706L5.48694 10.1921C5.07643 10.6026 4.41092 10.6026 4.00041 10.1921L1.80788 7.99959C1.39737 7.58908 1.39737 6.92357 1.80788 6.51307L6.01294 2.308C6.20995 2.111 6.47745 2 6.75595 2Z' stroke='white' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } .final-price-container { display: flex; align-items: center; gap: 8px; } /* ===== NSE: Active Subscriber/Compare/Success Modal Styles (moved from 1-Payment-susbcription-plans.php) ===== */ :root { --visbl-primary: #002BC6; --visbl-primary-light: #002BC61A; --visbl-success: #0B8355; --visbl-success-bg: #14AE5C29; --visbl-text-dark: #101828; --visbl-text-gray: #475467; --visbl-border: #EAECF0; } .visbl-container { position: relative; } .plan-container { margin-top: 15px; } .current-plan-indicator { background-color: #d0efde; color: var(--visbl-text-dark); padding: 4px 12px; border-radius: 6px 6px 0 0; font-weight: 600; font-size: 0.8rem; position: absolute; top: -31px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 0; } .nse-modal .js-change-plan-btn:disabled { background-color: #e9ecef !important; color: #6c757d !important; cursor: not-allowed !important; border-color: #ced4da !important; } .visbl-nse.button.active { background-color: var(--visbl-primary); color: #fff; border-color: var(--visbl-primary); } .additional-lo-manager { text-align: center; } .additional-lo-manager .qty-group { display: inline-flex; margin-top: 8px; } /* Modal Overlay */ .visbl-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(17, 17, 17, 0.4); z-index: 1050; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .visbl-modal-overlay:not(.is-hidden) { opacity: 1; visibility: visible; } .visbl-modal { background: #fff; border-radius: 16px; width: 95%; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .is-hidden { display: none !important; } .visbl-modal-close { position: absolute; top: 16px; right: 24px; border: none; background: transparent; font-size: 2.5rem; font-weight: 300; line-height: 1; cursor: pointer; color: #888; padding: 0; z-index: 10; } /* Compare Modal */ .visbl-modal.compare-flow { max-width: 520px; text-align: center; padding: 48px; border-radius: 16px; } .compare-modal-title { font-family: "Wavehaus", sans-serif; font-size: 32px; font-weight: 700; margin-bottom: 24px; color: #000; } .compare-modal-subtitle { font-size: 16px; color: #393E4D; margin-bottom: 24px; font-weight: 700; } .compare-modal-body { display: flex; align-items: stretch; justify-content: center; gap: 4px; } .compare-column { flex: 1; display: flex; flex-direction: column; gap: 8px; } .arrow-column { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; align-items: center; flex-shrink: 0; padding-top: 107px; } .arrow-separator { display: flex; align-items: center; justify-content: center; height: 152px; color: #000; } .arrow-separator:nth-child(2) { height: 92px; } .arrow-separator:nth-child(3) { height: 92px; } /* Plan Cards in Modal */ .plan-card-summary, .details-card-summary, .payment-card-summary { border: 1px solid #D8DCEB; border-radius: 8px; padding: 16px; text-align: left; display: flex; flex-direction: column; } .details-card-summary { height: 92px; justify-content: center; } .plan-card-summary { height: 152px; align-items: center; text-align: center; justify-content: center; gap: 8px; } #compare-new-plan .plan-card-summary, #compare-new-plan .details-card-summary { background-color: rgba(0, 43, 198, 0.10); border-color: transparent; } .plan-card-summary .plan-icon { display: flex; justify-content: center; align-items: center; color: #002BC6; } .plan-card-summary .plan-icon svg { width: 31px; height: 31px; } .plan-card-summary .plan-name { font-size: 20px; font-weight: 700; margin: 0; color: #000; text-transform: uppercase; line-height: 1.3; letter-spacing: 0.4px; } .plan-card-summary .plan-price { font-size: 16px; color: #000; font-weight: 500; margin: 0; } .details-card-summary p { margin: 0; font-size: 14px; color: #73788C; font-weight: 600; line-height: 1.5; } .payment-card-summary { height: 92px; text-align: left; justify-content: center; gap: 8px; } .payment-card-summary.new { background-color: rgba(20, 174, 92, 0.16); border-color: transparent; } .payment-card-summary p:first-child { font-size: 14px; color: #73788C; margin: 0; font-weight: 600; } .payment-card-summary .payment-amount { font-size: 16px; color: #73788C; font-weight: 500; } #compare-new-plan .payment-card-summary p:first-child { color: #000; font-weight: 700; } #compare-new-plan .payment-card-summary .payment-amount { color: #000; } #compare-new-plan .details-card-summary p { color: #13151A; } /* Modal Actions */ .compare-modal-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 24px; width: 100%; } .compare-modal-actions .button { width: 100%; padding: 14px; font-size: 18px; font-weight: 700; border-radius: 45px; border: 1px solid; text-transform: lowercase; height: auto; } .compare-modal-actions .button:not(.white) { background-color: #002BC6; color: #fff; border-color: #002BC6; } .compare-modal-actions .button.white { background-color: #fff; color: #002BC6; border-color: #002BC6; font-size: 16px; } /* Downgrade View */ #downgrade-view { display: flex; flex-direction: column; gap: 8px; width: 100%; } #downgrade-feedback-section { padding: 0px; margin-top: 0; display: flex; flex-direction: column; gap: 16px; width: 100%; } .downgrade-compare-body { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; } .downgrade-plan-card { flex: 1; background-color: rgba(0, 43, 198, 0.10); border-radius: 8px; padding: 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 152px; justify-content: center; } .downgrade-plan-card .plan-icon { display: flex; justify-content: center; align-items: center; color: #002BC6; } .downgrade-plan-card .plan-icon svg { width: 31px; height: 31px; } .downgrade-plan-card .plan-name { font-size: 20px; font-weight: 700; margin: 0; color: #000; text-transform: uppercase; line-height: 1.3; letter-spacing: 0.4px; } .downgrade-plan-card .plan-price { font-size: 16px; color: #000; font-weight: 500; } .arrow-column-downgrade { color: #000; flex-shrink: 0; width: 24px; display: flex; justify-content: center; height: 152px; align-items: center; } .license-transition-box { display: flex; align-items: center; justify-content: center; gap: 16px; border: 1px solid #D8DCEB; border-radius: 8px; padding: 14px; font-size: 14px; color: #9296A6; font-weight: 600; } .license-transition-box .new-license-count { color: #B3261E; font-weight: 600; } .arrow-column-downgrade-small { width: 24px; display: flex; justify-content: center; align-items: center; } /* Downgrade Feedback */ .downgrade-info-text { font-size: 16px; color: #73788C; text-align: left; font-weight: 600; line-height: 1.3; margin: 0; } .downgrade-info-text span { color: #13151A; } .downgrade-divider { border: none; border-top: 1px solid #D8DCEB; margin: 0; width: 100%; } .feedback-title { font-size: 16px; font-weight: 700; color: #393E4D; text-align: left; margin-bottom: 0; } .feedback-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; } .feedback-option { background-color: #fff; border: 1px solid #D8DCEB; border-radius: 8px; padding: 14px; cursor: pointer; font-size: 14px; text-align: center; font-weight: 600; color: #393E4D; transition: all 0.2s ease; line-height: 1.5; } .feedback-option:hover { border-color: #98a2b3; } .feedback-option.active { background-color: #002BC6; color: #fff; border-color: #002BC6; } /* Success Modal */ .visbl-modal.success-flow { max-width: 520px; text-align: center; padding: 48px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .success-icon-wrapper { margin-bottom: 0; display: flex; align-items: center; justify-content: center; } .visbl-modal.success-flow h2 { font-family: "Wavehaus", sans-serif; font-size: 32px; font-weight: 700; margin-bottom: 0; color: #000; line-height: 1.2; } .visbl-modal.success-flow #visbl-success-modal-subtitle { color: #393E4D; font-size: 16px; margin-bottom: 0; font-weight: 700; line-height: 1.3; max-width: 100%; } .visbl-modal.success-flow #visbl-success-modal-details { color: #73788C; font-size: 16px; line-height: 1.5; font-weight: 600; margin: 0; } #visbl-success-modal-details .removed-users-info:not(.is-hidden) { display: inline; } .success-modal-actions { width: 100%; margin-top: 0; } .success-modal-actions .button { width: 100%; padding: 14px; font-weight: 700; border-radius: 45px; background-color: #002BC6; color: #fff; border: 1px solid #002BC6; font-size: 18px; text-transform: lowercase; height: auto; } .removed-users-info.is-hidden { display: none; } /* Responsive */ @media (max-width: 768px) { .visbl-modal.compare-flow { padding: 24px; } .compare-modal-body { gap: 12px; } } @media (max-width: 576px) { .visbl-modal-overlay .visbl-modal { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; margin: 0; border-radius: 24px 24px 0 0; max-height: 90vh; overflow-y: auto; transform: translateY(100%); transition: transform 0.3s ease-out; } .visbl-modal-overlay:not(.is-hidden) .visbl-modal { transform: translateY(0); } .visbl-modal-close { top: 12px; right: 16px; } .visbl-modal.compare-flow, .visbl-modal.success-flow { padding: 24px; } .compare-modal-title, .visbl-modal.success-flow h2 { font-size: 28px; } .compare-modal-subtitle, .visbl-modal.success-flow #visbl-success-modal-subtitle { margin-bottom: 24px; } .plan-card-summary, .details-card-summary, .payment-card-summary { padding: 16px; } .cancellation-modal-content .feedback-options { grid-template-columns: 1fr; } } /* ===== NSE: Downgrade License Manager Modal (moved from checkout-modals/downgrade-license-manager.php) ===== */ .visbl-modal.downgrade-flow { background: #fff; padding: 48px; border-radius: 16px; max-width: 920px; width: 95%; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; } .downgrade-modal-step { transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; } .downgrade-modal-step.is-hidden { opacity: 0; transform: scale(0.98); pointer-events: none; position: absolute; top: 48px; left: 48px; right: 48px; visibility: hidden; } .downgrade-modal-header { margin-bottom: 32px; } .downgrade-modal-header.text-center { text-align: center; } .downgrade-modal-title { font-family: "Wavehaus", sans-serif; font-size: 28px; font-weight: 700; color: var(--visbl-text-dark); margin: 0 0 8px; } .downgrade-modal-subtitle { color: var(--visbl-text-gray); font-size: 14px; margin: 0; } .downgrade-modal-body-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: stretch; } .downgrade-officer-list-wrapper { border: 1px solid var(--visbl-border); border-radius: 8px; padding: 16px; overflow-y: auto; } .downgrade-summary-panel { border: 1px solid var(--visbl-border); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; } .downgrade-summary-actions { display: flex; flex-direction: column; gap: 8px; } .downgrade-summary-actions .cta-btn { width: 100%; padding: 12px 16px; border-radius: 45px; border: 1.5px solid var(--visbl-primary); font-weight: 700; cursor: pointer; } .downgrade-summary-actions .cta-btn:not(.white) { background-color: var(--visbl-primary); color: #fff; } .downgrade-summary-actions .cta-btn.white { background-color: #fff; color: #344054; border-color: #D0D5DD; } .downgrade-officer-list { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 420px; overflow-y: auto; } .downgrade-officer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--visbl-border); padding: 12px; border-radius: 8px; } .downgrade-officer-row .officer-name { font-weight: 600; color: var(--visbl-text-dark); } .downgrade-officer-row .officer-email { font-size: 12px; color: #667085; } .downgrade-officer-row .remove-btn { background: #fff; color: #B3261E; border: 1px solid #F2B8B5; border-radius: 6px; padding: 6px 10px; font-weight: 700; cursor: pointer; } .downgrade-modal-body-center { display: flex; flex-direction: column; gap: 16px; align-items: center; } .losing-access-intro { color: var(--visbl-text-gray); font-size: 14px; } .losing-access-container { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 260px; overflow-y: auto; } .losing-access-item { border: 1px dashed var(--visbl-border); border-radius: 6px; padding: 10px; font-size: 14px; color: var(--visbl-text-dark); } .downgrade-confirmation-actions { display: flex; gap: 8px; } .downgrade-confirmation-actions .cta-btn { padding: 12px 16px; border-radius: 45px; border: 1.5px solid var(--visbl-primary); font-weight: 700; cursor: pointer; } .downgrade-confirmation-actions .cta-btn:not(.white) { background-color: var(--visbl-primary); color: #fff; } .downgrade-confirmation-actions .cta-btn.white { background-color: #fff; color: #344054; border-color: #D0D5DD; } @media (max-width: 900px) { .downgrade-modal-body-split { grid-template-columns: 1fr; } } /* NMLS Connection Modal overlay tweaks (moved short rules) */ #visbl-nmls-modal-overlay.visbl-modal-overlay { background: rgba(0, 0, 0, 0.6); z-index: 1000; } /* NMLS Connection Modal layout */ #visbl-nmls-modal { max-width: 560px; padding: 40px 32px 32px; } #visbl-nmls-modal .visbl-modal-content { display: flex; flex-direction: column; gap: 20px; } #visbl-nmls-modal .visbl-size-checkout-title { margin: 0; } #visbl-nmls-modal .visbl-nmls-modal-subtitle { margin: 0; display: block; height: auto; color: #535766; font-size: 15px; line-height: 1.5; font-weight: 600; } #visbl-connect-nmls-form-modal { display: flex; flex-direction: column; gap: 16px; } #visbl-connect-nmls-form-modal .field-group { margin: 0; } #visbl-connect-nmls-form-modal .input-wrapper, #visbl-connect-nmls-form-modal .input-wrapper input { width: 100%; } #visbl-nmls-modal .visbl-nmls-modal-status { margin-top: 10px; min-height: 20px; } #visbl-nmls-modal .visbl-nmls-modal-actions { margin-top: 8px; } #visbl-nmls-modal #verify-broker-nmls-btn-modal { width: 100%; text-transform: none; } /* ===== NSE: Downgrade Modal additional rules (moved from downgrade-license-manager.php) ===== */ .downgrade-modal-title { font-family: "Wavehaus", sans-serif; font-size: 32px; font-weight: 700; color: #111; margin: 0 0 8px 0; } .downgrade-modal-subtitle { font-size: 16px; color: #535766; line-height: 1.5; max-width: 600px; } .downgrade-modal-header.text-center .downgrade-modal-subtitle { margin-left: auto; margin-right: auto; } .downgrade-modal-body-split { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; } .downgrade-officer-list-wrapper { max-height: 400px; overflow-y: auto; padding-right: 10px; } .downgrade-officer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .downgrade-officer-item { display: flex; align-items: center; padding: 12px; border-radius: 8px; cursor: pointer; transition: background 0.2s; } .downgrade-officer-item input[type="checkbox"] { appearance: none; width: 24px; height: 24px; border: 2px solid #d1d5db; border-radius: 6px; display: inline-block; position: relative; cursor: pointer; flex-shrink: 0; margin-right: 12px; } .downgrade-officer-item input[type="checkbox"]:checked { background-color: #002bc6; border-color: #002bc6; } .downgrade-officer-item input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 8px; top: 4px; width: 6px; height: 12px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); } .downgrade-officer-item input[type="checkbox"]:disabled { background-color: #f0f3f8; cursor: not-allowed; } .downgrade-officer-item .officer-name { font-weight: 600; color: #111; } .downgrade-summary-panel { background-color: #f7f9fc; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; text-align: center; } .downgrade-summary-content { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .downgrade-summary-content .placeholder { color: #535766; background-color: transparent !important; } .downgrade-summary-content .summary-item { font-size: 16px; color: #111; margin-bottom: 4px; } .downgrade-summary-content .summary-item strong { font-weight: 700; } .downgrade-summary-content .summary-note { font-size: 14px; color: #535766; } .downgrade-summary-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; } .downgrade-summary-actions .cta-btn { width: 100%; padding: 12px; font-size: 16px; font-weight: 600; border-radius: 99px; border: 1px solid #002bc6; } .downgrade-summary-actions .cta-btn:not(.white) { background-color: #002bc6; color: #fff; } .downgrade-summary-actions .cta-btn.white { background-color: #fff; color: #002bc6; } .downgrade-summary-actions .cta-btn:disabled { background-color: #e0e6f0; border-color: #e0e6f0; color: #a8adbf; cursor: not-allowed; } .downgrade-modal-body-center { display: flex; flex-direction: column; align-items: center; } .losing-access-intro { font-size: 16px; color: #111; font-weight: 600; margin-bottom: 16px; } .losing-access-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 32px; max-width: 600px; } .losing-access-tag { background-color: #fff; border: 1px solid #e0e6f0; color: #333; font-weight: 500; padding: 8px 16px; border-radius: 8px; font-size: 15px; } .downgrade-confirmation-actions { display: flex; gap: 16px; } .downgrade-confirmation-actions .cta-btn { padding: 12px 32px; font-size: 16px; font-weight: 600; border-radius: 99px; border: 1px solid #002bc6; } .downgrade-confirmation-actions .cta-btn:not(.white) { background-color: #002bc6; color: #fff; } .downgrade-confirmation-actions .cta-btn.white { background-color: #fff; color: #002bc6; } /* Downgrade Modal — Step 2 Figma layout */ .visbl-modal.downgrade-flow.step2-active { max-width: 520px; display: flex; flex-direction: column; gap: 24px; align-items: center; } #downgrade-step-1 { display: flex; flex-direction: column; gap: 24px; width: 100%; } .downgrade-step2-text { display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; width: 100%; } .downgrade-step2-title { font-family: var(--font-family-wavehaus, 'Wavehaus', Arial, sans-serif); font-size: 32px; font-weight: 700; color: #000; margin: 0; line-height: 1.2; text-align: center; } .downgrade-step2-subtitle { font-size: 16px; font-weight: 600; color: #73788C; margin: 0; line-height: 1.4; text-align: center; } .downgrade-step2-actions { display: flex; flex-direction: column; gap: 16px; width: 100%; } .downgrade-step2-actions .cta-btn { width: 100%; padding: 14px 73px; border-radius: 45px; font-family: var(--font-family-wavehaus, 'Wavehaus', Arial, sans-serif); font-weight: 700; border: 1px solid #002BC6; cursor: pointer; text-transform: lowercase; } .downgrade-step2-actions .cta-btn:not(.white) { background: #002BC6; color: #fff; font-size: 18px; } .downgrade-step2-actions .cta-btn.white { background: transparent; color: #002BC6; font-size: 16px; } /* ===== Downgrade Step 2 — LO Selection (Figma 1471:13138) ===== */ #downgrade-step-2 { display: flex; flex-direction: column; gap: 0; width: 100%; } .downgrade-lo-title { font-family: var(--font-family-wavehaus, 'Wavehaus', Arial, sans-serif); font-size: 32px; font-weight: 700; color: #000; margin: 0 0 8px; line-height: 1.2; } .downgrade-lo-subtitle { font-size: 14px; font-weight: 600; color: #393E4D; margin: 0 0 26px; line-height: 1.5; } .downgrade-lo-body { display: grid; grid-template-columns: 1fr 1.4fr; gap: 26px; width: 100%; align-items: start; } .downgrade-lo-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-height: 380px; overflow-y: auto; } .downgrade-officer-item { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #fff; border: none; border-radius: 8px; cursor: pointer; transition: opacity 0.15s ease; } .downgrade-officer-item:hover:not(.is-disabled) { background: #f5f7fc; } .downgrade-officer-item.selected .officer-name { color: #002BC6; font-weight: 700; } .downgrade-officer-item.is-disabled, .downgrade-officer-item:has(input:disabled) { opacity: 0.5; cursor: not-allowed; } .downgrade-officer-item input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border: 1px solid #D2D5DA; border-radius: 4px; background: #fff; flex-shrink: 0; cursor: pointer; position: relative; transition: background 0.15s ease, border-color 0.15s ease; } .downgrade-officer-item input[type="checkbox"]:checked { background: #2563EB; border-color: #2563EB; } .downgrade-officer-item input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .downgrade-officer-item input[type="checkbox"]:disabled { cursor: not-allowed; } .downgrade-officer-item .officer-name { font-size: 14px; font-weight: 600; color: #393E4D; transition: color 0.15s ease; } .downgrade-confirm-panel { background: #F5F7FC; border-radius: 8px; padding: 40px 24px; display: flex; flex-direction: column; gap: 26px; align-items: center; justify-content: center; min-height: 288px; } .downgrade-confirm-summary { text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .downgrade-confirm-summary .placeholder { color: #73788C; font-size: 14px; font-weight: 600; } .downgrade-confirm-summary .summary-selected-name { font-size: 18px; font-weight: 700; color: #393E4D; margin: 0; } .downgrade-confirm-summary .summary-note { font-size: 16px; font-weight: 600; color: #393E4D; margin: 0; } .downgrade-confirm-summary .summary-note .new-plan-name { font-weight: 700; } .downgrade-confirm-actions { display: flex; flex-direction: column; gap: 16px; width: 100%; } .downgrade-confirm-actions .cta-btn { width: 100%; padding: 14px; border-radius: 45px; font-family: var(--font-family-wavehaus, 'Wavehaus', Arial, sans-serif); font-weight: 700; border: 1px solid #002BC6; cursor: pointer; text-transform: lowercase; } .downgrade-confirm-actions .cta-btn:not(.white) { background: #002BC6; color: #fff; font-size: 18px; } .downgrade-confirm-actions .cta-btn.white { background: transparent; color: #002BC6; font-size: 16px; } .downgrade-confirm-actions .cta-btn:disabled { background: #D8DCEB; border-color: #D8DCEB; color: #9296A6; cursor: not-allowed; } /* ===== Downgrade Step 3 — Final Confirmation (Figma 1471:13560) ===== */ #downgrade-step-3 { display: flex; flex-direction: column; gap: 24px; width: 100%; } .downgrade-final-header { display: flex; flex-direction: column; gap: 24px; width: 100%; } .downgrade-final-title { font-family: var(--font-family-wavehaus, 'Wavehaus', Arial, sans-serif); font-size: 32px; font-weight: 700; color: #000; margin: 0; text-align: center; line-height: 1.2; } .downgrade-final-moving { font-size: 16px; font-weight: 700; color: #393E4D; margin: 0; } .downgrade-losing-section { display: flex; flex-direction: column; gap: 8px; } .downgrade-losing-intro { font-size: 16px; font-weight: 600; color: #73788C; margin: 0; } .downgrade-losing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; max-height: 280px; overflow-y: auto; } .downgrade-losing-tag { background: #fff; border: 1px solid #D8DCEB; border-radius: 8px; padding: 14px; font-size: 14px; font-weight: 600; color: #393E4D; text-align: center; } .downgrade-final-actions { display: flex; flex-direction: column; gap: 16px; width: 100%; } .downgrade-final-actions .cta-btn { width: 100%; padding: 14px 73px; border-radius: 45px; font-family: var(--font-family-wavehaus, 'Wavehaus', Arial, sans-serif); font-weight: 700; border: 1px solid #002BC6; cursor: pointer; text-transform: lowercase; } .downgrade-final-actions .cta-btn:not(.white) { background: #002BC6; color: #fff; font-size: 18px; } .downgrade-final-actions .cta-btn.white { background: transparent; color: #002BC6; font-size: 16px; } /* ===== Success modal — downgrade subtitle left-aligned ===== */ #visbl-success-modal-subtitle { text-align: left; font-size: 16px; font-weight: 700; color: #393E4D; width: 100%; } @media (max-width: 920px) { .visbl-modal.downgrade-flow { padding: 32px; } .downgrade-modal-body-split { grid-template-columns: 1fr; } .downgrade-officer-list-wrapper { max-height: 300px; } } @media (max-width: 768px) { .visbl-modal.downgrade-flow { padding: 24px; } .downgrade-officer-list { grid-template-columns: 1fr; } } @media (max-width: 576px) { #visbl-nmls-modal { padding: 28px 20px 20px; } #visbl-nmls-modal .visbl-size-checkout-title { font-size: 28px; line-height: 1.1; } /* Bottom sheet style specifically for downgrade modal */ .visbl-modal-overlay .visbl-modal.downgrade-flow { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; margin: 0; border-radius: 24px 24px 0 0; max-height: 90vh; overflow-y: auto; transform: translateY(100%); transition: transform 0.3s ease-out; padding-top: 24px; } .visbl-modal-overlay:not(.is-hidden) .visbl-modal.downgrade-flow { transform: translateY(0); } .downgrade-modal-step.is-hidden { top: 24px; left: 24px; right: 24px; } .downgrade-modal-title { font-size: 28px; } .downgrade-modal-header { margin-bottom: 24px; } .downgrade-modal-subtitle { max-width: 100%; } .downgrade-confirmation-actions { flex-direction: column; width: 100%; } .downgrade-confirmation-actions .cta-btn { width: 100%; } .downgrade-step2-title { font-size: 22px; } .downgrade-step2-subtitle { font-size: 14px; } .downgrade-step2-actions .cta-btn { padding: 12px 16px; } /* Step 2 LO selection — stack on mobile */ .downgrade-lo-title { font-size: 22px; } .downgrade-lo-body { grid-template-columns: 1fr; } .downgrade-lo-list { grid-template-columns: 1fr; } .downgrade-confirm-panel { padding: 24px 16px; min-height: auto; } /* Step 3 — narrow on mobile */ .downgrade-final-title { font-size: 22px; } .downgrade-losing-grid { grid-template-columns: 1fr; } .downgrade-final-actions .cta-btn { padding: 12px 16px; } .downgrade-confirm-actions .cta-btn { padding: 12px 16px; } } .signing-details-header { display: flex; justify-content: space-between; align-items: flex-start; align-self: stretch; padding: 0 !important; } .signing-details-content { display: flex; align-items: flex-start; gap: 17px; align-self: stretch; padding: 0 !important; } .signing-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; align-self: stretch; } /* nse-modal button individual styles */ .nse-modal .button { width: 100% !important; background-color: rgba(0, 43, 198, 1) !important; color: #fff !important; height: 50px; opacity: 1; border-radius: 45px !important; border: 1px solid var(--Primary-Blue, #002BC6) !important; padding: 13px !important; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-style: normal; } .subscription-plan-pricing-title { color: #000; font-size: 32px; font-style: normal; font-weight: 700; line-height: 30px; /* 93.75% */ margin-bottom: 16px; } .subscription-plan-pricing-subtitle { display: flex; width: auto; height: 45px; flex-direction: column; justify-content: center; flex-shrink: 0; color: var(--Gray-700, #393E4D); font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } .plan-container { display: flex; padding: 16px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 17px; align-self: stretch; } /** price and period styling in plans */ .plan-price { justify-content: center !important; align-items: center; display: flex; gap: 15px; } /** plan-card */ .plan-card { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 11px; align-self: stretch; } .plan-card-title { display: flex; width: 178px; justify-content: center; align-items: center; gap: 8px; } .plan-subtitle { color: var(--Primary-Blue, #002BC6); text-align: center; font-size: 16px; font-style: normal; font-weight: 600; line-height: normal; margin-bottom: 4px; text-transform: capitalize; } .plan-description { color: var(--Gray-700, #393E4D); text-align: center; font-size: 12px; font-style: normal; font-weight: 600; line-height: 140%; /* 16.8px */ margin-bottom: 0px; } .plan-extra { display: flex; flex-direction: column; align-items: flex-start; /* gap: 8px;*/ align-self: stretch; /*margin-bottom: 17px;*/ } .plan-extra-label { color: var(--Gray-700, #393E4D); font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; margin-bottom: 8px; } .plan-extra-period-label-price { display: flex; justify-content: space-between; align-items: center; flex: 1 0 0; } .plan-extra-period_label { color: var(--Gray-700, #393E4D); font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } .plan-extra-price { color: var(--Gray-700, #393E4D); font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } .features { margin-top: 48px !important; margin-bottom: 52px !important; } .features ul { list-style-image: url("data:image/svg+xml;utf8,"); } .features .line-border { display: block; width: 100%; height: 0; border: 0; border-top: 1px solid rgba(216, 220, 235, 1); margin-top: 24px !important; margin-bottom: 24px !important; } .features-title { color: #000; font-size: 32px; font-style: normal; font-weight: 700; line-height: 30px; /* 93.75% */ margin-bottom: 7px; } .features-subtitle { color: var(--Gray-700, #393E4D); font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; margin-bottom: 48px; } .features-detail-title-container { display: flex; align-items: center; gap: 8px; } .features ul.col { margin-bottom: 0px !important; padding-bottom: 0px !important; } .features-detail-title { color: var(--Gray-600, #535766); font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; } .nse-modal .individual-license-button { background-color: #002BC6 !important; color: #fff !important; border-radius: 45px !important; font-weight: 700; font-style: normal; } /* nse-modal class="container" nested styles */ .nse-modal .container { gap: 17px; opacity: 1; padding: 16px; border-bottom-width: 1px; } /* nse-modal h3 styles */ .nse-modal h3 { font-size: 18px; font-weight: 700; line-height: 131%; font-style: normal; letter-spacing: normal; text-transform: uppercase; text-align: center; margin: 0 0 12px 0; } /* nse-modal h5 styles */ .nse-modal h5 { font-weight: 600; font-style: normal; font-size: 16px; line-height: 100%; letter-spacing: normal; text-align: center; vertical-align: middle; color: rgba(0, 43, 198, 1); } .nse-modal .price-plan { font-weight: 600; font-style: normal; font-size: 48px; line-height: 130%; letter-spacing: normal; /* width: 96px; height: 62px; opacity: 1; */ vertical-align: middle; } /* Sub-modal visual variants (dashed/dotted borders used in test layout) */ .nse-submodal { } .nse-subsubmodal { border-style: dotted; } /* Utility grids used in test pages */ .visbl-nse .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .visbl-nse .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* Inputs inside NSE */ .visbl-nse input[type="text"], .visbl-nse input[type="email"], .visbl-nse input[type="password"], .visbl-nse select { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #e5e5e5; border-radius: 4px; background: #fff; } /* Stripe placeholder block in test */ .visbl-nse .stripe-placeholder { background:#f8f8f8; padding:8px; border:1px solid #e5e5e5; border-radius:4px; } /* Spinner */ .spinner { width: 24px; height: 24px; border: 3px solid #ddd; border-top-color: #0073aa; border-radius: 50%; animation: visbl-spin 1s linear infinite; } /* Override border-based spinner inside processing modal to use SVG only */ .processing-order-modal .spinner { border: 0; } @keyframes visbl-spin { to { transform: rotate(360deg); } } /* Support inline animation name used in test markup */ @keyframes spin { to { transform: rotate(360deg); } } /* Page-specific helpers */ .visbl-nse-plans .actions { display:flex; gap:16px; margin:16px 0; } /* Alignment helper: center vertically, align content to the right */ .items-center-toright { display:flex; align-items:center; justify-content:flex-end; } .items-toright { display:flex; justify-content:flex-end; } /* Small spacing helpers */ .mt-6 { margin-top: 6px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } /* Persistent active state (selected plan) */ .visbl-nse.button.is-active, .visbl-nse .button.is-active { background-color: rgba(162, 177, 230, 0.22); color: #002BC6; } /************************CHECKOUT CSS STYLING******************************/ .visbl-nse .visbl-checkout-container { border: 1px solid rgba(199, 203, 217, 1); gap: 17px; opacity: 1; border-radius: 8px; padding: 26px; margin: 0px 16px 0px 0px; width: auto !important; min-width: -webkit-fill-available; } .visbl-row-container { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; } /** visbl-checkout-container-bottom put at the bottom of the checkout container **/ .visbl-nse .visbl-checkout-container-bottom .button { width: 100% !important; background-color: rgba(0, 43, 198, 1); color: #fff; height: 50px; opacity: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-style: normal; } .button-confirmation { background-color: rgba(0, 43, 198, 1); color: #fff; height: 50px; opacity: 1; border-radius: 45px !important; padding: 14px 73px !important; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-style: normal; } .button-confirmation.white { background: #fff; color: #002BC6; border: 1px solid #002BC6; padding: 14px 73px !important; font-size: 16px; } /* Keep confirmation buttons stable on hover (no color swaps) */ .visbl-nse-confirmation .button-confirmation:hover, .visbl-nse-confirmation .button-confirmation:focus { background-color: rgba(0, 43, 198, 1); color: #fff; } .visbl-nse-confirmation .button-confirmation.white:hover, .visbl-nse-confirmation .button-confirmation.white:focus { background: #fff; color: #002BC6; border-color: #002BC6; } /* confirmation page styling */ /* Center all sections on the confirmation page and add 24px gap between them */ .visbl-nse.visbl-nse-confirmation { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px; /* moved from inline style in PHP */ } .confirmation-divs { text-align: center; } .confirmation-svg-container { width: 89px; height: 89px; flex-shrink: 0; text-align: center; } .confirmation-title-container { color: #000; text-align: center; font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-size: clamp(22px, 5vw, 40px); font-style: normal; font-weight: 700; line-height: 1.2; display: flex; flex-direction: column; align-items: center; gap: 16px; } .confirmation-email-container { color: #000; font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-size: clamp(14px, 3.8vw, 18px); font-style: normal; font-weight: 700; line-height: 1.5; word-break: break-all; } .confirmation-subtitle-container { color: #000; text-align: center; font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-size: clamp(14px, 3.8vw, 18px); font-style: normal; font-weight: 500; line-height: 1.5; max-width: 720px; margin: 0 auto!important; word-break: break-word; } .confirmation-order-summary-container { display: flex; height: auto; padding: 24px; align-items: flex-start; gap: 10px; border-radius: 8px; border: 1px solid var(--Gray-200, #C7CBD9); background: #FFF; width: 100%; max-width: 720px; box-sizing: border-box; overflow: hidden; /* prevent internal scrollbars; container grows with content */ } .confirmation-button-container { display: flex; justify-content: center; align-items: center; gap: 19px; width: 100%; max-width: 720px; } /* Desktop/default: let buttons size consistently; no padding override here */ .visbl-nse-confirmation .button-confirmation { width: auto; min-width: 180px; } @media (max-width: 480px) { .visbl-nse-confirmation .button-confirmation { width: 100%; max-width: none; padding: 12px 20px !important; /* compact padding on very small screens */ } } /* Tighten buttons slightly for mid-small screens to avoid wrapping (481px–526px) */ @media (min-width: 481px) and (max-width: 526px) { .confirmation-button-container { gap: 12px; } .visbl-nse-confirmation .button-confirmation { padding: 12px 28px !important; min-width: 150px; } .visbl-nse-confirmation .button-confirmation.white { padding: 12px 28px !important; } } @media (min-width: 527px) and (max-width: 600px) { .confirmation-button-container { gap: 12px; } .visbl-nse-confirmation .button-confirmation { padding: 12px 28px !important; min-width: 150px; } .visbl-nse-confirmation .button-confirmation.white { padding: 12px 28px !important; } } @media (max-width: 480px) { .visbl-nse.visbl-nse-confirmation { padding: 16px; } .confirmation-order-summary-container { padding: 16px; } #edit-payment-details { padding-left: 0px; padding-right: 0px; } #edit-payment-details .row { box-sizing: content-box; padding-left: 0px; padding-right: 0px; } #edit-payment-details span.payment-method-name { gap: 7px; padding-right: 0px; padding-left: 5px; } } /* confirmation page styling end */ /* Ensure all content inside the confirmation order summary stays contained */ .visbl-nse-confirmation .confirmation-order-summary-container.row { margin: 0; /* neutralize generic .row margins on the container itself */ } .visbl-nse-confirmation .confirmation-order-summary-container .row { margin: 0; /* remove external row margins that could bleed out */ width: 100%; } .visbl-nse-confirmation .confirmation-order-summary-container .col { box-sizing: border-box; max-width: 100%; } .checkout-order-summary { padding: 10px; /* Prevent margin-collapsing and contain floats so inner margins stay inside */ /*display: flow-root;*/ /* Ensure sizing calculations stay within the container box */ box-sizing: border-box; background-color: rgba(245, 247, 252, 1); display: flex !important; flex-direction: column !important; min-height: 100vh !important; } /* Prevent common media from overflowing the container horizontally */ .checkout-order-summary img, .checkout-order-summary video, .checkout-order-summary iframe { max-width: 100%; height: auto; } .line-border { display: block; width: 100%; height: 0; border: 0; border-top: 1px solid rgba(216, 220, 235, 1); margin: 12px 0; } .visbl-nse .col .row:last-child { margin-top: auto; } /* Lender profile checkout: remove white space by not pushing footer to bottom */ .visbl-nse.is-lender-checkout .col.visbl-row-container .row.footer-text { margin-top: 0; } /* Lender profile: hide broker/LO license count in order summary (checkout page) */ .visbl-nse.is-lender-checkout #summary-base-plan-brokers, .visbl-nse.is-lender-checkout #summary-base-plan-los { display: none !important; } /* Lender profile: hide broker/LO and addon section on confirmation page */ .visbl-nse-confirmation.is-lender-confirmation #summary-base-plan-brokers, .visbl-nse-confirmation.is-lender-confirmation #summary-base-plan-los, .visbl-nse-confirmation.is-lender-confirmation #addon-summary-section { display: none !important; } /* Lender confirmation page: compact styling */ .visbl-nse-confirmation.is-lender-confirmation .confirmation-button-container { max-width: 437px; } .visbl-nse-confirmation.is-lender-confirmation .button-confirmation { width: 100%; padding: 14px 24px !important; } .visbl-nse-confirmation.is-lender-confirmation .confirmation-order-summary-container { max-width: 437px; padding: 24px; } .visbl-nse-confirmation.is-lender-confirmation .confirmation-order-summary-container .row { gap: 16px; } .visbl-nse-confirmation.is-lender-confirmation .visbl-size-checkout-title { font-size: 24px; line-height: 30px; padding-left: 0; } .visbl-nse-confirmation.is-lender-confirmation .visbl-size-checkout-summary-row-title { font-size: 18px; line-height: 130%; } .visbl-nse-confirmation.is-lender-confirmation #summary-billed-period { font-size: 18px; line-height: 130%; } .visbl-nse-confirmation.is-lender-confirmation .visbl-size-checkout-summary-row-text { font-size: 16px; line-height: 130%; } .visbl-nse-confirmation.is-lender-confirmation .checkout-total-black, .visbl-nse-confirmation.is-lender-confirmation .checkout-total-gray { font-size: 18px; } .visbl-nse-confirmation.is-lender-confirmation .confirmation-order-summary-container { flex-direction: column; } .visbl-nse-confirmation.is-lender-confirmation .confirmation-order-summary-container > .row { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0; flex-wrap: nowrap; padding: 0; margin-left: 0; margin-right: 0; } .visbl-nse-confirmation.is-lender-confirmation .confirmation-order-summary-container > .row > .col:first-child { flex: 1; min-width: 0; white-space: nowrap; text-align: left; padding: 0; margin: 0; } .visbl-nse-confirmation.is-lender-confirmation .confirmation-order-summary-container > .row > .col.items-toright, .visbl-nse-confirmation.is-lender-confirmation .confirmation-order-summary-container > .row > .col:last-child { flex-shrink: 0; text-align: right; padding: 0; margin: 0; margin-left: auto; } .visbl-nse-confirmation.is-lender-confirmation .confirmation-order-summary-container .line-border { width: 100%; } .visbl-nse-confirmation.is-lender-confirmation .visbl-size-checkout-summary-row-title, .visbl-nse-confirmation.is-lender-confirmation #summary-billed-period { white-space: nowrap; } .visbl-nse-confirmation.is-lender-confirmation .visbl-size-checkout-summary-row-text { white-space: nowrap; } .price-plan { color: #000; font-size: 36px; font-style: normal; font-weight: 600; line-height: 130%; /* 46.8px */ } .visbl-size-checkout-summary-row-text { color: var(--Gray-600, #535766); font-size: 16px; font-style: normal; font-weight: 600; line-height: 130%; /* 20.8px */ } .checkout-total-today { color: var(--Gray-600, #535766); font-size: 18px; font-style: normal; font-weight: 700; line-height: 130%; /* 23.4px */ } .checkout-total-gray { color: var(--Gray-600, #535766); font-size: 18px; font-style: normal; font-weight: 600; line-height: 130%; /* 23.4px */ } .checkout-total-black { color: var(--Gray-900, #13151A); font-size: 18px; font-style: normal; font-weight: 600; line-height: 130%; /* 23.4px */ } .visbl-size-checkout-summary-row-title { color: var(--Gray-900, #13151A); font-size: 18px; font-style: normal; font-weight: 700; line-height: 130%; /* 23.4px */ } .visbl-size-checkout-title { color: #000; font-size: 24px; font-style: normal; font-weight: 700; line-height: 30px; /* 125% */ display: flex; align-items: center; gap: 16px; } .visbl-size-container-title { color: var(--Gray-700, #393E4D); font-size: 14px !important; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; margin-bottom: 0 !important; } .visbl-size-container { display: flex; justify-content: space-between; align-items: center; align-self: stretch; } .container-billed-text { color: var(--Gray-700, #393E4D); font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } .selected-plan-text { color: var(--Gray-700, #393E4D); font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; margin: 0px 0px 17px !important; padding: 0 !important; } .plan-selected { color: #000; font-size: 18px; font-style: normal; font-weight: 700; line-height: 131%; /* 23.58px */ /*text-transform: uppercase;*/ padding: 0 !important; margin: 0 !important; letter-spacing: 0; } .checkout-icons { display: inline-flex !important; padding: 0 !important; } .visbl-checkout-subcontainer-selected { display: flex; padding: 16px; flex-direction: column; align-items: flex-start; flex: 1 0 0; border-radius: 8px; border: 1px solid var(--Primary-Blue, #002BC6); background: rgba(0, 43, 198, 0.05); } .visbl-checkout-subcontainer-unselected { display: flex; padding: 16px; flex-direction: column; align-items: flex-start; flex: 1 0 0; border-radius: 8px; border: 1px solid var(--Gray-200, #C7CBD9); background: #FFF; } :root { --Gray-700: #4A5568; --Gray-500: #808695; --Gray-400: #B2B7C3; --Gray-300: #A8ADBF; --Gray-200: #C7CBD9; --Gray-900: #13151A; --Gray-600: #535766; --Gray-50: #F5F7FC; --Primary-Blue: #002BC6; --Background-DEFAULT: #FFF; --font-family-wavehaus: "Wavehaus", Arial, sans-serif; } .footer-text { color: var(--Gray-700, #393E4D); font-size: 12px; font-style: normal; font-weight: 600; line-height: 150%; justify-content: stretch; text-align: justify-all; letter-spacing: normal; vertical-align: middle; /*text-decoration-line: underline;*/ text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .text-link{ color: #0073aa; text-decoration: underline; } .text-link-change{ color: var(--Primary-Blue, #002BC6); font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .button-min { display: flex; width: 44px; height: 44px; padding: 12px; align-items: flex-start; gap: 10px; border-radius: 10px 0 0 10px; border: 1px solid var(--Gray-200, #C7CBD9); background: var(--Background-DEFAULT, #FFF); } .button-plus { display: flex; width: 44px; height: 44px; padding: 12px; align-items: flex-start; gap: 10px; border-radius: 0 10px 10px 0; border: 1px solid var(--Gray-200, #C7CBD9); background: var(--Background-DEFAULT, #FFF); } .checkout-button-input { display: flex; height: 44px; justify-content: center; align-items: center; gap: 10px; text-align: center !important; padding: 10px; border: 1px solid var(--Gray-200, #C7CBD9); background: var(--Background-DEFAULT, #FFF); } /* Tight, unified controls for qty (minus, input, plus) */ .qty-group { display: flex; justify-content: flex-start; align-items: stretch; padding: 0 !important; } .qty-group .button-min, .qty-group .checkout-button-input, .qty-group .button-plus { margin: 0; box-sizing: border-box; } /* Show separators between -, input, and + (single inner borders) */ .qty-group .button-min { border-right-width: 1.2px; } .qty-group .checkout-button-input { border-left-width: 0; border-right-width: 1.2px; } .qty-group .button-plus { border-left-width: 0; } /* Ensure only outer corners are rounded */ .qty-group .checkout-button-input { border-radius: 0; } /* Center the +/- symbols within their 44x44 buttons when used in qty group */ .qty-group .button-min, .qty-group .button-plus { align-items: center; justify-content: center; } /* Optional: prevent input spinners from breaking layout (WebKit) */ .qty-group .checkout-button-input::-webkit-outer-spin-button, .qty-group .checkout-button-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-group .checkout-button-input[type=number] { -moz-appearance: textfield; /* Firefox */ } .minimum-is-ten { color: var(--Gray-700, #393E4D); font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; margin: 0 !important; } /* Utility: hidden */ .is-hidden { display: none !important; } /* Visually hide native select but keep it accessible for screen readers */ .nse-native-select-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } .screen-reader-text { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* Custom plan options box shown below select */ .nse-plan-options { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 8px; border: 1px solid var(--Gray-300, #A8ADBF); background: #FFF; } .nse-plan-option { display: flex; align-items: center; padding: 10px 12px; border-radius: 6px; border: 1px solid transparent; background: #F7F8FC; color: #0A0A0A; text-align: left; font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .nse-plan-option:hover, .nse-plan-option:focus { background: rgba(162, 177, 230, 0.22); border-color: rgba(0, 43, 198, 0.33); border-radius: 8px; outline: none; } .nse-plan-option.active, .nse-plan-option[aria-selected="true"] { background: rgba(162, 177, 230, 0.22); border-color: #002BC6; color: #002BC6; } /* Smooth accordion behavior for NSE checkout panes */ .accordion-smooth { overflow: hidden; transition: height 280ms ease, opacity 200ms ease; will-change: height; } .accordion-smooth.is-collapsed { height: 0 !important; opacity: 0; pointer-events: none; } .payment-details-container { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; align-self: stretch; padding: 0 !important; margin: 0px 0px 17px !important; } .payment-details-label { /*display: flex;*/ flex-direction: column; align-items: flex-start; gap: 8px; align-self: stretch; } .payment-col-details-label { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1 0 0; } .payment-details-label-title { color: var(--Gray-600, #535766); font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-size: 12px; font-style: normal; font-weight: 500; line-height: normal; } /* Payment Confirmation: order summary container overrides and layout */ .payment-confirmation-container { /* Proposed styles */ padding: 24px; gap: 10px; border-radius: 8px; border: 1px solid var(--Gray-200, #C7CBD9); background: #FFF; /* Layout/centering */ box-sizing: border-box; width: 100%; max-width: 720px; margin: 16px auto 0 auto; /* Override global checkout-order-summary rules on this page only */ min-height: auto !important; /* cancels 100vh */ } @media (max-width: 640px) { .visbl-nse-confirmation .payment-confirmation-container.checkout-order-summary { height: auto; /* allow content to define height on small screens */ padding: 16px; } #step-2.step-2-lender div.col.visbl-container { height: 50%; width: 100%; } #step-2.step-2-lender .nse-modal.plan-monthly > .row:first-child { flex-direction: column !important; padding-right: 0px; } #step-2.step-2-lender .nse-modal.plan-monthly .col.visbl-container, .nse-modal.plan-yearly .col.visbl-container { max-width: 100%; } } #step-2.step-2-lender .nse-modal .visbl-container:first-child { margin-top: 0px; border: none; } #step-2.step-2-lender .nse-modal .visbl-container:nth-child(2) { border: none; } #step-2.step-2-lender div.plan-container.individual-license { margin-top: 0px; border: 1px solid var(--Gray-300, #A8ADBF); } #step-2.step-2-lender div.plan-container.individual-license { background-color: transparent !important; } div.row.lender-features-details { display: flex; height: auto; padding: 24px; flex-direction: column; justify-content: center; align-items: center; gap: 11px; align-self: stretch; border-radius: 8px; background: var(--Gray-50, #F5F7FC); margin-left: 2px; margin-right: 2px; } div.row.lender-features-details div.col:first-child { color: var(--Primary-Blue, #002BC6); text-align: center; font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; } div.row.lender-features-details div.col:nth-child(2) { color: var(--Gray-700, #393E4D); text-align: center; font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-size: 12px; font-style: normal; font-weight: 600; line-height: 140%; /* 16.8px */ } .lender-features-title-container { margin-bottom: 48px; } .lender-features-title-container p { color: #000; font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 0px; } .lender-features-title-container span { color: var(--Gray-700, #393E4D); font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } /** processing order styling modal */ .processing-order-modal { display: flex; width: 520px; padding: 48px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; border-radius: 16px; background: #FFF; } .processing-order-modal .spinner { width: 127px; height: 127px; display: inline-block; } .processing-order-modal .spinner svg { width: 100%; height: 100%; animation: spin 1.2s linear infinite; } .processing-order-modal .processing-title { color: #000; text-align: center; font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-size: 40px; font-style: normal; font-weight: 700; line-height: normal; } .processing-order-modal .processing-order-text { color: #000; text-align: center; font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-size: 18px; font-style: normal; font-weight: 500; line-height: 27px; /* 150% */ } /* Processing Order: full-screen overlay and accessibility */ .processing-order-overlay { position: fixed; inset: 0; z-index: 100000; /* above most WP admin UI */ display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); /* backdrop */ backdrop-filter: saturate(120%) blur(1.5px); } .processing-order-overlay.is-hidden { display: none !important; } /* Ensure modal scales nicely within the overlay */ .processing-order-overlay .processing-order-modal { width: min(520px, 92vw); max-width: 92vw; box-shadow: 0 10px 30px rgba(0,0,0,0.25); } /* Spinner animation (used inline on .spinner) */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .visbl-custom-plan-column { margin-left: 11% !important; margin-right: 11% !important; } /* Small screens: reduce padding for the modal */ @media (max-width: 480px) { .processing-order-overlay .processing-order-modal { padding: 28px; } .processing-order-overlay .processing-order-modal .processing-title { font-size: 28px; } .processing-order-overlay .processing-order-modal .processing-order-text { font-size: 16px; line-height: 24px; } .subscription-plan-pricing-subtitle { display: flex; height: auto; width: auto; flex-direction: column; justify-content: center; flex-shrink: 0 !important; align-self: stretch; color: var(--Gray-700, #393E4D); font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; margin-bottom: 13px !important; } .visbl-custom-plan-column { /* Ensure full-width on small screens without relying on Sass/Bootstrap extends */ width: 100%; margin-left: 0 !important; margin-right: 0 !important; } .items-center-toright { display: flex; align-items: center; justify-content: center; } } /* Responsive enhancements for subscription plans page */ @media (max-width: 768px) { .visbl-custom-plan-column .subscription-plan-pricing-title { text-align: center; font-size: 28px; line-height: 1.2; } .visbl-custom-plan-column .subscription-plan-pricing-subtitle { width: 100%; height: auto; text-align: center; } .visbl-custom-plan-column .actions, .visbl-custom-plan-column .items-center-toright { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } /* Features lists stack into one column on small screens */ .visbl-custom-plan-column .features .row > ul.col { flex: 0 0 100%; max-width: 100%; width: 100%; padding-left: 0; margin-left: 24px; } } @media (min-width: 769px) and (max-width: 1024px) { /* Make features lists two columns on tablets */ .visbl-custom-plan-column .features .row > ul.col { flex: 0 0 50%; max-width: 50%; } .visbl-custom-plan-column { margin-left: 4% !important; margin-right: 4% !important; } .visbl-custom-plan-column .items-center-toright { display: flex; justify-content: flex-end; align-items: center; gap: 10px; } } /* Desktop refinements */ @media (min-width: 1025px) and (max-width: 1439px) { .visbl-custom-plan-column { margin-left: 8% !important; margin-right: 8% !important; } .visbl-custom-plan-column .items-center-toright { display: flex; justify-content: flex-end; align-items: center; gap: 12px; } } /* Large desktops and TVs: constrain line length and scale slightly */ @media (min-width: 1440px) { .visbl-custom-plan-column { margin-left: auto !important; margin-right: auto !important; max-width: 1200px; } .visbl-custom-plan-column .items-center-toright { display: flex; justify-content: flex-end; align-items: center; gap: 14px; } } @media (min-width: 1920px) { .visbl-custom-plan-column { max-width: 1400px; } .visbl-custom-plan-column .subscription-plan-pricing-title { font-size: 36px; line-height: 1.2; } .visbl-custom-plan-column .subscription-plan-pricing-subtitle { font-size: 16px; width: 100%; } } /* === NSE Checkout: moved inline styles into CSS (consolidation) === */ /* First checkout container on the page should have no gap override */ .visbl-nse .visbl-row-container > div.row.visbl-checkout-container:first-of-type { gap: 0 !important; } /* Sign-in details: ensure zero bottom margin for header texts within header block */ .signing-details .signing-details-header .selected-plan-text, .signing-details .signing-details-header .text-link-change { margin-bottom: 0 !important; } /* Sign-in details: zero bottom margin for displayed values */ .signing-details .signing-details-content .signing-col p { margin-bottom: 0 !important; } /* Billed text blocks inside selected/unselected subcontainers should not add extra space */ .visbl-checkout-subcontainer-selected .container-billed-text, .visbl-checkout-subcontainer-unselected .container-billed-text { margin-bottom: 0; } /* Selected plan icon (blue rounded check icon) */ .checkout-icons a:first-child svg { border-radius: 200px; background: #002BC6; } /* Payment inputs: unify look per design */ .payment-details-container input { border-radius: 8px; border: 1px solid var(--Gray-200, #C7CBD9); background: #FFF; } /* Save Payment Method button: smaller, left-aligned, lowercase */ .payment-details-container #save-payment-method { width: auto !important; padding: 14px 73px !important; align-self: flex-start; text-transform: none !important; } /* Processing order modal: large spinner styling */ .processing-order-modal .spinner { width: 126px; height: 126px; border-radius: 50%; animation: spin 490s linear infinite; } /* Additional Loan Officers: header uses no margins */ .nse-lo-header { margin: 0 !important; } /* Subscription Checkout: exact 393px viewport adjustment for main container */ @media (min-width: 320px) and (max-width: 479px){ /* Target the exact div rendered in 2-subscription-checkout.php */ .visbl-nse.visbl-nse-checkout.row.col-10.offset-1 { margin-left: 0px; margin-right: 0px; width: auto; padding-left: 16px; padding-right: 16px; } } @media (min-width: 768px) { /* Target the exact div rendered in 2-subscription-checkout.php */ .visbl-nse.visbl-nse-checkout.row.col-10.offset-1 { width: auto; padding-left: 0px; padding-right: 0px; margin-right: 0px; margin-left: unset; } } /* Visbl New Subscriber Experience - General Styles */ /* Container */ .visbl-nse { box-sizing: border-box; padding: 24px; } /* Headings and text spacing */ .visbl-nse h1, .visbl-nse h2, .visbl-nse h3 { margin: 0 0 12px 0; } .visbl-nse p { margin: 0 0 10px 0; } /* Buttons (matches WP admin-ish style) */ .visbl-nse.button, .visbl-nse .button, .visbl-nse a.button, .visbl-nse button.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 158px; height: 48px; padding: 8px 26px; background-color: #FFFFFF; color: Gray; angle: 0 deg; border-radius: 16px; text-decoration: none; border: 0; cursor: pointer; opacity: 1; transition: background-color 160ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; font-weight: 700; font-style: normal; font-size: 14px; line-height: 131%; text-transform: uppercase; } /* Hover/Focus states */ .visbl-nse.button:focus, .visbl-nse.button:hover, .visbl-nse .button:focus, .visbl-nse .button:hover { background-color: rgba(162, 177, 230, 0.11); color: rgba(0, 43, 198, 0.66); } /* Active (click) feedback approximating a spring tap */ .visbl-nse.button:active, .visbl-nse .button:active { transform: scale(0.98); background-color: rgba(162, 177, 230, 0.22) !important; color: #002BC6 !important; } /* Secondary success button helper */ .visbl-nse .button-success { background: #46b450; } .visbl-nse .button-success:hover { background: #3da246; } /* Panels / Modals used in test content */ .nse-modal, .nse-submodal, .nse-subsubmodal { /*background: #fff;*/ border-radius: 6px; padding: 12px; } /* nse-modal row and container nested styles */ .nse-modal .visbl-container { padding: 10px; border-radius: 8px; margin: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 0 0; border: 1px solid var(--Gray-300, #A8ADBF); background: #FFF; min-width: 251px; } .visbl-container > last-child { /* This removes the bottom gap from the last row of items. */ margin-bottom: 0; } /* nse-modal row and container nested styles */ .nse-modal .individual-license{ padding: 24px !important; border-radius: 8px; /* background-color: rgba(245, 247, 252, 1);*/ display: flex; flex-direction: column; align-items: center; gap: 11px; } .nse-modal > .row { padding-top: 30px; } /* --- MODIFICATION: Make plan cards scroll horizontally on smaller screens --- */ @media (max-width: 966px) { /* Convert the plan row to a horizontal scroll container */ .nse-modal > .row { padding-top: 30px; flex-direction: row; flex-wrap: nowrap; /* Ensure cards stay in a single line */ overflow-x: auto; /* Enable horizontal scrolling */ overflow-y: hidden; /* Prevent vertical scrollbar */ -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ gap: 16px; /* Horizontal gap between cards */ padding-bottom: 16px; /* Add some space for the scrollbar */ justify-content: flex-start; /* Align cards to the start */ align-items: stretch; /* Make cards equal height */ } /* Ensure each plan card has a width and doesn't shrink */ .nse-modal > .row > .col.visbl-container { flex: 0 0 80%; /* Each card takes up 80% of the viewport width */ max-width: 320px; /* But not more than 320px */ width: 80%; /* Explicit width */ margin: 0; /* Reset margins from grid system */ } /* Adjust the "Current Plan" indicator to sit nicely on top of the card in a stacked view */ .current-plan-indicator { top: -26px; /* Position it to slightly overlap the top of the card */ } .nse-modal>.row::-webkit-scrollbar { height: 8px; } .nse-modal>.row::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } } @media (max-width: 480px) { .nse-modal>.row>.col.visbl-container { flex-basis: 92%; max-width: 92%; /* Keep this consistent with flex-basis */ width: 92%; } } /* Wavehaus font embedding and global application for NSE */ @font-face { font-family: 'Wavehaus'; src: url('/wp-content/themes/visbl/assets/fonts/wavehaus/Wavehaus-28Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Wavehaus'; src: url('/wp-content/themes/visbl/assets/fonts/wavehaus/Wavehaus-42Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Wavehaus'; src: url('/wp-content/themes/visbl/assets/fonts/wavehaus/Wavehaus-66Book.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Wavehaus'; src: url('/wp-content/themes/visbl/assets/fonts/wavehaus/Wavehaus-95SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Wavehaus'; src: url('/wp-content/themes/visbl/assets/fonts/wavehaus/Wavehaus-128Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Wavehaus'; src: url('/wp-content/themes/visbl/assets/fonts/wavehaus/Wavehaus-158ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; } /* Apply Wavehaus to all text in NSE scope */ .visbl-nse, .visbl-nse * { font-family: 'Wavehaus', Arial, sans-serif !important; } /* Hide specified sections at initial load (moved from inline style in 2-subscription-checkout.php) */ .hidden-at-load-checkout { display: none !important; } /* Sections that hide only after clicking Next remain visible at load */ /* .to-hide-after-click-next-button { display: none; } */ /* Keep CSS variable in sync as fallback */ :root { --font-family-wavehaus: 'Wavehaus', Arial, sans-serif; } /* Disabled state for checkout button: when text is 'Place Order' we also set disabled attribute and class in JS. Ensure the button looks and behaves disabled (no pointer, no hover feedback). */ .visbl-nse .button.disabled, .visbl-nse button.button:disabled, .visbl-nse a.button.disabled { cursor: default !important; pointer-events: none; opacity: 0.6; } /* Ensure hover styles don't apply when disabled */ .visbl-nse .button.disabled:hover, .visbl-nse button.button:disabled:hover, .visbl-nse a.button.disabled:hover { background-color: #FFFFFF; color: Gray; } #card-element.stripe-placeholder { width: 100%; } .order-summary-addon-section { margin-top: 24px; } .col.checkout-icons a:first-of-type { margin-right: 10px; } div.row.visbl-checkout-container>div.nse-modal { padding-left: 0px; padding-right: 0px; padding-top: 0px; } div.nse-modal>p { color: var(--Gray-400, #9296A6); font-family: 'Wavehaus', Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; text-transform: none; } /* Coupon subform (inline input + apply button) */ .coupon-subform .code { width: 100%; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; font-size: 16px; color: var(--Gray-600, #535766); font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; } .coupon-subform .coupon-code { line-height: 130%; margin: 0; font-weight: 700; } .coupon-subform .input { width: 100%; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--Gray-900, #13151A); } .coupon-subform .input-inner { flex: 1; display: flex; align-items: center; } .coupon-subform .coupon-input-wrapper { flex: 1; height: 48px; border-radius: 8px; background: #FFF; border: 1px solid var(--Gray-200, #C7CBD9); box-sizing: border-box; display: flex; align-items: center; padding: 0 16px; } .coupon-subform .coupon-input-wrapper .coupon-loading-icon { margin-left: 8px; display: inline-flex; } .coupon-subform .coupon-input-wrapper .coupon-loading-icon img { width: 20px; height: 20px; animation: visbl-rotate 0.9s linear infinite; } @keyframes visbl-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .coupon-subform #coupon-input { width: 100%; border: 0; outline: none; font-size: 14px; color: var(--Gray-900, #13151A); } .coupon-subform .coupon-apply-btn { height: 48px !important; border-radius: 45px !important; border: 1px solid var(--Primary-Blue, #002BC6) !important; background: #fff !important; color: var(--Primary-Blue, #002BC6) !important; padding: 14px 24px !important; min-width: 120px; text-transform: none !important; } .coupon-subform .apply { line-height: 21.34px; } .coupon-message { margin: 0; font-size: 12px; } .coupon-message.error { color: #fa755a; } /* Applied coupon row */ .coupon-applied.is-hidden { display: none !important; } .coupon-applied .text { width: 100%; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; font-size: 18px; color: var(--Gray-900, #13151A); font-family: var(--font-family-wavehaus, 'Arial'), sans-serif; } .coupon-applied .text .coupon-code { font-weight: 700; } .coupon-applied .frame-parent { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 16px; color: var(--Gray-600, #535766); } .coupon-applied .frame-group { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .coupon-applied { padding-bottom: 16px; } .coupon-applied .visbl25 { padding-left: 0; padding-right: 2px; height: 35px; display: flex; align-items: center; } /* Applied coupon discount amount */ .coupon-applied .applied-coupon-amount { font-size: 16px; color: var(--Gray-600, #535766); font-weight: 600; text-align: right; margin-left: auto; flex-shrink: 0; } .coupon-applied .tabler-icon-trash { height: 35px; width: 35px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--Gray-200, #C7CBD9); } button.nse-plan-option { display: flex; padding: 8px 16px; align-items: center; gap: 8px; align-self: stretch; background-color: transparent; } #nse-plan-selector-display { display: flex; height: 44px; padding: 0 16px; justify-content: space-between; align-items: center; align-self: stretch; border-radius: 8px; border: 1px solid var(--Gray-200, #C7CBD9); background: #FFF; pointer-events: all; } .nse-plan-selector-label { color: #0C0C0C; font-family: 'Wavehaus', Arial, sans-serif !important; font-size: 16px; font-style: normal; font-weight: 400!important; line-height: normal; } .nse-plan-selector-label-strong { color: #0C0C0C; font-family: 'Wavehaus', Arial, sans-serif !important; font-size: 16px; font-style: normal; font-weight: 600; line-height: normal; } #nse-plan-selector-display * { pointer-events: none; } .col.visbl-row-container { display: flex; width: 50% !important; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 40px; padding-left: 82px; } .visbl-nse.visbl-nse-checkout.row.col-10.offset-1 { padding-top: 0px; } .clickable-left-arrow { cursor: pointer; } /* Left arrow icon for checkout title */ .visbl-left-arrow-icon { display: flex; width: 44px; height: 44px; justify-content: center; align-items: center; border-radius: 110px; } .visbl-left-arrow-icon svg { stroke-width: 2.75px; stroke: var(--Ico-Black, #222); } .col.checkout-order-summary { padding: 40px; } .row .col h8 { color: var(--Gray-600, #535766); font-family: 'Wavehaus', Arial, sans-serif !important; font-size: 18px; font-style: normal; font-weight: 700; line-height: 130%; /* 23.4px */ } .col.items-toright.checkout-total-gray { color: var(--Gray-600, #535766); font-family: Wavehaus; font-size: 18px; font-style: normal; font-weight: 600; line-height: 130%; /* 23.4px */ } p.col.items-toright.checkout-total-gray { color: var(--Gray-600, #535766); font-family: Wavehaus; font-size: 18px; font-style: normal; font-weight: 700; line-height: 130%; } #continue-checkout { margin-top: 21px!important; display: flex; padding: 14px 73px!important; justify-content: center; align-items: center; gap: 10px; align-self: stretch; border-radius: 45px!important; background: #002BC6; color: #FFF; text-align: center; font-family: 'Wavehaus', Arial, sans-serif !important; font-size: 16px; font-style: normal; text-transform: lowercase; font-weight: 700; line-height: 21.34px; /* 133.375% */ } .row.footer-text { align-self: stretch; } .row.footer-text p, .row.footer-text-mobile p { color: #393E4D; font-family: 'Wavehaus', Arial, sans-serif !important; font-size: 12px; font-style: normal; font-weight: 600; line-height: 150%; } .row.footer-text-mobile a, .row.footer-text a { color: #393E4D; font-family: 'Wavehaus', Arial, sans-serif !important; font-size: 12px; font-style: normal; font-weight: 600; line-height: 150%; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .checkout-button-input { font-size: 19px; font-weight: 600; line-height: 130%; } .col.checkout-order-summary { padding: 40px; } .hidden-at-load-selected-plan { display: none !important; } /* --- Stripe split card fields layout and style (per issue: card-number, card-expiry, card-cvc) --- */ .stripe-split-fields { display: flex; flex-direction: column; gap: 8px; } .stripe-split-row { display: flex; gap: 8px; } /* Shared container styles for Stripe Element mounts */ #card-number, #card-expiry, #card-cvc, #billing-address { /*display: flex;*/ min-height: 48px; padding: 0 16px; align-items: center; align-self: stretch; border-radius: 8px; border: 1px solid var(--Gray-200, #C7CBD9); background: #FFF; } /* Specific layout adjustments */ #card-number { justify-content: space-between; } #card-expiry, #card-cvc { gap: 8px; } /* Brand indicator positioned to the right within the Card Number field */ .payment-details-label { position: relative; } .card-number-wrapper { position: relative; width: 100%; } #card-number { padding-right: 64px; /* reserve space for brand indicator */ } .card-brand-indicator { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); /* vertically center relative to input wrapper */ width: 40px; height: 34px; background: #fff; padding: 3.2px; border-radius: 8px; border: 0.8px solid #d8dceb; box-sizing: border-box; display: flex; align-items: center; justify-content: center; pointer-events: none; } .card-brand-indicator.is-hidden { display: none; } /* Make expiry and cvc split evenly on the row */ .stripe-split-row #card-expiry, .stripe-split-row #card-cvc { flex: 1 1 0; } /* Billing inputs styling */ .billing-details-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .billing-label { font-size: 12px; color: #222; } .billing-input { display: flex; /* per requirement */ height: 48px; padding: 0 16px; align-items: center; /* per requirement */ gap: 8px; /* per requirement */ align-self: stretch; /* per requirement */ border-radius: 8px; border: 1px solid var(--Gray-200, #C7CBD9); background: #FFF; font-size: 14px; width: 100%; /* ensure full-width inside flex parents */ } .billing-input:focus { outline: none; border-color: #002BC6; box-shadow: 0 0 0 3px rgba(0,43,198,0.15); } div.payment-details-container #card-number { display: block; height: 48px; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--Gray-200, #C7CBD9); background: #FFF; box-sizing: border-box; color: #0C0C0C; font-family: 'Inter', Arial, sans-serif !important; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } label.payment-details-label #billing_name { display: block; height: 48px; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--Gray-200, #C7CBD9); background: #FFF; box-sizing: border-box; color: #0C0C0C; font-family: 'Inter', Arial, sans-serif !important; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } label.payment-details-label #billing_address_line1 { display: block; height: 48px; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--Gray-200, #C7CBD9); background: #FFF; box-sizing: border-box; color: #0C0C0C; font-family: 'Inter', Arial, sans-serif !important; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } div.payment-details-container div.row { width: 100% !important; margin-left: 0px !important; margin-right: 0px !important; column-gap: 16px; } div.payment-details-container div.row div.col { padding-right: 0px !important; padding-left: 0px !important; } label.payment-col-details-label #card-expiry { display: block; height: 48px; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--Gray-200, #C7CBD9); background: #FFF; box-sizing: border-box; } label.payment-col-details-label #card-cvc { display: block; height: 48px; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--Gray-200, #C7CBD9); background: #FFF; box-sizing: border-box; } div.payment-details p.selected-plan-text { color: var(--Gray-700, #393E4D); font-family: 'Wavehaus', Arial, sans-serif !important; font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; } div.signing-full-name p.visbl-size-container-title { color: var(--Gray-400, #9296A6); font-family: 'Wavehaus', Arial, sans-serif !important; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; text-transform: capitalize!important; } div.signing-email-address p.visbl-size-container-title { color: var(--Gray-400, #9296A6); font-family: 'Wavehaus', Arial, sans-serif !important; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; text-transform: capitalize!important; } label.payment-details-label a.payment-details-label-title { color: var(--Gray-400, #9296A6); font-family: 'Wavehaus', Arial, sans-serif !important; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } label.payment-col-details-label a.payment-details-label-title { color: var(--Gray-400, #9296A6); font-family: 'Wavehaus', Arial, sans-serif !important; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } @media (max-width: 620px) { #step-1 .frame-parent { padding-bottom: 160px !important; padding-left: 16px !important; padding-right: 16px !important; } #step-2 .frame-parent { margin-top: 100px!important; padding-left: 16px !important; padding-right: 16px !important; padding-bottom: 60px !important; } #step-2 .frame-parent:nth-child(2), #step-2 .frame-parent:nth-child(3), #step-2 .frame-parent:nth-child(4) { margin-top: 0px !important; } .progress-steps-progress-icon { display: none !important; } hr.invite-divider.form-divider { display: none !important; } div.frame-parent { width: 100% !important; box-sizing: border-box; } div.frame-parent div.intro-section { width: 100%; } p.intro-title-line { text-align: left !important; padding-right: 24px; } div.form-section { width: 100% !important; } div.form-section div.field-group { width: 100% !important; } div.visbl-custom-plan-column div.row div.col{ flex: none; } .name-row, .location-row { flex-direction: column; gap: 1rem; width: 100%; } .name-row .field-column, .location-row .field-column { width: 100%; } div.name-row { flex-direction: row !important; width: 100% !important; flex-wrap: wrap; } div.name-row .field-column { flex: 0 0 47%; flex-shrink: 0; } div.location-row { flex-direction: row !important; width: 100% !important; flex-wrap: wrap; } div.location-row .field-column { width: calc(50% - 0.5rem); flex: 0 0 48%; flex-shrink: 0; } div.intro-steps-for-mobile { position: relative; display: flex !important; column-gap: 12px; border-bottom: 1px solid var(--Gray-100, #D8DCEB); top: 100px; margin-left: 16px; margin-right: 16px; max-width: 100% !important; width: calc(100% - 32px) !important; } div.intro-steps-for-mobile p.step-subtitle-line { display: flex !important; column-gap: 12px; margin-bottom: 16px; } } @media (max-width: 320px) { div.frame-parent div.intro-section { width:100%; } div.name-row { flex-direction: column !important; width: 100% !important; } div.name-row div.field-column { width: 100%; } div.location-row { flex-direction: column !important; width: 100% !important; } div.location-row .field-column { width: 100%; } } div.step-image img { padding-right:12px; width: 52px; } p.step-title-line { color: var(--Primary-Blue, #002BC6); font-family: 'Wavehaus', Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 700; line-height: 20px; margin-bottom: 0px!important; /* 142.857% */ } p.step-subtitle-line { color: var(--Primary-Blue, #002BC6); font-family: 'Wavehaus', Arial, sans-serif; font-size: 12px; font-style: normal; font-weight: 600; line-height: 20px; /* 166.667% */ } div.intro-steps-for-mobile { display: none; width: 100%; } div.row.footer-text-mobile { display: none; color: var(--Gray-700, #393E4D); font-family: 'Wavehaus', Arial, sans-serif !important; font-size: 12px; font-style: normal; font-weight: 600; line-height: 150%; padding-top: 24px; } /* Responsive styles for screens smaller than 620px */ @media (max-width: 620px) { #step-3 { margin-top:130px; padding-bottom: 90px!important; } #step-3 div.intro-steps-for-mobile { padding-left: 0%; padding-right: 0%; } #step-3 > div > .row { padding-right: 0px !important; margin-right: 0px !important; box-sizing: content-box; } p.subscription-plan-pricing-title { text-align:left!important; } #step-3>div>div:nth-child(2) { margin-top: 30px; padding-left: 0px; } /* Apply horizontal padding and ensure full width for the main container */ .visbl-custom-plan-column { margin-left: 0 !important; margin-right: 0 !important; width: 100%; box-sizing: border-box; } /* Stack the main header section (title and buttons) */ .visbl-custom-plan-column > .row:first-child { flex-direction: column; } .visbl-custom-plan-column > .row:first-child > .col { width: 100%; text-align: center; } .visbl-custom-plan-column .subscription-plan-pricing-subtitle { width: 100%; /* Ensure subtitle takes full width */ text-align: left; } /* Center the monthly/yearly toggle buttons and make them full width if needed */ .visbl-custom-plan-column .actions { justify-content: center; width: 100%; flex-direction: column; /* Stack buttons vertically */ gap: 10px; } .visbl-custom-plan-column .actions .button { width: 49%; /* Make buttons full width */ flex: 0 0 49%; } /* Stack the feature list columns */ .features .row > ul.col { width: 100%; flex-basis: 100%; max-width: 100%; padding-left: 0; } /* Adjust feature section rows for vertical stacking */ .features .row { align-items: flex-start; } .invite-email-form { width: 100% !important; } .invite-send-button { width: 100% !important; } #step-4 { margin-top: -90px; padding-left: 16px !important; padding-right: 16px !important; } #step-4 div.frame-parent { padding-top: 0px; padding-bottom: 350px; } #step-1 div.frame-parent { top:100px; padding-bottom: 170px; width: 100%; } div.visbl-nse-checkout { width: 100% !important; margin-left: 0px !important; } div.visbl-nse-checkout div.col.visbl-row-container { display: flex; flex: auto; width: 100% !important; margin-left: 0px !important; padding-left: 16px; padding-right: 16px; /* Reduced padding - footer-text-mobile handles the bottom space */ padding-bottom: 24px !important; } /* Sticky order summary styles are now applied in the other 620px media query */ div.col.checkout-order-summary { margin-top: 0; margin-left: 0px; margin-right: 0px; } div.intro-steps-for-mobile div.step-image { /* Set a size for your div */ width: 52px; /* Example size */ height: 52px; /* Example size */ /* Ensure it displays correctly */ background-repeat: no-repeat; background-position: center; background-size: contain; } /* Rotate the progress circle SVG so it starts from the top (12 o'clock) */ div.intro-steps-for-mobile div.step-image svg #progress-circle { transform: rotate(-90deg); transform-origin: center; } #step-4 hr.invite-divider.full-width { display: block !important; width: 100% !important; } div.row.footer-text { display: none !important; } div.row.footer-text-mobile { display: block !important; padding-left: 16px; padding-right: 16px; padding-bottom: 180px; /* Space for sticky order summary */ margin-bottom: 0; } .nse-modal.plan-monthly > .row:first-child, .nse-modal.plan-yearly > .row:first-child { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: scroll !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; gap: 20px; padding: 20px; width: 100%; /* Improve touch responsiveness */ touch-action: pan-x; /* Reduce momentum for easier control */ overscroll-behavior-x: contain; } .nse-modal.plan-monthly .col.visbl-container, .nse-modal.plan-yearly .col.visbl-container { scroll-snap-align: center; scroll-snap-stop: always; max-width: 90%; /* Ensure smooth transitions */ transition: transform 0.2s ease-out; } .nse-modal.plan-monthly .plan-container, .nse-modal.plan-yearly .plan-container { height: 100%; width: 100%; } /* Hide scrollbar */ .nse-modal.plan-monthly .row::-webkit-scrollbar, .nse-modal.plan-yearly .row::-webkit-scrollbar { display: none; } .nse-modal.plan-monthly .row, .nse-modal.plan-yearly .row { scrollbar-width: none; -ms-overflow-style: none; } .col.visbl-checkout-subcontainer-selected, col.visbl-checkout-subcontainer-unselected { min-width: 100% !important; } div.col.checkout-order-summary { min-height: auto !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 16px !important; padding-right: 16px !important; /* Sticky positioning for mobile */ position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; background-color: #f5f7fc !important; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1) !important; padding-top: 16px !important; padding-bottom: 16px !important; border-radius: 16px 16px 0 0 !important; } div.order-summary-wrapper-desktop { display: none!important; } /* Order Summary Details Toggle Styles */ .order-summary-wrapper { display: block!important; width: 100%; } .order-summary-header { margin-bottom: 8px; } .details-toggle-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0px; background: transparent; border: none; cursor: pointer; transition: all 0.2s ease; font-family: 'Wavehaus', sans-serif; font-size: 16px; font-weight: 600; color: #222222; } .details-toggle-btn:focus { outline: 2px solid #002BC6; outline-offset: 2px; } .details-text { color: var(--Primary-Blue, #002BC6); font-family: 'Wavehaus', sans-serif !important; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .toggle-arrow { display: flex; align-items: center; transition: transform 0.2s ease; color: #73788C; transform: rotate(180deg); /* Default: pointing up (collapsed) */ } .details-toggle-btn[aria-expanded="true"] .toggle-arrow { transform: rotate(0deg); /* When expanded: pointing down */ } .order-summary-content { overflow-y: auto; overflow-x: hidden; transition: max-height 0.3s ease, opacity 0.2s ease; max-height: 50vh; /* Limit height to 50% of viewport when expanded */ opacity: 1; } .order-summary-content.collapsed { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; overflow: hidden; } /* Ensure coupon trigger is visible and clickable on mobile */ #coupon-trigger-row { cursor: pointer; transition: background-color 0.2s ease; } #coupon-trigger-row:hover { background-color: rgba(0, 43, 198, 0.05); } #coupon-trigger-row:active { background-color: rgba(0, 43, 198, 0.1); } /* Ensure coupon submodal is fully visible when shown */ #nse-coupon-submodal { opacity: 1; pointer-events: auto; } #nse-coupon-submodal.is-hidden { display: none !important; } /* Applied coupon row alignment on mobile */ .coupon-applied .text { width: 100%; } .coupon-applied .frame-parent { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .coupon-applied .frame-group { flex-shrink: 0; } .coupon-applied .visbl25-wrapper { padding-left: 0; } .coupon-applied .applied-coupon-amount { margin-left: auto; flex-shrink: 0; } div.col.checkout-order-summary { min-height: auto; } .payment-details-container #save-payment-method { margin: 0 auto; } div.row.signing-details-content { display: flex; flex-direction: column; } .checkout-icons { column-gap:16px; } div.line-border.line-border-mobile-only { display: block !important; margin-top: 12px; } #same-as-primary-toggle { width: 22px; height: 22px; } div.confirmation-button-container { display: flex; flex-direction: column; } a.button-confirmation { min-width: 90%!important; } } @media (max-width: 1000px) { a.payment-edit-link-desktop-only { display: none !important; } a.payment-edit-link-mobile-only{ display: block !important; text-align: end; text-transform: capitalize; } } @media (max-width: 800px) { #edit-payment-details div.row { display: flex; flex-direction: column-reverse; } #edit-payment-details p.selected-plan-text { display:flex; } .plan-selected-icons-container { display: inline-flex!important; /*flex-direction: column;*/ gap: 8px; margin-right: 8px; } .checkout-icons a:first-child svg { min-width: 20px; } } @media (min-width: 621px) and (max-width: 1499px) { .content { width: 70%!important; } div.visbl-nse.visbl-nse-checkout { display: flex; flex-wrap: wrap; flex-direction: column; gap: 24px; width: 70% !important; margin: 0 auto !important; } #step-1 .frame-parent { width: 100% !important; top: 0px !important; padding-bottom: 60px !important; } div.col.visbl-row-container { width: 100% !important; padding-left: 0px; padding-right: 0px; } div.row.footer-text { display: none !important; } div.row.footer-text-mobile { display: block !important; } #step-2 .frame-parent { width: 100% !important; margin-top: 0px !important; padding-bottom: 60px !important; } #step-2 .frame-parent { margin-top: 0px !important; padding-bottom: 60px !important; } .intro-section { width: 440px!important; } div.row.visbl-checkout-container { margin-right: 0px !important; } .visbl-custom-plan-column { margin-top: 30px !important; width: 100% !important; flex-direction: column; margin-left: 0px !important; margin-right: 0px !important; } div.site-wrap div.row.visbl-custom-plan-column { margin-left: 8% !important; margin-right: 8% !important; } #step-2.step-2-lender div.row.visbl-custom-plan-column { margin-left: auto !important; margin-right: auto !important; } #step-2.step-2-lender .visbl-custom-plan-column > div.row:nth-child(1) { margin-left: auto!important; margin-right: auto!important; } div.col.checkout-order-summary { margin-left: 0px !important; } .visbl-custom-plan-column > div.row:nth-child(1) { padding-left: 0px; padding-right: 0px; } .visbl-custom-plan-column > div.row:nth-child(2) { margin-top: 0px !important; padding-bottom: 60px !important; } #step-4 .frame-parent { width: 100% !important; top: 0px !important; max-width: 900px; margin: 0 auto !important; padding-left: 16px; padding-right: 16px; box-sizing: border-box; } #step-4 .frame-parent > .invite-collaborate-header { width: 100%; max-width: 900px; } #step-4 .frame-parent > .info-banner { width: 100%; max-width: 900px; } #step-4 .invite-email-section { width: 100%; max-width: 900px; padding-left: 0; padding-right: 0; } hr.invite-divider.full-width { display: block !important; width: 100% !important; } #invite-form-data { display:none !important; } .progress-steps-progress-icon.steps-3 { width: 100% !important; margin: 0 auto !important; margin-top: 95px !important; } .progress-steps-progress-icon.steps-3 .content { justify-content: center !important; } hr.invite-divider.form-divider { display: none !important; } .payment-details-container #save-payment-method { margin: 0 auto; } } a.payment-edit-link-desktop-only { display: block; padding-top: 8px; } a.payment-edit-link-mobile-only{ display: none; } div.line-border.line-border-mobile-only { display: none; } div.order-summary-wrapper-desktop { display: block; } div.order-summary-wrapper { display: none; } /* Hide mobile backdrop on desktop */ .checkout-summary-backdrop { display: none !important; } /* Mobile only: backdrop for order summary expansion */ @media (max-width: 620px) { .checkout-summary-backdrop { display: none !important; /* Hidden by default */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 999; transition: opacity 0.3s ease; } .checkout-summary-backdrop.show { display: block !important; } div.features-lender-detail-special-description { padding-left: 10%; } } #nse-coupon-submodal { display: flex; flex-wrap: wrap; flex-direction: row; width: 100%; padding-left: 0px; padding-right: 0px; } #nse-coupon-submodal label { width: 70%; } #coupon-input { display: flex; height: 48px; align-items: center; gap: 8px; flex: 1 0 0; color: var(--Gray-900, #13151A); font-family: 'Wavehaus', Arial, sans-serif !important; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; background-color: transparent; } div.coupon-actions { width: 30%; padding-left: 8px; } #apply-coupon { display: flex; height: 48px; padding: 14px 73px; justify-content: center; align-items: center; gap: 10px; border-radius: 45px; border: 1px solid var(--Primary-Blue, #002BC6); color: #002BC6; text-align: center; font-family: 'Wavehaus', sans-serif !important; text-transform: lowercase; font-size: 18px; font-style: normal; font-weight: 700; line-height: 21.34px; } .svg-background { display: flex; /* Makes the span behave like a block-level element */ width: 25px !important; /* Set the width for the span */ height: 25px; margin-right: 15px; /* Set the height for the span */ border-radius: 200px; /* Make the span circular */ background-color: #002BC6; /* Set the background color */ background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"%3E%3Cpath d="M4.1665 10.9399L8.33317 15.1065L16.6665 6.77319" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /%3E%3C/svg%3E'); background-position: center; /* Center the SVG background */ background-repeat: no-repeat; /* Ensure the background doesn't repeat */ background-size: 20px 21px; /* Adjust the size of the SVG */ } p.visbl-size-container-title { color: var(--Gray-700, #393E4D); font-family: 'Wavehaus', sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; } p.container-billed-text { color: var(--Gray-700, #393E4D); font-family: 'Wavehaus', sans-serif !important; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } #selected-plan-minimum-amount { padding-left: 0px !important; padding-right: 0px !important; color: var(--Gray-700, #393E4D); font-family: 'Wavehaus', sans-serif !important; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } li.advertising-feature-item, li.unlimited-loan-applications-feature-item { display: flex; flex-wrap: wrap; flex-direction: row; } span.advertising-feature-text, span.unlimited-loan-applications-text { margin-left: -20px; margin-right: 15px; color: var(--Gray-500, #73788C); font-family: Wavehaus; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } .coming-soon-link { display: flex; padding: 4px 8px; justify-content: center; align-items: center; gap: 10px; border-radius: 16px; background: var(--Primary-Blue, #002BC6); color: #FFF; text-align: center; font-family: Wavehaus; font-size: 10px; font-style: normal; font-weight: 600; line-height: normal; cursor: pointer; } .coming-soon-link:hover { text-decoration: none; background: var(--Primary-Blue, #002BC6); color: #FFF; } .payment-method-name { display: flex; min-width: 70%!important; gap: 17px; flex-wrap: wrap; flex-direction: row; align-items: center; } div.features ul.col { margin-left: 0px; padding-left: 0px; } span.features-detail-icon { display: inline-flex; gap: 8px; } div.row.plan-card p.plan-subtitle { text-transform: none; } .plan-selected-icons-container { display: inline-flex; gap: 8px; margin-right: 8px; } span.payment-method-name svg { border-radius: 200px; background: #002BC6; } span.features-lender-detail-description { color: var(--Gray-500, #73788C); font-family: 'Wavehaus', sans-serif !important; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; display: flex; gap: 20px; } span.features-lender-detail-description a.coming-soon-link { min-width:50%; } div.lender-features li { margin-top: 0px; margin-bottom: 16px; color: var(--Gray-700, #393E4D); font-family: 'Wavehaus', sans-serif !important; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } div.lender-features div.features-detail-title-container { margin-bottom: 16px; } /* ============================================ FIGMA DESIGN ALIGNMENT - Checkout Improvements ============================================ */ /* Billing check icon positioned in top-right corner of billing boxes */ .billing-check-icon { position: absolute; top: 11px; right: 11px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .billing-check-icon.is-hidden { display: none; } .billing-check-icon svg { width: 24px; height: 24px; } /* Make billing boxes position relative for absolute positioning of check icon */ .visbl-checkout-subcontainer-selected, .visbl-checkout-subcontainer-unselected { position: relative; cursor: pointer; transition: all 0.2s ease; box-sizing: border-box; } /* ============================================ CHECKOUT CARDS - Equal Width Layout ============================================ */ /* All main checkout container cards should have the same fixed width */ .visbl-nse .visbl-row-container > .row.visbl-checkout-container, .visbl-nse .visbl-row-container > .row.visbl-checkout-container.to-hide-after-click-next-button { width: 645px !important; max-width: 100%; min-width: 0; } /* Hover effect for unselected boxes */ .visbl-checkout-subcontainer-unselected:hover { border-color: #a2b1e6; background: rgba(0, 43, 198, 0.02); } /* Improved padding and gap for checkout containers per Figma */ .visbl-nse .visbl-checkout-container { border: 1px solid #C7CBD9; gap: 17px; border-radius: 8px; padding: 10px; background: #fff; } /* Inner container for checkout modals */ .visbl-nse .visbl-checkout-container .nse-modal, .visbl-nse .visbl-checkout-container > div:not(.line-border) { padding: 16px; } /* Selected Plan card styling */ .visbl-nse .visbl-checkout-container .selected-plan-text { color: #393E4D; font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 17px !important; } /* Plan selected row - improved layout */ .payment-saved-div.plan-selected { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 !important; margin: 0 !important; } .plan-selected-icons-container { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; } .plan-selected-icons-container > a:first-child { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #002BC6; border-radius: 200px; } .plan-selected-icons-container > a:first-child svg { width: 20px; height: 20px; } /* Current plan name styling */ .current-plan-name { color: #000; font-size: 18px; font-weight: 700; line-height: 131%; text-transform: uppercase; letter-spacing: 0.36px; } /* Change link styling */ .text-link-change { color: #002BC6 !important; font-size: 16px; font-weight: 700; text-decoration: underline; margin-left: auto; } /* Plan billing boxes - improved per Figma */ h3.plan-selected { color: #000; font-size: 18px; font-weight: 700; line-height: 131%; text-transform: uppercase; letter-spacing: 0.36px; margin-bottom: 17px !important; } /* Billing boxes container title */ .visbl-size-container-title { color: #393E4D; font-size: 14px !important; font-weight: 700; text-transform: uppercase; margin-bottom: 0 !important; } /* Price styling */ .price-plan { color: #000; font-size: 36px; font-weight: 600; line-height: 130%; margin: 0 !important; } /* Billed text styling */ .container-billed-text { color: #393E4D; font-size: 14px; font-weight: 600; line-height: normal; margin: 0 !important; } /* Additional Loan Officers section header */ .selected-plan-text.nse-lo-header { color: #393E4D; font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 17px !important; } /* "You currently have X" text */ #selected-plan-minimum-amount { color: #393E4D; font-size: 14px; font-weight: 600; display: block; margin-bottom: 17px; } /* Quantity group (plus/minus buttons) per Figma */ .qty-group { display: inline-flex; align-items: center; margin-bottom: 17px; } .qty-group .button-min, .qty-group .button-plus { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 12px; background: #fff; border: 1.2px solid #C7CBD9; cursor: pointer; transition: all 0.2s ease; } .qty-group .button-min { border-radius: 9.6px 0 0 9.6px; } .qty-group .button-plus { border-radius: 0 9.6px 9.6px 0; } .qty-group .button-min:hover, .qty-group .button-plus:hover { background: #f5f7fc; border-color: #002BC6; } .qty-group .button-min:hover svg path, .qty-group .button-plus:hover svg path { fill: #002BC6; } .qty-group .checkout-button-input { width: auto; min-width: 50px; height: 44px; padding: 9.6px 15px; text-align: center; border: 1.2px solid #C7CBD9; border-left: none; border-right: none; background: #fff; color: #73788C; font-size: 19px; font-weight: 600; line-height: 130%; } .qty-group .checkout-button-input:focus { outline: none; border-color: #002BC6; } /* Hide spinner buttons on number input */ .qty-group .checkout-button-input::-webkit-outer-spin-button, .qty-group .checkout-button-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-group .checkout-button-input[type=number] { -moz-appearance: textfield; } /* Footer text styling per Figma */ .row.footer-text { margin-top: 24px !important; } .row.footer-text p { color: #393E4D; font-size: 12px; font-weight: 600; line-height: 150%; margin-bottom: 8px; } .row.footer-text a { color: #393E4D; font-size: 12px; font-weight: 600; text-decoration: underline; } /* Order Summary improvements per Figma */ .checkout-order-summary { background-color: #F5F7FC !important; padding: 40px !important; } .checkout-order-summary .visbl-size-checkout-title { color: #13151A; font-size: 24px; font-weight: 700; line-height: 30px; margin-bottom: 21px !important; } .checkout-order-summary .row { margin-bottom: 16px; } .checkout-order-summary .visbl-size-checkout-summary-row-title { color: #13151A; font-size: 18px; font-weight: 700; line-height: 130%; } .checkout-order-summary .visbl-size-checkout-summary-row-text { color: #535766; font-size: 16px; font-weight: 600; line-height: 130%; } .checkout-order-summary .checkout-total-black { color: #13151A; font-size: 18px; font-weight: 600; line-height: 130%; } .checkout-order-summary .checkout-total-gray { color: #535766; font-size: 18px; font-weight: 600; line-height: 130%; } /* Line border per Figma */ .checkout-order-summary .line-border { border-top: 1px solid #D8DCEB; margin: 16px 0; } /* Add Coupon Code link styling */ #coupon-trigger-row .text-link { color: #002BC6; font-size: 16px; font-weight: 700; text-decoration: underline; } /* Total Today and button section */ .visbl-checkout-container-bottom { display: flex; flex-direction: column; gap: 21px; padding: 0 !important; border: none !important; background: transparent !important; } .checkout-total-today { color: #535766; font-size: 18px; font-weight: 700; line-height: 130%; } #total-today-price { color: #535766; font-size: 18px; font-weight: 700; line-height: 130%; } /* Next button styling per Figma */ #continue-checkout { display: flex; width: 100%; padding: 14px 73px !important; justify-content: center; align-items: center; gap: 10px; border-radius: 45px !important; background: #002BC6; color: #FFF; font-size: 16px; font-weight: 700; line-height: 21.34px; text-transform: lowercase; margin-top: 21px !important; border: none; cursor: pointer; transition: background-color 0.2s ease; } #continue-checkout:hover:not(:disabled) { background: #0022a0; } #continue-checkout:disabled { background: #C7CBD9; cursor: not-allowed; } /* ============================================ SIGN IN Section - Figma Design ============================================ */ .signing-details { display: flex; flex-direction: column; gap: 17px; width: 100%; } .signing-details .signin-title { color: #393E4D; font-size: 14px; font-weight: 700; text-transform: uppercase; margin: 0 !important; } .signing-details .signing-details-content { display: flex; gap: 17px; width: 100%; } .signing-details .signing-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .signing-details .signin-label { color: #9296A6; font-size: 14px; font-weight: 600; margin: 0 !important; } .signing-details .signin-value { color: #393E4D; font-size: 16px; font-weight: 600; margin: 0 !important; } /* ============================================ PAYMENT Section - Figma Design ============================================ */ .payment-details .selected-plan-text { color: #393E4D; font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 17px !important; } .payment-details-container { display: flex; flex-direction: column; gap: 12px; } .payment-details-label, .payment-col-details-label { display: flex; flex-direction: column; gap: 8px; width: 100%; } .payment-details-label-title { color: #9296A6 !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; } .payment-details-container input, .payment-details-container select { display: flex; height: 48px; padding: 0 16px; align-items: center; border-radius: 8px; border: 1px solid #C7CBD9; background: #FFF; color: #13151A; font-size: 14px; font-weight: 600; width: 100%; box-sizing: border-box; } .payment-details-container input:focus, .payment-details-container select:focus { outline: none; border-color: #002BC6; } .payment-details-container input::placeholder { color: #9296A6; } /* City, State, ZIP row - 3 columns */ .payment-details-container .row-city-state-zip { display: flex; gap: 8px; width: 100%; } .payment-details-container .row-city-state-zip .col { flex: 1 1 0; min-width: 0; } /* Expiration and Security Code row - 2 columns */ .payment-details-container .row-expiry-cvc { display: flex; gap: 16px; width: 100%; } .payment-details-container .row-expiry-cvc .col { flex: 1 1 0; min-width: 0; } /* Subscriber Terms Checkbox - Figma Design */ .subscriber-terms-container { display: flex; align-items: center; gap: 16px; margin-top: 17px !important; margin-bottom: 17px !important; } .subscriber-terms-container label { display: flex !important; align-items: center !important; gap: 16px !important; cursor: pointer; } .subscriber-terms-container input[type="checkbox"] { width: 24px !important; height: 24px !important; border-radius: 2.5px; border: 1px solid #C7CBD9; cursor: pointer; flex-shrink: 0; accent-color: #002BC6; } .subscriber-terms-container .terms-text { color: #13151A; font-size: 14px; font-weight: 600; line-height: 21.42px; } .subscriber-terms-container .terms-text a { color: #002BC6; text-decoration: none; font-weight: 600; } .subscriber-terms-container .terms-text a:hover { text-decoration: underline; } /* Save Payment Method Button */ #save-payment-method { display: flex; padding: 14px 73px; justify-content: center; align-items: center; gap: 10px; border-radius: 45px; background: #002BC6; color: #FFF; font-size: 16px; font-weight: 700; text-transform: lowercase; border: none; cursor: pointer; margin-top: 17px; width: auto; } #save-payment-method:hover:not(:disabled) { background: #0022a0; } #save-payment-method:disabled { background: #C7CBD9; cursor: not-allowed; } /* ===== Compare / Change Plan Modal (Figma-aligned) ===== */ .visbl-modal.compare-flow { width: 520px; max-width: 92vw; padding: 48px; background: #FFFFFF; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.08); } .compare-modal-title { text-align: center; color: #000; font-size: 32px; font-family: var(--font-family-wavehaus, 'Wavehaus', Arial, sans-serif); font-weight: 700; line-height: 1.2; margin: 0; } .compare-modal-subtitle { text-align: center; color: #393E4D; font-size: 16px; font-family: var(--font-family-wavehaus, 'Wavehaus', Arial, sans-serif); font-weight: 700; margin: 0; } /* Body layout */ .compare-modal-body { display: inline-flex; align-items: flex-start; justify-content: center; gap: 4px; width: 100%; } /* Columns */ .compare-column { display: inline-flex; flex-direction: column; align-items: center; gap: 16px; } /* Plan card summary */ .plan-card-summary { min-width: 195px; height: 152px; padding: 16px 8px; border-radius: 8px; outline: 1px #D8DCEB solid; outline-offset: -1px; background: #fff; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; } #compare-new-plan .plan-card-summary { background: rgba(0, 43, 198, 0.10); outline: none; } .plan-card-summary .plan-name { color: #000; font-size: 20px; font-family: var(--font-family-wavehaus, 'Wavehaus', Arial, sans-serif); font-weight: 700; text-transform: uppercase; line-height: 26.2px; letter-spacing: 0.4px; margin: 0; text-align: center; } .plan-card-summary .plan-price { color: #000; font-size: 16px; font-family: var(--font-family-wavehaus, 'Wavehaus', Arial, sans-serif); font-weight: 500; line-height: 20.96px; letter-spacing: 0.32px; margin: 0; } /* Details */ .details-card-summary { min-width: 195px; height: 92px; padding: 14px 8px; border-radius: 8px; outline: 1px #D8DCEB solid; outline-offset: -1px; background: #fff; color: #73788C; font-size: 14px; font-family: var(--font-family-wavehaus, 'Wavehaus', Arial, sans-serif); font-weight: 600; line-height: 21.34px; display: flex; flex-direction: column; justify-content: center; } #compare-new-plan .details-card-summary { background: rgba(0, 43, 198, 0.10); color: #13151A; outline: none; } /* Payment summary */ .payment-card-summary { min-width: 195px; height: 92px; padding: 16px; border-radius: 8px; outline: 1px #D8DCEB solid; outline-offset: -1px; background: #fff; display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; } .payment-card-summary p:first-child { color: #73788C; font-size: 14px; font-weight: 600; margin: 0; } .payment-card-summary .payment-amount { color: #000; font-size: 16px; font-weight: 500; margin: 0; letter-spacing: 0.32px; } .payment-card-summary.new { background: rgba(20, 174, 92, 0.16); outline: none; } .payment-card-summary.new p:first-child { color: #000; font-weight: 700; } .payment-card-summary.new .payment-amount { color: #000; } /* Arrows */ .arrow-column { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 16px; padding-top: 0 !important; flex-shrink: 0; } .arrow-separator { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .arrow-separator:nth-child(1) { height: 152px; } .arrow-separator:nth-child(2) { height: 92px; } .arrow-separator:nth-child(3) { height: 92px; } /* Actions */ .compare-modal-actions { width: 100%; display: flex; flex-direction: column; gap: 16px; } .compare-modal-actions #confirm-plan-change-btn.button { width: 100%; padding: 14px 73px; border-radius: 45px; background: #002BC6; color: #fff; font-size: 18px; font-weight: 700; text-transform: none; } .compare-modal-actions #cancel-plan-change-btn.button.white, .compare-modal-actions #cancel-plan-change-btn.button { width: 100%; padding: 14px 73px; border-radius: 45px; background: transparent; border: 1px solid #002BC6; color: #002BC6; font-size: 16px; font-weight: 700; text-transform: none; } /* Responsive tweaks — mobile compare modal */ @media (max-width: 576px) { /* Fix border-radius: later rules set border-radius:16px which overrides the slide-up rule above */ .visbl-modal-overlay .visbl-modal.compare-flow, .visbl-modal-overlay .visbl-modal.success-flow { border-radius: 24px 24px 0 0; width: 100%; max-width: 100%; padding: 40px 16px 24px; box-sizing: border-box; } /* Intermediate containers must stretch to modal width */ .modal-view-container, #upgrade-view, #downgrade-view { width: 100%; } .compare-modal-body { display: flex; flex-direction: row; gap: 6px; align-items: flex-start; width: 100%; overflow: hidden; } .compare-column { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; width: 0; /* force equal shrink regardless of content */ } /* Remove fixed min-width so cards can shrink on small screens */ .plan-card-summary, .details-card-summary, .payment-card-summary { min-width: 0; width: 100%; box-sizing: border-box; height: auto; padding: 10px 8px; } .plan-card-summary { min-height: 100px; } .plan-card-summary .plan-name { font-size: 13px; line-height: 1.2; letter-spacing: 0.2px; } .plan-card-summary .plan-price { font-size: 12px; line-height: 1.3; } .details-card-summary { min-height: 64px; font-size: 12px; line-height: 1.4; } .payment-card-summary { min-height: 64px; gap: 4px; } .payment-card-summary p:first-child { font-size: 11px; } .payment-card-summary .payment-amount { font-size: 13px; letter-spacing: 0; } .arrow-column { display: flex; flex-direction: column; gap: 6px; justify-content: flex-start; align-items: center; flex-shrink: 0; width: 24px; } .arrow-separator { height: 100px; } .arrow-separator:nth-child(1) { height: 100px; } .arrow-separator:nth-child(2), .arrow-separator:nth-child(3) { height: 64px; } .compare-modal-title { font-size: 22px; } .compare-modal-subtitle { font-size: 13px; } .compare-modal-actions { flex-direction: column; gap: 10px; width: 100%; } .compare-modal-actions #confirm-plan-change-btn, .compare-modal-actions #cancel-plan-change-btn.button.white, .compare-modal-actions #cancel-plan-change-btn.button { padding: 12px 16px; font-size: 15px; } } /* ========================================================= Checkout Feedback Banner Used by assets/js/checkout-feedback.js. Shown for payment errors, 3DS failures, network issues, and success states across NSE and individual-license checkout flows. ========================================================= */ .visbl-checkout-feedback { position: fixed; top: 16px; left: 50%; transform: translate(-50%, -12px); z-index: 10050; display: flex; align-items: flex-start; gap: 12px; width: min(560px, calc(100vw - 32px)); padding: 14px 16px; background: #FFFFFF; color: #222222; border: 1px solid #DDE1E6; border-left-width: 4px; border-radius: 10px; box-shadow: 0 10px 28px rgba(17, 24, 39, 0.14); font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .visbl-checkout-feedback.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .visbl-checkout-feedback.is-hidden { display: none; } .visbl-checkout-feedback__icon { flex: 0 0 24px; display: flex; align-items: center; justify-content: center; } .visbl-checkout-feedback .vcf-icon { display: none; } .visbl-checkout-feedback[data-level="error"] { border-left-color: #D12B2B; } .visbl-checkout-feedback[data-level="error"] .vcf-icon-error { display: block; color: #D12B2B; } .visbl-checkout-feedback[data-level="warning"] { border-left-color: #D98500; } .visbl-checkout-feedback[data-level="warning"] .vcf-icon-warning { display: block; color: #D98500; } .visbl-checkout-feedback[data-level="success"] { border-left-color: #1F9254; } .visbl-checkout-feedback[data-level="success"] .vcf-icon-success { display: block; color: #1F9254; } .visbl-checkout-feedback[data-level="info"] { border-left-color: #002BC6; } .visbl-checkout-feedback[data-level="info"] .vcf-icon-info { display: block; color: #002BC6; } .visbl-checkout-feedback__body { flex: 1 1 auto; min-width: 0; } .visbl-checkout-feedback__title { margin: 0 0 2px; font-size: 14px; font-weight: 700; line-height: 1.3; color: #111827; } .visbl-checkout-feedback__title:empty { display: none; } .visbl-checkout-feedback__message { margin: 0; font-size: 14px; line-height: 1.4; color: #393E4D; word-break: break-word; } .visbl-checkout-feedback__close { flex: 0 0 auto; background: transparent; border: 0; padding: 4px; margin: -4px -4px 0 0; color: #6B7280; cursor: pointer; border-radius: 6px; } .visbl-checkout-feedback__close:hover { background: #F3F4F6; color: #111827; } .visbl-checkout-feedback__close:focus-visible { outline: 2px solid #002BC6; outline-offset: 2px; } @media (max-width: 620px) { .visbl-checkout-feedback { top: 8px; width: calc(100vw - 16px); padding: 12px 12px; border-radius: 8px; } .visbl-checkout-feedback__title, .visbl-checkout-feedback__message { font-size: 13px; } } /* SweetAlert2 used for checkout feedback must sit above the processing-order overlay (z-index: 100000). */ .swal2-container:has(.visbl-checkout-swal) { z-index: 100010 !important; } .visbl-checkout-swal { z-index: 100011 !important; } .visbl-checkout-swal .swal2-title { font-weight: 700; } .visbl-checkout-swal .swal2-html-container { color: #393E4D; font-size: 14px; } .visbl-checkout-swal .swal2-confirm { border-radius: 8px !important; }