/* ============================================
   CORDIAL RECIPES - FRONTEND STYLES
   Version: 1.0.11 - Added vitamins/minerals sections to nutrition facts
   Author: CordialTec
   License: GPL2
   
   Clean, minimal styling matching original shortcode behavior
============================================ */

/* ============================================
   EQUIPMENT SHORTCODE STYLES
============================================ */
.cordial-equipments-container {
    margin: 20px 0;
}

.cordial-equipments-grid {
    display: grid;
    align-items: center;
    justify-items: center;
}

.cordial-equipment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cordial-equipment-image {
    border-radius: 8px;
    object-fit: cover;
}

.cordial-equipment-name {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #333;
    text-align: center;
}

@media (max-width: 768px) {}

/* ============================================
   PRINT BUTTON STYLES - UPDATED: Force white text
============================================ */
.cordial-recipe-print-button {
    background-color: #ff6600;
    border-radius: 10px;
    padding: 8px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
    color: white !important;
    /* FORCE white text */
}

.cordial-recipe-print-button:hover {
    background-color: #e55a00;
    text-decoration: none;
    color: white !important;
    /* FORCE white text on hover */
}

.cordial-recipe-print-button svg {
    flex-shrink: 0;
    fill: white;
}

.cordial-recipe-print-button span {
    color: white !important;
    /* FORCE white text */
    font-weight: bold;
}

/* ============================================
   ENHANCED RECIPE NOTES STYLES
============================================ */
.cordial-notes-parent {
    width: 90%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    margin: 20px auto;
}

.cordial-notes-header {
    background-color: #fff0e6;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cordial-notes-header h3 {
    margin: 0;
    color: #1f1f1f;
    font-weight: 600;
}

.cordial-notes-content {
    padding: 20px;
    background-color: white;
}

.cordial-notes-content p {
    margin: 0;
    line-height: 1.5;
    color: #333;
}

/* ============================================
   NEW PARENT TAXONOMIES SHORTCODE STYLES
   Multiple styles: default, iconed, iconed-count, imaged, imaged-count, imaged_recipe_count
   UPDATED: Added food-type taxonomy
============================================ */

/* Base parent taxonomies container */
.cordial-recipe-parent-taxonomies {
    margin: 20px 0;
}

/* Default style (plain text) */
.cordial-style-default.cordial-parent-horizontal {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.cordial-style-default.cordial-parent-vertical {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}

.cordial-parent-taxonomy-item {
    margin: 5px 0;
}

.cordial-parent-taxonomy-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.cordial-parent-taxonomy-link:hover {
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
}

.cordial-parent-taxonomy-name {
    font-size: 1rem;
}

/* Iconed Styles */
.cordial-taxonomy-iconed-parent {
    border-radius: 15px;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    gap: 12px;
    text-decoration: none;
    color: white !important;
    /* FORCE white text */
    transition: all 0.3s ease;
    min-width: 200px;
}

.cordial-taxonomy-iconed-parent:hover {
    text-decoration: none;
    color: white !important;
    /* FORCE white text on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cordial-taxonomy-iconed-icon {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.cordial-taxonomy-iconed-icon svg {
    width: 100%;
    height: 100%;
    fill: white;
}

.cordial-taxonomy-iconed-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cordial-taxonomy-iconed-title {
    font-weight: 600;
    font-size: 16px;
    color: inherit;
}

.cordial-taxonomy-iconed-count {
    background-color: rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Enhanced Imaged Styles with new parameters - FIXED: Removed margin between content and count */
.cordial-taxonomy-style-parent {
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    min-width: 280px;
    max-width: 350px;
    padding: 20px;
    align-items: center;
    text-align: center;
}

.cordial-taxonomy-style-parent:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: inherit;
}

.cordial-taxonomy-style-content {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 0;
    /* FIXED: Removed margin between content and count */
    width: 100%;
    justify-content: center;
}

.cordial-taxonomy-style-image {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cordial-taxonomy-style-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cordial-taxonomy-style-title {
    font-weight: bold;
    font-size: 18px;
    color: #333;
    text-align: left;
    flex: 1;
}

.cordial-taxonomy-style-count {
    border-radius: 50%;
    background-color: #f0f0f0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #666;
    border: 2px solid #ddd;
    font-size: 14px;
    margin-top: 0;
    /* FIXED: Removed margin */
}

.cordial-taxonomy-style-recipe-count {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-top: 0;
    /* FIXED: Removed margin */
}

/* NEW: Parent Taxonomy Card Styles for Archive Pages - UPDATED: Added food-type */
.cordial-parent-taxonomy-card {
    border-radius: 15px;
    border-top: 5px solid #ddd;
    border-left: 10px solid #ddd;
    padding: 15px;
    display: inline-block;
    font-family: Arial, sans-serif;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
}

.cordial-parent-taxonomy-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: inherit;
}

.cordial-parent-taxonomy-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cordial-parent-taxonomy-card-image {
    width: 60px;
    height: 60px;
    display: inline-block;
    object-fit: contain;
    border: 3px solid #ddd;
    border-radius: 8px;
    padding: 5px;
    background: white;
}

.cordial-parent-taxonomy-card-name {
    display: inline-block;
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.cordial-recipe-count {
    display: block;
    text-align: center;
    font-size: 14px;
    color: #666;
}

/* ============================================
   NEW ROBUST TAXONOMIES SHORTCODE STYLES
   Clean, minimal styling - no boxes, borders, or shadows
   UPDATED: Added food-type taxonomy
============================================ */

/* Base taxonomies container */
.cordial-recipe-taxonomies {
    margin: 15px 0;
}

/* Term items - completely clean styling */
.cordial-term-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Term links - clean and simple */
.cordial-term-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cordial-term-link:hover {
    text-decoration: none;
}

/* Term content - simple layout */
.cordial-term-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* Term images - clean display */
.cordial-term-image {
    border-radius: 4px;
    object-fit: contain;
}

/* Term names - minimal styling */
.cordial-term-name {
    font-size: 0.8rem;
    color: #333;
    text-align: center;
    margin: 0;
    line-height: 1.2;
}

/* Tooltip styles */
.cordial-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1000;
}

.cordial-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
}

