/*
 * DISC™ reusable Apple-style input boxes.
 *
 * Components (put ONE class on the field's wrapper element):
 *   .disctm-text-input-box                  full-width text box
 *   .disctm-text-input-box-half-length      half-width text box (two per row, 14px gutter)
 *   .disctm-dropdown-input-box              full-width dropdown (2× half length)
 *   .disctm-dropdown-input-box-half-length  half-width dropdown
 *   .disctm-plain-input-box                 modifier ADDED to a text box whose
 *                                           label sits OUTSIDE the box (page
 *                                           heading); no floating label, so
 *                                           the text centers vertically
 *
 * Every metric below was measured on 2026-07-31 from Apple's live checkout
 * (secure9.store.apple.com/shop/checkout — .form-textbox / .form-dropdown):
 * 56px box, 12px radius, 1px #86868b border, rgba(255,255,255,0.8) fill,
 * padding 18/16/0 (dropdown right 40), a 17px resting label, a 12px label
 * at top 10px, a 0.125s ease-in state transition, 2px #0071e3 focus border,
 * and a 25px chevron at top 14px right 11px. Typography is deliberately
 * supplied by Additional CSS's .typography-body and .typography-caption
 * utilities, including their shared font family. The checkout-only line height
 * is 1.2353641176 (17px / 21px), remeasured on 2026-09-17 and approved by
 * Eric. Floating captions retain the shared caption line height. Colors consume the shared
 * form-control tokens; invalid state resolves to DISC's D red instead of
 * Apple's #e30000.
 *
 * Generic markup contract (any DISC checkout form):
 *   <form class="disctm-checkout-input-boxes">
 *     <div class="disctm-input-box-row disctm-text-input-box typography-body">
 *       <label for="x"><span class="disctm-input-box-label-copy typography-body">Tên</span></label>
 *       <span class="typography-body"><input class="typography-body" id="x" type="text" placeholder=" "></span>
 *     </div>
 *   </form>
 * JavaScript toggles the label-copy span between .typography-body and
 * .typography-caption. Dropdown rows use the existing dropdown variants.
 * Rules: text inputs need placeholder=" " (single space) so CSS can detect
 * emptiness; a dropdown's placeholder option must use value="". The label
 * floats via :has(); pages may also toggle .disctm-input-box--float on the
 * wrapper from JS as a fallback, and .disctm-input-box--invalid or
 * aria-invalid="true" marks the invalid state. The chevron is drawn by the
 * wrapper's ::after, so dropdown wrappers need no extra markup.
 *
 * WooCommerce contract (checkout adapter at the end of this file): add the
 * .disctm-checkout-input-boxes opt-in class to the checkout form, then add
 * the component class plus .disctm-input-box-row to each .form-row; the
 * row's <label> and .woocommerce-input-wrapper input/select/select2 are
 * styled automatically, including WooCommerce's invalid state.
 */

