/*
 * Pricing page: per-month add-on price list, "Add to my website" buttons and the selection bar
 * (page-templates/price-comparison.php). Hand-written, scoped to .odm-addons*, loaded only on that
 * template. Mobile-first: base rules are the narrow layout; wider layouts add with min-width.
 * No animation, so reduced-motion needs no override.
 */
.odm-addons { padding-block: clamp(3rem, 7vw, 4.5rem) 1rem; }
.odm-addons__group { margin-top: 2.5rem; }
.odm-addons__group-title { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 700; color: #17142e; letter-spacing: .01em; }
.odm-addons__grid { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.odm-addon { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem 1rem; align-items: center; padding: 1rem; border-radius: 1rem; background: #fff; border: 1px solid #e2e8f0; }
.odm-addon__icon { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 0.75rem; background: #eef2ff; color: #4f46e5; }
.odm-addon__body { min-width: 0; }
.odm-addon__name { margin: 0; font-weight: 600; color: #0f172a; line-height: 1.3; }
.odm-addon__price { margin: 0.2rem 0 0; font-weight: 700; color: #0f172a; }
.odm-addon__price span { font-weight: 500; color: #475569; font-size: 0.85rem; margin-inline-start: 0.15rem; }
.odm-addon__btn { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 48px; padding: 0 1rem; border-radius: 0.75rem; border: 1.5px solid #4f46e5; background: #fff; color: #4338ca; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.odm-addon__btn[aria-pressed="true"] { background: #4f46e5; color: #fff; }
.odm-addon__btn:focus-visible, .odm-addons__bar a:focus-visible, .odm-addons__bar button:focus-visible, .odm-addons__pages summary:focus-visible { outline: 3px solid #4f46e5; outline-offset: 3px; }
.odm-addon__blurb { margin: 0.4rem 0 0; font-size: 0.875rem; line-height: 1.5; color: #475569; }
.odm-addon__save { margin: 0.4rem 0 0; font-size: 0.875rem; font-weight: 600; color: #047857; }
.odm-addon__btn:disabled { opacity: .7; cursor: default; background: #f1f5f9; border-color: #cbd5e1; color: #334155; }
.odm-addon__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.odm-addons__pages { margin-top: 1rem; border-radius: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; }
.odm-addons__pages summary { padding: 0.9rem 1rem; min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: #334155; }
.odm-addons__pages ul { margin: 0; padding: 0 1rem 1rem; list-style: none; display: grid; gap: 0.4rem; }
.odm-addons__pages li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; color: #334155; }
.odm-addons__bar { position: sticky; bottom: 1rem; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 2rem 4.5rem 0; padding: 0.85rem 1rem; border-radius: 1rem; background: #17142e; color: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, .35); }
.odm-addons__bar-text { margin: 0; flex: 1 1 12rem; }
.odm-addons__bar .odm-btn-primary { background: #fff; color: #17142e; min-height: 48px; }
.odm-addons__bar-clear { min-height: 48px; padding: 0 0.75rem; background: transparent; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font: inherit; }
.odm-addons__bft { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: 1.25rem; background: linear-gradient(160deg, #16123a 0%, #312e81 100%); color: #fff; }
.odm-addons__bft-title { margin: 0; font-size: 1.25rem; font-weight: 800; }
.odm-addons__bft-text { margin: 0.35rem 0 0; color: rgba(255, 255, 255, .86); max-width: 38rem; }
.odm-addons__bft .odm-btn-primary { background: #fff; color: #17142e; align-self: flex-start; }
.odm-addons__bft a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (min-width: 640px) {
	.odm-addons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.odm-addon { grid-template-columns: auto 1fr auto; }
	.odm-addon__btn { grid-column: auto; }
	.odm-addons__bar { margin-inline: auto; max-width: 46rem; }
	.odm-addons__bft { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1024px) {
	.odm-addons__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.odm-addon { grid-template-columns: auto 1fr; }
	.odm-addon__btn { grid-column: 1 / -1; }
}
@media (hover: hover) {
	.odm-addon__btn:hover:not([aria-pressed="true"]) { background: #eef2ff; }
}