/* custom.css */

/* Offsite Ads Pills */
.offsite-ads-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* Touch target minimum */
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1rem;
    background-color: #f1f5f9; /* slate-100 */
    color: #475569; /* slate-600 */
    border: 1px solid #cbd5e1; /* slate-300 */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.offsite-ads-pill:hover {
    background-color: #e2e8f0; /* slate-200 */
}

.offsite-ads-pill.active {
    background-color: #F1641E; /* Primary */
    color: white;
    border-color: #F1641E;
    box-shadow: 0 4px 6px -1px rgba(241, 100, 30, 0.2), 0 2px 4px -1px rgba(241, 100, 30, 0.1);
}

/* Result Container State Classes — applied to #result-profit-container by JS */
.result-state-empty {
    background-color: #f3f4f6 !important; /* gray-100 */
}

.result-state-positive {
    background-color: #dcfce7 !important; /* green-100 */
}

.result-state-negative {
    background-color: #fee2e2 !important; /* red-100 */
}

/* Profit Colors - Applied to #result-net-profit and #result-profit-margin by JS */
.profit-positive {
    color: #15803d !important; /* green-700 */
}

.profit-negative {
    color: #b91c1c !important; /* red-700 */
}

/* AdSense Placeholders for Development/Planning */
.adsense-placeholder {
    background-color: #e2e8f0; /* slate-200 */
    border: 1px dashed #94a3b8; /* slate-400 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b; /* slate-500 */
    font-size: 0.875rem;
    font-family: monospace;
    margin: 1.5rem auto; /* Default margin to separate from content */
}

/* Responsive Ad Container Sizes */
.ad-leaderboard {
    width: 100%;
    max-width: 728px;
    height: 90px;
}

@media (max-width: 767px) {
    .ad-leaderboard {
        max-width: 320px;
        height: 100px;
    }
}

.ad-rectangle {
    width: 300px;
    height: 250px;
    margin: 2rem auto; /* Explicit separation from the sticky result column as requested by user */
}

/* Base input overrides for mobile Safari (ensure 16px min) */
input[type="number"] {
    font-size: 16px !important;
}