/* Container styles */
.upsgc-admin-container {
  display: flex;
  flex-direction: column;
  max-width: 960px;
  margin: var(--upsgc-spacing-4xl) auto;
}
.upsgc-setup-container {
  max-width: 690px;
  margin: var(--upsgc-spacing-4xl) auto;
  display: flex;
  flex-direction: column;
  gap: var(--upsgc-spacing-4xl);
  text-align: center;
}

.upsgc-heading-container {
  display: flex;
  flex-direction: column;
  gap: var(--upsgc-spacing-2xl);
  text-align: center;
  align-items: center;
}

.upsgc-notice-container {
}

/* Text styles */
.upsgc-admin-container {
  font-family: var(--upsgc-font-family);
}

.upsgc-heading-regular {
  font-size: var(--upsgc-headline-regular-size);
  font-weight: var(--upsgc-font-weight-regular);
  line-height: var(--upsgc-headline-regular-line-height);
  color: var(--upsgc-brand-colors-black);
}

.upsgc-heading-md {
  font-size: var(--upsgc-headline-md-size);
  font-weight: var(--upsgc-font-weight-regular);
  line-height: var(--upsgc-headline-md-line-height);
  color: var(--upsgc-brand-colors-black);
}

.upsgc-heading-md-decorated::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  background-color: var(--upsgc-brand-colors-gold);
  margin: var(--upsgc-spacing-lg) auto 0 auto;
}

.upsgc-label-md {
  font-size: var(--upsgc-label-md-size);
  font-weight: var(--upsgc-font-weight-regular);
  line-height: var(--upsgc-label-md-line-height);
  color: var(--upsgc-brand-colors-black);
}

.upsgc-label-lg {
  font-size: var(--upsgc-label-lg-size) !important;
  font-weight: var(--upsgc-font-weight-regular);
  line-height: var(--upsgc-label-lg-line-height);
  color: var(--upsgc-brand-colors-black);
}

.upsgc-body-reg {
  font-size: var(--upsgc-body-reg-size) !important;
  font-weight: var(--upsgc-font-weight-regular);
  line-height: var(--upsgc-body-reg-line-height);
  color: var(--upsgc-brand-colors-black);
}

.upsgc-text-color-emphasis {
  color: var(--upsgc-on-surface-medium-emphasis) !important;
}

.upsgc-text-medium {
  font-weight: var(--upsgc-font-weight-medium);
}

.upsgc-text-bold {
  font-weight: var(--upsgc-font-weight-bold);
}

/* Tab navigation styles */
.upsgc-nav-tab-wrapper {
  display: flex;
  width: fit-content;
  border-bottom: 1px solid var(--upsgc-divider-section);
  margin-bottom: var(--upsgc-spacing-4xl);
}

.upsgc-nav-tab {
  padding: 0 var(--upsgc-spacing-lg) var(--upsgc-spacing-md);
  color: var(--upsgc-on-surface-medium-emphasis);
  text-decoration: none;
}

.upsgc-nav-tab-active {
  color: var(--upsgc-status-feature-on-feature-container);
  font-weight: var(--upsgc-font-weight-medium);
}

.upsgc-nav-tab-active::after {
  content: "";
  display: block;
  width: 60%;
  height: 4px;
  margin: 0 auto;
  position: relative;
  top: var(--upsgc-spacing-md);
  background-color: var(--upsgc-status-feature-on-feature-container);
}

/* Settings section styles */
.upsgc-settings-section-wrapper {
  background-color: var(--upsgc-brand-colors-white);
  padding: var(--upsgc-spacing-3xl);
  border-radius: var(--upsgc-border-radius-sm);
  box-shadow: var(--upsgc-elevation-1-shadow);
}

.upsgc-settings-section-wrapper > h2 {
  font-size: var(--upsgc-title-lg-size);
  font-weight: var(--upsgc-font-weight-regular);
  line-height: var(--upsgc-title-lg-line-height);
  color: var(--upsgc-brand-colors-black);
}

.upsgc-settings-section-wrapper > h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  background-color: var(--upsgc-brand-colors-gold);
  margin-top: var(--upsgc-spacing-sm);
}