.cordial-term-item:hover .cordial-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-12px);
}

/* ============================================
   PARENT TAXONOMIES STYLES - UPDATED: Added food-type
============================================ */

.cordial-query-parent-taxonomies .cordial-taxonomy-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cordial-query-parent-taxonomies .cordial-taxonomy-link {
    text-decoration: none;
    color: inherit;
}

.cordial-query-parent-taxonomies .cordial-taxonomy-content {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cordial-query-parent-taxonomies .cordial-taxonomy-name {
    font-weight: 500;
    color: #2c3e50;
}

.cordial-query-parent-taxonomies .cordial-taxonomy-count {
    font-size: 0.8rem;
    color: #666;
}

/* ============================================
   COOKING METHODS STYLES
============================================ */

.cordial-cooking-methods-title {
    margin: 0 0 10px 0;
    color: #2c3e50;
}

.cordial-cooking-methods {
    display: inline-block;
    font-style: italic;
    color: #666;
}

/* ============================================
   SERVING INFORMATION SHORTCODES - FIXED
   Separate elements for proper responsive control
============================================ */

.cordial-single-serving,
.cordial-calories,
.cordial-best-season {
    display: inline-block;
    margin-right: 15px;
    font-size: 0.9rem;
}

/* Label visibility control */
.cordial-desktop-label-hide .cordial-label,
.cordial-mobile-label-hide .cordial-label {
    display: none;
}

.cordial-desktop-label-show .cordial-label,
.cordial-mobile-label-show .cordial-label {
    display: inline;
}

/* Unit (per serving) visibility control */
.cordial-desktop-label-hide .cordial-unit,
.cordial-mobile-label-hide .cordial-unit {
    display: none;
}

.cordial-desktop-label-show .cordial-unit,
.cordial-mobile-label-show .cordial-unit {
    display: inline;
}

/* ============================================
   SINGLE RECIPE VIDEO TOGGLE FIXES
============================================ */

.cordial-video-toggle-container {
    position: relative;
    overflow: visible !important;
    /* FIXED: Ensure toggle doesn't get clipped */
}

.cordial-recipes-toggle-container {
    position: relative;
    overflow: visible !important;
    /* FIXED: Ensure toggle button doesn't get clipped */
    box-sizing: border-box;
}

.toggle-button {
    position: absolute;
    top: 5px !important;
    /* FIXED: Explicit top positioning */
    left: 10px;
    z-index: 2;
    box-sizing: border-box;
    transition: left 0.3s ease;
}

.toggle-button.active {
    left: 50px !important;
    /* FIXED: Adjusted for proper positioning */
}

.video-icon {
    position: absolute;
    top: 5px !important;
    /* FIXED: Align with toggle button */
    z-index: 1;
    box-sizing: border-box;
}

/* ============================================
   RECIPE KEY IMAGES STYLES - UPDATED: 50x50px with tooltips
============================================ */

.cordial-recipe-key-icon,
.cordial-sidebar-key-item img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ddd;
    transition: transform 0.3s ease;
}

.cordial-recipe-key-item:hover .cordial-recipe-key-icon,
.cordial-sidebar-key-item:hover img {
    transform: scale(1.1);
}

/* ============================================
   RECIPE BOOK STYLES
============================================ */

.cordial-recipe-book-container {
    padding-bottom: 1rem !important;
    height: auto;
    text-align: center;
    position: relative;
}

.cordial-recipe-book-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: block;
}

