/* ============================================================
 * Users Login – Profile, Essays, Favorites, Buttons
 * Core CSS variables (override in your theme if needed)
 * ============================================================ */

:root {
    /* Colors */
    --color-primary-dark: #162241;
    --color-stroke-grey: #E3E8EF;
    --color-space-convoy: #697586;
    --color-bee-hall: #F3CC63;
    --color-snug-cottage: #FFFAE1;
    --color-white: #ffffff;

    

    /* Auth form validation */
    --ul-color-error: #E04562;
    --ul-color-success: #1ABCA1;

    /* Typography */
    --font-family-base: 'LexendDeca', sans-serif;

    /* Transitions */
    --default-transition: 0.3s ease-out;
}

/* ============================================================
 * Layout – profile wrapper
 * Mobile: stacked
 * Tablet/Desktop: sidebar + content grid
 * ============================================================ */

/* Mobile-first: stacked layout */
.ul-profile__wrap {
    display: block;
}

/* Tablet: two-column layout */
.logged-in .ul-profile__wrap {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
}

/* Desktop: slightly wider sidebar and gaps */
@media (min-width: 992px) {
    .logged-in .ul-profile__wrap {
        grid-template-columns: 240px 1fr;
        grid-gap: 24px;
    }
}

/* ============================================================
 * Profile menu grid
 * ============================================================ */

.ul-profile__sidebar {
    overflow-x: auto;
}

.ul-profile__sidebar ul {
    display: flex;
    gap: 0 16px;
}

@media (min-width: 992px) {
    .ul-profile__sidebar ul {
        flex-direction: column;
    }
}

.ul-profile__sidebar ul li {
    white-space: nowrap;
}

/* ============================================================
 * Profile form grid
 * ============================================================ */

/* Base grid for profile forms */
.ul-profile__grid {
    display: flex !important;
    flex-direction: column !important;
    row-gap: 16px !important;
}

/* Larger vertical gaps on desktop */
@media (min-width: 992px) {
    .ul-profile__grid {
        row-gap: 24px !important;
    }
}

/* Labels inside profile grid */
.ul-profile__grid label {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--color-primary-dark) !important;
    margin: 0 !important;
}

/* Text inputs (except checkboxes) */
.ul-profile__grid input:not([type="checkbox"]) {
    font-family: var(--font-family-base) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--color-primary-dark) !important;
    width: 100% !important;
    height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-stroke-grey) !important;
    background: var(--color-white) !important;
    transition: var(--default-transition) !important;
}

/* Input placeholders */
.ul-profile__grid input:not([type="checkbox"])::placeholder {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--color-space-convoy) !important;
}

/* Selects */
.ul-profile__grid select {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-family: var(--font-family-base) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    width: 100% !important;
    height: 44px !important;
    padding: 10px 20px 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-stroke-grey) !important;
    background: var(--color-white) !important;
    transition: var(--default-transition) !important;
}

/* Textareas */
.ul-profile__grid textarea {
    font-family: var(--font-family-base) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--color-primary-dark) !important;
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-stroke-grey) !important;
    background: var(--color-white) !important;
    resize: none !important;
}

/* ============================================================
 * ACF form fields inside profile grid
 * ============================================================ */

/* ACF form fields wrapper */
.ul-profile__grid .acf-form-fields {
    display: flex !important;
    flex-direction: column !important;
    row-gap: 16px !important;
}

@media (min-width: 992px) {
    .ul-profile__grid .acf-form-fields {
        row-gap: 24px !important;
    }
}

/* Remove default ACF separators */
.ul-profile__grid .acf-form-fields:before,
.ul-profile__grid .acf-form-fields:after {
    display: none !important;
}

/* Remove extra padding/border on ACF fields */
.ul-profile__grid .acf-form-fields .acf-field {
    padding: 0 !important;
    border: none !important;
}

.ul-profile__grid .acf-form-fields .description {
    font-size: 10px;
    margin-top: 6px;
}

/* Hide WP editor tabs inside ACF field (if any) */
.ul-profile__grid .acf-form-fields .acf-field .wp-editor-tabs {
    display: none !important;
}

/* Inner padding for repeater/group children */
.ul-profile__grid .acf-field-repeater .acf-field,
.ul-profile__grid .acf-field-group .acf-field {
    padding: 10px !important;
}

/* ACF action buttons and image uploader buttons */
.ul-profile__grid .acf-actions .acf-button,
.ul-profile__grid .acf-image-uploader .acf-button {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-space-convoy);
    text-align: center;
    height: 48px;
    padding: 10.5px 20px;
    margin: 0 auto;
    border: 1px solid var(--color-space-convoy);
    border-radius: 100px;
    background: transparent;
    box-shadow: none;
    transition: var(--default-transition);
    cursor: pointer;
}

/* Hover state for ACF buttons */
.ul-profile__grid .acf-actions .acf-button:hover,
.ul-profile__grid .acf-image-uploader .acf-button:hover {
    color: var(--color-white);
    background: var(--color-primary-dark);
    border: 1px solid var(--color-primary-dark);
}

/* ============================================================
 * Generic profile field wrapper
 * ============================================================ */

.ul-profile__field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* ============================================================
 * Custom checkbox styling (tags etc.)
 * ============================================================ */

.ul-profile__checkbox {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* Checkbox label */
.ul-profile__checkbox label {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #475467;
}

/* Fake checkbox box */
.ul-profile__checkbox div {
    width: 20px;
    height: 20px;
    border-radius: 8px;
    border: 1px solid var(--color-stroke-grey);
    background: var(--color-white);
    position: relative;
}

/* Checkmark */
.ul-profile__checkbox div::after {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    opacity: 0;
    font-size: 12px;
    transition: 0.2s ease;
    color: var(--color-primary-dark);
}

/* Hide native checkbox input */
.ul-profile__checkbox input {
    display: none;
}

/* Show checkmark when checked */
.ul-profile__checkbox input:checked + div::after {
    opacity: 1;
}

/* ============================================================
 * Bottom section of forms (buttons, logout link etc.)
 * ============================================================ */

.ul-profile__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
}

/* Single-item bottom row (e.g. one primary button) */
.ul-profile__bottom--single {
    justify-content: flex-end;
}

/* ============================================================
 * Submit Essay – Help dropdown
 * ============================================================ */

.ul-essay-help {
    border: 1px solid var(--color-stroke-grey);
    border-radius: 16px;
    background: var(--color-white);
    margin: 0 0 20px;
    overflow: hidden;
}

.ul-essay-help__summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 18px;
    font-weight: 600;
    color: var(--color-primary-dark);
    position: relative;
}

/* Hide default marker */
.ul-essay-help__summary::-webkit-details-marker {
    display: none;
}
.ul-essay-help__summary::marker {
    content: "";
}

.ul-essay-help__summary::after {
    content: "▾";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform var(--default-transition);
    color: var(--color-space-convoy);
}

.ul-essay-help[open] .ul-essay-help__summary::after {
    transform: translateY(-50%) rotate(180deg);
}

.ul-essay-help__content {
    padding: 2px 18px 18px;
    color: var(--color-space-convoy);
}

.ul-essay-help__content h1,
.ul-essay-help__content h2,
.ul-essay-help__content h3,
.ul-essay-help__content h4,
.ul-essay-help__content h5,
.ul-essay-help__content h6 {
    margin: 14px 0 6px;
    color: var(--color-primary-dark);
}

.ul-essay-help__content p {
    margin: 0 0 10px;
}

.ul-essay-help__content ul,
.ul-essay-help__content ol {
    margin: 0 0 10px 18px;
}

/* Primary action button */
.ul-profile__bottom button {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
    height: 48px;
    padding: 10.5px 20px;
    border: 1px solid var(--color-primary-dark);
    border-radius: 100px;
    background: var(--color-primary-dark);
    box-shadow: none;
    transition: var(--default-transition);
    cursor: pointer;
}

/* Hover state for primary button */
.ul-profile__bottom button:hover {
    color: var(--color-primary-dark);
    background: #ffffff;
    border: 1px solid var(--color-primary-dark);
}

/* ============================================================
 * Password toggle (same pattern as login form)
 * ============================================================ */

.ul-profile__pass {
    position: relative;
}

/* Eye toggle button */
.ul-profile__pass button {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) translateX(-6%);
    width: 18px;
    height: 10px;
    background: none;
    border: none;
}

