/* =========================================================
   Pièces & accessoires
   - listing  : automoto/accessories/index.blade.php  (<main class="amp-svc-page amp-acc-page">)
                builds on services-list.css (hero text, sidebar cards, filter fields, empty state)
   - detail   : automoto/accessories/show.blade.php   (<main class="amp-service-detail-page amp-acc-detail">)
                builds on service-detail.css (sd-* sheet, panels, share modal)
   - wizard   : :is(#je-accessory-create, #je-accessory-edit), builds on annonce-wizard.css
   Cards (.acc-card) and the pager are shared by both pages.
========================================================= */

.amp-acc-page,
.amp-acc-detail,
:is(#je-accessory-create, #je-accessory-edit) {
    --acc-navy: #011e40;
    --acc-navy-2: #0a2d57;
    --acc-orange: #ee5721;
    --acc-orange-dark: #d9481a;
    --acc-orange-soft: #fff3ed;
    --acc-green: #0f7a4b;
    --acc-green-soft: #e8f6ee;
    --acc-text: #334155;
    --acc-muted: #64748b;
    --acc-faint: #94a3b8;
    --acc-line: #e5eaf1;
    --acc-line-soft: #eef2f7;
    --acc-field: #f6f8fb;
}

.amp-acc-page ion-icon,
.amp-acc-detail ion-icon {
    pointer-events: none;
}

.acc-link {
    color: var(--acc-orange);
    font-weight: 700;
    text-decoration: none;
}

.acc-link:hover {
    color: var(--acc-orange-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- listing: shell ---------- */

#site__main.amp-acc-page {
    min-height: calc(100vh - var(--m-top));
}

.amp-acc-page .acc-shell {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.amp-acc-page #acc-results {
    scroll-margin-top: calc(var(--m-top, 70px) + 16px);
}

/* hero: navy, no photo (no spare-part photo in the project), light gear drawing on the right */
.amp-acc-page .acc-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 220px;
    padding: 28px 30px;
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 30%, rgba(238, 87, 33, .22), rgba(238, 87, 33, 0) 42%),
        linear-gradient(120deg, #011e40 0%, #062b57 100%);
    color: #fff;
}

.amp-acc-page .acc-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.amp-acc-page .acc-hero .services-hero-actions {
    margin-top: 18px;
}

.amp-acc-page .acc-hero-art {
    position: absolute;
    right: -30px;
    top: 50%;
    z-index: 0;
    width: 280px;
    height: 280px;
    color: rgba(255, 255, 255, .12);
    transform: translateY(-50%) rotate(12deg);
}

/* results (left) + filters (right, 320px) */
.amp-acc-page .acc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "results filters";
    gap: 24px;
    align-items: start;
}

.amp-acc-page .acc-results-col {
    grid-area: results;
    min-width: 0;
    container-type: inline-size;
}

.amp-acc-page .acc-filter-col {
    grid-area: filters;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.amp-acc-page .section-head {
    margin: 0 0 16px;
    align-items: center;
}

.amp-acc-page .section-head p {
    display: flex;
    align-items: center;
    gap: 5px;
}

.amp-acc-page .section-head p ion-icon {
    color: var(--acc-orange);
}

.amp-acc-page .acc-sort .filter-select {
    width: auto;
    min-width: 170px;
    height: 40px;
    background-color: #fff;
}

/* ---------- listing: filters ---------- */

.amp-acc-page .acc-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: default;
}

.amp-acc-page .acc-filter-toggle ion-icon {
    display: none;
    font-size: 18px;
    color: var(--acc-muted);
    transition: transform .2s ease;
}

.amp-acc-page .acc-filter-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.amp-acc-page .acc-price-input .filter-input {
    padding-left: 12px;
}

.amp-acc-page .filter-select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.amp-acc-page .acc-segmented {
    display: flex;
    padding: 3px;
    border: 1px solid #d9e1ec;
    border-radius: 10px;
    background: var(--acc-field);
}

