/* @font-face {
  font-family: 'HerbalifeFont';
  src: url('../assets/fonts/HerbalifeNatural-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
*/
:root {
  font-family: 'HerbalifeFont';
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-width: 320px;
  /* min-height: 100vh; */
  background: #fff;
   font-family: 'HerbalifeFont' !important;
}

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Add smooth scrolling to the page */
html {
  scroll-behavior: smooth;
}

/* Hide blinking cursor when not needed */
* {
  caret-color: transparent;
}

/* Show cursor only for input fields */
input, textarea, [contenteditable] {
  caret-color: auto;
}

/* Remove up/down arrows (spinners) from number inputs */
/* For Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Remove browser-added styles during autofill */
input#phone-input:-webkit-autofill,
input#phone-input:-webkit-autofill:hover,
input#phone-input:-webkit-autofill:focus,
input#phone-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
  -webkit-text-fill-color: #000 !important;
  transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* OTP Input Animation */
@keyframes borderBlink {
  0%, 100% {
    border-bottom-color: #000;
    border-bottom-width: 2px;
  }
  50% {
    border-bottom-color: #000;
    border-bottom-width: 3px;
  }
}
.otp-input-blinking {
  animation: borderBlink 1.5s ease-in-out infinite;
}
.otp-input-focused {
  border-bottom-color: #000 !important;
  border-bottom-width: 3px !important;
}

.btn.btn-next {
  width: auto;
  padding: 0.5rem 50px;
  min-height: 2.5rem;
  color: #FFF;
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem;
  background-color: #000000;
}

.btn.btn-next.auto-width {
  width: auto;
}

.btn.btn.btn-next:hover {
  background-color: #000;
}

.layout .title {
  color: #000;
  text-align: center;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
  flex-grow: 1;
  margin: auto;
  inset: 0;
  padding: 20px;
  position: absolute;
  width: 100% !important;
  max-width: 700px !important;
}

.recommendation-page .skin-conditions .skin-condition {
  display: flex;
  width: 12.5rem;
  height: 3.125rem;
  padding: 0.9375rem 1.25rem 0.9375rem 1.3125rem;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-shrink: 0;
  border-radius: 0.3125rem;
  border: 1.5px solid #CC4856;
  background: #FFDBDF;
  color: #000;
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1rem;
  cursor: pointer;
  /* 88.889% */
}

.recommendation-page .skin-conditions .skin-condition.selected {
  background: #CC4856;
  cursor: default;
  color: #fff;
  font-weight: 600;
}

/* Style scrollbar to be slim with rounded corners */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
  height: 1px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.product-card {
  display: flex;
  height: 15.625rem;
  width: 12.5rem;
  padding: 0.5625rem 0rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  border-radius: 0.3125rem;
  border: 1.5px solid #000;
  padding: 0.5rem;
}

@media (max-width: 575px) {
  .product-card {
    width: 9.6875rem;
  }
}

.product-card .product-image {
  flex-basis: 60%;
  overflow: hidden;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-card .product-name {
  color: #464646;
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.product-card .product-price {
  color: #464646;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.recommendation-page .product-routine-list-header {
  color: #000;
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem;
  margin-top: 25px;
  margin-bottom: 25px;
}

.recommendation-page .product-routine-list-products {
  gap: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 12.5rem));
  justify-content: space-between;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 575px) {
  .recommendation-page .product-routine-list-products {
    gap: 25px;
    grid-template-columns: repeat(auto-fill, minmax(9.6875rem, 9.6875rem));
  }
}

.feedback-form {
  max-width: clamp(34.20388rem, 34.20388rem, 90vw);
  height: 20.63919rem;
  border-radius: 0.75rem;
  border: 2px solid #CC4856;
  background: #FFF;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.feedback-form .feedback-rating {
  display: flex;
  flex-direction: row;
  align-content: space-between;
  justify-content: center;
  width: 60%;
  margin-inline: auto;
}

.feedback-form .feedback-rating .feedback-rating-star {
  cursor: pointer;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 5px;
}

.feedback-form .feedback-rating .feedback-rating-star.selected {
  border: 1px solid #CC4856;
  cursor: default;
}

.feedback-form .feedback-rating .feedback-rating-star svg {
  height: 65px;
  width: 65px;
}



.skin-scores-container {
  display: grid;
      grid-template-columns: 45% 30%;
      /* gap: 10rem; */
      justify-content: space-around;
}

