/* ============================================================
   DAA Artist Registry - UM + ACF form skin
   Now shipped BY THE PLUGIN (enqueued site-wide on the front end via
   DAA_AD_Frontend_Form::enqueue_public_assets), so it no longer needs to be
   pasted into Elementor -> Site Settings -> Custom CSS. Inputs matched to Figma
   (node 2026-1684). All rules !important. Uses Elementor global CSS variables.
   ============================================================ */

/* ---------- BUTTONS (UM submit + ACF submit) ---------- */
/* NOTE: `.daa-artist-form ...` selectors are required for the "Edit My Listing"
   UM account tab. There the ACF form is nested inside UM's own <form>, so the
   browser drops the inner <form class="acf-form"> and any `.acf-form`-keyed rule
   stops matching. Our `.daa-artist-form` wrapper is present in both places. */
.um .um-button,
.um-form input[type="submit"].um-button,
.acf-form .acf-button.button-primary,
.acf-form input[type="submit"],
.daa-artist-form .acf-button.button-primary,
.daa-artist-form input[type="submit"] {
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    font-style: var(--e-global-typography-accent-font-style) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
    color: var(--e-global-color-6d2da9b) !important;
    fill: var(--e-global-color-6d2da9b) !important;
    background-color: var(--e-global-color-secondary) !important; /* Fuchsia Pink */
    border: none !important;
    border-radius: 50px !important;
    padding: 17px 50px !important;
    transition: background-color .25s ease, color .25s ease !important;
    cursor: pointer !important;
}

.um .um-button:hover,
.um-form input[type="submit"].um-button:hover,
.acf-form .acf-button.button-primary:hover,
.acf-form input[type="submit"]:hover,
.daa-artist-form .acf-button.button-primary:hover,
.daa-artist-form input[type="submit"]:hover {
    background-color: var(--e-global-color-primary) !important; /* Very Peri */
    color: var(--e-global-color-6d2da9b) !important;
}

/* Optional: UM secondary button as an outline pill */
.um .um-button.um-alt {
    background-color: transparent !important;
    color: var(--e-global-color-primary) !important;
    border: 2px solid var(--e-global-color-primary) !important;
    border-radius: 50px !important;
    padding: 15px 48px !important;
}

/* ---------- INPUTS (UM + ACF) - Figma node 2026-1684 ---------- */
.um .um-form input[type="text"],
.um .um-form input[type="email"],
.um .um-form input[type="password"],
.um .um-form input[type="tel"],
.um .um-form input[type="number"],
.um .um-form input[type="url"],
.um .um-form input[type="search"],
.um .um-form textarea,
.um .um-form select,
.um-form-field,
.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="tel"],
.acf-form .acf-input textarea,
.acf-form .acf-input select,
.daa-artist-form .acf-input input[type="text"],
.daa-artist-form .acf-input input[type="email"],
.daa-artist-form .acf-input input[type="url"],
.daa-artist-form .acf-input input[type="number"],
.daa-artist-form .acf-input input[type="password"],
.daa-artist-form .acf-input input[type="tel"],
.daa-artist-form .acf-input input[type="search"],
.daa-artist-form .acf-input textarea,
.daa-artist-form .acf-input select {
    font-family: var(--e-global-typography-accent-font-family), "Myriad Pro", Sans-serif !important;
    font-size: 18.2px !important;        /* Figma */
    font-weight: 400 !important;         /* Figma: Regular */
    line-height: 28px !important;        /* Figma */
    /* text-transform intentionally omitted so typed text isn't uppercased */
    color: var(--e-global-color-text) !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    padding: 24px 24px !important;
    box-shadow: none !important;
    transition: border-color .2s ease !important;
    height: 76px !important;
}

/* ---------- INPUT FOCUS / ACTIVE (2px Granite Green) ---------- */
.um .um-form input:focus,
.um .um-form textarea:focus,
.um .um-form select:focus,
.um-form-field:focus,
.acf-form .acf-input input:focus,
.acf-form .acf-input textarea:focus,
.acf-form .acf-input select:focus,
.daa-artist-form .acf-input input:focus,
.daa-artist-form .acf-input textarea:focus,
.daa-artist-form .acf-input select:focus {
    border: 2px solid var(--e-global-color-db2d7db) !important; /* Granite Green #86A293 */
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .2s ease !important;
}

