/**
 * Professional BMI Calculator - New Modern Layout Styles (Complete)
 *
 * This file contains all styles specific to the "New Modern" calculator layout,
 * activated by the [professional_modern_calculator] shortcode.
 * It aims to match the Canva designs (0000.png, 01.png, 02.png) closely,
 * including smooth transitions for unit fields and responsive design.
 *
 * @package   Professional_BMI_Calculator
 * @version   1.1.6
 */

/* --- Root Variables (المتغيرات الرئيسية) --- */
/* يفترض أن هذه المتغيرات مُعرفة بشكل عام (في ملف CSS رئيسي أو يتم حقنها بواسطة PHP).
  إذا لم تكن كذلك، يمكنك إلغاء التعليق عن هذا القسم وتعديل القيم لتناسب تصميمك.
*/
/*
:root {
	--pbc-primary-color: #6a11cb;  // اللون البنفسجي الأساسي
	--pbc-primary-color-rgb: 106, 17, 203;
	--pbc-secondary-color: #2575fc; 
	--pbc-text-color: #373a3c;      
	--pbc-label-color: #5c677d;     
	--pbc-border-color: #e1e4e8;    
	--pbc-input-bg: #f7f8fc;        
	--pbc-white-bg: #ffffff;        
	--pbc-button-text-color: #ffffff; 
	--pbc-font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 
	--pbc-inactive-button-text: #495057; 
	--pbc-slider-track-bg: #e9ecef;      
	--pbc-slider-thumb-bg: var(--pbc-primary-color); 
    --pbc-card-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); 
    --pbc-card-border-radius: 16px;     
    --pbc-input-card-border-radius: 12px; 
    --pbc-input-border-radius: 8px;       
    --pbc-light-purple-bg: #f4f2ff; 
	--pbc-gauge-underweight-color: #5cacee; 
	--pbc-gauge-normal-color: #5de2a1;    
	--pbc-gauge-overweight-color: #ffd359;  
	--pbc-gauge-obese-color: #ff7b7b;       
}
*/

.pbc-layout-modern-new .pbc-modern-field-icon .dashicons {
    vertical-align: middle;
}

