/* ============================================
   Kvikloan — Registration
   ============================================ */

/* ---- Theme overrides ---- */

.kvikloan-registration .elementor-537 .elementor-element.elementor-element-5edf0c3 {
    display: none !important;
}

.kvikloan-registration .site-content,
.kvikloan-registration .entry-content,
.kvikloan-registration .page-content,
.kvikloan-registration .site-main,
.kvikloan-registration main#primary,
.kvikloan-registration #content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.kvikloan-registration .site-content > .ast-container,
.kvikloan-registration .site-main > .ast-container,
.kvikloan-registration #content > .ast-container,
.kvikloan-registration .site-content > .elementor-section-wrap,
.kvikloan-registration .site-content > .elementor-widget-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* ---- Design tokens ---- */

.kp-reg-page {
    --kp-primary: #3b82f6;
    --kp-primary-hover: #2563eb;
    --kp-primary-light: #eff6ff;
    --kp-primary-ring: rgba(59, 130, 246, .15);
    --kp-card: #ffffff;
    --kp-text: #1e293b;
    --kp-text-secondary: #64748b;
    --kp-text-muted: #94a3b8;
    --kp-border: #e2e8f0;
    --kp-border-focus: #3b82f6;
    --kp-error: #ef4444;
    --kp-error-light: #fef2f2;
    --kp-success: #10b981;
    --kp-radius: 10px;
    --kp-radius-lg: 16px;
    --kp-shadow-lg: 0 20px 50px -12px rgba(0,0,0,.12);
    --kp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --kp-transition: .2s cubic-bezier(.4,0,.2,1);
}

/* ---- Page wrapper ---- */

.kp-reg-page {
    background: linear-gradient(145deg, #e8eeff 0%, #f0f4ff 40%, #f5f0ff 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 80vh !important;
    padding: 48px 16px !important;
    font-family: var(--kp-font) !important;
    color: var(--kp-text) !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Card container (animates width for step 2) ---- */

.kp-reg {
    width: 100% !important;
    max-width: 940px !important;
}

.kp-reg__card {
    background: var(--kp-card) !important;
    border-radius: var(--kp-radius-lg) !important;
    box-shadow: var(--kp-shadow-lg) !important;
    padding: 40px 36px 36px !important;
    position: relative;
    overflow: hidden;
}

/* ---- Step indicator ---- */

.kp-steps {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin-bottom: 32px !important;
}

.kp-steps__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.kp-steps__circle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid var(--kp-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--kp-card) !important;
    transition: all var(--kp-transition);
}

.kp-steps__number {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--kp-text-muted) !important;
    transition: all var(--kp-transition);
}

.kp-steps__check {
    display: none !important;
    width: 16px !important;
    height: 16px !important;
    color: white !important;
}

.kp-steps__label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--kp-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    transition: color var(--kp-transition);
}

.kp-steps__connector {
    width: 80px !important;
    height: 2px !important;
    background: var(--kp-border) !important;
    margin: 0 12px !important;
    margin-bottom: 22px !important;
    border-radius: 1px !important;
    overflow: hidden;
}

.kp-steps__connector-fill {
    width: 0;
    height: 100% !important;
    background: var(--kp-primary) !important;
    border-radius: 1px !important;
    transition: width .4s cubic-bezier(.4,0,.2,1);
}

.kp-steps__item.is-active .kp-steps__circle {
    border-color: var(--kp-primary) !important;
    background: var(--kp-primary-light) !important;
}

.kp-steps__item.is-active .kp-steps__number {
    color: var(--kp-primary) !important;
}

.kp-steps__item.is-active .kp-steps__label {
    color: var(--kp-primary) !important;
}

.kp-steps__item.is-completed .kp-steps__circle {
    border-color: var(--kp-success) !important;
    background: var(--kp-success) !important;
}

.kp-steps__item.is-completed .kp-steps__number {
    display: none !important;
}

.kp-steps__item.is-completed .kp-steps__check {
    display: block !important;
}

.kp-steps__item.is-completed .kp-steps__label {
    color: var(--kp-success) !important;
}

/* ---- Step content ---- */

.kp-step {
    display: none !important;
    opacity: 0 !important;
}

.kp-step.is-active {
    display: block !important;
    opacity: 1 !important;
    transition: opacity .3s ease !important;
}

.kp-step.is-fading {
    display: block !important;
    opacity: 0 !important;
    transition: opacity .25s ease !important;
}

.kp-step__title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--kp-text) !important;
    margin-bottom: 4px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.kp-step__subtitle {
    font-size: 14px !important;
    color: var(--kp-text-secondary) !important;
    margin-bottom: 28px !important;
}

/* ---- Info box (step 2) ---- */

.kp-step__info-box {
    background: var(--kp-primary-light) !important;
    border: 1px solid #dbeafe !important;
    border-radius: var(--kp-radius) !important;
    padding: 16px 18px !important;
    margin-bottom: 24px !important;
}

.kp-step__info-box p {
    font-size: 13px !important;
    color: var(--kp-text-secondary) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kp-step__info-box p + p {
    margin-top: 10px !important;
}

.kp-step__info-box strong {
    color: var(--kp-text) !important;
    font-weight: 600 !important;
}

/* ============================================
   Step 2: Horizontal Layout
   ============================================ */

.kp-step__layout {
    display: flex !important;
    gap: 36px !important;
    align-items: flex-start !important;
}

.kp-step__form-col {
    flex: 1 !important;
    min-width: 0 !important;
}

.kp-step__preview-col {
    width: 360px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 8px !important;
}

/* ---- Secure text under card ---- */

.kp-step__layout + .kp-step__info-box {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
}

.kp-step__secure {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    padding: 10px 16px !important;
    background: #f0fdf4 !important;
    border-radius: 8px !important;
    border: 1px solid #bbf7d0 !important;
}

.kp-step__secure svg {
    width: 16px !important;
    height: 16px !important;
    color: #16a34a !important;
    flex-shrink: 0 !important;
}

.kp-step__secure span {
    font-size: 12px !important;
    color: #15803d !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* ============================================
   3D Card Preview
   ============================================ */

.kp-card-preview {
    width: 100% !important;
    max-width: 360px !important;
    perspective: 1000px;
}

.kp-card-preview__inner {
    position: relative;
    width: 100% !important;
    aspect-ratio: 1.586;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.4,0,.2,1);
}

.kp-card-preview.is-flipped .kp-card-preview__inner {
    transform: rotateY(180deg);
}

.kp-card-preview__front,
.kp-card-preview__back {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 16px !important;
    backface-visibility: hidden;
    overflow: hidden !important;
}

/* ---- Front ---- */

.kp-card-preview__front {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e293b 100%) !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 20px 40px -8px rgba(15, 23, 42, .35) !important;
}

.kp-card-preview__front::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,.15) 0%, transparent 70%);
    pointer-events: none;
}

.kp-card-preview__front::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -15%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.12) 0%, transparent 70%);
    pointer-events: none;
}

.kp-card-preview__top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative;
    z-index: 1;
}

.kp-card-preview__chip {
    width: 44px !important;
    height: 32px !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
    position: relative;
}

.kp-card-preview__chip-line {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1.5px solid rgba(0,0,0,.12);
    border-radius: 3px;
}

.kp-card-preview__contactless {
    width: 28px !important;
    height: 28px !important;
    opacity: .6;
}

.kp-card-preview__contactless svg {
    width: 28px !important;
    height: 28px !important;
    transform: rotate(90deg);
}

.kp-card-preview__number {
    display: flex !important;
    gap: 14px !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    font-family: 'Courier New', 'Lucida Console', monospace !important;
    color: rgba(255,255,255,.9) !important;
    letter-spacing: 2px !important;
    position: relative;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
}

.kp-card-preview__number span {
    transition: all .15s ease;
    font-size: inherit !important;
    font-family: inherit !important;
    color: inherit !important;
    letter-spacing: inherit !important;
}

.kp-card-preview__bottom {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    position: relative;
    z-index: 1;
}

