/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Word Unscrambler Bahasa Indonesia — style.css
   Tool-specific overrides. Base: /assets/css/tool-page.css
   ════════════════════════════════════════════════════════════════════════════ */

/* Input uppercase + monospace */
.tool-input {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family:    'SFMono-Regular', 'Consolas', 'IBM Plex Sans', monospace;
}
.tool-input::placeholder {
    text-transform: none;
    letter-spacing: 0;
}

/* Pulsing dots loader */
.loading-spinner {
    display: flex; align-items: center; justify-content: center;
    gap: 0.45rem; margin: 0 auto 1rem; width: fit-content;
}
.loading-spinner::before, .loading-spinner::after, .loading-spinner span {
    content: ''; display: block; width: 10px; height: 10px;
    border-radius: 50%; background: var(--accent);
    animation: ws-pulse 1.1s ease-in-out infinite;
}
.loading-spinner::before { animation-delay: 0s; }
.loading-spinner span    { animation-delay: 0.18s; }
.loading-spinner::after  { animation-delay: 0.36s; }
@keyframes ws-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* Word chip: monospace */
.word-chip {
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    font-size:   0.875rem;
}

/* Kata dasar badge — shown beneath word chips */
.kata-dasar-badge {
    display:      inline-block;
    font-size:    0.6875rem;
    font-weight:  700;
    color:        #059669;
    background:   #ecfdf5;
    border:       1px solid #a7f3d0;
    border-radius: 4px;
    padding:      0.1rem 0.375rem;
    margin-left:  0.25rem;
    vertical-align: middle;
    white-space:  nowrap;
}

/* Language switcher pill */
.lang-switcher {
    display: inline-flex; gap: 0.375rem; align-items: center;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.2rem 0.75rem;
    font-size: 0.8125rem; font-weight: 600;
}
.lang-switcher a   { color: var(--muted); text-decoration: none; }
.lang-switcher a:hover { color: var(--accent); }
.lang-switcher .active { color: var(--accent); pointer-events: none; }
.lang-switcher-sep { color: var(--border); font-weight: 400; }

/* cache-buster: 2026-05-24T05:06:05Z */