/* ── AfterBook Public Styles ─────────────────────────────────────────────── */
/* All classes are prefixed .ab- to avoid collisions with theme styles.       */

:root {
    --ab-brand:        #14B8A6;
    --ab-brand-dark:   #0F766E;
    --ab-brand-light:  #f0fdfa;
    --ab-accent:       #5EEAD4;
    --ab-success:      #16a34a;
    --ab-success-bg:   #f0fdf4;
    --ab-danger:       #dc2626;
    --ab-danger-bg:    #fef2f2;
    --ab-text:         #0F172A;
    --ab-text-muted:   #4b7280;
    --ab-border:       #d1e8e6;
    --ab-bg:           #ffffff;
    --ab-bg-alt:       #F1F5F9;
    --ab-radius:       10px;
    --ab-radius-sm:    6px;
    --ab-shadow:       0 1px 3px rgba(15,118,110,.08), 0 1px 2px rgba(15,118,110,.04);
    --ab-shadow-md:    0 4px 12px rgba(15,118,110,.12);
    --ab-transition:   .18s ease;
}

/* ── Widget shell ─────────────────────────────────────────────────────────── */

.ab-booking-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: var(--ab-text);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.5;
}

.ab-widget-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--ab-text);
}

.ab-error {
    color: var(--ab-danger);
    background: var(--ab-danger-bg);
    padding: 12px 16px;
    border-radius: var(--ab-radius-sm);
    border-left: 3px solid var(--ab-danger);
    font-size: .875rem;
}

/* ── Steps indicator ──────────────────────────────────────────────────────── */

.ab-steps {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

.ab-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.ab-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--ab-border);
    background: var(--ab-bg);
    color: var(--ab-text-muted);
    font-size: .75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ab-transition), border-color var(--ab-transition), color var(--ab-transition);
}

.ab-step-label {
    font-size: .7rem;
    color: var(--ab-text-muted);
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--ab-transition);
}

.ab-step.active   .ab-step-num   { background: var(--ab-brand); border-color: var(--ab-brand); color: #fff; }
.ab-step.active   .ab-step-label { color: var(--ab-brand); font-weight: 600; }
.ab-step.complete .ab-step-num   { background: var(--ab-success); border-color: var(--ab-success); color: #fff; }
.ab-step.complete .ab-step-num::before { content: '✓'; font-size: .7rem; }
.ab-step.complete .ab-step-num span { display: none; }

.ab-step-connector {
    flex: 1;
    height: 2px;
    background: var(--ab-border);
    margin: 0 8px;
    margin-bottom: 14px;
    transition: background var(--ab-transition);
}

.ab-step-connector.complete { background: var(--ab-success); }

/* ── Panels ───────────────────────────────────────────────────────────────── */

.ab-panel { animation: ab-fadein .2s ease; }
.ab-panel-hidden { display: none !important; }

@keyframes ab-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ab-panel-heading {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--ab-text);
}

.ab-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ab-border);
}

/* ── Panel card (matches .ab-calendar visual treatment) ──────────────────── */

.ab-panel-card {
    background: var(--ab-bg);
    border: none;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(15,118,110,.14), 0 2px 8px rgba(15,118,110,.08);
}

.ab-panel-footer--right {
    justify-content: flex-end;
}

/* ── Service dropdown (step 1) ────────────────────────────────────────────── */

.ab-select-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.ab-select-wrap {
    position: relative;
    margin-bottom: 20px;
}

.ab-select-wrap::after {
    content: '▾';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ab-brand);
    pointer-events: none;
    font-size: .9rem;
}

.ab-service-select {
    width: 100%;
    padding: 11px 40px 11px 14px;
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius-sm);
    font-size: .95rem;
    font-family: inherit;
    color: var(--ab-text);
    background: var(--ab-bg);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color var(--ab-transition), box-shadow var(--ab-transition);
    box-sizing: border-box;
}

.ab-service-select:focus {
    outline: none;
    border-color: var(--ab-brand);
    box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}

.ab-service-info {
    background: var(--ab-brand-light);
    border: 1px solid #99f6e4;
    border-radius: var(--ab-radius-sm);
    padding: 10px 14px;
    margin-bottom: 20px;
}

.ab-service-info-desc {
    margin: 0;
    font-size: .875rem;
    color: #0F766E;
}

/* ── Service cards ────────────────────────────────────────────────────────── */

