/* RightPay Shop — Design Tokens (extension layer) Extends the base :root
   variables in main_style.css with tokens for: • CTA orange color family
   (was scattered across 5 ad-hoc hex values) • Spacing scale (4-point. */

:root {
    /* ── CTA Orange family Was fragmented across 5 ad-hoc values: #fa8803
       #F97D09 #FB8E26 #DF6B00 #e08938. Consolidated to a 4-stop named
       scale. */
    --color-cta:          #F97D09;
    --color-cta-dark:     #DF6B00;
    --color-cta-light:    #FEF3E2;
    --color-cta-gradient: linear-gradient(135deg, #FB8E26 0%, #F97D09 60%, #DF6B00 100%);

    /* ── Spacing scale (4-point grid) ──────────────────────────────────── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ── Type scale ─────────────────────────────────────────────────────── */
    --text-xs:   0.75rem;     /*  12px */
    --text-sm:   0.8125rem;   /*  13px */
    --text-base: 0.875rem;    /*  14px — default body copy */
    --text-md:   1rem;        /*  16px */
    --text-lg:   1.125rem;    /*  18px */
    --text-xl:   1.25rem;     /*  20px */
    --text-2xl:  1.5rem;      /*  24px */
    --text-3xl:  1.875rem;    /*  30px */

    /* ── Font weights ───────────────────────────────────────────────────── */
    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;

    /* ── Animation ──────────────────────────────────────────────────────── */
    --duration-instant:   80ms;
    --duration-fast:     180ms;
    --duration-normal:   280ms;
    --duration-slow:     450ms;
    --easing-standard:   cubic-bezier(0.2, 0, 0, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Touch target ───────────────────────────────────────────────────── */
    --touch-target: 44px;   /* WCAG 2.5.5 Target Size */

    /* ── Form validation ────────────────────────────────────────────────── */
    --color-form-error:    var(--color-danger);
    --color-form-error-bg: #fef2f2;
    --color-form-valid:    var(--color-success);
    --color-form-valid-bg: #f0fdf4;
    --color-form-border:   var(--color-ink-300);
    --color-form-focus:    var(--color-primary);
}


/* =============================================================================
   Shared component primitives
   ============================================================================= */

/* ── Skeleton / shimmer loader Replaces the inline style="animation: pulse
   1.5s infinite" pattern. */
.rp-shimmer {
    background: linear-gradient(
        90deg,
        var(--color-surface, #f8fafc) 25%,
        #e9ecef 50%,
        var(--color-surface, #f8fafc) 75%
    );
    background-size: 200% 100%;
    animation: rp-shimmer-slide var(--duration-slow, 450ms) ease-in-out infinite;
}

@keyframes rp-shimmer-slide {
    from { background-position:  200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    /* Static tint — no motion, still visually distinct from content */
    .rp-shimmer {
        animation: none;
        background: var(--color-surface, #f8fafc);
    }
    /* Also mute the legacy pulse keyframes used by older shimmer elements */
    [style*="animation: pulse"],
    [class*="bg-light"][style*="animation"] {
        animation: none !important;
    }
}


/* ── Empty / end-of-results panel background ─────────────────────────────────
   Replaces the inline   style="background-color: #f8f9fa"   used by
   getEndOfResultsHTML() and the inline offers empty state.                     */
.rp-empty-state-wrap {
    background-color: var(--color-surface, #f8f9fa);
}


/* ── Form field validation states Complements Bootstrap's .is-invalid /
   .is-valid with brand tokens. */

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--color-form-error);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--color-form-error);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
    outline: none;
}
.invalid-feedback {
    color: var(--color-form-error);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-medium, 500);
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--color-form-valid);
}
.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: var(--color-form-valid);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
    outline: none;
}
.valid-feedback {
    color: var(--color-form-valid);
    font-size: var(--text-xs, 0.75rem);
}

/* Standalone classes for forms outside Bootstrap's validation flow */
.rp-field-error,
.rp-field-valid,
.rp-field-msg {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-medium, 500);
    margin-top: var(--space-1, 4px);
    min-height: 18px;
    transition: opacity var(--duration-fast, 180ms) var(--easing-standard, ease);
}
.rp-field-error { color: var(--color-form-error); }
.rp-field-valid { color: var(--color-form-valid); }
.rp-field-msg   { color: var(--color-ink-600, #475569); }

/* SVG icon via data-URI — no extra network request, no unsanitized/property risk */
.rp-field-error::before {
    content: '';
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    /* circle-i warning icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23DC2626'/%3E%3Crect x='7.25' y='4' width='1.5' height='4.5' rx='.75' fill='%23fff'/%3E%3Crect x='7.25' y='10' width='1.5' height='1.5' rx='.75' fill='%23fff'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.rp-field-valid::before {
    content: '';
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    /* circle-check icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%2316A34A'/%3E%3Cpath d='M5 8l2 2 4-4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}


/* ── Touch target utility ─────────────────────────────────────────────────── */
.rp-touch-target {
    min-height: var(--touch-target, 44px);
    min-width:  var(--touch-target, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ── Status badge (Orders / Service Bookings cards) Shared pill used by
   renderNextOrdersBatch() and renderNextServiceBookingsBatch() in app.js. */
.rp-status-badge {
    display: inline-flex;
    align-items: center;
    font-weight: var(--font-bold);
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm, 6px);
    background-color: #ffffff2f;
    border: 1px solid rgba(0, 0, 0, 0.02);
}