/*
 * Eros360 — ACADP Form & Archive Overrides
 * Obiettivi: form compatti, multi-colonna responsivi, palette Eros360.
 * Caricato dopo il CSS ACADP (priority 25 in functions.php).
 *
 * Breakpoints usati:
 *   ≥ 480px  → sm  (2 colonne nei form)
 *   ≥ 768px  → md  (3 colonne nel search, pannelli allargati)
 */

/* ═══════════════════════════════════════════════════════════════
   0. CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════ */
.acadp {
    --e-gap-form:   0.875rem;   /* gap tra field nel form */
    --e-gap-panel:  0.75rem;    /* padding interno pannelli */
    --e-radius:     20px;
    --e-border:     #d1bdb9;    /* bordo input, panel */
    --e-bg-panel:   #fff5f0;    /* panel header */
    --e-bg-input:   #ffffff;
    --e-text:       #4a2520;
    --e-primary:    #833830;
    --e-accent:     #f06490;
    --e-focus:      #833830;
    --e-focus-ring: rgba(131, 56, 48, 0.25);
}


/* ═══════════════════════════════════════════════════════════════
   1. INPUT / SELECT / TEXTAREA — più compatti
   ═══════════════════════════════════════════════════════════════ */
.acadp .acadp-form-input,
.acadp .acadp-form-select,
.acadp .acadp-form-textarea,
.acadp .acadp-form-control:not([type="checkbox"]):not([type="radio"]) {
    padding:          0.375rem 0.625rem;
    font-size:        0.875rem;
    line-height:      1.45;
    border-color:     var(--e-border);
    border-radius:    var(--e-radius);
    background-color: var(--e-bg-input);
    color:            var(--e-text);
    transition:       border-color .15s, box-shadow .15s;
}

.acadp .acadp-form-input:focus,
.acadp .acadp-form-select:focus,
.acadp .acadp-form-textarea:focus,
.acadp .acadp-form-control:focus {
    border-color:  var(--e-focus);
    box-shadow:    0 0 0 3px var(--e-focus-ring);
    outline:       none;
}

/* ── Uniforma i dropdown: custom (input[text]) e native (<select>) ──────────
   Il custom dropdown riceve Bootstrap "form-control" che impone height:calc(...)
   rendendolo più alto del native select. Normalizziamo l'altezza su entrambi
   tramite padding + line-height, senza height esplicita.                       */

/* Il web component acadp-dropdown-terms riceve padding dalla regola base
   (.acadp .acadp-form-control) e si allarga. Azzeriamo padding/border sul
   wrapper esterno e lasciamo che l'input interno determini l'altezza. */
.acadp acadp-dropdown-terms {
    padding:    0 !important;
    border:     none !important;
    background: transparent !important;
    display:    block;
}

/* Input interno: stesso aspetto del native select */
.acadp acadp-dropdown-terms .acadp-dropdown-select input[type=text] {
    height:      auto;
    padding:     0.375rem 2.5rem 0.375rem 0.625rem;
    font-size:   0.875rem;
    line-height: 1.45;
    box-sizing:  border-box;
}

/* Native <select>: stesso aspetto del custom dropdown */
.acadp select.acadp-form-select,
.acadp select.acadp-form-control {
    -webkit-appearance:  none;
    appearance:          none;
    height:              auto;
    padding:             0.375rem 2.5rem 0.375rem 0.625rem;
    font-size:           0.875rem;
    line-height:         1.45;
    box-sizing:          border-box;
    cursor:              pointer;
    background-image:    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat:   no-repeat;
    background-position: right 0.5rem center;
    background-size:     1.5em 1.5em;
    text-overflow:       ellipsis;
}

.acadp .acadp-form-textarea {
    min-height: 100px;
    resize:     vertical;
}

.acadp .acadp-form-label {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--e-text);
    line-height: 1.3;
}

