/* FlexiPets Ultimate Member – Register / Konto */

:root {
    --fp-um-purple: #7c3aed;
    --fp-um-purple-dark: #2b2450;
    --fp-um-input-bg: #ffffff;
    --fp-um-input-border: #ffffff;
    --fp-um-input-icon: #8b7fd8;
    --fp-um-muted: #64748b;
    --fp-um-max: 1140px;
    --fp-um-field-radius: 999px;
}

body.fp-um-register-page,
body.fp-um-account-page {
    background: linear-gradient(180deg, #faf7ff 0%, #fdf2f8 55%, #f3f1f8 100%) !important;
}

body.fp-um-register-page .site-content,
body.fp-um-register-page .entry-content,
body.fp-um-register-page .um,
body.fp-um-register-page .um-form,
body.fp-um-register-page .um-form form,
body.fp-um-register-page .um-register,
body.fp-um-account-page .um-account-main,
body.fp-um-account-page .um-account-tab.um-account-general,
body.fp-um-account-page .um-account .um-form {
    max-width: var(--fp-um-max) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.fp-um-register-page .um-field,
body.fp-um-register-page .um-col-1,
body.fp-um-register-page .um-col-121,
body.fp-um-register-page .um-col-122,
body.fp-um-register-page .um-col-131,
body.fp-um-register-page .um-col-132,
body.fp-um-register-page .um-col-133,
body.fp-um-register-page .um-col-134,
body.fp-um-register-page .um-col-alt {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

.fp-um-register-page .um-form-title,
.fp-um-account-page .um-account-title,
.fp-um-account-page .um-account-general .um-field-heading,
.fp-um-form-shell ~ .um-clear {
    display: none !important;
}

.fp-um-form-shell {
    width: 100%;
    max-width: var(--fp-um-max);
    margin: 0 auto 24px;
}

.fp-um-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

.fp-um-form-box {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 24px 24px 22px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(139, 92, 246, 0.08);
    box-shadow: 0 18px 40px rgba(76, 29, 149, 0.08);
}

.fp-um-form-box-head {
    margin-bottom: 16px;
}

.fp-um-form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font: 900 22px/1.1 'Baloo 2', system-ui, sans-serif;
    color: var(--fp-um-purple-dark);
}

.fp-um-form-section-title i {
    color: var(--fp-um-purple);
    font-size: 20px;
}

.fp-um-form-section-note {
    margin: 8px 0 0;
    font: 600 13px/1.55 system-ui, sans-serif;
    color: var(--fp-um-muted);
}

.fp-um-form-section-note--align {
    visibility: hidden;
    margin: 8px 0 0;
    min-height: calc(13px * 1.55 * 2);
}

.fp-um-form-fields {
    display: grid;
    gap: 14px;
}

.fp-um-form-box--personal .um-field,
.fp-um-form-fields--address .fp-um-field,
.fp-um-form-shell .um-field {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    max-width: none !important;
}

.fp-um-form-box--personal .um-field-label,
.fp-um-field-label {
    margin-bottom: 8px;
}

.fp-um-form-box--personal .um-field-label label,
.fp-um-field-label label {
    font: 800 14px/1.2 'Baloo 2', system-ui, sans-serif;
    color: #334155;
}

.fp-um-optional {
    font: 700 12px/1 system-ui, sans-serif;
    color: #94a3b8;
}

.fp-um-input-group,
.fp-um-form-box--personal .um-field-area {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 54px;
    padding: 0 20px 0 16px;
    border: 1px solid var(--fp-um-input-border) !important;
    border-radius: var(--fp-um-field-radius);
    background: var(--fp-um-input-bg) !important;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.fp-um-input-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    margin-right: 14px;
    padding-right: 14px;
    border-right: 1px solid #f0eef5;
    color: var(--fp-um-input-icon);
    font-size: 16px;
    line-height: 1;
}

.fp-um-input-control {
    flex: 1;
    min-width: 0;
}

.fp-um-form-box--personal .um-field-area::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    margin-right: 14px;
    padding-right: 14px;
    border-right: 1px solid #f0eef5;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--fp-um-input-icon);
    font-size: 16px;
    line-height: 1;
}

.fp-um-form-box--personal .um-field[data-key="user_login"] .um-field-area::before,
.fp-um-form-box--personal .um-field[data-key="username"] .um-field-area::before,
.fp-um-form-box--personal .um-field[data-key="first_name"] .um-field-area::before,
.fp-um-form-box--personal .um-field[data-key="last_name"] .um-field-area::before { content: "\f007"; }

.fp-um-form-box--personal .um-field[data-key="user_password"] .um-field-area::before,
.fp-um-form-box--personal .um-field[data-key="confirm_user_password"] .um-field-area::before { content: "\f023"; }

.fp-um-form-box--personal .um-field[data-key="user_email"] .um-field-area::before { content: "\f0e0"; }

.fp-um-form-box--personal .um-field-area > i,
.fp-um-form-box--personal .um-field-area .um-icon {
    display: none !important;
}

.fp-um-form-box--personal .um-form-field,
.fp-um-input-control .um-form-field,
.fp-um-input-group .um-form-field {
    flex: 1;
    min-width: 0;
    width: 100% !important;
    height: 52px;
    min-height: 52px;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font: 600 15px/1.4 system-ui, sans-serif !important;
    color: #1e293b !important;
    appearance: none;
    -webkit-appearance: none;
}

.fp-um-input-control select.um-form-field,
.fp-um-input-group select.um-form-field {
    padding-right: 28px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0 center !important;
    background-size: 12px 8px !important;
    cursor: pointer;
}

.fp-um-form-box--personal .um-form-field:focus,
.fp-um-input-control .um-form-field:focus,
.fp-um-input-group .um-form-field:focus {
    outline: none !important;
    box-shadow: none !important;
}

.fp-um-form-box--personal .um-field-area:focus-within,
.fp-um-input-group:focus-within {
    border-color: #ddd6fe;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12);
}

.fp-um-form-box--personal .um-form-field::placeholder,
.fp-um-input-control .um-form-field::placeholder,
.fp-um-input-group .um-form-field::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

.fp-um-trust-box {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    margin-top: 28px;
    padding: 16px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(245, 240, 255, 0.98), rgba(237, 233, 254, 0.92));
    border: 1px solid rgba(139, 92, 246, 0.1);
}

