@import "https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter+Tight:wght@400;700;900&family=Inter:wght@400;700;900&family=Kanit:wght@400;700;900&display=swap";
@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;600&display=swap";
/* [project]/src/app/global.css [app-client] (css) */
* {
  font-family: IBM Plex Sans Arabic, sans-serif;
}

button {
  font-size: inherit;
  padding: 0;
}

:root {
  --border-radius: .3em;
  --border-radius-1: .3em;
  --border-radius-2: .6em;
  --border-radius-3: 1em;
  --border-radius-pill: 100em;
  --border-color: #c7c7c7;
  --border-line-1: .05rem solid var(--white-2);
  --border-line-2: .05rem solid var(--white-3);
  --border-line-3: .1rem solid var(--white-2);
  --focus-ring-shadow: 0 0 0 .12em #6366f126;
  --focus-ring-shadow-1: 0 0 0 .12em #6366f126;
  --focus-ring-shadow-2: 0 0 0 .2em color-mix(in srgb, var(--primary-1), transparent 90%);
  --transition: all .2s ease-in-out;
  --transition-2: all .175s ease-in-out;
  --font-1: "Inter Tight", sans-serif;
  --font-2: "Kanit", sans-serif;
  --font-3: "Archivo Black", sans-serif;
  --font-4: "Inter", system-ui, sans-serif;
  --weight-normal: 400;
  --weight-bold: 700;
  --weight-bolder: 900;
  --primary-color: #311adc;
  --primary-hover-color: #614cff;
  --background-color: #f8f8f8;
  --panel-color: white;
  --bg-input: #e9e6ff;
  --primary-base: #3014ff;
  --primary-1: var(--primary-base);
  --primary-2: color-mix(in srgb, var(--primary-base), white 10%);
  --primary-3: color-mix(in srgb, var(--primary-base), white 20%);
  --primary-4: color-mix(in srgb, var(--primary-base), white 30%);
  --primary-5: color-mix(in srgb, var(--primary-base), white 40%);
  --primary-6: color-mix(in srgb, var(--primary-base), white 50%);
  --primary-7: color-mix(in srgb, var(--primary-base), white 60%);
  --primary-8: color-mix(in srgb, var(--primary-base), white 70%);
  --primary-9: color-mix(in srgb, var(--primary-base), white 80%);
  --primary-10: color-mix(in srgb, var(--primary-base), white 90%);
  --primary-11: color-mix(in srgb, var(--primary-base), white 95%);
  --primary-12: color-mix(in srgb, var(--primary-base), white 98%);
  --primary-light-1: color-mix(in srgb, var(--primary-base), white 90%);
  --primary-light-2: color-mix(in srgb, var(--primary-base), white 91.5%);
  --primary-light-3: color-mix(in srgb, var(--primary-base), white 93%);
  --primary-light-4: color-mix(in srgb, var(--primary-base), white 94.5%);
  --primary-light-5: color-mix(in srgb, var(--primary-base), white 96%);
  --primary-light-6: color-mix(in srgb, var(--primary-base), white 97.5%);
  --primary-light-7: color-mix(in srgb, var(--primary-base), white 99%);
  --text-1: #000;
  --text-2: #141414;
  --text-3: #282828;
  --text-4: #3c3c3c;
  --text-5: #505050;
  --text-6: #646464;
  --white-light-1: #fafafa;
  --white-light-2: #f5f5f5;
  --white-light-3: #ebebeb;
  --white-light-4: #dcdcdc;
  --white-light-5: #bebebe;
  --white-1: white;
  --white-2: #ebebeb;
  --white-3: #d7d7d7;
  --white-4: #c3c3c3;
  --white-5: #afafaf;
  --gray-1: #4b4b4b;
  --gray-2: #5f5f5f;
  --gray-3: #737373;
  --gray-4: #878787;
  --gray-5: #9b9b9b;
  --black-1: #000;
  --black-2: #141414;
  --black-3: #282828;
  --black-4: #3c3c3c;
  --black-5: #505050;
  --black-6: #646464;
  --black-7: #787878;
  --black-8: #8c8c8c;
  --cold-white-1: #fafaff;
  --cold-white-2: #f6f6fa;
  --cold-white-3: #e4e4f0;
  --cold-white-4: #dcdceb;
  --cold-white-5: #d2d2e1;
  --cold-white-6: #c8c8d7;
  --cold-white-7: #c8c8d7;
  --cold-gray-1: #37414b;
  --cold-gray-2: #4b555f;
  --cold-gray-3: #5f6973;
  --cold-gray-4: #737d87;
  --cold-gray-5: #87919b;
  --positive-1: #148c3c;
  --positive-2: #1ea04b;
  --positive-3: #28b45a;
  --positive-4: #3cc36e;
  --positive-5: #55d282;
  --positive-6: #78e1a0;
  --positive-7: #b4f5cd;
  --positive-8: #d2fae1;
  --positive-9: #ebfff5;
  --positive-10: #f8fffc;
  --neutral-1: #965a0a;
  --neutral-2: #b46e0f;
  --neutral-3: #d78c14;
  --neutral-4: #eba528;
  --neutral-5: #f5be46;
  --neutral-6: #fad26e;
  --neutral-7: #fce6a0;
  --neutral-8: #fef2c8;
  --neutral-9: #fff9e6;
  --neutral-10: #fffdf5;
  --negative-1: #b41428;
  --negative-2: #c82337;
  --negative-3: #e13246;
  --negative-4: #eb505f;
  --negative-5: #f56e7d;
  --negative-6: #fa919b;
  --negative-7: #ffc3c8;
  --negative-8: #ffdce1;
  --negative-9: #fff0f2;
  --negative-10: #fffafb;
  --success-color: var(--positive-3);
  --error-color: var(--negative-3);
  --success-bg: var(--positive-9);
  --error-bg: var(--negative-9);
  --font-size-1: .75em;
  --font-size-2: .875em;
  --font-size-3: 1em;
  --font-size-4: 1.125em;
  --font-size-5: 1.25em;
  --font-size-6: 1.5em;
  --font-size-7: 1.875em;
  --font-size-8: 2.25em;
  --space-1: .25em;
  --space-2: .5em;
  --space-3: .75em;
  --space-4: 1em;
  --space-5: 1.5em;
  --space-6: 2em;
  --space-7: 3em;
  --space-8: 4em;
  --shadow-1: 0 .0625em .1875em #0000000d;
  --shadow-2: #959da533 0em .5em 1.5em;
  --shadow-3: #63636333 0em .125em .5em 0em;
  --shadow-4: #32325d40 0em 3.125em 6.25em -1.25em,
    #0000004d 0em 1.875em 3.75em -1.875em,
    #0a254059 0em -.125em .375em 0em inset;
  --shadow-5: #0e3f7e0a 0em 0em 0em .0625em,
    #2a33450a 0em .0625em .0625em -.03125em,
    #2a33460a 0em .1875em .1875em -.09375em,
    #2a33460a 0em .375em .375em -.1875em,
    #0e3f7e0a 0em .75em .75em -.375em,
    #0e3f7e0a 0em 1.5em 1.5em -.75em;
  --shadow-6: #43475545 0em 0em .25em,
    #5a7dbc0d 0em .25em 1em;
  --shadow-7: #091e4240 0em .25em .5em -.125em,
    #091e4214 0em 0em 0em .0625em;
  --shadow-8: #0000000f 0em .125em .25em 0em inset;
  --shadow-9: #0000000d 0em 0em 0em .0625em;
  --shadow-10: #32325d40 0em 1.875em 3.75em -.75em,
    #0000004d 0em 1.125em 2.25em -1.125em;
  --shadow-11: #f02eaa66 .3125em .3125em, #f02eaa4d .625em .625em,
    #f02eaa33 .9375em .9375em, #f02eaa1a 1.25em 1.25em,
    #f02eaa0d 1.5625em 1.5625em;
  --shadow-primary-staircase: .2em .2em 0 var(--primary-1),
    .4em .4em 0 var(--primary-3),
    .6em .6em 0 var(--primary-5),
    .8em .8em 0 var(--primary-6),
    1em 1em 0 var(--primary-7);
  --shadow-deep-lift: 0 .1em .2em #4c34ff0d,
    0 .3em .6em #4c34ff1a,
    0 .8em 1.5em #4c34ff1a,
    0 1.5em 3em #4c34ff0d;
  --shadow-brutal-3d: .3em .3em 0 var(--black-1),
    .35em .35em 0 var(--primary-5);
  --shadow-primary-glow: 0 0 .5em var(--primary-7),
    0 0 1.5em var(--primary-9);
  --shadow-pressed: inset .15em .15em .4em #0000001a,
    inset -.1em -.1em .2em var(--white-1);
  --shadow-thick-border: 0 0 0 .2em var(--background-color),
    0 0 0 .4em var(--primary-5);
  --color-red-1: #ffebee;
  --color-red-2: #ef9a9a;
  --color-red-3: #f44336;
  --color-red-4: #e53935;
  --color-red-5: #b71c1c;
  --color-orange-1: #fff3e0;
  --color-orange-2: #ffcc80;
  --color-orange-3: #ff9800;
  --color-orange-4: #f57c00;
  --color-orange-5: #e65100;
  --color-yellow-1: #fffde7;
  --color-yellow-2: #fff59d;
  --color-yellow-3: #ffeb3b;
  --color-yellow-4: #fbc02d;
  --color-yellow-5: #f57f17;
  --color-green-1: #e8f5e9;
  --color-green-2: #a5d6a7;
  --color-green-3: #4caf50;
  --color-green-4: #388e3c;
  --color-green-5: #1b5e20;
  --color-blue-1: #e3f2fd;
  --color-blue-2: #90caf9;
  --color-blue-3: #2196f3;
  --color-blue-4: #1976d2;
  --color-blue-5: #0d47a1;
  --color-purple-1: #f3e5f5;
  --color-purple-2: #ce93d8;
  --color-purple-3: #9c27b0;
  --color-purple-4: #7b1fa2;
  --color-purple-5: #4a148c;
  --color-pink-1: #fce4ec;
  --color-pink-2: #f48fb1;
  --color-pink-3: #e91e63;
  --color-pink-4: #c2185b;
  --color-pink-5: #880e4f;
  --color-amethyst-1: #f4ebff;
  --color-amethyst-2: #d6bbfb;
  --color-amethyst-3: #9e77ed;
  --color-amethyst-4: #6941c6;
  --color-amethyst-5: #42307d;
  --color-mango-1: #fff7d6;
  --color-mango-2: #ffe370;
  --color-mango-3: #ffb319;
  --color-mango-4: #e68a00;
  --color-mango-5: #8a5200;
  --color-flamingo-1: #ffeaf5;
  --color-flamingo-2: #ffb3d8;
  --color-flamingo-3: #ff66a1;
  --color-flamingo-4: #e62e70;
  --color-flamingo-5: #8a0f3c;
  --color-azure-1: #ebf5ff;
  --color-azure-2: #99cfff;
  --color-azure-3: #2e90fa;
  --color-azure-4: #155eef;
  --color-azure-5: #00359e;
  --color-matcha-1: #f1f8ec;
  --color-matcha-2: #c6e4ac;
  --color-matcha-3: #86cb55;
  --color-matcha-4: #55942b;
  --color-matcha-5: #2f5218;
  --color-cherry-1: #ffebee;
  --color-cherry-2: #ffb3ba;
  --color-cherry-3: #f04438;
  --color-cherry-4: #b42318;
  --color-cherry-5: #7a271a;
  --color-aqua-1: #e6f9f6;
  --color-aqua-2: #8fe5d6;
  --color-aqua-3: #20c9ac;
  --color-aqua-4: #118a76;
  --color-aqua-5: #0a4c40;
  font-size: 3vh;
}

