body.customers_password_new .navbar.navbar-primary,
body.customers_password_edit .navbar.navbar-primary,
body.customers_password .navbar.navbar-primary,
body.customers_password_new .sidebar,
body.customers_password_edit .sidebar,
body.customers_password .sidebar {
  display: none !important;
}

body.customers_password_new #page-layout,
body.customers_password_edit #page-layout {
  display: block !important;
}

body.customers_password #page-layout {
  display:none !important
}

body.customers_password_new .section,
body.customers_password_edit .section,
body.customers_password .section {
  max-width: 480px;
  margin: 80px auto;
  padding: 40px 30px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

body.customers_password_new #page-main .section,
body.customers_password_edit #page-main .section, 
body.customers_password #page-main .section {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  max-width: 460px;
  margin: 100px auto;
  padding: 40px 35px;
}

body.customers_password_new #page-main .section h1.top,
body.customers_password_edit #page-main .section h1.top,
body.customers_password #page-main .section h1.top {
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  color: #2d2d2d;
}

body.customers_password_new #page-main .section p,
body.customers_password_edit #page-main .section p,
body.customers_password #page-main .section p {
  text-align: center;
  color: #555;

}

/* Main centered card */
.customers_password_new .section,
.customers_password_edit .section,
.customers_password .section {
  width: 500px !important;
  min-width: 328px !important;
  max-width: 500px !important;
  padding: var(--Spacing-spacer-05, 24px) !important;
  justify-content: center !important;
  gap: var(--Spacing-spacer-05, 24px) !important;
  border-radius: var(--Border-radius-border-radius-2, 8px);
  border: 2px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
  background: var(--Colors-Surface-surfacePrimary, #FFF);
  margin: 100px auto;
}

/* Page title + paragraph */
.customers_password_new h1.top,
.customers_password_edit h1.top,
.customers_password h1.top {
  color: var(--Colors-Content-contentPrimary, #000) !important;
  text-align: center !important;
  font-family: "Segoe UI";
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 150% !important;
  margin: 0 0 8px 0;
}

.customers_password_new p,
.customers_password_edit p,
.customers_password p {
  color: var(--Colors-Content-contentSecondary, #313131) !important;
  text-align: center !important;
  font-family: "Segoe UI";
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 150% !important;
}

/* Input fields */
.customers_password_new input.form-control,
.customers_password_edit input.form-control,
.customers_password input.form-control {
  width: 100% !important;
  height: 48px;
  border-radius: 8px !important;
  font-size: 16px;
  padding: 12px 10px;
  border: 2px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
  background: var(--Colors-Surface-surfacePrimary, #FFF);
  box-sizing: border-box;
  transition: background 0.15s, border 0.15s, color 0.15s;
}

/* Hover + focus interactions (same as login) */
.customers_password_new input.form-control:hover,
.customers_password_edit input.form-control:hover,
.customers_password input.form-control:hover {
  background: #f5f5f5;
  border: 2px solid #454545;
  color: #111;
  border-radius: 8px !important;
}

.customers_password_new input.form-control:focus,
.customers_password_edit input.form-control:focus,
.customers_password input.form-control:focus { 
  background: #ffffff;
  border: 2px solid #93117E;
  color: #111;
  border-radius: 8px !important;
}

/* Submit button (same brand purple and transitions) */
.customers_password_new input[type="submit"].btn-primary,
.customers_password_edit input[type="submit"].btn-primary,
.customers_password input[type="submit"].btn-primary {
  width: 100% !important;
  background: #93117E !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  margin-top: 17px !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
  text-align: center !important;
  color: #F9F1F7 !important;
  font-family: "Segoe UI";
  font-size: 16px;
  line-height: 150%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  transition: background 0.18s, text-decoration 0.18s !important;
}

.customers_password_new input[type="submit"].btn-primary:hover,
.customers_password_edit input[type="submit"].btn-primary:hover,
.customers_password input[type="submit"].btn-primary:hover {
  background: #860F73 !important;
  text-decoration: underline !important;
}

.customers_password_new input[type="submit"].btn-primary:focus,
.customers_password_edit input[type="submit"].btn-primary:focus,
.customers_password input[type="submit"].btn-primary:focus {
  background: #5B0B4F !important;
  text-decoration: underline !important;
}

/* Eye icon alignment for password reveal */
.customers_password_edit .password-wrapper {
  position: relative;
  width: 100%;
}

.customers_password_edit .password-wrapper .toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 24px;
  height: 24px;
  z-index: 10;
}

/* Responsive layout parity */
@media (max-width: 768px) {
  .customers_password_new .section,
  .customers_password_edit .section,
  .customers_password .section {
    width: 90% !important;
    max-width: 500px !important;
    margin: 24px auto !important;
    padding: 16px !important;
    border: 1px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
  }

  .customers_password_new h1.top,
  .customers_password_edit h1.top,
  .customers_password h1.top {
    font-size: 18px !important;
  }

  .customers_password_new p,
  .customers_password_edit p,
  .customers_password p {
    font-size: 14px !important;
  }
}

.customers_password_edit label,
.customers_password label {
  display: block !important;
  margin-bottom: 4px !important;
  color: var(--Colors-Content-contentPrimary, #000);
  font-family: "Segoe UI";
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.017px;
}

.customers_password_edit .example-text,
.customers_password .example-text {
  margin-top: 4px !important;
  color: var(--Colors-Content-contentTertiary, #6A6A6A) !important;
  font-family: "Segoe UI" !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 150% !important;
}

.customers_password_edit label,
.customers_password label {
  display: block;
  margin-bottom: 4px;
  color: var(--Colors-Content-contentPrimary, #000);
  font-family: "Segoe UI";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.017px;
}

.customers_password_edit .custom-login-header h2,
.customers_password_edit .custom-login-header p,
.customers_password_edit label,
.customers_password_edit .example-text,
.customers_password_new .custom-login-header h2,
.customers_password_new .custom-login-header p,
.customers_password_new label,
.customers_password_new .example-text,
.customers_password .custom-login-header h2,
.customers_password .custom-login-header p,
.customers_password label,
.customers_password .example-text {
  text-align: left !important;
  width: 100%;
}

.customers_password_edit .section > .row,
.customers_password .section > .row {
  padding: 0px 24px !important;
  box-sizing: border-box;
}

.customers_password_edit .container > .row:has(.nav.nav-pills),
.customers_password_new .container > .row:has(.nav.nav-pills),
.customers_password .container > .row:has(.nav.nav-pills) {
  display: none !important;
}

.customers_password_edit #page-main,
.customers_password_new #page-main,
.customers_password #page-main {
  padding: 0 !important;
}

/* Fixed footer */
.customers_password_new footer.footer,
.customers_password_edit footer.footer,
.customers_password footer.footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: #fff !important;
  z-index: 100 !important;
  border-top: 1px solid #e3e3e3 !important;
  margin: 0 !important;
  padding: var(--Spacing-spacer-04, 16px) !important;
  box-sizing: border-box !important;
}

/* Divider sits exactly above footer (no gap) */
.customers_password_new .footer-divider,
.customers_password_edit .footer-divider,
.customers_password .footer-divider {
  position: fixed !important;
  left: 0 !important;
  bottom: 0 !important;
  transform: translateY(-60%) !important; /* hugs the footer */
  width: 100% !important;

  background: #fff !important;
  border-top: 1px solid #e3e3e3 !important;
  border-bottom: 1px solid #e3e3e3 !important;
  z-index: 99 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;

  padding: 24px 0 !important; /* your 24px spacing preserved */
  height: auto !important;
}

/* Space above fixed elements so content isn’t covered */
.customers_password_new #page-main,
.customers_password_edit #page-main,
.customers_password #page-main {
  padding-bottom: 100px !important;
}

@media (max-width: 718px) {
  .customers_password_new .footer-divider,
  .customers_password_edit .footer-divider,
  .customers_password .footer-divider {
    transform: translateY(-100%) !important;
  }
}

/* ================================================
   PASSWORD RESET PAGE (customers_password_new + customers_password)
   Matches the same look & feel as the Change Password page
   ================================================ */

/* Centered section block */
body.customers_password_new #page-main .section,
body.customers_password #page-main .section {
  width: 500px !important;
  min-width: 328px !important;
  max-width: 500px !important;
  padding: var(--Spacing-spacer-05, 24px) !important;
  justify-content: center !important;
  gap: var(--Spacing-spacer-05, 24px) !important;
  border-radius: var(--Border-radius-border-radius-2, 8px);
  border: 2px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
  background: var(--Colors-Surface-surfacePrimary, #FFF);
  margin: 100px auto !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Title + subtext */
body.customers_password_new #page-main .section h1.top,
body.customers_password #page-main .section h1.top {
  color: var(--Colors-Content-contentPrimary, #000) !important;
  text-align: center !important;
  font-family: "Segoe UI";
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 150% !important;
  margin: 0 0 8px 0;
}

body.customers_password_new #page-main .section p,
body.customers_password #page-main .section p {
  color: var(--Colors-Content-contentSecondary, #313131) !important;
  text-align: center !important;
  font-family: "Segoe UI";
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 150% !important;
  margin-bottom: 16px !important;
}

/* Input */
body.customers_password_new #page-main input[type="email"],
body.customers_password #page-main input[type="email"] {
  width: 100% !important;
  height: 48px !important;
  border-radius: 8px !important;
  border: 2px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
  background: #FFF !important;
  padding: 12px 10px;
  box-sizing: border-box;
  transition: background 0.15s, border 0.15s, color 0.15s;
}

body.customers_password_new #page-main input[type="email"]:hover,
body.customers_password #page-main input[type="email"]:hover {
  background: #f5f5f5;
  border: 1px solid #454545;
}

body.customers_password_new #page-main input[type="email"]:focus,
body.customers_password #page-main input[type="email"]:focus {
  background: #fff;
  border: 1px solid #93117E;
}

/* Submit button — selects by type so it catches btn-brand on the
   error page (which has classes "btn btn-brand btn-elevate btn-pill"
   instead of btn-primary) */
body.customers_password_new #page-main input[type="submit"],
body.customers_password #page-main input[type="submit"] {
  width: 100% !important;
  background: #93117E !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  margin-top: 18px !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
  text-align: center !important;
  color: #F9F1F7 !important;
  font-family: "Segoe UI";
  font-size: 16px;
  line-height: 150%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  transition: background 0.18s, text-decoration 0.18s !important;
}

body.customers_password_new #page-main input[type="submit"]:hover,
body.customers_password #page-main input[type="submit"]:hover {
  background: #93117E !important;
  text-decoration: underline !important;
}

body.customers_password_new #page-main input[type="submit"]:focus,
body.customers_password #page-main input[type="submit"]:focus {
  background: #5B0B4F !important;
  text-decoration: underline !important;
}

body.customers_password_new #page-main input[type="submit"]:hover,
body.customers_password_edit #page-main input[type="submit"]:hover,
body.customers_password #page-main input[type="submit"]:hover {
  background: #93117E !important;
  text-decoration: underline !important;
  box-shadow: none !important;
}

/* Active state (pressed effect) */
body.customers_password_new #page-main input[type="submit"]:active,
body.customers_password_edit #page-main input[type="submit"]:active,
body.customers_password #page-main input[type="submit"]:active {
  background: #5B0B4F !important;
  text-decoration: underline !important;
  box-shadow: none !important;
}

        .navbar.navbar-default {
            display: none;
        }
        .navbar.navbar-primary {
            display: none;
        }

.custom-page-content-block h1.top {
    display: none;
}

.custom-page-content-block .row {
    margin-left: 0;
    margin-right: 0;
}

.custom-page-content-block.section {
    margin-bottom: 16px;
    padding: 0;
}

.main.main-raised > .container:nth-of-type(1),
.main.main-raised > .container:nth-of-type(2) {
    display: none;
}

        .main-raised {
            margin: 0;
        }


        .customers_sign_in a#logo img {
            margin: 0;
        }

        .customers_sign_in .input-group .input-group-addon {
            padding: 0 !important;
        }

        .customers_sign_in .card-signup .card-content,
        .customers_sign_in .card .card-content {
            padding: 0 !important;
        }

        .customers_sign_in .form-group {
            margin: 0 !important;
        }

        .customers_sign_in .input-group {
            display: block !important;
            /* or desired value */
        }

.customers_sign_in .custom-login-header h2 {
  margin-bottom: 8px;
}

        .customers_sign_in .info-item_right {
            justify-content: flex-end;
        }