/* --- Unit Toggle Card (بطاقة مبدل الوحدات) --- */
.pbc-layout-modern-new .pbc-modern-unit-toggle-card {
    background-color: #fff;
    padding: 0.8em; 
    box-shadow: none; 
}
.pbc-layout-modern-new .pbc-modern-unit-toggle-fieldset { /* fieldset داخل بطاقة مبدل الوحدات */
    margin-bottom: 0; 
    padding: 0; /* إزالة أي حشو افتراضي من fieldset */
    border: none; /* إزالة أي إطار افتراضي من fieldset */
}
.pbc-layout-modern-new .pbc-modern-unit-toggle { /* الحاوية الفعلية لأزرار Metric/Imperial */
	display: flex;
	border-radius: 22px; 
	background-color: var(--pbc-input-bg, #f0f2f5); 
	padding: 4px; 
    max-width: 200px; 
    margin-left: auto;
    margin-right: auto;
}
.pbc-layout-modern-new .pbc-modern-unit-toggle input[type="radio"] {
	display: none; 
}
.pbc-layout-modern-new .pbc-modern-unit-toggle .pbc-modern-toggle-label {
	flex: 1;
	padding: 0.55em 0.8em; 
	text-align: center;
	font-weight: 600;
	font-size: 0.85em; 
	color: var(--pbc-inactive-button-text, #495057);
	background-color: transparent;
	border-radius: 18px; 
	cursor: pointer;
	transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
	z-index: 1;
}
.pbc-layout-modern-new .pbc-modern-unit-toggle input[type="radio"]:checked + .pbc-modern-toggle-label {
	background-color: var(--pbc-primary-color, #6a11cb);
	color: var(--pbc-button-text-color, #ffffff);
	box-shadow: 0 3px 8px rgba(var(--pbc-primary-color-rgb, 106,17,203), 0.35);
}

/* --- Age & Gender Card (بطاقة العمر والجنس) --- */
.pbc-layout-modern-new .pbc-modern-age-gender-card .pbc-modern-input-row {
    display: flex;
    align-items: flex-start;
}
.pbc-layout-modern-new .pbc-modern-age-field { /* حاوية حقل العمر */
    flex: 0 0 calc(50% - 0.75em); 
}
.pbc-layout-modern-new .pbc-modern-gender-field { /* حاوية اختيار الجنس */
    flex: 1;
    border: none;
}
.pbc-layout-modern-new .pbc-modern-input { /* حقل إدخال العمر */
	width: 100%;
	padding: 0.85em 1em; 
	border: 1px solid var(--pbc-border-color, #e0e0e0);
	border-radius: var(--pbc-input-border-radius, 8px);
	background-color: var(--pbc-white-bg, #fdfdfd); 
	font-size: 0.95em;
	color: var(--pbc-text-color, #333333);
	box-sizing: border-box;
}
.pbc-layout-modern-new .pbc-modern-input::placeholder {
    color: #aaa; 
}
.pbc-layout-modern-new .pbc-modern-input:focus {
	border-color: var(--pbc-primary-color, #6a11cb);
	box-shadow: 0 0 0 2px rgba(var(--pbc-primary-color-rgb, 106,17,203), 0.15);
	outline: none;
}

/* Gender Selection Styling (تنسيق اختيار الجنس) */
.pbc-layout-modern-new .pbc-modern-gender-selector {
	display: flex;
	gap: 0.8em; 
    align-items: center; 
}
.pbc-layout-modern-new .pbc-modern-gender-option { /* label لكل خيار جنس */
	flex: 1; 
	display: flex;
	align-items: center;
	justify-content: flex-start; 
	padding: 0.4em; 
	border: none; 
	border-radius: var(--pbc-input-border-radius, 8px);
	background-color: transparent; 
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.pbc-layout-modern-new .pbc-modern-gender-option:not(.pbc-gender-selected):hover { /* لم أضف .pbc-gender-selected بعد، يمكن إضافتها بـ JS */
    opacity: 0.7;
}
.pbc-layout-modern-new .pbc-modern-gender-icon-wrapper { /* الدائرة حول أيقونة الجنس */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; 
    height: 36px; 
    border-radius: 50%;
    background-color: var(--pbc-input-bg, #f0f2f5); 
    margin-right: 8px; 
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent; /* إطار شفاف مبدئيًا */
}
.pbc-layout-modern-new .pbc-modern-gender-option .pbc-icon { /* أيقونة الجنس نفسها */
	font-size: 1.2em; 
	color: var(--pbc-label-color, #555555);
    line-height: 1;
    transition: color 0.2s ease;
}
.pbc-layout-modern-new .pbc-modern-gender-text { /* نص "Male" / "Female" */
	font-size: 0.9em; 
    font-weight: 500;
    color: var(--pbc-label-color, #555555); 
    transition: color 0.2s ease, font-weight 0.2s ease;
}
/* Selected state for Gender (حالة اختيار الجنس) */
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-gender-option .pbc-modern-gender-icon-wrapper {
	background-color: var(--pbc-primary-color, #6a11cb);
    border-color: var(--pbc-primary-color, #6a11cb);
}
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-gender-option .pbc-icon {
	color: var(--pbc-button-text-color, #ffffff);
}
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-gender-option .pbc-modern-gender-text {
	color: var(--pbc-primary-color, #6a11cb);
    font-weight: 600;
}
/* أيقونات الجنس باستخدام رموز Unicode */
.pbc-layout-modern-new .pbc-modern-gender-option .pbc-icon {
    font-family: Arial, sans-serif; 
    font-weight: bold; 
}
.pbc-layout-modern-new .pbc-icon-male::before { content: "\2642"; /* ♂ */ }
.pbc-layout-modern-new .pbc-icon-female::before { content: "\2640"; /* ♀ */ }


/* --- Card Titles (عناوين البطاقات الداخلية مثل "Body Measurements") --- */
.pbc-layout-modern-new .pbc-modern-card-title {
	font-size: 1.05em; 
	font-weight: 600;
	color: var(--pbc-text-color, #333333);
	margin-top: 0;
	margin-bottom: 1.2em; 
	display: flex;
	align-items: center;
}
.pbc-layout-modern-new .pbc-modern-card-title .dashicons {
	margin-right: 10px;
	color: var(--pbc-primary-color, #6a11cb);
	font-size: 1.2em;
}
.pbc-layout-modern-new .pbc-modern-card-subtitle { 
    font-size: 0.95em;
    color: var(--pbc-label-color, #555555);
    margin-top: -1em; 
    margin-bottom: 1.2em;
}

/* --- Sliders (أشرطة التمرير للطول والوزن ومستوى النشاط) --- */
.pbc-layout-modern-new .pbc-modern-slider-field { /* حاوية كل شريط تمرير (label + wrapper + minmax) */
    margin-bottom: 1.2em; 
}
.pbc-layout-modern-new .pbc-modern-slider-field:last-child {
    margin-bottom: 0.5em; 
}
.pbc-layout-modern-new .pbc-modern-slider-label { /* عنوان شريط التمرير مثل "Height" */
	display: block;
	font-size: 0.9em;
	color: var(--pbc-text-color, #333333); 
	margin-bottom: 0.5em;
    font-weight: 500;
}
.pbc-layout-modern-new .pbc-modern-slider-wrapper { /* حاوية شريط التمرير + حقل الرقم + الوحدة */
	display: flex;
	align-items: center;
	gap: 12px; 
	margin-bottom: 0.3em;
}
.pbc-layout-modern-new .pbc-modern-slider { /* شريط التمرير نفسه */
	flex-grow: 1;
	height: 6px; 
    width: 100%;
	-webkit-appearance: none;
	appearance: none;
	background: var(--pbc-slider-track-bg, #e9ecef);
	border-radius: 3px;
	outline: none;
	transition: opacity .2s;
}
.pbc-layout-modern-new .pbc-modern-slider:hover {
	opacity: 0.85; /* تأثير بسيط عند التحويم */
}
.pbc-layout-modern-new .pbc-modern-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px; 
	height: 18px;
	background: var(--pbc-slider-thumb-bg, #6a11cb);
	border-radius: 50%;
	cursor: pointer;
    border: 2px solid var(--pbc-white-bg, #ffffff); 
    box-shadow: 0 1px 4px rgba(0,0,0,0.25); 
    margin-top: -6px; 
}
.pbc-layout-modern-new .pbc-modern-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: var(--pbc-slider-thumb-bg, #6a11cb);
	border-radius: 50%;
	cursor: pointer;
    border: 2px solid var(--pbc-white-bg, #ffffff);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.pbc-layout-modern-new .pbc-modern-slider-value { /* حقل عرض قيمة شريط التمرير */
	min-width: 50px; 
	max-width: 65px;
	padding: 0.4em 0.3em; 
	border: none; 
	border-radius: var(--pbc-input-border-radius, 8px);
	text-align: right;
	font-weight: 600; 
	font-size: 0.95em; 
	color: var(--pbc-primary-color, #6a11cb);
    background-color: transparent; 
    appearance: textfield;
    -moz-appearance: textfield;
}

.pbc-layout-modern-new .pbc-modern-slider-value::-webkit-outer-spin-button,
.pbc-layout-modern-new .pbc-modern-slider-value::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.pbc-layout-modern-new .pbc-modern-slider-unit { /* وحدة القياس بجانب الرقم (cm, kg) */
	font-size: 0.85em;
	color: var(--pbc-label-color, #555555);
	font-weight: 500;
}
.pbc-layout-modern-new .pbc-modern-slider-minmax { /* نصوص "100cm" "250cm" تحت الشريط */
	display: flex;
	justify-content: space-between;
	font-size: 0.7em; 
	color: var(--pbc-label-color, #555555);
	padding: 0 2px; 
}
/* Activity Slider Specifics (تخصيص شريط مستوى النشاط) */
.pbc-layout-modern-new .pbc-modern-activity-slider {
    margin-top: 0.8em; 
}
.pbc-layout-modern-new .pbc-modern-slider-value-text { /* النص الذي يعرض مستوى النشاط */
    text-align: center;
    font-weight: 600;
    color: var(--pbc-primary-color, #6a11cb);
    font-size: 0.95em;
    margin-top: 0.6em;
    margin-bottom: 0.3em; 
}
/* Imperial Height Fields (تخطيط حقول الطول الإمبراطورية - قدم وبوصة جنبًا إلى جنب) */
.pbc-layout-modern-new .pbc-modern-imperial-height-fields {
    /* display: flex; -- يتم التحكم به من قاعدة .pbc-fields-active */
    gap: 1.5em; 
}

/* --- Unit Specific Field Visibility & Transition --- */
/* هذه القاعدة الأساسية للحقول التي سيتم التحكم في ظهورها/إخفائها */
.pbc-layout-modern-new .pbc-modern-metric-field,
.pbc-layout-modern-new .pbc-modern-imperial-field, /* يستهدف حاوية الوزن الإمبراطوري وحاوية الطول الإمبراطوري */
.pbc-layout-modern-new .pbc-modern-imperial-height-fields { /* يستهدف حاوية الطول الإمبراطوري بشكل خاص */
    transition: opacity 0.3s ease-out, 
                transform 0.3s ease-out, 
                max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1), /* منحنى تسريع لتحسين مظهر "الفتح" */
                margin-top 0.35s ease-out, 
                margin-bottom 0.35s ease-out,
                padding-top 0.35s ease-out, /* إذا كنت تريد تحريك الحشو أيضًا */
                padding-bottom 0.35s ease-out; /* إذا كنت تريد تحريك الحشو أيضًا */
                /* يمكنك إزالة margin و padding من الـ transition إذا لم تكن بحاجة لتحريكهما */
    will-change: opacity, transform, max-height, margin, padding;
    overflow: hidden; /* ضروري لعمل max-height transition بشكل صحيح */
    
    /* الحالة الافتراضية (مخفي) - عندما لا يكون pbc-fields-active موجودًا */
    opacity: 0;
    transform: translateY(-10px); /* يبدأ منزاحًا للأعلى قليلاً، ثم ينزل عند الظهور */
    max-height: 0;
    pointer-events: none; /* لمنع التفاعل مع الحقول المخفية */
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0; /* إذا كانت الحقول لها إطارات علوية/سفلية، قم بإخفائها */
    border-bottom-width: 0;
}

/* Fix Imperial Weight Field Display */
.pbc-layout-modern-new .pbc-modern-body-measurements-card {
    display: flex;
    flex-direction: column;
}


.pbc-layout-modern-new .pbc-modern-imperial-height-fields .pbc-modern-slider-field {
    flex: 1; /* ليأخذ كل حقل (قدم/بوصة) نصف المساحة */
    margin-bottom: 0; /* إزالة الهامش السفلي للحقول الفرعية داخل هذه الحاوية */
}

.pbc-layout-modern-new .pbc-modern-imperial-field.pbc-fields-active {
   margin-top: 1.2em; /* نفس المسافة المستخدمة في gap للطول */
}

/* الحالة النشطة (ظاهر) - عند إضافة pbc-fields-active */
.pbc-layout-modern-new .pbc-modern-metric-field.pbc-fields-active {
 /* يستهدف حاوية الوزن وحاوية الطول */
    opacity: 1;
    transform: translateY(0);
    max-height: 700px; 
    pointer-events: auto;
    overflow: visible; 
}


.pbc-layout-modern-new .pbc-modern-imperial-height-fields.pbc-fields-active {
    display: flex !important;              /* **مهم جدًا: استخدام flex هنا** */
    flex-direction: column !important;     /* **مهم جدًا: لترتيب العناصر عموديًا** */
    gap: 1.2em !important;                 /* مسافة بين حقل القدم وحقل البوصة */
    /* تأكد أن الخصائص الأخرى من القاعدة العامة أعلاه تُطبق أيضًا */
    opacity: 1 !important;
    transform: translateY(0) !important;
    max-height: 700px !important; 
    pointer-events: auto !important;
    overflow: visible !important; 
    margin-bottom: 0;
}

/* Remove margin-top from first active imperial field */
.pbc-layout-modern-new .pbc-modern-imperial-height-fields.pbc-fields-active .pbc-modern-imperial-field.pbc-fields-active {
    margin-top: 1.2em;
}

.pbc-layout-modern-new .pbc-modern-input-card .pbc-modern-slider-field {
    margin-bottom: 1.2em; /* المسافة الافتراضية بين أشرطة التمرير المتتالية في البطاقة */
}
.pbc-layout-modern-new .pbc-modern-input-card .pbc-modern-slider-field:last-child {
    margin-bottom: 0.5em; /* مسافة أقل لآخر شريط تمرير في البطاقة */
}

.pbc-layout-modern-new .pbc-modern-slider-label { 
	display: block;
	font-size: 0.9em;
	color: var(--pbc-text-color, #333333); 
	margin-bottom: 0.5em;
    font-weight: 500;
}

.pbc-layout-modern-new .pbc-modern-slider-wrapper { 
	display: flex;
	align-items: center;
	gap: 12px; 
	margin-bottom: 0.3em;
}

.pbc-layout-modern-new .pbc-modern-slider { 
	flex-grow: 1;
	height: 6px; 
	-webkit-appearance: none;
	appearance: none;
	background: var(--pbc-slider-track-bg, #e9ecef);
	border-radius: 3px;
	outline: none;
	transition: opacity .2s;
}

.pbc-layout-modern-new .pbc-modern-slider:hover {
	opacity: 0.85;
}

/* Styling for icons next to card titles in the results column */
.pbc-layout-modern-new .pbc-modern-results-card .pbc-modern-card-title .dashicons,
.pbc-layout-modern-new .pbc-modern-results-card .pbc-modern-card-title-small .dashicons {
    margin-right: 0.4em; /* Space between icon and title text */
    color: var(--pbc-primary-color, #6a11cb); /* Icon color to match theme */
    font-size: 1.1em; /* Adjust icon size relative to title font size */
    vertical-align: middle; /* Align icon nicely with text */
    font-family: 'dashicons'; /* Ensure Dashicons font */
}

/* Specific styling for icons in collapsible triggers */
.pbc-layout-modern-new .pbc-modern-collapsible-trigger .dashicons:not(.pbc-modern-collapsible-icon) { 
    /* This targets only the new descriptive icon, not the expand/collapse arrow icon */
    margin-right: 0.5em;
    color: var(--pbc-label-color, #5c677d); /* Match text color or make it primary */
    font-size: 1em; /* Adjust size */
    vertical-align: middle;
    transition: color 0.2s ease-in-out; /* For hover effect */
    font-family: 'dashicons'; /* Ensure Dashicons font */
}

.pbc-layout-modern-new .pbc-modern-collapsible-trigger:hover .dashicons:not(.pbc-modern-collapsible-icon) {
    color: var(--pbc-primary-color, #6a11cb); /* Change color on hover along with text */
}

/* Hover effect for collapsible triggers */
.pbc-layout-modern-new .pbc-modern-collapsible-trigger {
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    border-radius: var(--pbc-input-border-radius, 8px); 
    margin: 2px 0; 
}

/* Ensure proper alignment for titles if icons are present */
.pbc-layout-modern-new .pbc-modern-results-card .pbc-modern-card-title,
.pbc-layout-modern-new .pbc-modern-results-card .pbc-modern-card-title-small
 {
    display: flex; /* Use flex to align icon and text */
    align-items: center; /* Vertically align icon and text */
}
.pbc-layout-modern-new .pbc-modern-collapsible-trigger .pbc-modern-collapsible-icon {
    margin-left: auto; /* Push the arrow icon to the far right */
}

.pbc-layout-modern-new .pbc-modern-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px; 
	height: 18px;
	background: var(--pbc-slider-thumb-bg, #6a11cb);
	border-radius: 50%;
	cursor: pointer;
    border: 2px solid var(--pbc-white-bg, #ffffff); 
    box-shadow: 0 1px 4px rgba(0,0,0,0.25); 
    margin-top: -6px; 
}

.pbc-layout-modern-new .pbc-modern-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: var(--pbc-slider-thumb-bg, #6a11cb);
	border-radius: 50%;
	cursor: pointer;
    border: 2px solid var(--pbc-white-bg, #ffffff);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.pbc-layout-modern-new .pbc-modern-slider-value { 
	min-width: 50px; 
	max-width: 65px;
	padding: 0.4em 0.3em; 
	border: none; 
	border-radius: var(--pbc-input-border-radius, 8px);
	text-align: right;
	font-weight: 600; 
	font-size: 0.95em; 
	color: var(--pbc-primary-color, #6a11cb);
    background-color: transparent; 
    appearance: textfield;
    -moz-appearance: textfield;
}

.pbc-layout-modern-new .pbc-modern-slider-value::-webkit-outer-spin-button,
.pbc-layout-modern-new .pbc-modern-slider-value::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

.pbc-layout-modern-new .pbc-modern-slider-unit { 
	font-size: 0.85em;
	color: var(--pbc-label-color, #555555);
	font-weight: 500;
}

/* --- Goal & Season Cards (بطاقات الهدف والموسم) --- */
.pbc-layout-modern-new .pbc-modern-selectable-cards-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* لإنشاء 3 أعمدة مرنة */
    gap: 1em; /* المسافة بين بطاقات الاختيار */
    padding-top: 0.5em; /* مسافة صغيرة أعلى بطاقات الاختيار */
    border:none;
}

.pbc-layout-modern-new .pbc-modern-toggle-buttons-group { /* حاوية أزرار الموسم */
	display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); 
	gap: 0.8em;
    border: none;
}

.pbc-layout-modern-new .pbc-modern-selectable-card-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* محاذاة المحتوى للأعلى قليلاً */
    text-align: center;
    padding: 1.2em 0.8em; /* حشو داخلي لبطاقة الاختيار */
    border: 1px solid var(--pbc-border-color, #e1e4e8); /* إطار افتراضي خفيف */
    border-radius: var(--pbc-input-card-border-radius, 10px); /* دوران حواف بطاقة الاختيار */
    background-color: var(--pbc-white-bg, #ffffff);
    cursor: pointer;
    transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, transform 0.2s ease-out;
    min-height: 160px; /* ارتفاع مبدئي للبطاقات ليكونوا متساويين */
    box-sizing: border-box;
}

.pbc-layout-modern-new .pbc-modern-toggle-button-label { /* أزرار الموسم */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1em 0.8em; 
	border: 1px solid var(--pbc-border-color, #e9ecef); 
	border-radius: var(--pbc-input-card-border-radius, 12px); 
	background-color: var(--pbc-input-bg, #f7f8fc); 
	cursor: pointer;
	transition: all 0.2s ease;
    min-height: 90px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.pbc-layout-modern-new .pbc-modern-selectable-card-label:hover {
    border-color: var(--pbc-primary-color, #7a54cc); /* تغيير لون الإطار عند التحويم */
    transform: translateY(-3px); /* رفع طفيف عند التحويم */
    box-shadow: 0 6px 12px rgba(0,0,0,0.07); /* ظل أوضح قليلاً عند التحويم */
}

.pbc-layout-modern-new .pbc-modern-selectable-card-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;  /* حجم الدائرة */
    height: 48px; /* حجم الدائرة */
    border-radius: 50%; /* لجعلها دائرية تمامًا */
    margin-bottom: 0.8em; /* مسافة أسفل دائرة الأيقونة */
    transition: background-color 0.25s ease-in-out;
}

.pbc-layout-modern-new .pbc-modern-selectable-card-label .pbc-modern-card-icon {
    font-size: 1.5em; /* حجم الأيقونة نفسها */
    line-height: 1;
    transition: color 0.25s ease-in-out;
}

.pbc-layout-modern-new .pbc-modern-selectable-card-label .pbc-modern-card-sub-text {
    font-size: 0.8em; /* حجم النص الفرعي (الوصف) */
    color: var(--pbc-label-color, #5c677d);
    line-height: 1.4;
    max-width: 90%; /* لمنع النص من التمدد بشكل كبير */
}


/* 1. Maintain Weight (الحفاظ على الوزن) - الأيقونة: ميزان (dashicons-marker كبديل) */
.pbc-layout-modern-new input[value="maintain_weight"] + .pbc-modern-selectable-card-label .pbc-modern-selectable-card-icon-wrapper {
    background-color: rgba(106, 27, 203, 0.1); /* بنفسجي فاتح جدًا كخلفية للدائرة */
}
.pbc-layout-modern-new input[value="maintain_weight"] + .pbc-modern-selectable-card-label .pbc-modern-card-icon.dashicons-marker {
    color: var(--pbc-primary-color, #6a11cb); /* لون الأيقونة بنفسجي (لأنها محددة في الصورة) */
     /* لتغيير أيقونة الميزان، يمكنك استخدام content إذا لم تكن Dashicon مناسبة */
    /* content: "\fXXX"; font-family: 'YourIconFont'; */
}

/* 2. Lose Weight (خسارة الوزن) - الأيقونة: سهم لأسفل (dashicons-arrow-down-alt2) */
.pbc-layout-modern-new input[value="lose_weight"] + .pbc-modern-selectable-card-label .pbc-modern-selectable-card-icon-wrapper {
    background-color: rgba(93, 226, 161, 0.15); /* أخضر فاتح جدًا كخلفية للدائرة */
}
.pbc-layout-modern-new input[value="lose_weight"] + .pbc-modern-selectable-card-label .pbc-modern-card-icon.dashicons-arrow-down-alt2 {
    color: #5de2a1; /* لون الأيقونة أخضر */
}

/* 3. Gain Weight (زيادة الوزن) - الأيقونة: سهم لأعلى (dashicons-arrow-up-alt2) */
.pbc-layout-modern-new input[value="gain_weight"] + .pbc-modern-selectable-card-label .pbc-modern-selectable-card-icon-wrapper {
    background-color: rgba(188, 103, 255, 0.15); /* بنفسجي/وردي فاتح جدًا كخلفية للدائرة */
}
.pbc-layout-modern-new input[value="gain_weight"] + .pbc-modern-selectable-card-label .pbc-modern-card-icon.dashicons-arrow-up-alt2 {
    color: #bc67ff; /* لون الأيقونة بنفسجي/وردي */
}


/* --- تنسيق الحالة المحددة لبطاقة الهدف --- */
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-selectable-card-label {
    border-color: var(--pbc-primary-color, #6a11cb); /* إطار بنفسجي للبطاقة المحددة */
    box-shadow: 0 0 0 1.5px var(--pbc-primary-color, #6a11cb), /* تأثير إطار مزدوج خفيف */
                0 5px 15px rgba(var(--pbc-primary-color-rgb, 106,17,203), 0.1); /* ظل أوضح قليلاً */
    background-color: var(--pbc-white-bg, #ffffff); /* تبقى الخلفية بيضاء */
}

/* تغيير لون النص الرئيسي للبطاقة المحددة */
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-selectable-card-label .pbc-modern-card-main-text {
    color: var(--pbc-primary-color, #6a11cb);
}

/* تغيير لون دائرة الأيقونة ولون الأيقونة للبطاقة المحددة (إذا كان مختلفًا عن الحالة الافتراضية للخيار المحدد) */
/* في الصورة، "Maintain Weight" هو المحدد، وألوانه هي البنفسجية */
.pbc-layout-modern-new input[value="maintain_weight"]:checked + .pbc-modern-selectable-card-label .pbc-modern-selectable-card-icon-wrapper {
    background-color: rgba(var(--pbc-primary-color-rgb, 106,17,203), 0.1); /* خلفية بنفسجية فاتحة */
}
.pbc-layout-modern-new input[value="maintain_weight"]:checked + .pbc-modern-selectable-card-label .pbc-modern-card-icon {
    color: var(--pbc-primary-color, #6a11cb); /* أيقونة بنفسجية */
}

/* يمكنك إضافة قواعد مشابهة لـ lose_weight و gain_weight في حالة :checked إذا أردت تغيير الألوان عند تحديدها */
.pbc-layout-modern-new input[value="lose_weight"]:checked + .pbc-modern-selectable-card-label .pbc-modern-selectable-card-icon-wrapper {
    background-color: rgba(93, 226, 161, 0.2); /* أخضر أفتح عند التحديد */
}
.pbc-layout-modern-new input[value="lose_weight"]:checked + .pbc-modern-selectable-card-label .pbc-modern-card-icon.dashicons-arrow-down-alt2 {
    color: #3bb07b; /* أخضر أغمق قليلاً للأيقونة عند التحديد */
}

.pbc-layout-modern-new input[value="gain_weight"]:checked + .pbc-modern-selectable-card-label .pbc-modern-selectable-card-icon-wrapper {
    background-color: rgba(188, 103, 255, 0.2); /* بنفسجي/وردي أفتح عند التحديد */
}
.pbc-layout-modern-new input[value="gain_weight"]:checked + .pbc-modern-selectable-card-label .pbc-modern-card-icon.dashicons-arrow-up-alt2 {
    color: #a940ed; /* بنفسجي/وردي أغمق قليلاً للأيقونة عند التحديد */
}


.pbc-layout-modern-new .pbc-modern-toggle-button-label:hover {
	border-color: var(--pbc-primary-color, #8a5cf5); 
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--pbc-primary-color-rgb, 106,17,203), 0.08);
}
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-selectable-card-label,
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-toggle-button-label {
	border-color: var(--pbc-primary-color, #6a11cb);
	background-color: var(--pbc-white-bg, #ffffff); 
	box-shadow: 0 0 0 2px var(--pbc-primary-color, #6a11cb), 0 4px 12px rgba(var(--pbc-primary-color-rgb, 106,17,203), 0.15);
    color: var(--pbc-primary-color, #6a11cb);
}
.pbc-layout-modern-new .pbc-modern-card-icon, 
.pbc-layout-modern-new .pbc-modern-button-icon { 
	font-size: 1.6em; 
	margin-bottom: 0.4em;
	color: var(--pbc-label-color, #555555);
    transition: color 0.2s ease;
}
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-selectable-card-label .pbc-modern-card-icon,
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-toggle-button-label .pbc-modern-button-icon {
    color: var(--pbc-primary-color, #6a11cb);
}
.pbc-layout-modern-new .pbc-modern-card-main-text { 
	font-weight: 600;
	font-size: 0.9em;
	color: var(--pbc-text-color, #333333);
    transition: color 0.2s ease;
}
.pbc-layout-modern-new .pbc-modern-card-sub-text { 
	font-size: 0.75em;
	color: var(--pbc-label-color, #555555);
    margin-top: 0.2em;
    line-height: 1.3;
}
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-selectable-card-label .pbc-modern-card-main-text,
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-selectable-card-label .pbc-modern-card-sub-text {
    color: var(--pbc-primary-color, #6a11cb);
}
/* تخصيص أزرار الموسم */
.pbc-layout-modern-new .pbc-modern-toggle-buttons-group {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); 
}
.pbc-layout-modern-new .pbc-modern-toggle-button-label { 
    padding: 0.6em 0.5em;
    min-height: auto;
    font-weight: 500;
    font-size: 0.85em;
    flex-direction: row; 
    gap: 6px;
}
.pbc-layout-modern-new .pbc-modern-toggle-button-label .pbc-modern-button-icon {
    font-size: 1.1em;
    margin-bottom: 0;
}
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-toggle-button-label {
    color: var(--pbc-button-text-color, #ffffff); 
    background-color: var(--pbc-primary-color, #6a11cb); 
}
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-toggle-button-label .pbc-modern-button-icon {
    color: var(--pbc-button-text-color, #ffffff);
}


/* --- Submit Button (زر الإرسال) --- */
.pbc-layout-modern-new .pbc-modern-submit {
	margin-top: 2.5em;
}
.pbc-layout-modern-new .pbc-submit-button {
	width: 100%;
	padding: 0.9em 1.2em;
	font-size: 1.05em; 
	font-weight: 600;
	color: var(--pbc-button-text-color, #ffffff);
	background: var(--pbc-primary-color, #6a11cb);
	border: none;
	border-radius: var(--pbc-input-card-border-radius, 12px); 
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(var(--pbc-primary-color-rgb, 106,17,203), 0.25);
}
.pbc-layout-modern-new .pbc-submit-button:hover {
	opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--pbc-primary-color-rgb, 106,17,203), 0.3);
}



/* --- Right Column: Results Styling (تنسيق عمود النتائج) --- */
.pbc-layout-modern-new .pbc-modern-results-card { /* General style for all cards in the results column */
	background-color: var(--pbc-white-bg, #ffffff); padding: 1.2em 1.5em; 
	border-radius: var(--pbc-input-card-border-radius, 12px); margin-bottom: 1.2em; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.04); border: 1px solid var(--pbc-border-color, #e9edf2); 
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.pbc-layout-modern-new .pbc-modern-results-card .pbc-modern-card-title { 
    font-size: 1em; 
    margin-bottom: 0.8em;
    color: var(--pbc-text-color, #333);
}
.pbc-layout-modern-new .pbc-modern-card-title-small { 
    font-size: 0.8em; 
    font-weight: 600;
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    color: var(--pbc-label-color, #555555);
    margin-top: 0;
    margin-bottom: 0.4em;
}

/* "Your Profile" Section in Results Column */
.pbc-layout-modern-new .pbc-modern-profile-card .pbc-modern-card-title { font-size: 1em; margin-bottom: 1em; text-align: left; color: var(--pbc-text-color, #333); display: block; }


/* Grid container for the 4 mini-cards (Age, Gender, Height, Weight) */
.pbc-layout-modern-new .pbc-modern-profile-details-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8em; padding-top: 0.5em; }

/* Styling for the icon above the label text */
.pbc-layout-modern-new .pbc-modern-field-top-icon span.dashicons.dashicons-cake::before {
    font-family: 'dashicons' !important; /* تأكيد استخدام خط الأيقونات */
    content: "\f481" !important;       /* رمز أيقونة الكعكة من Dashicons */
    font-size: inherit !important;     /* ليرث الحجم من .pbc-modern-field-top-icon */
    color: inherit !important;         /* ليرث اللون من .pbc-modern-field-top-icon */
    display: inline-block !important;  /* لضمان الظهور */
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-font-smoothing: antialiased; /* تحسين مظهر الخط */
    -moz-osx-font-smoothing: grayscale;  /* تحسين مظهر الخط */
}

.pbc-layout-modern-new .pbc-modern-field-top-icon span.dashicons.dashicons-cake {
    display: inline-block !important; /* أو inline-flex إذا كنت تحتاج لذلك */
    opacity: 1 !important;
    visibility: visible !important;
    font-size: inherit !important; /* لضمان أن الحجم يتم تمريره */
}

.pbc-layout-modern-new .pbc-modern-field-top-icon .dashicons {
    vertical-align: middle; /* Better alignment for Dashicons */
    font-family: 'dashicons';
}

/* Specific Dashicon content properties (usually handled by dashicons.min.css but can be enforced) */
.pbc-layout-modern-new .pbc-modern-field-top-icon .dashicons-cake::before { content: "\f481"; }
.pbc-layout-modern-new .pbc-modern-field-top-icon .dashicons-groups::before { content: "\f307"; } /* Or \f308 for multiple users */
/* Add other specific Dashicons used in input titles here if needed */

/* Adjustments for Age field if its original label style was different */
.pbc-layout-modern-new .pbc-modern-age-field .pbc-modern-field-label {
    /* This selector might not be needed anymore if you removed the icon from here */
    /* If you kept it, ensure its margin-bottom is 0 or adjusted */
    margin-bottom: 0; /* Remove bottom margin as it's now on the group */
}

/* Styling for each individual mini-card in the profile section */
.pbc-layout-modern-new .pbc-modern-profile-detail-item { background-color: var(--pbc-white-bg, #ffffff); border-radius: var(--pbc-input-border-radius, 10px); padding: 1em 0.8em; text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,0.03); border: 1px solid var(--pbc-border-color, #f0f0f0); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 110px; position: relative; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; }


/* Hover effect for profile mini-cards */
.pbc-layout-modern-new .pbc-modern-profile-detail-item:hover {
    transform: translateY(-4px); /* Slight lift on hover */
    box-shadow: 0 6px 18px rgba(var(--pbc-primary-color-rgb, 106,17,203), 0.1); /* Enhanced shadow with primary color tint */
}

/* --- Styling for "Your Profile" Mini-Card Icons --- */
.pbc-layout-modern-new .pbc-modern-profile-item-icon {
    font-size: 1.8em; 
    color: var(--pbc-primary-color, #6a11cb); 
    margin-bottom: 0.4em;
    line-height: 1;
    height: 1.8em; /* Consistent height for icon area */
    display: flex; align-items: center; justify-content: center;
}

/* Ensures Dashicons used in profile items get their font and specific content */
.pbc-layout-modern-new .pbc-modern-profile-item-icon .dashicons { font-family: 'dashicons'; }
.pbc-layout-modern-new .pbc-modern-profile-item-icon .dashicons-cake::before { content: "\f481"; }
.pbc-layout-modern-new .pbc-modern-profile-item-icon .dashicons-editor-spellcheck::before { content: "\f213"; }
.pbc-layout-modern-new .pbc-modern-profile-item-icon .dashicons-dashboard::before { content: "\f226"; }



/* Ensures Dashicons used in profile items get their font */
.pbc-layout-modern-new .pbc-modern-profile-item-icon .dashicons { font-family: 'dashicons'; }

/* Unicode Gender Icons in Profile */
.pbc-layout-modern-new .pbc-modern-profile-item-icon .pbc-icon { font-family: Arial, sans-serif; font-weight: normal; }
.pbc-layout-modern-new .pbc-modern-profile-item-icon .pbc-icon-male::before { content: "\2642"; }
.pbc-layout-modern-new .pbc-modern-profile-item-icon .pbc-icon-female::before { content: "\2640"; }
.pbc-layout-modern-new .pbc-modern-profile-item-label { font-size: 0.7em; color: var(--pbc-label-color, #5c677d); margin-bottom: 0.2em; display: block; text-transform: uppercase; letter-spacing: 0.5px; }
.pbc-layout-modern-new .pbc-modern-profile-item-value { font-size: 1.1em; font-weight: 600; color: var(--pbc-text-color, #373a3c); line-height: 1.2; display: block; }
.pbc-layout-modern-new .pbc-modern-profile-item-value-secondary { font-size: 0.85em; color: var(--pbc-label-color, #5c677d); line-height: 1.3; display: block; margin-top: 0.1em; }




/* Label text (e.g., "Age:", "Height:") within profile mini-cards */
.pbc-layout-modern-new .pbc-modern-profile-item-label {
    font-size: 0.7em; 
    color: var(--pbc-label-color, #5c677d);
    margin-bottom: 0.2em;
    display: block;
    text-transform: uppercase; /* As seen in some designs */
    letter-spacing: 0.5px;   /* Slight letter spacing */
}

/* Main value (e.g., "30", "170 cm") within profile mini-cards */
.pbc-layout-modern-new .pbc-modern-profile-item-value { 
    font-size: 1.1em; 
    font-weight: 600; /* Bold value */
    color: var(--pbc-text-color, #373a3c);
    line-height: 1.2;
    display: block;
}

/* Secondary value (e.g., "(5' 6.9")", "(154.3 lbs)") for Height/Weight */
.pbc-layout-modern-new .pbc-modern-profile-item-value-secondary {
    font-size: 0.85em; /* Smaller font for the secondary unit */
    color: var(--pbc-label-color, #5c677d); /* Lighter color */
    line-height: 1.3;
    display: block; /* Ensure it's on a new line */
    margin-top: 0.1em; /* Small space above the secondary value */
}

/* --- Root Variables (CSS Custom Properties) --- */
/* :root { ... (Your defined variables here as per previous complete CSS example) ... } */

/* --- General Dashicon Styling for Modern Layout --- */
/* This rule ensures that any element with .dashicons class gets the correct font
   and basic properties needed for the icon to render. This is CRUCIAL for icon visibility. */
.pbc-layout-modern-new .dashicons {
    font-family: 'dashicons' !important;
    display: inline-block !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Forcing content for specific Dashicons to ensure they appear,
   This helps if WordPress's dashicons.min.css has issues or conflicts from the theme. */
.pbc-layout-modern-new .dashicons-cake::before { content: "\f481" !important; }
.pbc-layout-modern-new .dashicons-groups::before { content: "\f307" !important; }
.pbc-layout-modern-new .dashicons-chart-line::before { content: "\f201" !important; }
.pbc-layout-modern-new .dashicons-universal-access::before { content: "\f483" !important; }
.pbc-layout-modern-new .dashicons-awards::before { content: "\f523" !important; }
.pbc-layout-modern-new .dashicons-cloud::before { content: "\f176" !important; }
.pbc-layout-modern-new .dashicons-marker::before { content: "\f158" !important; }
.pbc-layout-modern-new .dashicons-arrow-down-alt2::before { content: "\f346" !important; }
.pbc-layout-modern-new .dashicons-arrow-up-alt2::before { content: "\f343" !important; }
.pbc-layout-modern-new .dashicons-editor-spellcheck::before { content: "\f213" !important; } /* Height icon in profile */
.pbc-layout-modern-new .dashicons-dashboard::before { content: "\f226" !important; } /* Weight icon in profile */
.pbc-layout-modern-new .dashicons-chart-pie::before { content: "\f181" !important; } /* BMI Score title icon */
.pbc-layout-modern-new .dashicons-heart::before { content: "\f487" !important; } /* BMR title icon */
.pbc-layout-modern-new .dashicons-runner::before { content: "\f54e" !important; } /* TDEE title icon */
.pbc-layout-modern-new .dashicons-droplet::before { content: "\f521" !important; } /* Water Intake title icon */
.pbc-layout-modern-new .dashicons-info-outline::before { content: "\f533" !important; } /* "What does this mean?" icon */
.pbc-layout-modern-new .dashicons-lightbulb::before { content: "\f300" !important; } /* "Age-based Health Insights" icon */
.pbc-layout-modern-new .dashicons-yes-alt::before { content: "\f12a" !important; } /* "Healthy Weight Range" icon */
.pbc-layout-modern-new .pbc-modern-collapsible-icon::before { content: "\f140" !important; } /* Collapsible Down arrow */
.pbc-layout-modern-new .pbc-modern-collapsible-trigger[aria-expanded="true"] .pbc-modern-collapsible-icon::before { content: "\f142" !important; } /* Collapsible Up arrow */

/* --- Main Page Header --- */
.pbc-modern-page-header { text-align: center; margin-bottom: 2.5em; }
.pbc-modern-main-page-title { font-size: 2.2em; font-weight: 700; color: var(--pbc-text-color, #2c3e50); margin-top: 0; margin-bottom: 0.25em; }
.pbc-modern-main-page-subtitle { font-size: 1.1em; color: var(--pbc-label-color, #7f8c8d); margin-bottom: 0; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; }

/* --- General Wrapper & Columns --- */
.pbc-calculator-wrapper.pbc-layout-modern-new { font-family: var(--pbc-font-family, "Roboto", sans-serif); max-width: 900px; margin: 0 auto 2em auto; background-color: var(--pbc-white-bg, #ffffff); border-radius: var(--pbc-card-border-radius, 16px); box-shadow: var(--pbc-card-shadow, 0 10px 35px rgba(0, 0, 0, 0.08)); font-size: 16px; position: relative; overflow: hidden; }
.pbc-layout-modern-new .pbc-modern-main-content-wrapper { display: flex; flex-wrap: wrap; }
.pbc-layout-modern-new .pbc-modern-input-column { flex: 1 1 55%; padding: 2em; box-sizing: border-box; min-width: 300px; }
.pbc-layout-modern-new .pbc-modern-results-column { flex: 1 1 45%; background-color: var(--pbc-light-purple-bg, #f4f2ff); padding: 2em; box-sizing: border-box; min-width: 280px; }

/* --- Input Cards --- */
.pbc-layout-modern-new .pbc-modern-input-card { background-color: var(--pbc-white-bg, #ffffff); padding: 1.2em 1.5em; border-radius: var(--pbc-input-card-border-radius, 12px); margin-bottom: 1.5em; box-shadow: 0 4px 15px rgba(0,0,0,0.04); border: 1px solid var(--pbc-border-color, #e1e4e8); transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out; }
.pbc-layout-modern-new .pbc-modern-input-card:last-of-type { margin-bottom: 0; }

/* --- Input Field Labels with Icons --- */
.pbc-layout-modern-new .pbc-modern-custom-label-group {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.8em;
}

.pbc-layout-modern-new .pbc-modern-field-top-icon {
    font-size: 1.2em;
    color: var(--pbc-primary-color, #6a11cb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pbc-layout-modern-new .pbc-modern-field-label-text {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--pbc-text-color, #333333);
}

.pbc-layout-modern-new .pbc-modern-field-label { display: flex; font-size: 0.85em; font-weight: 600; color: var(--pbc-text-color, #333333); margin-bottom: 0.8em; align-items: center; }
.pbc-layout-modern-new .pbc-modern-field-icon { margin-right: 8px; color: var(--pbc-label-color, #555555); font-size: 1.1em; line-height: 1; }


.pbc-layout-modern-new .pbc-modern-results-value { 
    font-size: 1.6em; 
    font-weight: 700;
    color: var(--pbc-primary-color, #6a11cb);
    margin-bottom: 0.2em;
    line-height: 1.2;
}
.pbc-layout-modern-new .pbc-modern-results-value strong {
    font-weight: 700; 
}
.pbc-layout-modern-new .pbc-modern-results-value span.unit { 
    font-size: 0.6em;
    font-weight: 500;
    color: var(--pbc-label-color);
    margin-left: 4px;
}
.pbc-layout-modern-new .pbc-modern-results-description { 
    font-size: 0.8em;
    color: var(--pbc-label-color, #555555);
    line-height: 1.4;
}

/* Profile Card (بطاقة ملفك الشخصي) */
.pbc-layout-modern-new .pbc-modern-profile-details p {
    margin: 0.6em 0; 
    font-size: 0.9em;
    color: var(--pbc-text-color, #333333);
    display: flex;
    align-items: center;
    justify-content: space-between; 
}
.pbc-layout-modern-new .pbc-modern-profile-details .dashicons {
    margin-right: 8px;
    color: var(--pbc-label-color, #555555);
    font-size: 1.1em;
}
.pbc-layout-modern-new .pbc-modern-profile-details strong {
    font-weight: 600;
    color: var(--pbc-primary-color); 
}

/* BMI Score Card (بطاقة نتيجة BMI) */
.pbc-layout-modern-new .pbc-modern-bmi-score-card .pbc-modern-card-title { 
    text-align: center;
    display: block; 
    font-size: 1em;
}
.pbc-layout-modern-new .pbc-modern-bmi-value-display {
    text-align: center;
    margin-bottom: 0.8em; 
}
.pbc-layout-modern-new .pbc-modern-bmi-value-display strong {
    font-size: 2.8em; 
    font-weight: 700;
    color: var(--pbc-primary-color, #6a11cb);
    line-height: 1;
}
.pbc-layout-modern-new .pbc-modern-bmi-gauge {
    position: relative; width: 100%; margin-top: 0.8em; margin-bottom: 0.4em; height: 10px; 
}
.pbc-layout-modern-new .pbc-modern-gauge-bar {
    display: block; height: 100%; border-radius: 5px; 
    background-image: linear-gradient(to right,
        var(--pbc-gauge-underweight-color, #5cacee) 0%, var(--pbc-gauge-underweight-color, #5cacee) 22.8%, 
        var(--pbc-gauge-normal-color, #5de2a1) 22.8%, var(--pbc-gauge-normal-color, #5de2a1) 50%,   
        var(--pbc-gauge-overweight-color, #ffd359) 50%, var(--pbc-gauge-overweight-color, #ffd359) 71.4%, 
        var(--pbc-gauge-obese-color, #ff7b7b) 71.4%, var(--pbc-gauge-obese-color, #ff7b7b) 100%
    );
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.03);
}
.pbc-layout-modern-new .pbc-modern-gauge-marker {
    position: absolute; bottom: -5px; width: 20px; height: 20px;  
    background-color: var(--pbc-white-bg, #ffffff);
    border: 3px solid var(--pbc-primary-color, #6a11cb); 
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25); 
    transform: translateX(-50%); 
    transition: left 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 2;
}
.pbc-layout-modern-new .pbc-modern-gauge-labels {
    display: flex; justify-content: space-between; font-size: 0.65em; 
    color: var(--pbc-label-color, #555555); padding: 0; margin-top: 0.5em;
}
.pbc-layout-modern-new .pbc-modern-gauge-labels span { flex: 1; text-align: center; }
.pbc-layout-modern-new .pbc-modern-gauge-labels span:first-child { text-align: left;}
.pbc-layout-modern-new .pbc-modern-gauge-labels span:last-child { text-align: right;}

.pbc-layout-modern-new .pbc-modern-bmi-category-text { 
    text-align: center; font-size: 0.9em; font-weight: 500; 
    margin-top: 1em; padding: 0.6em 0.8em; 
    border-radius: var(--pbc-input-border-radius, 8px);
    background-color: var(--pbc-input-bg, #f7f8fc); 
    color: var(--pbc-text-color); 
}
.pbc-layout-modern-new .pbc-category-underweight .pbc-modern-bmi-category-text { color: var(--pbc-gauge-underweight-color); background-color: rgba(92,172,238,0.1); }
.pbc-layout-modern-new .pbc-category-normal .pbc-modern-bmi-category-text { color: var(--pbc-gauge-normal-color); background-color: rgba(93,226,161,0.1); }
.pbc-layout-modern-new .pbc-category-overweight .pbc-modern-bmi-category-text { color: var(--pbc-gauge-overweight-color); background-color: rgba(255,211,89,0.1); }
.pbc-layout-modern-new .pbc-category-obesity_class_1 .pbc-modern-bmi-category-text,
.pbc-layout-modern-new .pbc-category-obesity_class_2 .pbc-modern-bmi-category-text,
.pbc-layout-modern-new .pbc-category-obesity_class_3 .pbc-modern-bmi-category-text { color: var(--pbc-gauge-obese-color); background-color: rgba(255,123,123,0.1); }


/* Collapsible Sections (الأقسام القابلة للطي) */
.pbc-layout-modern-new .pbc-modern-collapsible-sections {
    margin-top: 1.5em;
    border-top: 1px solid var(--pbc-border-color, #e9edf2); 
}
.pbc-layout-modern-new .pbc-modern-collapsible-item {
	border-bottom: 1px solid var(--pbc-border-color, #e9edf2); 
}
.pbc-layout-modern-new .pbc-modern-collapsible-trigger {
	display: flex; justify-content: space-between; align-items: center; width: 100%;
	padding: 0.9em 0.2em; background-color: transparent; border: none;
	cursor: pointer; font-weight: 600; font-size: 0.95em; 
	color: var(--pbc-text-color, #333333); text-align: left; transition: color 0.2s ease;
}

.pbc-layout-modern-new .pbc-modern-collapsible-trigger:hover {
    color: var(--pbc-primary-color, #6a11cb);
    background-color: rgba(var(--pbc-primary-color-rgb, 106,17,203), 0.05); 
}

.pbc-layout-modern-new .pbc-modern-collapsible-icon {
	transition: transform 0.25s ease-in-out; font-family: dashicons;
    font-size: 1em; margin-left: auto; color: var(--pbc-label-color); 
}
.pbc-layout-modern-new .pbc-modern-collapsible-trigger:hover .pbc-modern-collapsible-icon {
    color: var(--pbc-primary-color);
}
.pbc-layout-modern-new .pbc-modern-collapsible-icon::before { content: "\f140"; /* down arrow */ }
.pbc-layout-modern-new .pbc-modern-collapsible-trigger[aria-expanded="true"] .pbc-modern-collapsible-icon::before { content: "\f142"; /* up arrow */ }
.pbc-layout-modern-new .pbc-modern-collapsible-content {
	padding: 0 0.2em 1.2em 0.2em; font-size: 0.85em; 
	line-height: 1.6; color: var(--pbc-label-color, #555555);
    /* display: none; -- يتم التحكم به بواسطة JavaScript */
}
.pbc-layout-modern-new .pbc-modern-collapsible-content p { margin-top: 0; margin-bottom: 0.5em; }
.pbc-layout-modern-new .pbc-modern-collapsible-content p:last-child { margin-bottom: 0; }

/* --- Error Display & Footer (عرض الأخطاء والتذييل) --- */
.pbc-layout-modern-new .pbc-error-area {
	margin: 1.5em 0; padding: 1em; font-size: 0.9em;
	background-color: rgba(220, 53, 69, 0.05); 
	border: 1px solid rgba(220, 53, 69, 0.2);
	color: #dc3545; 
	border-radius: var(--pbc-input-border-radius, 8px);
    text-align: left;
}
.pbc-layout-modern-new .pbc-modern-footer {
    margin-top: 2em; padding-top: 1.5em;
    border-top: 1px solid var(--pbc-border-color, #e9edf2); 
}
.pbc-layout-modern-new .pbc-disclaimer-section {
	font-size: 0.75em; text-align:center; 
	color: var(--pbc-label-color, #7f8c8d); 
    padding: 1.2em;
}

/* 1. تأثير لبطاقات الإدخال وبطاقات النتائج */
.pbc-layout-modern-new .pbc-modern-input-card,
.pbc-layout-modern-new .pbc-modern-results-card {
    /* يجب أن تكون خاصية transition على العنصر في حالته العادية */
    transition: transform 0.25s ease-out, 
                box-shadow 0.25s ease-out,
                border-color 0.25s ease-out; /* لإضافة انتقال للون الإطار إذا أردت */
    /* تأكد أن لديك box-shadow وإطار افتراضي لهذه البطاقات من الأنماط السابقة */
    /* مثال من الأنماط السابقة:
        box-shadow: 0 4px 15px rgba(0,0,0,0.04); 
        border: 1px solid var(--pbc-border-color, #e1e4e8);
    */
}

.pbc-layout-modern-new .pbc-modern-input-card:hover,
.pbc-layout-modern-new .pbc-modern-results-card:hover {
    transform: translateY(-4px); /* رفع البطاقة قليلاً للأعلى */
    box-shadow: 0 8px 20px rgba(var(--pbc-primary-color-rgb, 106,17,203), 0.1), 
                0 4px 10px rgba(0,0,0,0.06); /* ظل أكثر وضوحًا وبروزًا مع لمسة من اللون الأساسي */
    /* يمكنك أيضًا تغيير لون الإطار إذا أردت */
    /* border-color: var(--pbc-primary-color, #6a11cb); */
    cursor: default; /* تغيير شكل المؤشر للإشارة إلى أن البطاقة ليست قابلة للنقر (إلا إذا كانت كذلك بالفعل) */
}

/* 2. تأثير لأزرار فتح/إغلاق الأقسام القابلة للطي */
.pbc-layout-modern-new .pbc-modern-collapsible-trigger {
    /* لديها بالفعل transition على اللون من الأنماط السابقة:
       transition: color 0.2s ease; 
       يمكننا إضافة انتقال للخلفية أيضًا */
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    border-radius: var(--pbc-input-border-radius, 8px); /* إضافة دوران حواف ليتناسب مع تأثير الخلفية */
    margin: 2px 0; /* إضافة هامش بسيط ليفصل بين تأثيرات الخلفية عند التمرير المتتالي */
}

.pbc-layout-modern-new .pbc-modern-collapsible-trigger:hover {
    color: var(--pbc-primary-color, #6a11cb); /* هذا موجود بالفعل، لتغيير لون النص والأيقونة */
    background-color: rgba(var(--pbc-primary-color-rgb, 106,17,203), 0.05); /* خلفية بنفسجية فاتحة جدًا عند التمرير */
}

/* --- Hover Effects for Cards --- */
/* (Hover effects as previously refined, excluding unit toggle card, including profile mini-cards) */
.pbc-layout-modern-new .pbc-modern-input-card:not(.pbc-modern-unit-toggle-card):hover,
.pbc-layout-modern-new .pbc-modern-results-card:not(#pbc-modern-profile-card):hover, /* Exclude main profile card if mini-cards have hover */
.pbc-layout-modern-new .pbc-modern-profile-detail-item:hover {
    transform: translateY(-4px); 
    box-shadow: 0 8px 20px rgba(var(--pbc-primary-color-rgb, 106,17,203), 0.08), 
                0 4px 10px rgba(0,0,0,0.05);
}

/* Specific reset for unit toggle card hover if needed (if it inherits unwanted hover) */
.pbc-layout-modern-new .pbc-modern-unit-toggle-card:hover {
    transform: none; 
    box-shadow: none; /* Or its original very light shadow if defined */
    border-color: var(--pbc-border-color, #e0e0e0);
}

/* --- Responsiveness for New Modern Layout (الاستجابة للشاشات المختلفة) --- */
@media (max-width: 380px) {
    .pbc-layout-modern-new .pbc-modern-profile-details-grid {
        grid-template-columns: 1fr; /* Stack profile items on very small screens */
    }
     .pbc-layout-modern-new .pbc-modern-profile-detail-item {
        min-height: auto; /* Allow height to be auto when stacked */
        padding: 0.8em; /* Adjust padding */
    }
}

/* --- Responsiveness for "Your Profile" section --- */
@media (max-width: 520px) {
    .pbc-layout-modern-new .pbc-modern-profile-details-grid {
        gap: 0.6em; /* Reduce gap on smaller mobiles */
    }
    .pbc-layout-modern-new .pbc-modern-profile-detail-item {
        padding: 0.6em; 
        min-height: 85px; /* Adjust min-height for mobile */
    }
    
    /* --- Styling for "Your Profile" Mini-Card Icons --- */
.pbc-layout-modern-new .pbc-modern-profile-item-icon { font-size: 1.8em; color: var(--pbc-primary-color, #6a11cb); margin-bottom: 0.4em; line-height: 1; height: 1.8em; display: inline-flex; align-items: center; justify-content: center; }


/* Specific Dashicon classes if you need to override their default content or style further */
.pbc-layout-modern-new .pbc-modern-profile-item-icon .dashicons-cake::before {
    content: "\f481"; /* WordPress Dashicon for cake */
}
.pbc-layout-modern-new .pbc-modern-profile-item-icon .dashicons-editor-spellcheck::before {
    content: "\f213"; /* WordPress Dashicon for ruler/spellcheck */
}
.pbc-layout-modern-new .pbc-modern-profile-item-icon .dashicons-dashboard::before {
    content: "\f226"; /* WordPress Dashicon for dashboard/gauge */
}

    .pbc-layout-modern-new .pbc-modern-profile-item-label {
        font-size: 0.65em;
    }
    .pbc-layout-modern-new .pbc-modern-profile-item-value {
        font-size: 1em;
    }
    .pbc-layout-modern-new .pbc-modern-profile-item-value-secondary {
        font-size: 0.75em;
    }
}

/* --- Responsive Adjustments for Age & Gender --- */
@media (max-width: 768px) {
    /* Stack Age and Gender vertically on tablets and smaller */
    .pbc-layout-modern-new .pbc-modern-age-gender-card .pbc-modern-input-row {
        flex-direction: column;
        gap: 1em;
    }
    
    .pbc-layout-modern-new .pbc-modern-age-field {
        flex: 1 1 100%; /* Full width */
        width: 100%;
    }
    
    .pbc-layout-modern-new .pbc-modern-gender-field {
        flex: 1 1 100%; /* Full width */
        width: 100%;
    }
}

@media (max-width: 480px) {
    /* Adjust gender selector for mobile */
    .pbc-layout-modern-new .pbc-modern-gender-selector {
        flex-direction: column;
        gap: 0.6em;
        width: 100%;
    }
    
    .pbc-layout-modern-new .pbc-modern-gender-option {
        width: 100%;
        padding: 0.8em;
        border: 1px solid var(--pbc-border-color, #e0e0e0);
        border-radius: var(--pbc-input-border-radius, 8px);
        background-color: var(--pbc-input-bg, #f7f8fc);
    }
    
    .pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-gender-option {
        border-color: var(--pbc-primary-color, #6a11cb);
        background-color: var(--pbc-white-bg, #ffffff);
    }
    
    /* Make gender icon wrapper smaller on mobile */
    .pbc-layout-modern-new .pbc-modern-gender-icon-wrapper {
        width: 30px;
        height: 30px;
    }
    
    .pbc-layout-modern-new .pbc-modern-gender-option .pbc-icon {
        font-size: 1em;
    }
}

/* Very small screens */
@media (max-width: 380px) {
    .pbc-layout-modern-new .pbc-modern-input-card {
        padding: 0.8em 1em;
    }
    
    .pbc-layout-modern-new .pbc-modern-card-title {
        font-size: 0.95em;
    }
    
    .pbc-layout-modern-new .pbc-modern-gender-text {
        font-size: 0.85em;
    }
}

/* --- RTL Adjustments (تعديلات لدعم RTL) --- */
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-field-icon { margin-right: 0; margin-left: 8px; }
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-card-title .dashicons { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-gender-icon-wrapper { margin-left: 0.6px; margin-right: 0; }
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-slider-minmax { flex-direction: row-reverse; }
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-profile-details .dashicons { margin-right: 0; margin-left: 8px; }
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-gender-option { justify-content: flex-end;}
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-profile-details strong { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-gauge-labels { flex-direction: row-reverse; }
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-gauge-labels span:first-child { text-align: right;}
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-gauge-labels span:last-child { text-align: left;}
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-collapsible-trigger { text-align: right; }
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-collapsible-icon { margin-right: auto; margin-left: 0; }
html[dir="rtl"] .pbc-layout-modern-new .pbc-disclaimer-section { text-align: right; }
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-results-value span.unit { margin-left: 0; margin-right: 4px;}


/* Utility class from WordPress for screen reader text */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}