/* CW Logo Grid Widget (scoped) All styles are scoped under .cw-vergoeding-grid to avoid theme collisions. The modal is moved to by JS and styled via .cw-ins-modal-global. */ .cw-vergoeding-grid{ --cw-radius: 14px; --cw-border: #e8edf3; --cw-shadow: 0 2px 10px rgba(0,0,0,.05); --cw-blue: #3182ce; --cw-text: #3c3c3c; --cw-muted: #718096; --cw-bg: #ffffff; --cw-soft: #f7fafc; margin: 0; padding: 0; width: 100%; } .cw-vergoeding-grid, .cw-vergoeding-grid *{ box-sizing: border-box; font-family: inherit !important; } /* Layout */ .cw-vergoeding-grid .cw-ins-grid-container{ display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; } /* Logo grid (desktop) */ .cw-vergoeding-grid .cw-ins-logos-wrapper{ flex: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; align-content: start; } .cw-vergoeding-grid .cw-ins-logo-card{ background: var(--cw-bg); border: 1px solid var(--cw-border); border-radius: var(--cw-radius); padding: 12px 10px; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--cw-shadow); min-height: 110px; user-select: none; } .cw-vergoeding-grid .cw-ins-logo-card:hover{ border-color: var(--cw-blue); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(49,130,206,.12); } .cw-vergoeding-grid .cw-ins-logo-card.active{ border-color: var(--cw-blue); box-shadow: 0 0 0 2px rgba(49,130,206,.18), 0 8px 18px rgba(49,130,206,.10); } .cw-vergoeding-grid .cw-ins-card-image{ width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; overflow: hidden; background: transparent; padding: 0; } .cw-vergoeding-grid .cw-ins-card-image img{ width: 100%; height: 100%; object-fit: contain; filter: grayscale(100%); opacity: .9; transition: filter .18s ease, opacity .18s ease, transform .18s ease; display: block; } .cw-vergoeding-grid .cw-ins-logo-card:hover .cw-ins-card-image img, .cw-vergoeding-grid .cw-ins-logo-card.active .cw-ins-card-image img{ filter: grayscale(0%); opacity: 1; transform: scale(1.03); } .cw-vergoeding-grid .cw-ins-card-name{ font-size: 12px; font-weight: 700; color: var(--cw-muted); text-align: center; line-height: 1.2; transition: color .18s ease; } .cw-vergoeding-grid .cw-ins-logo-card:hover .cw-ins-card-name, .cw-vergoeding-grid .cw-ins-logo-card.active .cw-ins-card-name{ color: #2d3748; } /* Right panel (desktop) */ .cw-vergoeding-grid .cw-ins-detail-wrapper{ flex: 1; min-width: 320px; } .cw-vergoeding-grid .cw-ins-detail-card{ position: sticky; top: 24px; background: var(--cw-bg); border: 1px solid var(--cw-border); border-radius: var(--cw-radius); padding: 22px; box-shadow: 0 12px 28px rgba(0,0,0,0.10); } .cw-vergoeding-grid .cw-ins-detail-header{ border-bottom: 2px solid var(--cw-soft); padding-bottom: 14px; margin-bottom: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .cw-vergoeding-grid .cw-ins-header-left{ display: flex; flex-direction: column; gap: 8px; min-width: 0; text-align: left; } .cw-vergoeding-grid .cw-ins-header-logo{ height: 100px; width: auto; max-width: 150px; object-fit: contain; display: block; object-position: left center; margin: 0 0 10px 0; } .cw-vergoeding-grid .cw-ins-name-big{ font-size: 22px; font-weight: 900; color: var(--cw-text); line-height: 1.15; word-break: break-word; text-align: left; } .cw-vergoeding-grid .cw-ins-pkg-row{ padding: 10px 0; border-bottom: 1px solid #edf2f7; display: flex; justify-content: space-between; gap: 10px; } .cw-vergoeding-grid .cw-ins-pkg-name{ font-weight: 800; color: #2d3748; } .cw-vergoeding-grid .cw-ins-pkg-amount{ color: var(--cw-blue); font-weight: 800; text-align: right; white-space: normal; display: flex; flex-direction: column; gap: 2px; } .cw-vergoeding-grid .cw-ins-amt-line{ font-size: 14px; line-height: 1.15; } .cw-vergoeding-grid .cw-ins-amt-muted{ color: var(--cw-muted); font-weight: 700; } .cw-vergoeding-grid .cw-ins-empty-state{ color: #a0aec0; text-align: center; font-style: italic; padding: 18px 0; } /* ── Mobile modal (bottom sheet) ────────────────────────── The modal is moved to by JS, so .cw-vergoeding-grid scoping won't reach it. All modal styles use .cw-ins-modal-global instead. */ .cw-ins-modal-global{ --cw-radius: 14px; --cw-border: #e8edf3; --cw-shadow: 0 2px 10px rgba(0,0,0,.05); --cw-blue: #3182ce; --cw-text: #3c3c3c; --cw-muted: #718096; --cw-bg: #ffffff; --cw-soft: #f7fafc; position: fixed; inset: 0; display: none; z-index: 100000; } .cw-ins-modal-global, .cw-ins-modal-global *{ box-sizing: border-box; font-family: inherit !important; } .cw-ins-modal-global.is-open{ display: block; } .cw-ins-modal-global .cw-ins-modal-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.42); } .cw-ins-modal-global .cw-ins-modal-sheet{ position: absolute; left: 0; right: 0; bottom: 0; background: var(--cw-bg); border-radius: 18px 18px 0 0; box-shadow: 0 -18px 40px rgba(0,0,0,.25); max-height: min(70vh, 520px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 20px 16px 20px; transform: translateY(10px); animation: cwSheetUp .18s ease forwards; } @keyframes cwSheetUp{ to{ transform: translateY(0); } } .cw-ins-modal-global .cw-ins-modal-close{ border: 1px solid var(--cw-border); background: var(--cw-bg); color: var(--cw-muted); width: 38px; height: 38px; border-radius: 999px; position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; } .cw-ins-modal-global .cw-ins-modal-close:hover{ background: var(--cw-soft); color: var(--cw-text); } /* Detail card styles also apply inside the modal body */ .cw-ins-modal-global .cw-ins-detail-header{ border-bottom: 2px solid var(--cw-soft); padding-bottom: 14px; margin-bottom: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .cw-ins-modal-global .cw-ins-header-left{ display: flex; flex-direction: column; gap: 8px; min-width: 0; text-align: left; } .cw-ins-modal-global .cw-ins-header-logo{ height: 100px; width: auto; max-width: 150px; object-fit: contain; display: block; object-position: left center; margin: 0 0 10px 0; } .cw-ins-modal-global .cw-ins-name-big{ font-size: 22px; font-weight: 900; color: var(--cw-text); line-height: 1.15; word-break: break-word; text-align: left; } .cw-ins-modal-global .cw-ins-pkg-row{ padding: 10px 0; border-bottom: 1px solid #edf2f7; display: flex; justify-content: space-between; gap: 10px; } .cw-ins-modal-global .cw-ins-pkg-name{ font-weight: 800; color: #2d3748; } .cw-ins-modal-global .cw-ins-pkg-amount{ color: var(--cw-blue); font-weight: 800; text-align: right; white-space: normal; display: flex; flex-direction: column; gap: 2px; } .cw-ins-modal-global .cw-ins-amt-line{ font-size: 14px; line-height: 1.15; } .cw-ins-modal-global .cw-ins-amt-muted{ color: var(--cw-muted); font-weight: 700; } .cw-ins-modal-global .cw-ins-empty-state{ color: #a0aec0; text-align: center; font-style: italic; padding: 18px 0; } /* Footer */ .cw-vergoeding-grid .cw-ins-footer{ margin-top: 16px; text-align: left; font-size: 12px !important; padding-top: 8px; } .cw-vergoeding-grid .cw-ins-footer a{ color: #cbd5e0 !important; text-decoration: none !important; font-size: 12px !important; font-weight: 400 !important; } .cw-vergoeding-grid .cw-ins-footer a:hover{ color: #a0aec0 !important; } /* Mobile: dense logo grid */ @media (max-width: 768px){ .cw-vergoeding-grid{ height: auto; min-height: 0; padding-bottom: 0; margin-bottom: 0; } .cw-vergoeding-grid .cw-ins-grid-container{ display: block !important; margin-top: 16px; height: auto; } .cw-vergoeding-grid .cw-ins-detail-wrapper{ display: none !important; } .cw-vergoeding-grid .cw-ins-logos-wrapper{ grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; align-content: start; padding: 2px; margin-bottom: 0; } .cw-vergoeding-grid .cw-ins-logo-card{ height: 72px; min-height: 72px; padding: 7px 6px; border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.04); } .cw-vergoeding-grid .cw-ins-card-image{ height: 30px; margin-bottom: 6px; } .cw-vergoeding-grid .cw-ins-card-name{ font-size: 10px; line-height: 1.05; } } @media (max-width: 380px){ .cw-vergoeding-grid .cw-ins-logos-wrapper{ gap: 10px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } }