/**
 * Mini Životopis - Štýly
 * Využíva design-system.css z témy
 * ZJEDNOTENÉ s Job Archive a Mzdová kalkulačka
 */

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.mzd-form {
    max-width: 980px;
    margin: auto;
    font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION TITLES - ZJEDNOTENÉ
   ═══════════════════════════════════════════════════════════════ */
.mzd-section-title {
    font-size: var(--font-size-lg, 1.25rem);
    font-weight: var(--font-weight-bold, 700);
    margin: var(--space-lg, 24px) 0 var(--space-sm, 8px);
    color: var(--text, #161615);
}

.mzd-section-desc {
    margin: 0 0 var(--space-lg, 20px);
    color: var(--text-muted, #64748b);
    font-size: var(--font-size-sm, 0.875rem);
}

/* ═══════════════════════════════════════════════════════════════
   LABELS - ZJEDNOTENÉ
   ═══════════════════════════════════════════════════════════════ */
.mzd-form label {
    display: block;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    margin-bottom: var(--space-sm, 8px);
    color: var(--text, #161615);
}

/* ═══════════════════════════════════════════════════════════════
   INPUTS - ZJEDNOTENÉ
   ═══════════════════════════════════════════════════════════════ */
.mzd-form input[type="text"],
.mzd-form input[type="email"],
.mzd-form input[type="tel"],
.mzd-form input[type="date"],
.mzd-form select,
.mzd-form textarea {
    width: 100%;
    padding: var(--input-padding-y, 0.75rem) var(--input-padding-x, 1rem);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 12px);
    background: var(--input-bg, #f8fafc);
    box-sizing: border-box;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-muted, #64748b);
    transition: all var(--transition, 0.2s ease);
    height: var(--input-height, 46px);
}

.mzd-form textarea {
    height: auto;
    min-height: 100px;
    resize: vertical;
}

/* Select štýly - fix overflow */
.mzd-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mzd-form input:focus,
.mzd-form textarea:focus {
    border-color: var(--accent, #005588);
    color: var(--text, #161615);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 85, 136, 0.08);
    background: var(--input-bg-focus, #ffffff);
    font-weight: var(--font-weight-normal, 400);
}

.mzd-form select:focus {
    border-color: var(--accent, #005588);
    color: var(--text, #161615);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 85, 136, 0.08);
    background-color: var(--input-bg-focus, #ffffff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    font-weight: var(--font-weight-normal, 400);
}

.mzd-form ::placeholder {
    color: var(--text-placeholder, #a1a1aa);
    opacity: 1;
    font-weight: var(--font-weight-normal, 400);
}

/* ═══════════════════════════════════════════════════════════════
   DYNAMIC ROWS - Inputy musia byť biele (nie rovnaké ako pozadie)
   ═══════════════════════════════════════════════════════════════ */
.mzd-dynamic-row {
    background: var(--bg-subtle, #f9fafb);
    padding: var(--space-md, 16px);
    padding-right: var(--space-2xl, 48px);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    margin-bottom: var(--space-sm, 8px);
    position: relative;
}

/* Inputy v dynamic row musia byť BIELE (aby boli odlíšené od sivého pozadia) */
.mzd-dynamic-row input[type="text"],
.mzd-dynamic-row input[type="email"],
.mzd-dynamic-row input[type="tel"] {
    background: #ffffff !important;
}

.mzd-dynamic-row select {
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.mzd-dynamic-row input:focus {
    background: #ffffff !important;
}

.mzd-dynamic-row select:focus {
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.mzd-dynamic-row--flex {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md, 16px);
}

/* Label v dynamic row */
.mzd-dynamic-row label {
    font-size: var(--font-size-sm, 0.875rem);
    margin-bottom: var(--space-xs, 4px);
}

/* Remove button - ABSOLUTNE pozicovany vpravo */
.mzd-remove-btn {
    position: absolute;
    right: var(--space-sm, 8px);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    border-radius: var(--radius-full, 9999px);
    color: var(--text-placeholder, #9ca3af);
    cursor: pointer;
    font-size: var(--font-size-lg, 1.25rem);
    line-height: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    transition: all var(--transition, 0.2s ease);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mzd-remove-btn:hover {
    background: var(--error-light, rgba(229, 50, 32, 0.08));
    color: var(--error, #E53220);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS - ZJEDNOTENÉ
   Primárny = žltý, Sekundárny/Ghost = border
   ═══════════════════════════════════════════════════════════════ */

/* Primárny button - ŽLTÝ */
.mzd-btn {
    background: var(--primary, #FDC600);
    color: var(--text, #161615);
    border: 2px solid var(--primary, #FDC600);
    padding: var(--space-sm, 10px) var(--space-lg, 24px);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: all var(--transition, 0.3s ease);
    font-weight: 800;
    font-size: var(--font-size-sm, 0.875rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs, 6px);
    height: var(--input-height, 46px);
    min-width: 140px;
    text-decoration: none;
}

.mzd-btn:hover {
    background: var(--primary-hover, #e0b000);
}

/* Ghost button - ZJEDNOTENÉ s Job Archive */
.mzd-btn--ghost {
    background: transparent;
    border: 2px solid var(--border, #e2e8f0);
    color: var(--text-muted, #64748b);
    font-weight: 800;
    font-size: var(--font-size-sm, 0.875rem);
    height: var(--input-height, 46px);
    padding: var(--space-sm, 8px) var(--space-md, 16px);
    min-width: auto;
}

.mzd-btn--ghost:hover {
    background: var(--bg-subtle, #f9fafb);
    border-color: var(--text, #161615);
    color: var(--text, #161615);
}

/* Submit button */
.mzd-submit-btn {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 800;
    min-width: 140px;
    height: var(--input-height, 46px);
}

/* Reset button - zmenšený font ako ostatné ghost buttons */
.mzd-btn--reset {
    margin-left: var(--space-sm, 10px);
    height: var(--input-height, 46px);
    min-width: 140px;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 800;
    gap: var(--space-sm, 8px);
}

.mzd-btn--reset svg {
    flex-shrink: 0;
}

.mzd-btn--reset:hover {
    background: var(--error-light, rgba(229, 50, 32, 0.08));
    color: var(--error, #E53220);
    border-color: var(--error, #E53220);
}

/* ═══════════════════════════════════════════════════════════════
   SUCCESS MESSAGE - Moderný dizajn
   ═══════════════════════════════════════════════════════════════ */
.mzd-success-message {
    text-align: center;
    padding: var(--space-2xl, 56px) var(--space-xl, 32px);
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: var(--radius-lg, 16px);
    border: 1px solid rgba(22, 163, 74, 0.15);
    margin-bottom: var(--space-xl, 30px);
}

.mzd-success-icon {
    width: 64px;
    height: 64px;
    background: var(--success, #16a34a);
    border-radius: var(--radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg, 24px);
    color: white;
    font-size: 32px;
}

.mzd-success-title {
    color: var(--success, #16a34a);
    margin-top: 0;
    margin-bottom: var(--space-md, 16px);
    font-size: var(--font-size-2xl, 1.75rem);
    font-weight: var(--font-weight-bold, 700);
}

.mzd-success-text {
    font-size: var(--font-size-md, 1.125rem);
    color: var(--text, #161615);
    margin-bottom: var(--space-xs, 4px);
    line-height: 1.6;
}

.mzd-success-subtext {
    color: var(--text-muted, #64748b);
    font-size: var(--font-size-sm, 0.875rem);
    margin-bottom: var(--space-lg, 24px);
}

/* Button v success message - ghost štýl */
.mzd-success-message .mzd-btn {
    margin-top: var(--space-md, 16px);
    background: transparent;
    color: var(--text-muted, #64748b);
    border: 1px solid var(--border, #e2e8f0);
    font-weight: 800;
}

.mzd-success-message .mzd-btn:hover {
    background: white;
    border-color: var(--text, #161615);
    color: var(--text, #161615);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT HELPERS
   ═══════════════════════════════════════════════════════════════ */
.mzd-row {
    display: flex;
    gap: var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
}

.mzd-row--two>div {
    flex: 1;
}

.mzd-separator {
    border: 0;
    border-top: 1px solid var(--border-light, #e5e7eb);
    margin: var(--space-xl, 30px) 0;
}

.mzd-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: var(--space-lg, 24px);
}

/* ═══════════════════════════════════════════════════════════════
   RADIO & CHECKBOX
   ═══════════════════════════════════════════════════════════════ */
.mzd-radio-group {
    display: flex;
    gap: var(--space-lg, 20px);
    padding-top: var(--space-sm, 8px);
}

.mzd-radio {
    font-weight: var(--font-weight-normal, 400) !important;
    display: flex !important;
    align-items: center;
    gap: var(--space-sm, 6px);
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    text-transform: none;
    letter-spacing: normal;
}

.mzd-radio input[type="radio"] {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--accent, #005588);
}

/* ═══════════════════════════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════════════════════════ */
.mzd-phone-wrapper {
    display: flex;
    gap: var(--space-sm, 10px);
    width: 100%;
}

.mzd-form .mzd-phone-prefix {
    width: 110px;
    flex: none;
}

.mzd-phone-wrapper input[type="tel"] {
    flex: 1;
    width: 100%;
    min-width: 0;
}

.mzd-note-small {
    font-weight: var(--font-weight-normal, 400);
    color: var(--text-muted, #64748b);
    font-size: var(--font-size-xs, 0.75rem);
    text-transform: none;
    letter-spacing: normal;
}

.mzd-list-row {
    display: flex;
    gap: var(--space-sm, 10px);
    margin-bottom: var(--space-sm, 10px);
    align-items: center;
}

.mzd-list-row input {
    flex: 1;
}

.mzd-small {
    max-width: 140px;
}

.mzd-required {
    color: var(--error, #E53220);
    margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    .mzd-row {
        flex-direction: column;
        gap: var(--space-md, 12px);
    }

    .mzd-dynamic-row--flex {
        flex-direction: column;
        align-items: stretch;
    }

    .mzd-dynamic-row--flex>div {
        width: 100% !important;
        flex: none !important;
    }

    .mzd-remove-btn {
        width: 100%;
        margin-top: var(--space-sm, 8px);
    }

    .mzd-list-row {
        flex-direction: column;
        align-items: stretch;
    }

    .mzd-small {
        max-width: 100%;
    }

    .mzd-footer {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm, 10px);
    }

    .mzd-btn--reset {
        margin-left: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MULTI-STEP WIZARD STYLES
   ═══════════════════════════════════════════════════════════════ */

/* Stepper Container */
.mzd-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2xl, 40px);
    position: relative;
    padding: 0 var(--space-md, 16px);
}

/* Stepper Item */
.mzd-stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    cursor: default;
}

/* Circle */
.mzd-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-subtle, #f1f5f9);
    border: 2px solid var(--border, #e2e8f0);
    color: var(--text-muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-base, 1rem);
    transition: all var(--transition, 0.3s ease);
    margin-bottom: var(--space-xs, 8px);
}

/* Label */
.mzd-step-label {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-muted, #64748b);
    transition: all var(--transition, 0.3s ease);
}

/* Active State */
.mzd-stepper-item.active .mzd-step-circle {
    background: var(--primary, #FDC600);
    border-color: var(--primary, #FDC600);
    color: var(--text, #161615);
    box-shadow: 0 0 0 4px rgba(253, 198, 0, 0.2);
}

.mzd-stepper-item.active .mzd-step-label {
    color: var(--text, #161615);
}

/* Completed State */
.mzd-stepper-item.completed .mzd-step-circle {
    background: var(--success, #16a34a);
    border-color: var(--success, #16a34a);
    color: white;
}

.mzd-stepper-item.completed .mzd-step-label {
    color: var(--success, #16a34a);
}

/* Connecting Line */
.mzd-stepper-line {
    flex: 1;
    height: 2px;
    background: var(--border, #e2e8f0);
    margin: 0 var(--space-sm, 10px);
    position: relative;
    top: -14px;
    /* Adjust based on circle height/margin */
    z-index: 1;
}

.mzd-stepper-line.active {
    background: var(--success, #16a34a);
}

/* Step Visibility */
.mzd-step {
    display: none;
    animation: fadeIn 0.4s ease;
}

.mzd-step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navigation Buttons */
.mzd-step-nav {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-xl, 32px);
    padding-top: var(--space-lg, 24px);
    border-top: 1px solid var(--border-light, #e5e7eb);
}

.mzd-next-btn {
    margin-left: auto;
}

/* Responsive Stepper */
@media (max-width: 600px) {
    .mzd-step-label {
        display: none;
    }

    .mzd-stepper {
        padding: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   VALIDATION ERROR MESSAGES
   ═══════════════════════════════════════════════════════════════ */
.mzd-error-message {
    display: none;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--error, #E53220);
    background: var(--error-light, rgba(229, 50, 32, 0.08));
    padding: var(--space-xs, 6px) var(--space-sm, 10px);
    border-radius: var(--radius-sm, 4px);
    margin-top: var(--space-xs, 6px);
}

.mzd-error-message.show {
    display: block;
}

input.mzd-error,
textarea.mzd-error {
    border-color: var(--error, #E53220) !important;
    background: var(--error-light, rgba(229, 50, 32, 0.04));
}

select.mzd-error {
    border-color: var(--error, #E53220) !important;
    background-color: var(--error-light, rgba(229, 50, 32, 0.04));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.mzd-form label.mzd-error-label {
    color: var(--error, #E53220) !important;
}

/* Success State */
input.mzd-success,
textarea.mzd-success,
select.mzd-success {
    border-color: var(--success, #16a34a) !important;
    background-color: var(--success-light, #dcfce7) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px !important;
    padding-right: 36px !important;
}