@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 .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%;}}

/* ******************************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;}
/* 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;}



/* 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(--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 .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;
}
.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;
}
.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;
}

/* === 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;
}
/* 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-<name>` 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: #375DFB !important;
	color: #375DFB !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;
}
/* 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;
	}
}

/* === 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;
}
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;
}

.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: #14132A !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 <p.no_product_found_color> and KPI <h5>. */
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 <p> that directly follows the <h5>, so
   the bestseller's standalone <p> 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: 50px !important;
	height: 50px !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,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !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: 296px !important;
	padding-right: 24px !important;
	background-color: #EFF2F6;
}
body.ed_pro .header, body.ed_pro .new_header{
	padding-left: 296px !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: 296px;
	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 296px !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,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%23ffffff99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !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: 256px;
	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 <img> 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: 256px; 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-x: hidden !important;
	overflow-y: hidden !important;
}

/* 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: 50%; 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: -280px; margin: 0; height: 100vh; border-radius: 0; transition: left 0.25s ease; }
	body.ed_pro .leftside-menu.nav_visible{ left: 0; }
}

/* 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: 16px;
	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; }
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; }

/* 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 !important;
	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 !important;
	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 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 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{
	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 sit in one row, right-aligned, 12px gap */
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;
}

/* 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;
}
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. */
body.ed_pro #add_country_modal,
body.ed_pro #cancel_modal,
body.ed_pro #deleteModal,
body.ed_pro #cancelDisputeConfirmModal{
	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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23647491' stroke-width='1.5'><circle cx='12' cy='12' r='10'/><path d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/></svg>") 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 <body> 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: 20px; color: var(--BlackToWhite); margin: 3px 0px;}
.dark_mode .new_design_list .table_list_item, .dark_mode.client_new_design select.form-control {border-color: #E4E4E737 !important;}
.new_design_list .table_list_item:last-child{border-bottom: 0px; border-radius: 0 0 8px 8px !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: #525866 !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-"]{
	padding: 8px 12px;
	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;
}
/* 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 .new_design_list .table_list_item > .col.max_w150{
	max-width: 150px;
}

/* ---- 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-"]{
	padding: 8px 12px; 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;
}

/* 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: 22px;
    height: 22px;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    line-height: 1;
    pointer-events: none;
	border-radius: 11px;
}
/* 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: 4px;
    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) !important;
}
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 <select> fallback (the Show-dispute solution dropdown is
   rendered as `class="form-control"` without select2). ED_PRO only. */
body.ed_pro #raiseDisbuteModal .select2-selection__rendered,
body.ed_pro #raiseDisbuteModal select.form-control,
body.ed_pro #raiseDisbuteModal #dispute_issue_list,
body.ed_pro #raiseDisbuteModal #dispute_type_list,
body.ed_pro .edpro_form_modal .select2-selection__rendered,
body.ed_pro .edpro_form_modal select.form-control {
    color: #525866 !important;
}
/* Legacy wrapper chevrons overlay the field and block the click — hide them. */
body.ed_pro #raiseDisbuteModal .slect2-mod_new::after,
body.ed_pro #raiseDisbuteModal .slect2_icon_AuroMetalSaurusToWhite::after,
body.ed_pro #raiseDisbuteModal .storebtn::after { display: none !important; }
body.ed_pro #raiseDisbuteModal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
    right: 14px;
    top: 1px;
}
/* Open options panel above the elevated ED_PRO modal stacking. */
body.ed_pro #raiseDisbuteModal .select2-container--open { z-index: 1100 !important; }
body.ed_pro .select2-container--open .select2-dropdown { z-index: 1100 !important; }

/* Product / variant rows — pared back to a clean figma card */
body.ed_pro #raiseDisbuteModal .order_mapping_list .popup-tbl-head, 
body.ed_pro #specialReqModal .order_mapping_list_nl .popup-tbl-head,
body.ed_pro #showReqModal .order_mapping_list .popup-tbl-head,
body.ed_pro #cancelOrderModal .cancel_order_form .popup-tbl-head,
body.ed_pro #raiseDisbuteModal .order_mapping_list label[for=""] { display: none !important; }
body.ed_pro #cancel_orders .small_modal_mod p.font-weight-normal.text-left {
 	margin-bottom: 20px !important;
}
body.ed_pro #raiseDisbuteModal .order_mapping_list .table_list_item, body.ed_pro #cancelOrderModal .cancel_order_form .table_list_item,
body.ed_pro #specialReqModal .order_mapping_list_nl .table_list_item {
    /* background: #FFFFFF !important; */
    border: 1px solid #E2E4E9;
    border-radius: 12px;
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
}
body.ed_pro #raiseDisbuteModal .order_mapping_list .table_list_item .fs_13,
body.ed_pro #specialReqModal .order_mapping_list_nl .table_list_item .fs_13 { font-weight: 500;  }
body.ed_pro #raiseDisbuteModal .order_mapping_list .badge-mod,
body.ed_pro #specialReqModal .order_mapping_list_nl .badge-mod {
    border-radius: 15px;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 500;
}

.client_new_design .daterange-btn {background: transparent;color: transparent;caret-color: transparent;width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;padding: 0;}
.client_new_design .datepicker_custom_range {font-weight: 400;position: relative;display: inline-block;white-space: nowrap;pointer-events: none;color: var(--BlackToWhite);z-index: 2;font-size: 14px;background: var(--WhiteBtn);}
.client_new_design .date_svg_arrow .datepicker_custom_range {padding-right: 32px !important;}

/* Upload drop-zone */
body.ed_pro #raiseDisbuteModal .edpro_upload_box.upload-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1.5px dashed #E2E4E9;
    border-radius: 12px;
    background: #fff;
    padding: 26px 20px;
    margin: 14px 0 4px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
body.ed_pro #raiseDisbuteModal .edpro_upload_box.upload-box:hover {
    border-color: var(--edpro-primary, #375DFB);
    background: #F8FAFF;
}
body.ed_pro #raiseDisbuteModal .edpro_upload_input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
body.ed_pro #raiseDisbuteModal .edpro_upload_icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #F6F8FA;
    color: #525866;
    font-size: 16px;
    margin-bottom: 10px;
}
body.ed_pro #raiseDisbuteModal .edpro_upload_title {
    font-size: 14px;
    font-weight: 500;
    /* color: #0A091B; */
    margin-bottom: 4px;
}
.custProfitArrow, .custom-file label span {
    position: unset;
}
body.ed_pro #raiseDisbuteModal .edpro_upload_hint {
    font-size: 12px;
    color: #868C98;
}

/* Your Query */
body.ed_pro #raiseDisbuteModal label[for="textarea"] {
    font-size: 14px;
    font-weight: 500;
    color: #0A091B;
    margin-bottom: 6px;
}
body.ed_pro #raiseDisbuteModal #textarea {
    border: 1px solid #E2E4E9 !important;
    border-radius: 10px !important;
    /* background: #fff !important; */
    min-height: 110px;
    font-size: 14px;
}

/* Submit / Cancel row — centered, buttons share one pill size. */
body.ed_pro #raiseDisbuteModal .col-12.px-0 { text-align: center; padding-top: 8px; }
body.ed_pro #raiseDisbuteModal .col-12.px-0 > div {
    float: none !important;
    width: 100%;
}

/* Reusable ED_PRO pill-button GEOMETRY  */
body.ed_pro .edpro_pill_btn {
    width: auto !important;
    min-width: 116px;
    /* display: inline-block !important; */
    border-radius: 999px !important;
    padding: 9px 26px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin: 0 6px !important;
}

/* Submit — gradient fill only (geometry comes from .edpro_pill_btn). Global
   under body.ed_pro so it is reusable across the order-detail form modals. */
body.ed_pro .edpro_submit_btn,
body.ed_pro .edpro_submit_btn:hover,
body.ed_pro .edpro_submit_btn:focus,
body.ed_pro .edpro_submit_btn:active,
body.ed_pro .edpro_submit_btn:not(:disabled):not(.disabled):active {
    /* border: none !important; */
    color: #fff !important;
    /* figma theme submit: purple -> blue gradient. Re-asserted on hover/focus/
       active so it isn't overridden by `body.ed_pro .btn_primary:hover` (#3F5FE5). */
    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;
    box-shadow: 0 1px 2px 0 rgba(37, 62, 167, 0.32) !important;padding: 8px !important;
}
body.ed_pro .edpro_submit_btn:hover {
    filter: brightness(1.04);
}
.client_new_design .modal-content .btn_primary[type="submit"] {
    color: #ffffff !important;
}
/*  ED_PRO — Client Orders list: */
body.ed_pro .left_content_section2 {
    padding: 0 !important;
    margin-bottom: 8px !important;
}
body.ed_pro .left_content_section_div {
    margin-top: 0 !important;
}

/* Column header — its own rounded card strip with a subtle background. */
body.ed_pro .left_content_section2 .table_list_item.new_design_th {
    /* background: #EFF2F6 !important; */
    border-radius: 10px !important;
    margin: 0 !important;
    color: rgba(1, 15, 36, 0.5);   /* figma header label */
}

