// ---------------------------------------------------------------------
// Imports
// ---------------------------------------------------------------------
@import "_hidden.less";
@import "_payment.less";

// ---------------------------------------------------------------------
// 1) Variable Overrides & Mixins
// ---------------------------------------------------------------------
// Color & Background variables
@page__background-color: #f9f9f9;
@page__box-color: #fff;
@font-color__base
: #000;
@font-color__heading: #000;

// Buttons, Fields and Highlights
@color-primary__base: #000;
@color-primary__bold: #ba3b45;
@color-primary__highlight: #00ffcf;
@color-primary__hover: lighten(@color-primary__base, 20%);
@color-secondary__base: #fff;
@color-secondary__hover: darken(@color-secondary__base, 25%);
@color-link: #000;
@height-primary__base: 35px;
@height-primary__combined : (@height-primary__base + @border-size__primary + 1px);
@border-size__primary: 4px;
@border-size__secondary: 1px;
@shadow-primary__focus: 0 0px 15px 2px rgba(0, 0, 0, 0.451) inset;

// Borders & Lines
@border-color__base: #ccc;
@border-color__secondary: #000;

// Notification Color Palette
@notif-warning-bg: #fef5e7;
@notif-warning-border: #f39c12;
@notif-warning-text: #9a6b00;

@notif-success-bg: #eafaf1;
@notif-success-border: #27ae60;
@notif-success-text: #186a3b;

@notif-error-bg: #fff5f5;
@notif-error-border: #e74c3c;
@notif-error-text: #c0392b;

@notif-info-bg: #ebf5fb;
@notif-info-border: #3498db;
@notif-info-text: #1f618d;

.page-header {
  margin-bottom: 0;
}

// Mixin for subtitles
.subtitle-typography(@size, @weight) {
  font-size: @size;
  font-weight: @weight;
}

// Vendor prefix mixin for transition (for broader browser support)
.transition(@properties; @duration: 0.3s; @ease: ease) {
  -webkit-transition: @properties @duration @ease;
  -moz-transition: @properties @duration @ease;
  -o-transition: @properties @duration @ease;
  transition: @properties @duration @ease;
}

// Mixin for warning and notification elements
.notif-warning-styles(@backgroundColor, @borderColor, @textColor) {
  font-size: 1rem !important;
  display: inline-block;
  margin-top: 5px;
  padding: 2px 15px;
  background: @backgroundColor;
  border-left: 3px solid @borderColor;
  color: @textColor;
}

// Mixin for border radius (adds vendor prefixes)
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// ---------------------------------------------------------------------
// 1.5) Resets & Minor Adjustments
// ---------------------------------------------------------------------
.block.box-actions { margin-top: 0; }
.amcheckout-title  { padding: unset !important; }
.weglot_switcher .wgcurrent { padding: 0 !important; }
.wg-default, .wg-default .country-selector { right: unset !important; left: 20px !important;}
a.action::after { content: none !important; }
span.order-status { vertical-align: super; } // View Order
.select2-selection--single {
  height: @height-primary__combined !important;
  .select2-selection__rendered,
  .select2-selection__arrow {
    height: @height-primary__combined !important;
    line-height: @height-primary__combined !important;
  }
}
.select2-results__option { margin-bottom: 0 !important; }
.toolbar { margin-bottom: unset !important; }
.portal-orderpayment-index .page-title { margin-top: 20px; }
hr { border-top: 2px dashed black; }