.disctm-checkout-input-boxes,
.disctm-text-input-box,
.disctm-text-input-box-half-length,
.disctm-dropdown-input-box,
.disctm-dropdown-input-box-half-length {
  --disctm-input-box-height: 56px;
  --disctm-input-box-radius: 12px;
  --disctm-input-box-border: var(--disctm-color-form-control-border, #86868b);
  --disctm-input-box-border-disabled: var(--disctm-color-form-control-border-disabled, rgba(134, 134, 139, 0.42));
  --disctm-input-box-fill: var(--disctm-color-form-control-background, rgba(255, 255, 255, 0.8));
  --disctm-input-box-fill-disabled: var(--disctm-color-form-control-background-disabled, rgba(0, 0, 0, 0.01));
  --disctm-input-box-fill-invalid: var(--disctm-color-form-control-background-invalid, #fff2f4);
  --disctm-input-box-ink: var(--disctm-color-primary-text, #1d1d1f);
  --disctm-input-box-muted: var(--disctm-color-gray-secondary-text, #6e6e73);
  --disctm-input-box-focus: var(--disctm-color-accent, #0071e3);
  --disctm-input-box-invalid: var(--disctm-color-form-control-invalid, var(--disctm-color-d-red, #da251d));
  --disctm-focus-ring-width: 2px;
  --disctm-focus-ring-offset: 3px;
  --disctm-focus-ring-color: var(--disctm-color-accent, #0071e3);
}

.disctm-text-input-box,
.disctm-text-input-box-half-length,
.disctm-dropdown-input-box,
.disctm-dropdown-input-box-half-length {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
}

/* The row and WooCommerce input wrapper carry Additional CSS's canonical
   body typography. Controls inherit those computed values so theme input
   selectors cannot partially override the utility class, including its
   line height for entered text and wrapping field content. */
.disctm-input-box-row.typography-body > input.typography-body,
.disctm-input-box-row.typography-body > textarea.typography-body,
.disctm-input-box-row.typography-body > select.typography-body,
.disctm-input-box-row.typography-body .woocommerce-input-wrapper.typography-body input.typography-body,
.disctm-input-box-row.typography-body .woocommerce-input-wrapper.typography-body textarea.typography-body,
.disctm-input-box-row.typography-body .woocommerce-input-wrapper.typography-body select.typography-body,
.disctm-input-box-row.typography-body .woocommerce-input-wrapper.typography-body .select2-container,
.disctm-input-box-row.typography-body .woocommerce-input-wrapper.typography-body .select2-selection,
.disctm-input-box-row.typography-body .woocommerce-input-wrapper.typography-body .select2-selection__rendered {
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

.disctm-text-input-box-half-length,
.disctm-dropdown-input-box-half-length {
  width: calc(50% - 7px); /* Apple pairs half fields with a 14px gutter */
}

/* ---------------------------------------------------------------- fields */

.disctm-text-input-box > input,
.disctm-text-input-box > textarea,
.disctm-text-input-box-half-length > input,
.disctm-text-input-box-half-length > textarea,
.disctm-dropdown-input-box > select,
.disctm-dropdown-input-box-half-length > select,
.disctm-text-input-box .woocommerce-input-wrapper input.input-text,
.disctm-text-input-box .woocommerce-input-wrapper textarea.input-text,
.disctm-text-input-box-half-length .woocommerce-input-wrapper input.input-text,
.disctm-text-input-box-half-length .woocommerce-input-wrapper textarea.input-text,
.disctm-dropdown-input-box .woocommerce-input-wrapper select:not(.select2-hidden-accessible),
.disctm-dropdown-input-box-half-length .woocommerce-input-wrapper select:not(.select2-hidden-accessible) {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--disctm-input-box-height);
  min-height: var(--disctm-input-box-height);
  margin: 0;
  padding: 18px 16px 0;
  border: 1px solid var(--disctm-input-box-border);
  border-radius: var(--disctm-input-box-radius);
  outline: none;
  background-color: var(--disctm-input-box-fill);
  box-shadow: none;
  color: var(--disctm-input-box-ink);
  text-overflow: ellipsis;
  transition: border-color 0.125s ease-in, border-width 0.125s ease-in, background-color 0.125s ease-in, padding 0.125s ease-in;
}

.disctm-text-input-box > textarea,
.disctm-text-input-box-half-length > textarea,
.disctm-text-input-box .woocommerce-input-wrapper textarea.input-text,
.disctm-text-input-box-half-length .woocommerce-input-wrapper textarea.input-text {
  height: auto;
  min-height: 112px;
  padding: 26px 16px 12px;
  overflow: auto;
  resize: vertical;
  text-overflow: clip;
  white-space: pre-wrap;
}

/* Apple presents enabled editable text controls as text-entry surfaces.
   Keep the I-beam over the overlaid floating label as well as the input,
   without changing dropdown or disabled-control cursors. */
.disctm-text-input-box > input:not(:disabled),
.disctm-text-input-box > textarea:not(:disabled),
.disctm-text-input-box-half-length > input:not(:disabled),
.disctm-text-input-box-half-length > textarea:not(:disabled),
.disctm-text-input-box .woocommerce-input-wrapper input.input-text:not(:disabled),
.disctm-text-input-box .woocommerce-input-wrapper textarea.input-text:not(:disabled),
.disctm-text-input-box-half-length .woocommerce-input-wrapper input.input-text:not(:disabled),
.disctm-text-input-box-half-length .woocommerce-input-wrapper textarea.input-text:not(:disabled),
.disctm-text-input-box:not(.disctm-plain-input-box) > label,
.disctm-text-input-box-half-length:not(.disctm-plain-input-box) > label {
  cursor: text !important;
}

/* The floating label owns the empty state; the placeholder is a single
   space and must never paint. */
.disctm-text-input-box > input::placeholder,
.disctm-text-input-box > textarea::placeholder,
.disctm-text-input-box-half-length > input::placeholder,
.disctm-text-input-box-half-length > textarea::placeholder,
.disctm-text-input-box .woocommerce-input-wrapper input.input-text::placeholder,
.disctm-text-input-box .woocommerce-input-wrapper textarea.input-text::placeholder,
.disctm-text-input-box-half-length .woocommerce-input-wrapper input.input-text::placeholder,
.disctm-text-input-box-half-length .woocommerce-input-wrapper textarea.input-text::placeholder {
  color: transparent;
  opacity: 0;
}

.disctm-dropdown-input-box > select,
.disctm-dropdown-input-box-half-length > select,
.disctm-dropdown-input-box .woocommerce-input-wrapper select:not(.select2-hidden-accessible),
.disctm-dropdown-input-box-half-length .woocommerce-input-wrapper select:not(.select2-hidden-accessible) {
  -webkit-appearance: none;
  appearance: none;
  padding: 18px 40px 0 16px;
  background-image: none;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}

/* Plain box (label outside the box): no floating label, so the text
   centers vertically. All other states match the labeled text box. */
.disctm-text-input-box.disctm-plain-input-box > input,
.disctm-text-input-box.disctm-plain-input-box .woocommerce-input-wrapper input.input-text {
  padding: 0 16px;
}

.disctm-text-input-box.disctm-plain-input-box > input:focus,
.disctm-text-input-box.disctm-plain-input-box .woocommerce-input-wrapper input.input-text:focus {
  padding: 0 16px 0 15px;
}

/* An empty dropdown shows only the resting label — hide the selected
   placeholder option's text so the two never overlap. */
.disctm-dropdown-input-box:has(select option:checked[value=""]):not(.disctm-input-box--float) > select,
.disctm-dropdown-input-box-half-length:has(select option:checked[value=""]):not(.disctm-input-box--float) > select,
.disctm-dropdown-input-box:has(select option:checked[value=""]):not(.disctm-input-box--float) .woocommerce-input-wrapper select:not(.select2-hidden-accessible),
.disctm-dropdown-input-box-half-length:has(select option:checked[value=""]):not(.disctm-input-box--float) .woocommerce-input-wrapper select:not(.select2-hidden-accessible) {
  color: transparent !important;
}

/* ---------------------------------------------------------------- labels */

.disctm-text-input-box > label,
.disctm-text-input-box-half-length > label,
.disctm-dropdown-input-box > label,
.disctm-dropdown-input-box-half-length > label {
  position: absolute;
  /* Inline validation can increase the row height. The resting label remains
     centered on the fixed control rather than the full row. */
  top: calc(var(--disctm-input-box-height) / 2);
  left: 17px;
  z-index: 1;
  display: flex;
  width: auto;
  max-width: calc(100% - 34px);
  margin: 0;
  padding: 0;
  color: var(--disctm-input-box-muted);
  transform: translateY(-50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: 0.125s ease-in;
  transition-property: top, transform, color;
}

.disctm-input-box-label-copy {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: 0.125s ease-in;
  transition-property: font-size, line-height, letter-spacing, color;
}

.disctm-dropdown-input-box > label,
.disctm-dropdown-input-box-half-length > label {
  max-width: calc(100% - 54px); /* Apple reserves the chevron zone */
  pointer-events: none; /* let taps over the label reach the select */
}

/* Floated (eyebrow) label: focused text box, filled control, or the JS
   fallback class. Apple: 12px/1.33337 at top 10px. */
.disctm-text-input-box:has(> input:focus) > label,
.disctm-text-input-box:has(> textarea:focus) > label,
.disctm-text-input-box:has(> textarea:not(:placeholder-shown)) > label,
.disctm-text-input-box-half-length:has(> input:focus) > label,
.disctm-text-input-box-half-length:has(> textarea:focus) > label,
.disctm-text-input-box-half-length:has(> textarea:not(:placeholder-shown)) > label,
.disctm-text-input-box:has(input.input-text:focus) > label,
.disctm-text-input-box:has(textarea.input-text:focus) > label,
.disctm-text-input-box:has(textarea.input-text:not(:placeholder-shown)) > label,
.disctm-text-input-box-half-length:has(input.input-text:focus) > label,
.disctm-text-input-box-half-length:has(textarea.input-text:focus) > label,
.disctm-text-input-box-half-length:has(textarea.input-text:not(:placeholder-shown)) > label,
.disctm-text-input-box:has(> input:not(:placeholder-shown)) > label,
.disctm-text-input-box-half-length:has(> input:not(:placeholder-shown)) > label,
.disctm-text-input-box:has(input.input-text:not(:placeholder-shown)) > label,
.disctm-text-input-box-half-length:has(input.input-text:not(:placeholder-shown)) > label,
.disctm-dropdown-input-box:has(select option:checked:not([value=""])) > label,
.disctm-dropdown-input-box-half-length:has(select option:checked:not([value=""])) > label,
.disctm-text-input-box.disctm-input-box--float > label,
.disctm-text-input-box-half-length.disctm-input-box--float > label,
.disctm-dropdown-input-box.disctm-input-box--float > label,
.disctm-dropdown-input-box-half-length.disctm-input-box--float > label {
  top: 10px;
  transform: none;
}

/* Autofill floats the label too; kept as isolated rules because a browser
   that rejects the vendor pseudo-class must not drop the main rules. */
.disctm-text-input-box:has(input:-webkit-autofill) > label,
.disctm-text-input-box-half-length:has(input:-webkit-autofill) > label {
  top: 10px;
  transform: none;
}
.disctm-text-input-box:has(input:autofill) > label,
.disctm-text-input-box-half-length:has(input:autofill) > label {
  top: 10px;
  transform: none;
}

/* --------------------------------------------------------------- chevron */

.disctm-dropdown-input-box::after,
.disctm-dropdown-input-box-half-length::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 11px;
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg height='21' viewBox='0 0 21 21' width='21' xmlns='http://www.w3.org/2000/svg' fill='rgb(110,110,115)'%3E%3Cpath d='m0 0h21v21h-21z' fill='none'/%3E%3Cpath d='m10.5 14.4639c.2051 0 .4004-.0781.5469-.2344l4.4336-4.4531c.1367-.1367.2051-.3125.2051-.5078 0-.4102-.3223-.7324-.7227-.7324-.1953 0-.3906.0879-.5273.2246l-3.9355 3.9453-3.9355-3.9453c-.1367-.1367-.3223-.2246-.5273-.2246-.4004 0-.7227.3223-.7227.7324 0 .1953.0781.3711.2051.5078l4.4336 4.4531c.166.1562.3418.2344.5469.2344z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 25px 25px;
  pointer-events: none;
}

/* ----------------------------------------------------------------- focus */

/* The border thickens to 2px accent and left padding drops 1px so the text
   never shifts; box height is unchanged (border-box). Keyboard navigation
   also gets the outer outline in the shared theme boundary below. */
.disctm-text-input-box > input:focus,
.disctm-text-input-box > textarea:focus,
.disctm-text-input-box-half-length > input:focus,
.disctm-text-input-box-half-length > textarea:focus,
.disctm-text-input-box .woocommerce-input-wrapper input.input-text:focus,
.disctm-text-input-box .woocommerce-input-wrapper textarea.input-text:focus,
.disctm-text-input-box-half-length .woocommerce-input-wrapper input.input-text:focus,
.disctm-text-input-box-half-length .woocommerce-input-wrapper textarea.input-text:focus {
  border-width: 2px;
  border-color: var(--disctm-input-box-focus);
  border-style: solid;
  padding: 18px 16px 0 15px;
  outline: none;
  box-shadow: none;
}

.disctm-text-input-box > textarea:focus,
.disctm-text-input-box-half-length > textarea:focus,
.disctm-text-input-box .woocommerce-input-wrapper textarea.input-text:focus,
.disctm-text-input-box-half-length .woocommerce-input-wrapper textarea.input-text:focus {
  padding: 25px 15px 11px;
}

.disctm-dropdown-input-box > select:focus,
.disctm-dropdown-input-box-half-length > select:focus,
.disctm-dropdown-input-box .woocommerce-input-wrapper select:not(.select2-hidden-accessible):focus,
.disctm-dropdown-input-box-half-length .woocommerce-input-wrapper select:not(.select2-hidden-accessible):focus {
  border-width: 2px;
  border-color: var(--disctm-input-box-focus);
  border-style: solid;
  padding: 18px 39px 0 15px;
  outline: none;
  box-shadow: none;
}

/* --------------------------------------------------------------- invalid */

.disctm-text-input-box.disctm-input-box--invalid > input:not(:focus):not(:disabled),
.disctm-text-input-box.disctm-input-box--invalid > textarea:not(:focus):not(:disabled),
.disctm-text-input-box-half-length.disctm-input-box--invalid > input:not(:focus):not(:disabled),
.disctm-text-input-box-half-length.disctm-input-box--invalid > textarea:not(:focus):not(:disabled),
.disctm-dropdown-input-box.disctm-input-box--invalid > select:not(:focus):not(:disabled),
.disctm-dropdown-input-box-half-length.disctm-input-box--invalid > select:not(:focus):not(:disabled),
.disctm-text-input-box > input[aria-invalid="true"]:not(:focus):not(:disabled),
.disctm-text-input-box > textarea[aria-invalid="true"]:not(:focus):not(:disabled),
.disctm-text-input-box-half-length > input[aria-invalid="true"]:not(:focus):not(:disabled),
.disctm-text-input-box-half-length > textarea[aria-invalid="true"]:not(:focus):not(:disabled),
.disctm-dropdown-input-box > select[aria-invalid="true"]:not(:focus):not(:disabled),
.disctm-dropdown-input-box-half-length > select[aria-invalid="true"]:not(:focus):not(:disabled) {
  border-color: var(--disctm-input-box-invalid);
  background-color: var(--disctm-input-box-fill-invalid);
}

.disctm-input-box--invalid:not(:has(:disabled)) > label,
.disctm-text-input-box:has(> input[aria-invalid="true"]:not(:disabled)) > label,
.disctm-text-input-box:has(> textarea[aria-invalid="true"]:not(:disabled)) > label,
.disctm-text-input-box-half-length:has(> input[aria-invalid="true"]:not(:disabled)) > label,
.disctm-text-input-box-half-length:has(> textarea[aria-invalid="true"]:not(:disabled)) > label,
.disctm-dropdown-input-box:has(> select[aria-invalid="true"]:not(:disabled)) > label,
.disctm-dropdown-input-box-half-length:has(> select[aria-invalid="true"]:not(:disabled)) > label {
  color: var(--disctm-input-box-invalid);
}

/* Only the required marker is red in the neutral state. The label inherits
   invalid red only after the shared controller presents an inline error. */
.disctm-input-box--required > label:not(.disctm-disclosure-control) > .disctm-input-box-label-copy::after {
  content: "*";
  margin-inline-start: 3px;
  color: var(--disctm-input-box-invalid);
}

/* --------------------------------------------------------- inline errors */

.disctm-checkout-input-boxes .disctm-input-box-inline-error,
.disctm-checkout-input-boxes .checkout-inline-error-message {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  margin: 8px 0 12px;
  color: var(--disctm-input-box-invalid);
}

.disctm-checkout-input-boxes .disctm-input-box-inline-error[hidden],
.disctm-checkout-input-boxes .checkout-inline-error-message[hidden] {
  display: none !important;
}

.disctm-checkout-input-boxes .disctm-input-box-message-copy {
  display: block;
}

.disctm-checkout-input-boxes .disctm-input-box-inline-error::before,
.disctm-checkout-input-boxes .checkout-inline-error-message::before {
  content: "";
  box-sizing: border-box;
  display: block;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  flex: 0 0 12px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center 2px / 1px 5px no-repeat,
    radial-gradient(circle, currentColor 0 1px, transparent 1.25px) center 9px / 3px 3px no-repeat;
}

/* ----------------------------------------------------------- disclosure */

.disctm-checkout-input-boxes .disctm-disclosure-control {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--disctm-input-box-ink);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}

.disctm-checkout-input-boxes .disctm-disclosure-checkbox {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 4px;
}

.disctm-checkout-input-boxes .disctm-disclosure-checkbox input[type="checkbox"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 0;
  border-radius: 4px;
  outline: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.disctm-checkout-input-boxes .disctm-disclosure-checkbox-icon {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background-color: var(--disctm-color-form-control-border, #86868b);
  -webkit-mask: url("../img/square.svg") center / contain no-repeat;
  mask: url("../img/square.svg") center / contain no-repeat;
  pointer-events: none;
}

.disctm-checkout-input-boxes .disctm-disclosure-checkbox input[type="checkbox"]:checked + .disctm-disclosure-checkbox-icon {
  background-color: var(--disctm-color-accent, #0071e3);
  -webkit-mask-image: url("../img/checkmark.square.fill.svg");
  mask-image: url("../img/checkmark.square.fill.svg");
}

.disctm-checkout-input-boxes .disctm-disclosure-checkbox input[type="checkbox"]:disabled {
  cursor: default;
}

.disctm-checkout-input-boxes .disctm-disclosure-checkbox input[type="checkbox"]:disabled + .disctm-disclosure-checkbox-icon {
  background-color: var(--disctm-color-form-control-border-disabled, rgba(134, 134, 139, 0.42));
}

html:not([data-a-disc-input-modality="keyboard"]) .disctm-checkout-input-boxes .disctm-disclosure-checkbox:has(input[type="checkbox"]:focus),
html:not([data-a-disc-input-modality="keyboard"]) .disctm-checkout-input-boxes .disctm-disclosure-checkbox:has(input[type="checkbox"]:focus-visible) {
  outline: none;
}

html[data-a-disc-input-modality="keyboard"] .disctm-checkout-input-boxes .disctm-disclosure-checkbox:has(input[type="checkbox"]:focus),
html[data-a-disc-input-modality="keyboard"] .disctm-checkout-input-boxes .disctm-disclosure-checkbox:has(input[type="checkbox"]:focus-visible) {
  outline: var(--disctm-focus-ring-width, 2px) solid var(--disctm-focus-ring-color, var(--disctm-color-accent, #0071e3));
  outline-offset: var(--disctm-focus-ring-offset, 3px);
}

/* ------------------------------------------------------- invoice reveal */

.disctm-input-box-invoice-fields.is-revealing > .disctm-invoice-field {
  animation: disctm-input-box-invoice-reveal 190ms ease-out both;
}

@keyframes disctm-input-box-invoice-reveal {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------------------------------- disabled */

.disctm-text-input-box > input:disabled,
.disctm-text-input-box > textarea:disabled,
.disctm-text-input-box-half-length > input:disabled,
.disctm-text-input-box-half-length > textarea:disabled,
.disctm-dropdown-input-box > select:disabled,
.disctm-dropdown-input-box-half-length > select:disabled,
.disctm-text-input-box .woocommerce-input-wrapper input.input-text:disabled,
.disctm-text-input-box .woocommerce-input-wrapper textarea.input-text:disabled,
.disctm-text-input-box-half-length .woocommerce-input-wrapper input.input-text:disabled,
.disctm-text-input-box-half-length .woocommerce-input-wrapper textarea.input-text:disabled,
.disctm-dropdown-input-box .woocommerce-input-wrapper select:not(.select2-hidden-accessible):disabled,
.disctm-dropdown-input-box-half-length .woocommerce-input-wrapper select:not(.select2-hidden-accessible):disabled {
  border-color: var(--disctm-input-box-border-disabled);
  background-color: var(--disctm-input-box-fill-disabled);
  color: var(--disctm-input-box-muted);
  -webkit-text-fill-color: var(--disctm-input-box-muted);
  cursor: default;
}

.disctm-text-input-box:has(input:disabled) > label,
.disctm-text-input-box:has(textarea:disabled) > label,
.disctm-text-input-box-half-length:has(input:disabled) > label,
.disctm-text-input-box-half-length:has(textarea:disabled) > label,
.disctm-dropdown-input-box:has(select:disabled) > label,
.disctm-dropdown-input-box-half-length:has(select:disabled) > label {
  color: var(--disctm-input-box-muted);
  cursor: default !important;
}

@media (prefers-reduced-motion: reduce) {
  .disctm-text-input-box > label,
  .disctm-text-input-box-half-length > label,
  .disctm-dropdown-input-box > label,
  .disctm-dropdown-input-box-half-length > label,
  .disctm-input-box-label-copy {
    transition: none;
  }

  .disctm-text-input-box > input,
  .disctm-text-input-box > textarea,
  .disctm-text-input-box-half-length > input,
  .disctm-text-input-box-half-length > textarea,
  .disctm-dropdown-input-box > select,
  .disctm-dropdown-input-box-half-length > select {
    transition: none;
  }

  .disctm-input-box-invoice-fields.is-revealing > .disctm-invoice-field {
    animation: none;
  }
}

/* ======================================================================
   WooCommerce checkout adapter (discvietnam.com/checkout/)
   The legacy field styling in a-woocommerce-checkout.css exempts rows
   carrying .disctm-input-box-row; these rules restate the component with
   the specificity and !important weight needed to beat Astra's and
   WooCommerce's own field CSS inside body.disctm-checkout-active.
   ====================================================================== */

body.disctm-checkout-active .form-row.disctm-input-box-row {
  position: relative;
}

body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper input.input-text,
body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper textarea.input-text,
body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper select:not(.select2-hidden-accessible) {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  height: 56px !important;
  min-height: 56px;
  margin: 0 !important;
  padding: 18px 16px 0 !important;
  border: 1px solid var(--disctm-input-box-border) !important;
  border-radius: 12px !important;
  outline: none;
  background-color: var(--disctm-input-box-fill) !important;
  box-shadow: none !important;
  color: var(--disctm-input-box-ink) !important;
  text-overflow: ellipsis;
  transition: border-color 0.125s ease-in, border-width 0.125s ease-in, background-color 0.125s ease-in, padding 0.125s ease-in;
}

body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper textarea.input-text {
  height: auto !important;
  min-height: 112px;
  padding: 26px 16px 12px !important;
  overflow: auto;
  resize: vertical;
  text-overflow: clip;
  white-space: pre-wrap;
}

body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper input.input-text::placeholder,
body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper textarea.input-text::placeholder {
  color: transparent;
  opacity: 0;
}

body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper select:not(.select2-hidden-accessible) {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 18px 40px 0 16px !important;
  overflow: hidden;
  background-image: none !important;
  white-space: nowrap;
  cursor: pointer;
}

/* Select2 single selection rendered as the same Apple box. */
body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper .select2-container {
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  min-width: 0;
}

body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper .select2-container--default .select2-selection--single {
  position: relative;
  box-sizing: border-box;
  display: block;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--disctm-input-box-border) !important;
  border-radius: 12px !important;
  outline: none;
  background-color: var(--disctm-input-box-fill) !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.125s ease-in, border-width 0.125s ease-in, background-color 0.125s ease-in;
}

body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
  box-sizing: border-box;
  display: block;
  height: 100%;
  padding: 18px 39px 0 16px !important;
  color: var(--disctm-input-box-ink) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The floating label replaces select2's own placeholder text. */
body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper .select2-selection__placeholder {
  display: none !important;
}

/* A dropdown row always presents its NATIVE select, exactly like Apple's
   checkout: the browser centers a native select's value below the floating
   label, while select2's rendered span top-anchors it ~8px too high.
   The checkout JS destroys any select2 enhancement (wc-country-select
   re-enhances on every country change); these rules make even a pre-strip
   frame render as the native box — the widget is hidden and the clipped
   accessible select is restored to full size and styling. */
body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper .select2-container {
  display: none !important;
}

body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper select.select2-hidden-accessible {
  position: static !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 18px 40px 0 16px !important;
  border: 1px solid var(--disctm-input-box-border) !important;
  border-radius: 12px !important;
  background-color: var(--disctm-input-box-fill) !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  color: var(--disctm-input-box-ink) !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.125s ease-in, border-width 0.125s ease-in, background-color 0.125s ease-in, padding 0.125s ease-in;
}

/* Plain input-box rows (label outside the box): the text
   centers vertically; every other state matches the labeled boxes. */
body.disctm-checkout-active .form-row.disctm-input-box-row.disctm-plain-input-box .woocommerce-input-wrapper input.input-text {
  padding: 0 16px !important;
}

/* Native select with the placeholder option selected: label rests, value
   text stays invisible. */
body.disctm-checkout-active .form-row.disctm-input-box-row:has(.woocommerce-input-wrapper select:not(.select2-hidden-accessible) option:checked[value=""]):not(.disctm-input-box--float) .woocommerce-input-wrapper select:not(.select2-hidden-accessible) {
  color: transparent !important;
}

/* ------------------------------------------------------ adapter: labels */

body.disctm-checkout-active .form-row.disctm-input-box-row:not(.disctm-plain-input-box) > label:not(.disctm-disclosure-control) {
  position: absolute;
  /* Inline errors increase the row height; labels stay centered on the fixed 56px control. */
  top: 28px;
  left: 17px;
  z-index: 1;
  display: flex;
  width: auto;
  max-width: calc(100% - 34px);
  margin: 0;
  padding: 0;
  color: var(--disctm-input-box-muted);
  transform: translateY(-50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: 0.125s ease-in;
  transition-property: top, transform, color;
}

/* WooCommerce can leave validation classes on a required field before an
   inline message is being presented. Keep the label neutral in that state;
   the required marker owns its independent DISC-red color. */
body.disctm-checkout-active .form-row.disctm-input-box-row:not(.disctm-input-box--invalid):not(.disctm-plain-input-box) > label:not(.disctm-disclosure-control) {
  color: var(--disctm-input-box-muted) !important;
}

body.disctm-checkout-active .form-row.disctm-input-box-row.disctm-dropdown-input-box > label:not(.disctm-disclosure-control) {
  max-width: calc(100% - 54px);
  pointer-events: none;
}

body.disctm-checkout-active .form-row.disctm-input-box-row:not(.disctm-plain-input-box):has(input.input-text:focus) > label:not(.disctm-disclosure-control),
body.disctm-checkout-active .form-row.disctm-input-box-row:not(.disctm-plain-input-box):has(input.input-text:not(:placeholder-shown)) > label:not(.disctm-disclosure-control),
body.disctm-checkout-active .form-row.disctm-input-box-row:not(.disctm-plain-input-box):has(textarea.input-text:focus) > label:not(.disctm-disclosure-control),
body.disctm-checkout-active .form-row.disctm-input-box-row:not(.disctm-plain-input-box):has(textarea.input-text:not(:placeholder-shown)) > label:not(.disctm-disclosure-control),
body.disctm-checkout-active .form-row.disctm-input-box-row:not(.disctm-plain-input-box):has(select option:checked:not([value=""])) > label:not(.disctm-disclosure-control),
body.disctm-checkout-active .form-row.disctm-input-box-row.disctm-input-box--float:not(.disctm-plain-input-box) > label:not(.disctm-disclosure-control) {
  top: 10px;
  transform: none;
}

body.disctm-checkout-active .form-row.disctm-input-box-row:not(.disctm-plain-input-box):has(input.input-text:-webkit-autofill) > label:not(.disctm-disclosure-control) {
  top: 10px;
  transform: none;
}
body.disctm-checkout-active .form-row.disctm-input-box-row:not(.disctm-plain-input-box):has(input.input-text:autofill) > label:not(.disctm-disclosure-control) {
  top: 10px;
  transform: none;
}

/* ----------------------------------------------------- adapter: chevron */

body.disctm-checkout-active .form-row.disctm-input-box-row.disctm-dropdown-input-box::after,
body.disctm-checkout-active .form-row.disctm-input-box-row.disctm-dropdown-input-box-half-length::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 11px;
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg height='21' viewBox='0 0 21 21' width='21' xmlns='http://www.w3.org/2000/svg' fill='rgb(110,110,115)'%3E%3Cpath d='m0 0h21v21h-21z' fill='none'/%3E%3Cpath d='m10.5 14.4639c.2051 0 .4004-.0781.5469-.2344l4.4336-4.4531c.1367-.1367.2051-.3125.2051-.5078 0-.4102-.3223-.7324-.7227-.7324-.1953 0-.3906.0879-.5273.2246l-3.9355 3.9453-3.9355-3.9453c-.1367-.1367-.3223-.2246-.5273-.2246-.4004 0-.7227.3223-.7227.7324 0 .1953.0781.3711.2051.5078l4.4336 4.4531c.166.1562.3418.2344.5469.2344z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 25px 25px;
  pointer-events: none;
}

/* ------------------------------------------------------- adapter: focus */

body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper input.input-text:focus,
body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper textarea.input-text:focus {
  border-width: 2px !important;
  border-color: var(--disctm-color-accent, #0071e3) !important;
  border-style: solid !important;
  padding: 18px 16px 0 15px !important;
  outline: none;
  background-color: var(--disctm-input-box-fill) !important;
  box-shadow: none !important;
}

body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper textarea.input-text:focus {
  padding: 25px 15px 11px !important;
}

body.disctm-checkout-active .form-row.disctm-input-box-row.disctm-plain-input-box .woocommerce-input-wrapper input.input-text:focus {
  padding: 0 16px 0 15px !important;
}

body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper select:not(.select2-hidden-accessible):focus {
  border-width: 2px !important;
  border-color: var(--disctm-input-box-focus) !important;
  border-style: solid !important;
  padding: 18px 39px 0 15px !important;
  outline: none;
  background-color: var(--disctm-input-box-fill) !important;
  box-shadow: none !important;
}

body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper select:not(.select2-hidden-accessible):focus-visible,
html[data-a-disc-input-modality="keyboard"] body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper select:not(.select2-hidden-accessible):focus {
  border-width: 2px !important;
  border-color: var(--disctm-color-accent, #0071e3) !important;
  border-style: solid !important;
  padding: 18px 39px 0 15px !important;
  outline: none;
}

html[data-a-disc-input-modality="keyboard"] body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper .select2-container--focus .select2-selection--single,
html[data-a-disc-input-modality="keyboard"] body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper .select2-container--open .select2-selection--single {
  border-width: 2px !important;
  border-color: var(--disctm-color-accent, #0071e3) !important;
  outline: none;
}

html[data-a-disc-input-modality="keyboard"] body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper .select2-container--focus .select2-selection--single .select2-selection__rendered,
html[data-a-disc-input-modality="keyboard"] body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper .select2-container--open .select2-selection--single .select2-selection__rendered {
  padding: 18px 38px 0 15px !important;
}

/* ----------------------------------------------------- adapter: invalid */

body.disctm-checkout-active .form-row.disctm-input-box-row.disctm-input-box--invalid .woocommerce-input-wrapper input.input-text:not(:focus):not(:disabled),
body.disctm-checkout-active .form-row.disctm-input-box-row.disctm-input-box--invalid .woocommerce-input-wrapper textarea.input-text:not(:focus):not(:disabled),
body.disctm-checkout-active .form-row.disctm-input-box-row.disctm-input-box--invalid .woocommerce-input-wrapper select:not(.select2-hidden-accessible):not(:focus):not(:disabled),
body.disctm-checkout-active .form-row.disctm-input-box-row.disctm-input-box--invalid .woocommerce-input-wrapper .select2-selection--single {
  border-color: var(--disctm-input-box-invalid) !important;
  background-color: var(--disctm-input-box-fill-invalid) !important;
}

body.disctm-checkout-active .form-row.disctm-input-box-row.disctm-input-box--invalid:not(:has(:disabled)) > label:not(.disctm-disclosure-control) {
  color: var(--disctm-input-box-invalid) !important;
}

/* ---------------------------------------------------- adapter: disabled */

body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper input.input-text:disabled,
body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper textarea.input-text:disabled,
body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper select:not(.select2-hidden-accessible):disabled {
  border-width: 1px !important;
  border-color: var(--disctm-input-box-border-disabled) !important;
  outline: none;
  background-color: var(--disctm-input-box-fill-disabled) !important;
  color: var(--disctm-input-box-muted) !important;
  -webkit-text-fill-color: var(--disctm-input-box-muted);
  cursor: default;
}

body.disctm-checkout-active .form-row.disctm-input-box-row:has(.woocommerce-input-wrapper :disabled) > label:not(.disctm-disclosure-control) {
  color: var(--disctm-input-box-muted);
  cursor: default !important;
}

@media (prefers-reduced-motion: reduce) {
  body.disctm-checkout-active .form-row.disctm-input-box-row > label:not(.disctm-disclosure-control),
  body.disctm-checkout-active .form-row.disctm-input-box-row .disctm-input-box-label-copy {
    transition: none;
  }

  body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper input.input-text,
  body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper textarea.input-text,
  body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper select:not(.select2-hidden-accessible),
  body.disctm-checkout-active .form-row.disctm-input-box-row .woocommerce-input-wrapper .select2-selection--single {
    transition: none;
  }
}

/* -------------------------------------------------- shared theme boundary
   Alpha and WooCommerce must own the same interaction states. Astra's
   input[type="text"]:focus rule uses a different color token from its
   resting rule. Map both locally, then protect the component properties.
   !important is restricted to properties also claimed by existing checkout
   or shared utility rules; layout remains in the appropriate adapter. */
.disctm-checkout-input-boxes {
  --ast-form-input-text: var(--disctm-input-box-ink);
  --ast-form-input-focus-text: var(--disctm-input-box-ink);
}

.disctm-checkout-input-boxes .disctm-input-box-row :is(input.typography-body, textarea.typography-body, select.typography-body) {
  color: var(--disctm-input-box-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  border: 1px solid var(--disctm-input-box-border);
  padding: 18px 16px 0;
  background-color: var(--disctm-input-box-fill);
  border-radius: var(--disctm-input-box-radius);
  box-shadow: none;
  outline: none !important;
}

.disctm-checkout-input-boxes .disctm-input-box-row.disctm-input-box--invalid :is(input.typography-body, textarea.typography-body, select.typography-body):not(:focus):not(:disabled),
.disctm-checkout-input-boxes .disctm-input-box-row :is(input.typography-body, textarea.typography-body, select.typography-body)[aria-invalid="true"]:not(:focus):not(:disabled) {
  border-color: var(--disctm-input-box-invalid);
  background-color: var(--disctm-input-box-fill-invalid);
}

.disctm-checkout-input-boxes .disctm-input-box-row :is(input.typography-body, textarea.typography-body, select.typography-body):focus {
  border: 2px solid var(--disctm-input-box-focus);
  padding-left: 15px;
  background-color: var(--disctm-input-box-fill);
  box-shadow: none;
}

.disctm-checkout-input-boxes .disctm-input-box-row textarea.typography-body {
  padding: 26px 16px 12px;
}
.disctm-checkout-input-boxes .disctm-input-box-row textarea.typography-body:focus {
  padding: 25px 15px 11px;
}
.disctm-checkout-input-boxes .disctm-input-box-row select.typography-body {
  padding-right: 40px;
}
.disctm-checkout-input-boxes .disctm-input-box-row select.typography-body:focus {
  padding-right: 39px;
}
.disctm-checkout-input-boxes .disctm-input-box-row.disctm-plain-input-box input.typography-body {
  padding: 0 16px;
}
.disctm-checkout-input-boxes .disctm-input-box-row.disctm-plain-input-box input.typography-body:focus {
  padding-left: 15px;
}

/* Keyboard-only, rounded, solid focus indication. Typing after a pointer
   click keeps pointer modality, so it does not introduce a second ring. */
html[data-a-disc-input-modality="keyboard"] .disctm-checkout-input-boxes .disctm-input-box-row :is(input.typography-body, textarea.typography-body, select.typography-body):focus:not(:disabled) {
  outline: var(--disctm-focus-ring-width) solid var(--disctm-focus-ring-color) !important;
  outline-offset: var(--disctm-focus-ring-offset);
}

.disctm-checkout-input-boxes .disctm-input-box-row :is(input.typography-body, textarea.typography-body, select.typography-body):disabled {
  color: var(--disctm-input-box-muted) !important;
  border-color: var(--disctm-input-box-border-disabled);
  background-color: var(--disctm-input-box-fill-disabled);
  cursor: default;
}

/* Preserve native autofill cues while ensuring autofilled text uses the
   same ink. Do not cover the browser's autofill fill with an inset shadow. */
.disctm-checkout-input-boxes .disctm-input-box-row input.typography-body:autofill:not(:disabled) {
  -webkit-text-fill-color: var(--disctm-input-box-ink) !important;
}
.disctm-checkout-input-boxes .disctm-input-box-row input.typography-body:-webkit-autofill:not(:disabled) {
  -webkit-text-fill-color: var(--disctm-input-box-ink) !important;
}