/** * NewWave Downloads - Frontend Styles * BEM methodology with Bootstrap 5 compatibility */ /* ── View wrapper — content spacing ─────────────────────────────────────── */ .nwd-view { --nwdownloads-top-space: 2rem; --nwdownloads-bottom-space: 3rem; --nwdownloads-hero-gap: 2rem; --nwdownloads-hero-height: 45vh; padding-top: var(--nwdownloads-top-space); padding-bottom: var(--nwdownloads-bottom-space); } /* When JS portals the hero to , this class removes the top padding */ .nwd-view.nwd-has-fullwidth-hero { padding-top: 0; } /* ── System messages on NWDownloads pages ────────────────────────────── */ /* JS sets paddingTop dynamically; these rules handle static layout only. */ body:has(.nwd-view) #system-message-container, body:has(.nwd-view) #sp-message, body:has(.nwd-view) .system-message-container { margin-bottom: 1.5rem; } body:has(.nwd-view) #system-message-container:empty, body:has(.nwd-view) #sp-message:empty, body:has(.nwd-view) .system-message-container:empty { margin-bottom: 0; } body:has(.nwd-view) #system-message-container .alert, body:has(.nwd-view) #sp-message .alert, body:has(.nwd-view) .system-message-container .alert { border-radius: var(--bs-border-radius, 0.375rem); margin-bottom: 0.75rem; } body:has(.nwd-view) #system-message-container .alert:last-child, body:has(.nwd-view) #sp-message .alert:last-child, body:has(.nwd-view) .system-message-container .alert:last-child { margin-bottom: 0; } /* ── Hero image — contained (default) ───────────────────────────────── */ .nwd-hero { margin-bottom: var(--nwdownloads-hero-gap); border-radius: var(--bs-border-radius, 0.375rem); overflow: hidden; line-height: 0; } .nwd-hero img { width: 100%; height: auto; display: block; } /* ── Hero image — full-width variant ────────────────────────────────── */ /* JS moves .nwd-hero--fullwidth to and inserts .nwd-hero-spacer */ /* in its original position, then sets top/height via getBoundingClientRect. */ /* This bypasses overflow:hidden ancestors (e.g. SP Page Builder columns). */ /* Spacer holds vertical space where the hero originally lived */ .nwd-hero-spacer { height: var(--nwdownloads-hero-height, 45vh); margin-bottom: var(--nwdownloads-hero-gap, 2rem); display: block; } /* Hero portaled to ; top + height set by JS. CSS height prevents giant-image flash before JS fires. */ .nwd-hero--fullwidth { position: absolute; left: 0; width: 100vw; height: var(--nwdownloads-hero-height, 45vh); margin: 0; border-radius: 0; overflow: hidden; line-height: 0; z-index: 0; } .nwd-hero--fullwidth img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ── Categories ─────────────────────────────────────────────────────── */ /* Categories */ .nwd-categories { display: grid; gap: 1.5rem; margin-bottom: 2rem; } .nwd-categories--cols-2 { grid-template-columns: repeat(2, 1fr); } .nwd-categories--cols-3 { grid-template-columns: repeat(3, 1fr); } .nwd-categories--cols-4 { grid-template-columns: repeat(4, 1fr); } .nwd-category { padding: 1.5rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: var(--bs-border-radius, 0.375rem); transition: border-color 0.2s ease; } .nwd-category:hover { border-color: var(--bs-primary, #0d6efd); } .nwd-category__title { margin-bottom: 0.5rem; } .nwd-category__title a { text-decoration: none; color: inherit; } .nwd-category__title a:hover { color: var(--bs-primary, #0d6efd); } .nwd-category__description { color: var(--bs-secondary-color, #6c757d); font-size: 0.875rem; margin-bottom: 0.5rem; } .nwd-category__count { font-size: 0.8rem; color: var(--bs-secondary-color, #6c757d); } /* Files grid */ .nwd-files { display: grid; gap: 1.5rem; margin-bottom: 2rem; } .nwd-files--cols-2 { grid-template-columns: repeat(2, 1fr); } .nwd-files--cols-3 { grid-template-columns: repeat(3, 1fr); } .nwd-files--cols-4 { grid-template-columns: repeat(4, 1fr); } /* File card */ .nwd-file { padding: 1.5rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: var(--bs-border-radius, 0.375rem); display: flex; flex-direction: column; } /* ── Icon badge (card list + detail view) ──────────────────────────────── */ .nwd-file__icon-badge, .nwd-detail__icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--nwd-color-primary-soft, #e9f5f2); color: var(--nwd-color-primary, #2f6f5e); font-size: 1.25rem; margin-bottom: 0.75rem; } .nwd-file__title { margin-bottom: 0.5rem; font-size: 1.125rem; } .nwd-file__title a { text-decoration: none; color: inherit; } .nwd-file__title a:hover { color: var(--bs-primary, #0d6efd); } .nwd-file__brief { color: var(--bs-secondary-color, #6c757d); font-size: 0.875rem; margin-bottom: 1rem; flex-grow: 1; } .nwd-file__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.8rem; color: var(--bs-secondary-color, #6c757d); } .nwd-file__meta-item { display: inline-flex; align-items: center; gap: 0.25rem; } .nwd-file__actions { margin-top: auto; } .nwd-file__download-btn { display: inline-flex; align-items: center; gap: 0.5rem; } /* File detail */ .nwd-detail__description { margin-bottom: 2rem; line-height: 1.7; } .nwd-detail__meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; background: var(--bs-tertiary-bg, #f8f9fa); border-radius: var(--bs-border-radius, 0.375rem); } /* Filter bar */ .nwd-filter { margin-bottom: 2rem; padding: 1rem; background: var(--bs-tertiary-bg, #f8f9fa); border-radius: var(--bs-border-radius, 0.375rem); } .nwd-filter__form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; } .nwd-filter__field { flex: 1 1 200px; } /* Download modal */ .nwd-download-modal__form { padding: 1rem 0; } /* Pagination */ .nwd-pagination { margin-top: 2rem; } /* Responsive */ @media (max-width: 768px) { .nwd-categories--cols-2, .nwd-categories--cols-3, .nwd-categories--cols-4, .nwd-files--cols-2, .nwd-files--cols-3, .nwd-files--cols-4 { grid-template-columns: 1fr; } } @media (min-width: 769px) and (max-width: 991px) { .nwd-categories--cols-3, .nwd-categories--cols-4, .nwd-files--cols-3, .nwd-files--cols-4 { grid-template-columns: repeat(2, 1fr); } } /* ── Category / downloads overview view ─────────────────────────────── */ .downloads { background: var(--downloads-page-bg, #FFFFFF); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .downloads-container { max-width: var(--downloads-container-width, 1280px); margin: 0 auto; padding: 32px 24px 48px; } /* Header */ .downloads-header { margin-bottom: 24px; } .downloads-title { margin: 0 0 8px; font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--downloads-text-primary, #1F2937); letter-spacing: -0.01em; } .downloads-intro { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--downloads-text-secondary, #6B7280); } .downloads-intro p { margin: 0; } /* Search bar */ .downloads-search { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 32px; align-items: center; } .downloads-search-field { position: relative; } .downloads-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--downloads-text-muted, #9CA3AF); font-size: 16px; pointer-events: none; } .downloads-search input[type="search"], .downloads-search input[type="text"] { width: 100%; height: var(--downloads-search-height, 48px); padding: 0 16px 0 42px; border: 1px solid var(--downloads-border-color, #E5E7EB); border-radius: 6px; font-size: 15px; color: var(--downloads-text-primary, #1F2937); background: var(--downloads-card-bg, #FFFFFF); outline: none; -webkit-appearance: none; box-sizing: border-box; } .downloads-search input::placeholder { color: var(--downloads-text-muted, #9CA3AF); } .downloads-search input:focus { border-color: var(--downloads-primary-color, #B55B6B); box-shadow: 0 0 0 3px rgba(181, 91, 107, 0.12); } .downloads-search-button { height: var(--downloads-search-height, 48px); padding: 0 24px; border: none; border-radius: var(--downloads-button-radius, 6px); background: var(--downloads-primary-color, #B55B6B); color: #fff; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 0.15s; } .downloads-search-button:hover { background: var(--downloads-primary-hover, #A64E5E); color: #fff; text-decoration: none; } .downloads-search-button i { font-size: 16px; } /* Secondary filter row (tags + clear) */ .downloads-filter-secondary { display: flex; align-items: center; gap: 12px; margin-top: -20px; margin-bottom: 24px; flex-wrap: wrap; } .downloads-filter-select { height: 38px; padding: 0 12px; border: 1px solid var(--downloads-border-color, #E5E7EB); border-radius: 6px; font-size: 14px; color: var(--downloads-text-primary, #1F2937); background: var(--downloads-card-bg, #FFFFFF); cursor: pointer; } .downloads-filter-clear { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--downloads-text-muted, #9CA3AF); text-decoration: none; } .downloads-filter-clear:hover { color: var(--downloads-primary-color, #B55B6B); } /* Grid */ .downloads-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .downloads-grid--cols-1 { grid-template-columns: 1fr; } .downloads-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 991px) { .downloads-grid, .downloads-grid--cols-2, .downloads-grid--cols-3 { grid-template-columns: 1fr; gap: 16px; } } /* Download card */ .download-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--downloads-border-color, #E5E7EB); border-radius: var(--downloads-card-radius, 8px); background: var(--downloads-card-bg, #FFFFFF); box-shadow: var(--downloads-card-shadow, 0 8px 22px rgba(0,0,0,0.06)); transition: box-shadow 0.15s; } .download-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10); } /* Icon badge (card context) */ .download-card-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--downloads-icon-badge-size, 48px); height: var(--downloads-icon-badge-size, 48px); border-radius: 999px; background: var(--downloads-primary-light, #F6E9ED); color: var(--downloads-primary-color, #B55B6B); flex-shrink: 0; margin-bottom: 16px; } .download-card-icon i { font-size: 22px; } .download-card-title { margin: 0 0 8px; color: var(--downloads-text-primary, #1F2937); font-size: 20px; line-height: 1.4; font-weight: 700; } .download-card-title a { color: inherit; text-decoration: none; } .download-card-title a:hover { color: var(--downloads-primary-color, #B55B6B); } .download-card-description { color: var(--downloads-text-secondary, #6B7280); font-size: 15px; line-height: 1.8; flex-grow: 1; } .download-card-description p:last-child { margin-bottom: 0; } /* Divider — description flex-grows above, keeping meta+button at the bottom */ .download-card-divider { margin: 16px 0; border: 0; border-top: 1px solid var(--downloads-border-color, #E5E7EB); } /* Meta */ .download-card-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; color: var(--downloads-text-secondary, #6B7280); font-size: 14px; } .download-card-meta i { color: var(--downloads-text-muted, #9CA3AF); } /* Card buttons — base */ .download-card-button { height: var(--downloads-search-height, 48px); width: 100%; padding: 0 20px; border-radius: var(--downloads-button-radius, 6px); border: 1px solid transparent; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; box-sizing: border-box; } .download-card-button i { font-size: 16px; } /* Free / primary — centred */ .download-card-button--free { background: var(--downloads-primary-color, #B55B6B); color: #fff; border-color: var(--downloads-primary-color, #B55B6B); } .download-card-button--free:hover { background: var(--downloads-primary-hover, #A64E5E); border-color: var(--downloads-primary-hover, #A64E5E); color: #fff; text-decoration: none; } /* Paid / secondary — label left, price pill right */ .download-card-button--paid { background: var(--downloads-button-alt-bg, #FBF6F6); color: var(--downloads-text-primary, #1F2937); border-color: #EED9DE; justify-content: space-between; } .download-card-button--paid:hover { background: var(--downloads-primary-light, #F6E9ED); color: var(--downloads-text-primary, #1F2937); text-decoration: none; } /* Icon + label group inside paid button */ .download-card-button-label { display: inline-flex; align-items: center; gap: 10px; } /* form wrapper inherits full width */ .download-card .nwd-order-form { display: block; } /* Price pill */ .download-price-pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 999px; background: var(--downloads-text-primary, #1F2937); color: #ffffff; font-size: 14px; font-weight: 700; white-space: nowrap; } /* Mobile */ @media (max-width: 767px) { .downloads-container { padding: 24px 16px 36px; } .downloads-title { font-size: 26px; } .downloads-search { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; } .downloads-search-button { justify-content: center; } .download-card { padding: 20px; } } /* ── Checkout view ───────────────────────────────────────────────────── */ .nwd-checkout { max-width: var(--nwd-page-max-width, 900px); margin: 0 auto; color: var(--nwd-color-text, #1f2933); font-size: 0.95rem; } /* Success alert */ .nwd-alert-success { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem 1.25rem; border: 1px solid var(--nwd-color-success-border, #b7dfca); border-radius: var(--nwd-card-radius, 6px); background: var(--nwd-color-success-soft, #e9f7ef); color: var(--nwd-color-success-dark, #157347); margin-bottom: 1.25rem; } .nwd-alert-success__icon { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--nwd-color-success, #198754); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; } .nwd-alert-success__body { flex: 1; } .nwd-alert-success__title { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.15rem; } .nwd-alert-success__text { font-size: 0.875rem; margin: 0; color: var(--nwd-color-success-dark, #157347); } .nwd-alert-success__close { background: none; border: none; color: inherit; opacity: 0.5; cursor: pointer; padding: 0; font-size: 0.9rem; line-height: 1; flex-shrink: 0; align-self: center; transition: opacity 0.15s; } .nwd-alert-success__close:hover { opacity: 1; } /* Generic alerts (processing / failed / cancelled / pending) */ .nwd-alert { display: flex; align-items: center; gap: 0.6rem; padding: 0.875rem 1.25rem; border-radius: var(--nwd-card-radius, 6px); margin-bottom: 1.25rem; font-size: 0.9rem; } .nwd-alert--info { background: #e8f4fd; border: 1px solid #bee3f8; color: #1a5276; } .nwd-alert--danger { background: #fdf2f2; border: 1px solid #f5c6c6; color: #7b1a1a; } .nwd-alert--muted { background: #f5f5f5; border: 1px solid #d9d9d9; color: #555; } .nwd-alert--warning { background: #fefce8; border: 1px solid #fde68a; color: #7d5a00; } /* Summary card */ .nwd-summary-card { background: var(--nwd-color-card-bg, #ffffff); border: 1px solid var(--nwd-color-border, #dde2e6); border-radius: var(--nwd-card-radius, 6px); box-shadow: var(--nwd-card-shadow, 0 8px 22px rgba(0,0,0,0.08)); overflow: hidden; margin-bottom: 1.25rem; } /* 2-column grid on desktop — each row holds 2 summary items side by side */ .nwd-summary-col { display: grid; grid-template-columns: 1fr 1fr; } .nwd-summary-item { display: grid; grid-template-columns: 44px 1fr 1fr; align-items: center; gap: 0; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--nwd-color-border-soft, #edf0f3); border-right: 1px solid var(--nwd-color-border-soft, #edf0f3); } /* right column: no right border */ .nwd-summary-item:nth-child(2n) { border-right: none; } /* last row (items 3 & 4): no bottom border */ .nwd-summary-item:nth-last-child(-n+2) { border-bottom: none; } /* mobile: single column, 4 rows */ @media (max-width: 575px) { .nwd-summary-col { grid-template-columns: 1fr; } .nwd-summary-item { border-right: none; border-bottom: 1px solid var(--nwd-color-border-soft, #edf0f3); } .nwd-summary-item:last-child { border-bottom: none; } } .nwd-summary-item__icon { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--nwd-color-primary-soft, #e9f5f2); color: var(--nwd-color-primary, #2f6f5e); font-size: 0.8rem; } .nwd-summary-item__label { font-size: 0.82rem; color: var(--nwd-color-muted, #5f6b76); font-weight: 500; } .nwd-summary-item__value { font-size: 0.95rem; font-weight: 500; color: var(--nwd-color-text, #1f2933); text-align: right; } .nwd-summary-item__value a { color: var(--nwd-color-primary, #2f6f5e); text-decoration: underline; text-underline-offset: 2px; } /* Status badges */ .nwd-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .nwd-badge--success { background: var(--nwd-color-success-soft, #e9f7ef); color: var(--nwd-color-success-dark, #157347); } .nwd-badge--danger { background: #fdf2f2; color: #b91c1c; } .nwd-badge--muted { background: #f1f3f5; color: #495057; } .nwd-badge--warning { background: #fefce8; color: #7d5a00; } /* Details / intake card */ .nwd-details-card { background: var(--nwd-color-card-bg, #ffffff); border: 1px solid var(--nwd-color-border, #dde2e6); border-radius: var(--nwd-card-radius, 6px); box-shadow: var(--nwd-card-shadow, 0 8px 22px rgba(0,0,0,0.08)); overflow: hidden; margin-bottom: 1.25rem; } .nwd-details-header { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.25rem; background: linear-gradient(90deg, var(--nwd-color-primary-soft, #e9f5f2), #ffffff); border-bottom: 1px solid var(--nwd-color-primary-border, #b7d8d2); } .nwd-details-header__icon { flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--nwd-color-primary-panel, #d4ede8); color: var(--nwd-color-primary, #2f6f5e); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; } .nwd-details-header__title { font-size: 1rem; font-weight: 600; margin: 0 0 0.1rem; color: var(--nwd-color-text, #1f2933); } .nwd-details-header__subtitle { font-size: 0.82rem; color: var(--nwd-color-muted, #5f6b76); margin: 0; } .nwd-details-body { padding: 1.25rem 1.5rem; } .nwd-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin-bottom: 1.25rem; } @media (max-width: 767px) { .nwd-details-grid { grid-template-columns: 1fr; } } .nwd-details-fields { display: flex; flex-direction: column; gap: 0.875rem; } .nwd-details-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding-top: 0.5rem; } /* Form elements */ .nwd-field { display: flex; flex-direction: column; gap: 0.3rem; } .nwd-label { font-size: 0.85rem; font-weight: 500; color: var(--nwd-color-text, #1f2933); } .nwd-required { color: #dc2626; margin-left: 0.1rem; } .nwd-input { width: 100%; padding: 0.5rem 0.75rem; background: var(--nwd-color-input-bg, #ffffff); border: 1px solid var(--nwd-color-input-border, #cfd6dd); border-radius: var(--nwd-input-radius, 4px); font-size: 0.9rem; color: var(--nwd-color-text, #1f2933); transition: border-color 0.15s; outline: none; } .nwd-input:focus { border-color: var(--nwd-color-input-focus, #2f6f5e); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nwd-color-input-focus, #2f6f5e) 15%, transparent); } .nwd-field-hint { font-size: 0.78rem; color: var(--nwd-color-muted, #5f6b76); } /* Upload dropzone */ .nwd-upload-col { display: flex; flex-direction: column; gap: 0.35rem; } .nwd-upload-zone { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; border: 2px dashed var(--nwd-upload-border, #cccccc); border-radius: var(--nwd-card-radius, 6px); background: var(--nwd-upload-bg, #ffffff); padding: 1.5rem 1rem; text-align: center; cursor: pointer; position: relative; transition: border-color 0.2s, background 0.2s; } .nwd-upload-zone:hover, .nwd-upload-zone--dragover { border-color: var(--nwd-color-primary, #2f6f5e); background: var(--nwd-color-primary-soft, #e9f5f2); } .nwd-upload-zone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .nwd-upload-zone__icon { font-size: 1.75rem; color: var(--nwd-upload-icon, #2f6f5e); } .nwd-upload-zone__hint { font-size: 0.8rem; color: var(--nwd-color-muted, #5f6b76); margin: 0; } .nwd-upload-zone__sep { font-size: 0.75rem; color: var(--nwd-color-muted, #5f6b76); } .nwd-upload-zone__btn { position: relative; display: inline-block; background: var(--nwd-btn-primary-bg, #2f6f5e); color: var(--nwd-btn-primary-text, #ffffff); border-radius: var(--nwd-button-radius, 4px); padding: 0.35rem 1rem; font-size: 0.82rem; font-weight: 500; pointer-events: none; z-index: 1; } .nwd-upload-zone__meta { font-size: 0.75rem; color: var(--nwd-color-muted, #5f6b76); } .nwd-upload-preview { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--nwd-color-success, #198754); background: var(--nwd-color-success-soft, #e9f7ef); border: 1px solid var(--nwd-color-success-border, #b7dfca); border-radius: var(--nwd-button-radius, 4px); padding: 0.4rem 0.75rem; } .nwd-upload-preview__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nwd-color-text, #1f2933); } .nwd-upload-preview__remove { background: none; border: none; color: var(--nwd-color-muted, #5f6b76); cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; padding: 0; transition: color 0.15s; } .nwd-upload-preview__remove:hover { color: #dc2626; } /* Buttons */ .nwd-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.4rem; font-size: 0.9rem; font-weight: 500; border-radius: var(--nwd-button-radius, 4px); cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; border: 1px solid transparent; line-height: 1.4; } .nwd-btn-primary { background: var(--nwd-btn-primary-bg, #2f6f5e); color: var(--nwd-btn-primary-text, #ffffff); border-color: var(--nwd-btn-primary-border, #2f6f5e); } .nwd-btn-primary:hover { background: var(--nwd-btn-primary-hover-bg, #245a4b); border-color: var(--nwd-btn-primary-hover-bg, #245a4b); color: var(--nwd-btn-primary-text, #ffffff); text-decoration: none; } .nwd-btn-secondary { background: var(--nwd-btn-secondary-bg, #ffffff); color: var(--nwd-btn-secondary-text, #2f6f5e); border-color: var(--nwd-btn-secondary-border, #2f6f5e); } .nwd-btn-secondary:hover { background: var(--nwd-btn-secondary-hover-bg, #e9f5f2); color: var(--nwd-btn-secondary-text, #2f6f5e); text-decoration: none; } .nwd-btn-download { background: var(--nwd-btn-download-bg, #ffffff); color: var(--nwd-btn-download-text, #198754); border-color: var(--nwd-btn-download-border, #198754); padding: 0.65rem 1.75rem; font-size: 0.95rem; } .nwd-btn-download:hover { background: var(--nwd-btn-download-hover-bg, #198754); border-color: var(--nwd-btn-download-hover-bg, #198754); color: #ffffff; text-decoration: none; } /* Download section */ .nwd-download-section { margin: 1.25rem 0; } /* Pay Now form (pending state) */ .nwd-pay-form { margin-top: 1rem; } /* Info note */ .nwd-info-note { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.83rem; color: var(--nwd-color-muted, #5f6b76); margin-top: 0.75rem; } .nwd-info-note i { margin-top: 0.1rem; flex-shrink: 0; } /* Intake / multi-line fields: guarantee a taller, resizable textarea regardless of template height overrides — min-height beats a smaller fixed height. */ .nwd-view textarea.nwd-input, .nwd-details-body textarea, .nwd-request-form textarea, .nwd-view textarea.form-control { min-height: 8rem; resize: vertical; }