.nexxa-search {
    width: 100%;
    max-width: 640px;
    margin: 1.75rem auto -1.5rem;
    text-align: start;
}
.nexxa-search-field {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 6px 18px 6px 10px;
    border: 1px solid rgba(168, 85, 247, .35);
    border-radius: 18px;
    background: rgba(18, 16, 28, .75);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.nexxa-search-field:focus-within {
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .18), 0 8px 28px rgba(0, 0, 0, .12);
}
.nexxa-search-icon { width: 24px; height: 24px; flex-shrink: 0; color: #a78bfa; }
.nexxa-search input {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #f8fafc;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-align: start;
    appearance: none;
    -webkit-appearance: none;
}
.nexxa-search input::placeholder { color: #a5a6b8; opacity: 1; }
.nexxa-search input:placeholder-shown { direction: rtl; }
.nexxa-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nexxa-search-clear {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: rgba(167, 139, 250, .1);
    color: #c4b5fd;
    cursor: pointer;
    transition: background-color .2s ease;
}
.nexxa-search-clear svg { width: 22px; height: 22px; }
.nexxa-search-clear:hover { background: rgba(167, 139, 250, .2); }
.nexxa-search-clear:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.nexxa-search-status { min-height: 24px; margin: 10px 4px 0; color: #9ca3af; font-size: 13px; font-weight: 600; }
.nexxa-search-empty { margin: 0 0 4rem; padding: 2rem 1rem; border: 1px solid #ffffff1a; border-radius: 20px; color: #cbd5e1; text-align: center; line-height: 1.8; }
.nexxa-search[hidden], .nexxa-search-clear[hidden], .nexxa-search-empty[hidden],
.nexxa-services[hidden], .nexxa-service[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .nexxa-search-field { transition: none; } }

.nexxa-services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 2rem;
    margin-bottom: 4rem;
}

.nexxa-service {
    --service-color: #a855f7;
    display: block;
    align-self: start;
    min-width: 0;
    padding: 1px;
    border-radius: 24px;
    background: var(--card-edge, linear-gradient(to bottom, rgba(255,255,255,.10), transparent));
    overflow: hidden;
    transform: translateY(var(--card-lift, 0px));
    box-shadow: var(--card-shadow, none);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, box-shadow .3s ease;
    color: white;
    text-decoration: none;
}

.nexxa-service:is(:focus-visible, :has(.nexxa-order:focus-visible)) {
    --card-lift: -8px;
    --card-edge: linear-gradient(to bottom, color-mix(in srgb, var(--service-color) 50%, transparent), color-mix(in srgb, var(--service-color) 10%, transparent));
    --card-shadow: 0 20px 40px -15px color-mix(in srgb, var(--service-color) 30%, transparent);
    --card-heading-color: var(--service-heading-ink, var(--service-color));
    --card-ambient: .4;
}

/* A real mouse keeps the original hover effect. Touch uses the scroll selection. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .nexxa-service:hover {
        --card-lift: -8px;
        --card-edge: linear-gradient(to bottom, color-mix(in srgb, var(--service-color) 50%, transparent), color-mix(in srgb, var(--service-color) 10%, transparent));
        --card-shadow: 0 20px 40px -15px color-mix(in srgb, var(--service-color) 30%, transparent);
        --card-heading-color: var(--service-heading-ink, var(--service-color));
        --card-ambient: .4;
    }
}

@media (hover: none), (pointer: coarse), (max-width: 767px) {
    /* Both appearances share the original dark theme's softer touch highlight. */
    .nexxa-service.is-scroll-active {
        --card-lift: -8px;
        --card-edge: linear-gradient(to bottom, color-mix(in srgb, var(--service-color) 38%, transparent), color-mix(in srgb, var(--service-color) 8%, transparent));
        --card-shadow: 0 20px 40px -15px color-mix(in srgb, var(--service-color) 20%, transparent);
        --card-heading-color: var(--service-heading-ink, var(--service-color));
        --card-ambient: .28;
    }
}

.nexxa-service-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 4rem 2rem 2rem;
    isolation: isolate;
    border-radius: 23px;
    overflow: hidden;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.05);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

.nexxa-service-body:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 128px;
    height: 128px;
    background: var(--service-color);
    filter: blur(50px);
    opacity: var(--card-ambient, .20);
    transition: opacity .3s ease;
    pointer-events: none;
}

