/*
 * VIPelanlar — Components
 * ---------------------------------------------------------------
 * Reusable UI components shared across pages. Every class here is
 * designed to be reused unmodified in later phases (Search, listing
 * detail, create/edit, account) rather than re-invented per page.
 */

/* ============================= Buttons ============================= */

.vip-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vip-space-2xs);
    min-height: 44px;
    padding: 0 var(--vip-space-sm);
    border: 1px solid transparent;
    border-radius: var(--vip-radius-sm);
    background: var(--vip-color-surface-secondary);
    color: var(--vip-color-text);
    font-size: var(--vip-text-base);
    font-weight: var(--vip-weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--vip-duration-fast) var(--vip-ease),
        border-color var(--vip-duration-fast) var(--vip-ease),
        color var(--vip-duration-fast) var(--vip-ease),
        box-shadow var(--vip-duration-fast) var(--vip-ease);
}

.vip-button:hover { background: var(--vip-color-border); text-decoration: none; }

.vip-button-primary {
    background: var(--vip-color-primary);
    border-color: var(--vip-color-primary);
    color: var(--vip-color-text-on-primary);
}

.vip-button-primary:hover { background: var(--vip-color-primary-hover); border-color: var(--vip-color-primary-hover); }
.vip-button-primary:active { background: var(--vip-color-primary-active); }

.vip-button-secondary {
    background: var(--vip-color-surface);
    border-color: var(--vip-color-border-strong);
    color: var(--vip-color-text);
}

.vip-button-secondary:hover { background: var(--vip-color-surface-secondary); }

.vip-button-ghost {
    background: transparent;
    color: var(--vip-color-primary);
}

.vip-button-ghost:hover { background: var(--vip-color-primary-soft); }

.vip-button-danger { background: var(--vip-color-danger); border-color: var(--vip-color-danger); color: #fff; }

.vip-button-sm { min-height: 36px; padding: 0 var(--vip-space-xs); font-size: var(--vip-text-sm); }
.vip-button-lg { min-height: 50px; padding: 0 var(--vip-space-md); font-size: var(--vip-text-md); }
.vip-button-block { width: 100%; }
.vip-button:disabled { opacity: .55; cursor: not-allowed; }

/* ============================= Form controls ========================= */

.vip-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--vip-space-sm); }

.vip-field label, .vip-label {
    font-size: var(--vip-text-sm);
    font-weight: var(--vip-weight-semibold);
    color: var(--vip-color-text);
}

.vip-field-hint { font-size: var(--vip-text-xs); color: var(--vip-color-text-muted); }

.vip-input, .vip-select, .vip-textarea,
.vip-theme input[type="text"], .vip-theme input[type="search"],
.vip-theme input[type="email"], .vip-theme input[type="tel"],
.vip-theme input[type="password"], .vip-theme input[type="number"],
.vip-theme select, .vip-theme textarea {
    width: 100%;
    min-height: 46px;
    padding: 0 var(--vip-space-xs);
    background: var(--vip-color-surface);
    border: 1px solid var(--vip-color-border-strong);
    border-radius: var(--vip-radius-sm);
    color: var(--vip-color-text);
    font-size: var(--vip-text-md);
    transition: border-color var(--vip-duration-fast) var(--vip-ease), box-shadow var(--vip-duration-fast) var(--vip-ease);
}

.vip-theme textarea { min-height: 120px; padding-block: var(--vip-space-2xs); resize: vertical; }

.vip-theme input:hover, .vip-theme select:hover, .vip-theme textarea:hover { border-color: var(--vip-color-border-strong); }

.vip-theme input:focus, .vip-theme select:focus, .vip-theme textarea:focus {
    outline: none;
    border-color: var(--vip-color-primary);
    box-shadow: 0 0 0 3px var(--vip-color-primary-soft);
}

.vip-theme input::placeholder, .vip-theme textarea::placeholder { color: var(--vip-color-text-light); }

