/*
  =================================================================
  File styles for Calories Burned Calculator
  Version: 1.1 - A11y Optimizations
  =================================================================
*/

/* --- Activity Select Box --- */
#activity {
    width: 100%;
    padding: 14px 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    font-size: 1rem;
    font-family: var(--font-family-base);
    background-color: white;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239d4edd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 15px center; /* For RTL */
    background-size: 1em;
    padding-left: 40px; /* Space for the custom arrow */
}

#activity:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(123, 44, 191, 0.1);
    outline: none;
}
/* Style invalid state (when placeholder is selected) */
#activity:invalid, 
#activity option[value=""] { /* Target the placeholder option specifically */
    color: var(--light-text-color);
}
/* Ensure selected valid options use normal text color */
#activity option {
    color: var(--text-color);
}


/* --- Custom Calories Result Card --- */
.result-card-calories {
    background: linear-gradient(145deg, var(--cat-تناسب-اندام), #ff9a4f); /* Orange */
    color: white;
    border-radius: var(--border-radius-base);
    padding: 40px 30px; /* More padding */
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    
    /* === Change 1: Add prefers-reduced-motion check === */
    @media (prefers-reduced-motion: no-preference) {
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
}

.result-card-calories.visible {
    opacity: 1;
    transform: translateY(0);
}

.result-card-calories .result-header h3 {
    font-size: 1.2rem;
    font-weight: normal;
    opacity: 0.9;
    margin-bottom: 5px;
    color: white; /* Ensure text is white */
}

.result-card-calories .result-value {
    font-size: clamp(3rem, 10vw, 4.5rem);
    font-weight: bold;
    line-height: 1.1;
    margin: 10px 0 5px 0;
    color: white; /* Ensure text is white */
}

.result-card-calories .unit {
    font-size: 1.3rem;
    opacity: 0.9;
    font-weight: bold;
     color: white; /* Ensure text is white */
}

.result-card-calories .result-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
    color: rgba(255, 255, 255, 0.8);
}

/* --- MET Table Styles --- */
.met-table-container {
    overflow-x: auto;
    margin: 20px 0;
}
table { width: 100%; border-collapse: collapse; text-align: center; }
th, td { padding: 12px 15px; border: 1px solid var(--border-color); vertical-align: middle; }
th { background-color: var(--bg-color); font-weight: bold; }
tbody tr:nth-child(even) { background-color: #f8f7ff; }

/* === Change 2: Add prefers-reduced-motion check for base styles === */
/* (Base transitions are in tool-base.css, applying here for specificity if needed) */
@media (prefers-reduced-motion: reduce) {
    .date-input,
    .segmented-control label,
    .result-card-calories { /* Cover all transitions in this file */
        transition: none !important; /* Force no transition */
    }
}