/*
 * jQuery Validation Summary Plugin — Stylesheet  v1.0.0
 * ========================================================
 * Drop-in styles for jquery.validationSummary.js.
 * Works standalone or alongside Bootstrap 5.
 *
 * Customise by overriding CSS custom properties in your own stylesheet:
 *
 *   :root {
 *     --vs-red:        #dc3545;
 *     --vs-radius:     0.5rem;
 *     --vs-font-size:  0.875rem;
 *   }
 */

/* =========================================================================
   CUSTOM PROPERTIES  (single source of truth — easy theming)
   ========================================================================= */
:root {
    --vs-red:         #dc3545;        /* primary accent */
    --vs-red-dark:    #b02a37;        /* darker text colour */
    --vs-red-deep:    #6f1521;        /* section group label */
    --vs-red-bg:      #fff7f7;        /* summary background */
    --vs-red-border:  #f5c2c7;        /* border colour */
    --vs-red-shadow:  rgba(220, 53, 69, 0.10);
    --vs-red-ring:    rgba(220, 53, 69, 0.28);   /* focus / pulse ring */
    --vs-header-bg:   linear-gradient(135deg, #fff0f1 0%, #ffe6e8 100%);

    --vs-radius:      0.5rem;
    --vs-font-size:   0.875rem;       /* 14 px at default browser size */
    --vs-speed:       0.22s;
    --vs-ease:        cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   SUMMARY CONTAINER
   ========================================================================= */
.vs-summary {
    position      : relative;
    margin-bottom : 1.5rem;
    background    : var(--vs-red-bg);
    border        : 1px solid var(--vs-red-border);
    border-left   : 4px solid var(--vs-red);
    border-radius : var(--vs-radius);
    box-shadow    : 0 2px 14px var(--vs-red-shadow);
    overflow      : hidden;

    /* Entrance animation — overridden by jQuery fadeIn so this fires only on first paint */
    animation     : vs-enter var(--vs-speed) var(--vs-ease) both;
}

@keyframes vs-enter {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Keyboard-focus outline for screen-reader navigation */
.vs-summary:focus {
    outline        : 2px solid var(--vs-red);
    outline-offset : 3px;
}

/* =========================================================================
   HEADER  (icon + title + badge + close button)
   ========================================================================= */
.vs-summary__header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 0.8rem 1rem;
    background      : var(--vs-header-bg);
    border-bottom   : 1px solid var(--vs-red-border);
    gap             : 0.5rem;
}

.vs-summary__header-left {
    display     : flex;
    align-items : center;
    gap         : 0.45rem;
    flex        : 1;
    min-width   : 0;   /* allow text truncation in tight layouts */
}

.vs-summary__icon {
    display     : flex;
    align-items : center;
    color       : var(--vs-red);
    flex-shrink : 0;
}

.vs-summary__title {
    margin      : 0;
    font-size   : 16px;
    font-weight : 600;
    color       : var(--vs-red-dark);
    line-height : 1.35;
}

/* Error count pill */
.vs-summary__badge {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    min-width       : 1.35rem;
    height          : 1.35rem;
    padding         : 0 0.35rem;
    background      : var(--vs-red);
    color           : #fff;
    font-size       : 0.7rem;
    font-weight     : 700;
    border-radius   : 999px;
    flex-shrink     : 0;
    line-height     : 1;
}

/* ── Close button ─────────────────────────────────────────────────────── */
.vs-summary__close {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 1.8rem;
    height          : 1.8rem;
    border          : none;
    background      : transparent;
    color           : var(--vs-red-dark);
    font-size       : 2rem;
    line-height     : 1;
    cursor          : pointer;
    border-radius   : 50%;
    flex-shrink     : 0;
    padding         : 0;
    transition      : background var(--vs-speed), color var(--vs-speed);
}

.vs-summary__close:hover {
    background : rgba(220, 53, 69, 0.12);
    color      : var(--vs-red);
}

.vs-summary__close:focus-visible {
    outline        : 2px solid var(--vs-red);
    outline-offset : 1px;
    background     : rgba(220, 53, 69, 0.08);
    color          : var(--vs-red);
}

/* =========================================================================
   ERROR LIST
   ========================================================================= */
.vs-summary__list {
    list-style  : none;
    margin      : 0;
    padding     : 0.6rem 1rem 0.75rem;
}

.vs-summary__item {
    padding       : 0.22rem 0;
    border-bottom : 1px solid rgba(220, 53, 69, 0.07);
}

.vs-summary__item:last-child {
    border-bottom : none;
    padding-bottom: 0;
}

/* ── Error links (clickable — scroll to field) ──────────────────────── */
.vs-summary__link {
    display         : inline-flex;
    align-items     : center;
    gap             : 0.3rem;
    color           : var(--vs-red-dark);
    font-size       : 15px;
    text-decoration : none;
    padding         : 0.15rem 0.2rem 0.15rem 0;
    border-radius   : 3px;
    border-bottom   : 1px dashed transparent;
    transition      : color       var(--vs-speed),
                      padding-left var(--vs-speed),
                      border-color var(--vs-speed);
}

/* Arrow indicator */
.vs-summary__link::before {
    content     : '›';
    font-size   : 1.05rem;
    line-height : 1;
    color       : var(--vs-red);
    opacity     : 0.55;
    flex-shrink : 0;
    transition  : transform var(--vs-speed), opacity var(--vs-speed);
}

.vs-summary__link:hover,
.vs-summary__link:focus-visible {
    color            : var(--vs-red);
    border-bottom-color: var(--vs-red);
    padding-left     : 0.3rem;
    outline          : none;
    text-decoration  : none;
}

.vs-summary__link:hover::before,
.vs-summary__link:focus-visible::before {
    transform : translateX(3px);
    opacity   : 1;
}

.vs-summary__link:focus-visible {
    outline        : 2px solid var(--vs-red);
    outline-offset : 2px;
}

/* Non-linked orphan error text */
.vs-summary__text {
    font-size: var(--vs-font-size);
    color: var(--vs-red-dark);
    padding: 0.15rem 0;
    display: inline-block;
    font-size: 15px;
    color: #2f3a71;
    text-decoration: underline;
}

/* =========================================================================
   SECTION GROUPS  (enabled via groupBySection: true + data-vs-section="…")
   ========================================================================= */
.vs-summary__group-label {
    display       : block;
    font-size     : 0.73rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color         : var(--vs-red-deep);
    padding       : 0.5rem 0 0.2rem;
    opacity       : 0.85;
}

.vs-summary__group-list {
    list-style   : none;
    padding-left : 0.75rem;
    margin       : 0 0 0.25rem;
    border-left  : 2px solid var(--vs-red-border);
}

/* =========================================================================
   INLINE FIELD ERROR  (shown below each invalid input)
   ========================================================================= */
.vs-inline-error {
    display    : block;
    font-size  : 15px;
    color      : var(--vs-red);
    margin-top : 0.25rem;
    line-height: 1.4;
    animation  : vs-fade-in 0.18s ease both;
}

@keyframes vs-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =========================================================================
   INVALID FIELD STYLING
   ========================================================================= */

/* Applies to <input>, <select>, <textarea> when the plugin adds vs-field-error */
.vs-field-error,
input.vs-field-error,
select.vs-field-error,
textarea.vs-field-error {
    border-color     : var(--vs-red) !important;
    background-color : #fff8f8 !important;
    box-shadow       : 0 0 0 0.18rem var(--vs-red-shadow) !important;
    outline          : none;
}

.vs-field-error:focus,
input.vs-field-error:focus,
select.vs-field-error:focus,
textarea.vs-field-error:focus {
    box-shadow: 0 0 0 0.25rem var(--vs-red-ring) !important;
}

/* =========================================================================
   PULSE ANIMATION  (fires when user clicks an error link)
   ========================================================================= */
@keyframes vs-pulse {
    0%   { box-shadow: 0 0 0 0     rgba(220, 53, 69, 0.55); }
    60%  { box-shadow: 0 0 0 7px   rgba(220, 53, 69, 0.12); }
    100% { box-shadow: 0 0 0 12px  rgba(220, 53, 69, 0);    }
}

.vs-field-pulse {
    animation: vs-pulse 0.75s var(--vs-ease) forwards !important;
}

/* =========================================================================
   OPTIONAL: STICKY SUMMARY
   Add class  vs-summary--sticky  to the element (or set a custom class
   and apply top / z-index to suit your layout).
   ========================================================================= */
.vs-summary--sticky {
    position : sticky;
    top      : 1rem;
    z-index  : 1040;   /* sits above Bootstrap modals backdrop (1030) */
}

/* =========================================================================
   DARK MODE  (system preference — no JS required)
   ========================================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --vs-red-bg     : #2c1215;
        --vs-red-border : #7f2930;
        --vs-red-shadow : rgba(220, 53, 69, 0.22);
        --vs-header-bg  : linear-gradient(135deg, #3c1920 0%, #2c1215 100%);
    }

    .vs-summary__title,
    .vs-summary__link,
    .vs-summary__text  { color: #f1aeb5; }

    .vs-summary__link:hover,
    .vs-summary__link:focus-visible {
        color              : #f8d7da;
        border-bottom-color: #f8d7da;
    }

    .vs-summary__group-label { color: #f1aeb5; }
    .vs-inline-error          { color: #f1aeb5; }

    .vs-field-error,
    input.vs-field-error,
    select.vs-field-error,
    textarea.vs-field-error { background-color: #2c1215 !important; }

    .vs-summary__close { color: #f1aeb5; }
    .vs-summary__close:hover { background: rgba(241, 174, 181, 0.15); color: #f8d7da; }
}

/* =========================================================================
   REDUCED MOTION  (respect user preference — no animations)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .vs-summary,
    .vs-inline-error         { animation: none; }
    .vs-field-pulse          { animation: none !important; }
    .vs-summary__link,
    .vs-summary__link::before,
    .vs-summary__close       { transition: none; }
}

/* =========================================================================
   RESPONSIVE  (mobile-first adjustments)
   ========================================================================= */
@media (max-width: 575.98px) {
    .vs-summary {
        border-left-width : 3px;
        border-radius     : 0.375rem;
    }

    .vs-summary__header {
        padding  : 0.65rem 0.75rem;
    }

    .vs-summary__title {
        font-size: 0.83rem;
    }

    .vs-summary__list {
        padding: 0.5rem 0.75rem 0.6rem;
    }

    .vs-summary__link,
    .vs-summary__text {
        font-size: 0.9rem;
    }
}