/* product-options.css — colour / size pickers of the opened view («پیش‌فرض» template, .mrw-dl-bottom).
   Every value is a --mr-dl-opt-* variable (Elementor: «نمای باز شده ▸ ویژگی‌ها»); the fallbacks are the defaults. */

.mrw-dl-bottom .mrw-info .mrw-opts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--mr-dl-opt-gap-y, 4px);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-self: stretch;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mr-dl-opt-text, #2b2118);
  translate: var(--mr-dl-px-opts, 0px) var(--mr-dl-py-opts, 0px);
}

.mrw-dl-bottom .mrw-info .mrw-opts[hidden] {
  display: none;
}

/* optional: keep the room for the rows while a product without options is shown (the content below never jumps) */
.mrw-dl-bottom.mrw-dl-optres-yes .mrw-info .mrw-opts[hidden] {
  display: block;
  visibility: hidden;
  min-height: var(--mr-dl-opts-min, 0px);
}

/* one row per attribute: a single line, scrolls sideways when there are many options */
.mrw-dl-bottom .mrw-info .mrw-opt {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  justify-content: var(--mr-dl-opt-jc, safe center);
  gap: var(--mr-dl-opt-gap-x, 8px);
  box-sizing: border-box;
  max-width: 100%;
  padding: 4px 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.mrw-dl-bottom .mrw-info .mrw-opt[data-kind="text"] {
  padding-block: 1px;
}

.mrw-dl-bottom .mrw-info .mrw-opt::-webkit-scrollbar {
  display: none;
}

/* a single option is chosen automatically and takes no room (Elementor can show it) */
.mrw-dl-bottom .mrw-info .mrw-opt.is-single {
  display: none;
}

.mrw-dl-bottom.mrw-dl-opt1-yes .mrw-info .mrw-opt.is-single {
  display: flex;
}

.mrw-dl-bottom .mrw-info .mrw-opt__label {
  display: none;
  flex: none;
  font-size: .85em;
  opacity: .7;
  white-space: nowrap;
}

.mrw-dl-bottom.mrw-dl-optlbl-yes .mrw-info .mrw-opt__label {
  display: block;
}

/* ---- options ---- */
.mrw-dl-bottom .mrw-info .mrw-opts .mrw-opt__b {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: box-shadow .2s, background-color .2s, border-color .2s, opacity .2s, transform .15s;
}

.mrw-dl-bottom .mrw-info .mrw-opts .mrw-opt__b:active {
  transform: scale(.92);
}

/* colour dot */
.mrw-dl-bottom .mrw-info .mrw-opt[data-kind="color"] .mrw-opt__b {
  width: var(--mr-dl-opt-dot, 22px);
  height: var(--mr-dl-opt-dot, 22px);
  border-radius: 50%;
  background: var(--c, #ccc);
  box-shadow: inset 0 0 0 1.5px var(--mr-dl-opt-ring, rgba(0, 0, 0, .18));
}

.mrw-dl-bottom .mrw-info .mrw-opt[data-kind="color"] .mrw-opt__b > i {
  display: none;
}

.mrw-dl-bottom .mrw-info .mrw-opt[data-kind="color"] .mrw-opt__b.is-on {
  box-shadow:
    inset 0 0 0 1.5px var(--mr-dl-opt-ring, rgba(0, 0, 0, .18)),
    0 0 0 2px var(--mr-dl-bg, #fff7e6),
    0 0 0 3.5px var(--mr-dl-opt-active, #f4b12e);
}

/* size / text chip */
.mrw-dl-bottom .mrw-info .mrw-opt[data-kind="text"] .mrw-opt__b {
  min-width: var(--mr-dl-opt-h, 30px);
  height: var(--mr-dl-opt-h, 30px);
  padding: 0 11px;
  border-radius: var(--mr-dl-opt-radius, 10px);
  background: var(--mr-dl-opt-bg, #fff);
  border: 1px solid var(--mr-dl-opt-border, #e6dcc7);
  color: var(--mr-dl-opt-text, #2b2118);
  white-space: nowrap;
}

.mrw-dl-bottom .mrw-info .mrw-opt[data-kind="text"] .mrw-opt__b.is-on {
  background: var(--mr-dl-opt-active, #f4b12e);
  border-color: var(--mr-dl-opt-active, #f4b12e);
  color: var(--mr-dl-opt-on-text, #2b2118);
}

/* not available together with the other picks (still clickable: it drops the conflicting pick) / sold out */
.mrw-dl-bottom .mrw-info .mrw-opts .mrw-opt__b.is-na {
  opacity: .45;
}

.mrw-dl-bottom .mrw-info .mrw-opts .mrw-opt__b.is-out {
  opacity: .3;
  cursor: not-allowed;
}

.mrw-dl-bottom .mrw-info .mrw-opt[data-kind="text"] .mrw-opt__b.is-out {
  text-decoration: line-through;
}

.mrw-dl-bottom .mrw-info .mrw-opt[data-kind="color"] .mrw-opt__b.is-out::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(0, 0, 0, .55) calc(50% - 1px), rgba(0, 0, 0, .55) calc(50% + 1px), transparent calc(50% + 1px));
}

/* add-to-cart while a choice is still missing (the click explains instead of doing nothing) */
.mrw-dl-bottom .mrw .mrw-add.is-wait {
  opacity: .55;
}

/* ---- one divider line under the whole attributes block (same variables logic as the title / price lines)
   --mr-dl-ln-opts-{c colour | w thickness | l length | ax/tx alignment | y distance | d display}; hidden on phones like the others */
.mrw-dl-bottom .mrw-info .mrw-opts {
  position: relative;
}

.mrw-dl-bottom .mrw-info .mrw-opts:not([hidden])::after {
  content: "";
  position: absolute;
  pointer-events: none;
  display: var(--mr-dl-ln-opts-d, block);
  left: var(--mr-dl-ln-opts-ax, 50%);
  top: calc(100% + 3px);
  width: var(--mr-dl-ln-opts-l, 100%);
  height: var(--mr-dl-ln-opts-w, 1px);
  background: var(--mr-dl-ln-opts-c, #e6dcc7);
  translate: calc(var(--mr-dl-ln-opts-tx, -50%) - var(--mr-dl-px-opts, 0px)) var(--mr-dl-ln-opts-y, 0px);
}

@media (max-width: 767px) {
  .mrw-dl-bottom .mrw-info .mrw-opts::after {
    display: none !important;
  }
}