body {
  background-color: var(--background-color);
  font-family: var(--font-4);
  color: var(--text-1);
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

main {
  flex-direction: column;
  flex: 1;
  display: flex;
}

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

img {
  object-fit: contain;
  width: auto;
}

a {
  text-decoration: none !important;
}

@media (max-aspect-ratio: 1) {
  :root {
    font-size: 2.5vh;
  }
}

@media (max-aspect-ratio: 9 / 16) {
  :root {
    font-size: 2.25vh;
  }
}

/* [project]/src/features/cart/components/CartToast/style.module.css [app-client] (css) */
.style-module__V2haqG__container {
  top: max(1em, env(safe-area-inset-top));
  z-index: 20;
  pointer-events: none;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-end;
  gap: .875em;
  max-width: calc(100% - 2em);
  display: flex;
  position: fixed;
  inset-inline-end: 1em;
}

.style-module__V2haqG__container[data-rtl="true"] {
  align-items: flex-start;
  inset-inline: 1em auto;
}

.style-module__V2haqG__toast {
  pointer-events: auto;
  background: var(--white-1);
  border: .0625em solid var(--white-3);
  border-radius: var(--border-radius-2);
  box-sizing: border-box;
  opacity: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75em 1em;
  width: 100%;
  max-width: 23.75em;
  padding: 1em 1.125em;
  animation: .3s ease-out forwards style-module__V2haqG__enter, .5s ease-in 2.5s forwards style-module__V2haqG__fadeOut;
  display: grid;
  position: relative;
  overflow: hidden;
  transform: translateY(-.625em);
  box-shadow: 0 .75em 1.5em #00000014;
}

@keyframes style-module__V2haqG__enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes style-module__V2haqG__fadeOut {
  to {
    opacity: 0;
    transform: translateY(-.75em);
  }
}

.style-module__V2haqG__progress {
  background: linear-gradient(90deg, var(--primary-4), var(--primary-5));
  transform-origin: 0;
  width: 100%;
  height: .1875em;
  animation: 3s linear forwards style-module__V2haqG__shrink;
  position: absolute;
  bottom: 0;
  left: 0;
}

.style-module__V2haqG__container[data-rtl="true"] .style-module__V2haqG__progress {
  transform-origin: 100%;
}

@keyframes style-module__V2haqG__shrink {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

.style-module__V2haqG__close {
  top: .5em;
  width: 1.625em;
  height: 1.625em;
  color: var(--black-4);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: .5em;
  place-items: center;
  display: grid;
  position: absolute;
  inset-inline-end: .5em;
}

.style-module__V2haqG__close:hover {
  background: var(--white-2);
}

.style-module__V2haqG__imageWrap {
  position: relative;
}

.style-module__V2haqG__image {
  object-fit: cover;
  border-radius: var(--border-radius-1);
  background: var(--white-2);
  border: .0625em solid var(--white-3);
  width: 3.5em;
  height: 3.5em;
}

.style-module__V2haqG__checkBadge {
  inset-inline-end: -.25em;
  background: var(--primary-4);
  width: 1.125em;
  height: 1.125em;
  color: var(--white-1);
  border: .125em solid var(--white-1);
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  bottom: -.25em;
}

.style-module__V2haqG__icon {
  width: 1em;
  height: 1em;
}

.style-module__V2haqG__content {
  min-width: 0;
}

.style-module__V2haqG__eyebrow {
  text-transform: uppercase;
  color: var(--primary-5);
  align-items: center;
  gap: .375em;
  margin-bottom: .125em;
  font-size: .6875em;
  font-weight: 700;
  display: flex;
}

.style-module__V2haqG__dot {
  background: var(--primary-4);
  border-radius: 50%;
  width: .3125em;
  height: .3125em;
}

.style-module__V2haqG__name {
  color: var(--black-1);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .875em;
  font-weight: 700;
  overflow: hidden;
}

.style-module__V2haqG__price {
  color: var(--black-4);
  margin-top: .0625em;
  font-size: .7812em;
}

.style-module__V2haqG__cartLink {
  color: var(--primary-5);
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  gap: .25em;
  font-size: .8125em;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}

.style-module__V2haqG__cartLink:hover {
  opacity: .8;
  text-underline-offset: .1875em;
  text-decoration: underline;
}

@media (max-width: 30em) {
  .style-module__V2haqG__container {
    max-width: calc(100% - 1.5em);
    inset-inline-end: .75em;
  }

  .style-module__V2haqG__container[data-rtl="true"] {
    inset-inline-start: .75em;
  }

  .style-module__V2haqG__toast {
    gap: .75em;
    max-width: 100%;
    padding: .875em 1em;
  }

  .style-module__V2haqG__image {
    width: 3em;
    height: 3em;
  }
}

/* [project]/src/features/confirm-dialog/components/ConfirmDialog/style.module.css [app-client] (css) */
.style-module__7p0o5G__overlay {
  z-index: 10;
  background-color: #00000080;
  justify-content: center;
  align-items: center;
  animation: .15s style-module__7p0o5G__fadeIn;
  display: flex;
  position: fixed;
  inset: 0;
}

.style-module__7p0o5G__modal {
  border-radius: var(--border-radius-3);
  padding: var(--space-4) var(--space-6);
  width: 90%;
  max-width: 30em;
  box-shadow: var(--shadow-6);
  box-sizing: border-box;
  background-color: #fff;
  max-width: 90%;
  animation: .15s style-module__7p0o5G__scaleIn;
}

.style-module__7p0o5G__title {
  margin: 0 0 var(--space-2) 0;
  color: var(--color-text);
  font-size: 1.2em;
}

.style-module__7p0o5G__message {
  margin: 0 0 var(--space-4) 0;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.style-module__7p0o5G__actions {
  justify-content: flex-end;
  gap: var(--space-3);
  display: flex;
}

[dir="rtl"] .style-module__7p0o5G__actions {
  flex-direction: row-reverse;
}

.style-module__7p0o5G__cancelBtn, .style-module__7p0o5G__confirmBtn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius-2);
  cursor: pointer;
  border: var(--border-line-2);
  font-size: 1em;
  transition: background-color .1s;
}

.style-module__7p0o5G__cancelBtn {
  background-color: var(--white-1);
  color: var(--color-text);
}

.style-module__7p0o5G__cancelBtn:hover {
  background-color: var(--white-light-2);
}

.style-module__7p0o5G__confirmBtn {
  background-color: var(--primary-3);
  color: #fff;
  border-color: var(--primary-3);
}

.style-module__7p0o5G__confirmBtn:hover {
  background-color: var(--primary-7);
  border-color: var(--primary-7);
}

@keyframes style-module__7p0o5G__fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes style-module__7p0o5G__scaleIn {
  from {
    opacity: 0;
    transform: scale(.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* [project]/node_modules/.pnpm/@muhammad_dev_77+ui-lib@0.0.9_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@muhammad_dev_77/ui-lib/dist/index.css [app-client] (css) */
:root {
  --border-radius: .3em;
  --border-radius-1: .3em;
  --border-radius-2: .6em;
  --border-radius-3: 1em;
  --border-radius-pill: 100em;
  --border-color: #c7c7c7;
  --border-line-1: .05rem solid var(--white-2);
  --border-line-2: .05rem solid var(--white-3);
  --border-line-3: .1rem solid var(--white-2);
  --focus-ring-shadow: 0 0 0 .12em #6366f126;
  --focus-ring-shadow-1: 0 0 0 .12em #6366f126;
  --focus-ring-shadow-2: 0 0 0 .2em color-mix(in srgb, var(--primary-1), transparent 90%);
  --transition: all .2s ease-in-out;
  --transition-2: all .175s ease-in-out;
  --font-1: "Inter Tight", sans-serif;
  --font-2: "Kanit", sans-serif;
  --font-3: "Archivo Black", sans-serif;
  --font-4: "Inter",
    system-ui,
    sans-serif;
  --weight-normal: 400;
  --weight-bold: 700;
  --weight-bolder: 900;
  --primary-color: #311adc;
  --primary-hover-color: #614cff;
  --background-color: #f8f8f8;
  --panel-color: white;
  --bg-input: #e9e6ff;
  --primary-base: #3014ff;
  --primary-1: var(--primary-base);
  --primary-2: color-mix(in srgb, var(--primary-base), white 10%);
  --primary-3: color-mix(in srgb, var(--primary-base), white 20%);
  --primary-4: color-mix(in srgb, var(--primary-base), white 30%);
  --primary-5: color-mix(in srgb, var(--primary-base), white 40%);
  --primary-6: color-mix(in srgb, var(--primary-base), white 50%);
  --primary-7: color-mix(in srgb, var(--primary-base), white 60%);
  --primary-8: color-mix(in srgb, var(--primary-base), white 70%);
  --primary-9: color-mix(in srgb, var(--primary-base), white 80%);
  --primary-10: color-mix(in srgb, var(--primary-base), white 90%);
  --primary-11: color-mix(in srgb, var(--primary-base), white 95%);
  --primary-12: color-mix(in srgb, var(--primary-base), white 98%);
  --primary-light-1: color-mix(in srgb, var(--primary-base), white 90%);
  --primary-light-2: color-mix(in srgb, var(--primary-base), white 91.5%);
  --primary-light-3: color-mix(in srgb, var(--primary-base), white 93%);
  --primary-light-4: color-mix(in srgb, var(--primary-base), white 94.5%);
  --primary-light-5: color-mix(in srgb, var(--primary-base), white 96%);
  --primary-light-6: color-mix(in srgb, var(--primary-base), white 97.5%);
  --primary-light-7: color-mix(in srgb, var(--primary-base), white 99%);
  --text-1: #000;
  --text-2: #141414;
  --text-3: #282828;
  --text-4: #3c3c3c;
  --text-5: #505050;
  --text-6: #646464;
  --white-light-1: #fafafa;
  --white-light-2: #f5f5f5;
  --white-light-3: #ebebeb;
  --white-light-4: #dcdcdc;
  --white-light-5: #bebebe;
  --white-1: white;
  --white-2: #ebebeb;
  --white-3: #d7d7d7;
  --white-4: #c3c3c3;
  --white-5: #afafaf;
  --gray-1: #4b4b4b;
  --gray-2: #5f5f5f;
  --gray-3: #737373;
  --gray-4: #878787;
  --gray-5: #9b9b9b;
  --black-1: #000;
  --black-2: #141414;
  --black-3: #282828;
  --black-4: #3c3c3c;
  --black-5: #505050;
  --black-6: #646464;
  --black-7: #787878;
  --black-8: #8c8c8c;
  --cold-white-1: #fafaff;
  --cold-white-2: #f6f6fa;
  --cold-white-3: #e4e4f0;
  --cold-white-4: #dcdceb;
  --cold-white-5: #d2d2e1;
  --cold-white-6: #c8c8d7;
  --cold-white-7: #c8c8d7;
  --cold-gray-1: #37414b;
  --cold-gray-2: #4b555f;
  --cold-gray-3: #5f6973;
  --cold-gray-4: #737d87;
  --cold-gray-5: #87919b;
  --positive-1: #148c3c;
  --positive-2: #1ea04b;
  --positive-3: #28b45a;
  --positive-4: #3cc36e;
  --positive-5: #55d282;
  --positive-6: #78e1a0;
  --positive-7: #b4f5cd;
  --positive-8: #d2fae1;
  --positive-9: #ebfff5;
  --positive-10: #f8fffc;
  --neutral-1: #965a0a;
  --neutral-2: #b46e0f;
  --neutral-3: #d78c14;
  --neutral-4: #eba528;
  --neutral-5: #f5be46;
  --neutral-6: #fad26e;
  --neutral-7: #fce6a0;
  --neutral-8: #fef2c8;
  --neutral-9: #fff9e6;
  --neutral-10: #fffdf5;
  --negative-1: #b41428;
  --negative-2: #c82337;
  --negative-3: #e13246;
  --negative-4: #eb505f;
  --negative-5: #f56e7d;
  --negative-6: #fa919b;
  --negative-7: #ffc3c8;
  --negative-8: #ffdce1;
  --negative-9: #fff0f2;
  --negative-10: #fffafb;
  --success-color: var(--positive-3);
  --error-color: var(--negative-3);
  --success-bg: var(--positive-9);
  --error-bg: var(--negative-9);
  --font-size-1: .75em;
  --font-size-2: .875em;
  --font-size-3: 1em;
  --font-size-4: 1.125em;
  --font-size-5: 1.25em;
  --font-size-6: 1.5em;
  --font-size-7: 1.875em;
  --font-size-8: 2.25em;
  --space-1: .25em;
  --space-2: .5em;
  --space-3: .75em;
  --space-4: 1em;
  --space-5: 1.5em;
  --space-6: 2em;
  --space-7: 3em;
  --space-8: 4em;
  --shadow-1: 0 .0625em .1875em #0000000d;
  --shadow-2: #959da533 0em .5em 1.5em;
  --shadow-3: #63636333 0em .125em .5em 0em;
  --shadow-4: #32325d40 0em 3.125em 6.25em -1.25em,
    #0000004d 0em 1.875em 3.75em -1.875em,
    #0a254059 0em -.125em .375em 0em inset;
  --shadow-5: #0e3f7e0a 0em 0em 0em .0625em,
    #2a33450a 0em .0625em .0625em -.03125em,
    #2a33460a 0em .1875em .1875em -.09375em,
    #2a33460a 0em .375em .375em -.1875em,
    #0e3f7e0a 0em .75em .75em -.375em,
    #0e3f7e0a 0em 1.5em 1.5em -.75em;
  --shadow-6: #43475545 0em 0em .25em, #5a7dbc0d 0em .25em 1em;
  --shadow-7: #091e4240 0em .25em .5em -.125em, #091e4214 0em 0em 0em .0625em;
  --shadow-8: #0000000f 0em .125em .25em 0em inset;
  --shadow-9: #0000000d 0em 0em 0em .0625em;
  --shadow-10: #32325d40 0em 1.875em 3.75em -.75em, #0000004d 0em 1.125em 2.25em -1.125em;
  --shadow-11: #f02eaa66 .3125em .3125em,
    #f02eaa4d .625em .625em,
    #f02eaa33 .9375em .9375em,
    #f02eaa1a 1.25em 1.25em,
    #f02eaa0d 1.5625em 1.5625em;
  --shadow-primary-staircase: .2em .2em 0em var(--primary-1),
    .4em .4em 0em var(--primary-3),
    .6em .6em 0em var(--primary-5),
    .8em .8em 0em var(--primary-6),
    1em 1em 0em var(--primary-7);
  --shadow-deep-lift: 0 .1em .2em #4c34ff0d,
    0 .3em .6em #4c34ff1a,
    0 .8em 1.5em #4c34ff1a,
    0 1.5em 3em #4c34ff0d;
  --shadow-brutal-3d: .3em .3em 0em var(--black-1), .35em .35em 0em var(--primary-5);
  --shadow-primary-glow: 0 0 .5em var(--primary-7), 0 0 1.5em var(--primary-9);
  --shadow-pressed: inset .15em .15em .4em #0000001a, inset -.1em -.1em .2em var(--white-1);
  --shadow-thick-border: 0 0 0 .2em var(--background-color), 0 0 0 .4em var(--primary-5);
  --color-red-1: #ffebee;
  --color-red-2: #ef9a9a;
  --color-red-3: #f44336;
  --color-red-4: #e53935;
  --color-red-5: #b71c1c;
  --color-orange-1: #fff3e0;
  --color-orange-2: #ffcc80;
  --color-orange-3: #ff9800;
  --color-orange-4: #f57c00;
  --color-orange-5: #e65100;
  --color-yellow-1: #fffde7;
  --color-yellow-2: #fff59d;
  --color-yellow-3: #ffeb3b;
  --color-yellow-4: #fbc02d;
  --color-yellow-5: #f57f17;
  --color-green-1: #e8f5e9;
  --color-green-2: #a5d6a7;
  --color-green-3: #4caf50;
  --color-green-4: #388e3c;
  --color-green-5: #1b5e20;
  --color-blue-1: #e3f2fd;
  --color-blue-2: #90caf9;
  --color-blue-3: #2196f3;
  --color-blue-4: #1976d2;
  --color-blue-5: #0d47a1;
  --color-purple-1: #f3e5f5;
  --color-purple-2: #ce93d8;
  --color-purple-3: #9c27b0;
  --color-purple-4: #7b1fa2;
  --color-purple-5: #4a148c;
  --color-pink-1: #fce4ec;
  --color-pink-2: #f48fb1;
  --color-pink-3: #e91e63;
  --color-pink-4: #c2185b;
  --color-pink-5: #880e4f;
  --color-amethyst-1: #f4ebff;
  --color-amethyst-2: #d6bbfb;
  --color-amethyst-3: #9e77ed;
  --color-amethyst-4: #6941c6;
  --color-amethyst-5: #42307d;
  --color-mango-1: #fff7d6;
  --color-mango-2: #ffe370;
  --color-mango-3: #ffb319;
  --color-mango-4: #e68a00;
  --color-mango-5: #8a5200;
  --color-flamingo-1: #ffeaf5;
  --color-flamingo-2: #ffb3d8;
  --color-flamingo-3: #ff66a1;
  --color-flamingo-4: #e62e70;
  --color-flamingo-5: #8a0f3c;
  --color-azure-1: #ebf5ff;
  --color-azure-2: #99cfff;
  --color-azure-3: #2e90fa;
  --color-azure-4: #155eef;
  --color-azure-5: #00359e;
  --color-matcha-1: #f1f8ec;
  --color-matcha-2: #c6e4ac;
  --color-matcha-3: #86cb55;
  --color-matcha-4: #55942b;
  --color-matcha-5: #2f5218;
  --color-cherry-1: #ffebee;
  --color-cherry-2: #ffb3ba;
  --color-cherry-3: #f04438;
  --color-cherry-4: #b42318;
  --color-cherry-5: #7a271a;
  --color-aqua-1: #e6f9f6;
  --color-aqua-2: #8fe5d6;
  --color-aqua-3: #20c9ac;
  --color-aqua-4: #118a76;
  --color-aqua-5: #0a4c40;
}

.style_root5 {
  aspect-ratio: 1;
  background-color: var(--black-4);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  width: 3em;
  height: 3em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.style_root5 .style_image {
  object-fit: cover;
  width: 100%;
}

.style_root5 .style_nameShort {
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
  position: absolute;
  bottom: 50%;
  right: 50%;
  translate: 50% 50%;
}

.style_container {
  border-radius: var(--border-radius-1);
  cursor: pointer;
  border: .1em solid #0000;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: .35em;
  padding: .5em 1em;
  font-size: .8em;
  font-weight: bold;
  text-decoration: none;
  display: flex;
}

.style_container .style_icon3 {
  width: 1em;
  height: 1em;
}

.style_disabled.style_container {
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  opacity: .8;
  color: #5e5e5e !important;
  background-color: #dadada !important;
  border-color: #e0e0e0 !important;
  transform: none !important;
}

.style_normal.style_container {
  background-color: var(--white-1);
  border-color: var(--white-3);
  color: var(--black-3);
}

.style_normal.style_container:hover {
  background-color: var(--white-light-2);
}

.style_primary.style_container {
  background-color: var(--primary-4);
  color: var(--white-1);
}

.style_primary.style_container:hover {
  background-color: var(--primary-6);
}

.style_negative3.style_container {
  background-color: var(--white-1);
  border-color: var(--color-red-2);
  color: var(--color-red-3);
}

.style_negative3.style_container:hover {
  background-color: #fff5f5;
}

.style_spinner {
  border: .125em solid;
  border-right-color: #0000;
  border-radius: 50%;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  animation: .6s linear infinite style_buttonSpin;
  display: inline-block;
}

.style_loadingText {
  white-space: nowrap;
  margin-left: .5em;
}

@keyframes style_buttonSpin {
  to {
    transform: rotate(360deg);
  }
}

.style_root4 {
  border-radius: var(--border-radius-2);
  border: var(--border-line-2);
  box-shadow: var(--shadow-1);
  --icon-color: var(--primary-4);
  background-color: #fff;
  flex-direction: column;
  gap: .75em;
  padding: 1em;
  display: flex;
}

.style_root4 .style_header2 {
  flex-direction: row;
  align-items: center;
  gap: .5em;
  display: flex;
}

.style_root4 .style_header2 .style_title {
  color: var(--black-3);
  font-size: 1.1em;
  font-weight: bold;
}

.style_root4 .style_headerWrapper {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.style_root4 .style_icon4 {
  width: 1.2em;
  height: 1.2em;
  color: var(--icon-color);
}

.style_root4 .style_headerWrapper .style_closeIcon {
  cursor: pointer;
  width: 1.2em;
  height: 1.2em;
  color: var(--black-4);
  border-radius: 50%;
  padding: .15em;
}

.style_root4 .style_headerWrapper .style_closeIcon:hover {
  background-color: var(--white-3);
}

.style_container3 {
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 2rem;
  display: flex;
}

.style_card {
  text-align: center;
  background: #fff;
  border: .0625em solid #eaeaea;
  border-radius: 1.25em;
  width: 100%;
  max-width: 34.375em;
  padding: 2.5em;
  box-shadow: 0 .625em 1.875em #00000014;
}

.style_iconCircle {
  color: #e53e3e;
  background: #fff5f5;
  border-radius: 1.125em;
  justify-content: center;
  align-items: center;
  width: 3.75em;
  height: 3.75em;
  margin-bottom: 1.25em;
  display: inline-flex;
}

.style_title2 {
  color: #1a202c;
  margin-bottom: .5em;
  font-size: 1.5rem;
  font-weight: 800;
}

.style_message5 {
  color: #4a5568;
  margin-bottom: 1.5em;
  font-size: 1rem;
  line-height: 1.5;
}

.style_actions {
  flex-direction: column;
  gap: .75em;
  display: flex;
}

.style_retryButton {
  color: #fff;
  cursor: pointer;
  background: #1a202c;
  border: none;
  border-radius: .625em;
  padding: .75em 1.5em;
  font-weight: 600;
}

.style_detailsToggle {
  color: #718096;
  cursor: pointer;
  background: none;
  border: none;
  font-size: .85rem;
  text-decoration: underline;
}

.style_detailsArea {
  text-align: left;
  background: #f8fafc;
  border: .0625em solid #e2e8f0;
  border-radius: .75em;
  margin-top: 1.5em;
  padding: 1em;
  animation: .3s ease-out style_slideDown;
}

.style_digestRow {
  color: #64748b;
  justify-content: space-between;
  margin-bottom: .5em;
  font-size: .75rem;
  display: flex;
}

.style_stackTrace {
  color: #475569;
  white-space: pre-wrap;
  max-height: 12.5em;
  font-family: ui-monospace, monospace;
  font-size: .7rem;
  line-height: 1.4;
  overflow: auto;
}

@keyframes style_slideDown {
  from {
    opacity: 0;
    transform: translateY(-.625em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.style_errorIcon {
  width: 2.5em;
  height: 2.5em;
}

.style_root8 {
  --spinner-size: 2.5em;
  background-color: #0000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
  width: fit-content;
  display: flex;
}

.style_spinner2 {
  width: var(--spinner-size);
  height: var(--spinner-size);
  border: calc(var(--spinner-size) * .1) solid #d1d1d1;
  border-top: calc(var(--spinner-size) * .1) solid var(--primary-4);
  border-radius: 50%;
  animation: 1s linear infinite style_spin;
}

.style_text2 {
  color: #4b5563;
  margin: 0;
  font-size: 1em;
  font-weight: 500;
}

@keyframes style_spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.style_container4 {
  font-weight: var(--weight-bold);
  color: inherit;
  font-size: inherit;
  flex-direction: row;
  align-items: baseline;
  gap: .5em;
  display: inline-flex;
}

.style_originalPrice {
  color: var(--gray-4);
  font-size: .9em;
  font-weight: var(--weight-normal);
  text-decoration: line-through;
}

.style_currentPrice {
  font-size: inherit;
  color: inherit;
  white-space: nowrap;
}

.style_discounted {
  color: var(--primary-4);
}

.style_root9 {
  box-sizing: border-box;
  background-color: var(--white-light-2);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: .5em;
  width: 100%;
  padding: .5em 1em;
  display: flex;
  overflow: hidden;
}

.style_button {
  white-space: nowrap;
  border-radius: var(--border-radius-1);
  background-color: var(--white-1);
  border: .1em solid #0000;
  border-color: var(--white-3);
  color: var(--black-3);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: .35em;
  padding: .5em 1em;
  font-family: inherit;
  font-size: .8em;
  font-weight: bold;
  text-decoration: none;
  display: inline-flex;
}

.style_button:hover:not(:disabled) {
  background-color: var(--white-light-2);
}

.style_button:disabled {
  color: #5e5e5e;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  background-color: #dadada;
  border-color: #e0e0e0;
}

.style_numberedButtons .style_button.style_selected, .style_numberedButtons .style_button.style_selected:hover {
  background-color: var(--primary-4);
  color: var(--white-1);
  border-color: var(--primary-4);
}

.style_numberedButtons .style_button.style_selected:hover {
  background-color: var(--primary-4);
  background-color: var(--primary-4);
}

.style_hiddenMeasurement {
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  white-space: nowrap;
  flex-direction: row;
  gap: .5em;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.style_numberedButtons {
  flex-direction: row;
  flex: 1;
  justify-content: center;
  gap: .5em;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.style_sideButton {
  flex-shrink: 0;
}

.style_root6 {
  display: flex;
}

.style_root6.style_direction_vertical {
  flex-direction: column;
}

.style_root6.style_direction_vertical .style_selectTrigger {
  height: 2.3em;
}

.style_root6.style_direction_horizontal {
  flex-direction: row;
  gap: 1em;
}

.style_root6.style_direction_horizontal .style_selectTrigger {
  height: 100%;
}

.style_root6 {
  flex-shrink: 0;
  gap: .2em;
  min-width: 0;
  position: relative;
}

.style_root6 .style_labelWrapper2 {
  color: var(--black-3);
  transition: var(--transition);
  align-items: center;
  gap: .4em;
  margin-bottom: .1em;
  display: flex;
}

.style_root6 .style_labelWrapper2 .style_label3 {
  color: inherit;
  font-size: 1.1em;
}

.style_root6 .style_selectWrapper {
  width: 100%;
  min-width: 0;
  position: relative;
}

.style_root6 .style_selectWrapper .style_selectTrigger {
  box-sizing: border-box;
  cursor: pointer;
  background-color: var(--cold-white-2);
  border: .1em solid var(--white-4);
  border-radius: var(--border-radius-1);
  width: 100%;
  transition: var(--transition);
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  justify-content: space-between;
  align-items: center;
  padding: .3em .8em;
  font-size: 1em;
  display: flex;
}

.style_root6 .style_selectWrapper .style_selectTrigger:focus {
  border-color: var(--primary-4);
  box-shadow: 0 0 0 .2em color-mix(in srgb, var(--primary-4), transparent 80%);
  background-color: #fff;
}

.style_root6 .style_selectWrapper .style_selectTrigger.style_filled {
  background-color: #fff;
}

.style_root6 .style_selectWrapper .style_selectTrigger .style_triggerValue {
  color: var(--black-4);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.style_root6 .style_selectWrapper .style_selectTrigger .style_arrowIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  width: 1.1em;
  height: 1.1em;
  transition: transform .2s;
}

.style_root6 .style_selectWrapper .style_dropdownMenu {
  border: .0625em solid var(--white-4);
  border-radius: var(--border-radius-1);
  width: 100%;
  max-height: 12em;
  box-shadow: var(--shadow-2);
  z-index: 1000;
  background-color: #fff;
  position: absolute;
  top: calc(100% + .2em);
  left: 0;
  overflow-y: auto;
}

.style_root6 .style_selectWrapper .style_dropdownMenu .style_option {
  cursor: pointer;
  color: var(--black-2);
  padding: .6em 1em;
  font-size: .95em;
  transition: background .1s;
}

.style_root6 .style_selectWrapper .style_dropdownMenu .style_option:hover {
  background-color: var(--primary-10);
}

.style_root6 .style_selectWrapper .style_dropdownMenu .style_option.style_selected3 {
  background-color: var(--primary-5);
  color: var(--white-1);
  font-weight: bold;
}

.style_root6 .style_selectWrapper .style_dropdownMenu .style_groupLabel {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--primary-5);
  background-color: var(--white-1);
  padding: .6em 1em;
  font-size: .8em;
  font-weight: bold;
}

.style_root6 .style_tooltipContainer {
  cursor: help;
  margin-bottom: -.05em;
  display: inline-flex;
  position: relative;
}

:is(.style_root6 .style_tooltipContainer:hover, .style_root6 .style_tooltipContainer:focus-within) .style_tooltipBox2 {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%)translateY(0);
}

.style_root6 .style_tooltipContainer .style_tooltipTrigger {
  background-color: var(--white-3);
  width: 1.3em;
  height: 1.3em;
  color: var(--black-3);
  transition: var(--transition);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: .65em;
  font-weight: bold;
  display: flex;
}

.style_root6 .style_tooltipContainer .style_tooltipBox2 {
  color: #fff;
  border-radius: var(--border-radius-2);
  width: max-content;
  max-width: 16em;
  box-shadow: var(--shadow-1);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  background-color: #222;
  padding: .6em .8em;
  font-size: .75rem;
  line-height: 1.4;
  transition: opacity .2s, transform .2s;
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%)translateY(1em);
}

.style_root6 .style_tooltipContainer .style_tooltipBox2:after {
  content: "";
  border: .3em solid #0000;
  border-top-color: #222;
  margin-left: -.3em;
  position: absolute;
  top: 100%;
  left: 50%;
}

.style_root6 .style_message {
  color: var(--black-3);
  margin-top: .2em;
  font-size: .9em;
}

.style_root6 .style_errorMessage {
  font-weight: 500;
  color: var(--color-red-4) !important;
}

.style_root6.style_isOpen .style_arrowIcon {
  transform: rotate(180deg);
}

.style_root6.style_filled .style_triggerValue {
  color: var(--black-1);
}

.style_root6.style_disabled2 .style_selectTrigger {
  cursor: not-allowed;
  opacity: .7;
  background-color: var(--white-2) !important;
}

.style_root6.style_negative4 .style_selectTrigger {
  border-color: var(--color-red-4);
}

.style_root6.style_negative4 .style_labelWrapper2, .style_root6.style_negative4 .style_message {
  color: var(--color-red-4);
}

.style_root6.style_required .style_label3:after {
  content: "*";
  color: var(--color-red-3);
  margin-left: .2em;
}

.style_root6.style_openUp .style_dropdownMenu {
  top: auto;
  bottom: calc(100% + .2em);
  box-shadow: 0 -.25em .75em #0000001a;
}

.style_selectWrapper {
  width: 100%;
  min-width: 0;
  position: relative;
}

.style_root2 {
  background-color: var(--white-light-2);
  border: var(--border-line-2);
  border-radius: var(--border-radius-2);
  direction: rtl;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.style_root2 .style_title3 {
  text-align: center;
  color: var(--black-3);
  margin-top: .3em;
  font-size: 1.5em;
  font-weight: bold;
}

.style_root2 .style_header {
  background-color: var(--white-light-2);
  color: var(--black-3);
  border-bottom: var(--border-line-2);
  font-size: .85em;
  font-weight: bold;
}

.style_root2 .style_items {
  background-color: #fff;
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow: auto;
}

.style_root2 .style_items > div {
  border-top: var(--border-line-2);
}

.style_root2 .style_items > div:first-child {
  border: none;
}

.style_root2 .style_header, .style_items > div {
  grid-template-columns: var(--grid-template);
  align-items: center;
  padding: 1em 2em;
  display: grid;
}

.style_price, .style_total {
  color: var(--black-2);
}

.style_pagination {
  border-top: var(--border-line-2);
  font-size: 1em;
}

.style_root2 .style_searchWrapper {
  background-color: var(--white-light-2);
  flex-direction: row;
  align-items: center;
  gap: 1em;
  padding: 1em;
  display: flex;
}

.style_root2 .style_search {
  flex-grow: 1;
  font-size: 1rem;
}

.style_root2 .style_searchOptions {
  color: var(--black-3);
  flex-direction: row;
  align-items: center;
  gap: 1.5em;
  display: flex;
}

.style_root2 .style_searchOptions > div {
  flex-direction: row;
  align-items: center;
  gap: .5em;
  display: flex;
}

.style_root2 .style_searchOptions .style_searchSortWrapper .style_sortDirectionButtons {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 3.7em;
  font-size: .57em;
  display: flex;
}

.style_root2 .style_header > *, .style_root2 .style_items > div > * {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.style_root2 .style_items > div > * * {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.style_root2 .style_items a {
  color: inherit !important;
  text-decoration: none !important;
}

.style_root2 .style_items a:hover {
  color: var(--primary-4) !important;
}

.style_root10 {
  flex-direction: column;
  gap: .5em;
  width: 100%;
  display: flex;
}

.style_label7 {
  color: var(--black-3);
  font-size: .95em;
  font-weight: 500;
}

.style_inputsContainer {
  justify-content: center;
  gap: .8em;
  width: 20em;
  height: 3em;
  display: flex;
}

.style_input4 {
  box-sizing: border-box;
  text-align: center;
  min-width: 0;
  height: 100%;
  font-size: 1.5em;
  font-weight: var(--weight-bold);
  border: .06em solid var(--white-4);
  border-radius: var(--border-radius-1);
  background: var(--white-1);
  transition: var(--transition);
  flex: 1;
}

.style_input4:focus {
  border-color: var(--primary-4);
  box-shadow: 0 0 0 .12em color-mix(in srgb, var(--primary-4), transparent 80%);
  outline: none;
}

.style_inputError2 {
  border-color: var(--color-red-3) !important;
}

.style_errorMessage2 {
  color: var(--color-red-3);
  text-align: center;
  margin-top: .1em;
  font-size: .8em;
}

.style_root11 {
  flex-direction: column;
  gap: .4em;
  width: 100%;
  display: flex;
}

.style_label8 {
  color: var(--black-3);
  font-size: .95em;
  font-weight: 500;
}

.style_inputWrapper2 {
  background-color: var(--cold-white-2);
  border: .1em solid var(--white-4);
  border-radius: var(--border-radius-1);
  height: 2.6em;
  transition: var(--transition);
  outline: .2em solid #0000;
  align-items: center;
  gap: .5em;
  padding: 0 .6em;
  display: flex;
  position: relative;
}

.style_inputWrapper2:focus-within {
  border-color: var(--primary-4);
  outline-color: color-mix(in srgb, var(--primary-4), transparent 80%);
  background-color: #fff;
}

.style_icon5 {
  width: 1.1em;
  height: 1.1em;
  color: var(--black-4);
}

.style_input5 {
  height: 100%;
  color: var(--black-1);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-family: inherit;
  font-size: .95em;
}

.style_applyBtn {
  background: var(--primary-3);
  color: #fff;
  border-radius: calc(var(--border-radius-1) - .125em);
  cursor: pointer;
  transition: var(--transition);
  border: none;
  padding: .3em 1em;
  font-size: .85em;
  font-weight: 600;
}

.style_applyBtn:hover:not(:disabled) {
  background: var(--primary-2);
}

.style_applyBtn:disabled {
  background: var(--white-4);
  cursor: not-allowed;
}

.style_negative5 {
  border-color: var(--color-red-4) !important;
}

.style_errorMessage3 {
  color: var(--color-red-4);
  margin-top: .2em;
  font-size: .8em;
}

.style_appliedBadge {
  border-radius: var(--border-radius-1);
  background-color: #10b98114;
  border: .0625em dashed #10b981;
  justify-content: space-between;
  align-items: center;
  padding: .6em .8em;
  animation: .3s ease-out style_slideIn;
  display: flex;
}

.style_badgeInfo {
  align-items: center;
  gap: .6em;
  display: flex;
}

.style_checkIcon {
  color: #10b981;
  width: 1.2em;
  height: 1.2em;
}

.style_textStack {
  flex-direction: column;
  display: flex;
}

.style_couponName {
  color: #065f46;
  font-size: .9em;
  font-weight: 700;
}

.style_successMsg {
  color: #059669;
  font-size: .75em;
}

.style_removeBtn {
  color: #666;
  cursor: pointer;
  background: #fff;
  border: .0625em solid #ddd;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 1.8em;
  height: 1.8em;
  transition: all .2s;
  display: flex;
}

.style_removeBtn:hover {
  background: var(--color-red-1);
  color: var(--color-red-4);
  border-color: var(--color-red-4);
}

@keyframes style_slideIn {
  from {
    opacity: 0;
    transform: translateY(-.3125em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.style_closeIcon2 {
  width: 1em;
  height: 1em;
}

.style_root12 {
  flex-direction: column;
  gap: .2em;
  min-width: 0;
  display: flex;
}

.style_root12.style_readOnly .style_input {
  cursor: not-allowed;
  background-color: var(--white-2) !important;
}

.style_root12.style_negative6 .style_labelWrapper {
  color: var(--color-red-4);
}

.style_root12.style_negative6:has(.style_input:focus) .style_labelWrapper {
  color: var(--color-red-4);
}

.style_root12.style_negative6 .style_input {
  border-color: var(--color-red-4);
}

.style_root12.style_negative6 .style_input:focus {
  border-color: var(--color-red-4);
  outline-color: var(--color-red-1);
}

.style_root12.style_negative6 .style_message2 {
  color: var(--color-red-4);
}

.style_root12.style_required2 .style_label4:after {
  content: "*";
  color: var(--color-red-3);
  margin-left: .2em;
}

.style_root12.style_required2 .style_input:after {
  content: "*";
}

.style_root12:has(.style_input:focus) .style_labelWrapper {
  color: var(--primary-2);
}

.style_root12 .style_labelWrapper {
  color: var(--black-3);
  transition: var(--transition);
  flex-direction: row;
  align-items: center;
  gap: .4em;
  margin-bottom: .1em;
  display: flex;
}

.style_root12 .style_icon6 {
  width: 1.1em;
  height: 1.1em;
  margin: 0;
}

.style_root12 .style_label4 {
  color: inherit;
  font-size: 1.1em;
}

.style_root12 .style_input {
  box-sizing: border-box;
  min-width: 0;
  width: inherit;
  background-color: var(--cold-white-2);
  border: .1em solid var(--white-4);
  border-radius: var(--border-radius-1);
  resize: none;
  height: 100%;
  caret-color: var(--primary-3);
  transition: var(--transition);
  direction: ltr;
  outline: .2em solid #0000;
  padding: .3em .4em;
  font-size: 1em;
}

.style_root12 .style_input:not(:placeholder-shown) {
  background-color: #fff;
}

.style_root12 .style_input:focus, .style_root12 .style_input:focus-within {
  border-color: var(--primary-4);
  outline: .2em solid color-mix(in srgb, var(--primary-4), transparent 80%);
  background-color: #fff;
}

.style_root12 .style_message2 {
  color: var(--black-5);
  margin-top: .2em;
  font-size: .9em;
}

.style_tooltipContainer2 {
  cursor: help;
  margin-bottom: -.05em;
  display: inline-flex;
  position: relative;
}

.style_tooltipContainer2:hover .style_tooltipBox, .style_tooltipContainer2:focus-within .style_tooltipBox {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%)translateY(0);
}

.style_tooltipTrigger2 {
  background-color: var(--white-3);
  width: 1.3em;
  height: 1.3em;
  color: var(--black-3);
  transition: var(--transition);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: .65em;
  font-weight: bold;
  display: flex;
}

.style_tooltipBox {
  color: #fff;
  border-radius: var(--border-radius-2);
  width: max-content;
  max-width: 16em;
  box-shadow: var(--shadow-1);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  background-color: #222;
  padding: .6em .8em;
  font-size: .75rem;
  line-height: 1.4;
  transition: opacity .2s, transform .2s;
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%)translateY(1em);
}

.style_tooltipBox:after {
  content: "";
  border: .3em solid #0000;
  border-top-color: #222;
  margin-left: -.3em;
  position: absolute;
  top: 100%;
  left: 50%;
}

.style_root13 {
  flex-direction: column;
  gap: .5em;
  display: flex;
}

.style_labelRow {
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5em;
  display: flex;
}

.style_label9 {
  color: var(--black-3);
  font-size: 1.1em;
  font-weight: 500;
}

.style_counter {
  color: var(--gray-4);
  font-size: .85rem;
}

.style_counterFull {
  color: var(--color-red-4);
  font-weight: bold;
}

.style_icon7 {
  width: 1em;
  height: 1em;
}

.style_container5 {
  flex-direction: column;
  gap: 1.5em;
  display: flex;
}

.style_hiddenInput3 {
  display: none;
}

.style_mediaActions {
  flex-direction: column;
  gap: 1em;
  display: flex;
}

.style_uploadArea {
  border: .125em dashed var(--white-3);
  border-radius: var(--border-radius-3);
  background: var(--white-light-2);
  cursor: pointer;
  transition: var(--transition);
  color: var(--gray-3);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5em;
  padding: 2em;
  font-family: inherit;
  font-size: 1em;
  display: flex;
}

.style_uploadArea:hover {
  border-color: var(--primary-5);
  background: var(--primary-10);
  color: var(--primary-2);
}

.style_uploadArea.style_disabled3 {
  cursor: not-allowed;
  background-color: var(--white-2);
  border-color: var(--white-4);
  color: var(--gray-5);
}

.style_uploadText {
  text-align: center;
}

.style_formatHint {
  opacity: .7;
  margin-top: .25em;
  font-size: .75rem;
  display: block;
}

.style_divider {
  text-align: center;
  color: var(--gray-4);
  align-items: center;
  font-size: .8em;
  display: flex;
}

.style_divider:before, .style_divider:after {
  content: "";
  border-bottom: .0625em solid var(--white-3);
  flex: 1;
}

.style_divider:not(:empty):before {
  margin-inline-end: .5em;
}

.style_divider:not(:empty):after {
  margin-inline-start: .5em;
}

.style_urlInputRow {
  gap: .5em;
  display: flex;
}

.style_flexGrow {
  flex: 1;
}

.style_addUrlBtn {
  white-space: nowrap;
  padding: 0 1.25em;
}

.style_imageGrid {
  grid-template-columns: repeat(auto-fill, minmax(6.25em, 1fr));
  gap: 1em;
  display: grid;
}

.style_imageCard {
  aspect-ratio: 1;
  border-radius: var(--border-radius-2);
  border: .0625em solid var(--white-3);
  background: var(--white-1);
  position: relative;
  overflow: hidden;
}

.style_imagePreview {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.style_imageBadge {
  bottom: .25em;
  color: #fff;
  border-radius: var(--border-radius-1);
  text-transform: uppercase;
  background: #0009;
  padding: .15em .4em;
  font-size: .7rem;
  position: absolute;
  inset-inline-start: .25em;
}

.style_deleteBtn {
  top: .25em;
  cursor: pointer;
  width: 1.5em;
  height: 1.5em;
  color: var(--negative-3);
  box-shadow: var(--shadow-3);
  background: #ffffffe6;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 1em;
  transition: transform .1s;
  display: flex;
  position: absolute;
  inset-inline-end: .25em;
}

.style_deleteBtn:hover {
  background: var(--white-1);
  transform: scale(1.1);
}

.style_imageEmpty {
  border: .0625em dashed var(--white-3);
  border-radius: var(--border-radius-3);
  color: var(--gray-4);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5em;
  padding: 2em;
  font-size: .875em;
  display: flex;
}

.style_emptyIconCircle {
  background: var(--white-light-3);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: .75em;
  display: flex;
}

.style_root14 {
  flex-direction: column;
  gap: .5em;
  display: flex;
}

.style_label10 {
  color: var(--black-3);
  margin: 0;
  font-size: 1.1em;
}

.style_rows {
  flex-direction: column;
  gap: .4em;
  display: flex;
}

.style_row {
  align-items: center;
  gap: .4em;
  display: flex;
}

.style_keyInput, .style_valueInput {
  flex: 1;
  min-width: 0;
}

.style_separator {
  color: var(--gray-4);
  -webkit-user-select: none;
  user-select: none;
  margin: 0 .1em;
  font-size: 1.1em;
  font-weight: bold;
}

.style_removeButton {
  border-radius: var(--border-radius-1);
  cursor: pointer;
  width: 1.8em;
  height: 1.8em;
  color: var(--gray-4);
  transition: var(--transition);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.style_removeButton:hover:not(:disabled) {
  background-color: var(--negative-9);
  color: var(--negative-3);
}

.style_removeButton:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.style_icon8 {
  width: 1em;
  height: 1em;
}

.style_addButton {
  align-self: flex-start;
}

.style_root15 {
  flex-direction: column;
  gap: 1em;
  width: fit-content;
  display: flex;
}

.style_root15 .style_title4 {
  color: var(--black-4);
}

.style_root15 .style_items2 {
  flex-direction: row;
  align-items: center;
  gap: 1em;
  display: flex;
}

.style_root15 .style_items2 .style_item2.style_selected4 {
  color: var(--primary-3);
  border-color: var(--primary-6);
}

.style_root15 .style_items2 .style_item2 {
  border-radius: var(--border-radius-1);
  border: var(--border-line-3);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  color: var(--black-3);
  background-color: #fff;
  flex-direction: row;
  align-items: center;
  gap: .5em;
  padding: .2em .5em;
  font-size: 1.1em;
  display: flex;
}

.style_root15 .style_items2 .style_item2:hover {
  color: var(--primary-3);
  border-color: var(--primary-6);
}

.style_root15 .style_items2 .style_item2 .style_icon9 {
  width: 1em;
  height: 1em;
}

.style_root {
  flex-direction: column;
  gap: .2em;
  width: 100%;
  min-width: 0;
  display: flex;
}

.style_root .style_label {
  color: var(--black-3);
  transition: var(--transition);
  margin: 0;
  font-size: 1.1em;
}

.style_root:has(.style_inputWrapper:focus-within) .style_label {
  color: var(--primary-2);
}

.style_root .style_inputWrapper {
  border-radius: var(--border-radius-1);
  border: .08em solid var(--white-4);
  box-sizing: border-box;
  height: 2.3em;
  transition: var(--transition);
  background-color: #fff;
  outline: .16em solid #0000;
  flex-direction: row;
  align-items: center;
  gap: .3em;
  width: 100%;
  padding: 0 .4em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.style_root.style_disabled4 {
  opacity: .5;
  pointer-events: none;
}

.style_root .style_inputWrapper .style_unit {
  color: var(--gray-3);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.style_root .style_input3 {
  min-width: 0;
  height: 100%;
  font-size: inherit;
  caret-color: var(--primary-3);
  background: none;
  outline: none;
  flex: 1;
  margin: 0;
  padding: 0;
  border: none !important;
}

.style_root .style_input3::-webkit-outer-spin-button {
  opacity: 1;
  cursor: pointer;
  height: 1.5em;
  margin: 0;
}

.style_root .style_input3::-webkit-inner-spin-button {
  opacity: 1;
  cursor: pointer;
  height: 1.5em;
  margin: 0;
}

.style_root.style_required3 .style_label:after {
  content: "*";
  color: var(--color-red-3);
  margin-left: .2em;
}

.style_root.style_negative .style_inputWrapper {
  border-color: var(--color-red-4);
}

.style_root.style_negative .style_inputWrapper:focus-within {
  border-color: var(--color-red-4);
  outline-color: var(--color-red-1);
}

.style_root .style_message3 {
  margin: .2em 0 0;
  font-size: .75em;
}

.style_root.style_negative .style_message3 {
  color: var(--color-red-4);
}

.style_root .style_inputWrapper {
  border: .1em solid var(--white-4);
  background-color: var(--cold-white-2);
  outline: .2em solid #0000;
}

.style_root .style_inputWrapper:focus-within {
  outline: .2em solid color-mix(in srgb, var(--primary-4), transparent 80%);
  border-color: var(--primary-4);
}

.style_root .style_inputWrapper:has(input:not(:placeholder-shown)) {
  background-color: #fff;
}

.style_spinnerButtons {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .1em;
  height: 100%;
  display: flex;
}

.style_spinButton {
  cursor: pointer;
  width: 1.4em;
  height: 50%;
  transition: var(--transition);
  background: none;
  border: none;
  border-radius: .2em;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  display: flex;
}

.style_spinIcon {
  width: .9em;
  height: .9em;
  color: var(--gray-3);
  transition: var(--transition);
}

.style_spinButton:hover:not(:disabled) {
  background-color: var(--primary-light-1);
}

.style_spinButton:hover:not(:disabled) .style_spinIcon {
  color: var(--primary-4);
}

.style_spinButton:active:not(:disabled) {
  background-color: var(--primary-light-2);
}

.style_spinButton:active:not(:disabled) .style_spinIcon {
  color: var(--primary-2);
}

.style_spinButton:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.style_spinButton:disabled .style_spinIcon {
  color: var(--gray-5);
}

.style_container6 {
  flex-direction: column;
  width: 100%;
  font-family: inherit;
  display: flex;
}

.style_labelWrapper3 {
  color: #374151;
  flex-direction: row;
  align-items: center;
  gap: .3em;
  display: flex;
}

.style_labelWrapper3 .style_icon {
  width: 1.1em;
  height: 1.1em;
  color: inherit;
}

.style_label12 {
  margin-bottom: .4em;
  font-size: 1.1em;
}

.style_inputWrapper3 {
  background-color: #fff;
  border: .0625em solid #d1d5db;
  border-radius: .5em;
  transition: all .2s;
  overflow: hidden;
  box-shadow: 0 .0625em .125em #0000000d;
}

.style_inputWrapper3:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 .1875em #3b82f633;
}

.style_inputError {
  border-color: #ef4444 !important;
}

.style_inputError:focus-within {
  box-shadow: 0 0 0 .1875em #ef444433 !important;
}

.style_inputSuccess {
  border-color: #10b981 !important;
}

.style_inputSuccess:focus-within {
  box-shadow: 0 0 0 .1875em #10b98133 !important;
}

.style_phoneInput {
  direction: ltr;
  align-items: center;
  width: 100%;
  display: flex;
}

.style_phoneInput .PhoneInputCountry {
  background-color: #f9fafb;
  border-right: .0625em solid #e5e7eb;
  align-items: center;
  margin-right: .5em;
  padding: .6em .8em;
  display: flex;
}

.style_phoneInput .PhoneInputCountrySelect:focus {
  outline: none;
}

.style_phoneInput .PhoneInputInput {
  color: #111827;
  letter-spacing: .0625em;
  background: none;
  border: none;
  outline: none;
  flex: 1;
  padding: .6em .8em .6em 0;
  font-size: 1em;
}

.style_phoneInput .PhoneInputInput::placeholder {
  color: #9ca3af;
  letter-spacing: normal;
}

.style_statusContainer {
  align-items: flex-start;
  min-height: 1.5em;
  margin-top: .4em;
  display: flex;
}

.style_icon {
  width: .9em;
  height: .9em;
  margin-left: .25em;
}

.style_errorText, .style_successText {
  align-items: center;
  font-size: .9em;
  font-weight: 500;
  animation: .3s style_fadeIn;
  display: flex;
}

.style_errorText {
  color: var(--color-red-4);
}

.style_successText {
  color: #10b981;
}

@keyframes style_fadeIn {
  from {
    opacity: 0;
    transform: translateY(-.25em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.style_statusIcon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

.style_requiredStar {
  color: var(--color-red-3);
}

.style_container2 {
  background-color: var(--panel-color);
  flex-direction: column;
  gap: 1.25em;
  width: 50%;
  margin: auto auto 6.25em;
  padding: 1rem 2rem;
  display: flex;
}

.style_actionButtons {
  flex-direction: row;
  gap: .5rem;
  display: flex;
}

.style_container2 > div {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.style_floatingGroup {
  width: max-content;
  min-width: 2rem;
  height: fit-content;
  font-size: 2rem;
  position: relative;
}

.style_floatingGroupLabel {
  color: var(--text-6);
  pointer-events: none;
  transform-origin: 0 0;
  transition: var(--transition);
  white-space: nowrap;
  z-index: 1;
  font-size: .88rem;
  position: absolute;
  top: .7rem;
  left: .8rem;
}

.style_arabic .style_floatingGroupLabel {
  transform-origin: 100% 0;
  left: auto;
  right: .8rem;
}

.style_floatingGroupInput {
  background-color: var(--primary-light-7);
  border: .05rem solid var(--primary-8);
  border-radius: var(--border-radius);
  box-sizing: border-box;
  width: 100%;
  min-height: 2.5rem;
  transition: var(--transition);
  caret-color: var(--primary-5);
  outline: none;
  height: 100%;
  padding: 1.3rem .8rem .65rem;
  font-size: .88rem;
}

.style_floatingGroupInput:focus {
  border-color: var(--primary-3);
  box-shadow: var(--focus-ring-shadow);
}

.style_floatingGroupInput:focus ~ .style_floatingGroupLabel, .style_floatingGroupInput:not(:placeholder-shown) ~ .style_floatingGroupLabel {
  color: var(--primary-4);
  font-weight: 600;
  transform: translateY(-.5rem)scale(.75);
}

.style_selectBox {
  appearance: none;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' strokeWidth='2'%3E%3Cpath strokeLinecap='round' strokeLinejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  min-height: 2.5rem;
  padding: 1.1rem 3.5rem .5rem .8rem;
  overflow: hidden;
}

.style_selectBox:required:invalid ~ .style_floatingGroupLabel {
  color: var(--text-5);
  font-weight: 500;
  transform: none;
}

.style_selectBox:required:valid ~ .style_floatingGroupLabel {
  color: var(--primary-4);
}

.style_hiddenInput {
  appearance: none;
  border: none;
  width: 0;
  height: 0;
  position: absolute;
}

.style_radioItem {
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  display: flex;
}

.style_radioItem:hover {
  background-color: var(--cold-white-2);
}

.style_customRadio {
  border: .09rem solid var(--cold-white-5);
  width: 1rem;
  height: 1rem;
  transition: var(--transition);
  background-color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.style_customRadio:after {
  content: "";
  background-color: var(--primary-5);
  border-radius: 50%;
  transition: transform .2s;
  position: absolute;
  inset: .11rem;
  transform: scale(0);
}

.style_hiddenInput:checked + .style_customRadio {
  border-color: var(--primary-5);
}

.style_hiddenInput:checked + .style_customRadio:after {
  transform: scale(1);
}

.style_checkboxItem {
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  display: flex;
}

.style_checkboxItem:hover {
  background-color: var(--cold-white-2);
}

.style_customCheckbox {
  border-radius: var(--border-radius);
  border: .09rem solid var(--cold-white-5);
  width: 1rem;
  height: 1rem;
  transition: var(--transition);
  background-color: #fff;
  flex-shrink: 0;
  place-content: center;
  line-height: 0;
  display: grid;
}

.style_customCheckbox:after {
  content: "✓";
  color: #fff;
  transition: transform .2s;
  transform: scale(0);
}

.style_hiddenInput:checked + .style_customCheckbox {
  border-color: var(--primary-5);
  background-color: var(--primary-5);
}

.style_hiddenInput:checked + .style_customCheckbox:after {
  transform: scale(1);
}

.style_switchItem {
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: .5rem;
  display: flex;
}

.style_switchItem .style_label5 {
  flex-direction: row;
  align-items: center;
  gap: .4rem;
  display: flex;
}

.style_switchItem img {
  height: 1.3rem;
}

.style_switchItem:hover {
  background-color: var(--cold-white-2);
}

.style_customSwitch {
  width: 1.9rem;
  height: 1rem;
  transition: var(--transition);
  background-color: var(--cold-white-5);
  border: .1rem solid var(--cold-white-5);
  border-radius: 1rem;
  flex-shrink: 0;
  position: relative;
}

.style_customSwitch:after {
  content: "";
  width: 1rem;
  height: 1rem;
  transition: var(--transition);
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  right: .9rem;
  box-shadow: 0 .125em .25em #0003;
}

.style_hiddenInput:checked + .style_customSwitch {
  border-color: var(--primary-5);
  background-color: var(--primary-5);
}

.style_hiddenInput:checked + .style_customSwitch:after {
  right: 0;
}

.style_colorSelectorItem {
  cursor: pointer;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: .5rem;
  display: flex;
}

.style_colorSelectorItem:hover {
  background-color: var(--cold-white-2);
}

.style_customColorbox {
  border: .1rem solid var(--primary-6);
  background-color: #0ff;
  border-radius: .15rem;
  width: 1.5rem;
  height: 1.5rem;
}

.style_rangeInput {
  --range-progress: 50%;
  appearance: none;
  cursor: pointer;
  background: none;
  width: 100%;
}

.style_rangeInput::-webkit-slider-runnable-track {
  background-color: var(--cold-white-3);
  border-radius: var(--border-radius);
  background: linear-gradient(to right,
      var(--primary-6) 0%,
      var(--primary-6) var(--range-progress),
      var(--cold-white-3) var(--range-progress),
      var(--cold-white-3) 100%);
  height: .5rem;
}

.style_rangeInput::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--primary-4);
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -.25rem;
  transition: all .1s;
  box-shadow: 0 .125em .25em #0003;
}

.style_rangeInput::-webkit-slider-thumb:hover {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: -.3rem;
}

.style_rangeInputContainer {
  flex-direction: column;
  gap: .4rem;
  display: flex;
}

.style_rangeInputInfo {
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  display: flex;
}

.style_rangeInputInfo p {
  margin: 0;
}

.style_rangeInputInfo .style_amountText {
  color: var(--primary-4);
  font-size: .8rem;
  font-weight: bold;
}

.style_rangeInputInfo .style_label5 {
  color: var(--text-6);
  letter-spacing: .05rem;
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: bold;
}

.style_trueFalseInput {
  flex-direction: row;
  align-items: center;
  gap: .7rem;
  display: flex;
}

.style_trueFalseInput .style_buttons {
  background-color: var(--cold-white-3);
  border-radius: var(--border-radius);
  flex-direction: row;
  gap: .2rem;
  padding: .2rem;
  display: flex;
  position: relative;
}

.style_trueFalseInput .style_buttons button {
  border-radius: var(--border-radius);
  color: var(--black-4);
  transition: var(--transition);
  z-index: 1;
  background: none;
  border: none;
  width: 3rem;
  height: 1.4rem;
  padding: .25rem .5rem;
  font-size: .8rem;
  font-weight: bold;
}

.style_trueFalseInput .style_buttons:after {
  content: "";
  background: var(--primary-3);
  width: 3rem;
  height: 1.4rem;
  transition: var(--transition-2);
  border-radius: var(--border-radius);
  position: absolute;
}

.style_trueFalseInput .style_buttons.style_trueSelected:after {
  translate: 3.2rem;
}

.style_trueFalseInput .style_buttons .style_selected2 {
  color: var(--white-1);
}

.style_trueFalseInput .style_buttons button:hover {
  color: var(--black-6);
}

.style_trueFalseInput .style_buttons .style_selected2:hover {
  color: var(--white-3);
}

.style_sortableList {
  --box-size: 1.3rem;
  flex-direction: column;
  gap: .7rem;
  display: flex;
}

.style_sortableList div {
  flex-direction: row;
  display: flex;
}

.style_sortableList .style_item {
  background-color: var(--cold-white-1);
  border-radius: var(--border-radius);
  border: .07rem solid var(--white-2);
  align-items: center;
  gap: 1rem;
  width: fit-content;
  padding: .5rem .75rem .5rem .5rem;
}

.style_sortableList .style_item.style_isDragged {
  border-color: var(--primary-4);
  cursor: grabbing;
}

.style_sortableList .style_item .style_textSection {
  align-items: center;
  gap: .5rem;
}

.style_sortableList .style_item .style_textSection .style_sortingIndexContainer {
  background-color: var(--white-2);
  width: var(--box-size);
  height: var(--box-size);
  outline: .1rem solid var(--primary-4);
  outline-offset: -.1rem;
  background-color: var(--white-1);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}

.style_sortableList .style_item .style_textSection .style_sortingIndex {
  text-align: center;
  color: var(--primary-4);
  font-size: .8rem;
  font-weight: bold;
}

.style_sortableList .style_item .style_textSection img {
  opacity: .5;
  cursor: grab;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
  width: .6rem;
  height: .6rem;
  padding: .3rem;
}

.style_grabbingGlobal .style_sortableList .style_item .style_textSection img {
  cursor: grabbing !important;
}

.style_sortableList .style_item .style_textSection img:hover {
  opacity: .75;
  background-color: var(--white-2);
}

.style_sortableList .style_buttons {
  gap: .2rem;
}

.style_sortableList .style_buttons button {
  background: var(--cold-white-3);
  width: var(--box-size);
  height: var(--box-size);
  color: var(--primary-4);
  border: none;
  font-size: .75rem;
}

.style_sortableList .style_buttons button:hover {
  background: var(--primary-4);
  color: var(--white-1);
}

.style_sortableList .style_buttons button:first-child {
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

.style_sortableList .style_buttons button:nth-child(2) {
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.style_grabbingGlobal {
  cursor: grabbing;
}

.style_numberInput {
  background-color: var(--white-1);
  border-radius: var(--border-radius);
  border: .1rem solid var(--cold-white-3);
  width: fit-content;
  transition: var(--transition);
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
  display: flex;
}

.style_numberInput .style_inputAndLabel {
  flex-direction: column;
  gap: .1rem;
  padding: .3rem;
  display: flex;
}

.style_numberInput .style_inputAndLabel label {
  text-transform: uppercase;
  font-size: .6rem;
  font-weight: bolder;
  font-family: var(--font-4);
  color: var(--gray-2);
}

.style_numberInput .style_inputAndLabel input {
  border: none;
  outline: none;
  font-size: 1rem;
  font-weight: bolder;
}

.style_numberInput:focus-within {
  box-shadow: var(--focus-ring-shadow);
  border: .1rem solid var(--primary-5);
}

.style_numberInput .style_inputAndLabel input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.style_numberInput .style_inputAndLabel input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.style_numberInput .style_controlButtons {
  background-color: var(--cold-white-3);
  border-radius: var(--border-radius);
  flex-direction: column;
  gap: .06rem;
  display: flex;
}

.style_numberInput .style_controlButtons button {
  cursor: pointer;
  border: none;
  border-left: .1rem solid var(--cold-white-3);
  flex-grow: 1;
  width: 2rem;
}

.style_numberInput .style_controlButtons button svg {
  width: .75rem;
  height: .75rem;
}

.style_numberInput .style_controlButtons button:hover {
  background-color: var(--primary-3);
}

.style_numberInput .style_controlButtons button:hover svg {
  filter: invert();
}

.style_numberInput .style_controlButtons button:first-child {
  border-top-right-radius: var(--border-radius);
}

.style_numberInput .style_controlButtons button:nth-child(2) {
  border-bottom-right-radius: var(--border-radius);
}

.style_arabic.style_text {
  direction: rtl;
}

.style_text.style_size_small {
  font-size: .5rem;
}

.style_text.style_size_medium {
  font-size: 1rem;
}

.style_text.style_size_large {
  font-size: 2rem;
}

.style_text.style_weight_normal {
  font-weight: normal;
}

.style_text.style_weight_bold {
  font-weight: bold;
}

.style_text.style_darkness_low {
  color: var(--gray-5);
}

.style_text.style_darkness_medium {
  color: var(--black-5);
}

.style_text.style_darkness_high {
  color: var(--black-1);
}

.style_root7 {
  flex-direction: column;
  gap: .75em;
  width: 100%;
  transition: all .2s ease-in-out;
  display: flex;
}

.style_root7 .style_options {
  flex-flow: wrap;
  gap: 1.5em;
  display: flex;
}

.style_root7 .style_header3 {
  flex-direction: row;
  align-items: center;
  gap: .5em;
  display: flex;
}

.style_root7 .style_header3 .style_label6 {
  color: var(--foreground, #333);
  font-size: 1em;
  font-weight: bold;
}

.style_root7 .style_header3 .style_icon2 {
  width: 1.1em;
  height: 1.1em;
  color: var(--foreground-muted, #666);
}

.style_root7 .style_message6 {
  color: #666;
  margin-top: -.25em;
  font-size: .85em;
}

.style_root7.style_negative7 .style_label6, .style_root7.style_negative7 .style_icon2 {
  color: #d93025;
}

.style_root7 .style_errorMessage4 {
  color: #d93025;
  font-weight: 500;
}

.style_root7:focus-visible {
  outline: none;
}

.style_root3 {
  box-sizing: border-box;
  flex-direction: column;
  gap: .2em;
  width: 100%;
  display: flex;
}

.style_root3 .style_label2 {
  color: var(--black-3);
  transition: var(--transition);
  font-size: 1.1em;
}

.style_root3 .style_inputWrapper4 {
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  position: relative;
}

.style_root3 .style_input2 {
  resize: none;
  box-sizing: border-box;
  border-radius: var(--border-radius-1);
  border: .1em solid var(--white-4);
  width: 100%;
  min-width: 0;
  min-height: 0;
  caret-color: var(--primary-3);
  transition: var(--transition);
  background-color: var(--cold-white-2);
  outline: .2em solid #0000;
  flex: 1;
  padding: .3em .4em 1.5em;
  font-size: 1em;
}

.style_root3 .style_input2:not(:placeholder-shown) {
  background-color: #fff;
}

.style_root3 .style_input2:focus {
  outline: .2em solid color-mix(in srgb, var(--primary-4), transparent 80%);
  border-color: var(--primary-4);
  background-color: #fff;
}

.style_root3:has(.style_input2:focus) .style_label2 {
  color: var(--primary-2);
}

.style_root3.style_required4 .style_label2:after {
  content: "*";
  color: var(--color-red-3);
  margin-left: .2em;
}

.style_root3.style_negative2 .style_input2 {
  border-color: var(--color-red-4);
}

.style_root3.style_negative2 .style_input2:focus {
  border-color: var(--color-red-4);
  outline-color: var(--color-red-1);
}

.style_root3 .style_message4 {
  margin-top: .2em;
  font-size: .75em;
}

.style_root3.style_negative2 .style_message4 {
  color: var(--color-red-4);
}

.style_root3 .style_inputWrapper4 .style_counter2 {
  color: var(--gray-4);
  pointer-events: none;
  font-size: .8em;
  position: absolute;
  bottom: .3em;
  left: 1em;
}

.style_hiddenInput2 {
  appearance: none;
  border: none;
  width: 0;
  height: 0;
  position: absolute;
}

.style_switchItem2 {
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  -webkit-user-select: none;
  user-select: none;
  flex-direction: row;
  align-items: center;
  gap: 1em;
  width: fit-content;
  padding: .5em;
  display: flex;
}

.style_switchItem2 .style_label13 {
  flex-direction: row;
  align-items: center;
  gap: .4em;
  display: flex;
}

.style_switchItem2 img {
  height: 1.3em;
}

.style_switchItem2:hover {
  background-color: var(--cold-white-2);
}

.style_customSwitch2 {
  background-color: var(--cold-white-5);
  border: .1em solid var(--cold-white-5);
  width: 1.9em;
  height: 1em;
  transition: var(--transition);
  border-radius: 1em;
  flex-shrink: 0;
  position: relative;
}

.style_customSwitch2:after {
  content: "";
  width: 1em;
  height: 1em;
  transition: var(--transition);
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  right: .9em;
  box-shadow: 0 .125em .25em #0003;
}

.style_hiddenInput2:checked + .style_customSwitch2 {
  border-color: var(--primary-5);
  background-color: var(--primary-5);
}

.style_hiddenInput2:checked + .style_customSwitch2:after {
  right: 0;
}

/*# sourceMappingURL=_0mn4shy._.css.map*/