/* * Fase 5.16 — "Contraté a este profesional" button + confirm modal + "Contratado" * badge, inside the client's "Propuestas recibidas" block. Same minimal pattern * as assets/css/review-form.css (Fase 5.11): structure only, inherits * typography/color from listinghive. */ /* * Same root cause as review-form.css: HiveTheme's `.hp-button`/`.button` author * CSS wins over the user-agent `[hidden] { display: none }` rule, so * .prop('hidden', true) does not actually hide these without an explicit * override. The modal is reparented to at runtime (hiring.js), so an * explicit selector for the relocated modal is included too. */ .ms-hire-action [hidden], .ms-hire-modal [hidden] { display: none !important; } /* Layout: sits in the same .ms-proposals-received-actions flex row as the chat * / review buttons (see proposal-form.css). `display: contents` lifts the hire * button itself into that row, like `.ms-review-action` does. */ .ms-proposals-received-actions > .ms-hire-action { flex: 1 1 auto; display: contents; } .ms-hire-open-button { width: 100%; cursor: pointer; } .ms-hire-badge { display: inline-block; padding: 0.15em 0.6em; border-radius: 999px; background: #1a7f37; color: #fff; font-size: 0.85em; font-weight: 600; line-height: 1.5; } .ms-hire-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); padding: 1em; } .ms-hire-modal[hidden] { display: none; } .ms-hire-modal-inner { position: relative; background: #fff; color: #333; border-radius: 6px; padding: 1.5em; max-width: 480px; width: 100%; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .ms-hire-modal-close { position: absolute; top: 0.4em; right: 0.6em; background: none; border: none; font-size: 1.6em; line-height: 1; cursor: pointer; color: #999; } .ms-hire-warning { margin: 0.75em 0 1em; } .ms-hire-errors:not(:empty) { color: #c00; margin-bottom: 0.75em; } .ms-hire-buttons { display: flex; gap: 0.5em; flex-wrap: wrap; } .ms-hire-buttons > .ms-hire-cancel-button, .ms-hire-buttons > .ms-hire-confirm-button { flex: 1 1 auto; } @media (max-width: 480px) { .ms-hire-modal-inner { padding: 1.1em; } }