@charset "utf-8";

<style>
  /* ============================================
   EDITOR
   ============================================ */

   /* Social Media Platforms Card - Facebook Style */
.social-platforms-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e4e6eb;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
}

.social-platforms-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Card Header */
.social-card-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #e4e6eb;
    position: relative;
}

.social-card-icon {
    font-size: 24px;
    margin-right: 12px;
    background: #e7f3ff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.social-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}

.social-card-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #65676b;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.social-card-close:hover {
    background: #f0f2f5;
    color: #050505;
}

/* Card Body */
.social-card-body {
    padding: 20px;
}

.social-card-description {
    font-size: 14px;
    color: #65676b;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Platforms Grid */
.platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
}

.platform-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    background: #f8f9fa;
    transition: all 0.2s ease;
    cursor: pointer;
}

.platform-item:hover {
    transform: translateY(-2px);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Platform Icons with Original Colors */
.platform-icon {
    width: 32px;
    height: 32px;
    transition: transform 0.2s ease;
}

.platform-item:hover .platform-icon {
    transform: scale(1.05);
}

/* LinkedIn - #0A66C2 */
.linkedin .platform-icon {
    fill: #0A66C2;
}

/* YouTube - #FF0000 */
.youtube .platform-icon {
    fill: #FF0000;
}

/* Instagram uses gradient defined in SVG */
.instagram .platform-icon {
    fill: url(#instagramGrad);
}

/* X (Twitter) - #000000 */
.x-twitter .platform-icon {
    fill: #000000;
}

/* Twitch - #9146FF */
.twitch .platform-icon {
    fill: #9146FF;
}

/* Vimeo - #1AB7EA */
.vimeo .platform-icon {
    fill: #1AB7EA;
}

.platform-name {
    font-size: 12px;
    font-weight: 500;
    color: #1e293b;
}

/* Responsive Design */
@media (max-width: 768px) {
    .platforms-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    
    .platform-item {
        padding: 10px;
    }
    
    .platform-icon {
        width: 28px;
        height: 28px;
    }
    
    .platform-name {
        font-size: 11px;
    }
    
    .social-card-header {
        padding: 12px 16px;
    }
    
    .social-card-body {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .platforms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .social-platforms-card {
        background: #242526;
        border-color: #3a3b3c;
    }
    
    .social-card-header {
        background: linear-gradient(135deg, #2d2e2f 0%, #242526 100%);
        border-bottom-color: #3a3b3c;
    }
    
    .social-card-icon {
        background: #3a3b3c;
    }
    
    .social-card-title {
        color: #e4e6eb;
    }
    
    .social-card-close {
        color: #b0b3b8;
    }
    
    .social-card-close:hover {
        background: #3a3b3c;
        color: #e4e6eb;
    }
    
    .social-card-description {
        color: #b0b3b8;
    }
    
    .platform-item {
        background: #3a3b3c;
    }
    
    .platform-item:hover {
        background: #4e4f50;
    }
    
    .platform-name {
        color: #e4e6eb;
    }
    
    .x-twitter .platform-icon {
        fill: #ffffff;
    }
}

   /* Hide Featured Start and Finish fields completely */
.control-group.hidden[data-showon*="jform[featured]"],
.control-group.hidden[data-showon*='"field":"jform[featured]"'],
#publishing .control-group.hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Alternative: Target by label text */
.control-group:has(label[for="jform_featured_up-lbl"]),
.control-group:has(label[for="jform_featured_down-lbl"]),
.control-group:has(#jform_featured_up-lbl),
.control-group:has(#jform_featured_down-lbl) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Target by input IDs */
.control-group:has(#jform_featured_up),
.control-group:has(#jform_featured_down) {
    display: none !important;
}

/* Most aggressive approach - target by data attribute */
[data-showon*='"field":"jform[featured]"'] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Also hide by class .hidden if it has those specific labels */
.control-group.hidden .control-label label[for="jform_featured_up-lbl"],
.control-group.hidden .control-label label[for="jform_featured_down-lbl"] {
    display: none !important;
}

.control-group.hidden:has(.control-label label[for="jform_featured_up-lbl"]),
.control-group.hidden:has(.control-label label[for="jform_featured_down-lbl"]) {
    display: none !important;
}

#jform_state option[value="2"] {
    display: none;
}
#jform_state option:where([value="2"]) {
    display: none !important;
}

/* Fix horizontal alignment for Publishing tab date fields */
#publishing .control-group {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

#publishing .control-group .control-label {
    flex: 0 0 150px;
    margin-bottom: 0;
    padding-top: 8px;
}

#publishing .control-group .controls {
    flex: 1;
}

/* Style the input group for date pickers */
#publishing .field-calendar {
    width: 100%;
}

#publishing .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

#publishing .input-group input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #dddfe2;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #f0f2f5;
    transition: all 0.2s ease;
}

#publishing .input-group input[type="text"]:focus {
    outline: none;
    border-color: #1877f2;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.1);
}

/* Style the calendar button */
#publishing .btn-primary {
    background: #e4e6eb;
    border: none;
    color: #050505;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#publishing .btn-primary:hover {
    background: #d8dadf;
}

#publishing .btn-primary .icon-calendar {
    font-size: 16px;
}

/* Responsive for mobile */
@media (max-width: 768px) {
    #publishing .control-group {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #publishing .control-group .control-label {
        flex: auto;
        width: 100%;
    }
    
    #publishing .input-group {
        flex-wrap: wrap;
    }
    
    #publishing .input-group input[type="text"] {
        flex: 1;
        min-width: 200px;
    }
}


/* Force hide Metadata legend */
#fieldset-metadata > legend,
#fieldset-metadata legend {
    display: none !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
   
/* Center the entire control group that contains the image field */
.subform-wrapper .control-group:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.subform-wrapper .control-group:first-child .controls {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Target the joomla-field-media component */
.subform-wrapper joomla-field-media {
    display: block;
    width: 100%;
    max-width: 600px;
}

/* Style and center the input-group */
.subform-wrapper .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    background: white;
    padding: 8px;
    border-radius: 8px;
}

/* Facebook-style input field */
.subform-wrapper .input-group .field-media-input {
    flex: 2;
    padding: 10px 14px;
    font-size: 15px;
    border: 1px solid #dddfe2;
    border-radius: 6px;
    background-color: #f5f6f7;
    transition: all 0.2s ease;
}

.subform-wrapper .input-group .field-media-input:focus {
    outline: none;
    border-color: #1877f2;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.1);
}

/* Facebook-style Select button */
.subform-wrapper .input-group .button-select {
    background-color: #1877f2;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: inherit;
}

.subform-wrapper .input-group .button-select:hover {
    background-color: #166fe5;
}

.subform-wrapper .input-group .button-select:active {
    background-color: #0e5ac3;
}

/* Hide the clear button if it doesn't exist in your HTML, or style it if added later */
.subform-wrapper .input-group .button-clear {
    background-color: #e4e6eb;
    color: #4b4f56;
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.subform-wrapper .input-group .button-clear:hover {
    background-color: #d8dadf;
}

/* Style the preview area if needed */
.subform-wrapper .field-media-preview {
    text-align: center;
    margin-bottom: 10px;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .subform-wrapper joomla-field-media {
        max-width: 100%;
        padding: 0 10px;
    }
    
    .subform-wrapper .input-group {
        flex-wrap: wrap;
    }
    
    .subform-wrapper .input-group .field-media-input {
        flex: 100%;
        min-width: 200px;
    }
    
    .subform-wrapper .input-group .button-select {
        flex: 1;
    }
}

.tox .tox-edit-area__iframe {
    height: 100% !important;
}
#jform_access option[value="10"],
#jform_access option[value="9"],
#jform_access option[value="8"],
#jform_access option[value="7"],
#jform_access option[value="11"],
#jform_access option[value="5"],
#jform_access option[value="3"],
#jform_access option[value="6"] {
    display: none;
}
#jform_access option:where([value="10"],[value="9"],[value="8"],[value="7"],[value="11"],[value="5"],[value="3"],[value="6"]) {
    display: none !important;
}

.control-group:has(#jform_note) {
display: none !important;
}
.control-group:has(label[for="jform_note"]) {
    display: none !important;
}

.control-group:has(#jform_featured-lbl) {
display: none !important;
}
.control-group:has(label[for="jform_featured"]) {
    display: none !important;
}

.control-group:has(#jform_catid-lbl) {
    display: none !important;
} 
.control-group:has(label[for="jform_catid"]) {
    display: none !important;
}


#jform_com_fields__image1__imagefile.field-media-input,
#jform_com_fields__image2__imagefile.field-media-input,
#jform_com_fields__image3__imagefile.field-media-input,
#jform_com_fields__image4__imagefile.field-media-input {
      display: none !important;
}
.edit.item-page .subform-wrapper .control-group:nth-of-type(2),
.edit.item-page .subform-wrapper .control-group:nth-of-type(3) {
    display: none !important;
}
.edit.item-page #jform_com_fields__image3__alt_text,
.edit.item-page .subform-wrapper .control-group:not(:first-child),
.edit.item-page .subform-wrapper:first-child::before {
    display: none !important;
}
.edit.item-page .subform-wrapper::before {
    display: block;
    padding: 0.875rem 1rem;
    background: #f8f9fa;
    font-weight: 500;
    font-size: 0.875rem;
    color: #1e293b;
    border-bottom: 1px solid #e4e6eb;
}

.pgSocialCreate .edit.item-page {
    background: transparent;
    box-shadow: none;
}

.pgSocialCreate h1 {
    font-size: 1.5rem;
    padding: 0 0 0.5rem 0;
    text-align: center;
}

/* Main container - Facebook card style */
.edit.item-page {
    max-width: 800px;
    margin: 2rem auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* Form styling */
.edit.item-page form {
    padding: 0;
}

/* Fieldset - remove default borders */
.edit.item-page fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

/* ============================================
   FORM FIELDS - Facebook Style
   ============================================ */

/* Control group - modern spacing */
.edit.item-page .control-group {
    margin-bottom: 1.25rem;
    padding: 0 1.5rem;
}

/* Labels - subtle and modern */
.edit.item-page .control-label {
    margin-bottom: 0.5rem;
}

.edit.item-page .control-label label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    letter-spacing: -0.2px;
}

.edit.item-page .control-label .star {
    color: #ef4444;
    margin-left: 2px;
}

/* Input fields - Facebook style */
.edit.item-page .controls input[type="text"],
.edit.item-page .controls textarea,
.edit.item-page .form-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #1e293b;
    background-color: #f9fafb;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.edit.item-page .controls input[type="text"]:focus,
.edit.item-page .controls textarea:focus,
.edit.item-page .form-select:focus {
    outline: none;
    border-color: #1877f2;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.08);
}

/* Placeholder styling */
.edit.item-page .controls input::placeholder,
.edit.item-page .controls textarea::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* Help text */
.edit.item-page .form-text {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.375rem;
    display: block;
}

/* ============================================
   ALERT BANNER - Facebook Style
   ============================================ */

.edit.item-page .alert.alert-info {
    background: #e7f3ff;
    border-left: 4px solid #1877f2;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin: 1rem 1.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    color: #1c3e6c;
}

.edit.item-page .alert.alert-info .icon-info-circle {
    font-size: 18px;
    color: #1877f2;
}

/* Dismissible alert close button */
.edit.item-page .alert.alert-info .btn-close {
    margin-left: auto;
    font-size: 0.75rem;
}

/* ============================================
   LEGEND - Section Headers
   ============================================ */

.edit.item-page legend {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 1.5rem 1.5rem 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    display: block;
    letter-spacing: -0.2px;
}

/* ============================================
   JOOMLA TABS - Facebook Style
   ============================================ */

/* Tab container */
.joomla-tab[view="tabs"] > div[role="tablist"] {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 1rem;
    margin: 0;
    box-shadow: none;
}

/* Tab buttons */
.edit.item-page div[role="tablist"] > button[role="tab"] {
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.875rem 1.25rem;
    color: #5c6b7e;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

/* Active tab */
.edit.item-page div[role="tablist"] > button[role="tab"][aria-selected="true"] {
    color: #1877f2;
    border-bottom-color: #1877f2;
}

/* Tab content panels */
.joomla-tab > joomla-tab-element {
    padding: 1.5rem !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Tab content padding for specific tabs */
joomla-tab-element#metadata,
joomla-tab-element#publishing,
joomla-tab-element#attrib-fields-1,
joomla-tab-element#editor {
    padding: 1.5rem !important;
}

/* ============================================
   SOCIAL EMBED TAB - Hide TinyMCE Editor
   ============================================ */

/* Hide the TinyMCE editor in Social Embed tab - keep only simple textarea */
#attrib-fields-2 .tox-tinymce,
#attrib-fields-2 .toggle-editor,
#attrib-fields-2 .js-editor-tinymce .tox {
    display: none !important;
}

/* Show a simple textarea instead */
#attrib-fields-2 .js-editor-tinymce textarea {
    display: block !important;
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #1e293b;
    background-color: #f9fafb;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    min-height: 100px;
    font-family: inherit;
}

#attrib-fields-2 .js-editor-tinymce textarea:focus {
    outline: none;
    border-color: #1877f2;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.08);
}

/* Fix alignment for Paste Video URL field */
#attrib-fields-2 .control-group {
    margin-bottom: 1rem;
}

#attrib-fields-2 .control-label label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 0.5rem;
    display: block;
}

/* ============================================
   IMAGE UPLOAD CARDS - 2x2 Grid
   ============================================ */

/* Hide original labels */
.edit.item-page .control-group > .control-label:has(label[for^="jform_com_fields_image"]),
.edit.item-page .subform-wrapper .control-group .control-label,
.edit.item-page .controls > .control-label {
    display: none;
}

/* Grid layout for image cards - 2x2 columns */
.edit.item-page .form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    padding: 0 1.5rem 1.5rem !important;
}

.edit.item-page .form-grid > .control-group {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Image card wrapper - Facebook style */
.edit.item-page .form-grid > .control-group > .controls > .subform-wrapper {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e4e6eb;
    overflow: hidden;
    transition: all 0.2s ease;
    height: 100%;
}

.edit.item-page .form-grid > .control-group > .controls > .subform-wrapper:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}



/* Preview container - remove repeating background */
.edit.item-page .field-media-preview {
    background: transparent !important;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    background-image: none !important;
    border: none;
}

.edit.item-page .field-media-preview-icon {
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 180px;
    background-image: none !important;
}

/* Simple plus icon for empty state */
.edit.item-page .field-media-preview-icon:empty::before {
    content: "📷";
    font-size: 5rem;
    color: #65676b;
    font-family: inherit;
    opacity: 0.6;
}

.edit.item-page .field-media-preview-icon img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* Remove the CSS background image pattern */
.field-media-preview-icon,
.field-media-preview {
    background-image: none !important;
    background: #f8f9fa !important;
}

/* Upload overlay on hover */
.edit.item-page .field-media-preview:hover::after {
    content: "Click to change image";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px;
    text-align: center;
    font-size: 0.75rem;
}

/* Input group styling */
.edit.item-page .input-group {
    background: #ffffff;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.edit.item-page .field-media-input {
    flex: 1;
    padding: 0.625rem 0.75rem;
    border: 1px solid #dddfe2;
    border-radius: 8px;
    font-size: 0.813rem;
    background: #f0f2f5;
    font-family: inherit;
}

.edit.item-page .field-media-input:focus {
    outline: none;
    border-color: #1877f2;
    background: #ffffff;
}

/* Select button */
.edit.item-page .button-select {
    background: #e4e6eb;
    color: #050505;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 3px !important;
    font-weight: 500;
    font-size: 0.813rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.edit.item-page .button-select:hover {
    background: #d8dadf;
}



.edit.item-page .control-label label[for*="alt_text"] {
    font-size: 0.813rem;
    font-weight: 500;
    color: #65676b;
    margin-bottom: 0.5rem;
    display: block;
}

.edit.item-page .controls input[type="text"] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #dddfe2;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #f0f2f5;
    transition: all 0.2s ease;
}

/* Checkbox styling */
.edit.item-page .form-check {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.75rem 0 0.25rem;
}

.edit.item-page .form-check-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1877f2;
    margin: 0;
}

.edit.item-page .form-check-input + label {
    margin: 0;
    cursor: pointer;
    font-size: 0.813rem;
    color: #65676b;
}

/* ============================================
   BUTTONS - Facebook Style
   ============================================ */

/* Button container */
.edit.item-page .d-grid.gap-2.d-sm-block.mb-2 {
    display: flex !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    margin-top: 0 !important;
}

/* Primary button - Facebook blue */
.edit.item-page .btn.btn-primary {
    background-color: #1877f2;
    border: none;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    color: #ffffff;
    transition: background 0.2s ease;
}

.edit.item-page .btn.btn-primary:hover {
    background-color: #166fe5;
}

/* Danger button - Cancel */
.edit.item-page .btn.btn-danger {
    background-color: #e4e6eb !important;
    border: none !important;
    color: #050505 !important;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 3px !important;
    transition: background 0.2s ease;
}

.edit.item-page .btn.btn-danger:hover {
    background-color: #d8dadf !important;
    color: #050505 !important;
}

/* Secondary button - Versions */
.edit.item-page .btn.btn-secondary {
    background-color: #e4e6eb;
    border: none;
    color: #050505;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
}

/* ============================================
   HIDE UNWANTED ELEMENTS
   ============================================ */

/* Hide Save As Copy button (only on create page) */
body.pgSocialPostCreate button[data-submit-task="article.save2copy"],
body.pgSocialPostCreate .d-grid.gap-2.d-sm-block.mb-2 > button[data-submit-task="article.save2copy"] {
    display: none !important;
}

/* Hide toggle editor button */
.toggle-editor {
    display: none !important;
}



/* ============================================
   ACCESS & STATUS DROPDOWNS
   ============================================ */

.form-select.form-select-danger,
.form-select.form-select-success {
    color: #fcfcfc;
}

.form-select.form-select-success {
    background-color: #10b981;
    border-color: #10b981;
}

.form-select.form-select-danger {
    background-color: #ef4444;
    border-color: #ef4444;
}

/* ============================================
   RESPONSIVE - Mobile
   ============================================ */

@media (max-width: 767.98px) {
    .edit.item-page {
        margin: 0;
        border-radius: 0;
    }
    
    .edit.item-page .control-group {
        padding: 0 1rem;
    }
    
    /* Image upload cards - 1 column on mobile */
    .edit.item-page .form-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 1rem 1rem !important;
    }
    
    .edit.item-page .input-group {
        flex-direction: column;
    }
    
    .edit.item-page .button-select {
        width: 100%;
    }
    
    /* Button container */
    .edit.item-page .d-grid.gap-2.d-sm-block.mb-2 {
        flex-direction: column !important;
        padding: 1rem;
    }
    
    .edit.item-page .btn.btn-primary,
    .edit.item-page .btn.btn-danger,
    .edit.item-page .btn.btn-secondary {
        width: 100%;
        text-align: center;
    }
    
    /* Tab content padding */
    joomla-tab-element#metadata,
    joomla-tab-element#publishing,
    joomla-tab-element#attrib-fields-1,
    joomla-tab-element#editor {
        padding: 1rem !important;
    }
    
    /* Tab buttons */
    .edit.item-page div[role="tablist"] > button[role="tab"] {
        padding: 0.75rem 1rem;
        font-size: 0.813rem;
    }
}

/* ============================================
   TINYMCE EDITOR - Facebook Style
   ============================================ */

/* Editor container */
.tox-tinymce {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
}

.tox .tox-toolbar__primary {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.tox .tox-edit-area__iframe {
    background-color: #ffffff !important;
}

.tox .tox-statusbar {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}
/* ============================================
  END EDITOR
   ============================================ */



/* ============================================
   SOCIAL NEWSFEEDS - WHAT'S TRENDING STYLE
   Clean, minimal list design for trending topics
   ============================================ */

/* Target fields-container inside blog items */
.pgNewsfeed .fields-container {
    display: grid !important;
    gap: 1rem !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* Remove list styles from inner items */
.pgNewsfeed .fields-container li.field-entry {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Make all images responsive */
.pgNewsfeed .fields-container img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover;
}

/* Always make video full width */
.pgNewsfeed .fields-container .videoFieldDisplay {
    grid-column: 1 / -1 !important;
}

/* ------------------------------
   SCENARIO 1: Only 1 image
   ------------------------------ */
.pgNewsfeed .fields-container:has(> .image1:only-child) {
    grid-template-columns: 1fr !important;
}

/* ------------------------------
   SCENARIO 2: Exactly 2 images
   ------------------------------ */
.pgNewsfeed .fields-container:has(.image1):has(.image2):not(:has(.image3, .image4)) {
    grid-template-columns: 1fr 1fr !important;
}

/* ------------------------------
   SCENARIO 3: Exactly 3 images
   ------------------------------ */
.pgNewsfeed .fields-container:has(.image1):has(.image2):has(.image3):not(:has(.image4)) {
    grid-template-columns: 2fr 1fr !important;
}

/* First image spans full height on left for 3 images */
.pgNewsfeed .fields-container:has(.image1):has(.image2):has(.image3):not(:has(.image4)) .image1 {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
}

/* ------------------------------
   SCENARIO 4: Exactly 4 images
   ------------------------------ */
.pgNewsfeed .fields-container:has(.image1):has(.image2):has(.image3):has(.image4) {
    grid-template-columns: 1fr 1fr !important;
}


/* =======================================================
   IMAGE GALLERY - Articles Module (.modTrendingPosts) & Category Blog Only
   ======================================================= */



.modPgSocialNewsfeeds {
    border: none;
    background: transparent !important;
}

.modPgSocialNewsfeeds .card-body {
    padding: 0;
    background: transparent;
}

/* Style the unordered list - no gap, minimal styling */
.modPgSocialNewsfeeds .mod-articles,
.modPgSocialNewsfeeds .mod-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Style each list item - clean trending style */
.modPgSocialNewsfeeds .mod-articles li,
.modPgSocialNewsfeeds .mod-list li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e4e6eb;
    transition: all 0.2s ease;
}

/* Remove border from last item */
.modPgSocialNewsfeeds .mod-articles li:last-child,
.modPgSocialNewsfeeds .mod-list li:last-child {
    border-bottom: none;
}

/* Remove hover transform - just subtle background */
.modPgSocialNewsfeeds .mod-articles li:hover,
.modPgSocialNewsfeeds .mod-list li:hover {
    background: #f8f9fa;
    transform: none;
    box-shadow: none;
    border-radius: 8px;
    margin-left: -8px;
    padding-left: 8px;
    margin-right: -8px;
    padding-right: 8px;
}

/* Style the links as trending titles */
.modPgSocialNewsfeeds .mod-articles li a,
.modPgSocialNewsfeeds .mod-list li a {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    text-decoration: none;
    display: block;
    line-height: 1.4;
}

.modPgSocialNewsfeeds .mod-articles li a:hover {
    color: #1877f2;
}

/* Add trend indicator (optional - numbers before each item) */
.modPgSocialNewsfeeds .mod-list {
    counter-reset: trend-counter;
}

.modPgSocialNewsfeeds .mod-list li {
    counter-increment: trend-counter;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.modPgSocialNewsfeeds .mod-list li::before {
    content: counter(trend-counter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    background: #f0f2f5;
    color: #65676b;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    flex-shrink: 0;
    margin-top: 2px;
}

.modPgSocialNewsfeeds .mod-list li a {
    flex: 1;
}

/* Optional: Add fire icon for trending (using emoji) */
.modPgSocialNewsfeeds .mod-list li::after {
    content: "🔥";
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.modPgSocialNewsfeeds .mod-list li:hover::after {
    opacity: 0.6;
}

/* ============================================
   VARIATION: Without numbers (clean list)
   Remove the counter styles above if you prefer
   ============================================ */

/* No numbers version - just clean list */
.modPgSocialNewsfeeds .mod-list-no-numbers li::before {
    display: none;
}

.modPgSocialNewsfeeds .mod-list-no-numbers li {
    display: block;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .modPgSocialNewsfeeds .mod-articles li,
    .modPgSocialNewsfeeds .mod-list li {
        padding: 10px 0;
    }
    
    .modPgSocialNewsfeeds .mod-articles li a,
    .modPgSocialNewsfeeds .mod-list li a {
        font-size: 0.813rem;
    }
    
    .modPgSocialNewsfeeds .mod-list li {
        gap: 10px;
    }
    
    .modPgSocialNewsfeeds .mod-list li::before {
        min-width: 20px;
        height: 20px;
        font-size: 0.688rem;
    }
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {
    .modPgSocialNewsfeeds .mod-articles li,
    .modPgSocialNewsfeeds .mod-list li {
        border-bottom-color: #3a3b3c;
    }
    
    .modPgSocialNewsfeeds .mod-articles li:hover,
    .modPgSocialNewsfeeds .mod-list li:hover {
        background: #3a3b3c;
    }
    
    .modPgSocialNewsfeeds .mod-articles li a,
    .modPgSocialNewsfeeds .mod-list li a {
        color: #e4e6eb;
    }
    
    .modPgSocialNewsfeeds .mod-articles li a:hover {
        color: #1877f2;
    }
    
    .modPgSocialNewsfeeds .mod-list li::before {
        background: #3a3b3c;
        color: #b0b3b8;
    }
}


/* ============================================
   15. ARTICLE META INFO - TOP ROW
   ============================================ */

.item-content p {
    padding: 1.2rem 1.2rem 0 1.2rem;
}

.pgNewsfeed .blog-item .verifiedBadgeImage,
.item-pagepgNewsfeed .verifiedBadgeImage {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    width: 14px;
    height: 14px;
}

.biskoon-meta-row-top.bis-top-article-info {
    margin-bottom: 0.75rem;
    padding-left: 1rem;
}

.biskoon-meta-row-top .meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
    align-items: center;
    font-size: 0.8rem;
}

.biskoon-meta-row-top .meta-item {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    color: #666666;
    line-height: 1.4;
    white-space: nowrap;
}

.biskoon-meta-row-top .meta-item svg {
    width: 12px;
    height: 12px;
    margin-right: 0.375rem;
    color: #666666;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Avatar */
.biskoon-meta-row-top .cb-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 0.375rem;
    border: 1px solid #e9ecef;
}

.biskoon-meta-row-top .cb-avatar-initials {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dee2e6;
    color: #495057;
    font-size: 0.65rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.375rem;
}

/* Author Section */
.biskoon-meta-row-top .meta-item.author {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 0;
    color: #666666;
}

.biskoon-meta-row-top .meta-item.author .author-link,
.biskoon-meta-row-top .meta-item.author .btn.noebdarkmode {
    display: inline-flex;
    align-items: center;
    color: #666666;
    font-size: 0.9rem;
    font-weight: 400;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0.125rem 0rem;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    margin: 0;
    line-height: 1.2;
}

.biskoon-meta-row-top .meta-item.author .author-link:hover,
.biskoon-meta-row-top .meta-item.author .btn.noebdarkmode:hover {
    color: #0d6efd;
    text-decoration: none;
    cursor: pointer;
}

.badgeWrapper svg {
    width: 20px !important;
    height: 20px !important;
    margin-left: 0.3rem !important;
}



/* Publish Date & Access Level */
.biskoon-meta-row-top .publish-date {
    color: #666666;
}

.biskoon-meta-row-top .publish-date .edited-label {
    margin-left: 0.25rem;
    color: #666666;
    font-style: italic;
    font-size: 0.75rem;
    opacity: 0.8;
}

.biskoon-meta-row-top .access-level {
    font-weight: 400;
    color: #666666;
}

.biskoon-meta-row-top .access-level svg,
.biskoon-meta-row-top .publish-date svg,
.biskoon-meta-row-top .connect-btn svg {
    color: #0A1F44;
    width: 12px;
    height: 12px;
}

.biskoon-meta-row-top .meta-item.publish-date,
.biskoon-meta-row-top .meta-item.access-level {
    color: #666666;
    font-size: 0.6rem;
    font-weight: 400;
}

.biskoon-meta-row-top [data-bs-toggle="tooltip"] {
    cursor: help;
}

/* ============================================
   16. ARTICLE META INFO - BOTTOM ROW
   ============================================ */

.biskoon-meta-row-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    font-size: 0.8rem;
    color: #666666;
    font-weight: 500;
    padding: 0.175rem 0;
    margin-bottom: 1.5rem;
}

.biskoon-meta-row-bottom .meta-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    white-space: nowrap;
}

.biskoon-meta-row-bottom .meta-item.comments-count .rsc_comments_count,
.biskoon-meta-row-bottom .meta-item.modified-date .hits,
.biskoon-meta-row-bottom .meta-item.share .bisShare {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    font-size: 1rem;
    color: #666666;
    border: solid 1px #999;
    text-decoration: none;
}

.biskoon-meta-row-bottom .meta-item.comments-count .rsc_comments_count:hover,
.biskoon-meta-row-bottom .meta-item.modified-date .hits:hover,
.biskoon-meta-row-bottom .meta-item.share .bisShare:hover {
    background-color: #f8f9fa;
    color: #0A1F44;
}

/* Comments Count */
.biskoon-meta-row-bottom .meta-item.comments-count img {
    width: 16px;
    height: 16px;
    filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.biskoon-meta-row-bottom .meta-item.comments-count a {
    color: #666666;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    text-transform: capitalize;
}

.biskoon-meta-row-bottom .meta-item.comments-count .rsc_comments_count:hover a {
    color: #0A1F44;
}

.biskoon-meta-row-bottom .meta-item.comments-count .rsc_comments_count:hover img {
    filter: invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(90%);
}

/* Comments Icon Replacement */
.biskoon-meta-row-bottom .meta-item .rsc_comments_count img {
    display: none !important;
}

.biskoon-meta-row-bottom .meta-item .rsc_comments_count {
    position: relative;
}

.biskoon-meta-row-bottom .meta-item .rsc_comments_count::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #666666;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105"/><path d="M7.066 6.76A1.665 1.665 0 0 0 4 7.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 0 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 7.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 0 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105"/><path d="M7.066 6.76A1.665 1.665 0 0 0 4 7.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 0 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/></svg>') no-repeat center;
    transition: background-color 0.2s ease;
    margin-right: 6px;
    flex-shrink: 0;
}

.biskoon-meta-row-bottom .meta-item .rsc_comments_count:hover::before {
    background-color: #0A1F44;
}

/* Modified Date */
.biskoon-meta-row-bottom .meta-item.modified-date .article-info {
    margin: 0;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.biskoon-meta-row-bottom .meta-item.modified-date .hits {
    margin: 0;
    font-weight: 500;
    cursor: default;
    color: #666666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.biskoon-meta-row-bottom .meta-item.modified-date .hits:hover {
    background-color: #f8f9fa;
    color: #0A1F44;
}

.biskoon-meta-row-bottom .meta-item.modified-date svg {
    width: 16px;
    height: 16px;
    color: #666666;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.biskoon-meta-row-bottom .meta-item.modified-date .hits:hover svg {
    color: #0A1F44;
}

/* Share Button */
.biskoon-meta-row-bottom .meta-item.share .bisShare {
    background: none;
    border: solid 1px #999;
    cursor: pointer;
    font-weight: 500;
    color: #666666;
    transition: all 0.2s ease;
    padding: 6px 10px;
}

.biskoon-meta-row-bottom .meta-item.share .bisShare:hover {
    color: #0A1F44;
    background-color: #f8f9fa;
}

.biskoon-meta-row-bottom .meta-item.share .bisShare svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #666666;
    transition: color 0.2s ease;
}

.biskoon-meta-row-bottom .meta-item.share .bisShare:hover svg {
    color: #0A1F44;
}

/* Ensure proper alignment */
.biskoon-meta-row-bottom .meta-item.modified-date .article-info,
.biskoon-meta-row-bottom .meta-item.share .bisShare {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}


/* ============================================
   1. SOCIAL HEADER
   ============================================ */

@media (min-width: 768px) {
    .headerFirst {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ============================================
  1.1 LATEST CONVERSATIONS SECTION
   ============================================ */
.modLatestComments  {
    margin-top: 0 !important;
}

.card.modLatestComments  {
    border: none;
    background: transparent !important;
}
.modLatestComments .card-body{
    padding: 0;
    border: none;
}

.modLatestComments .rsc_latest {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modLatestComments .rscomm-recent-comment {
    margin-top: 0.3rem;
    border-radius: 12px;
    padding: 0.5rem;
    transition: all 0.2s ease;
    background: #f1f5f9;
}

.pgLatestComments .rscomm-recent-comment {
    background: #ffffff !important;
    margin: 0 auto;
}

.modLatestComments .rscomm-recent-comment:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.modLatestComments .rscomm-recent-media {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
}

.modLatestComments .rscomm-recent-head {
    font-weight: 600;
    color: #1a2a3a;
    font-size: 0.9rem;
    line-height: 0;
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}


.modLatestComments .rscomm-recent-time {
    font-size: 0.7rem;
    color: #6c757d;
    font-weight: 400;
    margin-left: 10px;
}
.modLatestComments .rscomm-recent-view i {
    display: none;
}

.modLatestComments .rscomm-recent-body {
    border-radius: 10px;
    background: #f2f4f7;
}
.modLatestComments .rscomm-recent-body p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4a5568;
    margin: 0 0 0.75rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.modLatestComments .rscomm-recent-footer {
    text-align: right;
}

.modLatestComments .rscomm-recent-view a {
    font-size: 0.95rem;
    color: #4a5568;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.modLatestComments .rscomm-recent-view a:hover {
    color: #0d6efd;
}

.modLatestComments .rscomm-recent-view svg {
    width: 12px;
    height: 12px;
}

/* ============================================
   2. TAGS MOD LAYOUT
   ============================================ */
    .modTags .mod-tagspopular {
        margin-left: 0 !important;
         margin-left: 2.5rem;
    }
    .card.modTags  {
        border: none;
        background: transparent !important;
    }
    .modTags .card-body{
        padding: 0;
        border: none;
    }

/* ============================================
   2.1 TAGS PAGE LAYOUT
   ============================================ */
.com-tags {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e4e6eb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
    position: relative;
    padding: 2rem;
    margin: 0 auto 1rem auto;
}

/* Base structure */
.tag-category .com-tags__items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Tag lists grid */
.tag-category .com-tags__items > ul.com-tags__category.category.list-group,
.tag-category ul.com-tags-tag__category.category.list-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
}

/* Tag list items */
.tag-category .com-tags__items ul.com-tags__category li.list-group-item,
.tag-category ul.com-tags-tag__category li.list-group-item {
    background: #edf1f5;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    transition: box-shadow 0.2s ease;
}

.tag-category .com-tags__items ul.com-tags__category li.list-group-item:hover,
.tag-category ul.com-tags-tag__category li.list-group-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Tag heading and link styling */
.tag-category .com-tags__items ul.com-tags__category h3,
.tag-category ul.com-tags-tag__category h3 {
    font-size: 1rem;
    margin: 0 0 0.25rem 0;
    padding: 0.5rem 0;
}

.tag-category .com-tags__items ul.com-tags__category h3 a,
.tag-category ul.com-tags-tag__category h3 a {
    color: #0d6efd;
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 0.95rem;
    font-weight: 400;
}

.tag-category .com-tags__items ul.com-tags__category h3 a:hover,
.tag-category ul.com-tags-tag__category h3 a:hover {
    color: #0d6efd;
    text-decoration: none;
}

/* Keep form and pagination full width */
.tag-category .com-tags__items > form,
.tag-category .com-tags__items > .com-tags__pagination {
    width: 100%;
}

.tag-category h1 {
    font-size: 1.75rem;
}

.tag-category .com-tags__description {
    color: #666;
    padding-bottom: 1rem;
}

/* Tags Module */

.modTags ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modTags ul li {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 5px;
}

.modTags ul li:last-child {
    margin-right: 0;
}

.modTags ul li a {
    display: inline-block;
    padding: 4px 8px;
    background-color: #f0f0f0;
    border-radius: 3px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

.modTags ul li a:hover {
    background-color: #e0e0e0;
}

.modTags ul li {
    list-style: none;
}

.container-sidebar-right .card.modTags {
    border: none;
}

.modTags .card-body {
    padding: 0;
    margin: 0;
}

/* ============================================
   3. LISTING CAROUSEL - Premium Sidebar Banner
   ============================================ */

.modListingCarousel {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e4e6eb;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.modListingCarousel:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.modListingCarousel .card-body {
    padding: 0;
    margin: 0;
}

/* Carousel Container */
.modListingCarousel .carousel {
    position: relative;
    width: 100%;
}

.modListingCarousel .carousel-inner {
    width: 100%;
    border-radius: 0;
    overflow: hidden;
}

.modListingCarousel .carousel-item {
    width: 100%;
}

/* Row and Column - Full Width */
.modListingCarousel .carousel-entries {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    width: 100%;
}

.modListingCarousel .carousel-entry {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    display: block;
}

/* Image Section */
.modListingCarousel .img-thumbnail {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
    display: block;
}

.modListingCarousel .img-thumbnail a {
    display: block;
    width: 100%;
}

.modListingCarousel .img-thumbnail img {
    width: 100%;
    height: auto;
    min-height: 160px;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

.modListingCarousel .carousel-entry:hover .img-thumbnail img {
    transform: none;
}

/* Image Overlay Gradient */
.modListingCarousel .img-thumbnail::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Author Section - Over Image */
.modListingCarousel .carousel-entry-author {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    padding: 4px 10px;
    border-radius: 20px;
    width: auto;
}

.modListingCarousel .carousel-entry-author .fa-user {
    color: #ffffff;
    font-size: 0.65rem;
}

.modListingCarousel .carousel-entry-author a {
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modListingCarousel .carousel-entry-author a:hover {
    text-decoration: underline;
    color: #FFD700;
}

/* Content Section - Below Image */
.modListingCarousel .carousel-entry-small-subtitle {
    padding: 12px;
    background: #ffffff;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* Category Tags & Pricing */
.modListingCarousel .modCategoryWrapper {
    margin-bottom: 8px;
}

.modListingCarousel .modCategoryTag {
    display: inline-block;
    background: #e8f0fe;
    color: #1877f2;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 16px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.modListingCarousel .modPriceRequest,
.modListingCarousel .modCurrency,
.modListingCarousel .modPrice {
    display: inline-block;
    color: #28a745;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 16px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Title Section */
.modListingCarousel .modTitleWrapper {
    margin-bottom: 8px;
}

.modListingCarousel .modTitle {
    font-size: 0.813rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: #1e293b;
    display: block;
}

.modListingCarousel .modTitle a {
    color: #1e293b;
    text-decoration: none;
    display: block;
}

.modListingCarousel .modTitle a:hover {
    color: #1877f2;
}

/* Bottom Info Bar */
.modListingCarousel .modBottomWrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.65rem;
    color: #65676b;
    padding-top: 8px;
    border-top: 1px solid #e4e6eb;
}

.modListingCarousel .modBusinessIcon svg {
    width: 12px;
    height: 12px;
    color: #65676b;
}

.modListingCarousel .modCategory {
    color: #65676b;
    font-size: 0.65rem;
}

.modListingCarousel .modLocation {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.modListingCarousel .modLocation svg {
    width: 10px;
    height: 10px;
    color: #65676b;
}

.modListingCarousel .modLocation span {
    color: #65676b;
    font-size: 0.65rem;
}

/* Carousel Controls */
.modListingCarousel .carousel-control-prev,
.modListingCarousel .carousel-control-next {
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.modListingCarousel:hover .carousel-control-prev,
.modListingCarousel:hover .carousel-control-next {
    opacity: 1;
}

.modListingCarousel .carousel-control-prev {
    left: 8px;
}

.modListingCarousel .carousel-control-next {
    right: 8px;
}

.modListingCarousel .carousel-control-prev-icon,
.modListingCarousel .carousel-control-next-icon {
    width: 16px;
    height: 16px;
    background-size: 60%;
    background-position: center;
}

/* Sidebar Specific - Compact Version */
.sidebar-right .modListingCarousel .img-thumbnail img {
    min-height: 140px;
    max-height: 160px;
}

.sidebar-right .modListingCarousel .carousel-entry-small-subtitle {
    padding: 10px;
}

.sidebar-right .modListingCarousel .modTitle {
    font-size: 0.75rem;
}

.sidebar-right .modListingCarousel .modBottomWrapper {
    font-size: 0.6rem;
    gap: 5px;
}

/* Carousel Mobile Responsive */
@media (max-width: 991px) {
    .modListingCarousel .img-thumbnail img {
        min-height: 150px;
        max-height: 180px;
    }
    
    .modListingCarousel .carousel-control-prev,
    .modListingCarousel .carousel-control-next {
        opacity: 1;
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 576px) {
    .modListingCarousel .img-thumbnail img {
        min-height: 160px;
        max-height: 180px;
    }
    
    .modListingCarousel .carousel-entry-small-subtitle {
        padding: 10px;
    }
    
    .modListingCarousel .modTitle {
        font-size: 0.75rem;
    }
    
    .modListingCarousel .carousel-entry-author {
        left: 10px;
        right: 10px;
        bottom: 8px;
        padding: 3px 8px;
    }
    
    .modListingCarousel .carousel-entry-author a {
        font-size: 0.6rem;
    }
}

/* ============================================
   4. STICKY SIDEBARS - Facebook Style
   (Works on Blog, Tags, and Comments pages)
   ============================================ */

/* Target all social-related page layouts */
body.site.layout-blog .site-grid,
body.site.com_tags .site-grid,
body.site.com-content.view-article .site-grid,
body.site.pgComments .site-grid {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    padding-top: 0.5rem;
}

/* Large screens - make sidebars sticky */
@media (min-width: 992px) {
    
    /* Blog layout */
    body.site.layout-blog .site-grid,
    body.site.com_tags .site-grid,
    body.site.com-content.view-article .site-grid,
    body.site.pgComments .site-grid {
        flex-wrap: nowrap !important;
    }
    
    /* Left Sidebar - Sticky (for all social pages) */
    body.site.layout-blog .grid-child.container-sidebar-left,
    body.site.com_tags .grid-child.container-sidebar-left,
    body.site.com-content.view-article .grid-child.container-sidebar-left,
    body.site.pgComments .grid-child.container-sidebar-left {
        position: sticky !important;
        top: 20px !important;
        flex: 0 0 280px !important;
        align-self: flex-start !important;
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
        scrollbar-width: thin;
    }
    
    /* Left Sidebar scrollbar styling */
    body.site.layout-blog .grid-child.container-sidebar-left::-webkit-scrollbar,
    body.site.com_tags .grid-child.container-sidebar-left::-webkit-scrollbar,
    body.site.com-content.view-article .grid-child.container-sidebar-left::-webkit-scrollbar,
    body.site.pgComments .grid-child.container-sidebar-left::-webkit-scrollbar {
        width: 4px;
    }
    
    body.site.layout-blog .grid-child.container-sidebar-left::-webkit-scrollbar-track,
    body.site.com_tags .grid-child.container-sidebar-left::-webkit-scrollbar-track,
    body.site.com-content.view-article .grid-child.container-sidebar-left::-webkit-scrollbar-track,
    body.site.pgComments .grid-child.container-sidebar-left::-webkit-scrollbar-track {
        background: #f0f2f5;
        border-radius: 4px;
    }
    
    body.site.layout-blog .grid-child.container-sidebar-left::-webkit-scrollbar-thumb,
    body.site.com_tags .grid-child.container-sidebar-left::-webkit-scrollbar-thumb,
    body.site.com-content.view-article .grid-child.container-sidebar-left::-webkit-scrollbar-thumb,
    body.site.pgComments .grid-child.container-sidebar-left::-webkit-scrollbar-thumb {
        background: #c1c9d2;
        border-radius: 4px;
    }
    
    /* Main Content - NO sticky, scrolls normally */
    body.site.layout-blog .grid-child.container-component,
    body.site.com_tags .grid-child.container-component,
    body.site.com-content.view-article .grid-child.container-component,
    body.site.pgComments .grid-child.container-component {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: 680px !important;
        margin: 0 auto !important;
        min-height: 100vh !important;
    }
    
    /* Right Sidebar - Sticky (for all social pages) */
    body.site.layout-blog .grid-child.container-sidebar-right,
    body.site.com_tags .grid-child.container-sidebar-right,
    body.site.com-content.view-article .grid-child.container-sidebar-right,
    body.site.pgComments .grid-child.container-sidebar-right {
        position: sticky !important;
        top: 20px !important;
        flex: 0 0 320px !important;
        align-self: flex-start !important;
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
        scrollbar-width: thin;
    }
    
    /* Right Sidebar scrollbar styling */
    body.site.layout-blog .grid-child.container-sidebar-right::-webkit-scrollbar,
    body.site.com_tags .grid-child.container-sidebar-right::-webkit-scrollbar,
    body.site.com-content.view-article .grid-child.container-sidebar-right::-webkit-scrollbar,
    body.site.pgComments .grid-child.container-sidebar-right::-webkit-scrollbar {
        width: 4px;
    }
    
    body.site.layout-blog .grid-child.container-sidebar-right::-webkit-scrollbar-track,
    body.site.com_tags .grid-child.container-sidebar-right::-webkit-scrollbar-track,
    body.site.com-content.view-article .grid-child.container-sidebar-right::-webkit-scrollbar-track,
    body.site.pgComments .grid-child.container-sidebar-right::-webkit-scrollbar-track {
        background: #f0f2f5;
        border-radius: 4px;
    }
    
    body.site.layout-blog .grid-child.container-sidebar-right::-webkit-scrollbar-thumb,
    body.site.com_tags .grid-child.container-sidebar-right::-webkit-scrollbar-thumb,
    body.site.com-content.view-article .grid-child.container-sidebar-right::-webkit-scrollbar-thumb,
    body.site.pgComments .grid-child.container-sidebar-right::-webkit-scrollbar-thumb {
        background: #c1c9d2;
        border-radius: 4px;
    }
}

/* Mobile Sidebars - override sticky on mobile (all social pages) */
@media (max-width: 991px) {
    body.site.layout-blog .site-grid,
    body.site.com_tags .site-grid,
    body.site.com-content.view-article .site-grid,
    body.site.pgComments .site-grid {
        flex-direction: column !important;
        gap: 16px;
        padding: 0 12px;
    }
    
    body.site.layout-blog .grid-child.container-sidebar-left,
    body.site.com_tags .grid-child.container-sidebar-left,
    body.site.com-content.view-article .grid-child.container-sidebar-left,
    body.site.pgComments .grid-child.container-sidebar-left,
    body.site.layout-blog .grid-child.container-sidebar-right,
    body.site.com_tags .grid-child.container-sidebar-right,
    body.site.com-content.view-article .grid-child.container-sidebar-right,
    body.site.pgComments .grid-child.container-sidebar-right {
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    
    body.site.layout-blog .grid-child.container-sidebar-left,
    body.site.com_tags .grid-child.container-sidebar-left,
    body.site.com-content.view-article .grid-child.container-sidebar-left,
    body.site.pgComments .grid-child.container-sidebar-left {
        order: 1;
        width: 100%;
    }
    
    body.site.layout-blog .grid-child.container-component,
    body.site.com_tags .grid-child.container-component,
    body.site.com-content.view-article .grid-child.container-component,
    body.site.pgComments .grid-child.container-component {
        order: 2;
        width: 100%;
        max-width: 100%;
    }
    
    body.site.layout-blog .grid-child.container-sidebar-right,
    body.site.com_tags .grid-child.container-sidebar-right,
    body.site.com-content.view-article .grid-child.container-sidebar-right,
    body.site.pgComments .grid-child.container-sidebar-right {
        order: 3;
        width: 100%;
    }
}

/* Background for all social pages */
body.site.layout-blog,
body.site.com_tags,
body.site.com-content.view-article,
body.site.pgComments {
    background: #f0f2f5;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
/* ============================================
   5. FACEBOOK-STYLE NEWSFEED LAYOUT
   Blog & Article Pages
   ============================================ */

.pgNewsfeed .blog-item,
.item-pagepgNewsfeed {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e4e6eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
    position: relative;
}

.pgNewsfeed .blog-item:hover,
.item-pagepgNewsfeed:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================
   6. EDIT BUTTON - Top Right Corner
   ============================================ */

.pgNewsfeed .blog-item .icons,
.item-pagepgNewsfeed .icons {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
}

.pgNewsfeed .blog-item .icons .float-end,
.item-pagepgNewsfeed .icons .float-end {
    float: none !important;
}

.pgNewsfeed .blog-item .icons a,
.item-pagepgNewsfeed .icons a {
    background: #e4e6eb;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #050505;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
}

.pgNewsfeed .blog-item .icons a:hover,
.item-pagepgNewsfeed .icons a:hover {
    background: #d8dadf;
}

/* ============================================
   7. POST HEADER (Title)
   ============================================ */

.pgNewsfeed .blog-item .page-header,
.item-pagepgNewsfeed .page-header {
    padding: 1rem 1rem 0 1rem;
    margin: 0;
    padding-right: 80px;
}

.pgNewsfeed .blog-item .page-header h2,
.item-pagepgNewsfeed .page-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    padding: 0 0 8px 0;
    line-height: 1.3;
}

.pgNewsfeed .blog-item .page-header h2 a,
.item-pagepgNewsfeed .page-header h1 {
    color: #1e293b;
      text-decoration: none;
      font-size: 1.675rem;
}

.pgNewsfeed .blog-item .page-header h2 a:hover,
.item-pagepgNewsfeed .page-header h1:hover {
    color: #1877f2;
    text-decoration: none;
}

/* ============================================
   CONNECT BUTTON - Facebook Style
   ============================================ */

/* Base styles for both button and link */
.biskoon-meta-row-top .meta-item.author .connect-btn,
.biskoon-meta-row-top .meta-item.author .author-connect-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.813rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Button style (with background) */
.biskoon-meta-row-top .meta-item.author .author-connect-link,
.biskoon-meta-row-top .meta-item.author .connect-btn {
    background-color: #0866ff;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
}
.biskoon-meta-row-top .meta-item.author .author-connect-link:hover,
.biskoon-meta-row-top .meta-item.author .connect-btn:hover {
    background-color: #0861f2;
    color: #ffffff;
}

/* Icon styling */
.biskoon-meta-row-top .meta-item.author .connect-btn svg,
.biskoon-meta-row-top .meta-item.author .author-connect-link svg {
    width: 18px;
    height: 18px;
    color: #ffffff;
    fill: currentColor;
    filter: drop-shadow(0 0 0.1px currentColor) drop-shadow(0 0 0.1px currentColor);
}
/* ============================================
   8. META INFO ROW - Facebook Style
   ============================================ */

.biskoon-meta-row-top.bis-top-article-info {
    padding: 4px 16px 8px;
    margin-bottom: 0;
}

.biskoon-meta-row-top .meta-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.biskoon-meta-row-top .meta-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #65676b;
}

.biskoon-meta-row-top .meta-item svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    color: #65676b;
}

/* Author Section */
.biskoon-meta-row-top .meta-item.author .author-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: 500;
    color: #050505;
    gap: 8px;
    font-size: 0.875rem;
}

.biskoon-meta-row-top .meta-item.author .author-link:hover {
    text-decoration: none;
    color: #1877f2;
}

.biskoon-meta-row-top .cb-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.biskoon-meta-row-top .cb-avatar-initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1877f2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Publish Date & Privacy */
.biskoon-meta-row-top .publish-date {
    font-size: 0.813rem;
    color: #65676b;
}

.biskoon-meta-row-top .access-level {
    font-size: 0.813rem;
    color: #65676b;
}

.biskoon-meta-row-top .edited-label {
    font-size: 0.688rem;
    color: #65676b;
    margin-left: 4px;
    font-style: normal;
}

/* ============================================
   9. MASONRY GALLERY - Facebook Style
   ============================================ */

.fields-container.biskoon-masonry-gallery {
    margin: 0;
    padding: 4px;
}

.fields-container.biskoon-masonry-gallery .masonry-image-item,
.fields-container.biskoon-masonry-gallery .masonry-video-item {
    border-radius: 8px;
    overflow: hidden;
    background: #f0f2f5;
    transition: transform 0.2s ease;
}

.fields-container.biskoon-masonry-gallery .masonry-image-item:hover,
.fields-container.biskoon-masonry-gallery .masonry-video-item:hover {
    transform: scale(1.01);
}

.fields-container.biskoon-masonry-gallery img,
.fields-container.biskoon-masonry-gallery video,
.fields-container.biskoon-masonry-gallery iframe {
    width: 100%;
    height: auto;
    display: block;
}

/* Video Wrapper */
.fields-container.biskoon-masonry-gallery .embed-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.fields-container.biskoon-masonry-gallery .embed-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   10. POST CONTENT (Text)
   ============================================ */

.commFullTextWrapper,
.com-content-article__body {
    padding: 12px 16px;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #1e293b;
}

.commFullTextWrapper p,
.com-content-article__body p {
    margin-bottom: 12px;
}

.commFullTextWrapper p:last-child,
.com-content-article__body p:last-child {
    margin-bottom: 0;
}

/* Read More Link */
.pgNewsfeed .blog-item a.readmore {
    color: #1877f2;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pgNewsfeed .blog-item a.readmore:hover {
    text-decoration: underline;
}

/* Article Detail Content - Better Typography */
.item-pagepgNewsfeed .com-content-article__body {
    padding: 20px 24px;
    line-height: 1.6;
    font-size: 1rem;
}

.item-pagepgNewsfeed .com-content-article__body h1 {
    font-size: 1.75rem;
    margin: 24px 0 16px;
    font-weight: 700;
}

.item-pagepgNewsfeed .com-content-article__body h2 {
    font-size: 1.5rem;
    margin: 20px 0 12px;
    font-weight: 600;
}

.item-pagepgNewsfeed .com-content-article__body h3 {
    font-size: 1.25rem;
    margin: 16px 0 12px;
    font-weight: 600;
}

.item-pagepgNewsfeed .com-content-article__body hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid #e4e6eb;
}

.item-pagepgNewsfeed .com-content-article__body ul,
.item-pagepgNewsfeed .com-content-article__body ol {
    padding-left: 24px;
    margin: 12px 0;
}

.item-pagepgNewsfeed .com-content-article__body li {
    margin: 4px 0;
}

/* ============================================
   11. RATINGS / VOTING - Facebook Style
   ============================================ */


.bisCustomVoting .btn.btn-primary {
    padding: 0.25rem 2rem;
}
/* Center align the voting component */
.bisCustomVoting {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;
    width: 100% !important;
    text-align: center !important;
    border-bottom: 1px solid #e4e6eb;
    background: rgba(240,242,245,0.8);
    margin-bottom: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Optional: For better mobile responsiveness */
@media screen and (max-width: 768px) {
    .bisCustomVoting {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    .bisCustomVoting > div:first-child {
        margin-left: 0 !important;
    }
    
    .bisCustomVoting .ms-2 {
        margin-left: 0 !important;
    }
}

/* Center the ul element */
.content_rating ul {
    display: flex;
    justify-content: center;  /* Horizontally center the stars */
    align-items: center;      /* Vertically align */
    gap: 4px;                 /* Slightly larger gap for better appearance */
    list-style: none;
    padding: 0;
    margin: 0 auto;           /* Auto margins for centering */
}

/* Center each li if needed */
.content_rating li {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Star icon styling */
.content_rating li svg {
    width: 20px;              /* Slightly larger for better visibility */
    height: 20px;
    fill: #e4e6eb;
    color: #e4e6eb;
    display: block;
}

.content_rating {
      padding-bottom: 1rem;
}

/* Alternative: If you want to use flex on parent container */
.com-content-article .content_rating {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-top: 1px solid #e4e6eb;
    background: rgba(240,242,245,0.8);
    margin-bottom: 0;
    text-align: center !important;
}

.com-content-article .content_rating ul {
    justify-content: center;
}

/* Filled star styling */
.vote-star-filled svg {
    fill: #f5c518 !important;
    color: #f5c518 !important;
}

/* Active/hover star effects (optional) */
.content_rating li:hover svg {
    fill: #f5c518;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

/* Rating form styling */
.bisCustomVoting .btn-sm {
    padding: 4px 12px;
    font-size: 0.75rem;
    border-radius: 6px;
}

.bisCustomVoting .form-select-sm {
    padding: 4px 8px;
    font-size: 0.85rem !important;
    border-radius: 6px;
    min-width: 100px;
}

/* ============================================
   RESPONSIVE RATINGS
   ============================================ */

@media (max-width: 576px) {
    .content_rating li svg {
        width: 16px;
        height: 16px;
    }
    
    .content_rating ul {
        gap: 2px;
    }
}
/* ============================================
   12. POST FOOTER - Facebook Style
   ============================================ */

.biskoon-meta-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 0;
    min-height: 32px;
    border-top: 1px solid #e4e6eb;
    background: rgba(240, 242, 245, 0.8);
}

.site.pgComments .biskoon-meta-row-bottom {
    border: none;
    background: none;
    margin-bottom: 1rem;
    margin-right: 1rem;
}
.site.pgComments .com-content-article__body {
    display: none;
}

.biskoon-meta-row-bottom .meta-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.biskoon-meta-row-bottom .meta-item:first-child {
    justify-content: flex-start;
}

.biskoon-meta-row-bottom .meta-item:last-child {
    justify-content: flex-end;
}

.biskoon-meta-row-bottom .meta-item.comments-count .rsc_comments_count,
.biskoon-meta-row-bottom .meta-item.modified-date .hits,
.biskoon-meta-row-bottom .meta-item.share .bisShare {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #65676b;
    background: none;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
    line-height: 1;
    vertical-align: middle;
}

.biskoon-meta-row-bottom .meta-item.comments-count .rsc_comments_count:hover,
.biskoon-meta-row-bottom .meta-item.share .bisShare:hover {
    background: #fff !important;
    color: #0A1F44;
}

.biskoon-meta-row-bottom .meta-item.modified-date .hits {
    cursor: default;
    pointer-events: none;
}

.biskoon-meta-row-bottom .meta-item.comments-count .rsc_comments_count a {
    color: #65676b;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.biskoon-meta-row-bottom .meta-item.comments-count .rsc_comments_count a:hover {
    color: #0A1F44;
}

.biskoon-meta-row-bottom .meta-item.share .bisShare {
    cursor: pointer;
    background: none;
    border: none;
}

.biskoon-meta-row-bottom .meta-item.share .bisShare svg {
    width: 18px;
    height: 18px;
}

/* Comments Icon Replacement */
.biskoon-meta-row-bottom .meta-item .rsc_comments_count img {
    display: none !important;
}

.biskoon-meta-row-bottom .meta-item .rsc_comments_count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    
}
.biskoon-meta-row-bottom .meta-item .rsc_comments_count:hover{
    color: #0A1F44;
}

.biskoon-meta-row-bottom .meta-item .rsc_comments_count::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: #65676b;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path d="M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105"/><path d="M7.066 6.76A1.665 1.665 0 0 0 4 7.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 0 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 7.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 0 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path d="M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105"/><path d="M7.066 6.76A1.665 1.665 0 0 0 4 7.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 0 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/></svg>') no-repeat center;
    transition: background-color 0.2s ease;
}

.biskoon-meta-row-bottom .meta-item .rsc_comments_count:hover::before {
    background-color: #0A1F44;
    color: #0A1F44;
}

.biskoon-meta-row-bottom .meta-item.modified-date .hits svg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.biskoon-meta-row-bottom .meta-item.comments-count .rsc_comments_count,
.biskoon-meta-row-bottom .meta-item.modified-date .hits,
.biskoon-meta-row-bottom .meta-item.share .bisShare {
    min-height: 36px;
    box-sizing: border-box;
}

.biskoon-meta-row-bottom .meta-item.share .bisShare {
    background: none;
    border: none;
    font-family: inherit;
}

/* ============================================
   13. TAGS - Facebook Style
   ============================================ */

.biskoon-tags-aftertext,
.com-content-article__body + .tags,
.com-content-article__body + .article-info + .tags {
    padding: 12px 16px;
    border-top: 1px solid #e4e6eb;
    margin-top: 0;
}

.tags.list-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.tags.list-inline .list-inline-item {
    margin: 0;
}

.tags.list-inline .btn.btn-info {
    background: #f0f2f5;
    color: #050505;
    font-size: 0.813rem;
    font-weight: 400;
    padding: 6px 14px;
    border-radius: 20px;
    border: none;
    text-decoration: none;
}

.tags.list-inline .btn.btn-info:hover {
    background: #e4e6eb;
    color: #1877f2;
}

/* ============================================
   14. "Post Newfeed" Button
   ============================================ */

.com-content-category-blog > .btn-primary,
.pgNewsfeed .btn-primary[href*="task=article.add"] {
    background: #1877f2;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    color: white;
    margin-top: 16px;
    display: inline-block;
    text-decoration: none;
}

.com-content-category-blog > .btn-primary:hover {
    background: #166fe5;
}

/* ============================================
   15. PAGINATION - Facebook Style
   ============================================ */

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
}

.pagination .page-item .page-link {
    background: #ffffff;
    border: 1px solid #e4e6eb;
    color: #050505;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
}

.pagination .page-item.active .page-link {
    background: #1877f2;
    border-color: #1877f2;
    color: white;
}

.pagination .page-item .page-link:hover {
    background: #f0f2f5;
}

/* ============================================
   16. NAVIGATION (Prev/Next) - Facebook Style
   ============================================ */

.pagenavigation {
    padding: 16px;
    border-top: 1px solid #e4e6eb;
}

.pagenavigation .pagination {
    display: flex;
    justify-content: space-between;
    margin: 0;
    width: 100%;
}

.pagenavigation .btn-secondary {
    border: none;
    color: #050505;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s ease;
    background: transparent !important;
}

.pagenavigation .btn-secondary:hover {
    background: transparent !important;
     color: #1877f2 !important;

}

.pagenavigation .previous .icon-chevron-left {
    margin-right: 4px;
}

.pagenavigation .next .icon-chevron-right {
    margin-left: 4px;
}

/* ============================================
   17. ARTICLE INFO (Views, Dates, etc.)
   ============================================ */

.item-pagepgNewsfeed .article-info {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 16px;
    margin: 0;
    font-size: 0.813rem;
    color: #65676b;
}

.item-pagepgNewsfeed .article-info dd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.item-pagepgNewsfeed .article-info .hits {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.article-info dd.hits {
    display: none !important;
}

.meta-item.modified-date dd.hits {
      display: inline-flex !important;
}

.item-pagepgNewsfeed .biskoon-meta-row-bottom .meta-item.modified-date .hits {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================
   18. COMMENTS SECTION - Facebook Style
   ============================================ */

.rscomments {
    border-top: 1px solid #e4e6eb;
    margin-top: 16px;
    padding: 16px;
}

/* Comments Header */
.rscomment-top-actions {
    padding: 0 0 12px 0;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.rscomment-top-actions .float-start {
    float: left;
}

.rscomment-top-actions .float-end {
    float: right;
}

.rscomment-top-actions .float-end span {
    margin-left: 16px;
}

.rscomment-top-actions a {
    color: #65676b;
    text-decoration: none;
    font-size: 0.875rem;
}

.rscomment-top-actions a:hover {
    color: #1877f2;
}

/* Comment Item */
.rscomment {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f2f5;
}

.rscomment:last-child {
    border-bottom: none;
}

/* Comment Avatar */
.rscomment .media-container {
    flex-shrink: 0;
}

.rscomment .media-container img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Comment Body */
.rscomment .media-body {
    flex: 1;
}

/* Comment Header */
.rscomm-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.rscomm-big {
    font-weight: 600;
    font-size: 0.875rem;
    color: #050505;
}

.rscomm-time {
    font-size: 0.75rem;
    color: #65676b;
}

.rscomm-time i {
    margin-right: 2px;
}

/* Comment Subject */
.rscomm-heading {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    margin: 0 0 8px 0;
}

/* Comment Content */
.rscomm-content {
    font-size: 0.975rem;
    line-height: 1.4;
    color: #1e293b !important;
    display: block;
    margin-bottom: 10px;
}

/* Comment Actions */
.rscomm-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.rscomm-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rscomm-meta-item a {
    color: #65676b;
    text-decoration: none;
    font-size: 0.75rem;
}

.rscomm-meta-item a:hover {
    color: #1877f2;
}

.rscomm-meta-item .fa-thumbs-up,
.rscomm-meta-item .fa-thumbs-down {
    font-size: 0.75rem;
}

/* Reply & Quote Buttons */
.rscomm-actions .btn-sm {
    padding: 4px 12px;
    font-size: 0.688rem;
    border-radius: 6px;
}

.rscomm-actions .btn-primary {
    background: #e4e6eb;
    border: none;
    color: #050505;
}

.rscomm-actions .btn-primary:hover {
    background: #d8dadf;
}

.rscomm-actions .btn-secondary {
    background: none;
    border: none;
    color: #65676b;
}

.rscomm-actions .btn-secondary:hover {
    background: #f0f2f5;
}

/* Reply Form */
#rscomments-reply-12 {
    margin-top: 12px;
    padding-left: 52px;
}

/* Comment Form - Facebook Style */
.rscomment-form {
    background: #ffffff;
    margin-top: 16px;
}

.rscomments-comment-area textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    background: #f0f2f5;
    transition: border 0.2s ease;
}

.rscomments-comment-area textarea:focus {
    outline: none;
    border-color: #1877f2;
    background: #ffffff;
}

/* Formatting Toolbar */
.rscomments-action-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.rscomments-action-btns .btn-group {
    display: inline-flex;
    gap: 2px;
}

.rscomments-action-btns .btn-secondary {
    background: #f0f2f5;
    border: none;
    padding: 6px 10px;
    font-size: 0.75rem;
    border-radius: 6px;
    color: #65676b;
}

.rscomments-action-btns .btn-secondary:hover {
    background: #e4e6eb;
    color: #050505;
}

/* Character Counter */
.rscomments-remaining-chars {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.char-left {
    font-size: 0.688rem;
    color: #65676b;
}

/* Submit Buttons */
.rscomments-comment-form .btn {
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 6px;
    margin-right: 8px;
}

.rscomments-comment-form .btn-primary {
    background: #1877f2;
    border: none;
    color: white;
}

.rscomments-comment-form .btn-primary:hover {
    background: #166fe5;
}

.rscomments-comment-form .btn-secondary {
    background: #e4e6eb;
    border: none;
    color: #050505;
}

.rscomments-comment-form .btn-secondary:hover {
    background: #d8dadf;
}

/* Terms & Conditions Checkbox */
.rsc-terms-container {
    margin: 12px 0;
}

.rsc-terms-container .checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rsc-terms-container input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.rsc-terms-container a {
    color: #1877f2;
    text-decoration: none;
    font-size: 0.75rem;
}

.rsc-terms-container a:hover {
    text-decoration: underline;
}

/* ============================================
   19. MODULE GRID LAYOUT
   ============================================ */

.mod-articles-items.mod-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mod-articles-items .mod-articles-item {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e4e6eb;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mod-articles-items .mod-articles-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mod-articles-item-content {
    padding: 12px;
}

.mod-articles-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.3;
}

.mod-articles-title a {
    color: #1e293b;
    text-decoration: none;
}

.mod-articles-title a:hover {
    color: #1877f2;
}

/* ============================================
   20. SOCIAL SEARCH
   ============================================ */

.modSocialSearch {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 20px;
}

.modSocialSearch .card-body {
    padding: 0;
}

.modSocialSearch .visually-hidden,
.modSocialSearch label {
    display: none;
}

.modSocialSearch .mod-finder {
    position: relative;
    width: 100%;
}

.modSocialSearch .js-finder-search-query {
    width: 100%;
    padding: 12px 16px 12px 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    font-size: 0.95rem;
    color: #334155;
    outline: none;
    transition: all 0.3s ease;
    min-width: 250px;
}

.modSocialSearch .js-finder-search-query:focus {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
    min-width: 270px;
}

.modSocialSearch .mod-finder::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.006 1.006 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .modSocialSearch .js-finder-search-query {
        padding: 11px 14px 11px 40px;
        font-size: 0.9rem;
    }
    
    .modSocialSearch .mod-finder::before {
        left: 14px;
        width: 16px;
        height: 16px;
    }
}

/* ============================================
   21. MOBILE RESPONSIVE - Main
   ============================================ */

@media (max-width: 767.98px) {
    
    .pgNewsfeed .blog-item .page-header,
    .item-pagepgNewsfeed .page-header {
        padding-right: 60px;
    }
    
    .pgNewsfeed .blog-item .page-header h2,
    .item-pagepgNewsfeed .page-header h1 {
        font-size: 1rem;
    }
    
    .biskoon-meta-row-top .cb-avatar {
        width: 28px;
        height: 28px;
    }
    
    .biskoon-meta-row-top .meta-list {
        gap: 8px;
    }
    
    .biskoon-meta-row-top .meta-item {
        font-size: 0.75rem;
    }
    
    .biskoon-meta-row-top .meta-item.author .author-link {
        font-size: 0.75rem;
    }
    
    .biskoon-meta-row-top .publish-date,
    .biskoon-meta-row-top .access-level {
        font-size: 0.688rem;
    }
    
    .commFullTextWrapper,
    .com-content-article__body {
        padding: 8px 12px;
        font-size: 0.875rem;
    }
    
    .biskoon-meta-row-bottom {
        padding: 6px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .biskoon-meta-row-bottom .meta-item.comments-count .rsc_comments_count,
    .biskoon-meta-row-bottom .meta-item.modified-date .hits,
    .biskoon-meta-row-bottom .meta-item.share .bisShare {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    
    .mod-articles-items.mod-articles-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .item-pagepgNewsfeed .com-content-article__body {
        padding: 12px 16px;
    }
    
    .item-pagepgNewsfeed .com-content-article__body h1 {
        font-size: 1.25rem;
    }
    
    .item-pagepgNewsfeed .com-content-article__body h2 {
        font-size: 1.125rem;
    }
    
    .item-pagepgNewsfeed .com-content-article__body h3 {
        font-size: 1rem;
    }
    
    /* Tags mobile */
    .tags.list-inline .btn.btn-info {
        font-size: 0.688rem;
        padding: 4px 10px;
    }
    
    /* Comments mobile */
    .rscomment {
        gap: 8px;
    }
    
    .rscomment .media-container img {
        width: 32px;
        height: 32px;
    }
    
    .rscomm-big {
        font-size: 0.813rem;
    }
    
    .rscomm-content {
        font-size: 0.813rem;
    }
    
    .rscomm-meta {
        gap: 12px;
    }
    
    .rscomm-meta-item a {
        font-size: 0.688rem;
    }
    
    #rscomments-reply-12 {
        padding-left: 40px;
    }
    
    .rscomments-action-btns .btn-secondary {
        padding: 4px 8px;
        font-size: 0.688rem;
    }
    
    /* Navigation mobile */
    .pagenavigation .btn-secondary {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    /* Comments header mobile */
    .rscomment-top-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .rscomment-top-actions .float-end span {
        margin-left: 0;
        margin-right: 16px;
    }
}