/**
 * MA Upholstery Calendar - Extended booking styles
 * Warm brown/terracotta color scheme for upholstery businesses
 */

/* CSS Variables - Upholstery warm tones */
:root {
    --mauc-accent: #993C1D;
    --mauc-accent-dark: #4A1B0C;
    --mauc-accent-light: #FAECE7;
    --mauc-accent-hover: #7D3218;
    --mauc-text-primary: #1a1a1a;
    --mauc-text-secondary: #6b7280;
    --mauc-text-tertiary: #9ca3af;
    --mauc-border: #e5e7eb;
    --mauc-border-light: #f0f0f0;
    --mauc-bg-primary: #fff;
    --mauc-bg-secondary: #f9fafb;
    --mauc-radius-sm: 6px;
    --mauc-radius-md: 10px;
    --mauc-radius-lg: 12px;
}

/* Main container */
.mauc-shortcode-wrap {
    position: static;
    z-index: auto;
    clear: both;
    display: flow-root;
    width: 100%;
    overflow: visible;
    margin-bottom: 32px;
}

.mauc-container {
    max-width: 560px;
    margin: 1.5rem auto;
    background: var(--mauc-bg-secondary);
    border-radius: var(--mauc-radius-lg);
    padding: 1.25rem;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.mauc-container *,
.mauc-container *::before,
.mauc-container *::after {
    box-sizing: border-box;
}

/* Force all text inside to be dark - aggressive overrides for WordPress themes */
.mauc-container {
    color: #1a1a1a !important;
}

.mauc-container h1,
.mauc-container h2,
.mauc-container h3,
.mauc-container h4,
.mauc-container h5,
.mauc-container h6,
.mauc-container p,
.mauc-container span,
.mauc-container label,
.mauc-container div {
    color: #1a1a1a !important;
}

/* Ultra-specific overrides for step titles - needed for WP themes */
.mauc-shortcode-wrap .mauc-container .mauc-card .mauc-step-panel h2.mauc-step-title,
.mauc-shortcode-wrap .mauc-container .mauc-card h2.mauc-step-title,
.mauc-shortcode-wrap .mauc-container h2.mauc-step-title,
.mauc-shortcode-wrap h2.mauc-step-title,
h2.mauc-step-title,
.mauc-step-title {
    color: #1a1a1a !important;
}

/* Override any color: inherit or color: currentColor patterns */
.mauc-container *:not(.mauc-nav-btn):not(.mauc-btn-next):not(.mauc-btn-confirm) {
    color: #1a1a1a;
}

/* Specific step description override */
.mauc-shortcode-wrap .mauc-container .mauc-card .mauc-step-panel p.mauc-step-desc,
.mauc-shortcode-wrap .mauc-container .mauc-card p.mauc-step-desc,
.mauc-shortcode-wrap .mauc-container p.mauc-step-desc,
.mauc-shortcode-wrap p.mauc-step-desc,
p.mauc-step-desc,
.mauc-step-desc {
    color: #6b7280 !important;
}

/* Allow muted text colors */
.mauc-step-label,
.mauc-step-desc,
.mauc-svc-desc,
.mauc-hint,
.mauc-optional,
.mauc-upload-hint,
.mauc-confirm-hint,
.mauc-returning-client,
.mauc-summary-label,
.mauc-step-readout {
    color: #6b7280 !important;
}

/* White text for buttons */
.mauc-nav-btn.mauc-nav-primary,
.mauc-nav-btn.mauc-nav-confirm,
.mauc-btn-next,
.mauc-btn-confirm {
    color: #ffffff !important;
}

/* Header - Hidden per design */
.mauc-header {
    display: none !important;
}

.mauc-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mauc-brand-icon {
    width: 34px;
    height: 34px;
    background: var(--mauc-accent-dark);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mauc-brand-icon i {
    color: #F0997B;
    font-size: 19px;
}

.mauc-brand {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--mauc-text-primary);
}

.mauc-subtitle {
    font-size: 11px;
    color: var(--mauc-text-secondary);
}

.mauc-time-estimate {
    font-size: 11px;
    color: var(--mauc-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.mauc-time-estimate i {
    font-size: 13px;
}

/* Progress Stepper */
.mauc-stepper {
    display: flex;
    gap: 4px;
    margin-bottom: 1rem;
    padding: 0 2px;
}

.mauc-stepper-dot {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--mauc-border);
    transition: background 0.2s;
}

.mauc-stepper-dot.active {
    background: var(--mauc-accent);
}

/* Card */
.mauc-card {
    background: var(--mauc-bg-primary);
    border-radius: var(--mauc-radius-lg);
    border: 0.5px solid var(--mauc-border);
    padding: 1.25rem 1.5rem;
}

/* Step 3 - Calendar layout */
.mauc-step-panel[data-panel="3"] .mauc-appt-type-row {
    margin-bottom: 0.75rem;
}

/* Step Panels */
.mauc-step-panel {
    display: none;
}

.mauc-step-panel.active {
    display: block;
}

.mauc-step-label {
    font-size: 11px;
    color: #9ca3af !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.mauc-step-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #1a1a1a !important;
    line-height: 1.15;
}

.mauc-step-desc {
    font-size: 13px;
    color: #6b7280 !important;
    margin: 0 0 1rem;
}

/* Service Cards */
.mauc-service-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mauc-svc-card {
    background: var(--mauc-bg-primary);
    border: 0.5px solid var(--mauc-border);
    border-radius: var(--mauc-radius-md);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mauc-svc-card:hover {
    background: var(--mauc-bg-secondary);
}

.mauc-svc-card.sel {
    border: 1.5px solid var(--mauc-accent) !important;
    background: var(--mauc-accent-light) !important;
}

.mauc-svc-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mauc-svc-icon i {
    font-size: 22px;
    font-style: normal;
}

.mauc-svc-content {
    flex: 1;
}

.mauc-svc-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--mauc-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mauc-svc-badge {
    font-size: 11px;
    color: var(--mauc-accent-dark);
    padding: 2px 6px;
    background: var(--mauc-bg-secondary);
    border-radius: 4px;
    font-weight: 400;
}

.mauc-svc-desc {
    font-size: 12px;
    color: var(--mauc-text-secondary);
    margin-top: 2px;
}

/* Mobile/Desktop description variants for drop-off */
/* Default: Desktop view - hide mobile description, show desktop */
.mauc-svc-content .mauc-desc-mobile {
    display: none !important;
}

.mauc-svc-content .mauc-desc-desktop {
    display: block !important;
}

/* Mobile/Portrait: Hide badge and desktop description, show mobile description */
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    .mauc-svc-name .mauc-badge-desktop {
        display: none !important;
    }

    .mauc-svc-content .mauc-desc-desktop {
        display: none !important;
    }

    .mauc-svc-content .mauc-desc-mobile {
        display: block !important;
    }
}

.mauc-svc-arrow {
    color: var(--mauc-text-tertiary);
}

/* Chips */
.mauc-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mauc-chip {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 100px;
    border: 0.5px solid var(--mauc-border);
    background: var(--mauc-bg-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
    color: var(--mauc-text-secondary);
}

.mauc-chip:hover {
    background: var(--mauc-bg-secondary);
}

.mauc-chip.sel {
    background: var(--mauc-accent-light);
    border-color: var(--mauc-accent);
    color: var(--mauc-accent-dark);
}

.mauc-chip i {
    font-size: 13px;
    vertical-align: -1px;
}

.mauc-chip-fee {
    font-size: 11px;
    opacity: 0.8;
}

/* Appointment Type Row */
.mauc-appt-type-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* Field Groups */
.mauc-field-group {
    margin-bottom: 1rem;
}

.mauc-field-label {
    font-size: 13px;
    font-weight: 500;
    display: block;
    margin-bottom: 6px;
    color: var(--mauc-text-primary);
}

.mauc-optional {
    color: var(--mauc-text-tertiary);
    font-weight: 400;
}

.mauc-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Inputs */
.mauc-input,
.mauc-textarea,
.mauc-container input[type="text"],
.mauc-container input[type="email"],
.mauc-container input[type="tel"],
.mauc-container textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    color: #1a1a1a !important;
    background: #ffffff !important;
    border: 1px solid var(--mauc-border) !important;
    border-radius: var(--mauc-radius-sm);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    -webkit-text-fill-color: #1a1a1a !important;
    opacity: 1 !important;
}

.mauc-input::placeholder,
.mauc-textarea::placeholder {
    color: var(--mauc-text-tertiary);
}

.mauc-input:focus,
.mauc-textarea:focus {
    border-color: var(--mauc-accent) !important;
    box-shadow: 0 0 0 3px rgba(153, 60, 29, 0.12);
}

.mauc-textarea {
    resize: vertical;
    min-height: 60px;
}

.mauc-hint {
    font-size: 11px;
    color: var(--mauc-text-tertiary);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mauc-hint i {
    font-size: 13px;
}

/* Dimensions Row */
.mauc-dim-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.mauc-dim-field {
    text-align: center;
}

.mauc-dim-field .mauc-input {
    text-align: center;
}

.mauc-dim-label {
    text-align: center;
    font-size: 11px;
    color: var(--mauc-text-tertiary);
    margin-top: 3px;
}

/* Checkbox label */
.mauc-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--mauc-text-secondary);
    cursor: pointer;
    margin-top: 10px;
}

.mauc-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--mauc-accent);
    cursor: pointer;
}

