/* Basic layout and polish for the checkout */
#apra-checkout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px;
}

.apra-steps {
  display: flex;
  gap: 8px;
  margin: 8px 0 16px;
}
.apra-step {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 1.2;
}
.apra-step.is-done { opacity: .7; }
.apra-step.is-current { border-width: 2px; }

/* Grid for two-column layout when using the template override */
.apra-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .apra-grid { grid-template-columns: 1fr; }
}

.apra-col-right {
  position: sticky;
  top: 12px;
  height: fit-content;
}

.apra-col-right .cart_item { border-bottom: 1px solid #eee; padding: 6px 0; }

/* Make inputs a bit nicer */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 10px 12px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border-color: #c7cbd1;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.woocommerce-checkout #payment {
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 12px;
}
.woocommerce #order_review_heading { margin-top: 20px; }