/* =========================================================
   FILE        :: /public/assets/css/modules/search/searchhub.css
   MODULE      :: Search
   DOMAIN      :: Search
   LAYER       :: Presentation Asset
   PURPOSE     :: Enterprise SearchHub workspace styling
   OWNER       :: Search Domain Authority
   VERSION     :: 9.0.0
   ========================================================= */

/*
|--------------------------------------------------------------------------
| ROOT
|--------------------------------------------------------------------------
*/

.searchhub {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/*
|--------------------------------------------------------------------------
| TOP SUMMARY
|--------------------------------------------------------------------------
*/

.searchhub-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.searchhub-summary-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
}

.searchhub-service-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.searchhub-service-links a {
    color: #1677ff;
    text-decoration: none;
    font-weight: 600;
}

.searchhub-service-links a:hover {
    color: #0958d9;
}

/*
|--------------------------------------------------------------------------
| GLOBAL SEARCH
|--------------------------------------------------------------------------
*/

.searchhub-global {
    position: relative;

    background: #ffffff;

    border-radius: 18px;

    border:
        1px solid rgba(15, 23, 42, 0.08);

    padding: 1.5rem;

    overflow: visible;

    box-shadow:
        0 2px 10px rgba(0,0,0,0.04),
        0 10px 30px rgba(0,0,0,0.03);
}

.searchhub-global-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.searchhub-global input[type="search"] {
    width: 100%;
    height: 58px;

    border-radius: 14px;
    border: 1px solid #dbe3ef;

    padding: 0 1.25rem;

    font-size: 1.1rem;

    background: #ffffff;
}

/*
|--------------------------------------------------------------------------
| INTERNAL WIDGET GRID
|--------------------------------------------------------------------------
*/

.searchhub-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(420px, 1fr));

    gap: 1.5rem;

    overflow: visible;
}

/*
|--------------------------------------------------------------------------
| SEARCH WIDGET CARD
|--------------------------------------------------------------------------
*/

.searchhub-card {
    position: relative;
	
	z-index: 1;

    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,253,255,0.9));

    border-radius: 14px;

    border:
        1px solid rgba(8, 145, 178, 0.12);
    border-color: rgba(34, 211, 238, 0.2);

    overflow: visible;

    box-shadow:
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 20px 52px rgba(15, 23, 42, 0.1),
        0 0 34px rgba(34, 211, 238, 0.08);

    display: flex;
    flex-direction: column;

    isolation: isolate;

    backdrop-filter: blur(14px);
}

.searchhub-card:nth-child(1) .searchhub-card-header {
    border-top-left-radius: 28px;
}

.searchhub-card:nth-child(2) .searchhub-card-header {
    border-top-right-radius: 28px;
}

.searchhub-card::before,
.searchhub-card::after {
    content: '';

    position: absolute;

    pointer-events: none;

    z-index: 0;
}

.searchhub-card::before {
    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(90deg, rgba(34, 211, 238, 0.46), transparent 24%, transparent 76%, rgba(168, 85, 247, 0.32)) top left / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(20, 184, 166, 0.32), transparent 42%, rgba(34, 211, 238, 0.28)) bottom left / 100% 1px no-repeat;

    animation: searchhubFramePulse 4.2s ease-in-out infinite;
}

.searchhub-card::after {
    top: 0;
    left: -48%;

    width: 42%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(34, 211, 238, 0.12),
            transparent
        );

    transform: skewX(-20deg);

    animation: searchhubCardSweep 6.5s ease-in-out infinite;
}

.searchhub-card > * {
    position: relative;
    z-index: 1;
}

@keyframes searchhubFramePulse {

    0%,
    100% {
        opacity: 0.48;
    }

    50% {
        opacity: 1;
    }
}

@keyframes searchhubCardSweep {

    0%,
    52% {
        transform: translateX(0) skewX(-20deg);
        opacity: 0;
    }

    62% {
        opacity: 1;
    }

    100% {
        transform: translateX(360%) skewX(-20deg);
        opacity: 0;
    }
}

.searchhub-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(225, 249, 255, 0.94) 46%,
            rgba(214, 241, 255, 0.94) 72%,
            rgba(228, 240, 255, 0.94) 100%
        );

    color: #102033;

    padding: 1rem 1.3rem;

    font-size: 0.98rem;
    font-weight: 800;

    border-top-left-radius: 14px;
    border-top-right-radius: 14px;

    border-bottom: 1px solid rgba(34, 211, 238, 0.18);

    box-shadow:
        inset 0 -1px 0 rgba(34, 211, 238, 0.14),
        0 10px 24px rgba(15, 23, 42, 0.04);
}

