/* Book Service / Appointment Page Styles (mobile-first, isolated) */

/* Page shell */
.booking-page {
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: #0f172a;
  background: #f8fafc;
  padding: 28px 20px 88px; /* bottom padding for sticky action bar */
}

.booking-page .booking-container { max-width: 1100px; margin: 0 auto; }

/* Grid layout: summary (left fixed width) + form (right flexible) */
.booking-page .booking-grid {
  display: grid;
  grid-template-columns: 1fr 360px; /* match checkout: form (left) + summary (right) */
  gap: 28px;
  align-items: start;
  grid-auto-flow: dense;
}

/* Place sections explicitly in columns to avoid DOM order dependency */
.booking-page .booking-form-section { grid-column: 1 / 2; grid-row: 1; }
.booking-page .service-summary-section { grid-column: 2 / 3; grid-row: 1; }

/* Cards */
.booking-page .service-summary-section,
.booking-page .booking-form-section {
  background: #fff;
  padding: 22px;
  border-radius: 12px;
  border: 1px solid #e6edf3;
  box-shadow: 0 6px 20px rgba(15,23,42,0.04);
}

.booking-page .service-summary-section h3,
.booking-page .booking-form-section h2 { margin: 0 0 12px 0; color: #0f172a; }
.booking-page .booking-form-section h2 i { color: #059669; }

/* Service item card inside summary */
.booking-page .service-item-card { display: flex; gap: 12px; align-items: flex-start; }
.booking-page .service-image { width: 120px; flex-shrink: 0; }
.booking-page .service-image img { width: 120px; height: 84px; object-fit: cover; border-radius: 8px; }
.booking-page .service-details { flex: 1; }
.booking-page .service-name { margin: 0; font-size: 1rem; font-weight: 700; color: #0f172a; }
.booking-page .service-meta { color: #64748b; font-size: 0.9rem; margin: 6px 0; display: flex; gap: 8px; align-items: center; }
.booking-page .service-price { font-weight: 800; color: #059669; }

/* Summary total */
.booking-page .service-total { margin-top: 16px; border-top: 1px dashed #eef2f6; padding-top: 12px; }
.booking-page .service-total .total-row { display: flex; justify-content: space-between; margin-bottom: 10px; color: #0f172a; }
.booking-page .service-total .final-total { font-weight: 800; font-size: 1.125rem; }

/* Form sections reuse checkout.css form utilities (form-label, form-input, form-textarea) */
.booking-page .form-section { margin-bottom: 18px; }
.booking-page .booking-form .booking-actions { display: flex; gap: 12px; margin-top: 16px; }

/* Form field base styles (aligned with checkout.css) */
.booking-page .form-label{display:block;margin-bottom:8px;font-weight:700;color:#0f172a}
.booking-page .form-input,.booking-page .form-textarea{width:100%;padding:12px;border:1px solid #e6edf3;border-radius:8px;background:#fff;color:#0f172a}
.booking-page .form-textarea{min-height:92px;resize:vertical}

/* Trust badges */
.booking-page .trust-badges { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.booking-page .trust-badge { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #eef2f6; color: #475569; }

/* Buttons (kept consistent with checkout) */
.booking-page .btn-primary{background:linear-gradient(135deg,#059669,#047857);color:#fff;padding:10px 18px;border-radius:10px;border:none;cursor:pointer;font-weight:700;box-shadow:0 6px 18px rgba(5,150,105,0.15);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.booking-page .btn-secondary{background:#fff;color:#0f172a;padding:10px 16px;border-radius:10px;border:1px solid #e6edf3;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.booking-page .loading-spinner .spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;display:inline-block}

/* Responsive adjustments */
@media (max-width: 991px) {
  .booking-page .booking-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .booking-page .booking-container { padding: 0 8px; }

  /* Stack and show form first on mobile */
  .booking-page .booking-grid { display: flex; flex-direction: column; gap: 18px; }
  .booking-page .booking-form-section { order: 1; width: 100%; max-width: 100%; align-self: stretch; }
  .booking-page .service-summary-section { order: 2; width: 100%; max-width: 100%; align-self: stretch; }

  /* Ensure summary card content spans full width */
  .booking-page .service-item,
  .booking-page .service-item-card { width: 100%; }

  /* Hide in-form actions (we show sticky bottom actions on mobile) */
  .booking-page .booking-form .booking-actions { display: none; }

  /* Make service image full width inside its card */
  .booking-page .service-item-card { flex-direction: column; }
  .booking-page .service-image { width: 100%; }
  .booking-page .service-image img { width: 100%; height: 160px; }

  /* Keep bottom sticky action bar compact; the inline style handles stickiness */
  .booking-page .booking-actions.d-flex.d-md-none { display: flex !important; padding: 12px !important; gap: 10px; }
  /* Make both buttons equal width and ignore inline margins */
  .booking-page .booking-actions.d-flex.d-md-none .btn-primary,
  .booking-page .booking-actions.d-flex.d-md-none .btn-secondary { flex: 1 1 0 !important; margin: 0 !important; min-height: 44px; }
}

@media (min-width: 769px) {
  /* Hide mobile-only sticky actions on desktop */
  .booking-page .booking-actions.d-flex.d-md-none { display: none !important; }
}

@media (max-width: 420px) {
  .booking-page .service-image img { height: 140px; }
  .booking-page .service-summary-section, .booking-page .booking-form-section { padding: 14px; }
}