/* ═══════════════════════════════════════════════════════
   Beach Booking Manager — Public Styles
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

.bbm-booking-wrapper {
    font-family: 'Outfit', -apple-system, sans-serif;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    color: #334155;
}

/* ── Header ─────────────────── */
.bbm-header {
    text-align: center;
    padding: 40px 0 24px;
}
.bbm-title {
    font-size: 28px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 8px;
}
.bbm-subtitle {
    font-size: 15px;
    color: #94a3b8;
    margin: 0;
}

/* ── Dates ──────────────────── */
.bbm-dates {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.bbm-date-group {
    flex: 1;
    min-width: 160px;
}
.bbm-date-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}
.bbm-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    font-size: 14px;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.bbm-input:focus {
    border-color: #0ea5e9;
}

/* ── Buttons ────────────────── */
.bbm-btn {
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.bbm-btn-primary {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    box-shadow: 0 4px 12px rgba(14,165,233,0.3);
}
.bbm-btn-primary:hover {
    box-shadow: 0 6px 20px rgba(14,165,233,0.4);
    transform: translateY(-1px);
}
.bbm-btn-large {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border-radius: 12px;
}

/* ── Legend ──────────────────── */
.bbm-legend {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.bbm-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}
.bbm-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.bbm-legend-free .bbm-dot     { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.4); }
.bbm-legend-booked .bbm-dot   { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.4); }
.bbm-legend-occupied .bbm-dot { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.4); }

.bbm-legend-free     { color: #22c55e; }
.bbm-legend-booked   { color: #f59e0b; }
.bbm-legend-occupied { color: #ef4444; }

/* ── Zone Filter ────────────── */
.bbm-zone-filter {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.bbm-zone-btn {
    padding: 8px 18px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
    color: #64748b;
}
.bbm-zone-btn:hover {
    border-color: #0ea5e9;
    color: #0ea5e9;
}
.bbm-zone-btn.active {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
}

/* ── Map ────────────────────── */
.bbm-map {
    min-height: 200px;
    margin-bottom: 24px;
}
.bbm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 0;
    color: #94a3b8;
    font-size: 14px;
}
.bbm-spinner {
    width: 24px; height: 24px;
    border: 3px solid #e2e8f0;
    border-top-color: #0ea5e9;
    border-radius: 50%;
    animation: bbmSpin 0.8s linear infinite;
}
@keyframes bbmSpin { to { transform: rotate(360deg); } }

/* Map zone card (public) */
.bbm-pub-zone {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.bbm-pub-zone-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.bbm-pub-zone-badge {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}
.bbm-pub-zone-name {
    font-weight: 700;
    font-size: 15px;
}
.bbm-pub-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    align-items: center;
}
.bbm-pub-row-label {
    width: 24px;
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
    text-align: right;
    flex-shrink: 0;
}
.bbm-pub-row-items {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

/* Public umbrella */
.bbm-pub-umb {
    width: 48px; height: 52px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    transition: all 0.15s;
    border: 2px solid transparent;
    position: relative;
}
.bbm-pub-umb:hover {
    transform: scale(1.1);
    z-index: 2;
}
.bbm-pub-umb.free     { background: #dcfce7; border-color: #22c55e; }
.bbm-pub-umb.booked   { background: #fef3c7; border-color: #f59e0b; cursor: default; opacity: 0.6; }
.bbm-pub-umb.occupied { background: #fecaca; border-color: #ef4444; cursor: default; opacity: 0.6; }
.bbm-pub-umb.selected {
    background: #1a1a2e !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.3);
}
.bbm-pub-umb-icon { font-size: 16px; }
.bbm-pub-umb-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.bbm-pub-umb.free .bbm-pub-umb-label     { color: #22c55e; }
.bbm-pub-umb.selected .bbm-pub-umb-label { color: #c7d2fe; }

/* ── Booking Form ───────────── */
.bbm-booking-form {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    margin-bottom: 24px;
}
.bbm-booking-form h3 {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 800;
    color: #1a1a2e;
}
.bbm-selected-info {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #0284c7;
}
.bbm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.bbm-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bbm-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}
.bbm-full-width {
    grid-column: 1 / -1;
}
textarea.bbm-input {
    resize: vertical;
}
.bbm-price-summary {
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    font-size: 14px;
}
.bbm-price-summary strong {
    font-size: 22px;
    color: #1a1a2e;
}

/* ── Success ────────────────── */
.bbm-success {
    text-align: center;
    padding: 48px 20px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}
.bbm-success-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}
.bbm-success h3 {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 8px;
}
.bbm-success p {
    color: #94a3b8;
    font-size: 14px;
}
#bbm-success-details {
    margin-top: 16px;
    background: #f0fdf4;
    border-radius: 10px;
    padding: 16px;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #16a34a;
}

/* ── Responsive ─────────────── */
@media (max-width: 640px) {
    .bbm-dates {
        flex-direction: column;
    }
    .bbm-form-grid {
        grid-template-columns: 1fr;
    }
    .bbm-title {
        font-size: 22px;
    }
}