/**
 * AraSync Demo Booking Widget
 *
 * Enqueued only on pages containing [arasync_demo_booking] — see
 * inc/demo-booking.php. Reuses the theme's existing design tokens
 * (--arasync-*, --spacing-*, --radius-*, --shadow-*, --font-primary) and the
 * global .btn / .form-group / .form-row rules already defined in style.css
 * so the widget reads as part of the site rather than an embedded app.
 *
 * @package AraSync_Theme
 */

.arasync-booking {
    max-width: 640px;
    margin: 0 auto;
    background: var(--arasync-white);
    border: 1px solid var(--arasync-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-2xl);
    font-family: var(--font-primary);
}

.arasync-booking__title {
    color: var(--arasync-navy);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.arasync-booking__intro {
    color: var(--arasync-gray-500);
    margin-bottom: var(--spacing-xl);
}

/* Screen-reader-only status line. Sighted users infer progress from the
   panel that becomes visible; assistive tech gets an explicit announcement
   on every step change (see aria-live="polite" in the markup). */
.arasync-booking__announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.arasync-booking__step-heading {
    color: var(--arasync-navy);
    font-size: 1.15rem;
    margin-bottom: var(--spacing-md);
}

.arasync-booking__loading {
    color: var(--arasync-gray-500);
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.arasync-booking__panel[data-step="empty"],
.arasync-booking__panel[data-step="error"] {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.arasync-booking__panel[data-step="empty"] p,
.arasync-booking__panel[data-step="error"] p {
    color: var(--arasync-gray-600);
    margin-bottom: var(--spacing-lg);
}

.arasync-booking__slotlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--spacing-md);
}

.arasync-booking__slot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: var(--spacing-md);
    background: var(--arasync-white);
    border: 2px solid var(--arasync-gray-200);
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.arasync-booking__slot:hover {
    border-color: var(--arasync-primary);
    background: var(--arasync-primary-50);
    transform: translateY(-1px);
}

.arasync-booking__slot:focus-visible {
    outline: 3px solid var(--arasync-primary);
    outline-offset: 2px;
}

.arasync-booking__slot-date {
    font-weight: 700;
    color: var(--arasync-navy);
    font-size: 0.95rem;
}

.arasync-booking__slot-time {
    color: var(--arasync-gray-500);
    font-size: 0.875rem;
}

.arasync-booking__selected-slot {
    background: var(--arasync-primary-50);
    color: var(--arasync-primary-dark);
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

/* Cancel view — organization name from GET /cancel/:token, shown as a
   secondary line under the cancel prompt (.arasync-booking__selected-slot). */
.arasync-booking__cancel-org {
    color: var(--arasync-gray-500);
    font-size: 0.875rem;
    margin-top: calc(-1 * var(--spacing-md));
    margin-bottom: var(--spacing-lg);
}

.arasync-booking__message {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    font-size: 0.9rem;
}

.arasync-booking__message--error {
    background: rgba(220, 38, 38, 0.08);
    color: var(--arasync-error);
}

.arasync-booking__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.arasync-booking__actions .btn {
    flex: 1 1 auto;
}

.arasync-booking__panel[data-step="confirmed"] {
    text-align: center;
    padding: var(--spacing-lg) 0;
}

.arasync-booking__panel[data-step="confirmed"] .arasync-booking__step-heading {
    color: var(--arasync-success);
}

.arasync-booking__panel[data-step="confirmed"] p[data-role="confirmed-summary"] {
    color: var(--arasync-gray-600);
    margin-bottom: var(--spacing-lg);
    font-size: 1.05rem;
}

/* The interests group is a <fieldset>/<legend> (for the a11y grouping a plain
   div can't give screen-reader users), but .checkbox-group/.checkbox-header
   (style.css) were written for a <div>/<label> pair used by the contact form
   below on this same page. Reset the native fieldset/legend chrome so it
   picks up the identical visual treatment instead of a browser-default
   border and legend inset. */
.arasync-booking fieldset.checkbox-group {
    border: 0;
    padding: 0;
    margin: 0 0 1.5rem;
    min-width: 0;
}

.arasync-booking .checkbox-group legend.checkbox-header {
    padding: 0;
    width: 100%;
}

/* Honeypot — same offscreen technique as the contact form's .hp-field
   (page-contact.php): position off canvas rather than display:none, since
   some bots skip fields hidden with display:none. */
.arasync-booking .hp-field {
    position: absolute !important;
    left: -10000px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 480px) {
    .arasync-booking {
        padding: var(--spacing-lg);
    }

    .arasync-booking__actions {
        flex-direction: column-reverse;
    }
}

/* Separates the booking widget from the "prefer to send a message" form on the
   contact page. Kept here rather than style.css so it ships with the widget. */
.demo-booking-divider {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 2.5rem 0 2rem;
}