/* --- Ensure Base Styles are Applied --- */
.domains-parent-container {
    /* ... other styles ... */
    padding: 25px 15px;
}

.domains-content-wrapper {
    /* ... other styles ... */
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Styles for Title, Separator, Description --- */
/* (Include .domains-title, .domains-separator, .separator-*, .domains-description styles here) */
.domains-title { font-size: 1.8rem; margin-bottom: 8px; /* ...etc */ }
.domains-separator { display: flex; justify-content: center; align-items: center; margin: 15px auto; /* ...etc */ }
.separator-dot { width: 5px; height: 5px; border-radius: 50%; margin: 0 4px; display: inline-block; /* ...etc */ }
.separator-dots-container { display: flex; justify-content: center; margin-right: 8px; }
.separator-line { width: 40px; height: 3px; border-radius: 1.5px; /* ...etc */ }
.domains-description { margin-top: 15px; margin-bottom: 30px; font-size: 1rem; /* ...etc */ }


/* --- Domains Grid --- */
.domains-section {
    display: grid;
    grid-template-columns: 1fr; /* Mobile default */
    gap: 20px;
    justify-items: center;
    /* ... other styles ... */
}

/* --- Domain Item --- */
.domain-item {
    position: relative; /* ESSENTIAL for absolute positioning of child */
    text-align: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    overflow: hidden; /* Helps contain the absolute child visually */
}

.domain-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.domain-item-icon {
    /* ... styles ... */
    max-width: 70px; height: auto; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;
}

.domain-item-title {
    /* ... styles ... */
    margin-top: 10px; margin-bottom: 5px; font-size: 1.1em; font-weight: 600; word-break: break-word;
}

/* --- Domain Details (Hover Effect - CSS Only) --- */
.domain-details {
    /* Positioning and Styling */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color is INLINE from JS */
    padding: 15px;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
    z-index: 1; /* Make sure it's above other content within domain-item */

    /* Content Alignment */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* --- KEY PART: Initial Hidden State --- */
    opacity: 0;
    visibility: hidden; /* Use visibility to prevent interaction when hidden */
    pointer-events: none; /* Ensure it doesn't interfere with hover when hidden */
    overflow-y: scroll;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Delay hiding visibility until opacity transition ends */
}

/* --- KEY PART: Show on Hover --- */
/* This selector targets .domain-details ONLY when its ancestor .domain-item is hovered */
.domain-item:hover .domain-details {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Allow interaction when visible */
    transition-delay: 0s; /* Remove delay for visibility when showing */
}

/* --- Optional: Using Direct Child Combinator (>) --- */
/* Use this *instead* of the two rules above if .domain-details is ALWAYS a direct child */
/*
.domain-item > .domain-details {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    padding: 15px; box-sizing: border-box; list-style: none; margin: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
     box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
    // background-color is INLINE from JS
}

.domain-item:hover > .domain-details {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
*/


.domain-details li {
    padding: 4px 0;
    word-break: break-word;
    font-size: 0.9em;
    color: #333;
    text-align: inherit;
}

/* --- Responsive Adjustments --- */
/* (Include @media query blocks from previous answer) */
@media (min-width: 600px) {
    .domains-section { grid-template-columns: repeat(2, 1fr); }
    /* ... other tablet styles ... */
}
@media (min-width: 900px) {
    .domains-section { grid-template-columns: repeat(3, 1fr); gap: 25px; }
    /* ... other desktop styles ... */
}
@media (min-width: 1200px) {
     .domains-parent-container { padding: 40px 20px; }
     .domains-section { gap: 30px; }
    /* ... other larger desktop styles ... */
}


/* --- RTL Specific Styles --- */
/* (Include [dir="rtl"] rules from previous answer) */
.domains-parent-container[dir="rtl"] .separator-dots-container { margin-right: 0; margin-left: 8px; }
.domains-parent-container[dir="rtl"] .domain-details li { text-align: right; }