/* Ported from 2ip templates/2ip/css/shared-ui.css at 861fc13.
   Standalone adaptations: preserved share metrics, native/ARIA disabled and busy,
   pointer-qualified hover and reduced motion. Theme roles stay owned by speedtest. */
/* Ordinary labeled buttons: four semantic palettes, one geometry/state model.
   Legacy names are adapters; explicit product roles take precedence. */
body .btn {
  --twoip-button-accent: var(--twoip-primary);
  --twoip-button-container: var(--twoip-primary-container);
  --twoip-button-on-accent: var(--twoip-button-on-primary);
  --twoip-button-on-container: var(--twoip-on-primary-container);
  --twoip-button-fill: transparent;
  --twoip-button-ink: color-mix(in srgb, var(--twoip-button-accent) 94%, var(--twoip-on-surface));
  --twoip-button-border: var(--twoip-button-accent);
  --twoip-button-focus: var(--twoip-button-accent);
  --twoip-control-focus: var(--twoip-button-accent);
}
body .btn.btn:not(.control-el):not(.input-password-toggle):not(.twoip-icon-action):where(:not(.dropdown-toggle,.twoip-button--icon)) {
  min-height: var(--st-action-min-height, 44px);
  padding: 8px 16px;
  border: var(--st-action-border-width, 1px) solid var(--twoip-button-border);
  border-radius: var(--st-action-radius, var(--twoip-radius-medium));
  outline-offset: 3px;
  background: var(--twoip-button-fill);
  color: var(--twoip-button-ink);
  box-shadow: none;
  text-transform: none;
  font-family: "2ip";
  font-size: 15px;
  font-weight: normal;
  line-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--twoip-button-gap, 6px);
  white-space: var(--twoip-button-white-space, normal);
  word-break: normal;
  overflow-wrap: normal;
  text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease;
}
body .btn.btn:is(.btn-success,.twoip-button--save,[data-twoip-button-role="save"]) {
  --twoip-button-gap: var(--twoip-service-option-row-gap, 8px);
  --twoip-button-accent: var(--twoip-success);
  --twoip-button-container: var(--twoip-success-container);
  --twoip-button-on-accent: var(--twoip-on-success);
  --twoip-button-on-container: var(--twoip-success);
}
body .btn.btn:is(.btn-danger,.btn-delete,.twoip-button--destructive-outlined,[data-twoip-button-role="delete"]) {
  --twoip-button-accent: var(--twoip-error);
  --twoip-button-container: var(--twoip-error-container);
  --twoip-button-on-accent: var(--twoip-on-error);
  --twoip-button-on-container: var(--twoip-error);
}
body .btn.btn:is(.btn-warning,.twoip-button--warning,[data-twoip-button-role="warning"]) {
  --twoip-button-accent: var(--twoip-warning);
  --twoip-button-container: var(--twoip-warning-container);
  --twoip-button-on-accent: var(--twoip-on-warning);
  --twoip-button-on-container: var(--twoip-warning);
}
/* Explicit ordinary intent overrides legacy color classes (including logout). */
body .btn.btn[data-twoip-button-role="action"] {
  --twoip-button-accent: var(--twoip-primary);
  --twoip-button-container: var(--twoip-primary-container);
  --twoip-button-on-accent: var(--twoip-button-on-primary);
  --twoip-button-on-container: var(--twoip-on-primary-container);
}
body .btn.btn:not(.control-el):not(.input-password-toggle):not(.twoip-icon-action):where(:not(.dropdown-toggle,.twoip-button--icon)):not(:disabled):not(.disabled):not([aria-disabled="true"]):not([aria-busy="true"]):focus-visible {
  --twoip-button-fill: var(--twoip-button-container);
  --twoip-button-ink: var(--twoip-button-on-container);
  background: var(--twoip-button-fill);
  color: var(--twoip-button-ink);
  border-color: var(--twoip-button-border);
  box-shadow: var(--twoip-elevation-1);
}
@media (hover: hover) and (pointer: fine) {
body .btn.btn:not(.control-el):not(.input-password-toggle):not(.twoip-icon-action):where(:not(.dropdown-toggle,.twoip-button--icon)):not(:disabled):not(.disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
  --twoip-button-fill: var(--twoip-button-container);
  --twoip-button-ink: var(--twoip-button-on-container);
  background: var(--twoip-button-fill);
  color: var(--twoip-button-ink);
  border-color: var(--twoip-button-border);
  box-shadow: var(--twoip-elevation-1);
}
}
body .btn.btn:not(.control-el):not(.input-password-toggle):not(.twoip-icon-action):where(:not(.dropdown-toggle,.twoip-button--icon)):not(:disabled):not(.disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
  --twoip-button-fill: var(--twoip-button-accent);
  --twoip-button-ink: var(--twoip-button-on-accent);
  background: var(--twoip-button-fill);
  color: var(--twoip-button-ink);
  border-color: var(--twoip-button-border);
  box-shadow: inset 0 0 0 1px var(--twoip-button-border);
}
body .btn.btn:not(.control-el):not(.input-password-toggle):not(.twoip-icon-action):where(:not(.dropdown-toggle,.twoip-button--icon)):focus-visible {
  outline: 2px solid var(--twoip-button-focus);
  outline-offset: 3px;
}
body .btn.btn:is(:disabled,.disabled,[aria-disabled="true"],[aria-busy="true"]),
body fieldset:disabled .btn.btn {
  opacity: .5;
  box-shadow: none;
  cursor: default;
}
body .btn.btn .twoip-icon {
  width: 18px;
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
  position: static;
  margin-inline-end: 0;
  vertical-align: middle;
  color: inherit;
}
body .btn.btn.twoip-button--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--twoip-radius-full);
}
/* Stored CMS label markup must not restore link decoration inside controls. */
body .btn.btn :is(span,a,i,.twoip-inline-label) {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}
body .btn.btn.twoip-inline-link {
  border-bottom: 1px solid var(--twoip-button-border);
  color: var(--twoip-button-ink) !important;
}