@media screen and (max-width: 575px) {
  .skin-scores-container {
    grid-template-columns: 1fr;
  }
}

.skin-scores-container .skin-scores {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
  align-items: space-between;
}

@media screen and (max-width: 575px) {
  .skin-scores-container .skin-scores {
    width: 100%;
    overflow: auto;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: flex-start;
    padding: 3px 5px;
    gap: 1rem;
  }
}

.skin-scores-container .skin-scores .score-selector {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
  min-width: 120px;
  max-width: 120px;
  flex-shrink: 0;
}


@media screen and (max-width: 575px) {
  .skin-scores-container .skin-scores .score-selector {
    min-width: 80px;
    max-width: 80px;
    flex-shrink: 0;
  }

  .skin-scores-container .skin-scores .score-selector .concern-name {
    font-size: 0.75rem;
    text-align: center;
    word-wrap: break-word;
    hyphens: auto;
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

.skin-scores-container .skin-scores .score-selector .concern-name {
  text-align: center;
  word-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: 0.875rem;
  font-weight: 500;
}


.skin-scores-container .disclaimer {
  color: #6D6D6D;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem;
  width: 100%;
  text-align: center;
}

@media screen and (max-width: 575px) {
  .skin-scores-container .disclaimer {
    font-size: 0.625rem;
  }

}

.skin-scores-container .skin-scores .score-selector .score {
  width: 6.25rem;
  height: 6.25rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #FFF;
  text-align: center;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2rem;
  /* 100% */
  border-radius: 500px;
  border: 5px solid transparent;
  cursor: pointer;
}

@media screen and (max-width: 575px) {
  .skin-scores-container .skin-scores .score-selector .score {
    width: 3.9375rem;
    height: 3.9375rem;
    font-size: 1.375rem;
    border-width: 3px;
  }
}

.skin-scores-container .skin-scores .score-selector .score.r3 {
  background: #CC4856;
}

.skin-scores-container .skin-scores .score-selector .score.r2 {
  background: #FFB347;
}

.skin-scores-container .skin-scores .score-selector .score.r1 {
  background: #77DD77;
}

.skin-scores-container .skin-scores .score-selector .score.selected {
  cursor: default;
}

.skin-scores-container .skin-scores .score-selector .score.r3.selected {
  border-color: #992424;
}

.skin-scores-container .skin-scores .score-selector .score.r2.selected {
  border-color: #eb8e09;
}

.skin-scores-container .skin-scores .score-selector .score.r1.selected {
  border-color: #048904;
}

@media screen and (max-width: 575px) {
  .skin-scores-container .concern-image {
    padding-bottom: 1rem;
    border-bottom: 1px dashed #848484;
  }
}

.user-info .form-label {
  color: #000;
  leading-trim: both;
  text-edge: cap;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem;
  margin-bottom: 1.12rem;
  /* 133.333% */
}

input::-webkit-input-placeholder {
  opacity: 1 !important;
  /* for older chrome versions. may no longer apply. */
}

input:-moz-placeholder {
  /* Firefox 18- */
  opacity: 1 !important;
}

input::-moz-placeholder {
  /* Firefox 19+ */
  opacity: 1 !important;
}

.osc-smart-capture-container {
  max-height: 80vh !important;
}

/* PDF.js Custom Styles */
.react-pdf__Document {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.react-pdf__Page {
  max-width: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  margin: 0;
}

.react-pdf__Page canvas {
  max-width: 100%;
  height: auto !important;
  display: block;
}

.react-pdf__Page__textContent {
  border: 1px solid transparent;
  box-shadow: none;
}

.react-pdf__Page__annotations {
  border: 1px solid transparent;
}

/* Ensure PDF pages are properly sized on mobile */
@media screen and (max-width: 575px) {
  .react-pdf__Page {
    width: 100% !important;
  }
  
  .react-pdf__Page canvas {
    width: 100% !important;
    height: auto !important;
  }
}/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --react-pdf-annotation-layer: 1;
  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
  --input-focus-border-color: Highlight;
  --input-focus-outline: 1px solid Canvas;
  --input-unfocused-border-color: transparent;
  --input-disabled-border-color: transparent;
  --input-hover-border-color: black;
  --link-outline: none;
}

@media screen and (forced-colors: active) {
  :root {
    --input-focus-border-color: CanvasText;
    --input-unfocused-border-color: ActiveText;
    --input-disabled-border-color: GrayText;
    --input-hover-border-color: Highlight;
    --link-outline: 1.5px solid LinkText;
  }
  .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
  .annotationLayer .choiceWidgetAnnotation select:required,
  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
    outline: 1.5px solid selectedItem;
  }

  .annotationLayer .linkAnnotation:hover {
    backdrop-filter: invert(100%);
  }
}

.annotationLayer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 3;
}

