/* GSMUnlockUSA Search Keywords Expand v7
   Presentation-only progressive enhancement for the existing Featured/Live keyword chips.
   Desktop + Mobile: 2 rows.
   V7: same compact toggle + active keyword/context polish + subtle collapsed fade.
   Existing Search V7.x owns search, analytics, navigation, ordering and click behavior. */

.gsm-search-v73.gsm-keyword-toggle-host {
    position: relative;
}

/* Establish a BFC so floated/inline keyword chips always contribute real height. */
.gsm-search-v73-common.gsm-keyword-collapsible {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: max-height 390ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: max-height;
}

/*
   The rail is absolute and follows the Search root height. It therefore never
   consumes a third desktop row / fourth mobile row just for the toggle.
*/
.gsm-keyword-expand-rail {
    display: none;
    position: absolute;
    z-index: 8;
    box-sizing: border-box;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.gsm-keyword-expand-rail.gsm-keyword-expand-visible {
    display: flex;
}

/* V6 visual size is ~80% of V3 desktop and ~85% of V3 mobile (27px). */
.gsm-keyword-expand-btn {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-flex;
    width: 27px;
    height: 27px;
    min-width: 27px;
    min-height: 27px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    margin: 0 0 2px;
    padding: 0;
    border: 1px solid rgba(24, 137, 184, 0.22);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(239,249,253,0.98) 100%);
    color: #1680ad;
    box-shadow:
        0 2px 6px rgba(16, 104, 143, 0.10),
        0 0 0 3px rgba(0, 144, 192, 0.04);
    cursor: pointer;
    pointer-events: auto;
    font: inherit;
    line-height: 1;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.gsm-keyword-expand-btn:hover {
    border-color: rgba(0, 128, 181, 0.32);
    background: linear-gradient(180deg, #ffffff 0%, #eef9fc 100%);
    box-shadow:
        0 2px 7px rgba(16, 104, 143, 0.11),
        0 0 0 3px rgba(0, 144, 192, 0.045);
    transform: translateY(-0.5px);
}

.gsm-keyword-expand-btn:active {
    transform: translateY(0) scale(0.96);
}

.gsm-keyword-expand-btn:focus {
    outline: none;
    border-color: rgba(0, 128, 181, 0.50);
    box-shadow:
        0 2px 8px rgba(16, 104, 143, 0.13),
        0 0 0 3px rgba(0, 144, 192, 0.12);
}

.gsm-keyword-expand-chevron {
    display: block;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 2px solid #1680ad;
    border-bottom: 2px solid #1680ad;
    transform: rotate(45deg);
    transition:
        transform 390ms cubic-bezier(0.22, 1, 0.36, 1),
        margin 390ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gsm-keyword-expand-btn[aria-expanded="false"] .gsm-keyword-expand-chevron {
    animation: gsmKeywordChevronHintV7 4.6s ease-in-out infinite;
}

.gsm-keyword-expand-btn[aria-expanded="true"] .gsm-keyword-expand-chevron {
    margin-top: 3px;
    transform: rotate(225deg);
    animation: none;
}

/* Small fade cue only; no layout space is consumed. */
.gsm-keyword-expand-rail:before {
    content: "";
    position: absolute;
    right: 100%;
    bottom: 0;
    width: 10px;
    height: 31px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.58));
    opacity: 0.66;
}

/*
   V4 reflow class is applied only to legacy left columns that must move below
   the full-width Search/Keywords header. The margin follows the same easing as
   the keyword reveal so desktop expansion feels like one continuous motion.
*/
.gsm-keyword-peer-column-v7 {
    transition: margin-top 390ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gsm-keyword-peer-column-v7.gsm-keyword-peer-measuring-v7 {
    transition: none !important;
}

@keyframes gsmKeywordChevronHintV7 {
    0%, 82%, 100% { transform: rotate(45deg) translate(0, 0); }
    89% { transform: rotate(45deg) translate(0.55px, 0.55px); }
    96% { transform: rotate(45deg) translate(0, 0); }
}

@media (max-width: 767px) {
    /* Keep the visual compact but still slightly forgiving for touch. */
    .gsm-keyword-expand-btn {
        width: 27px;
        height: 27px;
        min-width: 27px;
        min-height: 27px;
        margin-bottom: 1px;
    }

    .gsm-keyword-expand-chevron {
        width: 6px;
        height: 6px;
    }

    /* Stacked mobile columns must never inherit desktop alignment offsets. */
    .gsm-keyword-peer-column-v7 {
        transition: none;
    }
}


/* V7: a very light bottom fade only while more keyword rows are hidden. */
.gsm-search-v73-common.gsm-keyword-collapsible.gsm-keyword-is-collapsed:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 7px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.50));
    opacity: 0.62;
}

/* Active keyword: visible feedback without changing chip dimensions or layout. */
.gsm-search-v73-common .service-search-common-link.gsm-keyword-active {
    background: #dceefb;
    border-color: #77acd5;
    color: #103f75;
    box-shadow: inset 0 0 0 1px rgba(36,112,170,0.04), 0 1px 4px rgba(20,69,148,0.10);
}
.gsm-search-v73-common .service-search-common-link.gsm-keyword-active:hover,
.gsm-search-v73-common .service-search-common-link.gsm-keyword-active:focus {
    background: #d7ebf9;
    border-color: #6ca3ce;
}

/* Search context stays the same compact first chip on both Detail and Order. */
.gsm-search-v73-common .service-search-back-chip.gsm-search-context-active {
    box-shadow: 0 1px 4px rgba(20,69,148,0.16);
}

@media (max-width: 767px) {
    .gsm-search-v73-common .service-search-back-chip.gsm-search-context-active {
        max-width: calc(100vw - 88px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gsm-search-v73-common.gsm-keyword-collapsible,
    .gsm-keyword-expand-btn,
    .gsm-keyword-expand-chevron,
    .gsm-keyword-peer-column-v7 {
        transition: none !important;
        animation: none !important;
    }
}