.customers_sign_in .card{
  margin-bottom: 0px !important;
  }

        .customers_sign_in .custom-header,
        .customers_password .custom-header {
            display: flex !important;
            padding: var(--Spacing-spacer-03, 12px) var(--Spacing-spacer-05, 24px) !important;
            flex-direction: column!important;
            align-items: center!important;
            align-self: stretch!important;
            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05),
            0px 4px 10px 0px rgba(0, 0, 0, 0.05)!important;
        }

        .customers_sign_in .custom-header .custom-logo-img,
        .customers_password .custom-header .custom-logo-img {
            width: 83px !important;
            height: 35px !important;
            aspect-ratio: 83/35 !important;
        }

        .customers_sign_in .card-signup {
            display: flex!important;
            width: 500px!important;
            min-width: 328px!important;
            max-width: 500px!important;
            padding: var(--Spacing-spacer-05, 24px)!important;
            flex-direction: column!important;
            justify-content: center!important;
            align-items: center !important;
            gap: var(--Spacing-spacer-05, 24px)!important;
            border-radius: var(--Border-radius-border-radius-2, 8px);
            border: 2px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
            background: var(--Colors-Surface-surfacePrimary, #FFF);
        }

        .footer-divider {
            display: flex;
            padding: var(--Spacing-spacer-05, 24px) 0px;
            align-items: center;
            gap: var(--Spacing-spacer-04, 16px);
            align-self: stretch;
            border-top: 1px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
            border-bottom: 1px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
            background: var(--Colors-Surface-surfacePrimary, #FFF);
            stroke-width: 3px;
            stroke: var(--Colors-Content-contentBrand, #93117E);
            justify-content: center;
            overflow-x: hidden !important;
        }
        .footer-divider svg {
            flex-shrink: 0;
        }
        @media (min-width: 992px) {
            .col-md-offset-4 {
                margin-left: auto;
                margin-right: auto;
                float: none;
                width: fit-content;
            }
        }
        .card-signup .clearfix,
        .card-signup .text-center {
            display: none !important;
        }
      
.administrator-login-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: var(--Colors-Content-contentBrand, #93117E);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.019px;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

.administrator-login-link:hover {
    color: #860F73;
    text-decoration: underline !important;

}

.administrator-login-link:focus {
    color: #5B0B4F;
    text-decoration: underline !important;
}

        .card-signup hr {
            display: none !important;
        }

        .custom-login-header {
            padding-bottom: 24px;
            display: block;
            width: 100%;
            box-sizing: border-box;
        }

        .customers_sign_in .custom-login-header h2 {
            color: var(--Colors-Content-contentPrimary, #000)!important;
            text-align: center!important;
            font-family: "Segoe UI";
            font-size: 24px!important;
            font-style: normal!important;
            font-weight: 700!important;
            line-height: 150%!important;
            letter-spacing: 0.029px!important;
            align-self: stretch!important;
            margin-top: 0px;
        }

        .customers_sign_in .custom-login-header p {
            color: var(--Colors-Content-contentSecondary, #313131)!important;
            text-align: center!important;
            font-family: "Segoe UI";
            font-size: 16px!important;
            font-style: normal!important;
            font-weight: 400!important;
            line-height: 150%!important;
            letter-spacing: 0.019px!important;
            align-self: stretch!important;
        }

        .customers_sign_in .card-signup input[type="email"],
        .customers_sign_in .card-signup input[type="password"],
        .customers_sign_in .card-signup input[type="text"] {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            height: 48px;
            border-radius: 8px !important;
            padding: 12px 10px;
            margin-bottom: 4px;
            transition: background 0.15s, border 0.15s;
            box-sizing: border-box;
            outline: none;
            display: block !important;
            border: 2px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
            background: var(--Colors-Surface-surfacePrimary, #FFF);
        }

        .new_customer {
            width:100%;
            
        }


.customers_sign_in .card-signup input[type="email"]:hover,
.customers_sign_in .card-signup input[type="password"]:hover,
.customers_sign_in .card-signup input[type="text"] {
    background: #f5f5f5;
    border: 2px solid #454545;
    color: #111;
    border-radius: 8px !important;
}


.customers_sign_in .card-signup input[type="email"]:focus,
.customers_sign_in .card-signup input[type="password"]:focus,
.customers_sign_in .card-signup input[type="text"] {
    background: #ffffff;
    border: 2px solid #93117E;
    color: #111;
    border-radius: 8px !important;
}


        .customers_sign_in .card-signup label {
            display: block !important;
            margin-bottom: 4px !important;
            color: var(--Colors-Content-contentPrimary, #000);
            font-family: "Segoe UI";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
            /* 21px */
            letter-spacing: 0.017px;
        }

        .customers_sign_in .card-signup .example-text {
            margin-top: 4px !important;
            color: var(--Colors-Content-contentTertiary, #6A6A6A);
            font-family: "Segoe UI";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
            /* 21px */
            letter-spacing: 0.017px;
        }

        .customers_sign_in .checkbox,
        .radio {
            margin-bottom: 0px;
        }

        .customers_sign_in .card {
            box-shadow: none !important;
            padding: 24px !important;
        }

        @media (min-width: 768px) and (max-width: 991px) {
         .customers_sign_in .col-sm-6 {
          width: auto;
          }
        }

        .custom-user:hover {
            border-radius: var(--Border-radius-border-radius-circle, 999px);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--Spacing-spacer-02, 8px);
            color: var(--Colors-Content-contentBrandDark, #420839);
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 150%;
            /* 24px */
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: none;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
            background: var(--colors-surface-surface-brand-light-pressed, #EFDBEC);
        }


        .customers_sign_in .card-signup .checkbox label {
            display: flex !important;
            align-items: center !important;
            gap: 12px;
            border-radius: 12px;
            padding: 8px;
            border: 2px solid transparent;
            background: transparent;
            transition: background 0.17s, border 0.17s, color 0.17s;
            cursor: pointer;
            color: var(--Colors-Content-contentPrimary, #000);
            font-family: "Segoe UI";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
            letter-spacing: 0.019px;
            margin-left:0px;
        }
        .card-signup .checkbox .checkbox-material {
            padding-right: 0px;
            top:3px !important;
        }

        .fa-envelope,
        .fa-lock {
            display: none;
        }


        .customers_sign_in .card-signup .checkbox label:hover,
        .customers_sign_in .card-signup .checkbox input[type="checkbox"]:focus + span {
            background: #f7e8f4 !important;
            color: #a8529d !important;
            text-decoration: underline;
        }

        .customers_sign_in .card-signup .checkbox,
        .customers_sign_in .card .checkbox,
        .customers_sign_in .card .radio {
            margin-top: 0 !important;
        }

        .customers_sign_in .card-signup input[type="submit"].btn-primary {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            background: #93117E !important;
            border: none !important;
            font-weight: 600 !important;
            border-radius: 8px !important;
            margin-top: 18px !important;
            box-shadow: none !important;
            transition: background 0.18s, text-decoration 0.18s !important;
            letter-spacing: 1px !important;
            text-transform: none !important;
            text-align: center !important;
            color: var(--Colors-Content-contentBrandLight, #F9F1F7);
            font-family: "Segoe UI";
            font-size: 16px;
            font-style: normal;
            line-height: 150%;
            display: flex;
            padding: var(--Spacing-spacer-03, 12px) var(--Spacing-spacer-04, 16px);
            justify-content: center;
            align-items: center;
            gap: 4px;
            flex: 1 0 0;
        }

        .customers_sign_in .card-signup input[type="submit"].btn-primary:hover {
            background: #860F73 !important;
            text-decoration: underline !important;
        }
         .customers_sign_in .card-signup input[type="submit"].btn-primary:active {
             background: #5B0B4F !important;
        }

        .customers_sign_in .card-signup .forgot-password {
            display: block !important;
            text-align: center !important;
            color: #000000 !important;
            font-size: 16px !important;
            margin-top: 16px !important;
            text-decoration: underline !important;
            width: 100% !important;
            box-sizing: border-box !important;
            font-family: "Segoe UI";
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
            /* 24px */
            letter-spacing: 0.019px;
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: none;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
        }

        .customers_sign_in .main.main-raised {
            background: #f5f5f7 !important;
        }

        .footer .row {
            display: none;
        }

        footer.footer {
            background-color: #FFFFFF;
            padding: var(--Spacing-spacer-04, 16px);
        }

        footer.footer .container {
            align-items: flex-start;
            max-width: 1700px;
            margin: 0 auto;
            flex-wrap: wrap;
            gap: var(--Spacing-spacer-04, 16px);
            background-color: #FFFFFF;
        }

        footer.footer.footer-black.footer-big {
            background: #FFFFFF !important;
        }
        footer *,
        #custom-footer-bar,
        #custom-footer-bar *,
        #link-group,
        #link-group * {
            color: var(--Colors-Content-contentTertiary, #6A6A6A);
            font-family: "Segoe UI", sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
            letter-spacing: 0.019px;
        }


        #link-group,
        #link-group a {
            color: var(--Colors-Content-contentPrimary, #000);
            font-family: "Segoe UI", sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 150%;
            /* 24px */
            text-decoration: none;
        }

        #link-group a:hover {
            text-decoration: underline;
        }
        #custom-footer-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }



        body.customers_sign_in .custom-search-wrapper,
        body.customers_sign_in .custom-nav-wrapper {
            display: none !important;
        }

        #custom-header {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            align-self: stretch;
            justify-content: space-between;
            padding: 0px var(--Spacing-spacer-05, 24px);
            border-bottom: 1px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
            background: var(--Colors-Surface-surfacePrimary, #FFF);
        }



        .custom-logo-img {
            width: 83px !important;
            height: 35px !important;
            aspect-ratio: 83 / 35 !important;
        }

        .custom-logo-search-wrapper {
            display: flex;
        }

        .custom-search-wrapper {
            display: flex !important;

            min-width: 0 !important;
            width: 100% !important;
            justify-content: center !important;
            max-width: 800px;
            flex-direction: column;
            align-items: flex-start;
            flex: 1 0 0;
        }

        .custom-search {
            display: flex !important;
            width: 100% !important;
            justify-content: center !important;
            padding: var(--Spacing-spacer-04, 16px) !important;
            margin: 0;
        }


        .custom-search-group {
            display: flex !important;
            max-width: 800px !important;
            width: 100% !important;
            min-width: 220px !important;
            margin: 0 auto !important;
            transition: background 0.17s !important;
            box-sizing: border-box !important;
            position: relative !important;
            padding: var(--Spacing-spacer-01, 4px) var(--Spacing-spacer-02, 8px) var(--Spacing-spacer-01, 4px) var(--Spacing-spacer-04, 16px);
            align-items: center;
            gap: var(--Spacing-spacer-01, 4px);
            align-self: stretch;
            border-radius: var(--Border-radius-border-radius-circle, 999px);
            border: 1px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
            background: var(--Colors-Surface-surfacePrimary, #FFF);
        }

        .custom-search-group:hover {
            background: #F5F5F5 !important;
            border: 1px solid #000000;
        }

        .custom-nav-wrapper {
            height: 84px;
        }

        .custom-user-link {
            display: flex;
            align-items: center;
            padding: var(--Spacing-spacer-03, 12px) var(--Spacing-spacer-05, 24px);
            justify-content: center;
            gap: var(--Spacing-spacer-02, 8px);
        }

        .caret {
            display: none
        }

        .custom-user-link svg {
            flex-shrink: 0;
        }

        .custom-notif-link {
            display: flex;
            align-items: center;
            width: 174px;
            height: 48px;
            gap: var(--Spacing-spacer-02, 8px);
            flex-shrink: 0;
            justify-content: center;
        }

        .custom-notif-link:hover {
            border-radius: var(--Border-radius-border-radius-circle, 999px);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--Spacing-spacer-02, 8px);
            color: var(--Colors-Content-contentBrandDark, #420839);
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 150%;
            /* 24px */
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: none;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
            background: var(--colors-surface-surface-brand-light-pressed, #EFDBEC);
        }

        .custom-cart-btn:hover {
            border-radius: var(--Border-radius-border-radius-circle, 999px);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--Spacing-spacer-02, 8px);
            color: var(--Colors-Content-contentBrandDark, #420839) !important;
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 150%;
            /* 24px */
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: none;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
            background: var(--colors-surface-surface-brand-light-pressed, #EFDBEC) !important;
        }


        .custom-notif-link svg {
            flex-shrink: 0;
        }

        .notif-label {
            display: inline-block;
        }



        .custom-search-input {
            border: none !important;
            outline: none !important;
            background: transparent !important;
            font-size: 15px !important;
            flex: 1 1 0% !important;
            height: 42px !important;
            line-height: 42px !important;
            box-sizing: border-box !important;
            min-width: 0 !important;
            margin: 0 !important;
            vertical-align: middle !important;
        }

        .custom-search-btn {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 36px !important;
            height: 36px !important;
            background: transparent !important;
            border-radius: 50% !important;
            color: #666 !important;
            font-size: 18px !important;
            cursor: pointer !important;
            transition: background 0.17s, color 0.17s !important;
            box-shadow: none !important;
            border: none !important;
            outline: none !important;
            position: static !important;
        }

        .custom-search-btn:hover,
        .custom-search-btn:focus {
            background: transparent !important;
            color: #666 !important;
            text-decoration: none !important;
            box-shadow: none !important;
        }

        .custom-search-btn i {
            font-size: 18px !important;
            margin: 0 !important;
            vertical-align: middle !important;
        }

        .custom-search-group .material-input {
            display: none !important;
        }

        .custom-nav-wrapper {
            display: flex;
            align-items: center;
            gap: var(--Spacing-spacer-02, 8px);
        }

        .custom-user {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: var(--Spacing-spacer-02, 8px);
            position: relative;
        }

        .custom-user .dropdown-menu {
            display: none;
            position: absolute;
            left: 50%;
            top: 90%;
            transform: translateX(-50%);
            z-index: 1000;
            min-width: 160px;
            padding: var(--Spacing-spacer-02, 8px) 0px;
            align-items: flex-start;
            gap: var(--Spacing-spacer-02, 8px);
            border-radius: var(--Border-radius-border-radius-2, 8px) !important;
            border: 1px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
            background: var(--Colors-Surface-surfacePrimary, #FFF);
            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05), 0px 4px 10px 0px rgba(0, 0, 0, 0.05)!important;
            text-transform: capitalize;
        }

        .custom-user.open .dropdown-menu {
            display: block;
        }

        .custom-user .dropdown-menu li > a {
            margin: 0px;
        }

        .custom-user .dropdown-menu li a:hover {
            background: #f4e7f2;
            color: #93117e;
            box-shadow: none;
        }

        .custom-user .dropdown-footer:hover > a {
            background: #f4e7f2;
            color: #93117e;
            box-shadow: none;
        }

        .custom-notif .dropdown-menu li a:hover {

            background: #f4e7f2;
            color: #93117e;
            box-shadow: none;
        }

        .custom-notif .dropdown-menu li > a {
            margin: 0px
        }


        .custom-notif {
            position: relative;
        }



        #notification-menu {
            position: absolute;
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
            display: none;
            background: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            min-width: 200px;
        }


        .custom-nav-list {
            padding: 0px;
            list-style: none;
        }



        .custom-cart-btn {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            gap: var(--Spacing-spacer-02, 8px);
            background: var(--Colors-Surface-surfacePrimary, #FFF) !important;
            color: var(--Colors-Content-contentBrandDark, #420839) !important;
            text-align: center;
            font-family: "Segoe UI";
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 150%;
            border: none;
            box-shadow: none !important;
            border-radius: var(--Border-radius-border-radius-circle, 999px);

        }

        .custom-user-link,
        .custom-notif-link,
        .custom-notif-link .notif-label {
            color: var(--Colors-Content-contentBrandDark, #420839);
            text-align: center;
            font-family: "Segoe UI";
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 150%;
        }

        .cart-button {
            margin-top: 0px;
        }

        ol,
        ul {
            margin-top: revert !important;
            margin-bottom: revert;
        }

        body,
        * {
            font-family: "Segoe UI", sans-serif !important;
        }

        @media (max-width: 600px) {
            #custom-header,
            .custom-info-bar {
                min-width: 0 !important;
                width: 100% !important;
                max-width: 100vw !important;
                overflow-x: hidden !important;
                box-sizing: border-box !important;
            }

            .customers_sign_in .custom-info-bar {
                justify-content: center;
            }

            .info-item.right {
                display: none !important;
            }

            .customers_sign_in .card-signup {
                width: 100% !important;
            }

            #custom-footer-bar {
                display: flex !important;
                flex-direction: column-reverse !important;
                align-items: center;
                text-align: center;
            }

            #link-group {
                margin-bottom: 10px;
            }
        }

        .custom-search-input::placeholder {
            color: var(--Colors-Content-contentTertiary, #6A6A6A);
            font-size: 15px !important;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
            /* 24px */
            letter-spacing: 0.019px;
        }



/*MOBILE TEST */

@media (max-width: 768px) {
  #custom-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
    gap: 8px;
    overflow: visible !important;
  }

  .custom-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }

  /* When scrolled down, the whole header is pinned to the viewport.
     JS adds .header-fixed and inserts #custom-header-spacer (equal to
     the header's height) so content below doesn't jump. */
  #custom-header.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1600;
    background: #fff;
    border-bottom: 1px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
  }

  /* Hide just the search row while scrolling down. Collapsing max-height
     (not display:none) lets the header smoothly shrink and keeps the
     search form in the DOM so it stays functional. */
  #custom-header.header-fixed .custom-search-wrapper {
    transition: max-height 0.25s ease, opacity 0.18s ease, margin 0.25s ease;
  }
  #custom-header.header-fixed.search-hidden .custom-search-wrapper {
    max-height: 0 !important;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
  #custom-header-spacer {
    display: none;
  }

  .custom-logo-wrapper {
    order: 0;
    height: 48px;
  }

  .custom-nav-wrapper {
    display: flex;
    align-items: center;
    gap: 0px;
    order: 1;
    height: 48px;
  }

  .custom-user,
  .custom-notif,
  .custom-cart {
    display: flex;
    align-items: center;
  }


  .custom-user-link {
    font-size: 0 !important;
  }


  .custom-notif .notif-label {
    display: none !important;
  }


  .custom-cart .total-amount,
  .custom-cart .minimum-order {
    display: none !important;
  }


  .custom-search-wrapper {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .custom-user-link {
    padding: 8px;
    justify-content: unset;
    gap: 0px;
  }

  .custom-notif-link {
    width: auto;
    height: auto;
    padding: 8px
  }

  .custom-cart .btn.custom-cart-btn {
    padding: 8px !important;
    margin: 0 !important;

  }
}

@media (max-width: 768px) {
  .dropdown-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    background: white;
    z-index: 9999;
    border-radius: 0;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  .customers_sign_in  .custom-header-row {
  display: flex;
  justify-content: center !important;
}  
  
      #link-group {
        margin-bottom: 16px;
    }
  
  .custom-logo-wrapper {
    display: flex;
    align-items: center;
  }

  .custom-hamburger {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    border-radius: var(--Border-radius-border-radius-2, 8px);
    cursor: pointer;
  }

  .custom-hamburger svg {
    width: 48px;
    height: 48px;
    display: block;
  }
}

@media (min-width: 768px) {

  .custom-login {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--Spacing-spacer-02, 8px);
    position: relative;
  }

  .custom-login-link {
    width: 100px;
    height: 48px;
    padding: 12px;
    background: transparent;
    color: var(--Colors-Content-contentBrandDark, #420839);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .custom-login-link:hover {
    border-radius: var(--Border-radius-border-radius-circle, 999px);
    color: var(--Colors-Content-contentBrandDark, #420839);
    text-align: center;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    background: var(--colors-surface-surface-brand-light-pressed, #EFDBEC);
  }
}

.ace-icon.fa.fa-exclamation-triangle {
  display: none;
}

#link-group .ripple-container {
  display: none !important;
  visibility: hidden !important;
}

#link-group a.ripple {
  background: none !important;
  box-shadow: none !important;
}

#link-group a:hover {
  color: #860F73 !important;
  text-decoration: none !important;
}

#link-group {
  display: flex;
  align-items: center;   
  gap: 16px;            
}

#new_customer .pull-right:not(.submit-container) {
  display: none;
}

.customers_sign_in .card.card-signup .pull-left {
  padding: 8px 0px 24px 0px !important;
}

.customers_sign_in .card-signup .forgot-password:hover {
  color: #860F73 !important;
  text-decoration: underline !important;
}

.customers_sign_in .card-signup .forgot-password:active {
  color: #5B0B4F !important;
  text-decoration: underline !important;
}

@media (max-width: 768px) {
  .customers_sign_in .custom-login-header h2 {
    font-size: 18px !important;
  }
}

#custom-footer-bar {
    max-width: 1700px;
    margin: 0 auto; 
    width: 100%; 
}

@media (max-width: 767px) {
  .custom-search,
  .navbar-form {
    padding: 0 !important;
  }
}

.custom-user.open,
.custom-user > a.custom-user-link[aria-expanded="true"],
.custom-user:focus-within,
.custom-user:has(> ul.dropdown-menu[aria-hidden="false"]) {
  border-radius: var(--Border-radius-border-radius-circle, 999px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--Spacing-spacer-02, 8px);
  color: var(--Colors-Content-contentBrandDark, #420839);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  background: var(--colors-surface-surface-brand-light-pressed, #EFDBEC);
}

.custom-user .dropdown-menu {
  display: flex;
  flex-direction: column;
  padding: var(--Spacing-spacer-02, 8px) 0;
  align-items: flex-start;
  gap: var(--Spacing-spacer-02, 8px);

  border-radius: var(--Border-radius-border-radius-2, 8px);
  border: 1px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
  background: var(--Colors-Surface-surfacePrimary, #FFF);

  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05),
              0 4px 10px 0 rgba(0, 0, 0, 0.05);
}


.custom-user .dropdown-menu li > a {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacer-02, 8px);
  padding: var(--Spacing-spacer-02, 8px) var(--Spacing-spacer-04, 16px);

  color: var(--Colors-Content-contentPrimary, #000);
  font-family: "Segoe UI", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; 
  letter-spacing: 0.017px;
  text-align: left;
  text-decoration: none; 
}


.custom-user .dropdown-menu li > a:hover,
.custom-user .dropdown-menu li > a:focus {
  background: var(--colors-surface-surface-brand-light-pressed, #EFDBEC);
  color: var(--Colors-Content-contentBrandDark, #420839);
}

.custom-user .dropdown-menu>li>a {
  display:grid;place-items:flex-start;width:100%;
  padding:var(--Spacing-spacer-02,8px) var(--Spacing-spacer-04,16px);
  box-sizing:border-box;color:var(--Colors-Content-contentPrimary,#000);
  font-family:"Segoe UI",sans-serif;font-size:14px;font-weight:400;
  line-height:150%;letter-spacing:.017px;text-align:center;
  text-decoration:none;white-space:nowrap
}
.custom-user .dropdown-menu>li>a:hover,
.custom-user .dropdown-menu>li>a:focus {
  background:var(--colors-surface-surface-brand-light-pressed,#EFDBEC);
  color:var(--Colors-Content-contentBrandDark,#420839)
}
.custom-user.open>ul.dropdown-menu,
.custom-user>a.custom-user-link[aria-expanded="true"]+ul.dropdown-menu,
.custom-user:has(>ul.dropdown-menu[aria-hidden="false"])>ul.dropdown-menu {
  display:flex;flex-direction:column;align-items:stretch;
  padding:var(--Spacing-spacer-02,8px) 0;
  gap:var(--Spacing-spacer-02,8px);
  border-radius:var(--Border-radius-border-radius-2,8px);
  border:1px solid var(--Colors-Borders-borderOpaque,#E3E3E3);
  background:var(--Colors-Surface-surfacePrimary,#FFF);
  box-shadow:0 1px 4px rgba(0,0,0,.05),0 4px 10px rgba(0,0,0,.05)
}
.custom-user .dropdown-menu>li{width:100%}


.fa.fa-power-off {
  display:none;
}

.custom-search-group input:focus {
  border-color: #EFDBEC !important;
  background-color: #fff !important;
}

.section:has(#customer-login-form) {
  padding: 64px 0px;
}

.main.main-raised {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

.main.main-raised > .footer-divider {
  margin-top: auto !important;
  flex-shrink: 0 !important;
  width: 100%;
}

.main.main-raised > footer.footer.footer-black.footer-big {
  flex-shrink: 0 !important;
  width: 100%;
  margin-top: 0 !important;  /* <-- prevent gap */
}

.main.main-raised > *:last-child { margin-bottom: 0 !important; }

@media (max-width: 767px) {
  .section:has(#customer-login-form) {
    padding: 24px 0 !important;
  }
}

@media (max-width: 768px) {
  .footer-divider {
    padding: 16px 0 !important;
  }
}

.total-amount {
  text-transform: capitalize;
}

  #current-order-total { position: relative; }
  .empty-cart-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    height: 283px;
    padding: 24px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 100000;
    text-align: center;
  }
  .empty-cart-pop::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 20px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ccc;
  }
  .empty-cart-pop::after {
    content: "";
    position: absolute;
    top: -5px;
    right: 20px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
  }


#notification-menu.dropdown-menu-right.dropdown-navbar.dropdown-menu.dropdown-caret.dropdown-close {
  border-radius: var(--Border-radius-border-radius-2, 8px);
  background: var(--Colors-Surface-surfacePrimary, #FFF);
  box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.10),
              0 1px 20px 0 rgba(0, 0, 0, 0.10);
  display: flex;
  width: 400px;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-spacer-04, 16px);
}

#notification-menu li,
#notification-menu span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-spacer-01, 4px);
  align-self: stretch;
  overflow: hidden;
  color: var(--Colors-Content-contentSecondary, #313131);
  text-overflow: ellipsis;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;
}

#notification-menu .dropdown-header {
  font-weight: 700;
}

#notification-menu .pull-right {
  display: none !important;
}

#notification-menu .notification-link {
  padding: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: 100%;
}

#notification-menu .notification-link div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: 100%;
}

#notification-menu .notification-link .pull-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

/* Old Font Awesome comment icon is replaced by the status SVGs below.
   Kept as a hard hide in case any markup still ships one. */
#notification-menu .notification-link .fa.fa-comment {
  display: none !important;
}

/* Status icon chip — same palette as .notif-icon on the
   Notifications page, scaled down for the 400px dropdown */
#notification-menu .notif-dd-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#notification-menu .notif-dd-icon img {
  width: 16px;
  height: 16px;
  display: block;
}

#notification-menu .notif-dd-icon::before {
  display: none !important;
}

#notification-menu .notif-dd-icon.icon-info    { background: #dce8f8; }
#notification-menu .notif-dd-icon.icon-success { background: #d4f0e4; }
#notification-menu .notif-dd-icon.icon-danger  { background: #fde0e0; }

/* Keep the text aligned next to the chip and let it wrap normally */
#notification-menu .notification-link .pull-left {
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#notification-count {
  display: flex;
  padding: 4px 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  right: -4px;
  top: -4px;
  border-radius: var(--Border-radius-border-radius-circle, 999px);
  background: var(--Colors-Surface-surfaceAccent, #F3D018);
}

.empty-cart-pop {
  position: absolute;
  width: 280px;
  height: 283px;
  padding: 24px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 100000;
  text-align: center;
}
.empty-cart-pop::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 20px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ccc;
}
.empty-cart-pop::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 20px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
}
.empty-cart-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
}
.empty-cart-illustration svg {
  width: 100%;
  height: 100%;
}
.empty-cart-text .title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}
.empty-cart-text .subtitle {
  font-size: 13px;
  color: #555;
}