// ---------------------------------------------------------------------
// 2) Base & Global Styles
// ---------------------------------------------------------------------
html,
body {
  background-color: @page__background-color;
  color: @font-color__base;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  // Safari-specific fix for text rendering
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-wrapper {
  background-color: @page__background-color;
}
.page-title-wrapper {
  text-align: center;
  .page-title {
    margin-right: unset !important;
    font-size: 3rem !important;
  }
}

.fa,
.fad {
  font-size: 14px !important;
}

/* Adjust root font-size for consistency */
:root {
  --bs-body-font-size: 1.4rem;
  --bs-table-bg: rgba(0,0,0,0);
  --bs-border-width: 6px;
}

.table{
  --bs-table-bg: rgba(0,0,0,0);
}

fieldset.fieldset > .field {
  margin: 0 0 5px;
}

.quick-order {
  .form-list {
    padding-left: 0;
    li {
      list-style-type: none;
    }
  }
}

/* ENABLE TAGS */
#block-collapsible-nav-false {

  // Tag pill (pseudo-element) styling
  .tag-style(@text; @color) {
    content: @text;
    background-color: @color;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    //margin-left: 5px;
    position: relative;
    top: -5px;
    left: 5px;
  }

  // Helper: apply disabled styles only when requested
  .maybe-disabled(@flag) when (@flag = true) {
    color: #b3b3b3 !important;
    pointer-events: none;
    cursor: not-allowed;
  }
  .maybe-disabled(@flag) when not (@flag = true) { } // noop

  // Single public mixin — enabled by default
  .nav-item-tag(@text; @color; @disabled: false) {
    a, strong {
      position: relative;
      &::after { .tag-style(@text; @color); }
      .maybe-disabled(@disabled);
    }
  }

  //.nav-item-partnerresources {
  //  .nav-item-tag("Soon"; darkorange; true);
  //}
  .nav-item-dealerlocator {
    .nav-item-tag(""; @color-primary__bold);
  }
  .nav-item-forwardorder{
    .nav-item-tag(""; @color-primary__bold);

    // Slide-out card with icon on hover
    position: relative;

    &::before {
      content: 'Delivery in 2026';

      // Positioning
      position: absolute;
      left: 100%;
      top: 49%;
      transform: translateY(-50%) translateX(-20px); // Start hidden 20px left
      margin-left: 10px; // Gap between menu and card

      // Appearance
      background-color: @color-primary__base;
      color: @color-secondary__base;
      padding: 4px 16px;
      font-size: 1.3rem;
      font-weight: 600;
      white-space: nowrap;

      // Shadow and border
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border: 1px solid @border-color__base;

      // Arrow pointer
      &::after {
        content: '';
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-right-color: @page__box-color;
      }

      // Hide by default
      opacity: 0;
      visibility: hidden;
      pointer-events: none;

      // Smooth animation
      //.transition(~"opacity, visibility, transform", 0.3s, ease-out);
      z-index: 999;
    }

    // Show card on hover
    &:hover::before {
      opacity: 1;
      visibility: visible;
      transform: translateY(-50%) translateX(0); // Slide to final position
    }
  }

  .nav-item-payment {
    .nav-item-tag(""; darkorange);
  }

  .saved-order-selector-container {
    .nav-item-tag(""; @color-primary__bold);
  }

  // Limited nav items (generic)
  //.nav.item:first-of-type,
  //.nav.item:not([class*="nav-item-"]) {
  //    .nav-item-tag("Limited"; darkorange; true);
  //}

  // Hide slide-out card on mobile
  @media (max-width: 768px) {
    .nav-item-forwardorder::before {
      display: none;
    }
  }
}


// ---------------------------------------------------------------------
// 3) Header, Footer & Navigation
// ---------------------------------------------------------------------
header {
  background-color: #000;
  .logo {
    img {
      max-height: 50px;
      width: auto;
    }
  }
  .store-label {
    color: @color-secondary__base;
    float: left;
    margin-top: 5px;
  }

  .panel.header {
    float: right;
    color: @color-secondary__base;
    font-weight: bold;

    .link authorization-link {
      display: none;
    }
  }
}

.page-header {
  .panel.wrapper {
    background-color: #000;
    color: #fff;
    a {
      color: #fff;
      &:hover {
        color: @color-primary__hover;
      }
    }
  }
}
.copyright {
  background: @color-primary__base;
}

