/**
 * 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
 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

/* --- Primary Font Cairo Rule (Excluding Dashicons and Icon Symbols) --- */
.pbc-calculator-wrapper.pbc-layout-modern-new,
.pbc-modern-page-header,
.pbc-calculator-wrapper.pbc-layout-modern-new *:not(.dashicons):not(.dashicons-before):not(.pbc-icon):not(.pbc-profile-gender-symbol),
.pbc-modern-page-header *:not(.dashicons):not(.dashicons-before):not(.pbc-icon):not(.pbc-profile-gender-symbol) {
	font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
}

.pbc-layout-modern-new .dashicons,
.pbc-layout-modern-new .dashicons::before {
	font-family: 'dashicons' !important;
}

.pbc-calculator-wrapper.pbc-layout-modern-new,
.pbc-modern-page-header {
	--pbc-gold-primary: #B89758;
	--pbc-gold-secondary: #D4AF37;
	--pbc-gold-dark: #9A7B3E;
	--pbc-gold-light: #FAF8F5;
	--pbc-gold-gradient: linear-gradient(135deg, #D4AF37 0%, #B89758 100%);
	--pbc-primary-color: #B89758;
	--pbc-primary-color-rgb: 184, 151, 88;
	--pbc-secondary-color: #D4AF37;
	--pbc-text-color: #111111;
	--pbc-label-color: #222222;
	--pbc-border-color: rgba(184, 151, 88, 0.35);
	--pbc-input-bg: #FAF8F5;
	--pbc-white-bg: #ffffff;
	--pbc-button-text-color: #ffffff;
	--pbc-inactive-button-text: #111111;
	--pbc-slider-track-bg: #EAE6DF;
	--pbc-slider-thumb-bg: #B89758;
	--pbc-card-shadow: 0 10px 30px rgba(184, 151, 88, 0.09);
	--pbc-card-border-radius: 16px;
	--pbc-input-card-border-radius: 12px;
	--pbc-input-border-radius: 8px;
}

.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: var(--pbc-white-bg, #ffffff);
    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, #FAF8F5); 
	padding: 4px; 
    max-width: 220px; 
    margin-left: auto;
    margin-right: auto;
	border: 1px solid var(--pbc-border-color, rgba(184, 151, 88, 0.35));
}
.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-text-color, #111111);
	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: var(--pbc-gold-gradient, linear-gradient(135deg, #D4AF37 0%, #B89758 100%));
	color: #ffffff !important;
	box-shadow: 0 3px 10px rgba(184, 151, 88, 0.35);
}

/* --- Age & Gender Card (بطاقة العمر والجنس) --- */
.pbc-layout-modern-new .pbc-modern-age-gender-card .pbc-modern-input-row {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.pbc-layout-modern-new .pbc-modern-age-field {
    flex: 1; 
    margin-bottom: 0;
}
.pbc-layout-modern-new .pbc-modern-gender-field {
    flex: 1;
    border: none;
    margin: 0;
    padding: 0;
}
.pbc-layout-modern-new .pbc-modern-input {
	width: 100%;
	height: 48px !important;
	padding: 0 1em; 
	border: 1px solid var(--pbc-border-color, rgba(184, 151, 88, 0.35));
	border-radius: var(--pbc-input-border-radius, 10px);
	background-color: var(--pbc-white-bg, #ffffff); 
	font-size: 0.95em;
	color: var(--pbc-text-color, #111111);
	font-weight: 600;
	box-sizing: border-box;
}
.pbc-layout-modern-new .pbc-modern-input::placeholder {
    color: #888888; 
}
.pbc-layout-modern-new .pbc-modern-input:focus {
	border-color: var(--pbc-gold-primary, #B89758);
	box-shadow: 0 0 0 2px rgba(184, 151, 88, 0.25);
	outline: none;
}

/* Gender Selection Styling (تنسيق اختيار الجنس) */
.pbc-layout-modern-new .pbc-modern-gender-selector {
	display: flex;
	gap: 0.6rem; 
    align-items: center; 
}
.pbc-layout-modern-new .pbc-modern-gender-option {
	flex: 1; 
	display: flex;
	align-items: center;
	justify-content: center; 
	height: 48px !important;
	padding: 0 0.8em; 
	border: 1px solid var(--pbc-border-color, rgba(184, 151, 88, 0.35)); 
	border-radius: var(--pbc-input-border-radius, 10px);
	background-color: var(--pbc-white-bg, #ffffff); 
	cursor: pointer;
	transition: all 0.25s ease;
	box-sizing: border-box;
}
.pbc-layout-modern-new .pbc-modern-gender-option:hover {
    border-color: var(--pbc-gold-primary, #B89758);
}
.pbc-layout-modern-new .pbc-modern-gender-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; 
    height: 20px; 
    margin-right: 0;
    margin-left: 6px; 
}
.pbc-layout-modern-new .pbc-gender-svg-icon {
    width: 18px;
    height: 18px;
    color: var(--pbc-gold-primary, #B89758);
    stroke: var(--pbc-gold-primary, #B89758);
    transition: color 0.2s ease, stroke 0.2s ease;
}
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-gender-option .pbc-gender-svg-icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
.pbc-layout-modern-new .pbc-modern-gender-text {
	font-size: 0.9em; 
    font-weight: 600;
    color: var(--pbc-text-color, #111111); 
    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 {
	background: var(--pbc-gold-gradient, linear-gradient(135deg, #D4AF37 0%, #B89758 100%));
	border-color: var(--pbc-gold-primary, #B89758);
	box-shadow: 0 4px 12px rgba(184, 151, 88, 0.25);
}
.pbc-layout-modern-new input[type="radio"]:checked + .pbc-modern-gender-option .pbc-modern-gender-text {
	color: #ffffff !important;
    font-weight: 700;
}
/* أيقونات الجنس باستخدام رموز Unicode */
.pbc-layout-modern-new .pbc-modern-gender-option .pbc-icon {
    font-family: Arial, sans-serif !important; 
    font-weight: bold !important; 
}
.pbc-layout-modern-new .pbc-icon-male::before { content: "\2642" !important; }
.pbc-layout-modern-new .pbc-icon-female::before { content: "\2640" !important; }


/* --- Card Titles (عناوين البطاقات الداخلية مثل "Body Measurements") --- */
.pbc-layout-modern-new .pbc-modern-card-title,
.pbc-layout-modern-new .pbc-modern-card-title-small {
	font-size: 1.05em; 
	font-weight: 700;
	color: var(--pbc-gold-dark, #9A7B3E) !important;
	margin-top: 0;
	margin-bottom: 1.2em; 
	display: flex;
	align-items: center;
	gap: 10px;
}
.pbc-layout-modern-new .pbc-modern-card-title .dashicons,
.pbc-layout-modern-new .pbc-modern-card-title-small .dashicons {
	margin-right: 0;
	color: var(--pbc-gold-primary, #B89758) !important;
	font-size: 1.25em;
}
.pbc-layout-modern-new .pbc-modern-card-subtitle { 
    font-size: 0.95em;
    color: var(--pbc-text-color, #111111) !important;
    margin-top: -0.8em; 
    margin-bottom: 1.2em;
}

/* --- Sliders (أشرطة التمرير للطول والوزن ومستوى النشاط) --- */
.pbc-layout-modern-new .pbc-modern-slider-field {
    margin-bottom: 1.25em; 
}
.pbc-layout-modern-new .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, #111111); 
	margin-bottom: 0.5em;
    font-weight: 600;
}
.pbc-layout-modern-new .pbc-modern-slider-wrapper {
	display: flex;
	align-items: center;
	gap: 14px; 
	margin-bottom: 0.35em;
}
.pbc-layout-modern-new .pbc-modern-slider {
	flex-grow: 1;
	height: 7px; 
    width: 100%;
	-webkit-appearance: none;
	appearance: none;
	background: var(--pbc-slider-track-bg, #EAE6DF);
	border-radius: 4px;
	outline: none;
	transition: opacity .2s;
}
.pbc-layout-modern-new .pbc-modern-slider:hover {
	opacity: 0.9;
}
.pbc-layout-modern-new .pbc-modern-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px; 
	height: 24px;
	background: var(--pbc-gold-primary, #B89758);
	border-radius: 50%;
	cursor: pointer;
    border: 2.5px solid var(--pbc-white-bg, #ffffff); 
    box-shadow: 0 3px 8px rgba(184, 151, 88, 0.4); 
    margin-top: -9px; 
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pbc-layout-modern-new .pbc-modern-slider::-webkit-slider-thumb:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(184, 151, 88, 0.5);
}
.pbc-layout-modern-new .pbc-modern-slider::-moz-range-thumb {
	width: 24px;
	height: 24px;
	background: var(--pbc-gold-primary, #B89758);
	border-radius: 50%;
	cursor: pointer;
    border: 2.5px solid var(--pbc-white-bg, #ffffff);
    box-shadow: 0 3px 8px rgba(184, 151, 88, 0.4);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pbc-layout-modern-new .pbc-modern-slider::-moz-range-thumb:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(184, 151, 88, 0.5);
}
.pbc-layout-modern-new .pbc-modern-slider-value {
	min-width: 54px; 
	max-width: 70px;
	padding: 0.45em 0.4em; 
	border: 1px solid var(--pbc-border-color, rgba(184, 151, 88, 0.35)); 
	border-radius: var(--pbc-input-border-radius, 8px);
	text-align: center;
	font-weight: 700; 
	font-size: 0.95em; 
	color: var(--pbc-text-color, #111111);
    background-color: var(--pbc-input-bg, #FAF8F5); 
    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;
}

/* --- Season Card Luxury Styling (قسم الموسم الحالي الفاخر) --- */
.pbc-layout-modern-new .pbc-modern-season-card fieldset {
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.pbc-layout-modern-new .pbc-modern-toggle-buttons-group {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.8rem !important;
    border: none !important;
    padding-top: 0.3em !important;
}

@media (max-width: 580px) {
    .pbc-layout-modern-new .pbc-modern-toggle-buttons-group {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.pbc-layout-modern-new .pbc-modern-toggle-button-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    padding: 0.85em 0.6em !important;
    height: 48px !important;
    border: 1.5px solid var(--pbc-border-color, rgba(184, 151, 88, 0.35)) !important;
    border-radius: var(--pbc-input-border-radius, 12px) !important;
    background-color: var(--pbc-white-bg, #ffffff) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(184, 151, 88, 0.06) !important;
    font-family: 'Cairo', 'Segoe UI', sans-serif !important;
    font-size: 0.9em !important;
    font-weight: 700 !important;
    color: var(--pbc-text-color, #111111) !important;
}

.pbc-layout-modern-new .pbc-season-svg-icon {
    width: 20px !important;
    height: 20px !important;
    color: var(--pbc-gold-primary, #B89758) !important;
    stroke: var(--pbc-gold-primary, #B89758) !important;
    fill: none !important;
    transition: color 0.25s ease, stroke 0.25s ease, transform 0.25s ease !important;
    flex-shrink: 0 !important;
}

.pbc-layout-modern-new .pbc-modern-toggle-button-label:hover {
    border-color: var(--pbc-gold-primary, #B89758) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(184, 151, 88, 0.18) !important;
}

.pbc-layout-modern-new .pbc-modern-toggle-button-label:hover .pbc-season-svg-icon {
    transform: rotate(8deg) scale(1.1) !important;
}

/* Selected Active State for Season Buttons */
.pbc-layout-modern-new input[name="pbc_modern_season"]:checked + .pbc-modern-toggle-button-label {
    background: var(--pbc-gold-gradient, linear-gradient(135deg, #D4AF37 0%, #B89758 100%)) !important;
    border-color: var(--pbc-gold-primary, #B89758) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(184, 151, 88, 0.35) !important;
    transform: translateY(-2px) scale(1.03) !important;
}

.pbc-layout-modern-new input[name="pbc_modern_season"]:checked + .pbc-modern-toggle-button-label .pbc-season-svg-icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* --- Goal Cards Luxury Styling (بطاقات الهدف الرياضي) --- */
.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, rgba(184, 151, 88, 0.35));
    border-radius: var(--pbc-input-card-border-radius, 12px);
    background-color: var(--pbc-white-bg, #ffffff);
    cursor: pointer;
    transition: all 0.25s ease;
    min-height: 150px;
    box-sizing: border-box;
}

.pbc-layout-modern-new .pbc-modern-selectable-card-label:hover {
    border-color: var(--pbc-gold-primary, #B89758);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(184, 151, 88, 0.15);
}

.pbc-layout-modern-new .pbc-modern-selectable-card-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--pbc-input-bg, #FAF8F5);
    border: 1px solid rgba(184, 151, 88, 0.2);
    margin-bottom: 0.8em;
    transition: all 0.25s ease;
}

.pbc-layout-modern-new .pbc-goal-svg-icon {
    width: 22px;
    height: 22px;
    color: var(--pbc-gold-primary, #B89758) !important;
    stroke: var(--pbc-gold-primary, #B89758) !important;
    fill: none !important;
    transition: color 0.25s ease, stroke 0.25s ease;
}

.pbc-layout-modern-new .pbc-modern-card-main-text {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--pbc-text-color, #111111);
    margin-bottom: 0.2em;
}

.pbc-layout-modern-new .pbc-modern-card-sub-text {
    font-size: 0.78em;
    color: #444444;
    line-height: 1.4;
}

/* Checked / Active State for Fitness Goal Cards */
.pbc-layout-modern-new input[name="pbc_modern_goal"]:checked + .pbc-modern-selectable-card-label {
    background: var(--pbc-gold-gradient, linear-gradient(135deg, #D4AF37 0%, #B89758 100%)) !important;
    border-color: var(--pbc-gold-primary, #B89758) !important;
    box-shadow: 0 6px 18px rgba(184, 151, 88, 0.3) !important;
}

.pbc-layout-modern-new input[name="pbc_modern_goal"]:checked + .pbc-modern-selectable-card-label .pbc-modern-selectable-card-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: #ffffff !important;
}

.pbc-layout-modern-new input[name="pbc_modern_goal"]:checked + .pbc-modern-selectable-card-label .pbc-goal-svg-icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.pbc-layout-modern-new input[name="pbc_modern_goal"]:checked + .pbc-modern-selectable-card-label .pbc-modern-card-main-text,
.pbc-layout-modern-new input[name="pbc_modern_goal"]:checked + .pbc-modern-selectable-card-label .pbc-modern-card-sub-text {
    color: #ffffff !important;
}


.pbc-layout-modern-new .pbc-modern-toggle-button-label:hover {
	border-color: var(--pbc-gold-primary, #B89758); 
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(184, 151, 88, 0.15);
}
.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-gold-primary, #B89758) !important;
	background: var(--pbc-gold-gradient, linear-gradient(135deg, #D4AF37 0%, #B89758 100%)) !important; 
	box-shadow: 0 6px 15px rgba(184, 151, 88, 0.3) !important;
    color: #ffffff !important;
}
.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-gold-primary, #B89758);
    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: #ffffff !important;
}
.pbc-layout-modern-new .pbc-modern-card-main-text { 
	font-weight: 700;
	font-size: 0.9em;
	color: var(--pbc-text-color, #111111);
    transition: color 0.2s ease;
}
.pbc-layout-modern-new .pbc-modern-card-sub-text { 
	font-size: 0.75em;
	color: #333333;
    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: #ffffff !important;
}
/* تخصيص أزرار الموسم */
.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(184, 151, 88, 0.05); border: 1px solid var(--pbc-border-color, rgba(184, 151, 88, 0.35)); 
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.pbc-blood-exercise-box {
	background-color: var(--pbc-white-bg, #ffffff) !important;
	border: 1px solid var(--pbc-border-color, rgba(184, 151, 88, 0.35)) !important;
	border-radius: 12px !important;
	padding: 1.2em 1.4em !important;
	box-shadow: 0 4px 15px rgba(184, 151, 88, 0.05) !important;
}
.pbc-blood-exercise-box h5 {
	color: var(--pbc-gold-primary, #B89758) !important;
	font-weight: 700 !important;
	font-size: 1.05em !important;
	margin-top: 0 !important;
	margin-bottom: 0.6em !important;
}
.pbc-blood-exercise-box p {
	color: var(--pbc-text-color, #111111) !important;
	font-size: 0.9em !important;
	line-height: 1.6 !important;
	margin: 0 !important;
	font-weight: 500 !important;
}

.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: 1.05em; 
    margin-bottom: 1em; 
    text-align: right !important; 
    justify-content: flex-start !important;
    color: var(--pbc-gold-dark, #9A7B3E) !important; 
    display: flex !important;
    align-items: center;
    gap: 8px;
}


/* 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(184,151,88,0.06); border: 1px solid var(--pbc-border-color, rgba(184, 151, 88, 0.35)); 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); 
    box-shadow: 0 6px 18px rgba(184, 151, 88, 0.2); 
}

/* --- Styling for "Your Profile" Mini-Card Icons --- */
.pbc-layout-modern-new .pbc-modern-profile-item-icon {
    font-size: 1.8em; 
    color: var(--pbc-gold-primary, #B89758) !important; 
    margin-bottom: 0.4em;
    line-height: 1;
    height: 1.8em; 
    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' !important; color: var(--pbc-gold-primary, #B89758) !important; }
.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"; }
.pbc-layout-modern-new .pbc-modern-profile-item-icon .dashicons-businessman::before { content: "\f338"; }
.pbc-layout-modern-new .pbc-modern-profile-item-icon .dashicons-businesswoman::before { content: "\f339"; }
.pbc-layout-modern-new .pbc-modern-profile-item-icon .dashicons-admin-users::before { content: "\f307"; }

.pbc-layout-modern-new .pbc-modern-profile-item-icon .pbc-gender-svg-icon {
    width: 24px !important;
    height: 24px !important;
    color: var(--pbc-gold-primary, #B89758) !important;
    stroke: var(--pbc-gold-primary, #B89758) !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Label text (e.g., "Age:", "Height:") within profile mini-cards */
.pbc-layout-modern-new .pbc-modern-profile-item-label {
    font-size: 0.75em; 
    color: var(--pbc-text-color, #111111) !important;
    font-weight: 700;
    margin-bottom: 0.2em;
    display: block;
    text-transform: uppercase; 
    letter-spacing: 0.5px;   
}

/* Main value (e.g., "30", "170 cm") within profile mini-cards */
.pbc-layout-modern-new .pbc-modern-profile-item-value { 
    font-size: 1.15em; 
    font-weight: 800; 
    color: var(--pbc-text-color, #111111) !important;
    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; 
    color: #444444; 
    line-height: 1.3;
    display: block; 
    margin-top: 0.1em; 
}

/* --- 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: 800; color: var(--pbc-gold-primary, #B89758) !important; margin-top: 0; margin-bottom: 0.25em; letter-spacing: -0.5px; }
.pbc-modern-main-page-subtitle { font-size: 1.1em; color: var(--pbc-text-color, #111111) !important; font-weight: 500; 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: 1200px; width: 100%; margin: 3em 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 30px rgba(184, 151, 88, 0.09)); border: 1px solid var(--pbc-border-color, rgba(184, 151, 88, 0.35)); font-size: 16px; position: relative; overflow: hidden; }

@media (min-width: 821px) {
    .pbc-calculator-wrapper.pbc-layout-modern-new {
        margin: 4em auto 3em auto !important;
    }
}
.pbc-layout-modern-new .pbc-modern-main-content-wrapper { display: flex; flex-wrap: nowrap; }
.pbc-layout-modern-new .pbc-modern-input-column { flex: 0 0 55%; width: 55%; padding: 2.2em; box-sizing: border-box; order: 2; }
.pbc-layout-modern-new .pbc-modern-results-column { flex: 0 0 45%; width: 45%; background-color: #ffffff; padding: 2.2em; box-sizing: border-box; order: 1; border-right: 1px solid var(--pbc-border-color, rgba(184, 151, 88, 0.2)); }

@media (max-width: 820px) {
    .pbc-layout-modern-new .pbc-modern-main-content-wrapper { flex-wrap: wrap; }
    .pbc-layout-modern-new .pbc-modern-input-column { flex: 1 1 100%; width: 100%; padding: 1.5em; order: unset; }
    .pbc-layout-modern-new .pbc-modern-results-column { flex: 1 1 100%; width: 100%; padding: 1.5em; order: unset; border-right: none; border-top: 1px solid var(--pbc-border-color, rgba(184, 151, 88, 0.2)); }
}

/* --- 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(184, 151, 88, 0.05); border: 1px solid var(--pbc-border-color, rgba(184, 151, 88, 0.35)); 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-gold-primary, #B89758) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pbc-layout-modern-new .pbc-modern-field-label-text {
    font-size: 0.85em;
    font-weight: 700;
    color: var(--pbc-text-color, #111111) !important;
}

.pbc-layout-modern-new .pbc-modern-field-label { display: flex; font-size: 0.85em; font-weight: 700; color: var(--pbc-text-color, #111111) !important; margin-bottom: 0.8em; align-items: center; }
.pbc-layout-modern-new .pbc-modern-field-icon { margin-right: 8px; color: var(--pbc-gold-primary, #B89758) !important; font-size: 1.1em; line-height: 1; }

.pbc-layout-modern-new .pbc-modern-results-value { 
    font-size: 1.8em; 
    font-weight: 800;
    color: var(--pbc-text-color, #111111) !important;
    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.85em;
    color: var(--pbc-text-color, #111111) !important;
    line-height: 1.4;
	font-weight: 500;
}

/* Profile Card (بطاقة ملفك الشخصي) */
.pbc-layout-modern-new .pbc-modern-profile-details p {
    margin: 0.6em 0; 
    font-size: 0.9em;
    color: var(--pbc-text-color, #111111);
    display: flex;
    align-items: center;
    justify-content: space-between; 
}
.pbc-layout-modern-new .pbc-modern-profile-details .dashicons {
    margin-right: 8px;
    color: var(--pbc-gold-primary, #B89758) !important;
    font-size: 1.1em;
}
.pbc-layout-modern-new .pbc-modern-profile-details strong {
    font-weight: 700;
    color: var(--pbc-text-color, #111111) !important; 
}

/* BMI Score Card (بطاقة نتيجة BMI الأساسية) */
.pbc-layout-modern-new .pbc-modern-bmi-score-card {
	background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%) !important;
	border: 1.5px solid rgba(184, 151, 88, 0.45) !important;
	box-shadow: 0 8px 25px rgba(184, 151, 88, 0.12) !important;
	position: relative;
}
.pbc-layout-modern-new .pbc-modern-bmi-score-card .pbc-modern-card-title { 
    text-align: center;
    justify-content: center;
    display: flex; 
    font-size: 1.1em;
	color: var(--pbc-gold-dark, #9A7B3E) !important;
	letter-spacing: 0.3px;
}
.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: 3.2em; 
    font-weight: 800;
    color: var(--pbc-text-color, #111111) !important;
    line-height: 1;
	letter-spacing: -1px;
}
.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-gold-primary, #B89758) !important; 
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(184, 151, 88, 0.35); 
    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.7em; font-weight: 700;
    color: var(--pbc-text-color, #111111) !important; 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); }


/* Open Luxury Cards for Insights & Explanations */
.pbc-layout-modern-new .pbc-modern-collapsible-sections {
    margin-top: 1.5em;
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 1.2em;
}
.pbc-layout-modern-new .pbc-modern-collapsible-item {
	background-color: var(--pbc-white-bg, #ffffff);
	border: 1px solid var(--pbc-border-color, rgba(184, 151, 88, 0.35));
	border-radius: var(--pbc-input-card-border-radius, 12px);
	padding: 1.2em 1.4em;
	box-shadow: 0 4px 15px rgba(184, 151, 88, 0.05);
	transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.pbc-layout-modern-new .pbc-modern-collapsible-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(184, 151, 88, 0.12);
}
.pbc-layout-modern-new .pbc-modern-collapsible-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 0 0 0.8em 0;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid rgba(184, 151, 88, 0.2);
	margin-bottom: 0.8em;
	font-weight: 700;
	font-size: 1.05em; 
	color: var(--pbc-gold-primary, #B89758) !important;
	text-align: right;
	cursor: default;
}

.pbc-layout-modern-new .pbc-modern-collapsible-trigger .dashicons {
    color: var(--pbc-gold-primary, #B89758) !important;
    font-size: 1.2em;
}

.pbc-layout-modern-new .pbc-modern-collapsible-icon {
    display: none !important; /* Hide toggle arrow as sections stay open */
}

.pbc-layout-modern-new .pbc-modern-collapsible-content {
	padding: 0;
	font-size: 0.9em; 
	line-height: 1.6;
	color: var(--pbc-text-color, #111111) !important;
	font-weight: 500;
	display: block !important;
}
.pbc-layout-modern-new .pbc-modern-collapsible-content p {
	margin-top: 0;
	margin-bottom: 0.5em;
	color: var(--pbc-text-color, #111111) !important;
}
.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-input-column,
.pbc-layout-modern-new[dir="rtl"] .pbc-modern-input-column {
    order: 1; /* Inputs on the right in RTL */
}
html[dir="rtl"] .pbc-layout-modern-new .pbc-modern-results-column,
.pbc-layout-modern-new[dir="rtl"] .pbc-modern-results-column {
    order: 2; /* Results on the left in 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;
}

/* --- Premium Interactive Muscle Map & Blood Diet Layout Styles --- */
.pbc-muscle-map-card, .pbc-blood-diet-card {
    background-color: var(--pbc-white-bg, #ffffff) !important;
    border: 1px solid var(--pbc-border-color, #e1e4e8) !important;
    border-radius: 16px !important;
    padding: 1.5em !important;
    margin-bottom: 1.5em !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
    text-align: right !important; /* Right align for Arabic */
}
html[dir="rtl"] .pbc-muscle-map-card, html[dir="rtl"] .pbc-blood-diet-card {
    text-align: right !important;
}

.pbc-card-desc {
    font-size: 0.85em;
    color: var(--pbc-label-color, #7f8c8d);
    margin-top: -0.5em;
    margin-bottom: 1.5em;
}

.pbc-muscle-map-container {
    display: flex;
    gap: 1.5em;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}
@media (max-width: 520px) {
    .pbc-muscle-map-container {
        flex-direction: column;
    }
}

.pbc-muscle-map-svg-wrapper {
    flex: 0 0 160px;
    width: 160px;
    height: 320px;
    background-color: var(--pbc-input-bg, #f5f4ef);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pbc-border-color, #e1e4e8);
}

.pbc-muscle-map-svg {
    width: 100%;
    height: 100%;
}

.pbc-muscle-head {
    fill: #e1e4e8;
    stroke: #ffffff;
    stroke-width: 1.5;
}
.pbc-muscle-group {
    fill: #d1d5db;
    stroke: #ffffff;
    stroke-width: 1.5;
    cursor: pointer;
    transition: fill 0.3s ease, filter 0.3s ease;
}

.pbc-muscle-group.pbc-muscle-upper:hover,
.pbc-muscle-group.pbc-muscle-upper.active {
    fill: #d4af37;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
}
.pbc-muscle-group.pbc-muscle-core:hover,
.pbc-muscle-group.pbc-muscle-core.active {
    fill: #b8860b;
    filter: drop-shadow(0 0 6px rgba(184, 134, 11, 0.6));
}
.pbc-muscle-group.pbc-muscle-lower:hover,
.pbc-muscle-group.pbc-muscle-lower.active {
    fill: #aa7c11;
    filter: drop-shadow(0 0 6px rgba(170, 124, 17, 0.6));
}

.pbc-muscle-map-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.pbc-muscle-stats-box {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
}

.pbc-stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6em 0.8em;
    background-color: var(--pbc-input-bg, #f5f4ef);
    border-radius: 8px;
    font-size: 0.85em;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pbc-stat-item.pbc-highlight-row {
    background-color: #fffbf0;
    border-color: #d4af37;
}

.pbc-stat-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-left: 8px;
    display: inline-block;
}
.pbc-stat-color.upper { background-color: #d4af37; }
.pbc-stat-color.core { background-color: #b8860b; }
.pbc-stat-color.lower { background-color: #aa7c11; }

.pbc-stat-label {
    flex-grow: 1;
    text-align: right;
    font-weight: 600;
	color: var(--pbc-text-color, #111111) !important;
}

.pbc-stat-value {
    font-weight: 700;
    color: var(--pbc-text-color, #111111) !important;
}

.pbc-body-totals-box {
    margin-top: 0.5em;
    padding-top: 0.8em;
    border-top: 1px solid var(--pbc-border-color, rgba(184, 151, 88, 0.35));
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    color: var(--pbc-text-color, #111111) !important;
	font-weight: 600;
}
.pbc-body-totals-box strong {
    color: var(--pbc-text-color, #111111) !important;
    font-weight: 800;
}

/* --- Blood Type Card Refinements (قسم فصيلة الدم الفاخر) --- */
.pbc-layout-modern-new .pbc-modern-blood-field,
.pbc-layout-modern-new .pbc-modern-blood-type-card fieldset {
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.pbc-layout-modern-new .pbc-modern-blood-type-card legend {
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin-bottom: 0.9em !important;
    float: none !important;
    width: auto !important;
    box-shadow: none !important;
}

.pbc-layout-modern-new .pbc-modern-blood-selector {
    display: flex !important;
    gap: 1.2rem !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0.8em !important;
    margin-bottom: 0.3em !important;
    border: none !important;
}

.pbc-layout-modern-new .pbc-modern-blood-option {
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    transition: all 0.25s ease !important;
}

.pbc-layout-modern-new .pbc-modern-blood-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--pbc-border-color, rgba(184, 151, 88, 0.35)) !important;
    background-color: var(--pbc-white-bg, #ffffff) !important;
    font-family: 'Cairo', 'Segoe UI', sans-serif !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    color: var(--pbc-text-color, #111111) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 3px 10px rgba(184, 151, 88, 0.08) !important;
    outline: none !important;
}

.pbc-layout-modern-new .pbc-modern-blood-option:hover .pbc-modern-blood-circle {
    border-color: #B89758 !important;
    color: #B89758 !important;
    box-shadow: 0 6px 16px rgba(184, 151, 88, 0.2) !important;
    transform: translateY(-3px) !important;
}

.pbc-layout-modern-new input[name="pbc_modern_blood"]:checked + .pbc-modern-blood-option .pbc-modern-blood-circle {
    border-color: #B89758 !important;
    background: var(--pbc-gold-gradient, linear-gradient(135deg, #D4AF37 0%, #B89758 100%)) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(184, 151, 88, 0.35) !important;
    transform: scale(1.08) translateY(-2px) !important;
}

/* Fallbacks for Standard Layout */
.pbc-blood-selector {
    display: flex;
    gap: 0.8em;
    justify-content: center;
    margin-top: 0.5em;
}
.pbc-blood-selector .pbc-segmented-button-label {
    cursor: pointer;
    transition: all 0.2s ease;
}
input[name="pbc_standard_blood"]:checked + .pbc-segmented-button-label {
    border-color: #d4af37 !important;
    background-color: #fffbf0 !important;
    color: #b8860b !important;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.15) !important;
    transform: scale(1.05);
}

.pbc-blood-diet-lists {
    display: flex;
    gap: 1.2em;
    margin-bottom: 1.2em;
}
@media (max-width: 520px) {
    .pbc-blood-diet-lists {
        flex-direction: column;
    }
}

.pbc-diet-list-box {
    flex: 1;
    padding: 1.2em;
    border-radius: 12px;
    border: 1px solid var(--pbc-border-color, #e1e4e8);
    box-shadow: 0 3px 10px rgba(0,0,0,0.01);
}
.pbc-diet-list-box.beneficial {
    background-color: #f6fff6;
    border-color: #c2eec2;
}
.pbc-diet-list-box.avoid {
    background-color: #fff5f5;
    border-color: #fecaca;
}

.pbc-diet-list-box h5, .pbc-diet-list-box h4 {
    margin-top: 0;
    margin-bottom: 0.8em;
    font-size: 0.95em;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pbc-diet-list-box.beneficial h5, .pbc-diet-list-box.beneficial h4 { color: #2e7d32; }
.pbc-diet-list-box.avoid h5, .pbc-diet-list-box.avoid h4 { color: #c62828; }

.pbc-diet-list-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.pbc-diet-list-box li {
    font-size: 0.85em;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--pbc-text-color, #2c3e50);
}

.pbc-diet-list-box li .dashicons-yes-alt {
    color: #2e7d32;
    font-size: 1.3em;
}
.pbc-diet-list-box li .dashicons-dismiss {
    color: #c62828;
    font-size: 1.3em;
}

.pbc-blood-exercise-box {
    background-color: #fffbf0;
    border: 1px solid #ffe29a;
    border-radius: 12px;
    padding: 1.2em;
    margin-top: 0.5em;
}
.pbc-blood-exercise-box h5, .pbc-blood-exercise-box h4 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 0.95em;
    font-weight: 700;
    color: #aa7c11;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pbc-blood-exercise-box p {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.5;
    color: var(--pbc-text-color, #2c3e50);
}