.upsgc-settings-section-wrapper > table > tbody > tr {
  display: flex;
  flex-direction: column;
}

.upsgc-settings-section-wrapper > table > tbody > tr > td {
  padding: 0;
  margin: 0;
}

.upsgc-settings-section-wrapper > table > tbody > tr > th {
  width: 100%;
  font-size: var(--upsgc-title-md-size);
  font-weight: var(--upsgc-font-weight-medium);
  line-height: var(--upsgc-title-md-line-height);
  padding: var(--upsgc-spacing-sm) 0;
  color: var(--upsgc-brand-colors-black);
}

.upsgc-settings-section-wrapper.upsgc-settings-section-no-headings
  > table
  > tbody
  > tr
  > th {
  display: none;
}
.form-table td p {
  margin-top: 0;
}

.upsgc-section-description {
  font-size: var(--upsgc-body-reg-size);
  line-height: var(--upsgc-body-reg-line-height);
  color: var(--upsgc-on-surface-medium-emphasis);
  margin: var(--upsgc-spacing-md) 0 var(--upsgc-spacing-2xl) 0;
}

.upsgc-log-actions-buttons .button,
.upsgc-account-verification-form > .button,
.upsgc-settings-section-wrapper > .button,
.upsgc-settings-section-wrapper > .button:disabled,
input.upsgc-save-btn,
input.upsgc-save-btn:disabled {
  font-size: var(--upsgc-label-md-size) !important;
  font-weight: var(--upsgc-font-weight-medium) !important;
  line-height: var(--upsgc-label-md-line-height) !important;
  color: var(--upsgc-brand-colors-black) !important;
  background-color: var(--upsgc-brand-colors-gold) !important;
  border-radius: var(--upsgc-border-radius-lg) !important;
  border: none !important;
  padding: 10px 28px !important;
}
.upsgc-settings-section-wrapper > .button,
.upsgc-settings-section-wrapper > .button:disabled,
input.upsgc-save-btn,
input.upsgc-save-btn:disabled {
  margin: var(--upsgc-spacing-3xl) 0 !important;
  cursor: not-allowed;
  opacity: 0.7;
}

.upsgc-log-actions-buttons .button,
.upsgc-account-verification-form > .button:hover,
.upsgc-account-verification-form > .button:active,
.upsgc-account-verification-form > .button:focus,
.upsgc-settings-section-wrapper > .button:hover,
.upsgc-settings-section-wrapper > .button:active,
.upsgc-settings-section-wrapper > .button:focus,
input.upsgc-save-btn:hover,
input.upsgc-save-btn:active,
input.upsgc-save-btn:focus {
  background-color: var(--upsgc-brand-colors-gold) !important;
  color: var(--upsgc-brand-colors-black) !important;
  opacity: 0.9;
  border: none !important;
}

.upsgc-submit-btn-enabled {
  opacity: 1 !important;
  cursor: pointer !important;
  background-color: var(--upsgc-action-secondary) !important;
  color: var(--upsgc-brand-colors-white) !important;
  border-color: var(--upsgc-action-secondary) !important;
}

.upsgc-attribute-row {
  display: flex;
  flex-direction: row;
  gap: var(--upsgc-spacing-lg);
}

/* Stack the mapping rows with breathing room between them. */
#upsgc-field-mapping-rows {
  display: flex;
  flex-direction: column;
  gap: var(--upsgc-spacing-lg);
  margin-bottom: var(--upsgc-spacing-lg);
}

/* Lay out each row on the same grid as the heading row so the input, select,
   and remove button line up exactly under "custom field" / "UPS field". */
.upsgc-field-mapping-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--upsgc-spacing-lg);
  align-items: center;
}

/* Source input + its custom autocomplete dropdown share equal width with the
   target select. The wrapper anchors the absolutely-positioned suggestions. */
.upsgc-fm-source-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* A source that duplicates another row or doesn't match an existing product
   field key — flagged until the merchant fixes it. */
.upsgc-fm-source.upsgc-fm-invalid {
  border-color: #d63638;
  box-shadow: 0 0 0 1px #d63638;
}

.upsgc-field-mapping-row .upsgc-fm-target {
  flex: 1;
  /* Let the select shrink to its flex share (overriding its intrinsic
     content min-width) so the two columns split evenly and line up with the
     headings above. */
  min-width: 0;
}

.upsgc-fm-suggestions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 100;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--upsgc-on-surface-medium-emphasis);
  border-radius: var(--upsgc-border-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.upsgc-fm-suggestions li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--upsgc-on-surface-medium-emphasis);
}

.upsgc-fm-suggestions li.upsgc-fm-active,
.upsgc-fm-suggestions li:hover {
  background: #f0f0f1;
}

.upsgc-fm-suggestions .upsgc-fm-empty {
  padding: 8px 12px;
  color: #777;
  font-size: 13px;
  cursor: default;
}

/* Column headings above the mapping rows — mirrors the row's flex layout so the
   two labels sit over the source and target columns. */
.upsgc-fm-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--upsgc-spacing-lg);
  align-items: center;
  margin-bottom: var(--upsgc-spacing-sm, 8px);
}

.upsgc-fm-header-col {
  font-size: var(--upsgc-label-md-size);
  font-weight: var(--upsgc-font-weight-medium, 600);
  color: var(--upsgc-on-surface-medium-emphasis);
}

.upsgc-fm-header-spacer {
  width: 16px;
}

/* "How mapping works" modal */
.upsgc-fm-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  align-items: center;
  justify-content: center;
  padding: var(--upsgc-spacing-lg);
}

.upsgc-fm-modal.upsgc-fm-open {
  display: flex;
}

.upsgc-fm-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.upsgc-fm-modal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  background: #fff;
  border-radius: var(--upsgc-border-radius-sm);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.upsgc-fm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--upsgc-spacing-md);
  padding: var(--upsgc-spacing-lg) var(--upsgc-spacing-xl, 24px);
  border-bottom: 1px solid #e2e4e7;
}

.upsgc-fm-modal-head h2 {
  margin: 0;
}

.upsgc-fm-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--upsgc-on-surface-medium-emphasis);
  padding: 0 4px;
}

.upsgc-fm-modal-body {
  padding: var(--upsgc-spacing-lg) var(--upsgc-spacing-xl, 24px);
  overflow-y: auto;
}

.upsgc-fm-modal-body h3 {
  margin: var(--upsgc-spacing-xl, 24px) 0 var(--upsgc-spacing-sm, 8px);
}

.upsgc-fm-modal-body ol {
  margin: 0 0 var(--upsgc-spacing-md);
  padding-left: 1.4em;
}

.upsgc-fm-modal-body li {
  margin-bottom: 6px;
}

.upsgc-fm-key-defs {
  margin: 0;
}

.upsgc-fm-key-defs dt {
  font-weight: 600;
  margin-top: 10px;
}

.upsgc-fm-key-defs dd {
  margin: 2px 0 0;
  color: var(--upsgc-on-surface-medium-emphasis);
}

.upsgc-fm-modal-foot {
  padding: var(--upsgc-spacing-md) var(--upsgc-spacing-xl, 24px);
  border-top: 1px solid #e2e4e7;
  text-align: right;
}

.upsgc-attribute-list {
  display: flex;
  flex-direction: column;
  gap: var(--upsgc-spacing-2xl);
}

/* Account verification styles */
.upsgc-account-verification-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--upsgc-spacing-2xl);
  width: 100%;
}

/* Input styles */
.upsgc-input-select {
  width: 100%;
  max-width: 100% !important;
  padding: var(--upsgc-spacing-lg) var(--upsgc-spacing-md) !important;
  border: 1px solid var(--upsgc-on-surface-medium-emphasis);
  border-radius: var(--upsgc-border-radius-sm) !important;
  background-position: right var(--upsgc-spacing-md) center !important;
  color: var(--upsgc-on-surface-medium-emphasis) !important;
  font-weight: var(--upsgc-font-weight-regular) !important;
  /* Match the text inputs' height: neutralize the body-text font-size /
     line-height that a `upsgc-body-reg` class otherwise inflates selects with. */
  font-size: inherit !important;
  line-height: normal !important;
}