.ab-service-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ab-service-card {
    width: 100%;
    text-align: left;
    background: var(--ab-bg);
    border: 2px solid var(--ab-border);
    border-radius: var(--ab-radius);
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color var(--ab-transition), box-shadow var(--ab-transition), background var(--ab-transition);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ab-service-card:hover {
    border-color: var(--ab-brand);
    box-shadow: var(--ab-shadow);
}

.ab-service-card.selected {
    border-color: var(--ab-brand);
    background: var(--ab-brand-light);
}

.ab-service-name {
    font-weight: 600;
    font-size: .95rem;
    color: var(--ab-text);
}

.ab-service-meta {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ab-service-duration {
    font-size: .8rem;
    color: var(--ab-text-muted);
}

.ab-service-price {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ab-brand);
    background: var(--ab-brand-light);
    padding: 2px 8px;
    border-radius: 20px;
}

.ab-service-desc {
    font-size: .82rem;
    color: var(--ab-text-muted);
    line-height: 1.4;
}

/* ── Calendar ─────────────────────────────────────────────────────────────── */

.ab-calendar {
    background: var(--ab-bg);
    border: none;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(15,118,110,.14), 0 2px 8px rgba(15,118,110,.08);
    position: relative;
}

.ab-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ab-border);
}

.ab-cal-month-label {
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--ab-text);
}

.ab-cal-nav-group {
    display: flex;
    gap: 8px;
}

.ab-cal-nav {
    background: var(--ab-brand);
    border: none;
    border-radius: 10px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    font-size: 1rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ab-transition);
}

.ab-cal-nav:hover:not(:disabled) {
    background: var(--ab-brand-dark);
    color: #fff;
}

.ab-cal-nav:disabled { opacity: .35; cursor: not-allowed; }

.ab-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
}

.ab-cal-weekdays span {
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ab-text);
    padding: 6px 0;
    letter-spacing: 0;
    text-transform: none;
}

.ab-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.ab-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .9rem;
    cursor: pointer;
    border: none;
    transition: background var(--ab-transition), color var(--ab-transition);
    font-weight: 500;
    color: var(--ab-text);
}

.ab-cal-day:hover:not(.unavailable):not(.other-month):not(.empty) {
    background: var(--ab-brand-light);
    color: var(--ab-brand);
}

.ab-cal-day.today       { font-weight: 700; color: var(--ab-brand); }
.ab-cal-day.selected    { background: var(--ab-brand); color: #fff !important; }
.ab-cal-day.unavailable { color: #d1d5db; cursor: default; }
.ab-cal-day.other-month { color: #d1d5db; cursor: default; }
.ab-cal-day.empty       { cursor: default; }

/* ── Month indicator ──────────────────────────────────────────────────────── */

.ab-cal-months {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ab-border);
}

.ab-cal-month-names {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-bottom: 8px;
}

.ab-cal-month-names span {
    text-align: center;
    font-size: .65rem;
    font-weight: 500;
    color: var(--ab-text-muted);
    cursor: pointer;
    transition: color var(--ab-transition);
    padding: 2px 0;
}

.ab-cal-month-names span:hover      { color: var(--ab-brand); }
.ab-cal-month-names span.ab-active  { color: var(--ab-brand); font-weight: 700; }

.ab-cal-month-dots {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.ab-cal-month-dot {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 0;
}

.ab-cal-month-dot::after {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e5e7eb;
    display: block;
    transition: background var(--ab-transition), transform var(--ab-transition);
}

.ab-cal-month-dot.ab-active::after {
    background: var(--ab-brand);
    transform: scale(1.15);
}

.ab-cal-loading {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

/* ── Time slots ───────────────────────────────────────────────────────────── */

.ab-slots-wrap { margin-bottom: 12px; }

.ab-slots-heading {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ab-text);
    margin: 0 0 12px;
}

.ab-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.ab-slot {
    padding: 9px 6px;
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius-sm);
    background: var(--ab-bg);
    font-size: .85rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    color: var(--ab-text);
    transition: background var(--ab-transition), border-color var(--ab-transition), color var(--ab-transition);
}

.ab-slot:hover:not(.unavailable) {
    background: var(--ab-brand-light);
    border-color: var(--ab-brand);
    color: var(--ab-brand);
}

.ab-slot.selected  { background: var(--ab-brand); border-color: var(--ab-brand); color: #fff; }
.ab-slot.unavailable { background: var(--ab-bg-alt); color: var(--ab-border); cursor: not-allowed; text-decoration: line-through; }

.ab-no-slots {
    font-size: .875rem;
    color: var(--ab-text-muted);
    padding: 12px 0;
    text-align: center;
}

/* ── Summary bar ──────────────────────────────────────────────────────────── */

.ab-summary-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--ab-brand-light);
    border: 1px solid #99f6e4;
    border-radius: var(--ab-radius-sm);
    font-size: .85rem;
    margin-bottom: 20px;
    color: #0F766E;
}

.ab-summary-sep { opacity: .4; }
.ab-summary-service { font-weight: 600; }

/* ── Form fields ──────────────────────────────────────────────────────────── */

.ab-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.ab-field-row:has(.ab-field:only-child) { grid-template-columns: 1fr; }

.ab-field { display: flex; flex-direction: column; gap: 5px; }

.ab-field label {
    font-size: .82rem;
    font-weight: 600;
    color: #374151;
}

.ab-field input,
.ab-field textarea {
    padding: 9px 12px;
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius-sm);
    font-size: .9rem;
    font-family: inherit;
    color: var(--ab-text);
    background: var(--ab-bg);
    transition: border-color var(--ab-transition), box-shadow var(--ab-transition);
    width: 100%;
    box-sizing: border-box;
}