.nexxa-service-body:has(> .nexxa-badge) { padding-top: 24px; }

.nexxa-badge {
    position: static;
    align-self: flex-end;
    flex-shrink: 0;
    width: fit-content;
    max-width: 100%;
    overflow-wrap: anywhere;
    border: 1px solid #ffffff1a;
    background: #ffffff08;
    border-radius: 30px;
    padding: 4px 12px;
    color: #d1d5db;
    font-size: 12px;
    font-weight: 700;
}

.nexxa-service-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.nexxa-service h3 {
    margin: 0;
    color: var(--card-heading-color, inherit);
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.3;
    overflow-wrap: anywhere;
    transition: color .25s ease;
}

.nexxa-service-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--image-border, var(--service-color));
    background: color-mix(in srgb, var(--image-border, var(--service-color)) 10%, transparent);
    box-shadow: 0 0 15px color-mix(in srgb, var(--image-border, var(--service-color)) 40%, transparent);
    width: 56px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    color: var(--service-color);
    font-size: 30px;
}

.nexxa-service-icon img { width: 100%; height: 100%; object-fit: contain; }

.nexxa-service-copy {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.nexxa-service .nexxa-description {
    margin: 0;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1.85;
    font-weight: 500;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.nexxa-price {
    display: block;
    margin: 0;
    color: var(--price-color, var(--service-color));
    font-size: 21px;
    overflow-wrap: anywhere;
}

/* Only catalog prices use this hierarchy; custom price copy stays unchanged. */
.nexxa-price .nx-card-price-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .35em;
    line-height: 1.25;
}
.nexxa-price .nx-card-price-amount { font-size: 30px; font-weight: 900; }
.nexxa-price .nx-card-price-currency { font-size: 20px; font-weight: 800; }
.nexxa-price .nx-card-price-duration {
    display: block;
    margin-top: 6px;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}
/* Preserve the saved separator for assistive reading without a visual slash. */
.nexxa-price .nx-card-price-divider {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.nexxa-order {
    display: block;
    background: linear-gradient(90deg, #44bcff, #a855f7, #8b5cf6);
    color: #080810;
    text-align: center;
    border-radius: 12px;
    padding: 10px;
    font-weight: 800;
}

.nexxa-empty { grid-column: 1 / -1; text-align: center; padding: 40px; border: 1px solid #ffffff1a; border-radius: 20px; color: #cbd5e1; }
.nx-icon { display: block; width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }
.nx-logo-fallback { display: flex; align-items: center; justify-content: center; }
.nexxa-service-icon [hidden] { display: none !important; }

/* Stretch within each desktop row, keeping all text and intrinsic mobile height. */
@media (min-width: 768px) {
    .nexxa-services { align-items: stretch; }
    .nexxa-service {
        display: flex;
        flex-direction: column;
        align-self: stretch;
        box-sizing: border-box;
    }
    .nexxa-service-body {
        flex: 1 0 auto;
        min-width: 0;
        box-sizing: border-box;
    }
    .nexxa-service-copy { flex: 1 0 auto; min-width: 0; }
    .nexxa-service-copy .nexxa-price,
    .nexxa-service-body > .nexxa-order { margin-top: auto; }
}

@media (max-width: 1279px) { .nexxa-services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .nexxa-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .nexxa-services { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
    .nexxa-service { transform: none; transition: none; }
    .nexxa-service-body:before, .nexxa-service h3, .nexxa-search-clear { transition: none; }
}