/* Both SVG states are stacked, we toggle opacity */
.ul-profile__pass button svg {
    position: absolute;
    inset: 0;
    opacity: 0;
}

/* Show "eye" SVG */
.ul-profile__pass button.show-pass svg:first-of-type {
    opacity: 1;
}

/* Show "eye-slash" SVG */
.ul-profile__pass button.hide-pass svg:last-of-type {
    opacity: 1;
}

/* ============================================================
 * Feedback messages (error / success)
 * ============================================================ */

.ul-profile__error {
    font-size: 14px;
    color: var(--ul-color-error);
    margin-bottom: 20px;
}

.ul-profile__success {
    font-size: 14px;
    color: var(--ul-color-success);
    margin-bottom: 20px;
}

/* ============================================================
 * Content lists: essays / favorites table-like layout
 * ============================================================ */

.ul-profile__content .ul-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* ============================================================
 * My Essays – submit button (moved from sidebar)
 * ============================================================ */

.ul-profile__content .ul-essays-toolbar {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin: 0 0 14px;
}

.ul-profile__content .ul-essays-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--color-primary-dark);
    border: 1px solid var(--color-primary-dark);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    transition: var(--default-transition);
}

.ul-profile__content .ul-essays-submit-btn:hover {
    opacity: 0.92;
}

.ul-profile__content .pagination {
    margin-top: 40px;
}

/* List header row and data rows */
.ul-profile__content .ul-items-header,
.ul-profile__content .ul-items-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

@media (max-width: 769px) {
    .ul-profile__content .ul-items-header,
    .ul-profile__content .ul-items-row {
        flex-wrap: wrap;
    }
}

/* Column sizing (title takes remaining space) */
.ul-profile__content .ul-items-header .cell--title,
.ul-profile__content .ul-items-row .cell--title {
    flex: 1;
    min-width: 0;
}

@media (max-width: 769px) {
    .ul-profile__content .ul-items-header .cell--title,
    .ul-profile__content .ul-items-row .cell--title {
        flex: 0 0 calc(65% - 6px);
        order: 1;
    }
}

@media (max-width: 575px) {
    .ul-profile__content .ul-items-header .cell--title,
    .ul-profile__content .ul-items-row .cell--title {
        flex: 0 0 100%;
    }
}

/* Status / type columns */
.ul-profile__content .ul-items-header .cell--status,
.ul-profile__content .ul-items-header .cell--type,
.ul-profile__content .ul-items-row .cell--status,
.ul-profile__content .ul-items-row .cell--type {
    flex: 0 0 170px;
    justify-content: center;
}

@media (max-width: 769px) {
    .ul-profile__content .ul-items-header .cell--status,
    .ul-profile__content .ul-items-header .cell--type,
    .ul-profile__content .ul-items-row .cell--status,
    .ul-profile__content .ul-items-row .cell--type {
        flex: 0 0 calc(35% - 6px);
        justify-content: flex-end;
    }
}

@media (max-width: 575px) {
    .ul-profile__content .ul-items-header .cell--status,
    .ul-profile__content .ul-items-header .cell--type,
    .ul-profile__content .ul-items-row .cell--status,
    .ul-profile__content .ul-items-row .cell--type {
        flex: 0 0 calc(100% - 12px - 120px);
        order: 3;
    }

    .ul-profile__content .ul-items-header .cell--status,
    .ul-profile__content .ul-items-row .cell--status {
        justify-content: flex-end;
    }

    .ul-profile__content .ul-items-header .cell--type,
    .ul-profile__content .ul-items-row .cell--type {
        justify-content: flex-start;
    }
}

/* View column */
.ul-profile__content .ul-items-header .cell--view,
.ul-profile__content .ul-items-row .cell--view {
    flex: 0 0 60px;
    justify-content: center;
}

@media (max-width: 769px) {
    .ul-profile__content .ul-items-header .cell--view,
    .ul-profile__content .ul-items-row .cell--view {
        flex: 0 0 24px;
        order: 3;
    }
}

@media (max-width: 575px) {
    .ul-profile__content .ul-items-header .cell--view,
    .ul-profile__content .ul-items-row .cell--view {
        order: 4;
    }
}