.upsgc-selector-input {
  width: 100%;
  max-width: 100% !important;
  padding: var(--upsgc-spacing-lg) var(--upsgc-spacing-md) !important;
  border: 1px solid var(--upsgc-on-surface-medium-emphasis);
  border-radius: var(--upsgc-border-radius-sm) !important;
  background-position: right var(--upsgc-spacing-md) center !important;
  color: var(--upsgc-on-surface-medium-emphasis) !important;
  font-weight: var(--upsgc-font-weight-regular) !important;
  font-size: inherit !important;
  line-height: normal !important;
}

.upsgc-input {
  width: 100%;
  max-width: 100% !important;
  padding: var(--upsgc-spacing-lg) var(--upsgc-spacing-md) !important;
  border: 1px solid var(--upsgc-on-surface-medium-emphasis) !important;
  border-radius: var(--upsgc-border-radius-sm) !important;
  color: var(--upsgc-on-surface-medium-emphasis) !important;
  font-weight: var(--upsgc-font-weight-regular) !important;
}

/*
 * Focus state for all plugin form fields.
 *
 * Without this, focus falls through to the active WordPress admin color scheme
 * (which can be pink/magenta, red, etc.). Force a UPS-gold ring so focus is
 * on-brand regardless of the merchant's admin scheme. !important is required to
 * beat WP core's focus box-shadow on inputs/selects.
 *
 * Note: the previous rule used the invalid `::focus` pseudo-element, so it never
 * applied — this replaces it with the correct `:focus`.
 */
.upsgc-input-select:focus,
.upsgc-selector-input:focus,
.upsgc-input:focus,
.upsgc-code-input:focus {
  border-color: var(--upsgc-brand-colors-gold) !important;
  box-shadow: 0 0 0 1px var(--upsgc-brand-colors-gold) !important;
  outline: none !important;
}

/*
 * On-brand focus / active ring for every button and link inside the plugin's
 * admin UI (settings page, setup page, and the order label metabox).
 *
 * WordPress otherwise rings focused/active controls with the active admin color
 * scheme (pink/magenta, red, etc.). These rules force a UPS-gold ring instead.
 * Scoped to the plugin wrappers so the rest of wp-admin keeps its native focus
 * styles (UPSGC_AdminStyles.css is enqueued across all of wp-admin).
 *
 * border-color is set to gold here only for buttons that have no plugin border
 * override; the ID-scoped box-action buttons keep their own (gold/red) border
 * because their base rule has higher specificity.
 */
.upsgc-admin-container a:focus,
.upsgc-admin-container a:focus-visible,
.upsgc-admin-container a:active,
.upsgc-admin-container button:focus,
.upsgc-admin-container button:focus-visible,
.upsgc-admin-container button:active,
.upsgc-admin-container .button:focus,
.upsgc-admin-container .button:focus-visible,
.upsgc-admin-container .button:active,
.upsgc-admin-container input[type="submit"]:focus,
.upsgc-admin-container input[type="submit"]:active,
.upsgc-admin-container input[type="button"]:focus,
.upsgc-admin-container input[type="button"]:active,
.upsgc-setup-container a:focus,
.upsgc-setup-container a:focus-visible,
.upsgc-setup-container a:active,
.upsgc-setup-container button:focus,
.upsgc-setup-container button:focus-visible,
.upsgc-setup-container button:active,
.upsgc-setup-container .button:focus,
.upsgc-setup-container .button:focus-visible,
.upsgc-setup-container .button:active,
.upsgc-setup-container input[type="submit"]:focus,
.upsgc-setup-container input[type="submit"]:active,
.upsgc-setup-container input[type="button"]:focus,
.upsgc-setup-container input[type="button"]:active,
.upsgc-label-metabox a:focus,
.upsgc-label-metabox a:focus-visible,
.upsgc-label-metabox a:active,
.upsgc-label-metabox button:focus,
.upsgc-label-metabox button:focus-visible,
.upsgc-label-metabox button:active,
.upsgc-label-metabox .button:focus,
.upsgc-label-metabox .button:focus-visible,
.upsgc-label-metabox .button:active,
.upsgc-label-metabox input[type="submit"]:focus,
.upsgc-label-metabox input[type="submit"]:active,
.upsgc-label-metabox input[type="button"]:focus,
.upsgc-label-metabox input[type="button"]:active {
  box-shadow: 0 0 0 2px var(--upsgc-brand-colors-gold) !important;
  border-color: var(--upsgc-brand-colors-gold) !important;
  outline: none !important;
}