/* Disabled dimension inputs */
.mauc-dim-row.mauc-dim-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.mauc-dim-row.mauc-dim-disabled .mauc-input {
    background: var(--mauc-bg-secondary);
}

/* Upload Zone */
.mauc-upload-zone {
    border: 1px dashed var(--mauc-border);
    border-radius: var(--mauc-radius-md);
    padding: 18px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mauc-upload-zone:hover {
    background: var(--mauc-bg-secondary);
}

.mauc-upload-zone i {
    font-size: 22px;
    color: var(--mauc-text-secondary);
}

.mauc-upload-text {
    font-size: 13px;
    margin-top: 6px;
    color: var(--mauc-text-primary);
}

.mauc-upload-hint {
    font-size: 11px;
    color: var(--mauc-text-tertiary);
    margin-top: 2px;
}

.mauc-photo-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    clear: both;
}

.mauc-photo-thumb-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--mauc-radius-sm);
}

.mauc-photo-thumb {
    width: 100%;
    height: 100%;
    max-width: 60px;
    max-height: 60px;
    border-radius: var(--mauc-radius-sm);
    object-fit: cover;
    border: 1px solid var(--mauc-border);
    display: block;
}

.mauc-photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.mauc-photo-remove:hover {
    background: #dc2626;
}