body.ed_pro .left_content_section2 .table_list_item.new_design_th .fs_12,
body.ed_pro .left_content_section2 .table_list_item.new_design_th .col {
    color: rgba(1, 15, 36, 0.5);   /* figma header label: Onest 500 14/18 */
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
}

/* Data rows — each row its own white rounded card with a small gap below. */
body.ed_pro #client_orders_body {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    margin-top: 0 !important;
}
body.ed_pro #client_orders_body .table_list_item,
body.ed_pro #custom_orders_template .table_list_item {
    /* background: #FFFFFF !important; */
    /* border: 1px solid #EAECF0 !important; */
    border-radius: 16px !important;   /* figma row card */
    margin: 0 0 4px 0 !important;     /* figma list gap: 4px */
    box-shadow: none !important;
}
body.ed_pro #client_orders_body .table_list_item:last-child,
body.ed_pro #custom_orders_template .table_list_item:last-child {
    margin-bottom: 0 !important;
}
/* Custom orders list header label — figma muted, weight 500 (same as order list) */
body.ed_pro .custom_orders_template_head.new_design_th,
body.ed_pro .custom_orders_template_head .col,
body.ed_pro .custom_orders_template_head .sorting,
body.ed_pro .custom_orders_template_head .sorting i {
    color: rgba(1, 15, 36, 0.5) !important;
    font-weight: 500;
}

/* Match the All-Orders figma. */
body.ed_pro .left_content_section2 .table_list_item.new_design_th,
body.ed_pro #client_orders_body .table_list_item {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
/* Header strip vertical padding to match the orders header (py-3 ≈ 16px).
   Header-only so it doesn't change the data-row vertical spacing. */
body.ed_pro .left_content_section2 .table_list_item.new_design_th,
body.ed_pro .custom_orders_template_head.new_design_th {
    background: var(--edpro-bg) !important;
    box-shadow: none !important;
    border: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 20px !important;
	margin: 10px 0px 4px 0px !important;
}

/* ============================================================
   ED_PRO — Order list DARK THEME (orders / notes / disputes / special).*/
body.ed_pro.dark_mode #client_orders_body .table_list_item {
    background: var(--edpro-card) !important;   /* #14132A — same as stores rows */
    border-color: var(--edpro-border) !important;
}
/* Values + general row text -> white */
body.ed_pro.dark_mode #client_orders_body .table_list_item,
body.ed_pro.dark_mode #client_orders_body .table_list_item .oli_title_info,
body.ed_pro.dark_mode #client_orders_body .table_list_item .fw-normal,
body.ed_pro.dark_mode #client_orders_body .table_list_item .lc_1,
body.ed_pro.dark_mode #client_orders_body .table_list_item .lc_2,
body.ed_pro.dark_mode #client_orders_body .table_list_item .lc_3 {
    color: var(--edpro-text) !important;
}
/* Labels / secondary text -> muted white */
body.ed_pro.dark_mode #client_orders_body .table_list_item .text_secondary,
body.ed_pro.dark_mode #client_orders_body .table_list_item .oli_title {
    color: var(--edpro-text-muted) !important;
}
/* Header strip -> card background + muted labels */
body.ed_pro.dark_mode .left_content_section2 .table_list_item.new_design_th .col,
body.ed_pro.dark_mode .left_content_section2 .table_list_item.new_design_th .fs_12 {
    color: var(--edpro-text-muted) !important;
}
body.ed_pro .orders_wrap .no_product_found {
	background: transparent !important;
    border-radius: 16px;
}

/* ============================================================
   ED_PRO — Orders list: align the column header titles with the data columns
   and keep each column within its own width (same treatment as the products
   list). The header cells (.notesListingHeader) hold their label directly,
   while each data cell wraps it in .container-fluid > .row > .col whose
   gutters/margins were shifting the content out of line with the header.
   Reset that nesting and give header + data columns matching padding/min-width.
   ============================================================ */
/* Header column cells */
body.ed_pro .orders_wrap .notesListingHeader .d-md-flex > .col,
body.ed_pro .orders_wrap .notesListingHeader .d-md-flex > [class*="col-"]{
	padding: 8px 8px;
	min-width: 0;
	align-self: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Data row top-level cells: match the header padding + min-width */
body.ed_pro .orders_wrap .new_design_list .table_list_item > .d-xl-flex > .col,
body.ed_pro .orders_wrap .new_design_list .table_list_item > .d-xl-flex > [class*="col-"]{
	padding: 8px 8px;
	min-width: 0;
	align-self: center;
}
/* Action column: the header holds invisible placeholder buttons while the data
   holds the real "See more"/"Show log" buttons. Both carry the SAME labels under
   the same admin condition, so sizing the column to its content (max-content)
   keeps header and data identical AND lets longer translations (e.g. PT
   "Mostrar registros", NL "Logboeken weergeven") fit instead of overflowing a
   hard 104px box. Keep 104px as the floor so short labels match the original. */
body.ed_pro .orders_wrap .notesListingHeader .d-md-flex > .col-auto,
body.ed_pro .orders_wrap .new_design_list .table_list_item > .d-xl-flex > .col-auto{
	margin-left: auto;
	flex: 0 0 auto !important;
	width: max-content !important;
	min-width: 104px !important;
	max-width: none !important;
}
/* Checkbox column: identical fixed width in header + data so the very first
   column doesn't offset everything after it. */
body.ed_pro .orders_wrap .notesListingHeader .d-md-flex > .table_checkbox,
body.ed_pro .orders_wrap .new_design_list .table_list_item > .d-xl-flex > .table_checkbox{
	flex: 0 0 34px !important;
	width: 34px !important;
	max-width: 34px !important;
	min-width: 34px !important;
	padding: 0 !important;
}
/* Reset the Bootstrap .col/.container/.row nesting inside each data cell so the
   content lines up flush with the header strip. */
body.ed_pro .orders_wrap .new_design_list .table_list_item .container-fluid,
body.ed_pro .orders_wrap .new_design_list .table_list_item .container{
	max-width: none !important; width: 100%; padding: 0 !important; margin: 0 !important;
}
body.ed_pro .orders_wrap .new_design_list .table_list_item .container-fluid > .row,
body.ed_pro .orders_wrap .new_design_list .table_list_item .container > .row{
	margin: 0 !important; width: 100%;
}
body.ed_pro .orders_wrap .new_design_list .table_list_item .container-fluid > .row > .col,
body.ed_pro .orders_wrap .new_design_list .table_list_item .container-fluid > .row > [class*="col-"],
body.ed_pro .orders_wrap .new_design_list .table_list_item .container > .row > .col,
body.ed_pro .orders_wrap .new_design_list .table_list_item .container > .row > [class*="col-"]{
	padding: 0 !important; min-width: 0;
}

/* Client Balance Mutations rows . */
body.ed_pro.dark_mode #client_mutation_tbody .table_list_item {
    background: var(--edpro-card) !important;   /* #14132A — matches orders/stores rows */
}
body.ed_pro.dark_mode #client_mutation_tbody .table_list_item,
body.ed_pro.dark_mode #client_mutation_tbody .table_list_item .col,
body.ed_pro.dark_mode #client_mutation_tbody .table_list_item span,
body.ed_pro.dark_mode #client_mutation_tbody .table_list_item p {
    color: var(--edpro-text) !important;
}
body.ed_pro.dark_mode #client_mutation_tbody .table_list_item .text_secondary {
    color: var(--edpro-text-muted) !important;
}

/* Custom orders list (#custom_orders_template)  */
body.ed_pro.dark_mode #custom_orders_template .table_list_item {
    background: var(--edpro-card) !important;
    border-color: var(--edpro-border) !important;
    color: var(--edpro-text) !important;
}
body.ed_pro.dark_mode #custom_orders_template .table_list_item .text_secondary {
    color: var(--edpro-text-muted) !important;
}
body.ed_pro.dark_mode .custom_orders_template_head.new_design_th {
    /* background: var(--edpro-card) !important; */
    border-color: var(--edpro-border) !important;
}
body.ed_pro.dark_mode .custom_orders_template_head .col,
body.ed_pro.dark_mode .custom_orders_template_head .sorting,
body.ed_pro.dark_mode .custom_orders_template_head i {
    color: var(--edpro-text-muted) !important;
}
.ed_pro .new_design_th {
    background: none;
}


/* Delivery / shipping status */
body.ed_pro #client_orders_body .badge-mod {
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
}
body.ed_pro #client_orders_body .badge-mod.badge-success,
body.ed_pro #client_orders_body .badge-mod.badge-danger,
body.ed_pro #client_orders_body .badge-mod.badge-warning,
body.ed_pro #client_orders_body .badge-mod.badge-info,
body.ed_pro #client_orders_body .badge-mod.badge-primary,
body.ed_pro #client_orders_body .badge-mod.badge-secondary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: normal;
    overflow-wrap: break-word;
    border-radius: 6px !important;      /* figma status badge */
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 16px;
    vertical-align: middle;
}
/* figma soft-bg + colored text per status */
body.ed_pro #client_orders_body .badge-mod.badge-success {
    background: #EFFAF6 !important; color: #38C793 !important;
}
body.ed_pro #client_orders_body .badge-mod.badge-warning {
    background: #FEF3EB !important; color: #F27B2C !important;
}
body.ed_pro #client_orders_body .badge-mod.badge-danger {
    background: #FDEDF0 !important; color: #DF1C41 !important;
}

