/* =========================================================================
   MyDominicanTrip — Checkout pages
   Final step: traveler info + payment + summary side card.
   Extends home.css + pages.css.
   ========================================================================= */

/* ============ HEAD ============ */
.co-head {
  padding: 25px 32px 40px !important;
}
@media (max-width: 720px) {
  .co-head { padding: 20px 18px 28px !important; }
}
.co-head h1 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(30px, 4.2vw, 44px); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--mdt-navy);
  margin-bottom: 6px;
}
.co-head h1 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 600;
}
.co-code {
  font-family: var(--font-body); font-size: 14px;
  color: var(--fg-3);
}
.co-code strong {
  font-family: var(--font-mono); color: var(--mdt-navy);
  letter-spacing: 0.02em;
}

/* ============ STEPS ============ */
.co-steps {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px; flex-wrap: wrap;
}
.co-step {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: 12px; font-weight: 600;
  color: var(--fg-3);
}
.co-step .num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gray-200); color: var(--fg-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.co-step.done { color: var(--mdt-navy); }
.co-step.done .num { background: var(--green-500); color: #fff; }
.co-step.active { color: var(--mdt-navy); }
.co-step.active .num { background: var(--mdt-red); color: #fff; }
.co-steps .sep { width: 24px; height: 1px; background: var(--gray-300); }

/* ============ LAYOUT ============ */
.co-layout {
  display: grid; gap: 28px;
  grid-template-columns: 1fr;
  padding-bottom: 64px;
}
@media (min-width: 1000px) {
  .co-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; }
}

/* ============ MAIN CARD ============ */
.co-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgba(26,42,82,0.04), 0 12px 30px rgba(26,42,82,0.06);
  padding: 30px 32px;
}
@media (max-width: 600px) { .co-card { padding: 22px 18px; } }
.co-card h2 {
  font-family: var(--font-heading); font-weight: 800; font-size: 20px;
  color: var(--mdt-navy); letter-spacing: -0.005em;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.co-card h2 svg { color: var(--mdt-red); }
.co-card h2 + .co-card-sub {
  margin-top: -12px; margin-bottom: 18px;
  font-size: 13.5px; color: var(--fg-3);
}

.co-form-grid {
  display: grid; gap: 14px 18px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) { .co-form-grid { grid-template-columns: 1fr; } }
.co-form-grid .full { grid-column: 1 / -1; }

.co-field { display: flex; flex-direction: column; }
.co-label {
  font-family: var(--font-heading); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 6px;
}
.co-label .req { color: var(--mdt-red); }
.co-input, .co-select, .co-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 14.5px; color: var(--mdt-navy);
  background: #fff;
  transition: border-color var(--t-base) var(--ease);
}
.co-input:focus, .co-select:focus, .co-textarea:focus { outline: none; border-color: var(--mdt-red); }
.co-textarea { min-height: 96px; resize: vertical; }

.co-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A2A52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}

/* Phone group */
.co-phone {
  display: grid; grid-template-columns: 110px 1fr; gap: 8px;
}

/* ============ PAYMENT METHODS ============ */
.co-section-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 20px;
  color: var(--mdt-navy); letter-spacing: -0.005em;
  margin: 28px 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.co-section-title svg { color: var(--mdt-red); }

.co-pay-list {
  display: grid; gap: 10px;
}
.co-pay {
  display: grid; grid-template-columns: 22px auto 1fr auto;
  gap: 14px; align-items: center;
  padding: 16px 18px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
}
.co-pay:hover { border-color: var(--gray-400); }
.co-pay.selected {
  border-color: var(--mdt-red);
  background: var(--red-50);
  box-shadow: 0 4px 14px rgba(220,38,38,0.10);
}
.co-pay-radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--gray-300);
  position: relative; flex-shrink: 0;
}
.co-pay.selected .co-pay-radio { border-color: var(--mdt-red); }
.co-pay.selected .co-pay-radio::after {
  content: ''; position: absolute; inset: 3px;
  background: var(--mdt-red); border-radius: 50%;
}
.co-pay-ic {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--mdt-navy); flex-shrink: 0;
}
.co-pay.selected .co-pay-ic { background: #fff; color: var(--mdt-red); }
.co-pay-info {}
.co-pay-name {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  color: var(--mdt-navy); letter-spacing: 0.02em; text-transform: uppercase;
}
.co-pay-desc {
  font-size: 12.5px; color: var(--fg-3); margin-top: 3px;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-family: var(--font-body);
}
.co-pay-tag {
  font-family: var(--font-heading); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--green-50); color: var(--green-600);
}
.co-pay-tag.gray { background: var(--gray-100); color: var(--fg-3); }

