/* Fotor Photo Editor 1.0.256/1.0.257 — textured hair and beard color pickers. */

[data-sg-texture-key] {
  --sg-texture-x: 66.666%;
  --sg-texture-y: 100%;
}

[data-sg-texture-key="black"]       { --sg-texture-x: 0%;      --sg-texture-y: 0%; }
[data-sg-texture-key="dark-brown"]  { --sg-texture-x: 33.333%; --sg-texture-y: 0%; }
[data-sg-texture-key="brown"]       { --sg-texture-x: 66.666%; --sg-texture-y: 0%; }
[data-sg-texture-key="light-brown"] { --sg-texture-x: 100%;    --sg-texture-y: 0%; }
[data-sg-texture-key="blonde"]      { --sg-texture-x: 0%;      --sg-texture-y: 33.333%; }
[data-sg-texture-key="red"]         { --sg-texture-x: 33.333%; --sg-texture-y: 33.333%; }
[data-sg-texture-key="platinum"]    { --sg-texture-x: 66.666%; --sg-texture-y: 33.333%; }
[data-sg-texture-key="ash"]         { --sg-texture-x: 100%;    --sg-texture-y: 33.333%; }
[data-sg-texture-key="gray"]        { --sg-texture-x: 0%;      --sg-texture-y: 66.666%; }
[data-sg-texture-key="salt-pepper"] { --sg-texture-x: 33.333%; --sg-texture-y: 66.666%; }
[data-sg-texture-key="pink"]        { --sg-texture-x: 66.666%; --sg-texture-y: 66.666%; }
[data-sg-texture-key="blue"]        { --sg-texture-x: 100%;    --sg-texture-y: 66.666%; }
[data-sg-texture-key="green"]       { --sg-texture-x: 0%;      --sg-texture-y: 100%; }
[data-sg-texture-key="natural"]     { --sg-texture-x: 66.666%; --sg-texture-y: 100%; }
[data-sg-texture-key="silver"]      { --sg-texture-x: 100%;    --sg-texture-y: 100%; }

body .sg256-texture-picker {
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: 760px !important;
  max-height: min(90vh, 760px) !important;
  padding: 18px !important;
  border-radius: 22px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, #11141a 0%, #090b0f 100%) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

body .sg256-texture-picker .hair-color-modal__header {
  margin: 0 0 16px !important;
  padding: 0 2px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.085) !important;
}

body .sg256-texture-picker .hair-color-modal__title {
  font-size: 20px !important;
  letter-spacing: -.02em !important;
}

body .sg256-texture-picker .hair-color-modal__hint {
  max-width: 540px !important;
  margin-top: 5px !important;
  line-height: 1.35 !important;
}

body .sg256-texture-picker .hair-color-modal__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body .sg256-texture-picker .hair-color-modal__swatch {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 70px auto !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 106px !important;
  height: auto !important;
  padding: 7px 7px 10px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.095) !important;
  background: rgba(255,255,255,.035) !important;
  color: #f6f8fb !important;
  text-align: center !important;
  overflow: hidden !important;
  transition: transform .14s ease, border-color .14s ease, background .14s ease !important;
}

body .sg256-texture-picker .hair-color-modal__swatch:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.065) !important;
}

body .sg256-texture-picker .hair-color-modal__swatch > span {
  display: block !important;
  width: 100% !important;
  height: 70px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 10px !important;
  background-color: #15181d !important;
  background-image: url("color-textures/hair-beard-color-atlas-v1.webp") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 400% !important;
  background-position: var(--sg-texture-x) var(--sg-texture-y) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), inset 0 -18px 25px rgba(0,0,0,.08) !important;
}

body .sg256-texture-picker .hair-color-modal__swatch b {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(246,248,251,.82) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .sg256-texture-picker .hair-color-modal__swatch.active {
  border-color: #6c7cff !important;
  background: rgba(87,84,255,.13) !important;
  box-shadow: 0 0 0 1px rgba(108,124,255,.25), 0 12px 30px rgba(0,0,0,.22) !important;
}

body .sg256-texture-picker .hair-color-modal__swatch.active::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(247,249,255,.96);
  color: #111522;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 5px 15px rgba(0,0,0,.35);
}

body .sg256-texture-picker .sg256-custom-color-toggle {
  width: 100% !important;
  min-height: 46px !important;
  margin-top: 13px !important;
  padding: 0 13px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0,1fr) 20px !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.04) !important;
  color: #eef2f8 !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body .sg256-texture-picker .sg256-custom-color-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: conic-gradient(#ff4d6d, #ffcc4d, #47d77f, #46a8ff, #9b6cff, #ff4d6d);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.14);
}

body .sg256-texture-picker .sg256-custom-color-toggle b {
  justify-self: end;
  color: rgba(255,255,255,.58);
  font-size: 18px;
  transition: transform .15s ease;
}

body .sg256-texture-picker.sg256-rgb-open .sg256-custom-color-toggle {
  border-color: rgba(72,139,255,.65) !important;
  background: rgba(46,119,255,.11) !important;
}

