.gallery-modal { background-color: rgb(0 0 0 / 70%); } .gallery-modal__dialog { max-width: 460px; } .gallery-modal__content { position: relative; border: none; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.24)); padding: clamp(1.5rem, 4vw, 2rem); } .gallery-modal__close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 9999px; background: var(--color-bg, #fafafa); color: var(--color-text, #212529); font-size: 1.1rem; cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out; } .gallery-modal__close:hover { background: var(--color-canon-red-soft, rgba(200, 16, 46, 0.1)); color: var(--color-canon-red-alt, #df1f26); } .gallery-modal__icon { display: block; margin: 0 auto 1rem; font-size: 2.5rem; color: var(--color-canon-red-alt, #df1f26); } .gallery-modal__icon--success { color: #06a10b; } .gallery-modal__title { margin: 0 0 1rem; font-family: var(--font-heading); font-weight: var(--fw-bold, 700); font-size: var(--fs-xl, 1.5rem); color: var(--color-text-dark, #343a40); } .gallery-modal__quote { margin: 0 0 1.25rem; padding: 0.75rem 1rem; background: #f2f2f2; border-radius: var(--radius-md, 8px); font-family: var(--font-body); font-size: var(--fs-sm, 0.875rem); font-style: italic; color: var(--color-text, #212529); text-align: left; } .gallery-modal__error { margin: 0 0 1rem; font-family: var(--font-body); font-size: var(--fs-sm, 0.875rem); color: #c8102e; } .gallery-modal__success-text { margin: 0 0 1.25rem; font-family: var(--font-body); font-size: var(--fs-base, 1rem); color: var(--color-text-dark, #343a40); } .gallery-modal__actions { display: flex; gap: 0.75rem; } .gallery-modal__actions--single { justify-content: center; } .gallery-modal__btn { flex: 1; padding: 0.75rem; border-radius: var(--radius-md, 8px); border: none; font-family: var(--font-body); font-weight: var(--fw-semibold, 600); font-size: var(--fs-base, 1rem); cursor: pointer; transition: background-color 150ms ease-out; } .gallery-modal__actions--single .gallery-modal__btn { flex: 0 1 220px; } .gallery-modal__btn--ghost { background: var(--color-bg, #fafafa); color: var(--color-text-dark, #343a40); } .gallery-modal__btn--ghost:hover { background: var(--color-border, #e5e5e5); } .gallery-modal__btn--primary { background: var(--color-canon-red-alt, #df1f26); color: var(--color-white, #fff); } .gallery-modal__btn--primary:hover { background: var(--color-canon-red-hover, #ef534f); }