/* Progress column (courses) */
.ul-profile__content .ul-items-header .cell--progress,
.ul-profile__content .ul-items-row .cell--progress {
    flex: 0 0 180px;
    justify-content: center;
}

@media (max-width: 769px) {
    .ul-profile__content .ul-items-header .cell--progress,
    .ul-profile__content .ul-items-row .cell--progress {
        flex: 0 0 calc(35% - 6px);
        justify-content: flex-end;
        order: 2;
    }
}

@media (max-width: 575px) {
    .ul-profile__content .ul-items-header .cell--progress,
    .ul-profile__content .ul-items-row .cell--progress {
        justify-content: flex-start;
        margin-right: auto;
    }
}

/* Published date column */
.ul-profile__content .ul-items-header .cell--published,
.ul-profile__content .ul-items-row .cell--published {
    flex: 0 0 120px;
    justify-content: center;
}

@media (max-width: 575px) {
    .ul-profile__content .ul-items-header .cell--published,
    .ul-profile__content .ul-items-row .cell--published {
        justify-content: flex-start;
        order: 2;
    }
}

/* Options column */
.ul-profile__content .ul-items-header .cell--options,
.ul-profile__content .ul-items-row .cell--options {
    flex: 0 0 72px;
    justify-content: flex-end;
}

@media (max-width: 769px) {
    .ul-profile__content .ul-items-header .cell--options,
    .ul-profile__content .ul-items-row .cell--options {
        margin-left: auto;
    }
}

@media (max-width: 575px) {
    .ul-profile__content .ul-items-header .cell--options,
    .ul-profile__content .ul-items-row .cell--options {
        order: 5;
    }
}

/* Title truncation */
.ul-profile__content .ul-item-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status / type pill styling */
.ul-profile__content .ul-status,
.ul-profile__content .ul-type {
    font-size: 12px;
    color: #6b7280;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
}

/* Status modifier (published) */
.ul-profile__content .ul-status--publish {
    color: #33cc33;
}

/* Edit / delete action buttons */
.ul-profile__content .ul-items-options__edit,
.ul-profile__content .ul-items-options__delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 6px;
    text-decoration: none;
}

/* Hover state for options */
.ul-profile__content .ul-items-options__edit:hover,
.ul-profile__content .ul-items-options__delete:hover {
    background: #162241;
}

/* Icon transition on hover */
.ul-profile__content .ul-items-options__edit:hover svg path,
.ul-profile__content .ul-items-options__delete:hover svg path {
    fill: #ffffff;
}

.ul-profile__content .ul-items-options__edit svg path,
.ul-profile__content .ul-items-options__delete svg path {
    transition: 0.3s ease;
}

/* Default backgrounds for options */
.ul-profile__content .ul-items-options__edit {
    background: #f1f5f9;
}

.ul-profile__content .ul-items-options__delete {
    background: #ffeaea;
}

/* Header row styling */
.ul-profile__content .ul-items-header {
    font-weight: 600;
    background: #f8fafc;
}

@media (max-width: 769px) {
    .ul-profile__content .ul-items-header {
        display: none;
    }
}

.ul-profile__content .ul-items-header .ul-items-cell {
    font-size: 16px;
}

/* Row title cell */
.ul-profile__content .ul-items-row .ul-items-cell.cell--title {
    font-size: 14px;
}

/* "View" link */
.ul-profile__content .ul-items-row .ul-items-cell.cell--view a {
    font-size: 10px;
    color: #162241;
    text-decoration: underline;
}

.ul-profile__content .ul-items-row .ul-items-cell.cell--view a:hover {
    color: #697586;
}

/* Published date text */
.ul-profile__content .ul-items-row .ul-items-cell.cell--published {
    font-size: 12px;
}

/* Generic cell styles */
.ul-profile__content .ul-items-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #162241;
}

/* ============================================================
 * Pagination / helper elements
 * ============================================================ */

.ul-profile__content .wpuf-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 40px;
}

.ul-profile__content .wpuf-pagination .pagination {
    padding: 0 !important;
    margin: 0 !important;
}

/* Delete message (optional helper) */
.ul-profile__content #wpuf-delete-msg {
    display: none;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    background: #ecfccb;
    border: 1px solid #a3e635;
    margin-bottom: 10px;
}

