/**
 * Shared UI components — every screen must reuse these classes instead of
 * styling a button/field/card by its own ID. See SDD.md at the repo root.
 * All values here come from design-tokens.css; never a hardcoded hex/px.
 */

/* Buttons. !important throughout this file is deliberate — see the note
   above .pt-field-input. A shared component must look the same everywhere
   regardless of which ambient theme/Elementor selector also targets the
   same element with higher specificity. */
.pt-btn {
    display: inline-block !important;
    font-size: var(--pt-font-size-base) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 14px !important;
    border-radius: var(--pt-radius) !important;
    border: none !important;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    line-height: 1.2;
}
.pt-btn-primary {
    background-color: var(--pt-color-primary) !important;
    color: #fff !important;
}
.pt-btn-primary:hover,
.pt-btn-primary:focus {
    background-color: var(--pt-color-primary-hover) !important;
    color: #fff !important;
}
.pt-btn-link {
    background: none !important;
    border: none !important;
    color: var(--pt-color-primary) !important;
    font-weight: 600 !important;
    font-size: var(--pt-font-size-md) !important;
    text-transform: none !important;
    padding: var(--pt-spacing-sm) var(--pt-spacing-md) !important;
    cursor: pointer;
}

/* Form fields */
.pt-field-label {
    font-size: var(--pt-font-size-label) !important;
    font-weight: 600 !important;
    color: var(--pt-color-primary) !important;
}
.pt-field-label .required {
    color: var(--pt-color-error) !important;
}
/* !important here is deliberate: this is a reset/utility component meant
   to look identical regardless of whatever ambient theme/plugin stylesheet
   (WooCommerce, Elementor) targets the same <input> with a more specific
   selector loaded after it. Fields must never depend on load order. */
.pt-field-input {
    background: var(--pt-input-bg) !important;
    border: 0 !important;
    border-radius: var(--pt-radius) !important;
    padding: var(--pt-spacing-md) !important;
    font-size: var(--pt-font-size-base) !important;
    font-weight: 400 !important;
    color: var(--pt-color-primary) !important;
    width: 100%;
    box-sizing: border-box;
}

/* Cards / grouped sections */
.pt-card-title {
    font-size: var(--pt-font-size-md);
    font-weight: 700;
    color: var(--pt-color-primary);
    margin: 0 0 var(--pt-spacing-md);
}

/* Step indicator */
.pt-stepper {
    display: flex;
    gap: var(--pt-spacing-xs);
    margin-bottom: var(--pt-spacing-lg);
}
.pt-stepper-item {
    display: flex;
    align-items: center;
    gap: var(--pt-spacing-sm);
    font-size: var(--pt-font-size-sm);
    color: #999999;
    flex: 0 0 auto;
    white-space: nowrap;
}
.pt-stepper-item:not(:last-child)::after {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--pt-color-border);
    margin-left: var(--pt-spacing-sm);
    flex: 0 0 auto;
}
.pt-stepper-item-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eeeeee;
    color: #888888;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--pt-font-size-xs);
    flex: 0 0 auto;
}
.pt-stepper-item.is-active {
    color: var(--pt-color-primary);
    font-weight: 700;
}
.pt-stepper-item.is-active .pt-stepper-item-number {
    background: var(--pt-color-primary);
    color: #fff;
}
.pt-stepper-item.is-done .pt-stepper-item-number {
    background: var(--pt-color-success);
    color: #fff;
}