/* PP Search — Design System PP, sin dependencia de Adifier */

/* ============================================================
   VARIABLES
   ============================================================ */
.pp-search-wrap {
    --pp-s-bg:          rgba(7,21,37,.88);
    --pp-s-border:      rgba(73,245,208,.24);
    --pp-s-border-focus:rgba(32,224,210,.65);
    --pp-s-radius:      12px;
    --pp-s-radius-btn:  12px;
    --pp-s-text:        #eef6ff;
    --pp-s-muted:       rgba(238,246,255,.68);
    --pp-s-placeholder: rgba(238,246,255,.45);
    --pp-s-btn:         linear-gradient(135deg, #0d8b79, #16c777);
    --pp-s-btn-text:    #ffffff;
    --pp-s-shadow:      0 18px 44px rgba(0,0,0,.24), 0 0 32px rgba(18,164,123,.08);
    --pp-s-gap:         10px;
    --pp-s-h:           52px;
    --pp-s-font:        "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pp-s-input-bg:    #0d3458;
    --pp-s-input-border:rgba(111,170,216,.42);
}

/* ============================================================
   WRAP
   ============================================================ */
.pp-search-wrap {
    width: 100%;
    font-family: var(--pp-s-font);
    color: var(--pp-s-text);
    box-sizing: border-box;
}

.pp-search-wrap *,
.pp-search-wrap *::before,
.pp-search-wrap *::after {
    box-sizing: border-box;
}

/* ============================================================
   FORM
   ============================================================ */
.pp-search-form {
    display: grid;
    grid-template-columns: minmax(140px, .8fr) minmax(160px, 1fr) minmax(140px, .9fr) minmax(140px, .9fr) minmax(110px, auto);
    gap: var(--pp-s-gap);
    align-items: end;
    width: 100%;
    background: var(--pp-s-bg);
    border-radius: 16px;
    padding: 18px 20px 20px;
    box-shadow: var(--pp-s-shadow);
    border: 1px solid var(--pp-s-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Con precio: 6 columnas */
.pp-search-form:has(.pp-search-field--price) {
    grid-template-columns: minmax(130px, .7fr) minmax(150px, .9fr) minmax(130px, .8fr) minmax(130px, .8fr) minmax(200px, 1fr) minmax(110px, auto);
}

/* ============================================================
   FIELD
   ============================================================ */
.pp-search-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pp-search-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--pp-s-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1;
    white-space: nowrap;
}

/* ============================================================
   SELECT — forzar estilo propio contra overrides del mu-plugin
   ============================================================ */
.pp-search-select-wrap {
    position: relative;
    height: var(--pp-s-h);
}

.pp-search-select-wrap::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid #64748b !important;
    border-bottom: 2px solid #64748b !important;
    transform: translateY(-65%) rotate(45deg) !important;
    pointer-events: none !important;
    transition: border-color .15s !important;
    z-index: 2 !important;
}

.pp-search-select-wrap:focus-within::after {
    border-color: #0d8b79 !important;
}

.pp-search-form .pp-search-select,
.pp-search-wrap .pp-search-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 38px 0 14px !important;
    border: 1.5px solid rgba(0,0,0,.10) !important;
    border-radius: var(--pp-s-radius) !important;
    background: #f7fafc !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: var(--pp-s-font) !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color .15s, box-shadow .15s !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    text-align-last: left !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.pp-search-form .pp-search-select:focus,
.pp-search-wrap .pp-search-select:focus {
    border-color: rgba(10,191,87,.55) !important;
    box-shadow: 0 0 0 3px rgba(10,191,87,.12) !important;
    background: #fff !important;
}

.pp-search-form .pp-search-select option,
.pp-search-wrap .pp-search-select option {
    color: #0f172a !important;
    background: #fff !important;
}

.pp-search-form .pp-search-select:disabled,
.pp-search-wrap .pp-search-select:disabled {
    opacity: .42 !important;
    cursor: not-allowed !important;
}

/* ============================================================
   INPUT (precio)
   ============================================================ */
.pp-search-input {
    height: var(--pp-s-h);
    padding: 0 14px;
    border: 1.5px solid var(--pp-s-border);
    border-radius: var(--pp-s-radius);
    background: #f8fafc;
    color: var(--pp-s-text);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--pp-s-font);
    outline: none;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}

.pp-search-input::placeholder {
    color: var(--pp-s-placeholder);
    font-weight: 500;
}

.pp-search-input:focus {
    border-color: var(--pp-s-border-focus);
    box-shadow: 0 0 0 3px rgba(10,191,87,.12);
    background: #fff;
}

