/* Currency Converter Specific UI */

.hidden { display: none !important; }

/* Grid Layout */
.cc-currency-grid { 
    display: grid; 
    grid-template-columns: 1fr auto 1fr; 
    gap: 15px; 
    align-items: center; 
    margin-bottom: 30px; 
}

.cc-group { margin-bottom: 0 !important; }
.cc-select { font-weight: 700; cursor: pointer; }

/* Swap Button */
.cc-swap-wrapper { 
    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    padding-bottom: 5px; 
}

.cc-swap-btn { 
    width: 50px; 
    height: 50px; 
    background: var(--bg-secondary); 
    border: 2px solid var(--border); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--text-muted); 
    cursor: pointer; 
    transition: 0.3s ease; 
    margin-top: 25px; /* Aligns with input boxes */
}

.cc-swap-btn:hover { 
    background: var(--primary); 
    color: #fff; 
    border-color: var(--primary); 
    transform: scale(1.05);
}

.cc-swap-btn i { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.cc-swap-btn.rotated i { transform: rotate(180deg); }

/* Result Box */
.cc-result-box { 
    margin-top: 35px; 
    padding: 30px; 
    background: var(--bg-card); 
    border-radius: 16px; 
    border: 2px dashed var(--border); 
    text-align: center; 
    animation: fadeIn 0.4s ease; 
}

.cc-main-rate { 
    font-size: 2.2rem; 
    font-weight: 900; 
    color: var(--text-main); 
    font-family: 'Consolas', monospace; 
    margin-bottom: 8px; 
    word-break: break-word; 
}

.cc-main-rate .highlight { color: var(--primary); }

.cc-sub-rate { 
    font-size: 1.1rem; 
    font-weight: 700; 
    color: var(--text-muted); 
    margin-bottom: 25px; 
}

.cc-rate-info { 
    display: inline-block; 
    background: var(--bg-input); 
    padding: 8px 16px; 
    border-radius: 20px; 
    font-size: 0.8rem; 
    font-weight: 800; 
    color: var(--text-muted); 
    border: 1px solid var(--border); 
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .cc-currency-grid { grid-template-columns: 1fr; gap: 15px; }
    .cc-swap-wrapper { padding-bottom: 0; padding-top: 0px; }
    .cc-swap-btn { margin-top: 0; width: 45px; height: 45px; transform: rotate(90deg); }
    .cc-swap-btn:hover { transform: rotate(90deg) scale(1.05); }
    .cc-swap-btn.rotated i { transform: rotate(270deg); } 
    .cc-main-rate { font-size: 1.6rem; }
}