/**
 * ChauffeurPro — Frontend base styles.
 *
 * Loaded on every page with the booking shortcode.
 * Imports design tokens and provides resets + utilities scoped to .cpro.
 *
 * @package ChauffeurPro
 */

/* Import design tokens (defines all --cpro-* variables) */
@import url("./_tokens.css");

/* ============================================================
   Local reset (scoped to .cpro — won't affect host theme)
   ============================================================ */

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

.cpro {
    font-family: var(--cpro-font-sans);
    font-size: var(--cpro-text-base);
    line-height: var(--cpro-leading-normal);
    color: var(--cpro-color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.cpro h1,
.cpro h2,
.cpro h3,
.cpro h4,
.cpro h5,
.cpro h6 {
    font-family: var(--cpro-font-serif);
    font-weight: var(--cpro-weight-regular);
    line-height: var(--cpro-leading-tight);
    margin: 0;
    color: inherit;
}

.cpro p,
.cpro ul,
.cpro ol,
.cpro figure,
.cpro blockquote,
.cpro dl,
.cpro dd {
    margin: 0;
}

.cpro ul,
.cpro ol {
    padding: 0;
    list-style: none;
}

.cpro a {
    color: var(--cpro-color-primary);
    text-decoration: none;
    transition: color var(--cpro-duration) var(--cpro-ease);
}

.cpro a:hover,
.cpro a:focus-visible {
    color: var(--cpro-color-primary-hover);
}

.cpro img,
.cpro picture,
.cpro video,
.cpro svg {
    max-width: 100%;
    display: block;
}

.cpro button,
.cpro input,
.cpro select,
.cpro textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    margin: 0;
}

.cpro button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.cpro input,
.cpro select,
.cpro textarea {
    background-color: var(--cpro-color-surface);
    color: var(--cpro-color-text);
}

/* ============================================================
   Focus management (a11y)
   ============================================================ */

.cpro :focus-visible {
    outline: 2px solid var(--cpro-color-primary);
    outline-offset: 2px;
    border-radius: var(--cpro-radius-sm);
}

/* Buttons/inputs handle their own focus visually, so no outline */
.cpro .cpro-btn:focus-visible,
.cpro .cpro-field__input:focus-visible {
    outline: none;
}

/* ============================================================
   Utility classes
   ============================================================ */

/* Screen reader only — visually hidden, accessible to assistive tech */
.cpro .cpro-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Required indicator */
.cpro .cpro-required {
    color: var(--cpro-color-error);
    margin-left: 2px;
}

/* Spinner (used in CTA when loading) */
.cpro .cpro-btn__spinner {
    /* Hidden by default — only shown when parent has --loading class
       or when the hidden attribute is removed. */
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: cpro-spin 0.7s linear infinite;
    vertical-align: middle;
}

/* Ensure the native [hidden] attribute always wins. */
.cpro .cpro-btn__spinner[hidden] {
    display: none !important;
}

/* Show the spinner only when the parent button is in loading state. */
.cpro .cpro-btn--loading .cpro-btn__spinner:not([hidden]) {
    display: inline-block;
}

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

/* ============================================================
   Headings (when title attribute is used in shortcode)
   ============================================================ */

.cpro .cpro-form__title {
    font-size: var(--cpro-text-2xl);
    font-weight: var(--cpro-weight-regular);
    text-align: center;
    margin-bottom: var(--cpro-space-6);
    color: var(--cpro-color-text);
}

/* ============================================================
   Step placeholders (visible until JS swaps them)
   ============================================================ */

.cpro .cpro-step-placeholder {
    background: var(--cpro-color-surface-alt);
    border: 1px dashed var(--cpro-color-border-strong);
    border-radius: var(--cpro-radius);
    padding: var(--cpro-space-8) var(--cpro-space-6);
    color: var(--cpro-color-text-muted);
    text-align: center;
    font-size: var(--cpro-text-sm);
}

/* ============================================================
   Form global error
   ============================================================ */

.cpro .cpro-form__error {
    background: var(--cpro-color-error-soft);
    border: 1px solid var(--cpro-color-error);
    border-radius: var(--cpro-radius);
    padding: var(--cpro-space-3) var(--cpro-space-4);
    color: var(--cpro-color-error);
    font-size: var(--cpro-text-sm);
    margin-top: var(--cpro-space-4);
}