.vip-field-error .vip-input,
.vip-field-error input, .vip-field-error select, .vip-field-error textarea {
    border-color: var(--vip-color-danger);
}

.vip-field-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--vip-text-xs);
    font-weight: var(--vip-weight-medium);
    color: var(--vip-color-danger);
}

.vip-checkbox-row, .vip-radio-row { display: flex; align-items: flex-start; gap: var(--vip-space-2xs); font-size: var(--vip-text-sm); }
.vip-checkbox-row input, .vip-radio-row input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; flex-shrink: 0; }

/* ============================= Badges / status chips ================== */

.vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 0 var(--vip-space-2xs);
    border-radius: var(--vip-radius-full);
    font-size: var(--vip-text-xs);
    font-weight: var(--vip-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.vip-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.vip-badge-neutral { background: var(--vip-color-surface-secondary); color: var(--vip-color-text-muted); }
.vip-badge-success { background: var(--vip-color-success-soft); color: var(--vip-color-success); }
.vip-badge-warning { background: var(--vip-color-warning-soft); color: var(--vip-color-warning); }
.vip-badge-danger { background: var(--vip-color-danger-soft); color: var(--vip-color-danger); }
.vip-badge-accent { background: var(--vip-color-accent-soft); color: var(--vip-color-accent); }

/* Promoted/VIP labels sit on card media, no dot indicator needed */
.vip-badge-vip {
    background: var(--vip-color-accent);
    color: var(--vip-color-text-on-accent);
}

.vip-badge-vip::before { display: none; }

/* ============================= Containers / cards ===================== */

.vip-panel {
    background: var(--vip-color-surface);
    border: 1px solid var(--vip-color-border);
    border-radius: var(--vip-radius-md);
    padding: var(--vip-space-md);
}

.vip-category-card, .vip-listing-card {
    background: var(--vip-color-surface);
    border: 1px solid var(--vip-color-border);
    border-radius: var(--vip-radius-md);
    transition: border-color var(--vip-duration-base) var(--vip-ease), box-shadow var(--vip-duration-base) var(--vip-ease), transform var(--vip-duration-base) var(--vip-ease);
}

.vip-category-card {
    display: flex;
    align-items: center;
    gap: var(--vip-space-xs);
    padding: var(--vip-space-sm);
    color: var(--vip-color-text);
    text-decoration: none;
    font-weight: var(--vip-weight-semibold);
}

.vip-category-card span[aria-hidden] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--vip-radius-sm);
    background: var(--vip-color-primary-soft);
    font-size: 1.1rem;
}

.vip-category-card:hover, .vip-listing-card:hover {
    border-color: var(--vip-color-border-strong);
    box-shadow: var(--vip-shadow-sm);
}

.vip-listing-card { position: relative; overflow: hidden; display: flex; flex-direction: column; }

.vip-listing-card-media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--vip-color-surface-secondary);
}

.vip-listing-card-media img { width: 100%; height: 100%; object-fit: cover; }

.vip-card-placeholder { display: block; width: 100%; height: 100%; background: var(--vip-color-surface-secondary); }

.vip-listing-card-body { display: flex; flex-direction: column; gap: 2px; padding: var(--vip-space-xs); flex: 1; }

.vip-listing-card h3 { font-size: var(--vip-text-base); font-weight: var(--vip-weight-semibold); line-height: var(--vip-leading-snug); margin: 0; }
.vip-listing-card h3 a { color: inherit; text-decoration: none; }
.vip-listing-card h3 a:hover { text-decoration: underline; }

.vip-listing-price {
    font-size: var(--vip-text-lg);
    font-weight: var(--vip-weight-black);
    color: var(--vip-color-text);
    margin: 0 0 2px;
}

.vip-card-attributes {
    display: flex;
    gap: 4px var(--vip-space-2xs);
    margin: 4px 0 0;
    list-style: none;
    flex-wrap: wrap;
}