.fp-um-trust-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--fp-um-purple);
    font-size: 24px;
}

.fp-um-trust-box strong {
    display: block;
    margin-bottom: 4px;
    font: 900 15px/1.3 'Baloo 2', system-ui, sans-serif;
    color: var(--fp-um-purple-dark);
}

.fp-um-trust-box p {
    margin: 0;
    font: 600 12px/1.55 system-ui, sans-serif;
    color: var(--fp-um-muted);
}

.fp-um-address-grid {
    display: grid;
    grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
    gap: 14px;
}

.fp-um-form-box--address {
    display: flex;
    flex-direction: column;
}

.fp-um-submit-slot {
    margin-top: auto;
    padding-top: 18px;
}

.fp-um-submit-proxy {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100% !important;
    min-height: 56px;
    padding: 15px 22px !important;
    border: none !important;
    border-radius: var(--fp-um-field-radius) !important;
    background: linear-gradient(90deg, #b56dff 0%, #ff6bcb 100%) !important;
    box-shadow: 0 14px 28px rgba(181, 109, 255, 0.28) !important;
    font: 900 17px/1 'Baloo 2', system-ui, sans-serif !important;
    color: #fff !important;
    cursor: pointer;
    transition: transform 0.18s ease;
}

.fp-um-submit-proxy:hover {
    transform: translateY(-2px);
    color: #fff !important;
}

.fp-um-form-shell ~ .um-center,
.fp-um-form-shell ~ .um-col-alt,
body.fp-um-register-page .um-form > .um-center,
body.fp-um-register-page .um-form > .um-col-alt,
body.fp-um-general-tab .um-account form > .um-center,
body.fp-um-general-tab .um-account form > .um-col-alt {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.fp-um-form-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
    padding: 22px 24px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(139, 92, 246, 0.08);
    box-shadow: 0 18px 40px rgba(76, 29, 149, 0.08);
}

.fp-um-form-benefit {
    text-align: center;
    padding: 6px 8px;
}

.fp-um-form-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
    border-radius: 16px;
    font-size: 26px;
}

.fp-um-form-benefit-icon--shield { background: rgba(124, 58, 237, 0.1); }
.fp-um-form-benefit-icon--coins { background: rgba(250, 204, 21, 0.16); }
.fp-um-form-benefit-icon--bolt { background: rgba(59, 130, 246, 0.12); }

.fp-um-form-benefit strong {
    display: block;
    margin-bottom: 4px;
    font: 900 17px/1.2 'Baloo 2', system-ui, sans-serif;
    color: var(--fp-um-purple-dark);
}

.fp-um-form-benefit p {
    margin: 0;
    font: 600 13px/1.5 system-ui, sans-serif;
    color: var(--fp-um-muted);
}

body.fp-um-account-page .um-account-general .fp-um-form-shell {
    margin-top: 0;
}

@media (max-width: 960px) {
    .fp-um-form-grid,
    .fp-um-form-benefits {
        grid-template-columns: 1fr;
    }

    .fp-um-address-grid {
        grid-template-columns: 1fr;
    }

    .fp-um-form-section-note--align {
        display: none;
    }
}