.customers_sign_in .card-signup input[type="password"],
.customers_sign_in .card-signup input[type="text"],
input[type="email"] {
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.password-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

#customer_password {
  padding-right: 34px;
}

.password-wrapper .toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 24px;
  height: 24px;
  z-index: 10;
}

/* Desktop inline info bar */
.customers_sign_in #desktopInfoBar,
.customers_password #desktopInfoBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  min-width: 1024px;
  padding: 0 var(--Spacing-spacer-05, 24px);
  flex-shrink: 0;
  align-self: stretch;
  background-color: #F5F5F5;
  max-width: 1700px;
  width: 100%;
  margin: 0 auto;
}

.customers_sign_in #desktopInfoBar .inline-block,
.customers_password #desktopInfoBar .inline-block {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacer-02, 8px);
  flex: 1 0 0;
  min-width: 0;
  justify-content: center;
}

.customers_sign_in #desktopInfoBar .icon,
.customers_password #desktopInfoBar .icon {
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  color: #93117E;
}

.customers_sign_in #desktopInfoBar span,
.customers_password #desktopInfoBar span {
  color: var(--Colors-Content-contentSecondary, #313131);
  font-family: "Segoe UI";
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;
}

/* Mobile carousel items */

.customers_sign_in #carouselHeaderInfo .carousel-content,
.customers_password #carouselHeaderInfo .carousel-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.customers_sign_in #carouselHeaderInfo .icon,
.customers_password #carouselHeaderInfo .icon {
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  color: #93117E;
  flex-shrink: 0;
}

.customers_sign_in #carouselHeaderInfo span,
.customers_password #carouselHeaderInfo span {
  color: #313131;
  font-family: "Segoe UI";
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;
}

#page-layout {
    display: flex;
    align-items: flex-start;
    background: #F5F5F5 !important;
}

.sidebar {
    width: 255px;
    padding: 8px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: #fff;
    margin: 16px;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    border-radius: var(--Border-radius-border-radius-2, 8px);
}

#page-main {
    flex: 1;
    padding: 16px;
}

#sb-menu {
    list-style: none;
    margin: 0 !important;
    padding: 0;
}
#sb-menu > li > a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #420839
}
#sb-menu > li.divider {
    height: 1px;
    background: #e5e5e5;
    margin: 8px 0;
}

.sb-orders-sub {
    list-style: none;
    margin: 0;
    padding-left: 0px;
}
.sb-orders-sub li a {
    padding: 6px 12px;
    display: block;
    color: #555;
}

.sb-api-sub {
  padding-left: 0;       /* remove indent */
  list-style: none;      /* remove bullets */
  margin: 0;             /* optional: clean up spacing */
}


#cat-flyout {
    position: absolute;
    top: 0;
    left: 280px;
    width: 223px;
    height:48px;
}

#cat-flyout ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width:255px;
}
#cat-flyout ul li {
    position: relative;
}
#cat-flyout ul li a {
    padding: 12px;
    text-decoration: none;
    color: #420839;
    white-space: nowrap;
}

#cat-flyout ul li > ul {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    background: white;
    border-radius: 8px;
    min-width: 200px;
    box-shadow: none;
    z-index: 1000;
}

#cat-flyout ul li {
  position: relative;
}

#cat-flyout ul li > ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 100%;
}

#cat-flyout ul li > ul {
  display: none;
}

#cat-flyout ul li:hover > ul {
  display: block;
}

.sidebar {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#sb-menu {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap:4px;
}


.sidebar {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#sb-menu {
    flex: 1;
}

#sb-menu .sb-icon img,
#sb-menu .sb-icon i,
#sb-menu .sb-trail i {
    width: 24px;
    height: 24px;
    font-size: 24px;
    object-fit: contain;
}

#sb-menu li > a {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: var(--Spacing-spacer-02, 8px);
    padding: var(--Spacing-spacer-03, 12px) var(--Spacing-spacer-03, 12px) var(--Spacing-spacer-03, 12px) 0;
}

#sb-menu li > a {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: var(--Spacing-spacer-02, 8px);
    padding: var(--Spacing-spacer-03, 12px) var(--Spacing-spacer-03, 12px) var(--Spacing-spacer-03, 12px) 0;
    text-decoration: none;
}

#sb-menu .sb-icon img,
#sb-menu .sb-icon i {
    width: 24px;
    height: 24px;
    font-size: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

#sb-menu li > a .sb-text {
    color: var(--Colors-Content-contentBrandDark, #420839);
    font-family: "Segoe UI", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.019px;
    flex: 1 0 0;
}


#sb-menu .sb-trail i {
    width: 24px;
    height: 24px;
    font-size: 16px;
    flex-shrink: 0;
}

.nav-pills > li i {
    display: block;
    font-size: 30px;
    padding: 0;
}

#sb-menu li > a {
  display: flex !important;
  align-items: center !important;
  padding: var(--Spacing-spacer-03, 12px) !important;
  border-radius: var(--Border-radius-border-radius-2, 8px);

}

#sb-menu li > a .sb-text {
  margin-right: var(--Spacing-spacer-02, 8px) !important;
}

#sb-menu li > a .sb-trail {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
}

.nav-pills.nav-stacked>li+li {
    margin-top: 0px;
}


#categories-menu li > a {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacer-02, 4px);
  align-self: stretch;
  padding: var(--Spacing-spacer-03, 12px) var(--Spacing-spacer-03, 12px) var(--Spacing-spacer-03, 12px) 0;
  
  border-radius: var(--Border-radius-border-radius-2, 8px);
  background: var(--Colors-Surface-surfacePrimary, #FFF);
  text-decoration: none;
  color: inherit;
}

#categories-menu li > a:hover {
  background: #F4E7F2;
}

#categories-menu li > a:active {
  background: #EFDBEC;
}

.card {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    border-radius: 8px;
    color: rgba(0, 0, 0, 0.87);
    background: white;
    box-shadow: none;
}

#categories-menu a {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacer-02, 8px);
  align-self: stretch;
  padding: var(--Spacing-spacer-03, 12px) var(--Spacing-spacer-03, 12px) var(--Spacing-spacer-03, 12px) 0;

  border-radius: var(--Border-radius-border-radius-2, 8px);
  background: var(--Colors-Surface-surfacePrimary, #FFF);
  text-decoration: none;
  color: inherit;
}

#categories-menu a:hover {
  background: #F4E7F2;
}

#categories-menu a:active {
  background: #EFDBEC;
}

#categories-menu a {
  display: flex;
  align-items: center;
  padding: 12px !important;
}

#categories-menu .sb-icon {
  display: flex;
  align-items: center;
}

#categories-menu .sb-trail {
  margin-left: auto; 
  display: flex;
  align-items: center;
}

#categories-menu li, #categories-menu .dropdown-menu li {
    border-top: 0px;
    position: relative;
}

.card > *:not(:last-child) {
  margin-bottom: 4px;
}


#categories-menu a.has-submenu > .sb-trail {
  display: flex;
  margin-left: auto;
  align-items: center;
}

#categories-menu a {
  display: flex;
  align-items: center;
  height: 48px;           
  padding: 12px 12px 12px 0;  
  box-sizing: border-box;    
}

#categories-menu ul li:not(:last-child) {
  margin-bottom: 4px;
}

#categories-menu a.submenu-open {
  background: #F9F1F7 !important;
  font-weight:600 !important;
  text-decoration: underline;
}

#categories-menu a {
  position: relative;
}

#categories-menu a.submenu-open::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 4px;
  height: 24px;

  border-radius: 0 var(--Border-radius-border-radius-2, 8px) 
                   var(--Border-radius-border-radius-2, 8px) 0;
  background: var(--Colors-Content-contentBrand, #93117E);
}

#sb-menu a[aria-expanded="true"] {
  background: #F9F1F7;
  position: relative;
  font-weight:600 !important;
}

#sb-menu a[aria-expanded="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  border-radius: 0 var(--Border-radius-border-radius-2, 8px)
                 var(--Border-radius-border-radius-2, 8px) 0;
  background: var(--Colors-Content-contentBrand, #93117E);
}


#sb-menu li > a:hover {
  background: #F4E7F2;
  text-decoration: underline;
}

#sb-cat-trigger.flyout-open {
  background: #F9F1F7;
  position: relative;
  font-weight:600 !important;
  text-decoration: underline;
}

#sb-cat-trigger.flyout-open::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  border-radius: 0 var(--Border-radius-border-radius-2, 8px)
                 var(--Border-radius-border-radius-2, 8px) 0;
  background: var(--Colors-Content-contentBrand, #93117E);
}