/* Drag and drop state */
.mauc-upload-zone.mauc-drag-over {
    border-color: var(--mauc-accent) !important;
    background: var(--mauc-accent-light) !important;
}

.mauc-upload-zone.mauc-drag-over i {
    color: var(--mauc-accent);
}

/* Returning Client */
.mauc-returning-client {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--mauc-text-secondary);
    padding: 10px 12px;
    background: var(--mauc-bg-secondary);
    border-radius: var(--mauc-radius-sm);
    margin-top: 12px;
}

.mauc-returning-client i {
    font-size: 14px;
}

.mauc-returning-client a {
    color: #185FA5;
    text-decoration: none;
}

.mauc-returning-client a:hover {
    text-decoration: underline;
}

/* Button Row */
.mauc-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
}

.mauc-btn-back {
    padding: 8px 12px;
    font-size: 13px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--mauc-text-secondary);
    font-family: inherit;
}

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

.mauc-btn-next {
    flex: 1;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    background: var(--mauc-accent-dark);
    color: white;
    border: 1px solid var(--mauc-accent-dark);
    border-radius: var(--mauc-radius-sm);
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s ease;
}

.mauc-btn-next:hover:not(:disabled) {
    opacity: 0.9;
}

.mauc-btn-next:disabled {
    background: var(--mauc-border);
    border-color: var(--mauc-border);
    color: var(--mauc-text-tertiary);
    cursor: not-allowed;
}

/* Summary Card */
.mauc-summary-card {
    background: var(--mauc-bg-secondary);
    border-radius: var(--mauc-radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1rem;
}

.mauc-summary-row {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 0.5px solid var(--mauc-border);
}

.mauc-summary-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mauc-summary-label {
    font-size: 12px;
    color: var(--mauc-text-secondary);
}

.mauc-summary-val {
    font-size: 13px;
    font-weight: 500;
    color: var(--mauc-text-primary);
    text-align: right;
}

.mauc-summary-val.mauc-ref {
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 13px;
}

/* Appointment Info Blocks (Phone/In-shop/On-site) */
.mauc-appt-info {
    background: #f8f9fa;
    border-radius: var(--mauc-radius-md);
    padding: 16px;
    margin: 16px 0;
    border-left: 3px solid var(--mauc-accent);
}

.mauc-appt-info-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mauc-text-primary);
    margin-bottom: 8px;
}

