/* Buy-Sale24 Smart Order Form - Frontend Styles */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap');

:root {
  --bs24-primary: #e74c3c;
  --bs24-secondary: #2c3e50;
  --bs24-success: #27ae60;
  --bs24-warning: #f39c12;
  --bs24-light: #f8f9fa;
  --bs24-border: #e9ecef;
  --bs24-text: #2c3e50;
  --bs24-muted: #7f8c8d;
  --bs24-radius: 12px;
  --bs24-shadow: 0 8px 32px rgba(0,0,0,0.12);
  --bs24-transition: all 0.25s ease;
}

/* Modal Overlay */
.bs24-modal-overlay {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.bs24-modal-container {
  background: #fff;
  border-radius: 20px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 80px rgba(0,0,0,0.3);
  scrollbar-width: thin;
  scrollbar-color: var(--bs24-primary) #f1f1f1;
}
.bs24-modal-container::-webkit-scrollbar { width: 6px; }
.bs24-modal-container::-webkit-scrollbar-thumb { background: var(--bs24-primary); border-radius: 3px; }
.bs24-modal-close {
  position: sticky; top: 16px; right: 0;
  float: right; margin: 16px 16px 0 0;
  width: 36px; height: 36px;
  background: #fff; border: 2px solid var(--bs24-border);
  border-radius: 50%; font-size: 20px; line-height: 1;
  cursor: pointer; color: var(--bs24-muted);
  display: flex; align-items: center; justify-content: center;
  transition: var(--bs24-transition); z-index: 1;
}
.bs24-modal-close:hover { background: var(--bs24-primary); color: #fff; border-color: var(--bs24-primary); }

/* Form Wrapper */
.bs24-order-form-wrapper {
  font-family: 'Hind Siliguri', 'Segoe UI', sans-serif;
  padding: 24px 28px;
  color: var(--bs24-text);
}

/* Form Header */
.bs24-form-header { text-align: center; margin-bottom: 28px; }
.bs24-form-logo { height: 56px; object-fit: contain; margin-bottom: 12px; }
.bs24-form-title {
  font-size: 26px; font-weight: 800;
  color: var(--bs24-secondary); margin: 0 0 6px;
}
.bs24-form-subtitle { color: var(--bs24-muted); font-size: 15px; margin: 0; }

/* Order Summary */
.bs24-order-summary {
  background: linear-gradient(135deg, var(--bs24-primary)12, var(--bs24-primary)08);
  border: 1px solid var(--bs24-primary)25;
  border-radius: var(--bs24-radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  border-left: 4px solid var(--bs24-primary);
}
.bs24-summary-row {
  display: flex; justify-content: space-between; align-items: center;
}
.bs24-summary-label { font-weight: 600; color: var(--bs24-text); }
.bs24-summary-price { font-size: 22px; font-weight: 800; color: var(--bs24-primary); }

/* Form Sections */
.bs24-form-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--bs24-border);
}
.bs24-form-section:last-of-type { border-bottom: none; }
.bs24-section-title {
  font-size: 16px; font-weight: 700;
  color: var(--bs24-secondary);
  margin: 0 0 16px;
  display: flex; align-items: center; gap: 8px;
}
.bs24-step-num {
  width: 28px; height: 28px;
  background: var(--bs24-primary);
  color: white; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}

/* Fields */
.bs24-field-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 480px) { .bs24-field-group { grid-template-columns: 1fr; } }
.bs24-field { margin-bottom: 16px; }
.bs24-label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--bs24-text); margin-bottom: 6px;
}
.bs24-label .required { color: var(--bs24-primary); margin-left: 2px; }
.bs24-input-wrapper {
  position: relative; display: flex; align-items: center;
}
.bs24-input-icon {
  position: absolute; left: 14px; font-size: 16px; z-index: 1;
  pointer-events: none; top: 50%; transform: translateY(-50%);
}
.bs24-input-field {
  width: 100%; padding: 12px 16px 12px 44px;
  border: 2px solid var(--bs24-border);
  border-radius: var(--bs24-radius);
  font-size: 15px; font-family: inherit;
  color: var(--bs24-text); background: #fff;
  transition: var(--bs24-transition); outline: none;
}
.bs24-input-field:focus {
  border-color: var(--bs24-primary);
  box-shadow: 0 0 0 4px var(--bs24-primary)20;
}
.bs24-input-field.bs24-input-error { border-color: #e74c3c; }
.bs24-input-field:not(.bs24-has-icon) { padding-left: 16px; }
select.bs24-input-field { padding-left: 16px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237f8c8d' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
.bs24-textarea-field { padding: 12px 16px; resize: vertical; min-height: 90px; }
.bs24-error-msg { font-size: 12px; color: #e74c3c; display: none; margin-top: 4px; }
.bs24-field.has-error .bs24-error-msg { display: block; }
.bs24-field.has-error .bs24-input-field { border-color: #e74c3c; }
.bs24-field.is-valid .bs24-input-field { border-color: var(--bs24-success); }

/* Delivery Options */
.bs24-delivery-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .bs24-delivery-options { grid-template-columns: 1fr; } }
.bs24-delivery-card {
  display: flex; gap: 12px; align-items: flex-start;
  border: 2px solid var(--bs24-border);
  border-radius: var(--bs24-radius); padding: 16px;
  cursor: pointer; transition: var(--bs24-transition);
  position: relative;
}
.bs24-delivery-card:has(input:checked) {
  border-color: var(--bs24-primary);
  background: var(--bs24-primary)08;
}
.bs24-delivery-card input { margin-top: 3px; accent-color: var(--bs24-primary); }
.bs24-delivery-info { flex: 1; }
.bs24-delivery-title { display: block; font-weight: 700; font-size: 15px; margin-bottom: 3px; }
.bs24-delivery-desc { display: block; font-size: 12px; color: var(--bs24-muted); margin-bottom: 6px; }
.bs24-delivery-charge { display: block; font-size: 18px; font-weight: 800; color: var(--bs24-primary); }
.bs24-delivery-popular::before {
  content: '⭐ জনপ্রিয়'; position: absolute; top: -10px; right: 12px;
  background: var(--bs24-primary); color: white; font-size: 11px;
  padding: 2px 10px; border-radius: 50px; font-weight: 600;
}

/* Quantity */
.bs24-quantity-wrapper {
  display: flex; align-items: center; gap: 0;
  width: fit-content;
}
.bs24-qty-btn {
  width: 44px; height: 44px;
  border: 2px solid var(--bs24-border);
  background: #fff; font-size: 20px; font-weight: 700;
  cursor: pointer; transition: var(--bs24-transition);
  display: flex; align-items: center; justify-content: center; color: var(--bs24-primary);
}
.bs24-qty-btn:first-child { border-radius: 12px 0 0 12px; }
.bs24-qty-btn:last-child  { border-radius: 0 12px 12px 0; }
.bs24-qty-btn:hover { background: var(--bs24-primary); color: white; border-color: var(--bs24-primary); }
.bs24-qty-input {
  width: 70px; height: 44px;
  border: 2px solid var(--bs24-border); border-left: none; border-right: none;
  text-align: center; font-size: 18px; font-weight: 700;
  font-family: inherit; color: var(--bs24-text);
  -moz-appearance: textfield;
}
.bs24-qty-input::-webkit-inner-spin-button,
.bs24-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Payment Methods */
.bs24-payment-methods {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.bs24-payment-card {
  border: 2px solid var(--bs24-border);
  border-radius: var(--bs24-radius); padding: 14px 10px;
  cursor: pointer; transition: var(--bs24-transition);
  text-align: center;
}
.bs24-payment-card:has(input:checked) {
  border-color: var(--bs24-primary);
  background: var(--bs24-primary)08;
  box-shadow: 0 0 0 1px var(--bs24-primary);
}
.bs24-payment-card input { display: none; }
.bs24-pm-content { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bs24-pm-icon-wrap { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.bs24-pm-label { font-size: 13px; font-weight: 600; color: var(--bs24-text); }

/* Payment Details */
.bs24-payment-details {
  background: var(--bs24-light); border-radius: var(--bs24-radius);
  padding: 18px; margin-bottom: 16px;
  animation: bs24FadeIn 0.3s ease;
}
@keyframes bs24FadeIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.bs24-payment-instruction { margin-bottom: 16px; }
.bs24-mobile-payment-info p { font-size: 14px; color: var(--bs24-muted); margin-bottom: 10px; }
.bs24-payment-number {
  display: flex; align-items: center; gap: 10px;
  background: white; border: 2px solid var(--bs24-border);
  border-radius: var(--bs24-radius); padding: 12px 16px;
}
.bs24-payment-number span { font-size: 20px; font-weight: 800; letter-spacing: 2px; flex: 1; }
.bs24-copy-btn {
  background: var(--bs24-primary); color: white;
  border: none; border-radius: 8px; padding: 6px 12px;
  font-size: 12px; cursor: pointer; white-space: nowrap;
}
.bs24-copy-btn:hover { filter: brightness(1.1); }
.bs24-bank-info h4 { font-size: 14px; margin-bottom: 8px; }
.bs24-bank-info p { font-size: 14px; color: var(--bs24-muted); white-space: pre-line; }

/* Coupon */
.bs24-coupon-wrapper { display: flex; gap: 8px; }
.bs24-btn-coupon {
  background: var(--bs24-secondary); color: white;
  border: none; border-radius: var(--bs24-radius); padding: 12px 20px;
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: var(--bs24-transition);
}
.bs24-btn-coupon:hover { filter: brightness(1.1); }
.bs24-coupon-msg {
  margin-top: 8px; padding: 10px 14px;
  border-radius: 8px; font-size: 14px; font-weight: 600;
}
.bs24-coupon-msg.success { background: #d5f5e3; color: #27ae60; }
.bs24-coupon-msg.error   { background: #fde8e8; color: #e74c3c; }

/* Order Total */
.bs24-order-total-box {
  background: var(--bs24-light); border-radius: var(--bs24-radius);
  padding: 18px;
}
.bs24-total-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; font-size: 15px;
  border-bottom: 1px solid var(--bs24-border);
}
.bs24-total-row:last-child { border-bottom: none; }
.bs24-grand-total {
  font-size: 20px; font-weight: 800;
  color: var(--bs24-primary); padding-top: 14px;
}

/* Radio Group */
.bs24-radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.bs24-radio-label {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 14px; padding: 8px 14px;
  border: 2px solid var(--bs24-border); border-radius: 8px;
  transition: var(--bs24-transition);
}
.bs24-radio-label:has(input:checked) { border-color: var(--bs24-primary); background: var(--bs24-primary)08; }
.bs24-radio-label input { accent-color: var(--bs24-primary); }

/* Submit Button */
.bs24-submit-btn {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, var(--bs24-primary), color-mix(in srgb, var(--bs24-primary) 80%, #000));
  color: white; border: none; border-radius: 50px;
  font-size: 18px; font-weight: 800; cursor: pointer;
  transition: var(--bs24-transition); margin-top: 4px;
  box-shadow: 0 6px 20px var(--bs24-primary)40;
  font-family: inherit; letter-spacing: 0.5px;
}
.bs24-submit-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 28px var(--bs24-primary)50; }
.bs24-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* Trust Badges */
.bs24-trust-badges {
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
  margin-top: 14px; font-size: 12px; color: var(--bs24-muted);
}

/* Form Error */
.bs24-form-error {
  background: #fde8e8; border: 1px solid #fbb; border-radius: 10px;
  padding: 14px 16px; color: #c0392b; font-size: 14px;
  margin-bottom: 12px; line-height: 1.6;
}