.sidebar {
  color: var(--Colors-Content-contentBrandDark, #420839);
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;
}

.sidebar * {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.sidebar,
.sidebar a,
.sidebar ul li,
.sidebar ul li a,
.sidebar .sb-icon,
.sidebar .sb-trail {
  color: var(--Colors-Content-contentBrandDark, #420839) !important;
  font-family: "Segoe UI", sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 150% !important;
  letter-spacing: 0.019px !important;
}

.sidebar a {
  text-transform: none !important;
}

.sidebar .sb-api > a {
  text-transform: uppercase !important;
}

nav>li>a:focus {
    background-color: #ffffff !important;
}

.navbar.navbar-primary.hidden-xs.hidden-sm {
  display: none !important;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; min-height: 100vh !important;
    margin: 0 !important; border: none !important; border-radius: 0 !important;
    z-index: 2000 !important; background: #fff !important;
    transform: translateX(-100%); transition: transform 0.3s ease;
    display: flex; flex-direction: column;
  }
  .sidebar.sidebar-open { transform: translateX(0); }

  .sb-header {
    position: fixed; top: 0; left: 0; right: 0; height: 56px;
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    padding: 0 16px; background: #fff; 
    border-bottom: 1px solid #E3E3E3; z-index: 2001;
  }
  .sb-header .logo-wrap {
    display: flex; align-items: center;
    flex: 1 0 auto; 
  }
  .sb-header .logo-wrap img {
    height: 32px; width: auto; display: block;
  }
  .sb-close-btn {
    font-size: 22px; cursor: pointer; color: #420839;
    margin-left: auto; 
  }

  .sb-content {
    margin-top: 63px;
    flex: 1;
    display: flex; flex-direction: column;
  }


  .sb-page {
    display: none; flex: 1; padding: 8px 16px; box-sizing: border-box;
  }
  .sb-page.active { display: block; }
  .sb-page-header {
    font: 400 16px/150% "Segoe UI", sans-serif !important;
    color: var(--Colors-Content-contentPrimary, #313131) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 12px 16px !important;
    box-sizing: border-box;
    border-bottom: 1px solid #E3E3E3 !important;
  }

  .sb-page-header u {
  color: var(--Colors-Content-contentBrand, #000) !important;
  text-decoration: underline;
}
  .sb-page-header span { margin-left: 0px; }

  .sb-page ul, #sb-menu { list-style: none; margin: 0; padding: 0; }
  .sb-page ul li a, #sb-menu > li > a {
    display: flex; align-items: center; justify-content: left;
    padding: 12px; text-decoration: none;
    font: 400 16px/150% "Segoe UI", sans-serif !important; letter-spacing: 0.019px;
    color: var(--Colors-Content-contentPrimary, #420839) !important;
    border-radius: 6px;
    font-weight: 400 !important;
  }
  .sb-page ul li a:hover, #sb-menu > li > a:hover { background: #F4E7F2; }

  .sidebar a[aria-expanded="true"], #sb-cat-trigger.flyout-open {
    font-weight: 400 !important; background: none !important;
  }
  .sidebar a[aria-expanded="true"]::before, #sb-cat-trigger.flyout-open::before {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .sb-orders > a .sb-trail i,
  .sb-api > a .sb-trail i,
  .sb-sku > a .sb-trail i,
  .sb-delivery > a .sb-trail i,
  .sb-balance > a .sb-trail i,
  .sb-requests > a .sb-trail i,
  .sb-moreinfo > a .sb-trail i,
  #sb-cat-trigger .sb-trail i {
    font-family: "bootstrap-icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    display: inline-flex; align-items: center;
  }
  .sb-orders > a .sb-trail i::before,
  .sb-api > a .sb-trail i::before,
  .sb-sku > a .sb-trail i::before,
  .sb-delivery > a .sb-trail i::before,
  .sb-balance > a .sb-trail i::before,
  .sb-requests > a .sb-trail i::before,
  .sb-moreinfo > a .sb-trail i::before,
  #sb-cat-trigger .sb-trail i::before {
    content: "\F285"; /* Chevron right */
  }
}


  #sb-menu > li:first-child > a,
  #sb-menu > li > a[href*="zendesk"] {
    justify-content: flex-start !important;
  }


@media (min-width: 769px) {
  .sb-page, .sb-header { display: none !important; }
   
  
}

@media (max-width: 768px) {
  .sb-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 80px !important;          
    padding: 16px !important; 
    box-sizing: border-box !important;
  }

  .sb-header .logo-wrap {
    display: flex !important;
    align-items: center !important;         
    height: 100% !important;
  }

  .sb-header .logo-wrap img {   
    width: auto !important;
  }

  .sb-close-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    width: 48px !important;
    margin-left: auto !important;  
  }
}

@media (max-width: 768px) {
  .sb-orders-sub,
  .sb-api-sub,
  .sb-sku-sub,
  .sb-delivery-sub,
  .sb-balance-sub,
  .sb-requests-sub,
  .sb-moreinfo-sub {
    display: none !important;
  }
}


@media (max-width: 768px) {
  #sb-menu.nav.nav-pills.nav-stacked {
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .sb-page-header i.bi {
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal;
    display: inline-flex;
    align-items: center;
  }
.sb-page-header [data-icon="chevron-left"]::before {
  content: "" !important;
}

.sb-page-header i.bi[data-icon="chevron-left"] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;

  background-image: url("https://res.cloudinary.com/dbrtm8pf6/image/upload/v1772011776/uploads/8313260e/ckeditor/pictures/38/data/mobile-back_1772011777.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
  .sb-close-btn i.bi {
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
  }
  .sb-close-btn [data-icon="x-lg"]::before {
    content: "\F659"; /* X icon */
  }
}

@media (max-width: 768px) {
  .sb-close-btn i.bi[data-icon="x"]::before {
    content: "\F659"; /* Bootstrap Icons "x" */
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    font-size: 22px;
    line-height: 1;
  }
.sb-close-btn:hover {
  background-color: #f5f5f5 !important;
  border-radius: 50% !important;
}

.sb-close-btn:focus {
  background-color: #E3E3E3 !important;
  border-radius: 50% !important;
}
}

.sb-orders-sub,
.sb-api-sub,
.sb-sku-sub,
.sb-delivery-sub,
.sb-balance-sub,
.sb-requests-sub,
.sb-moreinfo-sub {
  list-style: none !important;
  margin: 0;
  padding-left: 0; /* keeps items aligned with parent menu */
}

.container.hidden-md.hidden-lg.visible-sm.visible-xs {
  display: none !important;
}

.sidebar {
  display: flex;
  flex-direction: column;
}

.sidebar ul {
  flex: 1;         
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar .sb-footer {
  margin-top: auto;
}

#sb-menu li a.active {
  background-color: #F9F1F7;
  font-weight: 600 !important;
}

.logo.bottom20 {
  padding-left: 0px !important;
}

#categories-menu,
#categories-menu ul {
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1),
              0 1px 20px rgba(0, 0, 0, 0.1) !important;
}

#cat-flyout #categories-menu a {
  color: var(--Colors-Content-contentPrimary, #000);
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: 0.019px;
}

.sidebar ul,
.sidebar li {
  list-style: none;  
  margin: 0;     
  padding: 0; 
}

 #categories-menu > li > a[aria-expanded="true"],
#sb-menu > li > a[aria-expanded="true"],
#sb-cat-trigger.flyout-open {
  border-radius: 8px 8px 0 0 !important;
}

#categories-menu ul li > a,
#sb-menu ul li > a {
  border-radius: 0 !important;
}

#categories-menu ul li:last-child > a,
#sb-menu ul li:last-child > a {
  border-radius: 0 0 8px 8px !important;
}

.sb-page-header i[data-icon="chevron-left"] {
  padding-right: 4px;
}

@media (min-width: 769px) {
  #page-main {
    padding-left: 0 !important;
  }


  /* Sidebar grows to the full height of the page content. The menu
     column lays out as a flex column so the logout can stay pinned to
     the bottom of the sidebar. */
  .sidebar {
    display: flex;
    flex-direction: column;
  }

  #sb-menu {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  /* Push the logout block (and its divider) to the bottom of the column. */
  #sb-menu > li.sb-logout-divider {
    margin-top: auto;
  }
  #sb-menu > li.sb-logout {
    flex: 0 0 auto;
  }
}

@media (max-width: 768px) {
.sb-page-main {
  height: 100%;
  flex-direction: column;
}

.sb-page-main.active {
  display: flex;
}


  #sb-menu {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  #sb-menu > li.sb-logout-divider {
    margin-top: auto;
  }
}

@media (max-width: 768px) {
  .sidebar {
    height: 100vh;           
  }

  .sb-content {
    height: calc(100vh - 80px);   
    margin-top: 80px;            
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .sb-page.active {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }

  .sb-page-main #sb-menu {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .sb-page-main #sb-menu > li.sb-logout-divider {
    margin-top: auto;
  }
}


.toggle-password {
  width: 24px;
  height: 24px;
  padding: 8px;
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
}

.toggle-password:hover {
  background: #F4E7F2;
}

.toggle-password:active {
  background: #EFDBEC;
}

.form-group.has-error.is-focused .form-control {
  background: #ffffff !important;
  background-image: none !important;
}

@media (max-width: 768px) {
  .customers_password_new .section > .row,
  .customers_password .section > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }
}



.banner-card {
  width: 100%;
  margin-bottom: var(--Spacing-spacer-06, 16px) !Important;
}

.banner-content {
  width: 100%;
  background: var(--Colors-Surface-surfaceBrandLight, #F9F1F7);
  border: 2px solid var(--Colors-Borders-borderBrandLight, #EFDBEC);
  border-radius: var(--Border-radius-border-radius-2, 8px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--Spacing-spacer-05, 24px) 0;
}

.banner-inner {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1100px;
  height: 300px;
}

.banner-text {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  max-width: 380px;
}

.banner-text h2 {
  color: var(--Colors-Text-textPrimary, #1E1E1E);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.banner-text p {
  color: var(--Colors-Text-textSecondary, #4A4A4A);
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}

/* Button */
.banner-text .btn {
  background: transparent;
  border: 1px solid var(--Colors-Borders-borderBrandLight, #EFDBEC);
  color: var(--Colors-Content-contentBrand, #9B0059);
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  margin-top: var(--Spacing-spacer-03, 12px);
}

.banner-text .btn:hover {
  background: var(--Colors-Surface-surfaceBrandLight, #F9F1F7);
  color: var(--Colors-Content-contentBrandHover, #7A004A);
}

.banner-icon {
  flex: 0 0 420px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-icon img {
  width: 400px;
  height: 300px;
  object-fit: contain;
  border-radius: var(--Border-radius-border-radius-2, 8px);
}

@media (max-width: 1024px) {
  .banner-inner {
    flex-direction: column;
    height: auto;
    text-align: center;
  }

  .banner-text {
    max-width: 100%;
    align-items: center;
  }

  .banner-icon {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
  }

  .banner-icon img {
    width: 100%;
    height: auto;
    max-width: 400px;
  }
}

#page-main .main-area.col-md-12 {
  width: 100%;
}

body.index-page.orders_confirm_order_success .bottom50.main-area.col-md-12 {
  background-color: #F5F5F5 !important;
}

body.index-page.orders_confirm_order_success .banner-card {
  background: #FFF;
  border-radius: var(--Border-radius-border-radius-2, 8px);
  padding: var(--Spacing-spacer-05, 16px);
}

body.index-page.orders_confirm_order_success .banner-content {
  background: var(--Colors-Surface-surfaceBrandLight, #F9F1F7);
  border: 2px solid var(--Colors-Borders-borderBrandLight, #EFDBEC);
  border-radius: var(--Border-radius-border-radius-2, 8px);
  padding: var(--Spacing-spacer-05, 24px);
}

body.index-page.orders_confirm_order_success .bottom50.main-area.col-md-12 > h3 {
  display: none !important;
}
body.index-page.orders_confirm_order_success .banner-text .btn {
  color: var(--Colors-Content-contentBrand, #93117E);
  text-align: center;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
  border-radius: var(--Border-radius-border-radius-2, 8px);
  border: 2px solid var(--Colors-Borders-borderBrandLight, #EFDBEC);
  background: var(--Colors-Surface-surfacePrimary, #FFF);
  padding: 10px 24px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: none !important;
  text-transform: inherit;
  margin-top:16px;
}

body.index-page.orders_confirm_order_success .banner-text .btn:hover {
  background: #F4E7F2;
  color: #93117E;
  box-shadow: none !important;
}

body.index-page.orders_confirm_order_success .banner-text .btn:focus {
  background: #EFDBEC;
  color: #93117E;
  box-shadow: none !important;
  outline: none;
}


body.index-page.orders_confirm_order_success .banner-text h2 {
  color: var(--Colors-Content-contentBrandDark, #420839);
  font-family: "Segoe UI";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 36px */
  letter-spacing: 0.029px;
  margin: 0;
}

body.index-page.orders_confirm_order_success .banner-text p {
  color: var(--Colors-Content-contentBrandDark, #420839);
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: 0.019px;
  margin: 0;
}

/* === Order Details Card === */
body.index-page.orders_confirm_order_success .order-details-card {
  border-radius: var(--Border-radius-border-radius-2, 8px);
  display: flex;
  flex-direction: column;
  min-width: 500px;
  padding: var(--Spacing-spacer-04, 16px);
  align-items: flex-start;
  gap: var(--Spacing-spacer-05, 24px);
  align-self: stretch;
  background: var(--Colors-Surface-surfacePrimary, #FFF);
}

/* Headline */
body.index-page.orders_confirm_order_success .order-details-card h3 {
  color: var(--Colors-Content-contentPrimary, #000);
  font-family: "Segoe UI";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
  letter-spacing: 0.022px;
  margin: 0;
  width: 100%;
  padding-bottom: var(--Spacing-spacer-03, 12px);
  border-bottom: 1px solid var(--Colors-Borders-borderOpaque, #EEECEE);
}

/* Details table as flex layout */
body.index-page.orders_confirm_order_success .order-details-card .order-details-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.index-page.orders_confirm_order_success .order-details-card .order-details-table tr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

body.index-page.orders_confirm_order_success .order-details-card .order-details-table td {
  color: var(--Colors-Content-contentPrimary, #000);
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  padding: 4px 0;
  border: none;
}

/* Footer area */
body.index-page.orders_confirm_order_success .order-details-card .order-footer {
  display: flex;
  padding-top: 16px;
  justify-content: center;
  align-items: center;
  gap: var(--Spacing-spacer-04, 16px);
  align-self: stretch;
  border-top: 1px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
  background: var(--Colors-Surface-surfacePrimary, #FFF);
}

/* Button */
body.index-page.orders_confirm_order_success .order-details-card .order-footer .btn {
  display: flex;
  max-width: 715px;
  justify-content: center;
  align-items: center;
  gap: var(--Spacing-spacer-01, 4px);
  flex: 1 0 0;
  padding: var(--Spacing-spacer-03, 12px) var(--Spacing-spacer-04, 16px);
  border-radius: var(--Border-radius-border-radius-2, 8px);
  background: var(--Colors-Surface-surfaceBrand, #93117E);
  color: var(--Colors-Surface-surfacePrimary, #FFF);
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
  text-transform: capitalize !important;
  border: none;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Hover state */
body.index-page.orders_confirm_order_success .order-details-card .order-footer .btn:hover {
 background: #860F73;
  box-shadow: none;
}


body.index-page.orders_confirm_order_success .order-details-card .order-footer .btn:focus {
 background: #5B0B4F;
  box-shadow: none;
}

body.index-page.orders_confirm_order_success .order-details-card {
  margin-bottom: var(--Spacing-spacer-04, 0px) !important;
}

body.index-page.orders_confirm_order_success .btn,
body.index-page.orders_confirm_order_success .navbar .navbar-nav > li > a.btn {
  margin: 0 !important;
}

@media (max-width: 992px) {

  body.index-page.orders_confirm_order_success .banner-card,
  body.index-page.orders_confirm_order_success .order-details-card {
    width: 100%;
    min-width: unset;
    padding: var(--Spacing-spacer-04, 16px);
    margin-bottom: var(--Spacing-spacer-04, 16px);
  }

 
  body.index-page.orders_confirm_order_success .banner-text {
    align-items: center;
    max-width: 100%;
  }

  body.index-page.orders_confirm_order_success .banner-icon {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
  }

  body.index-page.orders_confirm_order_success .banner-icon img {
    width: 100%;
    height: auto;
    max-width: 400px;
  }

  body.index-page.orders_confirm_order_success .order-details-card .order-details-table tr {
    flex-direction: row;
    align-items: flex-start;
  }

  body.index-page.orders_confirm_order_success .order-details-card .order-details-table td {
    font-size: 14px;
  }


  body.index-page.orders_confirm_order_success .order-details-card .order-footer .btn {
    max-width: 100%;
    width: 100%;
    flex: none;
  }
}

#page-main {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 992px) {
  .index-page.orders_confirm_order_success .order-details-card h3 {
    text-align: left !important;
  }
}


/* ============================================================================
   UN-SUBMITTED ORDERS PAGE RESKIN
============================================================================ */

/* --- Base Card --- */
.card {
  background: #fff;

  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card h1,
.card h3 {
  font-family: 'Segoe UI', sans-serif;
  font-weight: 600;
  margin: 0;
  color: #111;
}

.card h1 { font-size: 20px; }
.card h3 { font-size: 16px; }

/* --- Filters --- */
#filterCard form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#filterCard .filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

#filterCard .filter-group {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
}

#filterCard label {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 4px;
}

#filterCard input.form-control {

  border-radius: 8px;
  height: 40px;
  font-size: 14px;
  padding: 8px 12px;
}

#filterCard .button-row {
  display: flex;
  gap: 12px;
}

#filterCard .button-row .btn {
  flex: 1;
  padding: 12px 0;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

#filterCard .btn-default {
  background: #fff;
  border: 1px solid #D0D0D0;
  color: #333;
}

#filterCard .btn-info {
  background: #93117E;
  border: none;
  color: #fff;
}

/* --- Table --- */
#pendingCard table.order-history {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 8px;
}

#pendingCard table th {
  background: #F9F9F9;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  padding: 12px;

}

#pendingCard table td {
  background: #fff;

  padding: 12px;
  vertical-align: middle;
}

#pendingCard table tr:hover td {
  background: #FAF5FB;
}


#pendingCard table td:last-child {

  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* --- Responsive Layouts --- */
@media (max-width: 900px) {
  #filterCard .filters-row { flex-direction: row; }
  #filterCard .filter-group { flex: 1 1 45%; }
}

@media (max-width: 600px) {
  #filterCard .filter-group { flex: 1 1 100%; }
  #filterCard .button-row { flex-direction: column; }
  #filterCard .button-row .btn { width: 100%; }
}

/* --- Hide old elements --- */
.alert-info,
.well,
.breadcrumb {
  display: none !important;
}

/* Calendar icons inside inputs */
.calendar-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-66%) !important;
  width: 40px !important;
  height: 40px !important;
  pointer-events: none;
  opacity: 0.8;
}

/* Delete & Review buttons (now pure SVGs) */
.svg-btn {
  width: 40px;
  height: 40px;
  object-fit: contain;
  transition: transform 0.2s ease;
}
.svg-btn:hover {
  transform: scale(1.05);
}

/* Empty state */
#empty-unsubmitted {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}
#empty-unsubmitted img {
  width: 180px;
  height: auto;
  margin-bottom: 20px;
}
#empty-unsubmitted p {
  font-size: 16px;
  color: #555;
  font-family: 'Segoe UI', sans-serif;
}

/* ============================================================================
   UN-SUBMITTED ORDERS CARD (TOP HEADER)
============================================================================ */
/* Optional spacing tweak for consistent vertical rhythm */
#titleCard + #filterCard {
  margin-top: 8px;
}

 /* ============================================================================
   FILTER FIELDS
============================================================================ */
#filterCard {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Filter layout */
#filterCard .filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

#filterCard .filter-group {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
}

/* Label styling */
#filterCard label {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  color: #000;
  font-family: "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.017px;
  margin-bottom: 4px;
}

/* Input styling */
#filterCard input.form-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 8px;
  border: 2px solid #E3E3E3;
  background: #FFF;
  padding: 4px 40px 4px 16px;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #6A6A6A;
  line-height: 150%;
  letter-spacing: 0.019px;
  height: 44px;
  box-sizing: border-box;
  width: 100%;
}

/* Calendar icon inside fields */
#filterCard .calendar-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-59%) !important;
  width: 40px;
  height: 40px;
  pointer-events: none;
}

/* Container for input + icon */
#filterCard .form-group {
  position: relative;
}

/* Mobile responsiveness */
@media (max-width: 900px) {
  #filterCard .filters-row {
    flex-direction: row;
  }
  #filterCard .filter-group {
    flex: 1 1 45%;
  }
}

@media (max-width: 600px) {
  #filterCard .filter-group {
    flex: 1 1 100%;
  }
}