.mauc-appt-info-text {
    font-size: 14px;
    color: var(--mauc-text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.mauc-appt-info-btn {
    display: inline-block;
    background: var(--mauc-accent);
    color: #fff !important;
    text-decoration: none !important;
    padding: 8px 16px;
    border-radius: var(--mauc-radius-sm);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s;
}

.mauc-appt-info-btn:hover {
    background: var(--mauc-accent-hover);
}

/* Phone appointment - blue tones */
.mauc-appt-phone {
    background: #f0f9ff;
    border-left-color: #0284c7;
}

.mauc-appt-phone .mauc-appt-info-title {
    color: #0c4a6e;
}

.mauc-appt-phone .mauc-appt-info-text {
    color: #075985;
}

/* In-shop appointment - green tones */
.mauc-appt-inshop {
    background: #f0fdf4;
    border-left-color: #16a34a;
}

.mauc-appt-inshop .mauc-appt-info-title {
    color: #15803d;
}

.mauc-appt-inshop .mauc-appt-info-text {
    color: #166534;
}

.mauc-appt-inshop .mauc-appt-info-btn {
    background: #16a34a;
}

.mauc-appt-inshop .mauc-appt-info-btn:hover {
    background: #15803d;
}

/* On-site appointment - amber tones */
.mauc-appt-onsite {
    background: #fef3c7;
    border-left-color: #f59e0b;
}

.mauc-appt-onsite .mauc-appt-info-title {
    color: #92400e;
}

.mauc-appt-onsite .mauc-appt-info-text {
    color: #78350f;
}

.mauc-appt-onsite .mauc-appt-info-btn {
    background: #f59e0b;
}

.mauc-appt-onsite .mauc-appt-info-btn:hover {
    background: #d97706;
}

/* Confirm Button */
.mauc-btn-confirm {
    width: 100%;
    background: var(--mauc-accent);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: opacity 0.15s ease;
}

.mauc-btn-confirm:hover {
    opacity: 0.9;
}

.mauc-btn-confirm:disabled {
    background: var(--mauc-border);
    color: var(--mauc-text-tertiary);
    cursor: not-allowed;
}

.mauc-confirm-hint {
    font-size: 11px;
    color: var(--mauc-text-tertiary);
    text-align: center;
    margin-top: 8px;
}

/* Confirmation View */
.mauc-confirm-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.mauc-confirm-icon svg {
    width: 22px;
    height: 22px;
    stroke: #065f46;
}

.mauc-confirm-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--mauc-text-primary);
}