/* =====================================================================
   ED_PRO — shared order-detail form-modal chrome.
   ===================================================================== */
/* Narrower centered card (like the dispute modal). */
body.ed_pro #specialReqModal .modal-dialog,
body.ed_pro #showReqModal .modal-dialog,
body.ed_pro #cancelOrderModal .modal-dialog {
    max-width: 520px;
}

/* Modal bodies use Bootstrap padding; the card already pads via
   .edpro_form_modal, so zero the inner horizontal padding. */
body.ed_pro #disputehistorypopup .modal-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Dispute-history list rows → light figma cards (matches the other modals). */
body.ed_pro #disputehistorypopup .dispute_modal_body .table_list_item {
    background: transparent !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
}
body.ed_pro #disputehistorypopup .dispute_modal_body .table_list_item_head {
    color: #525866;
    font-weight: 500;
}
body.ed_pro #disputehistorypopup .dispute_modal_body .badge-mod {
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
body.ed_pro .edpro_form_modal {
    border-radius: 18px !important;
    border: none !important;
    padding: 26px 26px 30px !important;
    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 + sublabel, close pinned top-right. Covers both the
   `.mb-3 > h5` (special/show request) and `.modal-header > h5` (cancel order). */
body.ed_pro .edpro_form_modal > .mb-3,
body.ed_pro .edpro_form_modal .modal-header {
    position: relative;
    text-align: center;
    border: 0 !important;
    padding: 0 0 4px !important;
    margin-bottom: 18px !important;
}
body.ed_pro .edpro_form_modal h5 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #010F24 !important;
    margin: 0 0 4px !important;
}
body.ed_pro .edpro_form_modal .req,
body.ed_pro .edpro_form_modal .modal-header > div:not(.modal-desc) {
    font-size: 13px;
    color: #868C98;
}
body.ed_pro .edpro_form_modal .close {
    position: absolute !important;
    top: 0;
    right: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px;
    font-weight: 400;
    color: #868C98;
    opacity: 1;
    line-height: 1;
}
body.ed_pro .edpro_form_modal .close:hover { color: #0A091B; }

/* Dropdowns (select2) — same pill treatment as the dispute modal, incl. the
   chevron-overlay + z-index fixes so the options panel is usable. */
body.ed_pro .edpro_form_modal .slect2-mod,
body.ed_pro .edpro_form_modal .slect2-mod_new,
body.ed_pro .edpro_form_modal .slect2-mod .select2-container--default .select2-selection--single {
    background: #FFFFFF !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 10px !important;
    height: 50px !important;
    box-shadow: none !important;
    outline: 0 !important;
}
body.ed_pro .edpro_form_modal .slect2-mod .select2-container { width: 100% !important; }
body.ed_pro .edpro_form_modal .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;
	/* background: #E2E4E9 !important; */
}
body.ed_pro .edpro_form_modal .slect2-mod_new::after,
body.ed_pro .edpro_form_modal .slect2_icon_AuroMetalSaurusToWhite::after,
body.ed_pro .edpro_form_modal .storebtn::after { display: none !important; }
body.ed_pro .edpro_form_modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
    right: 14px;
    top: 1px;
}
body.ed_pro .edpro_form_modal .new_design_list .table_list_item {
	border-bottom: 0px solid var(--Platinum);
}
body.ed_pro #specialReqModal .select2-container--open,
body.ed_pro #showReqModal .select2-container--open,
body.ed_pro #cancelOrderModal .select2-container--open { z-index: 1100 !important; }

/* Textarea / inputs */
body.ed_pro .edpro_form_modal textarea.form-control,
body.ed_pro .edpro_form_modal input.form-control {
    border: 1px solid #E2E4E9 !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 14px;
}

/* Cancel-order list rows — light figma cards. */
body.ed_pro .edpro_form_modal .cancel_order_form .table_list_item {
    background: #F6F8FA !important;
    border: 1px solid #E2E4E9 !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
}

/* Float cleanup so the button row never overlaps content (same as dispute). */
body.ed_pro #specialReqModal #specialReqForm > .float-left.btn-block,
body.ed_pro #specialReqModal #specialReqForm > .order_mapping_list_nl,
body.ed_pro #specialReqModal #specialReqForm > .col-12 {
    float: none !important;
    clear: both !important;
    width: 100% !important;
}
body.ed_pro #specialReqModal #specialReqForm::after { content: ""; display: block; clear: both; }

.new_design_th {
	margin-bottom:10px;
}

/* Centered button rows — special request (.col-12.p-0) + cancel order footer. */
body.ed_pro #specialReqModal .col-12.p-0 { text-align: center; padding-top: 8px; }
body.ed_pro #specialReqModal .col-12.p-0 > div { float: none !important; width: 100%; }
body.ed_pro #cancelOrderModal .modal-footer {
    border: 0 !important;
    text-align: center;
    padding: 8px 0 0 !important;
}
body.ed_pro #cancelOrderModal .modal-footer .w-100 {
    float: none !important;
    text-align: center !important;
    margin-bottom: 0 !important;
}
/* Cancel-order body uses Bootstrap modal-header/body padding; the card already
   pads via .edpro_form_modal, so zero the inner horizontal padding. */
body.ed_pro #cancelOrderModal .small_modal_mod {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ED_PRO dark mode — cancel-order / dispute / special "select variant" rows
   (these come from JS and may carry bg-white). Force the dark field + border;
   light mode keeps the existing #E2E4E9 outline. */
body.ed_pro.dark_mode #cancelOrderModal .cancel_order_form .table_list_item,
body.ed_pro.dark_mode #raiseDisbuteModal .order_mapping_list .table_list_item,
body.ed_pro.dark_mode #specialReqModal .order_mapping_list_nl .table_list_item {
    background: var(--edpro-field) !important;
    border-color: var(--edpro-border) !important;
}
body.ed_pro.dark_mode #cancelOrderModal .small_modal_mod p,
body.ed_pro.dark_mode #cancelOrderModal .cancel_product_title,
body.ed_pro.dark_mode #cancelOrderModal .cancel_order_title {
    color: var(--edpro-text) !important;
}

/* ===================== EDPRO Login Page (Figma node 1:13723) =====================
   Same markup/architecture as prime_flow/login.php; the edpro blue glass theme is
   applied here, scoped under .edpro-login (the login layout body has no ed_pro class).
   ================================================================================= */
.edpro-login{ position:relative; min-height:100vh; width:100%; overflow:hidden; font-family:'Onest', system-ui, sans-serif; }
.edpro-login .login_page_section_inner{ position:relative; min-height:100vh; }

