/*
 * For the full copyright and license information, please view the
 * docs/licenses/LICENSE.txt file that was distributed with this source code.
 */

.psopc-configuration form {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 32px 64px 64px;
}

.psopc-configuration .card {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 1px solid #d6dbe1;
  background: #ffffff;
}

.psopc-configuration .card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: #ffffff;
}

.psopc-configuration .checkout-layout-header {
  margin: 0;
}

.checkout-layout-title {
  margin: 0 0 0.5rem;
  margin-top: 0 !important;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1d1d1b;
}

.checkout-layout-description {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #576c7b;
}

.psopc-configuration .enriched-choice {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.psopc-configuration .enriched-choice > .form-check-radio {
  display: flex;
  flex: 1 1 0;
  align-items: flex-start;
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid #b8c4cc;
  background: #fff;
  cursor: pointer;
  color: #1d1d1b;
}

.psopc-configuration .enriched-choice > .form-check-radio:has(input[type="radio"]:checked) {
  border-color: #1d1d1b;
  box-shadow: inset 0 0 0 1px #1d1d1b;
}

.psopc-configuration .enriched-choice .form-check-round {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #1d1d1b;
  border-radius: 50%;
  background: #fff;
}

.psopc-configuration .enriched-choice > .form-check-radio > .d-flex.align-items-start.shrink-0 {
  margin-right: 0.75rem !important;
  padding-top: 0.125rem;
}

.psopc-configuration .enriched-choice input[type="radio"] {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.psopc-configuration .enriched-choice input[type="radio"]:checked + .form-check-round::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #1d1d1b;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.psopc-configuration .enriched-choice .enriched-choice-title {
  margin-bottom: 8px;
  column-gap: 8px;
  row-gap: 0.25rem;
}

.psopc-configuration .enriched-choice .enriched-choice-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: #1d1d1b;
  margin-right: 0;
}

.psopc-configuration .enriched-choice .enriched-choice-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  color: #23374a;
  background-color: #dfe7ff;
  border-radius: 44px;
}

.psopc-configuration .enriched-choice .enriched-choice-body {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  column-gap: 1rem;
}

.psopc-configuration .enriched-choice .enriched-choice-text {
  flex: 1;
  min-width: 0;
}

.psopc-configuration .enriched-choice .enriched-choice-description,
.psopc-configuration .enriched-choice .enriched-choice-features {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #1d1d1b;
}

.psopc-configuration .enriched-choice .enriched-choice-description {
  margin: 0 0 0.75rem;
  text-indent: 0;
}

.psopc-configuration .enriched-choice .enriched-choice-features {
  margin: 0;
  padding-left: 1.25rem;
  list-style-position: outside;
}

.psopc-configuration .enriched-choice .enriched-choice-features li {
  margin-bottom: 0.25rem;
}

.psopc-configuration .enriched-choice .enriched-choice-illustration {
  width: 152px;
  height: 137px;
  margin-left: auto;
  align-self: flex-start;
}

.psopc-configuration .enriched-choice .enriched-choice-illustration img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.psopc-configuration .psopc-actions {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

@media (max-width: 991.98px) {
  .psopc-configuration .enriched-choice .enriched-choice-illustration {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  .psopc-configuration .enriched-choice {
    flex-direction: column !important;
  }

  .psopc-configuration .enriched-choice .enriched-choice-title {
    flex-wrap: wrap;
  }

  .psopc-configuration .enriched-choice .enriched-choice-badge {
    margin-top: 0.25rem;
  }
}

#psopc-confirmation-modal .modal-dialog {
  top: 50%;
  transform: translateY(-50%);
  max-height: 100vh;
}

#psopc-confirmation-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: none;
}

#psopc-confirmation-modal .modal-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

#psopc-confirmation-modal .modal-header .close {
  padding: 0;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1;
  background: transparent;
  border: 0;
  opacity: 0.5;
}

#psopc-confirmation-modal .modal-header .close:hover {
  opacity: 1;
}

#psopc-confirmation-modal .modal-footer {
  border-top: none;
}

.psopc-modal-intro {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: #1D1D1B;
}

.psopc-modal-checklist-title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1D1D1B;
}

.psopc-modal-checklist {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: #1D1D1B;
  line-height: 1.5;
}

.psopc-modal-checklist li {
  margin-bottom: 0.5rem;
}

.psopc-modal-checklist li:last-child {
  margin-bottom: 0;
}

.psopc-modal-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #FFF5E5;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.psopc-modal-warning-icon {
  color: #ffa000;
  font-size: 20px;
  flex-shrink: 0;
}

.psopc-modal-warning span:last-child {
  font-size: 0.875rem;
  color: #3f3f3d;
  line-height: 1.5;
}

.psopc-maintenance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
}

.psopc-maintenance-row > span:first-child {
  font-size: 14px;
  color: #1D1D1B;
}

/* Toggle switch */
.psopc-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 24px;
  margin: 0;
}

.psopc-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.psopc-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #DDDDDD;
  transition: 0.2s;
  border-radius: 24px;
}

.psopc-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  transition: 0.2s;
  border-radius: 50%;
}

.psopc-toggle input:checked + .psopc-toggle-slider {
  background-color: #207f4b;
}

.psopc-toggle input:checked + .psopc-toggle-slider:before {
  transform: translateX(12px);
}