.mauc-confirm-sub {
    text-align: center;
    font-size: 13px;
    color: var(--mauc-text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.mauc-confirm-detail {
    background: var(--mauc-bg-secondary);
    border-radius: var(--mauc-radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.mauc-btn-reset {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--mauc-border);
    border-radius: var(--mauc-radius-sm);
    background: transparent;
    cursor: pointer;
    color: var(--mauc-text-primary);
    font-family: inherit;
    transition: background 0.15s ease;
}

.mauc-btn-reset:hover {
    background: var(--mauc-bg-secondary);
}

/* Footer Navigation - Shown outside the card in grey area */
.mauc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0.5rem 0;
    margin-top: 0.5rem;
}

/* Hide inner button rows on steps 2, 2c, 3, 4, and 5 - use footer instead */
.mauc-step-panel[data-panel="2"] .mauc-btn-row,
.mauc-step-panel[data-panel="2c"] .mauc-btn-row,
.mauc-step-panel[data-panel="3"] .mauc-btn-row,
.mauc-step-panel[data-panel="4"] .mauc-btn-row {
    display: none !important;
}

/* Hide inner confirm button and hint on step 5 - moved to footer */
#mauc-summary-view .mauc-btn-confirm,
#mauc-summary-view .mauc-confirm-hint {
    display: none !important;
}

.mauc-nav-btn {
    font-size: 13px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: var(--mauc-text-secondary);
}

.mauc-nav-btn.mauc-nav-primary {
    background: var(--mauc-accent-dark);
    color: white;
    border-radius: var(--mauc-radius-sm);
    border: 1px solid var(--mauc-accent-dark);
}

.mauc-nav-btn.mauc-nav-primary:disabled,
.mauc-nav-btn.mauc-nav-confirm:disabled {
    background: var(--mauc-border);
    border-color: var(--mauc-border);
    color: var(--mauc-text-tertiary);
    cursor: not-allowed;
}

/* Footer confirm button style */
.mauc-nav-btn.mauc-nav-confirm {
    background: var(--mauc-accent);
    color: white;
    border-radius: var(--mauc-radius-sm);
    border: 1px solid var(--mauc-accent);
    padding: 10px 20px;
}

.mauc-step-readout {
    font-size: 12px;
    color: var(--mauc-text-secondary);
}

/* Embedded Calendar Overrides */
.mauc-calendar-wrapper {
    margin: 0;
}

/* Calendar loading state - hide until colors are applied */
.mauc-embedded-calendar.mauc-loading {
    position: relative;
    min-height: 250px;
}

.mauc-embedded-calendar.mauc-loading > * {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mauc-embedded-calendar.mauc-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: 3px solid var(--mauc-border);
    border-top-color: var(--mauc-accent);
    border-radius: 50%;
    animation: mauc-spin 0.8s linear infinite;
}

.mauc-embedded-calendar:not(.mauc-loading) > * {
    opacity: 1;
}

@keyframes mauc-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.mauc-embedded-calendar .wpbc-shortcode-wrap {
    margin-bottom: 0;
}

.mauc-embedded-calendar .wpbc-container {
    max-width: none;
    margin: 0;
}

.mauc-embedded-calendar .wpbc-brand-header,
.mauc-embedded-calendar .wpbc-tab-bar,
.mauc-embedded-calendar .wpbc-status-bar,
.mauc-embedded-calendar .wpbc-continue-row,
.mauc-embedded-calendar .wpbc-footer-note {
    display: none !important;
}

.mauc-embedded-calendar .wpbc-tab-panel[data-panel="1"],
.mauc-embedded-calendar .wpbc-tab-panel[data-panel="2"] {
    display: none !important;
}

.mauc-embedded-calendar .wpbc-tab-panel[data-panel="0"] {
    display: block !important;
}

.mauc-embedded-calendar .wpbc-card {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
}

.mauc-embedded-calendar .wpbc-card-body {
    padding: 0;
}

/* Calendar grid - stacked layout, centered */
.mauc-embedded-calendar .wpbc-date-time-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* Calendar column - full width */
.mauc-embedded-calendar .wpbc-calendar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Flatpickr calendar sizing - full width */
.mauc-embedded-calendar .flatpickr-calendar {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
}

.mauc-embedded-calendar .flatpickr-innerContainer,
.mauc-embedded-calendar .flatpickr-days,
.mauc-embedded-calendar .dayContainer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

.mauc-embedded-calendar .flatpickr-day {
    width: calc((100% - 28px) / 7) !important;
    max-width: 52px !important;
    height: 48px !important;
    line-height: 48px !important;
    margin: 2px !important;
    font-size: 15px;
}

.mauc-embedded-calendar .flatpickr-weekdays,
.mauc-embedded-calendar .flatpickr-weekdaycontainer {
    width: 100%;
}

.mauc-embedded-calendar span.flatpickr-weekday {
    font-size: 12px;
}

/* Calendar header */
.mauc-embedded-calendar .flatpickr-months {
    padding: 0 0 6px;
    width: 100%;
    max-width: 100%;
}

.mauc-embedded-calendar .flatpickr-current-month {
    font-size: 15px;
}

/* Legend */
.mauc-embedded-calendar .wpbc-legend {
    margin-top: 8px;
    padding: 0;
    gap: 14px;
    font-size: 12px;
}

/* Time slots column - full width to match calendar, with min-height for centering */
.mauc-embedded-calendar .wpbc-slots-col {
    padding-top: 0;
    width: 100%;
    min-height: 60px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mauc-embedded-calendar .wpbc-slots-col.wpbc-has-content {
    min-height: 0 !important;
    display: block;
    align-items: initial;
    justify-content: initial;
}

.mauc-embedded-calendar .wpbc-slots-col h3,
.mauc-embedded-calendar .wpbc-slots-header {
    margin: 0 0 10px;
    padding: 0;
    font-size: 13px;
    text-align: center;
    color: var(--mauc-text-secondary);
}

/* Time slots grid - 3 columns, match calendar width */
.mauc-embedded-calendar .wpbc-slots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}

.mauc-embedded-calendar .wpbc-time-slot {
    padding: 12px 8px;
    font-size: 14px;
    text-align: center;
}

/* Slots empty state - compact, matching selected state spacing */
.mauc-embedded-calendar .wpbc-slots-empty-state {
    text-align: center;
    width: 100%;
    padding: 8px;
    font-size: 13px;
    color: var(--mauc-text-secondary);
    margin: 0;
    transform: translateY(-15px);
}

/* Hide the icon in empty state to save space */
.mauc-embedded-calendar .wpbc-slots-empty-state svg {
    display: none;
}

.mauc-embedded-calendar .wpbc-slots-empty-state p {
    margin: 0;
}

/* Service-specific slot filtering */
.mauc-slot-hidden {
    display: none !important;
}

/* Calendar availability colors for embedded calendar - ensure specificity */
/* IMPORTANT: Exclude .selected days so they always show accent color */
.mauc-embedded-calendar .flatpickr-day[data-availability='open']:not(.flatpickr-disabled):not(.mauc-service-disabled):not(.selected) {
    background: #d1fae5 !important;
    border-color: #6ee7b7 !important;
    color: #065f46 !important;
}

.mauc-embedded-calendar .flatpickr-day[data-availability='limited']:not(.flatpickr-disabled):not(.mauc-service-disabled):not(.selected) {
    background: #fef3c7 !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
}

.mauc-embedded-calendar .flatpickr-day[data-availability='booked']:not(.selected) {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Override accent colors for calendar */
/* Selected day ALWAYS shows accent color - MUST come AFTER availability rules to win */
/* Remove transitions to prevent flash */
.mauc-container .flatpickr-day,
.mauc-embedded-calendar .flatpickr-day {
    transition: none !important;
}

/* ULTRA-SPECIFIC: Match every possible selector pattern to beat ma-calendar's nuclear specificity */
.mauc-container .flatpickr-calendar .flatpickr-days .dayContainer span.flatpickr-day.selected,
.mauc-container .flatpickr-calendar .flatpickr-days .dayContainer span.flatpickr-day.selected[data-availability],
.mauc-container .flatpickr-calendar .flatpickr-days .dayContainer span.flatpickr-day.selected[data-availability='open'],
.mauc-container .flatpickr-calendar .flatpickr-days .dayContainer span.flatpickr-day.selected[data-availability='limited'],
.mauc-container .flatpickr-calendar .flatpickr-days .dayContainer span.flatpickr-day.selected[data-availability='booked'],
.mauc-embedded-calendar .flatpickr-calendar .flatpickr-days .dayContainer span.flatpickr-day.selected,
.mauc-embedded-calendar .flatpickr-calendar .flatpickr-days .dayContainer span.flatpickr-day.selected[data-availability],
.mauc-embedded-calendar .flatpickr-calendar .flatpickr-days .dayContainer span.flatpickr-day.selected[data-availability='open'],
.mauc-embedded-calendar .flatpickr-calendar .flatpickr-days .dayContainer span.flatpickr-day.selected[data-availability='limited'],
.mauc-embedded-calendar .flatpickr-calendar .flatpickr-days .dayContainer span.flatpickr-day.selected[data-availability='booked'],
.mauc-container .flatpickr-calendar span.flatpickr-day.selected,
.mauc-container .flatpickr-calendar span.flatpickr-day.selected[data-availability],
.mauc-container .flatpickr-calendar span.flatpickr-day.selected[data-availability='open'],
.mauc-container .flatpickr-calendar span.flatpickr-day.selected[data-availability='limited'],
.mauc-container .flatpickr-calendar span.flatpickr-day.selected[data-availability='booked'],
.mauc-embedded-calendar .flatpickr-calendar span.flatpickr-day.selected,
.mauc-embedded-calendar .flatpickr-calendar span.flatpickr-day.selected[data-availability],
.mauc-embedded-calendar .flatpickr-calendar span.flatpickr-day.selected[data-availability='open'],
.mauc-embedded-calendar .flatpickr-calendar span.flatpickr-day.selected[data-availability='limited'],
.mauc-embedded-calendar .flatpickr-calendar span.flatpickr-day.selected[data-availability='booked'],
div.flatpickr-calendar span.flatpickr-day.selected,
div.flatpickr-calendar span.flatpickr-day.selected[data-availability],
div.flatpickr-calendar span.flatpickr-day.selected[data-availability='open'],
div.flatpickr-calendar span.flatpickr-day.selected[data-availability='limited'],
div.flatpickr-calendar span.flatpickr-day.selected[data-availability='booked'],
.flatpickr-calendar span.flatpickr-day.selected,
.flatpickr-calendar span.flatpickr-day.selected[data-availability],
.flatpickr-calendar span.flatpickr-day.selected[data-availability='open'],
.flatpickr-calendar span.flatpickr-day.selected[data-availability='limited'],
.flatpickr-calendar span.flatpickr-day.selected[data-availability='booked'],
span.flatpickr-day.selected,
span.flatpickr-day.selected[data-availability],
span.flatpickr-day.selected[data-availability='open'],
span.flatpickr-day.selected[data-availability='limited'],
span.flatpickr-day.selected[data-availability='booked'] {
    background: var(--mauc-accent) !important;
    background-color: var(--mauc-accent) !important;
    border-color: var(--mauc-accent) !important;
    border: 1px solid var(--mauc-accent) !important;
    color: #ffffff !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: none !important;
}

.mauc-container .wpbc-time-slot.selected {
    background: var(--mauc-accent-light) !important;
    border-color: var(--mauc-accent) !important;
    color: var(--mauc-accent-dark) !important;
}

/* Service-disabled days should appear grey, not green - BUT NOT when selected */
.mauc-service-disabled:not(.selected),
.mauc-embedded-calendar .flatpickr-day.mauc-service-disabled:not(.selected) {
    background: #F3F4F6 !important;
    border-color: #E5E7EB !important;
    color: #9CA3AF !important;
    opacity: 1 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Override any availability coloring for disabled days - BUT NOT when selected */
.mauc-embedded-calendar .flatpickr-day.mauc-service-disabled[data-availability]:not(.selected),
.mauc-embedded-calendar .flatpickr-day.mauc-service-disabled[data-availability="open"]:not(.selected),
.mauc-embedded-calendar .flatpickr-day.mauc-service-disabled[data-availability="limited"]:not(.selected) {
    background: #F3F4F6 !important;
    border-color: #E5E7EB !important;
    color: #9CA3AF !important;
}

/* Override ma-calendar verification modal title */
.wpbc-modal-title {
    font-size: 22px !important;
    font-weight: 600 !important;
}

/* Verification Modal */
.mauc-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.mauc-modal-overlay.active {
    display: flex;
}

.mauc-modal {
    background: var(--mauc-bg-primary);
    border-radius: var(--mauc-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
    animation: mauc-modal-in 0.2s ease;
}

@keyframes mauc-modal-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.mauc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 0;
}

.mauc-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--mauc-text-primary);
    margin: 0;
}

.mauc-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--mauc-text-tertiary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.mauc-modal-close:hover {
    color: var(--mauc-text-primary);
}

.mauc-modal-body {
    padding: 20px 24px;
    text-align: center;
}

.mauc-modal-body p {
    font-size: 14px;
    color: var(--mauc-text-secondary);
    margin: 0 0 16px;
}

.mauc-modal-body p strong {
    color: var(--mauc-text-primary);
}

.mauc-code-input-wrap {
    margin: 20px 0;
}

.mauc-code-input {
    width: 100%;
    max-width: 200px;
    padding: 16px 20px;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 8px;
    border: 2px solid var(--mauc-border) !important;
    border-radius: var(--mauc-radius-md);
    font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.mauc-code-input:focus {
    border-color: var(--mauc-accent) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(153, 60, 29, 0.12);
}

.mauc-verify-hint {
    font-size: 12px !important;
    color: var(--mauc-text-tertiary) !important;
    margin: 0 !important;
}

.mauc-modal-footer {
    display: flex;
    gap: 8px;
    padding: 0 24px 20px;
}

/* Notification styling */
.mauc-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: var(--mauc-radius-sm);
    font-size: 14px;
    z-index: 10000;
    animation: mauc-slide-in 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mauc-notification.success {
    background: #d1fae5;
    color: #065f46;
}

.mauc-notification.error {
    background: #fee2e2;
    color: #991b1b;
}

@keyframes mauc-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .mauc-container {
        max-width: 100%;
        margin: 1rem;
        padding: 1.25rem;
    }

    .mauc-card {
        padding: 1.25rem 1.5rem;
    }

    .mauc-embedded-calendar .wpbc-date-time-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Responsive - Mobile */
@media (max-width: 540px) {
    .mauc-shortcode-wrap {
        display: flex;
        justify-content: center;
        padding: 0 12px;
    }

    .mauc-container {
        max-width: 400px;
        width: 100%;
        margin: 1rem auto;
        padding: 1rem;
        border-radius: var(--mauc-radius-lg);
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    }

    .mauc-card {
        padding: 1rem 1.25rem;
    }

    .mauc-field-row {
        grid-template-columns: 1fr;
    }

    .mauc-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .mauc-time-estimate {
        display: none;
    }

    /* Mobile calendar - full width, slots match calendar */
    .mauc-embedded-calendar .wpbc-calendar-col,
    .mauc-embedded-calendar .wpbc-slots-col {
        max-width: 100%;
    }

    .mauc-embedded-calendar .flatpickr-calendar,
    .mauc-embedded-calendar .flatpickr-innerContainer,
    .mauc-embedded-calendar .flatpickr-days,
    .mauc-embedded-calendar .dayContainer,
    .mauc-embedded-calendar .flatpickr-weekdays,
    .mauc-embedded-calendar .flatpickr-weekdaycontainer,
    .mauc-embedded-calendar .flatpickr-months {
        max-width: 100% !important;
    }

    .mauc-embedded-calendar .flatpickr-day {
        width: calc((100% - 14px) / 7) !important;
        max-width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        font-size: 14px !important;
        margin: 1px !important;
    }

    .mauc-embedded-calendar .wpbc-slots-grid {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        gap: 6px;
    }

    .mauc-embedded-calendar .wpbc-time-slot {
        padding: 10px 8px;
        font-size: 13px;
    }

    /* Compact spacing for empty slots message on mobile to match selected state */
    .mauc-embedded-calendar .wpbc-slots-empty-state {
        padding: 8px !important;
        margin: 0 !important;
        transform: translateY(-15px);
    }

    .mauc-step-title {
        font-size: 24px;
    }

    .mauc-step-panel[data-panel="3"] .mauc-step-title {
        font-size: 24px;
    }

    .mauc-btn-row {
        flex-direction: column;
    }

    .mauc-btn-back {
        order: 2;
        text-align: center;
    }

    .mauc-btn-next {
        order: 1;
    }
}

/* ============= EMAIL VERIFICATION MODAL (Matches waste calendar) ============= */

.mauc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 31, 46, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    padding: 20px;
}

.mauc-modal-overlay.active {
    display: flex;
}

.mauc-modal {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(26, 31, 46, 0.3);
    animation: mauc-modal-in 0.25s ease;
    margin: 20px;
}

@keyframes mauc-modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.mauc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.mauc-modal-header h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0;
}