/* Strip the scheme-colored ring on plain hover (no focus). */
.upsgc-admin-container a:hover,
.upsgc-admin-container button:hover,
.upsgc-admin-container .button:hover,
.upsgc-setup-container a:hover,
.upsgc-setup-container button:hover,
.upsgc-setup-container .button:hover,
.upsgc-label-metabox a:hover,
.upsgc-label-metabox button:hover,
.upsgc-label-metabox .button:hover {
  box-shadow: none !important;
  outline: none !important;
}

.upsgc-code-input {
  width: 100%;
  max-width: 100% !important;
  padding: var(--upsgc-spacing-lg) var(--upsgc-spacing-md) !important;
  border: 1px solid var(--upsgc-on-surface-medium-emphasis);
  border-radius: var(--upsgc-border-radius-sm) !important;
  color: var(--upsgc-on-surface-medium-emphasis) !important;
  font-weight: var(--upsgc-font-weight-regular) !important;
}

/* Flat-rate country picker (checkbox list with search). */
.upsgc-rc-country-actions {
  display: flex;
  gap: var(--upsgc-spacing-sm);
  margin-top: var(--upsgc-spacing-sm);
}

.upsgc-rc-country-list {
  max-height: 220px;
  overflow-y: auto;
  margin-top: var(--upsgc-spacing-sm);
  padding: var(--upsgc-spacing-md);
  border: 1px solid var(--upsgc-on-surface-medium-emphasis);
  border-radius: var(--upsgc-border-radius-sm);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--upsgc-spacing-xs);
}

.upsgc-rc-country-item {
  display: flex;
  align-items: center;
  gap: var(--upsgc-spacing-xs);
  margin: 0;
}

/* Select all / Clear: secondary (white with gold border), fills gold on hover. */
.upsgc-rc-country-actions .button {
  background-color: var(--upsgc-brand-colors-white) !important;
  color: var(--upsgc-brand-colors-black) !important;
  border: 1px solid var(--upsgc-brand-colors-gold) !important;
  border-radius: var(--upsgc-border-radius-sm) !important;
  box-shadow: none !important;
  padding: 4px 14px !important;
  height: auto !important;
  line-height: 1.6 !important;
}

.upsgc-rc-country-actions .button:hover {
  background-color: var(--upsgc-brand-colors-gold) !important;
  color: var(--upsgc-brand-colors-black) !important;
  border-color: var(--upsgc-brand-colors-gold) !important;
}

/*
 * Country checkboxes: gold checked-fill instead of the WordPress admin color
 * scheme's accent (which renders pink on some schemes). WP draws checkboxes
 * with appearance:none + a ::before checkmark, so we override the checked
 * background/border and recolor the checkmark for contrast on gold.
 */
.upsgc-rc-country-list input[type="checkbox"] {
  accent-color: var(--upsgc-brand-colors-gold);
}

.upsgc-rc-country-list input[type="checkbox"]:checked {
  background-color: var(--upsgc-brand-colors-gold) !important;
  border-color: var(--upsgc-brand-colors-gold) !important;
}

.upsgc-rc-country-list input[type="checkbox"]:checked::before {
  color: var(--upsgc-brand-colors-black) !important;
}

.upsgc-rc-country-list input[type="checkbox"]:focus {
  border-color: var(--upsgc-brand-colors-gold) !important;
  box-shadow: 0 0 0 1px var(--upsgc-brand-colors-gold) !important;
  outline: none !important;
}

/* Primary "Create flat rate" button — solid gold, matching the plugin's
   primary buttons (this one is nested, so it doesn't inherit the
   .upsgc-settings-section-wrapper > .button rule). */
#upsgc-rc-create {
  background-color: var(--upsgc-brand-colors-gold) !important;
  color: var(--upsgc-brand-colors-black) !important;
  border: none !important;
  border-radius: var(--upsgc-border-radius-lg) !important;
  padding: 10px 28px !important;
  font-weight: var(--upsgc-font-weight-medium) !important;
  box-shadow: none !important;
  margin-top: var(--upsgc-spacing-lg) !important;
}