.cordial-recipe-book-download-btn {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff6600;
    color: white !important;
    /* FORCE white text */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.cordial-recipe-book-download-btn:hover {
    background-color: #e55a00;
    color: white !important;
    /* FORCE white text on hover */
}

/* Recipe Book Popup */
.cordial-recipe-book-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.cordial-recipe-book-popup-content {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    position: relative;
}

.cordial-recipe-book-popup h3 {
    margin-top: 0;
    color: #333;
    margin-bottom: 20px;
}

.cordial-recipe-book-popup input[type="email"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

.cordial-recipe-book-popup button {
    background-color: #ff6600;
    color: white !important;
    /* FORCE white text */
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

.cordial-recipe-book-popup button:hover {
    background-color: #e55a00;
    color: white !important;
    /* FORCE white text on hover */
}

.cordial-recipe-book-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.cordial-recipe-book-popup-close:hover {
    color: #333;
}

.cordial-recipe-book-popup-message {
    margin-top: 15px;
    font-size: 14px;
    color: #666;
    display: none;
}

.cordial-recipe-book-popup-message.success {
    color: #28a745;
}

.cordial-recipe-book-popup-message.error {
    color: #dc3545;
}

/* ============================================
   MEET AUTHOR STYLES - UPDATED: Dynamic title
============================================ */

.meet-author-container h2 {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: #333;
    border-bottom: 2px solid #ff6600;
    padding-bottom: 5px;
}

/* ============================================
   RESPONSIVE DESIGN
============================================ */

@media (max-width: 768px) {

    /* Mobile label behavior */
    .cordial-mobile-label-hide .cordial-label,
    .cordial-mobile-label-hide .cordial-unit {
        display: none;
    }

    .cordial-mobile-label-show .cordial-label,
    .cordial-mobile-label-show .cordial-unit {
        display: inline;
    }

    /* Stack serving information on mobile */
    .cordial-single-serving,
    .cordial-calories,
    .cordial-best-season {
        display: block;
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* Equipment grid mobile adjustments */
    .cordial-equipments-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /*Notes Mobile Header Size*/
    .cordial-notes-header h3 {
        font-size: 18px !important;
    }

    /* Adjust term display for mobile */
    .cordial-recipe-taxonomies.cordial-orientation-horizontal {
        justify-content: center;
    }

    .cordial-term-name {
        font-size: 0.7rem;
    }

    /* Cooking methods mobile */
    .cordial-cooking-methods {
        display: block;
        margin-top: 5px;
    }

    /* Parent taxonomies mobile */
    .cordial-style-default.cordial-parent-horizontal {
        flex-direction: column;
        align-items: flex-start;
    }

    .cordial-taxonomy-iconed-parent {
        min-width: 100%;
        justify-content: flex-start;
    }

    .cordial-taxonomy-style-parent {
        min-width: 94% !important;
        max-width: 94% !important;
        margin: 0 auto !important;
    }

    /* Recipe cards mobile width */
    .cordial-recipe-card {
        width: 94% !important;
        margin: 0 auto !important;
    }

    /* Parent taxonomy cards mobile */
    .cordial-parent-taxonomy-card {
        margin-bottom: 15px;
        width: 94% !important;
        margin: 0 auto 15px auto !important;
    }

    /* Inline nutrition facts mobile width - FIXED: 85% width on tablet and mobile */
    .cordial-nutrition-wrapper[data-format="inline"] {
        width: 85% !important;
        margin: 0 auto !important;
    }

    /* Video toggle mobile adjustments */
    .cordial-recipes-toggle-container {
        width: 80px;
        height: 45px;
    }

    .toggle-button {
        width: 35px;
        height: 35px;
        top: 5px !important;
    }

    .toggle-button.active {
        left: 45px !important;
    }

    .video-icon {
        width: 35px;
        height: 35px;
        top: 5px !important;
    }

    /* Recipe Book mobile */
    .cordial-recipe-book-download-btn {
        font-size: 14px;
        padding: 8px 16px;
    }
}

/* Desktop-specific styles */
@media (min-width: 769px) {

    .cordial-desktop-label-hide .cordial-label,
    .cordial-desktop-label-hide .cordial-unit {
        display: none;
    }

    .cordial-desktop-label-show .cordial-label,
    .cordial-desktop-label-show .cordial-unit {
        display: inline;
    }
}

/* Tablet-specific styles */
@media (max-width: 1024px) and (min-width: 769px) {
    .cordial-nutrition-wrapper[data-format="inline"] {
        width: 85% !important;
        margin: 0 auto !important;
    }
}

/* ============================================
   EXISTING STYLES (with fixes)
============================================ */

/* Enhanced Ingredients Shortcode Styles - NEW: Added parameters for image control */
.cordial-ingredients-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* NEW: Controlled gap between items */
}

.cordial-ingredient-item {
    display: flex;
    align-items: center;
    padding: 10px;
    background: transparent;
    /* NEW: No background */
}

.cordial-ingredient-image {
    object-fit: cover;
    /* NEW: Controlled via parameter */
    border-radius: 4px;
    /* NEW: Controlled via parameter */
    margin-right: 15px;
}

.cordial-ingredient-description {
    display: flex;
    align-items: center;
    gap: 1px;
    /* FIXED: Reduced from 8px to 1px */
}

.cordial-ingredient-status {
    font-style: italic;
    color: #666;
    margin-left: 1px;
    /* FIXED: Reduced gap */
}

/* Instructions Shortcode Styles - FIXED: Orange numbers */
.cordial-instructions-list {
    list-style: none;
    padding: 0;
}

.cordial-instruction-item {
    margin-bottom: 20px;
}

.cordial-instruction-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.cordial-instruction-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    background: #FF692A;
    /* CHANGED: Orange background */
    color: white;
    border-radius: 50%;
    font-weight: bold;
    flex-shrink: 0;
}

.cordial-instruction-text {
    flex: 1;
}

/* Recipe Information/Servings Styles */
.cordial-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.cordial-info-item {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
}

/* Toppings Shortcode Styles */
.cordial-toppings-list {
    list-style: none;
    padding: 0;
}

.cordial-topping-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
}

.cordial-topping-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
}

.cordial-topping-status {
    font-style: italic;
    color: #666;
    margin-left: 8px;
}

/* Badge Styles - FIXED: White text on hover */
.badge {
    position: absolute;
    top: 10px;
    right: 0;
    color: white !important;
    /* FORCE white text */
    padding: 8px 15px;
    border-radius: 25px 0 0 25px;
    font-weight: bold;
    font-size: 12px;
    z-index: 2;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.badge:hover {
    opacity: 0.9;
    color: white !important;
    /* FORCE white text on hover */
    text-decoration: none;
}

/* Recipe Key Icons Container - FIXED: Ensure visibility */
.cordial-recipe-keys-container {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
    /* Higher z-index to appear above post content */
}

.cordial-recipe-keys-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid white;
    /* REDUCED: From 3px to 1px */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    background: white;
    /* Ensure background for visibility */
    display: block;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.cordial-recipe-keys-image:hover {
    transform: scale(1.1);
}

/* Tooltip for recipe key images */
.cordial-recipe-key-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1000;
}

.cordial-recipe-key-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
}

.cordial-recipe-keys-image:hover .cordial-recipe-key-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-12px);
}

/* Nutrition Facts Styles - FIXED: Full width and proper inline display */
.cordial-nutrition-facts {
    width: 100% !important;
    border: 2px solid black !important;
    padding: 0.5rem !important;
    background: white !important;
    margin: 20px auto !important;
    font-family: Arial, sans-serif !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.cordial-nutrition-facts .nutrition-facts-header {
    border-bottom: 10px solid black !important;
    padding-bottom: 5px !important;
    margin-bottom: 5px !important;
}

.cordial-nutrition-facts .nutrition-facts-header h1 {
    font-size: 24px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.cordial-nutrition-facts .serving-size {
    border-bottom: 1px solid black !important;
    padding: 5px 0 !important;
    font-size: 12px !important;
}

.cordial-nutrition-facts .amount-per-serving {
    padding: 5px 0 !important;
    font-size: 15px !important;
    font-weight: bold !important;
}

.cordial-nutrition-facts .calories-section {
    border-bottom: 5px solid black !important;
    padding: 5px 0 !important;
    font-size: 24px !important;
    font-weight: bold !important;
    display: flex !important;
    justify-content: space-between !important;
}

.cordial-nutrition-facts .daily-value-heading {
    font-size: 10px !important;
    font-style: italic !important;
    text-align: right !important;
    padding: 5px 0 !important;
    border-bottom: 1px solid black !important;
}

.cordial-nutrition-facts .nutrients-section {
    width: 100% !important;
    border-bottom: 5px solid black !important;
    font-size: 12px !important;
}

.cordial-nutrition-facts .nutrient-row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 2px 0 !important;
    border-bottom: 1px solid black !important;
}

.cordial-nutrition-facts .nutrient-row.indented {
    padding-left: 15px !important;
}

.cordial-nutrition-facts .footnote {
    font-size: 10px !important;
    padding-top: 5px !important;
    line-height: 1.2 !important;
}

/* Additional nutrients section */
.cordial-nutrition-facts .additional-nutrients {
    border-top: 1px solid black !important;
    padding-top: 5px !important;
    margin-top: 5px !important;
}

.cordial-nutrition-facts .additional-nutrients-title {
    font-size: 10px !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
}

.cordial-nutrition-facts .additional-nutrient-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 10px !important;
    padding: 1px 0 !important;
}

/* Inline Nutrition Label Styles - FIXED: Proper toggle position, responsive width, centered title, and SVG icons */
.cordial-nutrition-wrapper[data-format="inline"] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    box-sizing: border-box;
}

.cordial-nutrition-wrapper[data-format="inline"] .nutrition-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
    flex-direction: row;
}

/* FIXED: Centered title and proper toggle positioning */
.cordial-nutrition-wrapper[data-format="inline"] .nutrition-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    order: 1;
    text-align: center;
    /* FIXED: Centered title */
    flex: 1;
    /* FIXED: Take available space */
}

.cordial-nutrition-wrapper[data-format="inline"] .toggle-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: #3498db;
    transition: color 0.3s ease;
    padding: 5px;
    order: 2;
    /* FIXED: Toggle on right side */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cordial-nutrition-wrapper[data-format="inline"] .toggle-button:hover {
    color: #2980b9;
}

/* FIXED: Nutrition toggle icons styling */
.cordial-nutrition-toggle-icons {
    width: 24px;
    height: 24px;
    fill: #ff6600;
    /* FIXED: Orange color */
}