.acadp .acadp-form-required {
    color: var(--e-accent);
}

/* checkbox e radio: label più compatta */
.acadp .acadp-form-checkbox-group label,
.acadp .acadp-form-radio-group label {
    font-size:   0.8125rem;
    gap:         0.375rem;
    line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════
   2. PANNELLI — padding ridotto, colori Eros360
   ═══════════════════════════════════════════════════════════════ */
.acadp .acadp-panel {
    border-color:  var(--e-border);
    border-radius: var(--e-radius);
    overflow:      hidden;
}

/* Il panel con il dropdown categorie deve permettere all'elenco
   assoluto di uscire fuori dal proprio confine. */
.acadp .acadp-panel:has(acadp-dropdown-terms) {
    overflow: visible;
}
.acadp .acadp-panel:has(acadp-dropdown-terms) .acadp-panel-header {
    border-radius: var(--e-radius) var(--e-radius) 0 0;
    overflow:      hidden;
}

.acadp .acadp-panel-header {
    padding:         0.5rem var(--e-gap-panel);
    font-size:       0.8125rem;
    font-weight:     700;
    letter-spacing:  0.03em;
    text-transform:  uppercase;
    color:           var(--e-primary);
    background:      var(--e-bg-panel);
    border-color:    var(--e-border);
}

.acadp .acadp-panel-body {
    padding: var(--e-gap-panel);
}

@media (min-width: 768px) {
    .acadp .acadp-panel-body {
        padding: var(--e-gap-panel) 1rem;
    }
}

/* gap tra field nei panel body */
.acadp .acadp-panel-body.acadp-flex.acadp-flex-col,
.acadp .acadp-wrapper.acadp-flex.acadp-flex-col {
    gap: var(--e-gap-form);
}

/* gap tra pannelli */
.acadp .acadp-wrapper.acadp-flex.acadp-flex-col {
    gap: 0.875rem;
}


/* ═══════════════════════════════════════════════════════════════
   3. LISTING FORM — layout compatto, 2 colonne, design system unificato
   ═══════════════════════════════════════════════════════════════ */

/* ── Gap ridotto tra pannelli ── */
.acadp-listing-form .acadp-wrapper.acadp-flex.acadp-flex-col {
    gap: 0.625rem;
}

/* ── Panel body gap unificato con il search form ── */
.acadp-listing-form .acadp-panel-body.acadp-flex.acadp-flex-col {
    gap: var(--e-gap-form);
}

/* ── LISTING DETAILS: campi custom su 2 colonne ── */
#acadp-custom-fields-listings.acadp-flex.acadp-flex-col {
    gap: var(--e-gap-form);
}

@media (min-width: 480px) {
    #acadp-custom-fields-listings.acadp-flex.acadp-flex-col {
        display:               grid;
        grid-template-columns: repeat(2, 1fr);
        gap:                   var(--e-gap-form);
        align-items:           start;
    }

    /* Solo le textarea (campo Orari) → tutta larghezza */
    #acadp-custom-fields-listings .acadp-form-group:has(textarea) {
        grid-column: 1 / -1;
    }
}

/* ── CONTACT DETAILS: griglia unificata ──
   Struttura: [grid 2-col address/location/zip/phone] [email] [website] [map]
   Su desktop: email + website affiancati, map full-width             ── */
.acadp .acadp-grid.acadp-grid-cols-1 {
    gap: var(--e-gap-form);
}

@media (min-width: 480px) {
    #acadp-panel-contact-details .acadp-panel-body.acadp-flex.acadp-flex-col {
        display:               grid;
        grid-template-columns: repeat(2, 1fr);
        gap:                   var(--e-gap-form);
        align-items:           start;
    }

    /* Griglia interna 4 campi (address/location/zip/phone) → full width */
    #acadp-panel-contact-details .acadp-grid {
        grid-column: 1 / -1;
    }

    /* Mappa e checkbox "nascondi mappa" → full width */
    #acadp-panel-contact-details .acadp-map,
    #acadp-panel-contact-details .acadp-panel-body > label {
        grid-column: 1 / -1;
    }
}