.vip-card-attributes li { color: var(--vip-color-text-muted); font-size: var(--vip-text-xs); }
.vip-card-attributes li:not(:last-child)::after { content: "\2022"; margin-left: var(--vip-space-2xs); color: var(--vip-color-text-light); }

.vip-card-meta { color: var(--vip-color-text-light); font-size: var(--vip-text-xs); margin-top: 6px; }

.vip-listing-card-title {
    /* Long AZ/RU titles: clamp to 2 lines instead of stretching card height unevenly across a grid row */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(var(--vip-text-base) * var(--vip-leading-snug) * 2);
}

.vip-listing-card-badge {
    position: absolute;
    top: var(--vip-space-2xs);
    left: var(--vip-space-2xs);
    z-index: 1;
}

.vip-card-meta { display: flex; flex-wrap: wrap; gap: 2px var(--vip-space-2xs); align-items: baseline; }
.vip-card-location { min-width: 0; overflow-wrap: anywhere; }
.vip-card-date { color: var(--vip-color-text-light); flex-shrink: 0; }
.vip-card-date::before { content: "\2022"; margin-right: var(--vip-space-2xs); }

/*
 * Favorite action (D3.10): overlaid on the card media, top-right —
 * discoverable without competing with price/title, comfortably tappable
 * (44px), visually secondary (icon-only) to the listing content below it.
 * Card actions live after the body in source order (unchanged hook
 * placement); position:absolute here only changes where it *looks* like
 * it sits, not the DOM/hook structure the favorite feature relies on.
 */
.vip-card-actions {
    position: absolute;
    top: var(--vip-space-2xs);
    right: var(--vip-space-2xs);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--vip-space-2xs);
}

.vip-favorite-form { display: contents; }

.vip-favorite-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--vip-radius-full);
    background: var(--vip-color-surface);
    box-shadow: var(--vip-shadow-sm);
    color: var(--vip-color-text-muted);
    text-decoration: none;
    cursor: pointer;
    /* Icon-only presentation; the real button/link text (t('favorite.add') etc.)
       stays in the DOM for its accessible name, just visually collapsed. */
    font-size: 0;
    line-height: 1;
}

.vip-favorite-control::before {
    content: "\2661";
    font-size: 1.15rem;
}

.vip-favorite-control[aria-pressed="true"] {
    color: var(--vip-color-danger);
}

.vip-favorite-control[aria-pressed="true"]::before { content: "\2665"; }

.vip-favorite-control:hover { background: var(--vip-color-surface); box-shadow: var(--vip-shadow-md); }
.vip-favorite-control:focus-visible { outline: 3px solid var(--vip-color-focus); outline-offset: 2px; }

/* ============================= Category children chips ================ */
/* Used by SearchFrontend's category-landing child-category nav (D3.3) */

.vip-category-children {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vip-space-2xs);
    margin-bottom: var(--vip-space-md);
}

.vip-category-children a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--vip-space-sm);
    border-radius: var(--vip-radius-full);
    background: var(--vip-color-primary-soft);
    color: var(--vip-color-primary);
    font-size: var(--vip-text-sm);
    font-weight: var(--vip-weight-semibold);
    text-decoration: none;
}

.vip-category-children a:hover { background: var(--vip-color-primary-soft-strong); text-decoration: none; }

/* ============================= Category/Location picker (core-plugin UI)
 * ---------------------------------------------------------------------
 * CategoryPicker/LocationPicker (vipelanlar-core) ship their own inline
 * <style> with hardcoded colors so they work standalone. Per D3.6/D3.7
 * they are reused unmodified — these rules only harmonize their look
 * with the token system via higher selector specificity (two classes
 * beats their single-class rules regardless of stylesheet/inline order),
 * without touching CategoryPicker.php/LocationPicker.php. ==================== */

.vip-theme .vip-picker-results {
    border-color: var(--vip-color-border-strong);
    border-radius: var(--vip-radius-sm);
    box-shadow: var(--vip-shadow-md);
}