.cordial-nutrition-wrapper[data-format="inline"] .nutrition-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cordial-nutrition-wrapper[data-format="inline"] .nutrition-item {
    text-decoration: underline;
    padding: 5px 0;
    color: #2c3e50;
    white-space: nowrap;
}

.cordial-nutrition-wrapper[data-format="inline"].collapsed .nutrition-item.first-line {
    display: block;
}

.cordial-nutrition-wrapper[data-format="inline"].collapsed .nutrition-item:not(.first-line) {
    display: none;
}

.cordial-nutrition-wrapper[data-format="inline"]:not(.collapsed) .nutrition-item {
    display: block;
}

/* NEW: Vitamins and Minerals Sections for Frontend */
.cordial-recipes-vitamins-section,
.cordial-recipes-minerals-section {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #3498db;
}

.cordial-recipes-vitamins-section .nutrition-section-header,
.cordial-recipes-minerals-section .nutrition-section-header {
    font-weight: bold;
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.cordial-recipes-vitamins-section .nutrition-vitamins-list,
.cordial-recipes-minerals-section .nutrition-minerals-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cordial-recipes-vitamins-section .nutrition-item,
.cordial-recipes-minerals-section .nutrition-item {
    background: white;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    text-decoration: none;
}

/* Recipe Notes & Enhanced Hashtags */
.cordial-recipe-notes {
    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
}

.cordial-recipe-hashtags {
    margin: 20px 0;
}

.cordial-hashtags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.cordial-hashtag {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.9rem;
    gap: 5px;
}

.cordial-hashtag:hover {
    background: #2980b9;
    color: white;
}

.cordial-hashtag-image {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

/* Difficulty Shortcode Styles */
.cordial-recipe-difficulty {
    font-weight: bold;
    text-transform: capitalize;
}

/* Recipe Card Base Styles */
.cordial-recipe-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
    width: 100%;
    /* Ensure proper width */
}

.cordial-recipe-card:hover {
    transform: translateY(-5px);
}

/* Featured Image Wrapper - FIXED: Removed overflow: hidden */
.featured-image-wrapper {
    position: relative;
    height: 200px;
    background: #f0f0f0;
    /* REMOVED: overflow: hidden - This was clipping the recipe key images */
}

.featured-image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cordial-recipe-card:hover .featured-image {
    transform: scale(1.05);
}

/* Recipe Meta Styles */
.recipe-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.meta-span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

.meta-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meta-icon svg {
    width: 100%;
    height: 100%;
}

/* Post Content Wrapper */
.post-content-wrapper {
    padding: 35px 15px 15px 15px;
    text-align: center;
    position: relative;
    z-index: 2;
    /* Lower z-index than recipe key images */
}

.post-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
    line-height: 1.3;
}

.post-title a {
    color: inherit;
    text-decoration: none;
}

.post-title a:hover {
    color: #FF692A;
}

/* Mobile responsive for new ingredients parameters */
@media (max-width: 768px) {
    .cordial-nutrition-wrapper[data-format="inline"] .nutrition-title {
        font-size: 1.0625rem !important;
    }

    /* Ingredients List Padding Fix */
    .cordial-single-recipe-nutrition-ingredients {
        padding-left: 5px !important;
        padding-right: 0 !important;
    }

    /* Vitamins and Minerals Mobile */
    .cordial-recipes-vitamins-section,
    .cordial-recipes-minerals-section {
        margin-top: 10px;
        padding: 10px;
    }

    .cordial-recipes-vitamins-section .nutrition-section-header,
    .cordial-recipes-minerals-section .nutrition-section-header {
        font-size: 1.1rem;
    }

    .cordial-recipes-vitamins-section .nutrition-vitamins-list,
    .cordial-recipes-minerals-section .nutrition-minerals-list {
        flex-direction: column;
        gap: 5px;
    }

    /* NEW: Mobile section headers font size */
    .cordial-ingredients-title,
    .cordial-instructions h3,
    .cordial-notes-header h3,
    .cordial-notes-title,
    .nutrition-facts-header h1,
    .cordial-nutrition-fact-tag-format-vitamins-heading,
    .inline-nutrition-section-header,
    .cordial-recipes-vitamins-section .nutrition-section-header,
    .cordial-recipes-minerals-section .nutrition-section-header {
        font-size: 18px !important;
    }
}

/* ============================================
   ENHANCED NUTRITION FORMATS (USDA, INLINE, TAGS)
   Overhauled for v1.0.12 - 1:1 Prototype Match
============================================ */

/* ENHANCED INLINE FORMAT (FRONTEND) */
.cordial-nutrition-fact-inline-format-overall-parent {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 15px;
    box-sizing: border-box;
    width: 100%;
}

.cordial-nutrition-fact-inline-format-first-items {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
}

.inline-nutrition-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    flex: 1;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.inline-nutrition-item {
    font-size: 14px;
    color: #2c3e50;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin-right: 5px;
    /* Added spacing between items */
}

/* Ensure consistent spacing between key and value */
.inline-nutrition-item::first-letter {
    text-transform: capitalize;
}