.annotationLayer[data-main-rotation='90'] .norotate {
  transform: rotate(270deg) translateX(-100%);
}
.annotationLayer[data-main-rotation='180'] .norotate {
  transform: rotate(180deg) translate(-100%, -100%);
}
.annotationLayer[data-main-rotation='270'] .norotate {
  transform: rotate(90deg) translateY(-100%);
}

.annotationLayer canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

.annotationLayer section {
  position: absolute;
  text-align: initial;
  pointer-events: auto;
  box-sizing: border-box;
  margin: 0;
  transform-origin: 0 0;
}

.annotationLayer .linkAnnotation {
  outline: var(--link-outline);
}

.textLayer.selecting ~ .annotationLayer section {
  pointer-events: none;
}

.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a:hover {
  opacity: 0.2;
  background: rgba(255, 255, 0, 1);
  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
}

.annotationLayer .textAnnotation img {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea),
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  background-image: var(--annotation-unfocused-field-background);
  border: 2px solid var(--input-unfocused-border-color);
  box-sizing: border-box;
  font: calc(9px * var(--total-scale-factor)) sans-serif;
  height: 100%;
  margin: 0;
  vertical-align: top;
  width: 100%;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
.annotationLayer .choiceWidgetAnnotation select:required,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
  outline: 1.5px solid red;
}

.annotationLayer .choiceWidgetAnnotation select option {
  padding: 0;
}

.annotationLayer .buttonWidgetAnnotation.radioButton input {
  border-radius: 50%;
}

.annotationLayer .textWidgetAnnotation textarea {
  resize: none;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
  background: none;
  border: 2px solid var(--input-disabled-border-color);
  cursor: not-allowed;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
  border: 2px solid var(--input-hover-border-color);
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
  border-radius: 2px;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
.annotationLayer .choiceWidgetAnnotation select:focus {
  background: none;
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
  background-image: none;
  background-color: transparent;
}

.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
  border: 2px solid var(--input-focus-border-color);
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  background-color: CanvasText;
  content: '';
  display: block;
  position: absolute;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  height: 80%;
  left: 45%;
  width: 1px;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
  transform: rotate(45deg);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  transform: rotate(-45deg);
}

.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  border-radius: 50%;
  height: 50%;
  left: 30%;
  top: 20%;
  width: 50%;
}

.annotationLayer .textWidgetAnnotation input.comb {
  font-family: monospace;
  padding-left: 2px;
  padding-right: 0;
}

.annotationLayer .textWidgetAnnotation input.comb:focus {
  /*
   * Letter spacing is placed on the right side of each character. Hence, the
   * letter spacing of the last character may be placed outside the visible
   * area, causing horizontal scrolling. We avoid this by extending the width
   * when the element has focus and revert this when it loses focus.
   */
  width: 103%;
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  appearance: none;
}

.annotationLayer .popupTriggerArea {
  height: 100%;
  width: 100%;
}

.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
  position: absolute;
}

.annotationLayer .popupWrapper {
  position: absolute;
  font-size: calc(9px * var(--total-scale-factor));
  width: 100%;
  min-width: calc(180px * var(--total-scale-factor));
  pointer-events: none;
}

.annotationLayer .popup {
  position: absolute;
  max-width: calc(180px * var(--total-scale-factor));
  background-color: rgba(255, 255, 153, 1);
  box-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor))
    rgba(136, 136, 136, 1);
  border-radius: calc(2px * var(--total-scale-factor));
  padding: calc(6px * var(--total-scale-factor));
  margin-left: calc(5px * var(--total-scale-factor));
  cursor: pointer;
  font: message-box;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: auto;
}

.annotationLayer .popup > * {
  font-size: calc(9px * var(--total-scale-factor));
}

.annotationLayer .popup h1 {
  display: inline-block;
}

.annotationLayer .popupDate {
  display: inline-block;
  margin-left: calc(5px * var(--total-scale-factor));
}

.annotationLayer .popupContent {
  border-top: 1px solid rgba(51, 51, 51, 1);
  margin-top: calc(2px * var(--total-scale-factor));
  padding-top: calc(2px * var(--total-scale-factor));
}

.annotationLayer .richText > * {
  white-space: pre-wrap;
  font-size: calc(9px * var(--total-scale-factor));
}

.annotationLayer .highlightAnnotation,
.annotationLayer .underlineAnnotation,
.annotationLayer .squigglyAnnotation,
.annotationLayer .strikeoutAnnotation,
.annotationLayer .freeTextAnnotation,
.annotationLayer .lineAnnotation svg line,
.annotationLayer .squareAnnotation svg rect,
.annotationLayer .circleAnnotation svg ellipse,
.annotationLayer .polylineAnnotation svg polyline,
.annotationLayer .polygonAnnotation svg polygon,
.annotationLayer .caretAnnotation,
.annotationLayer .inkAnnotation svg polyline,
.annotationLayer .stampAnnotation,
.annotationLayer .fileAttachmentAnnotation {
  cursor: pointer;
}

.annotationLayer section svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .annotationTextContent {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: transparent;
  user-select: none;
  pointer-events: none;
}

.annotationLayer .annotationTextContent span {
  width: 100%;
  display: inline-block;
}
/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --react-pdf-text-layer: 1;
  --highlight-bg-color: rgba(180, 0, 170, 1);
  --highlight-selected-bg-color: rgba(0, 100, 0, 1);
}

@media screen and (forced-colors: active) {
  :root {
    --highlight-bg-color: Highlight;
    --highlight-selected-bg-color: ButtonText;
  }
}

[data-main-rotation='90'] {
  transform: rotate(90deg) translateY(-100%);
}
[data-main-rotation='180'] {
  transform: rotate(180deg) translate(-100%, -100%);
}
[data-main-rotation='270'] {
  transform: rotate(270deg) translateX(-100%);
}

.textLayer {
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  z-index: 2;
}

.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  margin: 0;
  transform-origin: 0 0;
}

/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
 * the problem doesn't show up in "text" reference tests. */
.textLayer span.markedContent {
  top: 0;
  height: 0;
}

.textLayer .highlight {
  margin: -1px;
  padding: 1px;
  background-color: var(--highlight-bg-color);
  border-radius: 4px;
}

.textLayer .highlight.appended {
  position: initial;
}

.textLayer .highlight.begin {
  border-radius: 4px 0 0 4px;
}

.textLayer .highlight.end {
  border-radius: 0 4px 4px 0;
}

.textLayer .highlight.middle {
  border-radius: 0;
}

.textLayer .highlight.selected {
  background-color: var(--highlight-selected-bg-color);
}

/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
.textLayer br::selection {
  background: transparent;
}

.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: -1;
  cursor: default;
  user-select: none;
}

.textLayer.selecting .endOfContent {
  top: 0;
}

.hiddenCanvasElement {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  display: none;
}
/**
 * RTL (Right-to-Left) CSS Support
 * These styles provide fallback for RTL layouts
 */

/* Base RTL direction */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

/* RTL-aware text alignment */
[dir="rtl"] .text-left {
  text-align: right !important;
}

[dir="rtl"] .text-right {
  text-align: left !important;
}

[dir="ltr"] .text-left {
  text-align: left !important;
}

[dir="ltr"] .text-right {
  text-align: right !important;
}

/* RTL-aware float */
[dir="rtl"] .float-left {
  float: right !important;
}

[dir="rtl"] .float-right {
  float: left !important;
}

[dir="ltr"] .float-left {
  float: left !important;
}

[dir="ltr"] .float-right {
  float: right !important;
}

