/****************************************************************************
 * CSS Styles -- HTML Markup Injection (Merged + Refactored)
 <link rel="stylesheet" href="{basePath}/sfsites/c/resource/PPMerzAestheticsStyles?{ versionKey }">
 ****************************************************************************/

/* -------------------------------------------------------------------------
   GLOBAL RESETS / UTILITY CLASSES
   ------------------------------------------------------------------------- */

   .hideEl {
    display: none !important;
  }
  
  /* For tables that need a dark background and white text */
  .custom-dark-table tr {
    background-color: black !important;
    color: white !important;
    border: 1px solid white !important;
  }
  
  /* Common page background layout (with radius and color)
     We'll override background color per color-scheme in media queries below */
  .common-page-background {
    border-radius: 25px;
    min-height: 400px;
  }
  
  /* Common tab background wrapper */
  .common-tab-background {
    background-color: var(--dxp-c-block-flexible-background-color, var(--dxp-g-root));
    border-radius: 25px;
    padding: 25px;
  }
  
  /* Utility - Right side nav list reset */
  .RightSideNav ul {
    margin: 0 0 0 -24px;
  }
  
  /* Utility - Hide 4th list item in PPProfileMenu */
  .PPProfileMenu li:nth-child(4) {
    display: none;
  }
  
  
  /* -------------------------------------------------------------------------
     FONT FACES
     ------------------------------------------------------------------------- */
  
  @font-face {
    font-family: 'ProximaNovaFont';
    src: url('/NorthAmericaDigital/sfsites/c/resource/ProximaNovaFont') format('woff');
  }
  
  @font-face {
    font-family: 'ProximaNovaBoldFont';
    src: url('/NorthAmericaDigital/sfsites/c/resource/ProximaNovaBoldFont') format('opentype');
  }
  
  @font-face {
    font-family: 'ProximaNovaExtraBoldFont';
    src: url('/NorthAmericaDigital/sfsites/c/resource/ProximaNovaExtraBoldFont') format('opentype');
  }
  
  /* Universal typography usage */
  span,
  p,
  h1, h2, h3, h4, h5, h6,
  label,
  li,
  a,
  strong,
  em,
  blockquote {
    font-family: var(--dxp-s-body-font-family) !important;
  }
  
  /* -------------------------------------------------------------------------
     BODY / BACKGROUND IMAGES
     ------------------------------------------------------------------------- */
  
  /* Ensures background images fill the viewport properly */
  body {
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  
  /* -------------------------------------------------------------------------
     LIGHT MODE
     ------------------------------------------------------------------------- */
  @media (prefers-color-scheme: light) {
    body {
      /* background-image: url('/NorthAmericaDigital/sfsites/c/resource/ppMerzLightModeGradient'); */
      background-color: white;
    }
  
    :root {
      /* Standard Footer, Links */
      --dxp-s-link-text-color: black !important;
      --dxp-s-link-text-color-hover: black !important;
  
      /* Additional Variables -- Mobile Header */
      --dxp-s-dropdown-text-color: black !important;
      --dxp-s-dropdown-text-color-hover: black !important;
      --dxp-g-root: white !important;
      --dxp-s-form-element-text-color: black !important;
      --dxp-g-brand: black !important;
      --dxp-g-root-contrast: black !important;
  
      --dxp-s-body-font-family: 'ProximaNovaFont' !important;
      --dxp-s-form-element-text-font-family: 'ProximaNovaFont' !important;
      --dxp-s-form-element-radius-border: 20px !important;

    }
  
    /* Standard Header brand overrides */
    [class^="dxpBrand"] {
      --dxp-g-brand: black !important;
      --dxp-g-root: white !important;
      --dxp-g-root-contrast: black !important;
      --dxp-g-root-1: transparent !important;
      --dxp-s-button-color-hover: black !important;
    }
  
    /* Mobile Header Cart Background */
    .slds-panel {
      background-color: white !important;
    }
  
    /* Default button text color */
    .ss-button button,
    .ss-button_alt button,
    .slds-button:not(.slds-button_brand) {
      color: black !important;
    }
    .ss-button button:hover,
    .ss-button_alt button:hover,
    .slds-button:hover:not(.slds-button_brand),
    .ss-button button:focus,
    .ss-button_alt button:focus,
    .slds-button:focus:not(.slds-button_brand),
    .ss-button button:active,
    .ss-button_alt button:active,
    .slds-button:active:not(.slds-button_brand) {
      color: black !important;
    }
  
    /* Footer overrides */
    footer {
      background-color: white !important;
      h3 {
        color: black !important;
        cursor: default !important;
      }
      li, li p {
        color: black !important;
        cursor: pointer !important;
      }
    }
  
    /* Product Filter button styling for mobile */
    .product-filter-outer {
      .filter-inner {
        lightning-accordion-section button[aria-expanded="false"] {
          border: 2px solid black !important;
        }
      }
      @media only screen and (max-width: 430px) {
        .slds-button {
          background-color: #f3f3f3 !important;
        }
        .slds-button:hover {
          background-color: white !important;
          color: black !important;
        }
      }
    }
  
    /* Common page background in light mode */
    .common-page-background {
      background-color: #f3f3f3 !important;
    }
  
    /* .dark-mode-text h1 in light mode becomes black */
    .dark-mode-text h1 {
      color: black !important;
    }
  
    /* .pplogin-section background for the third child in light mode */
    .pplogin-section .columns-content > :nth-child(3) {
      border-radius: 32px;
      background-color: rgba(246, 245, 245, 0.8);
    }
  }
  
  /* -------------------------------------------------------------------------
     DARK MODE
     ------------------------------------------------------------------------- */
  @media (prefers-color-scheme: dark) {
    body {
      /* background-image: url('/NorthAmericaDigital/sfsites/c/resource/ppMerzDarkModeGradient'); */
      background-color: black;
    }
  
    :root {
      /* Standard Footer, Links */
      --dxp-s-link-text-color: white !important;
      --dxp-s-link-text-color-hover: white !important;
  
      /* Additional Variables -- Mobile Header */
      --dxp-s-dropdown-text-color: white !important;
      --dxp-s-dropdown-text-color-hover: black !important;
      --dxp-g-root: black !important;
      --dxp-s-form-element-text-color: white !important;
      --dxp-g-brand: white !important;
      --dxp-g-root-contrast: white !important;

      --dxp-s-body-font-family: 'ProximaNovaFont' !important;
      --dxp-s-form-element-text-font-family: 'ProximaNovaFont' !important;
      --dxp-s-form-element-radius-border: 20px !important;

      /* Additional Variables: brand button colors (for lightning popups) */
      --sds-c-button-brand-text-color: black;
      --sds-c-button-brand-text-color-hover: black;
      --sds-c-button-brand-color-background-hover: white;

    }
  
    /* Standard Header brand overrides */
    [class^="dxpBrand"] {
      --dxp-g-brand: white !important;
      --dxp-g-root: black !important;
      --dxp-g-root-contrast: white !important;
      --dxp-g-root-1: transparent !important;
      --dxp-s-button-color-hover: white !important;
    }
  
    /* Mobile Header Cart Background */
    .slds-panel {
      background-color: black !important;
    }
  
    /* Default button text color */
    .ss-button button,
    .ss-button_alt button,
    .slds-button:not(.slds-button_brand) {
      color: white !important;
    }
    /* Hover, focus, and active states: button text goes black */
    .ss-button button:hover,
    .ss-button_alt button:hover,
    .ss-button button:focus,
    .ss-button_alt button:focus,
    .ss-button button:active,
    .ss-button_alt button:active,
    .slds-button:hover:not(.slds-button_brand),
    .slds-button:focus:not(.slds-button_brand),
    .slds-button:active:not(.slds-button_brand),
    lightning-button::part(button):hover,
    lightning-button-menu::part(button):hover {
      color: black !important;
    }
  
    footer {
      background-color: black !important;
      h3 {
        color: white !important;
        cursor: default !important;
      }
      li, li p {
        color: white !important;
        cursor: pointer !important;
      }
    }
  
    /* Product page background colors */
    c-pp-product-page {
      --plp-background-dark: rgb(53, 53, 53);
      --plp-background-medium: rgb(79, 79, 79);
    }
    .product-filter-outer {
      .filter-inner {
        lightning-accordion-section button[aria-expanded="false"] {
          border: 2px solid white !important;
        }
      }
      .slds-button, .slds-button:hover {
        background-color: var(--plp-background-dark, var(--plp-bg-dark)) !important;
        color: white !important;
      }
      h1, .slds-form-element__label, .slds-slider__value {
        color: white !important;
      }
      .filter-dropdown {
        background-color: var(--plp-background-dark, var(--plp-bg-dark)) !important;
        color: white !important;
      }
    }
    .productCardHolder {
      background-color: var(--plp-background-dark) !important;
    }
    .product-card-outer,
    .pdp-display .wide {
      background-color: var(--plp-background-medium) !important;
      color: white !important;
      .product-quantity-a2c {
        color: white !important;
        background-color: var(--plp-background-medium) !important;
        border: 1px solid var(--plp-background-dark);
      }
      .product-a2c {
        color: black !important;
        background-color: white !important;
      }
    }
  
    /* Common page background in dark mode */
    .common-page-background {
      background-color: rgb(53, 53, 53) !important;
    }
  
    /* .dark-mode-text h1 in dark mode becomes white */
    .dark-mode-text h1 {
      color: white !important;
    }
  
    /* .pplogin-section background for the third child in dark mode */
    .pplogin-section .columns-content > :nth-child(3) {
      border-radius: 32px;
      background-color: rgba(57, 57, 57, 0.8);
    }
  
    /* Dark-mode adjustments for 
       .LABEL, .VALUE, .text, .link-text, etc.  */
    .LABEL .slds-form-element_stacked .slds-form-element__label {
      color: black !important;
    }
    .VALUE .slds-form-element__static {
      color: black !important;
    }
    .text .slds-grid_align-spread {
      color: black !important;
    }
    .link-text a {
      color: black !important;
    }
  
    /* .privacy-policy table in dark mode */
    .privacy-policy table tr:first-child td {
      background-color: white !important;
      span {
        color: black !important;
      }
    }
    .privacy-policy table td[style*="background-color: rgb(224, 224, 224)"],
    .privacy-policy table tr[style*="background-color: rgb(230, 230, 232)"] {
      background-color: rgb(67, 67, 67) !important;
    }
  }
  
  /* -------------------------------------------------------------------------
     PRIVACY-POLICY TABLES
     ------------------------------------------------------------------------- */
  .privacy-policy table {
    font-size: 12px;
    max-width: 100%;
  }

    /* -------------------------------------------------------------------------
     FOOTER - Margin Bottom - Fix for Global ISI Fiting
     ------------------------------------------------------------------------- */
     .footer {
        margin-bottom: 100px !important;
    }
  
  /* -------------------------------------------------------------------------
     HEADER NAVIGATION ICON HIDES
     ------------------------------------------------------------------------- */
  .headerDesktop {
    margin-bottom: -1rem !important;
  }

  /* This closes the big white/black gap between the header and the content for nav bar */

  .banner_gap_close .columns-content {
    margin-top: -1rem;
  }
  
     .header-navigation,
  .header-search {
    button > lightning-icon {
      display: none;
    }
  }
  
  /* -------------------------------------------------------------------------
     PRODUCT-FILTER CLASSES
     ------------------------------------------------------------------------- */
  .product-filter-outer {
    .filter-inner {
      lightning-primitive-icon {
        display: none;
      }
      button {
        justify-content: center;
        span[title='Filter Products'] {
          font-size: 1.5em;
        }
      }
      .filter-accordion {
        button {
          justify-content: start;
        }
        lightning-primitive-icon {
          display: inline-flex;
        }
        lightning-accordion-section:nth-child(2) {
          border-top: 0px;
        }
        lightning-accordion-section button {
          border: 0px !important;
        }
        .slds-button__icon {
          position: relative;
          left: 150px;
        }
        @media only screen and (max-width: 430px) {
          .slds-accordion__summary-heading {
            margin-left: -40px;
          }
          .slds-button__icon {
            position: relative;
            left: 80vw;
          }
        }
      }
      .slds-accordion__summary-content {
        font-weight: bold !important;
      }
      .slds-button {
        border: 0px !important;
      }
    }
  }
  
  /* .product-filter .panel-wrapper */
  .product-filter .panel-wrapper {
    border-radius: 20px;
    background-color: #ffffff70 !important;
    border: 0 !important;
    .header-and-body {
      padding: 10px;
    }
    .filters-header {
      flex-direction: column !important;
    }
    .clear-button {
      display: none;
    }
  }
  .product-filter .slds-accordion__summary {
    background-color: white !important;
    .slds-accordion__summary-content {
      font-weight: bold !important;
    }
    lightning-primitive-icon {
      position: relative;
      left: 160px;
    }
  }

  /* COPYRIGHT FOOTER RICH TEXT EDITOR STYLE FIX */

  .copyrights-footer-text .cb-outputRichText-container.ql-editor {
    line-height: 1.2 !important;
  }

  
  /* -------------------------------------------------------------------------
     PRODUCT HOLDER / SEARCH / BANNER
     ------------------------------------------------------------------------- */
  
  /* Outer product holder background */
  .product-holder-background {
    .search-container {
      background-color: #eceaea;
    }
  }
  
  /* Banner image styling */
  .banner-image-hold img {
    height: 240px !important;
    border: 1px solid gray !important;
    border-radius: 20px !important;
    width: 1300px !important;
  }
  
  /* Product holder base - expand first column */
  .product-holder-base > .columns-content > .columns > dxp_layout-column:first-child {
    flex-grow: 1.2 !important;
  }
  
  /* -------------------------------------------------------------------------
     PRODUCT CARD GRID
     ------------------------------------------------------------------------- */
  .product-card-grid {
    .cardContainerGrid {
      border-radius: 20px !important;
      background-color: #ffffff70 !important;
      border: 0 !important;
    }
    commerce-quantity-selector-popover,
    .number-input__decrement-button,
    .number-input__increment-button,
    commerce-number-input label {
      display: none !important;
    }
    img {
      border-radius: 25px !important;
      padding-top: 10px;
    }
    .slds-text-heading_medium {
      font-weight: bold !important;
    }
    .number-input__input {
      width: 50px !important;
      background-color: unset !important;
    }
    .callToActionButton {
      padding-left: 15px;
    }
    .slds-button {
      border-radius: 0px !important;
    }
    .callToActionArea {
      justify-content: start !important;
      justify-self: unset !important;
    }
    .quantitySelectorContainer {
      flex-direction: row !important;
      align-items: start !important;
    }
    .priceArea {
      padding-top: 30px !important;
      padding-bottom: 15px !important;
    }
    .grid-item {
      align-items: baseline !important;
    }
    @media only screen and (max-width: 47.9375em) {
      .grid-item {
        max-width: 139px !important;
      }
      .cardContainerGrid {
        max-width: 90%;
      }
    }
  }
  
  /* -------------------------------------------------------------------------
     PP USER GREETING (top user menu area)
     ------------------------------------------------------------------------- */
  .ppUserGreeting {
    .menu-trigger-p {
      overflow: hidden !important;
      margin-top: -2rem !important;
      margin-left: -0.25rem !important;
      position: absolute !important;
      color: white !important;
      font-weight: 600 !important;
      font-size: 2.5rem !important;
    }
    .slds-truncate {
      overflow: hidden !important;
    }
    .slds-icon {
      display: none !important;
    }
  }
  
  /* -------------------------------------------------------------------------
     LOGIN SECTION, LOGOS, AND RELATED
     ------------------------------------------------------------------------- */
  
  /* pplogin-section */
  .pplogin-section {
    padding-bottom: 33px !important;
  }
  .pplogin-section .columns-content > :nth-child(3) {
    border-radius: 32px;
    /* The background color is overridden in @media queries for light/dark. */
  }
  .pplogin-section .column-content {
    align-items: center;
    justify-content: center !important;
    row-gap: 40px;
  }
  @media screen and (max-width: 1024px) {
    .pplogin-section .columns-content > :first-child {
      max-height: 100px;
    }
    .pplogin-section .columns-content > :first-child > .column-content {
      margin-bottom: 30px;
    }
  }
  
  /* Login informational banner/box */
  .login-informational {
    min-height: 80px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    background-color: white;
    border: 4px solid red;
    color: red;
    margin-bottom: 0px !important;
    padding: 5px;
    @media screen and (min-width: 1024px) {
      width: 43vw;
      max-width: 800px;
    }
    @media (prefers-color-scheme: dark) {
      background-color: black;
      border: 4px solid #FF8B8B;
      color: #FF8B8B;
    }
  }
  
  /* pplogin-logo */
  .pplogin-logo img {
    max-height: 100% !important;
  }
  
  /* Mobile Logo positioning */
  .mbl-logo .header-logo .slds-col .slds-p-left_medium .slds-p-right_medium .slds-size_5-of-12 {
    padding-left: 0px !important;
    padding-right: 85px !important;
  }
  .mobile-logo .dxp-content-layout-site-logo {
    position: relative !important;
    left: -16% !important;
  }
  
  /* -------------------------------------------------------------------------
     LEFT-NAV / RIGHT-NAV
     ------------------------------------------------------------------------- */
  .right-nav .slds-has-flexi-truncate .comm-drilldown-navigation__bar {
    position: relative !important;
    left: 20% !important;
  }
  .left-nav .slds-has-flexi-truncate .comm-drilldown-navigation__bar {
    padding-right: 0px;
    position: relative;
    left: 27%;
  }
  
  /* -------------------------------------------------------------------------
     PPHOME-SECTION LAYOUT
     ------------------------------------------------------------------------- */
  .pphome-section dxp_layout-column {
    width: 100%;
  }
  
  /* -------------------------------------------------------------------------
     RECORD DETAIL PANEL (e.g., tickets)
     ------------------------------------------------------------------------- */
  dxp_records-detail-panel .ticket-list-box .slds-card {
    background-color: white !important;
  }
  .ticket-list-box {
    a { 
      color: black !important;
    }
    button { 
      background-color: #989898 !important;
    }
}

  /* -------------------------------------------------------------------------
     USER MANAGEMENT PAGE
     ------------------------------------------------------------------------- */
  .user-bubble {
    .slds-accordion__summary {
      background-color: transparent;
    }
    .mob-v {
      margin: auto;
      max-width: 75%;
    }
  }

  /* -------------------------------------------------------------------------
     PRACTICE MANAGEMENT PAGE
     ------------------------------------------------------------------------- */
  c-pp-practice-management {
    .shipping-container ul, .shipping-container lightning-tab { 
      background-color: transparent; 
    }
    c-pp-international-phone-input .slds-form-element__control {
      padding-left: 0 !important;
      .iti {
        padding-right: 7px;
        .iti__tel-input {
          background-color: white;
          @media (prefers-color-scheme: dark) {
            background-color: black;
          }
        }
      }
    }
    button:disabled[name="New record"] {
      cursor: wait !important;
    }
  }
  
  /* -------------------------------------------------------------------------
     WALLET PAGE
     ------------------------------------------------------------------------- */
    .wallet lightning-input-address lightning-picklist[data-field="province"] {
      @media only screen and (max-width: 430px) {
        height: 59px;
      }
    }
  /*
  .ppleft-nav {
    .slds-has-flexi-truncate {
      margin-left: 3.2rem !important;
    }
  }
  
  .ppright-nav {
    .slds-has-flexi-truncate {
      margin-right: 6rem !important;
    }
  }
  */