#upsgc-rc-create:hover {
  background-color: var(--upsgc-brand-colors-gold) !important;
  color: var(--upsgc-brand-colors-black) !important;
  opacity: 0.9;
}

/* Existing flat rates table. */
.upsgc-rate-charts-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--upsgc-spacing-sm);
}

.upsgc-rate-charts-table th,
.upsgc-rate-charts-table td {
  text-align: left;
  padding: var(--upsgc-spacing-md);
  border-bottom: 1px solid var(--upsgc-divider-section);
  vertical-align: top;
}

.upsgc-rate-charts-table thead th {
  font-weight: var(--upsgc-font-weight-medium);
  color: var(--upsgc-on-surface-medium-emphasis);
  border-bottom: 2px solid var(--upsgc-divider-section);
  white-space: nowrap;
}

.upsgc-rate-charts-table__action {
  width: 48px;
  text-align: right;
}

.upsgc-input-modified {
  border: 2px solid var(--upsgc-brand-colors-black) !important;
  color: var(--upsgc-brand-colors-black) !important;
  font-weight: var(--upsgc-font-weight-medium) !important;
}

.upsgc-icon-round-button {
  padding: 0;
  background-color: transparent;
  border-radius: 50%;
  color: var(--upsgc-action-secondary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: underline;
}

/* Floating notice styles */
.upsgc-floating-notice {
  position: fixed;
  top: var(--upsgc-spacing-5xl);
  right: 5%;
  transform: translateX(5%) translateY(var(--upsgc-spacing-3xl));
  z-index: 9999;
  min-width: 320px;
  max-width: 365px;
  border-radius: var(--upsgc-border-radius-sm);
  box-shadow: var(--upsgc-elevation-4-shadow);
  animation: upsgc-slide-up 0.3s ease-out forwards;
  font-family: var(--upsgc-font-family);
  font-weight: var(--upsgc-font-weight-medium);
}

@keyframes upsgc-slide-up {
  from {
    opacity: 0;
    transform: translateX(5%) translateY(var(--upsgc-spacing-3xl));
  }
  to {
    opacity: 1;
    transform: translateX(5%) translateY(0);
  }
}

@keyframes upsgc-slide-down {
  from {
    opacity: 1;
    transform: translateX(5%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(5%) translateY(var(--upsgc-spacing-3xl));
  }
}

.upsgc-floating-notice.upsgc-sliding-out {
  animation: upsgc-slide-down 0.3s ease-in forwards;
}

.upsgc-floating-notice-warning {
  background-color: var(--upsgc-background-warning);
  color: var(--upsgc-text-warning);
}

.upsgc-floating-notice-warning
  > .upsgc-floating-notice-content
  > .upsgc-floating-notice-close {
  color: var(--upsgc-text-warning);
}

.upsgc-floating-notice-info {
  background-color: var(--upsgc-background-info);
  color: var(--upsgc-text-info);
}

.upsgc-floating-notice-info
  > .upsgc-floating-notice-content
  > .upsgc-floating-notice-close {
  color: var(--upsgc-text-info);
}

.upsgc-floating-notice-success {
  background-color: var(--upsgc-background-success);
  color: var(--upsgc-text-success);
}

.upsgc-floating-notice-success
  > .upsgc-floating-notice-content
  > .upsgc-floating-notice-close {
  color: var(--upsgc-text-success);
}

.upsgc-floating-notice-error {
  background-color: var(--upsgc-background-error);
  color: var(--upsgc-text-error);
}

.upsgc-floating-notice-error
  > .upsgc-floating-notice-content
  > .upsgc-floating-notice-close {
  color: var(--upsgc-text-error);
}

.upsgc-floating-notice-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--upsgc-spacing-md);
  padding: var(--upsgc-spacing-lg);
}

.upsgc-floating-notice-content p {
  margin: 0;
  font-size: var(--upsgc-label-md-size);
  line-height: var(--upsgc-label-md-line-height);
  flex: 1;
}

.upsgc-floating-notice-close {
  background: none;
  border: none;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--upsgc-brand-colors-black);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
}

