/* /assets/css/components/_accordion.css */ .pricing-accordion { max-width: 900px; margin: 0 auto; } .accordion-item { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: var(--spacing-m); box-shadow: var(--shadow-light); transition: box-shadow var(--transition-fast); } .accordion-item:hover { box-shadow: var(--shadow-medium); } .accordion-header { width: 100%; background: transparent; border: none; padding: 1.25rem 1.5rem; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--color-text); text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .accordion-icon { display: inline-block; width: 24px; height: 24px; position: relative; transition: transform var(--transition-fast); } .accordion-icon::before, .accordion-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background-color: var(--color-primary-accent); transform: translate(-50%, -50%); } .accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .accordion-item.active .accordion-icon { transform: rotate(135deg); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; } .accordion-item.active .accordion-content { padding-bottom: 1.5rem; } .price-list { list-style: none; padding: 0 1.5rem; } .price-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); padding: var(--spacing-m) 0; border-bottom: 1px solid var(--color-border); } .price-item:last-child { border-bottom: none; } .service-name, .service-price { flex-basis: 100%; text-align: left; } .service-name { color: #444; } .service-price { font-weight: 700; font-size: 1.1rem; color: var(--color-primary-accent); } .special-pricing-note { max-width: 900px; margin: var(--spacing-xl) auto 0 auto; padding: var(--spacing-l); text-align: center; background-color: rgba(8, 4, 252, 0.1); /* SPREMEMBA: Ujemanje z novo barvo */ border: 2px dashed var(--color-primary-accent); border-radius: 8px; } .special-pricing-note h3 { margin-bottom: var(--spacing-s); } .special-pricing-note p { margin: 0; font-size: 1.2rem; font-weight: 600; } /* --- MEDIA QUERIES --- */ @media (max-width: 768px) { .price-item { flex-direction: column; align-items: flex-start; } .service-price { text-align: left; margin-top: var(--spacing-xs); } } @media (min-width: 768px) { .price-item { flex-direction: row; align-items: center; gap: 0; } .service-name { flex-basis: 70%; padding-right: var(--spacing-m); } .service-price { flex-basis: 30%; text-align: right; } }