.dealer-navigation {
  li {
    width: 100%;

    &:not(:last-child) {
      margin-bottom: 10px;
    }

    i{
      min-width: 18px;
    }
    a {
      text-decoration: none;
      text-transform: capitalize;
      display: block;
      text-align: center;
    }
  }
}

// ---------------------------------------------------------------------
// 4) Main Content & Blocks
// ---------------------------------------------------------------------
main {
  .columns {
    .column.main {
      padding-left: 0 !important;

      .page-title-wrapper {
        text-align: center;
      }
      .block-title {
        margin-bottom: 5px !important;

        >  i {
          margin-left: 15px;

          & +  a.action {
            margin-left: unset !important;
          }
        }
      }
      .block .title,
      .box-title {
        .subtitle-typography(small, initial);
        &.inline { display: inline; }
        > span {
          font-size: inherit !important;
          font-weight: inherit;
        }
      }
      .block{
        margin-bottom: 10px;

        &.block-card,
        &.block-dashboard-info,
        &.block-info,
        &.block-balance-info,
        &.block-payment-info,
        &.block-addresses,
        &.block-dealer-order,
        &.block-customer-login,
        &.block-dashboard-addresses,
        &.block-redeem,
        &.block-select {
          background-color: @page__box-color;
          padding: 20px;
          -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          @media (min-width: 992px) {
            height: calc(100% - 10px);
          }
        }
        /* ➜ Only when .amount-summary exists inside .block-card */
        &.block-card:has(.amount-summary) {
          position: relative;

          .amount-summary {
            position: absolute;
            top: 20px;
            right: 20px;
            white-space: nowrap;
          }
        }

        &.block-dealer-order {
          padding: 5px;
        }

        p,
        address,
        .balance-info {
          font-weight: bold;
        }

        .category {
          .title{
            margin-bottom: 3px;
          }
        }

        &.block-dashboard-info .block-content .box {
          width: unset !important;
        }
      }
    }
  }
}

// ---------------------------------------------------------------------
// 5) Buttons & Actions
// ---------------------------------------------------------------------
.action-bar {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 2px 8px;
  justify-items: center;
  align-items: start;
  width: 150px;

  // First button + label
  > :nth-child(1) { grid-column: 1; grid-row: 1; }
  > :nth-child(2) { grid-column: 1; grid-row: 2; }

  // Second button + label
  > :nth-child(3) { grid-column: 2; grid-row: 1; }
  > :nth-child(4) { grid-column: 2; grid-row: 2; }

  // Third button + label
  > :nth-child(5) { grid-column: 3; grid-row: 1; }
  > :nth-child(6) { grid-column: 3; grid-row: 2; }

  > a,
  > button {
    display: inline-block;
  }
}

.action.showcart::before {
  color: @color-secondary__base !important;
  content: '\f07a' !important;
  font-family: "Font Awesome 5 Pro" !important;
  .counter.qty {
    background: none;
    color: @color-secondary__base;
  }
}

button.checkout.action.primary{
  border: @border-size__primary solid @color-primary__base;
  width: 100% !important;
  &:hover {
    border: @border-size__primary solid;
  }
}

.action:not(.showcart, .close, .previous, .next),
.action.primary,
.btn-custom-primary {
  line-height: @height-primary__base;
  background-color: @color-primary__base !important;
  color: @color-secondary__base !important;
  border: @border-size__primary solid @color-primary__base;
  .border-radius(0.375rem);
  padding: 0 20px;
  display: inline-block;
  text-decoration: none !important;
  text-transform: capitalize;
  font-size: 1.4rem !important;
  .transition(~"background-color, border-color", 0.3s);

  + .action,
  .action.primary,
  .btn-custom-primary {
    //margin-top: 10px;
  }

  &.focus,
  &.checkout{
    background-color: @color-primary__highlight !important;
    color: @color-primary__base !important;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.5rem !important;
    &:hover{
      color: @color-secondary__base !important;
    }
  }
  &:hover {
    background-color: @color-primary__hover !important;
    border-color: @color-primary__hover !important;
    border-width: @border-size__primary;
    color: inherit;
    text-decoration: inherit;
  }
  &:visited {
    text-decoration: inherit;
  }
  a { color: inherit !important; }
}

.action.secondary,
.btn-custom-secondary {
  line-height: (@height-primary__base + @border-size__primary - 1);
  background-color: unset !important;
  color: @color-primary__base !important;
  border: none;
  padding: 0 1px;
  text-decoration: underline !important;
  letter-spacing: 0.02em;
  .transition(background-color, 0.3s);

  &.icon {
    border: @border-size__secondary solid @border-color__secondary;
    background-color: @color-secondary__base !important;
    padding: 0px 15px;
    font-size: 20px;
    &.focus {
      background-color: @color-secondary__base;
      border-color: @color-primary__base;
      text-transform: uppercase;
      font-weight: bold;
    }

    &:hover {
      background-color: @color-secondary__hover !important;
      border-color: @color-secondary__hover !important;
    }

    i {
      width: 25px;
      text-align: center;
    }
  }
  &:hover {
    text-shadow: 1px 0 currentColor, 0px 0 currentColor;
    background-color: unset !important;
  }
}

// Button Labels (for action-bar icon buttons)
.btn-label {
  font-size: 1rem;
  color: @font-color__base;
  display: inline-block;
  text-align: center;
}

// Fullscreen button container with label (right side)
.col-1.text-end {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 2px;
}

// Input Heights
#saved_title,
#filter-query,
#purchaseordernumber,
#shipping-address-select,
input.cart-item-qty,
.portal-payment-index input,
.portal-payment-index select,
.portal-payment-applycredit input,
.form-address-edit input,
.form-address-edit select,
.form-login input,
#order-lookup-form input {
  height: @height-primary__combined;
}

.order-lookup-form fieldset {
  margin-bottom: 15px;
}

.counter.qty {
  background: @page__box-color !important;
  color: @color-primary__base !important;
}

// Hide unnecessary controls
.nav-toggle,
.compare { display: none !important; }

// ---------------------------------------------------------------------
// 6) Tables & Order History
// ---------------------------------------------------------------------
.table-wrapper {
  table:not(.order-items-table) {
    border-collapse: separate;
    border-spacing: 0em 1.2em;
    width: 100%;
    //&#additional-addresses-table
    thead {
      display: none;
      background-color: @border-color__secondary;
      th {
        color: @color-secondary__base;
        padding: 10px;
      }
    }
    tbody {
      > tr {
        background-color: @page__box-color;
        //background-color: #f9f9f9;
        .block-card & {
          background-color: @page__background-color;
        }
        td {
          padding: 12px;
          border: 1px solid @border-color__base;
          font-weight: bold;
          &[data-th]:not(.no-title)::before {
            padding-right: 10px;
            content: attr(data-th);
            display: block;
            font-size: small;
            font-weight: initial;
          }
          &:first-child { border-left: 1px solid @border-color__base; }
          .th-title,
          .td-title {
            .subtitle-typography(small, initial);
            &::after { content: ""; display: block; }
          }
          &.status {
            font-size: small;
            font-weight: unset;
            span {
              padding: 1px 12px;
              display: flex;
              justify-content: center;
              align-items: center;
              &.Co,
              &.Cl {
                border: 1px solid green;
                color: green;
              }
              &.On,
              &.Cr,
              &.Pe {
                border: 1px solid orangered;
                color: orangered;
              }
              &.Op {
                border: 1px solid orange;
                color: orange;
              }
              &.Sh,
              &.Pr {
                border: 1px solid dodgerblue;
                color: dodgerblue;
              }
              &.Ca {
                border: 1px solid @color-primary__bold;
                color: @color-primary__bold;
              }
              &.Ba {
                border: 1px solid coral;
                color: coral;
              }
              &.De {
                border: 1px solid #6f42c1;
                color: #6f42c1;
              }
            }
          }
          .action { font-weight: initial; }
        }
      }
    }
  }
}

