/* Currency Converter (.cc-*) */

.cc-card { padding: 16px 18px; margin-bottom: 14px; }

/* Form */
.cc-form { margin-bottom: 14px; }
.cc-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.cc-label {
    font: 600 11px var(--yst-font);
    color: var(--yst-text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.cc-amount-input { font-size: 16px !important; font-weight: 600 !important; }

.cc-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: end;
}
.cc-swap-wrap { padding-bottom: 4px; }
.cc-swap-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--yst-border);
    background: #fff;
    color: var(--yst-text-2);
    font-size: 16px;
    cursor: pointer;
    transition: all .2s;
}
.cc-swap-btn:hover {
    border-color: var(--yst-brand);
    color: var(--yst-brand);
    background: var(--yst-brand-soft);
    transform: rotate(180deg);
}

/* Convert button */
.cc-convert-btn { width: 100%; height: 46px !important; font-size: 14px !important; margin-bottom: 12px; }

/* Loading */
.cc-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--yst-bg-subtle);
    border-radius: 6px;
    color: var(--yst-text-muted);
    font: 13px var(--yst-font);
}
.cc-spinner {
    width: 18px; height: 18px;
    border: 3px solid var(--yst-bg-subtle);
    border-top-color: var(--yst-brand);
    border-radius: 50%;
    animation: cc-spin 1s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* Error */
.cc-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: 6px;
    font: 12px var(--yst-font);
}

/* Result */
.cc-result {
    background: linear-gradient(135deg, var(--yst-brand-soft) 0%, #f0fdfa 100%);
    border: 1px solid var(--yst-brand);
    border-radius: 10px;
    padding: 18px 20px;
    text-align: center;
}
.cc-result-label {
    font: 600 12px var(--yst-font);
    color: var(--yst-brand);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
}
.cc-result-amount {
    font: 800 36px/1 var(--yst-font);
    color: var(--yst-text);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}
.cc-result-details {
    font: 13px var(--yst-font-mono, monospace);
    color: var(--yst-text-muted);
}

@media (max-width: 768px) {
    .cc-pair { grid-template-columns: 1fr; }
    .cc-swap-wrap { display: flex; justify-content: center; }
    .cc-swap-btn { transform: rotate(90deg); }
    .cc-result-amount { font-size: 28px; }
}