/* ─────────────────────────────────────────────
   ERE Shortlet Booking — Frontend Styles
   ───────────────────────────────────────────── */

.esb-wrap {
    margin: 48px 0 24px;
    padding: 36px;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    font-family: inherit;
}

.esb-main-title {
    margin: 0 0 4px !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.esb-subtitle {
    margin: 0 0 28px !important;
    font-size: 0.95rem;
    color: #6b7280;
}

/* Sections */
.esb-section {
    padding: 24px 0;
    border-bottom: 1px solid #f3f4f6;
}
.esb-section:last-of-type { border-bottom: none; }

.esb-section-label {
    margin: 0 0 16px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #9ca3af !important;
}

/* Grid */
.esb-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) {
    .esb-grid-2 { grid-template-columns: 1fr; }
    .esb-wrap   { padding: 22px; }
}

/* Fields */
.esb-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.esb-field label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}
.esb-field label em {
    color: #ef4444;
    font-style: normal;
    margin-left: 2px;
}
.esb-field input[type="text"],
.esb-field input[type="email"],
.esb-field input[type="tel"],
.esb-field input[type="number"],
.esb-field input[type="date"],
.esb-field input[type="time"],
.esb-field select,
.esb-field textarea {
    padding: 10px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #111827;
    background: #f9fafb;
    transition: border-color .18s, box-shadow .18s, background .18s;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.4;
}
.esb-field input:focus,
.esb-field select:focus,
.esb-field textarea:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5,150,105,.13);
    background: #fff;
}
.esb-field textarea { resize: vertical; min-height: 80px; }

/* Booking type cards */
.esb-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.esb-type-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 9px;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    background: #f9fafb;
    user-select: none;
}
.esb-type-card:has(input:checked) {
    border-color: #059669;
    background: #ecfdf5;
    color: #065f46;
}
.esb-type-card input[type="radio"] {
    accent-color: #059669;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Estimate block */
.esb-estimate-wrap {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0 !important;
    border-radius: 10px;
    padding: 20px 22px !important;
}
.esb-estimate-wrap .esb-section-label { color: #15803d !important; }

.esb-estimate-rows { display: flex; flex-direction: column; gap: 9px; }

.esb-est-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    color: #6b7280;
}
.esb-est-row strong { color: #111827; font-weight: 700; }

.esb-est-divider { height: 1px; background: #bbf7d0; margin: 2px 0; }

.esb-est-total { font-size: 1rem !important; }
.esb-est-total strong { font-size: 1.2rem; color: #065f46 !important; }

.esb-estimate-note {
    margin: 14px 0 0 !important;
    font-size: 0.78rem;
    color: #6b7280;
    font-style: italic;
}

/* Confirmation checkbox */
.esb-confirm-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.55;
    cursor: pointer;
}
.esb-confirm-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 3px;
    accent-color: #059669;
    cursor: pointer;
}

/* Submit */
.esb-submit-row { text-align: center; padding-top: 8px; }

.esb-submit-btn {
    display: inline-block;
    padding: 14px 44px;
    background: #059669;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, transform .1s;
    font-family: inherit;
    letter-spacing: 0.01em;
}
.esb-submit-btn:hover    { background: #047857; }
.esb-submit-btn:active   { transform: scale(0.98); }
.esb-submit-btn:disabled { background: #9ca3af; cursor: not-allowed; transform: none; }

/* Response messages */
.esb-response {
    margin-top: 20px;
    padding: 16px 20px;
    border-radius: 9px;
    font-size: 0.92rem;
    line-height: 1.55;
}
.esb-response.success { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.esb-response.error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

/* ─────────────────────────────────────────────
   Front-end listing form — shortlet pricing fields
   ───────────────────────────────────────────── */
.esb-frontend-wrap {
    margin: 24px 0;
    padding: 24px;
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 10px;
}
.esb-fe-heading {
    margin: 0 0 6px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #065f46 !important;
}
.esb-fe-note {
    margin: 0 0 18px !important;
    font-size: 0.83rem;
    color: #6b7280;
}
.esb-fe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 640px) { .esb-fe-grid { grid-template-columns: 1fr; } }

.esb-fe-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.esb-fe-field label {
    font-size: 0.83rem;
    font-weight: 600;
    color: #374151;
}
.esb-fe-field input[type="number"],
.esb-fe-field input[type="time"] {
    padding: 9px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    font-size: 0.88rem;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.esb-fe-field input:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5,150,105,.12);
}
.esb-fe-field small { font-size: 0.78rem; color: #6b7280; }

/* ─── Room selection ─── */
.esb-total-guests-display {
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 8px;
    font-weight: 700;
    color: #065f46;
    font-size: 0.95rem;
}
.esb-field-note {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 4px;
}
.esb-no-rates {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.9rem;
}

/* ─── Frontend room type table ─── */
.esb-fe-room-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 0.875rem;
}
.esb-fe-room-table th {
    text-align: left;
    padding: 8px 10px;
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    font-weight: 600;
    color: #374151;
}
.esb-fe-room-table th small { font-weight: 400; color: #9ca3af; }
.esb-fe-room-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.esb-fe-room-table input { font-size: 0.875rem; }

/* ─── Auto-filled price fields ─── */
.esb-auto-filled {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
    color: #1e40af !important;
    cursor: not-allowed;
}