/* Post edit icon (hidden for frontend) */
.ul-profile__content .post-edit-icon {
    display: none;
    margin-left: 6px;
    cursor: default;
}

/* ============================================================
 * Sidebar navigation
 * ============================================================ */

.ul-profile__sidebar ul li {
    padding: 4px;
}

.ul-profile__sidebar ul li.is-active a {
    color: var(--color-primary-dark);
}

/* ============================================================
 * Not-logged-in notice
 * ============================================================ */

.ul-profile__notice {
    text-align: center;
}

/* ============================================================
 * Select2 (ACF select fields)
 * ============================================================ */

/* Selected value container */
.select2-selection {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    height: 44px !important;
    padding: 10px 20px 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-stroke-grey) !important;
    background: var(--color-white) !important;
    transition: var(--default-transition) !important;
}

.select2-selection__rendered {
    padding: 0 !important;
}

.select2-selection__arrow {
    width: 20px !important;
    height: 44px !important;
}

/* ACF "selection" text */
.acf-selection {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

/* Dropdown panel */
.select2-dropdown {
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-stroke-grey) !important;
    background: var(--color-white) !important;
    transition: var(--default-transition) !important;
}

/* Dropdown search */
.select2-dropdown .select2-search {
    padding: 0 !important;
}

.select2-dropdown .select2-search__field {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--color-primary-dark) !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
}

/* Dropdown options */
.select2-dropdown .select2-results__option {
    color: var(--color-primary-dark) !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    transition: var(--default-transition) !important;
}

/* Selected / highlighted option */
.select2-dropdown .select2-results__option[aria-selected="true"],
.select2-dropdown .select2-results__option--highlighted {
    color: var(--color-white) !important;
    background: var(--color-primary-dark) !important;
}

/* "No results" message */
.select2-dropdown .select2-results__message {
    padding: 10px 0 !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

/* ============================================================
 * Favorite button and "Sign in to add" link
 * ============================================================ */

.ul-fav-login {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    color: var(--color-primary-dark);
    padding: 10.5px 20px;
    height: 48px;
    background: var(--color-white);
    border: 1px solid var(--color-stroke-grey);
    border-radius: 100px;
    transition: var(--default-transition);
    text-decoration: none;
}

.ul-fav-btn {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    color: var(--color-primary-dark);
    padding: 14px 13px;
    height: 48px;
    background: var(--color-white);
    border: 1px solid var(--color-stroke-grey);
    border-radius: 100px;
    transition: var(--default-transition);
    text-decoration: none;
}

/* Hover state for favorite buttons */
.ul-fav-login:hover {
    cursor: pointer;
    color: var(--color-primary-dark);
    background: var(--color-bee-hall);
    border: 1px solid var(--color-snug-cottage);
}

.ul-fav-btn:hover {
    cursor: pointer;
    background: var(--color-primary-dark);
    border: 1px solid var(--color-primary-dark);
}

.ul-fav-btn .ul-fav-btn__icon svg path {
    stroke: var(--color-primary-dark);
    transition: var(--default-transition);
}

.ul-fav-btn:hover .ul-fav-btn__icon svg path {
    stroke: var(--color-white);
}

.ul-fav-btn.is-fav .ul-fav-btn__icon svg path {
    stroke: var(--color-primary-dark);
    fill: var(--color-primary-dark);
}

.ul-fav-btn.is-fav:hover .ul-fav-btn__icon svg path {
    stroke: var(--color-white);
    fill: var(--color-white);
}

/* Icon wrapper */
.ul-fav-btn__icon {
    width: 20px;
    height: 20px;
}

.ul-fav-btn__icon svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
 * Auth forms (Sign In / Sign Up / Forgot) – match ul-profile UI
 * ============================================================ */

/* Form wrapper */
.ul-login__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 992px) {
    .ul-login__form {
        gap: 24px;
    }
}

/* Field wrapper (same spacing as ul-profile__field) */
.ul-login__field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* Labels */
.ul-login__form label {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--color-primary-dark) !important;
    margin: 0 !important;
}