.amp-acc-page .acc-segmented label {
    flex: 1 1 0;
    margin: 0;
}

.amp-acc-page .acc-segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.amp-acc-page .acc-segmented span {
    display: block;
    padding: 8px 6px;
    border-radius: 8px;
    color: var(--acc-muted);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.amp-acc-page .acc-segmented input:checked + span {
    background: #fff;
    color: var(--acc-navy);
    box-shadow: 0 1px 3px rgba(1, 30, 64, .12);
}

.amp-acc-page .acc-segmented input:focus-visible + span {
    outline: 2px solid var(--acc-orange);
    outline-offset: 1px;
}

.amp-acc-page .acc-about p {
    color: var(--acc-muted);
    line-height: 1.6;
}

/* ---------- cards (listing + similar) ---------- */

.acc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@container (min-width: 460px) {
    .acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 720px) {
    .acc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* browsers without container queries: viewport breakpoints */
@supports not (container-type: inline-size) {
    @media (min-width: 640px) { .acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1280px) { .acc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}

.acc-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e5eaf1;
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.acc-card:hover {
    border-color: #cfd9e6;
    box-shadow: 0 6px 18px rgba(1, 30, 64, .07);
    transform: translateY(-2px);
    color: inherit;
}

.acc-card:focus-visible {
    outline: 2px solid #ee5721;
    outline-offset: 2px;
}

.acc-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e9eef4;
}

.acc-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.acc-card:hover .acc-card-media img {
    transform: scale(1.03);
}

.acc-card-category,
.acc-card-condition {
    position: absolute;
    top: 10px;
    z-index: 1;
    max-width: calc(100% - 110px);
    padding: 4px 9px;
    overflow: hidden;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.acc-card-category {
    left: 10px;
    background: rgba(255, 255, 255, .95);
    color: #011e40;
    box-shadow: 0 1px 3px rgba(1, 30, 64, .14);
}

.acc-card-condition {
    right: 10px;
    background: rgba(1, 30, 64, .85);
    color: #fff;
}

.acc-card-condition.is-new {
    background: #0f7a4b;
}

.acc-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 12px;
}

.acc-card-price {
    color: #ee5721;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.acc-card-price.is-empty {
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
}

.acc-card-title {
    display: -webkit-box;
    margin: 0;
    min-height: 2.7em;
    overflow: hidden;
    color: #011e40;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.acc-card-vehicle,
.acc-card-city {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 500;
}

.acc-card-vehicle span,
.acc-card-city span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.acc-card-vehicle ion-icon,
.acc-card-city ion-icon {
    flex: none;
    color: #ee5721;
    font-size: 14px;
}

.acc-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid #eef2f7;
}

.acc-card-foot time {
    flex: none;
    color: #94a3b8;
    font-size: 12px;
}

/* ---------- pager ---------- */

.acc-pagination {
    margin-top: 24px;
}

.acc-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.acc-pager-pages {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acc-pager-btn,
.acc-pager-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #e5eaf1;
    border-radius: 10px;
    background: #fff;
    color: #011e40;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

a.acc-pager-btn:hover,
a.acc-pager-page:hover {
    border-color: #011e40;
    color: #011e40;
}

.acc-pager-page.is-current {
    border-color: #011e40;
    background: #011e40;
    color: #fff;
}

.acc-pager-page.is-gap {
    border-color: transparent;
    background: none;
}

.acc-pager-btn.is-disabled {
    opacity: .45;
}

/* ---------- listing: responsive ---------- */

@media (max-width: 1023px) {
    /* filters on top, collapsed; results below */
    .amp-acc-page .acc-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "filters" "results";
        gap: 16px;
    }

    .amp-acc-page .acc-about {
        display: none;
    }

    .amp-acc-page .acc-filter-toggle {
        cursor: pointer;
    }

    .amp-acc-page .acc-filter-toggle ion-icon {
        display: block;
    }

    .amp-acc-page .acc-filter-card:not(.is-open) .filter-head {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .amp-acc-page .acc-filter-card:not(.is-open) .acc-filter-panel {
        display: none;
    }

    .amp-acc-page .acc-filter-card.is-open .acc-filter-toggle ion-icon {
        transform: rotate(180deg);
    }
}

@media (max-width: 639px) {
    .amp-acc-page .acc-hero {
        min-height: 0;
        padding: 22px 18px;
    }

    .amp-acc-page .acc-hero-art {
        width: 200px;
        height: 200px;
        right: -60px;
    }

    .amp-acc-page .services-hero-actions > a {
        flex: 1 1 150px;
    }

    .amp-acc-page .section-head {
        flex-direction: row;
        align-items: center;
    }

    .amp-acc-page .acc-sort .filter-select {
        min-width: 0;
    }

    .acc-pager-text {
        display: none;
    }
}

/* ---------- wizard (:is(#je-accessory-create, #je-accessory-edit)) ---------- */

/* "Modifier la pièce" (Profil): a little narrower than the create wizard (940px) */
#je-accessory-edit .uk-modal-dialog.amp-wz {
    width: 900px;
}

/* [hidden] must win over the display values of annonce-wizard.css */
:is(#je-accessory-create, #je-accessory-edit) [hidden] {
    display: none !important;
}

:is(#je-accessory-create, #je-accessory-edit) .amp-wz-input:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* vehicle types: the 4 types of "Créer une annonce" on one row (2 × 2 on phones) */
:is(#je-accessory-create, #je-accessory-edit) .acc-choice {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

:is(#je-accessory-create, #je-accessory-edit) .acc-choice.is-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(#je-accessory-create, #je-accessory-edit) .acc-choice-item {
    position: relative;
    margin: 0;
}

:is(#je-accessory-create, #je-accessory-edit) .acc-choice-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

:is(#je-accessory-create, #je-accessory-edit) .acc-choice-item span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* a long label ("Moto, Quad & SSV") may use 2 lines instead of overflowing */
    min-height: 48px;
    height: 100%;
    padding: 6px 10px;
    line-height: 1.2;
    text-align: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: var(--amp-field);
    color: var(--amp-navy);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

:is(#je-accessory-create, #je-accessory-edit) .acc-choice-item span ion-icon {
    font-size: 19px;
    color: var(--amp-muted);
}

:is(#je-accessory-create, #je-accessory-edit) .acc-choice-item span:hover {
    border-color: #cbd5e1;
}

:is(#je-accessory-create, #je-accessory-edit) .acc-choice-item input:checked + span {
    border-color: var(--amp-orange);
    background: #fff8f4;
    box-shadow: 0 0 0 3px rgba(238, 87, 33, .12);
}

:is(#je-accessory-create, #je-accessory-edit) .acc-choice-item input:checked + span ion-icon {
    color: var(--amp-orange);
}

:is(#je-accessory-create, #je-accessory-edit) .acc-choice-item input:focus-visible + span {
    outline: 2px solid var(--amp-orange);
    outline-offset: 2px;
}

:is(#je-accessory-create, #je-accessory-edit) .amp-wz-field.is-invalid .acc-choice-item span {
    border-color: #e11d48;
    background: #fff7f8;
}

:is(#je-accessory-create, #je-accessory-edit) .acc-summary {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--amp-line);
    border-radius: 14px;
    background: #fbfcfe;
}

:is(#je-accessory-create, #je-accessory-edit) .acc-summary-photo {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    background: #e9eef4;
}

:is(#je-accessory-create, #je-accessory-edit) .acc-summary-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:is(#je-accessory-create, #je-accessory-edit) .acc-summary-list {
    display: grid;
    gap: 6px;
    margin: 0;
}

:is(#je-accessory-create, #je-accessory-edit) .acc-summary-list > div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 10px;
    font-size: 13.5px;
}

:is(#je-accessory-create, #je-accessory-edit) .acc-summary-list dt {
    color: var(--amp-muted);
    font-weight: 600;
}

:is(#je-accessory-create, #je-accessory-edit) .acc-summary-list dd {
    margin: 0;
    overflow: hidden;
    color: var(--amp-navy);
    font-weight: 600;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    :is(#je-accessory-create, #je-accessory-edit) .acc-choice {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :is(#je-accessory-create, #je-accessory-edit) .acc-choice.is-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :is(#je-accessory-create, #je-accessory-edit) .acc-summary {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
    }

    :is(#je-accessory-create, #je-accessory-edit) .acc-summary-list > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

/* ---------- detail ---------- */

.amp-acc-detail .acc-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--acc-muted);
    font-size: 13px;
    font-weight: 600;
}

.amp-acc-detail .acc-breadcrumb a {
    color: var(--acc-muted);
    text-decoration: none;
}

.amp-acc-detail .acc-breadcrumb a:hover {
    color: var(--acc-orange);
}

.amp-acc-detail .acc-status-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #fde2c7;
    border-radius: 12px;
    background: #fff8ef;
    color: #7a4a12;
    font-size: 14px;
    line-height: 1.5;
}

.amp-acc-detail .acc-status-banner ion-icon {
    flex: none;
    margin-top: 2px;
    font-size: 20px;
}

.amp-acc-detail .acc-status-banner strong {
    margin-right: 4px;
}

.amp-acc-detail .acc-status-banner.is-rejected {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.amp-acc-detail .acc-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.amp-acc-detail .acc-gallery-main {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--acc-line);
    border-radius: 18px;
    background: #e9eef4;
}

.amp-acc-detail .acc-gallery-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f1f5f9;
}

.amp-acc-detail .acc-gallery-count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(1, 30, 64, .78);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.amp-acc-detail .acc-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.amp-acc-detail .acc-gallery-thumb {
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #e9eef4;
    cursor: pointer;
    opacity: .75;
    transition: opacity .15s ease, border-color .15s ease;
}

.amp-acc-detail .acc-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.amp-acc-detail .acc-gallery-thumb:hover {
    opacity: 1;
}

.amp-acc-detail .acc-gallery-thumb.is-active {
    border-color: var(--acc-orange);
    opacity: 1;
}

.amp-acc-detail .acc-gallery-thumb:focus-visible {
    outline: 2px solid var(--acc-navy);
    outline-offset: 2px;
}

.amp-acc-detail .acc-badge-condition {
    background: var(--acc-navy);
    color: #fff;
}

.amp-acc-detail .acc-badge-condition.is-new {
    background: var(--acc-green);
}

.amp-acc-detail .acc-detail-price {
    margin: 8px 0 4px;
    color: var(--acc-orange);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.amp-acc-detail .acc-detail-price.is-empty {
    color: var(--acc-muted);
    font-size: 20px;
}

.amp-acc-detail .acc-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 4px;
}

.amp-acc-detail .acc-facts > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--acc-line-soft);
    border-radius: 12px;
    background: var(--acc-field);
}

.amp-acc-detail .acc-facts dt {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--acc-muted);
    font-size: 12px;
    font-weight: 600;
}

.amp-acc-detail .acc-facts dt ion-icon {
    color: var(--acc-orange);
    font-size: 14px;
}

.amp-acc-detail .acc-facts dd {
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--acc-navy);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.amp-acc-detail .acc-owner-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--acc-field);
    color: var(--acc-muted);
    font-size: 13px;
}

.amp-acc-detail .acc-owner-note ion-icon {
    flex: none;
    font-size: 18px;
    color: var(--acc-navy);
}

.amp-acc-detail .acc-similar {
    container-type: inline-size;
}

.amp-acc-detail .acc-similar .related-services-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.amp-acc-detail .acc-similar .related-services-title {
    margin: 0;
}

@media (max-width: 640px) {
    .amp-acc-detail .acc-detail-price {
        font-size: 26px;
    }

    .amp-acc-detail .acc-gallery-thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .amp-acc-detail .acc-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}