.mauc-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f9fafb;
    color: #6b7280;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    border: none;
    cursor: pointer;
}

.mauc-modal-close:hover {
    background: #e5e7eb;
    color: #1a1a1a;
}

.mauc-modal-body {
    padding: 24px;
    text-align: center;
}

.mauc-modal-body p {
    color: #6b7280;
    font-size: 14px;
    margin: 0 0 20px;
    line-height: 1.5;
}

.mauc-modal-body p strong {
    color: #1a1a1a;
}

.mauc-code-input-wrap {
    margin-bottom: 16px;
}

.mauc-code-input {
    width: 100%;
    max-width: 200px;
    padding: 16px;
    font-size: 28px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    letter-spacing: 8px;
    text-align: center;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    color: #1a1a1a;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mauc-code-input:focus {
    border-color: var(--mauc-accent, #993C1D);
    box-shadow: 0 0 0 4px rgba(153, 60, 29, 0.1);
}

.mauc-code-input::placeholder {
    color: #e5e7eb;
    letter-spacing: 4px;
}

.mauc-verify-hint {
    font-size: 12px !important;
    color: #9ca3af !important;
    margin: 0 !important;
}

.mauc-modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px 24px;
}

.mauc-modal-footer .mauc-btn {
    flex: 1;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.mauc-btn-ghost {
    background: transparent;
    border: 1px solid #e5e7eb;
    color: #6b7280;
}

.mauc-btn-ghost:hover {
    border-color: var(--mauc-accent, #993C1D);
    color: var(--mauc-accent, #993C1D);
}

.mauc-btn-primary {
    background: var(--mauc-accent, #993C1D);
    border: 1px solid var(--mauc-accent, #993C1D);
    color: #fff;
}

.mauc-btn-primary:hover:not(:disabled) {
    background: var(--mauc-accent-dark, #7a2f17);
    border-color: var(--mauc-accent-dark, #7a2f17);
}

.mauc-btn-primary:disabled {
    background: #e5e7eb;
    border-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}