.pp-search-price-range {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--pp-s-h);
}

.pp-search-price-sep {
    color: var(--pp-s-muted);
    font-size: 12px;
    flex-shrink: 0;
}

.pp-search-input--price {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
}

/* ============================================================
   BOTÓN
   ============================================================ */
.pp-search-field--submit {
    align-self: end;
}

.pp-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: var(--pp-s-h);
    padding: 0 20px;
    border: none;
    border-radius: var(--pp-s-radius-btn);
    background: var(--pp-s-btn);
    color: var(--pp-s-btn-text);
    font-size: 14px;
    font-weight: 800;
    font-family: var(--pp-s-font);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(10,191,87,.28);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    letter-spacing: .01em;
}

.pp-search-btn:hover,
.pp-search-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(10,191,87,.38);
    filter: brightness(1.04);
}

.pp-search-btn:active {
    transform: scale(.98);
}

.pp-search-btn-icon {
    flex-shrink: 0;
}

/* ============================================================
   VARIANTE COMPACTA
   ============================================================ */
.pp-search-wrap--compact .pp-search-form {
    padding: 12px 14px 14px;
    border-radius: 12px;
    grid-template-columns: 1fr 1fr 1fr minmax(90px, auto);
    --pp-s-h: 44px;
}

.pp-search-wrap--compact .pp-search-label {
    font-size: 10px;
}

.pp-search-wrap--compact .pp-search-btn {
    font-size: 13px;
    padding: 0 14px;
}

/* ============================================================
   HERO CONTEXT — buscador dentro del hero del home
   ============================================================ */
.pp-home-hero-search .pp-search-wrap {
    --pp-s-bg:          #ffffff;
    --pp-s-border:      rgba(0, 0, 0, 0.08);
    --pp-s-border-focus:rgba(10, 191, 87, 0.55);
    --pp-s-text:        #0f172a;
    --pp-s-muted:       #64748b;
    --pp-s-placeholder: #94a3b8;
    --pp-s-shadow:      0 18px 44px rgba(0,0,0,.22);
}

.pp-home-hero-search .pp-search-form {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255,255,255,.22);
}

.pp-home-hero-search .pp-search-label {
    color: #64748b;
}

.pp-home-hero-search .pp-search-select {
    background: #f7fafc;
    color: #071525;
    border-color: rgba(0,0,0,.10);
}

.pp-home-hero-search .pp-search-select option {
    color: #071525;
    background: #fff;
}

.pp-home-hero-search .pp-search-input {
    background: #f7fafc;
    color: #071525;
    border-color: rgba(0,0,0,.10);
}

/* ============================================================
   DARK CONTEXT — cuando se usa sobre fondo oscuro PP
   (agregar clase pp-search-dark al contenedor padre)
   ============================================================ */
.pp-search-dark .pp-search-wrap {
    --pp-s-bg:          rgba(7,21,37,.82);
    --pp-s-border:      rgba(73,245,208,.22);
    --pp-s-border-focus:rgba(32,224,210,.65);
    --pp-s-text:        #ffffff;
    --pp-s-muted:       rgba(238,246,255,.72);
    --pp-s-placeholder: rgba(255,255,255,.48);
    --pp-s-shadow:      0 18px 44px rgba(0,0,0,.24), 0 0 32px rgba(18,164,123,.08);
}

.pp-search-dark .pp-search-form {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(73,245,208,.22);
}

.pp-search-dark .pp-search-label {
    color: rgba(238,246,255,.72);
}

.pp-search-dark .pp-search-select {
    background: rgba(255,255,255,.06);
    color: #fff;
    border-color: rgba(73,245,208,.22);
}

.pp-search-dark .pp-search-select option {
    color: #071525;
    background: #fff;
}

.pp-search-dark .pp-search-input {
    background: rgba(255,255,255,.06);
    color: #fff;
    border-color: rgba(73,245,208,.22);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .pp-search-form,
    .pp-search-form:has(.pp-search-field--price) {
        grid-template-columns: 1fr 1fr;
    }

    .pp-search-field--submit {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .pp-search-form,
    .pp-search-form:has(.pp-search-field--price) {
        grid-template-columns: 1fr;
        padding: 14px;
        border-radius: 12px;
        gap: 8px;
    }

    .pp-search-price-range {
        flex-direction: column;
        height: auto;
        gap: 8px;
    }

    .pp-search-input--price {
        width: 100%;
        height: var(--pp-s-h);
        flex: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-search-btn,
    .pp-search-select,
    .pp-search-input {
        transition: none !important;
    }
}