/* ── IMMAGINI: nessun padding extra, tabella compatta ── */
#acadp-panel-images .acadp-panel-body,
#acadp-panel-images .acadp-overflow-x-auto {
    padding: 0;
}

#acadp-panel-images .acadp-panel-footer {
    padding: 0.5rem var(--e-gap-panel);
}

#acadp-panel-images table td {
    padding: 0.375rem 0.5rem;
}

/* ── COMPLETE LISTING: panel minimalista ── */
.acadp-listing-form .acadp-panel:last-of-type .acadp-panel-header {
    display: none; /* "Complete listing" header non aggiunge valore */
}

.acadp-listing-form .acadp-panel:last-of-type .acadp-panel-body {
    padding-top: var(--e-gap-panel);
}

/* Bottoni azione: Submit prominente, Save Draft secondario */
#acadp-button-group {
    gap: 0.5rem;
    margin-top: 0.25rem;
}

#acadp-button-group .acadp-button-submit {
    background-color: var(--e-primary);
    border-color:     var(--e-primary);
    color:            #fff;
    padding:          0.5rem 1.5rem;
    font-weight:      600;
}

#acadp-button-group .acadp-button-submit:hover {
    background-color: #6e2e28;
    border-color:     #6e2e28;
}

/* ── DESCRIPTION: editor meno alto ── */
.acadp-listing-form #wp-description-editor-container .wp-editor-area,
.acadp-listing-form textarea[name="description"] {
    min-height: 120px !important;
    height:     120px !important;
}


/* ═══════════════════════════════════════════════════════════════
   4. SEARCH FORM — layout multi-colonna
   ═══════════════════════════════════════════════════════════════ */

/* Override flex → grid sul form verticale */
.acadp-search-form form.acadp-flex.acadp-flex-col {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--e-gap-form);
    align-items:           start;
}

@media (min-width: 480px) {
    .acadp-search-form form.acadp-flex.acadp-flex-col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Keyword (primo campo) e bottoni (ultimo) → full width */
    .acadp-search-form form > .acadp-form-group:first-child,
    .acadp-search-form form > .acadp-form-group:last-child {
        grid-column: 1 / -1;
    }

    /* Placeholder AJAX custom fields → nascosto, non occupa spazio */
    .acadp-search-form .acadp-custom-fields {
        display: none;
    }
}

