/* ========================================================================
   WSLA Page Card Foundation
   Scope: only main page cards: two-column side/content cards and standalone
   content cards. Does not target product cards, invoice line cards, pricing
   cards, dashboard tiles, or store product cards.
   ======================================================================== */

.wsla-two-col-content-card,
.wsla-two-col-sidebar-card,
.wsla-single-content-card,
.wsla-page-card {
  background: #ffffff;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 24px;
}

.wsla-two-col-content-card,
.wsla-single-content-card,
.wsla-page-card {
  padding: 28px;
  min-width: 0;
  max-width: 100%;
}

.wsla-two-col-sidebar-card {
  /* padding: 22px; */
  padding: 0px;
}

.wsla-two-col-layout > .wsla-two-col-content-card {
  flex: 1 1 auto;
  width: auto;
  max-width: calc(100% - 304px);
  min-width: 0;
}

.wsla-single-content-card.card,
.wsla-single-content-card.wsla-about-card,
.wsla-single-content-card.wsla-order-clean-card {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

.wsla-single-content-card > .card-body:first-child,
.wsla-page-card > .card-body:first-child {
  padding: 0;
}

.wsla-two-col-content-card .card:not(.modal-content),
.wsla-single-content-card .card:not(.modal-content),
.wsla-page-card .card:not(.modal-content),
.wsla-inner-section-card {
  border: 0 !important;
  box-shadow: none !important;
}

.wsla-inner-section-card {
  margin-bottom: 24px;
  padding: 22px;
  background: #ffffff;
  border-radius: 14px;
}

html[dir="rtl"] .wsla-two-col-page,
html[dir="rtl"] .wsla-single-content-card,
body.body-rtl .wsla-two-col-page,
body.body-rtl .wsla-single-content-card {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .wsla-two-col-page,
html[dir="ltr"] .wsla-single-content-card,
body:not(.body-rtl) .wsla-two-col-page,
body:not(.body-rtl) .wsla-single-content-card {
  direction: ltr;
  text-align: left;
}

/* Tables: do not force horizontal scroll on desktop. Enable it only on
   tablet/mobile where table width can exceed the viewport. */
.wsla-table-responsive,
.wsla-two-col-main .table-responsive,
.wsla-two-col-main .table-container,
.wsla-two-col-content-card .table-responsive,
.wsla-two-col-content-card .table-container,
.wsla-single-content-card .table-responsive,
.wsla-single-content-card .table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: visible;
}

@media (max-width: 991.98px) {
  .wsla-two-col-layout > .wsla-two-col-content-card {
    width: 100%;
    max-width: 100%;
  }

  .wsla-two-col-content-card,
  .wsla-single-content-card,
  .wsla-page-card {
    padding: 20px;
    border-radius: 18px;
  }

  .wsla-table-responsive,
  .wsla-two-col-main .table-responsive,
  .wsla-two-col-main .table-container,
  .wsla-two-col-content-card .table-responsive,
  .wsla-two-col-content-card .table-container,
  .wsla-single-content-card .table-responsive,
  .wsla-single-content-card .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 575.98px) {
  .wsla-two-col-content-card,
  .wsla-single-content-card,
  .wsla-page-card {
    padding: 16px;
    border-radius: 16px;
  }
}


 /* =========================================================
       WSLA Sidebar Header — Universal Styles
       ========================================================= */
       .wsla-products-sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 15px 15px;
        /* background: #ffffff; */
        background: linear-gradient(180deg, #fff, #fbfcfe);
        border-bottom: 1px solid #f5f5f7;
        border-radius: 16px 16px 0 0;
        /* direction: rtl; */
        box-sizing: border-box;
    }
    
    .wsla-products-sidebar-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        background: #fff0f0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ee5a5a;
        font-size: 22px;
        flex-shrink: 0;
        order: 1;
    }
    
    .wsla-products-sidebar-head > div {
        flex: 1;
        min-width: 0;
        order: 2;
        /* text-align: right; */
    }
    
    .wsla-products-sidebar-head h2 {
        font-size: 18px;
        font-weight: 700;
        color: #1c1c1e;
        margin: 0 0 6px 0;
        line-height: 1.35;
        letter-spacing: -0.3px;
        /* text-align: right; */
    }
    
    .wsla-products-sidebar-head p {
        font-size: 13px;
        font-weight: 400;
        color: #8e8e93;
        margin: 0;
        line-height: 1.45;
        /* text-align: right; */
    }
    
    /* ----- Icon Color Variants ----- */
    .wsla-products-sidebar-icon.icon-blue   { background: #f0f8ff; color: #007aff; }
    .wsla-products-sidebar-icon.icon-green  { background: #f0fff4; color: #34c759; }
    .wsla-products-sidebar-icon.icon-orange { background: #fff8f0; color: #ff9500; }
    .wsla-products-sidebar-icon.icon-purple { background: #f8f0ff; color: #af52de; }
    .wsla-products-sidebar-icon.icon-teal   { background: #f0fffa; color: #30b350; }
    
    /* ----- Divider inside <ul> ----- */
    .wsla-sidebar-nav .wsla-divider {
        list-style: none;
        padding: 6px 22px;
        margin: 0;
    }
    
    .wsla-sidebar-nav .wsla-divider hr {
        border: 0;
        border-top: 1px solid #f5f5f7;
        margin: 0;
    }