/* =====================================================
   FILE: nui-repeater.css
   VERSION: 202604211230

   SĀKUMA KOMENTĀRI:
   - Šis fails stilo CF8/NUI repeater pogas konkrēti
     lrf_area_repeater blokam.
   - Vizuālais izskats saglabāts tāds pats kā iepriekš.
   - Kods ir sakopts:
     * kopīgie izmēri un krāsas iznesti CSS mainīgajos
     * kopīgie button/SVG reseti apvienoti
     * add/remove varianti sadalīti loģiskos blokos
     * add "ar tekstu" režīms definēts vienā vietā
     * mobile override satur tikai nepieciešamās atšķirības
   - Tiek izmantotas standarta CF8/NUI SVG ikonas.
   - Tiek lokāli pārdefinēts NUI svg.icon left:0,
     lai repeater ikonām nebūtu nobīde pa kreisi.
===================================================== */


/* =====================================================
   LRF REPEATER MAINĪGIE
===================================================== */

:root {
  --lrf-repeater-btn-size: 38px;
  --lrf-repeater-btn-size-mobile: 36px;

  --lrf-repeater-btn-radius: 6px;
  --lrf-repeater-btn-gap: 6px;

  --lrf-repeater-icon-add: 27px;
  --lrf-repeater-icon-remove: 24px;

  --lrf-repeater-icon-add-mobile: 25px;
  --lrf-repeater-icon-remove-mobile: 22px;

  --lrf-repeater-add-border: #b8cee8;
  --lrf-repeater-add-bg: #e8f0fb;
  --lrf-repeater-add-color: #1f5fae;
  --lrf-repeater-add-border-hover: #9dbce0;
  --lrf-repeater-add-bg-hover: #d9e8fb;
  --lrf-repeater-add-color-hover: #174a88;

  --lrf-repeater-remove-border: #e2b6b6;
  --lrf-repeater-remove-bg: #faebeb;
  --lrf-repeater-remove-color: #cc2b2b;
  --lrf-repeater-remove-border-hover: #d89f9f;
  --lrf-repeater-remove-bg-hover: #f7dede;
  --lrf-repeater-remove-color-hover: #b51f1f;

  --lrf-repeater-remove-top: 42px;
  --lrf-repeater-remove-right: 14px;
  --lrf-repeater-remove-right-mobile: 10px;
}


/* =====================================================
   REPEATER BLOKS
===================================================== */

.nui.form.clonable.lrf_area_repeater.clone,
.nui.form.clonable.lrf_area_repeater.hidden {
  position: relative;
  padding: 18px 60px 14px 18px;
  border: 1px solid #d6dbe3;
  border-radius: 10px;
  background: #fafafa;
}

.lrf_area_repeater.hidden .remove-clone {
  display: none !important;
}

.lrf_area_repeater .fields,
.lrf_area_repeater .equal.fields {
  margin-right: 0 !important;
}


/* =====================================================
   KOPĒJAIS POGU PAMATS
===================================================== */

button.nui.button.lrf_area_repeater-cloner,
.lrf_area_repeater button.nui.button.remove-clone {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--lrf-repeater-btn-gap) !important;

  margin: 0 !important;
  min-height: var(--lrf-repeater-btn-size) !important;

  border-radius: var(--lrf-repeater-btn-radius) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  overflow: hidden !important;

  font-size: 13px !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

button.nui.button.lrf_area_repeater-cloner {
  position: relative !important;
  margin-top: 12px !important;
}


/* =====================================================
   KOPĒJAIS SVG / IKONU RESET
===================================================== */

button.nui.button.lrf_area_repeater-cloner > svg.icon,
.lrf_area_repeater button.nui.button.remove-clone > svg.icon,
.nui.button.lrf_area_repeater-cloner.iconed:not(.right) > svg.icon,
.lrf_area_repeater .nui.button.remove-clone.iconed:not(.right) > svg.icon,
.lrf_area_repeater .nui.button.iconed:not(.right).remove-clone > svg.icon {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: block !important;
  flex: 0 0 auto !important;
}

