/* public_html/assets/templates/basic/css/service_custom.css */

/* This file contains custom styles for the service page
   to transform the service cards into a pricing plan look
   while respecting dark/light mode, keeping original price/button styling,
   and displaying the service icon at the LEFT with its 'round square' styling.
   It is loaded AFTER main.css to ensure these styles take precedence.
*/

/* --- SECTION BACKGROUND AND SHAPE (Applies to the entire section if it has pricing-plan class) --- */
.dark .service-area.section-bg.pricing-plan {
    /* Keep this if you want the overall section background to be dark */
    background-color: hsl(var(--dark));
}

body:not(.dark) .service-area.section-bg.pricing-plan {
    background-color: hsl(var(--body-background)); /* This uses the variable from main.css for the light theme body background */
}

.service-area.section-bg.pricing-plan .square-shape-1 {
    position: absolute;
    left: -15px;
    top: -160px;
    z-index: -1;
}

@media screen and (max-width: 991px) {
    .service-area.section-bg.pricing-plan .square-shape-1 {
        top: -220px;
        display: none; /* Hide on smaller screens */
    }
}

/* --- SERVICE CARD STYLING (Targeting the .service class) --- */
.service { /* Target the main card container */
    box-shadow: 0px 15px 30px rgba(61, 90, 125, 0.08); /* From pricing-plan-item */
    border-radius: var(--border-radius);
    padding: 30px;
    border: 1px solid hsl(var(--base)/0.07); /* Keep 1px border for pricing-plan look */
    transition: all 0.4s ease-in-out;
    position: relative;
    overflow: hidden;
    text-align: start; /* CRUCIAL: Ensures content defaults to left-aligned within the card */

    /* DO NOT add background-color or color here to preserve dark/light mode */
}

/* Hover effect */
.service:hover {
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1); /* Keep this as per pricing-plan-item hover */
    border: 1px solid hsl(var(--base)/0.4); /* Keep this as per pricing-plan-item hover */
    transform: translateY(-3px);
}

/* --- SERVICE ICON (Left-aligned, Large, Colored Background with White Icon) --- */
.service .service__icon {
    /* No need for text-align: start !important; here if parent is text-align: start */
    /* Instead of inline-flex (which is centered by text-align: center on parent),
       we'll just use block to let it align left, and apply its own centering to 'i' */
    display: block; /* Ensures it takes up full width and allows margin auto if needed */

    /* Styling for the icon's background (the "round square/circle" part) */
    height: 80px; /* Larger size */
    width: 80px; /* Larger size */
    background: hsl(var(--base)); /* Use the base color for the background */
    border-radius: 50%; /* Make it perfectly round */
    margin-bottom: 25px; /* Space between icon and title/description */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    margin-left: 0; /* Ensure it stays left */
    margin-right: auto; /* Allow it to push content right if needed, but primarily left */
}

.service .service__icon i {
    font-size: 36px; /* Larger icon size */
    color: hsl(var(--white)); /* White color for the icon glyph */
    /* Flexbox on parent handles centering, but these were defaults for main.css */
    height: 100%; /* Fill parent */
    width: 100%; /* Fill parent */
    display: flex; /* Use flexbox to center 'i' within the .service__icon block */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* --- TITLE AND DESCRIPTION STYLING (These should now be explicitly centered) --- */
.service .service__content {
    margin-bottom: 20px;
    text-align: center; /* Explicitly center content block */
}

.service .service__content .title {
    font-size: 40px; /* Revert to pricing-plan title size */
    font-weight: 700;
    margin-bottom: 0px; /* Revert to pricing-plan title margin */
    /* DO NOT add color here to preserve dark/light mode */
    line-height: 1.2;
}

.service .service__content p {
    font-size: 17px; /* Revert to pricing-plan paragraph size */
    /* DO NOT add color here to preserve dark/light mode */
    margin-top: 10px;
    line-height: 1.6;
}

/* --- FEATURE LIST STYLING (These should now be left-aligned) --- */
.service ul.pricing-plan-item__list {
    margin-bottom: 25px;
    list-style: none;
    padding: 0 !important;
    margin-left: 0 !important; /* IMPORTANT: Ensures no default browser left padding/margin */
    margin-right: 0 !important;
    text-align: left; /* Ensures the UL itself aligns its contents left */
}

.service ul.pricing-plan-item__list li {
    font-size: 17px;
    display: flex; /* Crucial for using justify-content */
    align-items: flex-start; /* Aligns icon and text at the top if they have different heights */
    justify-content: flex-start; /* THIS IS THE PRIMARY FIX: Aligns the flex items (icon and text) to the left */
    padding-bottom: 8px;
    margin-bottom: 10px;
    line-height: 1.4;
    text-align: left; /* Ensures the text itself wraps left if needed */
}

.service ul.pricing-plan-item__list li i {
    color: hsl(var(--base));
    margin-right: 10px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* --- PRICE AND BUTTON STYLING (These should remain as they were) --- */
.service .service-bottom-wrap {
    display: flex !important; /* Restore its default flex behavior */
    justify-content: center; /* Ensure price and button are centered at the bottom */
}