/* ============================================================================
   PENDING ORDERS TABLE
============================================================================ */

/* Card container */
#pendingCard {
  background: #FFF;

  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Header text */
#pendingCard h3 {
  color: #000;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  margin-bottom: 16px;
}

/* Table layout */
#pendingCard table.order-history {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Table header row */
#pendingCard table.order-history thead tr {
  background: #FFF;
}

#pendingCard table.order-history th {
  color: #6A6A6A;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;
  text-align: left;
  padding: 12px 8px;
}

/* Table body cells */
#pendingCard table.order-history td {
  color: #313131;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  padding: 12px 8px;
  vertical-align: middle;
}

/* Price column */
#pendingCard table.order-history td .order-amount-with-currency {
  color: #048259;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}

/* Quantity column */
#pendingCard table.order-history td:nth-child(4) {
  color: #313131;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}

/* Action buttons column */
#pendingCard table.order-history td.actions-header,
#pendingCard table.order-history td:last-child {
  text-align: center;
}

/* SVG buttons */
.svg-btn {
  width: 32px;
  height: 32px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s ease;
  margin: 0 4px;
}

.svg-btn:hover {
  transform: scale(1.05);
}

/* Empty table state */
#empty-unsubmitted {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

#empty-unsubmitted img {
  width: 180px;
  height: auto;
  margin-bottom: 20px;
}

#empty-unsubmitted p {
  font-size: 16px;
  color: #555;
  font-family: "Segoe UI", sans-serif;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  #pendingCard {
    padding: 16px;
  }

  #pendingCard table.order-history th,
  #pendingCard table.order-history td {
    font-size: 14px;
    padding: 8px;
  }
}

.bottom50.main-area.col-md-12 {
  background: #f5f5f5 !important;
  padding: 0px
}

#pendingCard table.order-history th,
#pendingCard table.order-history td.actions-header {
  background: #fff;
  color: var(--Colors-Content-contentTertiary, #6A6A6A) !important;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;
  padding: 12px 8px;
  text-align: left;

}

#pendingCard .btn-danger,
#pendingCard .btn-success {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#pendingCard table.order-history th a.sort_link {
  color: var(--Colors-Content-contentTertiary, #6A6A6A) !important;
  font-family: "Segoe UI";
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 150% !important;
  letter-spacing: 0.019px !important;
  text-decoration: none !important;
}

#pendingCard table.order-history th,
#pendingCard table.order-history th a.sort_link,
#pendingCard table.order-history td.actions-header {
  background: #fff;
  color: var(--Colors-Content-contentTertiary, #6A6A6A) !important;
  font-family: "Segoe UI";
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 150% !important;
  letter-spacing: 0.019px !important;
  text-decoration: none !important;
}

.table > thead > tr > th {
  vertical-align: middle !important;
  border-bottom: none !important;
}

#pendingCard td.actions-header {
  width: auto !important;
}

#empty-unsubmitted {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

#empty-unsubmitted img {
  width: 200px;
  height: auto;
  margin-bottom: 24px;
}

#empty-unsubmitted h3 {
  font-family: "Segoe UI";
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
}

#empty-unsubmitted p {
  font-family: "Segoe UI";
  font-size: 16px;
  font-weight: 400;
  color: #313131;
  margin-bottom: 24px;
  max-width: 400px;
}

#empty-unsubmitted .explore-btn {
  border-radius: 8px;
  background: #93117E;
  color: #F9F1F7;
  font-family: "Segoe UI";
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  padding: 12px 24px;
  text-decoration: none;
}

/* Search + Explore buttons hover */
#filterCard .btn-info:hover,
#empty-unsubmitted .explore-btn:hover {
  background: #860F73 !important;
  box-shadow: none !important;
}

/* Clear button hover */
#filterCard .btn-default:hover {
  border-color: #E3E3E3 !important;
  background: #F5F5F5 !important;
  box-shadow: none !important;
}

#filterCard .btn,
#empty-unsubmitted .explore-btn,
#pendingCard .btn {
  text-transform: capitalize !important;
}

#filterCard .btn i.fa.fa-search,
#filterCard .btn i.fa.fa-times {
  display: none !important;
}

#filterCard .btn-default {
  box-shadow: none !important;
}
#filterCard hr {
  margin: 0 !important;
  border: none !important;
  height: 0 !important;
}

#filterCard hr {
  margin: 0 !important;
  border: none !important;
  height: 0 !important;
}

#page-main .main-area.col-md-12 {
    width: 100% !Important;
}

i.fa.fa-search {
  display: none !important;
}


#pendingCard table.order-history.table-hover > tbody > tr.qa-unsubmitted-orders-entry:hover,
#pendingCard table.order-history.table-hover > tbody > tr.qa-unsubmitted-orders-entry:hover > td {
  background-color: transparent !important;
}

#pendingCard table.order-history td:last-child,
#pendingCard table.order-history th.actions-header {
  text-align: center;
  vertical-align: middle;
}

#pendingCard table.order-history td:nth-child(1),
#pendingCard table.order-history td:nth-child(2) {
  color: var(--Colors-Content-contentSecondary, #313131) !important;
  font-family: "Segoe UI" !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
}
   
footer.footer {
  border-radius: var(--Border-radius-border-radius-2, 8px);
  background: var(--Colors-Surface-surfacePrimary, #FFF);
}

.filters-row .form-control:focus {
  border-color: #93117E !important;
}

.index-page.customers_password_new.customers_sign_in .back-to-login:hover {
  background: #F5F5F5 !important;
}

.index-page.customers_password_new.customers_sign_in .back-to-login:focus {
  background: #E3E3E3 !important;
}

.index-page.customers_password_new.customers_sign_in .btn-brand,
.index-page.customers_password_edit.customers_sign_in .btn-primary {
  background: #93117E !important;
}

.index-page.customers_password_new.customers_sign_in .btn-brand:hover,
.index-page.customers_password_edit.customers_sign_in .btn-primary:hover {
  background: #860F73 !important;
  box-shadow: none !important;
}

.index-page.customers_password_new.customers_sign_in .btn-brand:focus,
.index-page.customers_password_edit.customers_sign_in .btn-primary:focus {
  background: #5B0B4F !important;
}

.carousel-inner .carousel-content {
  padding: 8px 0;
}
.form-group .form-control {
  margin-bottom: 0 !important;
}

.index-page.orders_confirm_order_success .order-details-table td:first-child {
  font-weight: 600 !important;
}

.index-page.orders_confirm_order_success .order-details-table td:last-child {
  font-weight: 400 !important;
  color: #313131 !important;
}


.cart-actions .btn,
.footer-buttons .btn,
.btn-delete-all,
.btn-confirm,
.btn-add-cart,
#confirm-order-form-submit-button {
  text-transform: math-auto;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    box-shadow: none;
}

.bottom50 {
    margin-bottom: 16px;
}

@media (max-width: 1023px) {
.bottom50.main-area.col-md-12 {
	padding: 16px !important;
}
    #page-main {
       padding: 0px !important;
    }
  .bottom50 {
    margin-bottom: 0px;
}
}

@media (max-width: 768px) {
    #page-main {
        padding-left: 0px !important;
    }
}

.main.main-raised {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

#page-layout {
    flex: 1 !important;
    display: flex !important;
    align-items: stretch !important;
}

#page-main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.bottom50.main-area.col-md-12 {
    flex: 1 !important;
}

.bottom50.main-area.col-md-12 {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#custom-dashboard {
    flex: 1 !important;
}

#custom-dashboard {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 16px 128px !important;
    flex: 1 !important;
    background: #fff !important;
    border-radius: 8px !important;
}

#custom-dashboard-illustration {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    background: #fff !important;
    border-radius: 8px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

#custom-dashboard-illustration img {
    max-width: 400px !important;
    width: 100% !important;
}

#custom-dashboard-description {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 520px !important;
    background: #fff !important;
    border-radius: 8px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

#custom-dashboard-description h3 {
    color: var(--Colors-Content-contentPrimary, #000) !important;
    text-align: center !important;
    font-family: "Segoe UI" ;
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 150% !important;
    letter-spacing: 0.029px !important;
    margin: 0 !important;
}

#custom-dashboard-description p {
    color: var(--Colors-Content-contentSecondary, #313131) !important;
    text-align: center !important;
    font-family: "Segoe UI" ;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 150% !important;
    letter-spacing: 0.019px !important;
    margin: 0 !important;
}

.dashboard-btn {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    background: #93117E !important;
    color: #fff !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: "Segoe UI";
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 150% !important;
    box-sizing: border-box !important;
}

.dashboard-btn:hover {
    background: #860F73 !important;
    color: #fff !important;
    text-decoration: none !important;
}

.dashboard-btn:active {
    background: #5B0B4F !important;
    color: #fff !important;
}


@media (max-width: 767px) {
    #custom-dashboard {
        padding: 0 !important;
    }
}

/* =============================================
   Import Orders — Custom Styles
   ============================================= */

/* --- Hide original elements we're replacing --- */
.orders_import .alert.alert-info,
.orders_import .well,
.orders_import h1.top,
.orders_import .bottom50.main-area > p,
.orders_import .file.top10 > label,
.orders_import form > hr {
  display: none !important;
}

/* --- Page wrapper --- */
.orders_import #page-main {
  background: #f5f5f5;
}

.orders_import .bottom50.main-area {
  margin: 0 !important;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* =============================================
   Shared card style
   ============================================= */
.orders_import .io-section {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
}

/* =============================================
   Shared section heading
   ============================================= */
.orders_import .io-section-heading {
  font-family: "Segoe UI", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.022px;
  color: #000;
  margin: 0 0 14px;
}

/* =============================================
   How To Import Section
   ============================================= */
.orders_import .io-how-to p {
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;
  color: #313131;
  margin: 0 0 5px;
}

.orders_import .io-download-label {
  margin-top: 20px !important;
}

.orders_import .io-sample-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* Sample import file button */
.orders_import .io-sample-btn {
  display: flex;
  max-width: 715px;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  padding: 11px 32px;
  border-radius: 8px;
  border: 1px solid #EFDBEC;
  color: #93117E;
  text-decoration: none;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;
  background: #fff;
  transition: background-color 0.15s;
  cursor: pointer;
}

.orders_import .io-sample-btn:hover {
  background-color: #F4E7F2;
  color: #93117E;
  text-decoration: none;
}

.orders_import .io-sample-btn:active {
  background-color: #EFDBEC;
  color: #93117E;
  text-decoration: none;
}

/* =============================================
   Choose File / Dropzone Section
   ============================================= */
.orders_import .io-dropzone {
  border: 1.5px dashed #ccc;
  border-radius: 8px;
  padding: 80px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  margin-bottom: 18px;
  user-select: none;
  background: #fff;
}

.orders_import .io-dropzone:hover {
  background-color: #F9F1F7;
  border-color: #ccc;
}

.orders_import .io-dropzone:hover .io-dropzone-icon {
  filter: brightness(0) saturate(100%) invert(13%) sepia(75%) saturate(2000%) hue-rotate(280deg) brightness(60%);
}

.orders_import .io-dropzone:hover .io-upload-link {
  color: #93117E;
}

.orders_import .io-dropzone--active,
.orders_import .io-dropzone:active {
  background-color: #F4E7F2;
  border-color: #93117E;
}

.orders_import .io-dropzone--active .io-dropzone-icon,
.orders_import .io-dropzone:active .io-dropzone-icon {
  filter: brightness(0) saturate(100%) invert(8%) sepia(60%) saturate(3000%) hue-rotate(280deg) brightness(30%);
}

.orders_import .io-dropzone--active .io-upload-link,
.orders_import .io-dropzone:active .io-upload-link {
  color: #420839;
}

.orders_import .io-dropzone-icon {
  display: block;
  margin: 0 auto 14px;
  transition: filter 0.15s;
}

.orders_import .io-dropzone-text {
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;
  color: #313131;
  margin: 0 0 6px;
}

.orders_import .io-upload-link {
  color: #93117E;
  text-decoration: none;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;
  transition: color 0.15s;
}

.orders_import .io-upload-link:hover {
  text-decoration: underline;
  color: #93117E;
}

.orders_import .io-dropzone-hint {
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;
  color: #313131;
  margin: 0;
}

/* --- File selected state --- */
.orders_import .io-dropzone.io-has-file {
  border-color: #93117E;
  background-color: rgba(147, 17, 126, 0.03);
}

.orders_import .io-selected-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  color: #93117E;
  font-weight: 500;
}

/* --- Submit button --- */
.orders_import .io-submit-wrapper {
  display: flex;
  justify-content: center;
}

.orders_import input.btn-import {
  display: block !important;
  width: 560px !important;
  max-width: 100% !important;
  padding: 12px 24px !important;
  background-color: #e0e0e0 !important;
  border: none !important;
  border-radius: 6px !important;
  color: #aaa !important;
  font-family: "Segoe UI", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 150% !important;
  letter-spacing: 0.019px !important;
  text-align: center !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transition: background-color 0.15s, color 0.15s !important;
}

.orders_import input.btn-import.io-btn-active {
  background-color: #93117E !important;
  color: #fff !important;
  cursor: pointer !important;
}

.orders_import input.btn-import.io-btn-active:hover {
  background-color: #860F73 !important;
}

.orders_import input.btn-import.io-btn-active:active {
  background-color: #5B0B4F !important;
}

/* =============================================
   FAQ Section
   ============================================= */
.orders_import .io-faq-list {
  margin-top: 4px;
}

.orders_import .io-faq-item {
  border-bottom: 1px solid #e3e3e3;
}

.orders_import .io-faq-item:first-child {
  border-top: 1px solid #e3e3e3;
}

.orders_import .io-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  cursor: pointer;
  gap: 12px;
}

.orders_import .io-faq-question span {
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;
  color: #000;
  flex: 1;
}

