@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&display=swap'); :root{ --ebonyBlack: #0A091B; --transparentBlack: #272727; --textBoulder: #F2EFE9B2; --blackCharcoal: #212121; --darkCharcoal: #333333; --dropdownBg: #141327; --whiteAmber: #F2EFE9; /* new */ --bodyColor: #FCFCFC; --accentPrimary: #5072FC; --accentPrimaryHover: #375DFB; --accentSoft: #E7ECFE; --techWhite: #F5F5F5; --placeHolder: #A4A4A4; --sweetGrey: #D9D9D9; --dropdownHover: #EEF2FE; --borderColor: #E5E5E5; --whiteGray: #F0F0F0; --borderColor2: #4C4C4C11; --blackCharcoalRGB: 33, 33, 33; --ebonyBlackRGB: 10, 9, 27; --AuroMetalSaurusToWhite: #0A091B; /* for select2 */ --select2border: #D0D5DD; ----BlackToWhite: #0A091B !important; --whiteAmberRGB: 242, 239, 233; --whiteRGB: 255, 255, 255; } /* scroll css */ ::-webkit-scrollbar-thumb{background: #E9E9E9 !important;} ::-webkit-scrollbar-track{box-shadow: none !important; border-radius: 0px;} /* font weight class start */ .fw-bold{font-weight: bold;} .fw-semibold{font-weight: 700;} .fw-semibold_600{font-weight: 600 !important;} .fw-medium{font-weight: 500 !important;} .font-weight-medium{font-weight: 500;} .fw-normal{font-weight: 400 !important;} /* font weight class End */ /* font size css Start */ .fs_11{font-size: 11px;} .fs_12{font-size: 12px;} .fs_13{font-size: 13px;} .fs_14{font-size: 14px;} .fs_16{font-size: 16px;} .fs_18{font-size: 18px;} .fs_20{font-size: 20px;} .fs_24{font-size: 24px;} .fs_25{font-size: 25px;} .fs_30{font-size: 30px;} .fs_32{font-size: 32px;} /* font size css End */ /* spacing css Start */ .m_l-5{margin-left: -5px;} .mt_34{margin-top: 34px;} .mb_30{margin-bottom: 30px;} .pb_35{padding-bottom: 35px;} .mb_5{margin-bottom: 5px;} .pb_14{padding-bottom: 14px;} .mt_10{margin-top: 10px;} .mt_15{margin-top: 15px;} .mt_18{margin-top: 18px;} .mt_20{margin-top: 20px;} .mb_20{margin-bottom: 20px;} .mb_23{margin-bottom: 23px;} .mt_27{margin-top: 27px;} .mt_26{margin-top: 26px;} .p_20{padding: 20px;} .p_12{padding: 12px;} .p_30{padding: 30px;} .pr_12{padding-right:12px ;} .pr_20{padding-right: 20px;} .grid_gap_8{grid-gap: 8px;} /* spacing css End */ /* color for SVG */ .stock_svg_w svg path{stroke: var(--White);} .fill_svg_w svg path{fill: var(--White); stroke: transparent !important;} .dark_mode .btn-border.btn_border_secondary.fill_svg_w svg path{stroke: transparent !important;} /* color for SVG */ /* color */ .bg_ebonyBlack{background: var(--White) !important;} .bg_dropdownBg{background: var(--White) !important;} .bg_transparentBlack{background: var(--transparentBlack) !important} .bg_white_gray{background: var(--whiteGray) !important;} .text_textBoulder{color: rgb(var(--blackCharcoalRGB), 0.70) !important;} .text_philippineOrange{color: var(--accentPrimary) !important;} .border_bottom{border-bottom:1px solid #00000026 !important;} .border_bottom_list{border-bottom:1px solid #272A2D28 ;} .text_underline{text-decoration: underline;} /* btn css Start ******Add PF in front****** */ .pf_btn_primary{border-radius: 14px; background-color: var(--accentPrimary); border-color: var(--accentPrimary); color: var(--White);} .pf_btn_primary:hover, .pf_btn_primary:active, .pf_btn_primary:focus, .pf_btn_primary:not(:disabled):not(.disabled).active, .pf_btn_primary:not(:disabled):not(.disabled):active, .show > .pf_btn_primary.dropdown-toggle, .btn-primary.disabled, .btn-primary:disabled{color: var(--White); background-color: var(--accentPrimaryHover); border-color: var(--accentPrimaryHover);} .dark_mode .btn-border.btn_border_secondary:hover svg path{stroke: var(--Black) !important;} .ed_pro.dark_mode .btn-border.btn_border_secondary:hover svg path{stroke: var(--White) !important;} /* btn css End */ /* datepicker css Start */ .login_page_new .slect2-mod_new, .login_page_new .cust_select2-btn, .login_page_new .slect2-mod_new .select2-container--default .select2-selection--single{background: var(--White) !important; color: var(--ebonyBlack) !important;} .login_page_new .select2-dropdown.select2-dropdown{background-color: var(--White);outline: 1px solid #f3f3f3;} .login_page_new .select2-container--default .select2-results__option[aria-selected=true], .login_page_new .select2-container--default .select2-results__option--highlighted[aria-selected]{background-color: var(--dropdownHover) !important; color: var(--accentPrimary) !important;} .cust_dropdown_sm_status .show_selected::after, .login_page_new .select2-container--default .select2-results__option[aria-selected=true]::after, .cust_dropdown_sm_status .show_selected::after{ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2211%22%20viewBox%3D%220%200%2016%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M14.6668%201L5.50016%2010.1667L1.3335%206%22%20stroke%3D%22%23fd7400%22%20stroke-width%3D%221.66667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");} .login_page_new .select2-container--default .select2-search--dropdown .select2-search__field{background: transparent !important;border-radius: 8px;border-color: var(--borderColor2);padding: 9px; color: var(--ebonyBlack) !important; } .client_new_design .cust_select2-menu input.cust_search, .login_page_new .cust_select2-menu, .login_page_new .cust_select2-menu input.cust_search{background-color: var(--White) !important; } .client_new_design .cust_select2-menu input.cust_search, .login_page_new .cust_select2-menu input.cust_search{background: #F5F5F5 !important;border: 1px solid #EAECF0 !important;border-radius: 8px !important;padding: 8px 12px !important;font-size: 14px !important;color: #010F24 !important;height: 36px;width: 100%;outline: 0 !important;box-shadow: none !important;} .client_new_design .cust_select2-list li span:hover {background: rgba(80, 114, 252, 0.10) !important;color: #375DFB !important;} .client_new_design .store_dropdown .dropdown-menu .dropdown-item:hover {background: rgba(80, 114, 252, 0.10) !important;color: #375DFB !important;} #supportbot-chat-bubble {background: #5072FC !important;} .client_new_design .store_calender_area .btn {min-width: 152px;} .login_page_new .select2-dropdown{border-color: transparent ; border-bottom-right-radius: 14px; border-bottom-left-radius: 14px} .select2-search{position: relative;} .login_page_new .select2-search__field{padding-left: 9px !important;} .select2-search__field{padding-left: 36px !important;} /* select2 css End */ body{color: var(--ebonyBlack); background-color: var(--bodyColor);} .new_header .language_btn_green, .new_header .language_btn_green.btn:first-child:active{ background: #00000015 !important;} .language_btn_green, .language_btn_green:hover, .language_btn_green:focus, .language_btn_green.show, .login_page_new .store_dropdown .dropdown-menu{border-color: rgb(0 0 0 / 25%) !important;} .language_btn_green{color: var(--Black) !important;} .language_btn_green:hover, .language_btn_green:focus, .language_btn_green.show{color: var(--Black) !important;} .login_page_new .store_dropdown .dropdown-menu{background: #00000015 !important;} .login_page_new .store_dropdown .dropdown-menu .dropdown-item{color: var(--Black) !important;} .edpro_od_section_title .rd_edit_icon svg path{ stroke: var(--BlackToWhite);} /* ===== EDPRO auth header (login/ed_pro/header.php — terms / after-registration) ===== Light page; apply the EDPRO theme: Onest font, edpro logo, blue-accented language pill + dropdown to match the auth design. */ .edpro_auth_header{ font-family: 'Onest', system-ui, sans-serif; padding: 14px 0; } .edpro_auth_header .header-logo img{ height: 30px; width: auto; } .edpro_auth_header .language_btn_green, .edpro_auth_header .language_btn_green:hover, .edpro_auth_header .language_btn_green:focus, .edpro_auth_header .language_btn_green.show, .edpro_auth_header .language_btn_green.btn:first-child:active{ background: #FFFFFF !important; border: 1px solid #E7ECFE !important; border-radius: 999px !important; color: #010F24 !important; font-family: 'Onest', sans-serif !important; font-size: 14px; /* padding: 8px 16px; */ box-shadow: 0 1px 2px rgba(82, 88, 102, 0.06); } .edpro_auth_header svg { margin-top: 2px; margin-right: 10px; } .edpro_auth_header .store_dropdown .dropdown-menu{ border: 1px solid #E2E4E9 !important; border-radius: 12px !important; background: #FFFFFF !important; box-shadow: 0 12px 40px rgba(82, 88, 102, 0.18); padding: 6px; } .edpro_auth_header .store_dropdown .dropdown-menu .dropdown-item{ color: #010F24 !important; font-family: 'Onest', sans-serif; border-radius: 8px; font-size: 14px; } .edpro_auth_header .store_dropdown .dropdown-menu .dropdown-item:hover{ background: #EEF2FE !important; color: var(--philippineOrange) !important; } /* .edpro_auth_header .logout__btn-area a svg path{ fill: #010F24; } */ /* form css Start */ input.form-control{color: var(--ebonyBlack);} input::placeholder{color: var(--placeHolder) !important;} input.form-control:hover, input.form-control:focus{color: var(--ebonyBlack) !important;} .ed_pro .main_title {text-align: center;} .ed_pro .main_title a{text-align: center;justify-content: center;border-bottom: 2px solid #E2E4E9;} /* form css End */ /* store search area start */ /* store search area End */ /* for modal css Start */ .modal-backdrop{background-color: #00000045;opacity: 1 !important;backdrop-filter: blur(5px);} .modal-content{border: 5px solid rgb(var(--blackCharcoalRGB), 0.1) !important; border-radius: 20px;background: var(--White) !important;} .modal .btn-close{background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%230A091B"%3E%3Cpath d="M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z"%3E%3C/path%3E%3C/svg%3E');background-size: 12px auto;background-position: center;background-repeat: no-repeat;height: 40px; width: 40px; min-width: 40px; background-color:#0A091B15; border-radius: 50%;padding: 0 !important;} .modal .alert .btn-close{background-color: transparent !important; padding:1.25rem 1rem !important; height: 1rem; width: 1rem; min-width: auto;} .modal_top{background-color: #00000045;opacity: 1 !important;backdrop-filter: blur(5px);} /* for moodal css End */ /* ******************************Auth css start****************************** */ /* ************************************************************************** */ .gradient_bg_fixed{display: none;} .login_new.header-logo a{width: 202px; max-width: 202px; margin-bottom: 25px;} .login_h100vh{min-height: calc(100vh - 130px);} .login_h100vh .form_area_main{background: var(--White);border-radius: 20px;width: 456px;border: 4px solid #D9D9D923} .form_area{width: 100%;padding: 48px;} .login_form input.form-control, .login_form .select2-container--default .select2-selection--single, .login_form select.form-control, .modal-content input.form-control, .modal-content textarea.form-control{background: var(--White) !important;line-height: 2;border-radius: 14px !important; border: none !important; padding-top: 8px; padding-bottom: 8px; color: var(--ebonyBlack) !important; outline: 1px solid var(--borderColor);} .ed_pro .modal-content input.form-control {border-radius: 10px !important;padding-left: 8px !important;padding-right: 8px !important;} .login_form .select2-container--default .select2-selection--single .select2-selection__rendered{color: var(--ebonyBlack) !important;} .icon_input input{padding-left: 16px;} .login_form .select2-container--default .select2-selection--single{padding-top: 4px; padding-bottom: 4px ;} .eye_icon{top: 8px; right: 8px;} .login_form .form_button .btn{line-height: 1.625;} .login_form .form-check-input{background-color: transparent;height: 20px;width: 40px; border-radius:20px; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FD7400'/%3e%3c/svg%3e")} .login_form .form-check-input:checked{color: var(--White);border-color: var(--accentPrimary);background-color: var(--accentPrimary) !important;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")} .ed_pro .form-group button#saveStore {max-height: 40px;align-items: center;display: flex;justify-content: center;} .login_new .form-control {min-height: 40px;} .ed_pro .client_new_design .modal-title, .client_new_design .modal-content h5 {text-transform: capitalize;} .login_form .form-check-input:focus{box-shadow: none; border-color: var(--accentPrimary);} .bottom_area span{color: var(--ebonyBlack);} .bottom_area a{color: var(--accentPrimary);} .bottom_area a:hover, .login_form .forgot_link:hover{color: var(--accentPrimary);} .form_button{padding: 15px 0;} .login_page_new .spinner-loader{color: var(--accentPrimary);} .login_page_section .multiselect.dropdown-toggle{background: var(--White) !important;line-height: 2;border-radius: 14px !important;border: none !important;padding: 9px 30px 9px 12px !important; color: var(--ebonyBlack) !important; outline: 1px solid var(--borderColor);} .login_page_section .cust__mult-btn .dropdown-toggle::after{display: none;} .login_form .form_select::after{z-index: 9; color: var(--ebonyBlack);} .login_form .form_select select:active, .login_form .form_select select:focus{color: var(--ebonyBlack) !important;} .login_form .cust__mult-btn .dropdown-menu{background: var(--White); color: var(--ebonyBlack);} .cust__mult-btn .btn-group.show ul li:hover{color: var(--accentPrimary) !important;} .login_form .cust__mult-btn .btn-group.show ul li{padding: 8px 10px;} .login_form .cust__mult-btn .btn-group.show ul li:hover{background-color: var(--dropdownHover) !important;} .login_form .cust__mult-btn .btn-group.show ul li.multiselect-item.multiselect-filter input.multiselect-search{background: transparent !important;border-radius: 8px !important;border: 1px solid #D0D5DD24 !important;padding: 9px;color: var(--ebonyBlack) !important;} .cust__mult-btn .btn-group.show ul.dropdown-menu{border: 1px solid var(--borderColor2) !important;} .login_form .cust__mult-btn .btn-group.show ul li.multiselect-item.multiselect-filter:hover{background-color: transparent !important;} .login_form .form-check, .forgot_link{color: var(--ebonyBlack);} .icon_input-right.eye_icon_spacer svg path, .icon_input.eye_icon_spacer svg path{fill: var(--placeHolder) !important;} .icon_input-right.eye_icon_spacer svg line, .icon_input.eye_icon_spacer svg line{stroke: var(--placeHolder) !important;} @media (max-width: 991px){ .form_area{padding: 15px;} } @media (min-width: 992px){.signup_custom_loader{right: 50%;}} /* Signup: the long dropdown placeholders ("How many orders do you have daily?" and "What is the reason for signing up") overflow their box on small screens and run under/past the caret, hiding the end of the text. Shrink the font so the full text fits, and clamp the multiselect text with an ellipsis as a fallback so it can never overlap the caret. */ @media (max-width: 575px){ .login_form .form_select select, .login_page_section .multiselect.dropdown-toggle, .login_form .cust__mult-btn .multiselect-selected-text{ font-size: 13px !important; } .login_form .cust__mult-btn .multiselect-selected-text{ max-width: calc(100% - 34px) !important; display: inline-block; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ******************************Auth css End******************************** */ /* ************************************************************************** */ /* ******************************Client Dashboard css Start******************************** */ /* **************************************************************************************** */ /* top header Start */ .lang_changer .default_select:after{color: var(--ebonyBlack);top: 12px;} /* for user dropdowm */ /* for user dropdowm */ @media (max-width: 991px){ .client_new_design .header button.language_btn:focus{border-color: transparent !important;} } @media (max-width: 991px){ .dark_mode .lang_changer .default_select::after{display: none;} /* for left sidebar */ } /* left side bar css End */ /* footer css Sttart */ .footer_text{color: rgba(var(--ebonyBlackRGB), 0.70) !important;} .dark_mode .footer_text { color: #fff !important; } /* footer css Sttart */ /* table css Start */ .table_bg, .table_bg2{border-radius: 15px;position: relative;padding: 22px;margin-bottom: 15px;background: var(--White);} @media (max-width: 767px){ .table_bg, .table_bg2{padding: 0px;} } /* table css End */ /* badge css */ /* dashboard page Start */ .no_product_found_color{color: rgba(var(--blackCharcoalRGB), 0.20)} /* dashboard page End */ /* store page css Start */ .domain_name_area{background-color: transparent; outline: 1px solid var(--select2border);} .store_th.new_design_th{background-color: transparent; color: var(--White); font-weight: 300;} .table_list_item.store_list_item .pf_noBorder{padding: 0 !important;font-size: 14px;border: none !important;} .store_product_list{border-bottom: none; background: var(--ebonyBlack) ;} .btn-border.btn_border_secondary.store_delete_btn, .btn-border.btn_border_secondary.store_delete_btn:hover, .btn-border.btn_border_secondary.store_delete_btn:focus{background: #EE201C26 !important;color: #EE201C !important;border-color: transparent !important;} .btn-border.btn_border_secondary.store_delete_btn svg path, .btn-border.btn_border_secondary.store_delete_btn:hover svg path, .btn-border.btn_border_secondary.store_delete_btn:focus svg path{ /*stroke: #EE201C !important;*/} /* store page css End */ /* listing common css */ /* listing common css */ /* setting page css Start */ .text_dull{color: rgba(var(--ebonyBlackRGB), 0.70);} .cust_upload-btn{border: 1px dashed #ffffff52;width: 80px;height: 80px;} .cust_upload-btn svg path{stroke: var(--accentPrimary);} .cust_upload-input{width: 100% !important;height: calc(100% + 0px) !important;opacity: 0;} .setting_border_bottom{border-bottom: 1px solid #0A091B10; margin-bottom: 20px !important; padding-bottom: 20px !important;} .border_input{height: 44px;} .client_new_design .auto__tracking .card{background: var(--bodyColor) !important;} .abso_setting_email{position: absolute;top: calc(50% - 10px); left: 14px;} .client_new_design .cust__mult-btn .multiselect-item.multiselect-filter input.multiselect-search, .client_new_design .cust__mult-btn .multiselect-item.multiselect-filter input.multiselect-search:focus{background-color: transparent !important; border: 1px solid #D0D5DD20 !important;} .drop_after_svg{padding-right: 25px;} /* Collapse trigger ("Automatically accept quotations (COGS %)") — lay the label out as a row so the chevron is pushed to the far right edge, making it read as a dropdown. */ body.ed_pro .auto__tracking label[data-toggle="collapse"]{ display: flex; align-items: center; gap: 6px; } body.ed_pro .auto__tracking label[data-toggle="collapse"] .edpro_collapse_chev{ margin-left: auto; flex: none; color: var(--edpro-text-muted); font-size: 14px; } /* ---- COGS collapse panel: match the ED Pro listing design ---------------------- The store table reuses the generic .table_list markup, but the header cells and the data cells are laid out by two different bootstrap grids (plain .col vs a nested .row > .col-md-12), so the column titles never lined up over their values. Put the header row and every data row on the SAME grid and give the rows the ED Pro card treatment used by the stores/products listings. */ @media (min-width: 768px){ body.ed_pro #collapseCogs .table_list_item_head, body.ed_pro #collapseCogs .table_list_item > .d-md-flex{ display: grid !important; grid-template-columns: 1.4fr 1.3fr 1.2fr; align-items: center; justify-content: initial !important; padding: 0 !important; } body.ed_pro #collapseCogs .table_list_item_head > .col, body.ed_pro #collapseCogs .table_list_item_head > [class*="col-"], body.ed_pro #collapseCogs .table_list_item > .d-md-flex > .col, body.ed_pro #collapseCogs .table_list_item > .d-md-flex > [class*="col-"]{ flex: none !important; max-width: none !important; min-width: 0; padding: 12px !important; } /* Flatten the nested .row > .col-md-12 wrapper so the value sits at the cell edge. */ body.ed_pro #collapseCogs .table_list_item > .d-md-flex > .col > .row, body.ed_pro #collapseCogs .table_list_item > .d-md-flex > [class*="col-"] > .row{ margin: 0 !important; padding: 0 !important; } body.ed_pro #collapseCogs .table_list_item > .d-md-flex > .col > .row > [class*="col-"], body.ed_pro #collapseCogs .table_list_item > .d-md-flex > [class*="col-"] > .row > [class*="col-"]{ flex: 0 0 100%; max-width: 100%; padding: 0 !important; } } /* Header strip: muted 14px labels on a transparent strip (as on the ED Pro listings). */ body.ed_pro #collapseCogs .new_design_th{ background: transparent !important; border: 0; margin-bottom: 0 !important; } body.ed_pro #collapseCogs .table_list_item_head > .col, body.ed_pro #collapseCogs .table_list_item_head > [class*="col-"]{ font-size: 14px; line-height: 20px; font-weight: 500 !important; color: var(--edpro-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Data rows: flat rows separated by a divider line (as on Service Points), not cards. */ body.ed_pro #collapseCogs .new_design_list{ display: flex; flex-direction: column; } body.ed_pro #collapseCogs .table_list_item{ background: var(--edpro-card) !important; /* the divider sits BELOW the row; the last row has none, so the list ends clean. !important is needed because the generic dark-mode rule further down this file (.dark_mode .new_design_list .table_list_item) forces a full 1px border, which would box every row instead of separating them. */ border: 0 !important; border-bottom: 1px solid var(--edpro-border) !important; border-radius: 0; box-shadow: none; padding: 0 !important; margin: 0 !important; } body.ed_pro #collapseCogs .new_design_list .table_list_item:last-child{ border-bottom: 0 !important; } /* Same line under the column titles, so the header reads as part of the table. */ body.ed_pro #collapseCogs .new_design_th{ border-bottom: 1px solid var(--edpro-border) !important; } body.ed_pro #collapseCogs .table_list_item span{ font-size: 14px; color: var(--edpro-text); } body.ed_pro #collapseCogs .setCogsValue{ height: 40px; max-width: 200px; border-radius: 8px; border: 1px solid var(--edpro-border); background: transparent; color: var(--edpro-text); font-size: 14px; } body.ed_pro #collapseCogs .setCogsValue:focus{ border-color: var(--edpro-primary); box-shadow: none; } /* Pagination: rounded ED Pro pills instead of the default black square. */ body.ed_pro #collapseCogs .pagination{ gap: 4px; margin-bottom: 0; } body.ed_pro #collapseCogs .page-link{ border: 1px solid var(--edpro-border); border-radius: 8px; background: transparent; color: var(--edpro-text); font-size: 14px; min-width: 32px; text-align: center; } body.ed_pro #collapseCogs .page-item.active .page-link{ background-color: var(--edpro-primary) !important; border-color: var(--edpro-primary) !important; color: #fff; } /* setting page css End */ /* services page Start */ /* services page End */ /* terms and condition page css Start */ .t_and_c, .t_and_c .policy-terms-content p, .t_and_c ul li, .t_and_c ol li{color: var(--Black) !important;} /* .t_and_c .header .logout__btn-area svg path{stroke: var(--Black) !important;} */ /* terms and condition page css End */ /* Partnership css Start */ .as_link_sec{ /* border: 1px solid #2E3137; */} .link_text{background-color: #F1F1F2; line-height: 44px; border-bottom-left-radius: 14px; border-top-left-radius: 14px;color: #B9B9B9} .as_link_area .as_link{background-color: var(--White) !important; border-top-right-radius: 14px; border-bottom-right-radius: 14px;} .as_link_area{border: 1px solid var(--select2border); border-radius: 14px;} .as_link_area .as_link input{background-color: #F1F1F2;} .as_link_apend{padding: 4px;} .client_new_design #custom-tooltip{color: var(--Black) !important;} .dark_mode.client_new_design #custom-tooltip{color: var(--White) !important;} .client_new_design .select2-container--default .select2-results__option[aria-selected=true]::after, .cust_dropdown_sm_status .show_selected::after {display:none;} .client_new_design .select2-container--default .select2-results__option[aria-selected=true] {background: #fff !important;} /* Partnership css End */ /* payment page css Start */ .payment_left_card{background-color: var(--EvaBluelight2);padding: 20px;border-radius: 10px;} .payment-card p{color: #c4c4c4;} .payment-card label{display: block;margin-bottom: 8px;font-size: 0.9rem;color: #c4c4c4;} .payment-card input[type="text"]::placeholder{color: #c4c4c4;} .input_group_icon.commerce_design{position: relative;margin-bottom: 40px;margin-top: 19px;} .payment-container_style{border-radius: 14px; box-shadow: 0 0 21.1px 0 #B9B9B930} .dispute_left_b_btn .selected{color: var(--White) !important;} /* ED_PRO — Disputes filter buttons (Open Disputes / Action Required / Approved / Declined). When a filter is clicked it gets the .selected class (script.js). Show the active filter as a white pill with black text. */ body.ed_pro.dark_mode .dispute_left_b_btn .btn.showSelected.selected{ /* body.ed_pro .dispute_left_b_btn .btn.disputes_type.selected{ */ /* body.ed_pro .dispute_left_b_btn .btn.openNotAgreedDispute.selected, */ /* body.ed_pro .dispute_left_b_btn .btn.dispute_requests_approved.selected, */ /* body.ed_pro .dispute_left_b_btn .btn.dispute_requests_declined.selected{ */ background: #FFFFFF !important; color: #000000 !important; border-color: #E2E4E9 !important; } .dispute_left_b_btn .btn.selected, .dispute_left_b_btn .selected { background-color: #5072FC !important; color: var(--White) !important; } .client_new_design .new_design_th .btn.opacity-0.height_0{padding-left:8px !important ; padding-right: 8px !important;} @media (max-width: 1199px) { .order_listing_div .max_w150{max-width: 100%;} .order_listing_div .oli_btn .btn{width: auto;} } .upload-box{border:1px dashed var(--accentPrimary);border-radius:14px;padding:32px 20px;text-align:center;background-color: #FCF7F2;} .upload-box .btn_add{background:#FCE3CE;color:var(--ebonyBlack);font-size:12px;padding:6px 4px;margin-bottom:8px;border-radius: 4px !important;} .upload-box small, .add_file_file_text{color:#B5B5B5;} /* input[type="file"]{ display:none; } */ /* for notes */ .no_product_found{border-color: var(--accentPrimary); border-width: 1px;} /* order page css End */ /* product page css Start */ .cpd_left_top{box-shadow: 0 0 21.1px 0 #B9B9B930 ;} .pd_backdrop{background-color: #00000045;opacity: 1 !important;backdrop-filter: blur(5px); z-index: 1046;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;} .pd_inner_backdrop{background-color: #00000045;opacity: 1 !important;backdrop-filter: blur(5px); z-index: 1046;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;} .pd_fixed_backdrop{position: fixed;height: 100vh;width: 100vw;top: 0;} /* product page css End */ /* right side bar Start */ .rd_variant_item, .rd_info_item{background-color: var(--White); border-radius: 14px;} .rd_variant_item .rdv_item, .rd_info_item .rdi_item{ padding-bottom: 15px; margin-bottom: 15px;border-bottom: 1px solid #8A8A8A34;} .rd_variant_item .rdv_item:last-child, .rd_info_item .rdi_item:last-child{border: none;padding: 0;margin: 0;} .rd_variant_div{max-height: 480px; overflow: auto;} .rd_info_item .anchor_product_link:hover{color: var(--accentPrimary);} /* right side bar End */ /* ******************************Client Dashboard css End******************************** */ /* ************************************************************************************** */ /* for chat css Start */ /* Chat marquee "Learn more" button: center a longer localized label that wraps to two lines (e.g. NL "Kom meer te weten"). In English it's one line and was fine; in NL the wrapped lines sat left-aligned. Make the button fill its fixed container and flex-center the label both axes — text-align alone wasn't enough on the live page. Excludes the English variant (.abso_see_more-en), whose narrower box must keep "Learn more" on a single line. */ body.ed_pro .warning_div-marquee .abso_see_more:not(.abso_see_more-en) a.btn-black, body.ed_pro .warning_div-marquee .abso_see_more:not(.abso_see_more-en) a.btn{ display: flex !important; align-items: center; justify-content: center; text-align: center !important; width: 100% !important; float: none !important; } /* Delete-group confirm modal: widen the small modal so the two footer buttons fit side-by-side and stay centered in every language. NL "Ja, ik weet het zeker" is wider than EN "Yes, I am sure", so at the default modal-sm (300px) the buttons wrapped to two right-aligned rows; widening + centering makes NL match the English layout. */ body.ed_pro .delete_group_modal .modal-dialog.modal-sm{ max-width: 400px; } body.ed_pro .delete_group_modal .modal-footer{ justify-content: center; flex-wrap: nowrap; gap: 8px; } body.ed_pro .delete_group_modal .modal-footer .btn{ white-space: nowrap; } /* for chat css End */ /* Shopify Integration Guide - Prime Flow Theme Override Start */ .guide-header .guide-badge{background: var(--accentSoft); color: var(--Black);} .guide-header .guide-badge i{color: var(--accentPrimary);} .guide-video-card{background: var(--accentSoft);} .guide-video-card:hover{border-color: var(--accentSoft);} .guide-video-card .video-icon{background: linear-gradient(135deg, var(--accentPrimary) 0%, var(--accentPrimaryHover) 100%);color: var(--White);} .guide-video-card .video-text p, .guide-step-card .step-description{color: var(--Black);} .guide-video-card .video-text a{color: var(--accentPrimary);} .guide-link{color: var(--accentPrimary);} .guide-section-header h2, .guide-step-card ol li strong, .guide-step-card h3, .guide-header h1, .guide-header p.guide-subtitle{color: var(--Black);} .guide-section-number{background: linear-gradient(135deg, var(--accentPrimary) 0%, var(--accentPrimaryHover) 100%); color: var(--White);} .guide-step-card{background-color: rgb(232 237 255 / 10%) !important; border: 1px solid var(--accentSoft) !important ;} .guide-step-card h3 .step-num{background: var(--accentSoft);color: var(--accentPrimary);} .guide-step-card ol li::marker{color: var(--accentPrimary);} .guide-step-card ol li code{color: var(--accentPrimary);} .guide-scope-box{background: var(--accentSoft);} .guide-scope-box code{color: var(--accentPrimary);} .guide-scope-box .copy-btn{color: var(--Black); border: 1px solid black;} .guide-scope-box .copy-btn:hover{background: transparent;color: var(--accentPrimary);border-color: var(--accentPrimary);} .guide-scope-box .copy-btn.copied{background: rgba(15, 167, 181, 0.2);color: var(--accentPrimary);border-color: var(--accentPrimary);} .guide-info-fields .field-label{color: var(--Black);} .guide-info-fields .field-value{color: var(--accentPrimary);} .guide-troubleshooting .ts-note, .ts-item{background: rgb(232 237 255 / 15%) !important;border-color: var(--accentSoft);} .guide-troubleshooting .ts-note p, .guide-troubleshooting .ts-note p strong, .ts-item h4{color: var(--Black);} .guide-troubleshooting .ts-note i{color: var(--accentPrimary);} .ts-item ul li::before{background: var(--accentPrimary);} /* Shopify Integration Guide - Prime Flow Theme Override End */ /* ============================================================ EDPRO Dashboard (CONDITION_12) — Start ============================================================ */ .edpro_dashboard_wrap{ --edpro-bg: #EFF2F6; --edpro-card: #FFFFFF; --edpro-text: #010F24; --edpro-text-strong: #0A091B; --edpro-text-muted: rgba(1, 15, 36, 0.5); --edpro-text-subtle: rgba(1, 15, 36, 0.4); --edpro-text-faint: rgba(10, 9, 27, 0.7); --edpro-border: #EAECF0; --edpro-divider: rgba(1, 15, 36, 0.05); --edpro-primary: #375DFB; --edpro-primary-hover: #3F5FE5; --edpro-teal: #31DECF; --edpro-teal-soft: rgba(49, 222, 207, 0.15); --edpro-warning: #F17B2C; --edpro-warning-soft: #FEF3EB; --edpro-success: #38C793; --edpro-success-soft: #EFFAF6; --edpro-blue-soft: #5EBFFF; background-color: var(--edpro-bg); color: var(--edpro-text); font-family: 'Onest', 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: calc(100vh - 80px); } .edpro_dashboard_wrap.content-page{ padding-right: 24px; padding-bottom: 24px; } /* Header row */ .edpro_dashboard_wrap .edpro_dash_header{ gap: 16px; margin-bottom: 24px; } .edpro_dashboard_wrap .edpro_dash_greet{ font-size: 22px; font-weight: 600; color: var(--edpro-text-strong); letter-spacing: 0.22px; margin: 0 0 4px; } .edpro_dashboard_wrap .edpro_dash_subtitle{ font-size: 16px; color: var(--edpro-text-faint); margin: 0; line-height: 1.2; } .edpro_dashboard_wrap .edpro_dash_subtitle_dash{ margin: 0 6px; } .edpro_dashboard_wrap .edpro_dash_actions{ gap: 10px; flex-wrap: wrap; } .edpro_dashboard_wrap .edpro_theme_toggle{ background: var(--edpro-card); display: inline-flex; align-items: center; height: 52px; padding: 4px 10px; border-radius: 32px; gap: 4px; } .edpro_dashboard_wrap .edpro_theme_btn{ width: 36px; height: 36px; border-radius: 19px; border: none; background: transparent; color: var(--edpro-text-strong); display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; } .edpro_dashboard_wrap .edpro_theme_btn.active{ background: var(--edpro-blue-soft); color: #fff; } .edpro_dashboard_wrap .edpro_action_group{ background: var(--edpro-card); border-radius: 8px; padding: 0 8px; gap: 4px; height: 52px; } .edpro_dashboard_wrap .edpro_icon_btn{ width: 40px; height: 40px; border: none; background: transparent; border-radius: 6px; color: var(--edpro-text-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .edpro_dashboard_wrap .edpro_icon_btn:hover{ background: var(--edpro-bg); } .edpro_dashboard_wrap .edpro_lang_btn{ border: none; background: transparent; color: var(--edpro-text-strong); font-size: 14px; padding: 0 8px; height: 40px; display: inline-flex; align-items: center; gap: 6px; } .edpro_dashboard_wrap .edpro_lang_btn i{ font-size: 10px; } .edpro_dashboard_wrap .edpro_add_balance_btn{ background-image: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 100%), linear-gradient(90deg, var(--edpro-primary) 0%, var(--edpro-primary) 100%); color: #fff; border: 1px solid #fff; border-radius: 8px; padding: 8px 14px; font-size: 14px; line-height: 20px; box-shadow: 0 1px 2px 0 rgba(37, 62, 167, 0.48), 0 0 0 1px #375DFB; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; transition: filter 0.15s ease; } .edpro_dashboard_wrap .edpro_add_balance_btn:hover{ color: #fff; filter: brightness(1.05); } /* Performance summary filter row */ .edpro_dashboard_wrap .edpro_perf_bar{ gap: 12px; margin-bottom: 16px; } .edpro_dashboard_wrap .edpro_perf_label{ font-size: 18px; color: rgba(10, 9, 27, 0.5); letter-spacing: 0.18px; } .dark_mode .edpro_dashboard_wrap .edpro_perf_label {color: var(--White);} .edpro_dashboard_wrap .edpro_perf_filters{ gap: 12px; flex-wrap: wrap; align-items: center; } body.ed_pro .edpro_perf_filters .store_dropdown_area, body.ed_pro .edpro_perf_filters .store_calender_area{ margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: stretch !important; height: 48px; box-sizing: border-box; } body.ed_pro .edpro_perf_filters .store_dropdown_area > *, body.ed_pro .edpro_perf_filters .store_calender_area > *{ height: 48px !important; box-sizing: border-box; } .store_calender_area .calendar-icon { display: inline-flex; align-items: center; gap: 8px; color: #000; z-index: 3;margin: 13px 8px; } body.ed_pro .edpro_perf_filters .select2-container{ height: 48px !important; } /* Store select pill */ body.ed_pro .edpro_perf_filters .slect2-mod, body.ed_pro .edpro_perf_filters .slect2-mod_new, body.ed_pro .edpro_perf_filters .slect2-mod .select2-container--default .select2-selection--single{ background: #FFFFFF !important; border: none !important; border-radius: 8px !important; min-width: 200px; height: 48px !important; box-shadow: none !important; outline: 0 !important; } body.ed_pro .edpro_perf_filters .select2-container--default .select2-selection--single .select2-selection__rendered{ color: #010F24 !important; line-height: 48px !important; padding: 0 14px !important; font-size: 14px; } body.ed_pro .edpro_perf_filters .select2-container--default .select2-selection--single .select2-selection__arrow{ height: 48px !important; right: 8px; } /* ============================================================ ED_PRO — Dashboard "Select Store" pill: hug the selected value. Like the date-range pill, the store select was pinned to min-width:200px, leaving a big gap. Drop the floor and let the select2 box size to its own text so it shrinks to "Select Store" and grows for a long store name. The select2 single-selection layout fights content-sizing (fixed resolve width + overflow-hidden rendered + an internal arrow that breaks when the box grows), so: container/selection -> inline-flex width:auto, rendered -> visible/no max-width, and the native arrow is replaced with a robust ::after caret. Scoped to .store_dropdown_area so only the dashboard store filter changes. ============================================================ */ body.ed_pro .edpro_perf_filters .store_dropdown_area .slect2-mod, body.ed_pro .edpro_perf_filters .store_dropdown_area .slect2-mod_new, body.ed_pro .edpro_perf_filters .store_dropdown_area .slect2-mod .select2-container--default .select2-selection--single{ min-width: 0 !important; } body.ed_pro .edpro_perf_filters .store_dropdown_area .slect2-mod{ width: auto !important; display: inline-block !important; } body.ed_pro .edpro_perf_filters .store_dropdown_area .select2-container{ width: auto !important; } body.ed_pro .edpro_perf_filters .store_dropdown_area .select2-container--default .select2-selection--single{ display: inline-flex !important; align-items: center; width: auto !important; position: relative !important; } body.ed_pro .edpro_perf_filters .store_dropdown_area .select2-container--default .select2-selection--single .select2-selection__rendered{ width: auto !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; padding: 0 34px 0 14px !important; /* right room for the caret */ } /* The select2 internal arrow misplaces once the box grows — hide it and draw a stable chevron of our own pinned to the right edge of the pill. */ body.ed_pro .edpro_perf_filters .store_dropdown_area .select2-container--default .select2-selection--single .select2-selection__arrow{ display: none !important; } body.ed_pro .edpro_perf_filters .store_dropdown_area .select2-container--default .select2-selection--single::after{ content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 11px; height: 7px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23667085' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); pointer-events: none; } /* Daterange pill */ body.ed_pro .edpro_perf_filters .store_calender_area{ flex: 0 0 auto; } body.ed_pro .edpro_perf_filters .daterange-container{ /* Same mechanism as the custom-orders page: the input is in-flow and the JS sizes its width to the exact text, so the box always fits the range. Flex-centre the input so it doesn't baseline-shift above the row. */ display: inline-flex !important; align-items: center; vertical-align: middle; position: relative; height: 48px; min-width: 200px; max-width: none; width: auto; } /* Keep the filter row tidy if the grown pill needs more room than the row has. */ body.ed_pro .edpro_perf_filters{ flex-wrap: wrap; gap: 12px; } .client_new_design .daterangepicker .ranges ul {min-width:193px;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);border-radius: 11px;} .client_new_design .daterangepicker .ranges li {padding: 8px 12px !important;} .client_new_design .daterangepicker {border:none;} .client_new_design .daterangepicker .ranges li:hover {background: #375DFB1A !important;color: var(--EvaGreen) !important;} #supportbot-chat-bubble {background: #5072FC;} body.ed_pro .edpro_perf_filters .datepicker_custom_range, body.ed_pro .edpro_perf_filters .datepicker_custom_range.lh_43, body.ed_pro .edpro_perf_filters span.datepicker_custom_range{ background: #FFFFFF !important; border: none !important; border-radius: 8px !important; height: 48px !important; /* Absolute overlay sitting on top of the JS-width-sized input (the same mechanism the custom-orders page uses). The box width equals the input width, which the JS sets to the measured text width, so the selected range always stays inside the box. */ position: absolute !important; left: 0; top: 0; /* Override the generic .datepicker_custom_range rule (style.css), which sets top:50% + translateY(-50%) and was shifting the box up by half its height. */ transform: none !important; width: 100% !important; height: 48px !important; padding: 0 14px !important; margin: 0 !important; display: inline-flex !important; align-items: center; gap: 8px; font-size: 14px !important; line-height: 48px !important; color: #010F24 !important; cursor: pointer; box-shadow: none !important; white-space: nowrap; pointer-events: none; z-index: 2; } body.ed_pro .edpro_perf_filters .datepicker_custom_range svg{ width: 18px; height: 18px; flex: none; } body.ed_pro .edpro_perf_filters .datepicker_custom_range svg path, body.ed_pro .edpro_perf_filters .datepicker_custom_range svg circle, body.ed_pro .edpro_perf_filters .datepicker_custom_range svg line{ stroke: #9A9A9A !important; fill: none !important; } body.ed_pro .edpro_perf_filters .daterange-btn, body.ed_pro .edpro_perf_filters input#dashboarddaterange{ /* In-flow input; its width is set by the JS to the measured text width, so it (and therefore the box) grows to fit the selected range. Text is transparent — the visible label is the overlay span above. */ position: relative !important; height: 48px !important; min-width: 200px; vertical-align: middle; opacity: 1 !important; cursor: pointer !important; color: transparent !important; caret-color: transparent !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; z-index: 1; } /* ============================================================ ED_PRO — Dashboard date-range pill: hug the selected range. The rules above pin the box to min-width:200px with the visible label as an absolute overlay over an in-flow input — but no JS sizes that input, so short ranges like "Today" left a large empty gap before the caret. Flip it (same as the orders/custom-orders pages): the visible label span is in-flow and sizes to its own text (with right room for the caret), and the input becomes the transparent absolute click overlay. The box now shrinks to "Today" and grows for a full "01-06-2026 - 30-06-2026" range. Scoped with .store_calender_area to outrank the more-specific span.datepicker_custom_range rule above. ============================================================ */ body.ed_pro .edpro_perf_filters .store_calender_area .daterange-container{ display: inline-flex !important; width: auto !important; min-width: 0 !important; max-width: 100%; } body.ed_pro .edpro_perf_filters .store_calender_area span.datepicker_custom_range, body.ed_pro .edpro_perf_filters .store_calender_area .datepicker_custom_range.lh_43{ position: relative !important; left: auto !important; top: auto !important; width: auto !important; padding: 0 34px 0 14px !important; /* right room for the .date_svg_arrow caret */ z-index: 1; } body.ed_pro .edpro_perf_filters .store_calender_area .daterange-btn, body.ed_pro .edpro_perf_filters input#dashboarddaterange{ position: absolute !important; inset: 0 !important; width: 100% !important; min-width: 0 !important; height: 100% !important; pointer-events: auto !important; z-index: 2; } /* Select2 dropdown menu (open state) */ body.ed_pro .select2-container--default .select2-dropdown{ background: #FFFFFF !important; border: 1px solid #EAECF0 !important; border-radius: 12px !important; box-shadow: 0 8px 24px -8px rgba(88, 92, 95, 0.2) !important; padding: 8px !important; overflow: hidden; } body.ed_pro .select2-container--default .select2-selection--single {padding:0px} body.ed_pro .select2-container--default .select2-search--dropdown{ padding: 0 0 8px !important; } body.ed_pro .select2-container--default .select2-search--dropdown .select2-search__field{ background: #F5F5F5 !important; border: 1px solid #EAECF0 !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 14px !important; color: #010F24 !important; height: 36px; width: 100%; outline: 0 !important; box-shadow: none !important; } body.ed_pro .select2-container--default .select2-results__option{ padding: 8px 12px !important; font-size: 14px; color: #010F24 !important; border-radius: 6px; margin-bottom: 2px; } body.ed_pro .select2-container--default .select2-results__option--highlighted[aria-selected], body.ed_pro .select2-container--default .select2-results__option--highlighted{ background: rgba(80, 114, 252, 0.10) !important; color: #375DFB !important; } /* Match product-status dropdown hover color on the other product-list filter dropdowns (store filter, Sort On, Active Store Products) */ body.ed_pro .cust_select2-list li span:hover, body.ed_pro .store_dropdown .dropdown-menu .dropdown-item:hover{ background: rgba(80, 114, 252, 0.10) !important; color: #375DFB !important; } /* EDPRO only — Order Status + All Store custom dropdowns: highlight the selected/default option with the EDPRO blue (bg rgba(80,114,252,.10), text #375DFB) instead of the shared white-on-black. The shared style.css rule (style.css:3663) only styles order_status_dropdown span.selected and leaves store un-styled, so we override order-status and add store here, scoped to body.ed_pro so the other 4 platforms are untouched. */ body.ed_pro .cust_select2-list li.order_status_dropdown span.selected, body.ed_pro .cust_select2-list li.order_status_dropdown span.cust_active, body.ed_pro .cust_select2-list li.order_status_dropdown span.pre_selected, body.ed_pro .cust_select2-list li.store_dropdown span.selected, body.ed_pro .cust_select2-list li.store_dropdown span.cust_active, body.ed_pro .cust_select2-list li.store_dropdown span.pre_selected, body.ed_pro .cust_select2-accordion h5.selected, body.ed_pro .cust_select2-accordion h5.cust_active, body.ed_pro .cust_select2-accordion h5.selected span, body.ed_pro .cust_select2-accordion h5.cust_active span{ color: #375DFB !important; background: rgba(80, 114, 252, 0.10) !important; background-color: rgba(80, 114, 252, 0.10) !important; border-radius: 4px !important; } /* EDPRO only — Order Status + All Store dropdowns: remove the hover highlight so options don't change colour on hover. Only the active/selected option stays blue (excluded via :not() so hover never strips it). Both light and dark mode. */ body.ed_pro .cust_select2-list li.order_status_dropdown span:not(.selected):not(.cust_active):not(.pre_selected):hover, body.ed_pro .cust_select2-list li.store_dropdown span:not(.selected):not(.cust_active):not(.pre_selected):hover, body.ed_pro .cust_select2-accordion .card-header h5:not(.selected):not(.cust_active):hover, body.ed_pro .cust_select2-accordion .card-header h5:not(.selected):not(.cust_active):hover .toggle_icon, body.ed_pro.dark_mode .cust_select2-list li.order_status_dropdown span:not(.selected):not(.cust_active):not(.pre_selected):hover, body.ed_pro.dark_mode .cust_select2-list li.store_dropdown span:not(.selected):not(.cust_active):not(.pre_selected):hover, body.ed_pro.dark_mode .cust_select2-accordion .card-header h5:not(.selected):not(.cust_active):hover{ background: rgba(80, 114, 252, 0.10) !important; color: #375DFB; border-radius: 0 !important; } body.ed_pro.dark_mode.cust_select2-list li.order_status_dropdown span:not(.selected):not(.cust_active):not(.pre_selected):hover{ color: #fff !important; } /* EDPRO only — make Order Status + All Store dropdowns behave like the Search Criteria (select2) dropdown: only ONE option highlighted at a time, following the cursor. While the list is being hovered, drop the persistent highlight from the default/selected option UNLESS it is the one under the cursor. When the mouse leaves the list, the selected option's highlight returns. Light + dark. */ body.ed_pro .cust_select2-list:hover li.order_status_dropdown span.selected:not(:hover), body.ed_pro .cust_select2-list:hover li.order_status_dropdown span.cust_active:not(:hover), body.ed_pro .cust_select2-list:hover li.order_status_dropdown span.pre_selected:not(:hover), body.ed_pro .cust_select2-list:hover li.store_dropdown span.selected:not(:hover), body.ed_pro .cust_select2-list:hover li.store_dropdown span.cust_active:not(:hover), body.ed_pro .cust_select2-list:hover li.store_dropdown span.pre_selected:not(:hover), body.ed_pro.dark_mode .cust_select2-list:hover li.order_status_dropdown span.selected:not(:hover), body.ed_pro.dark_mode .cust_select2-list:hover li.order_status_dropdown span.cust_active:not(:hover), body.ed_pro.dark_mode .cust_select2-list:hover li.order_status_dropdown span.pre_selected:not(:hover), body.ed_pro.dark_mode .cust_select2-list:hover li.store_dropdown span.selected:not(:hover), body.ed_pro.dark_mode .cust_select2-list:hover li.store_dropdown span.cust_active:not(:hover), body.ed_pro.dark_mode .cust_select2-list:hover li.store_dropdown span.pre_selected:not(:hover){ background: transparent !important; background-color: transparent !important; color: var(--BlackToWhite) !important; border-radius: 0 !important; } /* === Global EDPRO badges (project-wide) =========================================== Theme every status badge consistently by its colour family, wherever it appears (quotation status, order status, special-request status, etc.). Status-specific contexts (product listing / detail) layer a leading icon on top via their own scoped rules; this block only sets the pill shape + colour tokens. */ body.ed_pro .badge-mod, body.ed_pro .badge-info, body.ed_pro .badge-warning, body.ed_pro .badge-success, body.ed_pro .badge-danger, body.ed_pro .badge-primary, body.ed_pro .badge-secondary{ display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 500; line-height: 16px; } body.ed_pro .badge-warning{ background: #FEF3EB !important; color: #F17B2C !important; } body.ed_pro .badge-success{ background: #E6F9F0 !important; color: #1FAA5C !important; } body.ed_pro .badge-danger { background: #FEECEB !important; color: #F04438 !important; } /* ============================================================ ED_PRO — Disputes / Special-requests list columns. The inline columns (variant / date / issue|request / solution / status) are Bootstrap `col` with `px-0`. Flex items default to min-width:auto, so a wide cell (the status pill "Close dispute - Cancelled by client", or a long issue) refused to shrink below its content, grew past its equal share, and bled into the neighbour / the "See more" action. Fix: pin every middle column to an equal, fixed share (min-width:0 so it can't grow to fit overflowing content), wrap its content, and add a gutter. Applied to BOTH the header rows (.disputeListHeading / .client_orders_body_main) and the data rows (.all_disputes_* container, shared by both pages) so the columns line up. flex:1 1 0 distributes equally regardless of count (disputes = 5 columns, special requests = 4). ============================================================ */ body.ed_pro .disputeListHeading .row, body.ed_pro .client_orders_body_main .row, body.ed_pro [class*="all_disputes_"] .notes_sm_border{ gap: 12px; } body.ed_pro .disputeListHeading .row > .col, body.ed_pro .disputeListHeading .row > [class*="col"], body.ed_pro .client_orders_body_main .row > .col, body.ed_pro .client_orders_body_main .row > [class*="col"], body.ed_pro [class*="all_disputes_"] .notes_sm_border > .col, body.ed_pro [class*="all_disputes_"] .notes_sm_border > [class*="col"]{ flex: 1 1 0 !important; min-width: 0 !important; overflow-wrap: break-word; word-break: break-word; } /* The issue/request column (3rd) and the status column (last) carry the longest content, so give them 2x the share of the short columns (variant / date / solution). Position-based because the columns have no distinguishing class; the 3rd and last positions hold issue/request and status on both the disputes (5 cols) and special-requests (4 cols) pages. */ body.ed_pro .disputeListHeading .row > .col:nth-child(3), body.ed_pro .disputeListHeading .row > .col:last-child, body.ed_pro .client_orders_body_main .row > .col:nth-child(3), body.ed_pro .client_orders_body_main .row > .col:last-child, body.ed_pro [class*="all_disputes_"] .notes_sm_border > .col:nth-child(3), body.ed_pro [class*="all_disputes_"] .notes_sm_border > .col:last-child{ flex-grow: 2 !important; } /* ============================================================ ED_PRO — Disputes header vs data alignment. The header (.disputeListHeading) lives OUTSIDE #client_orders_body and uses .d-md-flex, so it misses the orders_wrap data-row rules (card padding 20px + col padding 8px/min-width:0) and the store_action_see_more pill styling that the data rows get. That left the header columns offset ~10px and the action column ~27px narrower than the data, throwing every column out of alignment in any language. Mirror the data treatment on the header's top-level columns so they line up; the nested issue/solution/status columns are already handled by the .disputeListHeading .row rule above. The placeholder See-more pill is sized via the shared store_action_see_more rule (selector extended with .disputeListHeading). ============================================================ */ body.ed_pro .orders_wrap .disputeListHeading{ padding-left: 20px !important; padding-right: 20px !important; } body.ed_pro .orders_wrap .disputeListHeading > .d-md-flex > .col, body.ed_pro .orders_wrap .disputeListHeading > .d-md-flex > [class*="col-"]{ padding: 8px 8px; min-width: 0; align-self: center; } /* Vertically centre every header label on one baseline. The outer flex already centres its three direct children (Order/Product, the inner label group, the See-more placeholder), but the inner .row of 5 labels defaulted to align-items :stretch, so when a label wraps to two lines in a longer language (NL/DE — e.g. "Streitbeilegung beantragt") the single-line labels top-aligned while "Order / Product" stayed centred, staggering the row. Centring the inner row lines them all up regardless of how many labels wrap. Header-only (the data rows keep their top-alignment). */ body.ed_pro .disputeListHeading > .d-md-flex, body.ed_pro .disputeListHeading .row{ align-items: center; } /* Status pill wraps inside its column instead of overflowing into the next. */ body.ed_pro .inner_status{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; } body.ed_pro .inner_status .badge-mod{ white-space: normal !important; text-align: left; max-width: 100%; } body.ed_pro .badge-info { background: #EFF4FF !important; color: #375DFB !important; } body.ed_pro .badge-primary{ background: #EFF4FF !important; color: #375DFB !important; } body.ed_pro .badge-secondary{ background: #F2F4F7 !important; color: #525866 !important; } /* Leading icon per colour family (FontAwesome 5), so every badge — anywhere in the project — carries an appropriate glyph, not just the product pages. */ body.ed_pro .badge-warning::before, body.ed_pro .badge-success::before, body.ed_pro .badge-danger::before, body.ed_pro .badge-info::before, body.ed_pro .badge-primary::before, body.ed_pro .badge-secondary::before{ font-family: "Font Awesome 5 Free", "FontAwesome"; font-weight: 900; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; } body.ed_pro .badge-warning::before{ content: "\f017"; } /* clock — bidding / requote / new price */ body.ed_pro .badge-success::before{ content: "\f058"; } /* check-circle — done / accepted */ body.ed_pro .badge-danger::before{ content: "\f057"; } /* times-circle — rejected / cancelled / address error / hold / stopped */ body.ed_pro .badge-info::before, body.ed_pro .badge-primary::before, body.ed_pro .badge-secondary::before{ content: "\f05a"; } /* info-circle — awaiting / add-country / new-variant / special-request … */ /* Per-status icon overrides. Emitted as a `badge-ic-` modifier class by getEntityNameAndValue() when an entity entry sets _ICON_ (entity_helper.php), so a single status can break away from its colour-family glyph without affecting its siblings. Declared after the family rules so source order wins; !important guards against the more-specific product-page block below. */ body.ed_pro .badge-ic-clock::before { content: "\f017" !important; } /* clock — pending/waiting (e.g. Waiting for tracking update) */ body.ed_pro .badge-ic-check::before { content: "\f058" !important; } /* check-circle — e.g. Refund, Fulfilled from shopify */ /* === Global EDPRO button palette === */ /* Override filled/primary buttons everywhere under body.ed_pro to use blue, not orange/green */ body.ed_pro .btn-primary, body.ed_pro .btn_primary, body.ed_pro a.btn-primary, body.ed_pro a.btn_primary, body.ed_pro .btn-success, body.ed_pro .btn-info{ background: #375DFB !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(90deg, #375DFB 0%, #375DFB 100%) !important; border-color: #375DFB !important; color: #FFFFFF !important; box-shadow: 0 1px 2px 0 rgba(37, 62, 167, 0.32) !important; } body.ed_pro .btn-primary:hover, body.ed_pro .btn_primary:hover, body.ed_pro a.btn-primary:hover, body.ed_pro a.btn_primary:hover, body.ed_pro .btn-success:hover, body.ed_pro .btn-info:hover{ background: #3F5FE5 !important; border-color: #3F5FE5 !important; color: #FFFFFF !important; } /* Bordered/secondary buttons stay neutral but use EDPRO ink */ body.ed_pro .btn-border, body.ed_pro .btn_border_secondary{ border-color: #EAECF0 !important; background: #FFFFFF !important; color: #010F24 !important; } body.ed_pro .btn-border:hover, body.ed_pro .btn_border_secondary:hover{ border-color: 1px solid #3F5FE5 !important; color: none; } /* body.ed_pro .btn-border:hover, body.ed_pro .btn_border_secondary:active { border-color: 1px solid #3F5FE5 !important; color: #3F5FE5 !important; } */ body.ed_pro .badge-mod.badge-warning_new { background: #FEF3EB !important; color: #F17B2C !important; } /* Selected-quotation summary text shown left of the footer buttons (Figma 26:6306) */ body.ed_pro .edpro_selected_summary{ color: #525866; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.ed_pro.dark_mode .edpro_selected_summary { color: rgba(var(--ChineseBlackRGB),.5) !important;} /* Footer = single flex row on desktop: summary grows, buttons shrink + group right */ @media (min-width: 768px){ body.ed_pro .cpd_left_btn .row{ flex-wrap: nowrap; align-items: center; } body.ed_pro .cpd_left_btn .row > .edpro_footer_summary{ flex: 1 1 auto; min-width: 0; } body.ed_pro .cpd_left_btn .row > [class*="col-md"]:not(.edpro_footer_summary){ flex: 0 0 auto; width: auto; max-width: none; padding-left: 4px; padding-right: 4px; } } /* Footer row aligns flush with the cards above: neutralise the Bootstrap container/row gutter so the summary text starts at the card's left edge and the last button ends at the card's right edge (no 15px overhang). */ body.ed_pro .cpd_left_btn > .container-fluid{ padding: 0 !important; } body.ed_pro .cpd_left_btn .row{ margin-left: 0 !important; margin-right: 0 !important; } body.ed_pro .cpd_left_btn .row > .edpro_footer_summary{ padding-left: 0 !important; } body.ed_pro .cpd_left_btn .row > [class*="col-md"]:last-child{ padding-right: 0 !important; } /* === Product-detail footer action buttons (Figma 26:6306) — scoped to the footer only === */ body.ed_pro .cpd_left_btn .btn{ min-height: 44px; border-radius: 16px !important; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; padding: 7px 15px !important; } /* Secondary "Cancel request" — subtle horizontal gradient + hairline border */ body.ed_pro .cpd_left_btn .btn-border, body.ed_pro .cpd_left_btn .btn_border_secondary{ background: linear-gradient(90deg, rgba(1, 15, 36, 0.02) 0%, rgba(1, 15, 36, 0.12) 50%, rgba(1, 15, 36, 0.02) 100%) !important; border: 1px solid rgba(0, 0, 0, 0.10) !important; color: #010F24 !important; } body.ed_pro .cpd_left_btn .btn-border:hover, body.ed_pro .cpd_left_btn .btn_border_secondary:hover{ border-color: rgba(0, 0, 0, 0.18) !important; /* color: #010F24 !important; */ } /* Primary "Accept/Select" — glossy blue (top sheen over a blue→cyan wash) */ body.ed_pro .cpd_left_btn .btn-primary, body.ed_pro .cpd_left_btn .btn_primary{ background-color: #375DFB !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #375DFB 0%, #5EBFFF 100%) !important; border: 0 !important; color: #FFFFFF !important; } /* Remove-store confirm "Delete": same outline shape as Cancel, but in the theme blue (#375DFB) instead of the neutral grey. */ body.ed_pro #del_store{ background: #375DFB !important; border-color: #375DFB !important; color: #FFFFFF !important; } body.ed_pro #del_store:hover, body.ed_pro #del_store:focus{ background: #375DFB !important; border-color: #375DFB !important; color: #FFFFFF !important; } /* Dark mode variants */ body.ed_pro.dark_mode .btn-border, body.ed_pro.dark_mode .btn_border_secondary{ background: #14132A !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important; } /* ============================================================ EDPRO — Secondary / Cancel buttons: one consistent, readable treatment across every modal / dialog / form / popup, in BOTH light and dark mode. - The ED Pro pill class `.btn_border_secondary` (default state) is handled by the rules above; here we make its hover / focus / active / disabled states explicit so no base rule (e.g. the blue #3F5FE5 hover) can wash the text out. - Bootstrap's `.btn-secondary` (used as Cancel / Close in ~50 modals) had NO ED Pro styling, so it fell back to the bootstrap grey pill — off-brand and inconsistent with the ED Pro secondary buttons. Give it the SAME ED Pro treatment so all secondary buttons match. Everything is body.ed_pro-scoped, so other themes are never affected; only colours / borders change (no layout / functional change). ============ */ /* Bootstrap .btn-secondary -> ED Pro secondary (light mode). */ body.ed_pro .btn.btn-secondary{ background: var(--edpro-card) !important; border: 1px solid var(--edpro-border) !important; color: var(--edpro-text) !important; } body.ed_pro .btn.btn-secondary:hover, body.ed_pro .btn.btn-secondary:focus, body.ed_pro .btn.btn-secondary:active{ background: var(--edpro-card) !important; border-color: var(--edpro-primary) !important; color: var(--edpro-primary) !important; } /* Dark mode: match the .btn_border_secondary dark card (readable white text in every state). */ body.ed_pro.dark_mode .btn.btn-secondary, body.ed_pro.dark_mode .btn.btn-secondary:hover, body.ed_pro.dark_mode .btn.btn-secondary:focus, body.ed_pro.dark_mode .btn.btn-secondary:active, body.ed_pro.dark_mode .btn-border:hover, body.ed_pro.dark_mode .btn-border:focus, body.ed_pro.dark_mode .btn-border:active, body.ed_pro.dark_mode .btn_border_secondary:hover, body.ed_pro.dark_mode .btn_border_secondary:focus, body.ed_pro.dark_mode .btn_border_secondary:active{ background: #14132A !important; border-color: rgba(255, 255, 255, 0.28) !important; color: #FFFFFF !important; } /* Disabled secondary buttons stay legible (dimmed, not invisible) in both modes. */ body.ed_pro .btn.btn-secondary:disabled, body.ed_pro .btn.btn-secondary.disabled, body.ed_pro .btn_border_secondary:disabled, body.ed_pro .btn_border_secondary.disabled, body.ed_pro .btn-border:disabled, body.ed_pro .btn-border.disabled{ opacity: 0.6 !important; } body.ed_pro .select2-container--default .select2-results__option[aria-selected=true]{ background: none; } /* Dark mode for dropdown panel */ body.ed_pro.dark_mode .select2-container--default .select2-dropdown{ background: #14132A !important; border-color: rgba(255, 255, 255, 0.1) !important; } body.ed_pro.dark_mode.client_new_design .daterangepicker .ranges li:hover { background: rgba(80, 114, 252, 0.10) !important; color: var(--White) !important; } body.ed_pro.dark_mode .select2-container--default .select2-search--dropdown .select2-search__field{ background: #1F1D3A !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #fff !important; } body.ed_pro.dark_mode .select2-container--default .select2-results__option{ color: #fff !important; } /* Selected option: the base `.client_new_design ...[aria-selected=true]{background:#fff}` paints it white — fine on the light dropdown, but jarring in dark mode. Override with a subtle translucent highlight on the dark panel. */ body.ed_pro.dark_mode .select2-container--default .select2-results__option[aria-selected=true]{ background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; } /* Dark mode: keep the selected/default option on the SAME EDPRO blue as light mode (bg rgba(80,114,252,.10), text #375DFB) so every All Orders dropdown highlights identically in both themes. */ body.ed_pro.dark_mode .cust_select2-list li span.selected, body.ed_pro.dark_mode .cust_select2-list li span.cust_active, body.ed_pro.dark_mode .cust_select2-list li span.pre_selected, body.ed_pro.dark_mode .cust_select2-list li.order_status_dropdown span.selected, body.ed_pro.dark_mode .cust_select2-list li.order_status_dropdown span.cust_active, body.ed_pro.dark_mode .cust_select2-list li.store_dropdown span.selected, body.ed_pro.dark_mode .cust_select2-list li.store_dropdown span.cust_active, body.ed_pro.dark_mode .cust_select2-accordion h5.selected, body.ed_pro.dark_mode .cust_select2-accordion h5.cust_active, body.ed_pro.dark_mode .cust_select2-accordion h5.selected span, body.ed_pro.dark_mode .cust_select2-accordion h5.cust_active span { background: rgba(80, 114, 252, 0.10) !important; background-color: rgba(80, 114, 252, 0.10) !important; color: #fff !important; border-radius: 4px !important; } /* EDPRO dark mode — Products page ONLY (scoped to .products_wrap, which is added only for EDPRO). Make the "All store" dropdown's selected/active option match the Product-status (select2) selected option in dark mode: a subtle neutral lighter-dark box + light text (mirrors select2's .select2-results__option[aria-selected=true] treatment at line 1207), instead of the blue tint that Order Status uses. Kept .products_wrap-scoped so the Orders-page store/order-status dropdowns are untouched. */ body.ed_pro.dark_mode .products_wrap .cust_select2-list li.store_dropdown span.selected, body.ed_pro.dark_mode .products_wrap .cust_select2-list li.store_dropdown span.cust_active, body.ed_pro.dark_mode .products_wrap .cust_select2-list li.store_dropdown span.pre_selected{ background: rgba(255, 255, 255, 0.08) !important; background-color: rgba(255, 255, 255, 0.08) !important; color: #fff !important; border-radius: 4px !important; } .edpro_dashboard_wrap .edpro_widgets{ margin-bottom: 42px; } .edpro_dashboard_wrap .edpro_widgets > [class*="col-"]{ display: flex; flex-direction: column; gap: 16px; } .edpro_dashboard_wrap .edpro_card{ background: var(--edpro-card); border-radius: 16px; padding: 20px 20px 16px; flex: 1 1 auto; position: relative; overflow: hidden; } .edpro_dashboard_wrap .edpro_card_head{ display: flex; align-items: center; gap: 5px; } .edpro_dashboard_wrap .edpro_card_label{ font-size: 16px; font-weight: 500; color: var(--edpro-text-subtle); letter-spacing: -0.176px; line-height: 24px; } .edpro_dashboard_wrap .dash_badge{ display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 2px 6px; font-size: 11px; letter-spacing: 0.22px; text-transform: uppercase; line-height: 12px; font-weight: 500; } .edpro_dashboard_wrap .dash_badge_teal{ background: var(--edpro-teal-soft); color: var(--edpro-teal); } .edpro_dashboard_wrap .dash_badge_red{ background: rgba(238, 32, 28, 0.10); color: #EE201C; } /* Gauge cards */ .edpro_dashboard_wrap .edpro_card_gauge{ min-height: 260px; } .edpro_dashboard_wrap .dash_gauge{ position: relative; height: 200px; margin-top: 12px; display: flex; align-items: flex-end; justify-content: center; } .edpro_dashboard_wrap .dash_gauge_svg{ position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 360px; height: 200px; } .edpro_dashboard_wrap .dash_gauge_inner{ position: relative; z-index: 1; text-align: center; padding-bottom: 24px; } .edpro_dashboard_wrap .dash_gauge_total{ display: block; font-size: 12px; color: var(--edpro-text-faint); letter-spacing: -0.132px; line-height: 24px; } .edpro_dashboard_wrap .dash_gauge_amount{ display: block; font-size: 22px; font-weight: 500; color: var(--edpro-text); letter-spacing: -0.44px; line-height: 32px; } /* Chart cards */ .edpro_dashboard_wrap .edpro_card_chart{ padding: 18px 24px 20px 18px; } .edpro_dashboard_wrap .dash_chart_value{ font-family: 'Poppins', 'Onest', sans-serif; font-size: 28px; font-weight: 500; color: var(--edpro-text-strong); letter-spacing: 0.28px; margin: 4px 0 16px; } .edpro_dashboard_wrap .dash_chart_canvas{ position: relative; height: 80px; } .edpro_dashboard_wrap .dash_chart_line{ width: 100%; height: 60px; display: block; overflow: visible; } .edpro_dashboard_wrap .dash_chart_stroke{ fill: none; stroke: var(--edpro-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .edpro_dashboard_wrap .dash_chart_fill{ fill: var(--edpro-primary); fill-opacity: 0.08; stroke: none; } .edpro_dashboard_wrap .dash_chart_dot{ position: absolute; width: 12px; height: 12px; background: var(--edpro-primary); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 4px 10px rgba(80, 114, 252, 0.35); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.15s ease; left: 0; top: 0; } .edpro_dashboard_wrap .dash_chart_canvas:hover .dash_chart_dot{ opacity: 1; } .edpro_dashboard_wrap .dash_chart_tooltip{ position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); background: var(--edpro-card); border-radius: 8px; padding: 8px; box-shadow: 0 12px 32px -8px rgba(88, 92, 95, 0.25); min-width: 110px; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; white-space: nowrap; z-index: 10; } .edpro_dashboard_wrap .dash_chart_canvas:hover .dash_chart_tooltip{ opacity: 1; } .edpro_dashboard_wrap .dash_chart_tooltip::after{ content: ''; position: absolute; left: var(--tooltip-arrow-x, 50%); transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; bottom: -6px; top: auto; border-top: 6px solid var(--edpro-card); border-bottom: 0; } /* When tooltip is flipped below the data point, arrow flips up */ .edpro_dashboard_wrap .dash_chart_tooltip.dash_chart_tooltip_flipped::after{ bottom: auto; top: -6px; border-top: 0; border-bottom: 6px solid var(--edpro-card); } .edpro_dashboard_wrap .dash_chart_tooltip_row{ display: flex; align-items: center; gap: 4px; font-weight: 500; color: var(--edpro-text-strong); font-size: 14px; } .edpro_dashboard_wrap .dash_chart_tooltip_date{ display: block; color: var(--edpro-text-muted); font-size: 12px; } .edpro_dashboard_wrap .dash_chart_axis{ list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px dashed var(--edpro-divider); position: relative; height: 24px; } .edpro_dashboard_wrap .dash_chart_axis li{ position: absolute; top: 8px; transform: translateX(-50%); font-size: 12px; color: var(--edpro-text-muted); white-space: nowrap; } /* Anchor edge labels to the canvas edges so they don't get half-clipped */ .edpro_dashboard_wrap .dash_chart_axis li:first-child{ transform: translateX(0); } .edpro_dashboard_wrap .dash_chart_axis li:last-child{ transform: translateX(-100%); } .edpro_dashboard_wrap .dash_chart_axis li.active{ color: var(--edpro-text-strong); } /* KPI table — Figma node 5:18478 */ .edpro_dashboard_wrap .edpro_section_title{ font-size: 24px; line-height: 32px; color: var(--edpro-text); letter-spacing: -0.24px; margin: 0 0 15px; font-weight: 400; } .edpro_dashboard_wrap .edpro_section_title_bestsellers{ margin: 0 0 15px; } .edpro_dashboard_wrap .edpro_kpi_section, .edpro_dashboard_wrap .edpro_best_sellers_section{ margin-bottom: 32px; } .edpro_dashboard_wrap .edpro_kpi_table{ display: flex; flex-direction: column; gap: 12px; } .edpro_dashboard_wrap .edpro_kpi_table .edpro_kpi_thead{ margin-bottom: -4px; } .edpro_dashboard_wrap .edpro_kpi_tbody{ display: flex; flex-direction: column; gap: 12px; } .edpro_dashboard_wrap .edpro_kpi_thead{ display: flex; align-items: center; justify-content: space-between; border-radius: 8px; overflow: hidden; font-size: 14px; line-height: 20px; letter-spacing: -0.084px; color: var(--edpro-text-muted); font-weight: 400; } .edpro_dashboard_wrap .edpro_kpi_thead .edpro_kpi_cell{ padding: 8px 12px; gap: 0; color: var(--edpro-text-muted); font-weight: 400; } .edpro_dashboard_wrap .edpro_kpi_thead .edpro_kpi_cell_time, .edpro_dashboard_wrap .edpro_kpi_thead .edpro_kpi_cell_status{ padding-left: 0; } .edpro_dashboard_wrap .edpro_kpi_row{ background: var(--edpro-card); border-radius: 12px; display: flex; align-items: stretch; justify-content: space-between; overflow: hidden; } .edpro_dashboard_wrap .edpro_kpi_cell{ display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 12px; font-size: 14px; line-height: 20px; letter-spacing: -0.084px; color: var(--edpro-text); min-width: 0; } /* Widths derived from Figma fixed cell sizes (187/140/154/200/120 = 801) */ .edpro_dashboard_wrap .edpro_kpi_cell_product{ width: 23.3%; min-width: 187px; } .edpro_dashboard_wrap .edpro_kpi_cell_store{ width: 17.5%; min-width: 140px; font-weight: 500; } .edpro_dashboard_wrap .edpro_kpi_cell_bid{ width: 19.2%; min-width: 154px; font-weight: 500; } .edpro_dashboard_wrap .edpro_kpi_cell_time{ width: 25.0%; min-width: 200px; font-weight: 500; } .edpro_dashboard_wrap .edpro_kpi_cell_status{ width: 15.0%; min-width: 120px; padding: 12px; } /* KPI "See more" button — mirror the products-listing EDPRO button so the dashboard KPI matches the listing (the listing button is styled by the .products_wrap-scoped rule, which the dashboard never receives). */ body.ed_pro .edpro_kpi_section .btn-border.btn_border_secondary{ display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(90deg, rgba(1,15,36,0.02) 0%, rgba(1,15,36,0.12) 50.5%, rgba(1,15,36,0.02) 100%) !important; border: 1px solid rgba(1, 15, 36, 0.1) !important; border-radius: 12px !important; color: #010F24 !important; box-shadow: none !important; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.084px; white-space: nowrap; transition: filter 0.12s ease; } body.ed_pro .edpro_kpi_section .btn-border.btn_border_secondary:hover{ color: #010F24 !important; filter: brightness(0.96); } body.ed_pro.dark_mode .edpro_kpi_section .btn-border.btn_border_secondary{ background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.2) 50.5%, rgba(255, 255, 255, 0.04) 100%) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #FFFFFF !important; } .edpro_dashboard_wrap .edpro_kpi_thumb{ width: 48px; height: 48px; min-width: 48px; border-radius: 6px; background: var(--edpro-bg); box-shadow: 0 40px 96px -8px rgba(88, 92, 95, 0.2); overflow: hidden; display: flex; align-items: center; justify-content: center; } .edpro_dashboard_wrap .edpro_kpi_thumb img{ width: 40px; height: 40px; object-fit: cover; border-radius: 4px; } .edpro_dashboard_wrap a.edpro_kpi_product_name{ color: inherit; text-decoration: none; } .edpro_dashboard_wrap a.edpro_kpi_product_name:hover{ color: var(--edpro-primary); } .edpro_dashboard_wrap .edpro_kpi_empty{ padding: 32px; text-align: center; color: var(--edpro-text-muted); font-size: 14px; background: var(--edpro-card); border-radius: 12px; } .edpro_dashboard_wrap .edpro_kpi_product_text{ display: flex; flex-direction: column; justify-content: center; flex: 1 0 0; min-width: 0; } .edpro_dashboard_wrap .edpro_kpi_product_name{ font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .edpro_dashboard_wrap .edpro_status_badge{ display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 4px 8px 4px 4px; font-size: 12px; font-weight: 500; line-height: 16px; } .edpro_dashboard_wrap .edpro_status_badge i{ font-size: 12px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; } /* Per palette constraint: NO orange. Bidding (Figma orange) maps to blue substitute. */ .edpro_dashboard_wrap .edpro_status_warning{ background: var(--edpro-warning-soft); color: var(--edpro-warning); } .edpro_dashboard_wrap .edpro_status_success{ background: var(--edpro-success-soft); color: var(--edpro-success); } /* Best sellers — transparent container so its rows render as individual white cards on the page background, exactly like the KPI section. (The dashed empty box is supplied by .edpro_empty_state, see below.) */ .edpro_dashboard_wrap .edpro_best_sellers{ width: 100%; background: transparent; border: 0; padding: 0; min-height: 0; } /* Dashed-border empty state, applied while loading or when no rows came back */ .edpro_dashboard_wrap .edpro_best_sellers.edpro_best_sellers_empty{ border: 1px dashed rgba(10, 9, 27, 0.17); background: transparent; display: flex; align-items: center; justify-content: center; padding: 32px; } .edpro_dashboard_wrap .edpro_empty_state{ width: 100%; } .edpro_dashboard_wrap .edpro_empty_icon{ font-size: 36px; color: rgba(10, 9, 27, 0.19); margin-bottom: 8px; } .edpro_dashboard_wrap .edpro_empty_text{ color: rgba(10, 9, 27, 0.19); font-size: 16px; margin: 0; } body.ed_pro .edpro_empty_state{ min-height: 260px; width: 100%; display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(10, 9, 27, 0.17); border-radius: 16px; background: transparent; padding: 24px; } body.ed_pro .edpro_dashboard_wrap .edpro_best_sellers:has(.edpro_empty_state){ background: transparent; border-color: transparent; padding: 0; min-height: 0; } /* Open-box icon — CSS fill overrides the inline white attribute. */ body.ed_pro .edpro_empty_state svg{ width: 48px; height: 48px; display: inline-block; margin-bottom: 8px; } body.ed_pro .edpro_empty_state svg path{ fill: #0A091B !important; fill-opacity: 0.19 !important; } /* Primary message — bestseller and KPI
. */ body.ed_pro .edpro_empty_state .no_product_found_color, body.ed_pro .edpro_empty_state h5{ color: rgba(10, 9, 27, 0.19) !important; font-size: 16px; font-weight: 400; line-height: 1.2; margin: 0; } /* KPI secondary line — only the

that directly follows the

, so the bestseller's standalone

is never matched here. */ body.ed_pro .edpro_empty_state h5 + p{ color: rgba(10, 9, 27, 0.19) !important; font-size: 14px; font-weight: 400; margin: 4px 0 0; } /* Dark mode: keep the muted feel but lift opacity for contrast on #0A091B. */ body.ed_pro.dark_mode .edpro_empty_state{ border-color: rgba(255, 255, 255, 0.17); } body.ed_pro.dark_mode .edpro_empty_state svg path{ fill: #ffffff !important; fill-opacity: 0.30 !important; } body.ed_pro.dark_mode .edpro_empty_state .no_product_found_color, body.ed_pro.dark_mode .edpro_empty_state h5, body.ed_pro.dark_mode .edpro_empty_state h5 + p{ color: rgba(255, 255, 255, 0.32) !important; } /* Best-seller list rows */ .edpro_dashboard_wrap .edpro_best_list{ display: flex; flex-direction: column; gap: 4px; } .edpro_dashboard_wrap .edpro_best_row{ display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 12px; color: var(--edpro-text); text-decoration: none; transition: background-color 0.15s ease; } .edpro_dashboard_wrap .edpro_best_row + .edpro_best_row{ border-top: 1px solid var(--edpro-divider); } .edpro_dashboard_wrap .edpro_best_row:hover{ background: var(--edpro-bg); color: var(--edpro-text); } .edpro_dashboard_wrap .edpro_best_thumb{ width: 48px; height: 48px; min-width: 48px; border-radius: 8px; background: var(--edpro-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; } .edpro_dashboard_wrap .edpro_best_thumb img{ width: 40px; height: 40px; object-fit: cover; border-radius: 4px; } .edpro_dashboard_wrap .edpro_best_info{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .edpro_dashboard_wrap .edpro_best_name{ font-size: 14px; font-weight: 500; color: var(--edpro-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .edpro_dashboard_wrap .edpro_best_store{ font-size: 12px; color: var(--edpro-text-muted); } .edpro_dashboard_wrap .edpro_best_meta{ display: flex; align-items: center; gap: 12px; flex: none; } .edpro_dashboard_wrap .edpro_best_qty{ font-size: 14px; font-weight: 500; color: var(--edpro-text); } @media (max-width: 575px) { .edpro_dashboard_wrap .edpro_best_row{ gap: 12px; flex-wrap: wrap; } .edpro_dashboard_wrap .edpro_best_meta{ width: 100%; justify-content: space-between; padding-left: 60px; } } /* Footer (EDPRO) */ footer.edpro_footer{ background: transparent !important; padding: 16px 24px !important; margin-top: 16px; } footer.edpro_footer .footer_copyright_center, footer.edpro_footer .footer{ width: 100%; } footer.edpro_footer .text-center.footer{ text-align: left !important; } footer.edpro_footer .edpro_footer_text{ font-size: 14px; color: rgba(1, 15, 36, 0.5); letter-spacing: -0.084px; margin: 0; } /* Floating chat (EDPRO override of existing .chat__btn-all) — Figma 74x75 #5EBFFF Icon: Figma node 5:19309 ("chat-01-stroke-rounded 1") from EDPRO file K9S5UjeIe026SdcAxjv1In, exported to /assets/img/ed_pro/chat_icon.svg. Hides the legacy filled svg and paints the stroked Figma icon as a centered 40x40 background-image on the button. Using background-image (not ::before mask on a sized child) avoids fragile sizing inheritance from .chat-icon-inner and the legacy `width:28px` rule in client style.css. */ body.ed_pro .chat__main-div{ position: fixed !important; right: 24px !important; bottom: 24px !important; background: transparent !important; box-shadow: none !important; z-index: 1044; } body.ed_pro .chat__btn-all{ background-color: #5EBFFF !important; background-image: url("/assets/img/ed_pro/chat_icon.svg"), radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 60%) !important; background-position: center, center !important; background-repeat: no-repeat, no-repeat !important; background-size: 40px 40px, 100% 100% !important; color: #fff !important; border: none !important; border-radius: 9.2px !important; width: 45px !important; height: 45px !important; box-shadow: 0 12px 28px -8px rgba(94, 191, 255, 0.55) !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; position: fixed !important; right: 24px !important; bottom: 20px !important; z-index: 1045; overflow: hidden; } /* Suppress the legacy filled chat icon entirely — the button shows the stroked icon via its background-image (above). */ /* body.ed_pro .chat__btn-all #chatIcon, body.ed_pro .chat__btn-all .chat-icon-inner, body.ed_pro .chat__btn-all #chatIcon > .chat-icon-inner, body.ed_pro .chat__btn-all #chatIcon svg, body.ed_pro .chat__btn-all .chat-icon-inner svg, body.ed_pro .chat__btn-all #chatIcon > i{ display: none !important; } */ body.ed_pro .chat__btn-all .chat_notification{ display: none !important; } /* Responsive */ @media (max-width: 1199px) { .edpro_dashboard_wrap .edpro_kpi_cell{ padding: 12px; } .edpro_dashboard_wrap .edpro_kpi_cell_product{ min-width: 0; width: 28%; } .edpro_dashboard_wrap .edpro_kpi_cell_store{ min-width: 0; width: 16%; } .edpro_dashboard_wrap .edpro_kpi_cell_bid{ min-width: 0; width: 16%; } .edpro_dashboard_wrap .edpro_kpi_cell_time{ min-width: 0; width: 24%; } .edpro_dashboard_wrap .edpro_kpi_cell_status{ min-width: 0; width: 16%; } } @media (max-width: 991px) { .edpro_dashboard_wrap{ padding: 20px 16px !important; } body.ed_pro .edpro_perf_filters .slect2-mod, body.ed_pro .edpro_perf_filters .slect2-mod_new, body.ed_pro .edpro_perf_filters .slect2-mod .select2-container--default .select2-selection--single{ min-width: 0; flex: 1; } .edpro_dashboard_wrap .edpro_kpi_thead{ display: none; } .edpro_dashboard_wrap .edpro_kpi_row{ flex-direction: column; align-items: stretch; padding: 8px; } .edpro_dashboard_wrap .edpro_kpi_cell{ width: 100% !important; min-width: 0 !important; padding: 8px 12px; } .edpro_dashboard_wrap .edpro_kpi_row .edpro_kpi_cell:not(.edpro_kpi_cell_product)::before{ content: attr(data-label); font-size: 12px; color: var(--edpro-text-muted); margin-right: auto; } } @media (max-width: 767px) { .edpro_dashboard_wrap .edpro_card_chart{ padding: 16px; } body.ed_pro .chat__btn-all{ width: 56px !important; height: 56px !important; right: 16px !important; bottom: 16px !important; background-size: 30px 30px, 100% 100% !important; } body.ed_pro .chat__main-div{ right: 16px !important; bottom: 16px !important; } } /* ============================================================ EDPRO Dashboard (CONDITION_12) — End ============================================================ */ /* ============================================================ EDPRO Header bar (CONDITION_12) — Start ============================================================ */ .header.edpro_header{ background: transparent !important; box-shadow: none !important; border: none !important; padding: 16px 24px 8px !important; } .header.edpro_header .edpro_header_inner{ gap: 10px; min-height: 52px; } .header.edpro_header .header_menu_icon{ margin-right: auto; } .edpro_header .edpro_top_actions{ gap: 10px; flex-wrap: nowrap; justify-content: flex-end; align-items: center; } .edpro_header .edpro_top_theme{ background: #fff; display: inline-flex; align-items: center; height: 52px; padding: 4px 10px; border-radius: 32px; gap: 4px; } .edpro_header .edpro_top_theme_btn{ width: 39.2px; height: 32px; border-radius: 19px; border: none; background: transparent; color: #0A091B; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; padding: 0; } .edpro_top_theme_btn img { width: 19.2px; height: 19.2px; } .edpro_top_dropdown .fa-bell { color: #9A9A9A; } .edpro_top_dropdown #notificationIcon { font-size: 20px; } .edpro_header .edpro_top_theme_btn.active, .edpro_header .edpro_top_theme_btn.selected{ background: radial-gradient(circle at 20% 20%, rgba(255, 235, 245, 0.4) 0%, rgba(255, 235, 245, 0) 40%), linear-gradient(135deg, #3b9fff 0%, #5cb7ff 50%, #92d0ff 100%); color: #fff; } .edpro_header .edpro_top_group{ background: #fff; border-radius: 8px; padding: 0 8px; gap: 4px; height: 52px; } .edpro_header .edpro_top_icon_btn{ width: 40px; height: 40px; border: none; background: transparent; border-radius: 6px; color: #0A091B; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; position: relative; text-decoration: none; } .edpro_header .edpro_top_icon_btn:hover{ background: #EFF2F6; color: #0A091B; } .edpro_header .edpro_top_icon_btn .notification_value{ position: absolute; top: 6px; right: 6px; min-width: 8px !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #EE201C !important; border: 0 !important; padding: 0 !important; line-height: 1 !important; font-size: 0 !important; color: transparent !important; left: auto !important; } .edpro_header .edpro_top_icon_btn .notification_value:empty{ display: none !important; } .edpro_header .edpro_top_lang{ display: inline-flex; align-items: center; height: 40px; } .edpro_header .edpro_top_lang .header-language-btn, .edpro_header .edpro_top_lang .button_group_right, .edpro_header .edpro_top_lang .store_dropdown{ margin: 0 !important; float: none !important; } .edpro_header .edpro_top_lang .language_btn, .edpro_header .edpro_top_lang .language_btn:hover, .edpro_header .edpro_top_lang .language_btn:focus, .edpro_header .edpro_top_lang .language_btn.show, .edpro_header .edpro_top_lang button.btn, .edpro_header .edpro_top_lang .btn.btn-default, .edpro_header .edpro_top_lang .btn.btn-sm{ background: transparent !important; border: none !important; color: #0A091B !important; box-shadow: none !important; font-size: 14px !important; padding: 0 8px !important; height: 40px; display: inline-flex; align-items: center; gap: 6px; min-width: 0 !important; line-height: 1 !important; } .edpro_header .edpro_top_lang .language_btn > .lang_flag{ display: none !important; } .edpro_header .edpro_top_lang .language_btn .lang_text{ padding-right: 13px;color: var(--Black);font-size: 14px;} .edpro_header .edpro_top_lang .language_btn::after{ content: url("data:image/svg+xml;utf8,") !important; border: 0 !important; width: auto !important; height: auto !important; margin-left: 8px !important; vertical-align: middle; line-height: 0; } .edpro_header .edpro_top_lang .dropdown-menu{ background: #fff !important; border: 1px solid #EAECF0 !important; border-radius: 8px !important; box-shadow: 0 8px 24px -8px rgba(88, 92, 95, 0.2) !important; padding: 6px !important; min-width: 160px; } .edpro_header .edpro_top_lang .dropdown-menu .dropdown-item{ color: #0A091B !important; padding: 8px 10px !important; border-radius: 6px; display: flex !important; align-items: center; gap: 8px; } .edpro_header .edpro_top_lang .dropdown-menu .dropdown-item:hover{ background: #EFF2F6 !important; color: #375DFB !important; } .edpro_header .edpro_top_lang .dropdown-menu .lang_flag{ display: inline-block !important; } .edpro_header .edpro_top_add_balance{ background: #5072FC; color: #fff !important;border-radius: 8px; padding: 8px 14px; font-size: 14px; line-height: 20px; box-shadow: 0 1px 2px 0 rgba(37, 62, 167, 0.48), 0 0 0 1px #375DFB; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; transition: filter 0.15s ease;text-transform: capitalize; } .edpro_header .edpro_top_add_balance:hover{ color: #fff !important; filter: brightness(1.05); } @media (max-width: 767px) { .header.edpro_header{ padding: 12px 16px !important; } .edpro_header .edpro_top_theme{ height: 44px; } .edpro_header .edpro_top_theme_btn{ width: 32px; height: 32px; } .edpro_header .edpro_top_group{ height: 44px; } .edpro_header .edpro_top_icon_btn{ width: 36px; height: 36px; } } /* ============================================================ EDPRO Header bar (CONDITION_12) — End ============================================================ */ /* ============================================================ EDPRO Sidebar (CONDITION_12) — Start ============================================================ */ body.ed_pro{ background-color: #EFF2F6; color: #010F24; } body.ed_pro .content-page, body.ed_pro.client_new_design .content-page, body.ed_pro.client_new_design.header_two .content-page{ padding-left: 320px !important; padding-right: 24px !important; background-color: #EFF2F6; } body.ed_pro .header, body.ed_pro .new_header{ padding-left: 320px !important; background-color: transparent !important; } /* Greeting (in content-page) and action row (in absolute header) share the same horizontal line. Both anchor to viewport top:24px, both use a 52px tall flex row with center alignment. The header is fixed (not absolute) so it locks to the viewport regardless of any positioned ancestor. */ body.ed_pro .header.edpro_header{ position: fixed !important; /* Span the full top strip of the content area (top:0, right:0) with an opaque page-coloured background so scrolled content can't bleed through the transparent gaps. Internal padding keeps the greeting at left:296 / y:24 and the action pills at right:24, exactly as before, and the 24px bottom padding masks down to where content-page begins (padding-top:100). */ top: 0; right: 0; left: 320px; width: auto !important; height: auto; /* Must outrank the sticky list headers (.new_design_th_xl / product_list_head / stores_th — all z-index:100). They share this fixed header's z-index, and since page content paints after the header in DOM order, the sticky strip would otherwise bleed THROUGH the header's notification/help/profile dropdowns (which are trapped in this header's stacking context). 200 keeps the chrome above page content while staying below the left nav (998) and modal backdrops (1046+). */ z-index: 200; pointer-events: auto; padding: 24px 24px 24px 0 !important; margin: 0 !important; background: #EFF2F6 !important; } body.ed_pro .header.edpro_header .container-fluid{ padding: 0 !important; } body.ed_pro .header.edpro_header > *, body.ed_pro .header.edpro_header .edpro_top_actions{ pointer-events: auto; } body.ed_pro .header.edpro_header .edpro_header_inner{ height: 52px; min-height: 52px; justify-content: space-between; align-items: center; } /* Content clears the fixed header band: top:24 + ~52 height + 24 gap = 100. Dual-class selectors defeat .client_new_design.header_two .content-page (specificity 0,3,0 in style.css) and similar legacy overrides. */ body.ed_pro .content-page, body.ed_pro.client_new_design .content-page, body.ed_pro.client_new_design.header_two .content-page{ padding-top: 100px !important; } /* Greeting now lives in the fixed header row (left of the action group). Tokens are scoped to .edpro_dashboard_wrap, so use literal Figma colors here. min-width:0 lets flex ellipsis long usernames instead of pushing the actions. */ .edpro_header .edpro_header_greet{ min-width: 0; flex: 1 1 auto; margin: 0; } .edpro_header .edpro_header_greet .edpro_dash_greet_block{ min-width: 0; } .edpro_header .edpro_header_greet .edpro_dash_greet{ font-size: 22px; font-weight: 600; color: #0A091B; letter-spacing: 0.22px; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .edpro_header .edpro_header_greet .edpro_dash_subtitle{ font-size: 16px; color: rgba(10,9,27,0.7); margin: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .edpro_header .edpro_header_greet .edpro_dash_subtitle_dash{ margin: 0 6px; } @media (min-width: 992px) { /* Sidebar is always visible on desktop, so the hamburger stays hidden. */ body.ed_pro .header.edpro_header .header_menu_icon{ display: none !important; } } @media (max-width: 991px) { /* Header: full-width static bar (drop the fixed band + sidebar offset). */ body.ed_pro .header.edpro_header{ position: static !important; left: auto; right: auto; top: auto; width: auto !important; padding: 12px 16px !important; } body.ed_pro .header.edpro_header .edpro_header_inner{ flex-wrap: wrap; row-gap: 10px; height: auto; min-height: 0; } /* Content is no longer offset by the (now off-canvas) sidebar. */ body.ed_pro .content-page, body.ed_pro.client_new_design .content-page, body.ed_pro.client_new_design.header_two .content-page{ padding-left: 16px !important; padding-right: 16px !important; padding-top: 12px !important; } /* Hamburger opens the off-canvas sidebar; darken the bars (base bars are white, invisible on EDPRO's light header). */ body.ed_pro .header.edpro_header .header_menu_icon{ display: inline-block !important; order: 1; margin: 0; } /* body.ed_pro .header.edpro_header .header_menu_icon span{ background-color: #0A091B; } */ /* Greeting: drops below the control row (hamburger + actions stay on top, the standard mobile pattern), full-width and wrapping instead of ellipsis. */ body.ed_pro .edpro_header .edpro_header_greet{ flex: 1 1 100%; order: 3; } body.ed_pro .edpro_header .edpro_header_greet .edpro_dash_greet{ font-size: 18px; white-space: normal; overflow: visible; text-overflow: clip; } body.ed_pro .edpro_header .edpro_header_greet .edpro_dash_subtitle{ font-size: 14px; white-space: normal; overflow: visible; text-overflow: clip; } /* Action cluster: second row, right-aligned, allowed to wrap on narrow screens. */ body.ed_pro .edpro_header .edpro_top_actions{ order: 2; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; } /* Dim backdrop behind the open off-canvas sidebar (JS toggles .showme). */ body.ed_pro .leftside-menu-opp{ position: fixed; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(1, 18, 41, 0.45); z-index: 997; } body.ed_pro .leftside-menu-opp.showme{ left: 0; } } @media (max-width: 575px) { /* Keep the bar compact on phones — greeting line only, no date/subtitle. */ body.ed_pro .edpro_header .edpro_header_greet .edpro_dash_subtitle{ display: none; } } body.ed_pro footer, body.ed_pro footer .footer_copyright_center, body.ed_pro footer .text-center.footer, body.ed_pro footer.edpro_footer{ background: transparent !important; background-color: transparent !important; } body.ed_pro footer.edpro_footer{ padding: 16px 24px 16px 320px !important; } body.ed_pro footer.edpro_footer .edpro_footer_text{ color: rgba(1, 15, 36, 0.5); } /* EDPRO body-wide font (Onest) — Poppins reserved for large numerics */ body.ed_pro{ font-family: 'Onest', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.ed_pro .edpro_dashboard_wrap .dash_chart_value, body.ed_pro .edpro_dashboard_wrap .dash_gauge_amount{ font-family: 'Poppins', 'Onest', sans-serif; font-weight: 500; } /* === EDPRO Dark mode === */ body.ed_pro.dark_mode, body.ed_pro.dark_mode .content-page{ background-color: #0A091B !important; color: #fff; } body.dark_mode .edpro_dashboard_wrap{ --edpro-bg: #0A091B; --edpro-card: #14132A; --edpro-text: #fff; --edpro-text-strong: #fff; --edpro-text-muted: rgba(255, 255, 255, 0.55); --edpro-text-subtle: rgba(255, 255, 255, 0.4); --edpro-text-faint: rgba(255, 255, 255, 0.6); --edpro-border: rgba(255, 255, 255, 0.1); --edpro-divider: rgba(255, 255, 255, 0.06); background-color: #0A091B; color: #fff; } body.dark_mode .edpro_dashboard_wrap .edpro_dash_greet{ color: #fff; } body.dark_mode .edpro_dashboard_wrap .edpro_card, body.dark_mode .edpro_dashboard_wrap .edpro_kpi_row, body.ed_pro.dark_mode .edpro_perf_filters .slect2-mod, body.ed_pro.dark_mode .edpro_perf_filters .slect2-mod_new, body.ed_pro.dark_mode .edpro_perf_filters .slect2-mod .select2-container--default .select2-selection--single, body.ed_pro.dark_mode .edpro_perf_filters .datepicker_custom_range{ background: #14132A !important; color: #fff !important; } body.ed_pro.dark_mode .edpro_perf_filters .select2-container--default .select2-selection--single .select2-selection__rendered, body.ed_pro.dark_mode .edpro_perf_filters .datepicker_custom_range{ color: #fff !important; } body.dark_mode .edpro_dashboard_wrap .edpro_kpi_thumb{ background: #1F1D3A; } body.dark_mode .edpro_dashboard_wrap .dash_chart_value, body.dark_mode .edpro_dashboard_wrap .dash_gauge_amount, body.dark_mode .edpro_dashboard_wrap .edpro_kpi_cell, body.dark_mode .edpro_dashboard_wrap .edpro_kpi_product_name{ color: #fff; } body.dark_mode .edpro_dashboard_wrap .dash_chart_tooltip{ background: #14132A; color: #fff; } body.dark_mode .edpro_dashboard_wrap .dash_chart_tooltip_val{ color: #fff; } body.dark_mode .edpro_dashboard_wrap .edpro_section_title{ color: #fff; } body.dark_mode .edpro_dashboard_wrap .edpro_best_sellers{ border-color: rgba(255,255,255,0.18); } body.dark_mode .edpro_header .edpro_top_theme, body.dark_mode .edpro_header .edpro_top_group{ background: #14132A; } body.dark_mode .edpro_header .edpro_top_theme_btn, body.dark_mode .edpro_header .edpro_top_icon_btn, body.dark_mode .edpro_header .edpro_top_lang .language_btn, body.dark_mode .edpro_header .edpro_top_lang button.btn, body.dark_mode .edpro_header .edpro_top_lang .lang_text{ color: #fff !important; } body.dark_mode .edpro_header .edpro_top_icon_btn:hover{ background: rgba(255,255,255,0.08); } body.dark_mode .edpro_header .header_menu_icon span{ background-color: #fff; } /* Header band matches the dark page (#0A091B) so it no longer reads as a light strip floating over the dark content. */ body.ed_pro.dark_mode .header.edpro_header{ background: #0A091B !important; } /* Greeting + subtitle now live in the header row; the .edpro_dashboard_wrap dark override above doesn't reach them, so flip them to light here. */ body.dark_mode .edpro_header .edpro_header_greet .edpro_dash_greet{ color: #fff; } body.dark_mode .edpro_header .edpro_header_greet .edpro_dash_subtitle{ color: rgba(255,255,255,0.7); } /* Action icons (settings/help/bell) are inline SVGs whose stroke/fill is hardcoded to the light-theme #0A091B, so `color` can't recolour them and they vanish on the dark pills. Flip stroke/fill to white — same approach as SP's `.dark_mode … svg path{ stroke: var(--BlackToWhite) }`. Attribute selectors keep stroke-based icons from gaining a fill and fill-based icons from gaining an outline. Opacity is lifted to 0.5 so the icons clear the 3:1 contrast bar while staying soft. */ body.dark_mode .edpro_header .edpro_top_group .edpro_top_icon_btn svg path[stroke]{ stroke: #fff !important; stroke-opacity: 0.5 !important; } body.dark_mode .edpro_header .edpro_top_group .edpro_top_icon_btn svg path[fill]{ fill: #fff !important; fill-opacity: 0.5 !important; } /* Theme toggle sun/moon: muted white for the unselected icon, full white on the selected (blue gradient) pill so the active moon reads clearly in dark mode. */ body.dark_mode .edpro_header .edpro_top_theme_btn svg path{ fill: rgba(255,255,255,0.55) !important; } body.dark_mode .edpro_header .edpro_top_theme_btn.selected svg path{ fill: #fff !important; fill-opacity: 1 !important; } body.dark_mode .edpro_header .edpro_top_lang .language_btn::after{ content: url("data:image/svg+xml;utf8,") !important; } body.dark_mode .edpro_header .edpro_top_lang .dropdown-menu{ background: #14132A !important; border-color: rgba(255,255,255,0.1) !important; } body.dark_mode .edpro_header .edpro_top_lang .dropdown-menu .dropdown-item{ color: #fff !important; } body.dark_mode .edpro_header .edpro_top_lang .dropdown-menu .dropdown-item:hover{ background: rgba(255,255,255,0.08) !important; color: #fff !important; } body.dark_mode footer.edpro_footer .edpro_footer_text{ color: rgba(255, 255, 255, 0.5) !important; } /* ============================================================ EDPRO Submenu Sidebar Theme (CONDITION_12) Themes the SHARED functional left-nav (.leftside-menu + the left_nav_submenu_* structure used by every server) as the EDPRO Figma sidebar. Pure CSS, scoped to body.ed_pro (set by the dashboard layout) so no markup fork and no other server is affected. ============================================================ */ body.ed_pro .leftside-menu{ background: #001229 !important; color: #fff; width: 280px; border-radius: 16px; margin: 16px 0 16px 16px; height: calc(100vh - 32px); padding: 0; overflow: hidden; box-shadow: 0 40px 96px -8px rgba(0, 69, 120, 0.2); font-family: 'Onest', 'Poppins', system-ui, -apple-system, sans-serif; display: flex; flex-direction: column; position: fixed; left: 0; top: 0; z-index: 998; } /* Exact Figma 7:24276 glow (teal + blue color-dodge bloom over navy), exported as an image so it matches pixel-for-pixel. Rendered as a full-height overlay behind the nav (content sits at z-index:1) so it shows continuously through header, nav and footer — at native 256px width, top-aligned, NOT stretched. */ body.ed_pro .leftside-menu::before{ content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* background: url("../../img/ed_pro/sidebar-glow.jpg") no-repeat top center; */ background-size: 100% auto; } /* logo header */ body.ed_pro .leftside-menu .header_social_logo{ min-height: 88px; padding: 12px; margin: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } body.ed_pro .leftside-menu .header_social_logo a{ display: inline-flex; align-items: center; gap: 8px; color: #fff; } /* SITE_LOGO (logo.png) is the dark-text Edpro logo — invisible on the navy sidebar — and the men_text duplicates it as "ED PRO". Hide both and render the white Edpro logo as a background so the header matches the Figma. */ body.ed_pro .leftside-menu .header_social_logo .men_img{ margin: 0 !important; flex: none; width: 110px; height: 36px; background: url("../../img/ed_pro/logo-white.svg") no-repeat left center; background-size: contain; } body.ed_pro .leftside-menu .header_social_logo .men_img img, body.ed_pro .leftside-menu .header_social_logo .men_img svg{ display: none; } body.ed_pro .leftside-menu .header_social_logo .men_text{ display: none; } /* Other dashboards (admin / team-leader / agent-supplier / admin-supplier) all carry body.ed_pro (BODY_CLASS=ed_pro) and render SITE_LOGO in the shared header — but on EDPRO that resolves to the dark-text logo.png, invisible on the dark header. The client sidebar swaps to the white logo; do the same here so the brand mark is white on every EDPRO dashboard. content:url() cleanly replaces the source. */ body.ed_pro header.header .header-logo img{ content: url("../../img/ed_pro/logo-white.svg"); } /* scroll area */ body.ed_pro .leftside-menu .leftside-menu-content{ position: relative; z-index: 1; flex: 1 1 auto; overflow-y: auto; display: block; padding: 0; min-height: 0; width: 280px; background: transparent !important;margin-top: 0px !important; } body.ed_pro .leftside-menu .leftside-menu-content::-webkit-scrollbar{ width: 4px; } body.ed_pro .leftside-menu .leftside-menu-content::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.18); border-radius: 4px; } body.ed_pro .leftside-menu .leftside-menu-links{ width: 100%; } body.ed_pro .leftside-menu .leftside-menu-links-inner{ padding: 20px; display: flex; flex-direction: column; gap: 4px; } body.ed_pro .leftside-menu .leftside-menu-content .leftside-menu-links { overflow-y: auto; overflow-x: hidden; } /* top-level nav rows */ body.ed_pro .leftside-menu .home_nav_left.pf-menu, body.ed_pro .leftside-menu .left_nav_submenu_main, body.ed_pro .leftside-menu .affiliate_link, body.ed_pro .leftside-menu .settings_wrapper > a{ display: flex; align-items: center; gap: 16px; padding: 10px 12px; border-radius: 16px; color: rgba(255,255,255,0.9); text-decoration: none; font-family: 'Onest', sans-serif; font-size: 14px !important; font-weight: 400; line-height: 20px; letter-spacing: -0.224px; border: 1px solid transparent; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } body.ed_pro .leftside-menu .home_nav_left.pf-menu:hover, body.ed_pro .leftside-menu .left_nav_submenu_main:hover, body.ed_pro .leftside-menu .affiliate_link:hover, body.ed_pro .leftside-menu .settings_wrapper > a:hover{ background: rgba(255,255,255,0.08) !important; color: var(--White) !important; } body.ed_pro .leftside-menu .leftside_submenu_nav.leftside-menu-links-inner .left_nav_submenu_wrapper .submenu a:hover{background: rgba(255, 255, 255, 0.08) !important;color: #fff;} body.ed_pro .leftside-menu .home_nav_left.pf-menu.active, body.ed_pro .leftside-menu .left_nav_submenu_main.active, body.ed_pro .leftside-menu .affiliate_link.active, body.ed_pro .leftside-menu .settings_wrapper > a.active{ background: rgba(255,255,255,0.19); border-color: rgba(255,255,255,0.25); box-shadow: 0 40px 96px 0 rgba(88,92,95,0.2); color: #fff; } /* icons + labels */ body.ed_pro .leftside-menu .men_img{ width: 24px; height: 24px; flex: none; margin: 0; display: inline-flex; align-items: center; justify-content: center; } body.ed_pro .leftside-menu .men_img svg{ width: 24px; height: 24px; } body.ed_pro .leftside-menu .men_img svg circle, body.ed_pro .leftside-menu .men_img svg rect, body.ed_pro .leftside-menu .men_img svg line, body.ed_pro .leftside-menu .men_img svg polyline, body.ed_pro .leftside-menu .men_img svg polygon{ fill: #fff; stroke: none; } /* Nav icons are a single constant white — identical at rest, on hover, on click/active and when the submenu is open. No state-based color change at all (overrides style.css default/hover/active fill rules). */ body.ed_pro .leftside-menu .men_img svg path, body.ed_pro .leftside-menu .leftside-menu-links-inner a:hover .men_img svg path, body.ed_pro .leftside-menu .leftside-menu-links-inner a.active .men_img svg path, body.ed_pro .leftside-menu .left_nav_submenu_wrapper.open .left_nav_submenu_main.active .men_img path, body.ed_pro .leftside-menu .left_nav_submenu_wrapper.open .left_nav_submenu_main .men_img path, body.ed_pro .leftside-menu .left_nav_submenu_main:hover .men_img path, body.ed_pro .leftside-menu .left_nav_submenu_main.active .men_img path{ fill: transparent !important; transition: none !important; stroke: #fff !important;} /* Stroke-style icons (.stock_no_fill) stay white in every state too. */ body.ed_pro .leftside-menu .men_img .stock_no_fill svg path, body.ed_pro .leftside-menu .leftside-menu-links-inner a:hover .stock_no_fill svg path, body.ed_pro .leftside-menu .leftside-menu-links-inner a.active .stock_no_fill svg path{ stroke: #fff !important; fill: none !important; transition: none !important; } .ed_pro .leftside-menu-links-inner a.active svg path{fill:transparent;} .ed_pro .leftside-menu-links-inner a svg path {fill: transparent;} /* Add-store modal: Cancel + Save buttons split the row 50/50. */ body.ed_pro .edpro_store_actions{ display: flex; gap: 12px; } body.ed_pro .edpro_store_actions > button, body.ed_pro .edpro_store_actions > .form-group{ flex: 1 1 50%; width: 50%; max-width: 50%; margin-bottom: 0; } body.ed_pro .edpro_store_actions .btn{ width: 100%; } /* Add-store modal: Secret field show/hide password eye. */ body.ed_pro #addStoreModal .eye_icon_spacer{ position: relative; } body.ed_pro #addStoreModal .eye_icon_spacer input{ padding-right: 38px; } body.ed_pro #addStoreModal .eye_icon{ top: 22px; right: 12px; transform: translateY(-50%); opacity: 1; } body.ed_pro #addStoreModal .eye_icon svg{ display: block; width: 16px; height: 16px; } body.ed_pro .leftside-menu .men_text{ flex: 1 1 auto; color: #fff; font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; min-width: 0; } body.ed_pro .leftside-menu .submenu-text{ font-family: 'Onest', sans-serif; } body.ed_pro .leftside-menu .left_nav_submenu_main .fa-chevron-down{ color: rgba(255,255,255,0.6); font-size: 12px; transition: transform 0.2s ease; } body.ed_pro .leftside-menu .left_nav_submenu_wrapper.open .left_nav_submenu_main .fa-chevron-down{ transform: rotate(180deg); } /* Expanded submenu group — the whole section gets a glassy rounded container highlight (Figma 7:24310). Applies to ANY open submenu, not just Stores. */ body.ed_pro .leftside-menu .left_nav_submenu_wrapper.open{ background: rgba(255, 255, 255, 0.19); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px; box-shadow: 0 40px 96px 0 rgba(88, 92, 95, 0.2);padding-bottom: 5px; } /* Parent header inside an open group sits flush — the container is the single highlight, so don't stack a second box on the .active parent. */ body.ed_pro .leftside-menu .left_nav_submenu_wrapper.open .left_nav_submenu_main, body.ed_pro .leftside-menu .left_nav_submenu_wrapper.open .left_nav_submenu_main.active{ background: transparent !important; border-color: transparent !important; box-shadow: none !important; } /* submenu — Figma 7:24310: text starts at the container edge (no indent under the parent icon), sub-items 10px apart, 16px below the parent row. */ /* body.ed_pro .leftside-menu .left_nav_submenu_wrapper.open .submenu{ margin-top: 16px; } */ body.ed_pro .leftside-menu .submenu{ display: flex; flex-direction: column; gap: 5px; overflow: hidden; } body.ed_pro .leftside-menu .submenu-text{ display: flex; align-items: center; padding: 9px 10px; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px !important; line-height: 20px; border-radius: 11px; border: 1px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease; /* Let long localized labels (e.g. PT "Criar a minha nova loja Shopify") wrap to a second line instead of overflowing/clipping at the sidebar edge. !important to beat the more-specific .home_nav_left.pf-menu nowrap rule. */ white-space: normal !important; overflow-wrap: break-word; } body.ed_pro .leftside-menu .submenu-text:hover{ background: rgba(255,255,255,0.10); color: #fff; } body.ed_pro .leftside-menu .submenu-text.active{ background: rgba(255,255,255,0.19); border-color: rgba(255,255,255,0.38); color: #fff; } /* divider + settings group */ body.ed_pro .leftside-menu .left_nav_hr{ border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 12px 0; } body.ed_pro .leftside-menu .settings_wrapper{ display: flex; flex-direction: column; gap: 4px; } /* fixed bottom (whatsapp / community / research) */ body.ed_pro .leftside-menu-fixed-bottom{ position: relative; z-index: 1; padding: 12px; width: 100% !important; } body.ed_pro .leftside-menu-fixed-bottom .research_btn_div{ background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.25); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; } body.ed_pro .leftside-menu-fixed-bottom .research_btn_div a, body.ed_pro .leftside-menu-fixed-bottom .research_btn_text{ color: #fff; } body.ed_pro .leftside-menu-fixed-bottom .research_btn_svg svg path{ fill: #fff; } @media (max-width: 991px){ body.ed_pro .leftside-menu{ left: -304px; margin: 0; height: 100vh; border-radius: 0; transition: left 0.25s ease; } body.ed_pro .leftside-menu.nav_visible{ left: 0; } /* On small screens the off-canvas nav is 100vh; the menu list can exceed that. The scroll container (.leftside-menu-content) carries bootstrap .d-flex, so its single child stretches to the container height and its inner overflow:hidden clips the extra items with no scrollbar. Force the container block-level and let the links overflow so the container's overflow-y:auto produces a real scrollbar. */ body.ed_pro .leftside-menu .leftside-menu-content{ display: block !important; overflow-y: auto !important; } body.ed_pro .leftside-menu .leftside-menu-content .leftside-menu-links{ overflow: visible !important; } } /* Footer: Figma EDPRO shows a user card (name + balance + log out), not the Settings item or the whatsapp/research/community buttons. Hide those and style the EDPRO user card (markup only emitted under $isEdPro). */ body.ed_pro .leftside-menu .settings_wrapper, body.ed_pro .leftside-menu .left_nav_hr, body.ed_pro .leftside-menu-fixed-bottom .research_btn_div_area{ display: none !important; } body.ed_pro .edpro_user_card{ background: #FFFFFF; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9px; padding: 16px; display: flex; flex-direction: column; gap: 0; text-align: left; font-family: 'Onest', sans-serif; } body.ed_pro .edpro_user_card_top{ display: flex; align-items: center; gap: 8px; text-align: left; } body.ed_pro .edpro_user_avatar{ width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; background: #EAECF0; color: #475467; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; } body.ed_pro .edpro_user_avatar img{ width: 100%; height: 100%; object-fit: cover; } body.ed_pro .edpro_user_info{ flex: 1 1 auto; min-width: 0; text-align: left; } body.ed_pro .edpro_user_name{ font-size: 14px; line-height: 24px; color: #101828; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.ed_pro .edpro_user_balance{ font-size: 14px; line-height: 24px; color: #475467; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.ed_pro .edpro_user_balance.is_negative{ color: #EE201C; } body.ed_pro .edpro_user_chev{ color: #98A2B3; font-size: 16px; flex: none; } body.ed_pro .edpro_user_divider{ border: 0; border-top: 1px solid #EAECF0; margin: 0; } body.ed_pro .edpro_logout_link{ display: inline-flex; align-items: center; gap: 8px; color: #1D2939; text-decoration: none; font-size: 14px; line-height: 24px; } body.ed_pro .edpro_logout_link:hover{ color: #001229; } body.ed_pro .edpro_logout_link i{ font-size: 23px; } /* Divider + Sign out — always visible. */ body.ed_pro .edpro_user_collapse{ display: flex; flex-direction: column; gap: 16px; padding-top: 16px; } /* Floating chat trigger button (EDPRO) — bottom-right launcher gradient. */ body.ed_pro .chat__btn-all{ background: radial-gradient(circle at 25% 30%, rgba(47,255,255,0.35) 0%, rgba(47,255,255,0) 30%), radial-gradient(circle at 85% 50%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 40%), linear-gradient(135deg, #36b5e8 0%, #518df6 55%, #6bc5f1 100%) !important; box-shadow: 0 6px 16px rgba(55, 93, 251, 0.32); border: none; } body.ed_pro .chat__btn-all:hover, body.ed_pro .chat__btn-all:focus{ background: radial-gradient(circle at 25% 30%, rgba(47,255,255,0.35) 0%, rgba(47,255,255,0) 30%), radial-gradient(circle at 85% 50%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 40%), linear-gradient(135deg, #36b5e8 0%, #518df6 55%, #6bc5f1 100%) !important; } /* ============================================================ EDPRO Store Listing (CONDITION_12) — Start ============================================================ */ body.ed_pro .stores_wrap{ /* Tokens sourced from Figma 7:21964 (variable defs): - bg/weak-100 #F6F8FA, stroke/soft-200 #E2E4E9, text/sub-500 #525866, Gray/200 #EAECF0, Gray/900 #101828, button-shadow/fancy/blue #375DFB. - Page bg #EFF2F6, card #FFFFFF, title #010F24, muted rgba(1,15,36,.5). */ --stores-bg: #EFF2F6; --stores-card: #FFFFFF; --stores-text: #010F24; --stores-text-strong: #0A091B; --stores-text-muted: rgba(1, 15, 36, 0.5); --stores-text-subtle: rgba(1, 15, 36, 0.4); --stores-text-faint: rgba(10, 9, 27, 0.7); --stores-border: #E2E4E9; /* stroke/soft-200 */ --stores-border-divider: #EAECF0; /* Gray/200 */ --stores-border-soft: rgba(1, 15, 36, 0.1); --stores-row-bg: #FFFFFF; --stores-row-icon-bg: #F6F8FA; /* bg/weak-100 */ --stores-primary: #375DFB; /* button-shadow/fancy/blue */ --stores-primary-rgb: 55, 93, 251; --stores-action-text: #525866; /* text/sub-500 */ background-color: var(--stores-bg); color: var(--stores-text); font-family: 'Onest', 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: calc(100vh - 80px); padding-top: 80px; padding-bottom: 24px; } /* Greeting block (Figma node 7:21967): "Good morning, X" + subtitle. Sits above the page-title row, under the fixed header. */ body.ed_pro .stores_wrap .stores_greet_header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 24px 0; } body.ed_pro .stores_wrap .stores_greet_header .edpro_dash_greet_block{ display: flex; flex-direction: column; gap: 4px; } body.ed_pro .stores_wrap .stores_greet_header .edpro_dash_greet{ font-family: 'Onest', sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: 0.22px; color: #0A091B; margin: 0; } body.ed_pro .stores_wrap .stores_greet_header .edpro_dash_subtitle{ font-family: 'Onest', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.2; color: rgba(10, 9, 27, 0.7); margin: 0; } body.ed_pro .stores_wrap .stores_greet_header .edpro_dash_subtitle_dash{ margin: 0 4px; } /* Defensive: the legacy header_scroller marquee must not render on the EDPRO stores page. The fixed action header (.edpro_header) sits at top:24px and any in-flow marquee section pushed into that band visually invades the header pill. The stores page no longer includes header_scroller.php in PHP, but if any other branch ever did, suppress the section here too. */ body.ed_pro .stores_wrap > .marquee_sec, body.ed_pro .stores_wrap .marquee_sec{ display: none !important; } /* Page title row: "Stores" heading + right-aligned actions. Figma: "Stores" sits at top:175 (relative to page top), header at top:40-92. With content-page padding-top:24 and stores_wrap padding-top:80, the title lands ~104px from top of viewport — under the fixed header band. */ body.ed_pro .stores_wrap .stores_title{ font-family: 'Onest', sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; letter-spacing: -0.24px; color: #010F24; /* Figma Text/Text 1 - Light */ margin: 0; } body.ed_pro .stores_wrap .stores_actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } body.ed_pro .stores_wrap .stores_actions .store_dropdown_area, body.ed_pro .stores_wrap .stores_actions .store_div{ margin: 0 !important; padding: 0 !important; display: inline-flex; align-items: stretch; height: 40px; } body.ed_pro .stores_wrap .stores_actions .slect2-mod, body.ed_pro .stores_wrap .stores_actions .slect2-mod_new, body.ed_pro .stores_wrap .stores_actions .slect2-mod .select2-container--default .select2-selection--single{ background: #FFFFFF !important; border: 1px solid #E2E4E9 !important; /* stroke/soft-200 from Figma */ border-radius: 8px !important; min-width: 180px; height: 40px !important; box-shadow: 0 1px 2px 0 rgba(82, 88, 102, 0.06) !important; outline: 0 !important; } body.ed_pro .stores_wrap .stores_actions .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-color: #525866 transparent transparent transparent !important; /* icon/sub-500 */ } body.ed_pro .stores_wrap .stores_actions .select2-container--default .select2-selection--single .select2-selection__rendered{ color: var(--stores-text) !important; line-height: 40px !important; /* padding: 0 12px !important; */ font-size: 14px; } body.ed_pro .stores_wrap .stores_actions .select2-container--default .select2-selection--single .select2-selection__arrow{ height: 40px !important; right: 6px; } /* Active/deleted-store filter dropdown on the All Stores page (ED Pro only). The base rule gives it min-width:180px and a hard-coded rendered width:140px; combined with Select2's width:'resolve' inline width, a fixed small width truncated "Active stores" to "Active st..." and crowded the arrow into its own segment on small screens. Let it size to the selected text instead, with room reserved for the arrow — compact but never truncated. */ body.ed_pro .stores_wrap .stores_actions .deleted-store-filter{ min-width: 0 !important; width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; } body.ed_pro .stores_wrap .stores_actions .deleted-store-filter .select2-container{ width: auto !important; min-width: 0 !important; } body.ed_pro .stores_wrap .stores_actions .deleted-store-filter .select2-selection--single{ min-width: 0 !important; width: auto !important; } body.ed_pro .stores_wrap .stores_actions .deleted-store-filter .select2-selection__rendered{ width: auto; min-width: 0 !important; max-width: 220px !important; padding-left: 12px !important; padding-right: 40px !important; /* space so the text never sits under the arrow */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.ed_pro .stores_wrap .stores_actions .deleted-store-filter .select2-selection__arrow{ right: 10px !important; } /* The base rule (style.css) drops the text padding to 20px at <=767px, which put the text back under the arrow. Re-assert the clearance at that breakpoint. */ @media (max-width: 767px){ body.ed_pro .stores_wrap .stores_actions .deleted-store-filter .select2-selection__rendered{ padding-left: 12px !important; padding-right: 40px !important; } body.ed_pro .stores_wrap .stores_actions .deleted-store-filter .select2-selection__arrow{ right: 10px !important; } } /* Content-hugging Select2 filter buttons (ED Pro). The base rule `.slect2-mod .select2-selection__rendered{width:140px}` (style.css) locks the rendered text to 140px, so these filter buttons stay as wide as their long default label ("Search Criteria" / "Product Status (All)") even after a short option is picked. Let them size to the selected text instead. - .order-search-filter : Orders page "Search Criteria" filter - .select2_option : Products / bestseller quotes "Product Status" filter */ body.ed_pro .slect2-mod:has(.order-search-filter) .select2-selection__rendered, body.ed_pro .slect2-mod:has(.select2_option) .select2-selection__rendered{ width: auto; min-width: 0 !important; max-width: 230px; /* cap very long options so the row stays tidy */ /* !important so it beats the base rule (.slect2-mod_new ... __rendered{padding-right:35px}) which has higher specificity; this is the gap between text and arrow. */ padding-right: 38px !important; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Pin the dropdown arrow to the far right so it sits inside the reserved padding and never overlaps the text. */ body.ed_pro .slect2-mod:has(.order-search-filter) .select2-selection__arrow, body.ed_pro .slect2-mod:has(.select2_option) .select2-selection__arrow{ right: 10px !important; } body.ed_pro .slect2-mod:has(.order-search-filter), body.ed_pro .slect2-mod:has(.order-search-filter) > .select2-container, body.ed_pro .slect2-mod:has(.order-search-filter) .select2-selection--single, body.ed_pro .slect2-mod:has(.select2_option), body.ed_pro .slect2-mod:has(.select2_option) > .select2-container, body.ed_pro .slect2-mod:has(.select2_option) .select2-selection--single{ width: auto !important; min-width: 0 !important; } /* Card around the table list */ body.ed_pro .stores_wrap .stores_card{ background: transparent; padding: 0; } /* Table column header row (above the data rows) */ body.ed_pro .stores_wrap .stores_th{ display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.1fr 1fr 1.1fr minmax(360px, 2fr); align-items: center; /* left:0 / right:12px to match .table_list_item's padding so header cells line up exactly over the data cells */ padding: 8px 12px 8px 0; margin-bottom: 4px; } body.ed_pro .stores_wrap .stores_th_cell{ font-size: 14px; line-height: 20px; color: var(--stores-text-muted); font-family: 'Onest', sans-serif; letter-spacing: -0.084px; font-weight: 400; padding: 0 12px; } /* Hide legacy header row + label area inside EDPRO scope. storeList.php still adds them via JS, so suppress visually. */ body.ed_pro .stores_wrap .table_list_item_head, body.ed_pro .stores_wrap .storeListingHeader{ display: none !important; } /* Data rows: each .table_list_item is restyled into a card row */ body.ed_pro .stores_wrap #client_product_body{ display: flex; flex-direction: column; gap: 4px; } body.ed_pro .stores_wrap .table_list_item{ background: var(--stores-row-bg) !important; border-radius: 12px; padding: 0 12px 0 0 !important; margin: 0 !important; box-shadow: none; overflow: hidden; transition: background-color 0.12s ease, box-shadow 0.12s ease; } body.ed_pro .stores_wrap .table_list_item:hover{ background: #FAFBFC !important; box-shadow: 0 1px 2px 0 rgba(82, 88, 102, 0.06); } body.ed_pro .stores_wrap .table_list_item .d-md-flex, body.ed_pro .stores_wrap .table_list_item .d-lg-flex{ display: grid !important; grid-template-columns: 1.8fr 1fr 1fr 1.1fr 1fr 1.1fr minmax(360px, 2fr); align-items: center; column-gap: 0; padding: 0 !important; } /* Each cell: clear bootstrap col padding, apply Figma 12/20 padding */ body.ed_pro .stores_wrap .table_list_item .d-md-flex > .col, body.ed_pro .stores_wrap .table_list_item .d-md-flex > [class^="col-"], body.ed_pro .stores_wrap .table_list_item .d-md-flex > [class*=" col-"], body.ed_pro .stores_wrap .table_list_item .d-lg-flex > .col, body.ed_pro .stores_wrap .table_list_item .d-lg-flex > [class^="col-"], body.ed_pro .stores_wrap .table_list_item .d-lg-flex > [class*=" col-"]{ flex: 0 0 auto !important; max-width: none !important; width: auto !important; /* Honor the grid track widths: without this, a cell's min-content (e.g. a long unbroken store URL) overflows its track and shifts every column. */ min-width: 0 !important; padding: 12px; min-height: 64px; display: flex; align-items: center; } /* Inner row layout reset (storeList wraps each cell in .row > .col) */ body.ed_pro .stores_wrap .table_list_item .d-md-flex > .col > .row, body.ed_pro .stores_wrap .table_list_item .d-lg-flex > .col > .row, body.ed_pro .stores_wrap .table_list_item .d-md-flex > [class*="col-"] > .row, body.ed_pro .stores_wrap .table_list_item .d-lg-flex > [class*="col-"] > .row{ margin: 0; width: 100%; } body.ed_pro .stores_wrap .table_list_item .d-md-flex > .col > .row > .col, body.ed_pro .stores_wrap .table_list_item .d-lg-flex > .col > .row > .col, body.ed_pro .stores_wrap .table_list_item .d-md-flex > [class*="col-"] > .row > .col, body.ed_pro .stores_wrap .table_list_item .d-lg-flex > [class*="col-"] > .row > .col{ padding: 0; flex: 1 1 auto; max-width: none; min-width: 0; } /* Hide the inline mobile labels that storeList renders inside .col.d-md-none */ body.ed_pro .stores_wrap .table_list_item .d-md-none{ display: none !important; } /* Store column: round 40px icon tile + name + domain */ body.ed_pro .stores_wrap .store_cell_inner{ display: flex; align-items: center; gap: 12px; min-width: 0; } body.ed_pro .stores_wrap .store_cell_icon{ width: 40px; height: 40px; flex: none; border-radius: 96px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; color: #525866; } /* The SVG is a self-contained 40x40 tile (own circular background + glyph), so render it full-bleed — no inner shrink, no duplicate tile background. */ body.ed_pro .stores_wrap .store_cell_icon svg{ width: 40px; height: 40px; display: block; } body.ed_pro .stores_wrap .store_cell_text{ min-width: 0; flex: 1 1 auto; overflow: hidden; } body.ed_pro .stores_wrap .store_cell_text .fs_16{ font-size: 14px !important; font-weight: 400; line-height: 20px; color: var(--stores-text); display: block; /* Long names wrap onto a second line instead of truncating with an ellipsis */ white-space: normal; overflow-wrap: anywhere; word-break: break-word; letter-spacing: -0.084px; } body.ed_pro .stores_wrap .store_cell_text .text_secondary{ font-size: 12px; line-height: 16px; color: var(--stores-text-muted) !important; /* Long domains wrap onto multiple lines instead of truncating with an ellipsis */ white-space: normal; overflow-wrap: anywhere; word-break: break-word; display: block; } /* Hide legacy expand-toggle chevron in EDPRO (Figma uses See More button) */ body.ed_pro .stores_wrap .table_list_item .js_table_expand_icon, body.ed_pro .stores_wrap .table_list_item .table_expand_abso{ display: none !important; } /* Restyle pill counters into Figma plain text */ body.ed_pro .stores_wrap .table_list_item .border.rounded-pill, body.ed_pro .stores_wrap .table_list_item .border-rounded-pill{ border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; font-size: 14px !important; font-weight: 500; color: var(--stores-text); line-height: 20px; letter-spacing: -0.084px; display: inline !important; } /* "Order fetch date" cell typography */ body.ed_pro .stores_wrap .table_list_item .col .fs_14.fw-normal, body.ed_pro .stores_wrap .table_list_item .col .fw-normal{ font-size: 14px; font-weight: 400; color: var(--stores-text); line-height: 20px; } /* Sync-stock + push-cost toggle columns ARE shown in EDPRO (parity with prime_flow). Only the reauthorize column is suppressed in the listing — it is surfaced inside the See-more modal instead. We pick the cell by its descendant marker via :has() so we never hide the actions cell. */ body.ed_pro .stores_wrap .table_list_item .d-md-flex > .col:has(.reauthorize_store), body.ed_pro .stores_wrap .table_list_item .d-lg-flex > .col:has(.reauthorize_store){ display: none !important; } /* Fallback for browsers without :has() — hide via class names */ body.ed_pro .stores_wrap .table_list_item .reauthorize_store, body.ed_pro .stores_wrap .table_list_item .reauthorize_div{ display: none !important; } /* Sync-stock / push-cost switches: tint the "on" state with the EDPRO accent */ body.ed_pro .stores_wrap .table_list_item .custom-switch .custom-control-input:checked ~ .custom-control-label::before{ background-color: #375DFB !important; border-color: #375DFB !important; } /* Actions cell (last col): "See More" pill + "Remove Store" outline button */ body.ed_pro .stores_wrap .delete_btn_div{ justify-self: end; width: 100%; } body.ed_pro .stores_wrap .delete_btn_div .row, body.ed_pro .stores_wrap .delete_btn_div .col{ display: flex; align-items: center; justify-content: flex-end; gap: 12px; width: 100%; } body.ed_pro .stores_wrap .delete_btn_div .delete_btn{ width: 40px; height: 40px; background: #FFFFFF !important; border: 1px solid var(--stores-border) !important; border-radius: 12px !important; display: inline-flex !important; align-items: center; justify-content: center; color: #525866 !important; box-shadow: 0 1px 2px 0 rgba(82, 88, 102, 0.06); } body.ed_pro .stores_wrap .delete_btn_div .delete_btn:hover{ border-color: var(--stores-primary) !important; color: var(--stores-primary) !important; } body.ed_pro .stores_wrap .delete_btn_div .delete_btn svg{ width: 16px; height: 16px; } body.ed_pro .stores_wrap .delete_btn_div_span{ display: none; } /* Custom action buttons rendered by EDPRO branch */ /* "See More" — gradient-filled pill from Figma node 7:22771. Border: rgba(1,15,36,0.1); fill: linear-gradient with rgba(1,15,36,0.12) mid; text: #010F24 Onest 14/20 (-0.084 letter-spacing). */ body.ed_pro .stores_wrap .store_action_see_more, body.ed_pro #client_orders_body .store_action_see_more, body.ed_pro #custom_orders_template .store_action_see_more, body.ed_pro .custom_orders_template_head .store_action_see_more, body.ed_pro .disputeListHeading .store_action_see_more, body.ed_pro .notesListingHeader .store_action_see_more{ display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 12px 20px; border-radius: 16px; background: linear-gradient(90deg, rgba(1,15,36,0.02) 0%, rgba(1,15,36,0.12) 50.5%, rgba(1,15,36,0.02) 100%); border: 1px solid rgba(1, 15, 36, 0.1); color: #010F24; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.084px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter 0.12s ease; } body.ed_pro .stores_wrap .store_action_see_more:hover, body.ed_pro #client_orders_body .store_action_see_more:hover, body.ed_pro #custom_orders_template .store_action_see_more:hover{ color: #010F24; filter: brightness(0.96); } /* "Remove Store" — outlined neutral button from Figma node 7:23543. Background: #FFFFFF (bg/white-0); border: #E2E4E9 (stroke/soft-200); text color: #525866 (text/sub-500); shadow: 0 1px 2px rgba(82,88,102,0.06). */ body.ed_pro .stores_wrap .store_action_remove{ display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 10px 16px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E2E4E9; color: #525866; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.084px; box-shadow: 0 1px 2px 0 rgba(82, 88, 102, 0.06); white-space: nowrap; text-decoration: none; cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease; } body.ed_pro .stores_wrap .store_action_remove:hover{ border-color: var(--stores-primary); color: var(--stores-primary); } /* Actions cell: See More + Remove Store always sit side-by-side in one row, right-aligned, 12px gap — matching the big-screen layout at every desktop width and in every language. flex-wrap:nowrap keeps them on one line; the actions grid track is pinned to minmax(360px, 2fr) above, wide enough to hold both pills side-by-side for the longest translated labels, so they never wrap AND never overflow onto the preceding "Auto-push…" column (the flexible fr columns absorb the shrink instead). */ body.ed_pro .stores_wrap .delete_btn_div .table-zindex-btn.edpro_store_actions{ display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: nowrap; } /* Pills never shrink and stay on a single line (no stacking, no text-wrap). */ body.ed_pro .stores_wrap .edpro_store_actions .store_action_see_more, body.ed_pro .stores_wrap .edpro_store_actions .store_action_remove{ flex: 0 0 auto; white-space: nowrap; } /* Section header (above title bar): action buttons row */ body.ed_pro .stores_wrap .stores_topline{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } body.ed_pro .stores_wrap .stores_topline_actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } body.ed_pro .stores_wrap .stores_topline_actions .btn{ border-radius: 8px !important; height: 40px; padding: 8px 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; } /* Expand block (when user clicks See More) — keep legacy contents visible but neutralise legacy chrome */ /* The legacy inline-expand panel under each row is replaced by a modal on EDPRO. Hide it everywhere on this page — the JS click handler routes the same data to #storeDetailsModal instead. The element is NOT removed because storeList.php is shared with other servers; we only suppress its display under .stores_wrap and reuse its rendered HTML to populate the modal. */ body.ed_pro .stores_wrap .table_dropdown_area{ display: none !important; } /* "No store found" empty state */ body.ed_pro .stores_wrap .no_product_found{ background: transparent; border-radius: 16px; padding: 48px 24px; } body.ed_pro .stores_wrap .no_product_found p{ color: var(--stores-text-muted) !important; font-size: 14px; margin: 0; } /* Responsive: collapse grid into single-column rows on small screens */ @media (max-width: 991px) { body.ed_pro .stores_wrap .stores_th{ display: none; } body.ed_pro .stores_wrap .table_list_item .d-md-flex, body.ed_pro .stores_wrap .table_list_item .d-lg-flex{ display: flex !important; flex-direction: column; align-items: stretch; padding: 12px !important; gap: 4px; } body.ed_pro .stores_wrap .table_list_item .d-md-flex > .col, body.ed_pro .stores_wrap .table_list_item .d-md-flex > [class^="col-"], body.ed_pro .stores_wrap .table_list_item .d-md-flex > [class*=" col-"], body.ed_pro .stores_wrap .table_list_item .d-lg-flex > .col, body.ed_pro .stores_wrap .table_list_item .d-lg-flex > [class^="col-"], body.ed_pro .stores_wrap .table_list_item .d-lg-flex > [class*=" col-"]{ padding: 5px 0; min-height: 0; width: 100% !important; } /* Reveal the inline field labels (hidden on desktop) as the left column */ body.ed_pro .stores_wrap .table_list_item .d-md-none{ display: flex !important; } /* …except the redundant "Actions" label above the buttons */ body.ed_pro .stores_wrap .table_list_item .delete_btn_div .d-md-none{ display: none !important; } body.ed_pro .stores_wrap .table_list_item .d-md-none .font-weight-normal{ color: var(--stores-text-muted); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.084px; } /* Each cell's inner row → two columns: label | value */ body.ed_pro .stores_wrap .table_list_item .d-md-flex > .col > .row, body.ed_pro .stores_wrap .table_list_item .d-md-flex > [class*="col-"] > .row{ display: flex; flex-wrap: nowrap; align-items: center; width: 100%; } body.ed_pro .stores_wrap .table_list_item .d-md-flex > .col > .row > .col, body.ed_pro .stores_wrap .table_list_item .d-md-flex > [class*="col-"] > .row > .col{ flex: 1 1 0; min-width: 0; max-width: 50%; } /* Actions cell: buttons span the full width side-by-side at the bottom */ body.ed_pro .stores_wrap .table_list_item .delete_btn_div{ margin-top: 6px; } body.ed_pro .stores_wrap .delete_btn_div .row, body.ed_pro .stores_wrap .delete_btn_div .col{ justify-content: center; width: 100%; } body.ed_pro .stores_wrap .delete_btn_div .store_action_see_more, body.ed_pro .stores_wrap .delete_btn_div .store_action_remove{ flex: 1 1 0; min-width: 0; } } /* ===== Dark mode mirror ===== */ body.ed_pro.dark_mode .stores_wrap{ --stores-bg: #0A091B; --stores-card: #14132A; --stores-text: #FFFFFF; --stores-text-strong: #FFFFFF; --stores-text-muted: rgba(255, 255, 255, 0.55); --stores-text-subtle: rgba(255, 255, 255, 0.4); --stores-text-faint: rgba(255, 255, 255, 0.6); --stores-border: rgba(255, 255, 255, 0.10); --stores-border-soft: rgba(255, 255, 255, 0.10); --stores-row-bg: #14132A; --stores-row-icon-bg: #1F1D3A; background-color: #0A091B; color: #FFFFFF; } body.ed_pro.dark_mode .stores_wrap .stores_title{ color: #FFFFFF; } /* Store filter dropdown (deleted-store-filter Select2): the light rule hardcodes a white selection box (#FFFFFF), so it never flips in dark mode. Mirror the dark card surface; the rendered text already resolves to var(--stores-text) = white. */ body.ed_pro.dark_mode .stores_wrap .stores_actions .slect2-mod, body.ed_pro.dark_mode .stores_wrap .stores_actions .slect2-mod_new, body.ed_pro.dark_mode .stores_wrap .stores_actions .slect2-mod .select2-container--default .select2-selection--single{ background: var(--stores-card) !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: none !important; } body.ed_pro.dark_mode .stores_wrap .stores_actions .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-color: rgba(255, 255, 255, 0.6) transparent transparent transparent !important; } body.ed_pro.dark_mode .stores_wrap .table_list_item{ background: #14132A !important; } body.ed_pro.dark_mode .stores_wrap .store_cell_text .fs_16{ color: #FFFFFF; } body.ed_pro.dark_mode .stores_wrap .store_cell_text .text_secondary{ color: rgba(255, 255, 255, 0.55) !important; } body.ed_pro.dark_mode .stores_wrap .table_list_item .border.rounded-pill, body.ed_pro.dark_mode .stores_wrap .table_list_item .col .fw-normal, body.ed_pro.dark_mode .stores_wrap .table_list_item .col .fs_14.fw-normal{ color: #FFFFFF; } body.ed_pro.dark_mode .stores_wrap .store_action_see_more, body.ed_pro.dark_mode #client_orders_body .store_action_see_more, body.ed_pro.dark_mode #custom_orders_template .store_action_see_more{ background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.02) 100%); border-color: rgba(255, 255, 255, 0.10); color: #FFFFFF; } body.ed_pro.dark_mode #client_orders_body .store_action_see_more:hover, body.ed_pro.dark_mode #custom_orders_template .store_action_see_more:hover{ color: #FFFFFF; filter: brightness(1.12); } body.ed_pro.dark_mode .stores_wrap .store_action_remove{ background: rgba(223, 28, 65, 0.14); border-color: rgba(223, 28, 65, 0.32); color: #FB3748; } body.ed_pro.dark_mode .stores_wrap .store_action_remove:hover{ border-color: #FB3748; color: #FB3748; filter: brightness(1.08); } body.ed_pro.dark_mode .stores_wrap .delete_btn_div .delete_btn{ background: #14132A !important; border-color: rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.85) !important; } /* Restore icon SVG hard-codes a dark stroke (#292D32) and doesn't use currentColor, so it's invisible on the dark button — force it white in dark mode. */ body.ed_pro.dark_mode .stores_wrap .delete_btn_div .recover-btn svg path{ stroke: #FFFFFF !important; } body.ed_pro.dark_mode .stores_wrap .stores_th_cell{ color: rgba(255, 255, 255, 0.55); } body.ed_pro.dark_mode .stores_wrap .no_product_found{ background: #14132A; } body.ed_pro.dark_mode .stores_wrap .no_product_found p{ color: rgba(255, 255, 255, 0.55) !important; } body.ed_pro.dark_mode .stores_wrap .table_dropdown_area{ background: #14132A; } body.ed_pro.dark_mode .stores_wrap .table_dropdown_area .border_divs, body.ed_pro.dark_mode .stores_wrap .table_dropdown_area .new_design_list{ border-color: rgba(255, 255, 255, 0.10) !important; background: #1F1D3A; color: #FFFFFF; } /* ---- Marquee (header_scroller.php) — sit below the header bar. The legacy `.marquee_sec / .top_marquee_sec` is a dark strip with white text and an "Explore Now" outlined button. On EDPRO we keep the same structure but round the corners, give it our card spacing, and pull it below the absolute-positioned action bar. */ body.ed_pro .stores_wrap .marquee_sec{ margin-top: 0; margin-bottom: 16px; } body.ed_pro .stores_wrap .marquee_sec .top_marquee_sec{ background: #001229; color: #FFFFFF; border-radius: 16px; padding: 12px 20px; margin: 0 !important; box-shadow: 0 1px 2px rgba(82, 88, 102, 0.06); } body.ed_pro .stores_wrap .marquee_sec .top_marquee_sec .scroll_text, body.ed_pro .stores_wrap .marquee_sec .top_marquee_sec .scroll_container-header{ color: #FFFFFF; } body.ed_pro .stores_wrap .marquee_sec .top_marquee_sec .explore_now .btn{ background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.4); color: #FFFFFF; border-radius: 12px; font-weight: 500; } body.ed_pro .stores_wrap .marquee_sec .top_marquee_sec .explore_now .btn:hover, body.ed_pro .stores_wrap .marquee_sec .top_marquee_sec .explore_now .btn:focus{ background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.6); color: #FFFFFF; } /* ---- Store details modal (Figma 78:5595). Replaces the inline expand. White rounded card, 730px wide, light-gray field cards inside. The outer Bootstrap `.modal` is restyled rather than replaced so the show/hide animation and backdrop work as-is. We use the Bootstrap default z-index (1050) so the legacy `#add_country_modal` / `#cancel_modal` / `#deleteModal` (also at 1050) can stack on top via later-in-DOM order when they're triggered from inside this modal. */ body.ed_pro .modal.store_details_modal{ z-index: 1050; } /* When the legacy success / error / delete modals fire from inside the store details modal, force them above. Their backdrop also needs to sit above the store-details backdrop so the success card pops cleanly. `.storeTimezoneModal` is opened by the Add/Change Timezone button, which now lives inside the store-details modal — without this it renders BEHIND the store-details modal/backdrop and is invisible/unclickable. */ body.ed_pro #add_country_modal, body.ed_pro #cancel_modal, body.ed_pro #deleteModal, body.ed_pro #cancelDisputeConfirmModal, body.ed_pro .storeTimezoneModal{ z-index: 1090 !important; } /* Only the 2nd+ backdrop (when a success/error modal stacks on top of the store details modal) needs an elevated z-index. The single-backdrop case must stay at Bootstrap's default 1040 so it renders BEHIND the modal — otherwise its `backdrop-filter: blur(5px)` blurs the modal content. */ body.ed_pro .modal-backdrop ~ .modal-backdrop{ z-index: 1085 !important; } body.ed_pro .modal.store_details_modal .modal-dialog{ max-width: 730px; width: calc(100% - 32px); } body.ed_pro .store_details_modal_content{ background: #FFFFFF !important; border-radius: 16px !important; border: none !important; padding: 15px; box-shadow: 0 40px 96px -8px rgba(88, 92, 95, 0.2); font-family: 'Onest', 'Inter', system-ui, -apple-system, sans-serif; color: #010F24; } body.ed_pro .store_details_modal_header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; } body.ed_pro .store_details_modal_title{ font: 400 24px/32px 'Onest', 'Inter', system-ui, sans-serif; letter-spacing: -0.24px; color: #010F24; margin: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.ed_pro .store_details_modal_close{ width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: #525866; border-radius: 8px; cursor: pointer; flex: 0 0 32px; padding: 0; transition: background-color 0.2s ease; } body.ed_pro .store_details_modal_close:hover, body.ed_pro .store_details_modal_close:focus{ background: rgba(1, 15, 36, 0.04); outline: none; } body.ed_pro .store_details_modal_body{ max-height: 70vh; overflow-y: auto; padding-right: 4px; } body.ed_pro .store_details_modal_loading{ padding: 24px 0; } /* Inline add-country result message (replaces the old stacked success/error modals) */ body.ed_pro .store_details_modal_body .edpro_store_toast{ margin: 0 0 12px; font-size: 13px; border-radius: 8px; } body.ed_pro .store_details_modal_error{ padding: 24px; text-align: center; color: rgba(1, 15, 36, 0.6); } /* ---- Modal body: restyle the cloned .table_dropdown_area to Figma 95:5420. Legacy `style.css:553` hides .table_dropdown_area with `display:none` (only un-hidden by `.expandtable`). Force it visible inside the modal, then remove the legacy two-column layout, hide edit chrome, and turn each field span into a soft-gray rounded card with label-on-top / value-below. Products row gets its own card treatment underneath. */ body.ed_pro .store_details_modal_body .table_dropdown_area{ display: block !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; } /* Stack the legacy two columns vertically — Store Details first, Products second (Figma layout, regardless of viewport width). */ body.ed_pro .store_details_modal_body .product_info_container{ display: block !important; } body.ed_pro .store_details_modal_body .product_info_container > [class*="col-"]{ width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; margin: 0 0 16px 0; } body.ed_pro .store_details_modal_body .product_info_container > [class*="col-"]:last-child{ margin-bottom: 0; } /* Strip the white card chrome around Store Details + Products columns. Each field will become its own card; the columns are just spacers now. */ body.ed_pro .store_details_modal_body .border_divs, body.ed_pro .store_details_modal_body .new_design_list{ background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; height: auto !important; } /* Legacy "Store Details" / "Products" header row inside each column. Keep the label text (restyle to Figma 16px) but hide the edit icons. */ body.ed_pro .store_details_modal_body .border_divs > .d-flex.justify-content-between.align-items-center, body.ed_pro .store_details_modal_body .new_design_list > .p-3{ padding: 0 !important; margin: 0 0 12px 0 !important; background: transparent !important; border: none !important; } body.ed_pro .store_details_modal_body .border_divs > .d-flex > .fs_14, body.ed_pro .store_details_modal_body .new_design_list > .p-3 > .fs_14{ font: 400 16px/19px 'Onest', 'Inter', system-ui, sans-serif !important; letter-spacing: -0.16px !important; color: #010F24 !important; text-transform: none; } body.ed_pro .store_details_modal_body .edit_store_details, body.ed_pro .store_details_modal_body #edit_X, body.ed_pro .store_details_modal_body .table_order_list[id^="edit_"]{ display: none !important; } /* Each field row inside #display_X becomes a Figma soft-gray card. Layout: label on top (16px muted), value below (18px dark). */ body.ed_pro .store_details_modal_body .table_order_list{ display: flex !important; flex-direction: column !important; gap: 12px; padding: 0 !important; background: transparent !important; } body.ed_pro .store_details_modal_body .table_order_list > span.d-flex{ display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 4px !important; background: #F9F9F9 !important; border-radius: 16px !important; padding: 15px !important; margin: 0 !important; } body.ed_pro .store_details_modal_body .table_order_list > span.d-flex > span.col-4, body.ed_pro .store_details_modal_body .table_order_list > span.d-flex > .col-4{ font: 400 16px/24px 'Onest', 'Inter', system-ui, sans-serif !important; letter-spacing: -0.176px !important; color: rgba(1, 15, 36, 0.5) !important; width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; padding: 0 !important; } body.ed_pro .store_details_modal_body .table_order_list > span.d-flex > span.col, body.ed_pro .store_details_modal_body .table_order_list > span.d-flex > .col{ font: 400 18px/24px 'Onest', 'Inter', system-ui, sans-serif !important; letter-spacing: -0.27px !important; color: #010F24 !important; padding: 0 !important; flex: 1 1 auto !important; width: auto !important; max-width: 100% !important; overflow-wrap: anywhere; word-break: break-word; } body.ed_pro .store_details_modal_body .table_order_list a{ color: #010F24 !important; text-decoration: underline; cursor: pointer; } body.ed_pro .store_details_modal_body .table_order_list a:hover{ color: #375DFB !important; } /* Countries field — Figma 95:6238 layout: label on top, then a single row with circle-flag + country name chips (no pill bg) on the left and a "+Add Country" link right-aligned. The JS hook in client_chatapp.php moves the legacy "Add country to store" select into this same span so one row holds both the chips and the add-link. */ body.ed_pro .store_details_modal_body [id^="store_country"]{ list-style: none; padding: 0; margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; } body.ed_pro .store_details_modal_body .badge-mod{ display: inline-flex !important; align-items: center; gap: 8px; background: transparent !important; border: none !important; color: #0A091B !important; font: 400 16px/24px 'Onest', 'Inter', system-ui, sans-serif !important; letter-spacing: -0.176px; border-radius: 0; padding: 0 !important; margin: 0 !important; } /* Real flag image inside each chip — circle-clipped via border-radius + object-fit so the local square SVG (assets/flags/flags/1x1/) renders as a circle matching Figma 95:6238. */ body.ed_pro .country-flag{ display: inline-block; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #EFF2F6; border: 1px solid rgba(1, 15, 36, 0.06); overflow: hidden; vertical-align: middle; } /* Generic gray dot fallback when the country isn't in COUNTRY_CODES. */ body.ed_pro .country-flag-na{ background: #EFF2F6 url("data:image/svg+xml;utf8,") no-repeat center / 16px 16px; } /* Country option in the Select2 dropdown — flag + name on one line. Scoped to .country-option (unique to this dropdown), NOT to the modal, because the dropdown renders on via default dropdownParent. */ body.ed_pro .select2-results__option .country-option, body.ed_pro .select2-results__option .country-option *{ display: inline-flex; align-items: center; gap: 8px; font: 400 14px/22px 'Onest', 'Inter', system-ui, sans-serif; color: #0A091B; } body.ed_pro .select2-results__option .country-flag{ width: 22px; height: 22px; flex: 0 0 22px; } body.ed_pro .select2-results__option:has(.country-option){ padding: 8px 12px; } body.ed_pro .select2-results__option--highlighted:has(.country-option){ background: rgba(55, 93, 251, 0.08) !important; color: #0A091B !important; } /* Hide the value=0 "+Add Country" prompt from the open list — it's a placeholder, not a real choice (the closed control still shows it as the label). Also drop the mismatched green "selected" check that the base theme adds. */ body.ed_pro .edpro-country-dd .select2-results__option:not(:has(.country-option)){ display: none !important; } body.ed_pro .edpro-country-dd .select2-results__option::after, body.ed_pro .edpro-country-dd .select2-results__option[aria-selected="true"]::after{ content: none !important; display: none !important; background: none !important; } /* Make the Countries field's value column span the full width AND lay out the chips + add-country select as a single horizontal row. */ body.ed_pro .store_details_modal_body .table_order_list > span.d-flex:has([id^="store_country"]){ flex-direction: column !important; } body.ed_pro .store_details_modal_body .table_order_list > span.d-flex:has([id^="store_country"]) > .col{ display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap; width: 100% !important; } /* storeList.php wraps the "Add country" select in an extra span.d-flex (no JS move here), which otherwise lands it on its own line below the flag chips. Pull that wrapper onto the chips row, sized to content and right-aligned. */ body.ed_pro .store_details_modal_body .table_order_list > span.d-flex:has([id^="store_country"]) > .col > .d-flex{ flex: 0 0 auto !important; width: auto !important; margin-left: auto !important; padding: 0 !important; } body.ed_pro .store_details_modal_body .table_order_list > span.d-flex:has([id^="store_country"]) > .col > .d-flex .store_dropdown_area{ width: auto !important; } /* Countries value cell (marker class added in storeList.php) — flex row that keeps the flag chips and the "+Add Country" control on ONE line without any :has() / parent-flex dependency. The chips list must NOT grow, or it fills the line and pushes the add-country control onto the next row. */ body.ed_pro .store_details_modal_body .edpro_country_cell{ display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap; gap: 12px; width: 100% !important; } body.ed_pro .store_details_modal_body .edpro_country_cell > [id^="store_country"]{ flex: 0 1 auto !important; } /* The JS moves the add-country control (a .store_dropdown_area div) into this cell; the older markup may still have it wrapped in a .d-flex. Handle both. */ body.ed_pro .store_details_modal_body .edpro_country_cell > .d-flex, body.ed_pro .store_details_modal_body .edpro_country_cell > .store_dropdown_area{ flex: 0 0 auto !important; width: auto !important; margin-left: auto !important; padding: 0 !important; } body.ed_pro .store_details_modal_body .edpro_country_cell > .d-flex .store_dropdown_area{ width: auto !important; margin-left: 0 !important; } /* Shrink the add-country control to its text. The legacy markup gives the wrappers w-100 and Select2 sets an inline pixel width from the original full width, so the control is wide enough to wrap onto the next line — force the whole select2/select chain to size to content. */ body.ed_pro .store_details_modal_body .edpro_country_cell .store_dropdown_area, body.ed_pro .store_details_modal_body .edpro_country_cell .slect2-mod, body.ed_pro .store_details_modal_body .edpro_country_cell .select2, body.ed_pro .store_details_modal_body .edpro_country_cell .select2-container, body.ed_pro .store_details_modal_body .edpro_country_cell .select2-selection, body.ed_pro .store_details_modal_body .edpro_country_cell .select2-selection--single, body.ed_pro .store_details_modal_body .edpro_country_cell select.form-control, body.ed_pro .store_details_modal_body .edpro_country_cell .form-control.select2{ width: auto !important; min-width: 0 !important; } /* "Add country to store" — restyle the Select2 widget as a simple "+Add Country" text link sitting on the far right of the Countries row. */ body.ed_pro .store_details_modal_body .store_dropdown_area{ background: transparent !important; border: none !important; width: auto !important; margin-left: auto !important; flex: 0 0 auto; } body.ed_pro .store_details_modal_body .slect2-mod, body.ed_pro .store_details_modal_body .slect2-mod_new{ background: transparent !important; border: none !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; outline: none !important; } body.ed_pro .store_details_modal_body .slect2-mod .select2-container, body.ed_pro .store_details_modal_body .slect2-mod .select2-container--default, body.ed_pro .store_details_modal_body .select2-selection--single{ background: transparent !important; border: none !important; height: auto !important; min-height: 0 !important; box-shadow: none !important; outline: none !important; } body.ed_pro .store_details_modal_body .select2-selection__rendered{ font: 400 16px/24px 'Onest', 'Inter', system-ui, sans-serif !important; color: rgba(1, 15, 36, 0.5) !important; padding: 0 !important; line-height: 24px !important; height: auto !important; } body.ed_pro .store_details_modal_body .select2-selection__arrow, body.ed_pro .store_details_modal_body .select2-selection__arrow b{ display: none !important; } /* Hide the placeholder chevron / select wrapper extras so the visible element is just the "+Add Country" text. */ body.ed_pro .store_details_modal_body .slect2-mod_new::after, body.ed_pro .store_details_modal_body .slect2_icon_AuroMetalSaurusToWhite::after, body.ed_pro .store_details_modal_body .storebtn::after{ display: none !important; } body.ed_pro .store_details_modal_body .select2-selection__rendered{ cursor: pointer; } body.ed_pro .store_details_modal_body .select2-selection__rendered:hover{ color: #375DFB !important; } /* The Select2 dropdown itself (popped out of the modal's stacking context via dropdownParent) needs to sit above the modal. */ body.ed_pro .modal.store_details_modal .select2-dropdown{ z-index: 1100 !important; border-radius: 12px; border-color: rgba(1, 15, 36, 0.1); box-shadow: 0 12px 40px rgba(82, 88, 102, 0.18); } /* Make the option list properly scrollable. `overscroll-behavior: contain` stops wheel events from bubbling up to the modal body and scrolling it instead. Explicit max-height and overflow ensure long lists scroll. */ body.ed_pro .modal.store_details_modal .select2-dropdown .select2-results, body.ed_pro .modal.store_details_modal .select2-results__options{ max-height: 280px !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } body.ed_pro .modal.store_details_modal .select2-search--dropdown{ padding: 8px; } body.ed_pro .modal.store_details_modal .select2-search--dropdown .select2-search__field{ border-radius: 8px; border: 1px solid rgba(1, 15, 36, 0.1); padding: 6px 10px; font: 400 14px/20px 'Onest', 'Inter', system-ui, sans-serif; } /* Products section: each product row is a Figma white card with thin `rgba(1,15,36,0.05)` border, 12px radius. The AJAX response uses the legacy `.table_list_item` row scaffold. */ body.ed_pro .store_details_modal_body #client_product_body, body.ed_pro .store_details_modal_body [id^="store_product_list_"]{ display: flex; flex-direction: column; gap: 4px; background: transparent !important; padding: 0 !important; } body.ed_pro .store_details_modal_body .table_list_item{ background: #FFFFFF !important; border: 1px solid rgba(1, 15, 36, 0.05) !important; border-radius: 12px !important; padding: 8px 6px !important; margin: 0 !important; box-shadow: none !important; margin-bottom: 6px !important; } .ed_pro .store_page_info_list .table_image { background: none; border-radius: 0; } body.ed_pro .store_details_modal_body .table_list_item img, body.ed_pro .store_details_modal_body .table_list_item .product-img-placeholder{ width: 48px !important; /* height: 48px !important; */ border-radius: 6px !important; background: #EFF2F6 !important; object-fit: cover; box-shadow: 0 40px 96px -8px rgba(88, 92, 95, 0.2); } body.ed_pro .store_details_modal_body .table_list_item .col, body.ed_pro .store_details_modal_body .table_list_item p, body.ed_pro .store_details_modal_body .table_list_item span:not(.badge-mod){ font: 400 14px/20px 'Onest', 'Inter', system-ui, sans-serif !important; letter-spacing: -0.084px; color: #010F24 !important; } body.ed_pro .store_details_modal_body .table_list_item .fw-medium, body.ed_pro .store_details_modal_body .table_list_item .fw-semibold{ font-weight: 500 !important; color: #010F24 !important; } /* The "no products" empty-state inside the modal */ body.ed_pro .store_details_modal_body .no_product_found{ background: #F9F9F9; border-radius: 16px; padding: 32px; text-align: center; color: rgba(1, 15, 36, 0.5); border: none; } /* Dark-mode mirror */ body.ed_pro.dark_mode .store_details_modal_content{ background: #14132A !important; color: #FFFFFF; } body.ed_pro.dark_mode .store_details_modal_title{ color: #FFFFFF; } body.ed_pro.dark_mode .store_details_modal_close{ color: rgba(255, 255, 255, 0.7); } body.ed_pro.dark_mode .store_details_modal_close:hover{ background: rgba(255, 255, 255, 0.08); color: #FFFFFF; } body.ed_pro.dark_mode .store_details_modal_body .table_list_item{ background: rgba(255, 255, 255, 0.04) !important; color: #FFFFFF; } body.ed_pro.dark_mode .store_details_modal_body .table_list_item .col, body.ed_pro.dark_mode .store_details_modal_body .table_list_item p, body.ed_pro.dark_mode .store_details_modal_body .table_list_item span:not(.badge-mod), body.ed_pro.dark_mode .store_details_modal_body a{ /* !important + the same selector list as the light rule (which uses #010F24 !important) so the product titles flip to white. The red %/green % keep their own .saller_percent colour (a separate div), so they're untouched. */ color: #FFFFFF !important; } body.ed_pro.dark_mode .store_details_modal_body .table_list_item .fw-medium, body.ed_pro.dark_mode .store_details_modal_body .table_list_item label{ color: rgba(255, 255, 255, 0.5) !important; } /* Store-detail field rows (Store Name / Domain / Alias / Tracking URL / Countries). The light theme gives each a #F9F9F9 card with dark #010F24 text — both invisible on the dark modal. Flip the card surface and text to the dark palette. */ body.ed_pro.dark_mode .store_details_modal_body .table_order_list > span.d-flex{ background: rgba(255, 255, 255, 0.04) !important; } body.ed_pro.dark_mode .store_details_modal_body .table_order_list > span.d-flex > span.col, body.ed_pro.dark_mode .store_details_modal_body .table_order_list > span.d-flex > .col{ color: #FFFFFF !important; } body.ed_pro.dark_mode .store_details_modal_body .table_order_list > span.d-flex > span.col-4, body.ed_pro.dark_mode .store_details_modal_body .table_order_list > span.d-flex > .col-4{ color: rgba(255, 255, 255, 0.5) !important; } body.ed_pro.dark_mode .store_details_modal_body .border_divs > .d-flex > .fs_14, body.ed_pro.dark_mode .store_details_modal_body .new_design_list > .p-3 > .fs_14{ color: #FFFFFF !important; } body.ed_pro.dark_mode .store_details_modal_body .table_order_list a{ color: #FFFFFF !important; } body.ed_pro.dark_mode .store_details_modal_body .table_order_list a:hover{ color: #5E8BFF !important; } /* Country chips (flag + name) sit on the dark card — recolour the name text. */ body.ed_pro.dark_mode .store_details_modal_body .badge-mod{ color: #FFFFFF !important; } body.ed_pro.dark_mode .country-flag{ background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); } /* In-modal country picker (Select2): the light rule paints a white selection box. */ body.ed_pro.dark_mode .store_details_modal_body .slect2-mod, body.ed_pro.dark_mode .store_details_modal_body .slect2-mod_new, body.ed_pro.dark_mode .store_details_modal_body .select2-selection--single{ background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.10) !important; } body.ed_pro.dark_mode .store_details_modal_body .select2-selection__rendered{ color: #FFFFFF !important; } body.ed_pro.dark_mode .store_details_modal_body .select2-selection__arrow b{ border-color: rgba(255, 255, 255, 0.6) transparent transparent transparent !important; } /* Country-picker dropdown panel (renders inside the modal): dark option text + borders. */ body.ed_pro.dark_mode .select2-results__option .country-option, body.ed_pro.dark_mode .select2-results__option .country-option *{ color: #FFFFFF !important; } body.ed_pro.dark_mode .modal.store_details_modal .select2-dropdown{ border-color: rgba(255, 255, 255, 0.12); } body.ed_pro.dark_mode .modal.store_details_modal .select2-search--dropdown .select2-search__field{ border-color: rgba(255, 255, 255, 0.12); color: #FFFFFF; } .bgColorEdPro { background-color: #EFF2F6; } .new_design_th {font-size: 12px;padding-bottom: 12px;padding-top: 12px;background: var(--GhostWhite);color: #71717A; border-radius: 8px 8px 0 0 ;} .new_design_th_xl{position: sticky; top: 78px; z-index: 100;} .new_design_list .table_list_item {border-bottom: 1px solid var(--Platinum); border-radius: 16px; color: var(--BlackToWhite); margin: 4px 0px;} .dark_mode .new_design_list .table_list_item, .dark_mode.client_new_design select.form-control {border-color: #E4E4E737 !important;border: 1px solid #FFFFFF38 !important;background: var(--edpro-card) !important;} .new_design_list .table_list_item:last-child{border-bottom: 0px; border-radius: 16px !important; } body.ed_pro .products_wrap{ --stores-bg: #EFF2F6; --stores-card: #FFFFFF; --stores-text: #010F24; --stores-text-muted: rgba(1, 15, 36, 0.5); --stores-border: #E2E4E9; --stores-row-bg: #FFFFFF; --stores-primary: #375DFB; background-color: var(--stores-bg); color: var(--stores-text); font-family: 'Onest', 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: calc(100vh - 80px); padding-top: 80px; padding-bottom: 24px; } /* Defensive: suppress any in-flow marquee inside the EDPRO products page */ /* body.ed_pro .products_wrap > .marquee_sec, */ /* body.ed_pro .products_wrap .marquee_sec{ display: none !important; } */ /* Page title row (mirrors .stores_title) */ body.ed_pro .products_wrap .products_title{ font-family: 'Onest', sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; letter-spacing: -0.24px; color: #010F24; margin: 0; } body.ed_pro .products_wrap .product_header_sec{ margin-top: 0 !important; } /* Drop the section-edge padding so the title aligns to the content gutter */ body.ed_pro .products_wrap .product_header_sec > .px-3, body.ed_pro .products_wrap .content-full-width{ padding-left: 0 !important; padding-right: 0 !important; } /* ---- Filter / toolbar row --------------------------------------------- Search input, status select2, custom store dropdown, sort + active-store dropdowns. Reuse the stores action-dropdown look: 40px tall, white fill, #E2E4E9 border, 8px radius, subtle shadow. */ body.ed_pro .products_wrap .store_search_area .input_group_icon .form-control, body.ed_pro .products_wrap .store_search_area .input_group_icon input{ background: #FFFFFF !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; height: 40px !important; box-shadow: 0 1px 2px 0 rgba(82, 88, 102, 0.06) !important; color: var(--stores-text) !important; font-size: 14px; } body.ed_pro .products_wrap .store_search_area .input_icon svg path{ stroke: #525866; } /* status select2 + custom store dropdown button + sort/active-store buttons */ body.ed_pro .products_wrap .slect2-mod, body.ed_pro .products_wrap .slect2-mod_new, body.ed_pro .products_wrap .slect2-mod .select2-container--default .select2-selection--single, body.ed_pro .products_wrap .cust_select2-btn, body.ed_pro .products_wrap .store_dropdown_new .btn.btn-border{ background: #FFFFFF !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; height: 40px !important; min-height: 40px; box-shadow: 0 1px 2px 0 rgba(82, 88, 102, 0.06) !important; color: var(--stores-text) !important; display: inline-flex; align-items: center; font-size: 14px; outline: 0 !important; } body.ed_pro .products_wrap .slect2-mod .select2-container--default .select2-selection--single{ min-width: 180px; } body.ed_pro .products_wrap .select2-container--default .select2-selection--single .select2-selection__rendered{ color: var(--stores-text) !important; line-height: 40px !important; /* padding: 0 12px !important; */ font-size: 14px; } body.ed_pro .products_wrap .select2-container--default .select2-selection--single .select2-selection__arrow{ height: 40px !important; right: 6px; } body.ed_pro .products_wrap .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-color: #525866 transparent transparent transparent !important; } body.ed_pro .products_wrap .store_dropdown_new .btn.btn-border:hover, /* body.ed_pro .products_wrap .cust_select2-btn:hover{ border-color: var(--stores-primary) !important; color: var(--stores-primary) !important; } */ body.ed_pro .products_wrap .store_dropdown_new .btn.btn-border svg path{ stroke: #525866; } /* Toolbar rows: keep search + filter dropdowns on one vertically-centred line */ body.ed_pro .products_wrap .left_content_section1 .d-xl-flex, body.ed_pro .products_wrap .left_content_section1 .d-flex.flex-wrap{ align-items: center; } body.ed_pro .products_wrap .store_search_area .input_group_icon .form-control{ width: 100%; } /* Action button group (Select all / Cancel fulfilment / Change price / Export) */ body.ed_pro .products_wrap .button_group_left .btn.btn-border, body.ed_pro .products_wrap .button_group_left .new_header_btn{ background: #FFFFFF !important; border: 1px solid #E2E4E9 !important; border-radius: 8px !important; color: #000 !important; box-shadow: 0 1px 2px 0 rgba(82, 88, 102, 0.06) !important; font-size: 14px; } /* body.ed_pro .products_wrap .button_group_left .btn.btn-border:hover, body.ed_pro .products_wrap .button_group_left .new_header_btn:hover{ border-color: var(--stores-primary) !important; color: var(--stores-primary) !important; } */ /* ---- List header row ---------------------------------------------------- On EDPRO the header row already carries .bgColorEdPro (set in product_list_template.php). Mirror the stores .stores_th column-header look: a transparent strip with muted 14/20 Onest labels above the cards. .bgColorEdPro alone is just a bg colour; here we override it transparent. */ body.ed_pro .products_wrap .product_list_head.bgColorEdPro, body.ed_pro .products_wrap .bestseller_product_list_head.bgColorEdPro{ /* Solid surface bg (was transparent) so list rows scroll cleanly beneath the sticky header; visually identical since it matches the page surface. */ background: var(--stores-bg) !important; border: 0 !important; /* Bestseller (out-of-stock requote) header hard-codes .table_list_item, whose base rule (style.css) carries border-radius:15px + a white Snowflake bg — that's the mismatched rounded-corner notch. Flatten it to match the regular products / stores EDPRO header strip. */ border-radius: 0 !important; /* 12px horizontal padding to match the data rows' .table_list_item (padding: 4px 12px), so the header labels line up with the card columns. */ padding: 8px 12px !important; /* margin-bottom: 4px !important; */ /* Sticky column header (same pattern as .new_design_th_xl used on the other list pages). EDPRO's fixed header is taller than the default 78px — the layout reserves content-page padding-top:100px for it — so clear that, and use the standard z-index:100 sticky layer. */ position: sticky; top: 100px; z-index: 100; } body.ed_pro .products_wrap .product_list_head .text_secondary, body.ed_pro .products_wrap .bestseller_product_list_head .text_secondary{ font-family: 'Onest', sans-serif; font-size: 14px !important; line-height: 20px; font-weight: 400 !important; letter-spacing: -0.084px; color: var(--stores-text-muted) !important; } /* Header column cells must mirror the data row's column padding + min-width (see .table_list_item > .col below), otherwise the column titles don't line up with the cards and each column can't keep to its own width. */ body.ed_pro .products_wrap .product_list_head .d-flex > .col, body.ed_pro .products_wrap .product_list_head .d-flex > [class*="col-"], body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > [class*="col-"]{ /* 8px (was 19px) so the 10 condtn13 columns share more room and the whole table fits without horizontal scroll, matching PrimeFlow's compact cells. Kept equal to the data-row cell padding below so header labels stay aligned over their values. */ padding: 8px 8px; min-width: 0; align-self: center; overflow: hidden; text-overflow: ellipsis; /* white-space: nowrap; */ } body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto{ margin-left: auto; flex: 0 0 auto; } /* ============================================================ ED_PRO — slim + compact the action column so the whole 10-column table fits on screen with NO horizontal scroll, mirroring the PrimeFlow render of this SAME markup (product_list_template.php, condtn13 layout: checkbox, Product, Store, Status, Time left, Lowest bid, Total sold, Total cost, Fulfilled by, action). PrimeFlow fits it because its trailing action cell is slim; EDPRO's was pinned to a fixed, non-shrinking 320px of bordered pills — the only column wide enough to push the row past the viewport. We keep EDPRO's EXACT action arrangement — "Talk in chat" stays on the LEFT with the See more / Show logs group stacked to its RIGHT (NOT re-stacked or moved) — and just make the pills compact and pin the column to a slimmer 200px. That frees ~120px so the flexible columns (product / store / status / time / bid / sold / cost) shrink to fit around it; the flex row can then never exceed its container, so there is structurally no horizontal scroll. Header + rows share the same action width so every column edge stays aligned. xl-only: below 1200px the row un-flexes into a stacked label:value card and the header row is hidden. */ @media (min-width: 1200px){ /* Action column sizes to its buttons — See More + Talk in chat (plus Show logs under admin impersonation) — laid out in ONE horizontal row to match the Figma (node 26:4298/26:4308). Header + rows carry the same buttons, so a content width keeps every column edge aligned. */ body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto, body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto{ flex: 0 0 auto !important; width: max-content !important; min-width: 240px !important; max-width: none !important; } /* 2-column grid: See More on the LEFT (vertically centred); Talk in chat above Show logs on the RIGHT — matches the admin-impersonation screenshot. Client view (no Show logs) collapses to [See More] [Talk in chat] side by side like the Figma. Only positioning changes here — pill styling and the 8px gaps are unchanged. */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto > .d-flex, body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto > .d-flex, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto > .d-flex{ display: grid !important; grid-template-columns: auto auto; justify-content: flex-end !important; justify-items: end; /* Column gap only (8px). NO row-gap: when there's no Show logs (bestseller / client view) the 2nd grid row is empty, and a row-gap would make See More — which spans both rows and is vertically centred — sit ~4px below Talk in chat. The 8px vertical gap for the 3-button case is put on Show logs via margin-top instead, so both layouts stay aligned. */ gap: 0 8px !important; } /* Ungroup See More / Show logs so each is placed independently in the grid. */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto > .d-flex > .oli_btn, body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto > .d-flex > .oli_btn, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto > .d-flex > .oli_btn{ display: contents !important; } /* See More — left column, spanning both right-hand rows, vertically centred. */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto .oli_btn .btn_border_secondary:not(.show_logs), body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto .oli_btn .btn_border_secondary:not(.show_logs), body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto .oli_btn .btn_border_secondary:not(.show_logs){ grid-column: 1; grid-row: 1 / span 2; align-self: center; } /* No Show logs (bestseller / client product view) = a simple 2-button row. Keep See More on the SAME single row as Talk in chat instead of spanning a phantom 2nd row (whose auto-row height would otherwise pull See More a couple px below Talk in chat). :has() scopes this to grids that lack a Show logs button; the 3-button admin layout keeps the row span above. */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto > .d-flex:not(:has(.show_logs)) .oli_btn .btn_border_secondary:not(.show_logs), body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto > .d-flex:not(:has(.show_logs)) .oli_btn .btn_border_secondary:not(.show_logs), body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto > .d-flex:not(:has(.show_logs)) .oli_btn .btn_border_secondary:not(.show_logs){ grid-row: 1; align-self: center; } /* Stop Fulfilment (client view): Talk in Chat is not shown — only the invisible .btn-link.height_0 placeholder — so move the lone See More into the RIGHT column (grid-column 2, where Talk in Chat sits in normal rows) per the Figma / red-rectangle mock. Scoped to the 2-button client view via :not(:has(.show_logs)); the admin / team-leader / support 3-button layout (which shows Show logs) is left unchanged. */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto > .d-flex:not(:has(.show_logs)):has(> .btn-link.height_0) .oli_btn .btn_border_secondary:not(.show_logs){ grid-column: 2; } /* Talk in chat — right column, top row. */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto > .d-flex > .btn-link, body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto > .d-flex > .btn-link, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto > .d-flex > .btn-link{ grid-column: 2; grid-row: 1; padding: 0 !important; } /* Show logs — right column, below Talk in chat (admin impersonation only). */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto .oli_btn .show_logs, body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto .oli_btn .show_logs, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto .oli_btn .show_logs{ grid-column: 2; grid-row: 2; } /* The 8px gap between Talk in chat and Show logs is carried by Talk in chat's BOTTOM margin (not Show logs' top margin). This way, in Stop Fulfilment the Talk-in-chat is an invisible .height_0 placeholder that gets NO margin (:not(.height_0)), so the gap collapses and Show logs stays vertically aligned with See More. Scoped to :has(.show_logs) so the client 2-button view — which has no 2nd row — is unaffected. */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto > .d-flex:has(.show_logs) > .btn-link:not(.height_0), body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto > .d-flex:has(.show_logs) > .btn-link:not(.height_0), body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto > .d-flex:has(.show_logs) > .btn-link:not(.height_0){ margin-bottom: 8px; } /* See More / Show logs pill — Figma node 26:4308: gradient fill (inherited from the base .btn_border_secondary rule), 1px border, px-20 py-12, radius 16, 14/20 Onest Regular, single line. */ body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto .oli_btn .btn-border.btn_border_secondary, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto .oli_btn .btn-border.btn_border_secondary, body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto .oli_btn .btn-border.btn_border_secondary{ white-space: nowrap !important; flex: 0 0 auto !important; width: auto !important; padding: 12px 20px !important; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; border-radius: 16px !important; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Header Talk-in-chat placeholder mirrors the row chat pill's box so the header action column measures the SAME max-content width as the rows (the header placeholder span lacks the .btn_border_secondary pill classes, so without this it would measure narrower and shift the header's other column edges out of line with the rows). It stays opacity-0/invisible — only its width counts. */ body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto > .d-flex > .btn-link > span, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto > .d-flex > .btn-link > span{ white-space: nowrap !important; flex: 0 0 auto !important; width: auto !important; padding: 10px 16px !important; border: 1px solid transparent !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* Data-row Talk-in-chat placeholder (no-chat statuses, e.g. "Stop fulfilment") renders an invisible .btn-link whose span lacks the .btn_border_secondary pill classes, so it measures narrower than a real pill. Because the action grid is right-anchored with content-sized columns, that narrower 2nd column pushes See More right, out of line with the other rows. Mirror the row pill's box here so the placeholder reserves the SAME width. Stays opacity-0/invisible — only its width counts; the visible pill's span.btn_border_secondary (below) is more specific and keeps its own styling. */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto > .d-flex > .btn-link > span{ white-space: nowrap !important; flex: 0 0 auto !important; width: auto !important; padding: 12px 20px !important; border: 1px solid transparent !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* Talk in chat pill — Figma node 26:4309: white fill, soft #e2e4e9 border, radius 16, soft shadow, px-16 py-10, 14/20 Onest Medium #525866. */ body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto > .d-flex > .btn-link span.btn_border_secondary, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto > .d-flex > .btn-link span.btn_border_secondary, body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto > .d-flex > .btn-link span.btn_border_secondary{ white-space: nowrap !important; flex: 0 0 auto !important; width: auto !important; background: var(--edpro-card) !important; background-image: none !important; border: 1px solid #e2e4e9 !important; border-radius: 16px !important; box-shadow: 0 1px 2px 0 rgba(82, 88, 102, 0.06) !important; padding: 12px 20px !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; color: #525866 !important; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* Dark mode: keep the chat pill on the surface card colour with a soft translucent border + muted light label. */ body.ed_pro.dark_mode .products_wrap .product_list_head .d-flex > .col-auto > .d-flex > .btn-link span.btn_border_secondary, body.ed_pro.dark_mode .products_wrap .bestseller_product_list_head .d-flex > .col-auto > .d-flex > .btn-link span.btn_border_secondary, body.ed_pro.dark_mode .products_wrap .new_design_list .table_list_item > .col-auto > .d-flex > .btn-link span.btn_border_secondary{ border-color: rgba(255, 255, 255, 0.14) !important; color: rgba(255, 255, 255, 0.75) !important; box-shadow: none !important; } /* ---- List header strip height ------------------------------------------ The header carries opacity-0 See more / Talk in chat / Show logs pills purely to reserve the action column's WIDTH so its edge lines up with the data rows. Their HEIGHT (a ~96px stacked grid) otherwise inflates the whole header strip, and align-items:center centres the labels inside it — leaving a large empty band between the labels and the first row (Figma 26:2951 has the first row immediately under the labels). Zero out the placeholders' height / vertical padding / row-gap so the strip collapses to the label height. Width is unaffected — it comes from the horizontal padding + text — so column alignment with the data rows is preserved. */ body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto > .d-flex, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto > .d-flex{ row-gap: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto .btn, body.ed_pro .products_wrap .product_list_head .d-flex > .col-auto .btn > span, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto .btn, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col-auto .btn > span{ height: 0 !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top-width: 0 !important; border-bottom-width: 0 !important; line-height: 0 !important; overflow: hidden !important; } } /* max_w150 columns: cap at 150px on both header and rows so the numeric columns (sold / cost / bid / time) keep an identical, contained width. */ body.ed_pro .products_wrap .product_list_head .d-flex > .col.max_w150, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col.max_w150, body.ed_pro .products_wrap .new_design_list .table_list_item > .col.max_w150{ max-width: 100px; } /* ---- Rebalance the flexible columns (xl / desktop) ------------------------ The three uncapped flex columns are Product Name, Store and Status. Product Name (2nd child, after the checkbox) gets a MODERATE bounded width (140–220px, plain flex-grow:1 — NOT the old flex-grow:3 that hogged the row and left the name on one line in a wide, mostly-empty column) so a typical name wraps onto a 2nd line with the .lc_2 clamp. Status (4th child) gets a real min-width so its long text wraps by WORD over a few normal lines instead of being starved to ~1 char wide and breaking one character per line. The numeric columns stay capped at 150px; nothing else is fixed, so the row still fits with no scroll. Product Name = 2nd child and Status = 4th child (checkbox, Product, Store, Status, …) in the header .d-flex and in each row, in BOTH product_list_template.php and the bestseller variant — so :nth-child() targets them and keeps each header label aligned over its row values. xl-only: below 1200px the row stacks into cards (handled separately) and this must not apply. */ @media (min-width: 1200px){ /* Product Name column: moderate, bounded width so the name wraps to ~2 lines. */ body.ed_pro .products_wrap .product_list_head .d-flex > .col:nth-child(2), body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col:nth-child(2), body.ed_pro .products_wrap .new_design_list .table_list_item > .col:nth-child(2){ flex-grow: 1 !important; min-width: 140px; max-width: 220px; } /* Status column: real min-width so long status text wraps by word, not one character per line (no overflow-wrap:anywhere here — that is limited to the product name only). */ body.ed_pro .products_wrap .product_list_head .d-flex > .col:nth-child(4), body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col:nth-child(4), body.ed_pro .products_wrap .new_design_list .table_list_item > .col:nth-child(4){ min-width: 150px; } /* As the product column narrows on desktop, the name must BREAK onto a 2nd line (up to the .lc_2 two-line clamp) instead of staying on one line and truncating. The name box is a flex item beside the fixed thumbnail; give it min-width:0 so it can shrink, and force the text to wrap, so it flows onto the second line as the width tightens. The 2-line clamp is kept, so very long names still show 2 lines + ellipsis (matching PrimeFlow). */ body.ed_pro .products_wrap .new_design_list .table_list_item .client-info .d-flex > div:not(.table_image){ flex: 1 1 auto; min-width: 0; } body.ed_pro .products_wrap .new_design_list .table_list_item .client-info .lc_2, body.ed_pro .products_wrap .new_design_list .table_list_item .client-info .lc_1{ white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; } } /* Below xl the row un-flexes (d-xl-flex → block) and each cell stacks as a label:value pair. The 150px cap above would keep the numeric columns (time / bid / sold / cost) narrow, cramming their value against the label while the full-width cells (product / store / status / fulfilled) show the value in a proper column — so they misalign. Drop the cap on small screens so every stacked cell is full-width and the values line up. */ @media (max-width: 1199px) { body.ed_pro .products_wrap .new_design_list .table_list_item > .col.max_w150{ max-width: 100% !important; } } /* Mobile / card view: action buttons match the reference (PrimeFlow) layout — Talk in chat on the LEFT (vertically centred), See more / Show logs stacked on the RIGHT — instead of the full-width vertical stack. Auto widths so the pills size to their labels. */ @media (max-width: 1199px) { body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto > .d-flex{ display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 16px !important; } /* Talk in chat: shrink to its label, on the left. */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto > .d-flex > .btn-link{ flex: 0 0 auto !important; width: auto !important; padding: 0 !important; } /* See more / Show logs stay grouped, stacked vertically on the right. */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto > .d-flex > .oli_btn{ flex: 0 0 auto !important; flex-direction: column !important; align-items: stretch !important; width: auto !important; gap: 8px !important; } /* Pills size to content (not full-width). */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto .oli_btn .btn-border.btn_border_secondary{ width: auto !important; } } /* ---- Small-screen stacked cards: keep the PRODUCT NAME fully visible ------ Below 1200px the row un-flexes into label:value cards. In the product cell the name span carries .lc_2 / .lc_1 (-webkit-line-clamp + overflow:hidden), which in the narrow card clips the name down to nothing. Let the thumbnail keep its size and let the name take the remaining width and wrap over as many lines as it needs, so it is always readable (never clipped/hidden). .lc_1 / .lc_2 appear ONLY on the product name (product_list_template.php), so this is surgical to that cell; EDPRO-only; no effect at >=1200px where the desktop table renders. */ @media (max-width: 1199px) { body.ed_pro .products_wrap .new_design_list .table_list_item .client-info .lc_1, body.ed_pro .products_wrap .new_design_list .table_list_item .client-info .lc_2{ display: block; -webkit-line-clamp: unset; -webkit-box-orient: initial; overflow: visible; white-space: normal; word-break: break-word; min-width: 0; } /* Thumbnail stays its fixed size; the name box beside it takes the rest of the row and is free to shrink/wrap (min-width:0) rather than push out. */ body.ed_pro .products_wrap .new_design_list .table_list_item .client-info .table_image{ flex: 0 0 auto; } body.ed_pro .products_wrap .new_design_list .table_list_item .client-info .d-flex > div:not(.table_image){ flex: 1 1 auto; min-width: 0; } } /* ---- Card rows ---------------------------------------------------------- Each .table_list_item becomes a white rounded card row with a 4px gap. */ /* The actual rows live in the inner .new_design_list (product_listing_sec > pls_area > container-fluid > .new_design_list); the legacy float-left/w-100 on those wrappers is what was shoving the pagination into a vertical sliver, so drop the floats and apply the inter-row gap on the real row container. */ body.ed_pro .products_wrap #client_product_body, body.ed_pro .products_wrap .product_listing_sec, body.ed_pro .products_wrap .pls_area, body.ed_pro .products_wrap .pls_area > .container-fluid{ float: none !important; width: 100% !important; } body.ed_pro .products_wrap .pls_area > .container-fluid > .new_design_list{ display: flex; flex-direction: column; gap: 4px; } body.ed_pro .products_wrap .new_design_list .table_list_item{ background: var(--stores-row-bg) !important; border: 0 !important; /* border-radius: 12px !important; */ margin: 0 !important; padding: 4px 12px !important; box-shadow: none; transition: background-color 0.12s ease, box-shadow 0.12s ease; } .dark_mode .top_marquee_sec {background-color: var(--edpro-card) !important;} body.ed_pro .products_wrap .new_design_list .table_list_item:hover{ /* background: #FAFBFC !important; */ box-shadow: 0 1px 2px 0 rgba(82, 88, 102, 0.06); } /* Cells: row min-height parity with stores; vertically centre content */ body.ed_pro .products_wrap .new_design_list .table_list_item.d-xl-flex{ min-height: 64px; } /* Reset the Bootstrap .col/.container/.row nesting inside each product cell so columns sit flush, line up with the header strip, and the row stays compact. Each cell is .col > .container > .row > .col; the un-reset .container max-width + .row/.col gutters were inflating row height and overflowing the row to the right (which collapsed the pagination). Mirrors the stores nesting reset. */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col, body.ed_pro .products_wrap .new_design_list .table_list_item > [class*="col-"]{ /* 8px (was 12px) horizontal — equal to the header cell padding above so the 10 condtn13 columns fit on screen with no horizontal scroll and each value stays aligned under its header label. */ padding: 8px 8px; min-width: 0; align-self: center; } body.ed_pro .products_wrap .new_design_list .table_list_item .container{ max-width: none !important; width: 100%; padding: 0 !important; margin: 0 !important; } body.ed_pro .products_wrap .new_design_list .table_list_item .container > .row{ margin: 0 !important; width: 100%; } body.ed_pro .products_wrap .new_design_list .table_list_item .container > .row > .col, body.ed_pro .products_wrap .new_design_list .table_list_item .container > .row > [class*="col-"]{ padding: 0 !important; min-width: 0; } /* Action column: pin to the right and never overflow the row */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col-auto{ margin-left: auto; flex: 0 0 auto; } body.ed_pro .products_wrap .new_design_list .table_list_item .oli_btn{ gap: 8px; } /* Typography inside cells → Onest 14/20, EDPRO text colour */ body.ed_pro .products_wrap .new_design_list .table_list_item .fs_14{ font-family: 'Onest', sans-serif; color: var(--stores-text); letter-spacing: -0.084px; } body.ed_pro .products_wrap .new_design_list .table_list_item .text_secondary{ color: var(--stores-text-muted) !important; } /* ---- Column alignment ----------------------------------------------------- Left-align every header label AND every data cell so each column header sits directly above its row values. Applies to all six product views, which share this markup: All Quotes / Action Needed / Open Quotations / New Messages (product_list_template.php) and Bestseller / Out-of-stock requotes (bestseller/product_list_template.php). Header↔row column widths already match (same .col / .max_w150 / .col-xl-2 set, identical 12px cell padding); the drift was the data values inheriting centre alignment / carrying an inner indent, so pin everything hard-left and strip the inner Bootstrap gutter. The trailing action column (.col-auto, right-pinned buttons) is intentionally excluded. */ body.ed_pro .products_wrap .product_list_head .d-flex > .col, body.ed_pro .products_wrap .product_list_head .d-flex > [class*="col-"]:not(.col-auto), body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > .col, body.ed_pro .products_wrap .bestseller_product_list_head .d-flex > [class*="col-"]:not(.col-auto), body.ed_pro .products_wrap .new_design_list .table_list_item > .col, body.ed_pro .products_wrap .new_design_list .table_list_item > [class*="col-"]:not(.col-auto){ text-align: left; } /* Inner Bootstrap nesting in each data cell (.col > .container > .row > .col): zero the gutters and force the value flush-left so it lines up at the same 12px column edge as the header label above it. The hidden d-xl-none mobile label is display:none on xl, so the visible value .col takes the full width. */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col .container, body.ed_pro .products_wrap .new_design_list .table_list_item > [class*="col-"]:not(.col-auto) .container{ padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100%; } body.ed_pro .products_wrap .new_design_list .table_list_item > .col .container > .row, body.ed_pro .products_wrap .new_design_list .table_list_item > [class*="col-"]:not(.col-auto) .container > .row{ margin: 0 !important; width: 100%; text-align: left; justify-content: flex-start; } body.ed_pro .products_wrap .new_design_list .table_list_item > .col .container > .row > .col, body.ed_pro .products_wrap .new_design_list .table_list_item > .col .container > .row > [class*="col-"], body.ed_pro .products_wrap .new_design_list .table_list_item > [class*="col-"]:not(.col-auto) .container > .row > .col, body.ed_pro .products_wrap .new_design_list .table_list_item > [class*="col-"]:not(.col-auto) .container > .row > [class*="col-"]{ padding: 0 !important; min-width: 0; text-align: left; justify-content: flex-start; } /* Value wrappers (product info, status badge, time, bid, sold, cost, fulfilled) must start at the left edge — no centring. */ body.ed_pro .products_wrap .new_design_list .table_list_item > .col .container > .row > .col > .d-flex, body.ed_pro .products_wrap .new_design_list .table_list_item > [class*="col-"]:not(.col-auto) .container > .row > .col > .d-flex, body.ed_pro .products_wrap .new_design_list .table_list_item .pls_time, body.ed_pro .products_wrap .new_design_list .table_list_item .pls_bid{ justify-content: flex-start !important; text-align: left; } /* Status badge → EDPRO pill design for ALL statuses (Figma 26:4382): a coloured pill + leading icon, mapped per status-style family (badge-warning / -success / -danger / -info from the shared status styles). */ body.ed_pro .products_wrap .new_design_list .table_list_item .badge-mod{ display: inline-flex; align-items: center; gap: 4px; font-family: 'Onest', sans-serif; font-size: 12px !important; font-weight: 500 !important; line-height: 16px; /* letter-spacing: -0.072px; */ border-radius: 6px; padding: 4px 8px; } body.ed_pro .products_wrap .new_design_list .table_list_item .badge-mod::before{ font-family: "Font Awesome 5 Free", "FontAwesome"; font-weight: 900; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; } /* Bidding / Requote / New price → orange + clock */ body.ed_pro .products_wrap .new_design_list .table_list_item .badge-mod.badge-warning{ background: #FEF3EB !important; color: #F17B2C !important; } body.ed_pro .products_wrap .new_design_list .table_list_item .badge-mod.badge-warning::before{ content: "\f017"; } /* Quotation done / Accepted → green + check-circle */ body.ed_pro .products_wrap .new_design_list .table_list_item .badge-mod.badge-success{ background: #E6F9F0 !important; color: #1FAA5C !important; } body.ed_pro .products_wrap .new_design_list .table_list_item .badge-mod.badge-success::before{ content: "\f058"; } /* Not done / Rejected / Stopped → red + times-circle */ body.ed_pro .products_wrap .new_design_list .table_list_item .badge-mod.badge-danger{ background: #FEECEB !important; color: #F04438 !important; } body.ed_pro .products_wrap .new_design_list .table_list_item .badge-mod.badge-danger::before{ content: "\f057"; } /* Awaiting / Add country / New variant / Special request … → blue + info-circle */ body.ed_pro .products_wrap .new_design_list .table_list_item .badge-mod.badge-info{ background: #EFF4FF !important; color: #375DFB !important; } body.ed_pro .products_wrap .new_design_list .table_list_item .badge-mod.badge-info::before{ content: "\f05a"; } /* "See More" / "Show Log" outline buttons → EDPRO neutral outline pill */ /* See More / Show Log row buttons → the stores "See more" gradient pill (mirrors body.ed_pro .stores_wrap .store_action_see_more) for visual parity. */ body.ed_pro .products_wrap .new_design_list .table_list_item .btn-border.btn_border_secondary{ display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(90deg, rgba(1,15,36,0.02) 0%, rgba(1,15,36,0.12) 50.5%, rgba(1,15,36,0.02) 100%) !important; border: 1px solid rgba(1, 15, 36, 0.1) !important; border-radius: 12px !important; color: #010F24 !important; box-shadow: none !important; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.084px; white-space: nowrap; transition: filter 0.12s ease; } body.ed_pro .products_wrap .new_design_list .table_list_item .btn-border.btn_border_secondary:hover{ color: #010F24 !important; filter: brightness(0.96); } /* "Use in chat" link → EDPRO accent */ body.ed_pro .products_wrap .new_design_list .table_list_item .btn_link .selected{ color: var(--stores-primary) !important; } /* Checkbox in the leading cell */ body.ed_pro .products_wrap .new_design_list .table_list_item .form-check-input:checked{ background-color: var(--stores-primary); border-color: var(--stores-primary); } body.ed_pro .products_wrap #client_product_pagination{ clear: both; float: none; width: 100%; } /* Empty state */ body.ed_pro .products_wrap .no_product_found{ background: transparent !important; border-radius: 16px; padding: 48px 24px; } body.ed_pro .products_wrap .no_product_found p{ color: var(--stores-text-muted) !important; font-size: 14px; margin: 0; } /* Responsive: below xl the rows already stack (no d-xl-flex). Just keep the card surface and stop the header strip from showing the desktop labels. */ @media (max-width: 1199px){ body.ed_pro .products_wrap .product_list_head, body.ed_pro .products_wrap .bestseller_product_list_head{ display: none !important; } } /* ---- Product logs / quotation-history page (.product_logs_page) ---------- White cards + quotation/history DataTables on the EDPRO products surface. Reuses the products_wrap --stores-* tokens. */ body.ed_pro .products_wrap .card{ background: var(--stores-card) !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; } body.ed_pro .products_wrap .card .card-header{ background: transparent !important; border: 0 !important; padding: 16px 16px 0; } body.ed_pro .products_wrap .card .card-title{ font-family: 'Onest', sans-serif; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--stores-text); margin: 0; } body.ed_pro .products_wrap .product_header_opp h3, body.ed_pro .products_wrap .product_header_heading{ font-family: 'Onest', sans-serif; color: var(--stores-text); } body.ed_pro .products_wrap .status_badge{ font-size: 14px; color: var(--stores-text-muted); } /* Quotation / history tables */ body.ed_pro .products_wrap .quotation_req_history, body.ed_pro .products_wrap .quotation_details{ font-family: 'Onest', sans-serif; color: var(--stores-text); } body.ed_pro .products_wrap .quotation_req_history thead th, body.ed_pro .products_wrap .quotation_details thead th{ background: transparent !important; color: var(--stores-text-muted) !important; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.084px; border-top: 0; border-bottom: 1px solid var(--stores-border); white-space: nowrap; } body.ed_pro .products_wrap .quotation_req_history tbody td, body.ed_pro .products_wrap .quotation_details tbody td{ font-size: 14px; line-height: 20px; color: var(--stores-text); border-top: 1px solid var(--stores-border); vertical-align: middle; } /* DataTables controls (length select, search, info, paginate) */ body.ed_pro .products_wrap .dataTables_wrapper .dataTables_length select, body.ed_pro .products_wrap .dataTables_wrapper .dataTables_filter input{ background: #FFFFFF; border: 1px solid var(--stores-border); border-radius: 8px; height: 36px; padding: 0 10px; color: var(--stores-text); outline: 0; } body.ed_pro .products_wrap .dataTables_wrapper .dataTables_info, body.ed_pro .products_wrap .dataTables_wrapper .dataTables_length, body.ed_pro .products_wrap .dataTables_wrapper .dataTables_filter{ color: var(--stores-text-muted); font-size: 14px; } body.ed_pro .products_wrap .dataTables_wrapper .dataTables_paginate .paginate_button{ border-radius: 8px !important; border: 1px solid var(--stores-border) !important; background: #FFFFFF !important; color: #525866 !important; padding: 4px 10px !important; margin: 0 2px; } body.ed_pro .products_wrap .dataTables_wrapper .dataTables_paginate .paginate_button.current{ background: #375DFB !important; border-color: #375DFB !important; color: #FFFFFF !important; } /* Breathing room so the DataTables pagination row and the Activity button aren't flush against the card bottom. */ body.ed_pro .products_wrap .dataTables_wrapper{ padding-bottom: 12px; } body.ed_pro .products_wrap .product_activity{ margin-bottom: 12px; } /* ===== Dark mode mirror ===== */ body.ed_pro.dark_mode .products_wrap{ --stores-bg: #0A091B; --stores-card: #14132A; --stores-text: #FFFFFF; --stores-text-muted: rgba(255, 255, 255, 0.55); --stores-border: rgba(255, 255, 255, 0.10); --stores-row-bg: #14132A; background-color: #0A091B; color: #FFFFFF; } body.ed_pro.dark_mode .products_wrap .products_title{ color: #FFFFFF; } /* body.ed_pro.dark_mode .products_wrap .new_design_list .table_list_item{ background: #14132A !important; } */ body.ed_pro.dark_mode .products_wrap .new_design_list .table_list_item .fs_14{ color: #FFFFFF; } body.ed_pro.dark_mode .products_wrap .new_design_list .table_list_item .text_secondary{ color: rgba(255, 255, 255, 0.55) !important; } body.ed_pro.dark_mode .products_wrap .store_search_area .input_group_icon .form-control, body.ed_pro.dark_mode .products_wrap .slect2-mod .select2-container--default .select2-selection--single, body.ed_pro.dark_mode .products_wrap .cust_select2-btn, body.ed_pro.dark_mode .products_wrap .store_dropdown_new .btn.btn-border, body.ed_pro.dark_mode .products_wrap .button_group_left .btn.btn-border, body.ed_pro.dark_mode .products_wrap .new_design_list .table_list_item .btn-border.btn_border_secondary{ background: #14132A !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #FFFFFF !important; } body.ed_pro.dark_mode .products_wrap .product_list_head .text_secondary, body.ed_pro.dark_mode .products_wrap .bestseller_product_list_head .text_secondary{ color: rgba(255, 255, 255, 0.55) !important; } body.ed_pro.dark_mode .products_wrap .no_product_found{ background: #14132A; } body.ed_pro.dark_mode .products_wrap .no_product_found p{ color: rgba(255, 255, 255, 0.55) !important; } /* ============================================================ EDPRO Sidebar (CONDITION_12) — End ============================================================ */ /* ============================================================ EDPRO Order list country flag ============================================================ */ .ed_pro .order_country_flag.fi { width: 26px; /* figma node 7:25404: 26px circular flag */ height: 26px; display: inline-block; margin-right: 4px; vertical-align: middle; background-size: cover; background-position: center; line-height: 1; pointer-events: none; border-radius: 13px; } /* Flag + country text now share one flex cell (.order_country_cell), so they stay aligned together at the value column in both desktop and responsive. */ .ed_pro .order_country_cell { gap: 9px; /* figma: 9px between flag and country text */ min-width: 0; } .ed_pro .order_country_cell .order_country_flag.fi { margin: 0 !important; flex: 0 0 auto; } /*Order list country flag css end*/ /* ============================================================ EDPRO Order detail "See More". ============================================================ */ body.ed_pro .order_sidebar_container .right_details_main { top: 50%; left: 50%; right: auto; width: min(898px, 94vw); /* figma modal width */ height: auto; max-height: 90vh; border-radius: 16px; transform: translate(-50%, -46%) scale(0.98); opacity: 0; visibility: hidden; pointer-events: none; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28); transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease; } body.ed_pro .order_sidebar_container .right_details_main.active { right: auto; transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; pointer-events: auto; } /* Slightly stronger, centered backdrop dim to read as a modal */ body.ed_pro .right_details_overlay { background: rgba(0, 0, 0, 0.45); } @media (max-width: 767px) { body.ed_pro .order_sidebar_container .right_details_main { width: 94vw; max-height: 92vh; } } /* ============================================================ EDPRO Order detail MODAL — Figma card-grid layout + footer. Scoped to .edpro_order_modal (the ED_PRO order-detail template). ============================================================ */ body.ed_pro .edpro_order_modal { padding: 0; display: flex; flex-direction: column; overflow: hidden; /* body scrolls, header/footer stay put */ background: var(--White, #fff); } body.ed_pro .edpro_order_modal .edpro_od_head { padding: 25px 25px 0; /* figma modal padding 25px, no header divider */ border-bottom: 0; flex: 0 0 auto; } body.ed_pro .edpro_order_modal .edpro_od_title { font-size: 24px; /* figma: Onest 400 24/32, -0.01em */ font-weight: 400; line-height: 32px; letter-spacing: -0.01em; color: #010F24; } body.ed_pro .edpro_order_modal .rd_close_btn { display: inline-flex; line-height: 0; opacity: 0.6; transition: opacity 0.2s ease; } body.ed_pro .edpro_order_modal .rd_close_btn:hover { opacity: 1; } body.ed_pro .edpro_order_modal .edpro_od_body { padding: 24px 25px; overflow-y: auto; flex: 1 1 auto; } body.ed_pro .edpro_order_modal .edpro_od_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; /* figma: 12px between cards */ } body.ed_pro .edpro_order_modal .edpro_od_card { background: #F9F9F9; /* figma card */ border-radius: 16px; padding: 15px; min-height: 82px; display: flex; flex-direction: column; justify-content: center; gap: 4px; } body.ed_pro .edpro_order_modal .edpro_od_label { font-size: 16px; /* figma: Onest 400 16/24, -0.011em, muted */ font-weight: 400; line-height: 24px; letter-spacing: -0.011em; color: rgba(1, 15, 36, 0.5); } body.ed_pro .edpro_order_modal .edpro_od_value { font-size: 18px; /* figma: Onest 400 18/24, -0.015em */ font-weight: 400; line-height: 24px; letter-spacing: -0.015em; color: #010F24; word-break: break-word; } body.ed_pro .edpro_order_modal .edpro_od_value a { color: inherit; cursor: pointer; } body.ed_pro .edpro_order_modal .edpro_od_value a:hover { color: #3b6ef6; text-decoration: underline; } body.ed_pro .edpro_order_modal .edpro_od_value .order_country_flag.fi { width: 18px; height: 18px; margin-right: 6px; } /* Status badge inside the modal cards/variants = figma soft chip (not plain text) */ body.ed_pro .edpro_order_modal .edpro_od_value .badge-mod, body.ed_pro .edpro_order_modal .edpro_od_variants .rd_right .badge-mod { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px !important; padding: 4px 8px !important; font-size: 12px !important; /* figma badge: Onest 500 12/16 */ line-height: 16px; font-weight: 500; } body.ed_pro .edpro_order_modal .badge-mod.badge-success { background: #EFFAF6 !important; color: #38C793 !important; } body.ed_pro .edpro_order_modal .badge-mod.badge-warning { background: #FEF3EB !important; color: #F27B2C !important; } body.ed_pro .edpro_order_modal .badge-mod.badge-danger { background: #FDEDF0 !important; color: #DF1C41 !important; } /* Footer — gradient ink pills + one solid blue primary, per figma */ body.ed_pro .edpro_order_modal .edpro_od_footer { padding: 8px 25px 25px; /* figma 25px modal padding, no divider */ border-top: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; /* figma button gap */ flex: 0 0 auto; } body.ed_pro .edpro_order_modal .edpro_od_footer > div { display: contents; /* flatten footer wrapper divs into the flex row */ } /* Visual only — do NOT touch `display`/`width`, so the footer's own show/hide logic (inline display:none + JS .css('display',...)) keeps working exactly like the sidebar. The flex container aligns whatever is visible. */ body.ed_pro .edpro_order_modal .edpro_od_footer .btn { border-radius: 16px !important; /* figma */ padding: 6px 20px !important; font-size: 14px; font-weight: 500; line-height: 20px; height: 44px; white-space: nowrap; margin: 0; /* figma: gradient ink pill (same family as the See More pill) */ background: linear-gradient(90deg, rgba(1,15,36,0.02) 0%, rgba(1,15,36,0.12) 50.5%, rgba(1,15,36,0.02) 100%) !important; border: 1px solid rgba(1, 15, 36, 0.1) !important; color: #010F24 !important; } body.ed_pro .edpro_order_modal .edpro_od_footer .btn:hover { color: #010F24 !important; filter: brightness(0.97); } /* "Other Request" / Special-request = solid figma blue #5EBFFF, white text */ /* body.ed_pro .edpro_order_modal .edpro_od_footer .openSpecialReq, body.ed_pro .edpro_order_modal .edpro_od_footer .requestSpel, body.ed_pro .edpro_order_modal .edpro_od_footer .srRB { background: #5EBFFF !important; border-color: #5EBFFF !important; color: #F9F9F9 !important; } */ body.ed_pro .edpro_order_modal .edpro_od_footer .openSpecialReq:hover, body.ed_pro .edpro_order_modal .edpro_od_footer .requestSpel:hover, body.ed_pro .edpro_order_modal .edpro_od_footer .srRB:hover { color: #FFFFFF !important; filter: brightness(1.04); } /* "Other Request" (special request) = primary gradient pill */ body.ed_pro .edpro_order_modal .edpro_od_footer .dispute_history_, body.ed_pro .edpro_order_modal .edpro_od_footer [class*="dispute_history_"]:empty { display: none; } @media (max-width: 767px) { body.ed_pro .edpro_order_modal .edpro_od_grid { grid-template-columns: 1fr; } body.ed_pro .edpro_order_modal .edpro_od_head, body.ed_pro .edpro_order_modal .edpro_od_body, body.ed_pro .edpro_order_modal .edpro_od_footer { padding-left: 18px; padding-right: 18px; } } /* ============================================================ EDPRO Order detail modal — Order items / variants scroll section ============================================================ */ body.ed_pro .edpro_order_modal .edpro_od_section_title { font-size: 14px; font-weight: 600; color: var(--edpro-text-strong, #0f172a); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } body.ed_pro .edpro_order_modal .edpro_od_section_title.mt_22 { margin-top: 24px; } /* Scrollable list of variant cards (each variant + its tracking/status) */ body.ed_pro .edpro_order_modal .edpro_od_variants { max-height: 320px; overflow-y: auto; padding-right: 6px; margin-bottom: 4px; } body.ed_pro .edpro_order_modal .edpro_od_variants::-webkit-scrollbar { width: 6px; } body.ed_pro .edpro_order_modal .edpro_od_variants::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; } /* Re-skin the reused sidebar variant card inside the modal */ /* Each variant = a 2-column card grid (same look as the customer-info grid). */ body.ed_pro .edpro_order_modal .edpro_od_variants .rd_variant_item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; /* figma: 12px between cells */ background: transparent; padding: 0; margin-bottom: 12px; } body.ed_pro .edpro_order_modal .edpro_od_variants .rd_variant_item:last-child { margin-bottom: 0; } /* status icons / notes / download row -> full-width header above the cards */ body.ed_pro .edpro_order_modal .edpro_od_variants .rd_variant_item .status__div-inline { grid-column: 1 / -1; justify-content: flex-end; } /* turn each label/value row into a card cell (label on top, value below) */ body.ed_pro .edpro_order_modal .edpro_od_variants .rdv_item { display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: center !important; gap: 4px; background: #F9F9F9; /* figma card — same as info cards */ border-radius: 16px; padding: 15px; min-height: 82px; border-bottom: none; margin-bottom: 0px; } body.ed_pro .edpro_order_modal .edpro_od_variants .rdv_item .rd_left, body.ed_pro .edpro_order_modal .edpro_od_variants .rdv_item .rd_right { width: 100%; } body.ed_pro .edpro_order_modal .edpro_od_variants .rdv_item .rd_right { text-align: left !important; } body.ed_pro .edpro_order_modal .edpro_od_variants .rd_left span { font-size: 16px; /* figma label scale */ font-weight: 400; line-height: 24px; letter-spacing: -0.011em; color: rgba(1, 15, 36, 0.5); text-align: left !important; } body.ed_pro .edpro_order_modal .edpro_od_variants .rd_right span { font-size: 18px; /* figma value scale */ font-weight: 400; line-height: 24px; letter-spacing: -0.015em; color: var(--edpro-text-strong, #0f172a); /* token -> #fff in dark */ text-align: left !important; } body.ed_pro .edpro_order_modal .edpro_od_variants .rd_right a.btn-link { color: #25E28F; padding: 0; } body.ed_pro .edpro_od_variants .grid_gap_8 a {color: #25E28F;} /* (variant status badge now uses the shared soft-chip rule above) */ @media (max-width: 767px) { body.ed_pro .edpro_order_modal .edpro_od_variants .rd_variant_item { grid-template-columns: 1fr; } } /* ============================================================ ED_PRO Order-detail modal — DARK MODE `--White` (style.css :root) never flips, so the modal stayed white in the dark theme. Flip the surface, cards, borders, text and the close icon. ============================================================ */ body.ed_pro.dark_mode .edpro_order_modal { background: #14132A !important; --edpro-text-strong: #FFFFFF; /* drives title / value / section-title / variant value */ } body.ed_pro.dark_mode .edpro_order_modal .edpro_od_head, body.ed_pro.dark_mode .edpro_order_modal .edpro_od_footer { border-color: rgba(255, 255, 255, 0.08) !important; } body.ed_pro.dark_mode .edpro_order_modal .edpro_od_card, body.ed_pro.dark_mode .edpro_order_modal .edpro_od_variants .rdv_item { background: #1F1D3A; } body.ed_pro.dark_mode .edpro_order_modal .edpro_od_label, body.ed_pro.dark_mode .edpro_order_modal .edpro_od_variants .rd_left span { color: rgba(255, 255, 255, 0.55); } /* figma title/value use hardcoded light colours — flip them white for dark */ body.ed_pro.dark_mode .edpro_order_modal .edpro_od_title, body.ed_pro.dark_mode .edpro_order_modal .edpro_od_value { color: #FFFFFF !important; } /* footer gradient ink pills -> light-on-dark variant (matches the dark See More) */ body.ed_pro.dark_mode .edpro_order_modal .edpro_od_footer .btn { background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.02) 100%) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important; } /* the solid blue special-request button stays blue in dark (re-asserted after the dark .btn rule so it isn't flattened to the gradient). */ body.ed_pro.dark_mode .edpro_order_modal .edpro_od_footer .openSpecialReq, body.ed_pro.dark_mode .edpro_order_modal .edpro_od_footer .requestSpel, body.ed_pro.dark_mode .edpro_order_modal .edpro_od_footer .srRB { /* background: #5EBFFF !important; border-color: #5EBFFF !important; */ color: #F9F9F9 !important; } /* close (X) icon is a dark glyph — whiten it on the dark surface */ body.ed_pro.dark_mode .edpro_order_modal .rd_close_btn { filter: brightness(0) invert(1); } /* Outline action buttons (Open Dispute / Talk in Chat) — keep an on-theme blue accent on hover instead of turning black/illegible. Both themes. */ body.ed_pro .edpro_order_modal .edpro_od_footer .btn-border:hover, body.ed_pro .edpro_order_modal .edpro_od_footer .btn_border_secondary:hover { color: #375DFB !important; border-color: #375DFB !important; background: transparent !important; } body.ed_pro.dark_mode .edpro_order_modal .edpro_od_footer .btn-border:hover, body.ed_pro.dark_mode .edpro_order_modal .edpro_od_footer .btn_border_secondary:hover { color: #9DB2FF !important; border-color: #6E8BFF !important; background: rgba(255, 255, 255, 0.04) !important; } /* Responsiveness — phones: near-full-width modal, tighter padding, and full-width stacked footer buttons so nothing overflows. */ @media (max-width: 575px) { body.ed_pro .order_sidebar_container .right_details_main { width: 96vw; max-height: 94vh; } body.ed_pro .edpro_order_modal .edpro_od_head, body.ed_pro .edpro_order_modal .edpro_od_body, body.ed_pro .edpro_order_modal .edpro_od_footer { padding-left: 16px !important; padding-right: 16px !important; } body.ed_pro .edpro_order_modal .edpro_od_footer .btn { flex: 1 1 100%; } } /* ============================================================ ED_PRO — design tokens promoted to the whole app. They were scoped to .edpro_dashboard_wrap / .edpro_partnership only, so the order page + its popups had no palette and couldn't flip in dark mode. Now every ed_pro page shares ONE palette, same as the sidebar / stores list. ============================================================ */ body.ed_pro { --edpro-bg: #EFF2F6; --edpro-card: #FFFFFF; --edpro-text: #010F24; --edpro-text-strong: #0A091B; --edpro-text-muted: rgba(1, 15, 36, 0.5); --edpro-border: #EAECF0; --edpro-primary: #375DFB; --edpro-field: #F5F6FA; } body.ed_pro.dark_mode { --edpro-bg: #0A091B; --edpro-card: #14132A; --edpro-text: #FFFFFF; --edpro-text-strong: #FFFFFF; --edpro-text-muted: rgba(255, 255, 255, 0.55); --edpro-border: rgba(255, 255, 255, 0.10); --edpro-field: #1F1D3A; } /* ============================================================ ED_PRO — every popup follows the dark theme. The unscoped `.modal-content{background:var(--White)!important}` (line ~177) forced all ed_pro popups white with no dark override. Flip surface + text + fields. ============================================================ */ body.ed_pro.dark_mode .modal-content, body.ed_pro.dark_mode .edpro_dispute_modal, body.ed_pro.dark_mode .edpro_form_modal { background: var(--edpro-card) !important; border-color: var(--edpro-border) !important; color: var(--edpro-text) !important; } body.ed_pro.dark_mode .modal-content .modal-title, body.ed_pro.dark_mode .modal-content h5, body.ed_pro.dark_mode .modal-content h6, body.ed_pro.dark_mode .modal-content label, body.ed_pro.dark_mode .modal-content .content, body.ed_pro.dark_mode .edpro_dispute_modal #orderDisputeId { color: var(--edpro-text); } body.ed_pro.dark_mode .modal-content .text_secondary, body.ed_pro.dark_mode .modal-content .req, body.ed_pro.dark_mode .modal-content .modal-desc { color: var(--edpro-text-muted) !important; } body.ed_pro.dark_mode .modal-content .close, body.ed_pro.dark_mode .edpro_dispute_modal #orderDisputeId .close { color: var(--edpro-text-muted) !important; } /* Form fields inside dark popups */ body.ed_pro.dark_mode .modal-content input.form-control, body.ed_pro.dark_mode .modal-content textarea.form-control, body.ed_pro.dark_mode .modal-content select.form-control { background: var(--edpro-field) !important; color: var(--edpro-text) !important; border-color: var(--edpro-border) !important; } /* Dispute / special dropdown pills + their value text */ body.ed_pro.dark_mode #raiseDisbuteModal .slect2-mod, body.ed_pro.dark_mode #raiseDisbuteModal .slect2-mod_new, body.ed_pro.dark_mode #raiseDisbuteModal .slect2-mod .select2-container--default .select2-selection--single, body.ed_pro.dark_mode #specialReqModal .slect2-mod, body.ed_pro.dark_mode #specialReqModal .slect2-mod_new, body.ed_pro.dark_mode #specialReqModal .slect2-mod .select2-container--default .select2-selection--single { background: var(--edpro-field) !important; border-color: var(--edpro-border) !important; } body.ed_pro.dark_mode #raiseDisbuteModal .select2-selection__rendered, body.ed_pro.dark_mode #raiseDisbuteModal select.form-control, body.ed_pro.dark_mode #raiseDisbuteModal #dispute_issue_list, body.ed_pro.dark_mode #raiseDisbuteModal #dispute_type_list, body.ed_pro.dark_mode .edpro_form_modal .select2-selection__rendered, body.ed_pro.dark_mode .edpro_form_modal select.form-control { color: var(--edpro-text) !important; } /* Upload dropzone + variant / conversation rows -> dark cards */ body.ed_pro.dark_mode #raiseDisbuteModal .edpro_upload_box.upload-box, body.ed_pro.dark_mode .modal-content .table_list_item { background: var(--edpro-field) !important; border-color: var(--edpro-border) !important; } /* ============================================================ ED_PRO dark mode — PAGE text inputs (e.g. order list search #order_product_search). Base `input.form-control{color:var(--ebonyBlack)}` plus a `:focus{color:var(--ebonyBlack)!important}` painted text near-black (#0A091B) on the dark field (--WhiteBtn #191919), so typed text was invisible — "can't enter / search". Force light text + a themed field. ============================================================ */ body.ed_pro.dark_mode input.form-control, body.ed_pro.dark_mode textarea.form-control, body.ed_pro.dark_mode select.form-control, body.ed_pro.dark_mode input.form-control:hover, body.ed_pro.dark_mode input.form-control:focus, body.ed_pro.dark_mode textarea.form-control:focus { color: var(--edpro-text) !important; } body.ed_pro.dark_mode input.form-control::placeholder, body.ed_pro.dark_mode textarea.form-control::placeholder { color: var(--edpro-text-muted) !important; } body.ed_pro.dark_mode .store_search_area .input_group_icon input, body.ed_pro.dark_mode #order_product_search, body.ed_pro.dark_mode #order_product_search:hover, body.ed_pro.dark_mode #order_product_search:focus { background-color: var(--edpro-field) !important; border-color: var(--edpro-border) !important; } /* ============================================================ ED_PRO dark mode — list FILTER controls (order / disputes / special / custom). The dark filter styling existed only for the dashboard (.edpro_perf_filters); the list pages render filters in .left_content_section1, so they stayed light. Modal dropdowns are outside this container, so they're unaffected. ============================================================ */ body.ed_pro.dark_mode .left_content_section1 .slect2-mod, body.ed_pro.dark_mode .left_content_section1 .slect2-mod_new, body.ed_pro.dark_mode .left_content_section1 .storebtn, body.ed_pro.dark_mode .left_content_section1 .cust_select2-btn, body.ed_pro.dark_mode .left_content_section1 .slect2-mod .select2-container--default .select2-selection--single, body.ed_pro.dark_mode .left_content_section1 .daterange-btn, /* The visible date pill is .datepicker_custom_range (the label); .daterange-btn is the transparent overlay input. Without this, the pill keeps its light bg and reads near-black against the dark row, unlike the sibling select2 filters. */ body.ed_pro.dark_mode .left_content_section1 .datepicker_custom_range, body.ed_pro.dark_mode .left_content_section1 #order_search { background: var(--edpro-card) !important; border-color: var(--edpro-border) !important; color: var(--edpro-text) !important; } body.ed_pro.dark_mode .left_content_section1 .select2-selection__rendered, body.ed_pro.dark_mode .left_content_section1 .cust_select2-btn, body.ed_pro.dark_mode .left_content_section1 .datepicker_custom_range, body.ed_pro.dark_mode .left_content_section1 .daterange-btn { color: var(--edpro-text) !important; } body.ed_pro.dark_mode .left_content_section1 #order_search::placeholder, body.ed_pro.dark_mode .left_content_section1 .cust_select2-btn::placeholder, body.ed_pro.dark_mode .left_content_section1 .daterange-btn::placeholder { color: var(--edpro-text-muted) !important; } /* Date pill, page-wide. The base `.client_new_design .datepicker_custom_range` paints it with --WhiteBtn (#191919) which reads near-black on the dark rows. It appears in different containers per page (.left_content_section1 on orders/custom orders, .header_sec on disputes/special requests), so theme it everywhere in one shot rather than chasing each wrapper. The dashboard's .edpro_perf_filters rule is more specific and keeps its own treatment. */ body.ed_pro.dark_mode .datepicker_custom_range, body.ed_pro.dark_mode .store_calender_area .daterange-btn { background: var(--edpro-card) !important; border-color: var(--edpro-border) !important; color: var(--edpro-text) !important; } /* ============================================================ ED_PRO — Disputes / Special-requests / Invoices date filter. These pages render the picker in .header_sec or .product_header_sec (not .left_content_section1 like orders, nor .edpro_perf_filters like the dashboard). Make the bordered label pill hug its own text so a long custom range like "Jun 03, 2026 - Jul 31, 2026" always stays inside the box — independent of the JS width sizing — and stay aligned with the sibling header buttons. Scoped to these headers so custom orders / orders / dashboard are untouched. ============================================================ */ body.ed_pro .header_sec .store_calender_area .daterange-container, body.ed_pro .product_header_sec .store_calender_area .daterange-container{ display: inline-flex !important; align-items: center; position: relative; width: auto !important; max-width: 100%; vertical-align: middle; } /* The label span carries the visible border (outline_platinum br_8); make it the in-flow box that sizes to its text, with a sensible minimum. */ body.ed_pro .header_sec .store_calender_area .datepicker_custom_range, body.ed_pro .product_header_sec .store_calender_area .datepicker_custom_range{ position: static !important; transform: none !important; width: auto !important; min-width: 152px; white-space: nowrap; display: inline-flex !important; align-items: center; gap: 8px; } /* The input becomes the transparent click overlay covering the pill. */ body.ed_pro .header_sec .store_calender_area .daterange-btn, body.ed_pro .product_header_sec .store_calender_area .daterange-btn{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; opacity: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer !important; z-index: 2; } /* ============================================================ ED_PRO — Date filter pill, page-wide hug-content. The picker lives in .store_calender_area on every page (orders/custom orders use .left_content_section1, headers use .header_sec/.product_header_sec). The base rules + JS size the pill to a fixed width (input width:205px), leaving dead space to the right of short labels like "Till now". Make the bordered label span the in-flow box that sizes to its own text — like the sibling Hold / Shipping-status filters — with the input as a transparent overlay. Excludes .date_svg_arrow (store_date_bar), which needs room for its caret; the dashboard's .edpro_perf_filters picker sits outside .store_calender_area and is untouched. ============================================================ */ body.ed_pro .store_calender_area .daterange-container:not(.date_svg_arrow){ display: inline-flex !important; align-items: center; position: relative; width: auto !important; max-width: 100%; vertical-align: middle; } body.ed_pro .store_calender_area .daterange-container:not(.date_svg_arrow) .datepicker_custom_range{ position: static !important; transform: none !important; width: auto !important; min-width: 0 !important; white-space: nowrap; display: inline-flex !important; align-items: center; gap: 8px; } body.ed_pro .store_calender_area .daterange-container:not(.date_svg_arrow) .daterange-btn{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; opacity: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer !important; z-index: 2; } /* Receipts cards — dark mode. The cards carry the base `bg-white`, which the global `.dark_mode .bg-white` paints with --WhiteBtn (#191919, near-black), while `.ra_button` keeps a light --GhostWhite footer — neither matches the EDPRO dark surface. Re-theme to the EDPRO card token with a coordinated footer and readable text. EDPRO-only + page-scoped. */ body.ed_pro.dark_mode .recipt_page .recipt_area{ background: #14132A !important; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; } body.ed_pro.dark_mode .recipt_page .ra_button{ background: rgba(255, 255, 255, 0.03) !important; border-top: 1px solid rgba(255, 255, 255, 0.08); } body.ed_pro.dark_mode .recipt_page .recipt_area .ra_left, body.ed_pro.dark_mode .recipt_page .recipt_area .ra_right{ color: #FFFFFF; } body.ed_pro.dark_mode .recipt_page .recipt_area .text_secondary{ color: rgba(255, 255, 255, 0.55) !important; } body.ed_pro.dark_mode .recipt_page .recipt_area .link_a{ color: rgba(255, 255, 255, 0.85) !important; } body.ed_pro.dark_mode .recipt_page .recipt_area .link_a svg path{ stroke: rgba(255, 255, 255, 0.85); } body.ed_pro.dark_mode .recipt_page .recipt_area .link_a:hover{ color: #5E8BFF !important; } body.ed_pro.dark_mode .recipt_page .recipt_area .link_a:hover svg path{ stroke: #5E8BFF; } /* select2 selection boxes inside ED_PRO dark popups (e.g. the agent dropdown in the Add-Custom-Order modal #saveCustomOrders, which isn't .edpro_form_modal). */ body.ed_pro.dark_mode .modal-content .select2-container--default .select2-selection--single, body.ed_pro.dark_mode .modal-content .select2-container--default .select2-selection--multiple { background: var(--edpro-field) !important; border-color: var(--edpro-border) !important; } body.ed_pro.dark_mode .modal-content .select2-selection__rendered { color: var(--edpro-text) !important; } /* ===================================================================== ED_PRO — Custom-order detail modal (#getCustomOrders) Theme-match to the order-detail modal. Shell + inputs already come from the global `body.ed_pro .modal-content` rules; this is header/body/footer polish only. Colours are mode-agnostic (mid-tone labels, inherited title, ed_pro-aware .btn-border) so it reads correctly in light AND dark. ===================================================================== */ body.ed_pro #getCustomOrders .modal-header { padding: 20px 24px; border-bottom: 1px solid rgba(128, 128, 128, 0.16); align-items: center; } body.ed_pro #getCustomOrders .modal-title { font-size: 20px; font-weight: 600; } body.ed_pro #getCustomOrders .modal-header .close { opacity: 0.6; text-shadow: none; font-weight: 400; transition: opacity 0.2s ease; } body.ed_pro #getCustomOrders .modal-header .close:hover { opacity: 1; } body.ed_pro #getCustomOrders .modal-body { padding: 20px 24px; } body.ed_pro #getCustomOrders .modal-body .form-group > label, body.ed_pro #getCustomOrders .modal-body .d-flex > label { font-size: 12px; font-weight: 400; color: #94a3b8; } body.ed_pro #getCustomOrders .modal-body .d-flex { margin: 0; padding: 12px 0; border-bottom: 1px solid rgba(128, 128, 128, 0.12); align-items: center; } body.ed_pro #getCustomOrders .modal-body .d-flex:last-of-type { border-bottom: none; } body.ed_pro #getCustomOrders .modal-body .d-flex > label { margin-bottom: 0; } body.ed_pro #getCustomOrders .modal-footer { padding: 16px 24px; border-top: 1px solid rgba(128, 128, 128, 0.16) !important; /* beats Bootstrap .border-0 */ } body.ed_pro #getCustomOrders .modal-footer .btn { border-radius: 999px; padding: 9px 26px; font-size: 14px; line-height: 1.2; } /* ===================================================================== ED_PRO — Success message as a bottom-center TOAST (figma). Success-only: this restyles #successModal (the dedicated success popup); error alerts keep using #error_modal as a centered modal. No JS change — the existing show/hide + .successlabel population still drives it. #successModal markup carries data-backdrop="false" for ed_pro, so there is no dim overlay; pointer-events let page clicks pass through, except the pill. ===================================================================== */ body.ed_pro #successModal[data-backdrop="false"] { pointer-events: none; } body.ed_pro #successModal[data-backdrop="false"] .modal-dialog { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); margin: 0; min-height: 0; width: auto; max-width: calc(100vw - 32px); } body.ed_pro #successModal[data-backdrop="false"] .modal-content { pointer-events: auto; display: flex; flex-direction: row; align-items: center; gap: 12px; width: auto; padding: 12px 18px !important; border-radius: 12px !important; border: 1px solid #E2E4E9 !important; background: #FFFFFF !important; box-shadow: 0 12px 32px rgba(10, 9, 27, 0.16) !important; } body.ed_pro #successModal[data-backdrop="false"] .small_modal_mod { display: flex; flex-direction: row; align-items: center; padding: 0; margin: 0; } body.ed_pro #successModal[data-backdrop="false"] .sucessmsg { display: none; } /* figma toast has no check icon */ body.ed_pro #successModal[data-backdrop="false"] .successlabel { margin: 0; font-size: 14px; font-weight: 500; color: #010F24; white-space: nowrap; } body.ed_pro #successModal[data-backdrop="false"] .toast_close { border: none; background: transparent; cursor: pointer; color: #868C98; font-size: 18px; line-height: 1; padding: 0; margin-left: 4px; } body.ed_pro #successModal[data-backdrop="false"] .toast_close:hover { color: #0A091B; } /* Dark mode — dark pill, light text (matches the other ED_PRO dark modals) */ body.ed_pro.dark_mode #successModal[data-backdrop="false"] .modal-content { background: #14132A !important; border-color: rgba(255, 255, 255, 0.12) !important; } body.ed_pro.dark_mode #successModal[data-backdrop="false"] .successlabel { color: #FFFFFF; } body.ed_pro.dark_mode #successModal[data-backdrop="false"] .toast_close { color: rgba(255, 255, 255, 0.6); } body.ed_pro.dark_mode #successModal[data-backdrop="false"] .toast_close:hover { color: #FFFFFF; } /* ===================================================================== ED_PRO — Open Dispute modal (figma redesign) ===================================================================== */ body.ed_pro #raiseDisbuteModal .modal-dialog { max-width: 416px; /* figma open-dispute modal width */ } body.ed_pro .edpro_dispute_modal { border-radius: 16px; /* figma */ border: none; padding: 24px !important; /* figma 24px */ box-shadow: 0 24px 64px rgba(10, 9, 27, 0.18); font-family: 'Onest', 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Header — centered title, close pinned top-right */ body.ed_pro .edpro_dispute_modal #orderDisputeId { position: relative; justify-content: center; margin-bottom: 22px; font-size: 18px; font-weight: 600; color: #010F24; } body.ed_pro .edpro_dispute_modal #orderDisputeId > span:first-child { text-align: center; } body.ed_pro .edpro_dispute_modal #orderDisputeId .close { position: absolute; top: -4px; right: 0; margin: 0; padding: 0; font-size: 22px; font-weight: 400; color: #868C98; opacity: 1; line-height: 1; } body.ed_pro .edpro_dispute_modal #orderDisputeId .close:hover { color: #0A091B; } /* OVERLAP FIX (ED_PRO only */ body.ed_pro #raiseDisbuteModal #disputeForm > .float-left.btn-block, body.ed_pro #raiseDisbuteModal #disputeForm > .order_mapping_list, body.ed_pro #raiseDisbuteModal #disputeForm > .dispute, body.ed_pro #raiseDisbuteModal #disputeForm > .col-12 { float: none !important; clear: both !important; width: 100% !important; } body.ed_pro #raiseDisbuteModal #disputeForm::after { content: ""; display: block; clear: both; } /* Dropdowns — mirrors the proven ED_PRO store-details-modal select2 pattern. */ body.ed_pro #raiseDisbuteModal .slect2-mod, body.ed_pro #raiseDisbuteModal .slect2-mod_new, body.ed_pro #raiseDisbuteModal .slect2-mod .select2-container--default .select2-selection--single, body.ed_pro #specialReqModal .slect2-mod, body.ed_pro #specialReqModal .slect2-mod_new, body.ed_pro #specialReqModal .slect2-mod .select2-container--default .select2-selection--single { background: #E2E4E9 !important; border: 1px solid #E2E4E9 !important; border-radius: 10px !important; height: 50px !important; box-shadow: none !important; outline: 0 !important; } body.ed_pro #raiseDisbuteModal .slect2-mod .select2-container { width: 100% !important; } body.ed_pro #raiseDisbuteModal .select2-container--default .select2-selection--single .select2-selection__rendered { /* color: #525866 !important; */ font-size: 14px; line-height: 48px !important; padding: 0 28px 0 14px !important; width: 100% !important; } /* Placeholder / value text colour (figma grey) — covers the select2 rendered text AND the native