/* ---------- PLACEHOLDER (Figma: rgba(0,0,0,0.4)) ---------- */
.um .um-form ::placeholder,
.acf-form .acf-input ::placeholder,
.daa-artist-form .acf-input ::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
    opacity: 1 !important;
}

/* ---------- PASSWORD SHOW/HIDE EYE - vertically centered ---------- */
.um .um-field-area-password {
    position: relative !important;
}

/* Keep typed text from sliding under the eye icon */
.um .um-field-area-password input {
    padding-right: 64px !important;
}

.um .um-toggle-password {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    right: 24px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.um .um-toggle-password i {
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* ---------- CHECKBOX ("Keep me signed in", etc.) ---------- */
.um .um-field-checkbox {
    display: flex !important;
    align-items: center !important;
    margin: 0 0 20px 0 !important;   /* little spacing below */
    cursor: pointer !important;
    line-height: 1 !important;
}

/* The box: undo UM's float, center the icon, and space it from the text */
.um .um-field-checkbox .um-field-checkbox-state {
    position: static !important;   /* UM positions this absolutely, bring it into flow */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 10px 0 0 !important;   /* gap before the label */
    line-height: 1 !important;
}

.um .um-field-checkbox .um-field-checkbox-state i {
    font-size: 22px !important;
    line-height: 1 !important;
    display: block !important;
    color: rgba(0, 0, 0, 0.4) !important;   /* unchecked */
}

/* Checked state = on brand */
.um .um-field-checkbox.active .um-field-checkbox-state i {
    color: var(--e-global-color-primary) !important;   /* Very Peri */
}

/* The option text, matches the field labels */
.um .um-field-checkbox .um-field-checkbox-option {
    display: inline-block !important;
    float: none !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
    color: var(--e-global-color-text) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- TERMS & CONDITIONS field ---------- */
.um .um-field-type_terms_conditions {
    margin-top: 8px !important;
}

/* Show Terms / Hide Terms toggle link */
.um .um-field-type_terms_conditions .um-toggle-terms,
.um .um-field-type_terms_conditions .um-hide-terms {
    display: inline-block !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
    color: var(--e-global-color-secondary) !important;   /* Fuchsia */
    text-decoration: underline !important;
    margin: 0 0 14px 0 !important;
    cursor: pointer !important;
}

.um .um-field-type_terms_conditions .um-toggle-terms:hover,
.um .um-field-type_terms_conditions .um-hide-terms:hover {
    color: var(--e-global-color-primary) !important;     /* Very Peri on hover */
}

/* The expandable terms text box */
.um .um-field-type_terms_conditions .um-terms-conditions-content {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    margin: 0 0 14px 0 !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    font-size: 15px !important;
    line-height: 22px !important;
    color: var(--e-global-color-text) !important;
    background: #ffffff !important;
}

/* ============================================================
   UM STRIPE - payment-successful order details + membership page
   ============================================================ */

/* Center the whole receipt and give it a comfortable width. */
.um-stripe-order-details-wrap {
    max-width: 900px !important;
    margin: 0 auto !important;
    text-align: left !important;
}

/* Section headings ("Subscription #", "Order Details"). */
.um-stripe-order-details-wrap h4 {
    font-size: 18px !important;
    margin: 24px 0 12px 0 !important;
    color: var(--e-global-color-text) !important;
}

/* The status/plan/date cards row. */
.um-stripe-order-details {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    border: 0px !important;
}
.um-stripe-order-details .um-stripe-col {
    flex: 1 1 180px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    background: #ffffff !important;
}
.um-stripe-order-details .um-stripe-text-12px {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    opacity: 0.65 !important;
    margin-bottom: 6px !important;
}
.um-stripe-order-details .status.active {
    color: #0a6b1c !important;
    font-weight: 700 !important;
}

/* Order + billing tables. */
.um-stripe-table-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin-top: 12px !important;
}
.um-stripe-order-details-table,
.um-stripe-order-details-billing-table {
    flex: 1 1 340px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}
.um-stripe-order-details-wrap table {
    width: 100% !important;
    border-collapse: collapse !important;
}
.um-stripe-order-details-wrap thead td {
    background: var(--e-global-color-primary) !important; /* Very Peri */
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
}
.um-stripe-order-details-wrap tbody td {
    padding: 12px 16px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    font-size: 14px !important;
}

/* Stripe buttons (Customer Portal / Edit Billing) -> branded pink pill. */
.um-stripe-button,
.um-button.um-stripe-button,
button.um-stripe-button {
    background-color: var(--e-global-color-secondary) !important; /* Fuchsia Pink */
    color: var(--e-global-color-6d2da9b) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 34px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color .25s ease !important;
}
.um-stripe-button:hover,
.um-button.um-stripe-button:hover,
button.um-stripe-button:hover {
    background-color: var(--e-global-color-primary) !important; /* Very Peri */
    color: var(--e-global-color-6d2da9b) !important;
}

/* "Download Invoice & Receipt" link. */
.um-stripe-order-download-links a {
    color: var(--e-global-color-primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Stack the receipt on small screens. */
@media (max-width: 600px) {
    .um-stripe-order-details,
    .um-stripe-table-grid {
        flex-direction: column !important;
    }
}

/* ============================================================
   TEXTAREAS - the input rule above forces a fixed 76px height,
   which flattens multi-line fields (Bio) to a single line. Let
   textareas grow, and give the Bio real room.
   ============================================================ */
.um .um-form textarea,
.acf-form .acf-input textarea,
.daa-artist-form .acf-input textarea {
    height: auto !important;
    min-height: 140px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    line-height: 1.6 !important;
}
.daa-artist-form .acf-field-daa-bio textarea {
    min-height: 200px !important;
}

/* ============================================================
   UM ACCOUNT PAGE - tabs, headings, panels.
   Colors + spacing only. Widths are left to Ultimate Member so
   the responsive (uimob) layout is not disturbed on mobile.
   ============================================================ */

/* Hide the avatar + name + "View profile" meta (desktop + mobile copies). */
.um .um-account-meta {
    display: none !important;
}

/* Username row is hidden by the PLUGIN stylesheet (assets/css/profile-form.css),
   so it applies on deploy without this paste. Rule intentionally not duplicated
   here. */

/* Sidebar nav: comfortable pill rows with a brand hover. */
.um .um-account-side ul li a.um-account-link {
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin-bottom: 6px !important;
    color: var(--e-global-color-text) !important;
    transition: background-color .2s ease, color .2s ease !important;
}
.um .um-account-side ul li a.um-account-link:hover {
    background: rgba(102, 103, 171, 0.08) !important;   /* Very Peri tint */
    color: var(--e-global-color-primary) !important;
}

/* Current tab: filled Very Peri pill, white glyph + label. */
.um .um-account-side ul li a.um-account-link.current {
    background: var(--e-global-color-primary) !important;
    color: #ffffff !important;
}
.um .um-account-side ul li a.um-account-link.current .um-account-icon i,
.um .um-account-side ul li a.um-account-link.current .um-account-title,
.um .um-account-side ul li a.um-account-link.current .um-account-arrow i {
    color: #ffffff !important;
}

/* Tab headings. */
.um .um-account-heading {
    font-family: var(--e-global-typography-primary-font-family), Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--e-global-color-text) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding-bottom: 14px !important;
    margin-bottom: 24px !important;
}
.um .um-account-heading i {
    color: var(--e-global-color-secondary) !important;   /* Fuchsia accent */
    margin-right: 10px !important;
}

/* Field labels inside the account tabs. (Same `.um.um-account` same-element
   caveat as above, so target `.um-account` directly.) */
.um-account .um-field-label label {
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* Billing tab: readable copy above the Customer Portal button. */
.um-stripe-billing-account-tab {
    line-height: 1.7 !important;
}
.um-stripe-billing-account-tab .um-button {
    margin-top: 8px !important;
}

/* Delete tab: give the warning copy some breathing room. */
.um .um-account-tab-delete p {
    line-height: 1.7 !important;
    margin-bottom: 18px !important;
}