/* ============================================================
   TG Search Widget — v1.0.0 | Full-screen overlay + Product results
   Author: Thilina Gamage
   ============================================================ */

.tgsw-wrapper { position: relative; display: inline-flex; align-items: center; }

/* ── Trigger ── */
.tgsw-trigger {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 40px; height: 40px; padding: 0;
    background: transparent; border: none; border-radius: 6px;
    color: #888; cursor: pointer; font-family: inherit; font-size: 13.5px; line-height: 1;
    transition: color .2s, background-color .2s;
}
.tgsw-trigger:hover    { color: #f0ece4; background-color: rgba(255,255,255,.08); }
.tgsw-trigger svg      { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.tgsw-trigger--bar     { width: auto; padding: 0 16px; gap: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; }
.tgsw-trigger--icon_text { width: auto; padding: 0 14px 0 10px; }
.tgsw-trigger-placeholder { color: rgba(255,255,255,.3); white-space: nowrap; }
.tgsw-trigger-label       { white-space: nowrap; }

/* ── Overlay ── */
.tgsw-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background-color: rgba(5,5,5,.97);
    display: flex; align-items: flex-start; justify-content: center;
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .35s cubic-bezier(.22,1,.36,1), visibility 0s linear .35s;
}
.tgsw-overlay.tgsw-open {
    opacity: 1; pointer-events: all; visibility: visible;
    transition: opacity .35s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s;
}
.tgsw-overlay-inner {
    position: relative; width: 100%; max-width: 760px; padding: 100px 32px 60px;
}
.tgsw-overlay-content {
    transform: translateY(28px);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.tgsw-overlay.tgsw-open .tgsw-overlay-content { transform: translateY(0); }

/* ── Close ── */
.tgsw-close {
    position: absolute; top: 32px; right: 32px;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 50%;
    color: #888; cursor: pointer; padding: 0; line-height: 1;
    transition: color .2s, background-color .2s, border-color .2s;
}
.tgsw-close:hover { color: #f0ece4; background-color: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.tgsw-close svg   { width: 18px; height: 18px; stroke-width: 1.6; display: block; }

/* ── Input ── */
.tgsw-form { margin-bottom: 24px; }
.tgsw-input-row {
    display: flex; align-items: center; gap: 16px;
    border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 14px;
}
.tgsw-search-icon { width: 22px; height: 22px; stroke: #c8a96e; stroke-width: 1.6; flex-shrink: 0; }
.tgsw-input {
    flex: 1; background: transparent; border: none; outline: none;
    font-family: inherit; font-size: clamp(20px,3vw,32px); color: #f0ece4;
    caret-color: #c8a96e; -webkit-appearance: none; appearance: none; min-width: 0;
}
.tgsw-input::placeholder                  { color: rgba(255,255,255,.2); }
.tgsw-input::-webkit-search-cancel-button { display: none; }
.tgsw-input::-ms-clear                    { display: none; }

/* ── Spinner ── */
.tgsw-spinner {
    display: none; width: 20px; height: 20px; flex-shrink: 0;
    animation: tgsw-spin .7s linear infinite;
}
.tgsw-spinner svg { width: 20px; height: 20px; stroke: #c8a96e; display: block; }
.tgsw-wrapper.tgsw-loading .tgsw-spinner { display: flex; }
@keyframes tgsw-spin { to { transform: rotate(360deg); } }

/* ── Results ── */
.tgsw-results-wrap { min-height: 0; }

.tgsw-results-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 2px;
}

.tgsw-result-item {
    border-top: 1px solid transparent;
    border-radius: 8px;
    transition: background-color .15s;
    cursor: pointer;
}
.tgsw-result-item + .tgsw-result-item { border-top-color: rgba(255,255,255,.06); }
.tgsw-result-item:hover,
.tgsw-result-item.tgsw-active { background-color: rgba(255,255,255,.06); }

.tgsw-result-link {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 12px; text-decoration: none;
}

.tgsw-result-img {
    width: 56px; height: 56px; flex-shrink: 0;
    object-fit: cover; border-radius: 6px;
    background: rgba(255,255,255,.05);
}

.tgsw-result-img-placeholder {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 6px; background: rgba(255,255,255,.05);
    display: flex; align-items: center; justify-content: center;
}
.tgsw-result-img-placeholder svg { width: 22px; height: 22px; stroke: rgba(255,255,255,.2); }

.tgsw-result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tgsw-result-meta { display: flex; align-items: center; gap: 8px; }
.tgsw-result-cat  { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #888; }
.tgsw-result-title { font-size: 14px; font-weight: 500; color: #f0ece4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.tgsw-result-price { font-size: 13px; font-weight: 600; color: #c8a96e; margin-top: 2px; }

/* No results */
.tgsw-no-results {
    padding: 20px 12px;
    font-size: 14px; color: rgba(255,255,255,.35); text-align: center;
}
.tgsw-no-results strong { color: rgba(255,255,255,.6); }

/* Preview placeholder in editor */
.tgsw-results-placeholder {
    margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.25); text-align: center; padding: 24px 0;
}

/* Footer / view all */
.tgsw-results-footer { margin-top: 16px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 14px; }
.tgsw-view-all {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: #c8a96e; text-decoration: none;
    transition: gap .2s;
}
.tgsw-view-all:hover { gap: 12px; }
.tgsw-view-all svg   { width: 16px; height: 16px; }

/* Hint */
.tgsw-overlay-hint { margin-top: 24px; font-size: 11px; color: rgb(255 255 255); letter-spacing: .06em; }
.tgsw-overlay-hint kbd {
    display: inline-block; padding: 2px 7px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 4px;
    font-family: inherit; font-size: 10px; color: #000;
}

/* Editor preview */
.tgsw-overlay--preview {
    position: relative !important; inset: auto !important;
    opacity: 1 !important; visibility: visible !important; pointer-events: all !important;
    background-color: rgba(5,5,5,.92) !important; border-radius: 10px; margin-top: 10px;
}
.tgsw-overlay--preview .tgsw-overlay-content { transform: none !important; }
.tgsw-overlay--preview .tgsw-close           { position: absolute; }

/* Responsive */
@media (max-width: 640px) {
    .tgsw-overlay-inner { padding: 80px 20px 48px; }
    .tgsw-close         { top: 20px; right: 20px; }
    .tgsw-result-img, .tgsw-result-img-placeholder { width: 44px; height: 44px; }
}