/* ============================================================ PacaBot — Regulations Marketplace panel (Phase 1A) Sits inside marketplace/index.html below the skills grid. RTL is inherited from ; rules below use logical properties / symmetric flex to stay direction-neutral. ============================================================ */ #regulations-section { margin-top: 3rem; padding-block: 2rem; } .regs-header { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .regs-title { font-size: clamp(1.4rem, 2.5vw, 1.85rem); font-weight: 700; margin: 0; color: var(--text-primary, #111); } .regs-subtitle { font-size: 1.1rem; font-weight: 600; margin: 2rem 0 0.75rem; color: var(--text-primary, #222); } /* Country badge --------------------------------------------- */ .country-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--text-muted, #555); background: var(--surface-soft, #f4f6f8); border: 1px solid var(--border-soft, #e2e6ea); padding: 0.4rem 0.75rem; border-radius: 999px; } .country-badge strong { color: var(--text-primary, #111); font-weight: 600; } .country-badge a { color: var(--brand-primary, #0D7C4F); text-decoration: underline; font-size: 0.85rem; } .country-badge a:hover { text-decoration: none; } /* Domain filter --------------------------------------------- */ .domain-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .domain-pill { appearance: none; border: 1px solid var(--border-soft, #d9dee3); background: #fff; color: var(--text-muted, #444); padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.85rem; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s, border-color 0.15s; } .domain-pill:hover { border-color: var(--brand-primary, #0D7C4F); color: var(--brand-primary, #0D7C4F); } .domain-pill.active { background: var(--brand-primary, #0D7C4F); color: #fff; border-color: var(--brand-primary, #0D7C4F); } /* Pack grid + cards ----------------------------------------- */ .pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .pack-card { border: 1px solid var(--border-soft, #e2e6ea); border-radius: 0.65rem; padding: 1.1rem; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); display: flex; flex-direction: column; gap: 0.5rem; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s; } .pack-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); border-color: var(--brand-primary, #0D7C4F); } .pack-card-owned { background: #fbfdfc; border-color: #cfead9; } .pack-domain { font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted, #888); letter-spacing: 0.05em; font-weight: 600; } .pack-title { margin: 0.1rem 0 0.25rem; font-size: 1.05rem; font-weight: 600; color: var(--text-primary, #111); line-height: 1.35; } .pack-summary { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted, #555); flex: 1 1 auto; } .pack-meta { margin-top: 0.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .install-btn-reg { appearance: none; background: var(--brand-primary, #0D7C4F); color: #fff; border: 0; padding: 0.55rem 1.1rem; border-radius: 0.4rem; cursor: pointer; font-weight: 600; font-size: 0.9rem; font-family: inherit; transition: background 0.15s, transform 0.05s; } .install-btn-reg:hover { background: #0a6240; } .install-btn-reg:active { transform: translateY(1px); } .owned-pill { background: #E8F5EE; color: #0D7C4F; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; } .pack-updated { font-size: 0.75rem; color: var(--text-muted, #888); } /* Empty owned-section is hidden via JS (display:none) -------- */ #owned-section[hidden] { display: none; } /* Responsive tightening ------------------------------------- */ @media (max-width: 640px) { .regs-header { flex-direction: column; align-items: flex-start; } .pack-grid { grid-template-columns: 1fr; } }