.ab-field input:focus,
.ab-field textarea:focus {
    outline: none;
    border-color: var(--ab-brand);
    box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}

.ab-field input.invalid { border-color: var(--ab-danger); }
.ab-field textarea { resize: vertical; min-height: 80px; }

.ab-field-error {
    font-size: .78rem;
    color: var(--ab-danger);
    min-height: 1em;
}

/* ── Stripe card element ──────────────────────────────────────────────────── */

.ab-card-element {
    padding: 10px 12px;
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius-sm);
    background: var(--ab-bg);
    transition: border-color var(--ab-transition), box-shadow var(--ab-transition);
}

.ab-card-element--focused {
    border-color: var(--ab-brand);
    box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}

.ab-card-element--invalid { border-color: var(--ab-danger); }

/* ── Submit button ────────────────────────────────────────────────────────── */

.ab-btn-submit {
    padding: 11px 28px;
    background: var(--ab-brand);
    color: #fff;
    border: none;
    border-radius: var(--ab-radius-sm);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--ab-transition), transform .1s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ab-btn-submit:hover:not(:disabled) { background: var(--ab-brand-dark); }
.ab-btn-submit:active:not(:disabled) { transform: scale(.98); }
.ab-btn-submit:disabled { opacity: .65; cursor: not-allowed; }

.ab-btn-back {
    background: none;
    border: none;
    font-size: .875rem;
    color: var(--ab-text-muted);
    cursor: pointer;
    padding: 8px 4px;
    font-family: inherit;
    transition: color var(--ab-transition);
}

.ab-btn-back:hover { color: var(--ab-text); }

.ab-btn-secondary {
    padding: 10px 22px;
    background: var(--ab-bg);
    color: var(--ab-text);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius-sm);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--ab-transition), border-color var(--ab-transition);
}

.ab-btn-secondary:hover { background: var(--ab-bg-alt); border-color: #d1d5db; }

/* ── Form error banner ────────────────────────────────────────────────────── */

.ab-form-error {
    padding: 10px 14px;
    background: var(--ab-danger-bg);
    border: 1px solid #fca5a5;
    border-radius: var(--ab-radius-sm);
    font-size: .875rem;
    color: #991b1b;
    margin-bottom: 12px;
}

/* ── Confirmation ─────────────────────────────────────────────────────────── */

.ab-confirmation {
    text-align: center;
    padding: 32px 20px;
}

.ab-confirm-icon {
    width: 60px;
    height: 60px;
    background: var(--ab-success);
    color: #fff;
    font-size: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    animation: ab-pop .35s cubic-bezier(.34,1.56,.64,1);
}

@keyframes ab-pop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

.ab-confirm-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--ab-text);
}

.ab-confirm-details {
    background: var(--ab-bg-alt);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
    padding: 16px 20px;
    display: inline-block;
    text-align: left;
    margin-bottom: 16px;
    font-size: .9rem;
    min-width: 260px;
}

.ab-confirm-details dl { margin: 0; }
.ab-confirm-details dt {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ab-text-muted);
    margin-top: 10px;
}

.ab-confirm-details dt:first-child { margin-top: 0; }
.ab-confirm-details dd { margin: 2px 0 0; color: var(--ab-text); font-weight: 500; }

.ab-confirm-email-note {
    font-size: .82rem;
    color: var(--ab-text-muted);
    margin-bottom: 20px;
}

/* ── Spinners ─────────────────────────────────────────────────────────────── */

.ab-spinner-dark, .ab-spinner-white {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-radius: 50%;
    animation: ab-spin .65s linear infinite;
    vertical-align: middle;
}

.ab-spinner-dark  { border-top-color: var(--ab-brand); }
.ab-spinner-white { border-top-color: rgba(255,255,255,.9); }

@keyframes ab-spin { to { transform: rotate(360deg); } }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 520px) {
    .ab-field-row         { grid-template-columns: 1fr; }
    .ab-steps             { gap: 0; }
    .ab-step-label        { font-size: .6rem; }
    .ab-step-connector    { margin: 0 4px; }
    .ab-slots-grid        { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}