@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"); .wpfnl * { margin: 0px; padding: 0px; box-sizing: border-box; } .wpfnl *:focus { box-shadow: none; outline: none; } .wpfnl *:not(i) { font-family: "Roboto", sans-serif; } .wpfnl p { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Roboto", sans-serif; } .wpfnl a, .wpfnl p, .wpfnl span, .wpfnl section, .wpfnl label, .wpfnl div { font-size: 14px; color: #7A8B9A; font-weight: 400; line-height: 1.4; } .wpfnl a { text-decoration: none; color: #6E42D3; } .wpfnl a:hover { color: #4C25A5; } .wpfnl h1, .wpfnl h2, .wpfnl h3, .wpfnl h4, .wpfnl h5, .wpfnl h6, .wpfnl p, .wpfnl figur, .wpfnl a { margin: 0px; } .wpfnl h1, .wpfnl h2, .wpfnl h3, .wpfnl h4, .wpfnl h5, .wpfnl h6 { font-weight: normal; -webkit-font-variant-ligatures: common-ligatures; font-variant-ligatures: common-ligatures; } .wpfnl a:hover, .wpfnl a:focus, .wpfnl input:focus, .wpfnl button:focus, .wpfnl a:active { text-decoration: none; outline: none; outline-offset: 0px; box-shadow: none; } .wpfnl ul { list-style: none; margin: 0; padding: 0; } .wpfnl img { display: block; max-width: 100%; } .wp-funnels_page_edit_funnel #wpcontent, .wpfunnels_page_edit_funnel #wpcontent { padding-left: 0; } .wpfunnels_page_edit_funnel #wpfunnels-app, .wp-funnels_page_edit_funnel #wpfunnels-app { margin: 0; } #wpfunnels-app:has([data-tour=yes]) { pointer-events: none; } .wpfnl { background: #f6f5fa; position: relative; overflow-x: hidden; } .wpfnl::-webkit-scrollbar { width: 3px; } .wpfnl::-webkit-scrollbar-track { background: #f2f5f8; } .wpfnl::-webkit-scrollbar-thumb { background-color: #6E42D3; border-radius: 20px; } .wpfnl input[type=time], .wpfnl input[type=date], .wpfnl input[type=search], .wpfnl input[type=url], .wpfnl input[type=tel], .wpfnl input[type=number], .wpfnl input[type=password], .wpfnl input[type=email], .wpfnl input[type=text], .wpfnl textarea, .wpfnl select { font-size: 14px; color: #7A8B9A; padding: 5px 15px; height: 36px; width: 100%; min-width: 190px; border-radius: 6px; display: block; border: 1px solid #E5E8F3; } .wpfnl input[type=time]::-webkit-input-placeholder, .wpfnl input[type=time]::-moz-placeholder, .wpfnl input[type=time]:-ms-input-placeholder, .wpfnl input[type=date]::-webkit-input-placeholder, .wpfnl input[type=date]::-moz-placeholder, .wpfnl input[type=date]:-ms-input-placeholder, .wpfnl input[type=search]::-webkit-input-placeholder, .wpfnl input[type=search]::-moz-placeholder, .wpfnl input[type=search]:-ms-input-placeholder, .wpfnl input[type=url]::-webkit-input-placeholder, .wpfnl input[type=url]::-moz-placeholder, .wpfnl input[type=url]:-ms-input-placeholder, .wpfnl input[type=tel]::-webkit-input-placeholder, .wpfnl input[type=tel]::-moz-placeholder, .wpfnl input[type=tel]:-ms-input-placeholder, .wpfnl input[type=number]::-webkit-input-placeholder, .wpfnl input[type=number]::-moz-placeholder, .wpfnl input[type=number]:-ms-input-placeholder, .wpfnl input[type=password]::-webkit-input-placeholder, .wpfnl input[type=password]::-moz-placeholder, .wpfnl input[type=password]:-ms-input-placeholder, .wpfnl input[type=email]::-webkit-input-placeholder, .wpfnl input[type=email]::-moz-placeholder, .wpfnl input[type=email]:-ms-input-placeholder, .wpfnl input[type=text]::-webkit-input-placeholder, .wpfnl input[type=text]::-moz-placeholder, .wpfnl input[type=text]:-ms-input-placeholder, .wpfnl textarea::-webkit-input-placeholder, .wpfnl textarea::-moz-placeholder, .wpfnl textarea:-ms-input-placeholder, .wpfnl select::-webkit-input-placeholder, .wpfnl select::-moz-placeholder, .wpfnl select:-ms-input-placeholder { color: #7A8B9A; } .wpfnl input[type=time]:focus, .wpfnl input[type=date]:focus, .wpfnl input[type=search]:focus, .wpfnl input[type=url]:focus, .wpfnl input[type=tel]:focus, .wpfnl input[type=number]:focus, .wpfnl input[type=password]:focus, .wpfnl input[type=email]:focus, .wpfnl input[type=text]:focus, .wpfnl textarea:focus, .wpfnl select:focus { outline: none; box-shadow: none; border-color: #E5E8F3; color: #7A8B9A; } .wpfnl input[type=time]:hover, .wpfnl input[type=date]:hover, .wpfnl input[type=search]:hover, .wpfnl input[type=url]:hover, .wpfnl input[type=tel]:hover, .wpfnl input[type=number]:hover, .wpfnl input[type=password]:hover, .wpfnl input[type=email]:hover, .wpfnl input[type=text]:hover, .wpfnl textarea:hover, .wpfnl select:hover { color: #7A8B9A; } .wpfnl input[type=time][readonly], .wpfnl input[type=date][readonly], .wpfnl input[type=search][readonly], .wpfnl input[type=url][readonly], .wpfnl input[type=tel][readonly], .wpfnl input[type=number][readonly], .wpfnl input[type=password][readonly], .wpfnl input[type=email][readonly], .wpfnl input[type=text][readonly], .wpfnl textarea[readonly], .wpfnl select[readonly] { cursor: not-allowed; background-color: #eee; } .wpfnl textarea { resize: none; min-height: 130px; padding: 11px 15px; } .wpfnl select { max-width: inherit; } .wpfnl a, .wpfnl svg path, .wpfnl button[type=submit], .wpfnl input[type=button], .wpfnl input[type=submit], .wpfnl .btn-default, .wpfnl .transition-3ms, .wpfnl .steps-settings .product-options__tab-nav li a:after, .steps-settings .product-options__tab-nav li .wpfnl a:after { transition: all 0.3s ease; } .wpfnl .transition-5ms { transition: all 0.5s ease; } .wpfnl input[type=submit], .wpfnl button[type=submit], .wpfnl .btn-default { display: inline-block; border: none; height: 38px; font-size: 14px; line-height: 38px; color: #fff; font-weight: 500; padding: 0 30px; min-width: 130px; cursor: pointer; text-align: center; letter-spacing: 0.2px; border-radius: 10px; text-transform: capitalize; background-color: #6E42D3; } .wpfnl input[type=submit]:hover, .wpfnl button[type=submit]:hover, .wpfnl .btn-default:hover { background-color: #4C25A5; color: #fff; } .wpfnl label, .wpfnl .label { font-weight: 500; font-size: 14px; line-height: 15px; color: #363B4E; } .wpfnl .wp-switch-editor { float: left; box-sizing: content-box; position: relative; top: 1px; background: #f0f0f1; color: #646970; cursor: pointer; font-size: 13px; line-height: 1.46153846; height: 20px; margin: 5px 0 0 5px; padding: 3px 8px 4px; border: 1px solid #dcdcde; } .wpfnl .fw-400 { font-weight: 400; } .wpfnl .fw-500 { font-weight: 500; } .wpfnl .pos-relative { position: relative; } .wpfnl .roboto { font-family: "Roboto", sans-serif; } .wpfnl .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .wpfnl .pro-tag { background: #4CBB17; box-shadow: 0px 3px 3px rgba(175, 175, 206, 0.3); border-radius: 3px; font-weight: 400; font-size: 13px; line-height: 15px; color: #fff; display: inline-block; text-transform: capitalize; padding: 2px 4px 3px; } .wpfnl .pro-tag a { color: #fff; line-height: 1; font-size: 13px; } .wpfnl #wpfnl-pro-modal { display: none; } .wpfnl .quick-toastify-successful-notification .quick-toastify-alert-toast { z-index: 9999999999; } .wpfnl .no-product-notice { font-size: 11px; font-style: italic; font-weight: 500; text-transform: none; display: block; color: #f34252; } .wpfnl .wpfnl-selected-item { border: 1px solid #e4e6eb; border-radius: 4px; font-size: 13px; line-height: 1; letter-spacing: -0.01em; color: #667085; display: inline-block; padding: 3px 25px 5px 6px; margin: 3px; position: relative; } .wpfnl .wpfnl-selected-item .remove-item { padding: 2px 5px 2px; cursor: pointer; position: absolute; top: 0; right: 0; height: 100%; border-left: 1px solid #e4e6eb; display: flex; align-items: center; justify-content: center; } .wpfnl .wpfnl-selected-item .remove-item svg { width: 8px; height: 8px; } @media screen and (max-width: 782px) { .wpfnl input[type=text], .wpfnl input[type=password], .wpfnl input[type=date], .wpfnl input[type=datetime], .wpfnl input[type=datetime-local], .wpfnl input[type=email], .wpfnl input[type=month], .wpfnl input[type=number], .wpfnl input[type=search], .wpfnl input[type=tel], .wpfnl input[type=time], .wpfnl input[type=url], .wpfnl input[type=week] { min-height: auto; } } .wpfnl .hints { font-size: 13px; font-style: italic; color: #7A8B9A; margin-top: 4px; display: inline-block; } .wpfnl .top-align { align-items: flex-start; } .wpfnl .top-align label { padding-top: 10px; } .wpfnl .not-clickable-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); z-index: 999; display: none; flex-flow: column; align-items: center; justify-content: center; } .wpfnl .not-clickable-overlay.template-importing { background-color: rgba(255, 255, 255, 0); backdrop-filter: blur(0); } .wpfnl .not-clickable-overlay .import-message { color: #ffffff; font-size: 24px; font-weight: 500; display: none; } .wpfnl .wpfnl-notice { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px; font-size: 14px; line-height: 1.5; color: #363B4E; border-radius: 10px; border: 1px solid #F68524; background: rgba(246, 133, 36, 0.1); } .wpfnl .wpfnl-notice svg { flex-shrink: 0; margin-top: 2px; } .wpfnl .wpfnl-notice .wpfnl-notice-content { flex: 1; } .wpfnl .wpfnl-notice .wpfnl-notice-content strong { display: block; font-weight: 500; color: #363B4E; margin-bottom: 4px; font-size: 16px; } .wpfnl .wpfnl-notice .wpfnl-notice-content p { margin: 0; line-height: 1.4; color: #363B4E; } .wpfnl .upgrade-to-pro-hoverlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center; border-radius: 10px; z-index: 1; } .wpfnl .upgrade-to-pro-hoverlay .btn-default { display: flex; align-items: center; justify-content: center; gap: 10px; background: #2fcf5c; padding: 10px 15px; line-height: 1; height: auto; font-size: 14px; border-radius: 10px; } .wpfnl .upgrade-to-pro-hoverlay .btn-default circle { fill: #fff; } .wpfnl .upgrade-to-pro-hoverlay .btn-default path { fill: #2fcf5c; } .wpfnl .upgrade-to-pro-hoverlay .btn-default:hover { background: #1a8939; } .wpfnl .wpfnl-field-description { display: block; max-width: 460px; margin-top: 5px; padding-right: 20px; color: #7A8B9A; font-size: 13px; font-weight: 400; line-height: 1.45; } .wpfnl .wpfnl-pro-note { width: 100%; margin: 10px 0 0; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #d3c5f2; border-radius: 6px; background: #f2eefc; color: #48494e; font-size: 13px; font-weight: 400; line-height: 1.4; } .wpfnl .wpfnl-pro-note .wpfnl-pro-note__link { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; color: #6E42D3; font-weight: 600; text-decoration: none; box-shadow: none; } .wpfnl .wpfnl-pro-note .wpfnl-pro-note__link:hover, .wpfnl .wpfnl-pro-note .wpfnl-pro-note__link:focus { color: #6E42D3; text-decoration: underline; box-shadow: none; } body.wpfunnels-body #wpcontent { padding-left: 0; } .wpfnl-switcher { position: relative; } .wpfnl-switcher input[type=checkbox] { display: none; } .wpfnl-switcher label { display: block; position: relative; cursor: pointer; outline: none; user-select: none; width: 40px; height: 22px; border-radius: 50px; background-color: #CDC9DB; transition: all 0.3s ease; } .wpfnl-switcher label:after { content: ""; width: 16px; height: 16px; filter: drop-shadow(0px 2px 2px rgba(193, 193, 218, 0.45)); background-color: #ffffff; border-radius: 100%; position: absolute; top: 3px; left: 3px; transition: all 0.3s ease; } .wpfnl-switcher input[type=checkbox]:checked + label { border-color: #6E42D3; background-color: #6E42D3; } .wpfnl-switcher input[type=checkbox]:checked + label:after { margin-left: 18px; filter: none; } .wpfnl-switcher.sm label { width: 28px; height: 16px; } .wpfnl-switcher.sm label:after { width: 10px; height: 10px; top: 3px; left: 3px; } .wpfnl-switcher.sm input[type=checkbox]:checked + label:after { margin-left: 12px; } .wpfnl-switcher.extra-sm label { width: 28px; height: 16px; border: none; background-color: #BEC8D0; } .wpfnl-switcher.extra-sm label:after { width: 10px; height: 10px; top: 3px; left: 3px; } .wpfnl-switcher.extra-sm input[type=checkbox]:checked + label:after { margin-left: 12px; } .ab-testing-stats .stats-wrapper tbody .wpfnl-switcher label, .wpfnl-webhook-drawer .webhook-list-wrapper .webhook-single-list .status-field .wpfnl-switcher label, .step-condition-drawer .enable-disable-switcher .wpfnl-switcher label, .steps-page__header-right .funnel-stats label, .steps-page__header-center .enable-gbf label { width: 26px; height: 16px; border: none; background: #BEC8D0; } .ab-testing-stats .stats-wrapper tbody .wpfnl-switcher label:after, .wpfnl-webhook-drawer .webhook-list-wrapper .webhook-single-list .status-field .wpfnl-switcher label:after, .step-condition-drawer .enable-disable-switcher .wpfnl-switcher label:after, .steps-page__header-right .funnel-stats label:after, .steps-page__header-center .enable-gbf label:after { width: 14px; height: 14px; top: 1px; left: 1px; } .ab-testing-stats .stats-wrapper tbody .wpfnl-switcher input[type=checkbox]:checked + label, .wpfnl-webhook-drawer .webhook-list-wrapper .webhook-single-list .status-field .wpfnl-switcher input[type=checkbox]:checked + label, .step-condition-drawer .enable-disable-switcher .wpfnl-switcher input[type=checkbox]:checked + label, .steps-page__header-right .funnel-stats input[type=checkbox]:checked + label, .steps-page__header-center .enable-gbf input[type=checkbox]:checked + label { background: #6E42D3; } .ab-testing-stats .stats-wrapper tbody .wpfnl-switcher input[type=checkbox]:checked + label:after, .wpfnl-webhook-drawer .webhook-list-wrapper .webhook-single-list .status-field .wpfnl-switcher input[type=checkbox]:checked + label:after, .step-condition-drawer .enable-disable-switcher .wpfnl-switcher input[type=checkbox]:checked + label:after, .steps-page__header-right .funnel-stats input[type=checkbox]:checked + label:after, .steps-page__header-center .enable-gbf input[type=checkbox]:checked + label:after { margin-left: 10px; } .wpfnl-checkbox input[type=checkbox] { display: none; } .wpfnl-checkbox.no-title label { height: 14px; } .wpfnl-checkbox label { font-size: 12px; line-height: 14px; font-weight: 400; color: #7A8B9A; position: relative; padding-left: 29px; display: inline-block; text-transform: capitalize; cursor: pointer; } .wpfnl-checkbox label:before { content: ""; position: absolute; left: 0; top: -3px; width: 18px; height: 18px; border-radius: 4px; border: 1px solid #bdc7eb; background-color: #f6f6f8; transition: all 0.3s ease; } .wpfnl-checkbox label:after { content: ""; position: absolute; left: 5px; top: 3px; width: 9px; height: 4px; transform: rotate(-45deg); border-bottom: 2px solid #fff; border-left: 2px solid #fff; transition: all 0.3s ease; opacity: 0; visibility: hidden; } .wpfnl-checkbox input[type=checkbox]:checked + label::before { background-color: #6E42D3; border-color: #6E42D3; } .wpfnl-checkbox input[type=checkbox]:checked + label::after { opacity: 1; visibility: visible; } .wpfnl-radiobtn input[type=radio] { display: none; } .wpfnl-radiobtn.no-title label { height: 16px; } .wpfnl-radiobtn label { font-size: 12px; line-height: 14px; font-weight: 400; color: #7A8B9A; position: relative; padding-left: 29px; display: inline-block; text-transform: capitalize; cursor: pointer; } .wpfnl-radiobtn label::before { content: ""; position: absolute; left: 0; top: -3px; width: 18px; height: 18px; border-radius: 100%; background: #F7F7FA; border: 1px solid #bdc7eb; transition: all 0.3s ease; } .wpfnl-radiobtn label::after { content: ""; position: absolute; left: 4px; top: 1px; width: 10px; height: 10px; border-radius: 100%; background: #6E42D3; transform: scale(0); transition: all 0.3s ease; } .wpfnl-radiobtn input[type=radio]:checked + label::before { border-color: #6E42D3; } .wpfnl-radiobtn input[type=radio]:checked + label::after { transform: scale(1); } .wpfnl-tooltip { display: inline-block; position: relative; padding: 0px 3px 2px; height: 15px; } .wpfnl-tooltip p { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); background: #525252; color: #fff; padding: 7px 10px; border-radius: 3px; font-size: 13px; line-height: 1.4; min-width: 240px; text-align: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; margin: 0; } .wpfnl-tooltip p:before { content: ""; position: absolute; left: 50%; bottom: -4px; width: 10px; height: 10px; background: #525252; margin-left: -5px; transform: rotate(45deg); } .wpfnl-tooltip:hover p { opacity: 1; visibility: visible; } .wpfnl-pagination { display: flex; align-items: center; justify-content: center; } .wpfnl-pagination .nav-link { width: 30px; height: 30px; border-radius: 6px; background-color: transparent; font-size: 16px; color: #363b4e; font-weight: 400; display: flex; flex-flow: column; align-items: center; justify-content: center; margin: 0 6px; } .wpfnl-pagination .nav-link.active, .wpfnl-pagination .nav-link:hover { background-color: #6E42D3; color: #fff; box-shadow: 0px 10px 16px rgba(97, 103, 116, 0.15); } .wpfnl-pagination .nav-link.next, .wpfnl-pagination .nav-link.prev { background-color: #ffffff; } .wpfnl-pagination .nav-link.next:hover, .wpfnl-pagination .nav-link.prev:hover { background-color: #6E42D3; } .wpfnl-pagination .nav-link.next:hover svg path, .wpfnl-pagination .nav-link.prev:hover svg path { fill: #fff; } .wpfnl-loader { border: 2px solid #8265c5; border-radius: 50%; border-top: 2px solid #fff; width: 13px; height: 13px; animation: spin 0.7s linear infinite; display: none; margin-left: 4px; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .select2-container.select2-container--default.select2-container--open { background: #ffffff; border-radius: 10px; width: 248px; border: 1px solid #E5E8F3; z-index: 99; } .select2-container.select2-container--default.select2-container--open .select2-search--dropdown { display: block; width: 100%; padding: 10px; box-sizing: border-box; } .select2-container.select2-container--default.select2-container--open .select2-search__field { width: 100%; background: #fff; border: 1px solid #E5E8F3; padding: 0 8px; } .select2-container.select2-container--default.select2-container--open .select2-search__field:focus { border-color: #E5E8F3; box-shadow: none; outline: none; } .select2-container.select2-container--default.select2-container--open .select2-dropdown { background-color: transparent; border: none; border-radius: unset; box-sizing: border-box; display: block; position: relative; width: 100% !important; } .select2-container.select2-container--default.select2-container--open .select2-results__message { margin-bottom: 0; } .select2-container.select2-container--default.select2-container--open .select2-results__option { border-top: 1px solid #E5E8F3; padding: 10px 15px; margin: 0; cursor: pointer; } .select2-container.select2-container--default.select2-container--open .select2-results__option--highlighted { background: #eee; color: #3c434a; } .select2-container.select2-container--default.select2-container--open .select2-results__options { margin: 0; max-height: 210px; overflow: auto; } .select2-container.select2-container--default.select2-container--open .select2-results__options::-webkit-scrollbar { width: 3px; } .select2-container.select2-container--default.select2-container--open .select2-results__options::-webkit-scrollbar-track { background: #f2f5f8; } .select2-container.select2-container--default.select2-container--open .select2-results__options::-webkit-scrollbar-thumb { background-color: #6E42D3; border-radius: 20px; } .select2-container--default .select2-selection--single .select2-selection__clear { float: none !important; cursor: pointer; margin-right: 3px; } .wpfnl .wpfnl-alert { color: #383d41; font-size: 13px; font-weight: 500; border-radius: 10px; cursor: default; display: none; } .wpfnl .wpfnl-alert.box { background-color: #e2e3e5; padding: 8px 20px; border: 1px solid #d6d8db; } .wpfnl .wpfnl-alert.wpfnl-success { color: #269c41; } .wpfnl .wpfnl-alert.wpfnl-success.box { background-color: #d4edda; border-color: #c3e6cb; } .wpfnl .wpfnl-alert.wpfnl-error { color: #d63342; } .wpfnl .wpfnl-alert.wpfnl-error.box { background-color: #f8d7da; border-color: #f5c6cb; } .wpfnl .wpfnl-alert.wpfnl-warn { color: #856404; } .wpfnl .wpfnl-alert.wpfnl-warn.box { background-color: #fff3cd; border-color: #ffeeba; } .wpfnl-hamburger { display: block; width: 20px; height: 14px; border-top: 2px solid #6E42D3; border-bottom: 2px solid #6E42D3; position: relative; cursor: pointer; } .wpfnl-hamburger:before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #6E42D3; margin-top: -1px; } ul.wpfnl-dropdown { display: flex; flex-flow: column; gap: 2px; position: absolute; background: #fff; right: 0; top: 37px; width: 220px; border-radius: 10px; border: 1px solid #EBEDF0; box-shadow: 0 6px 8px 0 rgba(191, 191, 191, 0.1); z-index: 5; padding: 9px; opacity: 0; visibility: hidden; transition: all 0.3s ease; } ul.wpfnl-dropdown:after { content: ""; position: absolute; right: 21px; top: -6px; width: 10px; height: 10px; background: white; transform: rotate(45deg); z-index: 0; border-top: 1px solid #E5E8F3; border-left: 1px solid #E5E8F3; } ul.wpfnl-dropdown li a { font-size: 14px; line-height: 15px; color: #7A8B9A; font-weight: 400; margin: 0; padding: 7px 9px; display: flex; flex-flow: row; align-items: center; position: relative; z-index: 1; border-radius: 10px; } ul.wpfnl-dropdown li a svg { margin-right: 6px; width: 19px; height: 19px; } ul.wpfnl-dropdown li a:hover { background: #F6F8FA; color: #7A8B9A; } .wpfnl-delete-alert-wrapper { position: fixed; top: 0; right: 0; padding: 15px; width: calc(100% - 160px); height: 100%; background: rgba(21, 17, 29, 0.3); backdrop-filter: blur(4px); z-index: 999; display: none; flex-flow: row wrap; align-items: center; justify-content: center; } .wpfnl-delete-alert-wrapper.show-alert { display: flex; } .wpfnl-delete-alert-wrapper.hide-alert { display: none; } .wpfnl-delete-alert-wrapper .wpfnl-delete-confirmation { background: #fff; box-shadow: 0 1px 34px rgba(0, 0, 0, 0.06); border-radius: 10px; padding: 30px 20px; width: 100%; max-width: 420px; text-align: center; animation: wpfnl-bounce 0.3s; } .wpfnl-delete-alert-wrapper .wpfnl-delete-confirmation h3 { font-size: 16px; font-weight: 500; } .wpfnl-delete-alert-wrapper .icon { width: 50px; height: 50px; border: 2px solid #e65555; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; border-radius: 100%; } .wpfnl-delete-alert-wrapper .icon svg { width: 18px; height: 18px; } .wpfnl-delete-alert-wrapper .icon svg path { stroke: #e65555; } .wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn { display: flex; flex-flow: row; align-items: center; justify-content: center; margin-top: 30px; } .wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn li { margin: 0 10px; } .wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn .btn-default { height: 41px; line-height: 42px; padding: 0 20px; min-width: 110px; border-radius: 5px; } .wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn .btn-default.yes { background-color: #e65555; } .wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn .btn-default.yes:hover { background-color: #de6464; } .wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn .btn-default.cancel { background-color: #eee; color: #333; } .wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn .btn-default.cancel:hover { background-color: #e2e2e2; } .delete-alert-new-ui .wpfnl-delete-confirmation { position: relative; max-width: 514px; background: #F6F5FA; border-radius: 14px; padding: 0; text-align: left; } .delete-alert-new-ui .icon { width: 46px; height: 46px; border: none; margin: 0; border-radius: 100%; box-shadow: 0px 1px 1px #DADADA; background: #fff; position: absolute; right: -12px; top: -12px; cursor: pointer; } .delete-alert-new-ui .icon svg path { stroke: #A7A8B3; } .delete-alert-new-ui .wpfnl-delete-confirm-body { padding: 26px 20px 26px 26px; } .delete-alert-new-ui .wpfnl-delete-confirm-body h3 { font-weight: 500; font-size: 18px; line-height: 1.2; color: #2D3149; display: flex; align-items: center; gap: 7px; } .delete-alert-new-ui .wpfnl-delete-confirm-body h3 svg { position: relative; top: -2px; } .delete-alert-new-ui .wpfnl-delete-confirm-body h3 svg path { fill: #EC5956; } .delete-alert-new-ui .wpfnl-delete-confirm-body p { color: #9398A5; margin-top: 4px; } .delete-alert-new-ui .wpfnl-delete-confirm-btn { justify-content: flex-end; margin-top: 0; border-top: 1px solid #E2E2E2; padding: 20px 28px; gap: 14px; } .delete-alert-new-ui .wpfnl-delete-confirm-btn .btn-default { font-size: 15px; height: 40px; line-height: 41px; padding: 0 18px; min-width: auto; border-radius: 10px; } .delete-alert-new-ui .wpfnl-delete-confirm-btn .btn-default.cancel { background-color: transparent; color: #2D3149; border: 1px solid #E4E6EB; } .delete-alert-new-ui .wpfnl-delete-confirm-btn .btn-default.yes { background-color: #6E42D3; } .delete-alert-new-ui .wpfnl-delete-confirm-btn .btn-default.yes:hover { background-color: #4C25A5; } .folded .wpfnl-delete-alert-wrapper { width: calc(100% - 36px); } @keyframes wpfnl-bounce { 0% { transform: scale(0.7); } 45% { transform: scale(1.05); } 80% { transform: scale(0.95); } 100% { transform: scale(1); } } .funnel-loader { position: relative; width: 100px; height: 100px; margin: 0 auto; transform-style: preserve-3d; transform: perspective(500px) rotateX(60deg); } .funnel-loader span { position: absolute; display: block; border: 4px solid #6E42D3; box-sizing: border-box; border-radius: 100%; box-shadow: 0 5px 0 #6E42D3, inset 0 5px 0 #6E42D3; animation: funnel-animate 2s ease-in-out infinite; } .funnel-loader span:nth-child(1) { top: 0; left: 0; bottom: 0; right: 0; animation-delay: 0.6s; } .funnel-loader span:nth-child(2) { top: 10px; left: 10px; bottom: 10px; right: 10px; animation-delay: 0.5s; } .funnel-loader span:nth-child(3) { top: 20px; left: 20px; bottom: 20px; right: 20px; animation-delay: 0.4s; } .funnel-loader span:nth-child(4) { top: 30px; left: 30px; bottom: 30px; right: 30px; animation-delay: 0.3s; } .funnel-loader span:nth-child(5) { top: 40px; left: 40px; bottom: 40px; right: 40px; animation-delay: 0.2s; } @keyframes funnel-animate { 0% { transform: translateZ(-50px); } 50% { transform: translateZ(50px); } 100% { transform: translateZ(-50px); } } @media only screen and (max-width: 960px) { .wpfnl-delete-alert-wrapper { width: calc(100% - 35px); } } @media only screen and (max-width: 782px) { .wpfnl-delete-alert-wrapper { width: 100%; } } .dot-wrapper span { color: #fff; font-size: 16px; animation-duration: 1.5s; animation-iteration-count: infinite; } .dot-wrapper span.dot-one { animation-name: flashOne; margin-left: 2px; } .dot-wrapper span.dot-two { animation-name: flashTwo; } .dot-wrapper span.dot-three { animation-name: flashThree; } @keyframes flashOne { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 1; } 100% { opacity: 1; } } @keyframes flashTwo { 0% { opacity: 0; } 25% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } } @keyframes flashThree { 0% { opacity: 0; } 50% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } } .wpfnl .ui-widget-header .ui-icon { background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSIjN0E4QjlBIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS42NyIgZD0iTTEyLjY2NSA4SDMuMzMybTAgMGw0LjY2NyA0LjY2N00zLjMzMiA4bDQuNjY3LTQuNjY3Ii8+PC9zdmc+); background-position: center; } .wpfnl .ui-widget-header .ui-datepicker-next .ui-icon { background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSIjN0E4QjlBIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS42NyIgZD0iTTMuMzM1IDhoOS4zMzNtMCAwbC00LjY2NyA0LjY2N00xMi42NjggOEw4LjAwMSAzLjMzMyIvPjwvc3ZnPg==); } .wpfnl .ui-datepicker { width: 290px; z-index: 4 !important; } .wpfnl .ui-datepicker.ui-widget-content { border: none; box-shadow: none; } .wpfnl .ui-datepicker .ui-datepicker-header { background: transparent; border: none; padding: 0; margin-bottom: 4px; } .wpfnl .ui-datepicker .ui-datepicker-prev, .wpfnl .ui-datepicker .ui-datepicker-next { top: 4px; width: 24px; height: 24px; background: #ffffff !important; cursor: pointer; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09); border-radius: 6px; border: 1px solid #F1F0F5; } .wpfnl .ui-datepicker .ui-datepicker-prev-hover, .wpfnl .ui-datepicker .ui-datepicker-next-hover { top: 4px; } .wpfnl .ui-datepicker .ui-datepicker-next { right: 4px; } .wpfnl .ui-datepicker .ui-datepicker-next-hover { right: 4px; } .wpfnl .ui-datepicker .ui-datepicker-prev { left: 4px; } .wpfnl .ui-datepicker .ui-datepicker-prev-hover { left: 4px; } .wpfnl .ui-datepicker .ui-datepicker-title select { line-height: 1.1; margin: 1px 2px; border: none; box-shadow: none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09); } .wpfnl .ui-datepicker table { margin: 0; } .wpfnl .ui-datepicker td span, .wpfnl .ui-datepicker td a { display: block; padding: 9px 7px 7px; height: 32.5px; width: 32.5px; text-align: center; text-decoration: none; border-radius: 50%; outline: none; margin: 0; color: #2D3149; font-size: 12px; font-weight: 500 !important; } .wpfnl .ui-datepicker .ui-state-default, .wpfnl .ui-datepicker .ui-widget-content .ui-state-default, .wpfnl .ui-datepicker .ui-widget-header .ui-state-default { border: none !important; background: transparent; font-weight: normal; color: #2D3149; position: relative; z-index: 1; } .wpfnl .ui-datepicker .ui-state-default:hover, .wpfnl .ui-datepicker .ui-state-hover, .wpfnl .ui-datepicker .ui-widget-content .ui-state-hover, .wpfnl .ui-datepicker .ui-state-active, .wpfnl .ui-datepicker .ui-widget-content .ui-state-highlight { background: #6E42D3; color: #fff; } .wpfnl .ui-datepicker .ui-priority-secondary, .wpfnl .ui-datepicker .ui-widget-content .ui-priority-secondary { opacity: 1; color: #9b9b9b !important; } .wpfnl .ui-datepicker .ui-state-disabled span { cursor: not-allowed; } .wpfnl .ui-datepicker .in-range { position: relative; } .wpfnl .ui-datepicker .in-range:before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 1; background: rgba(110, 66, 211, 0.12); height: 28px; width: 100%; } .wpfnl .ui-datepicker .in-range[title=Start]:before { border-radius: 50px 0 0 50px; opacity: 0; } .wpfnl .ui-datepicker .in-range[title=End]:before { border-radius: 0 50px 50px 0; } .wpfnl .ui-datepicker .in-range[title=Start] > a, .wpfnl .ui-datepicker .in-range[title=End] > a { background: #6E42D3 !important; color: #fff !important; border-radius: 50%; } .wpfnl .ui-datepicker .in-range:last-child:before { border-radius: 0 50px 50px 0; } .wpfnl .ui-datepicker .in-range:first-child:before { border-radius: 50px 0 0 50px; } .wpfnl .ui-datepicker .in-range[title=Start] + .in-range:before { left: -9px; width: calc(100% + 9px); } .wpfnl .ui-datepicker .in-range[title=End]:first-child:before { opacity: 0; } .wpfnl-custom-selectbox { position: relative; } .wpfnl-custom-selectbox .selectbox-selected-value { position: relative; width: 100%; border: 1px solid #ebedf0; border-radius: 6px; padding: 13px 33px 13px 12px; background-color: transparent; text-align: left; font-weight: 400; font-size: 14px; line-height: 1.21; color: #6a707c; cursor: pointer; } .wpfnl-custom-selectbox .selectbox-selected-value:before { content: url(data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20viewBox%3D%220%200%2012%207%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20stroke%3D%22%23A7A8B3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.8%22%20d%3D%22M11%201L6%206%201%201%22%2F%3E%3C%2Fsvg%3E); width: 12px; display: block; position: absolute; right: 15px; top: 50%; margin-top: -9px; transition: all 0.3s ease; } .wpfnl-custom-selectbox .selectbox-options { width: 100%; max-width: 300px; position: absolute; background: #fff; right: 0; top: calc(100% + 8px); border: 1px solid #E5E8F3; z-index: 5; transition: all 0.3s ease; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.06); border-radius: 6px; padding: 8px; opacity: 0; visibility: hidden; } .wpfnl-custom-selectbox.show-options .selectbox-options { opacity: 1; visibility: visible; } .wpfnl-custom-selectbox.show-options .selectbox-selected-value:before { transform: rotate(-180deg); } .wpfnl-custom-selectbox .selectbox-search { padding: 8px 8px 14px; } .wpfnl-custom-selectbox .selectbox-search .search-icon { position: absolute; top: 24px; left: 25px; } .wpfnl-custom-selectbox .selectbox-search input[type=search] { font-weight: 400; height: 34px; padding: 6px 15px 4px 36px; } .wpfnl-custom-selectbox .list-title { font-weight: 500; font-size: 12px; line-height: 15px; letter-spacing: 1px; text-transform: uppercase; color: #667085; border-top: 1px solid #ebedf0; border-bottom: 1px solid #ebedf0; border-radius: 0; background: #f9fafb; position: relative; padding: 8px 18px; left: -8px; width: calc(100% + 16px); cursor: text; margin-bottom: 10px; } .wpfnl-custom-selectbox .options-tag, .wpfnl-custom-selectbox .options-list { max-height: 200px; overflow: auto; } .wpfnl-custom-selectbox .options-tag::-webkit-scrollbar, .wpfnl-custom-selectbox .options-list::-webkit-scrollbar { width: 5px; } .wpfnl-custom-selectbox .options-tag::-webkit-scrollbar-track, .wpfnl-custom-selectbox .options-list::-webkit-scrollbar-track { background: #f2f5f8; } .wpfnl-custom-selectbox .options-tag::-webkit-scrollbar-thumb, .wpfnl-custom-selectbox .options-list::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: 20px; } .wpfnl-custom-selectbox .single-option { display: block; padding: 8px 10px; border-radius: 6px; transition: all 0.3s ease; } .wpfnl-custom-selectbox .single-option:hover { background: #f6f8fa; } .wpfnl-custom-selectbox .single-option label { line-height: 1.3; display: block; } .wpfnl-selectbox { max-width: 270px; width: 100%; border-radius: 6px; border: 1px solid #EEF0F3; background: #FFF; position: relative; cursor: pointer; } .wpfnl-selectbox .selected-option { color: #363B4E; font-size: 14px; line-height: 1; letter-spacing: -0.14px; padding: 13px 30px 11px 14px; } .wpfnl-selectbox .selected-option:before { content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBzdHJva2U9IiM3QThCOUEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xIDFsNCA0IDQtNCIvPjwvc3ZnPg=="); width: 10px; position: absolute; right: 14px; top: 50%; line-height: 1; transform: translateY(-50%); } .wpfnl-selectbox .selectable-options { width: 100%; list-style-type: none; padding: 8px; font-size: 16px; position: absolute; left: 0; top: calc(100% + 8px); z-index: 1; border-radius: 6px; border: 1px solid #EBEDF0; background: #FFF; box-shadow: 0px 18px 22px 0px rgba(73, 59, 104, 0.1); max-height: 230px; overflow-y: auto; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .wpfnl-selectbox .selectable-options::-webkit-scrollbar { width: 3px; height: 3px; } .wpfnl-selectbox .selectable-options::-webkit-scrollbar-track { background: #f2f5f8; } .wpfnl-selectbox .selectable-options::-webkit-scrollbar-thumb { background-color: #CBCBCB; border-radius: 20px; } .wpfnl-selectbox .selectable-options li { padding: 11px 12px 9px; color: #363B4E; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: -0.14px; border-radius: 6px; } .wpfnl-selectbox .selectable-options li:hover { background: #F6F5FA; } .wpfnl-selectbox .selectable-options li.selected { background: #F6F5FA; font-weight: 500; } .wpfnl-selectbox.show-options .add-step-dropdown, .wpfnl-selectbox.show-options .selectable-options { opacity: 1; visibility: visible; } .wpfnl-toast-alert { position: fixed; top: 150px; right: 20px; z-index: 9999; max-width: 360px; min-width: 250px; -webkit-animation: fadeinout 3s ease-in-out forwards; animation: fadeinout 3s ease-in-out forwards; } .wpfnl-toast-alert .wpfnl-toast-alert-wrapper .toast-alert-box { background: #ffffff; border: 1px solid #039855; box-shadow: 0px 7px 30px rgba(16, 5, 46, 0.08); border-radius: 10px; display: flex; flex-flow: row wrap; align-items: center; padding: 15px; gap: 10px; } .wpfnl-toast-alert .wpfnl-toast-alert-wrapper .toast-alert-box .alert-text { width: calc(100% - 34px); position: relative; padding-left: 25px; } .wpfnl-toast-alert .wpfnl-toast-alert-wrapper .toast-alert-box .alert-text::before { content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTggMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzAzOTg1NSIgZD0iTTkgMThBOSA5IDAgMTA5IDBhOSA5IDAgMDAwIDE4eiIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTkgMTMuMzlMMi44OTggOS44NjdhMS4yMDMgMS4yMDMgMCAwMS4wNTctMS42OTYgMS4yMDMgMS4yMDMgMCAwMTEuNjk3LjA1N2wyLjUzOSAyLjcxNyA0LjAxOC0zLjc1NGMuMDM3LS4wMzQuMDc0LS4wNjUuMTEzLS4wOTRsMS44OS0xLjc2NWExLjIwMyAxLjIwMyAwIDAxMS42OTYuMDU3IDEuMjAzIDEuMjAzIDAgMDEtLjA1NyAxLjY5NmwtNS43NzMgNS4zOTMtLjAwNi0uMDA2LTEuOTk2IDEuODY2LS44ODYtLjk0OHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg=="); position: absolute; left: 0; top: 0; height: 18px; width: 18px; display: block; } .wpfnl-toast-alert .wpfnl-toast-alert-wrapper .toast-alert-box .cross-icon { width: 24px; height: 24px; background: #ffffff; border: 1px solid #e4e6eb; border-radius: 6px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .wpfnl-toast-alert .wpfnl-toast-alert-wrapper .toast-alert-box .cross-icon svg path { fill: #686f7f; } .wpfnl-toast-alert .wpfnl-toast-alert-wrapper .toast-alert-box .cross-icon:hover { background: #e4e6eb; } @-webkit-keyframes fadeinout { 0% { opacity: 0; top: 150px; } 80%, 20% { opacity: 1; top: 125px; } 100% { opacity: 0; top: 80px; } } @keyframes fadeinout { 0% { opacity: 0; top: 150px; } 80%, 20% { opacity: 1; top: 125px; } 100% { opacity: 0; top: 80px; } } .wpfnl-modal .wpfnl-modal__header { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; padding: 12px 15px; border-radius: 15px 15px 0 0; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); position: relative; } .wpfnl-modal .wpfnl-modal__header .title h2 { font-weight: 500; font-size: 16px; line-height: 1.3; color: #363B4E; } .wpfnl-modal .wpfnl-modal__header .wpfnl-modal-close { height: 28px; width: 28px; background: #F6F6F8; border: 1px solid #E5E8F3; display: flex; flex-flow: column; align-items: center; justify-content: center; border-radius: 100%; cursor: pointer; } .wpfnl-modal .wpfnl-modal__header .wpfnl-modal-close svg path { stroke: #6E42D3; } .wpfnl-modal .wpfnl-modal__body { background: #F2F5F8; padding: 23px 25px 0px; overflow: auto; height: calc(100% - 52px); } .wpfnl-modal .wpfnl-modal__body::-webkit-scrollbar { width: 5px; } .wpfnl-modal .wpfnl-modal__body::-webkit-scrollbar-track { background: #f2f5f8; } .wpfnl-modal .wpfnl-modal__body::-webkit-scrollbar-thumb { background-color: #6E42D3; border-radius: 20px; } .wpfnl-modal .wpfnl-modal__body .choose-step-type label { font-weight: 500; font-size: 13px; line-height: 15px; color: #363B4E; margin-bottom: 9px; display: inline-block; } .wpfnl-modal .wpfnl-modal__body .choose-step-type select { height: 36px; border-radius: 5px; padding: 4px 15px; max-width: 100%; } .wpfnl-modal .wpfnl-modal__body .choose-step-type select:focus { border-color: #6E42D3; } .wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav { margin-bottom: 30px; margin-left: 5px; border-bottom: 1px solid #E1E1EB; } .wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li { padding: 5px 0 10px; cursor: pointer; margin-right: 22px; text-transform: capitalize; font-weight: 500; font-size: 14px; line-height: 16px; color: #7A8B9A; position: relative; } .wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li:before { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: #6E42D3; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li:hover, .wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li.active { color: #6E42D3; } .wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li.active:before { opacity: 1; visibility: visible; } .wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li .pro-tag { position: absolute; top: -9px; right: -10px; font-size: 10px; padding: 0 4px; } .wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li.disabled { font-weight: 400; color: rgba(122, 139, 154, 0.5); } .wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li.disabled:hover { color: rgba(122, 139, 154, 0.5); } .wpfnl-modal .wpfnl-modal__footer { padding: 15px 20px; border-top: 1px solid #E5E8F3; } .wpfnl-modal .wpfnl-modal__footer .step-save-btn { display: flex; flex-flow: row; align-items: center; justify-content: flex-end; } .wpfnl-modal .wpfnl-modal__footer .step-save-btn .wpfnl-alert { margin-right: 10px; } .wpfnl-modal .wpfnl-modal__footer .step-save-btn a.btn-default { background: transparent; border: 1px solid #E5E8F3; color: #363B4E; width: 110px; padding: 0 20px; margin-right: 10px; } .wpfnl-modal .wpfnl-modal__footer .step-save-btn a.btn-default:hover { background: rgba(0, 0, 0, 0.04); } .wpfnl-modal .wpfnl-modal__footer .step-save-btn button { width: 110px; padding: 0 20px; border: 1px solid transparent; display: flex; flex-flow: row; align-items: center; justify-content: center; } .wpfnl-dashboard-loader { width: 100%; padding: 24px; } .wpfnl-dashboard-loader__summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .wpfnl-dashboard-loader__summary .wpfnl-shimmer-card { height: 110px; border-radius: 12px; animation: shimmer-animation 1.6s infinite linear; background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%); background-size: 1000px 100%; } .wpfnl-dashboard-loader__chart { height: 280px; border-radius: 12px; margin-bottom: 24px; animation: shimmer-animation 1.6s infinite linear; background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%); background-size: 1000px 100%; } .wpfnl-dashboard-loader__table-header { height: 20px; width: 35%; border-radius: 8px; margin-bottom: 16px; animation: shimmer-animation 1.6s infinite linear; background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%); background-size: 1000px 100%; } .wpfnl-dashboard-loader__table-row { height: 52px; border-radius: 8px; margin-bottom: 10px; animation: shimmer-animation 1.6s infinite linear; background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%); background-size: 1000px 100%; } .wpfnl-dashboard__nav { background: #fff; box-shadow: 1px 0px 2px rgba(190, 190, 215, 0.14); position: relative; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 0 24px; } .wpfnl-dashboard__nav .wpfnl-dashboard__nav-ul { display: flex; align-items: center; gap: 24px; } .wpfnl-dashboard__nav .wpfnl-dashboard__nav-li { display: block; position: relative; } .wpfnl-dashboard__nav .wpfnl-dashboard__nav-li:last-child { margin-bottom: 0; } .wpfnl-dashboard__nav .wpfnl-dashboard__nav-li a { display: block; text-align: center; font-weight: 400; font-size: 14px; line-height: 1; color: #707070; padding: 23px 3px; text-decoration: none; } .wpfnl-dashboard__nav .wpfnl-dashboard__nav-li a svg { display: block; margin: 0 auto 8px; } .wpfnl-dashboard__nav .wpfnl-dashboard__nav-li a:hover { color: #6E42D3; } .wpfnl-dashboard__nav .wpfnl-dashboard__nav-li.active:after { content: ""; position: absolute; left: 0px; bottom: -2px; height: 2px; width: 100%; background: #6E42D3; z-index: 1; } .wpfnl-dashboard__nav .wpfnl-dashboard__nav-li.active a { color: #6E42D3; } .wpfnl-dashboard__nav .logo { display: block; } .wpfnl-dashboard__nav .logo a { display: block; text-align: center; } .wpfnl-dashboard__nav .logo a svg { display: block; margin: 0 auto; } .wpfnl-dashboard__nav .wpfnl-dashboard__nav-right { display: flex; align-items: center; margin-inline-start: auto; } .dashboard-nav__content { position: relative; width: calc(100% - 280px); margin: 0 auto; } .dashboard-nav__content .import-funnel-modal { position: fixed; top: 0; left: 160px; width: calc(100% - 160px); height: 100%; background: rgba(21, 17, 29, 0.3); backdrop-filter: blur(6px); z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .dashboard-nav__content .import-funnel-modal.show-modal { opacity: 1; visibility: visible; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner { width: 100%; height: 100%; padding: 32px; display: flex; flex-flow: column; align-items: center; justify-content: center; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper { background: #F6F5FA; border-radius: 15px 0px 15px 15px; width: 100%; max-width: 540px; position: relative; padding: 24px 30px 20px; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper .import-funnel-modal-title { font-weight: 600; font-size: 18px; line-height: 1.18; color: #363B4E; margin-bottom: 13px; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper .close-modal { border: none; width: 40px; height: 40px; position: absolute; top: -16px; right: -16px; display: flex; flex-flow: column; align-items: center; justify-content: center; cursor: pointer; border-radius: 100px; background: #ffffff; box-shadow: 0px 1px 1px 0px #DADADA; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form { position: relative; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form input[type=file] { position: absolute; width: 100%; height: 206px; top: 0; left: 0; opacity: 0; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form input[type=file]::-webkit-file-upload-button { background: #F9F9FA; border: 1px solid #C9D0E9; border-radius: 6px; padding: 9px 17px; margin-right: 12px; cursor: pointer; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .import-label { border-radius: 8px; padding: 50px 30px; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23AFADB6FF' stroke-width='2' stroke-dasharray='3%2c 7' stroke-dashoffset='-6' stroke-linecap='round'/%3e%3c/svg%3e"); display: flex; flex-flow: column; align-items: center; justify-content: center; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .import-label h4 { color: #2D3149; font-size: 15px; line-height: 1; font-weight: 600; margin-bottom: 1px; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .import-label h4 .primary-color { color: #6E42D3; font-weight: 600; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .upload-success-icon, .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .upload-icon { width: 50px; height: 50px; background: #6e42d3; display: flex; flex-flow: column; align-items: center; justify-content: center; border-radius: 100%; margin-bottom: 16px; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .upload-success-icon { display: none; background: #239654; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .upload-success-icon svg { position: relative; top: 1px; left: 1px; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .file-added .upload-success-icon { display: flex; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .file-added .upload-icon { display: none; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .button-area { display: flex; flex-flow: row; align-items: center; justify-content: flex-end; border-top: 1px solid #E4E6EB; margin-top: 30px; padding: 20px 30px 0; gap: 12px; position: relative; left: -30px; width: calc(100% + 60px); } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .button-area .btn-default { padding: 8px 21px 6px; height: 40px; line-height: 1; border-radius: 10px; box-shadow: 0px 9px 14px 0px rgba(193, 183, 232, 0.5); min-width: auto; border: 1px solid transparent; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .button-area .btn-default .wpfnl-loader { position: relative; top: 2px; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .button-area .cancel { position: relative; top: inherit; right: inherit; border-color: #E4E6EB; width: auto; background: transparent; box-shadow: none; color: #3C3F47; } .dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .button-area .cancel:hover { background: #f1f1f1; } .dashboard-nav__content .upgrade-to-pro { margin-top: 20px; } .dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper { display: flex; align-items: start; width: 100%; padding: 20px; border-radius: 10px; border: 1px solid rgba(238, 129, 52, 0.5); background: #FFFAF6; } .dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .warning-icon-wrapper { margin-right: 15px; } .dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .warning-icon { display: inline-block; vertical-align: middle; } .dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-content { flex-grow: 1; color: #d9534f; font-size: 16px; line-height: 1.5; } .dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-content .upgrade-to-pro-message { color: #667085; font-family: Roboto; font-size: 15px; font-style: normal; font-weight: 400; line-height: 24px; max-width: 636px; } .dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-content .upgrade-to-pro-message h3 { color: #373B4D; font-family: Roboto; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 10px; } .dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-action { display: flex; align-items: center; margin-left: 20px; } .dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-action .btn-upgrade-to-pro { background-color: #6f42c1; text-decoration: none; font-weight: 500; color: #FFF; text-align: center; font-family: Inter; font-size: 16px; font-style: normal; padding: 10px 20px; border-radius: 7px; } .dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-action .btn-upgrade-to-pro:hover { background-color: #563d7c; } body.folded .dashboard-nav__content .import-funnel-modal { left: 36px; } .wpfnl-dashboard__header { box-shadow: 0 1px 2px 0 rgba(190, 190, 215, 0.2); background: #fff; width: 100%; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; padding: 20px 20px 20px 30px; border-left: 1px solid #ebedf7; } .wpfnl-dashboard__header.overview-header { box-shadow: none; background: transparent; padding: 20px 0 0; border-left: none; } .wpfnl-dashboard__header .wpfnl-dashboard-header-left { display: flex; align-items: center; justify-content: center; } .wpfnl-dashboard__header .title h1 { font-weight: 500; font-size: 18px; line-height: 21px; color: #363B4E; text-transform: capitalize; } .wpfnl-dashboard__header .title .subtitle { font-size: 13px; display: inline-block; } .wpfnl-dashboard__header .funnel-search { margin-right: 20px; } .wpfnl-dashboard__header .funnel-search .search-group { position: relative; width: 230px; } .wpfnl-dashboard__header .funnel-search .search-group svg { position: absolute; top: 9px; left: 12px; } .wpfnl-dashboard__header .funnel-search .search-group input { padding-left: 40px; border-radius: 10px; font-size: 13px; box-shadow: 0 1px 2px 0 rgba(190, 190, 215, 0.2); border: none; height: 39px; } .wpfnl-dashboard__header .funnel-search .search-group input::-webkit-input-placeholder { color: #7A8B9A; } .wpfnl-dashboard__header .funnel-search .search-group input::-moz-placeholder { color: #7A8B9A; } .wpfnl-dashboard__header .funnel-search .search-group input:-ms-input-placeholder { color: #7A8B9A; } .wpfnl-dashboard__header .funnel-search .search-group input:-moz-placeholder { color: #7A8B9A; } .wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper { margin-right: 20px; } .wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-trash-all-funnels, .wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-all-funnels { margin-right: 16px; } .wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-trash-all-funnels:last-child, .wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-all-funnels:last-child { margin-right: 0; } .wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-trash-all-funnels span, .wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-all-funnels span { color: #2D3149; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 500; line-height: 1; letter-spacing: -0.14px; } .wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-trash-all-funnels span.wpfnl-count, .wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-all-funnels span.wpfnl-count { border-radius: 10px; background: #FFF; padding: 6px 8px; color: #7A8B9A; font-family: Inter; font-size: 10px; font-style: normal; font-weight: 500; line-height: 8px; letter-spacing: -0.1px; margin-left: 3px; display: inline-block; } .wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-trash-all-funnels.active span, .wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-all-funnels.active span { color: #573BFF; } .wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-trash-all-funnels.active span.wpfnl-count, .wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-all-funnels.active span.wpfnl-count { background: rgba(87, 59, 255, 0.1); } .wpfnl-dashboard__header a.import-export { background: #FFFFFF; box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.2); border-radius: 8px; font-weight: 400; font-size: 14px; line-height: 1.21; text-align: center; color: #363B4E; padding: 12px 20px 10px; display: flex; align-items: center; gap: 5px; margin-right: 14px; cursor: pointer; } .wpfnl-dashboard__header a.import-export .pro-tag-icon { width: 20px; height: 20px; } .wpfnl-dashboard__header a.import-export svg { display: block; position: relative; top: -1px; } .wpfnl-dashboard__header a.import-export path { transition: all 0.3s ease; } .wpfnl-dashboard__header a.import-export:hover { color: #6E42D3; } .wpfnl-dashboard__header a.import-export:hover path { fill: #6E42D3; } .wpfnl-dashboard__header a.import-export:hover .pro-tag-icon path { fill: #FFF; } .wpfnl-dashboard__header a.import-export.wpfnl-export-all-funnels { margin-left: auto; } .wpfnl-dashboard__header a.import-export#wpfnl-export-all-pro { margin-left: auto; } .wpfnl-dashboard__header a.pro-import-button { background: #FFFFFF; box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.2); border-radius: 8px; font-weight: 400; font-size: 14px; line-height: 1.21; text-align: center; color: #363B4E; padding: 12px 20px 10px; display: flex; align-items: center; gap: 5px; margin-right: 14px; cursor: pointer; } .wpfnl-dashboard__header a.pro-import-button .pro-tag-icon { width: 20px; height: 20px; } .wpfnl-dashboard__header a.pro-import-button svg { display: block; position: relative; top: -1px; } .wpfnl-dashboard__header a.pro-import-button path { transition: all 0.3s ease; } .wpfnl-dashboard__header a.pro-import-button:hover { color: #6E42D3; } .wpfnl-dashboard__header a.pro-import-button:hover path { fill: #6E42D3; } .wpfnl-dashboard__header a.pro-import-button:hover .pro-tag-icon path { fill: #FFF; } .wpfnl-dashboard__header a.pro-import-button.wpfnl-export-all-funnels { margin-left: auto; } .wpfnl-dashboard__header a.pro-import-button#wpfnl-export-all-pro { margin-left: auto; } .wpfnl-dashboard__header .btn-default.disabled, .wpfnl-dashboard__header .add-new-funnel-btn { font-weight: 400; height: 40px; line-height: 41px; border-radius: 10px; } .wpfnl-dashboard__header .add-new-funnel-btn svg { position: relative; top: 1px; margin-right: 3px; } .wpfnl-dashboard__header .add-new-funnel-btn svg path { stroke: #fff; } .wpfnl-dashboard__header .add-new-funnel-btn.disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } .wpfnl-dashboard__header .add-new-funnel-btn.disabled svg { margin-right: 6px; } .wpfnl-dashboard__header .wpfnl-ai-funnel-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #6E42D3 0%, #9B6BFF 100%); color: #fff !important; border: none; padding: 8px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; height: 40px; line-height: 41px; cursor: pointer; transition: all 0.2s ease; text-decoration: none !important; margin-left: 8px; white-space: nowrap; } .wpfnl-dashboard__header .wpfnl-ai-funnel-btn:hover { background: linear-gradient(135deg, #5C35B5 0%, #8A5AEE 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(110, 66, 211, 0.35); color: #fff !important; } .wpfnl-dashboard__header .wpfnl-ai-funnel-btn:active { transform: translateY(0); } .wpfnl-dashboard__header .wpfnl-ai-funnel-btn svg { flex-shrink: 0; } .wpfnl-dashboard__inner-content { min-height: 425px; margin: 24px auto 30px; } .wpfnl-dashboard__inner-content.no-funnel .funnel-list__wrapper { display: flex; flex-flow: column; align-items: center; justify-content: center; background-color: transparent; border-radius: 0; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-wrapper { background: transparent; width: 100%; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-wrapper .no-funnel { color: #363B4E; font-size: 18px; font-style: normal; font-weight: 500; line-height: 0.88; } .wpfnl-dashboard__inner-content.no-funnel .no-trash-wrapper { text-align: center; background: #FFF; filter: drop-shadow(0px 1px 1px rgba(182, 185, 191, 0.3)); width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; padding: 170px 0px; border-radius: 10px; } .wpfnl-dashboard__inner-content.no-funnel .no-trash-wrapper .no-funnel { font-family: "Roboto"; font-style: normal; font-weight: 500; font-size: 18px; line-height: 16px; color: #363B4E; } .wpfnl-dashboard__inner-content.no-funnel .create-new-funnel { display: flex; flex-flow: row wrap; gap: 16px; } .wpfnl-dashboard__inner-content.no-funnel .create-new-funnel .btn-default { font-size: 15px; padding: 0 20px; height: 44px; line-height: 44px; display: flex; align-items: center; gap: 7px; box-shadow: 0px 2px 4px rgba(223, 223, 249, 0.25); border-radius: 10px; min-width: auto; border: 1px solid transparent; } .wpfnl-dashboard__inner-content.no-funnel .create-new-funnel .btn-default.import-export { background: transparent; color: #363B4E; border-color: #E4E2EB; filter: drop-shadow(0px 2px 4px rgba(223, 223, 249, 0.25)); } .wpfnl-dashboard__inner-content.no-funnel .create-new-funnel .btn-default.import-export:hover { background: #fff; } .wpfnl-dashboard__inner-content.no-funnel .create-new-funnel .btn-default.pro-import-button { background: transparent; color: #363B4E; border-color: #E4E2EB; filter: drop-shadow(0px 2px 4px rgba(223, 223, 249, 0.25)); } .wpfnl-dashboard__inner-content.no-funnel .create-new-funnel .btn-default.pro-import-button:hover { background: #fff; } .wpfnl-dashboard__inner-content.no-funnel a.wpfnl-trash-all-funnels { font-family: "Inter"; font-style: normal; font-weight: 500; font-size: 14px; line-height: 17px; letter-spacing: -0.01em; color: #EC5956; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 15px; } .wpfnl-dashboard__inner-content.no-funnel a.wpfnl-trash-all-funnels path { stroke: #EC5956; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info { width: 100%; border-radius: 10px; background-color: #FFF; box-shadow: 0 1px 1px rgba(182, 185, 191, 0.3); padding: 70px 80px; display: flex; gap: 30px; align-items: center; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-content { flex: 1; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-title { color: #1D2327; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0 0 5px 0; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-description { margin: 0 0 18px 0; color: #707070; font-size: 14px; font-weight: 400; line-height: 1.5; max-width: 330px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-features { list-style: none; margin: 0 0 28px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .feature-item { display: flex; align-items: center; gap: 10px; color: #1F2937; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; padding-left: 22px; position: relative; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .feature-item svg { position: absolute; left: 0; top: 6px; width: 14px; height: auto; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-links { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; row-gap: 10px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-link { display: inline-flex; align-items: center; gap: 8px; color: #6E42D3; font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; transition: opacity 0.2s ease; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-link svg { display: block; flex-shrink: 0; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-link:hover { text-decoration: underline; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-link:focus { outline: 2px solid #6E42D3; outline-offset: 2px; border-radius: 4px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-wrapper { flex-shrink: 0; height: 100%; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview { position: relative; width: 570px; height: 100%; border-radius: 10px; cursor: pointer; transition: transform 0.2s ease; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview:before { content: ""; position: absolute; inset: -20px; border: 1px solid #F6F5FA; border-radius: 14px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview:after { content: ""; position: absolute; inset: -40px; border: 1px solid #F6F5FA; border-radius: 14px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview:focus { outline: 3px solid #6E42D3; outline-offset: 2px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-poster { width: 100%; height: auto; object-fit: cover; display: block; border-radius: 14px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .play-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); transition: background 0.2s ease; border-radius: 14px; z-index: 1; } .video-preview:hover .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .play-overlay { background: rgba(0, 0, 0, 0.4); } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .play-button { width: 57px; height: 57px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; box-shadow: 0 0 0 10px #e7e7e7; position: relative; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .play-button:before { content: ""; position: absolute; inset: -11px; border-radius: 50%; background: transparent; border: 1px solid #fff; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .play-button svg { margin-left: 4px; display: block; } .video-preview:hover .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .play-button { background: rgb(110, 66, 211); transform: scale(1.1); } .wpfnl-dashboard__inner-content.no-funnel .video-popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 20px; opacity: 0; visibility: hidden; transition: all 0.5s ease; } .wpfnl-dashboard__inner-content.no-funnel .video-popup-overlay.show { opacity: 1; visibility: visible; } .wpfnl-dashboard__inner-content.no-funnel .video-popup-content { position: relative; width: 100%; max-width: 760px; border-radius: 16px; background: #fff; padding: 20px; } .wpfnl-dashboard__inner-content.no-funnel .video-popup-close { position: absolute; top: -20px; right: -20px; width: 40px; height: 40px; background: rgb(255, 255, 255); border: none; border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 10; box-shadow: 1px 1px 7px rgba(34, 34, 34, 0.2784313725); } .wpfnl-dashboard__inner-content.no-funnel .video-popup-close:focus { outline: 2px solid #fff; outline-offset: 2px; } .wpfnl-dashboard__inner-content.no-funnel .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .wpfnl-dashboard__inner-content.no-funnel .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 14px; } .wpfnl-dashboard__inner-content.no-funnel .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .wpfnl-dashboard__inner-content.no-funnel .video-popup-fade-enter-active, .wpfnl-dashboard__inner-content.no-funnel .video-popup-fade-leave-active { transition: opacity 0.3s ease; } .wpfnl-dashboard__inner-content.no-funnel .video-popup-fade-enter-from, .wpfnl-dashboard__inner-content.no-funnel .video-popup-fade-leave-to { opacity: 0; } .wpfnl-ai-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .wpfnl-ai-modal-overlay.active { opacity: 1; visibility: visible; } .wpfnl-ai-modal-wrapper { background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); max-height: 90vh; overflow-y: auto; position: relative; animation: wpfnlAiModalSlideIn 0.3s ease; } @keyframes wpfnlAiModalSlideIn { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .wpfnl-ai-modal-close { position: absolute; top: 16px; right: 16px; z-index: 10; } .wpfnl-ai-modal-close-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #f3f4f6; cursor: pointer; transition: all 0.2s ease; } .wpfnl-ai-modal-close-btn:hover { background: #e5e7eb; } .wpfnl-ai-modal-close-btn svg { width: 12px; height: 12px; } .wpfnl-ai-upsell { width: 580px; max-width: 95vw; padding: 40px; } .wpfnl-ai-modal-header { text-align: center; margin-bottom: 28px; } .wpfnl-ai-modal-header-icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; } .wpfnl-ai-heading { font-size: 22px; font-weight: 700; color: #1a1a2e; margin: 0 0 10px; } .wpfnl-ai-sub-heading { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0; max-width: 460px; margin-left: auto; margin-right: auto; } .wpfnl-ai-credit-indicator { background: #f8f7ff; border: 1px solid #e8e4f7; border-radius: 10px; padding: 20px; margin-bottom: 24px; } .wpfnl-ai-credit-bar-wrapper { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .wpfnl-ai-credit-label { font-size: 13px; font-weight: 600; color: #374151; white-space: nowrap; } .wpfnl-ai-credit-bar { flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; } .wpfnl-ai-credit-bar-fill { height: 100%; background: linear-gradient(90deg, #6E42D3, #9B6BFF); border-radius: 4px; transition: width 0.4s ease; } .wpfnl-ai-credit-count { font-size: 12px; color: #6b7280; white-space: nowrap; } .wpfnl-ai-credit-note { font-size: 12px; color: #9ca3af; margin: 0; line-height: 1.4; } .wpfnl-ai-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; } .wpfnl-ai-feature-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: #fafafa; border-radius: 8px; border: 1px solid #f0f0f0; transition: border-color 0.2s ease; } .wpfnl-ai-feature-item:hover { border-color: #e0d8f0; } .wpfnl-ai-feature-item strong { display: block; font-size: 13px; font-weight: 600; color: #1a1a2e; margin-bottom: 2px; } .wpfnl-ai-feature-item p { font-size: 12px; color: #6b7280; margin: 0; line-height: 1.4; } .wpfnl-ai-feature-icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #f0ecfa; border-radius: 8px; } .wpfnl-ai-modal-footer { text-align: center; margin-top: 28px; padding-top: 24px; border-top: 1px solid #f0f0f0; } .wpfnl-ai-upgrade-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #6E42D3 0%, #9B6BFF 100%); color: #fff !important; border: none; padding: 12px 28px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none !important; transition: all 0.2s ease; } .wpfnl-ai-upgrade-btn:hover { background: linear-gradient(135deg, #5C35B5 0%, #8A5AEE 100%); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(110, 66, 211, 0.35); color: #fff !important; } .wpfnl-ai-upgrade-btn svg { width: 18px; height: 18px; } .wpfnl-ai-footer-note { font-size: 12px; color: #9ca3af; margin: 10px 0 0; } .wpfnl-ai-wizard { width: 640px; max-width: 95vw; padding: 0; } .wpfnl-ai-wizard-content { padding: 36px 40px; } .wpfnl-ai-wizard-progress { margin-bottom: 32px; } .wpfnl-ai-wizard-progress-bar { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; margin-bottom: 8px; } .wpfnl-ai-wizard-progress-fill { height: 100%; background: linear-gradient(90deg, #6E42D3, #9B6BFF); border-radius: 3px; transition: width 0.4s ease; } .wpfnl-ai-wizard-step-indicator { font-size: 12px; color: #9ca3af; font-weight: 500; } .wpfnl-ai-wizard-step { display: none; } .wpfnl-ai-wizard-step.active { display: block; animation: wpfnlAiStepFadeIn 0.3s ease; } @keyframes wpfnlAiStepFadeIn { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: translateX(0); } } .wpfnl-ai-wizard-step-header { margin-bottom: 24px; } .wpfnl-ai-wizard-step-header h3 { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; } .wpfnl-ai-wizard-step-header p { font-size: 14px; color: #6b7280; margin: 0; line-height: 1.5; } .wpfnl-ai-option-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .wpfnl-ai-option-grid--three { grid-template-columns: 1fr 1fr 1fr; } .wpfnl-ai-option-card { cursor: pointer; margin: 0; } .wpfnl-ai-option-card input[type=radio] { display: none; } .wpfnl-ai-option-card:hover .wpfnl-ai-option-card-inner { border-color: #c4b5e3; background: #faf8ff; } .wpfnl-ai-option-card input[type=radio]:checked + .wpfnl-ai-option-card-inner { border-color: #6E42D3; background: #f5f0ff; box-shadow: 0 0 0 3px rgba(110, 66, 211, 0.12); } .wpfnl-ai-option-card-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 12px; background: #fafafa; border: 2px solid #e5e7eb; border-radius: 10px; transition: all 0.2s ease; min-height: 90px; justify-content: center; } .wpfnl-ai-option-icon { font-size: 24px; margin-bottom: 8px; display: block; line-height: 1; } .wpfnl-ai-option-label { font-size: 13px; font-weight: 600; color: #374151; display: block; line-height: 1.3; } .wpfnl-ai-option-desc { font-size: 11px; color: #9ca3af; margin-top: 4px; display: block; line-height: 1.3; } .wpfnl-ai-custom-input { margin-top: 12px; } .wpfnl-ai-custom-input input[type=text] { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; color: #374151; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } .wpfnl-ai-custom-input input[type=text]:focus { border-color: #6E42D3; box-shadow: 0 0 0 3px rgba(110, 66, 211, 0.1); } .wpfnl-ai-custom-input input[type=text]::placeholder { color: #9ca3af; } .wpfnl-ai-wizard-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; padding-top: 24px; border-top: 1px solid #f0f0f0; gap: 12px; } .wpfnl-ai-wizard-back { display: inline-flex; align-items: center; gap: 4px; background: #f3f4f6 !important; color: #374151 !important; border: 1px solid #d1d5db !important; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .wpfnl-ai-wizard-back:hover { background: #e5e7eb !important; } .wpfnl-ai-wizard-skip { background: none; border: none; color: #9ca3af; font-size: 13px; cursor: pointer; padding: 8px 12px; transition: color 0.2s ease; margin-left: auto; } .wpfnl-ai-wizard-skip:hover { color: #6b7280; text-decoration: underline; } .wpfnl-ai-wizard-next, .wpfnl-ai-wizard-generate { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #6E42D3 0%, #9B6BFF 100%) !important; color: #fff !important; border: none !important; padding: 9px 20px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .wpfnl-ai-wizard-next:hover, .wpfnl-ai-wizard-generate:hover { background: linear-gradient(135deg, #5C35B5 0%, #8A5AEE 100%) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(110, 66, 211, 0.3); } .wpfnl-ai-wizard-generate .wpfnl-loader { display: none; } .wpfnl-ai-wizard-generate.loading .wpfnl-loader { display: inline-block; } .wpfnl-ai-automation-section { background: #faf8ff; border: 1px solid #e5e0f5; border-radius: 12px; padding: 20px; } .wpfnl-ai-automation-section-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .wpfnl-ai-automation-section-icon { font-size: 24px; line-height: 1; flex-shrink: 0; margin-top: 2px; } .wpfnl-ai-automation-section-text h4 { font-size: 15px; font-weight: 600; color: #1a1a2e; margin: 0 0 4px; } .wpfnl-ai-automation-section-text p { font-size: 13px; color: #6b7280; margin: 0; line-height: 1.5; } .wpfnl-ai-automation-choice { display: flex; flex-direction: column; gap: 10px; } .wpfnl-ai-automation-radio { cursor: pointer; display: block; margin: 0; } .wpfnl-ai-automation-radio input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; } .wpfnl-ai-automation-radio-inner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #fff; border: 2px solid #e5e7eb; border-radius: 10px; transition: all 0.2s ease; } .wpfnl-ai-automation-radio:hover .wpfnl-ai-automation-radio-inner { border-color: #c4b5e3; } .wpfnl-ai-automation-radio input[type=radio]:checked + .wpfnl-ai-automation-radio-inner { border-color: #6E42D3; background: #f5f0ff; box-shadow: 0 0 0 3px rgba(110, 66, 211, 0.1); } .wpfnl-ai-automation-radio-indicator { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d1d5db; margin-top: 2px; position: relative; transition: all 0.2s ease; } .wpfnl-ai-automation-radio-indicator::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 8px; height: 8px; border-radius: 50%; background: #6E42D3; transition: transform 0.15s ease; } .wpfnl-ai-automation-radio input[type=radio]:checked + .wpfnl-ai-automation-radio-inner .wpfnl-ai-automation-radio-indicator { border-color: #6E42D3; } .wpfnl-ai-automation-radio input[type=radio]:checked + .wpfnl-ai-automation-radio-inner .wpfnl-ai-automation-radio-indicator::after { transform: translate(-50%, -50%) scale(1); } .wpfnl-ai-automation-radio-text { display: flex; flex-direction: column; gap: 2px; } .wpfnl-ai-automation-radio-text strong { font-size: 14px; font-weight: 600; color: #1a1a2e; } .wpfnl-ai-automation-radio-text span { font-size: 12px; color: #6b7280; line-height: 1.4; } .wpfnl-ai-automation-credit-note { display: none; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; } .wpfnl-ai-automation-credit-note.visible { display: flex; } .wpfnl-ai-automation-credit-note .wpfnl-ai-automation-credit-icon { flex-shrink: 0; font-size: 14px; line-height: 1; } .wpfnl-ai-automation-credit-note p { font-size: 12px; color: #92400e; margin: 0; line-height: 1.5; } .wpfnl-ai-mint-info-section { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; } .wpfnl-ai-mint-info-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .wpfnl-ai-mint-info-header h4 { font-size: 15px; font-weight: 600; color: #374151; margin: 0; } .wpfnl-ai-mint-info-icon { font-size: 22px; line-height: 1; } .wpfnl-ai-mint-info-desc { font-size: 13px; color: #6b7280; line-height: 1.6; margin: 0 0 14px; } .wpfnl-ai-mint-features-list { list-style: none; padding: 0; margin: 0 0 16px; } .wpfnl-ai-mint-features-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: #374151; line-height: 1.4; } .wpfnl-ai-mint-features-list li svg { flex-shrink: 0; } .wpfnl-ai-install-mint-link { display: inline-flex; align-items: center; gap: 4px; color: #6E42D3 !important; font-size: 13px; font-weight: 600; text-decoration: none !important; transition: color 0.2s ease; } .wpfnl-ai-install-mint-link:hover { color: #5C35B5 !important; text-decoration: underline !important; } .wpfnl-ai-install-mint-link svg { flex-shrink: 0; } @media (max-width: 768px) { .wpfnl-ai-upsell { padding: 24px; } .wpfnl-ai-features-grid { grid-template-columns: 1fr; } .wpfnl-ai-wizard-content { padding: 24px; } .wpfnl-ai-option-grid { grid-template-columns: 1fr 1fr; } .wpfnl-ai-option-grid--three { grid-template-columns: 1fr; } .wpfnl-ai-wizard-nav { flex-wrap: wrap; } .wpfnl-ai-wizard-skip { order: 3; width: 100%; text-align: center; margin-left: 0; } .wpfnl-ai-automation-section, .wpfnl-ai-mint-info-section { padding: 16px; } } @media (max-width: 480px) { .wpfnl-ai-option-grid { grid-template-columns: 1fr; } .wpfnl-ai-funnel-btn { margin-left: 0; margin-top: 8px; } } @media only screen and (min-width: 1921px) { .wpfnl-dashboard { min-height: calc(108vh - 120px); } } @media only screen and (max-width: 1699px) { .wpfnl-dashboard { min-height: calc(113vh - 120px); } .dashboard-nav__content { width: calc(100% - 80px); } .wpfnl-dashboard .no-funnel-info { width: calc(100% - 380px); padding: 20px; gap: 20px; } .wpfnl-dashboard .no-funnel-info .video-preview { width: 370px; } .wpfnl-dashboard .no-funnel-info .video-poster { height: 311px; } } @media only screen and (max-width: 1399px) { .wpfnl-dashboard__header.overview-header { padding: 24px 0 0; } .dashboard-nav__content { width: calc(100% - 48px); } .dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-action .btn-upgrade-to-pro { font-size: 15px; min-width: 150px; } .wpfnl-dashboard .no-funnel-info .info-link { font-size: 14px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info { padding: 30px 50px 30px 40px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview { width: 420px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview:before { inset: -12px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview:after { inset: -24px; } } @media only screen and (max-width: 1199px) { .wpfnl-dashboard__nav .wpfnl-dashboard__nav-ul { gap: 18px; } .dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-action .btn-upgrade-to-pro { min-width: 135px; padding: 10px 15px; font-size: 14px; } .dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-content .upgrade-to-pro-message h3 { font-size: 16px; } .wpfnl-dashboard__header.overview-header { padding: 20px 0 0; } .wpfnl-dashboard__header .wpfnl-dashboard-header-left:not(.trash-funnels-header) { flex-direction: column; align-items: flex-start; gap: 11px; } .overview-header .wpfnl-dashboard__inner-content { margin-top: 0px; } .wpfnl-dashboard__inner-content.no-funnel .no-trash-wrapper { padding: 100px 0; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info { padding: 20px 36px 24px 24px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview { width: 330px; } .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview:after { opacity: 0; } } @media only screen and (max-width: 960px) { .dashboard-nav__content .import-funnel-modal { left: 34px; width: calc(100% - 34px); } } @media only screen and (max-width: 782px) { .dashboard-nav__content .import-funnel-modal { left: 0; width: 100%; } } .wpfnl-sc-analytics-overview { margin-top: 20px; margin-bottom: 24px; background: #fff; border: 1px solid #E4E6EB; border-radius: 10px; overflow: hidden; transition: max-height 0.3s ease; } .wpfnl-sc-analytics-overview.collapsed .wpfnl-sc-analytics-cards { display: none; } .wpfnl-sc-analytics-overview.collapsed .wpfnl-sc-analytics-toggle .toggle-arrow { transform: rotate(180deg); } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 24px 20px; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card { display: flex; align-items: center; gap: 16px; padding: 0 20px; border-right: 1px solid #E4E6EB; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card:first-child { padding-left: 0; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card:last-child { border-right: none; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card__icon .icon-wrap { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #FFF3EC 0%, #FFE8D9 100%); border: 1px solid #FDDCC9; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card__icon .icon-wrap--purple { background: linear-gradient(135deg, #F3EEFF 0%, #E8DDFB 100%); border-color: #D8C9F5; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card__icon .icon-wrap--orange { background: linear-gradient(135deg, #FFF3EC 0%, #FFE8D9 100%); border-color: #FDDCC9; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card__icon .icon-wrap--green { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); border-color: #A7F3D0; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card__content .card-title { display: block; color: #7A8B9A; font-size: 13px; font-weight: 400; line-height: 1.3; margin-bottom: 4px; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card__content .card-value { display: block; color: #2D3149; font-size: 22px; font-weight: 600; line-height: 1.2; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-toggle { display: flex; justify-content: center; padding: 8px 0; border-top: 1px solid #E4E6EB; cursor: pointer; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-toggle__btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #E4E6EB; background: #fff; cursor: pointer; transition: background 0.2s; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-toggle__btn:hover { background: #F5F6FA; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-toggle .toggle-arrow { transition: transform 0.3s ease; } @media only screen and (max-width: 1199px) { .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card { border-right: none; padding-left: 0; } } @media only screen and (max-width: 600px) { .wpfnl-sc-analytics-overview .wpfnl-sc-analytics-cards { grid-template-columns: 1fr; } } .wpfnl-guided-onboarding { margin-top: -24px; background-color: #EDEBF2; padding: 30px 0; } .wpfnl-guided-onboarding .wpfnl-guided-onboarding-wrapper { display: flex; flex-flow: row wrap; gap: 20px; width: calc(100% - 280px); margin: 0 auto; } .wpfnl-guided-onboarding .onboarding-title-area { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .wpfnl-guided-onboarding .onboarding-title-area .onboarding-title { color: #1D2327; font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0; } .wpfnl-guided-onboarding .onboarding-title-area .dismiss-button { border: none; padding: 0; background: transparent; display: flex; align-items: center; gap: 5px; cursor: pointer; color: #707070; font-size: 14px; font-weight: 400; line-height: 1; } .wpfnl-guided-onboarding .onboarding-title-area .dismiss-button svg { display: block; } .wpfnl-guided-onboarding .onboarding-title-area .dismiss-button:hover { color: #6E42D3; } .wpfnl-guided-onboarding .onboarding-title-area .dismiss-button:hover path { stroke: #6E42D3; } .wpfnl-guided-onboarding .onboarding-list-wrapper { width: 410px; border-radius: 10px; background-color: #FFF; box-shadow: 0 1px 1px 0 rgba(182, 185, 191, 0.3); } .wpfnl-guided-onboarding .onboarding-progressbar { padding: 20px 24px; border-bottom: 1px solid #EDECF2; } .wpfnl-guided-onboarding .onboarding-progressbar .funnel-progress-title { margin: 0 0 18px 0; color: #2D3149; font-size: 18px; font-weight: 600; line-height: 1.3; } .wpfnl-guided-onboarding .onboarding-progressbar .funnel-progress-wrapper { display: flex; align-items: center; gap: 16px; } .wpfnl-guided-onboarding .onboarding-progressbar .funnel-progress-label { white-space: nowrap; color: #9398A5; font-size: 14px; font-weight: 400; line-height: 1; display: inline-block; } .wpfnl-guided-onboarding .onboarding-progressbar .funnel-progress-bar { flex: 1; height: 8px; background: #E3E1EA; border-radius: 999px; position: relative; overflow: hidden; } .wpfnl-guided-onboarding .onboarding-progressbar .funnel-progress-fill { height: 100%; background-color: #6E42D3; border-radius: 999px; transition: width 0.4s ease; } .wpfnl-guided-onboarding .onboarding-list { width: 100%; padding: 24px; display: flex; flex-flow: column; gap: 24px; } .wpfnl-guided-onboarding .onboarding-item { display: flex; align-items: center; gap: 14px; justify-content: space-between; transition: background 0.2s ease; } .wpfnl-guided-onboarding .onboarding-item .left { display: flex; align-items: center; gap: 10px; min-width: 0; } .wpfnl-guided-onboarding .onboarding-item .right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-align: right; } .wpfnl-guided-onboarding .onboarding-item .right .status { color: #9398A5; font-size: 14px; font-weight: 400; line-height: 1; } .wpfnl-guided-onboarding .onboarding-item .right .status.completed { color: #239654; font-weight: 500; } .wpfnl-guided-onboarding .onboarding-item .right .action-link { color: #6E42D3; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .wpfnl-guided-onboarding .onboarding-item .right .action-link svg { display: block; } .wpfnl-guided-onboarding .onboarding-item .right .action-link:hover { text-decoration: underline; } .wpfnl-guided-onboarding .onboarding-item .right .action-link:focus-visible { outline: 2px solid #6E42D3; outline-offset: 3px; border-radius: 3px; } .wpfnl-guided-onboarding .onboarding-item .right .pro-badge { padding: 4px 8px; border: 1px solid #6E42D3; border-radius: 999px; color: #6E42D3; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; } .wpfnl-guided-onboarding .onboarding-item .icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #DDDBE4; background: transparent; } .wpfnl-guided-onboarding .onboarding-item .icon svg { display: block; } .wpfnl-guided-onboarding .onboarding-item .title { color: #2D3149; font-size: 16px; font-weight: 400; line-height: 1.3; } .wpfnl-guided-onboarding .onboarding-item .filled { background: #ececf3; color: #7b8190; } .wpfnl-guided-onboarding .onboarding-item .outline { border-color: #E4E6EB; background: transparent; } .wpfnl-guided-onboarding .onboarding-item.completed .icon { border-color: #239654; } .wpfnl-guided-onboarding .onboarding-info { width: calc(100% - 430px); border-radius: 10px; background-color: #FFF; box-shadow: 0 1px 1px rgba(182, 185, 191, 0.3); padding: 24px 24px 24px 40px; display: flex; gap: 30px; align-items: center; } .wpfnl-guided-onboarding .onboarding-info .info-content { flex: 1; } .wpfnl-guided-onboarding .onboarding-info .info-title { color: #1D2327; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0 0 5px 0; } .wpfnl-guided-onboarding .onboarding-info .info-description { margin: 0 0 18px 0; color: #6E7A85; font-size: 14px; font-weight: 400; line-height: 1.5; max-width: 330px; } .wpfnl-guided-onboarding .onboarding-info .info-features { list-style: none; margin: 0 0 28px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .wpfnl-guided-onboarding .onboarding-info .feature-item { display: flex; align-items: center; gap: 10px; color: #1F2937; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; padding-left: 22px; position: relative; } .wpfnl-guided-onboarding .onboarding-info .feature-item svg { position: absolute; left: 0; top: 7px; width: 14px; height: auto; } .wpfnl-guided-onboarding .onboarding-info .info-links { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; row-gap: 10px; } .wpfnl-guided-onboarding .onboarding-info .info-link { display: inline-flex; align-items: center; gap: 8px; color: #6E42D3; font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; transition: opacity 0.2s ease; } .wpfnl-guided-onboarding .onboarding-info .info-link svg { display: block; flex-shrink: 0; } .wpfnl-guided-onboarding .onboarding-info .info-link:hover { text-decoration: underline; } .wpfnl-guided-onboarding .onboarding-info .info-link:focus { outline: 2px solid #6E42D3; outline-offset: 2px; border-radius: 4px; } .wpfnl-guided-onboarding .onboarding-info .video-wrapper { flex-shrink: 0; height: 100%; } .wpfnl-guided-onboarding .onboarding-info .video-preview { position: relative; width: 450px; height: 100%; border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform 0.2s ease; } .wpfnl-guided-onboarding .onboarding-info .video-preview:focus { outline: 3px solid #6E42D3; outline-offset: 2px; } .wpfnl-guided-onboarding .onboarding-info .video-poster { width: 100%; height: 336px; object-fit: cover; display: block; } .wpfnl-guided-onboarding .onboarding-info .play-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); transition: background 0.2s ease; } .video-preview:hover .wpfnl-guided-onboarding .onboarding-info .play-overlay { background: rgba(0, 0, 0, 0.4); } .wpfnl-guided-onboarding .onboarding-info .play-button { width: 57px; height: 57px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; box-shadow: 0 0 0 10px #e7e7e7; position: relative; } .wpfnl-guided-onboarding .onboarding-info .play-button:before { content: ""; position: absolute; inset: -11px; border-radius: 50%; background: transparent; border: 1px solid #fff; } .wpfnl-guided-onboarding .onboarding-info .play-button svg { margin-left: 4px; display: block; } .video-preview:hover .wpfnl-guided-onboarding .onboarding-info .play-button { background: rgb(110, 66, 211); transform: scale(1.1); } .wpfnl-guided-onboarding .video-popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 20px; } .wpfnl-guided-onboarding .video-popup-content { position: relative; width: 100%; max-width: 760px; border-radius: 16px; background: #fff; padding: 20px; } .wpfnl-guided-onboarding .video-popup-close { position: absolute; top: -20px; right: -20px; width: 40px; height: 40px; background: rgb(255, 255, 255); border: none; border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 10; box-shadow: 1px 1px 7px rgba(34, 34, 34, 0.2784313725); } .wpfnl-guided-onboarding .video-popup-close:focus { outline: 2px solid #fff; outline-offset: 2px; } .wpfnl-guided-onboarding .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .wpfnl-guided-onboarding .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 14px; } .wpfnl-guided-onboarding .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .wpfnl-guided-onboarding .video-popup-fade-enter-active, .wpfnl-guided-onboarding .video-popup-fade-leave-active { transition: opacity 0.3s ease; } .wpfnl-guided-onboarding .video-popup-fade-enter-from, .wpfnl-guided-onboarding .video-popup-fade-leave-to { opacity: 0; } @media only screen and (max-width: 1699px) { .wpfnl-guided-onboarding .wpfnl-guided-onboarding-wrapper { width: calc(100% - 90px); } .wpfnl-guided-onboarding .onboarding-list-wrapper { width: 360px; } .wpfnl-guided-onboarding .onboarding-progressbar { padding: 15px 20px; } .wpfnl-guided-onboarding .onboarding-progressbar .funnel-progress-title { font-size: 16px; } .wpfnl-guided-onboarding .onboarding-list { padding: 15px 20px; } .wpfnl-guided-onboarding .onboarding-item .title { font-size: 14px; } .wpfnl-guided-onboarding .onboarding-info { width: calc(100% - 380px); padding: 20px; gap: 20px; } .wpfnl-guided-onboarding .onboarding-info .video-preview { width: 370px; } .wpfnl-guided-onboarding .onboarding-info .video-poster { height: 311px; } } @media only screen and (max-width: 1399px) { .wpfnl-guided-onboarding .onboarding-list-wrapper { width: 340px; } .wpfnl-guided-onboarding .onboarding-info { width: calc(100% - 360px); } .wpfnl-guided-onboarding .wpfnl-guided-onboarding-wrapper { width: 100%; padding: 0 20px; } .wpfnl-guided-onboarding .onboarding-info .info-link { font-size: 14px; } .wpfnl-guided-onboarding .onboarding-info .video-preview { width: 270px; } .wpfnl-guided-onboarding .onboarding-info .video-poster { height: auto; } } @media only screen and (max-width: 1199px) { .wpfnl-guided-onboarding .onboarding-title-area .onboarding-title { font-size: 20px; } .wpfnl-guided-onboarding .wpfnl-guided-onboarding-wrapper { flex-flow: column; } .wpfnl-guided-onboarding .onboarding-list-wrapper { width: 100%; } .wpfnl-guided-onboarding .onboarding-info { width: 100%; } .wpfnl-guided-onboarding .onboarding-info .video-preview { width: 370px; } .wpfnl-guided-onboarding .video-popup-content { width: 90%; } } @media only screen and (max-width: 767px) { .wpfnl-guided-onboarding .wpfnl-guided-onboarding-wrapper { width: calc(100% - 40px); } .wpfnl-guided-onboarding .info-title { font-size: 18px; } .wpfnl-guided-onboarding .info-description { font-size: 13px; } .wpfnl-guided-onboarding .info-links { flex-direction: column; align-items: flex-start; gap: 12px; } .wpfnl-guided-onboarding .play-button { width: 60px; height: 60px; } .wpfnl-guided-onboarding .play-button svg { width: 18px; height: 21px; } } .empty-funnel-onboarding { display: flex; flex-direction: column; gap: 24px; margin: auto; padding: 0 10px; width: calc(100% - 280px); } .empty-funnel-onboarding .empty-funnel-onboarding-banner { display: flex; align-items: center; background-color: #fff; box-shadow: 0 1px 1px rgba(182, 185, 191, 0.3); border-radius: 10px; padding: 30px 30px 30px 40px; justify-content: space-between; overflow: hidden; gap: 40px; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .banner-title { color: #1D2327; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0 0 7px; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .banner-description { color: #6E7A85; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .list-title { margin-top: 30px; color: #363B4E; font-size: 18px; font-weight: 600; line-height: 1; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .feature-list { margin: 0; display: flex; flex-flow: column; gap: 15px; margin-top: 17px; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .feature-list li { color: #1F2937; font-size: 14px; font-weight: 400; line-height: 1; position: relative; margin: 0; padding-left: 25px; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .feature-list li:before { content: ""; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjY2NzMgMy41TDUuMjUwNjUgOS45MTY2N0wyLjMzMzk4IDciIHN0cm9rZT0iIzQ0NEQ1RSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K); background-repeat: no-repeat; background-size: contain; background-position: center; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .cta-wrapper { display: flex; align-items: center; gap: 10px; margin-top: 30px; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .btn-default { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 12px 20px; background: #6c41d3; text-decoration: none; transition: all 0.2s ease; white-space: nowrap; border-radius: 10px; border: 1px solid transparent; box-shadow: 0 2px 4px 0 rgba(223, 223, 249, 0.25); color: #fff; font-size: 15px; font-weight: 500; line-height: 1; transition: all 0.3s ease; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .btn-default:hover { background-color: #4b1eb6; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .btn-default.btn-outline { background: transparent; color: #1F2937; border-color: #EDECF2; box-shadow: 0 2px 4px 0 rgba(223, 223, 249, 0.25); } .empty-funnel-onboarding .empty-funnel-onboarding-banner .btn-default.btn-outline:hover { background-color: #f5f5f5; } .empty-funnel-onboarding .onboarding-banner-left { width: 55%; } .empty-funnel-onboarding .onboarding-banner-right { width: 45%; display: flex; flex-flow: column; align-items: center; justify-content: flex-end; position: relative; } .empty-funnel-onboarding .onboarding-banner-right .circle-shape { display: block; height: 470px; width: 470px; background-color: #EFEEF4; border-radius: 100%; position: absolute; top: 50px; right: 0; z-index: 0; } .empty-funnel-onboarding .onboarding-banner-right img { display: block; height: auto; transform: translateY(30px); position: relative; z-index: 1; } .empty-funnel-onboarding .onboarding-template-wrapper { width: 100%; box-shadow: 0 1px 1px 0 rgba(182, 185, 191, 0.3); background-color: #fff; border-radius: 10px; } .empty-funnel-onboarding .onboarding-template-wrapper .wpfnl { background-color: transparent; } .empty-funnel-onboarding .onboarding-template-wrapper .create-funnel-template-modal, .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal { background-color: transparent; } .empty-funnel-onboarding .onboarding-template-wrapper .template-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 24px; border-bottom: 1px solid #EEF0F3; } .empty-funnel-onboarding .onboarding-template-wrapper .template-header .template-title { margin: 0; color: #2D3149; font-size: 18px; font-weight: 600; line-height: 1; } .empty-funnel-onboarding .onboarding-template-wrapper .template-header .template-actions { display: flex; gap: 16px; } .empty-funnel-onboarding .onboarding-template-wrapper .template-header .template-action-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; background: #ffffff; text-decoration: none; transition: all 0.2s ease; white-space: nowrap; border-radius: 10px; border: 1px solid transparent; box-shadow: 0 2px 4px 0 rgba(223, 223, 249, 0.25); color: #2D3149; font-size: 15px; font-weight: 500; line-height: 1; } .empty-funnel-onboarding .onboarding-template-wrapper .template-header .btn-outline { border-color: #EEF0F3; } .empty-funnel-onboarding .onboarding-template-wrapper .template-header .btn-outline:hover { background: #f7f8fc; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal { position: relative; top: inherit; left: inherit; width: 100%; background: transparent; z-index: 0; padding: 24px; overflow: auto; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates { gap: 20px; width: max-content; min-width: 100%; min-height: auto; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .templates-loading { width: 100%; height: 340px; background: #ffffff; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .templates-loading .wpfnl-loader { display: block; width: 40px; height: 40px; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template { width: calc(25% - 15px); border-radius: 10px; border: 1px solid #F1EFF7; background: #FFF; box-shadow: 0 20px 20px 0 rgba(190, 190, 215, 0.15); } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .template-image-wrapper:before { padding-top: calc(100% - 10px); } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .templates-skeleton { display: flex; gap: 20px; width: 100%; } @keyframes onboarding-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .skeleton-block { background: linear-gradient(90deg, #f0eef8 25%, #e4e0f2 50%, #f0eef8 75%); background-size: 600px 100%; animation: onboarding-shimmer 1.4s ease-in-out infinite; border-radius: 6px; display: block; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template--skeleton { pointer-events: none; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template--skeleton .template-image-wrapper:before { padding-top: calc(100% - 10px); } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template--skeleton .funnel-template-info { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template--skeleton .skeleton-title { width: 70%; height: 14px; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template--skeleton .skeleton-steps { width: 40%; height: 11px; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-preview-modal .funnel-templates-body { overflow: auto; } @media only screen and (max-width: 1699px) { .empty-funnel-onboarding { width: calc(100% - 80px); } .wpfnl-guided-onboarding .onboarding-template-wrapper .template-header { padding: 13px 20px; } .wpfnl-guided-onboarding .onboarding-template-wrapper .template-header .template-title { font-size: 16px; } .wpfnl-guided-onboarding .onboarding-template-wrapper .template-header .template-actions { gap: 10px; } .wpfnl-guided-onboarding .onboarding-template-wrapper .template-header .template-action-btn { padding: 9px 16px; font-size: 13px; } .wpfnl-guided-onboarding .onboarding-template-wrapper .onboarding-template-library-modal { padding: 18px; } } @media screen and (max-width: 1399px) { .empty-funnel-onboarding { width: calc(100% - 48px); } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates { gap: 12px; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template { width: calc(25% - 9px); } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .funnel-template-info .title { color: #363B4E; font-size: 13px; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .templates-loading { height: 310px; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .cta-wrapper { flex-wrap: wrap; } .empty-funnel-onboarding .onboarding-banner-right { width: 50%; } } @media screen and (max-width: 1299px) { .empty-funnel-onboarding .onboarding-banner-right img { max-width: 490px; } } @media screen and (max-width: 1199px) { .empty-funnel-onboarding .empty-funnel-onboarding-banner { padding: 20px 20px 20px 20px; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .banner-title { font-size: 20px; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .list-title { font-size: 16px; } .empty-funnel-onboarding .empty-funnel-onboarding-banner .btn-default { font-size: 14px; } .empty-funnel-onboarding .onboarding-banner-right img { max-width: 100%; transform: translateY(90px); } .empty-funnel-onboarding .onboarding-banner-right .circle-shape { height: 360px; width: 360px; } .wpfnl-guided-onboarding .onboarding-template-wrapper { width: 100%; } .wpfnl-guided-onboarding .onboarding-template-wrapper .template-header { flex-wrap: wrap; row-gap: 10px; padding: 13px 15px; } .wpfnl-guided-onboarding .onboarding-template-wrapper .template-header .template-action-btn { padding: 9px 12px; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates { width: 100%; } .empty-funnel-onboarding .onboarding-template-wrapper .onboarding-template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template { width: calc(33% - 6px); } } .wpfnl-comparison-chart-wrapper { border-radius: 10px; background: #FFF; box-shadow: 0px 1px 1px 0px rgba(182, 185, 191, 0.3); padding: 24px; } .wpfnl-comparison-chart-wrapper .wpfnl-loader { display: flex; margin: 150px auto; padding: 40px; } .wpfnl-comparison-chart-wrapper .wpfnl-chart-title { color: #2D3149; font-size: 18px; font-style: normal; font-weight: 600; line-height: 18px; margin: 0; margin-bottom: 24px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container { display: flex; align-items: center; justify-content: space-between; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab { padding: 16px 24px; position: relative; cursor: pointer; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab.disabled { pointer-events: none; cursor: not-allowed; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab.disabled .wpfnl-overlay { width: 99.5%; padding: 0; left: -1px; border-radius: 0; bottom: -1px; top: unset; border: 1px solid rgba(238, 240, 243, 0.8); border-bottom: none; border-radius: 10px 10px 0 0; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab .wpfnl-tab-header { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 10px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab .wpfnl-tab-header .wpfnl-tab-total-amount { margin: 0; color: #2D3149; font-size: 22px; font-style: normal; font-weight: 500; line-height: 1.36; letter-spacing: -0.44px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab .wpfnl-tab-header .wpfnl-percentage { border-radius: 100px; padding: 4px 7px; display: flex; align-items: center; gap: 1px; justify-content: center; font-size: 12px; font-style: normal; font-weight: 500; line-height: 1; margin: 0; min-width: 40px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab .wpfnl-tab-header .wpfnl-percentage.wpfnl-decrease { background: rgba(236, 89, 86, 0.1); color: #EC5956; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab .wpfnl-tab-header .wpfnl-percentage.wpfnl-increase { background: rgba(18, 183, 106, 0.1); color: #12B76A; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab .wpfnl-tab-title { margin: 0; color: #667085; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab::after { content: ""; width: 1px; height: 60%; position: absolute; background: #E4E6EB; right: 0; top: 30%; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab.active { border-radius: 8px 8px 0px 0px; border: 1px solid rgba(238, 240, 243, 0.8); background: #FCFCFF; border-bottom: 0; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab.active::after { content: none; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab.no-after::after { content: none; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab:last-child::after { content: none; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body { border-radius: 0px 0px 8px 8px; border: 1px solid rgba(241, 240, 245, 0.8); background: #FCFCFF; padding: 24px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-chart-steps-container { position: relative; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-chart-steps-container .wpfnl-comparison-chart-steps { position: absolute; top: 3px; left: 0; height: 292px; width: 100%; display: flex; flex-flow: column; justify-content: space-between; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-chart-steps-container .wpfnl-comparison-chart-steps .wpfnl-single-step { color: #9398A5; text-align: right; font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.5; display: block; position: relative; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-chart-steps-container .wpfnl-comparison-chart-steps .wpfnl-single-step::before { content: ""; position: absolute; left: 50px; bottom: 1px; top: inherit; width: calc(100% - 50px); height: 1px; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23E4E7ECFF' stroke-width='4' stroke-dasharray='3%2c 11' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-chart-steps-container .wpfnl-comparison-chart-steps .wpfnl-single-step span { width: 33px; display: block; text-align: right; position: relative; bottom: -7px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container { height: 320px; padding: 10px 0px 9px 60px; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar { width: 100%; height: 94%; position: relative; display: flex; flex-flow: row nowrap; align-items: flex-end; gap: 6px; bottom: 0px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar::before { height: 100%; width: 1px; position: absolute; background: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMSAxOTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSIjMkQzMTQ5IiBzdHJva2UtZGFzaGFycmF5PSI0IDQiIHN0cm9rZS13aWR0aD0iLjUiIGQ9Ik0uMjUuMjVoLjV2MTk4LjVoLS41eiIvPjwvc3ZnPg=="); left: 38%; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar:hover::before { content: ""; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar:hover .wpfnl-comparison-bar-tooltip { display: block; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip { display: none; border-radius: 8px; background: #10052E; box-shadow: 0px 2px 15px 0px rgba(22, 28, 32, 0.08); padding: 15px 14px; width: 160px; z-index: 99; position: absolute; transform: translateX(-50%); left: 45%; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip::before { content: ""; background: #10052E; width: 10px; height: 10px; position: absolute; bottom: -5px; transform: rotate(45deg); left: 45%; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-current-data, .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-previous-data { color: #CDCFD6; font-size: 13px; font-style: normal; font-weight: 400; line-height: 12px; margin: 0; display: flex; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-current-data b, .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-previous-data b { color: #FFF; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-current-data .circle, .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-previous-data .circle { width: 10px; height: 10px; border-radius: 50%; background: #6E42D3; display: inline-block; margin-right: 5px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-current-data .wpfnl-value-wrapper, .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-previous-data .wpfnl-value-wrapper { display: flex; flex-wrap: wrap; gap: 2px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-previous-data { margin-top: 8px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-previous-data .circle { background: #EAE1FF; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-bar-label { font-size: 12px; line-height: 1.2; color: #9398A5; position: absolute; bottom: -40px; left: 40%; transform: translateX(-50%); white-space: nowrap; transition: all 0.3s ease; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-single-bar { flex: 1; min-width: 0; display: block; border-radius: 30px 30px 0 0; position: relative; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-single-bar.wpfnl-compare-to-bar { background-color: #EAE1FF; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-single-bar.wpfnl-compare-with-bar { background-color: #6E42D3; } @media only screen and (max-width: 1600px) { .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip { left: 40%; width: 94px; padding: 10px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-current-data, .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-previous-data { font-size: 10px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-current-data .circle, .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-previous-data .circle { width: 6px; height: 6px; margin-right: 3px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip b { display: block; margin-top: 2px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar .wpfnl-comparison-bar-tooltip .wpfnl-current-data .wpfnl-value-wrapper { margin-top: -3px; } } @media only screen and (max-width: 1399px) { .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab { padding: 10px 15px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab .wpfnl-tab-header .wpfnl-tab-total-amount { font-size: 18px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab .wpfnl-tab-header .wpfnl-percentage { min-width: 40px; padding: 4px 5px; font-size: 9px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab .wpfnl-tab-header .wpfnl-percentage svg { width: 12px; height: 12px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container .wpfnl-comparison-bar-single-tab .wpfnl-tab-title { font-size: 12px; } .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-chart-body .wpfnl-comparison-bars-container .wpfnl-comparison-bar::before { left: 42%; } } @media only screen and (max-width: 960px) { .wpfnl-comparison-chart-wrapper .wpfnl-comparison-chart .wpfnl-comparison-tabs-container { flex-wrap: wrap; } } .wpfnl-datepicker { position: relative; min-width: 350px; } .wpfnl-datepicker input { cursor: default; margin: 0.5em; border-radius: 4px; background: inherit; border-radius: 8px; color: #2D3149; font-family: Inter; font-size: 13px; font-style: normal; font-weight: 500; line-height: 1.15; border: 1px solid #F1F0F5; padding: 9px 12px; width: 45%; } .wpfnl-datepicker input.single-date { width: 100%; margin-left: -1px; } .wpfnl-datepicker .multi-input { display: flex; align-items: center; } .wpfnl-datepicker .multi-input span { margin: 0 0.5em; } .wpfnl-datepicker .calendar { background: white; padding: 1em; } .wpfnl-datepicker .calendar .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em; } .wpfnl-datepicker .calendar .calendar-header .pre-month, .wpfnl-datepicker .calendar .calendar-header .next-month { border-radius: 8px; border: 1px solid #F1F0F5; padding: 8px 15px; } .wpfnl-datepicker .calendar .calendar-header .month-name { color: #2D3149; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 500; line-height: 15px; } .wpfnl-datepicker .calendar .calendar-header button { background: none; border: none; cursor: pointer; font-size: 1.2em; } .wpfnl-datepicker .calendar .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5em; } .wpfnl-datepicker .calendar .calendar-grid .calendar-day { color: #9398A5; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 500; line-height: 14px; cursor: default; } .wpfnl-datepicker .calendar .calendar-grid .calendar-day:hover { background: none !important; } .wpfnl-datepicker .calendar .calendar-grid div { text-align: center; padding: 0.5em; cursor: pointer; border-radius: 4px; color: #2D3149; text-align: center; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 500; line-height: 2.667; } .wpfnl-datepicker .calendar .calendar-grid div.empty { background: none; cursor: default; } .wpfnl-datepicker .calendar .calendar-grid div.selected, .wpfnl-datepicker .calendar .calendar-grid div.start-date, .wpfnl-datepicker .calendar .calendar-grid div.end-date { background: #6E42D3; color: white; } .wpfnl-datepicker .calendar .calendar-grid div.in-range { background: #e5daff; } .wpfnl-datepicker .calendar .calendar-grid div.disabled { opacity: 0.5; cursor: default; pointer-events: none; } .wpfnl-datepicker .calendar .calendar-grid div.disabled:hover { background: none !important; } .wpfnl-datepicker .calendar .calendar-grid div:hover:not(.empty) { background: #f0f0f0; } .wpfnl-tpl-shimmer-block { border-radius: 8px; animation: shimmer-animation 1.6s infinite linear; background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%); background-size: 1000px 100%; } .wpfnl-tpl-shimmer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .wpfnl-tpl-shimmer-card { border-radius: 12px; overflow: hidden; padding: 12px; background: #f7f7fb; } .wpfnl-tpl-shimmer-card-img { height: 140px; border-radius: 8px; margin-bottom: 10px; } .wpfnl-tpl-shimmer-card-text { height: 16px; width: 80%; margin-bottom: 8px; } .wpfnl-tpl-shimmer-card-badge { height: 22px; width: 40%; border-radius: 20px; } .wpfnl-tpl-filter-shimmer { width: 100%; padding-top: 8px; } .create-funnel-shimmer-overlay { background: #fff; display: flex; flex-direction: column; width: 100%; min-height: 100%; } .create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-header-bar { display: flex; align-items: center; justify-content: space-between; padding: 15px 24px; background: #fff; box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.4); flex-shrink: 0; } .create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-title { height: 28px; width: 220px; } .create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-btn { height: 36px; width: 120px; border-radius: 8px; } .create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-body { display: flex; flex: 1; } .create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-sidebar { width: 247px; flex-shrink: 0; padding: 19px 20px; background: #fff; box-shadow: 1px 0px 2px rgba(190, 190, 215, 0.14); } .create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-sidebar-title { height: 20px; width: 80%; margin-bottom: 24px; border-radius: 6px; } .create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-sidebar-item { height: 44px; border-radius: 8px; margin-bottom: 14px; } .create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-content { flex: 1; padding: 40px; overflow: hidden; } .create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-wrap, .create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-header { display: none; } .shimmer-line { height: 20px; margin-top: 20px; background: #777; } .shimmer-line-br { border-radius: 8px; } .shimmer-line-full { width: 100%; } .shimmer-line-80 { width: 80%; } .shimmer-line-60 { width: 60%; } .shimmer-line-40 { width: 40%; } .shimmer-line-20 { width: 20%; } .shimmer-line-10 { width: 10%; } .shimmer-circle { background: #777; border-radius: 50%; } .shimmer-circle-lg { height: 129px; width: 129px; } .shimmer-circle-md { height: 65px; width: 65px; } .shimmer-circle-sm { height: 33px; width: 33px; } .shimmer-circle-x-sm { height: 17px; width: 17px; } .shimmer-wrapper, .shimmer-wrapper-center { width: 100%; height: 100%; padding: 10px; animation: shimmer-full-view 0.5s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94); } .shimmer-wrapper-center { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; } @keyframes shimmer-full-view { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } @keyframes shimmer-animation { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .shimmer-animate { animation: shimmer-animation 4s infinite linear; background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%); background-size: 1000px 100%; } body.toplevel_page_wpfunnels { background: #F6F5FA; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard a:focus { box-shadow: none; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .pro-tag { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 3px 8px 4px; background-color: #2FCF5C; font-size: 10px; line-height: 15px; color: #fff; display: inline-block; text-transform: capitalize; border-radius: 5px; box-shadow: 0px 3px 3px rgba(175, 175, 206, 0.3); font-weight: 400; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .pro-tag-icon { position: absolute; top: 10px; right: 10px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-overlay { background: rgba(246, 245, 250, 0.6); opacity: 1; display: flex; flex-flow: column; height: 100%; justify-content: center; align-items: center; left: 0; position: absolute; top: 0; transition: all 0.3s ease; width: 100%; z-index: 1; border-radius: 10px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-sidebar { background: #fff; box-shadow: 1px 0px 2px rgba(190, 190, 215, 0.14); position: relative; display: flex; flex-flow: row wrap; align-items: center; gap: 22px; margin-bottom: 24px; padding: 0 24px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-sidebar .wpfnl-logo svg { display: block; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-sidebar .wpfnl-dashboard-sidebar-menu { padding: 0; margin: 0; display: flex; align-items: center; gap: 24px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-sidebar .wpfnl-dashboard-sidebar-menu .wpfnl-dashboard-sidebar-menu-item { margin: 0; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-sidebar .wpfnl-dashboard-sidebar-menu .wpfnl-dashboard-sidebar-menu-item a { text-decoration: none; padding: 25px 3px; padding-top: 20px; color: #707070; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1; position: relative; display: block; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-sidebar .wpfnl-dashboard-sidebar-menu .wpfnl-dashboard-sidebar-menu-item a:hover { color: #6E42D3; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-sidebar .wpfnl-dashboard-sidebar-menu .wpfnl-dashboard-sidebar-menu-item.active a { color: #6E42D3; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-sidebar .wpfnl-dashboard-sidebar-menu .wpfnl-dashboard-sidebar-menu-item.active a:after { content: ""; position: absolute; left: 0px; bottom: 0; height: 2px; width: 100%; background: #6E42D3; z-index: 1; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-sidebar .wpfnl-dashboard__nav-right { display: flex; align-items: center; margin-inline-start: auto; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body { min-height: 100vh; width: calc(100% - 280px); margin: 0 auto; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .community-banner { background-color: #6B46C1; color: white; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; margin: 16px 0px; border-radius: 10px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .community-banner .community-banner-text { flex: 1; text-align: center; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .community-banner .community-banner-text .community-link { color: white; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.3s ease; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .community-banner .community-banner-text .community-link:hover { opacity: 0.9; color: #ffffff; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .community-banner .community-banner-text .community-link:hover .link-text { text-decoration-thickness: 2px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .community-banner .community-banner-text .community-link .link-text { font-size: 16px; font-weight: 500; line-height: 100%; letter-spacing: 0; text-decoration: underline; text-decoration-style: solid; text-decoration-thickness: 1px; transition: text-decoration-thickness 0.3s ease; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .community-banner .community-banner-actions { display: flex; gap: 16px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .community-banner .community-banner-actions .ask-later-button { background: none; border: none; color: white; cursor: pointer; font-weight: 400; font-size: 14px; line-height: 100%; letter-spacing: 0; text-align: right; text-decoration: underline; text-decoration-style: solid; text-decoration-thickness: 0%; transition: opacity 0.3s ease; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .community-banner .community-banner-actions .ask-later-button:hover { opacity: 0.9; color: #ffffff; text-decoration-thickness: 2px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .community-banner .community-banner-actions .already-joined-button { background: rgba(255, 255, 255, 0.1); border: none; border-radius: 6px; color: white; cursor: pointer; font-weight: 400; font-size: 14px; line-height: 100%; letter-spacing: 0; text-align: right; padding: 5px 8px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-header { background: #FFF; filter: drop-shadow(0px 1px 1px rgba(182, 185, 191, 0.3)); margin-top: 0; padding: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; border-radius: 10px; overflow: hidden; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-header .wpfnl-dashboard-header-title { color: #363B4E; font-size: 20px; font-style: normal; font-weight: 600; line-height: 1; margin: 0; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-header .wpfnl-dashboard-buttons-wrapper { display: flex; justify-content: center; align-items: center; gap: 12px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-header .wpfnl-dashboard-buttons-wrapper .wpfnl-dashboard-header-button { border-radius: 10px; border: 1px solid #E4E6EB; background: #FFF; display: flex; align-items: center; gap: 8px; justify-content: center; text-decoration: none; color: #2D3149; font-size: 14px; font-style: normal; font-weight: 500; line-height: 13px; height: 40px; padding: 0 16px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-header .wpfnl-dashboard-buttons-wrapper .wpfnl-dashboard-header-button:nth-child(2) svg { width: 20px; height: 20px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-header .wpfnl-dashboard-buttons-wrapper .wpfnl-dashboard-header-button svg { width: 16px; height: 16px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper { margin-top: 26px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-tabs { background: #FFF; width: auto; padding: 0; display: flex; align-items: center; border-radius: 6px; border: none; box-shadow: none; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-tabs .wpfnl-dashboard-tab { flex: 1; color: #2D3149; font-size: 13px; font-weight: 500; line-height: 1; border: none; background: none; padding: 9px 15px; cursor: pointer; border: 1px solid #DCD9E8; box-shadow: none; transition: all 0.3s ease; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-tabs .wpfnl-dashboard-tab:first-child { border-radius: 6px 0 0 6px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-tabs .wpfnl-dashboard-tab:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-tabs .wpfnl-dashboard-tab.active { color: #6E42D3; border-color: #6E42D3; box-shadow: none; z-index: 1; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header { display: flex; align-items: center; gap: 12px; margin-left: auto; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper { position: relative; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-trigger { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #FFF; border: 1px solid #DCD9E8; border-radius: 8px; outline: none; padding: 11px 14px; cursor: pointer; color: #2D3149; font-size: 14px; font-weight: 500; line-height: 1; transition: border-color 0.2s ease; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-trigger svg { color: #7A7C8E; flex-shrink: 0; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-trigger:hover, body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-trigger.is-open { border-color: #6E42D3; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 99; width: 680px; background: #FFF; border: 1px solid #EBEDF0; border-radius: 12px; box-shadow: 0px 18px 22px 0px rgba(73, 59, 104, 0.1); display: grid; grid-template-columns: 168px 1fr; grid-template-rows: 1fr auto; grid-template-areas: "presets calendars" "presets footer"; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-presets { grid-area: presets; border-right: 1px solid #EBEDF0; margin: 0; padding: 16px 12px; list-style: none; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-presets .wpfnl-date-range-preset { margin: 0 0 4px; padding: 9px 12px; border-radius: 8px; color: #2D3149; font-size: 14px; font-weight: 400; line-height: normal; cursor: pointer; transition: background 0.2s ease; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-presets .wpfnl-date-range-preset:hover { background: #F6F5FA; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-presets .wpfnl-date-range-preset.active { background: #F1ECFB; color: #6E42D3; font-weight: 500; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars { grid-area: calendars; display: flex; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-calendar { flex: 1; padding: 16px; min-width: 0; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-calendar + .wpfnl-date-range-calendar { border-left: 1px solid #EBEDF0; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-calendar-title { color: #2D3149; font-size: 14px; font-weight: 600; line-height: 1; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-nav { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: none; border-radius: 6px; color: #2D3149; cursor: pointer; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-nav:hover:not(:disabled) { background: #F6F5FA; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-nav:disabled { opacity: 0.3; cursor: default; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-weekdays span { text-align: center; color: #2D3149; font-size: 13px; font-weight: 500; line-height: 28px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-days { display: grid; grid-template-columns: repeat(7, 1fr); align-content: start; row-gap: 2px; min-height: 204px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-day { height: 32px; padding: 0; border: none; background: none; color: #2D3149; font-size: 13px; font-weight: 400; line-height: 1; cursor: pointer; border-radius: 8px; transition: background 0.15s ease; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-day:hover:not(:disabled):not(.is-start):not(.is-end) { background: #F6F5FA; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-day.is-outside { color: #C7C9D4; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-day.is-disabled { color: #D8D9E1; cursor: default; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-day.is-in-range { background: #F1ECFB; border-radius: 0; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-day.is-start, body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-calendars .wpfnl-date-range-day.is-end { background: #6E42D3; color: #FFF; font-weight: 500; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-footer { grid-area: footer; border-top: 1px solid #EBEDF0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 16px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-footer button { border-radius: 8px; padding: 10px 22px; font-size: 13px; font-weight: 600; line-height: 1.25; cursor: pointer; outline: none; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-footer .wpfnl-date-range-cancel { border: 1px solid #DCD9E8; background: #FFF; color: #2D3149; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-footer .wpfnl-date-range-cancel:hover { background: #F6F5FA; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-footer .wpfnl-date-range-apply { border: none; background: #6E42D3; box-shadow: 0px 9px 10px 0px rgba(193, 183, 232, 0.5); color: #FFF; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-dashboard-filter-wrapper .wpfnl-date-range-footer .wpfnl-date-range-apply[disabled] { opacity: 0.5; cursor: default; box-shadow: none; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-create-funnel-btn { border-radius: 6px; background: #6E42D3; box-shadow: 0px 2px 4px 0px rgba(223, 223, 249, 0.25); padding: 11px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #FFF; font-size: 15px; font-style: normal; font-weight: 500; line-height: normal; text-decoration: none; cursor: pointer; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-sync-cache-btn { display: flex; align-items: center; gap: 8px; padding: 13px 14px; border-radius: 6px; border: none; outline: none; background: #FFF; color: #2D3149; font-size: 14px; font-style: normal; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; transition: color 0.15s, opacity 0.15s; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-sync-cache-btn .wpfnl-sync-icon { flex-shrink: 0; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-sync-cache-btn:hover:not(:disabled) { color: #6E42D3; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-sync-cache-btn.is-syncing { opacity: 0.65; cursor: not-allowed; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wpfnl-dashboard-contents-header .wpfnl-dashboard-right-header .wpfnl-sync-cache-btn.is-syncing .wpfnl-sync-icon { animation: wpfnl-spin 0.75s linear infinite; } @keyframes wpfnl-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wfpnl-dashboard-contents-body { margin-top: 24px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wfpnl-dashboard-contents-body .wpfnl-dashboard-cards-container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wfpnl-dashboard-contents-body .wpfnl-dashboard-cards-container .wpfnl-single-card { padding: 20px; position: relative; border-radius: 6px; border: 1px solid rgba(230, 227, 241, 0.9); background: #FFF; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wfpnl-dashboard-contents-body .wpfnl-dashboard-cards-container .wpfnl-single-card .wpfnl-loader { display: flex; align-items: center; justify-content: center; margin: 40px auto; padding: 20px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wfpnl-dashboard-contents-body .wpfnl-dashboard-cards-container .wpfnl-single-card .wpfnl-card-body { margin-top: 18px; display: flex; align-items: center; gap: 8px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wfpnl-dashboard-contents-body .wpfnl-dashboard-cards-container .wpfnl-single-card .wpfnl-card-label { margin: 0; color: #7A8B9A; font-size: 14px; font-weight: 400; line-height: 1.3; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wfpnl-dashboard-contents-body .wpfnl-dashboard-cards-container .wpfnl-single-card .wpfnl-percentage { padding: 4px 7px; display: flex; align-items: center; gap: 1px; justify-content: center; font-size: 12px; font-weight: 500; line-height: 1; margin: 0; min-width: 30px; border-radius: 4px; background: #F6F5FA; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wfpnl-dashboard-contents-body .wpfnl-dashboard-cards-container .wpfnl-single-card .wpfnl-percentage.wpfnl-decrease { background: rgba(236, 89, 86, 0.1); color: #DC2626; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wfpnl-dashboard-contents-body .wpfnl-dashboard-cards-container .wpfnl-single-card .wpfnl-percentage.wpfnl-increase { background: rgba(18, 183, 106, 0.1); color: #16A34A; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wfpnl-dashboard-contents-body .wpfnl-dashboard-cards-container .wpfnl-single-card .wpfnl-card-value { margin: 0; color: #1D2327; font-size: 28px; font-weight: 500; line-height: 1; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wfpnl-dashboard-contents-body .wpfnl-dashboard-revenue-comparison { margin-top: 24px; } .wpfnl-admin-dashboard .shimmer-line { height: 11px; margin-top: 11px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance { display: grid; grid-template-columns: 1fr 340px; gap: 16px; margin-top: 24px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance { background: #FFF; border-radius: 6px; border: 1px solid rgba(230, 227, 241, 0.9); padding: 24px; display: flex; flex-direction: column; gap: 20px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-header { display: flex; align-items: center; justify-content: space-between; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-title { color: #2D3149; font-size: 16px; font-weight: 600; line-height: 1; margin: 0; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-legend { display: flex; align-items: center; gap: 16px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-legend .wpfnl-dbdp-legend-item { display: flex; align-items: center; gap: 6px; color: #7A8B9A; font-size: 13px; font-weight: 400; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-legend .wpfnl-dbdp-legend-item .wpfnl-dbdp-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-summary { display: flex; align-items: stretch; gap: 12px; background: #F6F5FA; border-radius: 6px; padding: 0 15px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-summary .wpfnl-dbdp-summary-card { flex: 1; display: flex; align-items: center; gap: 20px; padding: 14px 16px; border-left: 1px solid #fff; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-summary .wpfnl-dbdp-summary-card:first-child { border-left: 0; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-summary .wpfnl-dbdp-summary-card .wpfnl-dbdp-summary-icon { width: 30px; height: 30px; border-radius: 50px; background: #FFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-summary .wpfnl-dbdp-summary-card .wpfnl-dbdp-summary-info { display: flex; flex-direction: column; gap: 6px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-summary .wpfnl-dbdp-summary-card .wpfnl-dbdp-summary-info .wpfnl-dbdp-summary-label { font-size: 13px; font-weight: 400; line-height: 1.3; color: #7A8B9A; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-summary .wpfnl-dbdp-summary-card .wpfnl-dbdp-summary-info .wpfnl-dbdp-summary-value { color: #1D2327; font-size: 26px; font-weight: 500; line-height: 1; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-chart { height: 220px; position: relative; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-chart canvas { width: 100% !important; height: 100% !important; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution { background: #FFF; border-radius: 6px; border: 1px solid rgba(230, 227, 241, 0.9); padding: 24px; display: flex; flex-direction: column; gap: 20px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-title { color: #2D3149; font-size: 16px; font-weight: 600; line-height: 1; margin: 0; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-donut-wrapper { display: flex; justify-content: center; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-donut-wrapper .wpfnl-fc-donut { position: relative; width: 180px; height: 180px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-donut-wrapper .wpfnl-fc-donut canvas { width: 100% !important; height: 100% !important; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-donut-wrapper .wpfnl-fc-donut .wpfnl-fc-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-donut-wrapper .wpfnl-fc-donut .wpfnl-fc-donut-center .wpfnl-fc-total-value { color: #1D2327; font-size: 22px; font-weight: 600; line-height: 1; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-donut-wrapper .wpfnl-fc-donut .wpfnl-fc-donut-center .wpfnl-fc-total-label { color: #7A8B9A; font-size: 12px; font-weight: 400; line-height: 1; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-breakdown { display: flex; flex-direction: column; gap: 22px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-breakdown .wpfnl-fc-breakdown-item { display: flex; flex-direction: column; gap: 6px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-breakdown .wpfnl-fc-breakdown-item .wpfnl-fc-breakdown-top { display: flex; align-items: center; justify-content: space-between; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-breakdown .wpfnl-fc-breakdown-item .wpfnl-fc-breakdown-top .wpfnl-fc-breakdown-value { color: #1D2327; font-size: 16px; font-weight: 600; line-height: 1; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-breakdown .wpfnl-fc-breakdown-item .wpfnl-fc-breakdown-top .wpfnl-fc-breakdown-pct { color: #2D3149; font-size: 13px; font-weight: 400; line-height: 1; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-breakdown .wpfnl-fc-breakdown-item .wpfnl-fc-breakdown-label { color: #7A8B9A; font-size: 14px; font-weight: 400; line-height: 1; margin-top: 3px; margin-bottom: 3px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-breakdown .wpfnl-fc-breakdown-item .wpfnl-fc-breakdown-bar-track { width: 100%; height: 4px; background: #EEF0F3; border-radius: 100px; overflow: hidden; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-funnel-contribution .wpfnl-fc-breakdown .wpfnl-fc-breakdown-item .wpfnl-fc-breakdown-bar-track .wpfnl-fc-breakdown-bar-fill { height: 100%; border-radius: 100px; transition: width 0.4s ease; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels { background: #FFF; margin-top: 24px; padding: 24px; border-radius: 6px; border: 1px solid rgba(230, 227, 241, 0.9); } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-section-title { color: #2D3149; font-size: 16px; font-weight: 600; line-height: 1.2; margin: 0; margin-bottom: 24px; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-section-header .wpfnl-dashboard-section-title { margin-bottom: 0; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-view-all-link { display: inline-flex; align-items: center; gap: 6px; color: #6E42D3; font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; padding: 6px 8px; margin-right: -8px; border-radius: 6px; flex-shrink: 0; transition: background 0.2s ease; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-view-all-link:hover, .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-view-all-link:focus { background: #F1ECFB; color: #6E42D3; box-shadow: none; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-view-all-link svg { flex-shrink: 0; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-col .table-text { position: relative; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-col .table-text .pro-tag-icon { top: -3px; right: -28px; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper p { margin: 0; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-header, .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-row { display: grid; grid-template-columns: 2fr repeat(6, 1fr); gap: 20px; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-header { padding-bottom: 16px; border-bottom: 1px solid #EEF0F3; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-header p { color: #7A8B9A; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.2; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-row { padding: 17px 0; border-bottom: 1px solid #EEF0F3; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-row:last-child { border-bottom: none; padding-bottom: 0; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-row p { color: #2D3149; font-size: 14px; font-weight: 400; line-height: 1.2; word-wrap: break-word; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-row p a { color: #2D3149; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-row .aov-tag { padding: 6px 7px; border-radius: 4px; background: #F6F5FA; color: #16A34A; text-align: center; font-size: 12px; font-weight: 500; line-height: 1; display: inline-block; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-row .aov-tag.is-positive { color: #16A34A; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-row .aov-tag.is-negative { color: #F04438; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-table-row .aov-tag.is-neutral { color: #7A7C8E; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-empty-table-body { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 35px; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-empty-table-body .wpfnl-loader { display: block; padding: 40px; margin: 60px auto; } .wpfnl-admin-dashboard .wpfnl-top-performing-funnels .wpfnl-dashboard-table-wrapper .wpfnl-empty-table-body p { color: #2D3149; font-size: 15px; font-style: normal; font-weight: 500; line-height: 0.93; margin-top: 17px; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card { padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 10px; border-radius: 6px; border: 1px solid rgba(230, 227, 241, 0.9); background: #FFF; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-header .wpfnl-csc-label { color: #7A8B9A; font-size: 14px; font-weight: 400; line-height: 1; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-header .wpfnl-csc-info-icon { display: flex; align-items: center; cursor: pointer; opacity: 0.7; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-header .wpfnl-csc-info-icon:hover { opacity: 1; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-body { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-body .wpfnl-csc-main-value { color: #1D2327; font-size: 28px; font-weight: 500; line-height: 1; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-body .wpfnl-csc-baseline { color: #1F2937; font-size: 15px; font-weight: 400; line-height: 1; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-body .wpfnl-csc-baseline strong { font-size: 18px; font-weight: 400; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-footer { margin-top: 10px; padding-top: 14px; display: flex; flex-direction: column; gap: 11px; position: relative; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-footer::before { content: ""; position: absolute; left: -24px; top: 0; background-color: #E6E3F1; height: 1px; width: calc(100% + 48px); } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-footer .wpfnl-csc-footer-top { display: flex; align-items: center; justify-content: space-between; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-footer .wpfnl-csc-footer-top .wpfnl-csc-footer-label { color: #7A8B9A; font-size: 14px; font-weight: 400; line-height: 1; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-footer .wpfnl-csc-footer-top .wpfnl-csc-lift-value { font-size: 13px; font-weight: 600; line-height: 1; border-radius: 4px; background: #F6F5FA; padding: 6px 6px; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-footer .wpfnl-csc-footer-top .wpfnl-csc-lift-value.is-increase { color: #16A34A; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-footer .wpfnl-csc-footer-top .wpfnl-csc-lift-value.is-decrease { color: #DC2626; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-footer .wpfnl-csc-progress-bar { width: 100%; height: 4px; background: #EEF0F3; border-radius: 100px; overflow: hidden; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-footer .wpfnl-csc-progress-bar .wpfnl-csc-progress-fill { height: 100%; border-radius: 100px; background: #6E42D3; transition: width 0.4s ease; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-footer .wpfnl-csc-progress-bar .wpfnl-csc-progress-fill.is-decrease { background: #DC2626; } .wpfnl-admin-dashboard .wpfnl-funnel-health-metrics { background: #FFF; border-radius: 6px; border: 1px solid rgba(230, 227, 241, 0.9); padding: 24px; margin-top: 24px; } .wpfnl-admin-dashboard .wpfnl-funnel-health-metrics .wpfnl-fhm-title { color: #2D3149; font-size: 16px; font-weight: 600; line-height: 1; margin: 0 0 17px; } .wpfnl-admin-dashboard .wpfnl-funnel-health-metrics .wpfnl-fhm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 48px; border-radius: 4px; border: 1px solid #EEF0F3; padding: 24px; } .wpfnl-admin-dashboard .wpfnl-funnel-health-metrics .wpfnl-health-metric-bar { display: flex; flex-direction: column; gap: 8px; } .wpfnl-admin-dashboard .wpfnl-funnel-health-metrics .wpfnl-health-metric-bar .wpfnl-hmb-top { display: flex; align-items: center; justify-content: space-between; } .wpfnl-admin-dashboard .wpfnl-funnel-health-metrics .wpfnl-health-metric-bar .wpfnl-hmb-top .wpfnl-hmb-label { color: #7A8B9A; font-size: 14px; font-weight: 400; line-height: 1; } .wpfnl-admin-dashboard .wpfnl-funnel-health-metrics .wpfnl-health-metric-bar .wpfnl-hmb-top .wpfnl-hmb-value { color: #1D2327; font-size: 14px; font-weight: 600; line-height: 1; } .wpfnl-admin-dashboard .wpfnl-funnel-health-metrics .wpfnl-health-metric-bar .wpfnl-hmb-track { width: 100%; height: 5px; background: #EEF0F3; border-radius: 100px; overflow: hidden; } .wpfnl-admin-dashboard .wpfnl-funnel-health-metrics .wpfnl-health-metric-bar .wpfnl-hmb-track .wpfnl-hmb-fill { height: 100%; border-radius: 100px; transition: width 0.4s ease; } .wpfnl-admin-dashboard .wpfnl-leads-analytics .wpfnl-leads-analytics-wrapper .wpfnl-dashboard-cards-container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 24px; } .wpfnl-admin-dashboard .wpfnl-leads-analytics .wpfnl-leads-analytics-wrapper .wpfnl-lead-growth-chart { background: #FFF; border-radius: 6px; border: 1px solid rgba(230, 227, 241, 0.9); padding: 24px; margin-top: 24px; display: flex; flex-direction: column; gap: 20px; } .wpfnl-admin-dashboard .wpfnl-leads-analytics .wpfnl-leads-analytics-wrapper .wpfnl-lead-growth-chart .wpfnl-lgc-header .wpfnl-lgc-title { color: #2D3149; font-size: 16px; font-weight: 600; line-height: 1; margin: 0; } .wpfnl-admin-dashboard .wpfnl-leads-analytics .wpfnl-leads-analytics-wrapper .wpfnl-lead-growth-chart .wpfnl-lgc-chart { height: 260px; position: relative; } .wpfnl-admin-dashboard .wpfnl-leads-analytics .wpfnl-leads-analytics-wrapper .wpfnl-lead-growth-chart .wpfnl-lgc-chart canvas { width: 100% !important; height: 100% !important; } .wpfnl-admin-dashboard .wpfnl-leads-analytics .wpfnl-leads-analytics-wrapper .wpfnl-leads-top-funnels .wpfnl-leads-table-row { grid-template-columns: 2fr repeat(5, 1fr); } @media only screen and (max-width: 1699px) { body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body { width: calc(100% - 90px); } } @media only screen and (max-width: 1399px) { body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-header { padding: 20px; gap: 20px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard { gap: 50px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body { width: 100%; padding-right: 20px; padding-left: 20px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wfpnl-dashboard-contents-body .wpfnl-dashboard-cards-container { grid-template-columns: repeat(3, 1fr); gap: 16px; } body.toplevel_page_wpfunnels .wpfnl-admin-views-wrapper .wpfnl-admin-dashboard .wpfnl-dashboard-body .wpfnl-dashboard-contents-wrapper .wfpnl-dashboard-contents-body .wpfnl-dashboard-cards-container .wpfnl-single-card .wpfnl-card-value { font-size: 22px; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-body .wpfnl-csc-main-value { font-size: 22px; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-body .wpfnl-csc-baseline { font-size: 14px; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-body .wpfnl-csc-baseline strong { font-size: 15px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-summary { padding: 0; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-summary .wpfnl-dbdp-summary-card { gap: 12px; padding: 11px 12px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-summary .wpfnl-dbdp-summary-card .wpfnl-dbdp-summary-info .wpfnl-dbdp-summary-value { font-size: 22px; } } @media only screen and (max-width: 1199px) { .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card { padding: 20px 20px 20px; } .wpfnl-admin-dashboard .wpfnl-dashboard-compare-store .wpfnl-compare-store-card .wpfnl-csc-footer::before { left: -20px; width: calc(100% + 40px); } .wpfnl-admin-dashboard .wpfnl-dashboard-performance { grid-template-columns: 1fr 280px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance { padding: 20px; } .wpfnl-admin-dashboard .wpfnl-dashboard-performance .wpfnl-day-by-day-performance .wpfnl-dbdp-summary .wpfnl-dbdp-summary-card .wpfnl-dbdp-summary-info .wpfnl-dbdp-summary-value { font-size: 18px; } } .wpfnl-pro-section-wrapper.is-locked .wpfnl-pro-content { opacity: 0.38; pointer-events: none; user-select: none; } .wpfnl-pro-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; margin-bottom: 14px; background: #F3EFFF; border: 1px solid #DDD5F9; border-radius: 8px; text-decoration: none; cursor: pointer; transition: background 0.18s; } .wpfnl-pro-banner:hover { background: #EBE4FF; } .wpfnl-pro-banner .wpfnl-pro-banner-left { display: flex; align-items: center; gap: 8px; color: #5a35b8; font-size: 13px; font-weight: 500; line-height: 1; } .wpfnl-pro-banner .wpfnl-pro-banner-left svg { flex-shrink: 0; stroke: #6E42D3; } .wpfnl-pro-banner .wpfnl-pro-banner-btn { flex-shrink: 0; display: inline-block; padding: 6px 16px; background: #6E42D3; color: #fff; font-size: 12px; font-weight: 600; border-radius: 5px; white-space: nowrap; transition: background 0.18s; } .wpfnl-pro-banner:hover .wpfnl-pro-banner-btn { background: #5a35b8; } .wpfnl-compare-store-card { position: relative; } .wpfnl-compare-store-card .wpfnl-csc-header-right { display: flex; align-items: center; gap: 6px; } .wpfnl-compare-store-card .wpfnl-csc-pro-badge { display: flex; align-items: center; } .wpfnl-compare-store-card .wpfnl-csc-pro-badge svg { width: 17px; height: 17px; } .wpfnl-compare-store-card .wpfnl-csc-body.is-blurred, .wpfnl-compare-store-card .wpfnl-csc-footer.is-blurred { filter: blur(5px); pointer-events: none; user-select: none; } .wpfnl-compare-store-card .wpfnl-csc-pro-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.55); border-radius: 6px; text-decoration: none; z-index: 5; } .wpfnl-compare-store-card .wpfnl-csc-pro-overlay .wpfnl-csc-pro-overlay-text { padding: 8px 18px; background: #6E42D3; color: #fff; font-size: 13px; font-weight: 500; border-radius: 6px; white-space: nowrap; } .wpfnl-compare-store-card .wpfnl-csc-pro-overlay:hover .wpfnl-csc-pro-overlay-text { background: #5a35b8; } .wpfnl-pro-banner--compact { padding: 7px 10px; margin-bottom: 10px; border-radius: 6px; } .wpfnl-pro-banner--compact .wpfnl-pro-banner-left { font-size: 12px; gap: 5px; } .wpfnl-pro-banner--compact .wpfnl-pro-banner-btn { padding: 4px 10px; font-size: 11px; } .wpfnl-single-card.is-pro-locked { position: relative; } .wpfnl-single-card.is-pro-locked .wpfnl-card-header, .wpfnl-single-card.is-pro-locked .wpfnl-card-body { opacity: 0.38; pointer-events: none; user-select: none; } .wpfnl-card-pro-badge { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; z-index: 2; } .wpfnl-card-pro-badge svg { width: 22px; height: 22px; } .wpfnl-compare-store-card.is-pro-locked .wpfnl-csc-body, .wpfnl-compare-store-card.is-pro-locked .wpfnl-csc-footer { opacity: 0.38; pointer-events: none; user-select: none; } .wpfnl-csc-header-right { display: flex; align-items: center; gap: 6px; } .wpfnl-csc-pro-badge { display: flex; align-items: center; text-decoration: none; } .wpfnl-csc-pro-badge svg { width: 20px; height: 20px; } .step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter, .template-library-modal .funnel-templates-header .pro-free__filter { border-radius: 50px; box-shadow: none; border: 1px solid #E5E8F3; margin-left: 15px !important; background: #ffffff; display: inline-flex; align-items: center; } .step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter li, .template-library-modal .funnel-templates-header .pro-free__filter li { color: #363B4E; font-size: 14px; padding: 9px 18px; font-weight: 400; text-transform: capitalize; cursor: pointer; position: relative; border-right: 1px solid #E5E8F3; z-index: 1; display: flex; flex-flow: row; align-items: center; } .step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter li:first-child, .template-library-modal .funnel-templates-header .pro-free__filter li:first-child { border-radius: 50px 0 0 50px; } .step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter li:last-child, .template-library-modal .funnel-templates-header .pro-free__filter li:last-child { border-radius: 0 50px 50px 0; } .step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter li svg, .template-library-modal .funnel-templates-header .pro-free__filter li svg { position: relative; top: -1px; margin-right: 8px; } .step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter li.active, .template-library-modal .funnel-templates-header .pro-free__filter li.active { background-color: #6E42D3; color: #ffffff; } .step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter li.active svg path, .template-library-modal .funnel-templates-header .pro-free__filter li.active svg path { stroke: #fff; } .wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal, .step-template-showcase-modal .create-step-name-modal, .template-library-modal .create-funnel-name-modal { position: absolute; top: 200px; left: calc(50% - 123px); background: #ffffff; width: 410px; z-index: 999; transform: translate(-50%, -50%); padding: 28px 30px 30px; border-radius: 10px; box-shadow: 0 1px 2px 0 rgba(190, 190, 215, 0.2); transition: all 0.3s ease; opacity: 0; visibility: hidden; } .wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .show.create-step-name-modal, .step-template-showcase-modal .show.create-step-name-modal, .template-library-modal .show.create-funnel-name-modal { opacity: 1; visibility: visible; top: 250px; } .wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-header, .step-template-showcase-modal .create-step-name-modal .modal-header, .template-library-modal .create-funnel-name-modal .modal-header { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; margin-bottom: 10px; } .wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-header .title, .step-template-showcase-modal .create-step-name-modal .modal-header .title, .template-library-modal .create-funnel-name-modal .modal-header .title { font-size: 16px; line-height: normal; font-weight: 500; } .wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-header .close, .step-template-showcase-modal .create-step-name-modal .modal-header .close, .template-library-modal .create-funnel-name-modal .modal-header .close { position: absolute; border: none; right: -11px; top: -13px; display: flex; width: 40px; height: 40px; padding: 8px; justify-content: center; flex-flow: column; align-items: center; border-radius: 100px; background: #FFF; box-shadow: 0px 1px 1px 0px #DADADA; cursor: pointer; } .wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-header .close svg, .step-template-showcase-modal .create-step-name-modal .modal-header .close svg, .template-library-modal .create-funnel-name-modal .modal-header .close svg { display: block; width: 18px; height: 18px; } .wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body input[type=text], .step-template-showcase-modal .create-step-name-modal .modal-body input[type=text], .template-library-modal .create-funnel-name-modal .modal-body input[type=text] { font-size: 14px; color: #363B4E; border-radius: 6px; border-color: #E2E2E2; height: 40px; margin-bottom: 15px; } .wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body input[type=text]:-webkit-autofill, .step-template-showcase-modal .create-step-name-modal .modal-body input[type=text]:-webkit-autofill, .template-library-modal .create-funnel-name-modal .modal-body input[type=text]:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #ffffff inset; box-shadow: 0 0 0 30px #ffffff inset; -webkit-text-fill-color: #363B4E !important; } .wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body input[type=text]::-webkit-input-placeholder, .step-template-showcase-modal .create-step-name-modal .modal-body input[type=text]::-webkit-input-placeholder, .template-library-modal .create-funnel-name-modal .modal-body input[type=text]::-webkit-input-placeholder { color: #7A8B9A; } .wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body input[type=text]::-moz-placeholder, .step-template-showcase-modal .create-step-name-modal .modal-body input[type=text]::-moz-placeholder, .template-library-modal .create-funnel-name-modal .modal-body input[type=text]::-moz-placeholder { color: #7A8B9A; } .wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body input[type=text]:-ms-input-placeholder, .step-template-showcase-modal .create-step-name-modal .modal-body input[type=text]:-ms-input-placeholder, .template-library-modal .create-funnel-name-modal .modal-body input[type=text]:-ms-input-placeholder { color: #7A8B9A; } .wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body input[type=text]:-moz-placeholder, .step-template-showcase-modal .create-step-name-modal .modal-body input[type=text]:-moz-placeholder, .template-library-modal .create-funnel-name-modal .modal-body input[type=text]:-moz-placeholder { color: #7A8B9A; } .wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body button[type=submit], .step-template-showcase-modal .create-step-name-modal .modal-body button[type=submit], .template-library-modal .create-funnel-name-modal .modal-body button[type=submit] { border-radius: 10px; background: #6E42D3; box-shadow: 0px 9px 14px 0px rgba(193, 183, 232, 0.5); width: 100%; height: 40px; line-height: 1; padding: 14px 30px; } .step-template-showcase-modal .wpfnl-step__single-template .template-action, .template-library-modal .wpfnl-step__single-template .template-action, .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-action { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 13px 15px; background: rgba(38, 33, 51, 0.6); z-index: 1; border-radius: 10px 10px 0 0; display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 14px; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); transition: all 0.3s ease; opacity: 0; visibility: hidden; } .step-template-showcase-modal .wpfnl-step__single-template .template-action .btn-default, .template-library-modal .wpfnl-step__single-template .template-action .btn-default, .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-action .btn-default { margin: 0; padding: 11px 19px 9px; height: auto; width: 100px; min-width: auto; font-size: 15px; line-height: 1; font-weight: 500; border-radius: 8px; border: 1px solid #F2F2F2; background-color: transparent; color: #fff; } .step-template-showcase-modal .wpfnl-step__single-template .template-action .btn-default:hover, .template-library-modal .wpfnl-step__single-template .template-action .btn-default:hover, .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-action .btn-default:hover { background-color: #fff; border-color: #fff; color: #363B4E; } .template-library-modal { position: fixed; top: 32px; left: 160px; width: calc(100% - 160px); height: 100%; background: #F6F5FA; z-index: 99; } .template-library-modal .templates-title-wrapper { margin-bottom: 22px; display: flex; flex-flow: row; align-items: center; width: 100%; } .template-library-modal .templates-title-wrapper .title { line-height: 18px; text-transform: capitalize; font-size: 18px; color: #0e2244; font-weight: 500; } .template-library-modal .wpfnl-create-funnel__inner-content { height: 100%; } .template-library-modal .wpfnl-create-funnel__templates-wrapper { width: 100%; max-height: 890px; height: 100%; overflow: auto; } .template-library-modal .wpfnl-create-funnel__templates-wrapper::-webkit-scrollbar { width: 5px; } .template-library-modal .wpfnl-create-funnel__templates-wrapper::-webkit-scrollbar-track { background: #f2f5f8; } .template-library-modal .wpfnl-create-funnel__templates-wrapper::-webkit-scrollbar-thumb { background-color: #BCC0C3; border-radius: 20px; } .template-library-modal .funnel-templates-header { background: #FFFFFF; box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.4); padding: 15px 24px; position: relative; } .template-library-modal .funnel-templates-header .template-library-filter-wrapper { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; width: 100%; } .template-library-modal .funnel-templates-header .template-library-filter-wrapper.is-store-checkout .pro-free__filter { margin-left: auto !important; } .template-library-modal .funnel-templates-header .back-form-modal { height: 38px; width: 38px; border: 1px solid #EEF0F3; margin-right: 15px; border-radius: 10px; background: #FFFFFF; display: flex; flex-flow: column; align-items: center; justify-content: center; cursor: pointer; } .template-library-modal .funnel-templates-header .back-form-modal svg { position: relative; left: -1px; } .template-library-modal .funnel-templates-header .header-title { font-weight: 500; font-size: 16px; line-height: 1.3; color: #363B4E; } .template-library-modal .funnel-templates-header .sync-library-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid #EEF0F3; border-radius: 50px; background: #FFFFFF; color: #363B4E !important; font-size: 14px; font-weight: 400; cursor: pointer; margin-left: 12px; transition: border-color 0.2s, color 0.2s; } .template-library-modal .funnel-templates-header .sync-library-btn span { color: inherit; } .template-library-modal .funnel-templates-header .sync-library-btn svg { flex-shrink: 0; } .template-library-modal .funnel-templates-header .sync-library-btn:hover:not(:disabled) { border-color: #b3b8c7; color: #1a1f2e; } .template-library-modal .funnel-templates-header .sync-library-btn:disabled { opacity: 0.65; cursor: not-allowed; } .template-library-modal .funnel-templates-header .sync-library-btn .spinning { animation: sync-spin 1s linear infinite; } @keyframes sync-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .template-library-modal .funnel-templates-header .wpfnl-template-header-title-wrapper { display: flex; align-items: center; } .template-library-modal .funnel-templates-header .template-type-filter { display: block; width: auto; margin-left: auto; border: 1px solid #EEF0F3; height: 38px; border-radius: 50px; color: #363B4E; letter-spacing: -0.01em; -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari and Chrome */ appearance: none; background: transparent; background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBzdHJva2U9IiM3QThCOUEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMTAuODEzIDFsLTQuNSA0LjUtNC41LTQuNSIvPjwvc3ZnPg=="); background-repeat: no-repeat; background-position-x: calc(100% - 15px); background-position-y: 13px; background-size: 12px 12px; padding-top: 0px; } .template-library-modal .funnel-templates-header .funnel-global-import { min-width: 152px; display: flex; justify-content: flex-end; align-items: center; } .template-library-modal .funnel-templates-header .funnel-global-import .btn-default { height: 40px; line-height: 41px; position: relative; padding: 0 20px; min-width: auto; box-shadow: 0px 10px 16px rgba(97, 103, 116, 0.15); border-radius: 8px; } .template-library-modal .funnel-templates-header .funnel-global-import .btn-default .btn-text { position: relative; z-index: 1; color: #fff; font-weight: 500; } .template-library-modal .funnel-templates-header .funnel-global-import .btn-default .pro-tag { position: absolute; top: -21px; right: 10px; } .template-library-modal .funnel-templates-header .funnel-global-import .global-import-progress { position: absolute; left: 0; bottom: 0; width: 0; height: 100%; background: #8b5ef3; border-radius: 10px; z-index: 0; transition: all 0.4s linear; } .template-library-modal .funnel-templates-header .responsive-switcher { border: 1px solid #E4E6EB; border-radius: 8px; margin-left: -10%; } .template-library-modal .funnel-templates-header .responsive-switcher button { background: transparent; border: none; padding: 10px 10px; border-right: 1px solid #E4E6EB; cursor: pointer; } .template-library-modal .funnel-templates-header .responsive-switcher button:last-child { border-right: none; } .template-library-modal .funnel-templates-header .responsive-switcher button.active svg path, .template-library-modal .funnel-templates-header .responsive-switcher button.active svg rect { stroke: #6E42D3; } .template-library-modal .funnel-templates-header .responsive-switcher button.active svg circle { fill: #6E42D3; } .template-library-modal .funnel-templates-header .responsive-switcher button.active.tablet-view svg path, .template-library-modal .funnel-templates-header .responsive-switcher button.active.mobile-view svg path { fill: #6E42D3; } .template-library-modal .funnel-templates-body { display: flex; flex-flow: row wrap; height: calc(100% - 78px); } .template-library-modal .funnel-templates-sidebar { background: #FFFFFF; box-shadow: 1px 0px 2px rgba(190, 190, 215, 0.14); width: 247px; padding: 19px 20px; } .template-library-modal .funnel-templates-sidebar .sidebar-tab-nav { display: flex; margin-bottom: 24px; } .template-library-modal .funnel-templates-sidebar .sidebar-tab-nav > span { font-size: 14px; line-height: 1.3; font-weight: 600; color: #292C2F; flex: 1; text-align: center; display: block; border-bottom: 1px solid #E4E6EB; padding-bottom: 15px; cursor: pointer; position: relative; } .template-library-modal .funnel-templates-sidebar .sidebar-tab-nav > span:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #6E42D3; display: none; } .template-library-modal .funnel-templates-sidebar .sidebar-tab-nav > span.active { color: #6E42D3; } .template-library-modal .funnel-templates-sidebar .sidebar-tab-nav > span.active:before { display: block; } .template-library-modal .funnel-templates-sidebar .category-filter-wrapper { height: 720px; padding-right: 8px; overflow: auto; } .template-library-modal .funnel-templates-sidebar .category-filter-wrapper::-webkit-scrollbar { width: 5px; } .template-library-modal .funnel-templates-sidebar .category-filter-wrapper::-webkit-scrollbar-track { background: #f2f5f8; } .template-library-modal .funnel-templates-sidebar .category-filter-wrapper::-webkit-scrollbar-thumb { background-color: #BCC0C3; border-radius: 20px; } .template-library-modal .funnel-templates-sidebar .category-filter-wrapper ul li { font-weight: 500; font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; color: #363B4E; background: #FFFFFF; border: 1px solid #EEF0F3; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: all 0.3s ease; } .template-library-modal .funnel-templates-sidebar .category-filter-wrapper ul li.active, .template-library-modal .funnel-templates-sidebar .category-filter-wrapper ul li:hover { color: #6E42D3; border-color: #6E42D3; box-shadow: 0px 20px 16px rgba(189, 193, 200, 0.2); } .template-library-modal .funnel-templates-sidebar .category-filter-wrapper ul li svg { position: relative; top: -1px; display: block; min-width: 20px; } .template-library-modal .funnel-templates-sidebar .wpfnl-create-step__filter-nav { width: 100%; min-height: auto; background: transparent; box-shadow: none; padding: 0; align-self: stretch; } .template-library-modal .funnel-templates-content { width: calc(100% - 247px); height: 100%; overflow-y: auto; position: relative; padding: 40px; box-sizing: border-box; } .template-library-modal .funnel-templates-content .not-clickable-overlay { z-index: 9; } .template-library-modal .funnel-templates-content .template-cat-filter-loader { position: absolute; inset: 0; z-index: 100; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; border-radius: 4px; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; pointer-events: none; } .template-library-modal .funnel-templates-content .template-cat-filter-loader .wpfnl-loader { display: block; width: 50px; height: 50px; margin: 0; position: sticky; top: 50%; border-width: 3px; border-top-width: 3px; flex-shrink: 0; } .template-library-modal .funnel-templates-content .template-cat-filter-loader.show-loader { opacity: 1; visibility: visible; pointer-events: all; } .template-library-modal .no-sidebar .funnel-templates-content { width: 100%; } .template-library-modal .wpfnl-create-funnel__templates { position: relative; min-height: 370px; display: flex; flex-flow: row wrap; gap: 40px; } .template-library-modal .wpfnl-create-funnel__templates .wpfnl-create-funnel__loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f6f6f8; display: flex; flex-flow: column; align-items: center; justify-content: flex-start; z-index: 9; } .template-library-modal .wpfnl-create-funnel__templates .wpfnl-create-funnel__loader .wpfnl-loader { display: block; width: 40px; height: 40px; margin-top: 12%; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template { width: calc(25% - 30px); position: relative; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .freemium-tag { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 3px 8px 4px; background-color: #2FCF5C; font-size: 10px; border-radius: 5px; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch { background-color: transparent; border: 2px dashed #A1A1B6; border-radius: 10px; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .funnel-limit-notice, .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .btn-default { height: 48px; line-height: 49px; width: 100%; max-width: 194px; padding: 0 8px; border-radius: 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0px 9px 14px 0px rgba(193, 183, 232, 0.5); } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .funnel-limit-notice svg, .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .btn-default svg { margin-right: 2px; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .funnel-limit-notice path, .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .btn-default path { stroke: #fff; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .pro-tag { position: absolute; top: -23px; right: 11px; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .wpfnl-single-remote-wrapper { opacity: 0; visibility: hidden; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .funnel-limit-notice { max-width: 100%; text-align: center; padding: 15px; height: auto; line-height: normal; border-radius: 0; box-shadow: none; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .funnel-limit-notice p { color: #d24d4d; line-height: 1.6; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.show-step-preview { width: 100%; margin: 0; background: transparent; border-radius: 0; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .wpfnl-single-remote-wrapper { position: relative; background: #ffffff; border-radius: 10px; height: 100%; transition: all 0.3s ease; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .wpfnl-single-remote-template { position: relative; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-image-wrapper { background-repeat: no-repeat; background-size: 100% auto; background-position: top center; border-radius: 10px 10px 0 0; position: relative; overflow: hidden; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-image-wrapper:before { content: ""; display: block; padding-top: 100%; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-img { width: 100%; border-radius: 10px 10px 0 0; height: 350px; object-fit: contain; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .importar-loader { background: rgba(38, 33, 51, 0.6); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .funnel-template-info { text-align: center; padding: 14px; background: #ffffff; border-radius: 0 0 10px 10px; position: relative; border-top: 1px solid #E5E8F3; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .funnel-template-info .title { color: #363B4E; padding: 0; min-height: auto; display: block; font-weight: 500; transition: all 0.3s ease; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .funnel-template-info .steps { color: #7A8B9A; letter-spacing: -0.01em; font-size: 12px; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template:hover .wpfnl-single-remote-wrapper { box-shadow: 0px 20px 20px rgba(190, 190, 215, 0.2); } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template:hover .template-action { opacity: 1; visibility: visible; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper { gap: 40px; position: relative; width: 100%; display: flex; flex-flow: row wrap; align-items: flex-start; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-step__single-template { width: calc(20% - 32px); } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper { margin: auto; width: 100%; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper { display: flex; align-items: center; width: 100%; justify-content: center; gap: 10px; margin-bottom: 40px; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper .wpfnl-template-step { width: 80px; text-align: center; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper .wpfnl-template-step span { border-radius: 6px; background: #FFF; box-shadow: 0px 53px 32px 0px rgba(0, 0, 0, 0.02), 0px 6px 13px 0px rgba(0, 0, 0, 0.04), 0px 1px 3px 0px rgba(143, 143, 143, 0.2), 0px 0px 0px 1px #EAEAEA, 0px -2.4px 0px 0px rgba(61, 61, 61, 0.04) inset; padding: 3px; cursor: pointer; display: block; border: 1px solid transparent; min-height: 80px; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper .wpfnl-template-step span img { width: 70px; height: 70px; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper .wpfnl-template-step p { color: #6B7589; font-size: 12px; margin-top: 10px; text-transform: capitalize; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper .wpfnl-template-step.active span { border-color: #6E42D3; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper .wpfnl-template-step.active p { color: #6E42D3; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview { width: 100%; background: #FFF; margin: auto; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview .wpfnl-preview-checkout-placeholder { min-height: 650px; display: flex; align-items: center; justify-content: center; padding: 20px 0; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.mobile { width: 425px; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.tablet { width: 768px; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.mobile, .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.tablet { padding: 50px 10px 60px; box-shadow: 0 14px 28px 0 rgba(0, 0, 0, 0.0588235294); border-radius: 30px; position: relative; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.mobile .wpfnl-template-iframe-wrapper, .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.tablet .wpfnl-template-iframe-wrapper { border: 1px solid rgba(15, 12, 9, 0.1); } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview .wpfnl-template-iframe-wrapper { position: relative; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview .wpfnl-template-iframe-wrapper .wpfnl-loader-wrapper { position: absolute; width: 100%; height: 100%; top: 0; display: none; align-items: center; justify-content: center; background: rgba(38, 27, 103, 0.2); } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview .wpfnl-template-iframe-wrapper .wpfnl-loader-wrapper.active { display: flex; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview .wpfnl-template-iframe-wrapper .wpfnl-loader-wrapper .wpfnl-loader { display: block; width: 50px; height: 50px; } .template-library-modal .wpfnl-create-funnel__templates .step-title-wrapper { position: absolute; top: 0; left: 0; } .template-library-modal .wpfnl-create-funnel__templates .step-title-wrapper .title { font-weight: 500; font-size: 18px; line-height: 1; color: #363B4E; } .template-library-modal .wpfnl-create-funnel-layout { width: 100%; background: #F6F5FA; border-radius: 14px; max-width: 1093px; position: fixed; top: 50% !important; left: calc(50% + 80px); transform: translate(-50%, -50%); height: 80%; max-height: 690px; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout { height: auto; max-height: none; max-width: 520px; padding: 25px; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-confirm-body { height: auto; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-title { font-size: 20px; font-weight: 600; color: #2D3149; margin: 0 0 10px; line-height: 1.3; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-subtitle { font-size: 14px; font-weight: 600; color: #2D3149; margin: 0 0 14px; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-feature-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-feature-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #6B7280; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-feature-list li svg { flex-shrink: 0; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-desc { font-size: 13px; color: #6B7280; line-height: 1.6; margin: 0 0 24px; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .button-area { margin-top: 0; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-actions .btn-cancel { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 24px; font-size: 14px; font-weight: 500; color: #6E42D3; background: transparent; border: 1.5px solid #6E42D3; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; min-width: 100px; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-actions .btn-cancel:hover { background: #f5f0ff; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-actions .btn-create-store-checkout { min-width: 180px; height: 38px; line-height: 38px; padding: 0 24px; } .template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-actions .btn-create-store-checkout:disabled { opacity: 0.7; cursor: not-allowed; } .template-library-modal .wpfnl-create-funnel-layout .close { position: absolute; border: none; right: -11px; top: -13px; display: flex; width: 40px; height: 40px; padding: 8px; justify-content: center; flex-flow: column; align-items: center; border-radius: 100px; background: #FFF; box-shadow: 0px 1px 1px 0px #DADADA; cursor: pointer; } .template-library-modal .wpfnl-create-funnel-layout .wpfnl-form-group { margin-bottom: 23px; } .template-library-modal .wpfnl-create-funnel-layout .wpfnl-form-group > label { color: #2D3149; font-size: 15px; font-weight: 500; line-height: 1.3; margin-bottom: 7px; display: block; } .template-library-modal .wpfnl-create-funnel-layout .modal-body { height: 100%; } .template-library-modal .wpfnl-create-funnel-layout .modal-body input[type=text] { margin-bottom: 0; border-radius: 8px; background: #FFF; box-shadow: 0px 1px 1px 0px rgba(182, 185, 191, 0.3); border: none; font-weight: 300; } .template-library-modal .wpfnl-create-funnel-layout .modal-body button[type=submit] { width: auto; } .template-library-modal .wpfnl-create-funnel-layout .layout-title { color: #2D3149; font-size: 15px; font-weight: 500; line-height: 1.3; margin-bottom: 9px; } .template-library-modal .wpfnl-create-funnel-layout form { height: 100%; } .template-library-modal .wpfnl-create-funnel-layout .funnels-layout-wrapper { display: flex; flex-flow: row wrap; gap: 20px; border-bottom: 1px solid #E5E1F1; padding-bottom: 20px; margin-bottom: 20px; overflow: auto; height: 100%; max-height: calc(100% - 176px); } .template-library-modal .wpfnl-create-funnel-layout .single-layout { width: calc(33.3333333333% - 14px); position: relative; } .template-library-modal .wpfnl-create-funnel-layout .single-layout .pro-tag { position: absolute; right: 24px; top: 24px; z-index: 2; border-radius: 5px; background: #2FCF5C; box-shadow: 0px 4px 6px 0px #E0DEE5; font-size: 12px; font-weight: 700; line-height: 1; padding: 3px 6px; } .template-library-modal .wpfnl-create-funnel-layout .single-layout-inner { border-radius: 16px; border: 1px solid #EBE9F5; box-shadow: 0px 8px 8px 0px rgba(226, 223, 237, 0.3); padding: 10px; display: block; background: #fff; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .template-library-modal .wpfnl-create-funnel-layout .single-layout-inner:before { content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgNjMgNTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNDIuNSIgY3k9IjkuNSIgcj0iNDIuNSIgZmlsbD0iIzZFNDJEMyIvPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF80ODRfMTMpIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNDAuNDg5IDE3LjU5NmExLjc0NSAxLjc0NSAwIDAwLTIuNDY4IDBMMjYuOTE1IDI4LjcwMmwtNC45MzYtNC45MzZhMS43NDUgMS43NDUgMCAxMC0yLjQ2OCAyLjQ2OGw2LjE3IDYuMTdjLjM0LjM0Ljc4Ny41MTEgMS4yMzQuNTExLjQ0NyAwIC44OTMtLjE3IDEuMjM0LS41MTFsMTIuMzQtMTIuMzRhMS43NDUgMS43NDUgMCAwMDAtMi40Njh6Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfNDg0XzEzIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDIydjIySDB6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOSAxNCkiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4="); position: absolute; right: -2px; top: -2px; display: block; width: 58px; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .template-library-modal .wpfnl-create-funnel-layout .single-layout-inner.is-pro { cursor: not-allowed; } .template-library-modal .wpfnl-create-funnel-layout .single-layout-inner.is-pro:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.4588235294); border-radius: 16px; z-index: 1; } .template-library-modal .wpfnl-create-funnel-layout .single-layout.active .single-layout-inner { border-color: #6E42D3; } .template-library-modal .wpfnl-create-funnel-layout .single-layout.active .single-layout-inner::before { opacity: 1; visibility: visible; } .template-library-modal .wpfnl-create-funnel-layout .inner-box { border-radius: 16px; background: #CEE4DD; display: flex; align-items: center; justify-content: center; flex-flow: column; height: 185px; padding: 15px; } .template-library-modal .wpfnl-create-funnel-layout .inner-box svg { max-width: 100%; } .template-library-modal .wpfnl-create-funnel-layout .layout2 .inner-box { background-color: #F3E8FF; } .template-library-modal .wpfnl-create-funnel-layout .layout3 .inner-box { background-color: rgba(167, 204, 245, 0.3019607843); } .template-library-modal .wpfnl-create-funnel-layout .layout4 .inner-box { background-color: #FDF2CB; } .template-library-modal .wpfnl-create-funnel-layout .layout5 .inner-box { background-color: #E5F0FC; } .template-library-modal .wpfnl-create-funnel-layout .layout6 .inner-box { background-color: #FFEAE1; } .template-library-modal .wpfnl-create-funnel-layout input[type=radio]:checked + .single-layout-inner { border-color: #6E42D3; } .template-library-modal .wpfnl-create-funnel-layout .button-area { text-align: right; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; gap: 10px; } .template-library-modal .wpfnl-create-funnel-layout .button-area .wpfnl-alert.box { padding: 10px 20px; } #create-funnel-loader { position: absolute; left: 50%; top: 50%; z-index: 99; opacity: 0; visibility: hidden; margin-left: -50px; margin-top: -50px; } #create-funnel-loader.show { opacity: 1; visibility: visible; } .create-funnel-loader-overlay#create-funnel-loader { background: #ffffff; position: fixed; left: 160px; top: 0; width: calc(100% - 160px); height: 100%; z-index: 100; display: none; margin: 0; } .create-funnel-loader-overlay#create-funnel-loader.show { display: block; } .create-funnel-loader-overlay#create-funnel-loader.create-funnel-shimmer-overlay { display: flex; } .create-funnel-loader-overlay#create-funnel-loader .wpfnl-loader { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; margin: 0; } body.folded .create-funnel-loader-overlay#create-funnel-loader { left: 36px; width: calc(100% - 36px); } .wpfnl-missing-plugin-notice { width: 60% !important; background: #fff; border-color: transparent !important; padding: 30px; border-radius: 10px; } .wpfnl-missing-plugin-notice .wpfnl-notice-title { font-size: 20px; font-weight: 500; color: #0e2244; margin-bottom: 10px; } .wpfnl-missing-plugin-notice .wpfnl-notice-notice-body span, .wpfnl-missing-plugin-notice .wpfnl-notice-notice-body p { color: #0e2244; font-size: 16px; line-height: 1.6; } .wpfnl-missing-plugin-notice .wpfnl-notice-notice-body p { margin-bottom: 10px; } .wpfnl-missing-plugin-notice .wpfnl-notice-notice-body p.note { margin-bottom: 0; } .wpfnl-missing-plugin-notice .wpfnl-notice-notice-body p b { font-weight: 500; } .wpfnl-missing-plugin-notice .wpfnl-notice-notice-body a { font-size: 16px; font-weight: 500; color: #6E42D3; } .wpfnl-missing-plugin-notice .wpfnl-notice-notice-body a:hover { text-decoration: none; } .wpfnl-missing-plugin-notice .wpfnl-notice-notice-body .dot-wrapper span { margin-left: 0px; font-weight: 700; } .wpfnl-missing-plugin-notice .wpfnl-notice-notice-body .wpfnl-plugin-installation-error { color: #d24d4d; display: block; margin-top: 10px; font-style: italic; font-size: 14px; } .wpfnl-missing-plugin-notice .wpfnl-notice-notice-body .wpfnl-plugin-installation-error a { font-size: 14px; } .wpfnl-missing-plugin-notice .wpfnl-notice-notice-body .wpfnl-plugin-installation-error a:hover { text-decoration: underline; } .importar-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(51, 51, 51, 0.7); transition: all 0.3s ease; cursor: default; z-index: 2; border-radius: 10px 10px 0 0; } .importar-loader .title-wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .importar-loader .title { text-transform: capitalize; font-size: 16px; color: #fff; } .folded .template-library-modal { left: 36px; width: calc(100% - 36px); } @media only screen and (max-width: 1699px) { .template-library-modal .wpfnl-create-funnel__templates { gap: 30px; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template { width: calc(25% - 23px); } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-step__single-template .template-action .btn-default, .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-action .btn-default { padding: 9px 12px 7px; font-size: 14px; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .btn-default { max-width: 174px; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper { gap: 30px; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-step__single-template { width: calc(20% - 24px); } } @media only screen and (max-width: 1399px) { .template-library-modal .funnel-templates-content { padding: 30px; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template { width: calc(33.3333333333% - 20px); } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-step__single-template { width: calc(25% - 23px); } .template-library-modal .wpfnl-create-funnel-layout { max-width: 913px; } .template-library-modal .wpfnl-create-funnel-layout .inner-box { height: 175px; } } @media only screen and (max-width: 1199px) { .template-library-modal .funnel-templates-content { padding: 20px; } .template-library-modal .funnel-templates-sidebar { padding: 19px 15px; } .template-library-modal .wpfnl-create-funnel__templates { gap: 20px; } .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template { width: calc(50% - 10px); } .funnel-templates-content .wpfnl-step__templates-wrapper .wpfnl-step__single-template { width: calc(50% - 10px); } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper { gap: 20px; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-step__single-template { width: calc(33.3333333333% - 14px); } .wpfnl-missing-plugin-notice { width: calc(50% - 30px) !important; padding: 20px; } .template-library-modal .wpfnl-create-funnel-layout { max-width: 780px; max-height: 585px; } .template-library-modal .wpfnl-create-funnel-layout .single-layout { width: calc(33.3333333333% - 8px); } .template-library-modal .wpfnl-create-funnel-layout .funnels-layout-wrapper { gap: 12px; max-height: calc(100% - 180px); } .template-library-modal .wpfnl-create-funnel-layout .single-layout-inner { border-radius: 10px; padding: 5px; } .template-library-modal .wpfnl-create-funnel-layout .inner-box { height: 145px; border-radius: 8px; } .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.desktop { width: 992px; transform: scale(0.7); transform-origin: left top; margin-left: 10%; } } @media only screen and (max-width: 960px) { .template-library-modal { left: 36px; width: calc(100% - 36px); } .template-library-modal .wpfnl-create-funnel-layout { left: calc(50% + 20px); } } .step-template-showcase-modal .wpfnl-step__single-template, .template-library-modal .wpfnl-step__single-template { position: relative; background: #ffffff; width: calc(25% - 30px); border-radius: 10px; box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.2); transition: all 0.3s ease; } .step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template, .template-library-modal .create__from-scratch.wpfnl-step__single-template { border: 2px dashed #A1A1B6; box-shadow: none !important; background: transparent; } .step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template:hover, .template-library-modal .create__from-scratch.wpfnl-step__single-template:hover { box-shadow: none !important; } .step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template .btn-default, .template-library-modal .create__from-scratch.wpfnl-step__single-template .btn-default { height: 48px; line-height: 49px; width: 100%; max-width: 194px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 12px; padding: 0 15px; box-shadow: 0px 9px 14px 0px rgba(193, 183, 232, 0.5); } .step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template .btn-default svg, .template-library-modal .create__from-scratch.wpfnl-step__single-template .btn-default svg { margin-right: 3px; } .step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template .btn-default svg path, .template-library-modal .create__from-scratch.wpfnl-step__single-template .btn-default svg path { stroke: #fff; } .step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template .step-template-info, .template-library-modal .create__from-scratch.wpfnl-step__single-template .step-template-info, .step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template .template-preview-image, .template-library-modal .create__from-scratch.wpfnl-step__single-template .template-preview-image { opacity: 0; visibility: hidden; } .step-template-showcase-modal .wpfnl-step__single-template .importar-loader, .template-library-modal .wpfnl-step__single-template .importar-loader { background: rgba(38, 33, 51, 0.6); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } .step-template-showcase-modal .wpfnl-step__single-template .template-preview-image, .template-library-modal .wpfnl-step__single-template .template-preview-image { position: relative; } .step-template-showcase-modal .wpfnl-step__single-template .step-image-wrapper, .template-library-modal .wpfnl-step__single-template .step-image-wrapper { border-radius: 10px 10px 0 0; background-repeat: no-repeat; background-size: 100% auto; background-position: center 0; position: relative; overflow: hidden; } .step-template-showcase-modal .wpfnl-step__single-template .step-image-wrapper:before, .template-library-modal .wpfnl-step__single-template .step-image-wrapper:before { content: ""; display: block; padding-top: 100%; } .step-template-showcase-modal .wpfnl-step__single-template .template-img, .template-library-modal .wpfnl-step__single-template .template-img { width: 100%; height: 350px; object-fit: contain; border-radius: 10px 10px 0px 0px; transition: all 0.3s ease; } .step-template-showcase-modal .wpfnl-step__single-template .step-template-info, .template-library-modal .wpfnl-step__single-template .step-template-info { border-radius: 0 0 10px 10px; position: relative; border-top: 1px solid #E5E8F3; } .step-template-showcase-modal .wpfnl-step__single-template .step-template-info .title, .template-library-modal .wpfnl-step__single-template .step-template-info .title { margin-bottom: 0; font-size: 14px; line-height: 1.2; color: #363B4E; font-weight: 500; padding: 19px 15px 17px; text-align: center; text-transform: capitalize; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; transition: all 0.3s ease; } .step-template-showcase-modal .wpfnl-step__single-template:hover, .template-library-modal .wpfnl-step__single-template:hover { box-shadow: 0px 20px 20px rgba(190, 190, 215, 0.2); } .step-template-showcase-modal .wpfnl-step__single-template:hover .template-action, .template-library-modal .wpfnl-step__single-template:hover .template-action { opacity: 1; visibility: visible; } .step-template-showcase-modal .wpfnl-create-step_inner-content { width: 100%; height: 100%; } .step-template-showcase-modal .wpfnl-create-step__template-wrapper { position: relative; min-height: 400px; max-height: 100%; overflow: auto; display: flex; flex-flow: row wrap; align-items: flex-start; } .step-template-showcase-modal .wpfnl-create-step__template-wrapper::-webkit-scrollbar { width: 5px; } .step-template-showcase-modal .wpfnl-create-step__template-wrapper::-webkit-scrollbar-track { background: #f2f5f8; } .step-template-showcase-modal .wpfnl-create-step__template-wrapper::-webkit-scrollbar-thumb { background-color: #d9dce0; border-radius: 20px; } .step-template-showcase-modal .steps-template__filter-wrapper { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; width: 100%; background: #FFFFFF; box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.31); padding: 15px 24px; position: relative; } .step-template-showcase-modal .steps-template__filter-wrapper .wpfnl-modal-close { background: #FFFFFF; border-radius: 10px; height: 38px; width: 38px; margin-right: 15px; display: flex; flex-flow: column; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #EEF0F3; } .step-template-showcase-modal .steps-template__filter-wrapper .step-showcase-title { font-weight: 500; font-size: 16px; line-height: 1.5; color: #363B4E; text-transform: capitalize; } .step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter { margin-left: auto !important; } .step-template-showcase-modal .wpfnl-create-step__filter-nav { width: 228px; min-height: 835px; background: #FFFFFF; box-shadow: 1px 0px 2px rgba(190, 190, 215, 0.14); padding: 24px; align-self: stretch; } .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item { height: 44px; line-height: 44px; font-weight: 500; color: #363B4E; padding: 0 16px; margin: 0 0 15px 0; text-align: left; box-shadow: none; border: 1px solid #EEF0F3; border-radius: 8px; text-transform: capitalize; cursor: pointer; position: relative; transition: all 0.3s ease; background: #fff; display: flex; align-items: center; gap: 8px; } .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item .pro-tag-icon { position: static; margin-top: 6px; margin-left: -4px; } .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item svg { position: relative; top: -1px; } .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item svg path { transition: all 0.3s ease; } .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.disabled { cursor: not-allowed; color: #939393; background: #dcdbe3; } .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active { border-color: #6E42D3; color: #6E42D3; box-shadow: 0px 20px 16px rgba(189, 193, 200, 0.2); } .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active.step-checkout path, .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active.step-landing path { fill: #6E42D3; stroke: #6E42D3; } .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active.step-downsell path, .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active.step-upsell path, .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active.step-custom path, .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active.step-thankyou path { fill: #6E42D3; } .step-template-showcase-modal .wpfnl-create-step__filter-nav .pro-tag { position: absolute; top: -6px; right: -2px; } .step-template-showcase-modal .create-step-name-modal { left: 50%; } .step-template-showcase-modal .wpfnl-step__templates-wrapper-before { padding: 30px 35px; width: calc(100% - 228px); box-shadow: none; } .step-template-showcase-modal .wpfnl-step__templates-wrapper-before .step-counter { font-size: 20px; line-height: 1.2; font-weight: 600; color: #363B4E; margin-bottom: 24px; text-transform: capitalize; } .step-template-showcase-modal .wpfnl-step__templates-wrapper { display: flex; flex-flow: row wrap; gap: 40px; } .step-template-showcase-modal .wpfnl-step__single-template .template-action { flex-flow: row; } @media only screen and (max-width: 1699px) { .step-template-showcase-modal .wpfnl-step__templates-wrapper { gap: 30px; } .step-template-showcase-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template { width: calc(25% - 23px); } .step-template-showcase-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template .template-action .step-btn { padding: 9px 12px 7px; font-size: 14px; } .step-template-showcase-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template.create__from-scratch .btn-default { max-width: 174px; } } @media only screen and (max-width: 1399px) { .step-template-showcase-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template { width: calc(33.3333333333% - 20px); } .step-template-showcase-modal.wpfnl-ab-steps-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template, .step-template-showcase-modal .wpfnl-ab-steps .wpfnl-step__templates-wrapper .wpfnl-step__single-template { width: calc(25% - 23px); } } @media only screen and (max-width: 1199px) { .step-template-showcase-modal .wpfnl-create-step__filter-nav { width: 198px; padding: 20px; } .step-template-showcase-modal .wpfnl-step__templates-wrapper-before { padding: 20px 20px; width: calc(100% - 198px); } .step-template-showcase-modal .wpfnl-step__templates-wrapper { gap: 20px; } .step-template-showcase-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template { width: calc(33.3333333333% - 14px); } .step-template-showcase-modal.wpfnl-ab-steps-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template, .step-template-showcase-modal .wpfnl-ab-steps .wpfnl-step__templates-wrapper .wpfnl-step__single-template { width: calc(33.3333333333% - 14px); } } @media only screen and (max-width: 991px) { .step-template-showcase-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template { width: calc(50% - 10px); } .step-template-showcase-modal.wpfnl-ab-steps-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template, .step-template-showcase-modal .wpfnl-ab-steps .wpfnl-step__templates-wrapper .wpfnl-step__single-template { width: calc(50% - 10px); } } .funnel-list__wrapper { height: 100%; background-color: #ffffff; border-radius: 10px; } .funnel-list__wrapper .funnel__single-list { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; padding: 14px 24px 14px 60px; position: relative; border-bottom: 1px solid #EBEDF0; gap: 12px; } .funnel-list__wrapper .funnel__single-list:last-child { margin-bottom: 0; } .funnel-list__wrapper .funnel__single-list .bulk-action-wrapper { position: absolute; top: 0; left: 60px; width: calc(100% - 60px); display: none; align-items: center; gap: 10px; z-index: 3; background: #ffffff; padding: 8px 0 6px; height: 100%; border-radius: 0 10px 0 0; } .funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler { font-weight: 400; font-size: 12px; line-height: 1.2; letter-spacing: -0.01em; padding: 7px 11px; min-width: auto; height: auto; border-radius: 50px; position: relative; background-color: #6E42D3; } .funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler:before { content: ""; position: absolute; right: 27px; top: 0; height: 100%; width: 1px; background: #9373EA; } .funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler > svg { margin-left: 16px; } .funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler.show-dropdown .wpfnl-dropdown { opacity: 1; visibility: visible; } .funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler .wpfnl-dropdown li a:hover { background: #F6F8FA; color: #7A8B9A; } .funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler .wpfnl-dropdown li rect, .funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler .wpfnl-dropdown li path { stroke: #7A8B9A; } .funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler .wpfnl-dropdown li .wpfnl-bulk-export path { stroke: transparent; } .funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .selected-funnel-count, .funnel-list__wrapper .funnel__single-list .bulk-action-wrapper > p { color: #363B4E; font-weight: 500; } .funnel-list__wrapper .funnel__single-list .wpfnl-checkbox label:before { border-color: #E4E6EB; background-color: #fff; border-radius: 5px; } .funnel-list__wrapper .funnel__single-list.list-header { padding: 15px 24px 15px 60px; } .funnel-list__wrapper .funnel__single-list.list-header .list-cell { line-height: 1; transform: translateY(1px); } .funnel-list__wrapper .funnel__single-list .funnel-list__bulk-action { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 2; } .funnel-list__wrapper .funnel__single-list .wpfnl-name { padding-right: 15px; padding-left: 45px; position: relative; width: 240px; } .funnel-list__wrapper .funnel__single-list .wpfnl-name .builder-logo { position: absolute; left: 0; top: 50%; width: 30px; word-break: break-all; display: block; transform: translateY(-50%); } .funnel-list__wrapper .funnel__single-list .wpfnl-name .builder-logo svg { display: block; } .funnel-list__wrapper .funnel__single-list .wpfnl-name .name { font-weight: 500; font-size: 14px; line-height: 16px; color: #363B4E; } .funnel-list__wrapper .funnel__single-list .wpfnl-name .name:hover { color: #6E42D3; } .funnel-list__wrapper .funnel__single-list .wpfnl-name .steps { font-size: 12px; line-height: 16px; color: #7A8B9A; display: block; text-transform: capitalize; } .funnel-list__wrapper .funnel__single-list .wpfnl-intigrations { display: flex; flex-flow: row wrap; align-items: center; gap: 8px; width: 375px; } .funnel-list__wrapper .funnel__single-list .wpfnl-intigrations .automation-tag { border: 1px solid #E5E8F3; border-radius: 6px; font-size: 12px; line-height: 1.5; color: #7A8B9A; padding: 2px 8px; display: flex; flex-flow: row; align-items: center; justify-content: center; position: relative; } .funnel-list__wrapper .funnel__single-list .wpfnl-intigrations .automation-tag svg { margin-right: 6px; display: block; } .funnel-list__wrapper .funnel__single-list .wpfnl-intigrations .automation-tag .tooltip { background: #0C1015; border-radius: 6px; position: absolute; bottom: calc(100% + 10px); left: 0; padding: 7px 10px; color: #fff; width: 144px; z-index: 4; font-size: 13px; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .funnel-list__wrapper .funnel__single-list .wpfnl-intigrations .automation-tag .tooltip:before { content: ""; position: absolute; left: 13px; bottom: -4px; width: 10px; height: 10px; background: #0C1015; transform: rotate(45deg); border-radius: 2px; } .funnel-list__wrapper .funnel__single-list .wpfnl-intigrations .automation-tag:hover .tooltip { opacity: 1; visibility: visible; } .funnel-list__wrapper .funnel__single-list .wpfnl-creation-date { width: 135px; } .funnel-list__wrapper .funnel__single-list .wpfnl-creation-date .post-date { line-height: 1.14; display: block; } .funnel-list__wrapper .funnel__single-list .wpfnl-status { width: 75px; } .funnel-list__wrapper .funnel__single-list .wpfnl-status .post-status { font-size: 12px; line-height: 1.25; color: #2D3149; font-weight: 500; text-transform: capitalize; background: rgba(122, 139, 154, 0.15); border-radius: 100px; display: inline-block; padding: 5px 10px 4px; } .funnel-list__wrapper .funnel__single-list .wpfnl-status.published .post-status { background: rgba(35, 150, 84, 0.1); color: #239654; } .funnel-list__wrapper .funnel__single-list .list-action { display: flex; flex-flow: row; align-items: center; width: 80px; gap: 9px; } .funnel-list__wrapper .funnel__single-list .list-action > a { display: flex; flex-flow: row; align-items: center; font-weight: 500; font-size: 14px; line-height: 1.2; text-transform: capitalize; padding: 3px 4px; } .funnel-list__wrapper .funnel__single-list .list-action > a svg { display: block; } .funnel-list__wrapper .funnel__single-list .list-action > a svg path { transition: all 0.3s ease; } .funnel-list__wrapper .funnel__single-list .list-action > a.disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; } .funnel-list__wrapper .funnel__single-list .list-action > a.edit:hover path { fill: #6E42D3; } .funnel-list__wrapper .funnel__single-list .list-action > a.view:hover path { fill: #6E42D3; stroke: #6E42D3; } .funnel-list__wrapper .funnel__single-list .list-action .more-action { position: relative; padding: 3px 4px; cursor: pointer; } .funnel-list__wrapper .funnel__single-list .list-action .more-action svg { display: block; } .funnel-list__wrapper .funnel__single-list .list-action .more-action .duplicate svg { width: 18px; } .funnel-list__wrapper .funnel__single-list .list-action .more-action .duplicate .pro-tag-icon { margin-left: 7px; } .funnel-list__wrapper .funnel__single-list .list-action .more-action .duplicate .pro-tag-icon path { stroke: initial; } .funnel-list__wrapper .funnel__single-list .list-action ul.more-actions { right: -22px; } .funnel-list__wrapper .funnel__single-list .list-action ul.more-actions .wpfnl-loader { border-width: 1px; border-top-color: transparent; width: 10px; height: 10px; margin-left: 6px; } .funnel-list__wrapper .funnel__single-list .list-action .more-action.show-actions ul.more-actions { top: 27px; opacity: 1; visibility: visible; } .funnel-list__wrapper .funnel__single-list .list-action .wpfnl-dropdown li a:hover { background: #F6F8FA; color: #7A8B9A; } .funnel-list__wrapper .funnel__single-list .list-action .wpfnl-dropdown li rect, .funnel-list__wrapper .funnel__single-list .list-action .wpfnl-dropdown li path { stroke: #7A8B9A; } .funnel-list__wrapper .funnel__single-list .list-action .wpfnl-dropdown li .wpfnl-export-funnel path { stroke: transparent; } .funnel-list__wrapper .funnel__single-list.funnel-disabled { border-bottom-color: #e3e3e3; } .funnel-list__wrapper .funnel__single-list.funnel-disabled::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: not-allowed; z-index: 2; background: rgba(32, 32, 32, 0.0784313725); } .funnel-list__wrapper .funnel__single-list.funnel-disabled .list-cell { opacity: 0.5; } .funnel-list__wrapper .funnel__single-list.funnel-disabled .list-action > a.disabled { opacity: 1; } .funnel-list__wrapper .funnel__single-list .funnel-alert { border: 1px solid #e3d7ff; background: linear-gradient(to right, #eff6ff, #eef2ff); border-radius: 8px; padding: 9px 12px; width: 100%; } .funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-alert-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-alert-left { display: flex; align-items: center; gap: 12px; } .funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-icon { background: #dbeafe; padding: 8px; border-radius: 6px; display: flex; align-items: center; justify-content: center; } .funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-icon svg { width: 20px; height: 20px; color: #2563eb; } .funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-alert-content { display: flex; flex-direction: column; } .funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-alert-title { font-size: 14px; font-weight: 600; color: #111827; margin: 0; } .funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-alert-description { font-size: 12px; color: #4b5563; margin: 0; } .funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-activate-btn { background: #6E42D3; color: #ffffff; border: none; border-radius: 6px; padding: 7px 13px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } .funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-activate-btn:hover { background: #5b36b0; } .funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-activate-btn:disabled { opacity: 0.5; pointer-events: none; } .funnel-list__wrapper .list-footer { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; padding: 17px 24px; } .funnel-list__wrapper .list-footer .pagination-number p { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .funnel-list__wrapper .list-footer .pagination-number p strong { color: #363B4E; } .funnel-list__wrapper .list-footer .pagination-number p select { width: 56px; min-width: auto; padding: 2px 8px; height: 32px; } @media only screen and (max-width: 1399px) { .funnel-list__wrapper .funnel__single-list .wpfnl-name { width: 200px; } .funnel-list__wrapper .funnel__single-list .wpfnl-intigrations { width: 220px; } } @media only screen and (max-width: 1199px) { .wpfnl-dashboard__header a.import-export { background: transparent; box-shadow: none; padding: 0; } .wpfnl-dashboard__header .btn-default.disabled, .wpfnl-dashboard__header .add-new-funnel-btn { padding: 0 18px; } .funnel-list__wrapper .funnel__single-list { padding: 10px 15px 10px 45px; gap: 8px; } .funnel-list__wrapper .funnel__single-list .funnel-list__bulk-action { left: 15px; } .funnel-list__wrapper .funnel__single-list .wpfnl-name { padding-right: 10px; } .funnel-list__wrapper .funnel__single-list .wpfnl-creation-date { width: 74px; } .funnel-list__wrapper .funnel__single-list .wpfnl-intigrations { width: 136px; } .funnel-list__wrapper .funnel__single-list .list-action { width: 73px; gap: 3px; } .funnel-list__wrapper .funnel__single-list .list-action > a { margin-right: 0; width: 28px; text-indent: -999px; overflow: hidden; } .funnel-list__wrapper .funnel__single-list .list-action > a.edit { margin-right: 0; } } @media only screen and (max-width: 782px) { .wpfnl-dashboard__header { padding: 18px 20px 19px 30px; } } .remote-funnel-header { display: flex; flex-flow: row wrap; align-items: center; background: #FFFFFF; border-bottom: 1px solid #E5E8F3; position: relative; padding: 15px 15px 5px; } .remote-funnel-header .single-item { margin: 0 10px 10px 0; } .remote-funnel-header .single-item select { padding-right: 30px; } .remote-funnel-header .single-item .template-image-remove, .remote-funnel-header .single-item .template-image-upload { background: #F7F7FA; color: #363B4E; border: 1px solid #E5E8F3; } .remote-funnel-header .single-item.template-preview-image { display: flex; align-items: center; flex-flow: row wrap; max-width: 510px; } .remote-funnel-header .single-item.template-preview-image input[type=text] { width: 200px; margin-right: 10px; } .remote-funnel-header .single-item.template-preview-image .btn-default { margin-right: 10px; white-space: pre; } .remote-funnel-header .single-item.template-preview-image .btn-default:last-child { margin-right: 0; } .remote-funnel-header .btn-default { border-radius: 6px; padding: 0 20px; min-width: auto; } .steps-page__header { display: flex; flex-flow: row wrap; align-items: center; background: #FFFFFF; box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.14); position: relative; justify-content: flex-start; padding: 15px 13px 15px 24px; } .steps-page__header-left { display: flex; flex-flow: row wrap; align-items: center; } .steps-page__header-left .wpfnl-logo a { display: block; padding: 16px 25px; border-right: 1px solid #E5E8F3; } .steps-page__header-left .wpfnl-logo a svg { width: 26px; display: block; } .steps-page__header-left .back-link { font-weight: 400; font-size: 14px; color: #7A8B9A; text-transform: capitalize; padding: 0; text-align: center; display: flex; flex-flow: column; align-items: center; justify-content: center; box-shadow: none; height: 38px; width: 38px; border: 1px solid #EEF0F3; margin-right: 15px; border-radius: 10px; } .steps-page__header-left .back-link svg { display: block; margin: 0 auto; } .steps-page__header-left .back-link:hover { color: #6E42D3; } .steps-page__header-left .add-step-condtion-area { display: flex; flex-flow: row wrap; align-items: center; border-right: 1px solid #E5E8F3; } .steps-page__header-left .add-step-condtion-area li { position: relative; } .steps-page__header-left .add-step-condtion-area li .wpfnl-tooltip2 { position: absolute; left: 0; top: calc(100% + 35px); width: 305px; padding: 10px 32px 10px 15px; margin: 0; background: #6e42d3; color: #fff; border-radius: 10px; text-align: left; z-index: 1; opacity: 0; visibility: hidden; transition: all 0.5s ease 1.5s; } .steps-page__header-left .add-step-condtion-area li .wpfnl-tooltip2:before { content: ""; position: absolute; left: 20px; top: -6px; width: 13px; height: 13px; background: #6e42d3; transform: rotate(45deg); } .steps-page__header-left .add-step-condtion-area li .wpfnl-tooltip2.show-tooltip { top: calc(100% + 15px); opacity: 1; visibility: visible; } .steps-page__header-left .add-step-condtion-area li .wpfnl-tooltip2 .close-tooltip { position: absolute; right: 13px; top: 11px; cursor: pointer; } .steps-page__header-left .add-step-condtion-area li > button { display: block; border: none; height: 60px; padding: 0 20px; background: transparent; font-size: 14px; font-weight: 500; color: #363B4E; cursor: pointer; position: relative; } .steps-page__header-left .add-step-condtion-area li > button svg { margin-right: 5px; } .steps-page__header-left .add-step-condtion-area li > button.add-new-step { background-color: #F6F5FA; color: #6E42D3; } .steps-page__header-left .add-step-condtion-area li > button.add-new-step:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #6E42D3; border-radius: 60px 60px 0 0; } .steps-page__header-left .add-step-condtion-area li > button.add-new-step svg { margin-right: 5px; } .steps-page__header-left .add-step-condtion-area li > button.create-condition:hover { color: #6E42D3; } .steps-page__header-left .add-step-condtion-area li > button.create-condition:hover path { stroke: #6E42D3; } .steps-page__header-left .add-step-condtion-area li .steps-dropdown { position: absolute; box-shadow: 0px 10px 30px rgba(21, 21, 69, 0.0784313725); border-radius: 0px 0px 10px 10px; top: 100%; left: 0; width: 100%; z-index: 9; background: #F6F5FA; border: 1px solid #fff; padding: 10px 13px 12px; transition: all 0.3s ease; opacity: 0; visibility: hidden; } .steps-page__header-left .add-step-condtion-area li .steps-dropdown > li { background: #FFFFFF; box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.2); border-radius: 5px; font-weight: 500; font-size: 14px; line-height: 1.4; color: #8594A2; margin-bottom: 10px; text-transform: capitalize; padding: 7px 13px 6px; text-align: center; cursor: pointer; width: 100%; transition: all 0.3s ease; } .steps-page__header-left .add-step-condtion-area li .steps-dropdown > li:last-child { margin-bottom: 0; } .steps-page__header-left .add-step-condtion-area li .steps-dropdown > li:hover { background: #6E42D3; color: #fff; } .steps-page__header-left .add-step-condtion-area li .steps-dropdown > li.disabled { cursor: not-allowed; color: white; background: #B6B2CA; } .steps-page__header-left .add-step-condtion-area li .steps-dropdown > li .pro-tag { position: absolute; top: -6px; right: -2px; } .steps-page__header-left .add-step-condtion-area li.show-steps-dropdown > button.add-new-step svg { transform: rotate(180deg); } .steps-page__header-left .add-step-condtion-area li.show-steps-dropdown .steps-dropdown { opacity: 1; visibility: visible; } .steps-page__header-left .add-step-condtion-area li > .mrm-trigger-action-btn, .steps-page__header-left .add-step-condtion-area li > .global-funnel-btn { border-left: 1px solid #E5E8F3; } .steps-page__header-left .steps-page__fnl-name { display: flex; flex-flow: row wrap; align-items: center; } .steps-page__header-left .steps-page__fnl-name label { padding-right: 7px; font-size: 14px; } .steps-page__header-left .steps-page__fnl-name input { height: 28px; font-size: 12px; padding: 3px 10px; width: 230px; min-height: auto; min-width: auto; } .steps-page__header-left .steps-page__fnl-name .funnel-name { max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .steps-page__header-left .steps-page__fnl-name .fnl-name-btn { min-width: auto; padding: 0 7px; width: 30px; height: 26px; display: flex; flex-flow: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.04) !important; border: 1px solid #e0e0e0; border-radius: 3px; cursor: pointer; margin-left: 10px; } .steps-page__header-left .steps-page__fnl-name .fnl-name-btn svg { display: block; } .steps-page__header-left .steps-page__fnl-name .fnl-name-btn.funnel-name-edit svg { fill: #6E42D3; } .steps-page__header-left .steps-page__fnl-name .fnl-name-btn.funnel-name-submit { display: none; } .steps-page__header-left .steps-page__fnl-name .fnl-name-btn.funnel-name-submit svg { stroke: #6E42D3; } .steps-page__header-left .steps-page__fnl-name .funnel-name-input { display: none; } .steps-page__header-left .steps-page__fnl-name .funnel-name-submit-btn { display: none; } .steps-page__header-left .copy-clipboard { display: flex; flex-flow: row wrap; align-items: center; margin-left: 20px; position: relative; } .steps-page__header-left .copy-clipboard .link-icon { width: 28px; border: 1px solid #E5E8F3; height: 28px; display: flex; flex-flow: column; align-items: center; justify-content: center; border-right: 0; border-radius: 6px 0 0 6px; } .steps-page__header-left .copy-clipboard input[readonly] { height: 28px; font-size: 12px; padding: 2px 10px; border-radius: 0; width: 160px; background: #fff; min-height: auto; min-width: auto; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .steps-page__header-left .copy-clipboard button { border: none; background: #ececee; color: #363B4E; height: 28px; display: inline-block; padding: 0 10px; text-transform: capitalize; font-size: 12px; font-weight: 500; border-radius: 0 6px 6px 0; cursor: pointer; } .steps-page__header-left .copy-clipboard .copied-msg { color: #6E42D3; font-weight: 500; position: absolute; top: 7px; right: -46px; font-size: 13px; display: none; } .steps-page__header-center { display: flex; align-items: center; flex-flow: row wrap; gap: 40px; } .steps-page__header-center .steps-page__fnl-name { display: flex; flex-flow: row wrap; align-items: center; position: relative; } .steps-page__header-center .steps-page__fnl-name label { padding-right: 7px; font-size: 14px; cursor: text; } .steps-page__header-center .steps-page__fnl-name input[type=text] { line-height: 1; font-size: 16px; font-weight: 500; color: #363B4E; background: #fff; border-radius: 10px; border: 1px solid #6E42D3; } .steps-page__header-center .steps-page__fnl-name input[type=text]:hover { color: #363B4E; } .steps-page__header-center .steps-page__fnl-name .funnel-name { max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 500; line-height: 1.1; color: #363B4E; position: relative; padding-right: 25px; } .steps-page__header-center .steps-page__fnl-name .funnel-name:after { content: ""; position: absolute; right: 0; top: 0; width: 17px; height: 17px; cursor: pointer; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjE2NjY3IDEuNjY2NjdDMi43ODU5NiAxLjY2NjY3IDEuNjY2NjcgMi43ODU5NiAxLjY2NjY3IDQuMTY2NjdWMTIuNUMxLjY2NjY3IDEzLjg4MDcgMi43ODU5NiAxNSA0LjE2NjY3IDE1SDEyLjVDMTMuODgwNyAxNSAxNSAxMy44ODA3IDE1IDEyLjVWNy41QzE1IDcuMDM5NzUgMTUuMzczMSA2LjY2NjY3IDE1LjgzMzMgNi42NjY2N0MxNi4yOTM2IDYuNjY2NjcgMTYuNjY2NyA3LjAzOTc1IDE2LjY2NjcgNy41VjEyLjVDMTYuNjY2NyAxNC44MDEyIDE0LjgwMTIgMTYuNjY2NyAxMi41IDE2LjY2NjdINC4xNjY2N0MxLjg2NTQ4IDE2LjY2NjcgMCAxNC44MDEyIDAgMTIuNVY0LjE2NjY3QzAgMS44NjU0OCAxLjg2NTQ4IDAgNC4xNjY2NyAwSDkuMTY2NjdDOS42MjY5MiAwIDEwIDAuMzczMSAxMCAwLjgzMzMzM0MxMCAxLjI5MzU3IDkuNjI2OTIgMS42NjY2NyA5LjE2NjY3IDEuNjY2NjdINC4xNjY2N1oiIGZpbGw9IiM3QThCOUEiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi42Nzk3IDAuNjg0MDY3QzEzLjExNzcgMC4yNDYwNjcgMTMuNzExNyAwIDE0LjMzMTIgMEMxNC45NTA2IDAgMTUuNTQ0NiAwLjI0NjA2NyAxNS45ODI2IDAuNjg0MDY3QzE2LjQyMDYgMS4xMjIwNyAxNi42NjY3IDEuNzE2MTIgMTYuNjY2NyAyLjMzNTU0QzE2LjY2NjcgMi45NTQ5NyAxNi40MjA2IDMuNTQ5MDMgMTUuOTgyNiAzLjk4NzAzTDE1LjMzIDQuNjM5NjRDMTUuMDA0NiA0Ljk2NTA4IDE0LjQ3NjkgNC45NjUwOCAxNC4xNTE1IDQuNjM5NjRMMTIuMDI3IDIuNTE1MkMxMS43MDE2IDIuMTg5NzYgMTEuNzAxNiAxLjY2MjEzIDEyLjAyNyAxLjMzNjY4TDEyLjY3OTcgMC42ODQwNjdaTTEwLjg0ODUgMy42OTM3MUMxMC41MjMxIDMuMzY4MjcgOS45OTU0IDMuMzY4MjcgOS42Njk5OSAzLjY5MzcxTDUuOTUyMjMgNy40MTE1QzUuODQ1NDMgNy41MTgyNSA1Ljc2OTY3IDcuNjUyMDggNS43MzMwNCA3Ljc5ODU4TDUuMDI0ODkgMTAuNjMxM0M0Ljk1Mzg5IDEwLjkxNTIgNS4wMzcwOSAxMS4yMTU2IDUuMjQ0MDggMTEuNDIyNkM1LjQ1MTA2IDExLjYyOTYgNS43NTE0NyAxMS43MTI4IDYuMDM1NDUgMTEuNjQxOEw4Ljg2ODA3IDEwLjkzMzdDOS4wMTQ1NyAxMC44OTcgOS4xNDg0IDEwLjgyMTMgOS4yNTUxNSAxMC43MTQ0TDEyLjk3MyA2Ljk5NjY3QzEzLjI5ODQgNi42NzEyNSAxMy4yOTg0IDYuMTQzNTkgMTIuOTczIDUuODE4MTZMMTAuODQ4NSAzLjY5MzcxWiIgZmlsbD0iIzdBOEI5QSIvPgo8L3N2Zz4K); } .steps-page__header-center .steps-page__fnl-name .fnl-name-btn { min-width: auto; padding: 1px 7px 0; width: 30px; height: 28px; display: flex; flex-flow: column; align-items: center; justify-content: center; background: #F6F5FA !important; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; margin-left: 10px; } .steps-page__header-center .steps-page__fnl-name .fnl-name-btn svg { display: block; } .steps-page__header-center .steps-page__fnl-name .fnl-name-btn.funnel-name-edit svg { fill: #6E42D3; } .steps-page__header-center .steps-page__fnl-name .fnl-name-btn.funnel-name-submit { display: none; } .steps-page__header-center .steps-page__fnl-name .fnl-name-btn.funnel-name-submit svg { stroke: #6E42D3; } .steps-page__header-center .steps-page__fnl-name .fnl-name-btn.funnel-name-cancel { display: none; margin-left: 5px; } .steps-page__header-center .steps-page__fnl-name .fnl-name-btn.funnel-name-cancel svg { position: relative; top: 2px; } .steps-page__header-center .steps-page__fnl-name .funnel-name-input { display: none; } .steps-page__header-center .steps-page__fnl-name .funnel-name-submit-btn { display: none; } .steps-page__header-center .steps-page__fnl-name .wpfnl-alert { display: block; position: absolute; font-size: 12px; white-space: nowrap; bottom: -16px; left: 0; } .steps-page__header-center #wpfnl-change-funnel-name[data-tour=yes] { position: relative; z-index: 4; } .steps-page__header-center #wpfnl-change-funnel-name[data-tour=yes] .funnel-name-edit { color: #FFF; } .steps-page__header-center .enable-gbf { display: flex; align-items: center; font-weight: 500; position: relative; } .steps-page__header-center .enable-gbf::before { content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; background-color: #E9E6F4; } .steps-page__header-center .enable-gbf .pro-tag-icon { position: static; margin-top: 3px; margin-right: 4px; } .steps-page__header-center .enable-gbf .title { margin-right: 10px; line-height: 1.1; } .steps-page__header-right { display: flex; flex-flow: row; align-items: center; margin-left: auto; } .steps-page__header-right .funnel-stats { display: flex; border-right: 1px solid #E5E8F3; padding-right: 20px; margin-right: 5px; font-weight: 500; align-items: center; } .steps-page__header-right .funnel-stats .pro-tag-icon { position: static; margin-top: 3px; margin-right: 4px; } .steps-page__header-right .funnel-stats .title { margin-right: 10px; line-height: 1.1; } .steps-page__header-right .saving-text { color: #848994; font-size: 14px; font-weight: 400; line-height: 1; margin-right: 20px; position: relative; top: 2px; } .steps-page__header-right .draft-publish-toggle { display: flex; align-items: center; border-radius: 10px; border: 1px solid #E5E8F3; margin-right: 40px; position: relative; } .steps-page__header-right .draft-publish-toggle:after { content: ""; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 1px; height: 24px; background: #DEE2E6; } .steps-page__header-right .draft-publish-toggle > span { color: #2D3149; font-size: 14px; font-weight: 500; line-height: 1; display: block; padding: 10px 17px; border-radius: 10px; } .steps-page__header-right .draft-publish-toggle > span.active { background-color: #6E42D3; color: #fff; } .steps-page__header-right .wpfnl-header-actions { display: flex; align-items: center; gap: 10px; } .steps-page__header-right .wpfnl-header-action { text-align: center; display: flex; flex-flow: column; align-items: center; justify-content: center; box-shadow: none; height: 38px; width: 38px; border: 1px solid #EEF0F3; border-radius: 8px; position: relative; padding: 5px; } .steps-page__header-right .wpfnl-header-action svg { display: block; } .steps-page__header-right .wpfnl-header-action .action-tooltip { position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); border-radius: 8px; background: #10052E; box-shadow: 0 2px 15px 0 rgba(22, 28, 32, 0.08); color: #E8E8E9; font-size: 13px; font-weight: 400; line-height: 1; display: block; padding: 10px 14px; opacity: 0; visibility: hidden; transition: all 0.3s ease; white-space: nowrap; z-index: 1; } .steps-page__header-right .wpfnl-header-action .action-tooltip:before { content: ""; position: absolute; top: 0px; left: 50%; width: 10px; height: 10px; background: #10052E; transform: rotate(45deg) translateX(-50%); border-radius: 2px; } .steps-page__header-right .wpfnl-header-action:hover .action-tooltip { opacity: 1; visibility: visible; top: calc(100% + 10px); z-index: 2; } .steps-page__header-right .btn-default { min-width: auto; position: relative; padding: 0 21px; } .steps-page__header-right .btn-default .wpfnl-loader { display: inline-block; position: relative; top: 2px; right: 0; } .steps-page__header-right .btn-default:disabled, .steps-page__header-right .btn-default[disabled] { color: rgba(64, 64, 64, 0.4); cursor: not-allowed; background-color: rgba(183, 183, 183, 0.4); } .steps-page__header-right .dropdown-option { position: relative; text-align: center; padding: 7px 12px; display: inline-block; margin-left: 6px; cursor: pointer; } .steps-page__header-right .dropdown-option svg { display: block; } .steps-page__header-right .dropdown-option ul.wpfnl-dropdown { right: -14px; top: 50px; } .steps-page__header-right .dropdown-option ul.wpfnl-dropdown .pro-tag { margin-left: 4px; } .steps-page__header-right .dropdown-option ul.wpfnl-dropdown li:first-child { border-radius: 10px 10px 0 0; } .steps-page__header-right .dropdown-option ul.wpfnl-dropdown li:last-child { border-radius: 0 0 10px 10px; } .steps-page__header-right .dropdown-option ul.wpfnl-dropdown a svg { width: 19px; height: 19px; } .steps-page__header-right .dropdown-option ul.wpfnl-dropdown .pro-tag-icon { position: static; margin-left: 6px; } .steps-page__header-right .dropdown-option ul.wpfnl-dropdown .pro-tag-icon svg { width: 18px; height: 18px; } .steps-page__header-right .dropdown-option ul.wpfnl-dropdown .pro-tag-icon svg:hover path { stroke: inherit; fill: inherit; } .steps-page__header-right .dropdown-option.show ul.wpfnl-dropdown { top: 38px; opacity: 1; visibility: visible; } .steps-page__header-right .dropdown-option[data-tour=yes] { z-index: 4; background-color: #ffffff; } .steps-page__header-right .funnel-stats[data-tour=yes] { position: relative; z-index: 4; } .steps-page__header-right .funnel-stats[data-tour=yes] .title { color: #FFF; } .steps-page__header-right .preview-funnel[data-tour=yes] { position: relative; z-index: 4; } .steps-page__header-right .preview-funnel[data-tour=yes] svg circle, .steps-page__header-right .preview-funnel[data-tour=yes] svg path { stroke: #FFF; } @media only screen and (max-width: 1199px) { .steps-page__header { padding-right: 10px; } .steps-page__header-left .back-link { width: 44px; } .steps-page__header-left .add-step-condtion-area li button { padding: 0 14px; } .steps-page__header-right .funnel-stats { border-right: none; padding-right: 0; } .steps-page__header-right .btn-default { padding: 0 20px; } .steps-page__header-center .steps-page__fnl-name label { display: none; } .steps-page__header-center .steps-page__fnl-name .wpfnl-alert { left: 0; } } @media only screen and (max-width: 991px) { .steps-page__header-center .steps-page__fnl-name input[type=text] { width: 200px; } } @media only screen and (max-width: 870px) { .steps-page__header { padding-right: 15px; } .steps-page__header-left .copy-clipboard .link-icon { display: none; } } .funnel-window .wpfnl-canvas-analytics { position: relative; display: flex; align-items: center; justify-content: center; gap: 60px; background: #FFF; box-shadow: 0 1px 2px 0 rgba(190, 190, 215, 0.14); padding: 18px 15px; border-top: 1px solid rgba(190, 190, 215, 0.14); transition: padding 0.2s ease; } .funnel-window .wpfnl-canvas-analytics.is-collapsed { padding: 0 5px; } .funnel-window .wpfnl-canvas-analytics .analytics-toggle-btn { position: absolute; right: 20px; top: 100%; transform: translateY(-1px); width: 28px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 0 0 5px 5px; background: #fff; box-shadow: 0 2px 5px 0 rgba(190, 190, 215, 0.31); z-index: 1; } .funnel-window .wpfnl-canvas-analytics .analytics-toggle-btn:hover { background: #f0eefa; } .funnel-window .wpfnl-canvas-analytics .analytics-toggle-btn__chevron { transition: transform 0.2s ease; display: block; transform-origin: center center; } .funnel-window .wpfnl-canvas-analytics .analytics-toggle-btn__chevron.is-up { transform: rotate(180deg); } .funnel-window .wpfnl-canvas-analytics .analytics-items { display: flex; align-items: center; justify-content: center; gap: 60px; } .funnel-window .wpfnl-canvas-analytics .analytics-item { text-align: center; position: relative; } .funnel-window .wpfnl-canvas-analytics .analytics-item:before { content: ""; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; background-color: #D9D6E3; } .funnel-window .wpfnl-canvas-analytics .analytics-item:last-child:before { display: none; } .funnel-window .wpfnl-canvas-analytics .analytics-label { color: #848994; font-size: 12px; font-weight: 400; line-height: 1; } .funnel-window .wpfnl-canvas-analytics .analytics-value { color: #2D3149; font-size: 14px; font-weight: 500; line-height: 1; margin-top: 8px; } .steps-page__header-mode { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; z-index: 1; } .vf-mode-switcher { display: flex; flex-flow: row nowrap; align-items: center; background: #ffffff; border: 1px solid #e0e3ed; border-radius: 8px; flex-shrink: 0; } .vf-mode-btn { display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 18px; border: none; border-radius: 0; background: transparent; color: #98a2b3; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; position: relative; } .vf-mode-btn:first-child { border-radius: 7px 0 0 7px; } .vf-mode-btn:last-child { border-radius: 0 7px 7px 0; } .vf-mode-btn + .vf-mode-btn { border-left: 1px solid #e0e3ed; } .vf-mode-btn:hover:not(.vf-mode-btn--active) { background: #f6f5fa; color: #667085; } .vf-mode-btn--active { background: #f1ecfb; color: #6e42d3; font-weight: 600; } .vf-mode-switcher--rail { flex-flow: column nowrap; border-radius: 6px; border-color: #eaecf0; } .vf-mode-switcher--rail .vf-mode-btn { width: 100%; height: 30px; padding: 0 10px; font-size: 12px; } .vf-mode-switcher--rail .vf-mode-btn:first-child { border-radius: 5px 5px 0 0; } .vf-mode-switcher--rail .vf-mode-btn:last-child { border-radius: 0 0 5px 5px; } .vf-mode-switcher--rail .vf-mode-btn + .vf-mode-btn { border-left: none; border-top: 1px solid #eaecf0; } @media screen and (max-width: 1280px) { .steps-page__header-mode { position: static; transform: none; margin-left: auto; } } .funnel-window { display: flex; flex-direction: column; height: calc(100vh - 32px); overflow: hidden; } .funnel-window .wpfnl-canvas-zoom-control { display: flex; align-items: center; row-gap: 6px; z-index: 2; padding: 0; position: absolute; top: 50px; right: 16px; flex-flow: column; } .funnel-window .wpfnl-canvas-zoom-control .zoom-controls { display: flex; align-items: center; flex-direction: column; gap: 0px; background: #ffffff; padding: 0; flex-shrink: 0; border-radius: 6px; border: 1px solid #eaecf0; } .funnel-window .wpfnl-canvas-zoom-control .zoom-level, .funnel-window .wpfnl-canvas-zoom-control .full-screen, .funnel-window .wpfnl-canvas-zoom-control .zoom-out, .funnel-window .wpfnl-canvas-zoom-control .zoom-in { border: none; border-bottom: 1px solid #EEF0F3; width: 34px; height: 34px; background: transparent; display: flex; flex-flow: column; align-items: center; justify-content: center; cursor: pointer; position: relative; } .funnel-window .wpfnl-canvas-zoom-control .zoom-level .action-tooltip, .funnel-window .wpfnl-canvas-zoom-control .full-screen .action-tooltip, .funnel-window .wpfnl-canvas-zoom-control .zoom-out .action-tooltip, .funnel-window .wpfnl-canvas-zoom-control .zoom-in .action-tooltip { position: absolute; top: 50%; right: calc(100% + 12px); transform: translateY(-50%); border-radius: 8px; background: #10052E; box-shadow: 0 2px 15px 0 rgba(22, 28, 32, 0.08); color: #E8E8E9; font-size: 12px; font-weight: 400; line-height: 1; padding: 8px 12px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease, right 0.2s ease; white-space: nowrap; z-index: 10; pointer-events: none; } .funnel-window .wpfnl-canvas-zoom-control .zoom-level .action-tooltip:after, .funnel-window .wpfnl-canvas-zoom-control .full-screen .action-tooltip:after, .funnel-window .wpfnl-canvas-zoom-control .zoom-out .action-tooltip:after, .funnel-window .wpfnl-canvas-zoom-control .zoom-in .action-tooltip:after { content: ""; position: absolute; top: 50%; right: -4px; width: 8px; height: 8px; background: #10052E; transform: translateY(-50%) rotate(45deg); border-radius: 2px; } .funnel-window .wpfnl-canvas-zoom-control .zoom-level:hover .action-tooltip, .funnel-window .wpfnl-canvas-zoom-control .full-screen:hover .action-tooltip, .funnel-window .wpfnl-canvas-zoom-control .zoom-out:hover .action-tooltip, .funnel-window .wpfnl-canvas-zoom-control .zoom-in:hover .action-tooltip { opacity: 1; visibility: visible; right: calc(100% + 8px); } .funnel-window .wpfnl-canvas-zoom-control .zoom-in { border-bottom: none; } .funnel-window .wpfnl-canvas-zoom-control .zoom-level { font-weight: 500; font-size: 10px; line-height: 1.2; color: #7A8B9A; text-align: center; } .funnel-window .wpfnl-canvas-zoom-control[data-tour=yes] { z-index: 4; } .wpfnl-drawflow-window.is-expand-mode { position: fixed; inset: 0; z-index: 99999; background: #f6f5fa; } .wpfnl-drawflow-window.is-expand-mode .drawflow-window-header { display: none; } .wpfnl-drawflow-window.is-expand-mode .funnel-window { height: 100vh; } .wpfnl-drawflow-window.is-expand-mode .wpfnl-drawing-wrapper { height: 100vh; } .wpfnl-drawflow-window.is-expand-mode .wpfnl-drawing-window { height: 100vh; } .wpfnl-drawflow-window.is-expand-mode .wpfnl-vertical-flow-view { height: 100vh; } .wpfnl-drawflow-window.is-expand-mode .expand-mode-exit-btn { position: absolute; top: 12px; left: 16px; z-index: 10; display: flex; align-items: center; gap: 5px; background: #ffffff; border: 1px solid #eaecf0; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 12px; font-weight: 500; color: #7a8b9a; transition: background 0.15s ease, color 0.15s ease; } .wpfnl-drawflow-window.is-expand-mode .expand-mode-exit-btn svg { width: 10px; height: 10px; flex-shrink: 0; } .wpfnl-drawflow-window.is-expand-mode .expand-mode-exit-btn svg path { stroke: #7a8b9a; } .wpfnl-drawflow-window.is-expand-mode .expand-mode-exit-btn:hover { background: #f6f5fa; color: #344054; } .wpfnl-drawflow-window.is-expand-mode .expand-mode-exit-btn:hover svg path { stroke: #344054; } body.wpfnl-builder-expand { overflow: hidden; } body.wpfnl-builder-expand #wpadminbar, body.wpfnl-builder-expand #adminmenuwrap, body.wpfnl-builder-expand #adminmenuback { display: none !important; } .wpfnl-box { background: #FFFFFF; box-shadow: 0px 2px 4px rgba(223, 223, 249, 0.25); border-radius: 6px; padding: 25px 30px; margin-bottom: 20px; } .wpfnl-box:last-child { margin-bottom: 0; } .wpfnl-box.transparent { background: transparent; box-shadow: none; padding: 4px 0px; } .wpfnl-field-wrapper { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; margin-bottom: 30px; } .wpfnl-field-wrapper:last-child { margin-bottom: 0; } .wpfnl-field-wrapper > label { width: 240px; padding-right: 10px; } .wpfnl-field-wrapper > label.has-tooltip { display: flex; flex-flow: row; align-items: center; justify-content: flex-start; } .wpfnl-field-wrapper > label.has-tooltip .wpfnl-tooltip { margin-left: 10px; } .wpfnl-field-wrapper .wpfnl-fields { max-width: 410px; width: calc(100% - 240px); } .wpfnl-field-wrapper .wpfnl-fields select { margin-right: 0; } .steps-settings .steps-settings__tab-nav { display: flex; flex-flow: row wrap; align-items: center; margin: 25px 0 22px; } .steps-settings .steps-settings__tab-nav li a { color: #7A8B9A; font-weight: 500; position: relative; display: flex; align-items: center; padding: 0 18px; height: 42px; line-height: 43px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: none; } .steps-settings .steps-settings__tab-nav li a svg { display: block; margin-right: 8px; position: relative; } .steps-settings .steps-settings__tab-nav li .pro-tag { position: absolute; top: -10px; right: 15px; } .steps-settings .steps-settings__tab-nav li.disabled .pro-tag-icon { position: static; margin-left: 6px; margin-top: -3px; } .steps-settings .steps-settings__tab-nav li.active:not(.disabled) a { color: #363B4E; border-color: #6E42D3; background-color: #ffffff; box-shadow: 0 20px 16px 0 rgba(189, 193, 200, 0.2); } .steps-settings .steps-settings__tab-nav li.active:not(.disabled) a .icon.stroke { stroke: #6E42D3; } .steps-settings .steps-settings__tab-nav li.active:not(.disabled) a .icon.order-bump-icon path { fill: #6E42D3; } .steps-settings .steps-settings__tab-nav li.active:not(.disabled) a[href="#general"] path { stroke: #6E42D3; } .steps-settings .steps-settings__tab-nav li.active:not(.disabled).nav-settings rect, .steps-settings .steps-settings__tab-nav li.active:not(.disabled).nav-settings circle, .steps-settings .steps-settings__tab-nav li.active:not(.disabled).nav-settings path, .steps-settings .steps-settings__tab-nav li.active:not(.disabled).nav-stats rect, .steps-settings .steps-settings__tab-nav li.active:not(.disabled).nav-stats circle, .steps-settings .steps-settings__tab-nav li.active:not(.disabled).nav-stats path { stroke: #6E42D3; } .steps-settings .steps-settings__tab-nav li.declare-winner.active a path { stroke: #6E42D3; } .steps-settings .steps-settings__tab-nav li.reset { margin-left: auto; margin-right: 40px; } .steps-settings .steps-settings__tab-nav li.reset button { font-size: 14px; line-height: 1; font-weight: 500; color: #7A8B9A; border: none; background: transparent; display: flex; align-items: center; cursor: pointer; } .steps-settings .steps-settings__tab-nav li.reset button svg { display: block; margin-left: 8px; position: relative; top: -1px; } .steps-settings .steps-settings__tab-nav li.reset button.reseting svg { animation: spin 0.9s linear infinite; } .steps-settings .steps-settings__tab-nav li.nav-tag { margin-left: auto; } .steps-settings .steps-settings__tab-nav li.nav-tag span { color: #8292A0; background: #F7F7FA; border-radius: 30px; display: inline-block; padding: 6px 17px; } .steps-settings .step-settings__single-tab-content { display: none; } .steps-settings .step-settings__single-tab-content #wpfnl-choose-offer[data-tour=yes], .steps-settings .step-settings__single-tab-content #gbf-product-quantity[data-tour=yes], .steps-settings .step-settings__single-tab-content #discount-options[data-tour=yes] { position: relative; z-index: 4; border: 1px solid #FFF; } .steps-settings .step-settings__single-tab-content:first-child { display: block; } .steps-settings .step-settings__single-tab-content .checkout-edit-field-tab__content-wrapper .pro-tag { padding: 14px 35px; text-align: center; margin-top: 30px; box-shadow: none; border-radius: 10px; } .steps-settings .single__settings-box.transparent .wpfnl-field-wrapper > label { width: 250px; } .steps-settings .single__settings-box .select2-hidden-accessible { display: none; } .steps-settings .single__settings-box .select2-container--default { width: 100% !important; border: 1px solid #E5E8F3; border-radius: 4px; padding: 8px; display: block; } .steps-settings .single__settings-box .select2-selection__rendered { font-size: 13px; display: block; } .steps-settings .single__settings-box .select2-selection__rendered .select2-selection__clear { background: #f8d7da; display: inline-block; padding: 0 3px; line-height: 14px; color: #ec4050; margin-right: 2px; border-radius: 100%; cursor: pointer; } .steps-settings .single__settings-box.select-product .wpfnl-field-wrapper { align-items: flex-start; } .steps-settings .single__settings-box.select-product .wpfnl-field-wrapper label { position: relative; top: 21px; } .steps-settings .single__settings-box.select-product .wpfnl-field-wrapper .btn-default { height: 26px; line-height: 26px; font-size: 12px; padding: 0 10px; min-width: auto; margin-right: 6px; border: 1px solid transparent; } .steps-settings .single__settings-box.select-product .wpfnl-field-wrapper .btn-default.create-product { background: #f6f6f8; color: #363B4E; } .steps-settings .single__settings-box.select-product .wpfnl-field-wrapper .btn-default.create-product:hover { color: #6E42D3; } .steps-settings .single__settings-box.select-product .products-wrapper { border: 1px solid #E5E8F3; box-sizing: border-box; border-radius: 5px; padding: 10px; margin-bottom: 10px; } .steps-settings .single__settings-box.select-product .single-product { display: flex; margin-bottom: 10px; } .steps-settings .single__settings-box.select-product .single-product:last-child { margin-bottom: 0; } .steps-settings .single__settings-box.select-product .single-product .select2-container--default { width: calc(100% - 46px) !important; } .steps-settings .single__settings-box.select-product .single-product button { background: #FAFAFB; border: 1px solid #E5E8F3; box-sizing: border-box; border-radius: 4px; width: 36px; height: 36px; margin-left: 10px; display: flex; flex-flow: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .steps-settings .single__settings-box.select-product .single-product button:hover { background-color: #f8d7da; border-color: #f5c6cb; } .steps-settings .single__settings-box.select-product .single-product button:hover svg path { stroke: #ec4050; } .steps-settings .wpfnl-product-options { padding: 0; } .steps-settings .product-options__tab-nav { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; border-bottom: 1px solid #F4F4F9; padding: 0 40px; } .steps-settings .product-options__tab-nav li { margin-right: 35px; } .steps-settings .product-options__tab-nav li:last-child { margin-right: 0; } .steps-settings .product-options__tab-nav li a { font-weight: 500; font-size: 13px; line-height: 15px; color: #7A8B9A; padding: 15px 0; display: block; position: relative; } .steps-settings .product-options__tab-nav li a:after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: transparent; } .steps-settings .product-options__tab-nav li a:hover, .steps-settings .product-options__tab-nav li.active a { color: #6E42D3; } .steps-settings .product-options__tab-nav li a:hover:after, .steps-settings .product-options__tab-nav li.active a:after { background: #6E42D3; } .steps-settings .product-options__single-tab-content { display: none; padding: 30px 40px; } .steps-settings .product-options__single-tab-content:first-child { display: block; } .steps-settings .product-options__single-tab-content .wpfnl-field-wrapper { margin-bottom: 25px; } .steps-settings .product-options__single-tab-content .wpfnl-field-wrapper:last-child { margin-bottom: 0; } .steps-settings .settings-content__footer { padding: 23px 0 20px; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; gap: 14px; } .steps-settings .settings-content__footer .back2-edit { background: #fff; color: #363B4E; } .steps-settings .settings-content__footer .back2-edit:hover { background: rgba(0, 0, 0, 0.04); } .steps-settings .settings-content__footer #save-order-bump[hide-btn=yes] { display: none; } .steps-settings .settings-content__footer .btn-default { display: flex; flex-flow: row; align-items: center; justify-content: center; line-height: 1; height: auto; min-width: auto; padding: 14px 20px 12px; letter-spacing: -0.01em; border-radius: 8px; filter: drop-shadow(0px 10px 16px rgba(97, 103, 116, 0.15)); } .steps-settings .settings-content__footer .btn-default .wpfnl-loader { display: block; } .steps-settings .settings-content__footer .btn-default[data-tour=yes] { position: relative; z-index: 4; border: 1px solid #FFF; } .steps-settings .settings-content__footer .cancel { border: 1px solid #EEF0F3; background: transparent; color: #363B4E; } .steps-settings .settings-content__footer .cancel:hover { background: #EEF0F3; } .steps-settings .settings-content__footer .wpfnl-alert { display: block; border-radius: 8px; padding: 10px 20px; } .steps-settings.downsell .steps-settings__tab-nav li a svg, .steps-settings.upsell .steps-settings__tab-nav li a svg { position: relative; top: 1px; } .steps-settings.downsell .steps-settings__tab-nav li.conditonal-redirect.active a svg path, .steps-settings.upsell .steps-settings__tab-nav li.conditonal-redirect.active a svg path { fill: #6E42D3; stroke: none; } .steps-settings.downsell .wpfnl-field-wrapper .single-product svg, .steps-settings.upsell .wpfnl-field-wrapper .single-product svg { display: none; } .steps-settings.downsell .single__settings-box, .steps-settings.upsell .single__settings-box { border: 1px solid #E5E8F3; box-shadow: none; } .steps-settings.downsell .single__settings-box .select2-container--default, .steps-settings.upsell .single__settings-box .select2-container--default { border: 1px solid #E5E8F3; border-radius: 6px; padding: 4px 8px 2px; display: block; } .steps-settings.downsell .single__settings-box .select2-container--default .select2-selection--single, .steps-settings.upsell .single__settings-box .select2-container--default .select2-selection--single { background-color: #fff; border: none; border-radius: 0; } .steps-settings.downsell .single__settings-box .select2-container--default .select2-selection--single .select2-selection__arrow, .steps-settings.upsell .single__settings-box .select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px; position: absolute; top: 4px; right: 1px; width: 20px; } .steps-settings.downsell .offer-discount-area .wpfnl-box, .steps-settings.upsell .offer-discount-area .wpfnl-box { box-shadow: none; border-radius: 10px; } .steps-settings.downsell .offer-discount-area .non-input-field, .steps-settings.upsell .offer-discount-area .non-input-field { cursor: not-allowed; background-color: #F6F5FA; font-size: 14px; color: #7A8B9A; padding: 13px 15px; height: 44px; width: 100%; min-width: 190px; border-radius: 6px; display: block; border: 1px solid #EBEDF0; } .steps-settings.downsell .offer-discount-area .hints.mobile, .steps-settings.upsell .offer-discount-area .hints.mobile { display: none; } .steps-settings.downsell .settings-content__footer .wpfnl-loader, .steps-settings.upsell .settings-content__footer .wpfnl-loader { display: block; } .steps-settings.downsell .settings-content__footer .wpfnl-alert, .steps-settings.upsell .settings-content__footer .wpfnl-alert { display: block; } .steps-settings.downsell .wpfnl-fields.price-range, .steps-settings.upsell .wpfnl-fields.price-range { display: flex; flex-flow: row wrap; } .steps-settings.downsell .wpfnl-fields.price-range .price-to, .steps-settings.downsell .wpfnl-fields.price-range .price-from, .steps-settings.upsell .wpfnl-fields.price-range .price-to, .steps-settings.upsell .wpfnl-fields.price-range .price-from { width: 50%; } .steps-settings.downsell .wpfnl-fields.price-range .price-to > label, .steps-settings.downsell .wpfnl-fields.price-range .price-from > label, .steps-settings.upsell .wpfnl-fields.price-range .price-to > label, .steps-settings.upsell .wpfnl-fields.price-range .price-from > label { margin-bottom: 5px; display: block; } .steps-settings.downsell .wpfnl-fields.price-range .price-to .wpfnl-fields, .steps-settings.downsell .wpfnl-fields.price-range .price-from .wpfnl-fields, .steps-settings.upsell .wpfnl-fields.price-range .price-to .wpfnl-fields, .steps-settings.upsell .wpfnl-fields.price-range .price-from .wpfnl-fields { width: 100%; } .steps-settings.downsell .wpfnl-fields.price-range .price-to .wpfnl-fields input[type=number], .steps-settings.downsell .wpfnl-fields.price-range .price-from .wpfnl-fields input[type=number], .steps-settings.upsell .wpfnl-fields.price-range .price-to .wpfnl-fields input[type=number], .steps-settings.upsell .wpfnl-fields.price-range .price-from .wpfnl-fields input[type=number] { min-width: auto; } .steps-settings.downsell .wpfnl-fields.price-range .price-from, .steps-settings.upsell .wpfnl-fields.price-range .price-from { padding-right: 10px; } .steps-settings.downsell .wpfnl-fields.price-range .price-to, .steps-settings.upsell .wpfnl-fields.price-range .price-to { padding-left: 10px; } .steps-settings.thank-you .single__settings-box { border: 1px solid #E5E8F3; box-shadow: none; border-radius: 10px; } .steps-settings.thank-you .enabled-thankyou-page-redirection { margin-top: 24px; background-color: #F6F5FA; padding: 24px; border-radius: 10px; } .steps-settings.thank-you .redirect-thankyou-page { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; background-color: #F6F5FA; border-radius: 10px; } .steps-settings.thank-you .redirect-thankyou-page .single-page-option { position: relative; } .steps-settings.thank-you .redirect-thankyou-page .single-page-option > input[type=radio] { display: none; } .steps-settings.thank-you .redirect-thankyou-page .single-page-option .option-label { border-radius: 10px; border: 1px solid #E4E0F0; background-color: #FFF; cursor: pointer; padding: 24px; display: block; height: 100%; } .steps-settings.thank-you .redirect-thankyou-page .single-page-option .radio-point { position: absolute; top: 16px; right: 16px; } .steps-settings.thank-you .redirect-thankyou-page .single-page-option .radio-point circle:first-child { transform: scale(0); transform-origin: center; transition: all 0.3s ease; } .steps-settings.thank-you .redirect-thankyou-page .single-page-option > input[type=radio]:checked + .option-label { border-color: #6E42D3; } .steps-settings.thank-you .redirect-thankyou-page .single-page-option > input[type=radio]:checked + .option-label .radio-point circle:first-child { transform: scale(1); } .steps-settings.thank-you .redirect-thankyou-page .single-page-option h4 { color: #363B4E; font-size: 16px; font-weight: 500; line-height: 1.37; margin-bottom: 8px; max-width: 95%; } .steps-settings.thank-you .redirect-thankyou-page .single-page-option p { color: #525562; font-size: 14px; font-weight: 400; line-height: 1.4; } .steps-settings.thank-you .settings-content__footer .wpfnl-loader { display: none; } .steps-settings.thank-you .settings-content__footer .wpfnl-alert { display: none; } @media only screen and (max-width: 1400px) { .wpfnl-box { padding: 20px 20px; } } @media only screen and (max-width: 1199px) { .steps-settings .product .single__settings-box .wpfnl-field-wrapper label { width: 150px; } .steps-settings .product .single__settings-box .wpfnl-field-wrapper .wpfnl-fields { width: calc(100% - 150px); } .steps-settings .steps-settings__tab-nav li.reset { margin-right: 0; } } .step-settings__single-tab-content .product-mode-selection, .checkout-product-setting-tab__content-wrapper .product-mode-selection { border-radius: 10px; padding: 20px; margin-bottom: 20px; border: 1px solid #EEF0F3; background: #fff; } .step-settings__single-tab-content .product-mode-selection .pms-header, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; } .step-settings__single-tab-content .product-mode-selection .pms-title, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-title { font-size: 16px; font-weight: 600; color: #111827; line-height: 1.4; } .step-settings__single-tab-content .product-mode-selection .pms-subtitle, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-subtitle { font-size: 14px; color: #6b7280; line-height: 1.4; } .step-settings__single-tab-content .product-mode-selection .pms-cards, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .step-settings__single-tab-content .product-mode-selection .pms-card, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1.5px solid #e5e7eb; border-radius: 10px; cursor: pointer; background: #fff; transition: border-color 0.15s, background 0.15s; } .step-settings__single-tab-content .product-mode-selection .pms-card.pms-card--active, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card.pms-card--active { border-color: #7c6ff7; background: #f0effe; } .step-settings__single-tab-content .product-mode-selection .pms-radio-input, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-radio-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .step-settings__single-tab-content .product-mode-selection .pms-card-top, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card-top { display: flex; align-items: center; gap: 10px; } .step-settings__single-tab-content .product-mode-selection .pms-card-icon, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; } .step-settings__single-tab-content .product-mode-selection .pms-card-icon.pms-card-icon--assign, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card-icon.pms-card-icon--assign { background: #ede9ff; color: #6c5ce7; } .step-settings__single-tab-content .product-mode-selection .pms-card-icon.pms-card-icon--smart, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card-icon.pms-card-icon--smart { background: #d1fae5; color: #059669; } .step-settings__single-tab-content .product-mode-selection .pms-card-name, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card-name { font-size: 14px; font-weight: 600; color: #111827; flex: 1; } .step-settings__single-tab-content .product-mode-selection .pms-radio-dot, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-radio-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d1d5db; flex-shrink: 0; transition: border-color 0.15s, background 0.15s; } .step-settings__single-tab-content .product-mode-selection .pms-radio-dot.pms-radio-dot--checked, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-radio-dot.pms-radio-dot--checked { border-color: #7c6ff7; background: #7c6ff7; } .step-settings__single-tab-content .product-mode-selection .pms-radio-inner, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-radio-inner { display: block; width: 6px; height: 6px; border-radius: 50%; background: #fff; } .step-settings__single-tab-content .product-mode-selection .pms-card-desc, .checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card-desc { font-size: 13px; color: #6b7280; line-height: 1.5; margin: 0; } .step-settings__single-tab-content, .checkout-product-setting-tab__content-wrapper { /* Conditional Funnel dummy/upgrade preview */ } .step-settings__single-tab-content .conditional-funnel-preview, .checkout-product-setting-tab__content-wrapper .conditional-funnel-preview { position: relative; overflow: hidden; padding: 0; background: #f5f6fa; } .step-settings__single-tab-content .conditional-funnel-dummy, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy { pointer-events: none; user-select: none; padding: 20px; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-wrapper, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-wrapper { display: flex; flex-direction: column; gap: 0; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-row, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: #fff; border-radius: 8px; padding: 20px 24px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-left, .step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-right, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-left, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-right { display: flex; flex-direction: column; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-left .wpfnl-form-group, .step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-right .wpfnl-form-group, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-left .wpfnl-form-group, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-right .wpfnl-form-group { display: flex; flex-direction: column; gap: 8px; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-left label, .step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-right label, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-left label, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-right label { font-size: 13px; font-weight: 500; color: #363b4e; } .step-settings__single-tab-content .conditional-funnel-dummy .required-star, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .required-star { color: #e74c3c; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-select, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-select { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #dde1e7; border-radius: 6px; padding: 10px 14px; font-size: 13px; color: #7a8b9a; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-select-text, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-select-text { color: #7a8b9a; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-input, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-input { width: 100%; border: 1px solid #dde1e7; border-radius: 6px; padding: 10px 14px; font-size: 13px; color: #363b4e; background: #fff; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-tag-field, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-tag-field { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; background: #fff; border: 1px solid #dde1e7; border-radius: 6px; padding: 8px 14px; min-height: 42px; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-tag, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-tag { display: inline-flex; align-items: center; background: #f0f1f5; border-radius: 4px; padding: 2px 8px; font-size: 12px; color: #363b4e; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-connector, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-connector { display: flex; justify-content: center; height: 32px; position: relative; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-connector-line, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-connector-line { width: 1px; height: 100%; background: #c5cad4; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-add-condition, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-add-condition { display: flex; flex-direction: column; align-items: center; margin-top: 0; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-add-line, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-add-line { width: 1px; height: 20px; background: #c5cad4; } .step-settings__single-tab-content .conditional-funnel-dummy .dummy-add-btn, .checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-add-btn { width: 32px; height: 32px; border-radius: 50%; background: #6a3fc8; border: none; display: flex; align-items: center; justify-content: center; cursor: default; box-shadow: 0 2px 8px rgba(106, 63, 200, 0.35); } .step-settings__single-tab-content .conditional-funnel-upgrade-overlay, .checkout-product-setting-tab__content-wrapper .conditional-funnel-upgrade-overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.78); border-radius: 10px; } .step-settings__single-tab-content .conditional-funnel-upgrade-overlay .upgrade-overlay-content, .checkout-product-setting-tab__content-wrapper .conditional-funnel-upgrade-overlay .upgrade-overlay-content { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 12px; padding: 32px 24px; max-width: 420px; background: rgba(255, 255, 255, 0.9215686275); height: 100%; } .step-settings__single-tab-content .conditional-funnel-upgrade-overlay .upgrade-lock-icon, .checkout-product-setting-tab__content-wrapper .conditional-funnel-upgrade-overlay .upgrade-lock-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #f1f3f5; margin-bottom: 4px; } .step-settings__single-tab-content .conditional-funnel-upgrade-overlay .upgrade-overlay-content p, .checkout-product-setting-tab__content-wrapper .conditional-funnel-upgrade-overlay .upgrade-overlay-content p { font-size: 13px; color: #7a8b9a; line-height: 1.6; margin: 0; } .step-settings__single-tab-content .product-accordion__wrapper, .checkout-product-setting-tab__content-wrapper .product-accordion__wrapper { position: relative; } .step-settings__single-tab-content .product-area, .checkout-product-setting-tab__content-wrapper .product-area { background: #FFFFFF; border-radius: 10px; border: 1px solid #EEF0F3; } .step-settings__single-tab-content .product-head, .checkout-product-setting-tab__content-wrapper .product-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 16px 30px; border-bottom: 1px solid #EEF0F3; } .step-settings__single-tab-content .product-head .title, .checkout-product-setting-tab__content-wrapper .product-head .title { font-weight: 600; font-size: 16px; line-height: 1; color: #363B4E; text-transform: capitalize; margin-right: 10px; } .step-settings__single-tab-content .product-head .product-right, .checkout-product-setting-tab__content-wrapper .product-head .product-right { display: flex; align-items: center; gap: 15px; row-gap: 8px; } .step-settings__single-tab-content .product-head .create-product-btn, .checkout-product-setting-tab__content-wrapper .product-head .create-product-btn { margin-left: auto; margin-right: 10px; } .step-settings__single-tab-content .product-head .create-product-btn .btn-default, .checkout-product-setting-tab__content-wrapper .product-head .create-product-btn .btn-default { background: none; color: #6e42d3; padding: 0px; border-bottom: 1px solid #6e42d3; border-radius: 0px; min-width: auto; line-height: 1; height: auto; } .step-settings__single-tab-content .product-head .wpfnl-tooltip, .checkout-product-setting-tab__content-wrapper .product-head .wpfnl-tooltip { margin-left: 5px; margin-right: 10px; } .step-settings__single-tab-content .product-head .add-product-btn .btn-default, .checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default { height: 40px; line-height: 41px; background: #F7F7FA; border: 1px solid #E5E8F3; color: #363B4E; padding: 0 16px; } .step-settings__single-tab-content .product-head .add-product-btn .btn-default:disabled, .step-settings__single-tab-content .product-head .add-product-btn .btn-default[disabled=disabled], .checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default:disabled, .checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default[disabled=disabled] { opacity: 0.7; cursor: not-allowed; } .step-settings__single-tab-content .product-head .add-product-btn .btn-default.wpfnl-btn-primary-color, .checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default.wpfnl-btn-primary-color { background: #6E42D3; border-color: #6E42D3; color: #FFFFFF; } .step-settings__single-tab-content .product-head .add-product-btn .btn-default.wpfnl-btn-primary-color svg path, .checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default.wpfnl-btn-primary-color svg path { stroke: #FFFFFF; } .step-settings__single-tab-content .product-head .add-product-btn .btn-default .add-product-icon, .checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default .add-product-icon { position: relative; display: inline-block; width: 18px; height: 18px; } .step-settings__single-tab-content .product-head .add-product-btn .btn-default .icon-tabler-arrow-narrow-left, .checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default .icon-tabler-arrow-narrow-left { transform: rotate(-90deg); position: relative; top: 5px; display: none; animation: scrollDown1 1.5s ease infinite; stroke: none; } .step-settings__single-tab-content .product-head .add-product-btn .btn-default .product-adding .icon-tabler-arrow-narrow-left, .checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default .product-adding .icon-tabler-arrow-narrow-left { display: block; } .step-settings__single-tab-content .product-head .add-product-btn .btn-default .product-adding .plus-icon, .checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default .product-adding .plus-icon { display: none; } .step-settings__single-tab-content .product-head .add-product-btn .btn-default.product-added, .checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default.product-added { border-color: #6E42D3; background-color: #6E42D3; color: #fff; } .step-settings__single-tab-content .product-head .add-product-btn .btn-default.product-added .plus-icon path, .checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default.product-added .plus-icon path { stroke: #fff; } .step-settings__single-tab-content .product-head .add-product-btn .btn-default.product-added .icon-tabler-arrow-narrow-left, .checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default.product-added .icon-tabler-arrow-narrow-left { stroke: #fff; } .step-settings__single-tab-content .product-head .add-product-btn button[data-tour=yes], .checkout-product-setting-tab__content-wrapper .product-head .add-product-btn button[data-tour=yes] { position: relative; z-index: 4; } .step-settings__single-tab-content .product-head .create-product-button button[data-tour=yes], .checkout-product-setting-tab__content-wrapper .product-head .create-product-button button[data-tour=yes] { position: relative; z-index: 4; } @keyframes scrollDown1 { 0% { transform: rotate(-90deg) translateX(15px); opacity: 0; } 50% { transform: rotate(-90deg) translateX(0px); opacity: 1; } 100% { transform: rotate(-90deg) translateX(-15px); opacity: 0; } } .step-settings__single-tab-content .accordion-footer .accordion-col, .step-settings__single-tab-content .accordion-head .accordion-col, .checkout-product-setting-tab__content-wrapper .accordion-footer .accordion-col, .checkout-product-setting-tab__content-wrapper .accordion-head .accordion-col { color: #7A8B9A; font-size: 14px; font-weight: 400; line-height: 1; text-transform: capitalize; letter-spacing: 0.35px; } .step-settings__single-tab-content .accordion-head, .checkout-product-setting-tab__content-wrapper .accordion-head { background-color: #F6F5FA; padding: 15px 30px; } .step-settings__single-tab-content .accordion-footer, .step-settings__single-tab-content .product-single__accordion-head, .step-settings__single-tab-content .accordion-head, .checkout-product-setting-tab__content-wrapper .accordion-footer, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head, .checkout-product-setting-tab__content-wrapper .accordion-head { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; } .step-settings__single-tab-content .accordion-footer .product-name, .step-settings__single-tab-content .product-single__accordion-head .product-name, .step-settings__single-tab-content .accordion-head .product-name, .checkout-product-setting-tab__content-wrapper .accordion-footer .product-name, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name, .checkout-product-setting-tab__content-wrapper .accordion-head .product-name { width: 340px; } .step-settings__single-tab-content .accordion-footer .product-price, .step-settings__single-tab-content .product-single__accordion-head .product-price, .step-settings__single-tab-content .accordion-head .product-price, .checkout-product-setting-tab__content-wrapper .accordion-footer .product-price, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-price, .checkout-product-setting-tab__content-wrapper .accordion-head .product-price { width: 77px; cursor: text; } .step-settings__single-tab-content .accordion-footer .product-quantity, .step-settings__single-tab-content .product-single__accordion-head .product-quantity, .step-settings__single-tab-content .accordion-head .product-quantity, .checkout-product-setting-tab__content-wrapper .accordion-footer .product-quantity, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-quantity, .checkout-product-setting-tab__content-wrapper .accordion-head .product-quantity { width: 80px; } .step-settings__single-tab-content .accordion-footer .total-price, .step-settings__single-tab-content .product-single__accordion-head .total-price, .step-settings__single-tab-content .accordion-head .total-price, .checkout-product-setting-tab__content-wrapper .accordion-footer .total-price, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .total-price, .checkout-product-setting-tab__content-wrapper .accordion-head .total-price { width: 120px; text-align: right; } .step-settings__single-tab-content .accordion-footer .total-price span, .step-settings__single-tab-content .product-single__accordion-head .total-price span, .step-settings__single-tab-content .accordion-head .total-price span, .checkout-product-setting-tab__content-wrapper .accordion-footer .total-price span, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .total-price span, .checkout-product-setting-tab__content-wrapper .accordion-head .total-price span { color: #363B4E; font-size: 14px; line-height: 14px; } .step-settings__single-tab-content .accordion-footer .product-action, .step-settings__single-tab-content .product-single__accordion-head .product-action, .step-settings__single-tab-content .accordion-head .product-action, .checkout-product-setting-tab__content-wrapper .accordion-footer .product-action, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-action, .checkout-product-setting-tab__content-wrapper .accordion-head .product-action { width: 60px; text-align: right; } .step-settings__single-tab-content .product__single-accordion, .checkout-product-setting-tab__content-wrapper .product__single-accordion { border-top: 1px solid #EEF0F3; position: relative; } .step-settings__single-tab-content .product__single-accordion.ui-sortable-helper, .checkout-product-setting-tab__content-wrapper .product__single-accordion.ui-sortable-helper { background: #ececec; } .step-settings__single-tab-content .product-single__accordion-head, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head { padding: 14px 30px; position: relative; } .step-settings__single-tab-content .product-single__accordion-head .accordion-col, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col { font-size: 14px; line-height: 16px; color: #7A8B9A; } .step-settings__single-tab-content .product-single__accordion-head .accordion-col span, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col span { color: #7A8B9A; } .step-settings__single-tab-content .product-single__accordion-head .accordion-col select, .step-settings__single-tab-content .product-single__accordion-head .accordion-col input, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col select, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col input { font-size: 14px; line-height: 16px; color: #363B4E; } .step-settings__single-tab-content .product-single__accordion-head .accordion-col select::placeholder, .step-settings__single-tab-content .product-single__accordion-head .accordion-col input::placeholder, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col select::placeholder, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col input::placeholder { color: #363B4E; } .step-settings__single-tab-content .product-single__accordion-head .accordion-col select:-ms-input-placeholder, .step-settings__single-tab-content .product-single__accordion-head .accordion-col input:-ms-input-placeholder, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col select:-ms-input-placeholder, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col input:-ms-input-placeholder { color: #363B4E; } .step-settings__single-tab-content .product-single__accordion-head .accordion-col select::-ms-input-placeholder, .step-settings__single-tab-content .product-single__accordion-head .accordion-col input::-ms-input-placeholder, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col select::-ms-input-placeholder, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col input::-ms-input-placeholder { color: #363B4E; } .step-settings__single-tab-content .product-single__accordion-head .product-name ul, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul { display: flex; align-items: center; } .step-settings__single-tab-content .product-single__accordion-head .product-name ul .product-img a, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul .product-img a { display: block; } .step-settings__single-tab-content .product-single__accordion-head .product-name ul .product-img img, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul .product-img img { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; } .step-settings__single-tab-content .product-single__accordion-head .product-name ul .product-title, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul .product-title { padding-left: 12px; width: calc(100% - 50px); } .step-settings__single-tab-content .product-single__accordion-head .product-name ul .product-title .title, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul .product-title .title { font-weight: 500; font-size: 14px; line-height: 16px; color: #363B4E; } .step-settings__single-tab-content .product-single__accordion-head .product-name ul .product-title .title:hover, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul .product-title .title:hover { text-decoration: underline; } .step-settings__single-tab-content .product-single__accordion-head .product-name ul .product-title .price, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul .product-title .price { display: block; font-size: 12px; line-height: 14px; color: #363B4E; margin-top: 4px; } .step-settings__single-tab-content .product-single__accordion-head .product-quantity input[type=number], .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-quantity input[type=number] { min-width: auto; border-color: #EEF0F3; border-radius: 8px; padding: 5px 10px; height: 30px; width: 63px; } .step-settings__single-tab-content .product-single__accordion-head .product-action, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-action { display: flex; } .step-settings__single-tab-content .product-single__accordion-head .product-action .product-edit, .step-settings__single-tab-content .product-single__accordion-head .product-action .product-delete, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-action .product-edit, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-action .product-delete { width: 30px; height: 30px; display: flex; align-items: center; justify-content: flex-end; background: transparent; border: none; cursor: pointer; } .step-settings__single-tab-content .product-single__accordion-head .product-action .product-edit svg, .step-settings__single-tab-content .product-single__accordion-head .product-action .product-delete svg, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-action .product-edit svg, .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-action .product-delete svg { display: block; } .step-settings__single-tab-content .accordion-footer, .checkout-product-setting-tab__content-wrapper .accordion-footer { border-top: 1px solid #EEF0F3; padding: 14px 30px; justify-content: flex-end; } .step-settings__single-tab-content .accordion-footer .total-price, .checkout-product-setting-tab__content-wrapper .accordion-footer .total-price { display: flex; justify-content: flex-end; color: #363B4E; font-size: 16px; font-weight: 600; line-height: 1; } .step-settings__single-tab-content .accordion-footer .total-price span, .checkout-product-setting-tab__content-wrapper .accordion-footer .total-price span { letter-spacing: 0.857143px; font-weight: 700; margin-left: 4px; font-size: 12px; } .step-settings__single-tab-content .product__single-accordion .product-single__accordion-body, .checkout-product-setting-tab__content-wrapper .product__single-accordion .product-single__accordion-body { display: none; } .step-settings__single-tab-content .product__single-accordion.active, .checkout-product-setting-tab__content-wrapper .product__single-accordion.active { background: rgba(110, 66, 211, 0.07); border-top-color: transparent; } .step-settings__single-tab-content .product__single-accordion.active::before, .checkout-product-setting-tab__content-wrapper .product__single-accordion.active::before { background-color: #6E42D3; } .step-settings__single-tab-content .product-single__accordion-body, .checkout-product-setting-tab__content-wrapper .product-single__accordion-body { padding: 0 25px 25px; } .step-settings__single-tab-content .product-single__accordion-body-content, .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content { display: flex; flex-flow: row wrap; background: #fff; box-shadow: 0px 2px 4px rgba(223, 223, 249, 0.25); border-radius: 10px; } .step-settings__single-tab-content .product-single__accordion-body-content .subtext-settings, .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .subtext-settings { width: 50%; padding: 20px 60px 20px 25px; border-right: 1px solid #E5E8F3; } .step-settings__single-tab-content .product-single__accordion-body-content .subtext-settings .wpfnl-field-wrapper, .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .subtext-settings .wpfnl-field-wrapper { align-items: flex-start; } .step-settings__single-tab-content .product-single__accordion-body-content .subtext-settings .wpfnl-field-wrapper label, .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .subtext-settings .wpfnl-field-wrapper label { margin-top: 11px; } .step-settings__single-tab-content .product-single__accordion-body-content .highlights, .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .highlights { width: 50%; padding: 20px 20px 20px 60px; } .step-settings__single-tab-content .product-single__accordion-body-content .wpfnl-field-wrapper label, .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .wpfnl-field-wrapper label { width: 145px; } .step-settings__single-tab-content .product-single__accordion-body-content .wpfnl-fields, .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .wpfnl-fields { max-width: 100%; width: calc(100% - 145px); } .step-settings__single-tab-content .no-product-notice, .checkout-product-setting-tab__content-wrapper .no-product-notice { text-align: center; padding: 15px 10px; } .step-settings__single-tab-content .wpfnl-discount-settings, .checkout-product-setting-tab__content-wrapper .wpfnl-discount-settings { border: 1px solid #EEF0F3; box-shadow: none; border-radius: 10px; margin-top: 30px; padding: 30px; } .step-settings__single-tab-content .wpfnl-discount-settings .non-input-field, .checkout-product-setting-tab__content-wrapper .wpfnl-discount-settings .non-input-field { cursor: not-allowed; background-color: #F6F5FA; font-size: 14px; color: #7A8B9A; padding: 13px 15px; height: 44px; width: 100%; min-width: 190px; border-radius: 6px; display: block; border: 1px solid #EBEDF0; } .step-settings__single-tab-content .wpfnl-discount-settings[data-tour=yes] #discount-options, .checkout-product-setting-tab__content-wrapper .wpfnl-discount-settings[data-tour=yes] #discount-options { z-index: 4; position: relative; } .step-settings__single-tab-content .wpfnl-single-settings-control, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #EEF0F3; padding: 24px 0; } .step-settings__single-tab-content .wpfnl-single-settings-control:first-child, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control:first-child { padding-top: 0; } .step-settings__single-tab-content .wpfnl-single-settings-control:last-child, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control:last-child { border-bottom: none; padding-bottom: 0; } .step-settings__single-tab-content .wpfnl-single-settings-control.wpnfl-align-top, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control.wpnfl-align-top { align-items: flex-start; } .step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-title, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-title { width: calc(55% - 15px); } .step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-title h4, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-title h4 { color: #363B4E; font-size: 16px; font-weight: 500; line-height: 1.3; } .step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-title p, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-title p { color: #525562; font-size: 14px; font-weight: 400; line-height: 1.4; margin-top: 3px; } .step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field { width: 45%; max-width: 250px; display: flex; flex-flow: column; align-items: flex-end; gap: 12px; } .step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field > input:not([type=checkbox], [type=radio]), .step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field > select, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field > input:not([type=checkbox], [type=radio]), .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field > select { width: 250px; height: 44px; border-radius: 10px; border-color: #EBEDF0; margin-left: auto; color: #525562; } .step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field .settings-control-price, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field .settings-control-price { width: 250px; height: 44px; border-radius: 10px; border-color: #EBEDF0; margin-left: auto; background: #F6F5FA; padding: 10px 15px; display: flex; flex-flow: column; justify-content: center; } .step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field .wpfnl-switcher .pro-tag-icon, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field .wpfnl-switcher .pro-tag-icon { position: absolute; top: 0; left: -30px; } .step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field .wpfnl-checkbox, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field .wpfnl-checkbox { position: relative; } .step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field .wpfnl-checkbox .pro-tag-icon, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field .wpfnl-checkbox .pro-tag-icon { position: absolute; top: 0; left: -30px; } .step-settings__single-tab-content .wpfnl-single-settings-control .div-to-append-range-calender, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .div-to-append-range-calender { position: absolute; } .step-settings__single-tab-content .wpfnl-single-settings-control .div-to-append-range-calender .ui-datepicker, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .div-to-append-range-calender .ui-datepicker { border: 1px solid #eef0f3; border-radius: 10px; padding: 8px; } .step-settings__single-tab-content .wpfnl-single-settings-control .div-to-append-range-calender .ui-datepicker .ui-datepicker-title, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .div-to-append-range-calender .ui-datepicker .ui-datepicker-title { display: flex; } .step-settings__single-tab-content .wpfnl-single-settings-control .div-to-append-range-calender .ui-datepicker .ui-datepicker-title select, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .div-to-append-range-calender .ui-datepicker .ui-datepicker-title select { width: auto; min-width: max-content; flex: 1; height: 28px; min-height: auto; margin: 0; } .step-settings__single-tab-content .wpfnl-single-settings-control.enable-discount, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control.enable-discount { border-bottom: 0; padding-bottom: 0; } .step-settings__single-tab-content .wpfnl-single-settings-control.discount .settings-control-field, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control.discount .settings-control-field { flex-flow: row; width: 100%; max-width: 100%; justify-content: flex-end; } .step-settings__single-tab-content .wpfnl-single-settings-control.discount .settings-control-field label, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control.discount .settings-control-field label { display: block; margin-bottom: 6px; } .step-settings__single-tab-content .wpfnl-single-settings-control.discount .settings-control-field input[type=text], .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control.discount .settings-control-field input[type=text] { height: 44px; } .step-settings__single-tab-content .wpfnl-single-settings-control.no-border, .checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control.no-border { padding-bottom: 0; border-bottom: none; } .step-settings__single-tab-content .no-product, .checkout-product-setting-tab__content-wrapper .no-product { display: flex; flex-flow: column; align-items: center; justify-content: center; padding: 30px 24px; gap: 14px; } .step-settings__single-tab-content .no-product p, .checkout-product-setting-tab__content-wrapper .no-product p { color: #363B4E; font-size: 16px; font-weight: 500; line-height: 1; } .step-settings__single-tab-content .disable-payment-gateways .settings-control-field, .checkout-product-setting-tab__content-wrapper .disable-payment-gateways .settings-control-field { gap: 10px; align-items: flex-start; max-width: 140px; } .step-settings__single-tab-content .disable-payment-gateways .settings-control-field.is-not-pro, .checkout-product-setting-tab__content-wrapper .disable-payment-gateways .settings-control-field.is-not-pro { max-width: max-content; } .step-settings__single-tab-content .wpfnl-additional-replacement-options, .step-settings__single-tab-content .checkout-product-options, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options, .checkout-product-setting-tab__content-wrapper .checkout-product-options { margin-top: 30px; border-radius: 10px; padding: 26px 30px 30px; border: 1px solid #EEF0F3; box-shadow: none; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .additional-options, .step-settings__single-tab-content .checkout-product-options .additional-options, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .additional-options, .checkout-product-setting-tab__content-wrapper .checkout-product-options .additional-options { width: 100%; margin-right: 12px; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .wpfnl-checkbox label:before, .step-settings__single-tab-content .checkout-product-options .wpfnl-checkbox label:before, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .wpfnl-checkbox label:before, .checkout-product-setting-tab__content-wrapper .checkout-product-options .wpfnl-checkbox label:before { border-color: #CDD2E6; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .wpfnl-checkbox input[type=checkbox]:checked + label::before, .step-settings__single-tab-content .checkout-product-options .wpfnl-checkbox input[type=checkbox]:checked + label::before, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .wpfnl-checkbox input[type=checkbox]:checked + label::before, .checkout-product-setting-tab__content-wrapper .checkout-product-options .wpfnl-checkbox input[type=checkbox]:checked + label::before { border-color: #6E42D3; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .wpfnl-checkbox.disabled label:before, .step-settings__single-tab-content .checkout-product-options .wpfnl-checkbox.disabled label:before, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .wpfnl-checkbox.disabled label:before, .checkout-product-setting-tab__content-wrapper .checkout-product-options .wpfnl-checkbox.disabled label:before { border-color: #E5E8F3 !important; background-color: rgba(0, 0, 0, 0.2196078431) !important; cursor: not-allowed; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .wpfnl-checkbox.disabled label::after, .step-settings__single-tab-content .checkout-product-options .wpfnl-checkbox.disabled label::after, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .wpfnl-checkbox.disabled label::after, .checkout-product-setting-tab__content-wrapper .checkout-product-options .wpfnl-checkbox.disabled label::after { display: none; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .option-title, .step-settings__single-tab-content .checkout-product-options .option-title, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .option-title, .checkout-product-setting-tab__content-wrapper .checkout-product-options .option-title { margin-bottom: 18px; color: #7A8B9A; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 1.68px; text-transform: uppercase; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper, .step-settings__single-tab-content .checkout-product-options .options-wrapper, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .options-wrapper, .checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper { padding: 0 !important; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper #checkout-coupon[data-tour=yes], .step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper #auto-coupon[data-tour=yes], .step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper #enable-quantity-selection[data-tour=yes], .step-settings__single-tab-content .checkout-product-options .options-wrapper #checkout-coupon[data-tour=yes], .step-settings__single-tab-content .checkout-product-options .options-wrapper #auto-coupon[data-tour=yes], .step-settings__single-tab-content .checkout-product-options .options-wrapper #enable-quantity-selection[data-tour=yes], .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .options-wrapper #checkout-coupon[data-tour=yes], .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .options-wrapper #auto-coupon[data-tour=yes], .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .options-wrapper #enable-quantity-selection[data-tour=yes], .checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper #checkout-coupon[data-tour=yes], .checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper #auto-coupon[data-tour=yes], .checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper #enable-quantity-selection[data-tour=yes] { position: relative; z-index: 4; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper #disable-payments[data-tour=yes], .step-settings__single-tab-content .checkout-product-options .options-wrapper #disable-payments[data-tour=yes], .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .options-wrapper #disable-payments[data-tour=yes], .checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper #disable-payments[data-tour=yes] { position: relative; z-index: 4; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper #disable-payments[data-tour=yes] label, .step-settings__single-tab-content .checkout-product-options .options-wrapper #disable-payments[data-tour=yes] label, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .options-wrapper #disable-payments[data-tour=yes] label, .checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper #disable-payments[data-tour=yes] label { color: #fff; } .step-settings__single-tab-content .wpfnl-additional-replacement-options select#choose-coupon, .step-settings__single-tab-content .checkout-product-options select#choose-coupon, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options select#choose-coupon, .checkout-product-setting-tab__content-wrapper .checkout-product-options select#choose-coupon { display: none; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .coupon-box, .step-settings__single-tab-content .checkout-product-options .coupon-box, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .coupon-box, .checkout-product-setting-tab__content-wrapper .checkout-product-options .coupon-box { height: 44px; width: 250px; border-radius: 6px; position: relative; display: flex; position: relative; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .coupon-box .search-icon, .step-settings__single-tab-content .checkout-product-options .coupon-box .search-icon, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .coupon-box .search-icon, .checkout-product-setting-tab__content-wrapper .checkout-product-options .coupon-box .search-icon { position: absolute; left: 12px; top: 13px; z-index: 100; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .coupon-box .search-icon svg, .step-settings__single-tab-content .checkout-product-options .coupon-box .search-icon svg, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .coupon-box .search-icon svg, .checkout-product-setting-tab__content-wrapper .checkout-product-options .coupon-box .search-icon svg { display: block; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .coupon-box .select2.select2-container.select2-container--default, .step-settings__single-tab-content .checkout-product-options .coupon-box .select2.select2-container.select2-container--default, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .coupon-box .select2.select2-container.select2-container--default, .checkout-product-setting-tab__content-wrapper .checkout-product-options .coupon-box .select2.select2-container.select2-container--default { width: 100% !important; border: none; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .coupon-box .select2-container--default .select2-selection--single, .step-settings__single-tab-content .checkout-product-options .coupon-box .select2-container--default .select2-selection--single, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .coupon-box .select2-container--default .select2-selection--single, .checkout-product-setting-tab__content-wrapper .checkout-product-options .coupon-box .select2-container--default .select2-selection--single { background-color: transparent; border: none; height: auto; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .coupon-box .select2-selection__rendered, .step-settings__single-tab-content .checkout-product-options .coupon-box .select2-selection__rendered, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .coupon-box .select2-selection__rendered, .checkout-product-setting-tab__content-wrapper .checkout-product-options .coupon-box .select2-selection__rendered { padding: 12px 15px 11px 35px; width: 100%; border-radius: 10px; white-space: pre; overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: normal; border: 1px solid #e9e7e7; background: #ffffff; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .wpfnl-additional-replacement-options, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .wpfnl-additional-replacement-options { margin-top: 0; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .variation-options .wpfnl-field-wrapper, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .variation-options .wpfnl-field-wrapper { width: 100%; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .variation-options .wpfnl-field-wrapper .wpfnl-fields, .checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .variation-options .wpfnl-field-wrapper .wpfnl-fields { width: 100%; max-width: 270px; } .step-settings__single-tab-content .enabled-replace-settings, .checkout-product-setting-tab__content-wrapper .enabled-replace-settings { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); background-color: #F6F5FA; gap: 20px; padding: 20px 24px; border-radius: 10px; } .step-settings__single-tab-content .enabled-replace-settings .single-replace-option, .checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option { position: relative; } .step-settings__single-tab-content .enabled-replace-settings .single-replace-option > input[type=radio], .checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option > input[type=radio] { display: none; } .step-settings__single-tab-content .enabled-replace-settings .single-replace-option .option-label, .checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option .option-label { border-radius: 10px; border: 1px solid #E4E0F0; background-color: #FFF; cursor: pointer; padding: 24px; display: block; height: 100%; } .step-settings__single-tab-content .enabled-replace-settings .single-replace-option .radio-point, .checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option .radio-point { position: absolute; top: 16px; right: 16px; } .step-settings__single-tab-content .enabled-replace-settings .single-replace-option .radio-point circle:first-child, .checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option .radio-point circle:first-child { transform: scale(0); transform-origin: center; transition: all 0.3s ease; } .step-settings__single-tab-content .enabled-replace-settings .single-replace-option > input[type=radio]:checked + .option-label, .checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option > input[type=radio]:checked + .option-label { border-color: #6E42D3; } .step-settings__single-tab-content .enabled-replace-settings .single-replace-option > input[type=radio]:checked + .option-label .radio-point circle:first-child, .checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option > input[type=radio]:checked + .option-label .radio-point circle:first-child { transform: scale(1); } .step-settings__single-tab-content .enabled-replace-settings .single-replace-option h4, .checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option h4 { color: #363B4E; font-size: 16px; font-weight: 500; line-height: 1.37; margin-bottom: 8px; max-width: 95%; } .step-settings__single-tab-content .enabled-replace-settings .single-replace-option p, .checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option p { color: #525562; font-size: 14px; font-weight: 400; line-height: 1.4; } .step-settings__single-tab-content.product .product-head .product-search { margin-left: 0; } @media only screen and (max-width: 1499px) { .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .subtext-settings { padding: 20px; } .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .highlights { padding: 20px; } .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .wpfnl-field-wrapper label { width: 111px; } .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .wpfnl-fields { width: calc(100% - 111px); } } @media only screen and (max-width: 1299px) { .step-settings__single-tab-content .wpfnl-additional-replacement-options, .checkout-product-setting-tab__content-wrapper .checkout-product-options { padding: 20px; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper, .checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper { padding: 15px; } } @media only screen and (max-width: 1199px) { .checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name, .checkout-product-setting-tab__content-wrapper .accordion-footer .product-name, .checkout-product-setting-tab__content-wrapper .accordion-head .product-name { width: 220px; } .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content { display: block; } .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .subtext-settings { width: 100%; } .checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .highlights { padding: 0 20px 20px; width: 100%; } .step-settings__single-tab-content .wpfnl-additional-replacement-options, .checkout-product-setting-tab__content-wrapper .checkout-product-options { display: block; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .additional-options, .checkout-product-setting-tab__content-wrapper .checkout-product-options .additional-options { width: 100%; margin-right: 0; margin-bottom: 24px; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .variation-options, .checkout-product-setting-tab__content-wrapper .checkout-product-options .variation-options { width: 100%; margin-left: 0; } .step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper, .checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper { height: auto; } } @media only screen and (max-width: 991px) { .checkout-product-setting-tab__content-wrapper .product-head .product-search { width: 190px; } } .order-bump-accordion-wrapper { border: 1px solid #EEF0F3; border-radius: 10px; } .order-bump-accordion-wrapper .order-bump-header { display: flex; align-items: center; justify-content: space-between; background: #FFFFFF; border-radius: 10px 10px 0px 0px; padding: 15px 24px; border-bottom: 1px solid #EEF0F3; } .order-bump-accordion-wrapper .order-bump-header .title { font-weight: 500; font-size: 16px; line-height: 19px; color: #363B4E; text-transform: capitalize; margin-right: 10px; } .order-bump-accordion-wrapper .order-bump-header .btn-default { position: relative; } .order-bump-accordion-wrapper .order-bump-header .btn-default .pro-tag-icon { position: static; margin-left: 4px; transform: translateY(5px); display: inline-block; } .order-bump-accordion-wrapper .order-bump-header .btn-default:disabled { opacity: 0.6; cursor: not-allowed; } .order-bump-accordion-wrapper .order-bump-header .btn-default:disabled:hover { background-color: #6E42D3; } .order-bump-accordion-wrapper .order-bump-accordion-header { width: 100%; background: #FFFFFF; box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.2); border-bottom: 1px solid transparent; border-radius: 10px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; } .order-bump-accordion-wrapper .order-bump-accordion-header .title-area { padding: 14px 0; cursor: pointer; width: calc(100% - 67px); } .order-bump-accordion-wrapper .order-bump-accordion-header .title-area .title { font-weight: 500; color: #363B4E; } .order-bump-accordion-wrapper .order-bump-accordion-header .title-area .title small { color: #7A8B9A; font-weight: 400; } .order-bump-accordion-wrapper .order-bump-accordion-header .title-area .icon { width: 9px; height: 9px; display: inline-block; border: 2px solid #363B4E; border-top: none; border-left: none; transform: rotate(45deg); transform-origin: center; position: relative; top: -1px; margin-right: 12px; transition: transform 0.3s ease; } .order-bump-accordion-wrapper .order-bump-accordion-header .action-area { display: flex; align-items: center; } .order-bump-accordion-wrapper .order-bump-accordion-header .action-area .wpfnl-switcher.has-loader { display: flex; align-items: center; } .order-bump-accordion-wrapper .order-bump-accordion-header .action-area .wpfnl-switcher.has-loader .wpfnl-loader { display: inline-block; margin-left: 0; margin-right: 5px; } .order-bump-accordion-wrapper .order-bump-accordion-header .action-area button { border: none; cursor: pointer; text-align: center; padding: 0 6px; display: inline-block; height: 30px; line-height: 30px; background-color: transparent; margin: 0 0 0 2px; } .order-bump-accordion-wrapper .order-bump-accordion-header .action-area button.delete-checkout-field svg { width: 20px; height: 20px; } .order-bump-accordion-wrapper .order-bump-body { border-radius: 0 0 10px 10px; } .order-bump-accordion-wrapper .order-bump-body .wpfnl-order-bump-modal-header, .order-bump-accordion-wrapper .order-bump-body .wpfnl-order-bump-modal-footer { display: none; } .order-bump-accordion-wrapper .order-bump-body .order-bump-table-header { background-color: #F6F5FA; display: grid; grid-template-columns: 9fr 1fr 1fr; padding: 15px 24px; border-bottom: 1px solid #EEF0F3; } .order-bump-accordion-wrapper .order-bump-body .order-bump-table-header .oder-bump-table-header-text { color: #7A8B9A; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; text-transform: capitalize; } .order-bump-accordion-wrapper .order-bump-body .order-bump-table-header .oder-bump-table-header-text.order-bump-actions { margin-left: auto; padding-right: 5px; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump { margin-bottom: 0; box-shadow: none; border-bottom: 1px solid #EEF0F3; border-radius: 0; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump:last-child { border-radius: 0 0 10px 10px; border-bottom: none; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump .order-bump-accordion-header { padding: 0 24px; border-radius: 0; display: grid; grid-template-columns: 9fr 1fr 1fr; border: none; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump .order-bump-accordion-header .action-area { justify-content: flex-end; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump:last-child .order-bump-accordion-header { border-radius: 0 0 10px 10px; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal { position: absolute; width: 100%; max-height: 300%; top: 7px; background: #fff; left: 0px; z-index: 2; padding: 24px; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-header .drawer-title { display: flex; align-items: center; gap: 10px; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-header .drawer-title .wpfnl-back-icon { border-radius: 10px; border: 1px solid #EBEDF0; background: #FFF; display: flex; align-items: center; justify-content: center; padding: 7px; cursor: pointer; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-header .drawer-title p { color: #363B4E; font-family: Roboto; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-header .wpfnl-drawer-close { border-radius: 10px; border: 1px solid #EBEDF0; cursor: pointer; padding: 12px; display: flex; align-items: center; justify-content: center; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-footer { display: flex; align-items: center; justify-content: flex-end; margin-top: 30px; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-footer .wpfnl-button-wrapper { display: flex; align-items: center; gap: 14px; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-footer .wpfnl-button-wrapper button.outline { color: #000; background: none; border: 1px solid #E4E6EB; padding: 11px 20px; min-width: auto; line-height: normal; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-footer .wpfnl-button-wrapper button:disabled { opacity: 0.5; cursor: not-allowed; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content { padding: 0; border-radius: 10px; border: 1px solid #EEF0F3; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-settings-area { width: 60%; margin-right: 0; background: #fff; border-bottom-left-radius: 8px; border-right: 1px solid #EEF0F3; align-self: stretch; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-settings-area .order-bump-settings.enable-order-bump { padding: 14px 20px; border-right: 1px solid #EBEDF0; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-settings-area .order-bump-settings.enable-order-bump .wpfnl-field-wrapper { gap: 10px; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-template-preview-area .wpfnl-order-bump__template-style1 { border: none; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-template-preview-area div[class^=wpfnl-order] { max-width: calc(100% - 40px); margin: 0 auto; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal[data-tour=yes] { z-index: inherit; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #ob-template-select[data-tour=yes] { z-index: 4; position: relative; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #wpfnl-save-ob[data-tour=yes] { z-index: 4; position: relative; opacity: 1; border: 1px solid #fff; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #ob-position-select[data-tour=yes] { z-index: 4; position: relative; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .discount-settings #wpfnl-product-replace .wpfnl-fields .wpfnl-checkbox label[data-tour=yes] { z-index: 4; position: relative; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #product-title[data-tour=yes] { z-index: 4; position: relative; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal[data-tour=no] { z-index: 1; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #ob-template-select[data-tour=no] { z-index: 1; position: relative; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #wpfnl-save-ob[data-tour=no] { z-index: 1; position: relative; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #ob-position-select[data-tour=no] { z-index: 1; position: relative; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .discount-settings #wpfnl-product-replace .wpfnl-fields .wpfnl-checkbox label[data-tour=no] { z-index: 1; position: relative; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #product-title[data-tour=yes] { z-index: 4; position: relative; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .upload-product-image .wpfnl-fields { width: calc(100% - 180px); } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump .order-bump-settings .wpfnl-field-wrapper .vc-color-wrap { border-radius: 50%; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.no-more-one { border-radius: 0 0 10px 10px; } .order-bump-accordion-wrapper .order-bump-body .reset-arrow-color, .order-bump-accordion-wrapper .order-bump-body .reset-obbg { margin-left: 1px; padding: 4px 5px; position: relative; top: -1px; border: none; border-radius: 3px; background: transparent; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; } .order-bump-accordion-wrapper .order-bump-body .reset-arrow-color svg, .order-bump-accordion-wrapper .order-bump-body .reset-obbg svg { width: 16px; height: 16px; display: block; } .order-bump-accordion-wrapper .order-bump-body .reset-arrow-color { top: 3px; } .wpfnl-back-icon { border-radius: 10px; border: 1px solid #EBEDF0; background: #FFF; display: flex; align-items: center; justify-content: center; padding: 7px !important; cursor: pointer; margin-right: 10px; } .wpfnl-checkbox label:before { border: 1px solid #EBEDF0; background-color: none; } .checkout-order-bump-setting-tab__content-wrapper { background: #FFFFFF; border: 1px solid transparent; box-shadow: 0px 5px 20px rgba(148, 135, 180, 0.15); border-radius: 10px; margin-bottom: 15px; } .checkout-order-bump-setting-tab__content-wrapper:last-child { margin-bottom: 0; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-accordion-content { display: none; flex-flow: row wrap; align-items: flex-start; padding: 24px; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-accordion-content.show-content { display: flex; } .checkout-order-bump-setting-tab__content-wrapper.no-order-bump { text-align: center; padding: 12px 24px; } .checkout-order-bump-setting-tab__content-wrapper.no-more-one { padding: 18px 24px; color: #272727; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; } .checkout-order-bump-setting-tab__content-wrapper.no-more-one .hints { color: #272727; margin: 0; width: calc(100% - 168px); font-style: normal; padding-right: 14px; } .checkout-order-bump-setting-tab__content-wrapper.no-more-one .hints .highlight-color { color: #ee5f5a; } .checkout-order-bump-setting-tab__content-wrapper.no-more-one .hints .pro-tag { color: #ffffff; } .checkout-order-bump-setting-tab__content-wrapper.no-more-one .pro-link { font-weight: 500; text-decoration: underline; color: #6e42d3; width: 168px; } .checkout-order-bump-setting-tab__content-wrapper.expanded-orderbump .order-bump-accordion-header { box-shadow: none; border-bottom-color: #6E42D3; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .checkout-order-bump-setting-tab__content-wrapper.expanded-orderbump .order-bump-accordion-header .title-area .icon { top: 1px; transform: rotate(-135deg); } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings { border-top: 1px solid #E5E8F3; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper { margin-bottom: 25px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper:last-child { margin-bottom: 0; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper label { font-size: 14px; line-height: 16px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper select { padding: 5px 9px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.no-title-checkbox .hints.mobile { display: none; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper > label { width: 250px; position: relative; padding-right: 30px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper > label .color-picker { position: absolute; right: 10px; top: -4px; line-height: 1; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper .vc-color-wrap { width: 25px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.top-align .color-picker { top: 6px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.orderbump-bg .vc-color-wrap { position: relative; top: -5px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper > label.has-tooltip .wpfnl-tooltip { top: -2px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper .wpfnl-fields { width: 50%; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper .wpfnl-fields select { border: 1px solid #EBEDF0; padding-top: 3px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper .wpfnl-fields .icp__input { border-radius: 0 !important; border: 1px solid #e5e5e5; background: #000000; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-box { padding: 30px 0; margin: 0; box-shadow: none; background: transparent; border-radius: 0; } .checkout-order-bump-setting-tab__content-wrapper .hints { word-break: break-word; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .enable-order-bump { border-top: none; padding-bottom: 30px; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .enable-order-bump .wpfnl-fields input { width: 97%; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area > .title { position: relative; font-weight: 500; font-size: 16px; line-height: 19px; color: #363B4E; background-color: #F7F7FA; padding: 18px 30px 18px 30px; border-radius: 10px 10px 0 0; border-bottom: 1px solid #EEF0F3; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon, .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product { border: 1px solid #E9E9EF; border-radius: 6px; height: 36px; position: relative; display: flex; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .wpfnl-ob-replace-product-search, .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .wpfnl-ob-product-search, .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .wpfnl-ob-replace-product-search, .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .wpfnl-ob-product-search { display: none; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon svg, .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product svg { position: absolute; left: 10px; top: 10px; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2-container--default .select2-selection--single .select2-selection__arrow, .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2.select2-container.select2-container--default, .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2.select2-container.select2-container--default { width: 100% !important; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2-container--default .select2-selection--single, .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2-container--default .select2-selection--single { background-color: transparent; border: none; height: auto; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2-selection__rendered, .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2-selection__rendered { padding: 8px 12px 7px; width: 100%; border-radius: 6px; white-space: pre; overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: normal; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2-selection__rendered .select2-selection__placeholder, .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2-selection__rendered .select2-selection__placeholder { color: #7A8B9A; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon.product-selected .select2-selection__rendered, .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product.product-selected .select2-selection__rendered { display: flex; align-items: center; flex-flow: row-reverse; justify-content: space-between; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2-container.select2-container--default.select2-container--open, .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2-container.select2-container--default.select2-container--open { border: none; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2-selection__clear, .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2-selection__clear { cursor: pointer; padding: 0 2px; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product[data-tour=yes] { z-index: 4; position: relative; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-ob-replace-product { height: auto; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-ob-replace-product .select2-selection__rendered { display: flex; flex-flow: row wrap; gap: 6px; padding: 5px 7px 5px; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-ob-replace-product .select2-selection__rendered .select2-selection__clear { display: none; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-ob-replace-product .select2-selection__choice { border: 1px solid #EBEDF0; display: inline; padding: 7px 4px 7px 10px; border-radius: 6px; color: #363B4E; font-size: 13px; display: inline-flex; gap: 5px; flex-flow: row-reverse; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-ob-replace-product .select2-selection__choice .select2-selection__choice__remove { padding: 0px 6px; line-height: 1; display: flex; align-items: center; cursor: pointer; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-ob-replace-product input.select2-search__field { width: auto !important; padding: 0 8px; height: auto; min-width: 80px; border: none; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn { background-color: #F6F5FA; border-radius: 10px; padding: 20px; margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option { position: relative; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option > input[type=radio] { display: none; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option .option-label { border-radius: 10px; border: 1px solid #E4E0F0; background-color: #FFF; cursor: pointer; padding: 12px 16px; display: block; height: 100%; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option .radio-point { position: absolute; top: 11px; right: 16px; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option .radio-point circle:first-child { transform: scale(0); transform-origin: center; transition: all 0.3s ease; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option > input[type=radio]:checked + .option-label { border-color: #6E42D3; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option > input[type=radio]:checked + .option-label .radio-point circle:first-child { transform: scale(1); } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option h4 { color: #363B4E; font-size: 14px; font-weight: 500; line-height: 1.37; margin-bottom: 0; max-width: 95%; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option p { color: #525562; font-size: 14px; font-weight: 400; line-height: 1.4; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .icon-wrapper { display: inline-flex; flex-flow: column; justify-content: center; align-items: center; gap: 8px; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label { box-sizing: border-box; border-radius: 10px; height: 160px; display: flex; flex-flow: column; align-items: center; justify-content: center; margin: 0; padding: 0; text-align: center; background-repeat: no-repeat; background-position: center; background-size: cover; cursor: pointer; border: 1px dashed #CCC3E1; background-color: transparent; background-image: none; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label .title { display: block; line-height: 16px; transition: all 0.3s ease; color: #363B4E; font-size: 14px; font-style: normal; font-weight: 500; line-height: 14px; letter-spacing: -0.14px; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label .title .wpfnl-link-text { color: #6E42D3; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label .hints { font-style: normal; margin: 0; color: #7A8B9A; width: 100%; display: block; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label.img-uploaded { border-color: transparent; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label.img-uploaded .icon-wrapper { background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; border-radius: 10px; display: flex; flex-flow: column; align-items: center; justify-content: center; flex-wrap: wrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label.img-uploaded:hover .icon-wrapper { opacity: 1; visibility: visible; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label.img-uploaded:hover .title { color: #ffffff; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label.img-uploaded:hover path { fill: #ffffff; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label.img-uploaded .hints { color: #fff; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .wpfnl-ob-coupon-search { display: none; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .non-input-field { cursor: not-allowed; background-color: #F6F5FA; font-size: 14px; color: #7A8B9A; padding: 13px 15px; height: 44px; width: 100%; min-width: 190px; border-radius: 6px; display: block; border: 1px solid #EBEDF0; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-pre-purchase-upsell { width: 100%; justify-content: space-between; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-pre-purchase-upsell .wpfnl-tooltip { position: relative; top: 3px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-pre-purchase-upsell .wpfnl-fields { width: auto; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-pre-purchase-upsell .pro-tag-icon { transform: translateY(7px); display: inline-block; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-template-preview-area { width: 40%; position: sticky; top: 0px; padding-bottom: 24px; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-template-preview-area .preview-header { padding: 14px 20px; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-template-preview-area .preview-header h4 { text-transform: capitalize; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-template-preview-area .preview-header h4 span { color: #363B4E; font-weight: 600; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs { display: flex; gap: 30px; border-bottom: 1px solid #EEF0F3; background-color: #F9FAFB; border-radius: 8px 8px 0 0; width: 100%; padding: 0 30px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button { display: flex; align-items: center; gap: 8px; padding: 14px 0; background: transparent; border: none; cursor: pointer; font-size: 14px; font-weight: 500; color: #6B7280; transition: all 0.2s ease; white-space: nowrap; position: relative; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button::before { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: transparent; transition: background-color 0.2s ease; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button svg { width: 18px; height: 18px; color: #9CA3AF; transition: color 0.2s ease; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button:first-child { border-radius: 8px 0 0 0; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button:hover { color: #374151; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button:hover svg { color: #6E42D2; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button.active { color: #6E42D2; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button.active::before { background-color: #6E42D2; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button.active svg { color: #6E42D2; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category { padding: 26px 30px; animation: fadeIn 0.3s ease-in; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category:last-child { border-bottom: none; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .category-title { color: #363B4E; font-size: 16px; font-weight: 500; line-height: 1; display: flex; align-items: center; gap: 8px; margin-bottom: 26px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper { display: flex; flex-flow: row wrap; justify-content: space-between; gap: 16px; row-gap: 24px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .single-ob-settings { width: calc(50% - 8px); } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .single-ob-settings.full-width { width: 100%; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-description .mce-tinymce div.mce-toolbar-grp { padding-left: 35px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-description .quicktags-toolbar { padding: 5px 2px 5px 45px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-description .ob-settings-input { position: relative; margin-top: 20px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-description .color-picker { position: absolute; top: 46px; left: 13px; z-index: 9; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-description .vc-color-wrap { margin: 0; width: 20px; height: 20px; border-radius: 50%; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-replace .wpfnl-tooltip { position: relative; top: 3px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-replace .wpfnl-tooltip p { color: #ffffff; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-title { color: #363B4E; font-size: 14px; font-weight: 500; line-height: 1; margin-bottom: 8px; display: flex; align-items: center; gap: 3px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-title .wpfnl-tooltip { padding-bottom: 0; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-title .wpfnl-tooltip svg { display: block; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-input select, .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-input input[type=password], .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-input input[type=url], .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-input input[type=number], .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-input input[type=text] { border-radius: 8px; height: 40px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-color-picker-wrapper { display: flex; align-items: center; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-color-picker-wrapper .vc-color-wrap.transparent { height: 40px; width: 40px; border-radius: 6px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-color-picker-wrapper input[type=text] { max-width: max-content; min-width: auto; border-radius: 6px; background: #F6F5FA; width: 120px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .fields-with-color { border: 1px solid #E5E8F3; border-radius: 8px; display: flex; align-items: center; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .fields-with-color input[type=text] { width: calc(100% - 40px); border: none; height: 38px !important; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .fields-with-color .color-picker { width: 40px; height: 38px; display: flex; align-items: center; justify-content: center; border-left: 1px solid #E5E8F3; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .fields-with-color .color-picker .vc-color-wrap { width: 20px; height: 20px; border-radius: 50%; margin: 0; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details { border-bottom: 1px solid #EEF0F3; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode { display: flex; gap: 15px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .ob-settings-title { margin-bottom: 0; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .radio-option { display: flex; align-items: center; gap: 5px; cursor: pointer; position: relative; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .radio-option input[type=radio] { cursor: pointer; margin: 0; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .radio-option input[type=radio]:checked { border-color: #6E42D3; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .radio-option input[type=radio]:checked::before { background-color: #6E42D3; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .radio-option span { font-size: 14px; color: #363B4E; font-weight: 400; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .radio-option .recommended-badge { background: #ded3f8; color: #6e42d3; font-size: 12px; font-weight: 400; padding: 2px 8px; border-radius: 4px; margin-left: 4px; letter-spacing: 0.5px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .auto-match-settings { width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; gap: 16px; row-gap: 20px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-filter-options { display: flex; align-items: flex-start; gap: 30px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-filter-options .checkbox-group { display: flex; flex-direction: column; gap: 7px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-filter-options .checkbox-option { display: flex; align-items: center; gap: 8px; cursor: pointer; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-filter-options .checkbox-option input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; margin: 0; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-filter-options .checkbox-option input[type=checkbox]:checked::before { margin: -0.12rem 0 0 -0.2rem; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-filter-options .checkbox-option span { font-size: 14px; color: #363B4E; user-select: none; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .wpfnl-ob-fallback-product-search.select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior input[type=radio] { cursor: pointer; margin: 0; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior input[type=radio]:checked { border-color: #6E42D3; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior input[type=radio]:checked::before { background-color: #6E42D3; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .fallback-options { display: flex; flex-direction: column; gap: 16px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .fallback-options .radio-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #E5E8F3; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; background: #FFFFFF; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .fallback-options .radio-option:hover { border-color: #6E42D3; background: #F9F7FD; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .fallback-options .radio-option .radio-content { display: flex; flex-direction: column; gap: 4px; flex: 1; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .fallback-options .radio-option .radio-content .radio-title { font-size: 14px; color: #363B4E; font-weight: 500; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .fallback-options .radio-option .radio-content .radio-subtitle { font-size: 13px; color: #7A8B9A; font-weight: 400; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .default-product-select { margin-top: 6px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .default-product-select > label { font-weight: 400; font-size: 13px; margin-bottom: 4px; display: block; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .select2-container.select2-container--default { background: #ffffff; border-radius: 10px; border: 1px solid #E5E8F3; z-index: 99; display: block; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .select2-container.select2-container--default .select2-selection--single { height: 34px; border-radius: 8px; border: none; box-sizing: border-box; cursor: pointer; display: block; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .select2-container.select2-container--default .select2-selection__rendered { padding-top: 7px; line-height: 1; display: block; padding-left: 8px; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .select2-container.select2-container--default .select2-selection__arrow { top: 3px; right: 3px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.color-customization .ob-settings-wrapper .single-ob-settings { width: calc(33.3333333333% - 11px); } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.conditional-rules .ob-settings-wrapper .enable-conditional .wpfnl-tooltip { position: relative; top: 3px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.conditional-rules .ob-settings-wrapper .enable-conditional .wpfnl-tooltip p { color: #ffffff; } .checkout-order-bump-setting-tab__content-wrapper { /* Upgrade overlay - full screen backdrop */ } .checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 20px; } .checkout-order-bump-setting-tab__content-wrapper { /* Upgrade modal card */ } .checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal { position: relative; background: #fff; border-radius: 16px; padding: 36px 32px 32px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 18px; color: #667085; cursor: pointer; line-height: 1; padding: 4px; } .checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-close:hover { color: #344054; } .checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-icon { margin-bottom: 16px; } .checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-title { font-size: 20px; font-weight: 700; color: #101828; margin: 0 0 12px; } .checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-desc { font-size: 14px; color: #667085; margin: 0 0 24px; line-height: 1.6; } .checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-btn { display: inline-block; background: linear-gradient(135deg, #7A3CF6 0%, #5B21E6 100%); color: #fff !important; padding: 12px 28px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity 0.2s ease; } .checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-btn:hover { opacity: 0.9; text-decoration: none; color: #fff !important; } .checkout-order-bump-setting-tab__content-wrapper { /* Locked auto-match label styling */ } .checkout-order-bump-setting-tab__content-wrapper .ob-automatch-locked { opacity: 0.6; } .checkout-order-bump-setting-tab__content-wrapper { /*-----Rule Groups Styles-----*/ } .checkout-order-bump-setting-tab__content-wrapper .rule-groups-container { width: 100%; } .checkout-order-bump-setting-tab__content-wrapper .rule-groups-container .rule-group { background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; } .checkout-order-bump-setting-tab__content-wrapper .rule-groups-container .rule-group-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px 5px; border-bottom: 1px solid #E5E7EB; } .checkout-order-bump-setting-tab__content-wrapper .rule-groups-container .rule-group-body { padding: 20px; } .checkout-order-bump-setting-tab__content-wrapper .rule-groups-container .btn-create-rule-group { margin-top: 20px; } .checkout-order-bump-setting-tab__content-wrapper .rule-group-title { font-size: 14px; font-weight: 600; color: #374151; margin: 0; } .checkout-order-bump-setting-tab__content-wrapper .btn-delete-rule-group { background: transparent; border: none; color: #EF4444; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; } .checkout-order-bump-setting-tab__content-wrapper .btn-delete-rule-group:hover { opacity: 0.7; } .checkout-order-bump-setting-tab__content-wrapper .rule-condition { margin-bottom: 12px; } .checkout-order-bump-setting-tab__content-wrapper .condition-row { display: flex; gap: 12px; align-items: flex-end; background: #F9FAFB; padding: 16px; border-radius: 6px; border: 1px solid #E5E7EB; } .checkout-order-bump-setting-tab__content-wrapper .condition-row input[type=text], .checkout-order-bump-setting-tab__content-wrapper .condition-row input[type=number], .checkout-order-bump-setting-tab__content-wrapper .condition-row select { padding: 3px 12px !important; min-width: auto; } .checkout-order-bump-setting-tab__content-wrapper .condition-row .arco-select-view { font-size: 14px; background: #fff; border: 1px solid #D1D5DB; border-radius: 4px; } .checkout-order-bump-setting-tab__content-wrapper .condition-row .arco-select-view .arco-select-view-inner { padding: 0; } .checkout-order-bump-setting-tab__content-wrapper .condition-row .arco-select-view .arco-select-view-inner .arco-select-view-input { height: auto; min-height: auto; width: 100% !important; padding: 0; height: 32px; } .checkout-order-bump-setting-tab__content-wrapper .condition-row .arco-select-view .arco-select-view-inner .arco-select-view-tag { font-size: 11px; line-height: 1.2; padding: 4px; } .checkout-order-bump-setting-tab__content-wrapper .condition-field, .checkout-order-bump-setting-tab__content-wrapper .condition-operator, .checkout-order-bump-setting-tab__content-wrapper .condition-value { display: flex; flex-direction: column; gap: 6px; } .checkout-order-bump-setting-tab__content-wrapper .condition-field { flex: 0 0 240px; } .checkout-order-bump-setting-tab__content-wrapper .condition-operator { flex: 0 0 180px; } .checkout-order-bump-setting-tab__content-wrapper .condition-value { flex: 0 0 130px; } .checkout-order-bump-setting-tab__content-wrapper .condition-field label, .checkout-order-bump-setting-tab__content-wrapper .condition-value label { font-size: 12px; font-weight: 500; color: #6B7280; } .checkout-order-bump-setting-tab__content-wrapper .condition-field select, .checkout-order-bump-setting-tab__content-wrapper .condition-operator select, .checkout-order-bump-setting-tab__content-wrapper .condition-value input, .checkout-order-bump-setting-tab__content-wrapper .condition-value select { width: 100%; padding: 8px 12px; border: 1px solid #D1D5DB; border-radius: 4px; font-size: 14px; color: #374151; background: #fff; } .checkout-order-bump-setting-tab__content-wrapper .condition-field select:focus, .checkout-order-bump-setting-tab__content-wrapper .condition-operator select:focus, .checkout-order-bump-setting-tab__content-wrapper .condition-value input:focus, .checkout-order-bump-setting-tab__content-wrapper .condition-value select:focus { outline: none; border-color: #6E42D2; box-shadow: 0 0 0 3px rgba(110, 66, 210, 0.1); } .checkout-order-bump-setting-tab__content-wrapper .condition-actions { display: flex; gap: 8px; align-items: center; position: relative; top: -6px; } .checkout-order-bump-setting-tab__content-wrapper .btn-drag-handle, .checkout-order-bump-setting-tab__content-wrapper .btn-delete-condition { background: transparent; border: none; color: #6B7280; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; } .checkout-order-bump-setting-tab__content-wrapper .btn-drag-handle:hover { color: #374151; } .checkout-order-bump-setting-tab__content-wrapper .btn-delete-condition { color: #EF4444; } .checkout-order-bump-setting-tab__content-wrapper .btn-delete-condition:hover { opacity: 0.7; } .checkout-order-bump-setting-tab__content-wrapper .logic-separator { display: flex; align-items: center; justify-content: center; margin: 12px 0; position: relative; } .checkout-order-bump-setting-tab__content-wrapper .logic-separator.and-label:before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: -13px; height: calc(100% + 26px); width: 2px; background: #e5e7eb; z-index: 0; } .checkout-order-bump-setting-tab__content-wrapper .logic-label { background: #F3F4F6; color: #6B7280; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 12px; border: 1px solid #E5E7EB; position: relative; z-index: 1; } .checkout-order-bump-setting-tab__content-wrapper .or-separator { margin: 24px 0; } .checkout-order-bump-setting-tab__content-wrapper .or-separator::before, .checkout-order-bump-setting-tab__content-wrapper .or-separator::after { content: ""; position: absolute; top: 50%; width: 45%; height: 1px; background: #E5E7EB; } .checkout-order-bump-setting-tab__content-wrapper .or-separator::before { left: 0; } .checkout-order-bump-setting-tab__content-wrapper .or-separator::after { right: 0; } .checkout-order-bump-setting-tab__content-wrapper .or-label { background: #FEF3C7; color: #D97706; border-color: #FCD34D; } .checkout-order-bump-setting-tab__content-wrapper .btn-add-condition { background: transparent; border: 1px dashed #D1D5DB; color: #6E42D2; font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: 6px; cursor: pointer; width: 100%; margin-top: 12px; transition: all 0.2s; } .checkout-order-bump-setting-tab__content-wrapper .btn-add-condition:hover { background: rgba(110, 66, 210, 0.05); border-color: #6E42D2; } .checkout-order-bump-setting-tab__content-wrapper .btn-create-rule-group { background: transparent; border: 2px dashed #D1D5DB; color: #2563EB; font-size: 14px; font-weight: 600; padding: 12px 20px; border-radius: 8px; cursor: pointer; width: 100%; transition: all 0.2s; } .checkout-order-bump-setting-tab__content-wrapper .btn-create-rule-group:hover { background: rgba(37, 99, 235, 0.05); border-color: #2563EB; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner { display: flex; align-items: center; justify-content: space-between; background: #faf9fb; border: 1px solid #d3c2fa; border-radius: 10px; padding: 24px; box-sizing: border-box; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner .wpfnl-pro-orderbump-banner-content { display: flex; flex-direction: column; gap: 6px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner .wpfnl-pro-orderbump-banner-title { font-size: 16px; font-weight: 600; color: #23272F; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner .wpfnl-pro-orderbump-banner-desc { font-size: 14px; color: #4B5563; line-height: 1.5; max-width: 520px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner .wpfnl-pro-orderbump-banner-cta { background: #6E42D3; color: #fff; font-weight: 600; font-size: 13px; border: none; border-radius: 6px; padding: 12px 18px; text-decoration: none; transition: background 0.2s; box-shadow: 0 1px 2px rgba(244, 99, 27, 0.08); cursor: pointer; white-space: nowrap; margin-left: 32px; display: inline-flex; align-items: center; justify-content: center; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner .wpfnl-pro-orderbump-banner-cta:hover { background: #6434d4; color: #fff; text-decoration: none; } @media (max-width: 700px) { .checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner { flex-direction: column; align-items: flex-start; padding: 18px 12px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner .wpfnl-pro-orderbump-banner-cta { margin-left: 0; margin-top: 16px; width: 100%; justify-content: center; } } .arco-trigger-popup { width: 230px !important; } .arco-select-dropdown .arco-select-option { padding: 8px 6px !important; margin: 0; } .arco-select-dropdown .arco-select-option-checkbox .arco-checkbox-label { line-height: 1.3; } @media only screen and (max-width: 1599px) { .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper .wpfnl-fields { width: 50%; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-fields-with-color, .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-product-description, .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .upload-product-image .wpfnl-fields { width: calc(100% - 250px); } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.color-customization .ob-settings-wrapper .single-ob-settings { width: calc(50% - 8px); } } @media only screen and (max-width: 1350px) and (min-width: 1200px) { .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-settings-area { width: 55%; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-template-preview-area { width: 45%; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper::not('.no-title-checkbox') { margin-bottom: 18px; display: block; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.no-title-checkbox > label { width: auto; margin-bottom: 0; padding-right: 10px; padding-top: 4px; display: inline-block; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.no-title-checkbox .wpfnl-fields { width: 50%; max-width: 410px; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.no-title-checkbox .hints.desktop { display: none; } .checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.no-title-checkbox .hints.mobile { display: block; } } @media only screen and (max-width: 1199px) { .checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area { width: 100%; margin-right: 0; margin-bottom: 30px; } .checkout-order-bump-setting-tab__content-wrapper .order-bump-template-preview-area { width: 100%; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-settings-area { width: 100%; border-radius: 10px 10px 0 0; margin-bottom: 0; border-bottom: 1px solid #EEF0F3; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-settings-area .order-bump-settings.enable-order-bump { border-radius: 0px; } .order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-template-preview-area .preview-header { border-radius: 0px; } .checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs { gap: 20px; padding: 0 21px; } } .edit-field-tabNcontent { border: 1px solid #E5E8F3; border-radius: 10px; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; padding: 23px 20px 23px 0; border-bottom: 1px solid #E5E8F3; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li { padding: 0 15px; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li:last-child { margin-right: 0; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li a { font-size: 14px; color: #7A8B9A; height: 44px; line-height: 44px; display: block; position: relative; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li a:hover { color: #363B4E; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li a:before { content: ""; position: absolute; top: -24px; left: 0; width: 100%; height: 3px; background: #6E42D3; border-radius: 0 0 50px 50px; visibility: hidden; opacity: 0; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.active a { color: #6E42D3; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.active a:before { visibility: visible; opacity: 1; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.add-new-checkout-field-btn { margin-left: 20px; padding: 0; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.add-new-checkout-field-btn .btn-default { line-height: 39px; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.add-new-checkout-field-btn svg { margin-right: 5px; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.restore-btn { margin-left: auto; padding: 0; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.restore-btn .btn-default { line-height: 39px; background: #F7F7FA; color: #363B4E; border: 1px solid #E5E8F3; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.restore-btn .btn-default.error { color: #d63342; background-color: #f8d7da; border-color: #f5c6cb; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.restore-btn .btn-default.success { color: #269c41; background-color: #d4edda; border-color: #c3e6cb; } .checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.restore-btn .wpfnl-loader { display: inline-block; } .checkout-edit-field-tab__content-wrapper .settings-content__footer .btn-default:disabled { cursor: not-allowed; opacity: 0.7; display: flex; align-items: center; gap: 10px; } .checkout-edit-field-tab__content-wrapper .wpfnl-additional-replacement-options { position: relative; } .edit-field-settings__single-tab-content { display: none; position: relative; } .edit-field-settings__single-tab-content .checkout-edit-field { background: #FFFFFF; box-shadow: 0px 2px 4px rgba(223, 223, 249, 0.25); border-radius: 0px 10px 10px 10px; } .edit-field-settings__single-tab-content:first-child { display: block; } .edit-field-settings__single-tab-content .single-tab-header { display: flex; flex-flow: row; align-items: center; padding: 25px; justify-content: space-between; } .edit-field-settings__single-tab-content .single-tab-header .tab-title { font-weight: 500; font-size: 16px; line-height: 19px; color: #363B4E; text-transform: capitalize; } .edit-field-settings__single-tab-content .single-tab-header .restore-btn { margin-left: auto; margin-right: 10px; } .edit-field-settings__single-tab-content .single-tab-header .restore-btn .wpfnl-alert { margin-right: 6px; } .edit-field-settings__single-tab-content .single-tab-header .restore-btn .wpfnl-loader { position: relative; top: 2px; } .edit-field-settings__single-tab-content .single-tab-header .btn-default { height: 40px; line-height: 41px; min-width: 100px; } .edit-field-settings__single-tab-content .checkout-field-header { position: sticky; top: 0; z-index: 2; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; padding: 20px 20px 20px 77px; border-bottom: 1px solid #E5E8F3; background: #F7F7FA; } .edit-field-settings__single-tab-content .checkout-field-header .field-item { font-size: 12px; line-height: 14px; letter-spacing: 0.857143px; text-transform: uppercase; color: #7A8B9A; } .edit-field-settings__single-tab-content .checkout-field-header.bottom { border-bottom: 0; border-radius: 0 0 10px 10px; } .edit-field-settings__single-tab-content .checkout-field-header .field-hamburger, .edit-field-settings__single-tab-content .checkout__single-field .field-hamburger { width: 25px; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); } .edit-field-settings__single-tab-content .checkout-field-header .field-name, .edit-field-settings__single-tab-content .checkout__single-field .field-name { width: 160px; padding-right: 10px; } .edit-field-settings__single-tab-content .checkout-field-header .field-type, .edit-field-settings__single-tab-content .checkout__single-field .field-type { width: 75px; padding-right: 10px; } .edit-field-settings__single-tab-content .checkout-field-header .field-label, .edit-field-settings__single-tab-content .checkout__single-field .field-label { width: 150px; padding-right: 10px; } .edit-field-settings__single-tab-content .checkout-field-header .field-placeholder, .edit-field-settings__single-tab-content .checkout__single-field .field-placeholder { width: 250px; padding-right: 10px; } .edit-field-settings__single-tab-content .checkout-field-header .field-validation, .edit-field-settings__single-tab-content .checkout__single-field .field-validation { width: 94px; padding-right: 10px; } .edit-field-settings__single-tab-content .checkout-field-header .field-required, .edit-field-settings__single-tab-content .checkout__single-field .field-required { width: 74px; padding-right: 10px; } .edit-field-settings__single-tab-content .checkout-field-header .field-status, .edit-field-settings__single-tab-content .checkout__single-field .field-status { width: 65px; padding-right: 10px; } .edit-field-settings__single-tab-content .checkout-field-header .field-action, .edit-field-settings__single-tab-content .checkout__single-field .field-action { width: 57px; } .edit-field-settings__single-tab-content .checkout__single-field { position: relative; padding: 25px 20px 25px 65px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid #E5E8F3; cursor: all-scroll; min-height: 81px; } .edit-field-settings__single-tab-content .checkout__single-field:last-child { border-bottom: 0; } .edit-field-settings__single-tab-content .checkout__single-field.ui-sortable-helper { background-color: #F7F7FA; } .edit-field-settings__single-tab-content .checkout__single-field .field-item { font-weight: 400; font-size: 14px; line-height: 16px; color: #363B4E; word-break: break-all; } .edit-field-settings__single-tab-content .checkout__single-field .hamburger-bar { display: block; width: 18px; height: 14px; border-top: 2px solid #CDD2E6; border-bottom: 2px solid #CDD2E6; position: relative; cursor: all-scroll; } .edit-field-settings__single-tab-content .checkout__single-field .hamburger-bar:before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: #CDD2E6; } .edit-field-settings__single-tab-content .checkout__single-field .field-required, .edit-field-settings__single-tab-content .checkout__single-field .field-status { display: flex; align-items: center; } .edit-field-settings__single-tab-content .checkout__single-field .field-action { display: flex; } .edit-field-settings__single-tab-content .checkout__single-field .field-action button { border: none; cursor: pointer; text-align: center; padding: 0 6px; display: inline-block; height: 30px; line-height: 30px; background-color: transparent; margin: 0; } .edit-field-settings__single-tab-content .checkout__single-field .field-action button svg { width: 20px; height: 20px; display: block; } .checkout-edit-field__settings-option { background: #FFFFFF; border-radius: 10px; margin-top: 30px; border: 1px solid #E5E8F3; } .checkout-edit-field__settings-option .settings-title { font-weight: 700; font-size: 14px; line-height: 16px; padding: 20px 25px; color: #363B4E; border-bottom: 1px solid #E5E8F3; background: #F7F7FA; border-radius: 10px 10px 0 0; } .checkout-edit-field__settings-option .options-wrapper { padding: 30px 25px; display: flex; flex-flow: row wrap; align-items: flex-start; position: relative; } .checkout-edit-field__settings-option .options-wrapper::before { content: ""; position: absolute; left: 50%; top: 50%; height: calc(100% - 60px); width: 1px; background: #E5E8F3; transform: translateY(-50%); } .checkout-edit-field__settings-option .options-wrapper .single-option { margin-bottom: 20px; width: 50%; } .checkout-edit-field__settings-option .options-wrapper .single-option:last-child { margin-bottom: 0; } .checkout-edit-field__settings-option .options-wrapper .single-option:nth-child(odd) { padding-right: 50px; } .checkout-edit-field__settings-option .options-wrapper .single-option:nth-child(even) { padding-left: 60px; } .checkout-edit-field__settings-option .options-wrapper .single-option .wpfnl-checkbox label { font-size: 14px; line-height: 16px; color: #363B4E; padding-left: 33px; } .dradndrop-icon .st0 { fill: none; stroke: #7A8B9A; stroke-width: 5; stroke-miterlimit: 10; } .dradndrop-icon .st1 { fill: none; stroke: #7A8B9A; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18.3682, 8.1636; } .dradndrop-icon .st2 { fill: #7A8B9A; } .dradndrop-icon .st3 { fill: none; stroke: #7A8B9A; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: 18, 8; } .checkout-edit-field-tab__content-wrapper { padding-bottom: 30px; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer form { height: 100%; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body { padding: 20px 20px 24px; max-height: calc(100% - 80px); overflow: auto; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body::-webkit-scrollbar { width: 5px; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body::-webkit-scrollbar-track { background: #f2f5f8; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body::-webkit-scrollbar-thumb { background-color: #6E42D3; border-radius: 20px; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper { display: block; margin-bottom: 22px; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper:last-child { margin-bottom: 0; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .options-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .options-label > label { font-weight: 500; font-size: 14px; line-height: 16px; color: #000000; display: inline-block; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .options-label .btn-default { min-width: auto; border-radius: 4px; padding: 0; width: 40px; background: #f0e9ff; border: 1px solid #d5c6f9; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .wpfnl-fields { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .wpfnl-fields input[type=text] { width: calc(50% - 30px); min-width: auto; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .wpfnl-fields.fullwidth input[type=text] { width: calc(50% - 4px); } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .wpfnl-fields .btn-default { min-width: auto; border-radius: 4px; padding: 0; width: 40px; background: #f0e9ff; border: 1px solid #d5c6f9; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .wpfnl-fields .btn-default.remove { background: #f8d7da; border-color: #f5c2c7; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper .wpfnl-fields { max-width: inherit; width: 100%; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper > label { font-weight: 500; font-size: 14px; line-height: 16px; color: #000000; display: block; padding: 0; margin: 0 0 10px 0; width: 100%; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper input[type=text], .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper select { border-radius: 4px; height: 40px; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper .wpfnl-checkbox label { font-size: 14px; line-height: 16px; color: #000000; padding-left: 33px; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .field-footer { padding: 24px; text-align: center; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .field-footer .btn-default { height: 40px; line-height: 41px; width: 100%; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .field-footer .btn-default .wpfnl-loader { position: relative; top: 2px; display: inline-block; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .field-footer .btn-default:disabled { cursor: not-allowed; opacity: 0.7; display: flex; align-items: center; gap: 10px; justify-content: center; } .checkout-edit-field-tab__content-wrapper .edit-field-drawer .field-footer .wpfnl-alert { text-align: center; margin-top: 10px; display: block; } @media only screen and (max-width: 1499px) { .edit-field-settings__single-tab-content .single-tab-header { padding: 25px 20px; } .edit-field-settings__single-tab-content .checkout-field-header { padding: 25px 20px 25px 57px; } .edit-field-settings__single-tab-content .checkout__single-field { padding: 25px 20px 25px 57px; } .edit-field-settings__single-tab-content .checkout-field-header .field-hamburger, .edit-field-settings__single-tab-content .checkout__single-field .field-hamburger { left: 20px; } .edit-field-settings__single-tab-content .checkout-field-header .field-placeholder, .edit-field-settings__single-tab-content .checkout__single-field .field-placeholder { width: 160px; } .edit-field-settings__single-tab-content .checkout-field-header .field-name, .edit-field-settings__single-tab-content .checkout__single-field .field-name { width: 140px; } .edit-field-settings__single-tab-content .checkout-field-header .field-label, .edit-field-settings__single-tab-content .checkout__single-field .field-label { width: 100px; } } @media only screen and (max-width: 1299px) { .edit-field-settings__single-tab-content .checkout-edit-field { background: transparent; box-shadow: none; border-radius: 0; } .edit-field-settings__single-tab-content .single-tab-header { box-shadow: 0px 2px 4px rgba(238, 238, 245, 0.47); background-color: #ffffff; padding: 15px 20px; border-radius: 0px 10px 10px 10px; } .edit-field-settings__single-tab-content .checkout-field-header { display: none; } .edit-field-settings__single-tab-content .checkout__single-field { display: block; padding: 15px 20px 15px 57px; background-color: #ffffff; margin-top: 20px; border-radius: 10px; border-bottom: none; } .edit-field-settings__single-tab-content .checkout__single-field .field-item:not(.field-hamburger) { padding-right: 0; width: 100%; display: flex; flex-flow: row wrap; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f1f3; } .edit-field-settings__single-tab-content .checkout__single-field .field-item:not(.field-hamburger):last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; } .edit-field-settings__single-tab-content .checkout__single-field .field-item:not(.field-hamburger):before { content: attr(data-label); vertical-align: middle; width: 95px; font-weight: 500; } .checkout-edit-field__settings-option .options-wrapper::before { height: calc(100% - 50px); } .checkout-edit-field__settings-option .settings-title { padding: 20px 20px; } .checkout-edit-field__settings-option .options-wrapper { padding: 25px 20px; } .checkout-edit-field__settings-option .options-wrapper .single-option:nth-child(odd) { padding-right: 20px; } .checkout-edit-field__settings-option .options-wrapper .single-option:nth-child(even) { padding-left: 20px; } } @media only screen and (max-width: 1199px) { .checkout-edit-field__settings-option .options-wrapper { padding: 25px 20px; } .checkout-edit-field__settings-option .options-wrapper::before { display: none; } .checkout-edit-field__settings-option .options-wrapper .single-option { width: 100%; } .checkout-edit-field__settings-option .options-wrapper .single-option:nth-child(odd) { padding-right: 0; } .checkout-edit-field__settings-option .options-wrapper .single-option:nth-child(even) { padding-left: 0; } } .funnel-settings__header { padding: 28px 20px 27px 30px; } .funnel-settings__header .helper-link { display: flex; flex-flow: row; align-items: center; } .funnel-settings__header .helper-link li { margin-left: 35px; } .funnel-settings__header .helper-link li:first-child { margin-left: 0; } .funnel-settings__header .helper-link li a { font-weight: 500; font-size: 13px; color: #363B4E; } .funnel-settings__header .helper-link li a:hover { color: #6E42D3; } .wpfnl-settings-page { --wpfnl-settings-top: 32px; --wpfnl-settings-offset: 92px; } .wpfnl-settings-page .wpfnl-dashboard { min-height: 0; } .wpfnl-settings-page .wpfnl-dashboard__nav { border-bottom: 1px solid #E0E4EB; } .wpfnl-settings-page .dashboard-nav__content { width: 100%; margin: 0; } .wpfnl-funnel-settings__inner-content { width: 100%; padding: 0; } .wpfnl-panel-title, .wpfn-settings__panels .wpfnl-funnel__single-settings .wpfnl-mcp-page__heading, .wpfn-settings__panels .wpfnl-funnel__single-settings .wpfnl-ai-asst__heading { display: none; } .wpfn-settings__nav { width: 280px; flex-shrink: 0; padding: 15px 12px 20px; background: #ffffff; border-right: 1px solid #E0E4EB; border-radius: 0; box-shadow: none; position: sticky; top: var(--wpfnl-settings-top); z-index: 2; height: calc(100vh - var(--wpfnl-settings-offset)); overflow-y: auto; } .wpfn-settings__nav-group { margin-bottom: 8px; } .wpfn-settings__nav-group:last-child { margin-bottom: 0; } .wpfn-settings__nav-group + .wpfn-settings__nav-group { border-top: 1px solid #EBEDF0; padding-top: 8px; } .wpfn-settings__nav .wpfn-settings__nav-group-label { display: block; padding: 6px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #A7A8B3; user-select: none; } .wpfn-settings__nav ul { display: block; list-style: none; margin: 0; padding: 0; } .wpfn-settings__nav .nav-li { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 2px; height: auto; font-size: 14px; font-weight: 500; line-height: 1.4; color: #363B4E; border: 0; border-radius: 8px; cursor: pointer; position: relative; text-transform: capitalize; transition: background-color 0.18s ease, color 0.18s ease; } .wpfn-settings__nav .nav-li svg { margin-right: 0; width: 18px; height: 18px; flex-shrink: 0; } .wpfn-settings__nav .nav-li > span:first-of-type { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 500; color: #363B4E; } .wpfn-settings__nav .nav-li .pro-tag-icon { margin-top: 0; margin-left: auto; flex-shrink: 0; } .wpfn-settings__nav .nav-li.active { font-weight: 600; } .wpfn-settings__nav .nav-li.active, .wpfn-settings__nav .nav-li:hover { border-color: transparent; box-shadow: none; background-color: #F4F2FF; } .wpfn-settings__nav .nav-li.active span:not(.pro-tag), .wpfn-settings__nav .nav-li:hover span:not(.pro-tag) { color: #6e42d3; } .wpfn-settings__nav .nav-li.active svg rect, .wpfn-settings__nav .nav-li.active svg circle, .wpfn-settings__nav .nav-li.active svg path, .wpfn-settings__nav .nav-li:hover svg rect, .wpfn-settings__nav .nav-li:hover svg circle, .wpfn-settings__nav .nav-li:hover svg path { stroke: #6E42D3; } .wpfn-settings__nav .nav-li.active[data-id=optin-settings] svg rect, .wpfn-settings__nav .nav-li.active[data-id=optin-settings] svg circle, .wpfn-settings__nav .nav-li.active[data-id=optin-settings] svg path, .wpfn-settings__nav .nav-li:hover[data-id=optin-settings] svg rect, .wpfn-settings__nav .nav-li:hover[data-id=optin-settings] svg circle, .wpfn-settings__nav .nav-li:hover[data-id=optin-settings] svg path { fill: #6E42D3; } .wpfn-settings__nav .nav-li.active[data-id=permalink-settings] svg path, .wpfn-settings__nav .nav-li:hover[data-id=permalink-settings] svg path { stroke: none; fill: #6E42D3; } .wpfn-settings__nav .nav-li.active[data-id=user-role-manager] svg path, .wpfn-settings__nav .nav-li.active[data-id=advance-settings] svg path, .wpfn-settings__nav .nav-li.active[data-id=rollback-settings] svg path, .wpfn-settings__nav .nav-li.active[data-id=log-settings] svg path, .wpfn-settings__nav .nav-li:hover[data-id=user-role-manager] svg path, .wpfn-settings__nav .nav-li:hover[data-id=advance-settings] svg path, .wpfn-settings__nav .nav-li:hover[data-id=rollback-settings] svg path, .wpfn-settings__nav .nav-li:hover[data-id=log-settings] svg path { stroke: none; fill: #6E42D3; } .wpfn-settings__nav .nav-li.active[data-id=ai-assistant-settings] svg path.wpfnl-ai-nav-icon-eye, .wpfn-settings__nav .nav-li:hover[data-id=ai-assistant-settings] svg path.wpfnl-ai-nav-icon-eye { fill: #6E42D3; } .wpfn-settings__nav .create-btn { margin-left: auto; } .wpfn-settings__nav .create-btn a { height: 44px; line-height: 45px; } .wpfn-settings__content { flex: 1 1 auto; min-width: 0; max-height: calc(100vh - var(--wpfnl-settings-offset)); overflow-y: auto; scrollbar-width: none; } .wpfn-settings__content::-webkit-scrollbar { display: none; } .wpfn-settings__header { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap: 16px; min-height: 65px; padding: 14px 30px; background: #fff; border-bottom: 1px solid #E0E4EB; position: sticky; top: 0; z-index: 3; } .wpfn-settings__header-title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; color: #363B4E; font-size: 18px; font-weight: 600; line-height: 1.2; } .wpfn-settings__header-icon { display: flex; align-items: center; } .wpfn-settings__header-icon svg { display: block; width: 20px; height: 20px; } .wpfn-settings__header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .wpfn-settings__header.is-actionless .wpfn-settings__header-actions { display: none; } .wpfn-settings__header #wpfnl-update-global-settings { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; margin: 0; padding: 0 18px; line-height: 1; } .wpfn-settings__panels { padding: 30px 0 60px; } .wpfnl-funnel-settings__wrapper { display: flex; align-items: flex-start; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings { background: #fff; border-radius: 14px; width: calc(100% - 60px); max-width: 890px; margin: 0 auto; padding: 20px; box-shadow: 0px 1px 1px 0px rgba(182, 185, 191, 0.3); } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.log-settings, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.mcp, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.ai-assistant { max-width: 1120px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .settings-tab-container { margin: 16px 0 24px 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .settings-tab-container .wpfnl-general-settings-tab-nav { display: flex; border-bottom: 1px solid #EDECF2; list-style: none; gap: 24px; font-weight: 500; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .settings-tab-container .wpfnl-general-settings-tab-nav .inner-tab { color: #7A8B9A; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.07; cursor: pointer; position: relative; margin-bottom: 13px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .settings-tab-container .wpfnl-general-settings-tab-nav .inner-tab.active { color: #6E42D3; font-weight: 500; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .settings-tab-container .wpfnl-general-settings-tab-nav .inner-tab.active::after { content: ""; position: absolute; left: 0; bottom: -15px; width: 100%; height: 2px; background-color: #6E42D3; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-tab-content { display: none; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-tab-content.active { display: block; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings hr { border: none; border-bottom: 1px solid #EDECF2; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .settings-title { color: #363B4E; font-family: Roboto; font-size: 20px; font-style: normal; font-weight: 500; line-height: 1.2; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general hr { margin-bottom: 24px; border: none; border-bottom: 1px solid #EDECF2; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-hidden { display: none; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-box { padding-top: 16px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper { margin-bottom: 24px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper .wpfnl-fields { max-width: inherit; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper label { color: #2D3149; font-size: 15px; font-style: normal; font-weight: 400; line-height: 1; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper .wpfnl-items-wrapper { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper .wpfnl-items-wrapper .wpfnl-single-item { border-radius: 10px; width: 130px; border: 1px solid #EDECF2; background: #FFF; padding: 18px 30px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; z-index: 2; overflow: hidden; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper .wpfnl-items-wrapper .wpfnl-single-item img { width: 30px; height: 30px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper .wpfnl-items-wrapper .wpfnl-single-item .wpfnl-title { color: #2D3149; font-family: Roboto; font-size: 13px; font-style: normal; font-weight: 400; text-align: center; width: max-content; line-height: 1; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper .wpfnl-items-wrapper .wpfnl-single-item::before { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSIxMCIgZmlsbD0iIzZFNDJEMyIvPgogIDxwYXRoIGQ9Ik0xNC43OTA5IDcuMTkzNjlDMTQuNTEyNCA2LjkzNTM2IDE0LjA2MDIgNi45MzU1MiAxMy43ODE0IDcuMTkzNjlMOS4yMzgwOCAxMS40MDMyTDcuMjE4NzcgOS41MzIzMkM2LjkzOTk0IDkuMjczOTkgNi40ODc5NiA5LjI3Mzk5IDYuMjA5MTIgOS41MzIzMkM1LjkzMDI5IDkuNzkwNjUgNS45MzAyOSAxMC4yMDk0IDYuMjA5MTIgMTAuNDY3N0w4LjczMzE1IDEyLjgwNjJDOC44NzI0OCAxMi45MzUzIDkuMDU1MTggMTMgOS4yMzc4OSAxM0M5LjQyMDYgMTMgOS42MDM0NyAxMi45MzU1IDkuNzQyOCAxMi44MDYyTDE0Ljc5MDkgOC4xMjkwOUMxNS4wNjk3IDcuODcwOTQgMTUuMDY5NyA3LjQ1MjAxIDE0Ljc5MDkgNy4xOTM2OVoiIGZpbGw9IndoaXRlIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuMiIvPgo8L3N2Zz4="); position: absolute; right: 10px; top: 5px; display: block; width: 20px; height: 20px; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper .wpfnl-items-wrapper .wpfnl-single-item::after { content: ""; position: absolute; right: 10px; top: 5px; display: block; width: 18px; height: 18px; opacity: 1; visibility: visible; transition: all 0.3s ease; border: 1px solid #EDECF2; border-radius: 50%; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper .wpfnl-items-wrapper .wpfnl-single-item.checked { border: 1px solid #6E42D3; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper .wpfnl-items-wrapper .wpfnl-single-item.checked::before { opacity: 1; visibility: visible; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper .wpfnl-items-wrapper .wpfnl-single-item.checked::after { opacity: 0; visibility: hidden; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper .wpfnl-items-wrapper .wpfnl-single-item:hover { border: 1px solid #6E42D3; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general button { background: #fff; color: #6E42D3; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 600; line-height: 1; border-radius: 10px; border: 1px solid #6E42D3; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general button .icon-sync svg { stroke: #6E42D3 !important; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general button .icon { stroke: #6E42D3 !important; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings:not(.general) { display: none; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings > a > .pro-tag { padding: 14px 35px; text-align: center; margin: 30px; box-shadow: none; border-radius: 10px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .settings-title { color: #363B4E; font-family: Roboto; font-size: 20px; font-style: normal; font-weight: 500; line-height: 1.2; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box { padding: 0; background: unset; box-shadow: none; border-radius: unset; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.skip-cart-setting .wpfnl-skip-cart .wpfnl-field-wrapper .has-tooltip { max-width: 280px; width: 100%; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.skip-cart-setting .wpfnl-field-wrapper { gap: 6px; margin-bottom: 24px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.skip-cart-setting .wpfnl-field-wrapper.skip-cart-input-wrapper .skip-cart-label { width: auto; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.order-management .wpfnl-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.payment-management .wpfnl-field-wrapper { gap: 6px; margin-bottom: 24px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.analytics-settings .wpfnl-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.opt-in-email .wpfnl-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.recapcha-settings .wpfnl-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.facebook-pixel .wpfnl-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.gtm .wpfnl-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.google-place-api-settings .wpfnl-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.enable-log-wrapper .wpfnl-field-wrapper { gap: 6px; margin-bottom: 24px; max-width: 350px; width: 100%; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.analytics-settings .wpfnl-field-wrapper label, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.opt-in-email .wpfnl-field-wrapper label, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.recapcha-settings .wpfnl-field-wrapper label, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.facebook-pixel .wpfnl-field-wrapper label, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.gtm .wpfnl-field-wrapper label, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.google-place-api-settings .wpfnl-field-wrapper label, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.enable-log-wrapper .wpfnl-field-wrapper label { display: flex; align-items: center; justify-content: start; gap: 4px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.analytics-settings .pixel-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.analytics-settings .gtm-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.opt-in-email .pixel-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.opt-in-email .gtm-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.recapcha-settings .pixel-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.recapcha-settings .gtm-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.facebook-pixel .pixel-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.facebook-pixel .gtm-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.gtm .pixel-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.gtm .gtm-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.google-place-api-settings .pixel-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.google-place-api-settings .gtm-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.enable-log-wrapper .pixel-field-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.enable-log-wrapper .gtm-field-wrapper { display: flex; align-items: start; justify-content: space-between; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.analytics-settings .pixel-field-wrapper .guide-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.analytics-settings .gtm-field-wrapper .guide-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.opt-in-email .pixel-field-wrapper .guide-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.opt-in-email .gtm-field-wrapper .guide-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.recapcha-settings .pixel-field-wrapper .guide-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.recapcha-settings .gtm-field-wrapper .guide-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.facebook-pixel .pixel-field-wrapper .guide-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.facebook-pixel .gtm-field-wrapper .guide-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.gtm .pixel-field-wrapper .guide-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.gtm .gtm-field-wrapper .guide-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.google-place-api-settings .pixel-field-wrapper .guide-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.google-place-api-settings .gtm-field-wrapper .guide-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.enable-log-wrapper .pixel-field-wrapper .guide-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.enable-log-wrapper .gtm-field-wrapper .guide-btn { display: flex; align-items: center; justify-content: center; background: transparent; gap: 6px; padding: 9px 14px; border-radius: 8px; border: 1px solid #EDECF2; outline: none; color: #363B4E; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box.recapcha-settings { padding: 0; background: unset; box-shadow: none; border-radius: none; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box .recapcha-wrapper { gap: 6px; max-width: 350px; margin-bottom: 20px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box .recapcha-wrapper:last-child { margin-bottom: 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box .recapcha-wrapper .connect-recaptcha, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-box .recapcha-wrapper .recaptcha-label { width: unset; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper > label { width: 300px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .disable-analytics-label, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .facebook-pixel-label, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .gtm-label, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .log-status-label { width: unset; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields { width: 100%; max-width: 100%; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields.remove-transients { max-width: 100px; width: 100%; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields.remove-transients .transient-btn-wrapper { width: unset; display: flex; align-items: center; flex-direction: row-reverse; gap: 10px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields.enable-facebook-pixel, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields.enable-log-status, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields.enable-gtm, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields.disable-theme-style, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields.clear-funnel-data { width: unset; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields .sync-btn-wrapper { background-image: url("../../assets//images/sync-template-img.png"); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 10px; height: 186px; width: 276px; display: flex; align-items: center; justify-content: center; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields select { min-width: auto; padding: 0 15px; line-height: 1.1; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields .clear-template { padding: 0 20px; display: flex; flex-flow: row; align-items: center; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields .clear-template.clear-transients-btn { border-radius: 6px; background: rgba(255, 81, 85, 0.1); padding: 9px 10px; border: none; outline: none; cursor: pointer; transition: all 0.3s; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields .clear-template.clear-transients-btn:hover { background: rgba(255, 81, 85, 0.3); } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields .clear-template .sync-btn-text { color: #6E42D3; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields .clear-template .sync-btn-text.success { color: #239654; font-size: 12px; font-weight: 400; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields .clear-template span { position: relative; top: -1px; margin-right: 5px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields .clear-template svg { display: block; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields .clear-template .sync-icon { animation: sync_spin 1.5s linear infinite; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper .wpfnl-fields .clear-template .check-icon { top: 0px; display: none; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper.analytics-stats .wpfnl-fields { max-width: 100%; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper.analytics-stats .wpfnl-fields .wpfnl-checkbox { display: inline-block; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper.analytics-stats .wpfnl-fields.pixel-events-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper.analytics-stats .wpfnl-fields.gtm-events-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper.analytics-stats .wpfnl-fields.disable-tracking-wrapper { display: flex; flex-direction: column; gap: 22px; margin-top: 20px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper.analytics-stats .wpfnl-fields.pixel-events-wrapper .wpfnl-checkbox label, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper.analytics-stats .wpfnl-fields.gtm-events-wrapper .wpfnl-checkbox label, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper.analytics-stats .wpfnl-fields.disable-tracking-wrapper .wpfnl-checkbox label { color: #363B4E; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.07; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper.sync-template { margin-bottom: 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper.sync-template .wpfnl-fields { display: flex; align-items: center; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-field-wrapper.sync-template .wpfnl-fields .wpfnl-alert { margin-left: 8px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .settings-title { box-shadow: none; color: #2D3149; font-size: 18px; font-style: normal; font-weight: 500; line-height: 1.33; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-all-fields { width: 100%; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-all-fields .wpfnl-fields { max-width: 100%; margin-bottom: 12px; width: 100%; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-all-fields .wpfnl-fields .wpfnl-radiobtn > label { border-radius: 10px; border: 1px solid #EDECF2; background: #FFF; padding: 16px 20px; padding-left: 60px; width: 100%; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-all-fields .wpfnl-fields .wpfnl-radiobtn > label:hover { border: 1px solid #6E42D3; box-shadow: 0px 20px 30px 0px rgba(199, 191, 217, 0.3); } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-all-fields .wpfnl-fields:last-child { margin-bottom: 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-all-fields .wpfnl-fields label span { display: block; word-break: break-word; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-all-fields .wpfnl-fields label span.label-title { color: #2D3149; font-size: 14px; font-style: normal; font-weight: 500; line-height: 1; margin-bottom: 7px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-all-fields .wpfnl-fields label span.label-subheading { color: #7A8B9A; font-size: 13px; font-style: normal; font-weight: 400; line-height: 1; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-all-fields .wpfnl-radiobtn input[type=radio]:checked + label { border: 1px solid #6E42D3; box-shadow: 0px 20px 30px 0px rgba(199, 191, 217, 0.3); } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-all-fields .wpfnl-radiobtn input[type=radio]:checked + label::before { border-color: #6E42D3; background-color: #6E42D3; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-all-fields .wpfnl-radiobtn label::before { left: 20px; top: 33%; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-all-fields .wpfnl-radiobtn label::after { content: ""; position: absolute; left: 24.5px; top: 43%; width: 9px; height: 4px; transform: rotate(-45deg); border-bottom: 2px solid #fff; border-left: 2px solid #fff; transition: all 0.3s ease; opacity: 0; visibility: hidden; border-radius: 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-all-fields .wpfnl-radiobtn input[type=radio]:checked + label::after { visibility: visible; opacity: 1; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-box { padding-top: 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink hr { margin-bottom: 24px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-field-wrapper { align-items: flex-start; margin-bottom: 24px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-field-wrapper:last-child { margin-bottom: 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-field-wrapper > label { color: #2D3149; font-size: 15px; font-style: normal; font-weight: 400; line-height: 1; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-field-wrapper.wpfnl-align-top { align-items: flex-start; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-field-wrapper.wpfnl-align-top .wpfnl-fields { max-width: inherit; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-field-wrapper.wpfnl-align-top .wpfnl-fields .wpfnl-radiobtn label { font-size: 13px; text-transform: none; line-height: 1.3; word-break: break-all; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-field-wrapper.wpfnl-align-top .wpfnl-fields .wpfnl-radiobtn label:before { top: 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-field-wrapper.wpfnl-align-top .wpfnl-fields .wpfnl-radiobtn label:after { top: 5px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-field-wrapper.parmalink-base .wpfnl-parmalink-inputs-wrapper { width: calc(100% - 300px); } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-field-wrapper.parmalink-base .wpfnl-parmalink-inputs-wrapper .wpfnl-fields { max-width: 350px; margin-bottom: 16px; width: 100%; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-field-wrapper.parmalink-base .wpfnl-parmalink-inputs-wrapper .wpfnl-fields label { margin-bottom: 6px; display: inline-block; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-field-wrapper.parmalink-base .wpfnl-parmalink-inputs-wrapper .wpfnl-fields label:last-child { margin-bottom: 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.permalink .wpfnl-field-wrapper.parmalink-base .wpfnl-parmalink-inputs-wrapper .wpfnl-fields:last-child { margin-bottom: 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.optin .email-settings .settings-title, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.optin .wpfnl-recaptcha-setting .settings-title { box-shadow: none; color: #2D3149; font-size: 18px; font-style: normal; font-weight: 500; line-height: 1.33; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.optin .wpfnl-recaptcha-setting .wpfnl-checkbox.no-title label:before { border-color: #bdc7eb; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.lms-settings .settings-title { margin-bottom: 16px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.lms-settings .wpfnl-field-wrapper { gap: 6px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.offer { position: relative; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.offer .wpfnl-box { position: relative; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.offer .wpfnl-field-wrapper > label { width: 480px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.offer .wpfnl-field-wrapper .wpfnl-fields { width: auto; max-width: initial; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.offer .settings-title { position: relative; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.event-tracking .pro-tag-icon { display: inline-block; transform: translate(5px, 5px); } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.event-tracking .google-place-api-settings { margin-bottom: 20px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.event-tracking .google-place-api-settings .wpfnl-fields { position: relative; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.event-tracking .google-place-api-settings .wpfnl-fields input { padding: 1rem 3.2rem 1rem 1.2rem; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.event-tracking .google-place-api-settings .wpfnl-fields .password-icon { display: flex; align-items: center; position: absolute; right: 0; width: 1.2rem; color: #f9f9f9; transition: color 0.2s; cursor: pointer; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.event-tracking .google-place-api-settings .wpfnl-fields .eye-regular svg { width: 20px; float: right; margin-left: -25px; margin-top: -27px; position: relative; z-index: 2; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.event-tracking .google-place-api-settings .wpfnl-fields .eye-slash-regular svg { width: 20px; float: right; margin-left: -25px; margin-top: -25px; position: relative; z-index: 2; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.event-tracking .google-place-api-settings .wpfnl-fields .hide-eye-icon { display: none; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .utm, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .gtm, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .email-settings, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .facebook-pixel, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-recaptcha-setting, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .google-place-api-settings { margin-bottom: 30px; background-color: #fff; border-radius: 10px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .utm .settings-title, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .gtm .settings-title, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .email-settings .settings-title, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .facebook-pixel .settings-title, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-recaptcha-setting .settings-title, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .google-place-api-settings .settings-title { display: flex; flex-flow: row wrap; align-items: center; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .utm .settings-title > svg, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .gtm .settings-title > svg, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .email-settings .settings-title > svg, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .facebook-pixel .settings-title > svg, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-recaptcha-setting .settings-title > svg, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .google-place-api-settings .settings-title > svg { margin-right: 10px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .utm .settings-title a, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .gtm .settings-title a, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .email-settings .settings-title a, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .facebook-pixel .settings-title a, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-recaptcha-setting .settings-title a, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .google-place-api-settings .settings-title a { line-height: 1; position: relative; top: 3px; margin-left: auto; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .utm .settings-title a svg, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .gtm .settings-title a svg, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .email-settings .settings-title a svg, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .facebook-pixel .settings-title a svg, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-recaptcha-setting .settings-title a svg, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .google-place-api-settings .settings-title a svg { width: 20px; height: 20px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .utm .settings-title a svg path, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .gtm .settings-title a svg path, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .email-settings .settings-title a svg path, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .facebook-pixel .settings-title a svg path, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-recaptcha-setting .settings-title a svg path, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .google-place-api-settings .settings-title a svg path { stroke: #6E42D3; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .utm .wpfnl-checkbox.no-title label:before, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .gtm .wpfnl-checkbox.no-title label:before, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .email-settings .wpfnl-checkbox.no-title label:before, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .facebook-pixel .wpfnl-checkbox.no-title label:before, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .wpfnl-recaptcha-setting .wpfnl-checkbox.no-title label:before, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings .google-place-api-settings .wpfnl-checkbox.no-title label:before { border-color: #6E42D3; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .settings-title, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .settings-title { position: relative; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list { background: #FFF; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list__row, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding: 20px 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list__row:first-child, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list__row:first-child { padding-top: 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list__row + .wpfnl-settings-list__row, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list__row + .wpfnl-settings-list__row { border-top: 1px solid #EDECF2; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list__info, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list__info { flex: 1 1 auto; min-width: 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list__title, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list__title { margin: 0 0 6px; color: #363B4E; font-size: 15px; font-weight: 600; line-height: 1.35; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list__desc, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list__desc { margin: 0; max-width: 620px; color: #7A8B9A; font-size: 13px; font-weight: 400; line-height: 1.55; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list__desc a, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list__desc a { font-size: inherit; color: #6E42D3; text-decoration: underline; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list__action, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list__action { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding-top: 2px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list__value, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list__value { color: #363B4E; font-size: 14px; font-weight: 500; line-height: 1.4; white-space: nowrap; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list .transient-btn-wrapper, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list .transient-btn-wrapper { display: flex; align-items: center; flex-direction: row-reverse; gap: 10px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list .clear-transients-btn, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list .clear-transients-btn { display: flex; align-items: center; justify-content: center; padding: 9px 10px; border: none; border-radius: 6px; background: rgba(255, 81, 85, 0.1); outline: none; cursor: pointer; transition: all 0.3s; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list .clear-transients-btn:hover, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list .clear-transients-btn:hover { background: rgba(255, 81, 85, 0.3); } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list .rollback-options, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list .rollback-options { width: 180px; min-width: 180px; height: 36px; margin: 0; color: #363B4E; font-size: 13px; font-weight: 400; line-height: normal; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list .wpfnl-rollback-button, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list .wpfnl-rollback-button { display: flex; align-items: center; justify-content: center; width: 100px; height: 36px; border-radius: 10px; background: #6E42D3; box-shadow: 0px 9px 14px 0px rgba(193, 183, 232, 0.5); color: #fff; font-size: 14px; font-weight: 500; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list .wpfnl-rollback-button:hover, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list .wpfnl-rollback-button:hover { color: #fff; background: #4C25A5; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-align-top, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-align-top { align-items: flex-start; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .hints, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .hints { display: block; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-error, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-error { color: #F69220; font-family: Roboto; font-size: 13px; font-style: normal; font-weight: 400; line-height: 15px; display: flex; align-items: center; gap: 6px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.advance-settings .wpfnl-settings-list__hint, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.rollback-settings .wpfnl-settings-list__hint { margin-top: 14px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.log-settings .log-view-select { width: 330px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.log-settings .log-view-btn > a { margin-left: 10px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.log-settings .wpfnl-loader { position: relative; top: 2px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.log-settings .log-field .settings-title { padding-bottom: 13px; margin-bottom: 22px; border-bottom: 1px solid #EDECF2; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-user-role-container .wpfnl-box { position: relative; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-user-role-container .wpfnl-box .wpfnl-role-list-wrapper { display: flex; flex-direction: column; align-items: start; gap: 12px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-user-role-container .wpfnl-box .wpfnl-role-list-wrapper .wpfnl-role-row { display: flex; align-items: center; justify-content: space-between; max-width: 316px; width: 100%; border-radius: 10px; border: 1px solid #EDECF2; background: #FFF; padding: 16px; transition: all 0.3s; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-user-role-container .wpfnl-box .wpfnl-role-list-wrapper .wpfnl-role-row:has(.switcher-wrapper input[type=checkbox]:checked) { border: 1px solid #6E42D3; box-shadow: 0px 20px 30px 0px rgba(199, 191, 217, 0.3); } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-user-role-container .wpfnl-box .wpfnl-role-list-wrapper .wpfnl-role-row:hover { border: 1px solid #6E42D3; box-shadow: 0px 20px 30px 0px rgba(199, 191, 217, 0.3); } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-user-role-container .wpfnl-box .wpfnl-role-list-wrapper .wpfnl-role-row .text-wrapper .role-header { display: flex; align-items: center; gap: 5px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-user-role-container .wpfnl-box .wpfnl-role-list-wrapper .wpfnl-role-row .text-wrapper .role-header .role-title { color: #363B4E; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-user-role-container .wpfnl-box .wpfnl-role-list-wrapper .wpfnl-role-row .text-wrapper .role-description { color: #7A8B9A; font-family: Roboto; font-size: 13px; font-style: normal; font-weight: 400; line-height: 1; margin-top: 5px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-role-table { width: 100%; text-align: left; border-collapse: collapse; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-role-table tr th { font-size: 16px; color: #363B4E; font-weight: 600; padding: 14px 20px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-role-table tr th:first-child { width: 210px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-role-table tr td > span, .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-role-table tr td { font-size: 14px; color: #363B4E; font-weight: 600; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-role-table tr td { border-top: 1px solid #EEF0F3; padding: 14px 20px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-role-table tr td:first-child { width: 210px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-role-table tr td .wpfnl-checkbox { border: 1px solid #EEF0F3; padding: 8px; display: inline-block; border-radius: 8px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-role-table tr td .wpfnl-checkbox label { font-size: 13px; line-height: 1; color: #363B4E; cursor: pointer; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-analytics-settings-container { position: relative; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.user-role-manager .wpfnl-analytics-settings-container .upgrade-to-pro-hoverlay { border-radius: 0; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications .wpfnl-field-wrapper { max-width: 100% !important; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications .wpfnl-field-wrapper > label { display: flex; align-items: center; gap: 4px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications input[type=radio]:checked { border-color: #6e42d3; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications input[type=radio]:checked::before { background-color: #6e42d3; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications .wpfnl-fields { max-width: 410px; width: calc(100% - 300px); } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications .report-frequency .wpfnl-radio-wrapper { display: flex; align-items: center; gap: 20px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications input[type=time] { min-width: auto; width: auto; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications input[type=time]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications .test-notification-wrapper { background: #f7f7f7; padding: 20px; border-radius: 12px; border: 1px solid #ececec; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications .test-notification-wrapper .wpfnl-field-wrapper { display: flex; flex-flow: column; align-items: flex-start; gap: 15px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications .test-notification-wrapper .test-notification-content { display: flex; align-items: center; gap: 14px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications .test-notification-wrapper .test-notification-icon svg { width: 37px; height: auto; display: block; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications .test-notification-wrapper .test-notification-text h4 { color: #424758; font-weight: 500; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications .test-notification-wrapper .test-notification-action { display: flex; align-items: center; gap: 14px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications .test-notification-wrapper .test-notification-action input[type=email] { width: 310px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.notifications .test-notification-wrapper .test-notification-action button { display: flex; flex-flow: row; align-items: center; justify-content: center; line-height: 39px; } @-webkit-keyframes sync_spin { 0% { -webkit-transform: rotate(360deg); } 100% { -webkit-transform: rotate(0deg); } } @keyframes sync_spin { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } @media only screen and (max-width: 1399px) { .wpfn-settings__nav { width: 250px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings { padding: 25px 35px; } } @media only screen and (max-width: 1199px) { .wpfn-settings__nav { width: 220px; padding: 12px 10px 16px; } .wpfn-settings__nav .nav-li { padding: 8px 10px; } .wpfn-settings__nav .nav-li > span:first-of-type { font-size: 13px; } .wpfn-settings__header { padding: 12px 20px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings { width: calc(100% - 40px); } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.log-settings .log-view-btn > a { min-width: 100px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper > label { width: 200px; } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings.general .wpfnl-field-wrapper .wpfnl-fields { width: 100%; max-width: 100%; } } @media only screen and (max-width: 991px) { .wpfn-settings__nav { width: 190px; } .wpfn-settings__nav .nav-li { gap: 8px; } .wpfn-settings__nav .nav-li > span:first-of-type { font-size: 12px; } .wpfn-settings__nav .wpfn-settings__nav-group-label { font-size: 10px; } .wpfn-settings__nav .create-btn a { padding: 0 15px; } } @media only screen and (max-width: 782px) { .wpfnl-funnel-settings__wrapper { flex-direction: column; align-items: stretch; } .wpfn-settings__nav { position: static; width: 100%; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid #EBEDF0; } .wpfn-settings__nav ul { display: flex; flex-flow: row wrap; gap: 4px; } .wpfn-settings__nav .nav-li { margin-bottom: 0; } .wpfn-settings__content { max-height: none; overflow: visible; } .wpfn-settings__header { top: var(--wpfnl-settings-top); } .wpfnl-funnel-settings__wrapper .wpfnl-funnel__single-settings { width: calc(100% - 30px); } } .wpfunnels-addons { background: #f6f5fa; } .wpfunnels-addons .addons-content { background: #F6F5FA; padding: 40px 30px; } .wpfunnels-addons .section-title { margin: 0 0 20px; color: #363B4E; font-size: 24px; font-weight: 600; line-height: 1.3; } .wpfunnels-addons .wpfunnels-addons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .wpfunnels-addons .wpfunnels-addons-card { background: #ffffff; border-radius: 10px; padding: 20px; position: relative; transition: all 0.3s ease; box-shadow: 0 1px 1px rgba(182, 185, 191, 0.3); } .wpfunnels-addons .wpfunnels-addons-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .wpfunnels-addons .wpfunnels-addons-card .badge { position: absolute; top: 12px; right: 12px; padding: 4px 9px; border-radius: 4px; font-size: 11px; font-weight: 500; line-height: 1; background-color: #ececec; } .wpfunnels-addons .wpfunnels-addons-card .badge.hot { background-color: #7742E6; color: #ffffff; } .wpfunnels-addons .wpfunnels-addons-card .addons-icon { margin-bottom: 16px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #ECF1F6; display: flex; align-items: center; justify-content: center; } .wpfunnels-addons .wpfunnels-addons-card .addons-icon svg { display: block; } .wpfunnels-addons .wpfunnels-addons-card .addons-title { margin: 0 0 7px; color: #2D3149; font-size: 16px; font-weight: 500; line-height: 1.3; } .wpfunnels-addons .wpfunnels-addons-card .addons-description { margin: 0 0 20px; color: #6E7A85; font-size: 14px; font-weight: 400; line-height: 1.5; } .wpfunnels-addons .wpfunnels-addons-card .addons-description .guide-link { color: #6E42D3; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s ease; } .wpfunnels-addons .wpfunnels-addons-card .addons-description .guide-link svg { display: inline-block; vertical-align: middle; } .wpfunnels-addons .wpfunnels-addons-card .addons-description .guide-link:hover { text-decoration: underline; } .wpfunnels-addons .wpfunnels-addons-card .addons-cta-button { padding: 6px 14px; font-size: 14px; font-weight: 500; line-height: 1.4; cursor: pointer; transition: all 0.3s ease; border-radius: 8px; border: 1px solid #6E42D3; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; background: #ffffff; color: #6E42D3; } .wpfunnels-addons .wpfunnels-addons-card .addons-cta-button:hover { background: #6E42D3; color: #ffffff; } .wpfunnels-addons .wpfunnels-addons-card .addons-cta-button.activate-button { background: #ffffff; color: #6E42D3; border: 1px solid #6E42D3; } .wpfunnels-addons .wpfunnels-addons-card .addons-cta-button.activate-button:hover { background: #6E42D3; color: #ffffff; } .wpfunnels-addons .wpfunnels-addons-card .addons-cta-button.active-status { color: #10B981; border: 1px solid #10B981; cursor: default; } .wpfunnels-addons .wpfunnels-addons-card .addons-cta-button.active-status:hover { background: transparent; color: #10B981; } @media (max-width: 1280px) { .wpfunnels-addons .wpfunnels-addons-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .wpfunnels-addons .wpfunnels-addons-grid { grid-template-columns: 1fr; } } @media (max-width: 1399px) { .wpfunnels-addons .addons-content { padding: 20px 0px; } .wpfunnels-addons .wpfunnels-addons-grid { gap: 20px; } } .wpfunnels-setup { background: #F6F5FA; margin: 0; padding: 0; } .wpfunnels-setup * { padding: 0; margin: 0; box-sizing: border-box; } .wpfunnels-setup #wpfunnels_setup_wizard { height: 100vh; width: 100%; margin: 0 auto; } .wpfunnels-setup .wpfnl-mm-setup-wizard { display: flex; align-items: stretch; position: relative; height: 100vh; width: 100%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar { width: 260px; background: #FFF; height: 100vh; position: sticky; top: 0; box-shadow: 1px 0px 2px rgba(190, 190, 215, 0.14); display: flex; flex-direction: column; flex-shrink: 0; padding: 30px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-branding { border-bottom: 1px solid #EAE9EE; padding: 0 0 30px 0; display: flex; align-items: center; gap: 12px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-branding .wpfnl-mm-setup-wizard-logo { width: 36px; height: 27px; flex-shrink: 0; object-fit: contain; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-branding .wpfnl-mm-setup-wizard-brand-name { font-size: 22px; color: #111827; line-height: 16px; font-weight: 700; letter-spacing: 0px; font-family: "Inter", sans-serif; margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps { padding: 30px 0; flex: 1; display: flex; flex-direction: column; gap: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step { display: flex; align-items: center; gap: 8px; padding: 9px 11px; cursor: pointer; transition: all 0.3s ease; border-radius: 100px; margin-bottom: 12px; border: 1px solid transparent; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step:last-child { margin-bottom: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step.active { background: #F6F5FA; border: 1px solid #6E42D3; padding: 8px 10px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step.active .wpfnl-mm-setup-wizard-step-number { background: #6E42D3; color: #FFF; font-weight: 700; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step.active .wpfnl-mm-setup-wizard-step-label { color: #6E42D3; font-weight: 500; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step.completed .wpfnl-mm-setup-wizard-step-number { background: transparent; color: rgba(122, 140, 154, 0.7); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step.completed .wpfnl-mm-setup-wizard-step-number svg { width: 20px; height: 20px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step.completed .wpfnl-mm-setup-wizard-step-label { color: rgba(122, 140, 154, 0.7); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step .wpfnl-mm-setup-wizard-step-number { width: 24px; height: 24px; border-radius: 16px; background: #EDE5FF; color: #6E42D3; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-family: "DM Sans", sans-serif; line-height: 12px; flex-shrink: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step .wpfnl-mm-setup-wizard-step-label { font-size: 16px; color: #6D707D; font-family: "DM Sans", sans-serif; font-weight: 400; letter-spacing: -0.16px; line-height: normal; white-space: nowrap; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-exit { margin-top: auto; padding: 0; text-align: left; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-exit .wpfnl-mm-setup-wizard-exit-link { font-size: 15px; color: #7A8C9A; text-decoration: none; font-family: "DM Sans", sans-serif; font-weight: 400; line-height: 18px; transition: color 0.3s ease; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-exit .wpfnl-mm-setup-wizard-exit-link:hover { color: #6E42D3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-help-btn { position: fixed; bottom: 40px; right: 54px; z-index: 100; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-help-btn .wpfnl-mm-help-btn-circle { width: 34px; height: 34px; border-radius: 100px; background: #201F22; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.16); transition: all 0.3s ease; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-help-btn .wpfnl-mm-help-btn-circle svg { width: 16px; height: 16px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-help-btn .wpfnl-mm-help-btn-circle:hover { background: #363B4E; transform: scale(1.05); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 80px 20px 24px; position: relative; overflow-y: auto; background: #EFEEF1; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content * { font-family: "DM Sans", sans-serif; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons { display: flex; justify-content: space-between; align-items: center; width: 100%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn { padding: 10px 24px; border-radius: 10px; font-size: 16px; font-weight: 500; line-height: 24px; cursor: pointer; transition: all 0.3s ease; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn.wpfnl-mm-btn-secondary { background: #FFF; color: #363B4E; border: 1px solid #ECEBF0; min-width: 87px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn.wpfnl-mm-btn-secondary:hover { border-color: #6E42D3; color: #6E42D3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn.wpfnl-mm-btn-primary { background: #6E42D3; color: #FFF; letter-spacing: 0.2px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn.wpfnl-mm-btn-primary svg { width: 17px; height: 12px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn.wpfnl-mm-btn-primary:hover { background: #5c36b3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn.wpfnl-mm-btn-primary:disabled { background: #ccc; cursor: not-allowed; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn-group { display: flex; gap: 12px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent { display: flex; justify-content: center; margin-top: 30px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox input[type=checkbox] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox input[type=checkbox]:checked ~ .wpfnl-mm-checkbox-checkmark { background: #6E42D3; border-color: #6E42D3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox input[type=checkbox]:checked ~ .wpfnl-mm-checkbox-checkmark:after { display: block; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox .wpfnl-mm-checkbox-checkmark { width: 16px; height: 16px; border: 1px solid #ab91e6; border-radius: 4px; background: #FFF; flex-shrink: 0; position: relative; transition: all 0.3s ease; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox .wpfnl-mm-checkbox-checkmark:after { content: ""; position: absolute; display: none; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); left: 5px; top: 2px; width: 3px; height: 7px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox .wpfnl-mm-checkbox-label { font-size: 14px; font-weight: 500; color: #7A8C9A; line-height: 20px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal { width: 100%; max-width: 908px; display: flex; flex-direction: column; gap: 0; position: relative; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-header { text-align: center; margin-bottom: 30px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-header .wpfnl-mm-choose-goal-title { font-size: 24px; font-weight: 600; font-family: "DM Sans", sans-serif; color: #363B4E; line-height: 30px; letter-spacing: -0.6px; margin: 0 0 10px 0; max-width: 592px; margin-left: auto; margin-right: auto; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-header .wpfnl-mm-choose-goal-subtitle { font-size: 15px; font-weight: 400; font-family: "DM Sans", sans-serif; color: #6E7A85; line-height: 19px; margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container { border-radius: 20px; padding: 60px 30px; display: flex; flex-direction: column; align-items: center; gap: 35px; margin-bottom: 25px; background: #FFF; box-shadow: 0 20px 25px -5px rgba(143, 130, 196, 0.05), 0 8px 10px -6px rgba(143, 130, 196, 0.08); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); width: 100%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card { background: #FFF; border: 1px solid #F6F5FA; border-radius: 16px; padding: 20px 10px 24px; cursor: pointer; transition: all 0.3s ease; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card:hover { border-color: #EDE5FF; box-shadow: 0px 4px 12px rgba(110, 66, 211, 0.1); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card.active { border-color: #6E42D3; box-shadow: 0 20px 30px rgba(199, 191, 217, 0.3019607843); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card .wpfnl-mm-goal-card-checkmark { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; background: #6E42D3; border-radius: 100px; display: flex; align-items: center; justify-content: center; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card .wpfnl-mm-goal-card-checkmark svg { width: 16px; height: 16px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card .wpfnl-mm-goal-card-icon svg { display: block; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card .wpfnl-mm-goal-card-content .wpfnl-mm-goal-card-title { font-size: 16px; font-weight: 700; font-family: "DM Sans", sans-serif; color: #363B4E; line-height: 13px; margin: 0 0 10px 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card .wpfnl-mm-goal-card-content .wpfnl-mm-goal-card-description { font-size: 15px; font-weight: 400; color: #6E7A85; line-height: 1.5; margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container { display: flex; align-items: center; justify-content: space-between; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-mm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 8px; font-weight: 500; font-size: 14px; transition: all 0.3s ease; border: none; cursor: pointer; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-mm-btn-primary { background: #6E42D3; color: white; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-mm-btn-primary:hover:not(:disabled) { background: #5B35B8; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-mm-btn:disabled { opacity: 0.5; cursor: not-allowed; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-mm-btn-secondary { background: white; color: #363B4E; border-radius: 10px; border: 1px solid #ECEBF0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-mm-btn-secondary:hover:not(:disabled) { border-color: #D1D5DB; background: #F9FAFB; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-spinner { animation: spin 0.8s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup { width: 100%; max-width: 940px; display: flex; flex-direction: column; gap: 24px; position: relative; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-header { text-align: center; margin-bottom: 20px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-header .wpfnl-mm-setup-title { font-size: 24px; font-weight: 700; color: #363B4E; line-height: 35px; margin: 0 0 8px 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-header .wpfnl-mm-setup-subtitle { font-size: 15px; font-weight: 400; color: #6E7A85; line-height: 15px; margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section { background: #FFF; border-radius: 20px; box-shadow: 0 20px 25px -5px rgba(143, 130, 196, 0.05), 0 8px 10px -6px rgba(143, 130, 196, 0.08); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-woo-notice { background: #EBF5FF; border: 1px solid #B3D9FF; border-radius: 12px; padding: 16px 20px; display: flex; align-items: flex-start; gap: 12px; width: 100%; margin-top: 16px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-woo-notice .wpfnl-mm-woo-notice-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 2px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-woo-notice .wpfnl-mm-woo-notice-icon svg { width: 20px; height: 20px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-woo-notice .wpfnl-mm-woo-notice-content { flex: 1; display: flex; flex-direction: column; gap: 4px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-woo-notice .wpfnl-mm-woo-notice-content .wpfnl-mm-woo-notice-title { font-size: 14px; font-weight: 600; font-family: "DM Sans", sans-serif; color: #0073E6; line-height: 18px; margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-woo-notice .wpfnl-mm-woo-notice-content .wpfnl-mm-woo-notice-text { font-size: 13px; font-weight: 400; font-family: "DM Sans", sans-serif; color: #1E4D7A; line-height: 18px; margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 45px 109px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-woo-detection { gap: 24px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-setup-plugins-card { border-radius: 12px; border: 1.5px solid #F1EFF7; background: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; position: relative; width: 110px; height: 100px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-setup-plugins-card.selected { box-shadow: 0 20px 30px 0 rgba(199, 191, 217, 0.3); border-color: #239654; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-setup-plugins-card .wpfnl-setup-plugin-selected { position: absolute; background: #239654; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; top: 5px; right: 5px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-setup-plugins-card .wpfnl-setup-plugin-name { color: #6E7A85; font-size: 14px; font-weight: 400; line-height: 1; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card { cursor: pointer; width: auto; min-width: 110px; padding: 10px 12px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card.selected { border-color: #6E42D3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: auto; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card.disabled:hover { border-color: #F1EFF7; box-shadow: none; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card.disabled.selected { border-color: #F1EFF7; box-shadow: none; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card .wpfnl-setup-plugin-selected { background: #6E42D3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card .wpfnl-setup-pro-badge { position: absolute; top: 5px; right: 5px; background: #f68524; color: #fff; font-size: 9px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 4px; white-space: nowrap; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card img { width: 30px; height: 30px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins { padding: 45px 30px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card { cursor: pointer; width: 100%; min-width: unset; padding: 16px 20px; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; background: transparent; border: 1px solid #F1EFF7; border-radius: 14px; transition: all 0.3s ease; height: 100%; width: auto; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card:hover { border-color: #E8E4F3; background: #FEFEFE; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card.selected { border-color: #6E42D3; box-shadow: 0 20px 30px rgba(199, 191, 217, 0.3); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card .wpfnl-setup-plugin-selected { background: #6E42D3; top: 12px; right: 12px; width: 24px; height: 24px; box-shadow: 0px 2px 6px rgba(110, 66, 211, 0.3); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card .wpfnl-setup-plugin-selected svg { width: 16px; height: 16px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card img { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card .wpfnl-setup-plugin-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card .wpfnl-setup-plugin-name { font-size: 15px; font-weight: 600; color: #363B4E; line-height: 1.4; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card .wpfnl-setup-plugin-description { font-size: 14px; font-weight: 400; color: #6E7A85; line-height: 1.5; max-width: 240px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-setup-section-title { font-size: 16px; font-weight: 500; color: #363B4E; line-height: 18px; margin: 0; text-align: center; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-woo-status { display: flex; gap: 10px; align-items: center; width: 100%; justify-content: center; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-woo-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card:only-child { grid-column: 1/-1; max-width: 50%; margin: 0 auto; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card { width: 110px; height: 100px; border: 1.5px solid #F1EFF7; border-radius: 12px; background: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: relative; cursor: pointer; transition: all 0.3s ease; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card.active { border-color: #239654; box-shadow: 0px 20px 30px rgba(199, 191, 217, 0.3); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card.active .wpfnl-mm-status-card-checkmark { display: flex; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card .wpfnl-mm-status-card-checkmark { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; background: #239654; border-radius: 100px; display: none; align-items: center; justify-content: center; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card .wpfnl-mm-status-card-checkmark svg { width: 16px; height: 16px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card .wpfnl-mm-status-card-icon { width: 28px; height: 24px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card .wpfnl-mm-status-card-icon svg { width: 100%; height: 100%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card .wpfnl-mm-status-card-label { font-size: 14px; font-weight: 400; font-family: "DM Sans", sans-serif; color: #6E7A85; line-height: 13px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid { display: grid; grid-template-columns: repeat(6, 110px); gap: 10px; justify-content: center; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card { width: 110px; height: 100px; border: 1px solid #F1EFF7; border-radius: 10px; background: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: relative; cursor: pointer; transition: all 0.3s ease; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card:hover { border-color: #EDE5FF; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card.active { border: 1.5px solid #6E42D3; border-radius: 14px; box-shadow: 0px 20px 30px rgba(199, 191, 217, 0.3); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card.active .wpfnl-mm-builder-card-checkmark { display: flex; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card .wpfnl-mm-builder-card-checkmark { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; background: #6E42D3; border-radius: 100px; display: none; align-items: center; justify-content: center; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card .wpfnl-mm-builder-card-checkmark svg { width: 16px; height: 16px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card .wpfnl-mm-builder-card-icon { width: 30px; height: 30px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card .wpfnl-mm-builder-card-label { font-size: 14px; font-weight: 400; font-family: "DM Sans", sans-serif; color: #6E7A85; line-height: 13px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-grid { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-grid .wpfnl-mm-plugin-card { min-width: 86px; height: 44px; border: 1px solid #F1EFF7; border-radius: 12px; background: #FFF; display: flex; align-items: center; justify-content: center; padding: 0 20px; position: relative; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-grid .wpfnl-mm-plugin-card .wpfnl-mm-plugin-badge { position: absolute; top: -8px; right: -8px; background: #239654; color: #FFF; font-size: 10px; font-weight: 700; font-family: "DM Sans", sans-serif; padding: 5px; border-radius: 5px; line-height: 24px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-grid .wpfnl-mm-plugin-card .wpfnl-mm-plugin-icon { display: flex; align-items: center; justify-content: center; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-grid .wpfnl-mm-plugin-card .wpfnl-mm-plugin-icon img, .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-grid .wpfnl-mm-plugin-card .wpfnl-mm-plugin-icon svg { max-width: 100%; height: auto; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-note { display: flex; align-items: flex-start; gap: 7px; padding-top: 22px; border-top: 1px solid #EAE9EE; margin-top: 0; width: 100%; justify-content: center; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-note p { font-size: 14px; font-weight: 400; font-family: "DM Sans", sans-serif; color: #7A8C9A; line-height: 15px; margin: 0; max-width: 588px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-page-builder-info { display: flex; align-items: center; justify-content: center; gap: 6px; border-top: 1px solid #F1EFF7; padding: 20px 20px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-page-builder-info svg { flex-shrink: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-page-builder-info p { margin: 0; color: #E4781B; font-size: 14px; font-weight: 400; line-height: 1.3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-page-builder-info strong { font-weight: 600; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-columns { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-columns .wpfnl-mm-setup-section-content { padding: 28px 20px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-columns .wpfnl-mm-page-builders .wpfnl-mm-woo-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; justify-content: unset; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-columns .wpfnl-mm-page-builders .wpfnl-setup-plugins-card { width: 100%; min-width: unset; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-columns .wpfnl-mm-essential-plugins .wpfnl-mm-woo-status { grid-template-columns: 1fr; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-columns .wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card:only-child { max-width: 100%; grid-column: auto; margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel { width: 100%; max-width: 1049px; display: flex; flex-direction: column; gap: 15px; position: relative; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-header { text-align: center; margin-bottom: 15px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-header .wpfnl-mm-build-funnel-title { font-size: 24px; font-weight: 700; font-family: "DM Sans", sans-serif; color: #363B4E; line-height: 35px; letter-spacing: -1px; margin: 0 0 8px 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-header .wpfnl-mm-build-funnel-subtitle { font-size: 15px; font-weight: 400; font-family: "DM Sans", sans-serif; color: #6E7A85; line-height: 15px; margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-container { display: flex; gap: 3px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-form { width: 461px; background: #FFF; border-radius: 16px; padding: 40px; display: flex; flex-direction: column; min-height: 482px; gap: 30px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-fields { display: flex; flex-direction: column; gap: 40px; flex: 1; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-field { display: flex; flex-direction: column; gap: 9px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-label { font-size: 15px; font-weight: 500; font-family: "DM Sans", sans-serif; color: #363B4E; letter-spacing: -0.44px; line-height: 16px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-label .required { color: red; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-label .optional { font-weight: 400; color: #7A8C9A; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown { position: relative; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-trigger { height: 46px; background: #FFF; border: 1px solid #F1EFF7; border-radius: 8px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: all 0.3s ease; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-trigger .placeholder { font-size: 14px; font-family: "DM Sans", sans-serif; color: #7A8C9A; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-trigger .selected-value { font-size: 14px; font-family: "DM Sans", sans-serif; color: #363B4E; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-trigger .dropdown-icon { transition: transform 0.3s ease; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown.open .wpfnl-mm-build-funnel-dropdown-trigger { border-color: #6E42D3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown.open .wpfnl-mm-build-funnel-dropdown-trigger .dropdown-icon { transform: rotate(180deg); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-menu { position: absolute; top: 100%; left: 0; right: 0; background: #FFF; border: 1px solid #F1EFF7; border-radius: 8px; margin-top: 4px; z-index: 100; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); max-height: 270px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-item { padding: 12px 16px; font-size: 14px; font-family: "DM Sans", sans-serif; color: #363B4E; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background 0.2s ease; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-item:hover { background: #F6F5FA; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-item.selected { background: #F6F5FA; color: #6E42D3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-hint { font-size: 12px; font-family: "Inter", sans-serif; color: #7A8C9A; line-height: 16px; margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-revenue { margin-top: auto; padding: 16px 20px; background: #F6F5FA; border: 1px dashed #6E42D3; border-radius: 8px; display: none; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-revenue .wpfnl-mm-build-funnel-revenue-label { font-size: 14px; font-family: "DM Sans", sans-serif; color: #7A8C9A; margin: 0 0 4px 0; font-weight: 500; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-revenue .wpfnl-mm-build-funnel-revenue-value { font-size: 16px; font-family: "DM Sans", sans-serif; font-weight: 500; color: #363B4E; margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-revenue .wpfnl-mm-build-funnel-revenue-value .total { color: #6E42D3; font-weight: 700; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview { flex: 1; background: #FFF; border-radius: 16px; min-height: 484px; display: flex; flex-direction: column; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tabs { display: flex; align-items: center; justify-content: center; padding: 20px 20px 0; gap: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tab { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tab .wpfnl-mm-build-funnel-tab-icon { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #F1EFF7; display: flex; align-items: center; justify-content: center; color: #6E7A85; transition: all 0.3s ease; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tab .wpfnl-mm-build-funnel-tab-label { font-size: 12px; font-family: "Inter", sans-serif; font-weight: 500; color: #6E7A85; text-align: center; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tab.active .wpfnl-mm-build-funnel-tab-icon { border: 1.5px solid #6E42D3; color: #6E42D3; box-shadow: 0px 20px 30px rgba(199, 191, 217, 0.3); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tab.active .wpfnl-mm-build-funnel-tab-label { color: #363B4E; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tab-line { width: 22px; height: 1px; background: #E5E5E5; margin: 0 8px; margin-bottom: 24px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-content { flex: 1; padding: 20px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-image { width: 100%; height: 100%; min-height: auto; background: #F6F5FA; border-radius: 16px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; padding: 16px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-image img { width: 100%; height: 350px; object-fit: cover; object-position: top center; border-radius: 10px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-placeholder, .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 400px; color: #7A8C9A; text-align: center; padding: 40px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-placeholder svg, .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-empty svg { margin-bottom: 16px; opacity: 0.5; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-placeholder p, .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-empty p { font-size: 14px; font-family: "DM Sans", sans-serif; margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-placeholder h4, .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-empty h4 { font-size: 18px; font-family: "DM Sans", sans-serif; font-weight: 600; color: #363B4E; margin: 0 0 8px 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-buttons { display: flex; justify-content: space-between; align-items: center; width: 100%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-buttons .wpfnl-mm-btn-skip { background: transparent; color: #7A8C9A; font-weight: 500; font-size: 15px; padding: 10px; border: none; cursor: pointer; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-buttons .wpfnl-mm-btn-skip:hover { color: #6E42D3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template { width: 100%; max-width: 940px; display: flex; flex-direction: column; gap: 0; position: relative; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-setup-header { text-align: center; margin-bottom: 24px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-setup-header .wpfnl-mm-setup-title { font-size: 24px; font-weight: 700; font-family: "DM Sans", sans-serif; color: #363B4E; line-height: 35px; letter-spacing: -1px; margin: 0 0 8px 0; height: 30px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-setup-header .wpfnl-mm-setup-subtitle { font-size: 15px; font-weight: 400; font-family: "DM Sans", sans-serif; color: #6E7A85; line-height: 15px; margin: 0; height: 19px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-templates-grid { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center; background: #FFF; border-radius: 16px; padding: 40px 45px; margin-bottom: 15px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card { width: 259px; height: 305px; background: #FFF; border: 1px solid #F1EFF7; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; box-shadow: 0px 20px 20px 0px rgba(190, 190, 215, 0.15); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card:hover { border-color: #C4B5F4; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card:hover .wpfnl-mm-template-card-overlay { opacity: 1; visibility: visible; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-preview { width: 100%; height: 237px; position: relative; overflow: hidden; background: #F6F5FA; border-radius: 10px 10px 0 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 237px; background: rgba(38, 33, 51, 0.44); display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; visibility: hidden; transition: all 0.3s ease; border-radius: 10px 10px 0 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay .wpfnl-mm-btn-import, .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay .wpfnl-mm-btn-preview { height: 30px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; border: none; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay .wpfnl-mm-btn-import { background: #FFF; color: #363B4E; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay .wpfnl-mm-btn-import:hover { background: #F6F5FA; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay .wpfnl-mm-btn-preview { background: transparent; color: #FFF; border: 1px solid #F2F2F2; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay .wpfnl-mm-btn-preview:hover { background: rgba(255, 255, 255, 0.1); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-checkmark { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; background: #FFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 2px 10px 1px rgba(143, 130, 196, 0.431372549); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-suggested { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 100px; background: #6E42D3; color: #FFF; font-size: 10px; font-weight: 600; font-family: "DM Sans", sans-serif; line-height: 1.4; letter-spacing: 0.1px; box-shadow: 0 2px 6px rgba(110, 66, 211, 0.35); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-suggested svg { flex-shrink: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card.wpfnl-mm-template-card--suggested:not(.active) { border-color: #C4B5F4; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-divider { width: 100%; height: 1px; background: #F1EFF7; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-body { padding: 16px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-title { font-size: 14px; font-weight: 500; font-family: "Roboto", sans-serif; color: #363B4E; line-height: normal; margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-steps { font-size: 12px; font-weight: 400; font-family: "Inter", sans-serif; color: #7A8B9A; line-height: 12px; letter-spacing: -0.12px; } @keyframes wpfnl-skeleton-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-skeleton-block { background: linear-gradient(90deg, #f0eef8 25%, #e4e0f2 50%, #f0eef8 75%); background-size: 600px 100%; animation: wpfnl-skeleton-shimmer 1.4s ease-in-out infinite; border-radius: 6px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-templates-skeleton { pointer-events: none; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card--skeleton { cursor: default; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card--skeleton .wpfnl-mm-template-card-preview { border-radius: 10px 10px 0 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card--skeleton .wpfnl-mm-skeleton-title { width: 120px; height: 14px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card--skeleton .wpfnl-mm-skeleton-steps { width: 60px; height: 10px; margin-top: 2px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete { width: 100%; max-width: 785px; display: flex; flex-direction: column; gap: 28px; align-items: center; position: relative; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-header { text-align: center; max-width: 631px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-header .wpfnl-mm-complete-title { font-size: 24px; font-weight: 700; font-family: "DM Sans", sans-serif; color: #363B4E; line-height: 35px; letter-spacing: -1px; margin: 0 0 8px 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-header .wpfnl-mm-complete-subtitle { font-size: 15px; font-weight: 400; font-family: "DM Sans", sans-serif; color: #6E7A85; line-height: 22px; margin: 0; max-width: 534px; margin-left: auto; margin-right: auto; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper { width: 100%; padding: 10px; background: #FFF; border-radius: 16px; box-shadow: 0px 2px 3px rgba(147, 130, 171, 0.05), 0px 4px 5px rgba(85, 85, 85, 0.04), 0px 4px 5px rgba(85, 85, 85, 0.03), 0px 16px 16px rgba(85, 85, 85, 0.02); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video { width: 100%; height: 382px; border-radius: 16px; background: #F6F5FA; position: relative; overflow: hidden; display: flex; flex-direction: column; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-bg .wpfnl-mm-complete-video-image { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-bg .wpfnl-mm-complete-video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(60, 37, 111, 0) 37.658%, rgba(75, 52, 129, 0.3) 74.038%); border-radius: 16px; cursor: pointer; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-iframe { width: 100%; height: 100%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-player { position: absolute; bottom: 18px; left: 20px; right: 20px; display: flex; align-items: center; gap: 12px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-player .wpfnl-mm-complete-play-btn { width: 16px; height: 16px; background: transparent; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-player .wpfnl-mm-complete-play-btn svg { width: 16px; height: 16px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-player .wpfnl-mm-complete-progress-bar { flex: 1; height: 9px; background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); border-radius: 100px; overflow: hidden; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-player .wpfnl-mm-complete-progress-bar .wpfnl-mm-complete-progress-fill { width: 0%; height: 100%; background: #6E42D3; border-radius: 100px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-complete-buttons { display: flex; gap: 12px; align-items: center; justify-content: center; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-btn { padding: 10px 20px; border-radius: 10px; font-size: 16px; line-height: 24px; cursor: pointer; transition: all 0.3s ease; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-btn.wpfnl-mm-btn-secondary { background: #FFF; color: #363B4E; border: 1px solid #ECEBF0; font-weight: 700; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-btn.wpfnl-mm-btn-secondary:hover { border-color: #6E42D3; color: #6E42D3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-btn.wpfnl-mm-btn-primary { background: #6E42D3; color: #FFF; font-weight: 600; letter-spacing: 0.2px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-btn.wpfnl-mm-btn-primary svg { width: 17px; height: 12px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-btn.wpfnl-mm-btn-primary:hover { background: #5c36b3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-complete-info { padding: 10px; text-align: center; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-complete-info p { font-size: 14px; font-weight: 400; color: #7A8C9A; line-height: 22px; margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome { width: 100%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome .wpfnl-wizard-welcome-content { width: 100%; max-width: 918px; margin: 0 auto; padding: 40px 30px 0; border-radius: 20px; background: #FFF; box-shadow: 0 20px 25px -5px rgba(143, 130, 196, 0.05), 0 8px 10px -6px rgba(143, 130, 196, 0.08); overflow: hidden; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome .wpfnl-wizard-welcome-title { color: #363B4E; text-align: center; font-size: 34px; font-weight: 600; line-height: 1.3; letter-spacing: -0.6px; text-align: center; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome .wpfnl-wizard-welcome-subtitle { color: #6E7A85; font-size: 15px; font-weight: 400; line-height: 1.4; text-align: center; margin-top: 4px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome .wpfnl-mm-choose-goal-buttons { justify-content: center; margin-top: 24px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome .welcome-image { margin: 0; display: block; transform: translateX(30px); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome .welcome-image img { display: block; margin-left: auto; margin-top: 67px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container { padding: 40px 30px 30px; border-radius: 20px; background: #FFF; box-shadow: 0 20px 25px -5px rgba(143, 130, 196, 0.05), 0 8px 10px -6px rgba(143, 130, 196, 0.08); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-product-sync-search-wrapper { flex: 1; position: relative; display: flex; align-items: center; gap: 0px; padding: 10px 14px; border: 1px solid #EEF0F3; border-radius: 8px; background: #FFF; transition: all 0.3s ease; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-product-sync-search-wrapper:focus-within { border-color: #6E42D3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-product-sync-search-wrapper svg { flex-shrink: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-product-sync-search-wrapper .wpfnl-product-sync-search-input { flex: 1; border: none !important; outline: none; font-size: 14px; color: #7A8B9A; background: transparent; box-shadow: none !important; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-product-sync-search-wrapper .wpfnl-product-sync-search-input::placeholder { color: #9CA3AF; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-create-product-btn { display: inline-flex; align-items: center; gap: 5px; padding: 12px 20px; border: none; border-radius: 10px; color: #6E42D3; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; background: rgba(110, 66, 211, 0.12); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-create-product-btn path { transition: all 0.3s ease; stroke: #5B35B8; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-create-product-btn:hover { background: #5B35B8; border-color: #5B35B8; color: #fff; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-create-product-btn:hover path { stroke: #fff; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-create-product-btn svg { display: block; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-label { margin-bottom: 16px; color: #7A8B9A; font-size: 14px; font-weight: 400; line-height: 1; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-cards { display: flex; flex-direction: column; gap: 12px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid #F1EFF7; border-radius: 12px; background: #FFF; cursor: pointer; transition: all 0.3s ease; position: relative; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card:hover { border-color: #D1D5DB; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card.active { border-color: #6E42D3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-image { width: 67px; height: 67px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid #F1EFF7; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-image img { display: block; height: 100%; width: 100%; object-fit: cover; border-radius: 8px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-image svg { width: 32px; height: 32px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-content { display: flex; flex-direction: column; width: calc(100% - 82px); padding-right: 30px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-title { margin: 0; color: #363B4E; font-size: 14px; font-weight: 700; line-height: 1.3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-description { margin: 0; color: #6E7A85; font-size: 15px; font-weight: 400; line-height: 1.4; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-price { margin: 3px 0 0 0; color: #363B4E; font-size: 15px; font-weight: 700; line-height: 1; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-checkbox { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-checkbox .wpfnl-product-sync-checkbox-circle { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #D1D5DB; background: #FFF; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-checkbox .wpfnl-product-sync-checkbox-circle svg { width: 14px; height: 14px; display: none; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-radio:checked ~ .wpfnl-product-sync-card-checkbox .wpfnl-product-sync-checkbox-circle { background: #6E42D3; border-color: #6E42D3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-radio:checked ~ .wpfnl-product-sync-card-checkbox .wpfnl-product-sync-checkbox-circle svg { display: block; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-skeleton { display: flex; flex-direction: column; gap: 12px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-skeleton-card { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid #F1EFF7; border-radius: 12px; background: #FFF; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-pulse { background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%); background-size: 200% 100%; animation: wpfnl-skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 6px; } @keyframes wpfnl-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-image { width: 67px; height: 67px; border-radius: 8px; flex-shrink: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-content { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-right: 30px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-title { height: 14px; width: 50%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-description { height: 12px; width: 70%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-price { height: 14px; width: 30%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-checkbox { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; border: 1px solid #FEE2E2; border-radius: 12px; background: #FEF2F2; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error .wpfnl-product-sync-error-icon { margin-bottom: 12px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error .wpfnl-product-sync-error-icon svg { display: block; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error .wpfnl-product-sync-error-text { margin: 0 0 16px; color: #991B1B; font-size: 14px; font-weight: 500; line-height: 1.5; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error .wpfnl-product-sync-retry-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: 1px solid #DC2626; border-radius: 8px; background: #FFF; color: #DC2626; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error .wpfnl-product-sync-retry-btn:hover { background: #DC2626; color: #FFF; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error.wpfnl-product-sync-template-error { flex-direction: row; padding: 14px 20px; margin-top: 12px; gap: 10px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error.wpfnl-product-sync-template-error .wpfnl-product-sync-error-icon { margin-bottom: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error.wpfnl-product-sync-template-error .wpfnl-product-sync-error-text { margin: 0; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; text-align: center; border: 1px dashed #D1D5DB; border-radius: 12px; background: #FAFAFA; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-empty .wpfnl-product-sync-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: #F3F4F6; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-empty .wpfnl-product-sync-empty-title { margin: 0 0 6px; color: #363B4E; font-size: 15px; font-weight: 600; line-height: 1.3; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-empty .wpfnl-product-sync-empty-subtitle { margin: 0 0 20px; color: #6E7A85; font-size: 13px; font-weight: 400; line-height: 1.5; max-width: 300px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-empty .wpfnl-product-sync-create-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border: none; border-radius: 10px; background: #6E42D3; color: #FFF; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-empty .wpfnl-product-sync-create-btn:hover { background: #5B35B8; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container { border-radius: 20px; background: #FFF; box-shadow: 0 20px 25px -5px rgba(143, 130, 196, 0.05), 0 8px 10px -6px rgba(143, 130, 196, 0.08); display: flex; align-items: center; justify-content: center; height: 508px; position: relative; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .wpfnl-generate-funnel-canvas { width: 100%; height: auto; max-width: 580px; border-radius: 20px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .wpfnl-generate-funnel-canvas img { width: 100%; height: 100%; border-radius: 20px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .generate-funnel-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; background: rgba(75, 52, 129, 0.4); backdrop-filter: blur(0); border: 1px solid #fff; padding: 20px; display: flex; flex-flow: column; align-items: center; justify-content: flex-end; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .generate-funnel-overlay .generated-notice { border-radius: 12px; background: #FFF; box-shadow: 0 4px 4px 0 rgba(151, 145, 166, 0.3); display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #6E7A85; font-size: 16px; font-weight: 400; line-height: 1; padding: 13px 20px; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container.generating .generate-funnel-overlay { justify-content: center; backdrop-filter: blur(5px); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container { /* HTML:
*/ } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .generate-loader { width: 50px; aspect-ratio: 1; display: grid; border-radius: 50%; background: linear-gradient(0deg, rgba(244, 230, 230, 0.5) 30%, rgba(255, 255, 255, 0) 0 70%, rgb(255, 255, 255) 0) 50%/8% 100%, linear-gradient(90deg, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0) 0 70%, rgba(255, 255, 255, 0.75) 0) 50%/100% 8%; background-repeat: no-repeat; animation: l23 1s infinite steps(12); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .generate-loader::before, .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .generate-loader::after { content: ""; grid-area: 1/1; border-radius: 50%; background: inherit; opacity: 0.915; transform: rotate(30deg); } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .generate-loader::after { opacity: 0.83; transform: rotate(60deg); } @keyframes l23 { 100% { transform: rotate(1turn); } } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); justify-content: center; align-items: center; display: flex; z-index: 999999; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-modal-overlay .wpfnl-modal-wrapper { width: 80%; background: #FFF; padding: 25px; height: 80%; border-radius: 10px; position: relative; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-modal-overlay .wpfnl-modal-close-btn { position: absolute; right: -14px; top: -14px; background: #ffffff; box-shadow: 0px 1px 1px #dadada; border-radius: 100px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-modal-overlay #wpfnl-create-product { width: 100%; height: 100%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-modal-overlay #wpfnl-create-product iframe { height: 100%; } .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-modal-overlay .wpfnl-loader { border: 2px solid #8265c5; border-radius: 50%; border-top: 2px solid #fff; width: 50px; height: 50px; animation: spin 0.7s linear infinite; display: block; margin-left: 4px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: #fff; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .wpfunnels-setup { /* ========================================================================== Setup wizard shell — top bar + centered body + progress footer. Replaces the former left-sidebar chrome. Uses the existing WPFunnels brand tokens (#6E42D3 / DM Sans) so the wizard stays consistent with the rest of the admin. ========================================================================== */ } .wpfunnels-setup .wpfnl-wz { font-family: "DM Sans", sans-serif; background: #F6F5FA; display: flex; flex-direction: column; height: 100%; min-height: 100vh; color: #363B4E; -webkit-font-smoothing: antialiased; } .wpfunnels-setup .wpfnl-wz *, .wpfunnels-setup .wpfnl-wz *::before, .wpfunnels-setup .wpfnl-wz *::after { box-sizing: border-box; } .wpfunnels-setup .wpfnl-wz { /* ---------- Top bar ---------- */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-top { flex-shrink: 0; height: 60px; background: #FFFFFF; border-bottom: 1px solid #ECEBF0; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-logo { display: flex; align-items: center; gap: 9px; flex: 1 0 0; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-logo-mark { width: 26px; height: 26px; display: block; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-logo-text { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: #363B4E; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-step-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .wpfunnels-setup .wpfnl-wz { /* Balances the logo column so the step counter stays centered — see the template comment. The visible chip lives on the button inside it. */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-exit-slot { flex: 1 0 0; display: flex; justify-content: flex-end; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-exit { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 4px; cursor: pointer; font-family: inherit; font-weight: 700; white-space: nowrap; color: #363B4E; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-exit svg { flex-shrink: 0; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-exit:focus-visible { outline: 2px solid #6E42D3; outline-offset: 2px; border-radius: 4px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-exit-text { font-size: 12px; } .wpfunnels-setup .wpfnl-wz { /* ---------- Body ---------- */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-body { flex: 1 1 auto; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; padding: 40px 24px 24px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-center { width: 100%; max-width: 960px; margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .wpfunnels-setup .wpfnl-wz { /* ---------- Welcome step ---------- This step has no wizard footer — its own "Get started" button is the primary action — so it stretches to fill the body. The hero group takes the free space via auto margins, which centers it and leaves the consent opt-in resting on the bottom edge rather than floating under the CTA. */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-welcome { align-self: stretch; margin: 0; /* .wpfnl-wz-center caps at 960px; the one-line subtitle alone runs ~930px, which leaves almost no margin. The higher specificity here (two chained classes) reliably wins over that single-class rule regardless of source order, giving both lines real breathing room. */ max-width: 1040px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-welcome-main { margin: auto 0; display: flex; flex-direction: column; align-items: center; width: 100%; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-welcome .wpfnl-wz-consent { margin-top: 0; padding-top: 24px; /* Long enough that both new copy strings need the full center column width (960px) to have a shot at fitting on one line; narrower windows still wrap gracefully since neither has white-space: nowrap. */ max-width: none; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-welcome .wpfnl-wz-sub { /* The new copy runs ~930px wide at 15px — needs the full center column (960px) to have a shot at one line, same reasoning as the consent text above it. */ max-width: none; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-welcome .wpfnl-wz-h1 { font-size: 34px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-h1 { font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -0.4px; color: #363B4E; margin: 0 0 10px; padding: 0; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-sub { font-size: 15px; line-height: 1.7; color: #7A8B9A; margin: 0 0 24px; max-width: 560px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-error { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; font-size: 14px; border-radius: 8px; padding: 10px 16px; margin: 0 0 20px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-empty { font-size: 14px; color: #6E7A85; max-width: 420px; line-height: 1.7; } .wpfunnels-setup .wpfnl-wz { /* ---------- Hero artwork ---------- welcome-image.png is 1450x832 RGBA line art that carries its own soft purple wash out to the edges of the canvas. It is illustration, not a screenshot, so it gets no frame — a border/radius/shadow would box the artwork's own transparent bounds and read as a pasted-in thumbnail. It sits directly on the page and blends into it. */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-art { width: 100%; max-width: 900px; margin: 4px 0 20px; border: 0; background: none; box-shadow: none; /* Capped by viewport height, not just width — this is the tallest single element on the welcome step, and the step has no footer to borrow space from, so on a short viewport it must be the thing that shrinks. 54vh only binds below ~950px of viewport height; taller screens fall back to the artwork's true size (900x516) via max-width instead. width: auto + both max- constraints keeps the aspect ratio intact either way. */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-art img { display: block; width: auto; height: auto; max-width: 100%; max-height: 54vh; margin: 0 auto; } .wpfunnels-setup .wpfnl-wz { /* ---------- Buttons ---------- */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 600; line-height: 1; padding: 12px 24px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; min-width: 132px; text-decoration: none; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn:focus-visible { outline: 2px solid #6E42D3; outline-offset: 2px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn:disabled { opacity: 0.5; cursor: not-allowed; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn.is-hidden { visibility: hidden; pointer-events: none; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--lg { padding: 14px 34px; font-size: 15px; border-radius: 9999px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--primary { background: #6E42D3; color: #fff; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--primary:hover:not(:disabled) { background: #5B35B8; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--ghost { background: transparent; border-color: #ECEBF0; color: #6E7A85; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--ghost:hover:not(:disabled) { border-color: #6E42D3; color: #6E42D3; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--danger { background: #EF4444; color: #fff; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--danger:hover:not(:disabled) { background: #DC2626; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--placeholder { visibility: hidden; pointer-events: none; } .wpfunnels-setup .wpfnl-wz { /* ---------- Spinner ---------- */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: wpfnl-wz-spin 0.7s linear infinite; } .wpfunnels-setup .wpfnl-wz { /* ---------- Footer ---------- */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-footer { flex-shrink: 0; background: #FFFFFF; border-top: 1px solid #ECEBF0; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-footer-actions { display: flex; align-items: center; gap: 4px; } .wpfunnels-setup .wpfnl-wz { /* Quiet text action beside the primary button — deliberately low emphasis so it reads as an escape hatch, not an alternative path. */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-skip { background: none; border: 0; padding: 12px 16px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: #6E7A85; transition: color 0.2s ease; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-skip:hover:not(:disabled) { color: #363B4E; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-skip:focus-visible { outline: 2px solid #6E42D3; outline-offset: 2px; border-radius: 6px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-skip:disabled { opacity: 0.5; cursor: not-allowed; } .wpfunnels-setup .wpfnl-wz { /* ---------- Template grid ---------- */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; width: 100%; text-align: left; } .wpfunnels-setup .wpfnl-wz { /* Held inert while the funnel builds — the grid stays on screen for context, but the selection must not change mid-flight. */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-grid.is-busy { pointer-events: none; opacity: 0.6; transition: opacity 0.2s ease; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card { background: #FFFFFF; border: 1.5px solid #ECEBF0; border-radius: 12px; padding: 12px; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card:hover { border-color: #C4B5F4; transform: translateY(-2px); } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card.is-active { border-color: #6E42D3; box-shadow: 0 4px 16px rgba(110, 66, 211, 0.12); } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card:focus-visible { outline: 2px solid #6E42D3; outline-offset: 2px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card.is-skeleton { cursor: default; pointer-events: none; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-thumb { position: relative; border-radius: 8px; overflow: hidden; background: #F6F5FA; aspect-ratio: 4/3; margin-bottom: 12px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .wpfunnels-setup .wpfnl-wz { /* Sits inside the thumb, which is `overflow: hidden`, so the pill clips to the rounded corner rather than overhanging the card. */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-badge { position: absolute; top: 0; left: 0; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px 0 8px 0; background: #6E42D3; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-badge svg { flex-shrink: 0; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card.is-suggested { border-color: #C4B5F4; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-preview { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%) translateY(6px); opacity: 0; background: rgba(54, 59, 78, 0.92); color: #fff; border: 0; border-radius: 9999px; padding: 7px 18px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card:hover .wpfnl-wz-template-preview, .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-preview:focus-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-title { font-size: 14.5px; font-weight: 600; color: #363B4E; margin: 0 0 4px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-meta { font-size: 12.5px; color: #6E7A85; margin: 0; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-skeleton-line { height: 12px; border-radius: 4px; background: linear-gradient(90deg, #EFEEF3 25%, #F7F6FA 50%, #EFEEF3 75%); background-size: 200% 100%; animation: wpfnl-wz-shimmer 1.4s ease infinite; margin-bottom: 8px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-skeleton-line.is-short { width: 45%; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card.is-skeleton .wpfnl-wz-template-thumb { background: linear-gradient(90deg, #EFEEF3 25%, #F7F6FA 50%, #EFEEF3 75%); background-size: 200% 100%; animation: wpfnl-wz-shimmer 1.4s ease infinite; } .wpfunnels-setup .wpfnl-wz { /* ---------- Template preview modal ---------- PreviewTemplate.vue's own component — its styling never changed, only moved here. Previously scoped under `.wpfnl-mm-setup-wizard-content`, a wrapper the sidebar-based wizard used that no longer exists in the DOM, so none of it was reaching the modal. */ } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 40px; backdrop-filter: blur(4px); } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal { background: #FFF; border-radius: 16px; width: 100%; max-width: 1399px; height: 90vh; display: flex; flex-direction: column; box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.3); overflow: hidden; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header { padding: 24px 32px; border-bottom: 1px solid #EAE9EE; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-title { font-size: 20px; font-weight: 700; font-family: "DM Sans", sans-serif; color: #363B4E; margin: 0; line-height: 24px; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-device-switcher { display: flex; gap: 4px; background: #F6F5FA; border-radius: 8px; padding: 4px; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-device-switcher .wpfnl-mm-device-btn { width: 36px; height: 36px; border: none; background: transparent; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; color: #7A8C9A; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-device-switcher .wpfnl-mm-device-btn svg { width: 16px; height: 16px; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-device-switcher .wpfnl-mm-device-btn:hover { background: rgba(110, 66, 211, 0.1); color: #6E42D3; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-device-switcher .wpfnl-mm-device-btn.active { background: #FFF; color: #6E42D3; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08); } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-actions { display: flex; align-items: center; gap: 16px; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-actions .wpfnl-mm-btn-import-modal { padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; background: #6E42D3; color: #FFF; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-actions .wpfnl-mm-btn-import-modal svg { width: 16px; height: 12px; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-actions .wpfnl-mm-btn-import-modal:hover { background: #5c36b3; transform: translateY(-1px); box-shadow: 0px 4px 12px rgba(110, 66, 211, 0.3); } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-actions .wpfnl-mm-preview-close-btn { width: 32px; height: 32px; background: transparent; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; color: #7A8C9A; border: 1px solid #7A8B9A; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-actions .wpfnl-mm-preview-close-btn:hover { background: #F6F5FA; color: #363B4E; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body { flex: 1; display: flex; overflow: hidden; flex-direction: column; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps { width: 180px; border-right: 1px solid #EAE9EE; padding: 20px; display: flex; gap: 12px; overflow-y: auto; flex-shrink: 0; width: 100%; align-items: center; justify-content: center; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps .wpfnl-mm-preview-step-card { cursor: pointer; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps .wpfnl-mm-preview-step-card.active .wpfnl-mm-preview-step-thumbnail { border-color: #6E42D3; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps .wpfnl-mm-preview-step-card .wpfnl-mm-preview-step-thumbnail { aspect-ratio: 16/10; background: #F6F5FA; border-radius: 8px; border: 2px solid transparent; overflow: hidden; transition: all 0.2s ease; width: 78px; height: 78px; padding: 3px; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps .wpfnl-mm-preview-step-card .wpfnl-mm-preview-step-thumbnail img { width: 100%; height: 100%; object-fit: cover; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps .wpfnl-mm-preview-step-card .wpfnl-mm-preview-step-thumbnail:hover { border-color: #E5E7EB; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps .wpfnl-mm-preview-step-card .wpfnl-mm-preview-step-type { padding: 8px; font-size: 12px; font-weight: 500; font-family: "DM Sans", sans-serif; color: #363B4E; text-align: center; margin: 0; background: #FFF; text-transform: capitalize; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px; background: #F6F5FA; overflow: auto; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame { width: 100%; height: 100%; background: #FFF; border-radius: 12px; overflow: hidden; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame.image-preview .wpfnl-mm-preview-iframe-wrapper { overflow-x: hidden; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame .wpfnl-mm-preview-iframe-wrapper { width: 100%; height: 100%; position: relative; overflow: auto; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame .wpfnl-mm-preview-iframe-wrapper .wpfnl-mm-preview-checkout-placeholder { min-height: 650px; display: flex; align-items: center; justify-content: center; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame .wpfnl-mm-preview-iframe-wrapper iframe { width: 100%; height: 100%; border: none; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame .wpfnl-mm-preview-iframe-wrapper .wpfnl-mm-preview-loader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.9); z-index: 10; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame .wpfnl-mm-preview-iframe-wrapper .wpfnl-mm-preview-loader .wpfnl-mm-loader { border: 3px solid #E5E7EB; border-top-color: #6E42D3; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content.tablet .wpfnl-mm-preview-device-frame { max-width: 768px; margin: 0 auto; } .wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content.mobile .wpfnl-mm-preview-device-frame { max-width: 375px; margin: 0 auto; } .wpfunnels-setup .wpfnl-wz { /* ---------- Consent ---------- */ } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent { display: inline-flex; align-items: flex-start; gap: 10px; margin-top: 20px; max-width: 440px; text-align: left; cursor: pointer; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent input { position: absolute; opacity: 0; width: 0; height: 0; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent-box { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; border: 1.5px solid #C9CDD6; border-radius: 4px; background: #FFFFFF; position: relative; transition: background 0.2s ease, border-color 0.2s ease; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent-box::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.15s ease; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent input:checked + .wpfnl-wz-consent-box { background: #6E42D3; border-color: #6E42D3; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent input:checked + .wpfnl-wz-consent-box::after { transform: rotate(45deg) scale(1); } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent input:focus-visible + .wpfnl-wz-consent-box { outline: 2px solid #6E42D3; outline-offset: 2px; } .wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent-text { font-size: 13px; line-height: 1.6; color: #6E7A85; } .wpfunnels-setup .wpfnl-wz { /* Sits inside the