/* Common styles */
.upsgc-min-width-357 {
  min-width: 357px;
}

.upsgc-vertical-align-middle {
  vertical-align: middle;
}

.upsgc-hidden {
  display: none;
}

.upsgc-no-margin {
  margin: 0;
}

.upsgc-margin-right-sm {
  margin: 0;
  margin-right: var(--upsgc-spacing-sm) !important;
}

.upsgc-margin-left-xs {
  margin: 0;
  margin-left: var(--upsgc-spacing-xs) !important;
}

.upsgc-margin-top-xs {
  margin: 0;
  margin-top: var(--upsgc-spacing-xs) !important;
}

.upsgc-top-margin-lg {
  margin: 0;
  margin-top: var(--upsgc-spacing-lg) !important;
}

.upsgc-top-margin-3xl {
  margin: 0;
  margin-top: var(--upsgc-spacing-3xl) !important;
}

.upsgc-bottom-margin-lg {
  margin: 0;
  margin-bottom: var(--upsgc-spacing-lg) !important;
}

.upsgc-bottom-margin-2xl {
  margin: 0;
  margin-bottom: var(--upsgc-spacing-2xl) !important;
}

.upsgc-bottom-margin-3xl {
  margin: 0;
  margin-bottom: var(--upsgc-spacing-3xl) !important;
}

.upsgc-bottom-margin-5xl {
  margin: 0;
  margin-bottom: var(--upsgc-spacing-5xl) !important;
}

/* Icon styles */
.upsgc-icon {
  width: 58px;
  height: 64px;
}

.upsgc-log-actions-buttons .button {
  display: inline-flex;
  align-items: center;
  gap: var(--upsgc-spacing-xs);
  margin: 0 var(--upsgc-spacing-sm) 0 0 !important;
  text-decoration: none !important;
}

.upsgc-log-actions-buttons .button .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  /*
   * Center the glyph within its own box. The button is already a flex row with
   * align-items:center, but the dashicons font renders its glyph slightly high
   * inside the line box, so the icon looked misaligned against the label.
   * Making the icon span a centered flex box (with line-height reset) lines the
   * glyph up with the text.
   */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.upsgc-toggle-wrapper > .upsgc-body-reg {
  margin-top: var(--upsgc-spacing-lg);
  color: var(--upsgc-on-surface-medium-emphasis);
}

/* Toggle switch */
.upsgc-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.upsgc-toggle-checkbox {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
}

.upsgc-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--upsgc-status-feature-on-feature-container);
  border-radius: 24px;
  transition: background-color 0.2s ease;
  pointer-events: none;
}

.upsgc-toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 23px;
  top: 3px;
  background-color: var(--upsgc-brand-colors-white);
  border-radius: 50%;
  transition: left 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Checked = disabled service = off state (gray, knob left) */
.upsgc-toggle-checkbox:checked + .upsgc-toggle-slider {
  background-color: var(--upsgc-divider-section);
}

.upsgc-toggle-checkbox:checked + .upsgc-toggle-slider::before {
  left: 3px;
}

/* Service level item layout */
#upsgc-dynamic-service-level-section .upsgc-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: var(--upsgc-spacing-md);
}

.upsgc-toggle-service-info {
  display: flex;
  flex-direction: column;
  gap: var(--upsgc-spacing-xs);
}

.upsgc-service-status-text {
  font-size: var(--upsgc-label-sm-size);
  line-height: var(--upsgc-label-sm-line-height);
  font-weight: var(--upsgc-font-weight-medium);
}

.upsgc-service-status-text.upsgc-status-enabled {
  color: var(--upsgc-text-success);
}

.upsgc-service-status-text.upsgc-status-disabled {
  color: var(--upsgc-on-surface-medium-emphasis);
}

/* Missing utility classes */
.upsgc-text-color-subtle {
  color: var(--upsgc-on-surface-medium-emphasis) !important;
}

.upsgc-bottom-margin-md {
  margin: 0;
  margin-bottom: var(--upsgc-spacing-md) !important;
}

.upsgc-margin-left-md {
  margin: 0;
  margin-left: var(--upsgc-spacing-md) !important;
}