/* Techniquehow: minimal header, pro input/button and copy button */
.tg-lookup-outer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.tg-lookup-card {
    width: 100%;
    max-width: 1100px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 12px;
    box-shadow: 0 6px 22px rgba(20,30,50,0.06);
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid rgba(15,25,40,0.04);
}

/* Input area */
.tg-input-wrap {
    display:flex;
    gap:12px;
    align-items:center;
    width:100%;
    box-sizing:border-box;
}

/* Stylish input */
.tg-input {
    flex:1;
    padding:16px 18px;
    border-radius:12px;
    border:1px solid rgba(15,30,60,0.08);
    font-size:16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    transition: box-shadow .15s ease, transform .08s ease;
    outline:none;
}
.tg-input:focus {
    box-shadow: 0 6px 18px rgba(3,102,214,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
    transform: translateY(-1px);
    border-color: rgba(3,102,214,0.14);
}

/* Stylish button */
.tg-button {
    display:flex;
    align-items:center;
    gap:8px;
    background: linear-gradient(180deg,#0b74ff 0%, #0459d1 100%);
    color: white;
    border: none;
    padding:14px 18px;
    font-weight:700;
    border-radius:12px;
    cursor:pointer;
    min-width:140px;
    box-shadow: 0 12px 30px rgba(4,85,160,0.18);
    transition: transform .12s ease, box-shadow .12s ease;
}
.tg-button svg { opacity:0.95; }
.tg-button:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(4,85,160,0.22); }
.tg-button:active { transform: translateY(-1px); }

/* Message hidden by default */

/* Result card */
.tg-result { margin-top:16px; }
.tg-result-card {
    display:block;
    width:100%;
    border-radius:12px;
    padding:14px;
    box-sizing:border-box;
    background: linear-gradient(180deg,#f9fdff 0%, #ffffff 100%);
    border: 1px solid rgba(6,60,100,0.04);
    box-shadow: 0 12px 36px rgba(12,36,60,0.04);
}

.tg-result-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px dashed rgba(10,30,50,0.04);
}
.tg-result-row:last-child { border-bottom:none; }

.tg-result-label {
    font-weight:700;
    color:#1b425e;
    font-size:15px;
}
.tg-result-value-wrap { display:flex; gap:10px; align-items:center; }

.tg-result-value {
    font-weight:700;
    font-size:16px;
    color:#0b3a66;
    background:linear-gradient(90deg,#f0f9ff,#ecf6ff);
    padding:8px 12px;
    border-radius:10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Copy button */
.tg-copy-btn {
    background: transparent;
    border: 1px solid rgba(6,60,100,0.06);
    padding:8px 10px;
    border-radius:8px;
    cursor:pointer;
    font-weight:700;
    color:#0b3a66;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition: background .12s ease, transform .08s ease;
}
.tg-copy-btn svg { opacity:0.9; }
.tg-copy-btn.copied {
    background: linear-gradient(90deg,#e6fbf2,#dff7ee);
    border-color: rgba(3,160,110,0.12);
    color: #046a3d;
    transform: translateY(-2px);
}

/* Responsive behavior */
@media (max-width:720px) {
    .tg-input-wrap { flex-direction:column; align-items:stretch; }
    .tg-button { width:100%; min-width:0; }
}

/* Button loading spinner */
.tg-button.loading { cursor: default; opacity: 0.95; transform: none; box-shadow: 0 10px 30px rgba(4,85,160,0.16); }
.tg-button.loading .btn-spinner {
    display:inline-block;
    width:16px;
    height:16px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.25);
    border-top-color: rgba(255,255,255,0.95);
    animation: tg-spin 0.9s linear infinite;
    margin-right:8px;
    vertical-align:middle;
}
@keyframes tg-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* Ensure button height consistent */
.tg-button { padding:16px 20px; min-height:54px; }
.tg-button .tg-button-text { display:inline-block; }
.tg-input { padding:16px 18px; min-height:54px; }
/* When disabled */
.tg-button[disabled] { opacity:0.85; pointer-events:none; }