/* RTL-aware margins */
[dir="rtl"] .ml-1 {
  margin-right: 0.25rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .mr-1 {
  margin-left: 0.25rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .ml-2 {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .mr-2 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .ml-3 {
  margin-right: 1rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .mr-3 {
  margin-left: 1rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .ml-4 {
  margin-right: 1.5rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .mr-4 {
  margin-left: 1.5rem !important;
  margin-right: 0 !important;
}

/* RTL-aware padding */
[dir="rtl"] .pl-1 {
  padding-right: 0.25rem !important;
  padding-left: 0 !important;
}

[dir="rtl"] .pr-1 {
  padding-left: 0.25rem !important;
  padding-right: 0 !important;
}

[dir="rtl"] .pl-2 {
  padding-right: 0.5rem !important;
  padding-left: 0 !important;
}

[dir="rtl"] .pr-2 {
  padding-left: 0.5rem !important;
  padding-right: 0 !important;
}

[dir="rtl"] .pl-3 {
  padding-right: 1rem !important;
  padding-left: 0 !important;
}

[dir="rtl"] .pr-3 {
  padding-left: 1rem !important;
  padding-right: 0 !important;
}

[dir="rtl"] .pl-4 {
  padding-right: 1.5rem !important;
  padding-left: 0 !important;
}

[dir="rtl"] .pr-4 {
  padding-left: 1.5rem !important;
  padding-right: 0 !important;
}

/* RTL-aware positioning */
[dir="rtl"] .left-0 {
  right: 0 !important;
  left: auto !important;
}

[dir="rtl"] .right-0 {
  left: 0 !important;
  right: auto !important;
}

/* RTL-aware border radius */
[dir="rtl"] .rounded-l {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

[dir="rtl"] .rounded-r {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* RTL-aware transforms for icons and arrows */
[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

[dir="rtl"] .arrow-left {
  transform: rotate(180deg);
}

[dir="rtl"] .arrow-right {
  transform: rotate(180deg);
}

/* RTL-aware input fields */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right !important;
}

[dir="ltr"] input,
[dir="ltr"] textarea,
[dir="ltr"] select {
  text-align: left !important;
}


/* RTL-aware flex direction */
[dir="rtl"] .flex-row {
  flex-direction: row-reverse;
}

/* RTL-aware lists */
[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-right: 2rem;
  padding-left: 0;
}

[dir="ltr"] ul,
[dir="ltr"] ol {
  padding-left: 2rem;
  padding-right: 0;
}

/* Override list padding for disable-rtl elements */
.disable-rtl ul,
.disable-rtl ol,
[dir="ltr"] .disable-rtl ul,
[dir="ltr"] .disable-rtl ol {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* RTL Hebrew font support */
[dir="rtl"][lang="he"],
[dir="rtl"][lang="iw"] {
  font-family: 'Arial', 'Tahoma', sans-serif;
}

/* RTL Arabic font support */
[dir="rtl"][lang="ar"] {
  font-family: 'Tahoma', 'Arial', sans-serif;
}

/* Ensure proper rendering for RTL text */
[dir="rtl"] * {
  unicode-bidi: embed;
}

/* MUI specific RTL overrides */
[dir="rtl"] .MuiButton-startIcon {
  margin-right: 0;
  margin-left: 8px;
}

[dir="rtl"] .MuiButton-endIcon {
  margin-left: 0;
  margin-right: 8px;
}

[dir="rtl"] .MuiListItemIcon-root {
  min-width: 56px;
  margin-right: 0;
  margin-left: 16px;
}

/* Override ListItemIcon margin for disable-rtl elements */
.disable-rtl .MuiListItemIcon-root,
[dir="rtl"] .disable-rtl .MuiListItemIcon-root,
[dir="ltr"] .disable-rtl .MuiListItemIcon-root {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure proper text direction inheritance */
/* [dir="rtl"] .MuiTypography-root {
  text-align: inherit;
} */

/* RTL-aware dialog positioning */
[dir="rtl"] .MuiDialog-paper {
  direction: rtl;
}

/* RTL-aware drawer */
[dir="rtl"] .MuiDrawer-paperAnchorLeft {
  right: 0;
  left: auto;
}

[dir="rtl"] .MuiDrawer-paperAnchorRight {
  left: 0;
  right: auto;
}

/* Disable RTL styling utility class */
/* Use this class to force LTR on specific elements */
.disable-rtl,
.disable-rtl *,
[dir="rtl"] .disable-rtl,
[dir="rtl"] .disable-rtl *,
.disable-rtl[class*="muirtl"],
.disable-rtl[class*="muirtl"] *,
[dir="rtl"] .disable-rtl[class*="muirtl"],
[dir="rtl"] .disable-rtl[class*="muirtl"] * {
  direction: ltr !important;
}

.disable-rtl input,
.disable-rtl textarea,
.disable-rtl select,
[dir="rtl"] .disable-rtl input,
[dir="rtl"] .disable-rtl textarea,
[dir="rtl"] .disable-rtl select {
  text-align: left !important;
}

/* OTP inputs should remain center-aligned */
.disable-rtl input[id^="code-input-"],
[dir="rtl"] .disable-rtl input[id^="code-input-"],
[dir="ltr"] .disable-rtl input[id^="code-input-"] {
  text-align: center !important;
}

/* MUI specific overrides for disable-rtl */
.disable-rtl .MuiInputBase-root,
[dir="rtl"] .disable-rtl .MuiInputBase-root,
.disable-rtl[class*="muirtl"] .MuiInputBase-root,
[dir="rtl"] .disable-rtl[class*="muirtl"] .MuiInputBase-root {
  direction: ltr !important;
}

.disable-rtl .MuiInputBase-input,
.disable-rtl .MuiInputBase-inputAdornedEnd,
.disable-rtl .MuiInputBase-inputAdornedStart,
[dir="rtl"] .disable-rtl .MuiInputBase-input,
[dir="rtl"] .disable-rtl .MuiInputBase-inputAdornedEnd,
[dir="rtl"] .disable-rtl .MuiInputBase-inputAdornedStart,
.disable-rtl[class*="muirtl"] .MuiInputBase-input,
.disable-rtl[class*="muirtl"] .MuiInputBase-inputAdornedEnd {
  direction: ltr !important;
  text-align: left !important;
}

.disable-rtl .MuiSelect-select,
.disable-rtl .MuiMenuItem-root,
[dir="rtl"] .disable-rtl .MuiSelect-select,
[dir="rtl"] .disable-rtl .MuiMenuItem-root {
  direction: ltr !important;
  text-align: left !important;
}

.disable-rtl .MuiPaper-root,
.disable-rtl .MuiList-root,
[dir="rtl"] .disable-rtl .MuiPaper-root,
[dir="rtl"] .disable-rtl .MuiList-root {
  direction: ltr !important;
}

/* Target MUI TextField with RTL classes */
.disable-rtl[class*="MuiTextField-root"][class*="muirtl"],
.disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"],
[dir="rtl"] .disable-rtl[class*="MuiTextField-root"][class*="muirtl"],
[dir="rtl"] .disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"] {
  direction: ltr !important;
}

.disable-rtl[class*="MuiTextField-root"][class*="muirtl"] .MuiInputBase-root,
.disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"] .MuiInputBase-root,
[dir="rtl"] .disable-rtl[class*="MuiTextField-root"][class*="muirtl"] .MuiInputBase-root,
[dir="rtl"] .disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"] .MuiInputBase-root {
  direction: ltr !important;
}

.disable-rtl[class*="MuiTextField-root"][class*="muirtl"] .MuiInputBase-input,
.disable-rtl[class*="MuiTextField-root"][class*="muirtl"] .MuiInputBase-inputAdornedEnd,
.disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"] .MuiInputBase-input,
.disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"] .MuiInputBase-inputAdornedEnd,
[dir="rtl"] .disable-rtl[class*="MuiTextField-root"][class*="muirtl"] .MuiInputBase-input,
[dir="rtl"] .disable-rtl[class*="MuiTextField-root"][class*="muirtl"] .MuiInputBase-inputAdornedEnd,
[dir="rtl"] .disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"] .MuiInputBase-input,
[dir="rtl"] .disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"] .MuiInputBase-inputAdornedEnd {
  direction: ltr !important;
  text-align: left !important;
}

.disable-rtl[class*="MuiTextField-root"][class*="muirtl"] input,
.disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"] input,
[dir="rtl"] .disable-rtl[class*="MuiTextField-root"][class*="muirtl"] input,
[dir="rtl"] .disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"] input {
  direction: ltr !important;
  text-align: left !important;
}

.disable-rtl[class*="MuiTextField-root"][class*="muirtl"] input::placeholder,
.disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"] input::placeholder,
[dir="rtl"] .disable-rtl[class*="MuiTextField-root"][class*="muirtl"] input::placeholder,
[dir="rtl"] .disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"] input::placeholder {
  text-align: left !important;
}

.disable-rtl[class*="MuiTextField-root"][class*="muirtl"] .MuiInputAdornment-root,
.disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"] .MuiInputAdornment-root,
[dir="rtl"] .disable-rtl[class*="MuiTextField-root"][class*="muirtl"] .MuiInputAdornment-root,
[dir="rtl"] .disable-rtl[class*="MuiFormControl-root"][class*="MuiTextField-root"][class*="muirtl"] .MuiInputAdornment-root {
  direction: ltr !important;
}