.orders_import .io-faq-toggle {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

/* Show plus by default, hide minus */
.orders_import .io-faq-icon--plus  { display: block; }
.orders_import .io-faq-icon--minus { display: none;  }

/* When expanded: hide plus, show minus */
.orders_import .io-faq-toggle[aria-expanded="true"] .io-faq-icon--plus  { display: none;  }
.orders_import .io-faq-toggle[aria-expanded="true"] .io-faq-icon--minus { display: block; }

.orders_import .io-faq-answer {
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;
  color: #313131;
  padding: 0 0 16px;
  display: none;
}

.orders_import .io-faq-answer p {
  margin: 0 0 12px;
}

.orders_import .io-faq-answer p:last-child {
  margin-bottom: 0;
}

.orders_import .io-faq-section .io-section-heading {
	font-size:16px;
}

.io-faq-section {
	margin-bottom: 16px;
}


/* Hide legacy elements */
#page-main .breadcrumb,
#page-main .well,
#page-main .alert.alert-info,
.notifications #page-main h1.top {
  display: none !important;
}



.orders_unsubmitted #page-main .breadcrumb,
.orders_unsubmitted #page-main .well,
.orders_unsubmitted #page-main h1.top,
.orders_unsubmitted #page-main .alert.alert-info,
.orders_confirm_order #page-main h1.top {
    display: revert !important;
}

/* ── Empty state ── */
.notif-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 60px;
  text-align: center;
  background: #fff;
  border-radius: 8px;
}

.notif-empty-state img {
  width: 260px;
  max-width: 80%;
  margin-bottom: 28px;
}

.notif-empty-state h2 {
  font-family: "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 700;
  font-style: normal;
  line-height: 150%;
  letter-spacing: 0.029px;
  color: #000;
  margin: 0 0 8px;
}

.notif-empty-state p {
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 150%;
  letter-spacing: 0.019px;
  color: #313131;
  white-space: nowrap;
  margin: 0 0 24px;
}

.notif-empty-state .btn-explore {
  display: flex;
  width: 400px;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  background: #93117E;
  color: #fff;
  border: none;
  padding: 12px 32px;
  font-family: "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.notif-empty-state .btn-explore:hover {
  background: #860F73;
  color: #fff;
  text-decoration: none;
}

.notif-empty-state .btn-explore:active {
  background: #5B0B4F;
  color: #fff;
}

/* ── Notification list — stacked separate cards ── */
.notif-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Individual card ── */
.notif-card {
  background: #fff;
  border-radius: 8px;
  border: none;
  border-left: 3px solid transparent;
  padding: 16px 16px 14px 16px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: start;
  transition: background 0.12s;
}

.notif-card:hover {
  background: #fafafa;
}

/* Left border accent colours by type */
.notif-card.notif-info    { border-left-color: #3b6fd4; }
.notif-card.notif-success { border-left-color: #2e9e6e; }
.notif-card.notif-danger  { border-left-color: #d94040; }

/* ── Icon circle ── */
.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.notif-icon img {
  width: 20px;
  height: 20px;
}

.notif-icon::before {
  display: none !important;
}

.notif-icon.icon-info    { background: #dce8f8; }
.notif-icon.icon-success { background: #d4f0e4; }
.notif-icon.icon-danger  { background: #fde0e0; }

/* ── Card body ── */
.notif-body {
  min-width: 0;
}

.notif-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.notif-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  text-decoration: none;
}

.notif-card-title:hover {
  text-decoration: underline;
  color: #111;
}

.notif-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e24b4a;
  flex-shrink: 0;
}

.notif-card-time {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  justify-content: flex-end;
}

.notif-card-time svg {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}

/* ── Delete button ── */
.notif-delete-btn {
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  border: none;
  background: none;
  color: #541A1A;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.notif-delete-btn:hover {
  background: #EEC3C3;
}

.notif-delete-btn:active {
  background: #E6A7A6;
}

/* Keyboard focus */
.notif-delete-btn:focus {
  outline: none;
}

.notif-delete-btn:focus-visible {
  background: #E392A8;
  color: #51071B;
  outline: none;
}

.notif-delete-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
}

/* ── Card collapse animation ── */
.notif-card.is-removing {
  opacity: 0;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border-width: 0 !important;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

.index-page.notifications .bottom50.main-area {
  display: flex;
  flex-direction: column;
}

.index-page.notifications form.simple_form.activities {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.index-page.notifications .notif-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Pagination (matches invoices / exports pages) ── */
body.notifications .notif-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 0 4px;
}
body.notifications .notif-pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0.5px solid rgba(0,0,0,0.2);
  border-radius: 8px;
  background: #fff;
  color: #555;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
}
body.notifications .notif-pg-btn:hover:not(.notif-pg-disabled)  { background: #F5F5F5; color: #333; }
body.notifications .notif-pg-btn:active:not(.notif-pg-disabled) { background: #E3E3E3; }
body.notifications .notif-pg-btn.notif-pg-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
body.notifications .notif-pg-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}
body.notifications .notif-pg-label { font-size: 14px; color: #555; margin: 0 8px 0 12px; }
body.notifications .notif-pg-of    { font-size: 14px; color: #555; margin: 0 12px 0 8px; white-space: nowrap; }
body.notifications .notif-pg-input {
  width: 56px;
  height: 36px;
  border: 0.5px solid rgba(0,0,0,0.28);
  border-radius: 8px;
  background: #fff;
  text-align: center;
  font-size: 14px;
  color: #222;
  padding: 0 6px;
  box-shadow: none;
  -moz-appearance: textfield;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.notifications .notif-pg-input::-webkit-outer-spin-button,
body.notifications .notif-pg-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.notifications .notif-pg-input:focus {
  border-color: #93117E;
  box-shadow: 0 0 0 2px rgba(147,17,126,0.12);
  outline: none;
}

/* Small phones: tighten spacing so the bar stays on one line */
@media (max-width: 400px) {
  body.notifications .notif-pagination { gap: 4px; }
  body.notifications .notif-pg-label   { margin: 0 4px 0 6px; }
  body.notifications .notif-pg-of      { margin: 0 6px 0 4px; }
}

body.orders_unsubmitted .ums-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 0 4px;
}
body.orders_unsubmitted .ums-pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0.5px solid rgba(0,0,0,0.2);
  border-radius: 8px;
  background: #fff;
  color: #555;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
}
body.orders_unsubmitted .ums-pg-btn:hover:not(.ums-pg-disabled)  { background: #F5F5F5; color: #333; }
body.orders_unsubmitted .ums-pg-btn:active:not(.ums-pg-disabled) { background: #E3E3E3; }
body.orders_unsubmitted .ums-pg-btn.ums-pg-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
body.orders_unsubmitted #pendingCard .ums-pagination .ums-pg-icon {
  display: inline-block;
  width: 16px !important;
  height: 16px !important;
  max-width: 16px;
  vertical-align: middle;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}
body.orders_unsubmitted .ums-pg-label { font-size: 14px; color: #555; margin: 0 8px 0 12px; }
body.orders_unsubmitted .ums-pg-of    { font-size: 14px; color: #555; margin: 0 12px 0 8px; white-space: nowrap; }
body.orders_unsubmitted .ums-pg-input {
  width: 56px;
  height: 36px;
  border: 0.5px solid rgba(0,0,0,0.28);
  border-radius: 8px;
  background: #fff;
  text-align: center;
  font-size: 14px;
  color: #222;
  padding: 0 6px;
  box-shadow: none;
  -moz-appearance: textfield;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.orders_unsubmitted .ums-pg-input::-webkit-outer-spin-button,
body.orders_unsubmitted .ums-pg-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.orders_unsubmitted .ums-pg-input:focus {
  border-color: #93117E;
  box-shadow: 0 0 0 2px rgba(147,17,126,0.12);
  outline: none;
}
@media (max-width: 400px) {
  body.orders_unsubmitted .ums-pagination { gap: 4px; }
  body.orders_unsubmitted .ums-pg-label   { margin: 0 4px 0 6px; }
  body.orders_unsubmitted .ums-pg-of      { margin: 0 6px 0 4px; }
}


@media (min-width: 768px) {
  body.orders_invoices .oh-mobile-grid { display: none !important; }
}
@media (max-width: 767px) {
  body.orders_invoices table.order-history { display: none !important; }
  body.orders_invoices .ei-pagination { display: none !important; }
}
body.orders_invoices h1.top { display: none !important; }
body.orders_invoices .alert.alert-info { display: none !important; }
body.orders_invoices .well { display: none !important; }
body.orders_invoices .breadcrumb { display: none !important; }
body.orders_invoices .row.top20 { display: none !important; }

body.orders_invoices .bottom50 {
  margin-bottom: 0 !important;
}

body.orders_invoices #order_document_search .form-group.is-empty,
body.orders_invoices #order_document_search .form-group {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

body.orders_invoices #order_document_search .material-input {
  display: none !important;
}


body.orders_invoices #order_document_search .form-group > .form-control {
  width: 100%;
}

/* Icon system (img tags injected by JS) */
body.orders_invoices .ei-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}
body.orders_invoices .ei-icon-calendar { width: 24px; height: 24px; }
body.orders_invoices .ei-icon-export   { width: 16px; height: 16px; }
body.orders_invoices .ei-icon-download { width: 20px; height: 20px; }
body.orders_invoices .ei-icon-sort     { width: 12px; height: 12px; margin-left: 4px; }
body.orders_invoices .ei-icon-pg-first,
body.orders_invoices .ei-icon-pg-prev,
body.orders_invoices .ei-icon-pg-next,
body.orders_invoices .ei-icon-pg-last  { width: 16px; height: 16px; }

/* Filter card */
body.orders_invoices .ei-filter-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
body.orders_invoices .ei-filter-card form#order_document_search {
  padding: 20px 24px;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.orders_invoices form#order_document_search hr {
  display: none;
}
body.orders_invoices form#order_document_search label {
  font-size: 13px;
  color: #666;
  font-weight: 400;
  margin: 0 0 6px 0;
  display: block;
  line-height: 1.3;
}
body.orders_invoices form#order_document_search .form-control {
  height: 40px;
  border: 0.5px solid rgba(0,0,0,0.28);
  border-radius: 8px;
  font-size: 14px;
  padding: 0 12px;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.orders_invoices form#order_document_search .form-control:focus {
  border-color: #93117E;
  box-shadow: 0 0 0 2px rgba(147,17,126,0.12);
  outline: none;
}

/* Date input wrapper with calendar icon on right */
body.orders_invoices .ei-date-wrap {
  position: relative;
}
body.orders_invoices .ei-date-wrap .form-control {
  padding-right: 44px;
  border: 2px solid #E3E3E3 !important;
  border-radius: 8px !important;
  background: #FFF !important;
}
body.orders_invoices .ei-date-wrap .form-control:focus {
  border-color: #93117E !important;
}
body.orders_invoices .ei-date-wrap .ei-icon-calendar {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

body.orders_invoices .ei-help {
  font-size: 12px;
  color: #999;
  margin-top: 6px;
  font-weight: 400;
  line-height: 1.3;
}
body.orders_invoices .filter-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

/* Clear button */
body.orders_invoices .filter-btn-row .btn-default {
  height: 44px;
  border: 0.5px solid rgba(0,0,0,0.28) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 14px;
  font-weight: 500;
  text-transform: none !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none !important;
  transition: background 0.15s;
}
body.orders_invoices .filter-btn-row .btn-default:hover,
body.orders_invoices .filter-btn-row .btn-default:focus {
  background: #F5F5F5 !important;
}
body.orders_invoices .filter-btn-row .btn-default:active {
  background: #E3E3E3 !important;
}

/* Search button */
body.orders_invoices .filter-btn-row .btn-info {
  height: 44px;
  border: none !important;
  border-radius: 8px !important;
  background: #93117E !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  text-transform: none !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none !important;
  transition: background 0.15s;
}
body.orders_invoices .filter-btn-row .btn-info:hover,
body.orders_invoices .filter-btn-row .btn-info:focus {
  background: #860F73 !important;
}
body.orders_invoices .filter-btn-row .btn-info:active {
  background: #5B0B4F !important;
}

body.orders_invoices form#order_document_search .pull-left {
  display: contents;
}

/* Bottom card */
body.orders_invoices .ei-bottom-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}
body.orders_invoices .ei-invoices-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 0.5px solid rgba(0,0,0,0.1);
}
body.orders_invoices .ei-invoices-title {
  font-size: 15px;
  font-weight: 600;
  color: #222;
}
body.orders_invoices .ei-invoices-actions {
  display: flex;
  align-items: center;
}

/* Export button */
body.orders_invoices .export-excel {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px !important;
  border-radius: 8px !important;
  background: #93117E !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500;
  border: none !important;
  text-decoration: none;
  box-shadow: none !important;
  transition: background 0.15s;
}
body.orders_invoices .export-excel:hover,
body.orders_invoices .export-excel:focus {
  background: #860F73 !important;
  color: #fff !important;
}
body.orders_invoices .export-excel:active {
  background: #5B0B4F !important;
  color: #fff !important;
}

body.orders_invoices .export-excel img:not(.ei-icon),
body.orders_invoices .export-excel > svg {
  display: none !important;
}

/* Table */
body.orders_invoices .ei-table-wrap {
  min-height: 290px;
}
body.orders_invoices table.order-history {
  width: 100%;
  border-collapse: collapse;
}
body.orders_invoices table.order-history thead tr {
  border-bottom: 0.5px solid rgba(0,0,0,0.1);
}
body.orders_invoices table.order-history thead th {
  font-size: 13px;
  font-weight: 400;
  color: #888;
  padding: 12px 20px;
  white-space: nowrap;
}
body.orders_invoices table.order-history thead th a.sort_link {
  color: #888;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
body.orders_invoices table.order-history tbody tr {
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
body.orders_invoices table.order-history tbody tr:last-child {
  border-bottom: none;
}
body.orders_invoices table.order-history tbody tr:hover {
  background: #faf7fc;
}
body.orders_invoices table.order-history tbody td {
  padding: 14px 20px;
  font-size: 14px;
  color: #222;
  vertical-align: middle;
}
body.orders_invoices table.order-history tbody td a.hidden-xs {
  color: #222;
  text-decoration: none;
  font-size: 14px;
}
body.orders_invoices table.order-history tbody td a.hidden-xs:hover {
  color: #93117E;
}
body.orders_invoices table.order-history tbody td a.hidden-xs i {
  display: none;
}
body.orders_invoices .date-part {
  font-weight: 600;
}
body.orders_invoices .time-part {
  color: #999;
  font-weight: 400;
}
body.orders_invoices .th-actions {
  text-align: right;
}
body.orders_invoices .td-actions {
  text-align: right;
  padding-right: 20px !important;
}
body.orders_invoices .btn-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #93117E;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
body.orders_invoices .btn-dl:hover {
  background: rgba(147,17,126,0.1);
}

/* Empty state */
body.orders_invoices .ei-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 48px;
  text-align: center;
}
body.orders_invoices .ei-empty-img {
  width: 200px;
  height: auto;
  margin-bottom: 20px;
}
body.orders_invoices .ei-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
}
body.orders_invoices .ei-empty-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
  max-width: 480px;
  line-height: 1.4;
}
body.orders_invoices .ei-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 32px;
  border-radius: 8px;
  background: #93117E;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}
body.orders_invoices .ei-empty-cta:hover,
body.orders_invoices .ei-empty-cta:focus {
  background: #860F73;
  color: #fff;
  text-decoration: none;
}
body.orders_invoices .ei-empty-cta:active {
  background: #5B0B4F;
  color: #fff;
}

/* Disabled Export button (when no invoices exist) */
body.orders_invoices .export-excel.ei-btn-disabled {
  background: #fff !important;
  color: #999 !important;
  border: 0.5px solid #E3E3E3 !important;
  pointer-events: none;
  cursor: not-allowed;
}
body.orders_invoices .export-excel.ei-btn-disabled .ei-icon {
  opacity: 0.4;
  filter: brightness(0) invert(0.6);
}

/* Pagination */
body.orders_invoices .pagination.pagination-left {
  display: none !important;
}
body.orders_invoices .ei-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
}
body.orders_invoices .ei-pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0.5px solid rgba(0,0,0,0.2);
  border-radius: 8px;
  background: #fff;
  color: #555;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
}
body.orders_invoices .ei-pg-btn:hover:not(.ei-pg-disabled) {
  background: #F5F5F5;
  color: #333;
}
body.orders_invoices .ei-pg-btn:active:not(.ei-pg-disabled) {
  background: #E3E3E3;
}
body.orders_invoices .ei-pg-btn.ei-pg-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
body.orders_invoices .ei-pg-label {
  font-size: 14px;
  color: #555;
  margin: 0 8px 0 12px;
}
body.orders_invoices .ei-pg-input {
  width: 56px;
  height: 36px;
  border: 0.5px solid rgba(0,0,0,0.28);
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  color: #222;
  padding: 0 6px;
  box-shadow: none;
  -moz-appearance: textfield;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.orders_invoices .ei-pg-input::-webkit-outer-spin-button,
body.orders_invoices .ei-pg-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.orders_invoices .ei-pg-input:focus {
  border-color: #93117E;
  box-shadow: 0 0 0 2px rgba(147,17,126,0.12);
  outline: none;
}
body.orders_invoices .ei-pg-of {
  font-size: 14px;
  color: #555;
  margin: 0 12px 0 8px;
}

#sb-menu a:focus {
  outline: none;
}


