/* ============================================
ACCORDION (DETAILS/SUMMARY) - Accessible
============================================ */
details {
background: var(--med-bg);
border-radius: 12px;
box-shadow: var(--med-shadow);
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--med-border);
}
summary {
padding: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
font-weight: 600;
font-size: 1.1rem;
color: var(--med-text);
cursor: pointer;
list-style: none;
position: relative;
user-select: none;
}
summary::-webkit-details-marker {
display: none;
}
summary .acc-icon {
transition: transform 0.3s ease;
margin-left: auto;
font-size: 0.8rem;
color: var(--med-text-muted);
display: block;
}
details[open] summary {
border-bottom: 1px solid var(--med-border);
}
details[open] summary .acc-icon {
transform: rotate(180deg);
}
summary:focus-visible {
outline: 3px solid var(--med-focus);
outline-offset: -3px;
}
.acc-content {
padding: 1.5rem;
background: var(--med-bg-light);
color: var(--med-text);
}
/* Service Items in Accordion */
.service-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: var(--med-bg);
border-radius: var(--med-radius-sm);
margin-bottom: 0.75rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
transition: all 0.2s;
text-decoration: none;
border: 1px solid var(--med-border);
color: var(--med-text);
}
.service-item:hover {
transform: translateX(4px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
text-decoration: none;
}
.service-item:focus-visible {
outline: 3px solid var(--med-focus);
outline-offset: 2px;
}
.service-item-name {
color: var(--med-text);
font-weight: 500;
}
.service-item-meta {
font-size: 0.85rem;
color: var(--med-text-muted);
margin-top: 0.25rem;
}
.service-item-price {
font-weight: 600;
white-space: nowrap;
padding: 0.5rem 1rem;
border-radius: 6px;
background: rgba(0,0,0,0.03);
}