:root {
  --ui-green-dark:   var(--clr-green-dark,   #0C342C);
  --ui-green-deep:   var(--clr-green-deep,   #022C2C);
  --ui-green-medium: var(--clr-green-medium, #173D2D);
  --ui-gold:         var(--clr-gold,         #B4956C);
  --ui-cream-light:  var(--clr-cream-light,  #FDFAF2);
  --ui-cream-base:   var(--clr-cream-base,   #F3EEDF);
  --ui-white:        var(--clr-cream-light,  #FDFAF2);   /* the site's "white" is the warm cream-light */

  --ui-bg:          transparent;
  --ui-color:       var(--ui-green-dark);
  --ui-bc:          var(--ui-gold);
  --ui-bc-hover:    var(--ui-green-dark);
  --ui-bc-focus:    var(--ui-green-dark);
  --ui-ph-color:    var(--ui-green-dark);
  --ui-ph-opacity:  .7;

  --ui-accent:      var(--ui-gold);
  --ui-accent-ring: color-mix(in srgb, var(--ui-gold) 30%, transparent);
  --ui-on-accent:   var(--ui-white);

  --ui-surface:          var(--ui-white);
  --ui-glass:            rgba(255, 255, 255, .72);
  --ui-surface-soft:     var(--ui-cream-base);
  --ui-surface-hover:    var(--ui-cream-light);
  --ui-surface-disabled: color-mix(in srgb, var(--ui-cream-base) 45%, var(--ui-white));
  --ui-hover:            color-mix(in srgb, var(--ui-cream-base) 75%, var(--ui-gold));
  --ui-shadow:           color-mix(in srgb, var(--ui-green-deep) 18%, transparent);

  --ui-text:          var(--ui-green-deep);
  --ui-text-muted:    color-mix(in srgb, var(--ui-green-medium) 70%, transparent);
  --ui-text-disabled: color-mix(in srgb, var(--ui-green-dark) 35%, transparent);

  --ui-danger:       #ef4444;
  --ui-danger-ring:  rgba(239, 68, 68, .25);
  --ui-success:      #22c55e;
  --ui-success-ring: rgba(34, 197, 94, .25);
}

.ui-input {
  --w: 100%;
  --h: 3.8rem;
  --px: 1.4rem;
  --radius: .8rem;
  --gap: 1rem;

  --font: inherit;
  --fs: 1.75rem;
  --fw: 400;
  --color: var(--ui-color);
  --color-disabled: var(--ui-text-disabled);
  --ph-color: var(--ui-ph-color);
  --ph-opacity: var(--ui-ph-opacity);

  --bw: .1rem;
  --bs: solid;
  --bc: var(--ui-bc);
  --bc-hover: var(--ui-bc-hover);
  --bc-focus: var(--ui-bc-focus);

  --bg: var(--ui-bg);
  --bg-hover: var(--bg);
  --bg-focus: var(--bg);
  --bg-disabled: var(--ui-surface-disabled);

  --ring-size: .3rem;
  --ring-color: var(--ui-accent-ring);
  --shadow: none;
  --transition: .15s ease;

  --icon-size: 1.8rem;
  --icon-color: var(--ui-color);

  position: relative;
  display: inline-flex;
  align-items: center;
  width: var(--w);
  height: var(--h);
  box-sizing: border-box;
  padding: 0 var(--px);
  gap: var(--gap);
  background: var(--bg);
  border: var(--bw) var(--bs) var(--bc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

@media (hover: hover) { .ui-input:hover { border-color: var(--bc-hover); background: var(--bg-hover); } }
.ui-input:focus-within { border-color: var(--bc-focus); background: var(--bg-focus);
                         box-shadow: var(--shadow), 0 0 0 var(--ring-size) var(--ring-color); }

.ui-input__field {
  flex: 1; min-width: 0; height: 100%;
  padding: 0; margin: 0; border: 0; outline: 0;
  background: transparent;
  font: inherit;
  font-family: var(--font);
  font-size: var(--fs);
  font-weight: var(--fw);
  color: var(--color);
}
.ui-input__field::placeholder { color: var(--ph-color); opacity: var(--ph-opacity); }

.ui-input--multiline { --h: 20rem; align-items: stretch; padding-top: 1rem; padding-bottom: 1rem; }
.ui-input--multiline > textarea { overflow: auto; resize: none; }
.ui-input__icon { flex: none; display: inline-flex; width: var(--icon-size); height: var(--icon-size); color: var(--icon-color); }
.ui-input__icon svg,
.ui-input__icon img { width: 100%; height: 100%; }
.ui-input__icon img { object-fit: contain; }

.ui-input.is-error   { --bc:var(--ui-danger);  --bc-hover:var(--ui-danger);  --bc-focus:var(--ui-danger);  --ring-color:var(--ui-danger-ring); }
.ui-input.is-success { --bc:var(--ui-success); --bc-hover:var(--ui-success); --bc-focus:var(--ui-success); --ring-color:var(--ui-success-ring); }
.ui-input.is-disabled,
.ui-input:has(.ui-input__field:disabled) {
  --bg: var(--bg-disabled); --bg-hover: var(--bg-disabled); --bg-focus: var(--bg-disabled);
  --color: var(--color-disabled);
  cursor: not-allowed;
}
.ui-input__field:disabled { cursor: not-allowed; }

.ui-input--sm { --h: 3.2rem; --fs: 1.4rem; --px: 1rem;  --radius: .6rem; }
.ui-input--lg { --h: 5.2rem; --fs: 2rem;   --px: 1.8rem; --radius: 1.2rem; }

.ui-input--borderless { --bc: transparent; --bc-hover: transparent; --bc-focus: transparent; }
.ui-input--filled     { --bg: var(--ui-surface-soft); --bc: transparent; --bc-hover: transparent; --bg-focus: var(--ui-surface); }
.ui-input--underline  { --radius: 0; --px: .2rem; --ring-size: 0px;
                        border-width: 0 0 var(--bw) 0; box-shadow: none; }
.ui-input--pill       { --radius: 99.9rem; --px: 2rem; }
.ui-input--dark       { --bg: var(--ui-green-deep); --color: var(--ui-cream-light);
                        --ph-color: color-mix(in srgb, var(--ui-cream-base) 55%, transparent); --ph-opacity: 1;
                        --icon-color: color-mix(in srgb, var(--ui-cream-base) 55%, transparent);
                        --bc: var(--ui-green-medium); --bc-hover: var(--ui-gold); --bc-focus: var(--ui-accent); }

.ui-input-group {
  --w: 100%;
  --h: 3.8rem;
  --radius: .8rem;

  display: flex;
  align-items: stretch;
  width: var(--w);
  height: var(--h);
}
.ui-input-group > .ui-input {
  --w: auto; --h: inherit; --radius: inherit;
  flex: 1 1 auto;
  min-width: 0;
  border-right-width: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}
.ui-input-group > .ui-btn {
  --h: inherit; --radius: inherit;
  flex: none;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ui-input-group > .ui-input:focus-within,
.ui-input-group > .ui-btn:focus-visible { position: relative; z-index: 1; }

.ui-file {
  --file-btn-color: var(--ui-text);
  --file-btn-bg: var(--ui-surface-soft);
  --file-btn-bg-hover: var(--ui-hover);
  --file-btn-fw: 600;

  cursor: pointer; overflow: hidden;
}

.ui-file__field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0; cursor: pointer;
  font-size: 0;
}
.ui-file__field::file-selector-button { cursor: pointer; }

.ui-file__name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font); font-size: var(--fs); font-weight: var(--fw);
  color: color-mix(in srgb, var(--ph-color) calc(var(--ph-opacity) * 100%), transparent);
}
.ui-file.has-file .ui-file__name { color: var(--color); }

.ui-file__btn {
  flex: none; align-self: stretch;
  display: inline-flex; align-items: center;
  margin: calc(var(--bw) * -1) calc((var(--px) + var(--bw)) * -1) calc(var(--bw) * -1) 0;
  padding: 0 var(--px);
  font-size: var(--fs); font-weight: var(--file-btn-fw); white-space: nowrap;
  color: var(--file-btn-color);
  background: var(--file-btn-bg);
  transition: background var(--transition), color var(--transition);
}
@media (hover: hover) { .ui-file:hover .ui-file__btn { background: var(--file-btn-bg-hover); } }

.ui-file.is-dragover {
  --bc: var(--ui-accent); --bc-hover: var(--ui-accent);
  --bg: var(--ui-surface-soft);
  border-style: dashed;
}

.ui-file:has(.ui-file__field:disabled) {
  --bg: var(--bg-disabled); --bg-hover: var(--bg-disabled);
  --ph-color: var(--color-disabled); --ph-opacity: 1; --color: var(--color-disabled);
  cursor: not-allowed;
}
.ui-file__field:disabled { cursor: not-allowed; }

/* Hover: the colours fade slowly to their hover values and the letters open up a little */
.ui-btn {
  --w: auto;
  --h: 3.8rem;
  --px: 2rem;
  --radius: .8rem;
  --gap: .8rem;

  --font: inherit;
  --fs: 1.75rem;
  --fw: 400;
  --color: var(--ui-on-accent);
  --color-hover: var(--color);
  --color-active: var(--color-hover);
  --color-disabled: var(--ui-text-disabled);

  --bw: .1rem;
  --bs: solid;
  --bc: var(--bg);
  --bc-hover: var(--bc);
  --bc-active: var(--bc-hover);

  --bg: var(--ui-accent);
  --bg-hover: var(--ui-green-dark);
  --bg-active: color-mix(in srgb, var(--bg-hover) 85%, #000);
  --bg-disabled: var(--ui-surface-disabled);

  --hover-time: .6s;
  --ls: normal;
  --ls-hover: .1em;

  --ring-size: .3rem;
  --ring-color: var(--ui-accent-ring);
  --shadow: none;
  --shadow-hover: var(--shadow);
  --active-scale: .98;
  --transition: .15s ease;

  --icon-size: 1.8rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  width: var(--w);
  height: var(--h);
  padding: 0 var(--px);
  box-sizing: border-box;
  font-family: var(--font);
  font-size: var(--fs);
  font-weight: var(--fw);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color);
  background-color: var(--bg);
  border: var(--bw) var(--bs) var(--bc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  user-select: none;
  letter-spacing: var(--ls);
  transition: background-color var(--hover-time) ease, color var(--hover-time) ease, border-color var(--hover-time) ease,
              letter-spacing var(--hover-time) ease, box-shadow var(--transition), transform var(--transition);
}
.ui-btn:link, .ui-btn:visited { color: var(--color); }
.ui-btn:link, .ui-btn:visited, .ui-btn:active { text-decoration: none; }
@media (hover: hover) { .ui-btn:hover { text-decoration: none; } }
@media (hover: hover) { .ui-btn:hover { color: var(--color-hover); background-color: var(--bg-hover); border-color: var(--bc-hover); letter-spacing: var(--ls-hover); box-shadow: var(--shadow-hover); } }
.ui-btn:active { color: var(--color-active); background-color: var(--bg-active);
                 border-color: var(--bc-active); transform: scale(var(--active-scale)); }
.ui-btn:focus-visible { outline: 0; box-shadow: var(--shadow), 0 0 0 var(--ring-size) var(--ring-color); }

.ui-btn__icon { flex: none; display: inline-flex; width: var(--icon-size); height: var(--icon-size); }
.ui-btn__icon svg { width: 100%; height: 100%; }

.ui-btn:disabled, .ui-btn.is-disabled, .ui-btn[aria-disabled="true"] {
  --bg: var(--bg-disabled); --bg-hover: var(--bg-disabled); --bg-active: var(--bg-disabled);
  --color: var(--color-disabled); --bc: transparent; --bc-hover: transparent; --bc-active: transparent;
  cursor: not-allowed; transform: none; pointer-events: none;
}
.ui-btn.is-loading { pointer-events: none; color: transparent; position: relative; transition: none; }   /* the text goes at once, the spinner takes its place */
.ui-btn.is-loading::after {
  content: ""; position: absolute; width: 1.6em; height: 1.6em; border-radius: 50%;
  border: .2em solid color-mix(in srgb, var(--color) 40%, transparent); border-top-color: var(--color);
  animation: ui-spin .7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

.ui-btn--danger  { --bg: var(--ui-danger);  --bg-hover: color-mix(in srgb, var(--bg) 85%, #000); --ring-color: var(--ui-danger-ring); }
.ui-btn--success { --bg: var(--ui-success); --bg-hover: color-mix(in srgb, var(--bg) 85%, #000); --ring-color: var(--ui-success-ring); }

.ui-btn--outline { --bg: transparent; --color: var(--ui-color); --bc: var(--ui-bc);
                   --bg-hover: color-mix(in srgb, var(--ui-accent) 14%, transparent);
                   --bg-active: color-mix(in srgb, var(--ui-accent) 24%, transparent); }
.ui-btn--ghost   { --bg: transparent; --color: var(--ui-color); --bc: transparent;
                   --bg-hover: var(--ui-surface-soft); --bg-active: var(--ui-hover); }
.ui-btn--borderless { --bc: transparent; --bc-hover: transparent; --bc-active: transparent; }

.ui-btn--pill  { --radius: 99.9rem; }
.ui-btn--block { --w: 100%; display: flex; }
.ui-btn--icon  { --px: 0; --w: var(--h); }

.ui-btn--sm { --h: 3.2rem; --px: 1.4rem; --fs: 1.4rem; --radius: .6rem; --icon-size: 1.6rem; }
.ui-btn--lg { --h: 5.2rem; --px: 2.8rem; --fs: 2rem;   --radius: 1.2rem; --icon-size: 2.2rem; }

.ui-select, .ui-dropdown {
  --w: 100%;
  --h: 3.8rem;
  --px: 1.4rem;
  --radius: .8rem;

  --font: inherit;
  --fs: 1.75rem;
  --fw: 400;
  --color: var(--ui-color);
  --color-disabled: var(--ui-text-disabled);
  --ph-color: var(--ui-ph-color);
  --ph-opacity: var(--ui-ph-opacity);

  --bw: .1rem;
  --bs: solid;
  --bc: var(--ui-bc);
  --bc-hover: var(--ui-bc-hover);
  --bc-focus: var(--ui-bc-focus);

  --bg: var(--ui-bg);
  --bg-hover: var(--bg);
  --bg-focus: var(--bg);
  --bg-disabled: var(--ui-surface-disabled);

  --ring-size: .3rem;
  --ring-color: var(--ui-accent-ring);
  --shadow: none;
  --transition: .15s ease;

  --arrow-size: 1.6rem;
  --arrow-color: var(--ui-color);
  --arrow-gap: 1rem;

  --menu-bg: var(--ui-glass);
  --menu-bc: var(--ui-bc);
  --menu-bw: .1rem;
  --menu-radius: .8rem;
  --menu-shadow: 0 .7rem 2.8rem var(--ui-shadow);
  --menu-gap: .4rem;
  --menu-maxh: 24rem;
  --menu-pad: 0;
  --menu-offset: -.4rem;

  --item-h: 3.6rem;
  --item-px: 1.2rem;
  --item-radius: .6rem;
  --item-color: var(--color);
  --item-bg-hover: var(--ui-hover);
  --item-color-hover: var(--item-color);
  --item-bg-active: var(--ui-accent);
  --item-color-active: var(--ui-on-accent);

  position: relative;
  display: inline-block;
  width: var(--w);
}

.ui-select__field, .ui-dropdown__toggle {
  position: relative;
  display: block;
  width: 100%;
  height: var(--h);
  margin: 0;
  box-sizing: border-box;
  padding: 0 calc(var(--px) + var(--arrow-size) + var(--arrow-gap)) 0 var(--px);
  font-family: var(--font);
  font-size: var(--fs);
  font-weight: var(--fw);
  color: var(--color);
  text-align: left;
  background: var(--bg);
  border: var(--bw) var(--bs) var(--bc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  outline: 0;
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
@media (hover: hover) { .ui-select__field:hover, .ui-dropdown__toggle:hover { border-color: var(--bc-hover); background: var(--bg-hover); } }
.ui-select__field:focus, .ui-dropdown__toggle:focus,
.ui-dropdown.is-open .ui-dropdown__toggle {
  border-color: var(--bc-focus); background: var(--bg-focus);
  box-shadow: var(--shadow), 0 0 0 var(--ring-size) var(--ring-color);
}
.ui-select__field:invalid, .ui-dropdown__toggle.is-placeholder {
  color: color-mix(in srgb, var(--ph-color) calc(var(--ph-opacity) * 100%), transparent);
}
.ui-select__field option { color: var(--ui-text); }

.ui-select::after, .ui-dropdown__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--px);
  width: var(--arrow-size);
  height: var(--arrow-size);
  margin-top: calc(var(--arrow-size) / -2);
  background: var(--arrow-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  transition: transform var(--transition);
}
.ui-dropdown.is-open .ui-dropdown__toggle::after { transform: rotate(180deg); }

.ui-dropdown__toggle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ui-dropdown__menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + var(--menu-gap));
  left: 0;
  min-width: 100%;
  max-height: var(--menu-maxh);
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  padding: var(--menu-pad);
  list-style: none;
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: none;
  border-radius: var(--menu-radius);
  box-shadow: var(--menu-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--menu-offset));
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.ui-dropdown.is-open .ui-dropdown__menu { opacity: 1; visibility: visible; transform: none; }
.ui-dropdown--up .ui-dropdown__menu { top: auto; bottom: calc(100% + var(--menu-gap)); }
.ui-dropdown--right .ui-dropdown__menu { left: auto; right: 0; }

.ui-dropdown__item {
  display: flex;
  align-items: center;
  min-height: var(--item-h);
  padding: 0 var(--item-px);
  border-radius: var(--item-radius);
  font-size: var(--fs);
  color: var(--item-color);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
@media (hover: hover) { .ui-dropdown__item:hover { background: var(--item-bg-hover); color: var(--item-color-hover); } }
.ui-dropdown__item.is-active { background: var(--item-bg-active); color: var(--item-color-active); font-weight: 600; }
.ui-dropdown__item.is-disabled { color: var(--color-disabled); pointer-events: none; }
/* Optional icon */
.ui-dropdown { --icon-w: 2.4rem; --icon-h: 1.6rem; --icon-gap: 1rem; --icon-radius: .25rem; }
.ui-dropdown__item { gap: var(--icon-gap); }
.ui-dropdown__toggle.has-icon { display: flex; align-items: center; gap: var(--icon-gap); }
.ui-dropdown__icon { flex: none; display: inline-flex; width: var(--icon-w); height: var(--icon-h); border-radius: var(--icon-radius); overflow: hidden; }
.ui-dropdown__icon img, .ui-dropdown__icon svg { display: block; width: 100%; height: 100%; object-fit: cover; }

.ui-select__field:disabled, .ui-dropdown.is-disabled .ui-dropdown__toggle {
  background: var(--bg-disabled); color: var(--color-disabled); cursor: not-allowed;
}
.ui-select.is-error,   .ui-dropdown.is-error   { --bc:var(--ui-danger);  --bc-hover:var(--ui-danger);  --bc-focus:var(--ui-danger);  --ring-color:var(--ui-danger-ring); }
.ui-select.is-success, .ui-dropdown.is-success { --bc:var(--ui-success); --bc-hover:var(--ui-success); --bc-focus:var(--ui-success); --ring-color:var(--ui-success-ring); }

.ui-select--sm, .ui-dropdown--sm { --h: 3.2rem; --fs: 1.4rem; --px: 1rem; --radius: .6rem; --arrow-size: 1.4rem; --item-h: 3rem; }
.ui-select--lg, .ui-dropdown--lg { --h: 5.2rem; --fs: 2rem;   --px: 1.8rem; --radius: 1.2rem; --arrow-size: 1.8rem; --item-h: 4.4rem; }
.ui-select--borderless, .ui-dropdown--borderless { --bc: transparent; --bc-hover: transparent; --bc-focus: transparent; }
.ui-select--filled, .ui-dropdown--filled { --bg: var(--ui-surface-soft); --bc: transparent; --bc-hover: transparent; --bg-focus: var(--ui-surface); }
.ui-select--pill, .ui-dropdown--pill { --radius: 99.9rem; --px: 2rem; }
.ui-select--underline, .ui-dropdown--underline { --radius: 0; --px: .2rem; --ring-size: 0px; --bg: transparent; --bg-hover: transparent; --bg-focus: transparent; }
.ui-select--underline .ui-select__field,
.ui-dropdown--underline .ui-dropdown__toggle { border-width: 0 0 var(--bw) 0; }

.ui-check {
  --box-size: 2rem;
  --radius: .4rem;
  --gap: 1rem;

  --font: inherit;
  --fs: 1.75rem;
  --fw: 400;
  --color: var(--ui-green-dark);
  --color-disabled: var(--ui-text-disabled);

  --bw: .1rem;
  --bs: solid;
  --bc: var(--ui-bc);
  --bc-hover: var(--ui-bc-hover);
  --bc-focus: var(--ui-bc-focus);
  --bc-checked: var(--bg-checked);

  --bg: var(--ui-bg);
  --bg-checked: var(--ui-accent);
  --bg-disabled: var(--ui-surface-disabled);

  --check-color: var(--ui-on-accent);
  --check-scale: .72;
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --indeterminate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");

  --ring-size: .3rem;
  --ring-color: var(--ui-accent-ring);
  --transition: .15s ease;

  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--gap);
  font-family: var(--font);
  font-size: var(--fs);
  font-weight: var(--fw);
  line-height: 1.4;
  color: var(--color);
  cursor: pointer;
  user-select: none;
}

.ui-check__input {
  position: absolute; top: 0; left: 0;
  width: var(--box-size); height: var(--box-size);
  margin: 0; opacity: 0; cursor: inherit;
}

.ui-check__box {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: var(--box-size);
  height: var(--box-size);
  margin-top: calc((1.4em - var(--box-size)) / 2);   /* canh giữa với dòng chữ đầu tiên */
  background: var(--bg);
  border: var(--bw) var(--bs) var(--bc);
  border-radius: var(--radius);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.ui-check__box::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: calc(var(--box-size) * var(--check-scale));
  height: calc(var(--box-size) * var(--check-scale));
  background: var(--check-color);
  -webkit-mask: var(--check-icon) center / contain no-repeat;
          mask: var(--check-icon) center / contain no-repeat;
  transform: scale(0);
  transition: transform var(--transition);
}

.ui-check__text { min-width: 0; }
.ui-check__text a { color: var(--ui-accent); text-decoration: underline; }

@media (hover: hover) { .ui-check:hover .ui-check__box { border-color: var(--bc-hover); } }

.ui-check__input:checked + .ui-check__box,
.ui-check__input:indeterminate + .ui-check__box {
  background: var(--bg-checked);
  border-color: var(--bc-checked);
}
.ui-check__input:checked + .ui-check__box::after { transform: scale(1); }
.ui-check__input:indeterminate + .ui-check__box::after { --check-icon: var(--indeterminate-icon); transform: scale(1); }

.ui-check__input:focus-visible + .ui-check__box {
  border-color: var(--bc-focus);
  box-shadow: 0 0 0 var(--ring-size) var(--ring-color);
}

.ui-check.is-error {
  --bc: var(--ui-danger); --bc-hover: var(--ui-danger); --bc-focus: var(--ui-danger);
  --bg-checked: var(--ui-danger); --ring-color: var(--ui-danger-ring);
}
.ui-check.is-success {
  --bc: var(--ui-success); --bc-hover: var(--ui-success); --bc-focus: var(--ui-success);
  --bg-checked: var(--ui-success); --ring-color: var(--ui-success-ring);
}

.ui-check:has(.ui-check__input:disabled) { --color: var(--color-disabled); cursor: not-allowed; }
.ui-check__input:disabled + .ui-check__box { background: var(--bg-disabled); border-color: var(--bc); }
.ui-check__input:disabled:checked + .ui-check__box,
.ui-check__input:disabled:indeterminate + .ui-check__box { background: var(--color-disabled); border-color: transparent; }

.ui-check--sm { --box-size: 1.6rem; --fs: 1.4rem; --gap: .8rem; --radius: .3rem; }
.ui-check--lg { --box-size: 2.6rem; --fs: 2rem;   --gap: 1.2rem; --radius: .6rem; }

.ui-check--borderless { --bc: transparent; --bc-hover: transparent; --bc-focus: transparent; --bg: var(--ui-surface-soft); }
.ui-check--round   { --radius: 50%; }
.ui-check--radio   { --radius: 50%; --check-scale: .5;
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='black'/%3E%3C/svg%3E"); }
.ui-check--outline { --bg-checked: var(--ui-bg); --bc-checked: var(--ui-accent); --check-color: var(--ui-accent); }  /* nền trong suốt, chỉ viền + dấu check màu */

.ui-check-group { --gap: 1.2rem 2.4rem; display: flex; flex-wrap: wrap; gap: var(--gap); }
.ui-check-group--stack { flex-direction: column; align-items: flex-start; }

.ui-combo {
  --w: 100%;
  --h: 3.8rem;
  --px: 1.4rem;
  --radius: .8rem;

  --font: inherit;
  --fs: 1.75rem;
  --fw: 400;
  --color: var(--ui-color);
  --color-disabled: var(--ui-text-disabled);
  --ph-color: var(--ui-ph-color);
  --ph-opacity: var(--ui-ph-opacity);

  --bw: .1rem;
  --bs: solid;
  --bc: var(--ui-bc);
  --bc-hover: var(--ui-bc-hover);
  --bc-focus: var(--ui-bc-focus);

  --bg: var(--ui-bg);
  --bg-hover: var(--bg);
  --bg-focus: var(--bg);
  --bg-disabled: var(--ui-surface-disabled);

  --ring-size: .3rem;
  --ring-color: var(--ui-accent-ring);
  --shadow: none;
  --transition: .15s ease;

  --arrow-size: 1.6rem;
  --arrow-color: var(--ui-color);
  --arrow-gap: 1rem;

  --flag-size: 2.2rem;
  --flag-gap: .8rem;

  --menu-bg: var(--ui-glass);
  --menu-bc: var(--ui-bc);
  --menu-bw: .1rem;
  --menu-radius: .8rem;
  --menu-shadow: 0 .7rem 2.8rem var(--ui-shadow);
  --menu-gap: .4rem;
  --menu-maxh: 24rem;
  --menu-pad: .4rem;
  --menu-offset: -.4rem;

  --item-h: 3.6rem;
  --item-px: 1.2rem;
  --item-gap: 1.2rem;
  --item-radius: .6rem;
  --item-color: var(--color);
  --item-bg-hover: var(--ui-hover);
  --item-color-hover: var(--item-color);
  --item-bg-active: var(--ui-accent);
  --item-color-active: var(--ui-on-accent);

  --icon-size: 2.2rem;
  --icon-radius: .25rem;

  position: relative;
  display: inline-block;
  width: var(--w);
}

.ui-combo__field {
  display: block;
  width: 100%;
  height: var(--h);
  margin: 0;
  box-sizing: border-box;
  padding: 0 calc(var(--px) + var(--arrow-size) + var(--arrow-gap)) 0 var(--px);
  font-family: var(--font);
  font-size: var(--fs);
  font-weight: var(--fw);
  color: var(--color);
  background: var(--bg);
  border: var(--bw) var(--bs) var(--bc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  outline: 0;
  cursor: text;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.ui-combo__field::placeholder { color: var(--ph-color); opacity: var(--ph-opacity); }
@media (hover: hover) { .ui-combo__field:hover { border-color: var(--bc-hover); background: var(--bg-hover); } }
.ui-combo__field:focus,
.ui-combo.is-open .ui-combo__field {
  border-color: var(--bc-focus); background: var(--bg-focus);
  box-shadow: var(--shadow), 0 0 0 var(--ring-size) var(--ring-color);
}

.ui-combo__flag {
  display: none;
  position: absolute;
  right: calc(var(--px) + var(--arrow-size) + var(--arrow-gap));
  top: calc(var(--h) / 2);
  width: calc(var(--flag-size) * 1.5);
  height: var(--flag-size);
  margin-top: calc(var(--flag-size) / -2);
  border-radius: var(--icon-radius);
  overflow: hidden;
  pointer-events: none;
}
.ui-combo.has-flag .ui-combo__flag { display: inline-flex; }
.ui-combo.has-flag .ui-combo__field {
  padding-right: calc(var(--px) + var(--arrow-size) + var(--arrow-gap) + var(--flag-size) + var(--flag-gap));
}
.ui-combo__flag img, .ui-combo__flag svg { width: 100%; height: 100%; object-fit: cover; }

.ui-combo::after {
  content: "";
  position: absolute;
  top: calc(var(--h) / 2);
  right: var(--px);
  width: var(--arrow-size);
  height: var(--arrow-size);
  margin-top: calc(var(--arrow-size) / -2);
  background: var(--arrow-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  transition: transform var(--transition);
}
.ui-combo.is-open::after { transform: rotate(180deg); }

.ui-combo__menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + var(--menu-gap));
  left: 0;
  min-width: 100%;
  max-height: var(--menu-maxh);
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  padding: var(--menu-pad);
  list-style: none;
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: none;
  border-radius: var(--menu-radius);
  box-shadow: var(--menu-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--menu-offset));
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.ui-combo.is-open .ui-combo__menu { opacity: 1; visibility: visible; transform: none; }
.ui-combo.is-empty .ui-combo__menu { min-height: var(--item-h); }   /* không có kết quả => ô trống */
.ui-combo--up .ui-combo__menu { top: auto; bottom: calc(100% + var(--menu-gap)); }
.ui-combo--right .ui-combo__menu { left: auto; right: 0; }

.ui-combo__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--item-gap);
  min-height: var(--item-h);
  padding: 0 var(--item-px);
  border-radius: var(--item-radius);
  font-size: var(--fs);
  color: var(--item-color);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.ui-combo__item[hidden] { display: none; }
.ui-combo__item.is-focus { background: var(--item-bg-hover); color: var(--item-color-hover); }
@media (hover: hover) { .ui-combo__item:hover { background: var(--item-bg-hover); color: var(--item-color-hover); } }
.ui-combo__item.is-active { background: var(--item-bg-active); color: var(--item-color-active); font-weight: 600; }
.ui-combo__item.is-disabled { color: var(--color-disabled); pointer-events: none; }

.ui-combo__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-combo__icon {
  flex: none; display: inline-flex;
  width: calc(var(--icon-size) * 1.5); height: var(--icon-size);
  border-radius: var(--icon-radius); overflow: hidden;
  background: var(--ui-surface-soft);
}
.ui-combo__icon img, .ui-combo__icon svg { width: 100%; height: 100%; object-fit: cover; }

.ui-combo.is-disabled .ui-combo__field,
.ui-combo:has(.ui-combo__field:disabled) .ui-combo__field {
  background: var(--bg-disabled); color: var(--color-disabled); cursor: not-allowed;
}
.ui-combo.is-error   { --bc:var(--ui-danger);  --bc-hover:var(--ui-danger);  --bc-focus:var(--ui-danger);  --ring-color:var(--ui-danger-ring); }
.ui-combo.is-success { --bc:var(--ui-success); --bc-hover:var(--ui-success); --bc-focus:var(--ui-success); --ring-color:var(--ui-success-ring); }

.ui-combo--sm { --h: 3.2rem; --fs: 1.4rem; --px: 1rem; --radius: .6rem; --arrow-size: 1.4rem; --item-h: 3rem; --icon-size: 2rem; --flag-size: 1.8rem; }
.ui-combo--lg { --h: 5.2rem; --fs: 2rem; --px: 1.8rem; --radius: 1.2rem; --arrow-size: 1.8rem; --item-h: 4.4rem; --icon-size: 2.8rem; --flag-size: 2.6rem; }
.ui-combo--borderless { --bc: transparent; --bc-hover: transparent; --bc-focus: transparent; }
.ui-combo--filled { --bg: var(--ui-surface-soft); --bc: transparent; --bc-hover: transparent; --bg-focus: var(--ui-surface); }
.ui-combo--pill { --radius: 99.9rem; --px: 2rem; }

.cal {
  --fs: var(--cal-fs, 1.4rem);

  --color: var(--ui-text);
  --color-muted: var(--ui-text-muted);
  --bc: var(--ui-bc);
  --bw: calc(var(--fs) * 0.06);
  --px: 1.4rem;

  --title-fs:   calc(var(--fs) * 1.3);
  --title-fw:   400;
  --weekday-fs: calc(var(--fs) * 0.85);
  --weekday-fw: 400;
  --day-fs:     var(--fs);
  --day-fw:     500;
  --day-fw-selected: 700;
  --day-ratio:  1.4;
  --day-radius: calc(var(--fs) * 0.6);
  --day-color:  var(--ui-green-dark);
  --day-bg:     var(--ui-surface-soft);
  --day-bg-hover: var(--ui-hover);
  --day-color-selected: var(--ui-on-accent);
  --day-bg-selected:    var(--ui-accent);
  --day-color-disabled: var(--ui-text-disabled);
  --day-bg-disabled:    var(--ui-surface-disabled);

  --col-gap:     calc(var(--fs) * 0.6);
  --row-gap:     calc(var(--fs) * 0.55);
  --header-gap:  calc(var(--fs) * 1.4);
  --weekday-gap: calc(var(--fs) * 1.1);

  /* Month arrows */
  --nav-size:        calc(var(--fs) * 2.5);
  --nav-icon-size:   calc(var(--fs) * 0.8);
  --nav-radius:      .8rem;
  --nav-bg:          var(--ui-surface-soft);
  --nav-bg-hover:    var(--ui-accent);
  --nav-bc:          var(--ui-bc);
  --nav-color:       var(--ui-accent);
  --nav-color-hover: var(--ui-on-accent);

  --popup-w: 100%;
  --popup-min-w: calc(var(--fs) * 26);
  --popup-gap: calc(var(--fs) * 0.6);
  --popup-pad: calc(var(--fs) * 1.5);
  --popup-bg: var(--cal-popup-bg, var(--ui-surface));
  --popup-radius: var(--cal-popup-radius, 0.8rem);
  --popup-shadow: 0 calc(var(--fs) * .5) calc(var(--fs) * 2) var(--ui-shadow);

  --input-w: 100%;
  --input-h: auto;
  --input-px: calc(var(--input-fs) * 1.1);
  --input-py: 0;
  --input-fs: var(--cal-input-fs, 1.6rem);
  --input-radius: var(--cal-input-radius, 0.8rem);
  --input-color: var(--cal-input-color, var(--ui-color));
  --input-bg: var(--cal-input-bg, var(--ui-bg));
  --input-bc: var(--cal-input-bc, var(--ui-bc));
  --input-bc-hover: var(--cal-input-bc-hover, var(--ui-bc-hover));
  --input-bc-focus: var(--cal-input-bc-focus, var(--ui-bc-focus));
  --input-ph-color: var(--ui-ph-color);
  --input-ph-opacity: var(--ui-ph-opacity);

  --arrow-size: var(--cal-arrow-size, calc(var(--input-fs) * 0.9));
  --arrow-color: var(--cal-arrow-color, var(--input-color));

  position: relative;
  width: 100%;
  font-family: inherit;
  color: var(--color);
}

.cal .flatpickr-calendar,
.cal .flatpickr-calendar *,
.cal .cal-input { font-family: inherit; }

.cal .flatpickr-calendar {
  width: 100%;
  line-height: 1.2;
  max-width: none;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: var(--day-fs);
}
.cal .flatpickr-calendar.inline { top: 0; }
.cal .flatpickr-calendar:before,
.cal .flatpickr-calendar:after { display: none; }
.cal .flatpickr-months { display: flex; align-items: center; margin-bottom: var(--header-gap); }
.cal .flatpickr-months .flatpickr-prev-month,
.cal .flatpickr-months .flatpickr-next-month {
  position: static; flex: none;
  width: var(--nav-size); height: var(--nav-size); padding: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: var(--bw) solid var(--nav-bc); border-radius: var(--nav-radius);
  background: var(--nav-bg); color: var(--nav-color);
  transition: background .15s, color .15s;
}
@media (hover: hover) { .cal .flatpickr-months .flatpickr-prev-month:hover, .cal .flatpickr-months .flatpickr-next-month:hover { background: var(--nav-bg-hover); color: var(--nav-color-hover); } }
.cal .flatpickr-months .flatpickr-prev-month svg,
.cal .flatpickr-months .flatpickr-next-month svg { width: var(--nav-icon-size); height: var(--nav-icon-size); fill: currentColor; }
.cal .flatpickr-months .flatpickr-month { flex: 1; height: auto; overflow: visible; color: var(--color); }
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.cal .flatpickr-current-month {
  position: static; width: 100%; height: auto; padding: 0;
  font-size: var(--title-fs); font-weight: var(--title-fw); line-height: 1.2;
  display: flex; justify-content: center; align-items: center; gap: .3em;
}
.cal .flatpickr-current-month span.cur-month { margin: 0; font-weight: var(--title-fw); text-transform: capitalize; }
@media (hover: hover) { .cal .flatpickr-current-month span.cur-month:hover { background: none; } }
.cal .flatpickr-current-month .numInputWrapper { width: 4ch; }
.cal .flatpickr-current-month input.cur-year { font-size: inherit; font-weight: var(--title-fw); padding: 0; height: auto; }
.cal .numInputWrapper span { display: none; }
.cal .flatpickr-innerContainer,
.cal .flatpickr-rContainer,
.cal .flatpickr-days { display: block; width: 100%; }
.cal .flatpickr-weekdays { height: auto; width: 100%; margin-bottom: var(--weekday-gap); }
.cal .flatpickr-weekdaycontainer {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--col-gap);
}
.cal .flatpickr-weekdays span.flatpickr-weekday {
  font-size: var(--weekday-fs); font-weight: var(--weekday-fw); line-height: 1.2; color: var(--color-muted);
}
.cal .dayContainer {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--col-gap); row-gap: var(--row-gap);
  box-sizing: border-box;
  width: 100%; min-width: 100%; max-width: 100%; padding: 0;
}
.cal .flatpickr-day {
  width: auto; min-width: 0; max-width: none; height: auto; flex-basis: auto; margin: 0;
  aspect-ratio: var(--day-ratio);
  display: flex; align-items: center; justify-content: center;
  padding: 0; box-sizing: border-box;
  border: 0; border-radius: var(--day-radius);
  font-size: var(--day-fs); font-weight: var(--day-fw); line-height: 1.2; color: var(--day-color);
  background: var(--day-bg);
  transition: background .15s;
}
@media (hover: hover) { .cal .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected) {
  background: var(--day-bg-hover); border: 0;
} }
.cal .flatpickr-day.today { font-weight: var(--day-fw-selected); border: 0; }
.cal .flatpickr-day.selected {
  background: var(--day-bg-selected); color: var(--day-color-selected); font-weight: var(--day-fw-selected); box-shadow: none;
}
@media (hover: hover) { .cal .flatpickr-day.selected:hover {
  background: var(--day-bg-selected); color: var(--day-color-selected); font-weight: var(--day-fw-selected); box-shadow: none;
} }
/* Range mode (data-cal-days) */
.cal .flatpickr-day.inRange,
.cal .flatpickr-day.inRange:hover {
  background: var(--day-bg-selected); color: var(--day-color-selected); font-weight: var(--day-fw-selected);
  border: 0; border-radius: var(--day-radius); box-shadow: none;
}
.cal .flatpickr-day.selected.startRange, .cal .flatpickr-day.selected.endRange { border-radius: var(--day-radius); box-shadow: none; }
.cal .flatpickr-day.flatpickr-disabled {
  background: var(--day-bg-disabled); color: var(--day-color-disabled); cursor: not-allowed;
}
@media (hover: hover) { .cal .flatpickr-day.flatpickr-disabled:hover {
  background: var(--day-bg-disabled); color: var(--day-color-disabled); cursor: not-allowed;
} }
.cal .flatpickr-day.prevMonthDay, .cal .flatpickr-day.nextMonthDay {
  background: transparent; color: transparent; pointer-events: none; box-shadow: none;
}
@media (hover: hover) { .cal .flatpickr-day.prevMonthDay:hover, .cal .flatpickr-day.nextMonthDay:hover {
  background: transparent; color: transparent; pointer-events: none; box-shadow: none;
} }
.cal--inline > input { display: none !important; }
.cal--popup .flatpickr-wrapper { position: relative; display: block; width: var(--input-w); }

.cal--popup .flatpickr-wrapper::after {
  content: "";
  position: absolute; top: 50%; right: var(--px);
  width: var(--arrow-size); height: var(--arrow-size);
  background: var(--arrow-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .25s ease;
  pointer-events: none;
}
.cal--popup .flatpickr-wrapper:has(.cal-input.active, .flatpickr-calendar.open)::after {
  transform: translateY(-50%) rotate(180deg);
}
.cal--popup .cal-input {
  display: block; width: 100%; height: var(--input-h); box-sizing: border-box;
  padding: var(--input-py) calc(var(--px) + var(--arrow-size)) var(--input-py) var(--px);
  font: inherit; font-size: var(--input-fs); line-height: 1.2; color: var(--input-color);
  background: var(--input-bg); border: var(--bw) solid var(--input-bc); border-radius: var(--input-radius);
  cursor: pointer; outline: 0;
}
.cal--popup .cal-input::placeholder { color: var(--input-ph-color); opacity: var(--input-ph-opacity); }
@media (hover: hover) { .cal--popup .cal-input:hover { border-color: var(--input-bc-hover); } }
.cal--popup .cal-input:focus,
.cal--popup .cal-input:focus-visible,
.cal--popup .cal-input.active {
  border-color: var(--input-bc-focus) !important;
  background: var(--input-bg) !important;
  color: var(--input-color) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.cal--popup .flatpickr-calendar.static {
  width: var(--popup-w);
  min-width: var(--popup-min-w);
  z-index: 99;
  padding: var(--popup-pad);
  background: var(--popup-bg);
  border-radius: var(--popup-radius);
  box-shadow: var(--popup-shadow);
}
.cal--popup .flatpickr-calendar.static {
  top: calc(100% + var(--popup-gap)); bottom: auto; left: 0; right: auto;
}
.cal--popup.cal--top .flatpickr-calendar.static {
  top: auto; bottom: calc(100% + var(--popup-gap));
}
.cal--popup.cal--align-end .flatpickr-calendar.static { left: auto; right: 0; }
.cal--borderless { --input-bc: transparent; --input-bc-hover: transparent; --input-bc-focus: transparent; }

.ui-popup {
  --w: 90rem;
  --maxw: calc(100vw - 4rem);
  --pad: 2.4rem;
  --radius: 1.2rem;
  --offset: 2rem;
  --z: var(--z-curtain, 1000);

  --bg: var(--ui-surface);
  --bw: .1rem;
  --bc: transparent;
  --shadow: 0 1.2rem 4rem var(--ui-shadow);

  --overlay-bg: color-mix(in srgb, var(--ui-green-deep) 55%, transparent);
  --overlay-blur: .4rem;

  --close-size: 5rem;
  --close-icon-size: 2.5rem;
  --close-top: 1.2rem;
  --close-right: 1.2rem;
  --close-color: var(--ui-green-dark);
  --close-bg: transparent;
  --close-bg-hover: var(--ui-gold);
  --close-radius: 50%;
  --close-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");

  --transition: .25s ease;

  position: fixed;
  inset: 0;
  z-index: var(--z);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: var(--offset);
  padding-right: calc(var(--offset) + var(--sbw, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--overlay-bg);
  -webkit-backdrop-filter: blur(var(--overlay-blur));
  backdrop-filter: blur(var(--overlay-blur));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.ui-popup.is-open { opacity: 1; visibility: visible; }

.ui-popup__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(var(--w), var(--maxw));
  margin: auto;
  box-sizing: border-box;
  background: var(--bg);
  border: var(--bw) solid var(--bc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  outline: 0;
  transform: translateY(var(--offset)) scale(.98);
  transition: transform var(--transition);
}
.ui-popup.is-open .ui-popup__dialog { transform: none; }

.ui-popup__content {
  padding: var(--pad);
  border-radius: inherit;
}

.ui-popup__close {
  position: absolute;
  top: var(--close-top);
  right: var(--close-right);
  z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--close-size); height: var(--close-size);
  margin: 0; padding: 0; border: 0; border-radius: var(--close-radius);
  background: var(--close-bg);
  color: var(--close-color);
  cursor: pointer;
  transition: background var(--transition);
}
.ui-popup__close::before {
  content: "";
  width: var(--close-icon-size); height: var(--close-icon-size);
  background: currentColor;
  -webkit-mask: var(--close-icon) center / contain no-repeat;
          mask: var(--close-icon) center / contain no-repeat;
}
@media (hover: hover) { .ui-popup__close:hover { background: var(--close-bg-hover); } }
.ui-popup__close:focus-visible { outline: .2rem solid currentColor; outline-offset: .2rem; }

.ui-popup__result { display: none; outline: 0; }
.ui-popup.is-result .ui-popup__result { display: block; }

.ui-popup.is-result .ui-popup__content > :not(.ui-popup__result):not(.ui-popup__keep) { display: none; }

html.has-popup { overflow: hidden; }

/* ---------------------------------------------------------
   Stepper: − [ n ] + for a number (guests, quantities)
   <div class="ui-stepper">
     <button type="button" class="ui-stepper__btn" data-step="-1" aria-label="−"><svg>…</svg></button>
     <input class="ui-stepper__field" type="text" inputmode="numeric" name="…" value="1" data-min="0" data-max="10">
     <button type="button" class="ui-stepper__btn" data-step="1" aria-label="+"><svg>…</svg></button>
   </div>
   The buttons hold an icon (stroke = currentColor), sized by --icon-size.
   Same box as .ui-input (height, radius, border, focus ring); components-custom.js keeps the value in
   min..max and disables the button at either end. Modifiers: --sm, --lg, --pill, --filled.
   --------------------------------------------------------- */
.ui-stepper {
  --w: 100%;
  --h: 3.8rem;
  --radius: .8rem;
  --fs: 1.75rem;
  --fw: 400;
  --btn-w: var(--h);
  --color: var(--ui-color);
  --bg: var(--ui-bg);
  --bw: .1rem;
  --bc: var(--ui-bc);
  --bc-hover: var(--ui-bc-hover);
  --bc-focus: var(--ui-bc-focus);
  --btn-color: var(--ui-accent);
  --btn-bg: var(--ui-surface-soft);
  --btn-bg-hover: var(--ui-hover);
  --icon-size: calc(var(--fs) * .8);
  --ring-size: .3rem;
  --ring-color: var(--ui-accent-ring);
  --transition: .15s ease;

  display: inline-flex;
  align-items: stretch;
  width: var(--w);
  height: var(--h);
  box-sizing: border-box;
  background: var(--bg);
  border: var(--bw) solid var(--bc);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
@media (hover: hover) { .ui-stepper:hover { border-color: var(--bc-hover); } }
.ui-stepper:focus-within { border-color: var(--bc-focus); box-shadow: 0 0 0 var(--ring-size) var(--ring-color); }
.ui-stepper__btn {
  flex: none;
  display: flex; justify-content: center; align-items: center;
  width: var(--btn-w);
  padding: 0; border: 0;
  background: var(--btn-bg);
  color: var(--btn-color);
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition);
}
.ui-stepper__btn svg { width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (hover: hover) { .ui-stepper__btn:hover:not(:disabled) { background: var(--btn-bg-hover); } }
.ui-stepper__btn:disabled { opacity: .45; cursor: not-allowed; }
.ui-stepper__field {
  flex: 1; width: 0; min-width: 0;   /* width 0: no intrinsic input width, so the stepper can be narrow */
  padding: 0; margin: 0; border: 0; outline: 0;
  background: transparent;
  font: inherit; font-size: var(--fs); font-weight: var(--fw);
  color: var(--color);
  text-align: center;
}
.ui-stepper--sm     { --h: 3.2rem; --fs: 1.4rem; --radius: .6rem; }
.ui-stepper--lg     { --h: 5.2rem; --fs: 2rem;   --radius: 1.2rem; }
.ui-stepper--pill   { --radius: 99.9rem; }
.ui-stepper--filled { --bg: var(--ui-surface-soft); --btn-bg: var(--ui-surface); --bc: transparent; }

@media only screen and (max-width: 1024px) {
  .ui-input {
    --h: 38px; --px: 14px; --radius: 8px; --gap: 10px; --fs: 17.5px;
    --bw: 1px; --ring-size: 3px; --icon-size: 18px;
    --close-top: 8px; --close-right: 8px;
  }
  .ui-input--sm        { --h: 32px; --fs: 14px; --px: 10px; --radius: 6px; }
  .ui-input--lg        { --h: 52px; --fs: 20px; --px: 18px; --radius: 12px; }
  .ui-input--underline { --px: 2px; --ring-size: 0px; }
  .ui-input--pill      { --radius: 999px; --px: 20px; }
  .ui-input-group      { --h: 38px; --radius: 8px; }
  .ui-input--multiline { --h: 120px; padding-top: 10px; padding-bottom: 10px; }

  .ui-btn {
    --h: 38px; --px: 20px; --radius: 8px; --gap: 8px; --fs: 17.5px;
    --bw: 1px; --ring-size: 3px; --icon-size: 18px;
  }
  .ui-btn--sm   { --h: 32px; --px: 14px; --fs: 14px; --radius: 6px; --icon-size: 16px; }
  .ui-btn--lg   { --h: 52px; --px: 28px; --fs: 20px; --radius: 12px; --icon-size: 22px; }
  .ui-btn--pill { --radius: 999px; }
  .ui-btn--icon { --px: 0; }

  .ui-select, .ui-dropdown {
    --h: 38px; --px: 14px; --radius: 8px; --fs: 17.5px;
    --bw: 1px; --ring-size: 3px;
    --arrow-size: 16px; --arrow-gap: 10px;
    --menu-bw: 1px; --menu-radius: 8px; --menu-gap: 4px; --menu-maxh: 240px; --menu-pad: 0; --menu-offset: -4px;
    --menu-shadow: 0 8px 32px var(--ui-shadow);
    --item-h: 36px; --item-px: 12px; --item-radius: 6px;
  }
  .ui-dropdown { --icon-w: 24px; --icon-h: 16px; --icon-gap: 10px; --icon-radius: 3px; }
  .ui-select--sm, .ui-dropdown--sm { --h: 32px; --fs: 14px; --px: 10px; --radius: 6px; --arrow-size: 14px; --item-h: 30px; }
  .ui-select--lg, .ui-dropdown--lg { --h: 52px; --fs: 20px; --px: 18px; --radius: 12px; --arrow-size: 18px; --item-h: 44px; }
  .ui-select--pill, .ui-dropdown--pill { --radius: 999px; --px: 20px; }
  .ui-select--underline, .ui-dropdown--underline { --radius: 0; --px: 2px; --ring-size: 0px; }

  .ui-check { --box-size: 20px; --radius: 4px; --gap: 10px; --fs: 17.5px; --bw: 1px; --ring-size: 3px; }
  .ui-check--sm { --box-size: 16px; --fs: 14px; --gap: 8px; --radius: 3px; }
  .ui-check--lg { --box-size: 26px; --fs: 20px; --gap: 12px; --radius: 6px; }
  .ui-check--round, .ui-check--radio { --radius: 50%; }     /* đặt cuối để không bị đè bởi --radius: 4px */
  .ui-check-group { --gap: 12px 24px; }

  .ui-combo {
    --h: 38px; --px: 14px; --radius: 8px; --fs: 17.5px;
    --bw: 1px; --ring-size: 3px;
    --arrow-size: 16px; --arrow-gap: 10px;
    --flag-size: 22px; --flag-gap: 8px;
    --menu-bw: 1px; --menu-radius: 8px; --menu-gap: 4px; --menu-maxh: 240px; --menu-pad: 4px; --menu-offset: -4px;
    --menu-shadow: 0 8px 32px var(--ui-shadow);
    --item-h: 36px; --item-px: 12px; --item-gap: 12px; --item-radius: 6px;
    --icon-size: 24px; --icon-radius: 6px;
  }
  .ui-combo--sm   { --h: 32px; --fs: 14px; --px: 10px; --radius: 6px; --arrow-size: 14px; --item-h: 30px; --icon-size: 20px; --flag-size: 18px; }
  .ui-combo--lg   { --h: 52px; --fs: 20px; --px: 18px; --radius: 12px; --arrow-size: 18px; --item-h: 44px; --icon-size: 28px; --flag-size: 26px; }
  .ui-combo--pill { --radius: 999px; --px: 20px; }

  .cal {
    --fs: var(--cal-fs-sm, 16px);
    --input-fs: var(--cal-input-fs-sm, 16px);
    --input-radius: var(--cal-input-radius-sm, 8px);
    --popup-radius: var(--cal-popup-radius-sm, 8px);
    --nav-radius: 8px;
    --px: 14px;
  }

  .ui-stepper     { --h: 38px; --radius: 8px; --fs: 17.5px; --bw: 1px; --ring-size: 3px; }
  .ui-stepper--sm { --h: 32px; --fs: 14px; --radius: 6px; }
  .ui-stepper--lg { --h: 52px; --fs: 20px; --radius: 12px; }
  .ui-stepper--pill { --radius: 999px; }

  .ui-popup {
    --w: 100%; --maxw: calc(100vw - 32px);
    --pad: 20px; --radius: 12px; --offset: 16px; --bw: 1px;
    --close-size: 32px; --close-icon-size: 16px; --close-top: 8px; --close-right: 8px;
    --overlay-blur: 4px;
    --shadow: 0 12px 40px var(--ui-shadow);
  }
}
/* Form being submitted (core.js setFormLoading) */
form.is-loading { cursor: progress; }