/* The creation flow in the language of "Start your Magoo" (create-start.css,
   #379; Javier, 2026-10-24): title on the left in one row with the X, the
   same X everywhere (44 px, light grey circle, thin stroke), no line under
   the title, 24 px padding and 24 px between blocks, 28 px corners, the red
   pill as the main button, secondary actions in navy with one look.
   Used by: Your image (target-adjustment), What do you want to show?
   (magoo-add-content), Name your Magoo + Make it a gift (magoo-naming,
   gift-flow) and Place my video (place-content). Visual only. */

/* Header: title left, X right, one row. */
.flow-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.custom-modal .flow-title { display: block; width: auto; height: auto; margin: 0; flex: 1 1 auto; min-width: 0; text-align: left; font-weight: 700; color: #0F133A; }
.flow-close { flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #F2F2F2; color: #0F133A; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 1; }
.flow-close:focus-visible { outline: 2px solid #0F133A; outline-offset: 2px; }

/* Main button: the red pill (Place my video's Continue). */
.custom-modal .flow-primary, .flow-primary { display: block; width: 100%; min-height: 48px; margin: 0; padding: 10px 20px; border: 0; border-radius: 24px; background: #CC0000; color: #fff; font-size: 17px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.flow-primary:disabled { opacity: .55; cursor: wait; }

/* Secondary actions (Reset, Level up): navy text, one look on every screen. */
.custom-modal .flow-secondary, .flow-secondary { min-height: 44px; margin: 0; padding: 4px 12px; border: 0; background: none; color: #0F133A; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.flow-secondary:hover, .flow-secondary:focus { color: #0F133A; }

/* ---- What do you want to show? ---- */
#add-magoo-modal .modal-upload-resources { width: min(400px, calc(100vw - 32px)); }
#add-magoo-modal .modal-content { border-radius: 28px; }
.custom-modal #add-magoo-modal .modal-body.flow-body, .custom-modal .modal-body.flow-body { border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 24px; }
#add-magoo-modal .modal-promotional-img-container { height: auto; max-height: 350px; }
#add-magoo-modal .modal-img-target { max-height: 350px; }
#add-magoo-modal .modal-magoo-description-container { margin: 0; }
/* The five kinds: drawn as Camera and Gallery are (create-start.css): the
   icon, which carries its own #F5F5F5 circle, at 80 % inside a circle of the
   same grey, smaller so five fit in a row; every label on the same line. */
#add-magoo-modal .modal-grid-types-resources { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#add-magoo-modal .modal-grid-types-resources > label, #add-magoo-modal .modal-grid-types-resources > .modal-types-resources-magoo { margin: 0; min-width: 0; }
#add-magoo-modal .modal-type-resource-container { max-width: none; align-items: center; gap: 8px; }
.flow-kind-circle { width: 56px; height: 56px; border-radius: 50%; background: #F5F5F5; display: flex; align-items: center; justify-content: center; flex: none; }
#add-magoo-modal .flow-kind-circle .modal-resource-img { width: 45px; height: 45px; margin: 0; object-fit: contain; }
#add-magoo-modal .modal-resource-text { margin: 0; line-height: 18px; white-space: nowrap; }

/* ---- Last thing!... Name your Magoo ---- */
#maggo-name-modal .modal-content { border-radius: 28px; }
#maggo-name-modal .modal-body.flow-body { gap: 24px; }
#maggo-name-modal .flow-title { line-height: 1.25; }
#maggo-name-modal .custom-input.bg-light { margin: 0 auto; }
#maggo-name-modal .flow-name-field { margin: 0; }
#maggo-name-modal #magoo-naming:empty { display: none; }
#maggo-name-modal .gift-section { margin: 0; }