.vip-theme .vip-picker-option {
    border-bottom-color: var(--vip-color-border);
    font-size: var(--vip-text-base);
}

.vip-theme .vip-picker-option:hover,
.vip-theme .vip-picker-option:focus,
.vip-theme .vip-picker-option[aria-selected="true"] {
    background: var(--vip-color-primary-soft);
}

.vip-theme .vip-picker-path { color: var(--vip-color-text-muted); }

.vip-theme .vip-category-picker input[type="search"],
.vip-theme .vip-location-picker input[type="search"] {
    min-height: 46px;
}

.vip-theme .vip-picker-clear {
    border: 1px solid var(--vip-color-border-strong);
    border-radius: var(--vip-radius-sm);
    background: var(--vip-color-surface);
    color: var(--vip-color-text);
}

.vip-theme .vip-picker-clear:hover { background: var(--vip-color-surface-secondary); }

/* ============================= Breadcrumbs ============================ */

.vip-breadcrumbs { margin: var(--vip-space-md) auto; }

.vip-breadcrumbs ol {
    display: flex;
    gap: 6px;
    list-style: none;
    flex-wrap: wrap;
    font-size: var(--vip-text-sm);
    color: var(--vip-color-text-muted);
}

.vip-breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.vip-breadcrumbs a { color: var(--vip-color-text-muted); text-decoration: none; }
.vip-breadcrumbs a:hover { color: var(--vip-color-primary); text-decoration: underline; }
.vip-breadcrumbs [aria-current="page"] { color: var(--vip-color-text); font-weight: var(--vip-weight-medium); }

/* ============================= Empty / error states ==================== */

.vip-empty {
    color: var(--vip-color-text-muted);
    text-align: center;
    padding: var(--vip-space-xl) var(--vip-space-md);
    background: var(--vip-color-surface);
    border: 1px dashed var(--vip-color-border-strong);
    border-radius: var(--vip-radius-md);
}

.vip-not-found { padding-block: var(--vip-space-2xl); text-align: center; }
.vip-not-found form { display: flex; flex-wrap: wrap; gap: var(--vip-space-2xs); max-width: 420px; margin: var(--vip-space-md) auto; }
/* Kept in the accessibility tree (not display:none) so the input keeps
   an accessible name — visually collapsed since the placeholder text
   in the search field already conveys purpose to sighted users. */
.vip-not-found form label { flex-basis: 100%; }

/* ============================= Misc shared (listing detail / seller) === */
/* Kept intact for Phase D4 — styled here only so nothing looks broken now */

.vip-listing-detail, .vip-seller { margin-block: var(--vip-space-md); }

.vip-listing-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--vip-space-2xs); }
.vip-listing-gallery img { width: 100%; height: auto; border-radius: var(--vip-radius-md); }

.vip-listing-detail dl { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 6px var(--vip-space-md); }
.vip-listing-detail dt { font-weight: var(--vip-weight-semibold); color: var(--vip-color-text-muted); }
.vip-listing-detail dd { margin: 0; }

.vip-listing-contact, .vip-listing-engagement { display: flex; gap: var(--vip-space-2xs); flex-wrap: wrap; margin-block: var(--vip-space-sm); }

.vip-seller-card, .vip-similar-listings {
    margin-top: var(--vip-space-lg);
    padding: var(--vip-space-md);
    background: var(--vip-color-surface);
    border: 1px solid var(--vip-color-border);
    border-radius: var(--vip-radius-md);
}

.vip-seller-card img { border-radius: 50%; width: 64px; height: 64px; object-fit: cover; }
.vip-seller-card p { margin: 4px 0; }
.vip-seller-card a { color: var(--vip-color-primary); font-weight: var(--vip-weight-semibold); }
.vip-seller .vip-listing-grid { margin-top: var(--vip-space-md); }

@media (max-width: 767px) {
    .vip-listing-detail dl { grid-template-columns: 1fr; }
}