button.nui.button.lrf_area_repeater-cloner svg,
button.nui.button.lrf_area_repeater-cloner svg.icon,
button.nui.button.lrf_area_repeater-cloner svg path,
button.nui.button.lrf_area_repeater-cloner .icon,
.lrf_area_repeater button.nui.button.remove-clone svg,
.lrf_area_repeater button.nui.button.remove-clone svg.icon,
.lrf_area_repeater button.nui.button.remove-clone svg path,
.lrf_area_repeater button.nui.button.remove-clone .icon {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}


/* =====================================================
   IKONU IZMĒRI
===================================================== */

button.nui.button.lrf_area_repeater-cloner svg,
button.nui.button.lrf_area_repeater-cloner > svg.icon {
  width: var(--lrf-repeater-icon-add) !important;
  height: var(--lrf-repeater-icon-add) !important;
}

.lrf_area_repeater button.nui.button.remove-clone svg,
.lrf_area_repeater button.nui.button.remove-clone > svg.icon {
  width: var(--lrf-repeater-icon-remove) !important;
  height: var(--lrf-repeater-icon-remove) !important;
}


/* =====================================================
   ADD POGA
   - pēc noklusējuma: tikai ikona
===================================================== */

button.nui.button.lrf_area_repeater-cloner {
  width: var(--lrf-repeater-btn-size) !important;
  min-width: var(--lrf-repeater-btn-size) !important;
  height: var(--lrf-repeater-btn-size) !important;
  min-height: var(--lrf-repeater-btn-size) !important;
  padding: 0 !important;
  gap: 0 !important;

  border: 1px solid var(--lrf-repeater-add-border) !important;
  background: var(--lrf-repeater-add-bg) !important;
  color: var(--lrf-repeater-add-color) !important;

  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

button.nui.button.lrf_area_repeater-cloner:hover,
button.nui.button.lrf_area_repeater-cloner:focus {
  border-color: var(--lrf-repeater-add-border-hover) !important;
  background: var(--lrf-repeater-add-bg-hover) !important;
  color: var(--lrf-repeater-add-color-hover) !important;
}

button.nui.button.lrf_area_repeater-cloner > svg.icon {
  margin: auto !important;
}

button.nui.button.lrf_area_repeater-cloner svg,
button.nui.button.lrf_area_repeater-cloner svg path {
  color: var(--lrf-repeater-add-color) !important;
  fill: currentColor !important;
}

button.nui.button.lrf_area_repeater-cloner:hover svg,
button.nui.button.lrf_area_repeater-cloner:hover svg path,
button.nui.button.lrf_area_repeater-cloner:focus svg,
button.nui.button.lrf_area_repeater-cloner:focus svg path {
  color: var(--lrf-repeater-add-color-hover) !important;
  fill: currentColor !important;
}


/* =====================================================
   ADD POGA AR TEKSTU
===================================================== */

button.nui.button.lrf_area_repeater-cloner:has(span),
button.nui.button.lrf_area_repeater-cloner:has(.text),
button.nui.button.lrf_area_repeater-cloner:has(.button-text),
button.nui.button.lrf_area_repeater-cloner:has(.label) {
  width: auto !important;
  min-width: var(--lrf-repeater-btn-size) !important;
  height: var(--lrf-repeater-btn-size) !important;
  min-height: var(--lrf-repeater-btn-size) !important;
  padding: 6px 9px !important;
  gap: var(--lrf-repeater-btn-gap) !important;

  font-size: 13px !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

button.nui.button.lrf_area_repeater-cloner:has(span) > svg.icon,
button.nui.button.lrf_area_repeater-cloner:has(.text) > svg.icon,
button.nui.button.lrf_area_repeater-cloner:has(.button-text) > svg.icon,
button.nui.button.lrf_area_repeater-cloner:has(.label) > svg.icon {
  margin: 0 !important;
}


/* =====================================================
   REMOVE POGA
   - vienmēr tikai ikona
===================================================== */

.lrf_area_repeater button.nui.button.remove-clone {
  width: var(--lrf-repeater-btn-size) !important;
  min-width: var(--lrf-repeater-btn-size) !important;
  height: var(--lrf-repeater-btn-size) !important;
  min-height: var(--lrf-repeater-btn-size) !important;
  padding: 0 !important;
  gap: 0 !important;

  border: 1px solid var(--lrf-repeater-remove-border) !important;
  background: var(--lrf-repeater-remove-bg) !important;
  color: var(--lrf-repeater-remove-color) !important;

  font-size: 0 !important;
  line-height: 0 !important;
}

.lrf_area_repeater button.nui.button.remove-clone:hover,
.lrf_area_repeater button.nui.button.remove-clone:focus {
  border-color: var(--lrf-repeater-remove-border-hover) !important;
  background: var(--lrf-repeater-remove-bg-hover) !important;
  color: var(--lrf-repeater-remove-color-hover) !important;
}

.lrf_area_repeater button.nui.button.remove-clone > svg.icon {
  margin: auto !important;
}

.lrf_area_repeater button.nui.button.remove-clone svg,
.lrf_area_repeater button.nui.button.remove-clone svg path {
  color: var(--lrf-repeater-remove-color) !important;
  fill: currentColor !important;
}

.lrf_area_repeater button.nui.button.remove-clone:hover svg,
.lrf_area_repeater button.nui.button.remove-clone:hover svg path,
.lrf_area_repeater button.nui.button.remove-clone:focus svg,
.lrf_area_repeater button.nui.button.remove-clone:focus svg path {
  color: var(--lrf-repeater-remove-color-hover) !important;
  fill: currentColor !important;
}

.lrf_area_repeater button.nui.button.remove-clone span,
.lrf_area_repeater button.nui.button.remove-clone .text,
.lrf_area_repeater button.nui.button.remove-clone .label,
.lrf_area_repeater button.nui.button.remove-clone .button-text {
  display: none !important;
}


/* =====================================================
   REMOVE POGAS POZĪCIJA
===================================================== */

.lrf_area_repeater.clone button.nui.button.remove-clone {
  position: absolute !important;
  top: var(--lrf-repeater-remove-top) !important;
  right: var(--lrf-repeater-remove-right) !important;
  z-index: 5 !important;
}


/* =====================================================
   MOBILĀ VERSIJA
===================================================== */

@media (max-width: 767px) {
  .nui.form.clonable.lrf_area_repeater.clone,
  .nui.form.clonable.lrf_area_repeater.hidden {
    padding: 16px 54px 12px 14px;
  }

  .lrf_area_repeater.clone button.nui.button.remove-clone {
    right: var(--lrf-repeater-remove-right-mobile) !important;
  }

  button.nui.button.lrf_area_repeater-cloner {
    width: var(--lrf-repeater-btn-size-mobile) !important;
    min-width: var(--lrf-repeater-btn-size-mobile) !important;
    height: var(--lrf-repeater-btn-size-mobile) !important;
    min-height: var(--lrf-repeater-btn-size-mobile) !important;
  }

  button.nui.button.lrf_area_repeater-cloner:has(span),
  button.nui.button.lrf_area_repeater-cloner:has(.text),
  button.nui.button.lrf_area_repeater-cloner:has(.button-text),
  button.nui.button.lrf_area_repeater-cloner:has(.label) {
    width: auto !important;
    min-width: var(--lrf-repeater-btn-size-mobile) !important;
    height: var(--lrf-repeater-btn-size-mobile) !important;
    min-height: var(--lrf-repeater-btn-size-mobile) !important;
    padding: 6px 8px !important;
  }

  .lrf_area_repeater button.nui.button.remove-clone {
    width: var(--lrf-repeater-btn-size-mobile) !important;
    min-width: var(--lrf-repeater-btn-size-mobile) !important;
    height: var(--lrf-repeater-btn-size-mobile) !important;
    min-height: var(--lrf-repeater-btn-size-mobile) !important;
  }

  button.nui.button.lrf_area_repeater-cloner svg,
  button.nui.button.lrf_area_repeater-cloner > svg.icon {
    width: var(--lrf-repeater-icon-add-mobile) !important;
    height: var(--lrf-repeater-icon-add-mobile) !important;
  }

  .lrf_area_repeater button.nui.button.remove-clone svg,
  .lrf_area_repeater button.nui.button.remove-clone > svg.icon {
    width: var(--lrf-repeater-icon-remove-mobile) !important;
    height: var(--lrf-repeater-icon-remove-mobile) !important;
  }
}