body .sg256-texture-picker.sg256-rgb-open .sg256-custom-color-toggle b {
  transform: rotate(180deg);
}

body .sg256-texture-picker .hair-color-modal__rgb {
  display: none !important;
  margin-top: 8px !important;
}

body .sg256-texture-picker.sg256-rgb-open .hair-color-modal__rgb {
  display: grid !important;
}

body .sg256-texture-picker .hair-color-modal__apply {
  margin-top: 14px !important;
  min-height: 48px !important;
}

/* The selected hair color preview in the tool panel. */
.hair-color-open[data-sg-texture-key] .hair-color-open__dot {
  width: 34px !important;
  height: 24px !important;
  border-radius: 8px !important;
  background-image: url("color-textures/hair-beard-color-atlas-v1.webp") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 400% !important;
  background-position: var(--sg-texture-x) var(--sg-texture-y) !important;
}

/* Beard color dropdown: convert the same values into texture cards. */
.sg256-beard-texture-picker .color-dd-trigger[data-sg-texture-key] .color-dd-dot,
.sg256-beard-texture-picker .color-dd-item[data-sg-texture-key] .color-dd-dot {
  background-image: url("color-textures/hair-beard-color-atlas-v1.webp") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 400% !important;
  background-position: var(--sg-texture-x) var(--sg-texture-y) !important;
}

.sg256-beard-texture-picker .color-dd-trigger .color-dd-dot {
  width: 42px !important;
  height: 28px !important;
  flex: 0 0 42px !important;
  border-radius: 9px !important;
}

.sg256-beard-texture-picker .color-dd-menu {
  width: min(390px, calc(100vw - 36px)) !important;
  max-height: min(70vh, 520px) !important;
  padding: 10px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(10,12,16,.985) !important;
  box-shadow: 0 26px 72px rgba(0,0,0,.68) !important;
  overflow: auto !important;
}

.sg256-beard-texture-picker .color-dd-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.sg256-beard-texture-picker .color-dd-item {
  position: relative !important;
  min-width: 0 !important;
  min-height: 91px !important;
  padding: 7px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.035) !important;
  overflow: hidden !important;
}

.sg256-beard-texture-picker .color-dd-item-left {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 56px auto !important;
  gap: 7px !important;
  width: 100% !important;
}

.sg256-beard-texture-picker .color-dd-item .color-dd-dot {
  width: 100% !important;
  height: 56px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
}

.sg256-beard-texture-picker .color-dd-item-text {
  padding: 0 2px 1px !important;
  overflow: hidden !important;
  color: rgba(247,249,252,.82) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sg256-beard-texture-picker .color-dd-item.active {
  border-color: #6c7cff !important;
  background: rgba(87,84,255,.13) !important;
}

.sg256-beard-texture-picker .color-dd-check {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 7px !important;
  background: rgba(247,249,255,.96) !important;
  color: #111522 !important;
  font-weight: 950 !important;
}

/* Desktop hair tool: place the caption above a full-width selected-color card.
   The RGB fields stay visible, so the phone-only disclosure row is omitted. */
@media (min-width: 769px) {
  body .sg256-texture-picker .sg256-custom-color-toggle {
    display: none !important;
  }

  body .sg256-texture-picker .hair-color-modal__rgb {
    display: grid !important;
    margin-top: 13px !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel--tool-ai-hair .ai-hair-colors--button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 11px 12px 12px !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel--tool-ai-hair .ai-hair-color-label {
    width: 100% !important;
    margin: 0 !important;
    color: rgba(238,242,248,.72) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel--tool-ai-hair .hair-color-open {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    grid-template-columns: 54px minmax(0, 1fr) 20px !important;
    gap: 10px !important;
    padding: 6px 12px 6px 6px !important;
    border-radius: 13px !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel--tool-ai-hair .hair-color-open__dot {
    width: 54px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel--tool-ai-hair .hair-color-open__text {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 13px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 768px) {
  body .sg256-texture-picker {
    width: calc(100vw - 20px) !important;
    max-width: 430px !important;
    max-height: min(88dvh, 720px) !important;
    padding: 14px !important;
  }

  body .sg256-texture-picker .hair-color-modal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body .sg256-texture-picker .hair-color-modal__swatch {
    grid-template-rows: 58px auto !important;
    min-height: 92px !important;
    padding: 6px 6px 9px !important;
  }

  body .sg256-texture-picker .hair-color-modal__swatch > span {
    height: 58px !important;
  }

  body .sg256-texture-picker .hair-color-modal__rgb {
    grid-template-columns: 34px 40px repeat(3, minmax(0, 1fr)) !important;
  }

  .sg256-beard-texture-picker .color-dd-menu {
    left: 0 !important;
    right: auto !important;
  }
}

@media (max-width: 360px) {
  body .sg256-texture-picker .hair-color-modal__swatch b,
  .sg256-beard-texture-picker .color-dd-item-text {
    font-size: 11px !important;
  }
}