/* ============================================
   ACCOUNT PROFILE
   ============================================ */

#account-profile-head,
.acf-field .acf-label label,
.acf-field .acf-input,
.rcp-table-wrapper {
    color: #fff;
}

.acf-field .acf-label label {
    font-weight: 500 !important;
}

.acf-field .acf-input {
    vertical-align: top;
}

/* ============================================
   ACF TABS
   ============================================ */

.acf-fields > .acf-tab-wrap {
    background: transparent !important;
}

.acf-tab-group li a {
    color: #002B4B !important;
    font-weight: 500 !important;
    background: #fff !important;
}

li.active a.acf-tab-button {
    color: #fff !important;
    background-color: #002B4B !important;
}

/* ============================================
   RCP TABLE
   ============================================ */

.rcp-table-wrapper {
    max-width: 1000px !important;
    width: auto;
}

.rcp-table thead tr {
    background-color: #002B4B;
}

/* ============================================
   BUTTONS
   ============================================ */

input.acf-button.button.button-primary.button-large {
    border-radius: 10px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
}

/* ============================================
   ACCOUNT PROFILE — form cleanup
   Scoped to the front-end ACF form (#acf_form) so the WP admin is untouched.
   ============================================ */

#acf_form {
    max-width: 100%;
}

/* Rows: lighter dividers, tighter than ACF's admin spacing */
#acf_form .acf-fields > .acf-field {
    padding: 0.9rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

#acf_form .acf-fields > .acf-field.acf-field-tab,
#acf_form .acf-fields > .acf-field:first-of-type {
    border-top: 0;
}

/* Labels: were 19px and heavier than the inputs they describe */
#acf_form .acf-field > .acf-label {
    margin-bottom: 0.4rem;
}

#acf_form .acf-field > .acf-label label {
    font-size: 1rem;
    font-weight: 600 !important;
    line-height: 1.3;
    margin: 0;
}

#acf_form .acf-field .acf-required {
    color: #ff8fa1;
}

#acf_form .acf-field p.description,
#acf_form .acf-field-message .acf-input p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.78);
    margin: 0.35rem 0 0;
}

/* Inputs: consistent size, readable text, rounded to match the site */
#acf_form .acf-input input[type="text"],
#acf_form .acf-input input[type="email"],
#acf_form .acf-input input[type="url"],
#acf_form .acf-input input[type="number"],
#acf_form .acf-input input[type="password"],
#acf_form .acf-input input[type="date"],
#acf_form .acf-input select,
#acf_form .acf-input textarea {
    width: 100%;
    max-width: 32rem;
    padding: 0.6em 0.85em;
    font-size: 1rem;
    line-height: 1.4;
    color: #002b4b;
    background: #fff;
    border: 1px solid rgba(0, 43, 75, 0.2);
    border-radius: 6px;
    box-shadow: none;
}

#acf_form .acf-input textarea,
#acf_form .acf-field-wysiwyg .acf-input,
#acf_form .acf-field-repeater .acf-input {
    max-width: 100%;
}

#acf_form .acf-input input:focus,
#acf_form .acf-input select:focus,
#acf_form .acf-input textarea:focus {
    border-color: #004990;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
    outline: none;
}

/* Editor: 300px of empty box for a short bio */
#acf_form .acf-field-wysiwyg .wp-editor-container {
    border-radius: 6px;
    overflow: hidden;
}

#acf_form .acf-field-wysiwyg iframe,
#acf_form .acf-field-wysiwyg textarea {
    /* TinyMCE sets the height inline, so this needs to win */
    min-height: 200px !important;
    height: 200px !important;
}

/* Tabs: pills that wrap cleanly, matching the tabs used elsewhere on the site */
#acf_form .acf-tab-wrap {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 0.5rem;
}

#acf_form .acf-tab-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
    padding: 0 0 0.75rem !important;
    margin: 0;
}

#acf_form .acf-tab-group li {
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#acf_form .acf-tab-group li a {
    display: inline-flex;
    align-items: center;
    padding: 0.45em 1.1em;
    border: 1px solid #fff !important;
    border-radius: 6px;
    background: transparent !important;
    color: #fff !important;
    font-weight: 500 !important;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#acf_form .acf-tab-group li a:hover,
#acf_form .acf-tab-group li.active a,
#acf_form li.active a.acf-tab-button {
    background: #fff !important;
    color: #002b4b !important;
}

/* Image fields: "Add Image" was a bare link */
#acf_form .acf-image-uploader a.acf-button,
#acf_form .acf-image-uploader input.acf-button {
    display: inline-flex;
    align-items: center;
    padding: 0.4em 1.1em;
    border: 1px solid #fff;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.5;
    height: auto;
}

#acf_form .acf-image-uploader a.acf-button:hover {
    background: #fff;
    color: #002b4b;
}

