/* Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  color: #1f2937; /* Dark gray text */
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Layout Wrappers */
.main-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

.checkout-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.checkout-header {
  text-align: center;
  margin-bottom: 32px;
}

.checkout-title {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

.checkout-subtitle {
  font-size: 14px;
  color: #6b7280;
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: start;
}

/* Form Section (Left) */
.checkout-form-section {
  background: #ffffff;
  border-radius: 12px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.form-section {
  margin-bottom: 32px;
}

.form-section:last-of-type {
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

/* Inputs & Fields */
.customer-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field-group {
  display: flex;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.field.half {
  width: 50%;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.required {
  color: #ef4444;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  color: #111827;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder {
  color: #9ca3af;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Payment Element */
.payment-element {
  margin-bottom: 24px;
}

/* Summary Section (Right) */
.checkout-summary-section {
  position: sticky;
  top: 24px;
}

.order-summary-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
}

.order-summary-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 20px;
}

.order-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.order-table th {
  font-size: 11px;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding-bottom: 4px;
}

.order-table td {
  padding: 8px 0;
  font-size: 14px;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
}

.order-item-name {
  color: #111827;
  font-weight: 500;
}

.order-qty-select {
  padding: 4px 24px 4px 8px; /* Extra padding for arrow */
  border-radius: 4px;
  border: 1px solid #d1d5db;
  font-size: 13px;
  background-color: #fff;
  cursor: pointer;
  /* Custom arrow could go here */
}

.order-price {
  color: #111827;
  font-weight: 500;
  text-align: right;
}

.spacer-row td {
  border: none;
  height: 8px;
  padding: 0;
}

.total-row th,
.total-row td {
  border-top: 2px solid #e5e7eb;
  border-bottom: none;
  padding-top: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

.secure-badge {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  background: #edf2f7;
  padding: 8px;
  border-radius: 6px;
}

/* Submit Button */
.submit-button {
  background: #2563eb;
  color: #ffffff;
  border-radius: 6px;
  border: none;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
}

.submit-button:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.submit-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Messages */
.payment-message {
  color: #b91c1c;
  font-size: 14px;
  margin-top: 12px;
  text-align: center;
  background-color: #fef2f2;
  border: 1px solid #fee2e2;
  padding: 10px;
  border-radius: 6px;
}

.hidden {
  display: none !important;
}

/* Status Page */
#payment-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 20px;
  text-align: center;
}

#status-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#status-text {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 24px;
}

#details-table {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

#view-details {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}
#view-details:hover {
  text-decoration: underline;
}

/* Spinner */
.spinner {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 3px solid #ffffff;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Order Bumps */
.order-bumps-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-bump {
  border: 2px dashed #f59e0b;
  border-radius: 8px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  overflow: hidden;
  transition: all 0.2s ease;
}

.order-bump:hover {
  border-color: #d97706;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.order-bump-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  margin: 0;
}

.order-bump-checkbox {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 2px;
  accent-color: #f59e0b;
  cursor: pointer;
}

.order-bump-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.order-bump-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.order-bump-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.order-bump-price {
  font-size: 15px;
  color: #111827;
  white-space: nowrap;
}

.order-bump-highlight {
  font-weight: 700;
  color: #dc2626;
  text-decoration: underline;
}

.order-bump-description {
  font-size: 13px;
  color: #000000;
  line-height: 1.4;
  margin: 0;
}

/* Responsive */
@media (max-width: 850px) {
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .checkout-summary-section {
    position: static; /* Stack order summary */
    order: -1; /* Show summary first on mobile? Or keep at bottom. Let's keep at bottom (default order) or top? Usually top on mobile is good for trust, but form is priority. Let's keep standard order which puts it below form, or maybe better above. */
    /* Let's keep it below for now, unless we want to move it up. Typically on mobile, "Order Summary" is a collapsible at the top. For simplicity, let's just stack it below the form or leave as is (form left -> top, summary right -> bottom).
       Wait, grid order: form is first in HTML.
    */
  }

  /* To make summary appear above form on mobile if desired:
  .checkout-summary-section { order: -1; }
  But often better to have user start typing immediately. Let's leave form first.
  */

  .field.half {
    width: 100%;
  }

  .field-group {
    flex-direction: column;
    gap: 16px;
  }
}