@media (max-width: 1023px) {

   .notifications #page-main {
       padding: 16px !important;
    }

  .notifications .bottom50.main-area.col-md-12 {
        padding: 0px !important;
    }
}

/* ============================================================
   Log Exports Orders page
   ============================================================ */

/* ── Hide legacy platform elements ── */
body.log_exports_orders h1.top            { display: none !important; }
body.log_exports_orders .alert.alert-info { display: none !important; }
body.log_exports_orders .well             { display: none !important; }
body.log_exports_orders .breadcrumb       { display: none !important; }
body.log_exports_orders .row.top20        { display: none !important; }
body.log_exports_orders .pagination.pagination-left { display: none !important; }
body.log_exports_orders .bottom50         { margin-bottom: 0 !important; }

/* ── Icon system ── */
body.log_exports_orders .ei-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}
body.log_exports_orders .ei-icon-download { width: 20px; height: 20px; }
body.log_exports_orders .ei-icon-sort     { width: 12px; height: 12px; margin-left: 4px; }
body.log_exports_orders .ei-icon-pg-first,
body.log_exports_orders .ei-icon-pg-prev,
body.log_exports_orders .ei-icon-pg-next,
body.log_exports_orders .ei-icon-pg-last  { width: 16px; height: 16px; }

/* ── Title card ── now uses global .page-h1-title */

/* ── Main area + bottom card (desktop) ── */
body.log_exports_orders .main-area {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 120px) !important;
}
body.log_exports_orders .ei-bottom-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  flex: 1 !important;
  margin-bottom: 16px !important;
  display: flex;
  flex-direction: column;
}
body.log_exports_orders .ei-table-wrap {
  flex: 1;
}

/* ══════════════════════════════
   DESKTOP TABLE
   ══════════════════════════════ */
body.log_exports_orders .ei-desktop-table {
  width: 100%;
  border-collapse: collapse;
}
body.log_exports_orders .ei-desktop-table thead tr {
  border-bottom: 0.5px solid rgba(0,0,0,0.1);
}
body.log_exports_orders .ei-desktop-table thead th {
  font-size: 13px;
  font-weight: 400;
  color: #888;
  padding: 12px 20px;
  white-space: nowrap;
}
body.log_exports_orders .ei-desktop-table thead th a.sort_link {
  color: #888;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
body.log_exports_orders .ei-desktop-table tbody tr {
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
body.log_exports_orders .ei-desktop-table tbody tr:last-child {
  border-bottom: none;
}
body.log_exports_orders .ei-desktop-table tbody td {
  padding: 14px 20px;
  font-size: 14px;
  color: #222;
  vertical-align: middle;
}
/* Hide empty platform 4th column */
body.log_exports_orders .ei-desktop-table thead th:nth-child(4),
body.log_exports_orders .ei-desktop-table tbody td:nth-child(4) {
  display: none !important;
}

/* ── Date formatting ── */
body.log_exports_orders .date-part { font-weight: 600; }
body.log_exports_orders .time-part { color: #999; font-weight: 400; }

/* ── Actions column ── */
body.log_exports_orders .th-actions { text-align: right; }
body.log_exports_orders .td-actions { text-align: right; padding-right: 20px !important; }
body.log_exports_orders .btn-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #93117E;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
body.log_exports_orders .btn-dl:hover {
  background: rgba(147,17,126,0.1);
}

/* ── Mobile transposed table — hidden on desktop ── */
body.log_exports_orders .ei-mobile-wrap {
  display: none;
}

/* ══════════════════════════════
   MOBILE  (≤ 767px)
   Transposed table: headers frozen
   on the left, data cols scroll right
   ══════════════════════════════ */
@media (max-width: 767px) {

  body.log_exports_orders .main-area      { min-height: 0 !important; }
  body.log_exports_orders .ei-bottom-card { flex: none !important; }
  body.log_exports_orders .ei-pagination  { display: none !important; }

  /* Hide normal desktop table */
  body.log_exports_orders .ei-desktop-table { display: none !important; }

  /* Show transposed wrapper */
  body.log_exports_orders .ei-mobile-wrap {
    display: block !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* The transposed table */
  body.log_exports_orders .ei-mobile-wrap table {
    border-collapse: collapse;
    width: auto;
    min-width: 100%;
    /* prevent the table from collapsing */
    table-layout: auto;
  }

  /* Every row is one field (Started at / Ended at / Status / Action) */
  body.log_exports_orders .ei-mobile-wrap tr {
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
  }
  body.log_exports_orders .ei-mobile-wrap tr:last-child {
    border-bottom: none;
  }

  /* First cell in each row = frozen header label */
  body.log_exports_orders .ei-mobile-wrap th {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    font-size: 13px;
    font-weight: 400;
    color: #888;
    padding: 13px 16px;
    white-space: nowrap;
    text-align: left;
    border-right: 1px solid rgba(0,0,0,0.07);
    min-width: 96px;
  }

  /* Data cells (one per record, scrolls right) */
  body.log_exports_orders .ei-mobile-wrap td {
    font-size: 14px;
    color: #222;
    padding: 13px 16px;
    white-space: nowrap;
    vertical-align: middle;
    /* subtle right border between records */
    border-right: 0.5px solid rgba(0,0,0,0.06);
  }
  body.log_exports_orders .ei-mobile-wrap td:last-child {
    border-right: none;
  }

  /* Scrollbar hint */
  body.log_exports_orders .ei-mobile-wrap::-webkit-scrollbar       { height: 3px; }
  body.log_exports_orders .ei-mobile-wrap::-webkit-scrollbar-track  { background: #f0f0f0; }
  body.log_exports_orders .ei-mobile-wrap::-webkit-scrollbar-thumb  { background: #93117E; border-radius: 2px; }
}

/* ── Empty state ── */
body.log_exports_orders .ei-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 48px;
  text-align: center;
}
body.log_exports_orders .ei-empty-img   { width: 200px; height: auto; margin-bottom: 20px; }
body.log_exports_orders .ei-empty-title { font-size: 18px; font-weight: 700; color: #222; margin-bottom: 10px; }
body.log_exports_orders .ei-empty-text  { font-size: 14px; color: #666; max-width: 480px; line-height: 1.4; }

/* ── Pagination ── */
body.log_exports_orders .ei-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border-top: 0.5px solid rgba(0,0,0,0.06);
  margin-top: auto;
}
body.log_exports_orders .ei-pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0.5px solid rgba(0,0,0,0.2);
  border-radius: 8px;
  background: #fff;
  color: #555;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
}
body.log_exports_orders .ei-pg-btn:hover:not(.ei-pg-disabled) { background: #F5F5F5; color: #333; }
body.log_exports_orders .ei-pg-btn:active:not(.ei-pg-disabled) { background: #E3E3E3; }
body.log_exports_orders .ei-pg-btn.ei-pg-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
body.log_exports_orders .ei-pg-label { font-size: 14px; color: #555; margin: 0 8px 0 12px; }
body.log_exports_orders .ei-pg-input {
  width: 56px;
  height: 36px;
  border: 0.5px solid rgba(0,0,0,0.28);
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  color: #222;
  padding: 0 6px;
  box-shadow: none;
  -moz-appearance: textfield;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.log_exports_orders .ei-pg-input::-webkit-outer-spin-button,
body.log_exports_orders .ei-pg-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.log_exports_orders .ei-pg-input:focus {
  border-color: #93117E;
  box-shadow: 0 0 0 2px rgba(147,17,126,0.12);
  outline: none;
}
body.log_exports_orders .ei-pg-of { font-size: 14px; color: #555; margin: 0 12px 0 8px; }

/* ================================================
   PASSWORD RESET — ERROR STATE (body.customers_password)
   ------------------------------------------------
   Rules below polish the Rails-rendered error markup
   that exists ONLY on the error page (#error_explanation,
   .invalid-feedback, .is-invalid, .form-group-invalid).
   ================================================ */

/* Hide #error_explanation visually (Rails renders it AND the
   per-field .invalid-feedback, which duplicates the message).
   Kept in the DOM for screen readers. */
.customers_password #error_explanation {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.customers_password .invalid-feedback {
  display: block;
  color: #C7253E;
  font-family: "Segoe UI";
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.017px;
  margin-top: 4px;
  text-align: left;
  width: 100%;
}

.customers_password input.is-invalid,
.customers_password .form-group-invalid input.form-control {
  border-color: #C7253E !important;
}

.customers_password input.is-invalid:focus,
.customers_password .form-group-invalid input.form-control:focus {
  border-color: #C7253E !important;
  background: #fff !important;
}

body.customers_password .custom-search-wrapper,
body.customers_password .custom-nav-wrapper {
    display: none !important;
}

body.customers_password .main.main-raised {
    background: #F5F5F5 !important;
}

.page-h1-title {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin: 0 0 16px 0;
  font-family: "Segoe UI";
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #000;
  display: block;
}

.orders_unsubmitted .filter-group br {
  display: none !important;
}

.notif-empty-state p {
  white-space: normal;
  overflow-wrap: break-word;
}

.notifications .form-group.is-empty {
  display: none !important;
}


/* ============================================================================
   UNSUBMITTED ORDERS — HEADER ROW (heading + balance + Export)
============================================================================ */
#pendingCard .pending-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

#pendingCard .pending-header h3 {
  margin-bottom: 0;   
}

#pendingCard .pending-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

#pendingCard .available-balance {
  color: #313131;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  white-space: nowrap;
}

#pendingCard .pending-divider {
  width: 1px;
  height: 24px;
  background: var(--Colors-Borders-borderOpaque, #E3E3E3);
  display: inline-block;
  border-radius: 0 !important;
}

#pendingCard .export-excel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #93117E;
  border: none;
  color: #F9F1F7 !important;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  padding: 12px 20px;
  text-decoration: none !important;
  box-shadow: none !important;
  text-transform: capitalize !important;
  cursor: pointer;
}

#pendingCard .export-excel:hover,
#pendingCard .export-excel:focus {
  background: #860F73;
  color: #F9F1F7 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

#pendingCard .export-excel .ei-icon-export {
  width: 20px;
  height: 20px;
  display: inline-block;
  
  filter: brightness(0) invert(1);
}

#pendingCard .export-excel .ei-btn-label {
  display: inline-block;
}

@media (max-width: 600px) {
  #pendingCard .pending-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

#pendingCard table.order-history td[colspan],
#pendingCard table.order-history td.ms-cell {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0 !important;
}

#pendingCard #confirm-multiple-orders,
#pendingCard form.ms-form {
  width: 100%;
  margin: 0;
}

#pendingCard .ms-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  width: 100%;
}

#pendingCard .ms-actions .ms-btn {
  flex: 1;
  max-width: 800px;
  height: 52px;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

#pendingCard .ms-btn-delete {
  background: #FFF !important;
  border: 2px solid #E3E3E3 !important;
  color: #93117E !important;
}
#pendingCard .ms-btn-delete:hover:not([disabled]):not(.disabled) {
  background-color: #F4E7F2 !important;
  color: #93117E !important;
}
#pendingCard .ms-btn-delete:active:not([disabled]):not(.disabled) {
  background-color: #EFDBEC !important;
  color: #93117E !important;
}

#pendingCard .ms-btn-confirm {
  background: #93117E !important;
  border: none !important;
  color: #F9F1F7 !important;
}
#pendingCard .ms-btn-confirm:hover:not([disabled]):not(.disabled) {
  background: #860F73 !important;
  color: #F9F1F7 !important;
}

#pendingCard .ms-btn[disabled],
#pendingCard .ms-btn.disabled {
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none !important;
  text-align: center;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  text-decoration-line: underline !important;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  opacity: 1 !important;
}

#pendingCard .ms-btn-delete[disabled],
#pendingCard .ms-btn-delete.disabled {
  border-radius: 8px;
  border: 2px solid #E3E3E3 !important;
  background: #FFF !important;
  color: #A9A9A9 !important;
}

#pendingCard .ms-btn-confirm[disabled],
#pendingCard .ms-btn-confirm.disabled {
  border-radius: 8px;
  border: 1px solid #E3E3E3 !important;
  background: #EEECEE !important;
  color: #A9A9A9 !important;
}

/* The platform's own summary paragraph is replaced by .ms-summary
   (rendered by dropxl-unsubmitted.js); keep it in the DOM but out of sight. */
#pendingCard .confirm-multiple-orders-description {
  display: none !important;
}

/* ---------- Selection summary (above the bulk-action buttons) ---------- */
#pendingCard .ms-summary {
  margin-top: 20px;
  padding: 16px;
  border: 2px solid #BFE3D1;
  border-radius: 8px;
  background: #F3FAF6;
  color: #313131;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  text-align: left;              /* the cell it lives in is centred */
}

#pendingCard .ms-summary[hidden] {
  display: none !important;
}

#pendingCard .ms-summary.is-error {
  border-color: #EEC3C3;
  background: #FDEEF1;
}

#pendingCard .ms-summary-remaining {
  margin-top: 8px;
}

#pendingCard .ms-summary-remaining strong {
  font-weight: 700;
}

#pendingCard .ms-summary:not([hidden]) + .ms-actions {
  margin-top: 20px;
}


@media (max-width: 600px) {
  #pendingCard .ms-actions {
    flex-direction: column;
  }
}

.orders_unsubmitted #filterCard .date-input-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.orders_unsubmitted #filterCard .date-input-wrap input.form-control {
  width: 100%;
}

.orders_unsubmitted #filterCard .date-input-wrap .calendar-icon {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  width: 20px !important;
  height: 20px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  pointer-events: none;
  opacity: 0.7;
  object-fit: contain;
}

#pendingCard .table-hover > tbody > tr:hover,
#pendingCard .table-hover > tbody > tr:hover > td,
#pendingCard table.order-history tbody tr:hover,
#pendingCard table.order-history tbody tr:hover td {
  background-color: transparent !important;
  background: transparent !important;
}

#pendingCard table td:first-child,
#pendingCard table td:last-child {
  border-radius: 0 !important;
}

.orders_import_preview #page-main { background: #f5f6fa; }

.orders_import_preview .bottom50.main-area {
  margin: 0 !important;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: "Segoe UI", sans-serif;
  color: #1f2430;
}

.orders_import_preview .bottom50.main-area > p,
.orders_import_preview .file.top10 > label,
.orders_import_preview form > hr { display: none !important; }

.orders_import_preview .iox-title {
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 !important;
  font-family: "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #000;
  display: block;
}

.orders_import_preview .iox-card {
  background: #fff;
  border: 1px solid #ececf1;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
  padding: 24px 26px;
}

.orders_import_preview .iox-card-title {
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  margin: 0 0 14px;
}

.orders_import_preview .iox-muted {
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b7280;
  margin: 0 0 12px;
}
.orders_import_preview .iox-download-label { margin-top: 4px; }

.orders_import_preview .iox-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .orders_import_preview .iox-top-grid { grid-template-columns: 1fr; }
}

.orders_import_preview .iox-sample-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid #EFDBEC;
  border-radius: 10px;
  background: #fff;
  color: #93117E;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.orders_import_preview .iox-sample-btn:hover {
  background: #F4E7F2;
  color: #93117E;
  text-decoration: none;
}

.orders_import_preview .iox-choose-card {
  display: flex;
  flex-direction: column;
}