.inline-nutrition-item.piped {
    display: flex;
    align-items: center;
}

.inline-nutrition-item.piped:not(:last-child)::after {
    content: "|";
    margin-left: 10px;
    margin-right: 5px;
    color: #999;
}

.inline-toggle-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.inline-toggle-button::after {
    content: '+';
}

.inline-toggle-button.expanded::after {
    content: '−';
}

.inline-toggle-button:hover {
    background: #2980b9;
    transform: scale(1.1);
}

.cordial-nutrition-fact-inline-format-next-items,
.cordial-nutrition-fact-inline-format-vitamins-minerals {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.inline-nutrition-section-header {
    font-weight: bold;
    font-size: 1.1rem;
    color: #2c3e50;
    margin: 15px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}


/* =========================================
   Ingredients Two-Column Layout 
   ========================================= */

/* Wrapper for the two columns */
.cordial-ingredients-two-col-wrapper {
    display: flex;
    flex-direction: column;
    /* Default stack for mobile */
    gap: 0;
    /* Gap handled by internal lists */
    width: 100%;
}

/* Ensure sub-lists have no extra margins that break alignment */
.ingredients-col-left .cordial-ingredients-list,
.ingredients-col-right .cordial-ingredients-list {
    margin-top: 0;
    margin-bottom: 0;
}

/* Desktop Grid Layout */
@media (min-width: 768px) {
    .cordial-ingredients-two-col-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        /* Space between the two columns */
        align-items: start;
        /* Align tops of columns */
    }

    /* Remove margin-top from the right column effectively */
    .ingredients-col-right {
        margin-top: 0;
    }
}

/* Ensure items look good in columns */
.cordial-ingredient-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 12px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.cordial-ingredient-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background-color: #f9fafb;
}

.cordial-ingredient-image img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 1px solid #e5e7eb;
}

.cordial-ingredient-text {
    color: #374151;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
}

/* COLOURED TAGS FORMAT (FRONTEND) - 1:1 Prototype Match */
.cordial-nutrition-fact-coloured-tags-format-overall-parent {
    font-family: Arial, sans-serif;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

.cordial-nutrition-fact-tag-format-child1 {
    display: flex;
    justify-content: center;
    /* Center cards */
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
    align-items: stretch;
    /* Ensure uniform height */
}

.cordial-nutrition-fact-tag-format-nutrition-item {
    min-height: 150px;
    /* CHANGED: min-height to allow expansion */
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px 10px;
    /* Increased padding */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    height: auto;
    /* Allow auto height */
}

.cordial-nutrition-fact-tag-format-nutrition-item h3 {
    margin: 0 0 5px 0;
    font-size: 14px;
    /* Slightly smaller base size */
    color: #333;
    font-weight: normal;
    border: none !important;
    border-bottom: none !important;
    line-height: 1.2;
}

.cordial-nutrition-fact-tag-format-nutrition-item p {
    margin: 0 0 10px 0;
    font-size: 16px;
    /* Slightly smaller base size */
    font-weight: bold;
    color: #222;
    border: none !important;
    border-bottom: none !important;
    line-height: 1.2;
}

.cordial-nutrition-fact-tag-format-percentage-circle {
    width: 60px;
    /* CHANGED: Better fit for 120px card */
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-top: auto;
    /* Push to bottom if flex space allows */
    color: white;
    font-size: 13px;
    padding: 5px;
    box-sizing: border-box;
    flex-shrink: 0;
    /* CHANGED: Prevent squashing */
}

/* Child 2 - Vitamins/Minerals Section */
.cordial-nutrition-fact-tag-format-child2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-top: 2px dashed #e2e8f0;
    width: 100%;
}

.cordial-nutrition-fact-tag-format-vitamins-heading {
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 16px 0;
    letter-spacing: 0.1em;
    font-weight: 700;
    width: 100%;
    padding-bottom: 0;
    border-bottom: none;
}

.cordial-nutrition-fact-tag-format-vitamins-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
}

.cordial-nutrition-fact-tag-format-vitamin-tag {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Colors handled inline by JS or default rules below */
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
    white-space: nowrap;
}

/* Mobile Adjustments */
@media (max-width: 640px) {
    .cordial-nutrition-fact-tag-format-child1 {
        gap: 10px;
    }

    .cordial-nutrition-fact-tag-format-nutrition-item {
        width: 100%;
        /* Full width on small screens */
        max-width: 160px;
        /* Don't let them get too wide if centered */
    }
}



/* =========================================
   RELATED RECIPES CAROUSEL STYLES
   ========================================= */

/* Unified Header Styling for Section Headings */
.cordial-ingredient-section-header h3,
.cordial-single-recipe-nutrition-instructions h3,
.cordial-single-recipe-nutrition-cooking-method h3,
.cordial-single-recipe-nutrition-video h3,
.cordial-single-recipe-nutrition-nutritionfacts>h3,
.cordial-single-recipe-nutrition-related-posts>h3 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #ff6600;
    /* Fallback primary color */
    padding-bottom: 5px;
    margin-bottom: 20px;
    font-size: 1.25rem;
    font-weight: 600;
    width: 100%;
    display: block;
    line-height: 1.2;
}

/* Mobile responsive title */
@media (max-width: 640px) {
    .cordial-single-recipe-nutrition-related-posts h3 {
        font-size: 1.125rem;
        /* Smaller font on mobile */
    }
}

.cordial-recipe-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* CAROUSEL STRUCTURE */
.cordial-recipe-carousel-container {
    position: relative;
    /* padding: 0 20px;  Removed padding to match reference exactly if needed, or keep for button space? Reference has no padding on container. */
}

.cordial-recipe-track-wrapper {
    overflow: hidden;
    border-radius: 0.75rem;
    /* Box shadow removed for cleaner UI per user request */
    background: transparent;
    /* Ensure it doesn't look like a nested card */
}

/* CAROUSEL TRACK - The core element for scrolling */
#cordial-recipe-carousel-track {
    display: grid !important;
    /* Force grid layout */
    grid-auto-flow: column !important;
    /* Force horizontal flow */
    gap: 1.5rem;
    padding: 1rem;
    transition: transform 0.5s ease-in-out;
    will-change: transform;

    /* Mobile: 1 item takes 100% width of the visible area */
    grid-auto-columns: 100%;
}

/* Responsive Layout - Tablet (640px) */
@media (min-width: 640px) {
    #cordial-recipe-carousel-track {
        /* Tablet: 2 items, so each is 50% */
        grid-auto-columns: calc(50% - 0.75rem) !important;
        /* Adjusted for gap calculation (1.5rem gap) */
    }
}

/* Responsive Layout - Desktop (1024px) */
@media (min-width: 1024px) {
    #cordial-recipe-carousel-track {
        /* Desktop: 3 items, so each is 33.333% */
        grid-auto-columns: calc(33.333% - 1rem) !important;
        /* Adjusted for gap calculation (1.5rem gap) */
    }
}

/* NUCLEAR FIX: Ensure the track is ALWAYS a grid */
#cordial-recipe-carousel-track {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    /* Reset any theme grid templates */
}

/* POST CARD STYLING */
.cordial-recipe-post-card {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #f3f4f6;
    transition: transform 0.2s;
}

.cordial-recipe-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

/* IMAGE STYLES - Edge-to-edge */
.cordial-recipe-post-card img {
    width: 100%;
    height: 180px;
    /* Apply border radius only to the top corners, matching the card's radius */
    border-radius: 0.75rem 0.75rem 0 0;
    margin-bottom: 0;
    object-fit: cover;
}

/* CONTENT WRAPPER - Adds padding back for the text elements */
.cordial-recipe-card-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left;
}

.cordial-recipes-related-recipes-carousel-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
    border-bottom: none !important;
    /* Override potential global styles */
}

.cordial-recipe-post-card a.view-recipe-link {
    color: #d97706;
    /* Deep Orange link color */
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s;
    margin-top: auto;
    display: inline-block;
}

.cordial-recipe-post-card a.view-recipe-link:hover {
    color: #b45309;
    /* Darker orange on hover */
    text-decoration: underline;
}

/* NAVIGATION BUTTONS */
.cordial-recipe-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px;
    background-color: #ffffff;
    color: #d97706;
    /* Deep Orange arrow color */
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    border: none;
    cursor: pointer;
    transition: background-color 0.15s, box-shadow 0.15s;
    z-index: 10;
    width: auto;
    /* Reset width/height from previous circles if differing */
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cordial-recipe-nav-btn svg {
    width: 24px;
    height: 24px;
}

.cordial-recipe-nav-btn:hover {
    background-color: #fef3c7;
    /* Light Amber hover background */
}

.cordial-recipe-nav-btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.5);
    /* Focus ring color */
}

.cordial-recipe-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #ffffff;
    color: #d97706;
    box-shadow: none;
}

#cordial-recipe-prev-btn {
    left: 0;
    margin-left: -1rem;
}

#cordial-recipe-next-btn {
    right: 0;
    margin-right: -1rem;
}

/* ============================================
   INLINE HEADER LAYOUT
   Side-by-side arrangement for image and excerpt
   ============================================ */
.cordial-single-recipe-header-inline {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 30px;
    justify-content: center;
    /* Center the group */
}

.cordial-single-recipe-header-inline .cordial-single-recipe-featured-image-container {
    flex: 0 0 45%;
    max-width: 45%;
}

.cordial-single-recipe-header-inline .cordial-single-recipe-featured-image-container img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cordial-single-recipe-header-inline .cordial-single-recipe-excerpt {
    flex: 1;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #4a5568;
    background: transparent;
    /* Strip background */
    padding: 0;
    /* Strip padding */
    border-radius: 0;
    border-left: none;
    /* Strip border */
    text-align: left;
    /* Ensure left alignment */
}

@media (max-width: 768px) {
    .cordial-single-recipe-header-inline {
        flex-direction: column;
    }

    .cordial-single-recipe-header-inline .cordial-single-recipe-featured-image-container {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================
   DYNAMIC INGREDIENT LIST & TOGGLE
   Ported/Refined from prototype design
   ============================================ */
.cordial-ingredient-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    /* Unified with standard headings */
    margin-bottom: 20px;
    border-bottom: none;
    /* Removed container border */
}

.cordial-ingredient-section-header h3 {
    /* Styles now handled by unified grouping in section headers section above */
    margin: 0 !important;
}

.cordial-ingredient-toggle-controls {
    display: flex;
    gap: 10px;
}

.icon-button {
    padding: 8px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.icon-button:hover {
    background-color: #f7fafc;
    border-color: #cbd5e0;
}

.icon-active {
    background-color: transparent;
    border-color: #cbd5e0;
}

.icon-active svg path {
    fill: #475569;
}

.icon-inactive svg path {
    fill: #94a3b8;
}

.cordial-ingredient-item {
    display: flex !important;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: white;
    border-radius: 10px;
    border: 1px solid #edf2f7;
    margin-bottom: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: left;
}

.cordial-ingredient-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.number-span {
    flex: 0 0 28px;
    height: 28px;
    background: #edf2f7;
    color: #4a5568;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.image-placeholder {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0fdf4;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ingredient-name-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ingredient-name {
    font-weight: 500;
    color: #1a202c;
}

.status-tag {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 12px;
    font-weight: 600;
}

.one-column-layout {
    display: flex;
    flex-direction: column;
}

.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 768px) {
    .two-column-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SIDEBAR MEET AUTHOR SECTION
   ============================================ */
.sidebar-container.meet-author-container {
    padding: 25px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    margin-bottom: 30px;
}

.meet-author-container h2 {
    margin-bottom: 25px !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
}

.meet-author-container .author-image {
    width: 130px;
    height: 130px;
    border-radius: 50% !important;
    object-fit: cover;
    margin: 0 auto 20px;
    display: block;
    border: 6px solid #fcfcfc;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.meet-author-container .author-text {
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
}

/* Learn More and Follow Button Container */
.cordial-single-recipe-author-learn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.cordial-single-recipe-author-learn-more .learn-more-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background-color: var(--wp--preset--color--primary, #ff6600);
    color: var(--wp--preset--color--contrast, #fff) !important;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.cordial-single-recipe-author-learn-more .learn-more-link:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    text-decoration: none;
}

.cordial-single-recipe-author-learn-more .follow-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background-color: var(--wp--preset--color--primary, #ff6600);
    color: var(--wp--preset--color--contrast, #fff) !important;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cordial-single-recipe-author-learn-more .follow-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.cordial-single-recipe-author-learn-more .follow-button.following {
    background-color: #28a745;
}

.cordial-single-recipe-author-learn-more .follow-button svg {
    flex-shrink: 0;
}

.cordial-single-recipe-author-learn-more .follow-button .follower-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .cordial-single-recipe-author-learn-more {
        gap: 8px;
    }

    .cordial-single-recipe-author-learn-more .learn-more-link,
    .cordial-single-recipe-author-learn-more .follow-button {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

/* ============================================
   MEET AUTHOR WIDGET RECIPE PAGE (NEW)
============================================ */
/* Overall wrapper for the component */
.cordial-recipe-singlepage-meet-author-overall-parent {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 5px 5px 0 5px;
    /* STRICT: 5px top, 5px sides, 0 bottom */
    box-sizing: border-box;
}

.cordial-recipe-singlepage-meet-author-parent {
    width: 100%;
    position: relative;
    text-align: center;
}

/* Image is positioned on top */
.cordial-recipe-singlepage-meet-author-img {
    width: 40%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    display: block;
    margin: 0 auto;
    border: 5px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Content container shifts up to overlap 30% of the image */
.cordial-recipe-singlepage-meet-author-content {
    background-color: #f5f5f5;
    padding: 60px 30px 30px 30px;
    width: 100%;
    box-sizing: border-box;
    /* Top padding increased to clear image */
    border-radius: 20px;
    position: relative;
    z-index: 1;
    margin-top: -45px;
    /* Overlap effect */
}

.cordial-recipe-singlepage-meet-author-inner-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 2px;
    /* STRICT: small gap */
    flex-wrap: nowrap;
    /* Force inline */
}

.cordial-recipe-singlepage-meet-author-learn-more {
    font-weight: bold;
    color: #333;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    white-space: nowrap;
    /* Prevent wrap */
}

/* Pill shaped Follow button */
.cordial-recipe-singlepage-meet-author-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* Reduce internal gap */
    background-color: #ff6600;
    /* Theme Color */
    color: #fff;
    border: none;
    padding: 6px 6px;
    /* STRICT: Reduced padding */
    border-radius: 50px;
    /* Pill shape */
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    text-decoration: none;
    line-height: normal;
}

.cordial-recipe-singlepage-meet-author-follow-btn:hover {
    background-color: #FF8533;
}

.cordial-recipe-singlepage-meet-author-follow-btn:active {
    transform: scale(0.98);
}

/* The count inside the button */
.cordial-recipe-singlepage-meet-author-span {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: bold;
}