/* MO Bookings Cloud — front-end widget styles */
.mo-bookings-cloud {
    --mobc-primary: #0073aa;
    max-width: 640px;
    margin: 1em auto;
    font-size: 15px;
    color: #1d2327;
}
.mo-bookings-cloud * { box-sizing: border-box; }
.mo-bookings-cloud .mobc-notice,
.mo-bookings-cloud .mobc-loading {
    padding: 1em 1.25em; border: 1px solid #e2e4e7; border-radius: 8px;
    background: #f7f8fa; color: #50575e;
}
.mo-bookings-cloud .mobc-error {
    padding: .6em .9em; margin-bottom: .8em; border-radius: 6px;
    background: #fcf0f1; border: 1px solid #f0c0c4; color: #b32d2e; font-size: 14px;
}
.mobc-head { margin-bottom: 1em; }
.mobc-title { margin: 0; font-size: 1.4em; }
.mobc-staff { margin: .15em 0 0; color: var(--mobc-primary); font-weight: 600; }
.mobc-step { margin: .5em 0 0; color: #646970; font-size: .95em; }
.mobc-staff-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; float: right; margin-left: 12px; }
.mobc-intro { margin: 0 0 1em; color: #50575e; }
.mobc-intro p:first-child { margin-top: 0; }
.mobc-confirm-msg { margin: .5em 0; color: #1d2327; }

/* Services */
.mobc-services { display: grid; gap: .6em; }
.mobc-service {
    text-align: left; padding: .85em 1em; border: 1px solid #dcdcde;
    border-left: 4px solid var(--mobc-primary); border-radius: 8px; background: #fff;
    cursor: pointer; font-size: 1em; font-weight: 600; transition: box-shadow .15s, transform .05s;
}
.mobc-service:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.mobc-service .mobc-dur { display: inline-block; margin-left: .6em; font-weight: 400; color: #646970; font-size: .85em; }
.mobc-service .mobc-desc { display: block; margin-top: .25em; font-weight: 400; color: #646970; font-size: .85em; }

/* Calendar */
.mobc-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5em; }
.mobc-cal-nav button { width: 38px; height: 38px; border: 1px solid #dcdcde; background: #fff; border-radius: 8px; cursor: pointer; font-size: 1.3em; line-height: 1; }
.mobc-cal-nav button:hover { background: #f0f0f1; }
.mobc-cal-label { font-weight: 600; }
.mobc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mobc-dow { text-align: center; font-size: .75em; color: #646970; padding: .3em 0; }
.mobc-day, .mobc-pad { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: .9em; }
.mobc-pad { visibility: hidden; }
.mobc-day { border: 1px solid transparent; background: #f0f0f1; color: #a7aaad; cursor: default; }
.mobc-day-avail { background: var(--mobc-primary); color: #fff; cursor: pointer; font-weight: 600; border: none; }
.mobc-day-avail:hover { filter: brightness(1.1); }
.mobc-day-off { opacity: .6; }

/* Slots */
.mobc-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .5em; margin: .5em 0; }
.mobc-slot { padding: .6em; border: 1px solid var(--mobc-primary); color: var(--mobc-primary); background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; }
.mobc-slot:hover { background: var(--mobc-primary); color: #fff; }

/* Form */
.mobc-summary { padding: .6em .9em; background: #f0f6fc; border-radius: 6px; margin-bottom: 1em; font-weight: 600; }
.mobc-form { display: grid; gap: .8em; }
.mobc-field { display: grid; gap: .25em; }
.mobc-field label { font-weight: 600; font-size: .9em; }
.mobc-field input, .mobc-field textarea { width: 100%; padding: .6em .7em; border: 1px solid #dcdcde; border-radius: 8px; font-size: 1em; }
.mobc-field textarea { min-height: 80px; }
.mobc-field select { width: 100%; padding: .6em .7em; border: 1px solid #dcdcde; border-radius: 8px; font-size: 1em; background: #fff; }
.mobc-choice-group { display: block; line-height: 2; }
.mobc-choice { font-weight: 400; display: inline-block; white-space: nowrap; margin: 0 1.4em .2em 0; vertical-align: middle; }
.mobc-choice input { width: auto; margin: 0 .35em 0 0; vertical-align: middle; }
.mobc-req { color: #b32d2e; }
.mobc-submit { padding: .8em 1.2em; background: var(--mobc-primary); color: #fff; border: none; border-radius: 8px; font-size: 1.05em; font-weight: 600; cursor: pointer; }
.mobc-submit:hover { filter: brightness(1.1); }
.mobc-submit:disabled { opacity: .6; cursor: default; }
.mobc-back { background: none; border: none; color: #646970; cursor: pointer; padding: .4em 0; text-align: left; font-size: .9em; }
.mobc-back:hover { color: var(--mobc-primary); }

/* Confirmation */
.mobc-confirmed { text-align: center; padding: 1.5em 1em; }
.mobc-tick { width: 56px; height: 56px; margin: 0 auto .6em; border-radius: 50%; background: #008a20; color: #fff; font-size: 2em; line-height: 56px; }
.mobc-confirm-detail { color: #50575e; margin-top: .5em; }