.or-divider {
        padding: 10px 0px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        box-sizing: border-box;
    }
    .or-divider::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background-color: rgb(221, 221, 221);
        z-index: 1;
        margin: 0 20px;
    }
    .or-divider span {
        background-color: rgb(255, 255, 255);
        color: rgb(153, 153, 153);
        display: inline-block;
        font-size: var(--text-sm);
        font-weight: 300;
        line-height: 24px;
        padding: 0px 10px;
        position: relative;
        z-index: 2;
        box-sizing: border-box;
    }




.custom-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 0;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
}

.custom-tabs::-webkit-scrollbar {
  display: none;
}

.custom-tabs .nav-item {
  flex: 1 1 auto;
  min-width: fit-content;
  position: relative;
}

.custom-tabs .nav-link {
  background: transparent;
  padding: 12px 16px;
  margin: 0;
  position: relative;
  min-width: auto;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.5;
  border: none;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--text-primary);
  transition: all 0.2s ease;
  margin-bottom: -1px;
}

.custom-tabs .nav-link:hover {
  color: var(--blue-550);
  background-color: var(--blue-100);
}

.custom-tabs .nav-link.active {
  color: var(--blue-550);
  font-weight: 700;
  border-bottom: 3px solid var(--blue-550);
  background: transparent;
}

.custom-tabs .tab-text {
  text-overflow: ellipsis;
  overflow: hidden;
}

.custom-tabs.nav-underline .nav-link {
  border-bottom-width: 3px;
}

.custom-tabs.nav-underline .nav-link.active {
  border-bottom-color: var(--blue-550);
}





.long-form-content {
  max-width: 65ch;
      margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.long-form-content {
  font-size: var(--text-base);
  line-height: 1.75;
}

.long-form-content p {
  line-height: 1.7;
  margin-bottom: 1.5em;
}

.long-form-content h2,
.long-form-content h3 {
  line-height: 1.3;
  font-size: 1.25em;
  font-weight: 600;
  color: #1a1a1a;
}

.long-form-content {
  text-align: left;
}

.content-section {
  margin-bottom: 2em;
}

.content-section:last-child {
  margin-bottom: 0;
}

.long-form-content h2,
.long-form-content h3 {
  margin-top: 2.5em;
  margin-bottom: 0.75em;
}

.long-form-content h2:first-child,
.long-form-content h3:first-child {
  margin-top: 0;
}

.secondary-text {
  color: #666;
  font-size: var(--text-base);
  line-height: 1.7;
  font-style: italic;
}

.long-form-content p {
  margin-top: 0;
  margin-bottom: 1.25em;
  color: #333;
}

.long-form-content p:last-child {
  margin-bottom: 0;
}

.long-form-content ul,
.long-form-content ol {
  margin-bottom: 1.5em;
  padding-left: 1.5em;
  line-height: 1.7;
}

.long-form-content li {
  margin-bottom: 0.5em;
}

.long-form-content blockquote {
  margin: 2em 0;
  padding-left: 1.5em;
  border-left: 3px solid #ddd;
  color: #555;
  font-style: italic;
}

.long-form-content a {
  color: var(--blue-550);
  text-decoration: underline;
font-weight: var(--font-bold);
  text-decoration-color: rgba(37, 99, 235, 0.3);
  text-underline-offset: 2px;
  transition: all 0.2s ease;
}

.long-form-content a:hover {
  color: var(--blue-700);
  text-decoration-color: rgba(37, 99, 235, 0.8);
}

.long-form-content a:visited {
  color: #7c3aed;
}

.long-form-content a:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 2px;
}


/* General Table Improvements */
.table {
  border-collapse: separate;
  border-spacing: 0;
}

/* Rule 4: Reduce Visual Clutter - Remove excessive borders */
.table thead th {
  border-bottom: 2px solid #dee2e6;
  border-top: none;
  font-weight: 600;
  padding: 12px 16px;
}

.table tbody td {
  border: none; /* Remove all cell borders */
  padding: 12px 16px;
}

/* Use background colors for row separation instead of borders */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

.table tbody tr {
  transition: background-color 0.15s ease;
}

.table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Rule 5: Baseline Alignment for mixed font sizes */
.table td,
.table th {
  vertical-align: baseline; /* Align by baseline instead of middle */
}

/* For rows that need middle alignment (like icon rows) */
.table tr.align-middle td {
  vertical-align: middle;
}

/* Rule 1: Right-Align Numerical Data */
/* Apply to page count and any other numerical columns */
.table tbody tr td:has(+ td):first-child + td {
  /* This is for the revision details table where values might be numbers */
}

/* Specific right-alignment for numerical fields */
.numerical-data {
  text-align: right;
  font-variant-numeric: tabular-nums; /* Ensures consistent digit width */
}

/* Rule 2: Combine Columns for Hierarchy (for revision details table) */
.key-value-table tbody td:first-child {
  width: 30%;
  color: #1a1a1a;
  font-weight: 600;
}

.key-value-table tbody td:last-child {
  width: 70%;
  color: #333;
  font-weight: 400;
}

/* Rule 3: Enrich with Visuals - Icon styling */
.table .bi-eye {
  transition: all 0.2s ease;
    color : var(--blue-550);
}

.table .bi-eye:hover {
  transform: scale(1.1);
}

/* Better link styling in tables */
.table a.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.table a.nav-link:hover {
  background-color: rgba(13, 110, 253, 0.1);
}

/* Add subtle shadow for table container (Rule 4 alternative) */
.table {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

/* Increase spacing between rows (Rule 4) */
.table tbody tr td {
  padding-top: 14px;
  padding-bottom: 14px;
}

.table thead th {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* For the key-value table (revision details), add extra spacing */
#revision-details .table tbody tr td {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Rule 2: Visual hierarchy in cells */
.table .display-6.fs-6.fw-light {
  color: var(--text-primary); /* Softer color for data values */
  line-height: 1.75;
    font-weight: 400 !important;
    max-width: 65ch;
    text-align: left !important;
}

.table .display-6.fs-6.fw-bold {
  color: #1a1a1a; /* Stronger color for labels/headers */
  line-height: 1.5;
}

/* Remove the striped background from thead if present */
.table thead {
  background-color: #f8f9fa;
}

/* Add spacing between table and container */
.tab-pane .table {
  margin-top: 24px;
}

/* Responsive: Reduce padding on smaller screens */
@media (max-width: 768px) {
  .table tbody tr td,
  .table thead th {
    padding: 10px 12px;
  }
}



/* ============================================================================
   PRODUCT PURCHASE SECTION - RESPONSIVE STYLES
   ============================================================================
   This stylesheet handles the responsive behavior of the product purchase
   form, including delivery options, pricing, and action buttons.
   ========================================================================= */


/* ============================================================================
   TABLET & MOBILE (up to 1020px)
   Targets tablets in portrait/landscape and mobile devices
   ========================================================================= */

@media (min-width: 1024px){
          .option-info {
    display: inline-block;
    margin-left: 20px;

  }

           .option-info-3 {
    margin-left: 50px;

  }

          .option-info-2 {
    margin-left: 65px;

  }
}

@media (max-width: 1020px) {



  /* Main container - reduce vertical padding on smaller screens */
  .d-flex.justify-content-center.pb-3.pt-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Inner wrapper - reduce horizontal padding */
  .col-12.col-xl-11.col-xxl-9 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Product information section - reduce side padding */
  .col-12.col-lg-7.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Document preview - reorder to show first, add spacing below */
  .col-12.col-lg-5 {
    order: 1;
    margin-bottom: 2rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Product details - reorder to show second (after preview) */
  .col-12.col-lg-7.px-4.order-xs-1.order-lg-2 {
    order: 2;
  }

  /* Product type widget/badge section - add spacing below */
  .col-12.d-flex.justify-content-end.align-items-end.text-secondary {
    margin-bottom: 1rem;
  }

  /* Product title - smaller size, left aligned */
  .nim-h2.nim-font-normal.nim-text-brand-blue {
    margin-bottom: 0.75rem !important;
    text-align: left !important;
  }

  /* Product subtitle/description - reduce size and left align */
  .nim-mt-2.d-flex.justify-content-end.align-items-center h6 {
    text-align: left !important;
    line-height: 1.5;
  }

  .nim-mt-2.d-flex.justify-content-end.align-items-center {
    justify-content: flex-start !important;
    margin-bottom: 1.5rem;
  }

  /* Purchase options form - reduce top margin */
  #purchase-options.nim-mt-6 {
    margin-top: 2rem !important;
  }

  /* Best Price Guarantee badge - center and add spacing */
  .row.d-flex.justify-content-end.mb-1:first-child {
    justify-content: center !important;
    margin-bottom: 1rem !important;
  }

  .row.d-flex.justify-content-end.mb-1:first-child .col-6 {
    max-width: 100%;
    flex: 0 0 100%;
  }

  .row.d-flex.justify-content-end.mb-1:first-child .col {
    text-align: center !important;
  }

  /* Delivery option rows (PDF, Print, Bundle) - increase spacing */
  .row.d-flex.justify-content-between.mb-1 {
    margin-bottom: 1.25rem !important;
  }

  /* Terms & Conditions checkbox - adjust spacing and padding */
  .col-12.nim-mb-6 {
    margin-bottom: 1.5rem !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Primary Buy Now button - larger touch target */
  #btn-buy_now {
    min-height: 52px;
  }

  /* OR divider between primary and secondary actions */
  .or-divider {
    margin: 1.25rem 0;
  }

  /* Secondary action buttons (Add to Cart, Watchlist) - stack vertically */
  .col-11.p-1.d-flex.gap-3 {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .flex-fill {
    width: 100% !important;
  }

  /* Secondary action buttons - adequate touch target height */
  button[id^="btn-watchlist"] {
    min-height: 48px;
  }
}


/* ============================================================================
   TABLET PORTRAIT (768px to 1024px)
   Specific adjustments for tablets in portrait orientation
   ========================================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Product section - increase horizontal padding for better centering */
  .col-12.col-lg-7.px-4 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }
}


/* ======================================================================x======
   SMALL MOBILE (up to 399px)
   Extra adjustments for very small phone screens
   ========================================================================= */
@media (max-width: 399px) {

  /* Delivery option rows - increase spacing between options */
  .select-option {
    margin-bottom: 10px !important;
  }

  /* Option info badges (Instant, Shipping time, etc.) - move up */
  .option-info {
    margin-top: -8px !important;
  }

  /* Option info text - reduce font size */
  .option-info i span {
    font-size: 12px !important;
  }



  /* Product section - minimal padding on very small screens */
  .col-12.col-lg-7.px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }


  /* Title container - center align on very small screens */
  .col-12.me-3.d-flex.flex-wrap.justify-content-end.align-items-center {
    justify-content: center !important;
    margin-right: 0 !important;
  }

  .nim-h2.nim-font-normal.nim-text-brand-blue {
    text-align: center !important;
  }
}