@media (min-width: 768px) {
    .acadp-search-form form.acadp-flex.acadp-flex-col {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Keyword e bottoni → full width su 3 colonne */
    .acadp-search-form form > .acadp-form-group:first-child,
    .acadp-search-form form > .acadp-form-group:last-child {
        grid-column: 1 / -1;
    }
}

/* Checkbox group: opzioni su riga singola con wrap */
.acadp-search-form .acadp-form-checkbox-group {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.25rem 0.625rem;
}


/* ═══════════════════════════════════════════════════════════════
   5. BOTTONI — colori Eros360
   ═══════════════════════════════════════════════════════════════ */
.acadp .acadp-button-primary {
    background-color: var(--e-primary);
    border-color:     var(--e-primary);
    color:            #ffffff;
    font-size:        0.875rem;
    padding:          0.4rem 1rem;
    border-radius:    var(--e-radius);
    transition:       background-color .15s, border-color .15s;
}

.acadp .acadp-button-primary:hover,
.acadp .acadp-button-primary:focus {
    background-color: #6e2e28;
    border-color:     #6e2e28;
}

.acadp .acadp-button-secondary {
    background-color: transparent;
    border-color:     var(--e-primary);
    color:            var(--contrast);
    font-size:        0.875rem;
    padding:          0.4rem 1rem;
    border-radius:    var(--e-radius);
    transition:       background-color .15s, border-color .15s, color .15s;
}

.acadp .acadp-button-secondary:hover,
.acadp .acadp-button-secondary:focus {
    background-color: var(--accent);
    border-color:     var(--accent);
    color:            #ffffff;
}


/* ═══════════════════════════════════════════════════════════════
   6. STATUS MESSAGES
   ═══════════════════════════════════════════════════════════════ */
.acadp .acadp-alert {
    font-size:    0.875rem;
    padding:      0.5rem 0.75rem;
    border-radius: var(--e-radius);
}

.acadp .acadp-alert-success {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

.acadp .acadp-alert-error {
    background: #fff5f0;
    border-color: var(--e-accent);
    color: var(--e-primary);
}


/* ═══════════════════════════════════════════════════════════════
   7. MAPPA — z-index e altezza
   ═══════════════════════════════════════════════════════════════ */

/* Isola lo stacking context di Leaflet: i suoi z-index interni
   rimangono confinati dentro .acadp-map e non si sovrappongono
   al dropdown di navigazione. */
.acadp-map {
    isolation: isolate;
}


/* Override aspectratio 16:9 (acadp-aspect-video) con altezza fissa */
.acadp-listing-form .acadp-map.acadp-aspect-video {
    aspect-ratio: unset;
    height:       220px;
    min-height:   unset;
}

/* ═══════════════════════════════════════════════════════════════
   8. MANAGE LISTINGS — tabella compatta
   ═══════════════════════════════════════════════════════════════ */
.acadp-manage-listings .acadp-panel-body {
    padding: 0;
}

.acadp-manage-listings table {
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════
   8. RANGE SLIDER (Età)
   ═══════════════════════════════════════════════════════════════ */

/* Output testuale: "18 – 45 anni" */
.e-rs__output {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--e-primary);
    margin-bottom: 0.5rem;
}

/* Track container */
.e-rs__track {
    position:   relative;
    height:     4px;
    background: var(--e-border);
    border-radius: 2px;
    margin: 0.75rem 0 0.25rem;
}

/* Fill colorato tra i due handle */
.e-rs__fill {
    position:      absolute;
    top:           0;
    height:        100%;
    background:    var(--e-primary);
    border-radius: 2px;
    pointer-events: none;
}

/* I due input range sovrapposti sul track */
.e-rs__thumb {
    position:  absolute;
    top:       50%;
    transform: translateY(-50%);
    width:     100%;
    height:    4px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    margin: 0;
    padding: 0;
    border: none;
}

/* Thumb (manopola) */
.e-rs__thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all;
    width:         16px;
    height:        16px;
    border-radius: 50%;
    background:    var(--e-primary);
    border:        2px solid #ffffff;
    box-shadow:    0 1px 4px rgba(0,0,0,.25);
    cursor:        pointer;
    transition:    transform .1s;
}
.e-rs__thumb::-moz-range-thumb {
    pointer-events: all;
    width:         16px;
    height:        16px;
    border-radius: 50%;
    background:    var(--e-primary);
    border:        2px solid #ffffff;
    box-shadow:    0 1px 4px rgba(0,0,0,.25);
    cursor:        pointer;
}

.e-rs__thumb:focus::-webkit-slider-thumb,
.e-rs__thumb:hover::-webkit-slider-thumb {
    transform: scale(1.2);
    background: #6e2e28;
}
.e-rs__thumb:focus::-moz-range-thumb,
.e-rs__thumb:hover::-moz-range-thumb {
    background: #6e2e28;
}

/* Z-index: handle minimo sopra se è più a destra del massimo */
.e-rs__thumb--hi {
    z-index: 2;
}
.e-rs__thumb--lo {
    z-index: 3;
}

/* ─────────────────────────────────────────────────────────────── */

.acadp-manage-listings table th,
.acadp-manage-listings table td {
    padding: 0.5rem 0.75rem;
}