/*
 * Musas Del Arte - registro / login / dashboard placeholder
 * Layers on top of theme.css. Reuses UIkit form primitives (uk-input,
 * uk-select, uk-form-*) and the existing ayart- buttons/rule component.
 */

/* These pages have no hero image behind the navbar, so the transparent
   .ayart-navbar (designed to sit over a dark hero, see theme.css) needs a
   solid dark background here for its uk-light (white) text to stay legible. */
body.ayart-solid-nav .ayart-navbar {
    position: relative;
    background: var(--ayart-dark);
}

.ayart-auth-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.ayart-auth-section .uk-container-small {
    width: 100%;
    max-width: 420px;
}

/* intl-tel-input doesn't stretch to its container by default */
.iti {
    width: 100%;
}

.ayart-otp-input {
    font-size: 1.6rem;
    letter-spacing: 0.5rem;
    text-align: center;
    font-family: "Space Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
}

#btn-resend[disabled] {
    color: var(--ayart-muted);
    cursor: default;
}

/* Covers the profile page while its data is being fetched, so the
   editable/read-only markup never flashes before we know which one applies. */
.ayart-profile-loading {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ayart-dark);
    color: #fff;
    opacity: 1;
    transition: opacity .25s ease;
}

.ayart-profile-loading--hidden {
    opacity: 0;
    pointer-events: none;
}

/* Dark profile modals (social links, color picker, add piece), matching the ayart-hero dark theme */
#modal-social-links .uk-modal-dialog,
#modal-color-picker .uk-modal-dialog,
#modal-add-piece .uk-modal-dialog,
#modal-location .uk-modal-dialog,
#modal-profile-settings .uk-modal-dialog {
    background: var(--ayart-dark);
}

#modal-social-links .uk-input,
#modal-color-picker .uk-input,
#modal-add-piece .uk-input,
#modal-add-piece .uk-textarea,
#modal-add-piece .uk-select {
    background: transparent;
    color: #fff;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, .3);
    border-radius: 0;
}

#modal-social-links .uk-input:focus,
#modal-color-picker .uk-input:focus,
#modal-add-piece .uk-input:focus,
#modal-add-piece .uk-textarea:focus,
#modal-add-piece .uk-select:focus {
    outline: none;
    color: #fff;
    border-bottom-color: var(--ayart-hero-tint);
}

#modal-social-links .uk-input::placeholder,
#modal-color-picker .uk-input::placeholder,
#modal-add-piece .uk-input::placeholder,
#modal-add-piece .uk-textarea::placeholder {
    color: rgba(255, 255, 255, .5);
}

#modal-add-piece .uk-select option {
    color: #000;
}

/* Catalog filters/pagination on a light section, so they reuse the same
   underline input shape as the hero fields (ayart-hero-name-input) and the
   user's own personalizable color (--ayart-hero-tint) instead of UIkit's
   boxed defaults / stock blue. */
#Catalogo .uk-input,
#Catalogo .uk-select,
#profiles-list .uk-input,
#profiles-list .uk-select,
#pieces-list .uk-input,
#pieces-list .uk-select {
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(38, 34, 32, .2);
    border-radius: 0;
    color: inherit;
}

#Catalogo .uk-input:focus,
#Catalogo .uk-select:focus,
#profiles-list .uk-input:focus,
#profiles-list .uk-select:focus,
#pieces-list .uk-input:focus,
#pieces-list .uk-select:focus {
    outline: none;
    color: inherit;
    border-bottom-color: var(--ayart-hero-tint);
}

/* Without an explicit z-index this sits behind .ayart-piece-media (also
   position:relative): both are z-index:auto, so paint order falls back to
   DOM order and the cover image (later in the tree) wins. */
.ayart-piece-edit-btn {
    z-index: 1;
}

#Catalogo .ayart-piece-type,
#pieces-list .ayart-piece-type {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ayart-hero-tint) 70%, transparent);
}

#Catalogo .uk-pagination > * > a,
#pieces-list .uk-pagination > * > a {
    color: var(--ayart-muted);
}

#Catalogo .uk-pagination > *:hover > a,
#Catalogo .uk-pagination > .uk-active > a,
#pieces-list .uk-pagination > *:hover > a,
#pieces-list .uk-pagination > .uk-active > a {
    color: var(--ayart-hero-tint);
}

#Catalogo .ayart-piece-price,
#pieces-list .ayart-piece-price {
    color: var(--ayart-hero-tint);
}

/* Status filter as toggle chips instead of a native <select multiple>, which
   looks dated and needs ctrl/cmd+click to pick more than one option. */
.ayart-status-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ayart-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid rgba(38, 34, 32, .2);
    border-radius: 999px;
    font-size: .85rem;
    color: inherit;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ayart-status-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ayart-status-chip:hover {
    border-color: var(--ayart-hero-tint);
}

.ayart-status-chip:has(input:checked) {
    background: var(--ayart-hero-tint);
    border-color: var(--ayart-hero-tint);
    color: #fff;
}

/* Preserves line breaks the owner typed in the description textarea - it's
   set via textContent (see piece.js), so without this the browser's default
   white-space collapses them all into one paragraph. */
#piece-description {
    white-space: pre-line;
}

.ayart-piece-owner-strip {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ayart-piece-owner-strip img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ayart-piece-owner-strip span {
    font-weight: 600;
    color: #1c1c1c;
}

/* Shared with piece.php's detail-page button, not just the dashboard grid. */
.ayart-piece-negotiate-btn:disabled {
    background-color: var(--ayart-hero-grey);
    border-color: var(--ayart-hero-grey);
    color: #fff;
    opacity: 1;
}