.orders_import_preview .iox-drop {
  border: 2px dashed #d6d9e0;
  border-radius: 12px;
  background: #fcfcfd;
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
  user-select: none;
}
.orders_import_preview .iox-drop:hover,
.orders_import_preview .iox-drop.iox-drop-active {
  border-color: #93117E;
  background: #FDF6FC;
}
.orders_import_preview .iox-drop.iox-drop-has-file {
  border-color: #93117E;
  background: rgba(147,17,126,.03);
}
.orders_import_preview .iox-drop-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #F3F0F7;
  color: #93117E;
}
.orders_import_preview .iox-drop-icon svg { width: 22px; height: 22px; }
.orders_import_preview .iox-drop-title { font-size: 14px; color: #1f2430; }
.orders_import_preview .iox-browse {
  color: #93117E;
  font-weight: 600;
  text-decoration: underline;
}
.orders_import_preview .iox-drop-sub { font-size: 12px; color: #6b7280; margin-top: 6px; }
.orders_import_preview .iox-drop-file {
  margin-top: 12px;
  font-size: 12.5px;
  color: #5B0B4F;
  font-weight: 600;
}

.orders_import_preview .iox-btn {
  border: none;
  border-radius: 10px;
  background: #93117E;
  color: #fff;
  font-family: "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, color .15s;
  padding: 13px 16px;
}
.orders_import_preview .iox-btn:hover { background: #860F73; }
.orders_import_preview .iox-btn:active { background: #5B0B4F; }
.orders_import_preview .iox-btn-block { display: block; width: 100%; margin-top: 18px; }
.orders_import_preview .iox-btn-sm { padding: 10px 22px; font-size: 13.5px; white-space: nowrap; }
.orders_import_preview .iox-btn-disabled,
.orders_import_preview .iox-btn-disabled:hover {
  background: #e9e9ef;
  color: #a3a6b0;
  cursor: not-allowed;
}

.orders_import_preview .iox-preview-card { padding: 22px 24px 26px; margin-bottom: 16px; }
.orders_import_preview .iox-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.orders_import_preview .iox-preview-head .iox-card-title { margin: 0; }

.orders_import_preview .iox-fix-errors {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  color: #c0264b;
  font-size: 13px;
  font-weight: 500;
}
.orders_import_preview .iox-fix-errors svg { width: 15px; height: 15px; flex: 0 0 auto; }

.orders_import_preview .iox-scroll { overflow: auto; border-radius: 8px; }
.orders_import_preview table.iox-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: "Segoe UI", sans-serif;
  font-size: 12.5px;
}
.orders_import_preview table.iox-table thead th {
  background: transparent;
  border: none;
  border-bottom: 1px solid #ececf1;
  text-align: left;
  color: #6b7280;
  font-weight: 500;
  font-size: 12px;
  padding: 10px 14px;
  white-space: nowrap;
}
.orders_import_preview table.iox-table tbody td {
  border: none;
  border-bottom: 1px solid #f2f2f6;
  padding: 12px 14px;
  vertical-align: middle;
  color: #1f2430;
  white-space: nowrap;
}
.orders_import_preview table.iox-table tbody tr:last-child td { border-bottom: none; }

.orders_import_preview table.iox-table input[readonly] {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  min-width: 0;
  color: inherit;
  font: inherit;
  outline: none;
  text-overflow: ellipsis;
}

.orders_import_preview table.iox-table td.iox-product { line-height: 1.35; }
.orders_import_preview table.iox-table td.iox-product input { width: auto !important; }
.orders_import_preview table.iox-table .iox-code { display: block; font-weight: 600; color: #1f2430; }
.orders_import_preview table.iox-table .iox-name { display: block; color: #6b7280; font-size: 11.5px; }

.orders_import_preview table.iox-table tbody tr.iox-row-error td { background: #fdeef1 !important; }
.orders_import_preview table.iox-table .iox-err-input {
  display: block;
  color: #c0264b !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.2px;
  line-height: 1.3;
  white-space: normal !important;   /* allow wrapping */
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: clip;
  overflow: visible;
  min-width: 160px;                 /* give the message room before wrapping */
}
.orders_import_preview table.iox-table td:has(.iox-err-input) {
  white-space: normal !important;
  vertical-align: top;
}

.orders_import_preview input.btn-import,
.orders_import_preview input.btn-create {
  display: none !important;
}
/* =========================================================
   Category flyout — 3-level cap + scrollable panels
   (appended fix; overrides the earlier #cat-flyout rules)
   ========================================================= */

/* Level-1 panel: cap height, scroll instead of pushing the page down */
#cat-flyout #categories-menu {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Submenu panels are positioned by JS (position: fixed) so they can
   escape their scrolling parent, and they scroll themselves when tall */
#cat-flyout ul li > ul {
  position: fixed;
  top: auto;
  left: auto;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Disable the pure-CSS hover-open — JS drives it now */
#cat-flyout ul li:hover > ul {
  display: none;
}

/* JS-controlled open state */
#cat-flyout ul li.fly-open > ul.fly-visible {
  display: block;
}

/* Never render a 4th level */
#cat-flyout ul ul ul ul {
  display: none !important;
}

/* Items in the 3rd-level panel are plain links: no expand chevron */
#cat-flyout ul ul ul > li > a > .sb-trail {
  display: none;
}

/* Subtle scrollbars for the panels */
#cat-flyout ul::-webkit-scrollbar { width: 8px; }
#cat-flyout ul::-webkit-scrollbar-thumb { background: #d9d0d7; border-radius: 4px; }
#cat-flyout ul::-webkit-scrollbar-track { background: transparent; }

/* =============================================
   Dashboard — Global Notice (expandable card)
   Injected on the homepage above the dashboard
   illustration by VidaXL_JS.js.
   ============================================= */

/* --- Card container (own section, right under the page title) --- */
#dashboard-global-notice {
  width: 100%;
  margin: 0 0 16px 0;
  background: #fff;
  border: none;
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: "Segoe UI", sans-serif;
}

/* --- Header (toggle button) --- */
#dashboard-global-notice-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

#dashboard-global-notice-toggle:hover {
  background: #F7FAFD;
}

#dashboard-global-notice-toggle:focus {
  outline: none;
}

/* Blue info chip — mirrors .notif-icon.icon-info on the Notifications page */
.dashboard-global-notice-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #dce8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-global-notice-icon img {
  width: 20px;
  height: 20px;
  display: block;
}

/* Title + collapsed preview, stacked */
.dashboard-global-notice-heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-global-notice-title {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  line-height: 140%;
}

.dashboard-global-notice-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: #767676;
  line-height: 140%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron */
.dashboard-global-notice-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #767676;
  transition: transform .25s ease;
}

#dashboard-global-notice.is-expanded .dashboard-global-notice-chevron {
  transform: rotate(180deg);
}

/* --- Collapsible body --- */
#dashboard-global-notice-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

#dashboard-global-notice-content {
  padding: 4px 16px 16px 16px;
  border-top: 1px solid #EFEFEF;
}

/* --- Notice content typography --- */
#dashboard-global-notice-content,
#dashboard-global-notice-content p,
#dashboard-global-notice-content li {
  color: #313131;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  text-align: left;
}

#dashboard-global-notice-content ul {
  margin: 12px 0;
  padding-left: 20px;
}

#dashboard-global-notice-content li {
  margin-bottom: 8px;
}

#dashboard-global-notice-content li:last-child {
  margin-bottom: 0;
}

#dashboard-global-notice-content a {
  color: #93117E;
  text-decoration: underline;
}

#dashboard-global-notice-content article {
  margin: 0;
}

/* ===== Category flyout: keep above page content ===== */
#cat-flyout {
  z-index: 1200;
}

#cat-flyout > ul#categories-menu {
  position: relative;
  z-index: 1;
}

/* ===== Compact header labels below 1240px ===== */
@media (min-width: 769px) and (max-width: 1239.98px) {

  /* Account name is a bare text node next to the SVG,
     so collapse the font rather than display:none */
  .custom-user-link {
    font-size: 0 !important;
    gap: 0 !important;
    padding: 12px !important;
  }

  .custom-notif .notif-label {
    display: none !important;
  }

  .custom-notif-link {
    width: auto !important;
    gap: 0 !important;
    padding: 12px !important;
  }

  .custom-cart .total-amount,
  .custom-cart .minimum-order {
    display: none !important;
  }

  .custom-cart-btn {
    gap: 0 !important;
  }
}
/* ============================================================================
   UNSUBMITTED ORDERS — MOBILE (≤767px)

============================================================================ */

/* ---------- Desktop defaults for the new elements ---------- */
#pendingCard .ums-grid,
#pendingCard .ums-filter-toggle,
#pendingCard .available-balance .ab-icon {
  display: none;
}

#pendingCard .available-balance .ab-text,
#pendingCard .available-balance .ab-label,
#pendingCard .available-balance .ab-amount {
  display: inline;
}

@media (max-width: 767px) {

  /* ---------- Filters collapse behind the header icon ---------- */
  body.orders_unsubmitted #filterCard.ums-collapsible:not(.ums-open) {
    display: none;
  }

  /* ---------- Pending orders header ---------- */
  #pendingCard .pending-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
  }

  #pendingCard .pending-actions {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 12px;
  }

  #pendingCard .pending-divider {
    display: none;
  }

  #pendingCard .available-balance {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    white-space: normal;
  }

  #pendingCard .available-balance .ab-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F5F5F5;
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #pendingCard .available-balance .ab-icon svg {
    width: 20px;
    height: 20px;
  }

  #pendingCard .available-balance .ab-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  #pendingCard .available-balance .ab-label {
    display: block;
    color: #313131;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
  }

  #pendingCard .available-balance .ab-amount {
    display: block;
    color: #048259;
    font-size: 20px;
    font-weight: 700;
    line-height: 150%;
    overflow-wrap: anywhere;
  }

  /* Icon-only export button */
  #pendingCard .export-excel {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    padding: 0 !important;
    justify-content: center;
    gap: 0;
  }

  #pendingCard .export-excel .ei-btn-label {
    display: none;
  }

  #pendingCard .export-excel .ei-icon-export {
    width: 24px;
    height: 24px;
  }

  /* Filter toggle */
  #pendingCard .ums-filter-toggle {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #000;
    cursor: pointer;
  }

  #pendingCard .ums-filter-toggle:hover {
    background: #F5F5F5;
  }

  #pendingCard .ums-filter-toggle.is-active {
    background: #F4E7F2;
    color: #93117E;
  }

  #pendingCard .ums-filter-toggle:focus-visible,
  #pendingCard .export-excel:focus-visible,
  #pendingCard .ums-action:focus-visible,
  #pendingCard .ums-cb:focus-visible,
  #pendingCard .ums-id-link:focus-visible {
    outline: 2px solid #93117E;
    outline-offset: 2px;
  }

  /* ---------- Hide the desktop table rows (keep the bulk-action row) ---------- */
  #pendingCard table.order-history thead,
  #pendingCard table.order-history tbody tr.qa-unsubmitted-orders-entry {
    display: none !important;
  }

  #pendingCard table.order-history,
  #pendingCard table.order-history tbody,
  #pendingCard table.order-history tbody tr,
  #pendingCard table.order-history td.ms-cell {
    display: block;
    width: auto !important;
  }

  /* Bulk actions area: full-bleed divider above it */
  #pendingCard table.order-history {
    margin: 0 -16px;
    padding: 0 16px;
    border-top: 1px solid #E3E3E3;
  }

  #pendingCard table.order-history td.ms-cell {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  #pendingCard .ms-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
  }

  #pendingCard .ms-actions .ms-btn {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    white-space: normal;
  }

  /* No selection summary card on mobile; errors (e.g. insufficient balance) still show */
  #pendingCard .ms-summary.is-success {
    display: none !important;
  }

  #pendingCard .ms-summary {
    margin-top: 16px;
  }

  #pendingCard .ms-summary:not([hidden]) + .ms-actions {
    margin-top: 16px;
  }

  /* ---------- Transposed grid ---------- */
  #pendingCard .ums-grid {
    display: block;
    margin: 0 -16px;              /* bleed to the card edges */
  }

  #pendingCard .ums-allpages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0 16px 12px;
    font-family: "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 150%;
    color: #313131;
  }

  #pendingCard .ums-allpages[hidden] {
    display: none !important;
  }

  #pendingCard .ums-allpages.is-active {
    padding: 12px 16px;
    border: 1px solid #EFDBEC;
    border-radius: 8px;
    background: #F9F1F7;
  }

  #pendingCard .ums-allpages-btn {
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #93117E;
    border-radius: 8px;
    background: #FFF;
    color: #93117E;
    font-family: "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  #pendingCard .ums-allpages-btn:active {
    background: #F4E7F2;
  }

  #pendingCard .ums-allpages.is-active .ums-allpages-btn {
    width: auto;
    height: auto;
    padding: 0;
    border: none;
    background: none;
    text-decoration: underline;
  }

  #pendingCard .ums-allpages-btn:focus-visible {
    outline: 2px solid #93117E;
    outline-offset: 2px;
  }

  #pendingCard .ums-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  #pendingCard .ums-scroll::-webkit-scrollbar {
    display: none;
  }

  #pendingCard table.ums-table {
    width: auto;
    min-width: 100%;
    margin: 0;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-top: 1px solid #E3E3E3;
  }

  #pendingCard table.ums-table tbody th,
  #pendingCard table.ums-table tbody td {
    padding: 16px !important;
    border-right: 1px solid #E3E3E3;
    border-bottom: 1px solid #E3E3E3;
    border-radius: 0 !important;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
    font-family: "Segoe UI", sans-serif;
    line-height: 150%;
  }

  /* Label column (sticks while order columns scroll) */
  #pendingCard table.ums-table tbody th.ums-label {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    width: 110px;
    min-width: 110px;
    background: #F5F5F5 !important;
    color: #6A6A6A !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.019px;
  }

  #pendingCard table.ums-table tbody td {
    min-width: 220px;
    background: #FFF !important;
    color: #313131 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  #pendingCard table.ums-table tbody tr:hover td {
    background: #FFF !important;
  }

  #pendingCard table.ums-table tbody tr:hover th.ums-label {
    background: #F5F5F5 !important;
  }

  /* ID row */
  #pendingCard .ums-id-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }

  #pendingCard .ums-id-link,
  #pendingCard .ums-id-link:hover,
  #pendingCard .ums-id-link:focus {
    color: #313131 !important;
    text-decoration: none !important;
    font-weight: 600;
  }

  #pendingCard .ums-ref {
    display: block;
    margin-top: 4px;
    padding-left: 36px;           /* align under the ID, past the checkbox */
    color: #6A6A6A;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    white-space: normal;
  }

  /* Checkboxes */
  #pendingCard input.ums-cb {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 2px solid #93117E;
    border-radius: 4px;
    background: #FFF center / 20px 20px no-repeat;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
  }

  #pendingCard input.ums-cb:checked {
    background-color: #93117E;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  #pendingCard input.ums-cb:indeterminate {
    background-color: #93117E;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  /* Total */
  #pendingCard table.ums-table .ums-total {
    color: #048259 !important;
    font-weight: 600;
  }

  /* Status */
  #pendingCard .ums-badge {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #EFDBEC;
    border-radius: 4px;
    background: #F9F1F7;
    color: #313131;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }

  #pendingCard .ums-sub {
    display: block;
    margin-top: 4px;
    color: #6A6A6A;
    font-size: 14px;
    font-weight: 400;
  }

  /* Actions */
  #pendingCard .ums-actions {
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }

  #pendingCard button.ums-action {
    width: 40px;
    height: 40px;
    padding: 4px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
  }

  #pendingCard button.ums-action:hover,
  #pendingCard button.ums-action:active {
    background: #F4E7F2;
  }

  #pendingCard button.ums-action img {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  #pendingCard button.ums-action.is-busy {
    opacity: 0.5;
    cursor: progress;
  }

  /* Custom scroll indicator */
  #pendingCard .ums-scrollbar {
    position: relative;
    height: 4px;
    margin: 20px 16px 20px;
    border-radius: 2px;
    background: #E3E3E3;
    overflow: hidden;
  }

  #pendingCard .ums-scrollbar.is-hidden {
    visibility: hidden;
  }

  #pendingCard .ums-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 32px;
    border-radius: 2px;
    background: #000;
  }
}


/* ===== Long account names in the header =====
   Cap the name's width and truncate with "…" so a long company name
   never pushes into the search bar. Full name shows on hover (title).
   Below 1240px the name is already hidden (font-size: 0 on the link),
   and the span inherits that, so this only affects wider screens. */
.custom-nav-wrapper {
  flex-shrink: 0;
}

.custom-user-link {
  min-width: 0;
}

.custom-user-name {
  display: inline-block;
  max-width: clamp(120px, 14vw, 240px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Sort chevron state: faded when unsorted, solid when active, flipped for ascending */
body.orders_invoices table.order-history thead th a.sort_link .ei-icon-sort,
body.log_exports_orders .ei-desktop-table thead th a.sort_link .ei-icon-sort {
  opacity: .35;
  transition: transform .15s ease;
}
body.orders_invoices table.order-history thead th a.sort_link.asc .ei-icon-sort,
body.orders_invoices table.order-history thead th a.sort_link.desc .ei-icon-sort,
body.log_exports_orders .ei-desktop-table thead th a.sort_link.asc .ei-icon-sort,
body.log_exports_orders .ei-desktop-table thead th a.sort_link.desc .ei-icon-sort {
  opacity: 1;
}
body.orders_invoices table.order-history thead th a.sort_link.asc .ei-icon-sort,
body.log_exports_orders .ei-desktop-table thead th a.sort_link.asc .ei-icon-sort {
  transform: rotate(180deg);
}


/* ===== Mobile + tablet cart: icon + (amount) ===== */
@media (max-width: 1239.98px) {
  .custom-cart .custom-cart-btn .total-amount {
    display: inline-flex !important;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
  }

  .custom-cart .total-amount .cart-word {
    display: none;
  }

  .custom-cart .btn.custom-cart-btn {
    align-items: center;
    gap: 4px !important;
  }
}