/* Shipping Options - Enhanced Spacing */

.cod-shipping {
  display: flex;
  flex-direction: column;
  /* Add gap for spacing between chips */
  gap: var(--spacing-md, 12px);
  margin-top: 0px;
}

.shipping-option {
  display: flex;
  align-items: center;

  /* ✅ UNIFIED: 56px height like all buttons */
  min-height: 56px;
  padding: 0 var(--spacing-xl, 18px);

  /* ✅ UNIFIED: Same as inputs/selects/variations */
  background: var(--cod-state-default-bg, #ffffff);
  border: 2px solid var(--cod-state-default-border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);

  /* Interaction */
  cursor: pointer;
  transition: all var(--transition-base, 0.2s ease);
  user-select: none;
}

/* ✅ UNIFIED: Same hover as all components */
.shipping-option:hover {
  border-color: var(--cod-state-hover-border, var(--cod-primary, #0adb62));
  transform: translateX(2px);
}

/* ✅ UNIFIED: Same selected state - clean, no shadow */
.shipping-option.selected {
  background: var(--cod-state-default-bg, #ffffff);
  border-color: var(--cod-state-active-border, var(--cod-primary, #0adb62));
}

/* ============================================
   CUSTOM RADIO BUTTON
   ============================================ */
.shipping-option input[type="radio"] {
  margin: 0 var(--spacing-md, 12px) 0 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;

  /* ✅ Remove default browser styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* ✅ Custom styling to match design system */
  border: 2px solid var(--cod-state-default-border, #e5e7eb);
  border-radius: 50%;
  background: var(--cod-state-default-bg, #ffffff);
  transition: all var(--transition-base, 0.2s ease);
  position: relative;
}

/* Radio hover - border turns green */
.shipping-option:hover input[type="radio"] {
  border-color: var(--cod-primary, #0adb62);
}

/* Radio checked - filled with primary color */
.shipping-option input[type="radio"]:checked {
  border-color: var(--cod-primary, #0adb62);
  background: var(--cod-primary, #0adb62);
}

/* Radio checked - white inner dot */
.shipping-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* background: #ffffff; */
}

/* Remove focus outline */
.shipping-option input[type="radio"]:focus {
  outline: none;
  box-shadow: none;
}

/* ============================================
   LABEL & PRICE
   ============================================ */
.shipping-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: var(--font-size-base, 15px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--cod-text, #052f1b);
  gap: var(--spacing-md, 12px);
}

.shipping-price {
  color: var(--cod-primary, #0adb62);
  font-weight: var(--font-weight-bold, 700);
  white-space: nowrap;
}

/* ============================================
   ENHANCED SECTION SPACING
   ============================================ */

/* Delivery Company Section */
.cod-delivery-section {
  margin-top: 0px;
}

/* Section Labels - Better Spacing */
.cod-section-label {
  display: block;
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--cod-text, #052f1b);
  margin-top: 0;
  margin-bottom: 0;
  /* margin-bottom: var(--spacing-sm, 8px); */
}