.searchhub-card-header::before {
    content: '';

    width: 2.8rem;
    height: 0.72rem;

    order: 99;

    margin-left: auto;

    border-radius: 999px;

    background:
        linear-gradient(90deg, #22d3ee 0 30%, transparent 30% 42%, #a855f7 42% 100%);

    opacity: 0.86;
}

.searchhub-card-header::after {
    content: '';

    display: block;

    width: 44px;
    height: 2px;

    margin-top: 0.55rem;

    border-radius: 999px;

    background: linear-gradient(90deg, #22d3ee, #a855f7);
}

.searchhub-card-body::before {
    content: '';

    position: absolute;

    top: 0.75rem;
    right: 1rem;

    width: 5.75rem;
    height: 5.75rem;

    border-radius: 50%;

    border: 1px solid rgba(34, 211, 238, 0.18);

    background:
        radial-gradient(circle, rgba(34,211,238,0.12) 0 2px, transparent 3px),
        conic-gradient(from 120deg, rgba(34,211,238,0.18), transparent 30%, rgba(168,85,247,0.12), transparent 72%);

    mask:
        radial-gradient(circle, transparent 0 43%, #000 44% 46%, transparent 47% 60%, #000 61% 63%, transparent 64%);

    opacity: 0.45;

    animation: searchhubSensorSpin 12s linear infinite;
}

@keyframes searchhubSensorSpin {

    to {
        transform: rotate(360deg);
    }
}

.searchhub-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.25rem;

    border-radius: 10px;

    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(168, 85, 247, 0.1));

    border: 1px solid rgba(34, 211, 238, 0.28);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 0 22px rgba(34, 211, 238, 0.18);

    animation: searchhubIconGlow 3.6s ease-in-out infinite;
}

@keyframes searchhubIconGlow {

    0%,
    100% {
        transform: translateY(0);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.72),
            0 0 14px rgba(34, 211, 238, 0.16);
    }

    50% {
        transform: translateY(-2px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.8),
            0 0 24px rgba(34, 211, 238, 0.24);
    }
}

.searchhub-card-body {
    position: relative;

    padding: 1.5rem;

    display: flex;
    flex-direction: column;

    gap: 1rem;

    overflow: visible;

    color: #102033;
}

.searchhub-card label,
.searchhub-card .form-label,
.searchhub-card .fw-bold {
    color: #102033;
}

/*
|--------------------------------------------------------------------------
| FILTER BUTTONS
|--------------------------------------------------------------------------
*/

.searchhub-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.searchhub-filter {
    border-radius: 999px;

    border:
        1px solid rgba(21, 93, 252, 0.58);

    background: rgba(255, 255, 255, 0.86);

    color: #075985;

    padding:
        0.65rem 1rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.searchhub-filter.active,
.searchhub-filter:hover {
    background: linear-gradient(135deg, #155dfc, #22d3ee);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-1px);
}

/*
|--------------------------------------------------------------------------
| INPUTS
|--------------------------------------------------------------------------
*/

.searchhub-card input,
.searchhub-card select {
    width: 100%;

    height: 50px;

    border-radius: 10px;

    border:
        1px solid rgba(8, 145, 178, 0.24);

    padding: 0 1rem;

    background: rgba(255, 255, 255, 0.92);

    color: #102033;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.searchhub-card input:focus,
.searchhub-card select:focus {
    border-color: #22d3ee;
    box-shadow:
        0 0 0 4px rgba(34, 211, 238, 0.13),
        0 0 28px rgba(34, 211, 238, 0.12);
    background-color: #ffffff;
    outline: none;
}

.searchhub-card .input-group-text {
    min-width: 44px;

    justify-content: center;

    border-color: rgba(8, 145, 178, 0.24);

    color: #22d3ee;

    background:
        linear-gradient(180deg, #f8fafc, #eafeff) !important;
}

.searchhub-card .btn-primary {
    position: relative;

    overflow: hidden;

    border: 0;

    background:
        linear-gradient(135deg, #155dfc 0%, #22d3ee 100%);

    box-shadow: 0 10px 24px rgba(21, 93, 252, 0.16);
}

.searchhub-card .btn-primary::after,
.searchhub-card .btn-success::after,
.searchhub-action::after {
    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,0.28) 42%,
            transparent 64%
        );

    transform: translateX(-110%);

    animation: controlEnergySweep 3.8s ease-in-out infinite;
}

@keyframes controlEnergySweep {

    0%,
    54% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(120%);
    }
}

.searchhub-card .btn-success {
    position: relative;

    overflow: hidden;

    border: 0;

    background:
        linear-gradient(135deg, #16a34a 0%, #14b8a6 100%);

    box-shadow: 0 10px 24px rgba(5, 150, 105, 0.16);
}

.searchhub-card .btn-primary:disabled,
.searchhub-card .btn-primary.disabled {
    background:
        linear-gradient(135deg, #93c5fd 0%, #67e8f9 100%);

    opacity: 0.76;
}

/*
|--------------------------------------------------------------------------
| ACTION BUTTONS
|--------------------------------------------------------------------------
*/

.searchhub-action {
    position: relative;

    overflow: hidden;

    height: 48px;

    border: none;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #155dfc 0%,
            #0891b2 100%
        );

    color: #ffffff;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        opacity 0.18s ease,
        box-shadow 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {

    .searchhub-card::before,
    .searchhub-card::after,
    .searchhub-card-icon,
    .searchhub-card-body::before,
    .searchhub-card .btn-primary::after,
    .searchhub-card .btn-success::after,
    .searchhub-action::after {
        animation: none;
    }
}

.searchhub-action:hover {
    transform: translateY(-1px);
    opacity: 0.95;
    box-shadow: 0 10px 24px rgba(21, 93, 252, 0.22);
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 1200px) {

    .searchhub-grid {
        grid-template-columns: 1fr;
    }
}