/* Checkout presentation: keep the existing WooCommerce controls and gateway IDs. */
:root { --checkout-blue: #3659c7; }
.form-section-title { letter-spacing: -.025em; }
.form-input, .form-select, .form-textarea { border-radius: 10px; transition: border-color .2s, box-shadow .2s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--checkout-blue); box-shadow: 0 0 0 3px rgba(54,89,199,.12); outline: 0; }
.payment-methods { border: 1px solid #d9dce5; border-radius: 16px; box-shadow: 0 1px 3px rgba(22,34,67,.04); }
.payment-option { min-height: 84px; gap: 14px; padding: 18px 20px; border-bottom-color: #e8eaf0; }
.payment-option.selected { background: #f5f7ff; box-shadow: inset 0 0 0 2px var(--checkout-blue); border-color: var(--checkout-blue); }
.payment-option:focus-within { outline: 3px solid rgba(54,89,199,.2); outline-offset: -3px; }
.payment-option input[type=radio] { accent-color: var(--checkout-blue); width: 21px; height: 21px; }
.payment-option-name { font-size: 1rem; font-weight: 700; }
.payment-option-desc { font-size: .84rem; line-height: 1.4; }
.payment-option-logo { max-height: 30px; max-width: 105px; height: auto; width: auto; }
.payment-option-logo.flow-logo { max-width: 88px; }
.payment-option-content { min-width: 0; }
.payment-section-note { margin: 10px 0 16px; }
.btn-pay { background: var(--checkout-blue); border-radius: 12px; box-shadow: 0 8px 18px rgba(54,89,199,.18); }
.btn-pay:hover { background: #294cba; }
.checkout-sidebar { border-left-color: #e8eaf0; }
.checkout-payment-banner { width: 100%; height: auto; display: block; border-radius: 12px; background: #fff; }
.checkout-assurance { margin: 13px 0 0; font-size: .86rem; line-height: 1.55; color: #475569; }
.checkout-assurance strong { color: #1d2940; }
.checkout-assurance small { display: block; margin-top: 7px; font-size: .78rem; }
.review-country { color: #61708a; font-size: .78rem; line-height: 1.35; text-decoration: underline; }
.review-text { font-style: normal; line-height: 1.5; }
.urgency-bar[hidden], .sidebar-section[hidden] { display: none !important; }
.urgency-bar.session-expired { background: #2a3654 !important; }
@media (max-width: 700px) {
  .payment-option { min-height: 76px; padding: 15px 14px; }
  .payment-option-logo { max-width: 78px; max-height: 26px; }
  .payment-option-logo.flow-logo { max-width: 65px; }
  .payment-option-desc { font-size: .75rem; }
  .checkout-assurance { font-size: .82rem; }
}

@media (max-width:700px) { .checkout-sidebar { min-width: 0; } }

/* Checkout polish: clear quantities, readable reviews, calm payment choices. */
.order-item-img { overflow: visible; border: 0; border-radius: 10px; }
.order-item-img img { display: block; border: 1px solid #e2e7ef; border-radius: 10px; }
.order-item-qty { top: 5px; right: 5px; z-index: 1; min-width: 23px; height: 23px; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: #243b87; color: #fff; font-size: .72rem; line-height: 1; box-shadow: 0 2px 8px rgba(21,36,80,.25); }
.order-item-info, .order-item-name { overflow-wrap: anywhere; }
.order-item-actions { min-width: 68px; }
.order-item-remove { min-width: 32px; min-height: 32px; }
.payment-methods { display: grid; gap: 10px; overflow: visible; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.payment-option { position: relative; min-height: 82px; gap: 14px; padding: 16px 18px; border: 1px solid #dce2ec; border-radius: 14px; box-shadow: 0 2px 8px rgba(22,34,67,.035); background: #fff; transform: none; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.payment-option:last-child { border: 1px solid #dce2ec; }
.payment-option:hover { transform: none; border-color: #a9b9dc; background: #fcfdff; box-shadow: 0 3px 12px rgba(22,34,67,.07); }
.payment-option.selected, .payment-option.selected:last-child { border: 1.5px solid #4965c7; background: #f7f9ff; box-shadow: 0 0 0 3px rgba(73,101,199,.09); }
.payment-option:focus-within { outline: 2px solid #3659c7; outline-offset: 2px; }
.payment-option input[type=radio] { margin: 0; width: 20px; height: 20px; accent-color: #3659c7; }
.payment-option-content { flex: 1; min-width: 0; }
.payment-option-name { color: #18243d; line-height: 1.3; }
.payment-option-desc { color: #65718a; }
.payment-option-logo { max-width: 88px; max-height: 29px; object-fit: contain; }
.payment-option-logo.flow-logo { max-width: 82px; max-height: 28px; border-radius: 5px; }
.payment-option .fa-building-columns { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #f1f4fa; font-size: 1rem !important; color: #334466 !important; }
.review-card { border: 1px solid #e6eaf1; border-radius: 15px; box-shadow: 0 5px 18px rgba(25,38,75,.07); }
.review-header { align-items: flex-start; }
.review-info { min-width: 0; overflow-wrap: anywhere; }
.review-name { line-height: 1.3; }
.review-text { margin: 12px 0; color: #3b475f; }
.review-verified { display: block; padding-top: 11px; border-top: 1px solid #edf0f5; color: #5b667d; font-size: .79rem; line-height: 1.4; }
.review-course-link { color: #3659c7; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .payment-methods { gap: 9px; }
  .payment-option { min-height: 74px; gap: 10px; padding: 13px 12px; }
  .payment-option-name { font-size: .93rem; }
  .payment-option-desc { font-size: .76rem; }
  .payment-option-logo { max-width: 66px; max-height: 23px; }
  .payment-option-logo.flow-logo { max-width: 64px; max-height: 24px; }
  .payment-option .fa-building-columns { width: 30px; height: 30px; }
  .order-item { gap: 11px; }
  .order-item-img { width: 58px; height: 58px; }
  .order-item-name, .order-item-price { font-size: .86rem; }
  .order-item-actions { min-width: 57px; }
  .review-card { padding: 16px; }
}
@media (max-width: 370px) {
  .payment-option { gap: 8px; padding: 12px 10px; }
  .payment-option-name { font-size: .86rem; }
  .payment-option-desc { font-size: .72rem; }
  .payment-option-logo { max-width: 52px; }
}

/* Colores de cada pasarela y microinteracciones del checkout. */
.order-item-qty { background: #d92d42; box-shadow: 0 2px 8px rgba(150, 22, 42, .28); }
.payment-option { isolation: isolate; overflow: hidden; transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, background-color .22s ease, box-shadow .22s ease; }
.payment-option:has(input[value="mercadopago"]) { --pay-accent: #ffe600; --pay-tint: #fffce8; }
.payment-option:has(input[value="flow"]) { --pay-accent: #4E5F00; --pay-tint: #f6f8e9; }
.payment-option:has(input[value="bacs"]) { --pay-accent: #7b4abc; --pay-tint: #faf5ff; }
.payment-option::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--pay-accent, #3659c7); opacity: 0; transform: scaleY(.45); transform-origin: center; transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.payment-option:focus-within::before { opacity: 1; transform: scaleY(1); }
.payment-option:focus-within, .payment-option.selected:focus-within { border-color: var(--pay-accent, #3659c7); background: var(--pay-tint, #f7f9ff); }
.payment-option:focus-within input[type="radio"] { accent-color: var(--pay-accent, #3659c7); }
.payment-option .payment-option-logo, .payment-option .fa-building-columns { transition: transform .22s ease; }
@media (hover: hover) and (pointer: fine) {
  .payment-option:hover, .payment-option.selected:hover { transform: translateY(-3px); border-color: var(--pay-accent, #3659c7); background: var(--pay-tint, #f7f9ff); box-shadow: 0 10px 23px rgba(21,34,73,.11); }
  .payment-option:hover::before { opacity: 1; transform: scaleY(1); }
  .payment-option:hover .payment-option-logo, .payment-option:hover .fa-building-columns { transform: scale(1.06); }
  .payment-option:has(input[value="bacs"]):hover .fa-building-columns { color: #7b4abc !important; background: #f0e5fc; }
}
@media (prefers-reduced-motion: reduce) {
  .payment-option, .payment-option::before, .payment-option .payment-option-logo, .payment-option .fa-building-columns { transition: none !important; }
  .payment-option:hover { transform: none !important; }
}