/* Inputs (except checkbox) */
.ul-login__form input:not([type="checkbox"]) {
    font-family: var(--font-family-base) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--color-primary-dark) !important;
    width: 100% !important;
    height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-stroke-grey) !important;
    background: var(--color-white) !important;
    transition: var(--default-transition) !important;
}

.ul-login__form input:not([type="checkbox"])::placeholder {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--color-space-convoy) !important;
}

/* Password wrapper */
.ul-login__pass {
    position: relative;
}

/* If your login toggle button is a plain <button> inside .ul-login__pass */
.ul-login__pass button {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 18px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Toggle SVG states */
.ul-login__pass button svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.ul-login__pass button.show-pass svg:first-of-type {
    opacity: 1;
}

.ul-login__pass button.hide-pass svg:last-of-type {
    opacity: 1;
}

/* Checkbox row (remember me etc.) */
.ul-login__checkbox {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* Checkbox label */
.ul-login__checkbox label {
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #475467 !important;
}

/* Fake checkbox box (expects structure: input + div) */
.ul-login__checkbox div {
    width: 20px;
    height: 20px;
    border-radius: 8px;
    border: 1px solid var(--color-stroke-grey);
    background: var(--color-white);
    position: relative;
}

.ul-login__checkbox div::after {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    opacity: 0;
    font-size: 12px;
    transition: 0.2s ease;
    color: var(--color-primary-dark);
}

/* Hide native checkbox input */
.ul-login__checkbox input {
    display: none;
}

/* Show checkmark when checked */
.ul-login__checkbox input:checked + div::after {
    opacity: 1;
}

/* Submit button wrapper */
.ul-login__button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Primary submit button (match ul-profile primary button) */
.ul-login__button button {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-white);
    text-align: center;
    width: 100%;
    height: 48px;
    padding: 10.5px 20px;
    border: 1px solid var(--color-primary-dark);
    border-radius: 100px;
    background: var(--color-primary-dark);
    box-shadow: none;
    transition: var(--default-transition);
    cursor: pointer;
}

.ul-login__button button:hover {
    color: var(--color-primary-dark);
    background: var(--color-white);
    border: 1px solid var(--color-primary-dark);
}

/* Messages */
.ul-login__error {
    font-size: 14px;
    color: var(--ul-color-error);
    margin-bottom: 0;
}

.ul-login__success {
    font-size: 14px;
    color: var(--ul-color-success);
    margin-bottom: 0;
}

/* Links area under form (forgot password / sign up / back links) */
.ul-login__links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.ul-login__links a {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.ul-login__links a:hover {
    color: var(--color-space-convoy);
}

/* Inline password validation message (under password fields) */
.ul-login__field-error {
    font-size: 10px;
    line-height: 1;
    color: var(--ul-color-error);
    margin-top: 5px;
}

/* Password visibility toggle (positioning can be overridden in theme) */
.toggle-pass {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

.toggle-pass .ul-icon {
    display: block;
}

.toggle-pass .ul-icon-eye-off {
    display: none;
}

.toggle-pass.hide-pass .ul-icon-eye {
    display: none;
}

.toggle-pass.hide-pass .ul-icon-eye-off {
    display: block;
}


/* Field error state (must beat .ul-login__form input:not([type="checkbox"]) specificity) */
.ul-login__form .ul-login__field--error input:not([type="checkbox"]) {
    border-color: var(--ul-color-error) !important;
}


/* ============================================================
 * Content block (minimal typography for read-only biography)
 * ============================================================ */
.content--block > *:first-child { margin-top: 0 !important; }
.content--block > *:last-child { margin-bottom: 0 !important; }

.content--block h1,
.content--block h2,
.content--block h3,
.content--block h4,
.content--block h5,
.content--block h6 {
    margin-top: 48px;
    margin-bottom: 16px;
}

.content--block p {
    margin-bottom: 16px;
}

.content--block a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.content--block a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    height: 1.5px;
    background: currentColor;
}


/* Profile view labels (read-only mode uses .ul-profile__label instead of <label>) */
.ul-profile__field label,
.ul-profile__field .ul-profile__label {
    display: block;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-primary-dark);
    margin: 0 0 6px;
}

/* Overrides requested for profile view typography */
.ul-profile__field .ul-profile__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}