/* Unsubscribe page (page-unsubscribe.php) */

.unsubscribe-box {
  background: #f5f5f5;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  margin: 0 auto;
  max-width: 1130px;
  padding: 40px 46px;
}

@media (max-width: 1023px) {
  .unsubscribe-box {
    padding: 30px 16px;
  }
}

.unsubscribe-content {
  margin-bottom: 24px;
}

.unsubscribe-content h1 {
  color: #194247;
  margin-bottom: 20px;
}

.unsubscribe-content > :last-child {
  margin-bottom: 0;
}

/* Form */

.unsubscribe-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 683px;
}

.unsubscribe-options-title {
  color: #194247;
  font-size: 18px;
  font-weight: 500;
}

.unsubscribe-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.unsubscribe-option {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  display: flex;
  gap: 37px;
  min-height: 63px;
  padding: 10px 10px 10px 24px;
  position: relative;
  transition: background-color 0.2s linear, border-color 0.2s linear;
}

@media (max-width: 767px) {
  .unsubscribe-option {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding-left: 16px;
  }
}

.unsubscribe-option.is-active {
  background: #194247;
  border-color: #194247;
}

.unsubscribe-option.is-active .unsubscribe-option-text {
  color: #ffffff;
}

.unsubscribe-option.is-active .unsubscribe-option-icon {
  background-color: #ffffff;
}

.unsubscribe-option-label {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  gap: 16px;
  margin: 0;
  min-height: 43px;
}

.unsubscribe-option-label input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.unsubscribe-option-check {
  background-color: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  flex-shrink: 0;
  height: 20px;
  width: 20px;
}

.unsubscribe-option-label input:focus-visible + .unsubscribe-option-check {
  outline: 2px solid #ff360d;
  outline-offset: 2px;
}

.unsubscribe-option-label input:checked + .unsubscribe-option-check {
  background-color: #ff360d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.208' height='10.438' viewBox='0 0 14.208 10.438'%3E%3Cpath d='M14.043,2.136,5.9,10.275a.559.559,0,0,1-.789,0L.162,5.293a.56.56,0,0,1,0-.79L1.345,3.316a.558.558,0,0,1,.789,0l3.378,3.4L12.07.162a.56.56,0,0,1,.79,0l1.182,1.184A.556.556,0,0,1,14.043,2.136Z' fill='white'/%3E%3C/svg%3E");
  border-color: #ff360d;
}

.unsubscribe-option-icon {
  background-color: #194247;
  flex-shrink: 0;
  height: 13px;
  margin-right: -4px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 15px;
}

