/* =============================================
   CONVERSION CALCULATOR — conversion.css
   Tool-specific styles only.
   Common styles are in tool.css
   ============================================= */

.conv-calc { width: 100%; }

/* Tab switcher */
.conv-tabs {
    display: flex;
    gap: 0;
    border-bottom: none;
    margin-bottom: 0;
}
.conv-tab {
    padding: 9px 20px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-right: none;
    background: var(--light);
    color: var(--text2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-main);
    transition: all 0.2s;
    border-radius: 8px 8px 0 0;
}
.conv-tab:last-child { border-right: 1px solid var(--border); }
.conv-tab:hover:not(.active) { background: #e2e8f0; color: var(--navy); }
.conv-tab.active {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    position: relative;
    z-index: 1;
}

/* Body */
.conv-body {
    border: 1px solid var(--border);
    border-radius: 0 8px 8px 8px;
    background: var(--white);
    padding: 20px;
    box-shadow: var(--shadow);
}

/* Two columns */
.conv-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.conv-col { display: flex; flex-direction: column; gap: 8px; }
.conv-col-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}

/* Inputs */
.conv-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--teal);
    border-radius: 8px;
    font-size: 16px;
    font-family: var(--font-mono);
    color: var(--text);
    background: var(--white);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.conv-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13,33,55,0.1); }
.conv-input-result {
    background: var(--light);
    color: var(--navy);
    font-weight: 700;
    cursor: default;
    border-color: var(--border);
}

/* List boxes */
.conv-list {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-main);
    color: var(--text);
    background: var(--white);
    outline: none;
    padding: 4px;
    min-height: 220px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.conv-list:focus { border-color: var(--teal); }
.conv-list option {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.conv-list option:checked {
    background: var(--navy);
    color: #fff;
    font-weight: 600;
}
.conv-list option:hover { background: #f0fdf9; }

/* Result row */
.conv-result-row {
    margin-top: 16px;
    padding: 10px 16px;
    background: var(--light);
    border: 1px solid var(--border);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text2);
}
.conv-result-text {
    color: #dc2626;
    font-weight: 700;
    font-family: var(--font-mono);
}

@media (max-width: 600px) {
    .conv-columns { grid-template-columns: 1fr; }
    .conv-tabs { flex-wrap: wrap; }
    .conv-tab { border-radius: 6px; border: 1px solid var(--border); margin: 2px; }
    .conv-tab.active { border-color: var(--navy); }
    .conv-body { border-radius: var(--radius); }
}