/*
 * Fil: wp-content/plugins/helmia-vehicles/assets/css/single-vehicle-seo-ux.css
 *
 * Helmia Vehicles - Wave 2 (SEO/UX-lyft) komponenter
 *
 * Innehaller:
 *  - .helmia-vehicle-trust-row             (C-01)
 *  - .helmia-vehicle-about                 (B-01)
 *  - .helmia-vehicle-faq-block             (B-02 - wrap kring helmia-qna pattern)
 *  - .helmia-vehicle-seller-card           (C-02)
 *  - .helmia-vehicle-sticky-bar            (C-04)
 *  - .helmia-vehicle-service-links / card  (B-03)
 *
 * Designprincip: anvander Helmia design-tokens. INGA hardkodade hex/px for
 * standard-UI. Se .cursor/rules/helmia-design-tokens.mdc.
 */

/* ---------- Stock-info (B-04) ---------- */
.helmia-vehicle-stock-info {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--success-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--success-color) 35%, transparent);
    border-radius: var(--helmia-radius-sm);
    font-size: var(--helmia-font-size-sm, 0.875rem);
    color: var(--text-primary);
    line-height: 1.4;
    flex-wrap: wrap;
}

.helmia-vehicle-stock-info__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-color);
    flex-shrink: 0;
    animation: helmia-vehicle-stock-pulse 2.5s ease-in-out infinite;
}

@keyframes helmia-vehicle-stock-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.helmia-vehicle-stock-info__label {
    font-weight: var(--helmia-font-weight-bold, 600);
}

.helmia-vehicle-stock-info__sep {
    color: var(--text-secondary);
    opacity: 0.7;
}

.helmia-vehicle-stock-info__status {
    color: var(--text-secondary);
}

/* ---------- Trust-row (C-01) ---------- */
.helmia-vehicle-trust-row {
    margin: var(--space-4) 0 var(--space-6);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--helmia-radius-md);
}

.helmia-vehicle-trust-row__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

.helmia-vehicle-trust-row__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2);
}

.helmia-vehicle-trust-row__icon {
    flex-shrink: 0;
    color: var(--primary-color);
    margin-top: 2px;
}

.helmia-vehicle-trust-row__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.helmia-vehicle-trust-row__label {
    font-weight: var(--helmia-font-weight-bold, 600);
    color: var(--text-primary);
    font-size: var(--helmia-font-size-sm, 0.875rem);
}

.helmia-vehicle-trust-row__sub {
    color: var(--text-secondary);
    font-size: var(--helmia-font-size-xs, 0.75rem);
}

/* ---------- About-sektion (B-01) ---------- */
.helmia-vehicle-about {
    margin: var(--space-6) 0;
    padding: var(--space-5);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--helmia-radius-md);
}

.helmia-vehicle-about__heading {
    margin: 0 0 var(--space-4);
    color: var(--helmia-heading-color);
}

.helmia-vehicle-about__content p {
    margin: 0 0 var(--space-4);
    line-height: 1.65;
    color: var(--text-primary);
}

.helmia-vehicle-about__content p:last-child {
    margin-bottom: 0;
}

/* ---------- FAQ (B-02) ----------
 * Anvander Helmias befintliga .helmia-qna__*-styles fran design-system.css.
 * Refinement-3: FAQ-blocket ligger nu LANGST NER pa sidan (efter Liknande bilar),
 * full-width och visuellt avskild fran "Service och eftermarknad"-boxen.
 * Ingen kort-look behovs - vi ardar .helmia-qna's defaultstilar och anvander
 * .helmia-container inuti for centrering och rimlig max-width. */
.helmia-vehicle-faq-block {
    margin: var(--space-6) 0;
}

/* ---------- Saljarkort (C-02) ---------- */
.helmia-vehicle-seller-card {
    margin: var(--space-4) 0 var(--space-5);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--helmia-radius-md);
}

.helmia-vehicle-seller-card__header {
    margin-bottom: var(--space-3);
}

.helmia-vehicle-seller-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.helmia-vehicle-seller-card__name {
    margin: 0 0 2px;
    font-size: var(--helmia-font-size-base, 1rem);
    color: var(--helmia-heading-color);
}

.helmia-vehicle-seller-card__role {
    margin: 0;
    font-size: var(--helmia-font-size-sm, 0.875rem);
    color: var(--text-secondary);
}

.helmia-vehicle-seller-card__contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.helmia-vehicle-seller-card__contact {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--helmia-font-size-sm, 0.875rem);
    line-height: 1.5;
}

.helmia-vehicle-seller-card__contact svg {
    flex-shrink: 0;
    color: var(--primary-color);
    margin-top: 2px;
}

.helmia-vehicle-seller-card__link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: var(--helmia-font-weight-bold, 600);
    transition: var(--helmia-link-transition);
}

.helmia-vehicle-seller-card__link:hover,
.helmia-vehicle-seller-card__link:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--helmia-link-decoration-hover);
    text-underline-offset: var(--helmia-link-underline-offset);
}

.helmia-vehicle-seller-card__promise {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-light);
    font-size: var(--helmia-font-size-sm, 0.875rem);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ---------- Service-lankar (B-03) - card-grid v2 ----------
 * Standardstil: aterges som eget kort (anvands om partial nagon gang renderas
 * fristaende i ett huvudblock). I sidopanelen ligger service-links inuti
 * .helmia-contact-card och da nollas kort-stilen langre ner (se override mot
 * .helmia-contact-card .helmia-vehicle-service-links). */
