/* ── Hire Booking Pro – Public Styles ──────────────────────────── */
:root {
  --hbp-green: #1D9E75;
  --hbp-green-dk: #0F6E56;
  --hbp-green-lt: #E1F5EE;
  --hbp-red: #E24B4A;
  --hbp-red-lt: #FCEBEB;
  --hbp-amber: #EF9F27;
  --hbp-amber-lt: #FAEEDA;
  --hbp-gray: #F5F5F5;
  --hbp-border: #E0E0E0;
  --hbp-text: #333;
  --hbp-muted: #777;
  --hbp-radius: 10px;
}

/* Listing grid */
.hbp-listing { display: grid; gap: 24px; }
.hbp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hbp-cols-3 { grid-template-columns: repeat(3, 1fr); }
.hbp-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .hbp-cols-3, .hbp-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hbp-listing { grid-template-columns: 1fr !important; } }

/* Item card */
.hbp-item-card { background: #fff; border: 1px solid var(--hbp-border); border-radius: var(--hbp-radius); overflow: hidden; display: flex; flex-direction: column; }

.hbp-item-thumb { position: relative; overflow: hidden; }
.hbp-item-img { width: 100%; height: 200px; object-fit: cover; display: block; }
.hbp-no-img { width: 100%; height: 200px; background: var(--hbp-gray); display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 700; color: var(--hbp-border); }

/* Badge */
.hbp-badge { position: absolute; top: 10px; right: 10px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.hbp-badge--available { background: var(--hbp-green-lt); color: var(--hbp-green-dk); }
.hbp-badge--unavailable { background: var(--hbp-red-lt); color: var(--hbp-red); }
.hbp-badge--checking { background: var(--hbp-amber-lt); color: #633806; }

/* Body */
.hbp-item-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hbp-item-title { font-size: 17px; font-weight: 700; color: var(--hbp-text); margin: 0; }
.hbp-item-desc { font-size: 13px; color: var(--hbp-muted); margin: 0; line-height: 1.5; }
.hbp-item-price { font-size: 18px; font-weight: 700; color: var(--hbp-green); }
.hbp-item-price span { font-size: 13px; font-weight: 400; color: var(--hbp-muted); }
.hbp-item-stock { font-size: 12px; color: var(--hbp-muted); }

/* Date row */
.hbp-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hbp-field label { display: block; font-size: 12px; color: var(--hbp-muted); margin-bottom: 4px; font-weight: 500; }
.hbp-field input, .hbp-field select, .hbp-field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--hbp-border); border-radius: 6px; font-size: 13px; color: var(--hbp-text); box-sizing: border-box; font-family: inherit; }
.hbp-field input:focus, .hbp-field select:focus, .hbp-field textarea:focus { outline: none; border-color: var(--hbp-green); box-shadow: 0 0 0 3px rgba(29,158,117,0.12); }

/* Qty */
.hbp-qty-row { display: flex; align-items: center; gap: 10px; }
.hbp-qty-row label { font-size: 13px; color: var(--hbp-muted); flex: 1; }
.hbp-qty-ctrl { display: flex; align-items: center; border: 1px solid var(--hbp-border); border-radius: 6px; overflow: hidden; }
.hbp-qty-minus, .hbp-qty-plus { border: none; background: var(--hbp-gray); color: var(--hbp-text); width: 30px; height: 30px; font-size: 18px; cursor: pointer; line-height: 1; }
.hbp-qty-minus:hover, .hbp-qty-plus:hover { background: #e8e8e8; }
.hbp-qty-ctrl input { width: 44px; height: 30px; border: none; border-left: 1px solid var(--hbp-border); border-right: 1px solid var(--hbp-border); text-align: center; font-size: 14px; font-weight: 600; }
.hbp-qty-ctrl input:focus { outline: none; }

/* Availability status */
.hbp-avail-status { font-size: 13px; padding: 8px 10px; border-radius: 6px; }
.hbp-avail-ok   { background: var(--hbp-green-lt); color: var(--hbp-green-dk); }
.hbp-avail-no   { background: var(--hbp-red-lt);   color: var(--hbp-red); }
.hbp-avail-warn { background: var(--hbp-amber-lt); color: #633806; }

.hbp-price-estimate { font-size: 14px; font-weight: 600; color: var(--hbp-green); }

/* Buttons */
.hbp-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.hbp-btn { padding: 11px; border-radius: 7px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: opacity .15s, transform .1s; text-align: center; font-family: inherit; }
.hbp-btn:active { transform: scale(0.97); }
.hbp-btn-book  { background: var(--hbp-green); color: #fff; }
.hbp-btn-book:hover:not(:disabled) { background: var(--hbp-green-dk); }
.hbp-btn-book:disabled { background: var(--hbp-border); color: var(--hbp-muted); cursor: not-allowed; }
.hbp-btn-quote { background: #fff; color: var(--hbp-text); border: 1px solid var(--hbp-border); }
.hbp-btn-quote:hover { background: var(--hbp-gray); }

/* Modal overlay */
.hbp-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.hbp-modal-box { background: #fff; border-radius: 12px; padding: 28px 32px; max-width: 480px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; }
.hbp-modal-box h3 { margin: 0 0 20px; font-size: 18px; color: var(--hbp-text); }
.hbp-modal-close { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 24px; color: var(--hbp-muted); cursor: pointer; line-height: 1; }
.hbp-modal-close:hover { color: var(--hbp-text); }
.hbp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.hbp-full { grid-column: 1 / -1; }
.hbp-modal-total { font-size: 16px; font-weight: 700; color: var(--hbp-green); margin-bottom: 16px; }
.hbp-btn-book-submit, .hbp-btn-quote-submit { width: 100%; padding: 13px; border-radius: 8px; background: var(--hbp-green); color: #fff; font-size: 15px; font-weight: 700; border: none; cursor: pointer; font-family: inherit; }
.hbp-btn-book-submit:hover, .hbp-btn-quote-submit:hover { background: var(--hbp-green-dk); }
.hbp-modal-msg { margin-top: 14px; padding: 10px 14px; border-radius: 7px; font-size: 14px; }
.hbp-modal-msg.hbp-msg-ok  { background: var(--hbp-green-lt); color: var(--hbp-green-dk); }
.hbp-modal-msg.hbp-msg-err { background: var(--hbp-red-lt);   color: var(--hbp-red); }