/*
Crypto Tax Estimator Advanced - Custom Styles for Upay.best
Primary Color Code: #00BD8D (Upay Blue/Green from provided CSS)
*/

.cte-container {
    max-width: 980px;
    margin: 18px auto;
    font-family: Arial, Helvetica, sans-serif;
    background: #fff;
    padding: 24px; /* Increased padding for a cleaner look */
    border-radius: 8px;
    /* Adjusted shadow for better fit and elevation */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
    border: 1px solid #eee;
}

.cte-sub {
    color: #666;
    margin-top: -8px;
    margin-bottom: 12px;
}

.cte-grid {
    display: flex;
    gap: 20px; /* Adjusted gap */
    flex-wrap: wrap;
}

.cte-panel {
    flex: 1 1 420px;
    /* Minimal border and white background for seamless blending */
    border: 1px solid #ddd;
    padding: 16px; /* Adjusted padding */
    border-radius: 8px;
    background: #fff;
}

.cte-panel h2, .cte-panel h3 {
    color: #333; /* Ensuring dark text for headings */
    margin-top: 0;
}

.cte-panel label {
    display: block;
    margin-bottom: 12px; /* Increased spacing */
    font-size: 14px;
    font-weight: 500;
}

.cte-panel input[type="number"], 
.cte-panel input[type="text"], 
.cte-panel select {
    width: 100%;
    padding: 8px 10px;
    margin-top: 4px;
    box-sizing: border-box;
    border: 1px solid #ccc; /* Slightly more defined borders for inputs */
    border-radius: 4px;
}

/* ------------------ BUTTON STYLES (Color Matched) ------------------ */

.cte-btn {
    border: 0;
    padding: 10px 16px; /* Increased padding for better click area */
    border-radius: 6px;
    /* Primary Upay Blue/Green */
    background: #00BD8D; 
    color: #fff;
    cursor: pointer;
    margin-right: 8px;
    margin-top: 10px;
    transition: background 0.3s ease;
}

.cte-btn:hover {
    background: #00BD8D; /* Darker blue on hover */
}

.cte-btn-ghost {
    background: #f0f0f0;
    color: #222;
}

.cte-btn-ghost:hover {
    background: #e0e0e0;
}

.cte-btn-outline {
    background: transparent;
    /* Primary Upay Blue/Green border and text */
    border: 1px solid #00BD8D; 
    color: #00BD8D;
}

.cte-btn-outline:hover {
    background: #e6f0ff; /* Light background on hover for outline buttons */
}

/* ------------------ TABLE STYLES ------------------ */

.cte-summary {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
}

.cte-summary div strong {
    color: #00BD8D; /* Use blue/green for key summary labels */
}

.cte-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.cte-table th, .cte-table td {
    border: 1px solid #eee;
    padding: 8px;
    text-align: left;
    font-size: 14px;
}

.cte-table th {
    background: #f0f0f0;
    font-weight: bold;
}

.cte-table input[type="number"] {
    max-width: 80px;
    text-align: center;
    border: 1px solid #ccc;
    padding: 4px;
    margin: 0 auto;
    display: block;
}

/* Ensure responsiveness on small screens */
@media (max-width: 600px) {
    .cte-grid {
        flex-direction: column;
        gap: 15px;
    }
    .cte-panel {
        flex: 1 1 100%;
    }
}