/* Apullay Tours Booking Form — booking.css */

#apullay-booking-wrap,
#apullay-booking-wrap * {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#apullay-booking-wrap.apb-wrap { max-width: 580px; margin: 24px 0; }

/* ── Product pill ── */
.apb-product-pill {
  background: #EAF3DE;
  border: 1px solid #97C459;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.apb-product-icon {
  width: 48px; height: 48px;
  border-radius: 8px;
  background: #3B6D11;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.apb-product-name { font-size: 14px; font-weight: 600; color: #27500A; margin-bottom: 3px; }
.apb-product-meta { font-size: 12px; color: #3B6D11; }
.apb-product-price { margin-left: auto; font-size: 20px; font-weight: 600; color: #27500A; white-space: nowrap; text-align: right; }
.apb-per-person    { font-size: 12px; font-weight: 400; color: #3B6D11; display: block; }

/* ── Cards ── */
.apb-card {
  background: #fff;
  border: 1px solid #e0e0d8;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 12px;
}
.apb-card-title {
  font-size: 11px; font-weight: 600; color: #888;
  text-transform: uppercase; letter-spacing: .06em;
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 6px;
}

/* ── Fields ── */
.apb-field-row    { margin-bottom: 12px; }
.apb-two-col      { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.apb-field-group  { display: flex; flex-direction: column; gap: 5px; }
#apullay-booking-wrap .apb-field-group label { font-size: 13px; color: #666; }
.apb-req          { color: #D85A30; margin-left: 1px; }
.apb-label-sm     { font-size: 13px; color: #666; display: block; margin-bottom: 8px; }

#apullay-booking-wrap .apb-field-group input[type="text"],
#apullay-booking-wrap .apb-field-group input[type="email"],
#apullay-booking-wrap .apb-field-group input[type="tel"],
#apullay-booking-wrap .apb-field-group input[type="date"],
#apullay-booking-wrap .apb-field-group input[type="number"],
#apullay-booking-wrap .apb-field-group select,
#apullay-booking-wrap .apb-field-group textarea {
  font-size: 14px;
  border: 1px solid #d4d4cc;
  border-radius: 8px;
  padding: 9px 12px;
  width: 100%;
  color: #1a1a18;
  background: #fafaf8;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
#apullay-booking-wrap .apb-field-group input:focus,
#apullay-booking-wrap .apb-field-group select:focus,
#apullay-booking-wrap .apb-field-group textarea:focus {
  border-color: #3B6D11;
  box-shadow: 0 0 0 3px rgba(59,109,17,.12);
  background: #fff;
}
#apullay-booking-wrap .apb-field-group textarea { resize: vertical; min-height: 72px; }
#apullay-booking-wrap .apb-field-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

/* ── Schedules ── */
#apullay-booking-wrap .apb-schedules { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
#apullay-booking-wrap .apb-sch-btn {
  border: 1px solid #d4d4cc !important;
  border-radius: 14px !important;
  padding: 12px !important;
  cursor: pointer;
  background: #fff !important;
  color: #1a1a18 !important;
  text-align: center;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
  box-shadow: none !important;
  outline: none !important;
  min-height: 58px;
}
#apullay-booking-wrap .apb-sch-btn:not(.active) {
  background: #fff !important;
  border-color: #d4d4cc !important;
  color: #1a1a18 !important;
}
#apullay-booking-wrap .apb-sch-btn:hover {
  border-color: #3B6D11 !important;
  background: #F6FAF0 !important;
}
#apullay-booking-wrap .apb-sch-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(59,109,17,.18) !important;
}
#apullay-booking-wrap .apb-sch-btn.active {
  border-color: #3B6D11 !important;
  background: #3B6D11 !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(59,109,17,.18) !important;
}
#apullay-booking-wrap .apb-sch-time   { font-size: 15px; font-weight: 600; color: currentColor; display: block; }
#apullay-booking-wrap .apb-sch-btn.active .apb-sch-time { color: #fff !important; }
#apullay-booking-wrap .apb-sch-label  { font-size: 11px; color: #777; margin-top: 2px; display: none; }
#apullay-booking-wrap .apb-sch-btn.active .apb-sch-label { color: rgba(255,255,255,.78) !important; }
.apb-no-schedules { font-size: 13px; color: #888; padding: 8px 0; }

/* ── Travelers counters ── */
.apb-travelers     { display: flex; flex-direction: column; gap: 14px; }
.apb-counter-row   { display: flex; align-items: center; gap: 10px; }
.apb-counter-info  { flex: 1; }
.apb-counter-label { font-size: 14px; font-weight: 500; color: #1a1a18; display: block; }
.apb-counter-sub   { font-size: 11px; color: #888; display: block; margin-top: 2px; }
.apb-counter-ctrl  { display: flex; align-items: center; gap: 10px; }
#apullay-booking-wrap .apb-cnt {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid #d4d4cc !important; background: #fafaf8 !important;
  cursor: pointer; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: #1a1a18 !important; transition: all .12s;
}
#apullay-booking-wrap .apb-cnt:hover { background: #EAF3DE !important; border-color: #3B6D11 !important; color: #27500A !important; }
.apb-cnt-val   { font-size: 16px; font-weight: 600; min-width: 22px; text-align: center; color: #1a1a18; }

/* ── Group banner ── */
.apb-group-banner {
  background: #EAF3DE; border: 1px solid #97C459;
  border-radius: 8px; padding: 10px 14px; margin-top: 14px;
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: #27500A;
}
.apb-group-banner[hidden] { display: none; }
.apb-disc-badge {
  margin-left: auto; background: #3B6D11; color: #fff;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}

/* ── Summary ── */
.apb-summary-box {
  background: #f6f6f3; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 12px;
}
.apb-sum-row         { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; color: #666; }
.apb-sum-disc        { color: #3B6D11; }
.apb-sum-total       { border-top: 1px solid #e0e0d8; margin-top: 8px; padding-top: 10px; font-weight: 600; font-size: 16px; color: #1a1a18; }
.apb-savings-row     { background: #EAF3DE; border-radius: 6px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #27500A; margin-top: 8px; }
.apb-savings-row[style*="display:none"] { display: none !important; }

.apb-confirm-note {
  background: #EAF3DE; border-radius: 8px; padding: 9px 13px;
  font-size: 12px; color: #3B6D11;
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px;
}

/* ── Validation ── */
.apb-validation-msg {
  background: #FFF3CD; border: 1px solid #ffc107;
  border-radius: 8px; padding: 10px 14px;
  font-size: 13px; color: #856404; margin-bottom: 12px;
}
.apb-validation-msg[hidden] { display: none; }

/* ── Pay button ── */
#apullay-booking-wrap .apb-pay-btn {
  width: 100%; padding: 14px;
  background: #214507 !important; color: #fff !important; border: 1px solid #173304 !important;
  border-radius: 8px; font-size: 16px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 20px rgba(33, 69, 7, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  min-height: 54px;
  transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
#apullay-booking-wrap .apb-pay-btn:hover { background: #173304 !important; box-shadow: 0 12px 24px rgba(33, 69, 7, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
#apullay-booking-wrap .apb-pay-btn:active { transform: translateY(1px); }
#apullay-booking-wrap .apb-pay-btn:focus-visible { outline: 3px solid rgba(59, 109, 17, 0.28); outline-offset: 3px; }
#apullay-booking-wrap .apb-pay-btn:disabled { background: #6f7669 !important; border-color: #6f7669 !important; box-shadow: none; cursor: not-allowed; opacity: .78; }
.apb-pay-btn.loading::after { content: " …"; }

/* ── Inline modal compatibility ── */
.apb-overlay.open .apb-modal-body > .apb-field-row > .apb-pay-btn,
.apb-overlay.open .apb-modal-body > .apb-izipay-row {
  display: none !important;
}

/* ── Izipay badge ── */
.apb-izipay-row {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 10px; font-size: 12px; color: #888;
  flex-wrap: wrap;
}
.apb-cc {
  background: #f0f0ec; border: 1px solid #d4d4cc;
  border-radius: 4px; padding: 3px 7px;
  font-size: 11px; color: #666; font-weight: 600;
}

/* ── Contrast and selection overrides for live popup wrapper ── */
body .apb-trigger-from,
body .apb-trigger-per,
body .apb-trigger-dur,
body .apb-trigger-trust,
body .apb-trigger-wrap p,
body .apb-overlay.open .apb-step-label,
body .apb-overlay.open .apb-modal-body .apb-counter-sub,
body .apb-overlay.open .apb-modal-body .apb-sum-row,
body .apb-overlay.open .apb-modal-body .apb-izipay-row,
body .apb-overlay.open .apb-modal-body .apb-label-sm,
body .apb-overlay.open .apb-modal-body .apb-no-schedules {
  color: #4f4f46 !important;
}

body .apb-overlay.open .apb-modal-header,
body .apb-overlay.open .apb-modal-header h3,
body .apb-overlay.open .apb-modal-header p,
body .apb-overlay.open .apb-modal-close {
  color: #ffffff !important;
}

body .apb-overlay.open .apb-modal-header p {
  opacity: 1 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

body .apb-overlay.open .apb-modal-body .apb-card-title,
body .apb-overlay.open .apb-modal-body .apb-confirm-note,
body .apb-overlay.open .apb-modal-body .apb-group-banner,
body .apb-overlay.open .apb-modal-body .apb-disc-badge,
body .apb-overlay.open .apb-modal-body .apb-savings-row {
  color: #214507 !important;
}

body .apb-overlay.open .apb-modal-body .apb-izipay-row .apb-cc {
  color: #4f4f46 !important;
  border-color: #b8b8ae !important;
}

body .apb-overlay.open .apb-modal-body .apb-sch-btn,
body .apb-overlay.open .apb-modal-body .apb-sch-btn[aria-pressed="false"],
body .apb-overlay.open .apb-modal-body .apb-sch-btn:not(.selected),
body .apb-overlay.open .apb-modal-body .apb-sch-btn.active:not(.selected),
body .apb-overlay.open .apb-modal-body .apb-sch-btn[aria-pressed="true"]:not(.selected),
#apullay-booking-wrap .apb-sch-btn:not(.active) {
  background: #ffffff !important;
  color: #1a1a18 !important;
  border-color: #b8b8ae !important;
  box-shadow: none !important;
  outline: none !important;
}

body .apb-overlay.open .apb-modal-body .apb-sch-btn:focus,
body .apb-overlay.open .apb-modal-body .apb-sch-btn:focus-visible,
#apullay-booking-wrap .apb-sch-btn:focus,
#apullay-booking-wrap .apb-sch-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(33, 69, 7, 0.18) !important;
}

body .apb-overlay.open .apb-modal-body .apb-sch-btn.selected,
#apullay-booking-wrap .apb-sch-btn.active,
#apullay-booking-wrap .apb-sch-btn[aria-pressed="true"] {
  position: relative;
  background: #214507 !important;
  color: #ffffff !important;
  border-color: #173304 !important;
  box-shadow: 0 0 0 4px rgba(33, 69, 7, 0.18), 0 12px 24px rgba(33, 69, 7, 0.18) !important;
  transform: translateY(-1px);
}

body .apb-overlay.open .apb-modal-body .apb-sch-btn.selected .apb-sch-time,
#apullay-booking-wrap .apb-sch-btn.active .apb-sch-time,
#apullay-booking-wrap .apb-sch-btn[aria-pressed="true"] .apb-sch-time {
  color: #ffffff !important;
}

body .apb-overlay.open .apb-modal-body .apb-sch-btn.selected::after,
#apullay-booking-wrap .apb-sch-btn.active::after,
#apullay-booking-wrap .apb-sch-btn[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #eef6e8;
  color: #214507 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

body .apb-overlay.open .apb-btn-back {
  background: #f2f3ef !important;
  color: #30302b !important;
}

body .apb-overlay.open .apb-btn-next,
body .apb-overlay.open .apb-modal-body .apb-pay-btn,
body .apb-trigger-btn {
  background: #214507 !important;
  color: #ffffff !important;
}

body .apb-overlay.open .apb-btn-next:hover,
body .apb-overlay.open .apb-modal-body .apb-pay-btn:hover,
body .apb-trigger-btn:hover {
  background: #173304 !important;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .apb-two-col { grid-template-columns: 1fr; }
  .apb-schedules { grid-template-columns: 1fr; }
  .apb-product-pill { flex-wrap: wrap; }
  .apb-product-price { margin-left: 0; }
}

/* ── Izipay embedded form styling ── */
#apb-izipay-container,
#apb-kr-form {
  margin-top: 4px;
}

/* Izipay KR form wrapper */
#apb-payment-section {
  background: #fff;
  border: 1px solid #d4d4cc;
  border-radius: 12px;
  padding: 20px;
  margin-top: 12px;
  animation: apb-slide-in 0.25s ease-out;
}

#apb-payment-section .kr-embedded,
#apb-payment-section .kr-smart-form {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  width: 100% !important;
}

/* Input fields */
#apb-payment-section .kr-embedded .kr-payment-button,
#apb-payment-section .kr-smart-form .kr-payment-button,
#apb-payment-section .kr-payment-button {
  background: #214507 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 13px 20px !important;
  width: 100% !important;
  border: 1px solid #173304 !important;
  box-shadow: 0 10px 20px rgba(33, 69, 7, 0.24) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease !important;
}

#apb-payment-section .kr-embedded .kr-payment-button:hover,
#apb-payment-section .kr-smart-form .kr-payment-button:hover,
#apb-payment-section .kr-payment-button:hover {
  background: #173304 !important;
  box-shadow: 0 12px 24px rgba(33, 69, 7, 0.3) !important;
}

#apb-payment-section .kr-embedded .kr-payment-button:active,
#apb-payment-section .kr-smart-form .kr-payment-button:active,
#apb-payment-section .kr-payment-button:active {
  transform: translateY(1px) !important;
}

#apb-payment-section .kr-embedded .kr-payment-button:focus-visible,
#apb-payment-section .kr-smart-form .kr-payment-button:focus-visible,
#apb-payment-section .kr-payment-button:focus-visible {
  outline: 3px solid rgba(59, 109, 17, 0.28) !important;
  outline-offset: 3px !important;
}

