/* css/services.css */
.content-area { display: grid; grid-template-columns: 280px 1fr; gap: calc(var(--spacing-unit) * 2); margin-bottom: calc(var(--spacing-unit) * 2); }
.sidebar { background-color: var(--card-bg-color); padding: var(--spacing-unit); border-radius: var(--border-radius); box-shadow: var(--box-shadow); height: fit-content; }
.sidebar h2 { font-size: var(--font-size-lg); margin-bottom: var(--spacing-unit); padding-bottom: calc(var(--spacing-unit) * 0.5); border-bottom: 1px solid var(--border-color); }
.category-nav li a { display: block; padding: calc(var(--spacing-unit) * 0.6) var(--spacing-unit); color: var(--text-color); border-radius: calc(var(--border-radius) * 0.75); margin-bottom: calc(var(--spacing-unit) * 0.25); font-weight: 500; text-decoration: none; }
.category-nav li a:hover, .category-nav li a.active { background-color: var(--primary-color); color: #fff; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: calc(var(--spacing-unit) * 1.5); }
.product-card { background-color: var(--card-bg-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: calc(var(--spacing-unit) * 1.5); display: flex; flex-direction: column; transition: transform var(--transition-speed) ease-in-out, box-shadow var(--transition-speed) ease-in-out; }
.product-card:hover { transform: translateY(-5px); box-shadow: var(--box-shadow-hover); }
.product-icon { font-size: 2.5rem; color: var(--primary-color); margin-bottom: var(--spacing-unit); text-align: center; }
.product-card[data-category="domains"] .product-icon, .product-card[data-category="ssl"] .product-icon { color: var(--accent-color); }
.product-card h3 { font-size: 1.3rem; margin-bottom: calc(var(--spacing-unit) * 0.5); text-align: center; }
.product-description { font-size: var(--font-size-sm); color: var(--text-muted-color); margin-bottom: var(--spacing-unit); flex-grow: 1; min-height: 60px; text-align: center; }
.product-features { margin-bottom: var(--spacing-unit); font-size: var(--font-size-sm); padding-left: 0; }
.product-features li { margin-bottom: calc(var(--spacing-unit) * 0.3); position: relative; padding-left: calc(var(--spacing-unit) * 1.2); text-align: left; }
.product-features li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--success-color); position: absolute; left: 0; top: 2px; }
.product-price { font-size: 2rem; font-weight: 700; color: var(--primary-color); margin-bottom: var(--spacing-unit); text-align: center; }
.product-price sup { font-size: 1rem; font-weight: 500; top: -0.8em; }
.product-price span { font-size: var(--font-size-sm); font-weight: 400; color: var(--text-muted-color); }
.domain-search-simple { display: flex; margin-bottom: var(--spacing-unit); }
.domain-search-simple input[type="text"] { flex-grow: 1; padding: calc(var(--spacing-unit) * 0.6) var(--spacing-unit); border: 1px solid var(--border-color); border-radius: var(--border-radius) 0 0 var(--border-radius); font-size: var(--font-size-sm); transition: border-color var(--transition-speed); }
.domain-search-simple input[type="text"]:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }
.domain-search-simple .btn-secondary { border-radius: 0 var(--border-radius) var(--border-radius) 0; white-space: nowrap; }
.product-card .btn { width: 100%; }
@media (max-width: 992px) { .content-area { grid-template-columns: 220px 1fr; } .product-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
@media (max-width: 768px) { .content-area { grid-template-columns: 1fr; } .sidebar { margin-bottom: calc(var(--spacing-unit) * 1.5); } }
@media (max-width: 480px) { .product-grid { grid-template-columns: 1fr; } .product-card { padding: var(--spacing-unit); } }