/* decorative background blobs */
.edpro-login .edpro-bg{ position:fixed; inset:0; overflow:hidden; background:#eff2f6; pointer-events:none; z-index:0; }
.edpro-login .edpro-bg img{ position:absolute; display:block; }
.edpro-login .edpro-bg .b-vector{ left:4.3%; top:0; width:72.5%; mix-blend-mode:multiply; }
.edpro-login .edpro-bg .b-ellipse{ left:40.6%; top:30%; width:52.6%; }
.edpro-login .edpro-bg .b-rect1{ left:27.7%; top:-20%; width:48.6%; mix-blend-mode:color-dodge; }
.edpro-login .edpro-bg .b-rect2{ left:24%; top:17.8%; width:48.6%; mix-blend-mode:color-dodge; }

/* keep all real content above the fixed bg layer (login + signup) */
.edpro-login .container-fluid{ position:relative; z-index:1; }

/* centering */
.edpro-login .login_h100vh{ min-height:100vh; padding:40px 0; box-sizing:border-box; }
/* signup: logo sits outside the card — keep top space above the logo but tighten the gap to the card */
.edpro-login .header-logo-wrapper{ margin:40px 0 0 !important; }
.edpro-login .header-logo-wrapper + .login_h100vh{ padding-top:0; }

/* glass card = prime_flow .form_area_main */
.edpro-login .login_h100vh .form_area_main{ width:456px; max-width:calc(100vw - 32px); margin:auto; background:rgba(255,255,255,0.66); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:none; border-radius:24px; box-sizing:border-box; }
.edpro-login .login_h100vh .form_area{ width:100%; padding:48px; box-sizing:border-box; }
.edpro-login .login_h100vh .new_login {width: 388px;}
.edpro-login .login_h100vh .new_login_inner {padding: 20px;}

/* logo (Figma Edpro mark + wordmark), now inside the card */
.edpro-login .login_new.header-logo{ display:flex; justify-content:center; text-align:center; margin:0; }
.edpro-login .login_new.header-logo a.edpro-logo{ display:inline-flex; align-items:center; justify-content:center; width:auto; max-width:none; height:auto; margin:0 0 24px; text-decoration:none; }
.edpro-login .edpro-logo img{ height:30px; width:auto; display:block; }

/* title */
.edpro-login .form_area h1{ font-weight:600; font-size:28px; line-height:28px; color:#0a091b; text-align:center; margin:0 0 24px; }

/* alerts */
.edpro-login .form_area .alert{ width:100%; font-size:13px; }
.edpro-login .form_area #msg:empty{ display:none; }

/* login form layout — scoped to #signin so the signup form (#registration, which
   shares the .login_form class) keeps all its fields, labels and terms checkbox.
   Hidden inputs are display:none and never become flex items, so no stray gaps. */
.edpro-login #signin{ display:flex; flex-direction:column; gap:16px; }
.edpro-login #signin > div{ margin:0 !important; }

/* hide the tiny field labels on login only (Figma uses placeholders) */
.edpro-login #signin .form-label{ display:none; }

/* fields */
.edpro-login .form_area .form-control{ height:48px; background:#EFF2F6 !important; border:none !important; border-radius:10px !important; box-shadow:none; padding:0 15px; font-family:'Onest', system-ui, sans-serif; font-size:15px; line-height:20px; color:#0a091b; }
.edpro-login .form_area .form-control::placeholder{ color:#a4a4a4; opacity:1; }
.edpro-login .form_area .form-control:focus{ background:#EFF2F6 !important; border:none; box-shadow:none; outline:none; }
.edpro-login .form_area .icon_input input{ padding-left:15px; }

/* password eye (outline icon from Figma — password_eye_outline_Icon / password_eyeOff_outline_Icon) */
.edpro-login .form_area .icon_input.eye_icon_spacer{ position:relative; }
.edpro-login .form_area .eye_icon_spacer input{ padding-right:44px; }
.edpro-login .form_area .eye_icon{ top:50%; right:14px; transform:translateY(-50%); cursor:pointer; }
.edpro-login .form_area .eye_icon svg{ width:18px; height:18px; display:block; }
/* it's a stroke/outline icon — neutralize the base rule that force-fills eye SVGs so it doesn't render as a solid blob */
.edpro-login .form_area .eye_icon svg path{ fill:none !important; }
.edpro-login .form_area .eye_icon svg line{ stroke:#0A091B !important; }

/* primary buttons (login submit + forget-password modal) -> edpro blue glass */
.edpro-login .pf_btn_primary{ border:1px solid #ffffff; border-radius:10px; background-color:#5072fc; background-image:linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 100%), linear-gradient(90deg, #5072fc 0%, #5072fc 100%); color:#ffffff; font-family:'Onest', system-ui, sans-serif; font-weight:500; font-size:14px; line-height:20px; letter-spacing:-0.084px; padding:10px 8px; }
.edpro-login .pf_btn_primary:hover, .edpro-login .pf_btn_primary:focus, .edpro-login .pf_btn_primary:active{ background-color:#5072fc; border-color:#ffffff; color:#ffffff; filter:brightness(1.02); }

/* remember-me toggle + forgot-password row (login only, kept visible) */
.edpro-login #signin .form-check.form-switch{ display:flex; align-items:center; padding:0; min-height:0; margin:0; }
/* reset Bootstrap's switch padding-left + the input's negative/top margins so the
   toggle aligns flush with the field left edge and sits centered with its label */
.edpro-login #signin .form-check.form-switch .d-inline-flex{ align-items:center; }
.edpro-login #signin .form-check.form-switch .form-check-input{ margin:0; float:none; flex:0 0 auto; }
.edpro-login #signin .form-check .form-check-label{ font-size:12px; color:#010f24; margin:0 0 0 8px; line-height:1; }
.edpro-login #signin .forgot_link{ font-size:12px; line-height:20px; letter-spacing:0.3px; color:#0a091b !important; text-decoration:underline;text-align: center;}
.edpro-login #signin .forgot_link:hover{ color:#0a091b !important; }

/* signup prompt */
.edpro-login .bottom_area{ text-align:center; margin:0; }
.edpro-login .bottom_area span{ font-size:12px; line-height:20px; letter-spacing:0.3px; color:#010f24; }

/* captcha (appears only after repeated failed attempts) */
.edpro-login .form_area .captcha_main_div{ width:100%; }
.edpro-login .form_area .CaptchaWrap{ align-items:center; gap:10px; }
.edpro-login .form_area .ReloadBtn{ width:32px; cursor:pointer; }
.edpro-login .form_area .UserCaptchaCode{ border-radius:10px; }

/* Signup page: recolor the legacy orange/teal accents to the blue theme.
   Scoped to .edpro-login + keyed by id/login_form so the form markup stays unchanged. */
.edpro-login #register_signup{
  border:1px solid #ffffff !important;
  border-radius:10px !important;
  background-color:#5072fc !important;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 100%), linear-gradient(90deg, #5072fc 0%, #5072fc 100%) !important;color:#ffffff !important;
}
.edpro-login #register_signup:hover,
.edpro-login #register_signup:focus,
.edpro-login #register_signup:active{
  background-color:#5072fc !important; border-color:#ffffff !important; color:#ffffff !important; filter:brightness(1.02);
}

/* terms toggle / checkboxes */
.edpro-login .login_form .form-check-input{
  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='%235072fc'/%3e%3c/svg%3e") !important;
}
.edpro-login .login_form .form-check-input:checked{
  background-color:#5072fc !important; border-color:#5072fc !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") !important;
}
.edpro-login .login_form .form-check-input:focus{ border-color:#5072fc !important; box-shadow:none; }

/* links: "Log In" + terms/privacy/data-processing */
.edpro-login .bottom_area a{ color:#5072fc !important; }
.edpro-login .form-check-label a,
.edpro-login .form-check-label a u{ color:#5072fc !important; }

/* KPI + Best Sellers listings share the same row-card design (EDPRO only):
   a grey rounded header strip and white rounded card per data row. */
.edpro_dashboard_wrap .edpro_kpi_section .dashboard_product_listing,
.edpro_dashboard_wrap .edpro_best_sellers_section .dashboard_product_listing{
    background: var(--edpro-bg);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.edpro_dashboard_wrap .edpro_kpi_section .dashboard_product_listing .text_secondary,
.edpro_dashboard_wrap .edpro_best_sellers_section .dashboard_product_listing .text_secondary{
    color: var(--edpro-text-muted) !important;
    font-weight: 400;
    font-size: 14px;
}

/* Data rows -> white rounded cards separated by gaps */
.edpro_dashboard_wrap .edpro_kpi_section .dpl_item,
.edpro_dashboard_wrap .edpro_best_sellers_section .dpl_item{
    background: var(--edpro-card);
    border: 1px solid var(--edpro-border) !important;
    border-radius: 12px;
    margin-bottom: 4px;
    padding: 15px 12px !important;
}
.edpro_dashboard_wrap .edpro_kpi_section .dpl_item:last-child,
.edpro_dashboard_wrap .edpro_best_sellers_section .dpl_item:last-child{ margin-bottom: 0; }

/* Product thumbnail -> 40px rounded inside a soft tile */
.edpro_dashboard_wrap .edpro_kpi_section .dpl_item .product-img-placeholder,
.edpro_dashboard_wrap .edpro_best_sellers_section .dpl_item .product-img-placeholder{
    width: 40px !important;
    height: 40px !important;
    border-radius: 6px;
    background: var(--edpro-bg);
    object-fit: cover;
}
.edpro_dashboard_wrap .edpro_kpi_section .dpl_item .client-info .fw-semibold_600,
.edpro_dashboard_wrap .edpro_best_sellers_section .dpl_item .client-info .fw-semibold_600,
.edpro_dashboard_wrap .edpro_best_sellers_section .dpl_item .client-info .lc_2{
    color: var(--edpro-text);
    font-weight: 500;
}

/* "See More" button -> subtle horizontal-gradient pill per Figma (node 7:25438).
   !important is required to beat the shared `.btn` rules in style_minify.css
   (background/border/border-radius/color/padding/line-height all use !important). */
.edpro_dashboard_wrap .edpro_best_sellers_section .dpl_item .col-auto .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: auto;
    min-height: 0;
    padding: 12px 20px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(1, 15, 36, 0.1) !important;
    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;
    color: #010F24 !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px !important;
    letter-spacing: -0.084px;
    white-space: nowrap;
}
.edpro_dashboard_wrap .edpro_best_sellers_section .dpl_item .col-auto .btn:hover,
.edpro_dashboard_wrap .edpro_best_sellers_section .dpl_item .col-auto .btn:focus{
    border-color: rgba(1, 15, 36, 0.18) !important;
    background: linear-gradient(90deg, rgba(1, 15, 36, 0.04) 0%, rgba(1, 15, 36, 0.18) 50.5%, rgba(1, 15, 36, 0.04) 100%) !important;
    color: #010F24 !important;
}
/* Dark mode: mirror the light treatment with white translucency (Figma is light only) */
body.ed_pro.dark_mode .edpro_dashboard_wrap .edpro_best_sellers_section .dpl_item .col-auto .btn{
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.12) 50.5%, rgba(255, 255, 255, 0.02) 100%) !important;
    color: var(--edpro-text) !important;
}
body.ed_pro.dark_mode .edpro_dashboard_wrap .edpro_best_sellers_section .dpl_item .col-auto .btn:hover,
body.ed_pro.dark_mode .edpro_dashboard_wrap .edpro_best_sellers_section .dpl_item .col-auto .btn:focus{
    border-color: rgba(255, 255, 255, 0.2) !important;
    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;
    color: var(--edpro-text) !important;
}

/* Status badge -> pill shape; colour comes from the existing per-status style class */
.edpro_dashboard_wrap .edpro_kpi_section .quotation-status-text.badge-mod{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

/* Time Left -> hide the shared progress bar; the countdown JS writes the text */
.edpro_dashboard_wrap .edpro_kpi_section .quotation_bid_time_left_new .progress{ display: none; }
.edpro_dashboard_wrap .edpro_kpi_section .quotation_bid_time_left_new{
    color: var(--edpro-text);
    font-weight: 500;
}
/* ============================================================
   EDPRO Product Detail page (CONDITION_12) — UI only.
   Reuses the stores/products token system (#EFF2F6 surface,
   #FFFFFF flat cards, #010F24 ink, #525866 sub-text, #375DFB
   accent, Onest). Scoped under body.ed_pro so it themes BOTH the
   full-page render and the AJAX modal (#productDetailModal),
   since body.ed_pro is present on the dashboard in both cases.
   ============================================================ */

/* --- Page surface / typography (full page + modal body) --- */
body.ed_pro .cpd_edpro_wrap,
body.ed_pro #productDetailModal .modal-content{
	font-family: 'Onest', 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #010F24;
}

/* Modal shell: flat surface card matching the products page */
body.ed_pro #productDetailModal .modal-content{
	background: #EFF2F6;
	border: 0;
	border-radius: 12px;
	box-shadow: none;
}
body.ed_pro #productDetailModal .modal-header{
	border-bottom: 1px solid #E2E4E9;
	background: transparent;
}

/* --- EDPRO cards are FLAT (no drop shadow), matching .products_wrap --- */
/* Override the global .cpd_left_top shadow only for EDPRO */
body.ed_pro .cpd_left_top{ box-shadow: none !important; }
body.ed_pro .cpd_box,
body.ed_pro .cpd_left,
body.ed_pro .cpd_right{
	box-shadow: none !important;
}

/* Left header card */
body.ed_pro .product_detail_border{
	border: 1px solid #E2E4E9;
	border-radius: 12px;
	background: #FFFFFF;
}

/* Right column (conversation) card — flat white */
body.ed_pro .cpd_right_edpro{
	background: #FFFFFF !important;
	border: 1px solid #E2E4E9;
	border-radius: 12px;
	box-shadow: none !important;
}

/* --- Product header text --- */
body.ed_pro .ph_text .limit-product-title,
body.ed_pro .ph_text .text_link,
body.ed_pro .ph_text .product-title-original a{
	color: #010F24 !important;
	font-weight: 600;
}
/* Expanded (full) title after "show more" — readable, no underline */
body.ed_pro .ph_text .product-title-original a{ text-decoration: none; }
body.ed_pro .ph_text .fs_14{ color: #525866; }
body.ed_pro .ph_text .fs_14 .fw-medium{ color: #010F24; }

/* ============================================================
   EDPRO product header card — Figma 28:6588
   White card, 15px h-padding, flex space-between; left = 48px
   image + title/subtitle text column, right = Special request
   dropdown + relocated status badge.
   ============================================================ */

/* Card surface: 16px radius + 15px horizontal padding (Figma) */
body.ed_pro .product_detail_border{
	border-radius: 16px;
	padding: 12px 15px !important;
}

/* Left group: 48px product thumbnail (gray bg, faint border, soft shadow) */
body.ed_pro .cpd_info .product_header_image{
	width: 48px;
	height: 48px;
	min-width: 48px;
	border-radius: 6px;
	background: #EFF2F6;
	border: 1px solid rgba(0, 0, 0, 0.11);
	box-shadow: 0px 40px 96px -8px rgba(88, 92, 95, 0.20);
	padding: 4px;
	overflow: hidden;
}
body.ed_pro .cpd_info .product_header_image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

/* Text column: single-line title + single-line muted subtitle */
body.ed_pro .ph_text{
	min-width: 0;
	max-width: 260px;
}

/* Title — 16px medium; single line, truncated, with a visible/clickable "show more" */
body.ed_pro .ph_text > p:first-child{
	display: flex;
	align-items: baseline;
	max-width: 260px;
	white-space: nowrap;
}
body.ed_pro .ph_text > p:first-child a.limit-product-title,
body.ed_pro .ph_text > p:first-child a.text_link{
	display: block;
	min-width: 0;
	flex: 0 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.096px;
	text-decoration: none;
}
/* Keep the server-side "...show more" toggle visible + clickable (expands full title).
   NOTE: no !important on display — the JS .hide() sets inline display:none to remove it
   once the full title is expanded, and !important here would block that. */
body.ed_pro .ph_text .showmore{
	display: inline;
	flex: 0 0 auto;
	margin-left: 4px;
	color: #375DFB;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}

/* Subtitle (Store: <name>) — 14px muted, single line, ellipsis */
body.ed_pro .ph_text .fs_14{
	color: rgba(1, 15, 36, 0.45);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.084px;
	max-width: 260px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.ed_pro .ph_text .fs_14 .fw-medium{ color: rgba(1, 15, 36, 0.45); font-weight: 400; }

/* Right group: dropdowns + relocated status badge, 15px gap */
body.ed_pro .cpd_btn_edpro{
	grid-gap: 15px;
	gap: 15px;
}

/* The relocated status badge slot — strip the inline <p> spacing/label.
   font-size:0 collapses the literal "Status:" text node; the badge pill
   resets its own size below. */
body.ed_pro .cpd_status_slot .status_badge{
	margin: 0;
	font-size: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
/* Badge pill — Figma "Bidding" orange (bg #FEF3EB, text #F17B2C) */
body.ed_pro .cpd_status_slot .badge-mod{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px !important;
	font-weight: 500;
	line-height: 16px;
	border-radius: 6px;
	padding: 4px 8px 4px 4px;
}
/* Leading icon before the badge label (content set per status family below) */
body.ed_pro .cpd_status_slot .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;
}
/* Status-style families (match the product listing pills) */
body.ed_pro .cpd_status_slot .badge-mod.badge-warning{
	background: #FEF3EB !important;
	color: #F17B2C !important;
}
body.ed_pro .cpd_status_slot .badge-mod.badge-warning::before{ content: "\f017"; } /* clock */
body.ed_pro .cpd_status_slot .badge-mod.badge-success{
background: #5072FC !important;
  color: #fff !important;
}
body.ed_pro .cpd_status_slot .badge-mod.badge-success::before{ content: "\f058"; } /* check-circle */
body.ed_pro .cpd_status_slot .badge-mod.badge-danger{
	background: #FEECEB !important;
	color: #F04438 !important;
}
body.ed_pro .cpd_status_slot .badge-mod.badge-danger::before{ content: "\f057"; } /* times-circle */
body.ed_pro .cpd_status_slot .badge-mod.badge-info{
	background: #EFF4FF !important;
	color: #375DFB !important;
}
body.ed_pro .cpd_status_slot .badge-mod.badge-info::before{ content: "\f05a"; } /* info-circle */

/* Special request dropdown — white pill, faint border, 8px radius, chevron */
body.ed_pro .cpd_btn_edpro .special_request .dropdown-toggle{
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 8px;
	color: #010F24;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	padding: 8px 8px 8px 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
/* Chevron is supplied by the global .store_dropdown_area .dropdown-toggle::after
   rule (\f078). Recolor/resize it to match the Figma pill; do not re-add content. */
body.ed_pro .cpd_btn_edpro .special_request .dropdown-toggle::after{
	top: 0;
	font-size: 11px;
	font-weight: 900;
	color: rgba(1, 15, 36, 0.55);
}

/* --- Quotation card (Figma 29:6664): pale outer panel, solid-white row cards --- */
/* Outer panel ≈ 53%-white over the gray modal surface → reads as a soft off-white */
body.ed_pro .cpd_list_item{
	background-color: var(--edpro-card) !important
	border: 1px solid #E2E4E9;
	border-radius: 16px;
	box-shadow: none !important;
	padding: 15px !important;
}
body.ed_pro .cpd_list_header{
	background-color: transparent;
	border-radius: 0;
}
/* Selected card → blue border (Figma active state) */
body.ed_pro .cpd_list_item.active{
	background-color: var(--edpro-card) !important;
	border-color: #375DFB;
}
body.ed_pro .cpd_list_item.active .cpd_list_header{ background-color: transparent; }
body.ed_pro .cpd_list_title{ color: #080F1A; font-weight: 500; }

/* Supplier avatar (Figma 29:6664) — light-blue circle + green online dot */
body.ed_pro .cpd_avatar{
	position: relative;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(55, 93, 251, 0.09);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}
/* Uploaded supplier profile photo fills the circle (self-clipped so the
   online dot isn't cropped by a parent overflow:hidden) */
body.ed_pro .cpd_avatar img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
body.ed_pro .cpd_avatar svg{ width: 16px; height: 16px; }
body.ed_pro .cpd_avatar svg path,
body.ed_pro .cpd_avatar svg circle{ stroke: #375DFB; }
body.ed_pro .cpd_avatar_dot{
	position: absolute;
	bottom: 1px;
	right: 1px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #12B76A;
	border: 1.5px solid #FFFFFF;
}

/* Column-header labels — transparent strip, muted text (NO background, NO lines) */
body.ed_pro .cpd_list_info_area:not(.product_detail_quotation){
	background-color: transparent;
	padding-top: 8px;
	padding-bottom: 8px;
}
body.ed_pro .cpd_list_info .cpd_label{ color: rgba(1, 15, 36, 0.5); font-weight: 500; }

/* Data rows: each a solid-white rounded card, small gap, NO border, NO separator line */
body.ed_pro .product_detail_quotation{
	background-color: #FFFFFF;
	border: 0;
	border-radius: 12px;
	padding: 16px;
	margin: 0 0 4px;
}
body.ed_pro .product_detail_quotation:last-child{ margin-bottom: 0; }
/* Per-column emphasis: Country normal, Price semibold, time/dispute muted */
body.ed_pro .product_detail_quotation .cpd_item .fw-semibold{ color: #0A091B; font-weight: 600; }
body.ed_pro .product_detail_quotation .cpd_item:nth-child(1) .fw-semibold{ font-weight: 400; }
body.ed_pro .product_detail_quotation .cpd_item:nth-child(n+3) .fw-semibold{ color: rgba(10, 9, 27, 0.6); font-weight: 400; }

/* Select pill — Figma "Status Badge": rounded 6px, 8px/4px padding, 12px medium */
/* Unselected → white badge, light border, gray text + an outline radio circle */
body.ed_pro .form_check_area{
	border: 1px solid #EBEBEB;
	border-radius: 6px;
	background: #FFFFFF;
	color: #6D6D6D;
	padding: 4px 8px;
	font-weight: 500;
	line-height: 16px;
}
body.ed_pro .form_check_area::before{
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	margin-right: 7px;
	border-radius: 50%;
	border: 1.5px solid #CDD0D5;
}
/* Selected → solid green badge, borderless, no radio circle (Figma) */
body.ed_pro .cpd_list_item.active .form_check_area{
background: #C9FFCB;
  color: #007B04;
  border-color: #C9FFCB;
}
body.ed_pro .cpd_list_item.active .form_check_area::before{ display: none; }

/* Variant breakdown rows */
body.ed_pro .cdp_variants a{ color: #375DFB !important; }
body.ed_pro .cdp_variants_list_title .lc_2{ color: #525866; }

/* --- Conversation panel (right column) — Figma 26:6108 --- */
/* Chat header: avatar + name, 3-dot options on the right, divider underneath */
body.ed_pro .edpro_chat_header{
	border-bottom: 1px solid rgba(27, 28, 26, 0.08);
	padding-bottom: 10px;
}
body.ed_pro .edpro_chat_header > span,
body.ed_pro .edpro_chat_name{
	color: #080F1A;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	word-break: break-word;
}
body.ed_pro .edpro_chat_online{
	color: #34C759;
	font-size: 11px;
	line-height: 1.2;
}
/* "Open options" 3-dot affordance */
body.ed_pro .edpro_chat_options{
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease;
}
body.ed_pro .edpro_chat_options:hover{ background: rgba(5, 102, 255, 0.12); }
body.ed_pro .edpro_chat_options:focus{ outline: none; }

/* Chat input footer */
body.ed_pro .edpro_chat_input{
	border-top: 1px solid rgba(27, 28, 26, 0.08);
	padding-top: 12px !important;
}
body.ed_pro .edpro_chat_input .convo_input::placeholder{ color: #8894AB; opacity: 1; }
body.ed_pro .edpro_chat_input .convo_input{ color: #06132B; }
/* Send button: circular blue, white chevron (Figma) */
body.ed_pro .edpro_chat_input .send_btn{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #375DFB;
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
body.ed_pro .edpro_chat_input .send_btn i{ color: #FFFFFF; }
/* Attach (paperclip/image) button — muted icon, no border */
body.ed_pro .edpro_chat_input .upload-btn-wrapper .btn{ padding: 4px; }
body.ed_pro .edpro_chat_input .upload-btn-wrapper .btn svg path{ stroke: #647491; stroke-opacity: 1; }
/* Emoji icon inside the field — muted to match Figma toolbar */
body.ed_pro .edpro_chat_input .convo_input_svg svg path{ stroke: #647491; }

/* Bubbles: fully rounded 16px (no tail); sent = blue, received = soft gray */
body.ed_pro .convo_bubble{ border-radius: 16px; padding: 15px !important; max-width: 316px; }
body.ed_pro .convo_bubble_right{
	border-top-right-radius: 16px !important;
	background-color: #375DFB;
	color: #FFFFFF;
}
body.ed_pro .convo_bubble_right p{ color: #FFFFFF; }
body.ed_pro .convo_bubble_left{
	border-top-left-radius: 16px !important;
	background-color: #F5F7F9;
	color: #06132B;
}
body.ed_pro .convo_bubble_left p{ color: #06132B; }
body.ed_pro .convo_time{ color: rgba(10, 9, 27, 0.5); }

body.ed_pro .qc-msg-menu-btn .fa-ellipsis-v{ color: #FFFFFF; }
/* Keep pin menu functional but hidden at rest (Figma bubbles are clean) */
body.ed_pro .qc-msg-menu{ opacity: 0; transition: opacity .15s ease; }
body.ed_pro .qc-message-row:hover .qc-msg-menu,
body.ed_pro .qc-msg-menu.show{ opacity: 1; }
/* Image / attachment message — show photos as bordered cards, not a filled bubble (Figma 26:6176/26:6180) */
body.ed_pro .convo_media_bubble{
	background: transparent !important;
	padding: 0 !important;
	max-width: 336px;            /* Figma media card is wider than text bubbles */
}
/* Keep the card on the sender's side (right = client sent, left = supplier) */
body.ed_pro .convo_media_bubble.convo_bubble_right{ margin-left: auto; }
body.ed_pro .convo_media_bubble.convo_bubble_left{ margin-right: auto; }
body.ed_pro .convo_media_bubble .product_imgs .item{ width: 100%; }
body.ed_pro .convo_media_bubble .product_imgs .item img{
	width: 100%;
	height: auto;
	max-height: 213px;          /* Figma card height */
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	object-fit: cover;
}
body.ed_pro .convo_media_bubble .downloadBtn{
	background: #FFFFFF !important;
	border: 1px solid #E2E4E9 !important;
	border-radius: 8px;
	color: #375DFB !important;
}
body.ed_pro .downloadBtn{ color: #375DFB !important; }

/* Footer summary line */
body.ed_pro .cpd_list_info .fw-medium{ color: #010F24; }

body.ed_pro .cpd_right .chat_box_max_height {
	border-bottom: none !important;
}

body.ed_pro .product_imgs {
	display: block !important;
}



/* ============================================================
   EDPRO Partnership page (CONDITION_12) — UI only.
   Mirrors the dashboard token system so theming stays consistent.
   ============================================================ */
.edpro_partnership{
	--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-text-soft: rgba(10, 13, 20, 0.4);
	--edpro-primary: #375DFB;
	--edpro-primary-grad: #5072FC;
	color: var(--edpro-text);
	font-family: 'Onest', 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.edpro_partnership_page.content-page{ padding-right: 24px; padding-bottom: 24px; }

/* Greeting (shared look with dashboard header) */
.edpro_partnership .edpro_dash_header{ margin-bottom: 20px; }
.edpro_partnership .edpro_dash_greet{
	font-size: 22px; font-weight: 600; color: var(--edpro-text-strong);
	letter-spacing: 0.22px; margin: 0 0 4px;
}
.edpro_partnership .edpro_dash_subtitle{
	font-size: 16px; color: var(--edpro-text-faint); margin: 0; line-height: 1.2;
}
.edpro_partnership .edpro_dash_subtitle_dash{ margin: 0 6px; }

/* Page title */
.edpro_partnership .edpro_page_title{
	font-size: 24px; font-weight: 600; color: var(--edpro-text-strong);
	letter-spacing: 0.24px; margin: 0 0 16px;
}

/* Two-column layout */
.edpro_partnership .edpro_partnership_grid{
	display: grid;
	grid-template-columns: minmax(0, 491fr) minmax(0, 581fr);
	gap: 16px;
	align-items: start;
}
.edpro_partnership .edpro_partnership_left{
	display: flex; flex-direction: column; gap: 16px;
}

/* ---- Affiliate Balance card ---- */
.edpro_partnership .edpro_balance_card{
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	min-height: 213px;
	padding: 20px;
	background-color: var(--edpro-bg);
	background-image: url('../../img/ed_pro/affiliate_balance_glow.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.edpro_partnership .edpro_balance_inner{
	position: relative; z-index: 1;
	display: flex; flex-direction: column; justify-content: space-between;
	min-height: 173px; gap: 18px;
}
.edpro_partnership .edpro_balance_label{
	font-size: 16px; font-weight: 500; line-height: 24px;
	color: var(--edpro-text-muted); letter-spacing: -0.176px;
}
.edpro_partnership .edpro_balance_amount_block{ display: flex; flex-direction: column; }
.edpro_partnership .edpro_balance_amount{
	font-size: 32px; font-weight: 500; line-height: 40px;
	color: var(--edpro-text); letter-spacing: -0.64px;
}
.edpro_partnership .edpro_balance_collect{
	display: flex; align-items: center; gap: 4px; margin-top: 2px;
}
.edpro_partnership .edpro_balance_collect_label{
	font-size: 12px; font-weight: 400; line-height: 16px; color: var(--edpro-text-muted);
}
.edpro_partnership .edpro_balance_collect_value{
	font-size: 12px; font-weight: 600; line-height: 16px; color: var(--edpro-text-strong);
}
.edpro_partnership .edpro_withdraw_btn{
	width: 100%;
	background-image: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 100%),
		linear-gradient(90deg, var(--edpro-primary-grad) 0%, var(--edpro-primary-grad) 100%);
	color: #fff; border: 1px solid #fff; border-radius: 10px;
	padding: 10px 8px; font-size: 14px; font-weight: 500; line-height: 20px;
	letter-spacing: -0.084px; text-align: center;
	box-shadow: 0 1px 2px 0 rgba(37, 62, 167, 0.48), 0 0 0 1px #375DFB;
	cursor: pointer; transition: filter 0.15s ease;
}
.edpro_partnership .edpro_withdraw_btn:hover{ filter: brightness(1.05); color: #fff; }
.edpro_partnership .edpro_withdraw_btn:disabled,
.edpro_partnership .edpro_withdraw_btn.is_disabled{ opacity: 0.5; cursor: not-allowed; filter: none; }

/* ---- Share referral card ---- */
.edpro_partnership .edpro_referral_card{
	background: var(--edpro-card); border-radius: 16px; padding: 24px;
	display: flex; flex-direction: column; gap: 12px;
}
.edpro_partnership .edpro_referral_head{ display: flex; flex-direction: column; gap: 4px; }
.edpro_partnership .edpro_referral_title{
	font-size: 16px; font-weight: 500; line-height: 20px;
	color: var(--edpro-text); letter-spacing: -0.096px;
}
.edpro_partnership .edpro_referral_desc{
	font-size: 16px; font-weight: 400; line-height: 20px;
	color: var(--edpro-text-soft); letter-spacing: -0.096px; margin: 0;
}
.edpro_partnership .edpro_referral_input_wrap{ width: 100%; }
.edpro_partnership .edpro_referral_input{
	width: 100%; border: none; outline: none;
	background: rgba(226, 228, 233, 0.58); border-radius: 10px;
	padding: 10px 12px; font-size: 16px; line-height: 20px;
	color: var(--edpro-text-soft); letter-spacing: -0.096px;
	box-shadow: 0 1px 2px 0 rgba(228, 229, 231, 0.24);
	text-overflow: ellipsis;
}
.edpro_partnership .edpro_copy_btn{
	width: 100%; height: 44px; border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	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%);
	color: var(--edpro-text); font-size: 14px; font-weight: 500; line-height: 20px;
	letter-spacing: -0.084px; cursor: pointer;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	transition: filter 0.15s ease;
}
.edpro_partnership .edpro_copy_btn:hover{ filter: brightness(0.98); }

/* ---- Leaderboard card ---- */
.edpro_partnership .edpro_leaderboard_card{
	background: var(--edpro-card); border-radius: 16px; padding: 24px;
}
.edpro_partnership .edpro_leaderboard_head{ display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.edpro_partnership .edpro_leaderboard_title{
	font-size: 16px; font-weight: 500; line-height: 20px;
	color: var(--edpro-text); letter-spacing: -0.096px;
}
.edpro_partnership .edpro_leaderboard_subtitle{
	font-size: 16px; font-weight: 400; line-height: 20px;
	color: var(--edpro-text-soft); letter-spacing: -0.096px;
}
.edpro_partnership .edpro_lb_head,
.edpro_partnership .edpro_lb_row{
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px; align-items: center;
}
.edpro_partnership .edpro_lb_head{ padding: 8px 12px; }
.edpro_partnership .edpro_lb_th{
	font-size: 14px; font-weight: 500; line-height: 18px; color: var(--edpro-text-muted);
}
.edpro_partnership .edpro_lb_th_orders{ text-align: right; }
.edpro_partnership .edpro_lb_body{ display: flex; flex-direction: column; }
.edpro_partnership .edpro_lb_row{
	padding: 12px; min-height: 58px; border-radius: 16px;
}
.edpro_partnership .edpro_lb_cell{ font-size: 14px; line-height: 20px; letter-spacing: -0.084px; }
.edpro_partnership .edpro_lb_cell_name{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.edpro_partnership .edpro_lb_avatar{
	width: 34px; height: 34px; flex-shrink: 0; border-radius: 60px;
	background: rgba(226, 228, 233, 0.52);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 400; color: #000;
}
.edpro_partnership .edpro_lb_username{
	font-size: 14px; font-weight: 500; color: var(--edpro-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.edpro_partnership .edpro_lb_cell_rev{ font-size: 14px; font-weight: 500; color: var(--edpro-text); }
.edpro_partnership .edpro_lb_cell_orders{ font-size: 14px; font-weight: 400; color: var(--edpro-text-subtle); text-align: right; }
.edpro_partnership .edpro_lb_body .no_product_found p{ color: var(--edpro-text-muted); }

/* Footer */
.edpro_partnership .edpro_partnership_footer{
	margin-top: 24px; font-size: 14px; color: var(--edpro-text-muted);
}

/* Responsive */
@media (max-width: 991px){
	.edpro_partnership .edpro_partnership_grid{ grid-template-columns: 1fr; }
}

/* Dark mode */
body.dark_mode .edpro_partnership{
	--edpro-bg: #0A091B;
	--edpro-card: #14132A;
	--edpro-text: #ffffff;
	--edpro-text-strong: #ffffff;
	--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-text-soft: rgba(255, 255, 255, 0.4);
}
body.dark_mode .edpro_partnership .edpro_referral_input{ background: rgba(255, 255, 255, 0.06); }
body.dark_mode .edpro_partnership .edpro_copy_btn{
	border-color: rgba(255, 255, 255, 0.12);
	background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.12) 50.5%, rgba(255,255,255,0.02) 100%);
}
body.dark_mode .edpro_partnership .edpro_lb_avatar{ background: rgba(255, 255, 255, 0.08); color: #fff; }
/* Balance card: the light affiliate_balance_glow.png washes the card white in dark mode
   (background-size:cover fills it, hiding the white balance text). Swap in the dark variant
   — same rounded-corner mask + top-right blue glow, rebuilt on the dark card surface. */
body.dark_mode .edpro_partnership .edpro_balance_card{
	background-image: url('../../img/ed_pro/affiliate_balance_glow_dark.png');
}

body.ed_pro .client_setting_page .setting_area_sec,
body.ed_pro .client_setting_page .bg-white,
body.ed_pro .client_setting_page .card.bg-white {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Tabs — recolor active tab text + underline to EDPRO blue, mirroring how
   prime_flow / easy_platform override the base ShamrockGreen (server-wide,
   same .nav-tabs-mod structure so it beats the base !important rules). */
body.ed_pro .nav-tabs-mod li > a.active{ color: #000000 !important; }
body.ed_pro .nav-tabs-mod li > a.active::after,
body.ed_pro .nav-tabs-mod li > a:hover::after{ background: #375DFB !important; }

/* Inputs + country select2 — white, rounded, soft border (Figma radius-10 / #e2e4e9) */
body.ed_pro .client_setting_page .form-control,
body.ed_pro .client_setting_page .select2-container--default .select2-selection--single{
	height: 48px !important; background: #ffffff !important;
	border: 1px solid #e2e4e9 !important; border-radius: 10px !important; box-shadow: none;
}
body.ed_pro .client_setting_page .form-control{ padding: 0 14px; color: #0a0d14; }
/* icon inputs (e.g. the email-settings search box) keep room for .input_icon */
body.ed_pro .client_setting_page .input_group_icon .form-control{ padding-left: 40px; }
body.ed_pro .client_setting_page textarea.form-control{ height: auto !important; padding: 12px 14px; }
body.ed_pro .client_setting_page .form-control:focus{
	border-color: #375dfb !important; box-shadow: 0 0 0 3px rgba(55, 93, 251, 0.12);
}
body.ed_pro .client_setting_page .form-control[readonly]{ background: #f6f7f9 !important; color: #525866; }
body.ed_pro .client_setting_page .select2-container--default .select2-selection--single{ display: flex; align-items: center; }
body.ed_pro .client_setting_page .select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height: 20px; color: #0a0d14; padding-left: 14px; position: relative; top: 12px;
}
body.ed_pro .client_setting_page .select2-container--default .select2-selection--single .select2-selection__arrow{ height: 46px; }
/* Flatten the .slect2-mod wrapper so the bordered field is ONLY the select2
   selection above — the wrapper otherwise draws its own pill, giving a double box. */
body.ed_pro .client_setting_page .slect2-mod,
body.ed_pro .client_setting_page .slect2-mod_new,
body.ed_pro .client_setting_page .slect2-mod_lh40,
body.ed_pro .client_setting_page .slect2-mod .select2-container{
	background: transparent !important; border: 0 !important; border-radius: 0 !important;
	box-shadow: none !important; height: auto !important; padding: 0 !important;
}
/* Download-tab date pill: the label (.datepicker_custom_range) is absolute and
   width:100% of the container, which the base sizes to the empty daterange input.
   Give it room so "This month" / date ranges aren't clipped. */
body.ed_pro .client_setting_page .daterange-container{ min-width: 170px; }

/* ── Settings page — DARK MODE ───────────────────────────────────────────────
   The light rules above hardcode white (#ffffff) inputs with dark text, so they stay
   white in dark mode. Re-theme the fields, the country select2, and the active tab
   (which is set to #000 above → invisible on dark) to the EDPRO dark palette. */
body.ed_pro.dark_mode .client_setting_page .form-control,
body.ed_pro.dark_mode .client_setting_page .select2-container--default .select2-selection--single{
	background: #1F1D3A !important;
	border-color: rgba(255, 255, 255, 0.10) !important;
	color: #FFFFFF !important;
}
body.ed_pro.dark_mode .client_setting_page .form-control{ color: #FFFFFF !important; }
body.ed_pro.dark_mode .client_setting_page .form-control::placeholder{ color: rgba(255, 255, 255, 0.4) !important; }
body.ed_pro.dark_mode .client_setting_page .form-control[readonly]{
	background: rgba(255, 255, 255, 0.04) !important; color: rgba(255, 255, 255, 0.55) !important;
}
body.ed_pro.dark_mode .client_setting_page .form-control:focus{
	border-color: #375dfb !important; box-shadow: 0 0 0 3px rgba(55, 93, 251, 0.18);
}
body.ed_pro.dark_mode .client_setting_page .select2-container--default .select2-selection--single .select2-selection__rendered{
	color: #FFFFFF !important;
}
body.ed_pro.dark_mode .client_setting_page .select2-container--default .select2-selection--single .select2-selection__arrow b{
	border-color: rgba(255, 255, 255, 0.6) transparent transparent transparent !important;
}
/* Active tab text — #000 in the light rule becomes white on the dark strip. */
body.ed_pro.dark_mode .client_setting_page .nav-tabs-mod li > a.active,
body.ed_pro.dark_mode .nav-tabs-mod li > a.active{ color: #FFFFFF !important; }

/* ── Add-payment card ("Payment details") — DARK MODE ────────────────────────
   The card carries base `bg-white` (→ #191919 near-black) plus a light #B9B9B9 glow
   shadow that halos on dark. Re-theme to the EDPRO card surface; the amount input,
   the dark method-icon (d_theme swap) and the blue active border already work. */
body.ed_pro.dark_mode .payment-container_style{
	background: #14132A !important;
	box-shadow: none !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
body.ed_pro.dark_mode .payment-container_style .textSecondary{
	color: rgba(255, 255, 255, 0.55) !important;
}
body.ed_pro.dark_mode .payment-container_style .payment-method_style{
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.10);
}

/* ── Ed Pro orders filter row ─────────────────────────────────────────────
   The orders page reuses the legacy filter components (.store_dropdown_area,
   .cust_select2, .store_calender_area) which the dashboard's .edpro_perf_filters
   rules don't cover, so their heights don't match and the date pill — sized to
   the empty input — clips its label and spills out of the row. Mirror the
   dashboard pill pattern (label = visible button, input = transparent overlay),
   sized to the orders row's 40px controls, and keep the cluster wrapping inside
   the box. Scoped to the filter components so the action row below is untouched. */
body.ed_pro .left_content_section1 .d-flex.flex-wrap.select-drop-gap{
	align-items: center;
}
body.ed_pro .left_content_section1 .store_calender_area{ margin-bottom: 0; flex: 0 0 auto; }
body.ed_pro .left_content_section1 .store_calender_area .daterange-container{
	display: inline-flex !important;
	position: relative;
	height: 40px;
	min-width: 150px;
	/* Grow the bordered pill to fit the selected custom range instead of
	   capping at the (often squashed) flex parent, which let the date text
	   spill outside the box. The filter row is flex-wrap, so it wraps. */
	max-width: none;
	width: max-content;
}
body.ed_pro .left_content_section1 .store_calender_area .datepicker_custom_range{
	position: static;
	transform: none;
	width: 100%;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	line-height: 40px !important;
	white-space: nowrap;
}
body.ed_pro .left_content_section1 .store_calender_area .daterange-btn{
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	opacity: 0 !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	z-index: 2;
}
/* ===== "Talk in chat" group-select modal (#showGroupChatModel)  */
body.ed_pro #showGroupChatModel .modal-dialog{	
	max-width: 420px;
}
body.ed_pro #showGroupChatModel .modal-body{	
	max-height: 60vh;	overflow-y: auto;
}
body.ed_pro #showGroupChatModel .use_chat-mainDiv{	
	display: flex;	flex-direction: column;	gap: 10px;
}
body.ed_pro #showGroupChatModel .card__item-main{	
	background: #F6F8FA;	
	border: 1px solid #E2E4E9;	
	border-radius: 12px;	
	padding: 12px;	
	margin: 0;	
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
body.ed_pro #showGroupChatModel .card__item-main:hover{
		border-color: #375DFB;	background: #FFFFFF;
}
body.ed_pro #showGroupChatModel .card__item{	
	gap: 12px;
}
body.ed_pro #showGroupChatModel .card__item img{	
	width: 40px;	height: 40px;	border-radius: 50%;	object-fit: cover;	flex: 0 0 40px;
}
body.ed_pro #showGroupChatModel .card__item-info h3{	
	font-size: 14px;	font-weight: 600;	color: #010F24;
}
body.ed_pro #showGroupChatModel .chat_type-status span{	
	font-size: 12px;	color: #868C98;
}
body.ed_pro.dark_mode #showGroupChatModel .card__item-main{
	background: var(--edpro-field);
	border-color: var(--edpro-border);
}
body.ed_pro.dark_mode #showGroupChatModel .card__item-main:hover{
	border-color: #375DFB;
	background: var(--edpro-card);
}
body.ed_pro.dark_mode #showGroupChatModel .card__item-info h3{
	color: var(--edpro-text);
}

body.ed_pro.dark_mode #showGroupChatModel .use_chat-mainDiv h5{
	color: var(--edpro-text);
}
/* Chat modal shell + header in dark (defensive — generic .modal-content
   covers it, but pin the ID so a stacked open over a light surface can't
   leak through) */
body.ed_pro.dark_mode #showGroupChatModel .modal-content{
	background: var(--edpro-card) !important;
	border-color: var(--edpro-border) !important;
}
body.ed_pro.dark_mode #showGroupChatModel .modal-header{
	border-bottom-color: var(--edpro-border);
}

/*  EDPRO Product Detail*/

body.ed_pro.dark_mode #productDetailModal .modal-content{
	background: var(--edpro-bg) !important;
	color: var(--edpro-text) !important;
}
body.ed_pro.dark_mode #productDetailModal .modal-header{
	border-bottom-color: var(--edpro-border);
	background: transparent;
}
body.ed_pro.dark_mode .cpd_edpro_wrap{ color: var(--edpro-text); }

/* Header card + right conversation card → dark card surface
   (.bg-white utility competes, so !important) */
body.ed_pro.dark_mode .product_detail_border,
body.ed_pro.dark_mode .cpd_right_edpro{
	background: var(--edpro-card) !important;
	border-color: var(--edpro-border) !important;
}

/* Product thumbnail tile */
body.ed_pro.dark_mode .cpd_info .product_header_image{
	background: var(--edpro-field);
	border-color: var(--edpro-border);
	box-shadow: none;
}

/* Product title + store subtitle */
body.ed_pro.dark_mode .ph_text .limit-product-title,
body.ed_pro.dark_mode .ph_text .text_link,
body.ed_pro.dark_mode .ph_text .product-title-original a{
	color: var(--edpro-text) !important;
}
body.ed_pro.dark_mode .ph_text .fs_14,
body.ed_pro.dark_mode .ph_text .fs_14 .fw-medium{
	color: var(--edpro-text-muted);
}

/* Special-request + PCS dropdown pills */
body.ed_pro.dark_mode .cpd_btn_edpro .special_request .dropdown-toggle,
body.ed_pro.dark_mode .cpd_btn_edpro .store_dropdown .dropdown-toggle{
	background: var(--edpro-field);
	border-color: var(--edpro-border);
	color: var(--edpro-text);
}