.helmia-vehicle-service-links {
    margin: var(--space-5) 0;
    padding: var(--space-5);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--helmia-radius-md);
}

/* 1.9.0 (B-03 refinement-4): partial anvander nu <h2> (efter att ha bytt fran <aside>+<h3>
 * till <section>+<h2>). Globala/teman h2-regler kan ha hogre specificitet eller komma
 * senare i kaskaden och blasa upp rubriken. Dubblera selectorn med tag-namnet h2 sa
 * specificiteten blir 0,1,1 (vinner over rena 0,0,1 h2-regler). Storleken matchar
 * .helmia-vehicle-seller-card__name sa de tre sidopanel-kort-rubrikerna ar konsistenta. */
h2.helmia-vehicle-service-links__heading,
.helmia-vehicle-service-links__heading {
    margin: 0 0 var(--space-4);
    font-size: var(--helmia-font-size-base, 1rem);
    font-weight: var(--helmia-font-weight-bold, 600);
    line-height: 1.3;
    color: var(--helmia-heading-color);
}

.helmia-vehicle-service-links__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* Refinement-6: alla rader får samma höjd som det högsta kortet -> jämn höjd även när
       grann-boxen har mer text (t.ex. "Däck och hjulskifte" vs "Hyrbil"). */
    grid-auto-rows: 1fr;
    gap: var(--space-3);
}

.helmia-vehicle-service-card {
    list-style: none;
    margin: 0;
    /* Refinement-6: gör li till flex-container så <a> kan stretcha till full cell-höjd. */
    display: flex;
}

.helmia-vehicle-service-card__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--helmia-radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
    min-height: var(--helmia-touch-target, 44px);
    /* Refinement-6: fyll hela li (höjd kommer från grid-stretch + grid-auto-rows: 1fr,
       bredd från flex-container li). Säkerställer identisk höjd mellan alla kort. */
    width: 100%;
}

.helmia-vehicle-service-card__link:hover,
.helmia-vehicle-service-card__link:focus-visible {
    background: var(--bg-primary);
    border-color: var(--primary-color);
    box-shadow: var(--helmia-shadow-md);
    text-decoration: none;
    transform: translateY(-1px);
}

.helmia-vehicle-service-card__link:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.helmia-vehicle-service-card__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--helmia-radius-sm);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    transition: var(--transition);
}

.helmia-vehicle-service-card__link:hover .helmia-vehicle-service-card__icon,
.helmia-vehicle-service-card__link:focus-visible .helmia-vehicle-service-card__icon {
    background: var(--primary-color);
    color: var(--light-color);
}

.helmia-vehicle-service-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
    min-width: 0;
}

.helmia-vehicle-service-card__title {
    font-weight: var(--helmia-font-weight-bold, 600);
    font-size: var(--helmia-font-size-sm, 0.95rem);
    color: var(--text-primary);
}

.helmia-vehicle-service-card__sub {
    font-size: var(--helmia-font-size-xs, 0.8rem);
    color: var(--text-secondary);
}

.helmia-vehicle-service-card__chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: var(--transition);
}

.helmia-vehicle-service-card__link:hover .helmia-vehicle-service-card__chevron,
.helmia-vehicle-service-card__link:focus-visible .helmia-vehicle-service-card__chevron {
    color: var(--primary-color);
    transform: translateX(2px);
}

/* ---------- Sticky bottom-bar (C-04) ---------- */
.helmia-vehicle-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    display: flex;
    justify-content: stretch;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    box-shadow: var(--helmia-shadow-md);
    transform: translateY(120%);
    transition: transform 0.25s ease;
}

.helmia-vehicle-sticky-bar.is-visible {
    transform: translateY(0);
}

.helmia-vehicle-sticky-bar__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--helmia-touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--primary-color);
    border-radius: var(--helmia-radius-sm);
    background: var(--bg-primary);
    color: var(--primary-color);
    font-weight: var(--helmia-font-weight-bold, 600);
    font-size: var(--helmia-font-size-sm, 0.875rem);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.helmia-vehicle-sticky-bar__btn--primary {
    background: var(--primary-color);
    color: var(--light-color);
}

.helmia-vehicle-sticky-bar__btn:hover,
.helmia-vehicle-sticky-bar__btn:focus-visible {
    background: var(--secondary-color);
    color: var(--light-color);
    border-color: var(--secondary-color);
}

.helmia-vehicle-sticky-bar__btn svg {
    width: 18px;
    height: 18px;
}

/* Desktop: gom sticky-bar */
@media (min-width: 769px) {
    .helmia-vehicle-sticky-bar {
        display: none;
    }
}

/* Mobil: lagg utrymme under sidan sa sticky-bar inte tacker innehallet */
@media (max-width: 768px) {
    body.helmia-vehicle-sticky-active {
        padding-bottom: calc(var(--helmia-touch-target) + var(--space-4));
    }

    /* Refinement-2: Cookie consent-floating-knappen ligger nere i hogra hornet
       och tacker sticky-baren (specifikt Ring-knappen). Pa fordonssidor
       prioriterar vi sticky-CTA - cookie-knappen doljs sa lange sticky-bar
       ar aktiv. Anvandaren kan fortfarande andra cookie-installningar via
       footer-lanken. Pa desktop visas cookie-knappen som vanligt. */
    body.helmia-vehicle-sticky-active .helmia-cc-floating {
        display: none !important;
    }
}