#macro-calculator-parent {

--background-color: #eef0f4;

--container-color: #ffffff;

--text-color: #333;

--primary-color: #28a745;

--primary-hover-color: #2ebf4f;

--input-bg-color: #f7f7f9;

--input-border-color: #d1d9e6;

--shadow-light: #ffffff;

--shadow-dark: #c8d0e0;

--success-color: #28a745;

--error-color: #dc3545;


/* Results Section Colors */

--protein-color: #36a2eb;

--carbs-color: #ffcd56;

--fat-color: #ff6384;



font-family: 'Inter', sans-serif;

color: var(--text-color);

line-height: 1.5;

}



#macro-calculator-parent * {

margin: 0;

padding: 0;

box-sizing: border-box;

}



/* RTL Support */

#macro-calculator-parent.rtl {

direction: rtl;

font-family: 'Cairo', sans-serif;

}

#macro-calculator-parent.rtl * {

font-family: 'Cairo', sans-serif;

}



/* Main Calculator Container - Neumorphic Design */

#macro-calculator-parent .calculator-container {

width: 100%;

max-width: 600px;

background-color: var(--background-color);

border-radius: 20px;

padding: 30px 40px;

box-shadow: 10px 10px 20px var(--shadow-dark), -10px -10px 20px var(--shadow-light);

margin: 20px auto;

}



#macro-calculator-parent h1 {

text-align: center;

margin-bottom: 30px;

font-size: 2rem;

font-weight: 700;

color: var(--primary-color) !important;

}


#macro-calculator-parent h2.section-title {

font-size: 1.2rem;

margin-top: 20px;

margin-bottom: 15px;

color: #555 !important;

border-bottom: 2px solid var(--input-border-color);

padding-bottom: 10px;

}



/* Form Styling - Neumorphic */

#macro-calculator-parent #macro-form {

display: flex;

flex-direction: column;

gap: 25px;

}



#macro-calculator-parent .form-group {

display: flex;

flex-direction: column;

gap: 8px;

}


#macro-calculator-parent .form-row {

display: flex;

gap: 20px;

}


#macro-calculator-parent .form-row .form-group {

flex: 1;

}



#macro-calculator-parent label {

font-weight: 600;

font-size: 0.9rem;

color: var(--text-color);

}



#macro-calculator-parent input,

#macro-calculator-parent select {

width: 100%;

padding: 12px 15px;

border-radius: 10px;

border: 1px solid var(--input-border-color);

background-color: var(--input-bg-color);

font-size: 1rem;

transition: all 0.3s ease;

box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);

}



#macro-calculator-parent input:focus,

#macro-calculator-parent select:focus {

outline: none;

border-color: var(--primary-color);

box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2), inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);

}


#macro-calculator-parent .radio-group {

display: flex;

gap: 10px;

border: 1px solid var(--input-border-color);

border-radius: 10px;

padding: 5px;

background-color: var(--input-bg-color);

box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);

}



#macro-calculator-parent .radio-group label {

flex: 1;

text-align: center;

padding: 10px;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

font-weight: 500;

}



#macro-calculator-parent .radio-group input[type="radio"] {

display: none;

}



#macro-calculator-parent .radio-group input[type="radio"]:checked + label {

background-color: var(--primary-color) !important;

color: white !important;

box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}



#macro-calculator-parent button[type="submit"] {

padding: 15px;

border: none;

border-radius: 12px;

background-color: var(--primary-color) !important;

color: white !important;

font-size: 1.1rem;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);

margin-top: 10px;

}



#macro-calculator-parent button[type="submit"]:hover {

background-color: var(--primary-hover-color) !important;

}


#macro-calculator-parent button[type="submit"]:active {

box-shadow: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);

transform: translateY(2px);

}



/* Results Section - Flat Card Design */

#macro-calculator-parent #results {

margin-top: 30px;

padding: 25px;

background-color: #ffffff; /* White card for results */

border-radius: 16px;

display: none; /* Initially hidden */

border: 1px solid #ddd;

box-shadow: 0 4px 12px rgba(0,0,0,0.1);

}


#macro-calculator-parent #results .section-title {

color: #1c1e21 !important;

border-bottom: 1px solid #e0e0e0;

}



#macro-calculator-parent .results-container {

display: grid;

grid-template-columns: 1fr 1.5fr;

gap: 30px;

align-items: center;

}



#macro-calculator-parent .chart-container {

position: relative;

height: 250px;

width: 250px;

margin: 0 auto;

}



#macro-calculator-parent .results-grid {

display: flex;

flex-direction: column;

gap: 15px;

}



#macro-calculator-parent .result-item {

display: flex;

justify-content: space-between;

align-items: center;

padding: 12px;

border-radius: 8px;

background-color: #f7f7f7;

border-left: 5px solid;

}


#macro-calculator-parent #composition-results .result-item {

flex-direction: column;

gap: 5px;

border-left: none;

border-bottom: 3px solid var(--primary-color);

}





#macro-calculator-parent .result-item h3 {

font-size: 1rem;

font-weight: 500;

color: #606770;

}



#macro-calculator-parent .result-item p {

font-size: 1.2rem;

font-weight: 600;

color: #1c1e21;

}


#macro-calculator-parent .result-item.protein { border-color: var(--protein-color); }

#macro-calculator-parent .result-item.carbs { border-color: var(--carbs-color); }

#macro-calculator-parent .result-item.fat { border-color: var(--fat-color); }

#macro-calculator-parent .result-item.calories { border-color: var(--primary-color); }



#macro-calculator-parent #composition-results {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

gap: 15px;

text-align: center;

}



/* Error Message */

#macro-calculator-parent #error-message {

color: var(--error-color);

text-align: center;

margin-top: 15px;

font-weight: 500;

display: none; /* Initially hidden */

}



/* Responsive Design */

@media (max-width: 768px) {

.results-container {

grid-template-columns: 1fr !important;

}

.chart-container {

margin-bottom: 20px;

}

}



@media (max-width: 480px) {

#macro-calculator-parent .calculator-container {

padding: 20px;

}

#macro-calculator-parent .form-row {

flex-direction: column;

gap: 25px;

}

#macro-calculator-parent h1 {

font-size: 1.8rem;

}

}