.unsubscribe-option-icon--email {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13' fill='none'%3E%3Crect x='0.75' y='1.25' width='13.5' height='10.5' rx='1.5' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M1.5 2.5L7.5 7L13.5 2.5' stroke='black' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13' fill='none'%3E%3Crect x='0.75' y='1.25' width='13.5' height='10.5' rx='1.5' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M1.5 2.5L7.5 7L13.5 2.5' stroke='black' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.unsubscribe-option-icon--phone {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M4.3 1H2.2C1.5 1 1 1.6 1 2.2C1.1 7.6 5.4 11.9 10.8 12C11.4 12 12 11.5 12 10.8V8.7L9.4 7.6L8.2 8.8C6.5 8 5 6.5 4.2 4.8L5.4 3.6L4.3 1Z' stroke='black' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M4.3 1H2.2C1.5 1 1 1.6 1 2.2C1.1 7.6 5.4 11.9 10.8 12C11.4 12 12 11.5 12 10.8V8.7L9.4 7.6L8.2 8.8C6.5 8 5 6.5 4.2 4.8L5.4 3.6L4.3 1Z' stroke='black' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.unsubscribe-option-text {
  color: #000000;
  font-size: 16px;
  line-height: 16px;
}

.unsubscribe-option-input {
  flex: 0 1 358px;
  margin-left: auto;
  position: relative;
}

@media (max-width: 767px) {
  .unsubscribe-option-input {
    flex-basis: auto;
    margin-left: 0;
  }
}

/* Hidden but still laid out: intl-tel-input measures the selected flag on init
   to set the input padding, and display: none would make it fall back to
   measuring an unstyled clone appended to <body>. */
.unsubscribe-option:not(.is-active) .unsubscribe-option-input {
  max-width: 100%;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  visibility: hidden;
  width: 358px;
}

.unsubscribe-option-input input:not(.iti__search-input) {
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #000000;
  font-size: 16px;
  height: 43px;
  margin: 0;
  padding: 0 20px;
  width: 100%;
}

.unsubscribe-option-input input:not(.iti__search-input):focus,
.unsubscribe-option-input input:not(.iti__search-input):hover {
  border-color: #ff360d;
  outline: none;
}

.unsubscribe-option-input input.has-error,
.unsubscribe-option-input input.has-error:hover {
  border-color: #ff0000;
}

/* Phone field */

.unsubscribe-option-input .iti {
  display: block;
  width: 100%;
}

.unsubscribe-option-input .iti__flag-container {
  padding: 0;
}

/* The plugin pads the input to this element's width + 6px, so the divider
   sits inside its right padding to leave room before the number. */
.unsubscribe-option-input .iti--separate-dial-code .iti__selected-flag {
  background-color: transparent;
  border-radius: 3px 0 0 3px;
  padding: 0 16px 0 20px;
}

.unsubscribe-option-input .iti__selected-flag::after {
  background-color: #d9d9d9;
  bottom: 10px;
  content: '';
  position: absolute;
  right: 8px;
  top: 10px;
  width: 1px;
}

.unsubscribe-option-input .iti__arrow {
  display: none;
}

.unsubscribe-option-input .iti__selected-dial-code {
  color: #000000;
  font-size: 16px;
}

/* Errors */

.unsubscribe-error-label,
.unsubscribe-form-error {
  color: #ff0000;
  font-size: 13px;
}

.unsubscribe-option.is-active .unsubscribe-error-label {
  color: #ffffff;
}

.unsubscribe-error-label {
  margin-top: 4px;
}

.unsubscribe-form-error:empty {
  display: none;
}

/* Submit */

.unsubscribe-submit {
  align-self: flex-start;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  min-width: 200px;
  padding: 13px 24px;
}

@media (max-width: 767px) {
  .unsubscribe-submit {
    align-self: stretch;
  }
}

.unsubscribe-form.loading .unsubscribe-submit {
  background-image: url('../images/loading_spinner.gif');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px;
  color: transparent;
  pointer-events: none;
}

/* Success */

.unsubscribe-success {
  align-items: center;
  display: none;
  gap: 24px;
}

.unsubscribe-box.is-success .unsubscribe-content,
.unsubscribe-box.is-success .unsubscribe-form {
  display: none;
}

.unsubscribe-box.is-success .unsubscribe-success {
  display: flex;
}

.unsubscribe-success-check {
  background-color: #ff360d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 19.6364 19.6364' fill='none'%3E%3Cpath d='M16.3638 5.31818L7.36381 14.3182L3.2729 10.2273' stroke='white' stroke-width='2.45455' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  height: 36px;
  width: 36px;
}

.unsubscribe-success-text {
  color: #194247;
  font-size: 24px;
  font-weight: 500;
}

@media (max-width: 1023px) {
  .unsubscribe-success-text {
    font-size: 18px;
  }
}

.unsubscribe-success-icon {
  background-color: #194247;
  flex-shrink: 0;
  height: 35px;
  margin-left: auto;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35' fill='none'%3E%3Crect x='0.5' y='0.5' width='34' height='34' rx='17' stroke='black' stroke-opacity='0.2'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.5674 11.5C24.4364 11.5002 24.9996 12.2975 25 13.0928V22.0166C24.9999 22.3994 24.8558 22.7722 24.5908 23.0527C24.325 23.3345 23.9578 23.5 23.5664 23.5H11.4336C11.0423 23.5 10.674 23.3354 10.4082 23.0537C10.1433 22.7732 10.0001 22.3994 10 22.0166V13.0928C10.0004 12.2974 10.5635 11.5002 11.4326 11.5H23.5674ZM18.3291 19.123C17.8335 19.5121 17.1664 19.5123 16.6709 19.123C15.4639 18.1749 12.4537 15.8118 11 14.6699V22.0166C11.0001 22.1582 11.0535 22.2876 11.1387 22.3779C11.2238 22.4679 11.3303 22.5107 11.4336 22.5107H23.5664C23.6697 22.5107 23.7762 22.468 23.8604 22.3789C23.9465 22.2876 23.9999 22.1582 24 22.0166V14.6699C22.5465 15.8117 19.5356 18.1752 18.3291 19.123ZM11.4326 12.4893C11.2719 12.4895 11.0004 12.6755 11 13.0928C11 13.3058 11.0917 13.477 11.1992 13.5615C12.3837 14.4921 15.951 17.2944 17.293 18.3486C17.4244 18.4518 17.5756 18.4518 17.707 18.3486C19.0495 17.294 22.6158 14.4924 23.8008 13.5615C23.948 13.3892 24 13.2536 24 13.0938C23.9996 12.6765 23.7281 12.4895 23.5674 12.4893H11.4326Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35' fill='none'%3E%3Crect x='0.5' y='0.5' width='34' height='34' rx='17' stroke='black' stroke-opacity='0.2'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.5674 11.5C24.4364 11.5002 24.9996 12.2975 25 13.0928V22.0166C24.9999 22.3994 24.8558 22.7722 24.5908 23.0527C24.325 23.3345 23.9578 23.5 23.5664 23.5H11.4336C11.0423 23.5 10.674 23.3354 10.4082 23.0537C10.1433 22.7732 10.0001 22.3994 10 22.0166V13.0928C10.0004 12.2974 10.5635 11.5002 11.4326 11.5H23.5674ZM18.3291 19.123C17.8335 19.5121 17.1664 19.5123 16.6709 19.123C15.4639 18.1749 12.4537 15.8118 11 14.6699V22.0166C11.0001 22.1582 11.0535 22.2876 11.1387 22.3779C11.2238 22.4679 11.3303 22.5107 11.4336 22.5107H23.5664C23.6697 22.5107 23.7762 22.468 23.8604 22.3789C23.9465 22.2876 23.9999 22.1582 24 22.0166V14.6699C22.5465 15.8117 19.5356 18.1752 18.3291 19.123ZM11.4326 12.4893C11.2719 12.4895 11.0004 12.6755 11 13.0928C11 13.3058 11.0917 13.477 11.1992 13.5615C12.3837 14.4921 15.951 17.2944 17.293 18.3486C17.4244 18.4518 17.5756 18.4518 17.707 18.3486C19.0495 17.294 22.6158 14.4924 23.8008 13.5615C23.948 13.3892 24 13.2536 24 13.0938C23.9996 12.6765 23.7281 12.4895 23.5674 12.4893H11.4326Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 35px;
}