.kp-card-preview__field {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.kp-card-preview__label {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(255,255,255,.4) !important;
    font-weight: 500 !important;
}

.kp-card-preview__value {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.85) !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 160px !important;
}

.kp-card-preview__brand-logo {
    width: 52px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.kp-card-preview__brand-logo svg {
    width: 52px !important;
    height: 32px !important;
}

/* ---- Back ---- */

.kp-card-preview__back {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    transform: rotateY(180deg);
    display: flex !important;
    flex-direction: column !important;
    padding-top: 24px !important;
    box-shadow: 0 20px 40px -8px rgba(15, 23, 42, .35) !important;
}

.kp-card-preview__stripe {
    width: 100% !important;
    height: 44px !important;
    background: #000 !important;
    opacity: .6;
}

.kp-card-preview__cvv-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 20px 24px !important;
}

.kp-card-preview__sig {
    flex: 1 !important;
    height: 36px !important;
    background: repeating-linear-gradient(90deg, #d1d5db, #d1d5db 1px, #e5e7eb 1px, #e5e7eb 4px) !important;
    border-radius: 4px !important;
    opacity: .7;
}

.kp-card-preview__cvv-box {
    width: 56px !important;
    height: 36px !important;
    background: #fff !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: 'Courier New', monospace !important;
    color: #1e293b !important;
    letter-spacing: 3px !important;
}

.kp-card-preview__back-brand {
    padding: 0 24px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: auto !important;
    opacity: .5;
}

/* ---- Form ---- */

.kp-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.kp-form-group {
    margin-bottom: 18px !important;
}

.kp-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--kp-text) !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.kp-input {
    width: 100% !important;
    padding: 11px 14px !important;
    font-size: 15px !important;
    font-family: var(--kp-font) !important;
    color: var(--kp-text) !important;
    background: var(--kp-card) !important;
    border: 1.5px solid var(--kp-border) !important;
    border-radius: 8px !important;
    outline: none !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    transition: border-color var(--kp-transition), box-shadow var(--kp-transition);
}

.kp-input::placeholder {
    color: var(--kp-text-muted) !important;
}

.kp-input:hover {
    border-color: #cbd5e1 !important;
}

.kp-input:focus {
    border-color: var(--kp-border-focus) !important;
    box-shadow: 0 0 0 3px var(--kp-primary-ring) !important;
}

.kp-input-wrap {
    position: relative !important;
}

.kp-input-wrap .kp-input {
    padding-right: 44px !important;
}

.kp-input-toggle {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--kp-text-muted) !important;
    border-radius: 6px !important;
    padding: 0 !important;
    transition: color var(--kp-transition), background var(--kp-transition);
}

.kp-input-toggle:hover {
    color: var(--kp-text-secondary) !important;
    background: #f1f5f9 !important;
}

.kp-input-toggle svg {
    width: 20px !important;
    height: 20px !important;
}

.kp-input-icon {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%);
    color: var(--kp-text-muted) !important;
    pointer-events: none;
}

.kp-input--card {
    padding-right: 64px !important;
}

.kp-card-brand {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%);
    pointer-events: none;
}

.kp-card-brand__icon {
    width: 40px !important;
    height: 28px !important;
    border-radius: 3px !important;
}

/* Error state */
.kp-form-group.has-error .kp-input {
    border-color: var(--kp-error) !important;
    background: var(--kp-error-light) !important;
}

.kp-form-group.has-error .kp-input:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
}

.kp-error {
    display: none !important;
    font-size: 12px !important;
    color: var(--kp-error) !important;
    margin-top: 4px !important;
}

.kp-form-group.has-error .kp-error {
    display: block !important;
}

.kp-error--checkbox {
    margin-top: 4px !important;
    margin-left: 28px !important;
}

/* ---- Checkbox ---- */

.kp-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    user-select: none;
}

.kp-checkbox input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none;
}

.kp-checkbox__box {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border: 1.5px solid var(--kp-border) !important;
    border-radius: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--kp-card) !important;
    margin-top: 1px !important;
    transition: all var(--kp-transition);
}