/* Inline helper buttons (copy profile link, Find My ID) sized to their content */
#account-profile-link-copy,
#acf_form .account-profile-find-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    margin-left: 0.5rem;
    padding: 0.5em 1em;
    border-radius: 6px;
    white-space: nowrap;
}

#acf_form .acf-input-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 32rem;
}

#acf_form .acf-input-wrap input[type="text"] {
    flex: 1 1 14rem;
}

#account-profile-page-url {
    word-break: break-all;
}

/* Repeater / table fields */
#acf_form .acf-table {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    overflow: hidden;
}

#acf_form .acf-table > thead > tr > th {
    background: rgba(0, 43, 75, 0.55);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}

#acf_form .acf-table > tbody > tr > td {
    border-color: rgba(255, 255, 255, 0.18);
}

/* Checkbox and radio lists */
#acf_form .acf-checkbox-list li,
#acf_form .acf-radio-list li {
    margin-bottom: 0.3rem;
}

/* Submit */
#acf_form .acf-form-submit {
    margin-top: 1.5rem;
}

#acf_form input.acf-button.button-primary {
    padding: 0.7em 2em;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    height: auto;
    line-height: 1.4;
}

@media (max-width: 768px) {
    #acf_form .acf-input input[type="text"],
    #acf_form .acf-input input[type="email"],
    #acf_form .acf-input input[type="url"],
    #acf_form .acf-input input[type="number"],
    #acf_form .acf-input input[type="password"],
    #acf_form .acf-input input[type="date"],
    #acf_form .acf-input select,
    #acf_form .acf-input-wrap {
        max-width: 100%;
    }

    #acf_form input.acf-button.button-primary {
        width: 100%;
    }
}

/* ============================================
   ACCOUNT PROFILE — two-column layout on desktop
   The form now spans the same width as the rest of the page, so short fields
   sit two across instead of leaving half the row empty. Anything that needs
   room (editor, images, repeaters, choices) still takes the full width.
   ============================================ */
@media (min-width: 900px) {
    #acf_form .acf-fields {
        display: flex;
        flex-wrap: wrap;
        column-gap: 2rem;
    }

    #acf_form .acf-fields > .acf-field {
        flex: 1 1 100%;
        max-width: 100%;
        border-top: 0;
        padding: 0.6rem 0 1rem;
    }

    #acf_form .acf-fields > .acf-field-text,
    #acf_form .acf-fields > .acf-field-email,
    #acf_form .acf-fields > .acf-field-url,
    #acf_form .acf-fields > .acf-field-number,
    #acf_form .acf-fields > .acf-field-date-picker {
        flex: 1 1 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }

    /* fields that need the full row */
    #acf_form .acf-fields > .acf-field-wysiwyg,
    #acf_form .acf-fields > .acf-field-textarea,
    #acf_form .acf-fields > .acf-field-repeater,
    #acf_form .acf-fields > .acf-field-taxonomy,
    #acf_form .acf-fields > .acf-field-select,
    #acf_form .acf-fields > .acf-field-checkbox,
    #acf_form .acf-fields > .acf-field-image,
    #acf_form .acf-fields > .acf-field-message,
    #acf_form .acf-fields > .acf-field-acfe-dynamic-render,
    #acf_form .acf-fields > .acf-field-tab {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* inputs fill their column rather than a fixed 32rem */
    #acf_form .acf-input input[type="text"],
    #acf_form .acf-input input[type="email"],
    #acf_form .acf-input input[type="url"],
    #acf_form .acf-input input[type="number"],
    #acf_form .acf-input input[type="password"],
    #acf_form .acf-input input[type="date"],
    #acf_form .acf-input select,
    #acf_form .acf-input-wrap {
        max-width: 100%;
    }

    /* keep the long profile-page row and choices readable */
    #acf_form .acf-field-checkbox .acf-checkbox-list {
        column-count: 2;
        max-width: 40rem;
    }

    /* A long description (e.g. CREA Agent ID) pushed its input below the one
       beside it; bottom-align the pair so every input on a row lines up. */
    #acf_form .acf-fields > .acf-field-text,
    #acf_form .acf-fields > .acf-field-email,
    #acf_form .acf-fields > .acf-field-url,
    #acf_form .acf-fields > .acf-field-number,
    #acf_form .acf-fields > .acf-field-date-picker {
        display: flex;
        flex-direction: column;
    }

    #acf_form .acf-fields > .acf-field-text > .acf-input,
    #acf_form .acf-fields > .acf-field-email > .acf-input,
    #acf_form .acf-fields > .acf-field-url > .acf-input,
    #acf_form .acf-fields > .acf-field-number > .acf-input,
    #acf_form .acf-fields > .acf-field-date-picker > .acf-input {
        margin-top: auto;
    }
}