/* Icon actions share a native hit area, independently of glyph shape or label buttons. */
body .twoip-icon-action {
  --twoip-icon-action-ink: var(--twoip-primary);
  --twoip-icon-action-container: var(--twoip-primary-container);
  --twoip-icon-action-on-container: var(--twoip-on-primary-container);
}
body .twoip-icon-action,
body .btn.btn.twoip-icon-action {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 var(--twoip-icon-action-size); box-sizing: border-box; width: var(--twoip-icon-action-size); height: var(--twoip-icon-action-size); min-width: var(--twoip-icon-action-size); min-height: var(--twoip-icon-action-size);
  padding: 0; margin: 0; border: 0; border-radius: var(--twoip-radius-full);
  background: transparent; color: var(--twoip-icon-action-ink); text-decoration: none;
  line-height: 1; vertical-align: middle; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
body .twoip-icon-action.twoip-destructive-control {
  --twoip-icon-action-ink: var(--twoip-error); --twoip-icon-action-container: var(--twoip-error-container);
  --twoip-icon-action-on-container: var(--twoip-error);
}
body .twoip-icon-action--warning {
  --twoip-icon-action-ink: var(--twoip-warning); --twoip-icon-action-container: var(--twoip-warning-container);
  --twoip-icon-action-on-container: var(--twoip-on-warning-container);
}
body .twoip-icon-action--success {
  --twoip-icon-action-ink: var(--twoip-success); --twoip-icon-action-container: var(--twoip-success-container);
  --twoip-icon-action-on-container: var(--twoip-success);
}
body .twoip-icon-action > .twoip-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  position: static; margin: 0; padding: 0; color: currentColor; font-size: 20px; line-height: 1; transform: none;
}
body .twoip-icon-action:not(:disabled):not(.disabled):not([aria-disabled="true"]):not(.not-allowed):not([aria-busy="true"]):is(:focus-visible,:active) {
  background: var(--twoip-icon-action-container); color: var(--twoip-icon-action-on-container);
}
body .twoip-icon-action:focus-visible { outline: 2px solid var(--twoip-icon-action-ink); outline-offset: 2px; }
body .twoip-icon-action:not(:disabled):not(.disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active { box-shadow: inset 0 0 0 2px var(--twoip-icon-action-ink); }
body .twoip-icon-action:is(:disabled,.disabled,[aria-disabled="true"],[aria-busy="true"]) { opacity: .38; cursor: default; box-shadow: none; }

/* Filled and text variants use the same state variables as outlined actions. */
body .btn.btn:is(.btn-primary,.twoip-button--filled),body .btn.btn:where(#speedo-share).active {
  --twoip-button-fill: var(--twoip-button-accent);
  --twoip-button-ink: var(--twoip-button-on-accent);
}
body .btn.btn.twoip-button--text { --twoip-button-border: transparent; }
body #speedo-share { --twoip-button-border: var(--st-action-border-color); }
body #speedo-share[aria-disabled="true"] {
  opacity: 1; --twoip-button-ink: var(--twoip-on-surface-variant);
  --twoip-button-fill: var(--twoip-surface-container-low);
}
body .btn.btn[aria-busy="true"] { cursor: progress; }
body .btn.btn svg { fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  body .twoip-icon-action:not(:disabled):not(.disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
    background: var(--twoip-icon-action-container); color: var(--twoip-icon-action-on-container);
  }
}
body .twoip-icon-action :is(i,svg) { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  body .btn.btn, body .twoip-icon-action { transition: none; }
}

/* 2IP shared-ui.css icon-action/destructive component, filled dialog variant.
   Geometry/glyph/states are inherited; the error container remains visible at rest. */
body .twoip-icon-action.twoip-modal-close {
  border-radius: 50%;
  background: color-mix(in srgb, var(--twoip-icon-action-container) 70%, var(--twoip-surface));
}
@media (hover: hover) and (pointer: fine) {
  body .twoip-modal-close:not(:disabled):hover { background: var(--twoip-icon-action-container); }
}
body .twoip-modal-close:not(:disabled):is(:focus-visible,:active) { background: var(--twoip-icon-action-container); }
/* Equal action tracks center the title independently of the close control. */
:is(.st-legal-modal,.st-centered-modal) .modal-header {
  display: grid;
  grid-template-columns: var(--twoip-icon-action-size) minmax(0, 1fr) var(--twoip-icon-action-size);
  align-items: center;
  gap: 8px;
}
:is(.st-legal-modal,.st-centered-modal) .modal-title {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}
:is(.st-legal-modal,.st-centered-modal) .modal-title > i { flex: none; margin: 0; }
:is(.st-legal-modal,.st-centered-modal) .modal-title > span { min-width: 0; overflow-wrap: anywhere; }
:is(.st-legal-modal,.st-centered-modal) .twoip-modal-close { grid-column: 3; }