/**
 * Lens Module — LTR overrides
 *
 * Original styles in vibes-child/assets/scss/component/_glasses.scss were authored
 * RTL-first (right/left swapped, text-align: right, row-reverse). This file
 * normalizes the lens add-on modal for LTR sites without rewriting the source SCSS.
 *
 * Strategy: convert physical right/left to logical start/end where possible,
 * flip directional flexbox, and reset RTL-only positions back to LTR.
 */

/* ===== Modal close button — was on the left, move to the right (LTR convention) ===== */
.lenses_popup .modal-close {
  inset-inline-end: 18px;
  inset-inline-start: auto;
  left: auto;
}

@media (max-width: 767.98px) {
  .lenses_popup .modal-close {
    inset-inline-end: -31px;
    inset-inline-start: auto;
    left: auto;
  }
}

/* ===== Step labels & descriptions — start-aligned (LTR = left) ===== */
.lenses_popup .lenses__step__label,
.lenses_popup .lenses__step__description,
.lenses_popup .lenses__step__title {
  text-align: start;
}

/* ===== Form labels and option labels ===== */
.lenses_popup label,
.lenses_popup .lenses__step__option_label .label-wrap,
.lenses_popup .lenses__step__option_label .label-wrap .label,
.lenses_popup .lenses__step__option_label .label-wrap .sub-label {
  text-align: center;
}

/* ===== Info tooltip — flip arrow positioning ===== */
.lenses_popup .info .info-icon {
  inset-inline-start: 10px;
  inset-inline-end: auto;
  left: auto;
  right: auto;
}

@media (min-width: 768px) {
  .lenses_popup .info .info-icon {
    inset-inline-start: 17px;
  }
}

.lenses_popup .info .info-content {
  text-align: start;
  inset-inline-start: -3px;
  inset-inline-end: auto;
  left: auto;
  right: auto;
}

@media (min-width: 768px) {
  .lenses_popup .info .info-content {
    inset-inline-start: 0;
  }
}

.lenses_popup .info .info-content::before {
  inset-inline-start: 17px;
  inset-inline-end: auto;
  left: auto;
  right: auto;
}

@media (min-width: 768px) {
  .lenses_popup .info .info-content::before {
    inset-inline-start: 27px;
  }
}

/* ===== Eye selects (right_eye / left_eye) — info content + arrows ===== */
.lenses_popup .lenses__step__option_wrap .info .info-icon {
  inset-inline-end: -6px;
  inset-inline-start: auto;
  left: auto;
  right: auto;
}

@media (min-width: 768px) {
  .lenses_popup .lenses__step__option_wrap .info .info-icon {
    inset-inline-end: auto;
    inset-inline-start: -12px;
  }
}

.lenses_popup .lenses__step__option_wrap .info .info-content {
  inset-inline-start: auto;
  inset-inline-end: auto;
}

@media (max-width: 767.98px) {
  .lenses_popup .lenses__step__option_wrap .info .info-content {
    inset-inline-start: -17px;
    inset-inline-end: auto;
    left: auto;
    right: auto;
  }
  .lenses_popup .lenses__step__option_wrap .info .info-content::before {
    inset-inline-start: 13px;
    inset-inline-end: auto;
    left: auto;
    right: auto;
  }
  .lenses_popup .lenses__step__option_wrap .info .info-content::after {
    inset-inline-start: 12px;
    inset-inline-end: auto;
    left: auto;
    right: auto;
  }
}

@media (min-width: 768px) {
  .lenses_popup .lenses__step__option_wrap .info .info-content {
    inset-inline-end: -33px;
    inset-inline-start: auto;
    left: auto;
    right: auto;
  }
}

/* Eye select wraps — flip the per-key info positioning */
.lenses_popup .lenses__step__option_wrap[key='right'] .lenses__step__option--select .info .info-content {
  /* Right eye — content opens toward end (was opening toward left in RTL) */
  inset-inline-start: auto;
  inset-inline-end: 0;
  left: auto;
  right: auto;
}

@media (max-width: 767.98px) {
  .lenses_popup .lenses__step__option_wrap[key='left'] .lenses__step__option--select .info .info-content {
    inset-inline-end: 0;
    inset-inline-start: auto;
    left: auto;
    right: auto;
  }
  .lenses_popup .lenses__step__option_wrap[key='left'] .lenses__step__option--select .info .info-content::before,
  .lenses_popup .lenses__step__option_wrap[key='left'] .lenses__step__option--select .info .info-content::after {
    inset-inline-end: 104px;
    inset-inline-start: auto;
    left: auto;
    right: auto;
  }
}

/* ===== File upload field — icon and text on the start side ===== */
.lenses_popup .custom-file input[type='file'] {
  inset-inline-start: 0;
  inset-inline-end: auto;
  left: auto;
  right: auto;
}

.lenses_popup .custom-file .file-name {
  text-align: start;
  padding-inline-start: 28px;
  padding-inline-end: 0;
  padding-right: 0;
  padding-left: 0;
}

.lenses_popup .custom-file .file-name::before {
  inset-inline-start: 0;
  inset-inline-end: auto;
  left: auto;
  right: auto;
}

/* ===== Order summary — start/end alignment ===== */
.lenses_popup .summary-right {
  text-align: start;
}

.lenses_popup .summary-left {
  text-align: end;
}

.lenses_popup .summary-left .label ul {
  flex-direction: row;
}

/* ===== Step indicator (1 → 2 → 3 → 4) — keep LTR flow ===== */
#steps {
  direction: ltr;
}

/* ===== Step description text inside RTL-styled spans ===== */
.lenses_popup .lenses__step .info-content,
.lenses_popup .lenses__step__description {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ===== Modal content overall direction ===== */
.lenses_popup .modal-content,
.lenses_popup .modal-dialog,
.lenses_popup .lenses-inner-wrapper,
.lenses_popup .lenses__step,
.lenses_popup .lenses__step__title,
.lenses_popup .lenses__step__options {
  direction: ltr;
}

/* ===== Add Lenses button on product page ===== */
.lenses-add-cart-row .lenses_modal {
  direction: ltr;
  text-align: center;
}

/* ===== Color choice header inside lens-type ===== */
.lenses_popup .label-color-wrapper .color-header {
  text-align: center;
}

/* ===== Sub-title separator (the "or" between file upload and manual entry) ===== */
.lenses_popup .lenses__sub__title {
  text-align: center;
}

/* ===== Edit button in summary ===== */
.lenses_popup .edit-button {
  text-align: center;
}