/* Basic colorful UI */
.fhb-wrap { max-width: 900px; margin: 20px auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.fhb-card {background: transparent; border-radius: 16px; padding: 16px 20px; margin-bottom: 16px; }
.fhb-card.colorful { /*border: 2px dashed #e5c07d; background-image: linear-gradient(135deg, #e5c07d50, #e5c07d50); */}
.fhb-button { background: transparent; color: #000; border: solid 2px #000; padding: 10px 18px; border-radius: 50px; cursor: pointer; font-weight: 600; }
.fhb-button:hover { background: #e5c07d; }
@media only screen and (min-width: 600px) {.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; } }
@media only screen and (max-width: 600px) { .grid-2 { display: block; gap: 2px; } }
.span-2 { grid-column: span 2; }
@media only screen and (min-width: 600px) {.fhb-summary { display:grid; grid-template-columns: repeat(3, 1fr); gap:2px; margin: 10px 0; } }
@media only screen and (max-width: 600px) { .fhb-summary { display:block; gap:2px; margin: 10px 0; } }
.fhb-dot { display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:middle; margin-right:6px; }
.bookinginput{border: 1px solid #666 !important; border-radius: 5px !important; padding: 5px 8px !important; }
@media only screen and (min-width: 600px) {.bookinginput{width: 70%;}}
@media only screen and (max-width: 600px) {.bookinginput{width: 100%;}}
.bookinginputchq{border: 1px solid #666 !important; border-radius: 5px !important;}
.bookinginputnumber{border: 1px solid #666 !important; border-radius: 5px !important; width: 50px; padding: 5px 8px !important; }
/* Admin */
.fhb-admin-wrap .fhb-card { max-width: 1100px; }
#fhb-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.fhb-day { background: #f8fafc; border-radius: 12px; padding: 8px; min-height: 90px; box-shadow: inset 0 0 0 2px #e5e7eb; }
.fhb-day h4 { margin: 0 0 6px; font-size: 12px; color: #475569; }
.fhb-badge { display:inline-block; padding: 3px 6px; border-radius: 999px; font-size: 11px; margin: 2px 0; background:#d1fae5; }
.button-danger { background:#ef4444; color:#fff; border-color:#ef4444; }
.fhb-modal__card{z-index:999 !important;}
.loader { display: none; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); }
.loading { border: 2px solid #ccc; width: 60px; height: 60px; border-radius: 50%; border-top-color: #1ecd97; border-left-color: #1ecd97; animation: spin 1s infinite ease-in; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }