/* Styles for the main content wrapper_sp */
.future-portal-content-wrapper_sp {
    direction: rtl; /* Ensure RTL direction for Arabic text_sp */
    text-align: right; /* Align text to the right_sp */
    margin: 20px auto; /* Center the content block on the page_sp */
    max-width: 700px; /* Optional: limit the width of the content_sp */
    padding: 20px;
    background-color: #fefefe; /* Optional: add a background color_sp */
    border: 1px solid #eee; /* Optional: add a border_sp */
    border-radius: 8px; /* Optional: rounded corners_sp */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: subtle shadow_sp */
}

/* Content Title_sp */
.future-portal-title_sp {
    text-align: center; /* Center the main title_sp */
    color: #333;
    margin-bottom: 15px;
    font-size: 1.8em; /* Reverted to a larger size for main title_sp */
}

/* Description Text_sp */
.future-portal-description_sp,
.future-portal-under-development_sp {
    text-align: center; /* Center description text as in original example_sp */
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6; /* Improved readability_sp */
    font-size: 0.9em; /* Keep description text size small_sp */
}

/* Category Title_sp */
.future-portal-category-title_sp {
    text-align: center; /* Center category title as in original example_sp */
    color: #0073aa;
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee; /* Reverted to thicker border_sp */
    padding-bottom: 5px;
    font-size: 1.3em; /* Adjusted size for category title_sp */
    padding-right: 0;
}

/* Icons Grid Container_sp */
/* Removed list styles and added grid styles back_sp */
.future-portal-icons-grid_sp {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Responsive grid_sp */
    gap: 20px; /* Space between grid items_sp */
    justify-items: center; /* Center items in the grid cells_sp */
    margin-bottom: 20px;
    padding: 0 10px;
}

/* Individual Icon Item_sp (Grid Item) */
/* Removed list item styles and added grid item styles_sp */
.future-portal-icon-item_sp {
    display: flex;
    flex-direction: column; /* Stack icon and text vertically_sp */
    align-items: center; /* Center items horizontally within the column_sp */
    text-align: center; /* Center text_sp */
    padding: 10px; /* Padding around each item_sp */
    border-radius: 8px;
    /* Removed border-bottom and list-specific styles_sp */
}

/* Icon Styling (Font Awesome) in grid_sp */
/* Reverted icon size and color for grid display_sp */
.future-portal-icon_sp {
    font-size: 40px; /* Adjust icon size_sp */
    color: #0073aa; /* Default icon color_sp */
    margin-bottom: 10px; /* Space below icon_sp */
    /* Removed list-specific margin_sp */
}

/* Link wrapper around text in grid item_sp */
.future-portal-icon-link_sp {
    text-decoration: none; /* Remove underline_sp */
    color: inherit; /* Inherit color from parent_sp */
    /* No flex-grow needed here as it's not a flex item container for text_sp */
}


/* Text Styling in grid item_sp */
.future-portal-icon-text_sp {
    margin: 0; /* Remove default margin_sp */
    font-size: 0.9em; /* Reduced font size for text under icon_sp */
    color: #333;
    word-break: break-word; /* Break long words if necessary_sp */
}


/* Styling for frozen/under development items_sp */
/* Applied to the grid item div_sp */
.future-portal-icon-item_sp.frozen_sp {
    opacity: 0.5; /* Reduced opacity_sp */
    pointer-events: none; /* Make them non-clickable_sp */
    filter: grayscale(80%); /* Optional: add grayscale_sp */
    cursor: not-allowed; /* Indicate they are not active_sp */
}

/* Styling for frozen icons within the item_sp */
.future-portal-icon-item_sp.frozen_sp .future-portal-icon_sp {
    color: #888; /* Change icon color when frozen_sp */
}


/* Removed modal-specific CSS */
/* .future-portal-modal_sp, .future-portal-modal-content_sp, .future-portal-close_sp, @keyframes animatetop_sp are removed */

/* Responsive adjustments for content wrapper and grid_sp */
@media (max-width: 768px) {
    .future-portal-content-wrapper_sp {
        margin: 15px;
        padding: 15px;
    }

    .future-portal-title_sp {
        font-size: 1.6em;
    }

     .future-portal-category-title_sp {
        font-size: 1.2em;
    }

    .future-portal-icons-grid_sp {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* Adjust grid for tablets_sp */
        gap: 15px;
    }

    .future-portal-icon_sp {
        font-size: 35px;
    }

    .future-portal-icon-text_sp {
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
     .future-portal-content-wrapper_sp {
        margin: 10px;
        padding: 10px;
    }

     .future-portal-title_sp {
        font-size: 1.4em;
    }

    .future-portal-description_sp,
    .future-portal-under-development_sp {
        font-size: 0.85em;
    }

    .future-portal-category-title_sp {
        font-size: 1.1em;
    }

    .future-portal-icons-grid_sp {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Adjust for very small screens_sp */
        gap: 10px;
    }

     .future-portal-icon_sp {
        font-size: 30px;
    }

    .future-portal-icon-text_sp {
        font-size: 0.8em;
    }
}


/* Style to highlight the "Under Development" phrase_sp */
.future-portal-description_sp .under-development-highlight_sp {
    font-weight: bold; /* يجعل الخط عريضاً_sp */
    color: #d63638; /* مثال: استخدام لون أحمر للفت الانتباه_sp */
    font-size: 1.4em; /* يكبر حجم الخط قليلاً بالنسبة للنص المحيط به_sp */
    /* يمكنك إضافة أنماط أخرى هنا حسب الحاجة، مثل underline */
}