/* Card details revealed when card method is selected */
.co-card-details {
  margin-top: 14px;
  padding: 18px;
  background: var(--gray-50);
  border-radius: var(--r-sm);
  display: grid; gap: 12px;
  grid-template-columns: repeat(6, 1fr);
}
.co-card-details .full { grid-column: span 6; }
.co-card-details .half { grid-column: span 3; }
.co-card-details .third { grid-column: span 2; }
@media (max-width: 600px) {
  .co-card-details .half, .co-card-details .third { grid-column: span 6; }
}

/* ============ TERMS ============ */
.co-terms {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 22px 0 0;
  font-size: 13.5px; color: var(--fg-2); line-height: 1.55;
}
.co-terms input { width: 18px; height: 18px; accent-color: var(--mdt-red); flex-shrink: 0; margin-top: 2px; }
.co-terms a { color: var(--mdt-red); text-decoration: none; }
.co-terms a:hover { text-decoration: underline; }

/* ============ CTA ============ */
.co-cta {
  width: 100%;
  margin-top: 22px;
  padding: 16px 28px;
  background: var(--mdt-red); color: #fff;
  border: none; border-radius: 9999px;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(220,38,38,0.30);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: all var(--t-base) var(--ease);
}
.co-cta:hover { background: var(--red-600); transform: translateY(-1px); box-shadow: 0 14px 30px rgba(220,38,38,0.40); }
.co-cta:disabled { background: var(--mdt-red); color: #fff; opacity: 0.55; box-shadow: none; cursor: not-allowed; transform: none; }
.co-secure {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: var(--fg-4);
}
.co-secure svg { color: var(--gray-500); }

/* ============ SUMMARY (right rail) ============ */
.co-summary {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgba(26,42,82,0.04), 0 12px 30px rgba(26,42,82,0.06);
  overflow: hidden;
}
@media (min-width: 1000px) { .co-summary { position: sticky; top: 100px; } }
.co-summary-head {
  padding: 22px 24px 14px;
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3);
}
.co-summary-img {
  height: 180px;
  margin: 0 24px;
  background-color: var(--gray-100);
  background-size: cover; background-position: center;
  border-radius: var(--r-md);
}
.co-summary-body { padding: 18px 24px 8px; }
.co-summary-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 17px;
  color: var(--mdt-navy); letter-spacing: -0.005em; line-height: 1.3;
  margin-bottom: 4px;
}
.co-summary-loc {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--fg-3); margin-bottom: 14px;
}
.co-summary-loc svg { color: var(--mdt-red); }

.co-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 24px;
  font-size: 14px; color: var(--fg-2);
  border-top: 1px solid var(--gray-100);
}
.co-line .lbl { color: var(--fg-2); }
.co-line .val { color: var(--mdt-navy); font-weight: 500; }
.co-line.muted .val { color: var(--fg-3); font-weight: 400; }
.co-line.discount .val { color: var(--green-600); font-weight: 600; }
.co-line.grand {
  padding: 16px 24px; margin-top: 2px;
  border-top: 1px solid var(--border);
  background: var(--gray-50);
}
.co-line.grand .lbl {
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  color: var(--mdt-navy);
}
.co-line.grand .val {
  font-family: var(--font-heading); font-weight: 800; font-size: 22px;
  color: var(--mdt-navy);
}
.co-line.grand .currency {
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  color: var(--fg-3); margin-left: 4px;
}

/* Promo code */
.co-promo {
  padding: 16px 24px 22px;
  border-top: 1px dashed var(--gray-200);
  background: var(--gray-50);
}
.co-promo-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
}
.co-promo input {
  padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 13.5px; color: var(--mdt-navy);
  background: #fff;
}
.co-promo input:focus { outline: none; border-color: var(--mdt-red); }
.co-promo button {
  padding: 10px 16px;
  background: var(--mdt-navy); color: #fff; border: none; border-radius: var(--r-sm);
  font-family: var(--font-heading); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
}
.co-promo button:hover { background: var(--navy-800); }
.co-promo-label {
  font-family: var(--font-heading); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 8px;
}

/* Trust badges below summary */
.co-trust-list {
  margin-top: 16px;
  background: var(--gray-50); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px;
  display: grid; gap: 12px;
}
.co-trust-list div {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: var(--fg-2); line-height: 1.45;
}
.co-trust-list svg { color: var(--mdt-red); flex-shrink: 0; margin-top: 2px; }
.co-trust-list strong { display: block; font-family: var(--font-heading); color: var(--mdt-navy); font-weight: 700; }