.kp-checkbox__box svg {
    width: 12px !important;
    height: 12px !important;
    color: white !important;
    opacity: 0;
    transform: scale(.5);
    transition: all var(--kp-transition);
}

.kp-checkbox input:checked + .kp-checkbox__box {
    background: var(--kp-primary) !important;
    border-color: var(--kp-primary) !important;
}

.kp-checkbox input:checked + .kp-checkbox__box svg {
    opacity: 1;
    transform: scale(1);
}

.kp-checkbox input:focus-visible + .kp-checkbox__box {
    box-shadow: 0 0 0 3px var(--kp-primary-ring) !important;
}

.kp-checkbox__text {
    font-size: 13px !important;
    color: var(--kp-text-secondary) !important;
    line-height: 1.5 !important;
}

.kp-checkbox__text a {
    color: var(--kp-primary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.kp-checkbox__text a:hover {
    text-decoration: underline !important;
}

/* ---- Buttons ---- */

.kp-reg-page .kp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: var(--kp-font) !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: all var(--kp-transition);
}

.kp-btn--primary {
    background: var(--kp-primary) !important;
    color: white !important;
}

.kp-btn--primary:hover {
    background: var(--kp-primary-hover) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(59, 130, 246, .35) !important;
}

.kp-btn--primary:active {
    transform: translateY(0);
    box-shadow: none !important;
}

.kp-btn--ghost {
    background: transparent !important;
    color: var(--kp-text-secondary) !important;
    border: 1.5px solid var(--kp-border) !important;
}

.kp-btn--ghost:hover {
    background: #f8fafc !important;
    color: var(--kp-text) !important;
    border-color: #cbd5e1 !important;
}

.kp-btn--full {
    width: 100% !important;
}

.kp-btn svg {
    flex-shrink: 0 !important;
}

/* ---- Form actions ---- */

.kp-form-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 4px !important;
}

.kp-form-actions .kp-btn--primary {
    flex: 1 !important;
}

/* ---- Company info ---- */

.kp-company {
    margin-top: 28px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--kp-border) !important;
    text-align: center !important;
}

.kp-company p {
    font-size: 11px !important;
    color: var(--kp-text-muted) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kp-company p + p {
    margin-top: 2px !important;
}

.kp-company__name {
    font-weight: 600 !important;
    color: var(--kp-text-secondary) !important;
    margin-bottom: 2px !important;
}

.kp-company strong {
    color: var(--kp-text-secondary) !important;
}

/* ---- Shake animation ---- */

@keyframes kpShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.kp-shake {
    animation: kpShake .4s ease-in-out;
}

/* ---- Responsive ---- */

@media (max-width: 860px) {
    .kp-reg.kp-reg--wide {
        max-width: 520px !important;
    }

    .kp-step__layout {
        flex-direction: column-reverse !important;
        gap: 24px !important;
    }

    .kp-step__preview-col {
        width: 100% !important;
        max-width: 360px !important;
        align-self: center !important;
    }
}

@media (max-width: 560px) {
    .kp-reg-page {
        padding: 24px 12px !important;
    }

    .kp-reg__card {
        padding: 28px 20px 24px !important;
        border-radius: 12px !important;
    }

    .kp-step__title {
        font-size: 20px !important;
    }

    .kp-form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .kp-steps__connector {
        width: 48px !important;
    }

    .kp-card-preview__number {
        font-size: 17px !important;
        gap: 10px !important;
    }
}

/* ---- Auth link ---- */

.kp-auth-link {
    text-align: center !important;
    margin-top: 24px !important;
    font-size: 14px !important;
    color: var(--kp-text-secondary) !important;
}

.kp-auth-link a {
    color: var(--kp-primary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.kp-auth-link a:hover {
    text-decoration: underline !important;
}

/* ---- Login error alert ---- */

.kp-alert {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    border-radius: var(--kp-radius) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.kp-alert--error {
    background: var(--kp-error-light) !important;
    color: var(--kp-error) !important;
    border: 1px solid rgba(239, 68, 68, .2) !important;
}

.kp-alert svg {
    flex-shrink: 0 !important;
}