.quick-list {
  font-weight: initial;
  td[data-th]:not(.no-title)::before {
    padding-right: 10px;
    content: attr(data-th);
    display: block;
    font-size: small;
    font-weight: initial;
    text-transform: capitalize;
  }
  .category .title {
    background: #fff; /* Fallback */
    background: -webkit-linear-gradient(90deg, #fff 0%, #9b9b9b 54%, #000 100%);
    background: -moz-linear-gradient(90deg, #fff 0%, #9b9b9b 54%, #000 100%);
    background: linear-gradient(90deg, #fff 0%, #9b9b9b 54%, #000 100%);
    color: @font-color__heading;
  }
  .name h5,
  .colour{
    font-weight: bold;
  }
  .code {
    border: 1px solid;
    padding: 1px 3px;
  }
  .itemprice {
    text-align: unset !important;
    .rrp-container,
    .tp-container {
      border-bottom: unset !important;
      //margin-bottom: -7px;
      .price-label {
        display: inherit;
        float: unset !important;
        font-size: smaller;
        margin-bottom: -6px;
        &.discounted {
          color: @color-primary__bold;
        }
      }
      .origprice {
        position: relative;
        white-space: nowrap;
        &::after {
          content: "";
          position: absolute;
          top: 50%;
          left: -9px;
          right: -4px;
          border-top: 1px solid #000;
        }
      }
      .price-curr{
        font-size: medium;
        font-weight: 600;
      }
    }
  }
  .rowqty { text-align: center; }
}

// ---------------------------------------------------------------------
// 7) Sidebar Navigation
// ---------------------------------------------------------------------
.block-collapsible-nav {
  .content {
    background-color: #fff;
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    .nav {
      display: block;

      .item {
        line-height: @height-primary__base;

        &.current {
          a,
          > strong {
            padding-left: 30px;
            border-color: @font-color__base;
            color: #000;
            font-weight: 600;
          }
        }
      }
    }
  }
}

// ---------------------------------------------------------------------
// 8) Notifications & Warnings
// ---------------------------------------------------------------------
span.notif {
  &.warning {
    .notif-warning-styles(@notif-warning-bg, @notif-warning-border, @notif-warning-text)
  }
  &.important {
    .notif-warning-styles(@notif-error-bg, @notif-error-border, @notif-error-text)
  }
  &.maintenance {
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: initial;
    color: @color-secondary__base;
    padding-top: 20px;
    background: #ff6e57;
    &::after {
      content: url('../../images/maintenance_logo.png');
      display: block;
    }
  }
}

div.mage-error,
.login-container .fieldset::after {
  .notif-warning-styles(@notif-error-bg, @notif-error-border, @notif-error-text);
}

.field.required > .label::after {
  color: @color-primary__bold !important;
}

.message.global.noscript,
.message.global.cookie {
  background: @color-primary__highlight;
  border-color: @color-primary__highlight;
}

// ---------------------------------------------------------------------
// 9) Checkout Styles (Postpaid & Prepaid)
// ---------------------------------------------------------------------
.checkout-container {
  tbody{
    border-style: hidden;
    .field {
      margin-bottom: 5px !important;
    }
  }
  .amcheckout-title {
    font-size: 1.5rem !important;
  }

  .amcheckout-block:not(:first-of-type) {
    margin: unset !important;
  }

  .step-title {
    background-color: @color-primary__base !important;
    color: @color-secondary__base !important;
    padding: 5px 15px !important;
    font-weight: bold;
  }

  #checkout-step-shipping {
    max-height: 1200px;
    scroll-behavior: auto;
    overflow-y: auto;
  }

  .shipping-address-item {
    a {
      font-size: small;
      border: 1px solid blue;
      padding: 1px 4px;
      text-decoration: none;
      word-spacing: -3px;
    }
    .default-shipping-tag {
      padding: 0.25em 0.5em;
      font-size: smaller;
      background: #e0f7fa;
      color: #006064;
      vertical-align: middle;
    }
  }

  .methods-shipping {
    .col-carrier {
      display: none;
    }
  }

  .shipping-address-item,
  .amcheckout-method,
  .payment-method {
    line-height: unset !important;
    background-color: @page__box-color !important;
    padding: 10px;
    margin: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 15px;

    &.selected-item {
      border-color: @color-primary__base !important;
    }
  }

  .action-select-shipping-item {
    margin-top: -25px !important;
    float: right;
  }

  .product-item {
    padding: 10px 0 !important;

    .product {
      padding-bottom: unset !important;

      .product-item-details {
        .product-item-name-block {
          margin: 0 !important;
        }

        .product-item-inner {
          display: inline-block;
          margin: unset;
        }
      }

      .label {
        font-weight: initial;
      }

      .values {
        font-weight: bold;
      }
    }
  }

  tr:last-child td {
    padding-bottom: unset !important;
  }
  .amcheckout-additional-options {
    .amcheckout-checkboxes {
      margin: unset !important;
    }
  }

  .cvv {
    .input-text {
      width: 70px !important;
    }
  }
}

.-summary {
  .checkout-payment-method {
    &:not(.submit) {
      display: none;
    }

    &.submit .actions-toolbar {
      margin-bottom: 0 !important;
    }
  }
}

@media (min-width: 769px), print {
  .minicart-wrapper .block.block-minicart {
    width: 290px;
  }
}
.minicart-wrapper {
  .action.primary.checkout{
    padding: 5px 0px;
  }
  .product.actions{
    margin: -40px 0 0;
  }
}

// ---------------------------------------------------------------------
// 10) Footer
// ---------------------------------------------------------------------
.login-container {
  .block-customer-login {
    float: none !important;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.95) !important;
  }
}

// ---------------------------------------------------------------------
// 11) Footer
// ---------------------------------------------------------------------
.footer {
  background-color: #000;
  color: #fff;
  padding: 20px 0;
  a {
    color: #fff;
    &:hover { color: @color-primary__hover; }
  }
}

.message.global.cookie {
  .actions {
    margin-top: 0px;
    float: right;
  }
  .p {
    float: left;
  }
}

// ---------------------------------------------------------------------
// 9) Saved Order Selector Messages
// ---------------------------------------------------------------------

.saved-order-selector-messages {
  /* Reserve space - prevent layout shift */
  visibility: hidden;
  opacity: 0;
  margin-bottom: 3px;

  /* Theme notification styling */
  .notif-warning-styles(@page__background-color, @border-color__base, @font-color__base);
  box-sizing: border-box;

  /* Smooth transition */
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  min-height: 26px;

  /* Show state */
  &.show {
    visibility: visible;
    opacity: 1;
  }

  /* Message types - using theme colors */
  &.success {
    .notif-warning-styles(@notif-info-bg, #277dfd, @notif-info-text);
    font-size: 1.2rem !important;
  }

  &.error {
    .notif-warning-styles(@notif-error-bg, @notif-error-border, @notif-error-text);
    font-size: 1.2rem !important;
  }

  &.warning {
    .notif-warning-styles(@notif-warning-bg, @notif-warning-border, @notif-warning-text);
    font-size: 1.2rem !important;
  }

  &.info {
    .notif-warning-styles(@notif-info-bg, @notif-info-border, @notif-info-text);
    font-size: 1.2rem !important;
  }

  &.loading {
    .notif-warning-styles(@page__background-color, @border-color__base, #666);
    font-size: 1.2rem !important;
    color: #666;
  }

  /* Icon styling */
  i {
    font-size: 10px;
    margin-right: 1px;
  }
}

// NOTE: Future work - Move Select2 visual styling here
// TODO: Consolidate select2-overrides.css visual styles to theme
// TODO: Consolidate saved-order-widget.css visual styles to theme

// =====================================================
// Overlay Loader - Loading overlay for order form submission
// =====================================================

// Overlay container must be positioned
.block-dealer-order {
  position: relative;
}

// Overlay base styles
.overlay-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  // Start hidden
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  // CSS transition for smooth fade (GPU-accelerated)
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

// Visible state — transition disabled so the spinner paints to screen
// instantly. Safari pauses CSS transitions once a navigation is pending,
// which previously caused the spinner to only become visible at the very
// end of the request (or not at all on long submits).
.overlay-loader.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

// Message section container (holds spinner + message)
.overlay-loader .overlay-message-section {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

// Top section
.overlay-loader .overlay-message-top {
  top: 200px;
}

// Center section (stays in flexbox flow for natural centering)
.overlay-loader .overlay-message-center {
  position: static;
  transform: none;
}

// Bottom sectionI
.overlay-loader .overlay-message-bottom {
  bottom: 200px;
}

// Spinner animation
.overlay-loader .spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid @color-primary__highlight;
  border-radius: 50%;

  // GPU acceleration hint
  will-change: transform;
  animation: overlaySpinner 1s linear infinite;
}

// Spinner keyframes - GPU accelerated with transform
@keyframes overlaySpinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// Message text
.overlay-loader .overlay-message {
  margin-top: 16px;
  font-size: 16px;
  color: @font-color__base;
  font-weight: 600;
}

// When maximized: fixed positioning + hide top/bottom messages (show only center)
.overlay-loader.maximized {
  position: fixed;
  z-index: 10000;
}

.overlay-loader.maximized .overlay-message-top,
.overlay-loader.maximized .overlay-message-bottom {
  display: none;
}

// Accessibility: respect reduced motion preference
@media (prefers-reduced-motion: reduce) {
  .overlay-loader {
    transition: none;
  }

  .overlay-loader .spinner {
    animation: none;
    border-top-color: transparent;
  }
}

// Disable form interaction when loading
.block-dealer-order.loading {
  pointer-events: none;
}

.block-dealer-order.loading .overlay-loader {
  pointer-events: auto;
}

// Mobile optimization - faster transition
@media (max-width: 768px) {
  .overlay-loader {
    transition: opacity 0.1s ease, visibility 0s linear 0.1s;
  }

  .overlay-loader.visible {
    transition-delay: 0s;
  }
}

// Make dealer-order the positioning context for overlay
// This ensures overlay covers full scrollable height in both normal and fullscreen modes
.dealer-order {
  position: relative;
}

// =====================================================
// Common Modal Styles (Import, Export, Terms)
// =====================================================

// Blur page content when modal is open
body._has-modal .page-wrapper {
  filter: blur(5px);
  transition: filter 0.2s ease;
}

// Common modal header styling
.modal-popup .modal-header {
  background-color: #000;
  padding: 15px 20px;
}

.modal-popup .modal-title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.modal-popup .action-close {
  filter: invert(1);
}

.modal-popup .action-close:hover {
  opacity: 0.8;
}

// =====================================================
// CSV Export Modal Specific Styles
// =====================================================

.modal-popup.csv-export-modal .modal-inner-wrap {
  max-width: 450px;
  width: 90%;
}

.modal-popup.csv-export-modal .modal-footer {
  display: none; // Hide footer, buttons are in content
}

.csv-export-content {
  padding: 20px;
  text-align: center;
}

.csv-export-icon {
  font-size: 48px;
  color: #27ae60;
  display: block;
  margin-bottom: 15px;
}

.csv-export-description {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

.csv-export-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.csv-export-btn {
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.csv-export-btn i {
  margin-right: 8px;
}

// Override Luma's hardcoded account page sidebar widths
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .account.page-layout-2columns-left {
        .sidebar-main,
        .sidebar-additional {
            width: 18.3%;
        }

        .column.main {
            width: 81.7%;
        }
    }
}