/*
Theme Name: Trip Cost Forecaster
Theme URI: https://example.com/trip-cost-forecaster
Author: Your Name
Author URI: https://example.com
Description: A theme for forecasting trip costs using Tiket.com affiliate links.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: travel, dark, modern, responsive
Text Domain: trip-cost-forecaster
*/

/* Custom styles based on the design system */
:root {
    --primary: #2E6AF6;
    --secondary: #00C2A8;
    --accent: #FFB020;
    --surface: #1D2B4A; /* Updated: Darker indigo for base */
    --card: #121A2B;
    --muted: #9FB0C6;
    --success: #17B26A;
    --warning: #F79009;
    --danger: #F04438;
    --text: #E5F0FF;
    --text-muted: #B7C6DA;
    --border: rgba(255, 255, 255, 0.12);
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* Updated: Gradient Background */
    background-color: var(--surface); /* Fallback */
    background-image: linear-gradient(to bottom right, #1D2B4A, #00C2A8);
    background-attachment: fixed; /* Ensures gradient doesn't scroll with content */
    color: var(--text);
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    transition: background-color 120ms cubic-bezier(.2,.8,.2,1);
}
.btn-primary:hover {
    background-color: #5286f7;
}

.btn-secondary {
    background-color: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    transition: background-color 120ms cubic-bezier(.2,.8,.2,1);
}
.btn-secondary:hover {
    background-color: #1a2438;
}

.card {
    background-color: var(--card);
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.form-input, .form-select {
    background-color: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    transition: border-color 120ms cubic-bezier(.2,.8,.2,1), box-shadow 120ms cubic-bezier(.2,.8,.2,1);
}
.form-input:focus, .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--accent);
}

/* Custom animation for results appearing */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.results-animate {
    animation: slideInUp 400ms cubic-bezier(.2,.8,.2,1) forwards;
}