/* Domain search widget — result cards are rendered by inline JS on the
   homepage and /domain-registration-in-nepal, so this component lives in
   one shared file loaded by both pages (keeps the two in sync). */


        /* ── DOMAIN SEARCH (inside hero) ── */
        .hp-ds-wrap {
            background: #fff;
            border-radius: 20px;
            padding: 20px 20px 16px;
            max-width: 820px;
            margin: 0 auto 28px;
            box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.12);
            border: 1px solid rgba(255,255,255,.05);
            text-align: left;
            animation: hpFadeUp .7s cubic-bezier(.16,1,.3,1) .58s both;
        }

        .hp-ds-row {
            display: flex; gap: 10px; align-items: stretch;
        }

        .hp-ds-input-wrap {
            flex: 1; position: relative; display: flex; align-items: center;
        }

        .hp-ds-icon {
            position: absolute; left: 16px;
            color: #14b8a6; font-size: 17px; pointer-events: none; z-index: 1;
        }

        .hp-ds-input {
            width: 100%; height: 54px;
            padding: 0 44px 0 44px;
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-size: 16px; font-weight: 600; color: #0f172a;
            outline: none; transition: all .15s;
            box-sizing: border-box;
        }

        .hp-ds-input:focus {
            border-color: #14b8a6;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(20,184,166,.1);
        }

        .hp-ds-input::placeholder { color: #94a3b8; font-weight: 500; font-size: 15px; }

        .hp-ds-clear-input {
            position: absolute; right: 12px;
            background: none; border: none; color: #94a3b8;
            cursor: pointer; font-size: 14px; padding: 4px;
            border-radius: 50%; transition: color .1s;
        }

        .hp-ds-clear-input:hover { color: #475569; }

        .hp-ds-btn {
            height: 54px; padding: 0 28px;
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff; border: none; border-radius: 12px;
            font-size: 15px; font-weight: 800; cursor: pointer;
            white-space: nowrap; display: flex; align-items: center; gap: 8px;
            transition: all .18s;
            box-shadow: 0 4px 14px rgba(16,185,129,.3);
            flex-shrink: 0;
        }

        .hp-ds-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,185,129,.4); }

        .hp-ds-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }


        /* TLD chips */
        .hp-ds-chips {
            display: flex; align-items: center; gap: 7px;
            flex-wrap: wrap; margin-top: 13px;
        }

        .hp-ds-chips-label {
            font-size: 14px; font-weight: 700; color: #94a3b8;
            text-transform: uppercase; letter-spacing: .06em; margin-right: 2px;
        }

        .hp-ds-chip {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 5px 11px; border-radius: 20px;
            border: 1.5px solid #e2e8f0;
            background: #f8fafc; color: #475569;
            font-size: 14px; font-weight: 700;
            cursor: pointer; transition: all .15s; user-select: none;
        }

        .hp-ds-chip em { font-style: normal; font-size: 14px; color: #94a3b8; }

        .hp-ds-chip:hover { border-color: #5eead4; background: #f0fdfa; color: #0f766e; }

        .hp-ds-chip.active {
            border-color: #14b8a6; background: #f0fdfa; color: #0f766e;
        }

        .hp-ds-chip.active em { color: #5eead4; }


        /* Results */
        .hp-ds-results {
            margin-top: 14px;
            border-top: 1px solid #f1f5f9;
            padding-top: 12px;
        }

        .hp-ds-loader {
            display: flex; align-items: center; gap: 10px;
            padding: 14px 4px; font-size: 14px; color: #64748b;
        }

        .hp-ds-spinner {
            width: 20px; height: 20px; flex-shrink: 0;
            border: 3px solid #e2e8f0;
            border-top-color: #14b8a6; border-radius: 50%;
            animation: hpSpin .65s linear infinite;
        }

        .hp-ds-grid { display: flex; flex-direction: column; gap: 8px; }


        /* Domain result cards */
        .hp-dc {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 16px; border-radius: 12px; gap: 12px;
            border: 1.5px solid #e2e8f0; background: #fafafa;
            transition: border-color .15s;
        }

        .hp-dc.available { border-color: #bbf7d0; background: #f0fdf4; }

        .hp-dc.taken     { border-color: #fee2e2; background: #fff8f8; opacity: .8; }

        .hp-dc-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }

        .hp-dc-dot {
            width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
        }

        .hp-dc-dot.available { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }

        .hp-dc-dot.taken     { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.12); }

        .hp-dc-dot.unknown   { background: #94a3b8; }

        .hp-dc-name {
            font-weight: 700; font-size: 15px; color: #0f172a;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }

        .hp-dc-badge {
            font-size: 14px; font-weight: 700; padding: 2px 8px;
            border-radius: 20px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .04em;
        }

        .hp-dc-badge.available { background: #dcfce7; color: #166534; }

        .hp-dc-badge.taken     { background: #fee2e2; color: #991b1b; }

        .hp-dc-badge.unknown   { background: #f1f5f9; color: #475569; }

        .hp-dc-action { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

        .hp-dc-price { font-size: 14px; font-weight: 700; color: #0f172a; white-space: nowrap; }

        .hp-dc-cta {
            display: inline-flex; align-items: center; gap: 5px;
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff !important; text-decoration: none !important;
            font-size: 14px; font-weight: 800; padding: 7px 16px;
            border-radius: 9px; white-space: nowrap;
            box-shadow: 0 2px 8px rgba(16,185,129,.3);
            transition: all .15s;
        }

        .hp-dc-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,185,129,.4); }

        /* Reset so the same look works on a <button> (Add to Cart), not just an <a> */
        button.hp-dc-cta { border: none; font-family: inherit; cursor: pointer; }

        button.hp-dc-cta.added {
            background: linear-gradient(135deg, #64748b, #475569);
            box-shadow: none; cursor: default; opacity: .9;
        }

        button.hp-dc-cta.added:hover { transform: none; box-shadow: none; }

        button.hp-dc-cta:disabled { pointer-events: none; }


        .hp-ds-results-bar {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 0 0; font-size: 14px; color: #94a3b8;
            border-top: 1px solid #f1f5f9; margin-top: 10px;
        }

        .hp-ds-close-btn {
            background: none; border: none; color: #94a3b8; cursor: pointer;
            font-size: 14px; font-weight: 600; padding: 2px 6px;
            border-radius: 6px; transition: all .1s;
        }

        .hp-ds-close-btn:hover { background: #f1f5f9; color: #475569; }

        .hp-ds-error { padding: 12px 4px; color: #ef4444; font-size: 14px; }

        .hp-ds-empty { padding: 12px 4px; color: #94a3b8; font-size: 14px; text-align: center; }

        .hp-dc.pinned { border-width: 2px; }

        .hp-dc.pinned.available { border-color: #6ee7b7; }

        .hp-ds-alt-label {
            font-size: 14px; font-weight: 700; color: #cbd5e1;
            text-transform: uppercase; letter-spacing: .06em;
            padding: 4px 0 2px; margin-top: 2px;
        }
@media (prefers-reduced-motion: reduce) {

            .hp-hero::before, .hp-hero::after,
            .hp-hero-eyebrow, .hp-hero h1, .hp-hero h1 span, .hp-hero-sub,
            .hp-trust-bar, .hp-ds-wrap, .hp-live-dot,
            .hp-hero-cta-row, .hp-hero-cta-primary::after {
                animation: none !important;
            }
}
@media(max-width:768px) {

            .hp-ds-wrap { padding: 16px 14px 12px; border-radius: 16px; }

            .hp-ds-row { flex-direction: column; gap: 8px; }

            .hp-ds-btn { width: 100%; justify-content: center; height: 50px; }

            .hp-ds-btn-label { display: inline; }

            .hp-ds-chips { gap: 6px; margin-top: 10px; }

            .hp-dc { flex-wrap: wrap; }

            .hp-dc-action { flex-wrap: wrap; gap: 8px; }
}
@media(max-width:480px) {

            .hp-ds-chips-label { display: none; }

            .hp-dc-price { display: none; }
}

.hp-ds-label {
    color: rgba(255,255,255,.55); font-size: 14px; font-weight: 600;
    text-align: center; margin: 0 0 10px;
    animation: hpFadeUp .7s cubic-bezier(.16,1,.3,1) .5s both;
}
@media (prefers-reduced-motion: reduce) {

    .hp-hero-cta-row, .hp-ds-label, .hp-hero-cta-primary::after { animation: none !important; }
}