/* ============================================================
           CLIENT-SIDE VALIDATION STYLES
           ============================================================ */

        /* Invalid field — red border + subtle red background tint */
        input.field-invalid,
        textarea.field-invalid,
        select.field-invalid {
            border-color: var(--error) !important;
            background-color: #fff5f5 !important;
            box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12) !important;
            transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
        }

        /* Valid field — green border */
        input.field-valid,
        textarea.field-valid,
        select.field-valid {
            border-color: var(--success) !important;
            background-color: #f4fbf7 !important;
            box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.12) !important;
            transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
        }

        /* Small inline icon hint next to the field */
        .validation-icon {
            display: inline-block;
            margin-inline-start: 0.4rem;
            font-size: 0.85rem;
            vertical-align: middle;
            transition: opacity 0.2s ease;
        }

        /* Step circle turns red when the section has errors */
        .step.has-errors .step-circle {
            background: var(--error) !important;
            border-color: var(--error) !important;
            color: white !important;
            animation: shake 0.4s ease;
        }

        @keyframes shake {
            0%, 100% { transform: scale(1.1) translateX(0); }
            25%       { transform: scale(1.1) translateX(-4px); }
            75%       { transform: scale(1.1) translateX(4px); }
        }

        /* ---- Error Summary Panel ---- */
        #validationPanel {
            display: none;
            position: fixed;
            inset-inline-end: 1.5rem;
            bottom: 1.5rem;
            width: min(420px, calc(100vw - 3rem));
            background: #fff;
            border: 2px solid var(--error);
            border-radius: 14px;
            box-shadow: 0 8px 32px rgba(230, 57, 70, 0.18);
            z-index: 9999;
            overflow: hidden;
            animation: slideUpPanel 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        #validationPanel.show {
            display: block;
        }

        @keyframes slideUpPanel {
            from { opacity: 0; transform: translateY(30px) scale(0.96); }
            to   { opacity: 1; transform: translateY(0)    scale(1);    }
        }

        #validationPanel .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--error);
            color: white;
            padding: 0.85rem 1.1rem;
            font-weight: 600;
            font-size: 0.95rem;
            gap: 0.5rem;
        }

        #validationPanel .panel-header .panel-icon {
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        #validationPanel .panel-header .panel-title {
            flex: 1;
        }

        #validationPanel .panel-close {
            background: transparent;
            border: none;
            color: white;
            font-size: 1.3rem;
            cursor: pointer;
            line-height: 1;
            padding: 0 0.2rem;
            opacity: 0.85;
            transition: opacity 0.2s;
        }
        #validationPanel .panel-close:hover { opacity: 1; }

        #validationPanel .panel-body {
            max-height: 340px;
            overflow-y: auto;
            padding: 0.5rem 0;
        }

        /* Section group inside the panel */
        .panel-section-group {
            padding: 0.4rem 0;
        }

        .panel-section-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.45rem 1.1rem;
            font-weight: 600;
            font-size: 0.82rem;
            color: var(--error);
            text-transform: uppercase;
            letter-spacing: 0.03em;
            border-bottom: 1px solid #fde8ea;
            background: #fff8f8;
            cursor: pointer;
            user-select: none;
        }

        .panel-section-label .panel-go-btn {
            margin-inline-start: auto;
            background: var(--error);
            color: white;
            border: none;
            border-radius: 4px;
            padding: 0.15rem 0.55rem;
            font-size: 0.72rem;
            cursor: pointer;
            font-weight: 600;
            white-space: nowrap;
            transition: background 0.2s;
        }
        .panel-section-label .panel-go-btn:hover { background: #c72c38; }

        .panel-field-item {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            padding: 0.4rem 1.4rem;
            font-size: 0.85rem;
            color: var(--text-dark);
            border-bottom: 1px solid #f9f0f1;
        }

        .panel-field-item:last-child { border-bottom: none; }

        .panel-field-dot {
            width: 6px;
            height: 6px;
            background: var(--error);
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 0.45rem;
        }

        #validationPanel .panel-footer {
            padding: 0.65rem 1.1rem;
            background: #fff8f8;
            border-top: 1px solid #fde8ea;
            font-size: 0.78rem;
            color: var(--text-muted);
            text-align: center;
        }

        /* RTL panel position */
        [dir="rtl"] #validationPanel {
            inset-inline-end: 1.5rem;
        }