/* The dark frame color and coral action color are independent theme roles. */
:root{
  --theme-action-color:#FF5966;
  --theme-action-hover-color:#E94656;
  --theme-action-text-color:#FFFFFF;
  --theme-control-tint-color:#F2F3F7;
  --theme-control-border-color:#D4D9E5;
  --theme-focus-color:#B7C1DF;
  --theme-staff-bubble-background:#FFF0F2;
  --theme-staff-bubble-border:#FFD2D8;
  --theme-staff-bubble-text:#71313A;
  --theme-member-unbound-start:#29314E;
  --theme-member-unbound-end:#363E5D;
  --theme-member-unbound-text:#FFFFFF;
  --theme-member-unbound-muted:#E9ECF4;
  --theme-member-unbound-border:#FFFFFF2D;
  --content-selection-color:#29314E;
}

/* Shared controls. Semantic colors for price, member price, warning, success and danger stay untouched. */
.primary{
  background:var(--theme-action-color)!important;
  color:var(--theme-action-text-color)!important;
  border-color:var(--theme-action-color)!important;
  box-shadow:0 8px 16px color-mix(in srgb,var(--theme-action-color) 24%,transparent)!important;
}
.primary:hover,.primary:focus-visible{background:var(--theme-action-hover-color)!important}

.category-row:not(#categoryRow) button.active,
.barcode-row button{
  background:var(--content-selection-color,#29314e)!important;
  border-color:var(--content-selection-color,#29314e)!important;
  color:#fff!important;
}
.category-row .category-save{
  background:var(--theme-action-color,#ff5966)!important;
  border-color:var(--theme-action-color,#ff5966)!important;
  color:var(--theme-action-text-color,#fff)!important;
}

.checkout-form .delivery-methods label.active,
.settlement-options label.active{
  border-color:var(--theme-action-color)!important;
  background:var(--theme-control-tint-color)!important;
  color:var(--theme-action-color)!important;
  box-shadow:0 4px 10px color-mix(in srgb,var(--theme-action-color) 18%,transparent)!important;
}
.checkout-form .delivery-methods label.active:after,
.settlement-options label.active:after{background:var(--theme-action-color)!important}

input:focus,textarea:focus,select:focus{
  border-color:var(--theme-focus-color)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-focus-color) 28%,transparent)!important;
}

.consultation-message.staff,
.consultation-admin-message:not(.staff){
  background:var(--theme-staff-bubble-background)!important;
  border-color:var(--theme-staff-bubble-border)!important;
  color:var(--theme-staff-bubble-text)!important;
}

.member-panel:not(.is-member-bound){
  background:linear-gradient(136deg,var(--theme-member-unbound-start),var(--theme-member-unbound-end))!important;
  border-color:var(--theme-member-unbound-border)!important;
  color:var(--theme-member-unbound-text)!important;
}
.member-panel:not(.is-member-bound) .member-card-unbound-tags,
.member-panel:not(.is-member-bound) #memberLoggedOut label,
.member-panel:not(.is-member-bound) #clearLocalDevice{color:var(--theme-member-unbound-muted)!important}
.member-panel:not(.is-member-bound) #loginMember{
  background:var(--theme-action-color)!important;
  border-color:color-mix(in srgb,var(--theme-action-color) 75%,#fff)!important;
  color:var(--theme-action-text-color)!important;
}
.member-panel:not(.is-member-bound) #loginMember:hover,
.member-panel:not(.is-member-bound) #loginMember:focus-visible{background:var(--theme-action-hover-color)!important}

.topbar nav .menu-count{box-shadow:0 2px 6px color-mix(in srgb,var(--topbar-badge-background-color) 28%,transparent)}

button:disabled,.primary:disabled{
  border-color:#DDE1E9!important;
  background:#E8EBF1!important;
  color:#A1A8B5!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
  opacity:1!important;
}
.category-delete,
[data-promotion-action="delete"],
[data-receipt-footer-action="delete"]{
  border-color:#E7B8BF!important;
  background:#fff!important;
  color:#A73745!important;
}

@supports not (color:color-mix(in srgb,#000 50%,#fff)){
  .primary{box-shadow:0 8px 16px #29314e2e!important}
  input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px #29314e24!important}
  .member-panel:not(.is-member-bound) #loginMember{border-color:#ffffff99!important}
  .topbar nav .menu-count{box-shadow:0 2px 6px #29314e2e}
}