/* Pan / card number field */
#apb-payment-section .kr-embedded .kr-field-wrapper,
#apb-payment-section .kr-smart-form .kr-field-wrapper,
#apb-payment-section .kr-field-wrapper,
#apb-payment-section .kr-field {
  border: 1px solid #d4d4cc !important;
  border-radius: 8px !important;
  background: #fafaf8 !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  min-height: 40px !important;
}

#apb-payment-section .kr-embedded .kr-field-wrapper:focus-within,
#apb-payment-section .kr-smart-form .kr-field-wrapper:focus-within,
#apb-payment-section .kr-field-wrapper:focus-within,
#apb-payment-section .kr-field:focus-within {
  border-color: #3B6D11 !important;
  box-shadow: 0 0 0 3px rgba(59,109,17,.12) !important;
  background: #fff !important;
}

#apb-payment-section input:not([type="hidden"]),
#apb-payment-section select {
  border: 1px solid #d4d4cc !important;
  border-radius: 8px !important;
  background: #fafaf8 !important;
  color: #1a1a18 !important;
  font-size: 15px !important;
  line-height: 20px !important;
  min-height: 40px !important;
  padding: 9px 12px !important;
  width: 100% !important;
  box-shadow: none !important;
}

#apb-payment-section input:not([type="hidden"]):focus,
#apb-payment-section select:focus {
  border-color: #3B6D11 !important;
  box-shadow: 0 0 0 3px rgba(59,109,17,.12) !important;
  outline: none !important;
}

/* Error messages */
#apb-payment-section .kr-embedded .kr-error-msg,
#apb-payment-section .kr-smart-form .kr-error-msg,
#apb-payment-section .kr-error-msg {
  color: #D85A30 !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

@keyframes apb-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Test mode banner inside KR */
#apb-payment-section .kr-form-error {
  color: #D85A30 !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  background: #FCEBEB !important;
  border-radius: 6px !important;
  margin-top: 8px !important;
}